@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

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

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

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

@@ -1 +1,8 @@
-"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;
+import { ELEMENT_HR } from '../../constants';
+import { ELEMENT_IMAGE } from '../../constants';
+import { ELEMENT_MEDIA_EMBED } from '../../constants';
+export const selectOnBackspace = {
+    options: {
+        query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+    },
+};

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

@@ -1 +1,14 @@
-"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;
+import { ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK, ELEMENT_TD, } from '@udecode/plate';
+export const softBreakPlugin = {
+    options: {
+        rules: [
+            { hotkey: 'shift+enter' },
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+                },
+            },
+        ],
+    },
+};

package/dist/components/editor/plugins/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare const utils: (import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-reset-node").ResetNodePlugin<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-break").ExitBreakPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-select").SelectOnBackspacePlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-break").SoftBreakPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];

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

@@ -1 +1,12 @@
-"use strict";var plate=require("@udecode/plate"),exitBreak=require("./exitBreak.js"),resetBlockType=require("./resetBlockType.js"),selectOnBackspace=require("./selectOnBackspace.js"),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;
+import { createResetNodePlugin, createExitBreakPlugin, createHistoryPlugin, createSelectOnBackspacePlugin, createSoftBreakPlugin, } from '@udecode/plate';
+import { exitBreakPlugin } from './exitBreak';
+import { resetBlockTypePlugin } from './resetBlockType';
+import { selectOnBackspace } from './selectOnBackspace';
+import { softBreakPlugin } from './softBreak';
+export const utils = [
+    createExitBreakPlugin(exitBreakPlugin),
+    createHistoryPlugin(),
+    createResetNodePlugin(resetBlockTypePlugin),
+    createSelectOnBackspacePlugin(selectOnBackspace),
+    createSoftBreakPlugin(softBreakPlugin),
+];

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

@@ -0,0 +1 @@
+export { SimpleEditor } from './simple_editor';

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

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

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

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

