@kwiz/fluentui 1.0.73 → 1.0.75

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

@@ -1,182 +1,182 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { ArrowMaximize16Regular, ArrowMinimize16Regular, Dismiss16Regular, Save16Regular } from '@fluentui/react-icons';
-import { isObject } from '@kwiz/common';
-import JoditEditor, { Jodit } from "jodit-react";
-import React, { useRef } from 'react';
-import { ButtonEX, ButtonEXProps } from '../button';
-import { Section } from '../section';
-import { IconToSVG } from '../svg';
-
-//const logger = GetLogger("html-editor");
-
-const useStyles = makeStyles({
-    htmlDiv: {
-        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
-        padding: tokens.spacingHorizontalS,
-        minHeight: `100px`
-    }
-});
-
-interface IProps {
-    value?: string;
-    /** get notified as soon as user is out of the control */
-    onChange?: (value: string) => void;
-    /** add a save button and get the value once the user clicks save, close the editor after */
-    onSave?: (value: string) => void;
-    /** add a cancel button to close this editor */
-    onCancel?: () => void;
-    readonly?: boolean;
-    css?: string[];
-    /** render a smaller toolbar */
-    smallToolbar?: boolean;
-    /** show a div, click on it to render the editor */
-    editOnDemand?: boolean;
-
-    /** all designers */
-    kitchensink?: boolean;
-    speech?: boolean;
-    spellcheck?: boolean;
-    table?: boolean;
-    media?: boolean;
-    source?: boolean;
-    /**
-     * true: render the control in full screen
-     * button: render only a button that opens the editor in full screen
-     */
-    fullScreen?: boolean | ButtonEXProps;
-}
-type JoditExpanded = Jodit & {//& IViewBased<IViewOptions>
-    //value: string;
-    kwizInstance: {
-        props: IProps,
-        setShowFullScreen: (value: boolean) => void;
-    }
-};
-
-const saveIcon = IconToSVG(<Save16Regular title='Save' />);
-const cancelIcon = IconToSVG(<Dismiss16Regular title='Cancel' />);
-const maxIcon = IconToSVG(<ArrowMaximize16Regular title='Maximize' />);
-const minIcon = IconToSVG(<ArrowMinimize16Regular title='Minimize' />);
-export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const classes = useStyles();
-    const [active, setActive] = React.useState(false);
-    const [showFullScreen, setShowFullScreen] = React.useState(false);
-
-
-    //quill react demos: https://codesandbox.io/examples/package/react-quill
-    const editorRef = useRef<JoditExpanded>(null);
-
-    const extraConfig = {
-        uploader: {
-            insertImageAsBase64URI: true,
-            toolbarStickyOffset: 30,
-        },
-        autofocus: props.editOnDemand || showFullScreen,
-    };
-
-    const fullScreenButton = isObject(props.fullScreen) ? props.fullScreen as ButtonEXProps : null;
-
-    const options = props.kitchensink ? {
-        speech: true,
-        spellcheck: true,
-        table: true,
-        media: true,
-        source: true,
-        fullScreen: true
-    } : props
-
-
-    Jodit.defaultOptions.controls.save = {
-        template: () => saveIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);
-            view.kwizInstance.props.onSave?.(view.value);
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-    Jodit.defaultOptions.controls.cancel = {
-        template: () => cancelIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onCancel?.();
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-    Jodit.defaultOptions.controls.maximize = {
-        template: () => maxIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);//pass value from smaller editor to bigger one
-            view.kwizInstance.setShowFullScreen(true);
-        }
-    };
-    Jodit.defaultOptions.controls.minimize = {
-        template: () => minIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-
-    const minimalToolbar = !showFullScreen && options.fullScreen;
-    const buttons = (minimalToolbar
-        ? `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}maximize,bold,ul,ol`//inline, with full screen option - show very minimal toolbar
-        : `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}${options.fullScreen && (showFullScreen
-            ? fullScreenButton ? 'save,' : 'minimize,'//when in full screen, if we don't have a small editor but just a button - change the minimize button to save&close button
-            : 'maximize,')}${(props.onSave || props.onCancel || options.fullScreen) && '|,'}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, '');
-    const removeButtons: string[] = minimalToolbar
-        //some buttons must be explicitly removed
-        ? ["strikethrough", "italic", "eraser", "font", "fontsize", "paragraph", "lineHeight", "brush", "underline"]
-        : undefined;
-
-    const config = {
-        ...extraConfig,
-        readonly: props.readonly,
-        inline: true,
-        statusbar: false,
-        toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle",
-        buttons, removeButtons,
-        toolbarAdaptive: !minimalToolbar,
-        // events: {
-        //     afterInit: (view: IViewBasedExpanded) => {
-        //         view.kwizInstance = {
-        //             props: props,
-        //             setShowFullScreen: setShowFullScreen
-        //         };
-        //     }
-        // }
-    };
-    const editorElement = <JoditEditor key={"the-editor"}
-        {...({
-            editorRef: (view: JoditExpanded) => {
-                //expand it for toolbar buttons
-                view.kwizInstance = {
-                    props: props,
-                    setShowFullScreen: setShowFullScreen
-                };
-                editorRef.current = view;
-            }
-        })}
-        value={props.value || ""}
-        config={{ ...config as any }}
-        onBlur={newContent => {
-            props.onChange?.(newContent);
-            setActive(false);
-        }} // preferred to use only this option to update the content for performance reasons
-    //onChange={newContent => {            }}
-    />;
-
-    return (showFullScreen
-        ? <Section fullscreen="portal">
-            {editorElement}
-        </Section>
-        : fullScreenButton
-            ? <ButtonEX {...fullScreenButton} onClick={() => {
-                setShowFullScreen(true);
-            }} />
-            : props.editOnDemand && !active
-                ? <div className={classes.htmlDiv} dangerouslySetInnerHTML={{ __html: props.value || "" }}
-                    tabIndex={0} onFocus={() => setActive(true)}
-                    onClick={() => setActive(true)} />
-                : editorElement
-    );
-}
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { ArrowMaximize16Regular, ArrowMinimize16Regular, Dismiss16Regular, Save16Regular } from '@fluentui/react-icons';
+import { isObject } from '@kwiz/common';
+import JoditEditor, { Jodit } from "jodit-react";
+import React, { useRef } from 'react';
+import { ButtonEX, ButtonEXProps } from '../button';
+import { Section } from '../section';
+import { IconToSVG } from '../svg';
+
+//const logger = GetLogger("html-editor");
+
+const useStyles = makeStyles({
+    htmlDiv: {
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
+        padding: tokens.spacingHorizontalS,
+        minHeight: `100px`
+    }
+});
+
+interface IProps {
+    value?: string;
+    /** get notified as soon as user is out of the control */
+    onChange?: (value: string) => void;
+    /** add a save button and get the value once the user clicks save, close the editor after */
+    onSave?: (value: string) => void;
+    /** add a cancel button to close this editor */
+    onCancel?: () => void;
+    readonly?: boolean;
+    css?: string[];
+    /** render a smaller toolbar */
+    smallToolbar?: boolean;
+    /** show a div, click on it to render the editor */
+    editOnDemand?: boolean;
+
+    /** all designers */
+    kitchensink?: boolean;
+    speech?: boolean;
+    spellcheck?: boolean;
+    table?: boolean;
+    media?: boolean;
+    source?: boolean;
+    /**
+     * true: render the control in full screen
+     * button: render only a button that opens the editor in full screen
+     */
+    fullScreen?: boolean | ButtonEXProps;
+}
+type JoditExpanded = Jodit & {//& IViewBased<IViewOptions>
+    //value: string;
+    kwizInstance: {
+        props: IProps,
+        setShowFullScreen: (value: boolean) => void;
+    }
+};
+
+const saveIcon = IconToSVG(<Save16Regular title='Save' />);
+const cancelIcon = IconToSVG(<Dismiss16Regular title='Cancel' />);
+const maxIcon = IconToSVG(<ArrowMaximize16Regular title='Maximize' />);
+const minIcon = IconToSVG(<ArrowMinimize16Regular title='Minimize' />);
+export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const classes = useStyles();
+    const [active, setActive] = React.useState(false);
+    const [showFullScreen, setShowFullScreen] = React.useState(false);
+
+
+    //quill react demos: https://codesandbox.io/examples/package/react-quill
+    const editorRef = useRef<JoditExpanded>(null);
+
+    const extraConfig = {
+        uploader: {
+            insertImageAsBase64URI: true,
+            toolbarStickyOffset: 30,
+        },
+        autofocus: props.editOnDemand || showFullScreen,
+    };
+
+    const fullScreenButton = isObject(props.fullScreen) ? props.fullScreen as ButtonEXProps : null;
+
+    const options = props.kitchensink ? {
+        speech: true,
+        spellcheck: true,
+        table: true,
+        media: true,
+        source: true,
+        fullScreen: true
+    } : props
+
+
+    Jodit.defaultOptions.controls.save = {
+        template: () => saveIcon,
+        exec: (view: JoditExpanded) => {
+            view.kwizInstance.props.onChange?.(view.value);
+            view.kwizInstance.props.onSave?.(view.value);
+            view.kwizInstance.setShowFullScreen(false);
+        }
+    };
+    Jodit.defaultOptions.controls.cancel = {
+        template: () => cancelIcon,
+        exec: (view: JoditExpanded) => {
+            view.kwizInstance.props.onCancel?.();
+            view.kwizInstance.setShowFullScreen(false);
+        }
+    };
+    Jodit.defaultOptions.controls.maximize = {
+        template: () => maxIcon,
+        exec: (view: JoditExpanded) => {
+            view.kwizInstance.props.onChange?.(view.value);//pass value from smaller editor to bigger one
+            view.kwizInstance.setShowFullScreen(true);
+        }
+    };
+    Jodit.defaultOptions.controls.minimize = {
+        template: () => minIcon,
+        exec: (view: JoditExpanded) => {
+            view.kwizInstance.props.onChange?.(view.value);
+            view.kwizInstance.setShowFullScreen(false);
+        }
+    };
+
+    const minimalToolbar = !showFullScreen && options.fullScreen;
+    const buttons = (minimalToolbar
+        ? `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}maximize,bold,ul,ol`//inline, with full screen option - show very minimal toolbar
+        : `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}${options.fullScreen && (showFullScreen
+            ? fullScreenButton ? 'save,' : 'minimize,'//when in full screen, if we don't have a small editor but just a button - change the minimize button to save&close button
+            : 'maximize,')}${(props.onSave || props.onCancel || options.fullScreen) && '|,'}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, '');
+    const removeButtons: string[] = minimalToolbar
+        //some buttons must be explicitly removed
+        ? ["strikethrough", "italic", "eraser", "font", "fontsize", "paragraph", "lineHeight", "brush", "underline"]
+        : undefined;
+
+    const config = {
+        ...extraConfig,
+        readonly: props.readonly,
+        inline: true,
+        statusbar: false,
+        toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle",
+        buttons, removeButtons,
+        toolbarAdaptive: !minimalToolbar,
+        // events: {
+        //     afterInit: (view: IViewBasedExpanded) => {
+        //         view.kwizInstance = {
+        //             props: props,
+        //             setShowFullScreen: setShowFullScreen
+        //         };
+        //     }
+        // }
+    };
+    const editorElement = <JoditEditor key={"the-editor"}
+        {...({
+            editorRef: (view: JoditExpanded) => {
+                //expand it for toolbar buttons
+                view.kwizInstance = {
+                    props: props,
+                    setShowFullScreen: setShowFullScreen
+                };
+                editorRef.current = view;
+            }
+        })}
+        value={props.value || ""}
+        config={{ ...config as any }}
+        onBlur={newContent => {
+            props.onChange?.(newContent);
+            setActive(false);
+        }} // preferred to use only this option to update the content for performance reasons
+    //onChange={newContent => {            }}
+    />;
+
+    return (showFullScreen
+        ? <Section fullscreen="portal">
+            {editorElement}
+        </Section>
+        : fullScreenButton
+            ? <ButtonEX {...fullScreenButton} onClick={() => {
+                setShowFullScreen(true);
+            }} />
+            : props.editOnDemand && !active
+                ? <div className={classes.htmlDiv} dangerouslySetInnerHTML={{ __html: props.value || "" }}
+                    tabIndex={0} onFocus={() => setActive(true)}
+                    onClick={() => setActive(true)} />
+                : editorElement
+    );
+}

