Add custom CSS wrapper component

package-lock.json

@@ -15,7 +15,7 @@
 				"@sealcode/add-to-head": "^1.0.0",
 				"@sealcode/crud-ui": "^0.0.17",
 				"@sealcode/file-manager": "^1.0.2",
-				"@sealcode/jdd": "^0.7.3",
+				"@sealcode/jdd": "^0.7.4",
 				"@sealcode/jdd-editor": "^0.1.20",
 				"@sealcode/sealgen": "^0.17.27",
 				"@sealcode/simplemde": "^1.12.1",
@@ -939,9 +939,9 @@
 			}
 		},
 		"node_modules/@sealcode/jdd": {
-			"version": "0.7.3",
+			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.3.tgz",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.4.tgz",
-			"integrity": "sha512-OZJDBLt7MMr/PGKfGQxEhLl+7wG2sw0jxHJr4PW0SLrPizT2NGHJGsyDK2eR1ZsNPm+Bukim8V2Q4M1gACYtWg==",
+			"integrity": "sha512-awIxh2o5xklnba4n89MHSL+YTcg+0RaSFicug0XBsha5xUlhc6KLFIBFNRSQiq06rowUMAwCdhGayrza4XWcEw==",
 			"dependencies": {
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/ts-predicates": "^0.5.3",

package.json

@@ -80,7 +80,7 @@
 		"@sealcode/add-to-head": "^1.0.0",
 		"@sealcode/crud-ui": "^0.0.17",
 		"@sealcode/file-manager": "^1.0.2",
-		"@sealcode/jdd": "^0.7.3",
+		"@sealcode/jdd": "^0.7.4",
 		"@sealcode/jdd-editor": "^0.1.20",
 		"@sealcode/sealgen": "^0.17.27",
 		"@sealcode/simplemde": "^1.12.1",

src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css

@@ -0,0 +1,2 @@
+.custom-css-wrapper {
+}

src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx

@@ -0,0 +1,36 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { v4 as uuid } from "uuid";
+
+const component_arguments = {
+	custom_css: new ComponentArguments.ShortText(),
+	content: new ComponentArguments.NestedComponent(),
+} as const;
+
+export class CustomCssWrapper extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { custom_css, content },
+		classes,
+		jdd_context,
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		const unique_class = `css-wrapper--${uuid()}`;
+		return (
+			<div class={["custom-css-wrapper", unique_class, ...classes]}>
+				{
+					/* HTML */ `<style>
+						.${unique_class}{ ${custom_css}  }
+					</style>`
+				}
+				{ComponentArguments.NestedComponent.render({
+					jdd_context,
+					data: content as Record<string, unknown>,
+				})}
+			</div>
+		);
+	}
+}

src/back/jdd-components/split-view/split-view.jdd.tsx

@@ -42,16 +42,16 @@ export class SplitView extends Component<typeof component_arguments> {
 			<div class={["split-view", ...classes]}>
 				<div class="split-view__wrapper">
 					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render(
+						{ComponentArguments.NestedComponent.render({
 							jdd_context,
-							component1 as Record<string, unknown>
+							data: component1 as Record<string, unknown>,
-						)}
+						})}
 					</div>
 					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render(
+						{ComponentArguments.NestedComponent.render({
 							jdd_context,
-							component2 as Record<string, unknown>
+							data: component2 as Record<string, unknown>,
-						)}
+						})}
 					</div>
 				</div>
 			</div>