package/dist/{src/components → components}/editor/simple_editor/simple_editor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TElement } from '@udecode/plate';
-import { DimensionOptions } from 'components/actions/upload/validations';
+import { DimensionOptions } from '../../../components/actions/upload/validations';
 export interface SimpleEditorProps {
     communityName: string;
     editable: boolean;

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

@@ -1,5 +1,58 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),plate=require("@udecode/plate"),plugins=require("./plugins.js"),navbar=require("./navbar.js"),modal=(require("../../surfaces/accordion/accordion.js"),require("../../surfaces/carousel/card/card.js"),require("../../surfaces/comment/comment.js"),require("../../surfaces/discuss_post/discuss_post.js"),require("../../surfaces/drawer/drawer.js"),require("../../surfaces/message/message.js"),require("../../surfaces/modal/modal.js")),box=(require("react-dom"),require("../../surfaces/post/post.js"),require("../../surfaces/calendar_date/calendar_date.js"),require("../../atoms/box/box.js")),heading=(require("../../atoms/typography/display.js"),require("../../atoms/typography/heading.js")),paragraph=require("../../atoms/typography/paragraph.js"),button=(require("../../atoms/typography/typography.js"),require("../../actions/button/button.js")),validations=(require("../../actions/dropdown/dropdown.js"),require("../../actions/rate/rate.js"),require("../../actions/switch/switch.js"),require("../../actions/toggle/toggle.js"),require("../../actions/upload/upload.js"),require("../../actions/upload/validations.js"));function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const SimpleEditor=({editable:e,handleUploadImage:l,onChange:t,validation:o,sx:a,validationMessage:r,placeholder:i="",previousContent:n=[{type:"p",children:[{text:""}]}]})=>{const[d,s]=React__default.default.useState([]);return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(modal.Modal,{controlledOpen:0<d.length},React__default.default.createElement(modal.Modal.Content,{footer:React__default.default.createElement(box.Box,{$display:"flex",$justify:"center",$gap:16,sx:"position: relative; width: 100%;"},React__default.default.createElement(button.Button,{fluid:!0,size:"small",type:"primary",onClick:()=>s([])},"Close")),header:React__default.default.createElement(heading.H,{$bold:!0,$color:"grey-2",$fontSize:20},"Can't read files")},React__default.default.createElement(box.Box,{$align:"flex-start",$display:"flex",$dir:"column",$gap:32,sx:"width: 500px;"},React__default.default.createElement(paragraph.P,{$textClampLines:10},r)))),React__default.default.createElement(plate.Plate,{id:"main",initialValue:n,onChange:t,plugins:plugins.plugins},React__default.default.createElement(Wrapper,null,e&&React__default.default.createElement(navbar.EditorBar,{handleUploadImage:async t=>{s([]);var a=[];if(o)for(let e=0;e<t.length;e++){var r=t[e],r=await validations.validateFile(r,o);if(0<r.length){a.push(...r);break}}return 0<a?.length?(s(a),""):l(t)}}),React__default.default.createElement(InnerWrapper,{$sx:a},React__default.default.createElement(plate.PlateContent,{id:"main",autoFocus:!0,placeholder:i,readOnly:!e,spellCheck:!0})))))},InnerWrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Plate, PlateContent } from '@udecode/plate';
+import { plugins } from './plugins';
+import { EditorBar } from './navbar';
+import { Modal } from '../../../components/surfaces';
+import { Box, H, P } from '../../../components/atoms';
+import { Button } from '../../../components/actions';
+import { validateFile, } from '../../../components/actions/upload/validations';
+export const SimpleEditor = ({ editable, handleUploadImage, onChange, validation, sx, validationMessage, placeholder = '', previousContent = [
+    {
+        type: 'p',
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+], }) => {
+    const [errors, setErrors] = React.useState([]);
+    const createImageValidator = async (files) => {
+        setErrors([]);
+        const allErrors = [];
+        if (validation) {
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const fileErrors = await validateFile(file, validation);
+                if (fileErrors.length > 0) {
+                    allErrors.push(...fileErrors);
+                    break;
+                }
+            }
+        }
+        if (allErrors?.length > 0) {
+            setErrors(allErrors);
+            return '';
+        }
+        else {
+            return await handleUploadImage(files);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Modal, { controlledOpen: errors.length > 0 },
+            React.createElement(Modal.Content, { footer: React.createElement(Box, { "$display": "flex", "$justify": "center", "$gap": 16, sx: "position: relative; width: 100%;" },
+                    React.createElement(Button, { fluid: true, size: "small", type: "primary", onClick: () => setErrors([]) }, "Close")), header: React.createElement(H, { "$bold": true, "$color": "grey-2", "$fontSize": 20 }, "Can't read files") },
+                React.createElement(Box, { "$align": "flex-start", "$display": "flex", "$dir": "column", "$gap": 32, sx: "width: 500px;" },
+                    React.createElement(P, { "$textClampLines": 10 }, validationMessage)))),
+        React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
+            React.createElement(Wrapper, null,
+                editable && React.createElement(EditorBar, { handleUploadImage: createImageValidator }),
+                React.createElement(InnerWrapper, { "$sx": sx },
+                    React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true }))))));
+};
+const InnerWrapper = styled.div `
   & > div {
     padding: 24px;
     min-height: 224px;
@@ -9,8 +62,9 @@
       margin: 24px 0px;
     }
   }
-  ${({$sx:e})=>e||""};
-`,Wrapper=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Wrapper = styled.div `
   position: relative;
   max-width: 1200px;
   width: 100%;
@@ -65,4 +119,4 @@
   & > [data-slate-editor='true'] > * {
     margin: 24px 0px;
   }
-`;exports.SimpleEditor=SimpleEditor;
+`;

package/dist/components/editor/styles/menu_button.js

@@ -1,5 +1,6 @@
-"use client";
-"use strict";var styled=require("styled-components");const MenuButton=styled.styled.button`
+'use client';
+import { styled } from 'styled-components';
+export const MenuButton = styled.button `
   padding: 2px;
   border: none;
   outline: none;
@@ -26,5 +27,5 @@
     }
   }
 
-  background-color: ${({$active:o})=>o?"var(--color-grey-9)":"transparent"};
-`;exports.MenuButton=MenuButton;
+  background-color: ${({ $active }) => $active ? 'var(--color-grey-9)' : 'transparent'};
+`;

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -1,10 +1,30 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),toast=require("../toast/toast.js");function _interopDefaultCompat(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var React__default=_interopDefaultCompat(React);const AnimatedToast=({message:t,type:e,onClose:a,animationDuration:o=4})=>{const[s,n]=React__default.default.useState(!1),i=React__default.default.useRef(null);return React__default.default.useEffect(()=>(i.current=setTimeout(()=>{n(!0),a&&a()},1e3*o),()=>{clearTimeout(i.current)}),[o,a]),React__default.default.createElement(Container,null,React__default.default.createElement(ToastAnimation,{className:s?"toast-closed":""},React__default.default.createElement(toast.Toast,{content:t,type:e,isAnimated:!0,animationDuration:o})))},Container=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Toast } from '../../../components/feedback/toast/toast';
+export const AnimatedToast = ({ message, type, onClose, animationDuration = 4, }) => {
+    const [toastIsClosed, setToastIsClosed] = React.useState(false);
+    const timer = React.useRef(null);
+    React.useEffect(() => {
+        timer.current = setTimeout(() => {
+            setToastIsClosed(true);
+            !!onClose && onClose();
+        }, animationDuration * 1000);
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, [animationDuration, onClose]);
+    return (React.createElement(Container, null,
+        React.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React.createElement(Toast, { content: message, type: type, isAnimated: true, animationDuration: animationDuration }))));
+};
+const Container = styled.div `
   position: fixed;
   z-index: 9999;
   bottom: 16px;
   right: 16px;
