@soul-refiner/design-system 2.0.0-alpha.26 → 2.0.0-alpha.28

package/dist/components/editor/plugins/blocks/text.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var React = require('react');
+var plate = require('@udecode/plate');
+var paragraph = require('../../../atoms/typography/paragraph.js');
+var heading = require('../../../atoms/typography/heading.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ParagraphElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(paragraph.P, { as: "div", "$textAlign": textAlign }, children))));
+});
+const createParagraphPlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_PARAGRAPH,
+    type: plate.ELEMENT_PARAGRAPH,
+    isElement: true,
+});
+const HOneElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.One, { "$textAlign": textAlign }, children))));
+});
+const createHOnePlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H1,
+    type: plate.ELEMENT_H1,
+    isElement: true,
+});
+const HTwoElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Two, { "$textAlign": textAlign }, children))));
+});
+const createHTwoPlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H2,
+    type: plate.ELEMENT_H2,
+    isElement: true,
+});
+const HThreeElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Three, { "$textAlign": textAlign }, children))));
+});
+const createHThreePlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H3,
+    type: plate.ELEMENT_H3,
+    isElement: true,
+});
+const HFourElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Four, { "$textAlign": textAlign }, children))));
+});
+const createHFourPlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H4,
+    type: plate.ELEMENT_H4,
+    isElement: true,
+});
+const HFiveElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Five, { "$textAlign": textAlign }, children))));
+});
+const createHFivePlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H5,
+    type: plate.ELEMENT_H5,
+    isElement: true,
+});
+const HSixElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const textAlign = props?.style?.textAlign;
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...props },
+        React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(heading.H.Six, { "$textAlign": textAlign }, children))));
+});
+const createHSixPlugin = plate.createPluginFactory({
+    key: plate.ELEMENT_H6,
+    type: plate.ELEMENT_H6,
+    isElement: true,
+});
+
+exports.HFiveElement = HFiveElement;
+exports.HFourElement = HFourElement;
+exports.HOneElement = HOneElement;
+exports.HSixElement = HSixElement;
+exports.HThreeElement = HThreeElement;
+exports.HTwoElement = HTwoElement;
+exports.ParagraphElement = ParagraphElement;
+exports.createHFivePlugin = createHFivePlugin;
+exports.createHFourPlugin = createHFourPlugin;
+exports.createHOnePlugin = createHOnePlugin;
+exports.createHSixPlugin = createHSixPlugin;
+exports.createHThreePlugin = createHThreePlugin;
+exports.createHTwoPlugin = createHTwoPlugin;
+exports.createParagraphPlugin = createParagraphPlugin;

package/dist/components/editor/plugins/blocks/video.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var plate = require('@udecode/plate');
+var constants = require('../../constants.js');
+var context = require('../../context.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const VideoTitleElement = React__default.default.forwardRef(function VideoTitle({ editor, element, ...props }, ref) {
+    const editable = !plate.isEditorReadOnly(editor);
+    const { id } = element;
+    const { handleVideoClick, videoTitleLoader: VideoTitle } = React__default.default.useContext(context.EditorContext);
+    const handleClick = () => {
+        if (handleVideoClick && !editable) {
+            handleVideoClick(id);
+        }
+    };
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, editor: editor, element: element, ref: ref, ...props },
+        React__default.default.createElement("div", { contentEditable: false, onClick: handleClick, style: { cursor: editable ? 'initial' : 'pointer' } },
+            React__default.default.createElement(VideoTitle, { courseMediaId: id }))));
+});
+const createVideoTitlePlugin = plate.createPluginFactory({
+    key: constants.ELEMENT_VIDEO,
+    type: constants.ELEMENT_VIDEO,
+    isElement: true,
+    isVoid: true,
+    component: VideoTitleElement,
+    then: () => ({
+        inject: {
+            props: {
+                classNames: undefined,
+                validTypes: [plate.ELEMENT_H2],
+            },
+        },
+    }),
+});
+
+exports.VideoTitleElement = VideoTitleElement;
+exports.createVideoTitlePlugin = createVideoTitlePlugin;

package/dist/components/editor/plugins/leafs/leafs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+var plateLink = require('@udecode/plate-link');
+var link = require('./link.js');
+
+const leafs = [
+    plate.createAlignPlugin({
+        inject: {
+            props: {
+                validTypes: [
+                    plate.ELEMENT_PARAGRAPH,
+                    plate.ELEMENT_H1,
+                    plate.ELEMENT_H2,
+                    plate.ELEMENT_H3,
+                    plate.ELEMENT_H4,
+                    plate.ELEMENT_H5,
+                    plate.ELEMENT_H6,
+                ],
+            },
+        },
+    }),
+    plate.createIndentPlugin({
+        inject: {
+            props: {
+                validTypes: [plate.ELEMENT_PARAGRAPH, plate.ELEMENT_H1],
+            },
+        },
+    }),
+    plate.createLineHeightPlugin(),
+    plate.createCodePlugin(),
+    plateLink.createLinkPlugin({
+        renderBeforeEditable: link.LinkFloatingMenu,
+    }),
+];
+
+exports.leafs = leafs;

