"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.turndownService = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const editor_1 = tslib_1.__importDefault(require("@draft-js-plugins/editor"));
const draft_js_1 = require("draft-js");
const TestContext_1 = require("../../CommonUI/Testing/TestContext");
const turndown_1 = tslib_1.__importDefault(require("turndown"));
const RichTextEditor_1 = require("../../CommonUI/RichTextEditor");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const TextMergeCommon_1 = require("../Utilities/TextMergeCommon");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const UndefinedDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/UndefinedDataDefinition");
const ExecutionData_1 = require("@appglue/common/dist/Common/Data/ExecutionData/ExecutionData");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const Link_1 = require("../../CommonUI/BuilderUI/Link");
const OpenBlueIcon_1 = require("../../CommonUI/Icon/OpenBlueIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const VariablePicker_1 = tslib_1.__importDefault(require("../../CommonUI/VariablePicker"));
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const TextMergeConstants_1 = require("@appglue/common/dist/TextMerge/TextMergeConstants");
const TextMergeExportType_1 = require("@appglue/common/dist/TextMerge/TextMergeExportType");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const TextMergeUtility_1 = require("@appglue/common/dist/TextMerge/TextMergeUtility");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const UIStandardLayer_1 = require("../../CommonUI/BuildlingBlocks/UIStandardLayer");
exports.turndownService = new turndown_1.default();
// rename XTextMergeEditor
class TextMergeEditor extends RichTextEditor_1.RichTextEditor {
    static contextType = TestContext_1.TestContext;
    plugins = [...RichTextEditor_1.plugins, TextMergeCommon_1.variableRenderPlugin, TextMergeCommon_1.tempVariableRenderPlugin];
    constructor(props) {
        super(props);
        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 rawState = this.props.definition.value;
        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-", "")}`,
                    };
                }
            }
        }
        for (let entityKey in rawState.entityMap) {
            if (rawState.entityMap[entityKey].type === TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE) {
                let fieldpath = rawState.entityMap[entityKey].data.fieldpath;
                let field;
                try {
                    field = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, fieldpath);
                }
                catch (e) { }
                rawState.entityMap[entityKey].data = {
                    ...rawState.entityMap[entityKey].data,
                    field,
                    onUpdateValue: this.onUpdateValue,
                    showModalWithEntity: this.showModalWithEntity,
                    isValidField: this.isValidField,
                };
            }
        }
        let editorState = draft_js_1.EditorState.createWithContent((0, draft_js_1.convertFromRaw)(rawState));
        this.state = {
            editorState: editorState,
            styleMap: styleMap,
            showSettingsDialog: false,
            toolbarSettings: {
                toolbar: "top",
                view: "editor",
                showToolbar: true,
            },
            hideTools: props.hideTools,
            // spaneditor states
            openVariablePanel: false,
            openVariablePicker: false,
            openPreview: false,
            previewContext: {},
        };
    }
    renderToolbar() {
        if (this.props.definition.outputType === TextMergeExportType_1.XTextMergeExportType.TEXT)
            return null;
        return super.renderToolbar();
    }
    renderListFields = (fields, keys = []) => {
        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(core_1.List, { children: fields.map((f) => {
                    const path = [...keys, f.name || ""].join(".");
                    if (f.type === DataTypes_1.DataTypes.OBJECT) {
                        const subfields = Reflect.get(f, "fields");
                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: path, index: 0, children: (provided, snapshot) => ((0, jsx_runtime_1.jsx)(core_1.ListItem, { button: true, "data-testid": path, ref: provided.innerRef, classes: { root: snapshot.isDragging ? "isDragging" : "" }, ...provided.draggableProps, ...provided.dragHandleProps, children: (0, jsx_runtime_1.jsx)(core_1.ListItemText, { primary: f.name, classes: {
                                                primary: "MuiListItemText-object",
                                            } }) })) }), (0, jsx_runtime_1.jsx)(NestedListWrapper, { children: subfields.length
                                        ? this.renderListFields(subfields, [...keys, f.name || ""])
                                        : null })] }, path));
                    }
                    else {
                        return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: path, index: 0, children: (provided, snapshot) => ((0, jsx_runtime_1.jsxs)(core_1.ListItem, { button: true, "data-testid": path, ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, classes: { root: snapshot.isDragging ? "isDragging" : "" }, children: [(0, jsx_runtime_1.jsx)(core_1.ListItemText, { primary: f.name }), (0, jsx_runtime_1.jsx)(core_1.ListItemText, { secondary: f.type })] })) }));
                    }
                }) }) }));
    };
    getCurrentHTML = () => {
        return TextMergeUtility_1.TextMergeUtility.MergeToHTML(this.state.editorState, new ExecutionData_1.ExecutionData(this.state.previewContext));
    };
    onChange = (editorState) => {
        const currentContentState = this.state.editorState.getCurrentContent();
        let newContentState = editorState.getCurrentContent();
        if (this.props.updateCallback) {
            const html = this.getCurrentHTML();
            this.props.updateCallback(html);
        }
        if (currentContentState !== newContentState) {
            // There was a change in the content
            const selection = this.state.editorState.getSelection();
            const start = selection.getStartOffset();
            const end = selection.getEndOffset();
            const anchorKey = selection.getAnchorKey();
            const currentContentBlock = newContentState.getBlockForKey(anchorKey);
            let entities = [];
            for (let i = start; i < end; i++) {
                let entityKey = currentContentBlock.getEntityAt(i);
                if (entityKey) {
                    entities.push(entityKey);
                }
            }
            const currentStyle = editorState.getCurrentInlineStyle();
            let styles = {};
            if (entities.length) {
                for (let styleKey in this.state.styleMap) {
                    if (currentStyle.has(styleKey)) {
                        styles = {
                            ...styles,
                            ...this.state.styleMap[styleKey],
                        };
                    }
                }
                if (currentStyle.has("BOLD")) {
                    styles = {
                        ...styles,
                        fontWeight: "bold",
                    };
                }
                if (currentStyle.has("ITALIC")) {
                    styles = {
                        ...styles,
                        fontStyle: "italic",
                    };
                }
                if (Object.keys(styles).length > 0) {
                    for (let entityKey of entities) {
                        newContentState = editorState.getCurrentContent();
                        let entity = newContentState.getEntity(entityKey);
                        if (entity.getType() === TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE) {
                            let newContent = newContentState.replaceEntityData(entityKey, {
                                ...entity.getData(),
                                styles,
                            });
                            editorState = draft_js_1.EditorState.createWithContent(newContent);
                        }
                    }
                }
            }
        }
        let rawState = (0, draft_js_1.convertToRaw)(editorState.getCurrentContent());
        this.props.editContext.onTextChange(rawState);
        if (this.props.onChange) {
            this.props.onChange(rawState);
        }
        this.setState({
            editorState: editorState,
        });
        StateManager_1.StateManager.propertyChanged(this.props.definition, "updateMergeText");
    };
    onInsertField = () => {
        const [newEditorState, entityKey] = (0, TextMergeCommon_1.addEntity)(this.state.editorState, TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE, " ", {
            fieldpath: "unset",
            field: new UndefinedDataDefinition_1.UndefinedDataDefinition(),
            onUpdateValue: this.onUpdateValue,
            showModalWithEntity: this.showModalWithEntity,
            isValidField: this.isValidField,
        });
        if (newEditorState) {
            this.setState({ editorState: newEditorState });
            StateManager_1.StateManager.propertyChanged(this.props.definition, "updateMergeText");
            if (entityKey) {
                this.showModalWithEntity(entityKey);
            }
        }
    };
    onCloseOpenVariablePicker = () => {
        let selection = this.state.editorState.getSelection();
        if (this.props.editContext.currentEntity) {
            const entityRange = (0, TextMergeCommon_1.getEntityRange)(this.state.editorState, this.props.editContext.currentEntity);
            const isBackward = selection.getIsBackward();
            if (!entityRange) {
                return;
            }
            if (isBackward) {
                selection = selection.merge({
                    anchorOffset: entityRange.end,
                    focusOffset: entityRange.start,
                });
            }
            else {
                selection = selection.merge({
                    anchorOffset: entityRange.start,
                    focusOffset: entityRange.end,
                });
            }
            let newEditorState = draft_js_1.EditorState.forceSelection(this.state.editorState, selection);
            this.setState({ editorState: newEditorState });
            StateManager_1.StateManager.propertyChanged(this.props.definition, "updateMergeText");
        }
    };
    onUpdateValue = (fieldpath, newValue) => {
        let data = { ...this.state.previewContext };
        DataUtilities_1.DataUtilities.set(data, fieldpath, newValue);
        this.setState({
            previewContext: {
                ...data,
            },
        });
    };
    showModalWithEntity = (entity) => {
        if (entity) {
            const { fieldpath } = this.state.editorState.getCurrentContent().getEntity(entity).getData();
            this.props.editContext.setCurrentField(entity, fieldpath);
            this.setState({
                openVariablePicker: true,
            });
        }
    };
    onCloseVariablePicker = () => {
        this.setState({
            openVariablePicker: false,
            previewContext: {},
        });
    };
    onVariableSet = (path, def) => {
        let changedProperties = ["selected"];
        let newfield;
        let fieldpath = "";
        if (path === "") {
            this.onCloseVariablePicker();
            return;
        }
        if (def) {
            let data = this.props.definition.getInputDefinition();
            if (path !== "") {
                data = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, path);
                fieldpath = `${path}.${def.name}`;
            }
            else {
                fieldpath = def.name;
            }
            data.fields.push(def);
            newfield = def;
        }
        else {
            newfield = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, path);
            fieldpath = path;
        }
        changedProperties.push("data");
        StateManager_1.StateManager.propertiesChanged(this, changedProperties);
        this.setState({
            openVariablePicker: false,
        }, () => {
            let content = this.state.editorState.getCurrentContent();
            if (!this.props.editContext.currentEntity) {
                return this.onCloseOpenVariablePicker();
            }
            let newContent = content.replaceEntityData(this.props.editContext.currentEntity, {
                fieldpath,
                field: newfield,
                onUpdateValue: this.onUpdateValue,
                showModalWithEntity: this.showModalWithEntity,
                isValidField: this.isValidField,
            });
            let newEditorState = draft_js_1.EditorState.createWithContent(newContent);
            this.setState({ editorState: newEditorState });
            this.onCloseOpenVariablePicker();
        });
    };
    isValidField = (fieldpath) => {
        if (!this.props.definition.getInputDefinition()) {
            return false;
        }
        try {
            let field = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, fieldpath);
            if (field.list)
                return false;
            if (field instanceof ObjectDataDefinition_1.ObjectDataDefinition) {
                return false;
            }
            return true;
        }
        catch (e) {
            return false;
        }
    };
    onTogglePanel = () => {
        this.setState({
            openVariablePanel: !this.state.openVariablePanel,
        });
    };
    onOpenPreviewModal = () => {
        this.setState({
            openPreview: true,
        });
    };
    onClosePreviewModal = () => {
        this.setState({
            openPreview: false,
            previewContext: {},
        });
    };
    onDragUpdate = (result) => {
        if (!result.destination) {
            return;
        }
        if (result.source.droppableId === "XTextMerge_SIDEBAR" &&
            result.destination.droppableId === "XTextMergeEditor" &&
            !this.props.editContext.oldEditorState) {
            try {
                let fieldpath = result.draggableId;
                let field = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, fieldpath);
                const [newEditorState] = (0, TextMergeCommon_1.addEntity)(this.state.editorState, TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_TEMP_ENTITY_TYPE, " ", {
                    fieldpath,
                    field,
                });
                if (newEditorState) {
                    this.props.editContext.oldEditorState = this.state.editorState;
                    this.setState({
                        editorState: newEditorState,
                    });
                }
            }
            catch (e) { }
        }
    };
    onDragEnd = (result) => {
        if (!result.destination) {
            if (!!this.props.editContext.oldEditorState) {
                this.setState({
                    editorState: this.props.editContext.oldEditorState,
                });
                this.props.editContext.oldEditorState = undefined;
            }
            return;
        }
        if (result.source.droppableId === "XTextMerge_SIDEBAR" &&
            result.destination.droppableId === "XTextMergeEditor" &&
            !!this.props.editContext.oldEditorState) {
            try {
                let fieldpath = result.draggableId;
                let field = DataUtilities_1.DataUtilities.getFieldFromDataDefinitionByName(this.props.definition.getInputDefinition().fields, fieldpath);
                const [newEditorState] = (0, TextMergeCommon_1.addEntity)(this.props.editContext.oldEditorState, TextMergeConstants_1.TextMergeConstants.MERGE_TEXT_ENTITY_TYPE, " ", {
                    fieldpath,
                    field,
                    onUpdateValue: this.onUpdateValue,
                    showModalWithEntity: this.showModalWithEntity,
                    isValidField: this.isValidField,
                });
                if (newEditorState) {
                    this.setState({ editorState: newEditorState });
                    this.props.editContext.oldEditorState = undefined;
                    StateManager_1.StateManager.propertyChanged(this.props.definition, "updateMergeText");
                }
            }
            catch (e) { }
        }
        else {
            if (this.props.editContext.oldEditorState) {
                this.setState({
                    editorState: this.props.editContext.oldEditorState,
                });
                this.props.editContext.oldEditorState = undefined;
            }
        }
    };
    renderEditor() {
        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";
            }
        }
        if (this.context) {
            return ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditorRender, { className: "RichEditor-root", "data-testid": "Editor", hideBorder: false, children: (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.context || this.props.readOnly, onFocus: () => {
                            this.setState({
                                hideTools: false,
                            });
                        }, preserveSelectionOnBlur: true }) }) }));
        }
        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)(RichTextEditor_1.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)(react_beautiful_dnd_1.Droppable, { droppableId: "XTextMergeEditor", children: (provided) => ((0, jsx_runtime_1.jsx)("div", { className: className, "data-testid": "editorComponent", onClick: this.focus, ref: provided.innerRef, ...provided.droppableProps, 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.context || this.props.readOnly, onFocus: () => {
                                    this.setState({
                                        hideTools: false,
                                    });
                                }, preserveSelectionOnBlur: true }) })) }), toolbarSettings.toolbar === "bottom" && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.renderToolbar() })] }) }));
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.props.editContext, properties: ["currentEntity", "oldEditorState"], control: () => ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd, onDragUpdate: this.onDragUpdate, children: (0, jsx_runtime_1.jsxs)(MergeEditorRender, { children: [this.state.openVariablePanel && ((0, jsx_runtime_1.jsxs)("div", { className: "MergeEditor-variablePanel", children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h5", classes: {
                                        root: "MergeEditor-variablePanelTitle",
                                    }, children: "Variables" }), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: `XTextMerge_SIDEBAR`, children: (provided) => {
                                        return ((0, jsx_runtime_1.jsx)(VariableSidebarContent, { ref: provided.innerRef, ...provided.droppableProps, children: this.renderListFields(this.props.definition.getInputDefinition().fields) }));
                                    } })] })), (0, jsx_runtime_1.jsxs)("div", { className: "MergeEditor-editor", children: [!this.context && ((0, jsx_runtime_1.jsxs)("div", { className: "MergeEditor-editorButtons", children: [(0, jsx_runtime_1.jsxs)(Link_1.StyledLink, { onClick: this.onTogglePanel, classes: { root: "MergeEditor-link" }, children: [(0, jsx_runtime_1.jsx)(OpenBlueIcon_1.OpenBlueIcon, {}), this.state.openVariablePanel
                                                    ? "Close Variables panel"
                                                    : "Open Variables panel"] }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { onClick: this.onInsertField, variant: "contained", color: "primary", style: { margin: "10px 0px 10px auto" }, classes: { root: "MergeEditor-buttonRoot" }, "data-testid": "MergeEditor-insertField", children: "Insert Field" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { onClick: this.onOpenPreviewModal, color: "primary", style: {
                                                margin: this.context ? "10px 0px 10px auto" : "10px 0px 10px 8px",
                                            }, variant: "outlined", classes: { root: "MergeEditor-buttonRoot" }, "data-testid": "MergeEditor-previewButton", children: "Preview" })] })), this.renderEditor()] }), (0, jsx_runtime_1.jsx)(UIStandardLayer_1.UIStandardLayer, { open: this.state.openVariablePicker, onClose: this.onCloseVariablePicker, title: "Insert Field", renderLayer: () => ((0, jsx_runtime_1.jsx)(VarialbePickerRender, { className: "MergeEditor-variablePicker", children: (0, jsx_runtime_1.jsx)(VariablePicker_1.default, { selected: this.props.editContext.insertFieldPath, data: this.props.definition.getInputDefinition(), onVariableSet: this.onVariableSet, allowNewVariable: false, notPopup: true, inputProps: {
                                        fullWidth: true,
                                    } }) })) }), (0, jsx_runtime_1.jsx)(UIStandardLayer_1.UIStandardLayer, { open: this.state.openPreview, onClose: this.onClosePreviewModal, title: "Text Merge Preview", fullScreen: true, renderLayer: () => ((0, jsx_runtime_1.jsxs)(PreviewRender, { className: "MergeEditor-previewRoot", "data-testid": "MergeEditor-previewRoot", children: [(0, jsx_runtime_1.jsxs)(PreviewHeader, { className: "MergeEditor-previewHeader", children: [(0, jsx_runtime_1.jsx)(DownloadButton, { style: { marginLeft: "auto" }, "data-testid": "btn-mergeeditor-export-markdown", href: `data:text/md;charset=UTF-8,${encodeURIComponent(exports.turndownService.turndown(this.getCurrentHTML()))}`, rel: "noopener noreferrer", download: `${this.props.exportFileName || "output"}.md`, target: "_blank", children: "Export Text" }), (0, jsx_runtime_1.jsx)(DownloadButton, { className: "RichEditor-styleButton", "data-testid": "btn-mergeeditor-export-html", href: `data:text/html;charset=UTF-8,${encodeURIComponent(this.getCurrentHTML())}`, download: `${this.props.exportFileName || "output"}.html`, rel: "noopener noreferrer", style: { marginLeft: "8px" }, children: "Export HTML" })] }), (0, jsx_runtime_1.jsxs)(PreviewContent, { className: "MergeEditor-previewContent", children: [(0, jsx_runtime_1.jsxs)("div", { className: "MergeEditor-previewSample", children: [(0, jsx_runtime_1.jsx)("p", { className: "MergeEditor-previewContentTitle", children: "Sample" }), (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { value: (0, draft_js_1.convertToRaw)(this.state.editorState.getCurrentContent()), hideTools: true, hideBorder: true, plugins: [TextMergeCommon_1.valueEditorPlugin], readOnly: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "MergeEditor-previewResult", children: [(0, jsx_runtime_1.jsx)("p", { className: "MergeEditor-previewContentTitle", children: "Result" }), (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
                                                            __html: this.getCurrentHTML(),
                                                        } })] })] })] })) })] }) })) }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], TextMergeEditor.prototype, "renderToolbar", null);