-`,ToastAnimation=styled.styled.div`
+`;
+const ToastAnimation = styled.div `
   animation: slide-in 0.4s ease-in-out forwards;
 
   &.toast-closed {
@@ -32,4 +52,4 @@
       transform: translateX(0%);
     }
   }
-`;exports.AnimatedToast=AnimatedToast;
+`;

package/dist/components/feedback/animated_toast/index.js

@@ -0,0 +1 @@
+export { AnimatedToast } from './animated_toast';

package/dist/components/feedback/badge/badge.js

@@ -1,13 +1,52 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React);const colorLookup={blue:{primary:"var(--color-hue-blue-1)",secondary:"var(--color-hue-blue-2)",bg:"var(--color-hue-blue-3)"},green:{primary:"var(--color-green-3)",secondary:"var(--color-green-8)",bg:"var(--color-green-10)"},orange:{primary:"var(--color-hue-orange-1)",secondary:"var(--color-hue-orange-2)",bg:"var(--color-hue-orange-3)"},purple:{primary:"var(--color-hue-purple-1)",secondary:"var(--color-hue-purple-2)",bg:"var(--color-hue-purple-3)"},red:{primary:"var(--color-red-4)",secondary:"var(--color-red-9)",bg:"var(--color-red-10)"}},Badge=({children:r,color:e,dot:o,onDismiss:l})=>{var a=colorLookup[e].bg,t=colorLookup[e].primary,e=colorLookup[e].secondary;return React__default.default.createElement(Component,{$bgColor:a,$borderColor:e,$textColor:t},o&&React__default.default.createElement(Dot,{$secondaryColor:t}),r,l&&React__default.default.createElement(close.Close,{size:16}))},Component=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Close } from '../../../icons/basic/close';
+const colorLookup = {
+    blue: {
+        primary: 'var(--color-hue-blue-1)',
+        secondary: 'var(--color-hue-blue-2)',
+        bg: 'var(--color-hue-blue-3)',
+    },
+    green: {
+        primary: 'var(--color-green-3)',
+        secondary: 'var(--color-green-8)',
+        bg: 'var(--color-green-10)',
+    },
+    orange: {
+        primary: 'var(--color-hue-orange-1)',
+        secondary: 'var(--color-hue-orange-2)',
+        bg: 'var(--color-hue-orange-3)',
+    },
+    purple: {
+        primary: 'var(--color-hue-purple-1)',
+        secondary: 'var(--color-hue-purple-2)',
+        bg: 'var(--color-hue-purple-3)',
+    },
+    red: {
+        primary: 'var(--color-red-4)',
+        secondary: 'var(--color-red-9)',
+        bg: 'var(--color-red-10)',
+    },
+};
+export const Badge = ({ children, color, dot, onDismiss }) => {
+    const bgColor = colorLookup[color].bg;
+    const textColor = colorLookup[color].primary;
+    const borderColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$borderColor": borderColor, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": textColor }),
+        children,
+        onDismiss && React.createElement(Close, { size: 16 })));
+};
+const Component = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 1px 7px;
   border-radius: 32px;