package/dist/components/editor/plugins/leafs/link.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var plate = require('@udecode/plate');
+var box = require('../../../atoms/box/box.js');
+var aa_sansserif = require('../../../../icons/basic/aa_sansserif.js');
+var link = require('../../../../icons/basic/link.js');
+var upload = require('../../../../icons/basic/upload.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const LinkElement = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const { props: linkProps } = plate.useLink({ element: props.element });
+    return (React__default.default.createElement(plate.PlateElement, { asChild: true, ref: ref, ...linkProps, ...props },
+        React__default.default.createElement("a", null, children)));
+});
+const LinkFloatingMenu = ({ readOnly }) => {
+    const isEditing = plate.useFloatingLinkSelectors().isEditing();
+    const state = plate.useFloatingLinkInsertState();
+    const { props: insertProps, ref: insertRef, textInputProps, } = plate.useFloatingLinkInsert(state);
+    const editState = plate.useFloatingLinkEditState();
+    const { props: editProps, ref: editRef, editButtonProps, } = plate.useFloatingLinkEdit(editState);
+    if (readOnly)
+        return null;
+    const input = (React__default.default.createElement(box.Box, { "$dir": "column", sx: `
+        background-color: var(--color-white);
+        gap: 16px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+      ` },
+        React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center" },
+                React__default.default.createElement(link.Link, null)),
+            React__default.default.createElement(plate.FloatingLinkUrlInput, { style: {
+                    border: 'none',
+                    outline: 'none',
+                    padding: '8px 12px',
+                }, placeholder: "Paste link" })),
+        React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", "$gap": 8 },
+            React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center" },
+                React__default.default.createElement(aa_sansserif.AASansSerif, null)),
+            React__default.default.createElement(Input, { placeholder: "Text to display", ...textInputProps }))));
+    const editContent = isEditing ? (input) : (React__default.default.createElement(box.Box, { "$align": "center", "$justify": "center", sx: `
+        box-sizing: box-content;
+        background-color: var(--color-white);
+        gap: 8px;
+        padding: 16px;
+        border-radius: 16px;
+        box-shadow: var(--elevation-2);
+
+        a,
+        button {
+          padding: 8px 12px;
+          background-color: transparent;
+          outline: none;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          width: max-content;
+          font-size: 16px;
+          line-height: 16px;
+
+          &:hover {
+            background-color: var(--color-grey-9);
+          }
+        }
+      `, "$gap": 8 },
+        React__default.default.createElement("button", { type: "button", ...editButtonProps }, "Edit link"),
+        React__default.default.createElement(plate.LinkOpenButton, null,
+            React__default.default.createElement(upload.Upload, null))));
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("div", { ref: insertRef, ...insertProps }, input),
+        React__default.default.createElement("div", { ref: editRef, ...editProps }, editContent)));
+};
+const Input = styled.styled.input `
+  border: none;
+  outline: none;
+  padding: 8px 12px;
+`;
+
+exports.LinkElement = LinkElement;
+exports.LinkFloatingMenu = LinkFloatingMenu;

package/dist/components/editor/plugins/marks/marks.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+
+const marks = [
+    plate.createBoldPlugin(),
+    plate.createFontBackgroundColorPlugin(),
+    plate.createFontSizePlugin(),
+    plate.createFontFamilyPlugin(),
+    plate.createItalicPlugin(),
+    plate.createStrikethroughPlugin(),
+    plate.createSubscriptPlugin(),
+    plate.createSuperscriptPlugin(),
+    plate.createUnderlinePlugin(),
+];
+
+exports.marks = marks;