package/src/controls/index.ts

@@ -1,33 +1,33 @@
-export * from './accordion';
-export * from './button';
-export * from './canvas/DrawPad';
-export * from './card';
-export * from './card-list';
-export * from './centered';
-export * from './ColorPickerDialog';
-export * from './date';
-export * from './diagram-picker';
-export * from './divider';
-export * from './dropdown';
-export * from './error-boundary';
-export * from './field-editor';
-export * from './file-upload';
-export * from './horizontal';
-export * from './html-editor/editor';
-export * from './input';
-export * from './kwizoverflow';
-export * from './list';
-export * from './loading';
-export * from './menu';
-export * from './merge-text';
-export * from './please-wait';
-export * from './progress-bar';
-export * from './prompt';
-export * from './qrcode';
-export * from './search';
-export * from './section';
-export * from './svg';
-export * from './toolbar';
-export * from './vertical';
-export * from './vertical-content';
-
+export * from './accordion';
+export * from './button';
+export * from './canvas/DrawPad';
+export * from './card';
+export * from './card-list';
+export * from './centered';
+export * from './ColorPickerDialog';
+export * from './date';
+export * from './diagram-picker';
+export * from './divider';
+export * from './dropdown';
+export * from './error-boundary';
+export * from './field-editor';
+export * from './file-upload';
+export * from './horizontal';
+export * from './html-editor/editor';
+export * from './input';
+export * from './kwizoverflow';
+export * from './list';
+export * from './loading';
+export * from './menu';
+export * from './merge-text';
+export * from './please-wait';
+export * from './progress-bar';
+export * from './prompt';
+export * from './qrcode';
+export * from './search';
+export * from './section';
+export * from './svg';
+export * from './toolbar';
+export * from './vertical';
+export * from './vertical-content';
+