exports.default = TextMergeEditor;
const MergeEditorRender = styled_components_1.default.div `
    display: flex;
    flex-direction: row;

    height: 100%;

    .MergeEditor-buttonRoot {
        padding: 6px 12px !important;
    }

    .MergeEditor-link {
        display: flex;
        align-items: center;
    }

    .MergeEditor-variablePanel {
        width: 300px;

        margin-right: 8px;

        padding: 16px;

        background: #ffffff;
        border: 1px solid #f1f1f6;
        box-sizing: border-box;
        border-radius: 4px;

        display: flex;
        flex-direction: column;

        .MergeEditor-variablePanelTitle {
            //styleName: text/Inter SemiBold 12px;

            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            letter-spacing: 0px;
            text-align: left;

            margin-bottom: 16px;
        }

        .VariablePicker_root {
            width: 100%;
            lex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .VariablePicker_Content {
                border: none !important;
                padding: 0 !important;
                overflow: auto;
                flex: 1;

                .MuiList-root .MuiListSubheader-gutters:first-child {
                    padding: 0 !important;
                }
            }
        }

        .VariablePicker-buttonGroups {
            display: none;
        }
    }

    .MergeEditor-editor {
        flex: 1;
        background: #ffffff;
        /* main/border */

        border: 1px solid #f1f1f6;
        box-sizing: border-box;

        .MergeEditor-editorButtons {
            display: flex;
            align-items: center;

            padding: 8px 12px;
        }
    }

    .MuiList-root {
        &.MuiList-padding {
            padding-top: 0;
            padding-bottom: 0;
        }

        .MuiListItem-root {
            padding: 5px 12px;
            display: flex;
            justify-content: space-between;

            &.isDragging {
                background: rgb(224, 224, 224);
                border-radius: 4px;
            }
        }

        .MuiListSubheader-gutters {
            padding: 0 12px;
        }

        .MuiListItemText-root {
            flex: inherit;
            margin: 0;

            .MuiTypography-body1 {
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 17px;
                letter-spacing: 0px;
                text-align: left;
            }

            .MuiListItemText-primary {
                color: #272932;
            }

            .MuiListItemText-object {
                color: rgba(39, 41, 50, 0.4);
            }

            .MuiListItemText-secondary {
                color: rgba(64, 80, 166, 0.5);
                text-transform: capitalize;
            }
        }
    }
`;
const VarialbePickerRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .VariablePicker_root {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .VariablePicker_Content {
        border: none !important;
        padding: 0 !important;
        overflow: auto;
        flex: 1;
    }

    .MergeEditor-variablePickerTitle {
        //styleName: title/h3 Inter SemiBold 16px;

        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: center;

        margin-bottom: 16px;
    }

    .VariablePicker-buttonGroups {
        background: #fff;
        position: sticky;
        padding-top: 10px;
        bottom: 0;
    }
`;
const PreviewRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
`;
const PreviewHeader = styled_components_1.default.div `
    display: flex;
    align-items: center;
    margin-bottom: 11px;

    .MergeEditor-previewTitle {
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
    }
`;
const PreviewContent = styled_components_1.default.div `
    overflow: auto;

    display: flex;

    > div {
        width: 100%;
        height: 790px;

        border: 1px solid rgba(64, 80, 166, 0.4);
        box-sizing: border-box;
        border-radius: 4px;

        padding: 40px 48px;

        position: relative;

        &:first-child {
            margin-right: 16px;
        }
    }

    .MergeEditor-previewContentTitle {
        margin: 0;
        position: absolute;
        right: 8px;
        top: 6px;

        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: center;

        color: rgba(64, 80, 166, 0.5);
    }
`;
const DownloadButton = styled_components_1.default.a `
    display: block;

    color: #272932;

    padding: 6px 12px;

    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    text-transform: capitalize;

    text-decoration: none;

    border: 1px solid #4050a6;
`;
const NestedListWrapper = styled_components_1.default.div `
    padding-left: 10px;
`;
const VariableSidebarContent = styled_components_1.default.div `
    flex: 1;
    overflow: auto;
`;
//# sourceMappingURL=TextMergeEditor.js.map