package/dist/components/editor/plugins/plate.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var cn = require('@udecode/cn');
+var plateCommon = require('@udecode/plate-common');
+var link = require('./leafs/link.js');
+var constants = require('../constants.js');
+var blockquote = require('./blocks/blockquote.js');
+var buttons = require('./blocks/buttons.js');
+var image = require('./blocks/image.js');
+var list = require('./blocks/list.js');
+var table = require('./blocks/table.js');
+var tableCell = require('./blocks/table-cell.js');
+var tableRow = require('./blocks/table-row.js');
+var text = require('./blocks/text.js');
+var plate = require('@udecode/plate');
+
+const plateUI = {
+    [plate.ELEMENT_PARAGRAPH]: text.ParagraphElement,
+    [plate.ELEMENT_H1]: text.HOneElement,
+    [plate.ELEMENT_H2]: text.HTwoElement,
+    [plate.ELEMENT_H3]: text.HThreeElement,
+    [plate.ELEMENT_H4]: text.HFourElement,
+    [plate.ELEMENT_H5]: text.HFiveElement,
+    [plate.ELEMENT_H6]: text.HSixElement,
+    [plate.ELEMENT_BLOCKQUOTE]: blockquote.BlockquoteElement,
+    [plate.ELEMENT_LINK]: link.LinkElement,
+    [plate.ELEMENT_OL]: cn.withProps(list.ListElement, {
+        variant: plate.ELEMENT_OL,
+    }),
+    [plate.ELEMENT_UL]: cn.withProps(list.ListElement, {
+        variant: plate.ELEMENT_UL,
+    }),
+    [plate.ELEMENT_IMAGE]: image.ImageElement,
+    [constants.ELEMENT_BUTTON]: buttons.Button,
+    [plate.ELEMENT_TABLE]: table.TableElement,
+    [plate.ELEMENT_TD]: tableCell.TableCellElement,
+    [plate.ELEMENT_TH]: tableCell.TableCellHeaderElement,
+    [plate.ELEMENT_TR]: tableRow.TableRowElement,
+    [plate.MARK_SUBSCRIPT]: cn.withProps(plateCommon.PlateLeaf, { as: 'sub' }),
+    [plate.MARK_SUPERSCRIPT]: cn.withProps(plateCommon.PlateLeaf, { as: 'sup' }),
+};
+
+exports.plateUI = plateUI;

package/dist/components/editor/plugins/utils/exitBreak.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+var constants = require('../../constants.js');
+
+const exitBreakPlugin = {
+    options: {
+        rules: [
+            {
+                hotkey: 'mod+enter',
+            },
+            {
+                hotkey: 'mod+shift+enter',
+                before: true,
+            },
+            {
+                hotkey: 'enter',
+                query: {
+                    start: true,
+                    end: true,
+                    allow: [
+                        plate.ELEMENT_BLOCKQUOTE,
+                        constants.ELEMENT_BUTTON,
+                        plate.ELEMENT_MEDIA,
+                        plate.ELEMENT_MEDIA_EMBED,
+                        plate.ELEMENT_OL,
+                        plate.ELEMENT_UL,
+                        ...plate.KEYS_HEADING,
+                    ],
+                },
+            },
+        ],
+    },
+};
+
+exports.exitBreakPlugin = exitBreakPlugin;

package/dist/components/editor/plugins/utils/resetBlockType.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+
+const resetBlockTypesCommonRule = {
+    types: [plate.ELEMENT_BLOCKQUOTE, plate.ELEMENT_TODO_LI],
+    defaultType: plate.ELEMENT_PARAGRAPH,
+};
+const resetBlockTypePlugin = {
+    options: {
+        rules: [
+            {
+                ...resetBlockTypesCommonRule,
+                hotkey: 'Enter',
+                predicate: plate.isBlockAboveEmpty,
+            },
+            {
+                ...resetBlockTypesCommonRule,
+                hotkey: 'Backspace',
+                predicate: plate.isSelectionAtBlockStart,
+            },
+        ],
+    },
+};
+
+exports.resetBlockTypePlugin = resetBlockTypePlugin;

package/dist/components/editor/plugins/utils/selectOnBackspace.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+
+const selectOnBackspace = {
+    options: {
+        query: { allow: [plate.ELEMENT_HR, plate.ELEMENT_IMAGE, plate.ELEMENT_MEDIA_EMBED] },
+    },
+};
+
+exports.selectOnBackspace = selectOnBackspace;

package/dist/components/editor/plugins/utils/softBreak.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+
+const softBreakPlugin = {
+    options: {
+        rules: [
+            { hotkey: 'shift+enter' },
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: [plate.ELEMENT_CODE_BLOCK, plate.ELEMENT_BLOCKQUOTE, plate.ELEMENT_TD],
+                },
+            },
+        ],
+    },
+};
+
+exports.softBreakPlugin = softBreakPlugin;

