"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioButton = exports.ToolbarSettingsRender = exports.ToolbarSettings = exports.RichTextEditorToolsRender = exports.RichTextEditorRender = exports.INLINE_STYLES = exports.ALIGN_STYLES = exports.BLOCK_TYPES = exports.ToolButton = exports.AnchorButton = exports.ImageUpload = exports.RichTextEditor = exports.plugins = exports.AlignmentTool = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const draft_js_1 = require("draft-js");
const html_to_draftjs_1 = tslib_1.__importDefault(require("html-to-draftjs"));
const draftjs_to_html_1 = tslib_1.__importDefault(require("draftjs-to-html"));
const jspdf_1 = tslib_1.__importDefault(require("jspdf"));
const editor_1 = tslib_1.__importStar(require("@draft-js-plugins/editor"));
const image_1 = tslib_1.__importDefault(require("@draft-js-plugins/image"));
const alignment_1 = tslib_1.__importDefault(require("@draft-js-plugins/alignment"));
const focus_1 = tslib_1.__importDefault(require("@draft-js-plugins/focus"));
const resizeable_1 = tslib_1.__importDefault(require("@draft-js-plugins/resizeable"));
const drag_n_drop_1 = tslib_1.__importDefault(require("@draft-js-plugins/drag-n-drop"));
const drag_n_drop_upload_1 = tslib_1.__importDefault(require("@draft-js-plugins/drag-n-drop-upload"));
const anchor_1 = tslib_1.__importDefault(require("@draft-js-plugins/anchor"));
const react_color_1 = require("react-color");
const html2canvas_1 = tslib_1.__importDefault(require("html2canvas"));
require("draft-js/dist/Draft.css");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const H1Icon_1 = require("./Icon/H1Icon");
const H2Icon_1 = require("./Icon/H2Icon");
const H3Icon_1 = require("./Icon/H3Icon");
const UndoIcon_1 = require("./Icon/UndoIcon");
const RedoIcon_1 = require("./Icon/RedoIcon");
const core_1 = require("@material-ui/core");
const TextCenterAlignIcon_1 = require("./Icon/TextCenterAlignIcon");
const TextLeftAlignIcon_1 = require("./Icon/TextLeftAlignIcon");
const TextRightAlignIcon_1 = require("./Icon/TextRightAlignIcon");
const BoldIcon_1 = require("./Icon/BoldIcon");
const ItalicIcon_1 = require("./Icon/ItalicIcon");
const UnderlineIcon_1 = require("./Icon/UnderlineIcon");
const DeletedTextIcon_1 = require("./Icon/DeletedTextIcon");
const ColorPickerIcon_1 = require("./Icon/ColorPickerIcon");
const DotListIcon_1 = require("./Icon/DotListIcon");
const NumberListIcon_1 = require("./Icon/NumberListIcon");
const TableIcon_1 = require("./Icon/TableIcon");
const QuoteIcon_1 = require("./Icon/QuoteIcon");
const ImageIcon_1 = require("./Icon/ImageIcon");
const CodeIcon_1 = require("./Icon/CodeIcon");
const ToolbarSettingIcon_1 = require("./Icon/ToolbarSettingIcon");
const quote_svg_1 = tslib_1.__importDefault(require("../assets/images/icons/RichText/quote.svg"));
const CopyGrayIcon_1 = require("./Icon/CopyGrayIcon");
const CutGrayIcon_1 = require("./Icon/CutGrayIcon");
const PasteGrayIcon_1 = require("./Icon/PasteGrayIcon");
const DeleteGrayIcon_1 = require("./Icon/DeleteGrayIcon");
const DropdownOpenIcon_1 = require("./Icon/DropdownOpenIcon");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const UISwitch_1 = require("./BuildlingBlocks/UISwitch");
const focusPlugin = (0, focus_1.default)();
const resizeablePlugin = (0, resizeable_1.default)();
const blockDndPlugin = (0, drag_n_drop_1.default)();
const alignmentPlugin = (0, alignment_1.default)();
exports.AlignmentTool = alignmentPlugin.AlignmentTool;
const decorator = (0, editor_1.composeDecorators)(resizeablePlugin.decorator, alignmentPlugin.decorator, focusPlugin.decorator, blockDndPlugin.decorator);
const imagePlugin = (0, image_1.default)({ decorator });
const linkPlugin = (0, anchor_1.default)();
const dragNDropFileUploadPlugin = (0, drag_n_drop_upload_1.default)({
    handleUpload: () => {
        return "";
    },
    addImage: (editorState, placeholderSrc) => {
        if (typeof placeholderSrc === "string") {
            let url = placeholderSrc;
            return imagePlugin.addImage(editorState, url, { url });
        }
        else if (placeholderSrc instanceof ArrayBuffer) {
            return imagePlugin.addImage(editorState, "", { placeholderSrc });
        }
        return editorState;
    },
});
exports.plugins = [
    dragNDropFileUploadPlugin,
    blockDndPlugin,
    focusPlugin,
    alignmentPlugin,
    resizeablePlugin,
    imagePlugin,
    linkPlugin,
];
class RichTextEditor extends react_1.default.Component {
    editor = null;
    plugins;
    constructor(props) {
        super(props);
        this.plugins = exports.plugins;
        const styleMap = {
            CODE: {
                backgroundColor: "rgba(0, 0, 0, 0.05)",
                fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
                fontSize: 16,
                padding: 2,
            },
            STRIKETHROUGH: {
                textDecoration: "line-through",
            },
            UNDERLINE: {
                textDecoration: "underline",
            },
            "fontfamily-inter": {
                fontFamily: UIStyleConstants_1.UIStyleConstants.FONT_FAMILY,
            },
            "fontfamily-mulish": {
                fontFamily: UIStyleConstants_1.UIStyleConstants.FONT_FAMILY,
            },
        };
        for (let i = 0; i < 16; i++) {
            styleMap[`fontsize-${8 + i}`] = {
                fontSize: `${8 + i}px`,
            };
        }
        for (let i = 0; i < 8; i++) {
            styleMap[`fontweight-${(i + 1) * 100}`] = {
                fontWeight: (i + 1) * 100,
            };
        }
        let editorState;
        if (this.props.value !== undefined && typeof this.props.value !== "string") {
            let rawState = this.props.value;
            editorState = draft_js_1.EditorState.createWithContent((0, draft_js_1.convertFromRaw)(rawState));
            for (let block of rawState.blocks) {
                for (let style of block.inlineStyleRanges) {
                    if (style.style.startsWith("color-")) {
                        styleMap[style.style] = {
                            color: `${style.style.replace("color-", "")}`,
                        };
                    }
                }
            }
        }
        else {
            const blocksFromHtml = (0, html_to_draftjs_1.default)(this.props.value || "", (nodeName, element) => {
                let color = element.style?.color;
                if (color && color !== "") {
                    color = color.replaceAll(", ", ",");
                    styleMap[`color-${color}`] = {
                        color: `${color}`,
                    };
                }
                return this.getEntityType(nodeName, element, this);
            });
            const { contentBlocks, entityMap } = blocksFromHtml;
            const contentState = draft_js_1.ContentState.createFromBlockArray(contentBlocks, entityMap);
            editorState = props.value ? draft_js_1.EditorState.createWithContent(contentState) : draft_js_1.EditorState.createEmpty();
        }
        this.state = {
            editorState: editorState,
            styleMap: styleMap,
            showSettingsDialog: false,
            toolbarSettings: {
                view: "editor",
                toolbar: "top",
                showToolbar: true,
            },
            hideTools: false,
        };
    }
    componentDidMount() {
        Reflect.set(window, "html2canvas", html2canvas_1.default);
    }
    // eslint-disable-next-line
    getEntityType(_nodeName, _element, _self) {
        return undefined;
    }
    getCurrentHTML = () => {
        const rawContentState = (0, draft_js_1.convertToRaw)(this.state.editorState.getCurrentContent());
        const html = (0, draftjs_to_html_1.default)(rawContentState);
        return html;
    };
    onChange = (editorState) => {
        this.setState({
            editorState: editorState,
        });
        if (this.props.updateCallback) {
            const html = this.getCurrentHTML();
            this.props.updateCallback(html);
        }
    };
    undoAction = () => {
        this.onChange(draft_js_1.EditorState.undo(this.state.editorState));
    };
    redoAction = () => {
        this.onChange(draft_js_1.EditorState.redo(this.state.editorState));
    };
    toggleBlockType = (style) => {
        this.onChange(draft_js_1.RichUtils.toggleBlockType(this.state.editorState, style));
    };
    toggleInlineStyle = (style) => {
        this.onChange(draft_js_1.RichUtils.toggleInlineStyle(this.state.editorState, style));
    };
    handleKeyCommand = (command) => {
        if (command === "tab_command") {
            this.props.tabCommand && this.props.tabCommand();
            return "handled";
        }
        return "not-handled";
    };
    getBlockStyle = (block) => {
        switch (block.getType()) {
            case "blockquote":
                return "RichEditor-blockquote";
            case "TEXTLEFT":
                return "RichEditor-block-align-left";
            case "TEXTRIGHT":
                return "RichEditor-block-align-right";
            case "TEXTCENTER":
                return "RichEditor-block-align-center";
            default:
                return "";
        }
    };
    toggleColor = (toggledColor, selection) => {
        const styleMap = { ...this.state.styleMap };
        styleMap[`color-${toggledColor}`] = {
            color: toggledColor,
        };
        this.setState({
            styleMap: {
                ...styleMap,
            },
        });
        this.onChange(draft_js_1.EditorState.forceSelection(this.state.editorState, selection));
        this.toggleInlineStyle(`color-${toggledColor}`);
    };
    focus = () => {
        this.editor?.focus();
    };
    exportPDF = () => {
        const doc = new jspdf_1.default();
        doc.html(this.getCurrentHTML(), {
            width: 170,
            callback: (pdf) => {
                pdf.save(`${this.props.exportFileName || "output"}.pdf`);
            },
        });
    };
    renderToolbar() {
        const { editorState, toolbarSettings } = this.state;
        const currentStyle = editorState.getCurrentInlineStyle();
        const selection = editorState.getSelection();
        const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
        if (this.props.hideTools || this.state.hideTools)
            return null;
        return ((0, jsx_runtime_1.jsxs)(exports.RichTextEditorToolsRender, { "data-testid": "RichEditor-toolbar", readOnly: this.props.readOnly, children: [(0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", children: (0, jsx_runtime_1.jsxs)(ButtonsGroup, { showIcon: (0, jsx_runtime_1.jsx)(CopyGrayIcon_1.CopyGrayIcon, {}), toolbarSettings: toolbarSettings, children: [(0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.undoAction, "data-testid": "btn-richeditor-undo", children: (0, jsx_runtime_1.jsx)(CopyGrayIcon_1.CopyGrayIcon, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo", children: (0, jsx_runtime_1.jsx)(CutGrayIcon_1.CutGrayIcon, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo", children: (0, jsx_runtime_1.jsx)(PasteGrayIcon_1.PasteGrayIcon, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo", children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", children: (0, jsx_runtime_1.jsxs)("div", { className: "RichEditor-tools", children: [(0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.undoAction, "data-testid": "btn-richeditor-undo", children: (0, jsx_runtime_1.jsx)(UndoIcon_1.UndoIcon, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", onClick: this.redoAction, "data-testid": "btn-richeditor-redo", children: (0, jsx_runtime_1.jsx)(RedoIcon_1.RedoIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", "data-testid": "blockStyles", children: (0, jsx_runtime_1.jsxs)("div", { className: "RichEditor-tools", children: [(0, jsx_runtime_1.jsxs)(core_1.Select, { native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontfamily-${event.target.value}`);
                                }, variant: "outlined", children: [(0, jsx_runtime_1.jsx)("option", { value: "inter", children: "Inter" }), (0, jsx_runtime_1.jsx)("option", { value: "mulish", children: "Mulish" })] }), (0, jsx_runtime_1.jsx)(core_1.Select, { native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontsize-${event.target.value}`);
                                }, variant: "outlined", children: Array.apply(8, Array(16)).map((_, idx) => ((0, jsx_runtime_1.jsx)("option", { value: 8 + idx, children: 8 + idx }, idx))) }), (0, jsx_runtime_1.jsxs)(core_1.Select, { native: true, classes: {
                                    root: "RichEditor-styleSelect",
                                    icon: "RichEditor-styleSelectIcon",
                                }, onChange: (event) => {
                                    this.toggleInlineStyle(`fontweight-${event.target.value}`);
                                }, variant: "outlined", children: [(0, jsx_runtime_1.jsx)("option", { value: 100, children: "Thin" }), (0, jsx_runtime_1.jsx)("option", { value: 200, children: "Extra Light" }), (0, jsx_runtime_1.jsx)("option", { value: 300, children: "Light" }), (0, jsx_runtime_1.jsx)("option", { value: 400, children: "Regular" }), (0, jsx_runtime_1.jsx)("option", { value: 500, children: "Medium" }), (0, jsx_runtime_1.jsx)("option", { value: 600, children: "Semi Bold" }), (0, jsx_runtime_1.jsx)("option", { value: 700, children: "Bold" }), (0, jsx_runtime_1.jsx)("option", { value: 800, children: "Extra Bold" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", "data-testid": "blockStyles", children: (0, jsx_runtime_1.jsx)(ButtonsGroup, { showIcon: exports.BLOCK_TYPES[0].icon, toolbarSettings: toolbarSettings, children: exports.BLOCK_TYPES.map((type) => ((0, jsx_runtime_1.jsx)(exports.ToolButton, { active: type.style === blockType, onToggle: this.toggleBlockType, value: type.style, children: type.icon }, type.style))) }) }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", "data-testid": "blockStyles", children: (0, jsx_runtime_1.jsx)(ButtonsGroup, { showIcon: exports.INLINE_STYLES[0].icon, toolbarSettings: toolbarSettings, children: exports.INLINE_STYLES.map((type) => ((0, jsx_runtime_1.jsx)(exports.ToolButton, { active: currentStyle.has(type.style), onToggle: this.toggleInlineStyle, value: type.style, children: type.icon }, type.style))) }) }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", "data-testid": "blockStyles", children: (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-tools", children: (0, jsx_runtime_1.jsx)(ColorToolButton, { onChange: this.toggleColor, editorState: editorState }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "RichEditor-toolGroup", children: [(0, jsx_runtime_1.jsx)(ButtonsGroup, { showIcon: exports.ALIGN_STYLES[0].icon, toolbarSettings: toolbarSettings, children: exports.ALIGN_STYLES.map((type) => ((0, jsx_runtime_1.jsx)(exports.ToolButton, { active: type.style ===
                                    editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: type.style, children: type.icon }, type.style))) }), (0, jsx_runtime_1.jsxs)(ButtonsGroup, { showIcon: (0, jsx_runtime_1.jsx)(DotListIcon_1.DotListIcon, {}), toolbarSettings: toolbarSettings, children: [(0, jsx_runtime_1.jsx)(exports.ToolButton, { active: "unordered-list-item" ===
                                        editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: "unordered-list-item", children: (0, jsx_runtime_1.jsx)(DotListIcon_1.DotListIcon, {}) }), (0, jsx_runtime_1.jsx)(exports.ToolButton, { active: "ordered-list-item" ===
                                        editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(), onToggle: this.toggleBlockType, value: "ordered-list-item", children: (0, jsx_runtime_1.jsx)(NumberListIcon_1.NumberListIcon, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-tools ImageContent-control", children: (0, jsx_runtime_1.jsx)(exports.AlignmentTool, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "RichEditor-toolGroup", children: (0, jsx_runtime_1.jsxs)("div", { className: "RichEditor-tools", children: [(0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", "data-testid": "btn-richeditor-dot-list", onClick: () => {
                                    this.toggleBlockType("blockquote");
                                }, children: (0, jsx_runtime_1.jsx)(QuoteIcon_1.QuoteIcon, {}) }), (0, jsx_runtime_1.jsx)(exports.ImageUpload, { editorState: editorState, onChange: this.onChange }), (0, jsx_runtime_1.jsx)(exports.AnchorButton, { editorState: editorState, onChange: this.onChange }), (0, jsx_runtime_1.jsx)(exports.ToolButton, { active: currentStyle.has("CODE"), onToggle: this.toggleInlineStyle, value: "CODE", children: (0, jsx_runtime_1.jsx)(CodeIcon_1.CodeIcon, {}) }), (0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton", "data-testid": "btn-richeditor-dot-list", children: (0, jsx_runtime_1.jsx)(TableIcon_1.TableIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(SettingButton, { settings: toolbarSettings, onChange: (setting) => {
                        this.setState({
                            toolbarSettings: { ...setting },
                        });
                    } })] }));
    }
    render() {
        const { editorState, toolbarSettings } = this.state;
        let className = "RichEditor-editor";
        let contentState = editorState.getCurrentContent();
        if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== "unstyled") {
                className += " RichEditor-hidePlaceholder";
            }
        }
        return ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: () => {
                if (this.state.toolbarSettings.view === "click to edit") {
                    this.setState({
                        hideTools: true,
                    });
                }
            }, children: (0, jsx_runtime_1.jsxs)(exports.RichTextEditorRender, { className: "RichEditor-root", "data-testid": "Editor", hideBorder: this.props.hideBorder, children: [toolbarSettings.toolbar !== "bottom" && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.renderToolbar() }), (0, jsx_runtime_1.jsx)("div", { className: className, "data-testid": "editorComponent", onClick: this.focus, children: (0, jsx_runtime_1.jsx)(editor_1.default, { editorState: editorState, onChange: this.onChange, placeholder: this.props.placeholder || "Tell a story...", customStyleMap: this.state.styleMap, spellCheck: true, handleKeyCommand: this.handleKeyCommand, blockStyleFn: this.getBlockStyle, plugins: [...this.plugins, ...(this.props.plugins || [])], ref: (element) => {
                                this.editor = element;
                            }, readOnly: this.props.readOnly, onFocus: () => {
                                if (this.state.hideTools) {
                                    this.setState({
                                        hideTools: false,
                                    });
                                }
                            }, preserveSelectionOnBlur: true }) }), toolbarSettings.toolbar === "bottom" && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.renderToolbar() })] }) }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
    // eslint-disable-next-line
], RichTextEditor.prototype, "getEntityType", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], RichTextEditor.prototype, "renderToolbar", null);
exports.RichTextEditor = RichTextEditor;
const ColorToolButton = ({ onChange, editorState }) => {
    const [color, setColor] = react_1.default.useState(UIStyleConstants_1.UIStyleConstants.BLACK_COLOR);
    const [selection, setSelection] = react_1.default.useState(null);
    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
    const openColorPicker = (event) => {
        event.stopPropagation();
        const sel = editorState.getSelection();
        if (sel) {
            setSelection(sel);
            setAnchorEl(event.currentTarget);
        }
    };
    const closeColorPicker = () => {
        setAnchorEl(null);
        setSelection(null);
    };
    const handleColorChange = (data) => {
        setColor(`rgb(${data.rgb.r},${data.rgb.g},${data.rgb.b})`);
    };
    const onApply = (event) => {
        event.stopPropagation();
        if (selection) {
            onChange(color, selection);
        }
        closeColorPicker();
    };
    const onCancel = (event) => {
        event.stopPropagation();
        closeColorPicker();
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton ColorPicker", onClick: openColorPicker, "data-testid": "styles", children: (0, jsx_runtime_1.jsx)(ColorPickerIcon_1.ColorPickerIcon, {}) }), (0, jsx_runtime_1.jsxs)(ColorPickerRender, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: closeColorPicker, elevation: 0, getContentAnchorEl: null, children: [(0, jsx_runtime_1.jsx)(react_color_1.SketchPicker, { onChange: handleColorChange, color: color || "" }), (0, jsx_runtime_1.jsxs)(StyledButtonGroup, { children: [(0, jsx_runtime_1.jsx)(core_1.Link, { onClick: onCancel, children: "Cancel" }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: onApply, color: "primary", variant: "contained", children: "Apply" })] })] })] }));
};
const ImageUpload = ({ editorState, onChange }) => {
    let fileReader = null;
    const handleFileRead = () => {
        const content = fileReader?.result;
        if (content) {
            let url = null;
            if (typeof content === "string") {
                url = content;
            }
            else if (content instanceof ArrayBuffer) {
                url = "";
            }
            if (url) {
                onChange(imagePlugin.addImage(editorState, url, { url }));
            }
        }
    };
    const handleFileChosen = (file) => {
        fileReader = new FileReader();
        fileReader.onloadend = handleFileRead;
        fileReader.readAsDataURL(file);
    };
    return ((0, jsx_runtime_1.jsxs)("span", { className: "RichEditor-styleButton FileUpload", "data-testid": "btn-richeditor-dot-list", children: [(0, jsx_runtime_1.jsx)(ImageIcon_1.ImageIcon, {}), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (e) => {
                    if (e.target.files) {
                        handleFileChosen(e.target.files[0]);
                    }
                } })] }));
};
exports.ImageUpload = ImageUpload;
const AnchorButton = ({ editorState, onChange }) => {
    const [overrideContent, setOverrideContent] = react_1.default.useState();
    const onOverrideContent = (Content) => {
        if (Content) {
            setOverrideContent(new Content({
                getEditorState: () => editorState,
                setEditorState: onChange,
                onOverrideContent,
            }));
        }
        else {
            setOverrideContent(undefined);
        }
    };
    return ((0, jsx_runtime_1.jsxs)("span", { className: "RichEditor-styleButton Anchor", "data-testid": "btn-richeditor-dot-list", children: [overrideContent && overrideContent, (0, jsx_runtime_1.jsx)(linkPlugin.LinkButton, { onOverrideContent: onOverrideContent })] }));
};
exports.AnchorButton = AnchorButton;
const ToolButton = (props) => {
    const onToggle = (e) => {
        e.preventDefault();
        props.onToggle && props.onToggle(props.value);
    };
    let style;
    let className = `RichEditor-styleButton ${props.className || ""}`;
    if (props.active) {
        className += " RichEditor-activeButton";
    }
    return ((0, jsx_runtime_1.jsx)("span", { className: className, style: style, onMouseDown: onToggle, "data-testid": "styles", children: props.children ? props.children : props.label ? props.label : null }));
};
exports.ToolButton = ToolButton;
exports.BLOCK_TYPES = [
    { icon: (0, jsx_runtime_1.jsx)(H1Icon_1.H1Icon, {}), style: "header-one" },
    { icon: (0, jsx_runtime_1.jsx)(H2Icon_1.H2Icon, {}), style: "header-two" },
    { icon: (0, jsx_runtime_1.jsx)(H3Icon_1.H3Icon, {}), style: "header-three" },
];
exports.ALIGN_STYLES = [
    { icon: (0, jsx_runtime_1.jsx)(TextLeftAlignIcon_1.TextLeftAlignIcon, {}), style: "TEXTLEFT" },
    { icon: (0, jsx_runtime_1.jsx)(TextCenterAlignIcon_1.TextCenterAlignIcon, {}), style: "TEXTCENTER" },
    { icon: (0, jsx_runtime_1.jsx)(TextRightAlignIcon_1.TextRightAlignIcon, {}), style: "TEXTRIGHT" },
];
exports.INLINE_STYLES = [
    { icon: (0, jsx_runtime_1.jsx)(BoldIcon_1.BoldIcon, {}), style: "BOLD" },
    { icon: (0, jsx_runtime_1.jsx)(ItalicIcon_1.ItalicIcon, {}), style: "ITALIC" },
    { icon: (0, jsx_runtime_1.jsx)(UnderlineIcon_1.UnderlineIcon, {}), style: "UNDERLINE" },
    { icon: (0, jsx_runtime_1.jsx)(DeletedTextIcon_1.DeletedTextIcon, {}), style: "STRIKETHROUGH" },
];
exports.RichTextEditorRender = styled_components_1.default.div `
    border: 1px solid ${(props) => (props.hideBorder ? "transparent" : "#f1f1f6")};
    background: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    border-radius: 4px;

    .DraftEditor-root {
        box-sizing: border-box;
        border-radius: 4px;
        padding: 6px 12px;

        img:hover {
            box-shadow: 0 0 0 3px #d2e3f7;
        }
    }

    .public-DraftEditorPlaceholder-root {
        box-sizing: border-box;
    }

    // block

    .RichEditor-block-align-left {
        .public-DraftStyleDefault-block {
            text-align: left;
        }
    }

    .RichEditor-block-align-right {
        .public-DraftStyleDefault-block {
            text-align: right;
        }
    }

    .RichEditor-block-align-center {
        .public-DraftStyleDefault-block {
            text-align: center;
        }
    }

    .RichEditor-blockquote {
        .public-DraftStyleDefault-block {
            padding: 24px;

            > span {
                position: relative;

                &:first-child:before {
                    position: absolute;
                    top: -24px;
                    left: -24px;
                    width: 24px;
                    height: 24px;
                    content: url(${quote_svg_1.default});
                }

                &:last-child:after {
                    position: absolute;
                    content: url(${quote_svg_1.default});
                    top: 100%;
                    right: -24px;
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
`;
exports.RichTextEditorToolsRender = styled_components_1.default.div `
    display: flex;
    align-items: align-items;
    flex-wrap: wrap;

    padding: 8px 4px;

    border-top: 1px solid rgba(39, 41, 50, 0.05);
    border-bottom: 1px solid rgba(39, 41, 50, 0.05);

    max-width: 100%;

    overflow-x: ${(props) => (props.readOnly ? "hidden" : "auto")};

    .RichEditor-toolGroup {
        display: flex;
        align-items: center;
        padding: 4px 12px;

        border-left: 1px solid rgba(39, 41, 50, 0.05);

        &:first-child {
            border-left: none;
        }
    }

    .RichEditor-tools {
        display: flex;
        align-items: center;

        margin-left: 20px;

        &:first-child {
            margin-left: 0;
        }

        &.ImageContent-control {
            > div {
                transform: scale(1) !important;
                display: flex;

                button {
                    background: transparent !important;
                    border: none !important;

                    svg {
                        width: 16px;
                        height: 16px;
                        fill: rgba(39, 41, 50, 0.5);
                    }
                }
            }
        }

        > * {
            margin-left: 4px;

            &:first-child {
                margin-left: 0px;
            }
        }
    }

    .RichEditor-styleSelect {
        padding: 6px 12px;

        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;

        height: auto;

        color: rgba(39, 41, 50, 0.7);

        &.MuiSelect-outlined.MuiSelect-outlined {
            padding-right: 24px;
        }
    }

    .RichEditor-styleSelectIcon.MuiSelect-iconOutlined {
        right: 0;
    }

    .RichEditor-styleButton {
        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
        border: 1px solid transparent;

        &.RichEditor-activeButton {
            border: 1px solid rgba(39, 41, 50, 0.5);
        }

        &.ColorPicker {
            position: relative;
        }

        &.FileUpload {
            position: relative;

            input {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
            }
        }

        &.Anchor {
            position: relative;

            button {
                background: transparent !important;
                border: none !important;

                svg {
                    width: 16px;
                    height: 16px;
                    fill: rgba(39, 41, 50, 0.5);
                }
            }

            input {
                position: absolute !important;
                top: 100%;
                left: 0;
            }
        }

        &.SettingsButton {
            margin-left: auto;
        }

        &:hover {
            border: 1px solid rgba(39, 41, 50, 0.1);
            box-sizing: border-box;
            border-radius: 4px;
        }
    }
`;
const StyledButtonGroup = styled_components_1.default.div `
    background: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;

    > *:first-child {
        margin-right: 10px;
    }
`;
const ColorPickerRender = (0, styled_components_1.default)(core_1.Menu) `
    .MuiMenu-paper {
        background: rgb(255, 255, 255);
        border-radius: 4px;
        box-shadow: rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px;
    }

    .sketch-picker {
        box-shadow: none !important;
    }
`;
const SettingButton = ({ settings, onChange }) => {
    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
    const openSettings = (event) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const closeSettings = () => {
        setAnchorEl(null);
    };
    const onApply = (value) => {
        onChange(value);
        closeSettings();
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "RichEditor-styleButton SettingsButton", "data-testid": "btn-richeditor-setting", onClick: openSettings, children: (0, jsx_runtime_1.jsx)(ToolbarSettingIcon_1.ToolbarSettingIcon, {}) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: closeSettings, anchorOrigin: {
                    vertical: "bottom",
                    horizontal: "right",
                }, elevation: 0, getContentAnchorEl: null, transformOrigin: {
                    vertical: "top",
                    horizontal: "center",
                }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.ToolbarSettings, { value: settings, onChange: onApply }) }) })] }));
};
const ToolbarSettings = ({ onChange, value }) => {
    const [state, setState] = react_1.default.useState(value);
    return ((0, jsx_runtime_1.jsxs)(exports.ToolbarSettingsRender, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h5", classes: { root: "ToolbarSettings-header" }, children: "Toolbar Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "ToolbarSettings-row", children: [(0, jsx_runtime_1.jsx)("label", { className: "ToolbarSettings-label", htmlFor: "toolbar", children: "Toolbar" }), (0, jsx_runtime_1.jsxs)("div", { id: "toolbar", className: "ToolbarSettings-buttonGroup", children: [(0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.toolbar, value: "on edit", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        toolbar: newValue,
                                    });
                                } }), (0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.toolbar, value: "top", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        toolbar: newValue,
                                    });
                                } }), (0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.toolbar, value: "bottom", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        toolbar: newValue,
                                    });
                                } }), (0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.toolbar, value: "collapsed", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        toolbar: newValue,
                                    });
                                } })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ToolbarSettings-row", children: [(0, jsx_runtime_1.jsx)("label", { className: "ToolbarSettings-label", htmlFor: "toolbar", children: "View" }), (0, jsx_runtime_1.jsxs)("div", { id: "View", className: "ToolbarSettings-buttonGroup", children: [(0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.view, value: "editor", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        view: newValue,
                                    });
                                } }), (0, jsx_runtime_1.jsx)(exports.RadioButton, { selected: state.view, value: "click to edit", onSelect: (newValue) => {
                                    setState({
                                        ...state,
                                        view: newValue,
                                    });
                                } })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "ToolbarSettings-row", children: (0, jsx_runtime_1.jsxs)("div", { className: "ToolbarSettings-check", children: [(0, jsx_runtime_1.jsx)("label", { id: "show_toolbar", children: "Ability to show a toolbar" }), (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: state.showToolbar, onSet: (newValue) => {
                                setState({
                                    ...state,
                                    showToolbar: newValue,
                                });
                            } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "ToolbarSettings-row", children: (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => {
                        onChange(state);
                    }, color: "primary", variant: "contained", fullWidth: true, children: "Apply" }) })] }));
};
exports.ToolbarSettings = ToolbarSettings;
exports.ToolbarSettingsRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    padding: 16px 16px 20px;

    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 8px;

    .ToolbarSettings-header {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
    }

    .ToolbarSettings-buttonGroup {
        overflow: hidden;
        display: inline-flex;
        align-items: center;

        border: 1px solid rgba(39, 41, 50, 0.2);
        border-radius: 5px;
    }

    .ToolbarSettings-row {
        margin-top: 16px;

        label {
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0em;
            text-align: left;

            margin-bottom: 4px;
            display: block;
        }

        .ToolbarSettings-check {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
`;
const RadioButton = ({ value, onSelect, selected }) => {
    return ((0, jsx_runtime_1.jsx)(RadioButtonRender, { selected: value === selected, onClick: () => onSelect(value), children: value }));
};
exports.RadioButton = RadioButton;
const RadioButtonRender = styled_components_1.default.div `
    box-sizing: border-box;

    border-left: 1px solid rgba(39, 41, 50, 0.2);
    border-right: 1px solid rgba(39, 41, 50, 0.2);

    cursor: pointer;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-transform: capitalize;
    min-width: 80px;

    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    translation: all 0.1s ease-in;

    ${(props) => props.selected
    ? `
        color: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
        background:  #4050A6;
    `
    : `
        color: rgba(39, 41, 50, 0.7);
        background: #FCFCFE;
    `}
`;
const ButtonsGroup = ({ toolbarSettings, children, showIcon }) => {
    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
    const onClose = () => {
        setAnchorEl(null);
    };
    const onOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: "RichEditor-tools", children: toolbarSettings.toolbar !== "collapsed" ? (children) : ((0, jsx_runtime_1.jsxs)(ButtonsGroupRender, { children: [(0, jsx_runtime_1.jsxs)(ShowButton, { onClick: onOpen, children: [showIcon, " ", (0, jsx_runtime_1.jsx)(DropdownOpenIcon_1.DropdownOpenIcon, {})] }), (0, jsx_runtime_1.jsx)(core_1.Menu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: onClose, anchorOrigin: {
                        vertical: "bottom",
                        horizontal: "center",
                    }, elevation: 0, getContentAnchorEl: null, transformOrigin: {
                        vertical: "top",
                        horizontal: "center",
                    }, children: children.map((item, idx) => ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { onClick: onClose, children: item }, idx))) })] })) }));
};
const ButtonsGroupRender = styled_components_1.default.div ``;
const ShowButton = styled_components_1.default.div `
    display: flex;
    align-items: center;
`;
//# sourceMappingURL=RichTextEditor.js.map