import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { Box } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { Qlate, QlateEditor } from "@feedloop/uikit";
import { plugins } from "../components/RichtextEditor";
import { useRichtext } from "../hooks/useRichText";
import { registerComponent } from "../interfaces";
const paragraphComponent = registerComponent("paragraph", {
    displayName: "Rich Text",
    type: "none",
    icon: "Paragraph",
    group: "text",
    display: "block",
    propDefinition: {
        label: {
            group: "Design",
            type: "richtext",
            options: {},
        },
    },
    defaultProps: {
        label: [
            {
                // @ts-ignore
                type: "heading-1",
                children: [
                    {
                        text: "Hello! This is paragraph component.",
                        // @ts-ignore
                        bold: true,
                    },
                ],
            },
            {
                // @ts-ignore
                type: "paragraph",
                children: [
                    {
                        text: "You can use this component to display rich text data type from ",
                    },
                    {
                        text: "Qorebase",
                        // @ts-ignore
                        "highlight-color": true,
                        backgroundColor: "#87B6FF",
                    },
                    {
                        text: ".",
                    },
                ],
            },
            {
                // @ts-ignore
                type: "small-text",
                children: [
                    {
                        text: "This component also has data formatting features such as setting headings, alignment, ",
                    },
                    {
                        text: "bold",
                        // @ts-ignore
                        bold: true,
                    },
                    {
                        text: ", ",
                    },
                    {
                        text: "italic",
                        // @ts-ignore
                        italic: true,
                    },
                    {
                        text: ", and many more.",
                    },
                ],
            },
        ],
    },
    Component: (props) => {
        const label = useRichtext(props.instance.properties.label);
        return (_jsx(Box, { children: _jsx(Qlate, Object.assign({ value: label }, { children: _jsx(Box, Object.assign({ css: css `
              & ol {
                list-style-type: decimal;
              }

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

              & ol > p,
              & ul > p {
                display: list-item;
              }
            `, paddingX: "15px" }, { children: _jsx(QlateEditor, { readOnly: true, plugins: plugins, placeholder: "Type something here" }) })) })) }));
    },
});
export default paragraphComponent;
//# sourceMappingURL=buildParagraph.js.map