@kwiz/fluentui 1.0.33 → 1.0.34

package/dist/controls/html-editor/editor.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface IProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSave?: (value: string) => void;
+    onCancel?: () => void;
+    readonly?: boolean;
+    css?: string[];
+    smallToolbar?: boolean;
+    editOnDemand?: boolean;
+    /** all designers */
+    kitchensink?: boolean;
+    speech?: boolean;
+    spellcheck?: boolean;
+    table?: boolean;
+    media?: boolean;
+    source?: boolean;
+}
+export declare const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/html-editor/editor.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
+import JoditEditor, { Jodit } from "jodit-react";
+import React, { useRef } from 'react';
+import { IconToSVG } from '../svg';
+const useStyles = makeStyles({
+    htmlDiv: {
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        padding: tokens.spacingHorizontalS,
+        minHeight: `100px`
+    }
+});
+export const HtmlEditor = (props) => {
+    const classes = useStyles();
+    const [active, setActive] = React.useState(false);
+    //quill react demos: https://codesandbox.io/examples/package/react-quill
+    const editor = useRef(null);
+    const extraCondig = {
+        uploader: {
+            insertImageAsBase64URI: true,
+            toolbarStickyOffset: 30,
+        },
+        autofocus: props.editOnDemand,
+    };
+    const options = props.kitchensink ? {
+        speech: true,
+        spellcheck: true,
+        table: true,
+        media: true,
+        source: true,
+    } : props;
+    Jodit.defaultOptions.controls.save = {
+        childTemplate: () => IconToSVG(_jsx(SaveRegular, {})),
+        exec: () => {
+            props.onSave(editor.current.value);
+        }
+    };
+    Jodit.defaultOptions.controls.cancel = {
+        childTemplate: () => IconToSVG(_jsx(DismissRegular, {})),
+        exec: () => {
+            props.onCancel();
+        }
+    };
+    return (props.editOnDemand && !active
+        ? _jsx("div", { className: classes.htmlDiv, dangerouslySetInnerHTML: { __html: props.value || "" }, tabIndex: 0, onFocus: () => setActive(true), onClick: () => setActive(true) })
+        : _jsx(JoditEditor, { ref: editor, value: props.value || "", config: Object.assign(Object.assign({}, extraCondig), { readonly: props.readonly, inline: true, statusbar: false, toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle", buttons: `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}${(props.onSave || props.onCancel) && ',|'}bold,italic,underline,strikethrough,|,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,copyformat,brush,eraser,|,${options.media && 'image,video,'}${options.spellcheck && 'spellcheck,'}${options.speech && 'speechRecognize,'}hr,${options.table && 'table,'}link,indent,outdent,${options.source && '---,source,'}`.replace(/undefined/g, '') }), onBlur: newContent => {
+                if (props.onChange)
+                    props.onChange(newContent);
+                setActive(false);
+            } }));
+};
+//# sourceMappingURL=editor.js.map

package/dist/controls/html-editor/editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","sourceRoot":"","sources":["../../../src/controls/html-editor/editor.tsx"],"names":[],"mappings":"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"}

package/dist/controls/svg.d.ts

@@ -20,4 +20,5 @@ export declare const GetSVGLinkIcon: (props: {
 export declare const GetSVGSplitIcon: (props: {
     size: number;
 }) => string;
+export declare function IconToSVG(icon: JSX.Element): string;
 export {};

package/dist/controls/svg.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '@fluentui/react-components';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 export const YouTubeIcon = (props) => {
     return (_jsx("svg", { height: `${props.size}px`, width: `${props.size}px`, version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 461.001 461.001", xmlSpace: "preserve", children: _jsx("g", { children: _jsx("path", { style: { fill: "#F61C0D" }, d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728\nc0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137\nC461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607\nc0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" }) }) }));
 };
@@ -42,4 +44,12 @@ export const GetSVGSplitIcon = (props) => {
 	<path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
 </svg>`;
 };
+export function IconToSVG(icon) {
+    const iconDiv = document.createElement('div');
+    const root = createRoot(iconDiv);
+    flushSync(() => {
+        root.render(icon);
+    });
+    return iconDiv.innerHTML;
+}
 //# sourceMappingURL=svg.js.map

package/dist/controls/svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/controls/svg.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../src/controls/svg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAK9C,MAAM,CAAC,MAAM,WAAW,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC3F,OAAO,CACH,cAAK,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,OAAO,EAAC,KAAK,EAAC,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,4BAA4B,EAAC,UAAU,EAAC,8BAA8B,EAC7J,OAAO,EAAC,qBAAqB,EAAC,QAAQ,EAAC,UAAU,YACjD,sBACI,eAAM,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,EAAC,4XAG2C,GAAE,GACjF,GACF,CACT,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC3F,OAAO,CACH,eAAK,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,mBAAmB,aACpH,yBACI,0BAAQ,+CAA+C,GAAS,GAAO,EAC3E,eAAM,SAAS,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAC,EAAE,EAAC,OAAO,GAAG,EACvE,eAAM,SAAS,EAAC,UAAU,EAAC,CAAC,EAAC,0NAA0N,GAAG,EAC1P,eAAM,SAAS,EAAC,UAAU,EAAC,CAAC,EAAC,yHAAyH,GAAG,EACzJ,eAAM,SAAS,EAAC,UAAU,EAAC,CAAC,EAAC,2HAA2H,GAAG,IACzJ,CACT,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6D,CAAC,KAAK,EAAE,EAAE;IACzF,OAAO,CACH,eAAK,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,uBAAuB,aACxH,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,iRAAiR,GAAG,EAC3S,iBAAQ,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,GAAG,EAC9D,iBAAQ,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,GAAG,EAChE,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,8NAA8N,GAAG,EACxP,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,0PAA0P,GAAG,EAClR,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,4SAA4S,GAAG,EACpU,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,gLAAgL,GAAG,EACxM,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,gLAAgL,GAAG,EACxM,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,2RAA2R,GAAG,EACnT,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,8KAA8K,GAAG,EACtM,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,8KAA8K,GAAG,EACtM,eAAM,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,sIAAsI,GAAG,EAC9J,0BAAgB,EAAE,EAAC,GAAG,EAAC,aAAa,EAAC,gBAAgB,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,WAAW,EAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,EAAC,iBAAiB,EAAC,8BAA8B,aAC1J,eAAM,MAAM,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,GAAG,EACvC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,GAAG,EACxC,eAAM,MAAM,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,GAAG,IAC1B,EACjB,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,uLAAuL,GAAG,EACjN,eAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,mFAAmF,GAAG,IACxG,CACT,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,OAAO,CACH,cAAK,IAAI,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,mBAAmB,YAC1J,sBACI,wBACI,eAAM,CAAC,EAAC,sfAIuB,GAAE,EACjC,eAAM,CAAC,EAAC,0dAIyB,GAAE,IACnC,GACJ,GACF,CACT,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;IACpD,OAAO,cAAK,IAAI,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,YACzJ,eAAM,CAAC,EAAC,yNAAyN,GAAG,GAClO,CAAC;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,OAAO,cAAK,IAAI,EAAE,MAAM,CAAC,uBAAuB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,YAC3J,eAAM,CAAC,EAAC,kvBAAkvB,GAAG,GAC3vB,CAAC;AACX,CAAC,CAAA;AAGD,mBAAmB;AACnB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;IACtD,OAAO,CACH,cAAc,MAAM,CAAC,uBAAuB,aAAa,KAAK,CAAC,IAAI,cAAc,KAAK,CAAC,IAAI;;;;;;;;;;;;;;;eAepF,CACV,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;IACvD,OAAO,cAAc,MAAM,CAAC,uBAAuB,aAAa,KAAK,CAAC,IAAI,cAAc,KAAK,CAAC,IAAI;;OAE/F,CAAC;AACR,CAAC,CAAA;AAED,MAAM,UAAU,SAAS,CAAC,IAAiB;IACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC,SAAS,CAAC;AAC7B,CAAC"}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './controls/error-boundary';
 export * from './controls/field-editor';
 export * from './controls/file-upload';
 export * from './controls/horizontal';
+export * from './controls/html-editor/editor';
 export * from './controls/input';
 export * from './controls/kwizoverflow';
 export * from './controls/list';

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './controls/error-boundary';
 export * from './controls/field-editor';
 export * from './controls/file-upload';
 export * from './controls/horizontal';
+export * from './controls/html-editor/editor';
 export * from './controls/input';
 export * from './controls/kwizoverflow';
 export * from './controls/list';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.33",
+    "version": "1.0.34",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -59,6 +59,7 @@
         "@kwiz/common": "^1.0.83",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",
+        "jodit-react": "^4.1.2",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "resolve-pkg-maps": "^1.0.0"

package/src/controls/html-editor/editor.tsx

@@ -0,0 +1,92 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
+import JoditEditor, { Jodit } from "jodit-react";
+import React, { useRef } from 'react';
+import { IconToSVG } from '../svg';
+
+const useStyles = makeStyles({
+    htmlDiv: {
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        padding: tokens.spacingHorizontalS,
+        minHeight: `100px`
+    }
+});
+
+interface IProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSave?: (value: string) => void;
+    onCancel?: () => void;
+    readonly?: boolean;
+    css?: string[];
+    smallToolbar?: boolean;
+    editOnDemand?: boolean;
+
+    /** all designers */
+    kitchensink?: boolean;
+    speech?: boolean;
+    spellcheck?: boolean;
+    table?: boolean;
+    media?: boolean;
+    source?: boolean;
+
+}
+export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const classes = useStyles();
+    const [active, setActive] = React.useState(false);
+
+    //quill react demos: https://codesandbox.io/examples/package/react-quill
+    const editor = useRef<Jodit>(null);
+
+    const extraCondig = {
+        uploader: {
+            insertImageAsBase64URI: true,
+            toolbarStickyOffset: 30,
+        },
+        autofocus: props.editOnDemand,
+    };
+
+    const options = props.kitchensink ? {
+        speech: true,
+        spellcheck: true,
+        table: true,
+        media: true,
+        source: true,
+    } : props
+
+    Jodit.defaultOptions.controls.save = {
+        childTemplate: () => IconToSVG(<SaveRegular />),
+        exec: () => {
+            props.onSave(editor.current.value);
+        }
+    };
+    Jodit.defaultOptions.controls.cancel = {
+        childTemplate: () => IconToSVG(<DismissRegular />),
+        exec: () => {
+            props.onCancel();
+        }
+    };
+    return (props.editOnDemand && !active
+        ? <div className={classes.htmlDiv} dangerouslySetInnerHTML={{ __html: props.value || "" }}
+            tabIndex={0} onFocus={() => setActive(true)}
+            onClick={() => setActive(true)} />
+        : <JoditEditor
+            ref={editor}
+            value={props.value || ""}
+            config={{
+                ...extraCondig,
+                readonly: props.readonly,
+                inline: true,
+                statusbar: false,
+                toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle",
+                buttons: `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}${(props.onSave || props.onCancel) && ',|'}bold,italic,underline,strikethrough,|,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,copyformat,brush,eraser,|,${options.media && 'image,video,'}${options.spellcheck && 'spellcheck,'}${options.speech && 'speechRecognize,'}hr,${options.table && 'table,'}link,indent,outdent,${options.source && '---,source,'}`.replace(/undefined/g, ''),
+            }}
+            onBlur={newContent => {
+                if (props.onChange)
+                    props.onChange(newContent);
+                setActive(false);
+            }} // preferred to use only this option to update the content for performance reasons
+        //onChange={newContent => {            }}
+        />
+    );
+}

package/src/controls/svg.tsx

@@ -1,5 +1,7 @@
 import { tokens } from '@fluentui/react-components';
 import React from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 interface IProps {
     size: number;
@@ -118,3 +120,12 @@ export const GetSVGSplitIcon = (props: { size: number }) => {
 	<path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
 </svg>`;
 }
+
+export function IconToSVG(icon: JSX.Element) {
+    const iconDiv = document.createElement('div');
+    const root = createRoot(iconDiv);
+    flushSync(() => {
+        root.render(icon);
+    });
+    return iconDiv.innerHTML;
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './controls/error-boundary';
 export * from './controls/field-editor';
 export * from './controls/file-upload';
 export * from './controls/horizontal';
+export * from './controls/html-editor/editor';
 export * from './controls/input';
 export * from './controls/kwizoverflow';
 export * from './controls/list';