import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Divider, HStack } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { alignCenter, AlignCenterToolbar, alignJustify, AlignJustifyToolbar, alignLeft, AlignLeftToolbar, alignRight, AlignRightToolbar, blockquote, BlockQuoteToolbar, bold, BoldToolbar, code, CodeToolbar, colorText, ColorTextToolbar, heading1, heading2, heading3, heading4, HeadingToolbar, highlightColor, HighlightColorToolbar, italic, ItalicToolbar, orderedList, OrderedListToolbar, Qlate, QlateEditor, smallText, strikethrough, StrikethroughToolbar, underline, UnderlineToolbar, unorderedList, UnorderedListToolbar, } from "@feedloop/uikit";
// TODO: export Plugin type from uikit
export const plugins = [
    heading1,
    heading2,
    heading3,
    heading4,
    smallText,
    bold,
    underline,
    italic,
    strikethrough,
    highlightColor,
    colorText,
    alignLeft,
    alignRight,
    alignCenter,
    alignJustify,
    unorderedList,
    orderedList,
    code,
    blockquote,
];
export const initialValue = [
    {
        // @ts-ignore
        type: "paragraph",
        children: [
            {
                text: "",
            },
        ],
    },
];
export default function RichTextEditor(props) {
    var _a;
    return (_jsx(Box, { children: _jsxs(Qlate
        // @ts-ignore
        , Object.assign({ 
            // @ts-ignore
            value: (_a = props.value) !== null && _a !== void 0 ? _a : [
                {
                    type: "paragraph",
                    children: [
                        {
                            text: "",
                        },
                    ],
                },
            ], onChange: props.onChange }, { children: [_jsx(HStack, Object.assign({ padding: "12px", backgroundColor: "white", borderRadius: "4px", css: css `
            & button {
              background-color: #ffffff;
              color: var(--chakra-colors-grey-base);
            }

            & button:hover,
            & button:active {
              background-color: var(--chakra-colors-snow-lightest);
            }
          ` }, { children: _jsx(Box, Object.assign({ backgroundColor: "white", border: "none", css: css `
              & select {
                height: var(--chakra-sizes-8);
                font-size: var(--chakra-fontSizes-xs);
                border-color: #e7e7e7 !important;
              }

              & hr {
                border-color: #e7e7e7 !important;
              }
            ` }, { children: _jsxs(HStack, { children: [_jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(HeadingToolbar, {}) })), _jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })) })), _jsxs(HStack, Object.assign({ spacing: "12px" }, { children: [_jsx(BoldToolbar, {}), _jsx(ItalicToolbar, {}), _jsx(UnderlineToolbar, {}), _jsx(StrikethroughToolbar, {})] })), _jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })) })), _jsxs(HStack, Object.assign({ spacing: "12px" }, { children: [_jsx(HighlightColorToolbar, {}), _jsx(ColorTextToolbar, {})] })), _jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(Divider, { orientation: "vertical" }) })), _jsxs(HStack, Object.assign({ spacing: "12px" }, { children: [_jsx(AlignLeftToolbar, {}), _jsx(AlignCenterToolbar, {}), _jsx(AlignRightToolbar, {}), _jsx(AlignJustifyToolbar, {})] })), _jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })) })), _jsxs(HStack, Object.assign({ spacing: "12px" }, { children: [_jsx(UnorderedListToolbar, {}), _jsx(OrderedListToolbar, {})] })), _jsx(HStack, Object.assign({ spacing: "12px" }, { children: _jsx(Box, Object.assign({ height: "24px" }, { children: _jsx(Divider, { orientation: "vertical" }) })) })), _jsxs(HStack, Object.assign({ spacing: "12px" }, { children: [_jsx(CodeToolbar, {}), _jsx(BlockQuoteToolbar, {})] }))] }) })) })), _jsx(Box, Object.assign({ height: "300px", padding: "16px", overflowY: "auto", backgroundColor: "white", borderRadius: "4px", css: css `
            & ol {
              list-style-type: decimal;
            }

            & ul {
              list-style-type: initial;
            }

            & ol > p,
            & ul > p {
              display: list-item;
            }
          ` }, { children: _jsx(QlateEditor, { placeholder: props.placeholder, plugins: plugins }) }))] })) }));
}
//# sourceMappingURL=RichtextEditor.js.map