"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichTextEditor = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
const LexicalErrorBoundary_1 = __importDefault(require("@lexical/react/LexicalErrorBoundary"));
require("./utils/nodeStyles.css");
const rich_text_1 = require("@lexical/rich-text");
const link_1 = require("@lexical/link");
const list_1 = require("@lexical/list");
const ValuePlugin_1 = require("./plugins/ValuePlugin");
const ToolbarPlugin_1 = require("./plugins/ToolbarPlugin");
const varsUtilities_1 = require("../../varsUtilities");
const Text_1 = require("../Text");
const ImagePlugin_1 = require("./plugins/ImagePlugin");
const ImageNode_1 = require("./nodes/ImageNode");
const Placeholder_1 = require("./components/Placeholder");
const BehaviourPlugin_1 = require("./plugins/BehaviourPlugin");
const EmbedPlugin_1 = require("./plugins/EmbedPlugin");
const EmbedNode_1 = require("./nodes/EmbedNode");
function RichTextEditor({ label, placeholder, defaultValue, autoFocus, onChange, }) {
    return (react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: CONFIG },
        react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', flexDirection: 'column', width: '100%' } },
            label && (react_1.default.createElement(inlines_1.styled.div, null,
                react_1.default.createElement(Text_1.Text, { weight: "medium", style: {
                        marginBottom: 8,
                    } }, label))),
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    position: 'relative',
                    '& .rte': {
                        display: 'flex',
                        flexDirection: 'column',
                        color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
                        border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`,
                        '&:hover': {
                            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralHover', 'default')}`,
                        },
                        '&:focus': {
                            border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'active', 'default')}`,
                            boxShadow: `0 0 0 2px ${(0, varsUtilities_1.color)('border', 'brand', 'subtle')}`,
                        },
                        borderRadius: '8px',
                        padding: '54px 16px',
                        minHeight: '300px',
                        outline: 'none',
                    },
                    ...NODE_STYLES,
                } },
                react_1.default.createElement(ToolbarPlugin_1.ToolbarPlugin, null),
                react_1.default.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1.default.createElement(LexicalContentEditable_1.ContentEditable, { className: "rte" }), placeholder: react_1.default.createElement(Placeholder_1.Placeholder, null, placeholder), ErrorBoundary: LexicalErrorBoundary_1.default }),
                react_1.default.createElement(ImagePlugin_1.ImagePlugin, null),
                react_1.default.createElement(LexicalListPlugin_1.ListPlugin, null),
                react_1.default.createElement(LexicalLinkPlugin_1.LinkPlugin, null),
                react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
                react_1.default.createElement(BehaviourPlugin_1.BehaviourPlugin, null),
                react_1.default.createElement(EmbedPlugin_1.EmbedPlugin, null),
                react_1.default.createElement(ValuePlugin_1.ValuePlugin, { defaultValue: defaultValue, onChange: onChange, autoFocus: autoFocus })))));
}
exports.RichTextEditor = RichTextEditor;
const CONFIG = {
    editable: true,
    namespace: 'RichTextEditor',
    theme: {
        heading: {
            h1: 'rte-h1',
            h2: 'rte-h2',
            h3: 'rte-h3',
        },
        paragraph: 'rte-p',
        text: {
            bold: 'rte-bold',
            italic: 'rte-italic',
            strikethrough: 'rte-strikethrough',
        },
        link: 'rte-link',
        list: {
            ul: 'rte-ul',
        },
        embedBlock: {
            base: 'rte-embedbase',
            focus: 'rte-embedfocus',
        },
    },
    nodes: [rich_text_1.HeadingNode, link_1.LinkNode, list_1.ListNode, list_1.ListItemNode, ImageNode_1.ImageNode, EmbedNode_1.EmbedNode],
    onError: (error) => {
        console.error(error);
    },
};
const NODE_STYLES = {
    '& .rte-h1': {
        margin: '0',
        color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
    },
    '& .rte-h2': {
        margin: '0',
        color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
    },
    '& .rte-h3': {
        margin: '0',
        color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
    },
    '& .rte-p': {
        margin: '0',
        color: (0, varsUtilities_1.color)('content', 'default', 'primary'),
    },
    '& .rte-bold': {
        fontWeight: 'bold',
    },
    '& .rte-italic': {
        fontStyle: 'italic',
    },
    '& .rte-strikethrough': {
        textDecoration: 'line-through',
    },
    '& .rte-link': {
        color: (0, varsUtilities_1.color)('content', 'brand', 'primary'),
    },
    '& .rte-ul': {
        margin: '0',
    },
};
//# sourceMappingURL=index.js.map