@kwiz/fluentui/dist/controls/html-editor/editor.js

KWIZ common controls for FluentUI

import { jsx as _jsx } from "react/jsx-runtime";
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 } 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`
    }
});
const saveIcon = IconToSVG(_jsx(Save16Regular, { title: 'Save' }));
const cancelIcon = IconToSVG(_jsx(Dismiss16Regular, { title: 'Cancel' }));
const maxIcon = IconToSVG(_jsx(ArrowMaximize16Regular, { title: 'Maximize' }));
const minIcon = IconToSVG(_jsx(ArrowMinimize16Regular, { title: 'Minimize' }));
export const HtmlEditor = (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(null);
    const extraConfig = {
        uploader: {
            insertImageAsBase64URI: true,
            toolbarStickyOffset: 30,
        },
        autofocus: props.editOnDemand || showFullScreen,
    };
    const fullScreenButton = isObject(props.fullScreen) ? props.fullScreen : 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) => {
            var _a, _b, _c, _d;
            (_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, view.value);
            (_d = (_c = view.kwizInstance.props).onSave) === null || _d === void 0 ? void 0 : _d.call(_c, view.value);
            view.kwizInstance.setShowFullScreen(false);
        }
    };
    Jodit.defaultOptions.controls.cancel = {
        template: () => cancelIcon,
        exec: (view) => {
            var _a, _b;
            (_b = (_a = view.kwizInstance.props).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a);
            view.kwizInstance.setShowFullScreen(false);
        }
    };
    Jodit.defaultOptions.controls.maximize = {
        template: () => maxIcon,
        exec: (view) => {
            var _a, _b;
            (_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, view.value); //pass value from smaller editor to bigger one
            view.kwizInstance.setShowFullScreen(true);
        }
    };
    Jodit.defaultOptions.controls.minimize = {
        template: () => minIcon,
        exec: (view) => {
            var _a, _b;
            (_b = (_a = view.kwizInstance.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, 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 = minimalToolbar
        //some buttons must be explicitly removed
        ? ["strikethrough", "italic", "eraser", "font", "fontsize", "paragraph", "lineHeight", "brush", "underline"]
        : undefined;
    const config = Object.assign(Object.assign({}, extraConfig), { readonly: props.readonly, inline: true, statusbar: false, toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle", buttons, removeButtons, toolbarAdaptive: !minimalToolbar });
    const editorElement = _jsx(JoditEditor, Object.assign({}, ({
        editorRef: (view) => {
            //expand it for toolbar buttons
            view.kwizInstance = {
                props: props,
                setShowFullScreen: setShowFullScreen
            };
            editorRef.current = view;
        }
    }), { value: props.value || "", config: Object.assign({}, config), onBlur: newContent => {
            var _a;
            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newContent);
            setActive(false);
        } }), "the-editor");
    return (showFullScreen
        ? _jsx(Section, { fullscreen: "portal", children: editorElement })
        : fullScreenButton
            ? _jsx(ButtonEX, Object.assign({}, fullScreenButton, { onClick: () => {
                    setShowFullScreen(true);
                } }))
            : props.editOnDemand && !active
                ? _jsx("div", { className: classes.htmlDiv, dangerouslySetInnerHTML: { __html: props.value || "" }, tabIndex: 0, onFocus: () => setActive(true), onClick: () => setActive(true) })
                : editorElement);
};
//# sourceMappingURL=editor.js.map