package/dist/components/editor/plugins/utils/utils.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+var exitBreak = require('./exitBreak.js');
+var resetBlockType = require('./resetBlockType.js');
+var selectOnBackspace = require('./selectOnBackspace.js');
+var softBreak = require('./softBreak.js');
+
+const utils = [
+    plate.createExitBreakPlugin(exitBreak.exitBreakPlugin),
+    plate.createHistoryPlugin(),
+    plate.createResetNodePlugin(resetBlockType.resetBlockTypePlugin),
+    plate.createSelectOnBackspacePlugin(selectOnBackspace.selectOnBackspace),
+    plate.createSoftBreakPlugin(softBreak.softBreakPlugin),
+];
+
+exports.utils = utils;

package/dist/components/editor/simple_editor/navbar.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var plate = require('@udecode/plate');
+var tooltip = require('../../feedback/tooltip/tooltip.js');
+var alignment_dropdown = require('../navbar/alignment_dropdown.js');
+var style_dropdown = require('../navbar/style_dropdown.js');
+var bold = require('../../../icons/basic/bold.js');
+var image = require('../../../icons/basic/image.js');
+var italic = require('../../../icons/basic/italic.js');
+var link = require('../../../icons/basic/link.js');
+var list_ordered = require('../../../icons/text/list_ordered.js');
+var list_unordered = require('../../../icons/text/list_unordered.js');
+var redo = require('../../../icons/arrow/redo.js');
+var underline = require('../../../icons/basic/underline.js');
+var undo = require('../../../icons/arrow/undo.js');
+var menu_button = require('../styles/menu_button.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const EditorBar = ({ handleUploadImage }) => {
+    const editorRef = plate.useEditorRef('main');
+    const imageRef = React__default.default.useRef(null);
+    const boldState = plate.useMarkToolbarButtonState({ nodeType: plate.MARK_BOLD });
+    const { props: { pressed: currBold, onClick: handleBold }, } = plate.useMarkToolbarButton(boldState);
+    const italicState = plate.useMarkToolbarButtonState({ nodeType: plate.MARK_ITALIC });
+    const { props: { pressed: currItalic, onClick: handleItalic }, } = plate.useMarkToolbarButton(italicState);
+    const underlineState = plate.useMarkToolbarButtonState({
+        nodeType: plate.MARK_UNDERLINE,
+    });
+    const { props: { pressed: currUnderline, onClick: handleUnderline }, } = plate.useMarkToolbarButton(underlineState);
+    const linkState = plate.useLinkToolbarButtonState();
+    const { props: { pressed: currLink, onClick: handleLink }, } = plate.useLinkToolbarButton(linkState);
+    const orderedListState = plate.useListToolbarButtonState({ nodeType: plate.ELEMENT_OL });
+    const { props: { pressed: currOrderedList, onClick: handleOrderedList }, } = plate.useListToolbarButton(orderedListState);
+    const unorderedListState = plate.useListToolbarButtonState({
+        nodeType: plate.ELEMENT_UL,
+    });
+    const { props: { pressed: currUnorderedList, onClick: handleUnorderedList }, } = plate.useListToolbarButton(unorderedListState);
+    const handleImageChange = async () => {
+        const files = imageRef.current?.files;
+        if (!files)
+            return;
+        const imageurl = await handleUploadImage(files);
+        if (imageurl) {
+            plate.insertImage(editorRef, imageurl);
+            plate.insertNode(editorRef, {
+                type: plate.ELEMENT_PARAGRAPH,
+                children: [{ text: ' ' }],
+            });
+        }
+    };
+    const handleRedo = () => editorRef.redo();
+    const handleUndo = () => editorRef.undo();
+    return (React__default.default.createElement(Menu, { "aria-label": "editor-navigation" },
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Undo", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, onClick: handleUndo },
+                    React__default.default.createElement(undo.Undo, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Redo", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, onClick: handleRedo },
+                    React__default.default.createElement(redo.Redo, { size: 24, color: "grey-5" })))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(style_dropdown.StyleDropdown, { editorRef: editorRef })),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(menu_button.MenuButton, { "$active": false, as: "div" },
+                React__default.default.createElement(alignment_dropdown.AlignmentDropdown, { editorRef: editorRef }))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Bold", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currBold, onClick: handleBold },
+                    React__default.default.createElement(bold.Bold, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Italic", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currItalic, onClick: handleItalic },
+                    React__default.default.createElement(italic.Italic, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Underline", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currUnderline, onClick: handleUnderline },
+                    React__default.default.createElement(underline.Underline, { size: 24, color: "grey-5" })))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Link", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currLink, onClick: handleLink },
+                    React__default.default.createElement(link.Link, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Image", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
+                    React__default.default.createElement("div", null,
+                        React__default.default.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
+                        React__default.default.createElement(image.Image, { size: 24, color: "grey-5" }))))),
+        React__default.default.createElement(Divider, null),
+        React__default.default.createElement(MenuSection, null,
+            React__default.default.createElement(tooltip.Tooltip, { content: "Unordered List", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currUnorderedList, onClick: handleUnorderedList },
+                    React__default.default.createElement(list_unordered.ListUnordered, { size: 24, color: "grey-5" }))),
+            React__default.default.createElement(tooltip.Tooltip, { content: "Ordered List", place: "top" },
+                React__default.default.createElement(menu_button.MenuButton, { "$active": currOrderedList, onClick: handleOrderedList },
+                    React__default.default.createElement(list_ordered.ListOrdered, { size: 24, color: "grey-5" }))))));
+};
+const Menu = styled.styled.nav `
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0;
+  padding: 14px 24px;
+  background-color: var(--color-white);
+  box-sizing: border-box;
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: var(--elevation-1);
+`;
+const MenuSection = styled.styled.div `
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: fit-content;
+  flex-shrink: 0;
+`;
+const Divider = styled.styled.div `
+  width: 1px;
+  height: 28px;
+  background-color: var(--color-grey-9);
+`;
+
+exports.EditorBar = EditorBar;