-  background-color: ${({$bgColor:r})=>r};
-  color: ${({$textColor:r})=>r};
-  border: 1px solid ${({$borderColor:r})=>r};
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
+  border: 1px solid ${({ $borderColor }) => $borderColor};
   font-family: var(--font-inter);
   font-size: 12px;
   font-weight: 500;
@@ -18,9 +57,10 @@
     fill: currentColor;
     cursor: pointer;
   }
-`,Dot=styled.styled.div`
+`;
+const Dot = styled.div `
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: ${({$secondaryColor:r})=>r};
-`;exports.Badge=Badge;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/dist/components/feedback/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from './badge';

package/dist/components/feedback/banner/banner.js

@@ -1,17 +1,62 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Banner=({content:e,href:t,onClose:r,title:a,type:o,setContentInNewLine:l=!1,additionalContent:n,sx:i})=>{var c={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:"output",$dir:"row",$gap:8,$type:o,$sx:i},c[o],React__default.default.createElement(box.Box,{$dir:l?"column":"row",sx:"width: 100%; flex-wrap: wrap;",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},a),React__default.default.createElement(paragraph.P,{as:"span",sx:l?"margin-top: 12px;":""},e),n&&React__default.default.createElement(paragraph.P,{as:"span"},n),t&&React__default.default.createElement(paragraph.P,{as:"a",href:t,$color:"primary-blue-2"},"Read more")),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,type:"special"}))},Wrapper=styled.styled.output`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
+import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
+import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
+import { Close } from '../../../icons/basic/close';
+import { Information } from '../../../icons/notifications/information';
+export const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
+        iconLookup[type],
+        React.createElement(Box, { "$dir": setContentInNewLine ? 'column' : 'row', sx: "width: 100%; flex-wrap: wrap;", "$gap": 4 },
+            React.createElement(P, { as: "span", "$semiBold": true }, title),
+            React.createElement(P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
+            additionalContent && React.createElement(P, { as: "span" }, additionalContent),
+            href && (React.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
+        onClose && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }))));
+};
+const Wrapper = styled.output `
   width: 100%;
   box-sizing: border-box;
   padding: 12px 16px;
   display: flex;
-  background-color: ${({$type:e})=>"error"===e?"var(--color-red-9)":"info"===e?"var(--color-blue-9)":"success"===e?"var(--color-green-9)":"var(--color-orange-9)"};
+  background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-9)'
+    : $type === 'info'
+        ? 'var(--color-blue-9)'
+        : $type === 'success'
+            ? 'var(--color-green-9)'
+            : 'var(--color-orange-9)'};
   border-bottom: 1px solid
-    ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
+    ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
 
   & > svg {
-    fill: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
   }
 
   a {
@@ -35,7 +80,7 @@
     margin-left: auto;
   }
 
-  ${styles.Styles.flex}
+  ${Styles.flex}
 
-  ${({$sx:e})=>e||""}
-`;exports.Banner=Banner;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;