"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const nodes_1 = tslib_1.__importDefault(require("./nodes"));
const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
const LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
const plugins_1 = require("./plugins");
const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    focused: `${constants_1.PREFIX}-focused`,
    toolbar: `${constants_1.PREFIX}-toolbar`,
    content: `${constants_1.PREFIX}-content`,
    placeholder: `${constants_1.PREFIX}-placeholder`,
    actions: `${constants_1.PREFIX}-actions`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => {
        return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
    }
})(({ theme }) => ({}));
const editorTheme = {
    heading: {
        h1: `${constants_1.PREFIX}-h1`,
        h2: `${constants_1.PREFIX}-h2`,
        h3: `${constants_1.PREFIX}-h3`,
        h4: `${constants_1.PREFIX}-h4`,
        h5: `${constants_1.PREFIX}-h5`,
        h6: `${constants_1.PREFIX}-h6`
    },
    link: `${constants_1.PREFIX}-link`,
    list: {
        listitem: `${constants_1.PREFIX}-listItem`,
        nested: {
            listitem: `${constants_1.PREFIX}-nestedListItem`
        },
        olDepth: [`${constants_1.PREFIX}-ol1`, `${constants_1.PREFIX}-ol2`, `${constants_1.PREFIX}-ol3`, `${constants_1.PREFIX}-ol4`, `${constants_1.PREFIX}-ol5`],
        ul: `${constants_1.PREFIX}-ul`
    },
    ltr: `${constants_1.PREFIX}-ltr`,
    paragraph: `${constants_1.PREFIX}-paragraph`,
    image: `${constants_1.PREFIX}-image`,
    quote: `${constants_1.PREFIX}-quote`,
    rtl: `${constants_1.PREFIX}-rtl`,
    text: {
        bold: `${constants_1.PREFIX}-textBold`,
        italic: `${constants_1.PREFIX}-textItalic`,
        strikethrough: `${constants_1.PREFIX}-textStrikethrough`,
        subscript: `${constants_1.PREFIX}-textSubscript`,
        superscript: `${constants_1.PREFIX}-textSuperscript`,
        underline: `${constants_1.PREFIX}-textUnderline`,
        underlineStrikethrough: `${constants_1.PREFIX}-textUnderlineStrikethrough`
    }
};
/**
 * > API documentation for the Community-JS Editor component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a text editor.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Editor)

 #### Import

 ```jsx
 import {Editor} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCEditor` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCEditor-root|Styles applied to the root element.|
 |toolbar|.SCEditor-toolbar|Styles applied to the toolbar element.|
 |content|.SCEditor-content|Styles applied to the content element.|
 |placeholder|.SCEditor-placeholder|Styles applied to the placeholder element.|
 |actions|.SCEditor-actions|Styles applied to the actions section.|

 * @param inProps
 */
const Editor = (inProps, ref) => {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = props;
    const apiRef = (0, react_1.useRef)();
    // STATE
    const [focused, setFocused] = (0, react_1.useState)(false);
    // HANDLERS
    const handleChange = (value) => {
        onChange && onChange(value);
    };
    const handleError = (error, editor) => {
        console.log(error);
    };
    const handleFocus = () => {
        apiRef.current.focus();
    };
    const handleHasFocus = (0, react_1.useCallback)((event) => {
        setFocused(true);
        onFocus && onFocus(event);
    }, [onFocus]);
    const handleHasBlur = (0, react_1.useCallback)((event) => {
        setFocused(false);
        onBlur && onBlur(event);
    }, [onBlur]);
    // EXPOSED METHODS
    (0, react_1.useImperativeHandle)(ref, () => ({
        focus: () => {
            apiRef.current.focus();
        }
    }));
    // RENDER
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    const initialConfig = (0, react_1.useMemo)(() => ({
        namespace: 'LexicalEditor',
        editable: editable,
        onError: handleError,
        nodes: [...nodes_1.default],
        theme: editorTheme
    }), [editable]);
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
};
exports.default = (0, react_1.forwardRef)(Editor);