package/dist/components/editor/simple_editor/plugins.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var plate = require('@udecode/plate');
+var text = require('../plugins/blocks/text.js');
+var link = require('../plugins/leafs/link.js');
+var plate$1 = require('../plugins/plate.js');
+var exitBreak = require('../plugins/utils/exitBreak.js');
+var resetBlockType = require('../plugins/utils/resetBlockType.js');
+var selectOnBackspace = require('../plugins/utils/selectOnBackspace.js');
+var softBreak = require('../plugins/utils/softBreak.js');
+
+const plugins = plate.createPlugins([
+    plate.createHeadingPlugin(),
+    plate.createImagePlugin({
+        options: {
+            disableUploadInsert: true,
+            disableEmbedInsert: true,
+        },
+    }),
+    plate.createTextIndentPlugin(),
+    plate.createIndentListPlugin({
+        inject: {
+            props: {
+                validTypes: [
+                    plate.ELEMENT_PARAGRAPH,
+                    plate.ELEMENT_H1,
+                    plate.ELEMENT_H2,
+                    plate.ELEMENT_H3,
+                    plate.ELEMENT_H4,
+                    plate.ELEMENT_H5,
+                    plate.ELEMENT_H6,
+                    plate.ELEMENT_OL,
+                    plate.ELEMENT_UL,
+                ],
+            },
+        },
+    }),
+    plate.createListPlugin(),
+    plate.createMediaEmbedPlugin(),
+    plate.createParagraphPlugin(),
+    text.createHOnePlugin(),
+    text.createHTwoPlugin(),
+    text.createHThreePlugin(),
+    text.createHFourPlugin(),
+    text.createHFivePlugin(),
+    text.createHSixPlugin(),
+    plate.createResetNodePlugin(),
+    plate.createBoldPlugin(),
+    plate.createCodePlugin(),
+    plate.createFontBackgroundColorPlugin(),
+    plate.createFontSizePlugin(),
+    plate.createFontFamilyPlugin(),
+    plate.createItalicPlugin(),
+    plate.createStrikethroughPlugin(),
+    plate.createSubscriptPlugin(),
+    plate.createSuperscriptPlugin(),
+    plate.createUnderlinePlugin(),
+    plate.createAlignPlugin({
+        inject: {
+            props: {
+                validTypes: [
+                    plate.ELEMENT_PARAGRAPH,
+                    plate.ELEMENT_H1,
+                    plate.ELEMENT_H2,
+                    plate.ELEMENT_H3,
+                    plate.ELEMENT_H4,
+                    plate.ELEMENT_H5,
+                    plate.ELEMENT_H6,
+                ],
+            },
+        },
+    }),
+    plate.createIndentPlugin({
+        inject: {
+            props: {
+                validTypes: [plate.ELEMENT_PARAGRAPH, plate.ELEMENT_H1],
+            },
+        },
+    }),
+    plate.createLineHeightPlugin(),
+    plate.createLinkPlugin({
+        renderAfterEditable: link.LinkFloatingMenu,
+    }),
+    plate.createExitBreakPlugin(exitBreak.exitBreakPlugin),
+    plate.createHistoryPlugin(),
+    plate.createResetNodePlugin(resetBlockType.resetBlockTypePlugin),
+    plate.createSelectOnBackspacePlugin(selectOnBackspace.selectOnBackspace),
+    plate.createSoftBreakPlugin(softBreak.softBreakPlugin),
+], {
+    components: plate$1.plateUI,
+});
+
+exports.plugins = plugins;