@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
130 lines • 6.62 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { makeStyles, Skeleton, tokens } from '@fluentui/react-components';
import { ArrowMaximize16Regular, ArrowMinimize16Regular, Dismiss16Regular, Save16Regular } from '@fluentui/react-icons';
import { isNullOrUndefined, isObject } from '@kwiz/common';
import JoditEditor, { Jodit } from "jodit-react";
import React, { useEffect, useRef, useState } from 'react';
import { useEffectOnlyOnMount } from '../../helpers';
import { ButtonEX } from '../button';
import { Section } from '../section';
import { IconToSVGAsync } from '../svg';
const useStyles = makeStyles({
htmlDiv: {
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
padding: tokens.spacingHorizontalS,
minHeight: `100px`
}
});
const saveIconPromise = IconToSVGAsync(_jsx(Save16Regular, { title: 'Save' }));
const cancelIconPromise = IconToSVGAsync(_jsx(Dismiss16Regular, { title: 'Cancel' }));
const maxIconPromise = IconToSVGAsync(_jsx(ArrowMaximize16Regular, { title: 'Maximize' }));
const minIconPromise = IconToSVGAsync(_jsx(ArrowMinimize16Regular, { title: 'Minimize' }));
export const HtmlEditor = (props) => {
const classes = useStyles();
const [active, setActive] = React.useState(false);
const [showFullScreen, setShowFullScreen] = React.useState(false);
const [icons, setIcons] = useState(null);
useEffect(() => {
Promise.all([saveIconPromise,
cancelIconPromise,
maxIconPromise,
minIconPromise]).then(values => {
setIcons({
saveIcon: values[0],
cancelIcon: values[1],
maxIcon: values[2],
minIcon: values[3]
});
});
}, useEffectOnlyOnMount);
//quill react demos: https://codesandbox.io/examples/package/react-quill
const editorRef = useRef(null);
if (isNullOrUndefined(icons))
return _jsx(Skeleton, {});
const { saveIcon, cancelIcon, maxIcon, minIcon } = icons;
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,align,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