@soul-refiner/design-system 1.4.2 → 1.5.1

package/dist/components/editor/constants.d.ts

@@ -7,25 +7,16 @@ export declare const BUTTON_LINK = "button-link";
 export declare const BUTTON_SUBSCRIBE = "button-subscribe";
 export declare const COLORS: string[];
 export declare const PLACEHOLDER = "This is a placeholder";
-export declare const DEFAULT_CONTENT: ({
+export declare const DEFAULT_CONTENT: {
     children: {
         text: string;
     }[];
-    questionAnswerId: string;
-    type: string;
-    id?: undefined;
-} | {
-    children: {
-        text: string;
-    }[];
-    id: number;
     type: string;
-    questionAnswerId?: undefined;
-} | {
+}[];
+export declare const DEFAULT_Q_N_A: {
     children: {
         text: string;
     }[];
+    questionAnswerId: string;
     type: string;
-    questionAnswerId?: undefined;
-    id?: undefined;
-})[];
+}[];

package/dist/components/editor/constants.js

@@ -16,30 +16,23 @@ export const COLORS = [
 ];
 export const PLACEHOLDER = 'This is a placeholder';
 export const DEFAULT_CONTENT = [
-    {
-        children: [
-            {
-                text: 'What are you struggling with today and how is it affecting the people you love? This is a longer sentence to see what it looks like.',
-            },
-        ],
-        questionAnswerId: 'q-n-a-ac0396ed-62ed-4a30-ba12-98f4fa2d364c',
-        type: ELEMENT_QA,
-    },
     {
         children: [
             {
                 text: '',
             },
         ],
-        id: 1,
-        type: ELEMENT_VIDEO,
+        type: 'p',
     },
+];
+export const DEFAULT_Q_N_A = [
     {
         children: [
             {
-                text: '',
+                text: 'What is your question?',
             },
         ],
-        type: 'p',
+        questionAnswerId: 'q-n-a-16d648b0-e7db-4365-af08-61833b59e29d',
+        type: ELEMENT_QA,
     },
 ];

package/dist/components/editor/editor.js

@@ -5,9 +5,9 @@ import { createPlugins, Plate, PlateContent } from '@udecode/plate';
 import { PLACEHOLDER } from './constants';
 import { EditorContext } from './context';
 import { EditorBar } from './navbar';
-import { plateUI } from './plate';
-import { blocks, inline, marks, utils } from './plugins';
-const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
+import { plateUI } from './plugins/plate';
+import { blocks, leafs, marks, utils } from './plugins';
+const plugins = createPlugins([...blocks, ...leafs, ...marks, ...utils], {
     components: plateUI,
 });
 export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, videoTitleLoader, }) => {

package/dist/components/editor/icons/border-all.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderAll: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-all.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderAll = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z" })));

package/dist/components/editor/icons/border-bottom.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderBottom: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-bottom.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderBottom = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z" })));

package/dist/components/editor/icons/border-left.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderLeft: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-left.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderLeft = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })));

package/dist/components/editor/icons/border-none.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderNone: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-none.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderNone = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z" })));

package/dist/components/editor/icons/border-right.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderRight: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-right.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderRight = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z" })));

package/dist/components/editor/icons/border-top.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const BorderTop: (props: LucideProps) => React.JSX.Element;

package/dist/components/editor/icons/border-top.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const BorderTop = (props) => (React.createElement("svg", { viewBox: "0 0 24 24", height: "48", width: "48", focusable: "false", role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React.createElement("path", { d: "M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })));

package/dist/components/editor/icons/index.d.ts

@@ -0,0 +1,6 @@
+export { BorderAll } from './border-all';
+export { BorderBottom } from './border-bottom';
+export { BorderLeft } from './border-left';
+export { BorderNone } from './border-none';
+export { BorderRight } from './border-right';
+export { BorderTop } from './border-top';

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

@@ -0,0 +1,6 @@
+export { BorderAll } from './border-all';
+export { BorderBottom } from './border-bottom';
+export { BorderLeft } from './border-left';
+export { BorderNone } from './border-none';
+export { BorderRight } from './border-right';
+export { BorderTop } from './border-top';

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { getPluginType, insertImage, insertNodes, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, useEditorState, } from '@udecode/plate';
+import { getPluginType, insertImage, insertNodes, insertTable, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, useEditorState, } from '@udecode/plate';
 import { Tooltip } from '../../';
-import { Bold, FileCode, Headphones, Image, Italic, Link, ListOrdered, ListUnordered, Quote, Redo, Strikethrough, Underline, Undo, Video, } from '../../../icons';
+import { Bold, FileCode, Grid, Headphones, Image, Italic, Link, ListOrdered, ListUnordered, Quote, Redo, Strikethrough, Underline, Undo, Video, } from '../../../icons';
 import { ELEMENT_BLOCKQUOTE, ELEMENT_BUTTON, ELEMENT_OL, ELEMENT_UL, MARK_BOLD, MARK_CODE, MARK_ITALIC, MARK_STRIKETHROUGH, MARK_UNDERLINE, } from '../constants';
 import { AlignmentDropdown } from './alignment_dropdown';
 import { ButtonModal } from './button_modal';
@@ -143,7 +143,12 @@ export const EditorBar = ({ handleUploadImage }) => {
                         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" })))))));
+                        React.createElement(ListOrdered, { size: 24, color: "grey-5" }))),
+                React.createElement(Tooltip, { content: "Add a button", place: "top" },
+                    React.createElement(MenuButton, { "$active": currOrderedList, onClick: () => {
+                            insertTable(editorRef);
+                        } },
+                        React.createElement(Grid, { size: 24, color: "grey-5" })))))));
 };
 const Wrapper = styled.div `
   position: sticky;

package/dist/components/editor/plugins/{blockquote.js → blocks/blockquote.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PlateElement, } from '@udecode/plate';
-import { P } from '../../';
+import { P } from '../../../atoms/typography';
 export const BlockquoteElement = React.forwardRef(({ children, ...props }, ref) => {
     return (React.createElement(PlateElement, { asChild: true, ref: ref, ...props },
         React.createElement(React.Fragment, null,

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

@@ -0,0 +1 @@
+export declare const blocks: (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-core").HotkeyPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-code-block").CodeBlockPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-heading").HeadingsPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").ImagePlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-indent").IndentPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-indent-list").IndentListPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").MediaPlugin, 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-table").TablePlugin<import("@udecode/slate").Value>, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];

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

@@ -0,0 +1,50 @@
+import { createBlockquotePlugin, createCodeBlockPlugin, createHeadingPlugin, createHorizontalRulePlugin, createIndentListPlugin, createImagePlugin, createTextIndentPlugin, createListPlugin, createMediaEmbedPlugin, createResetNodePlugin, createTablePlugin, } from '@udecode/plate';
+import { createButtonsPlugin } from './buttons';
+import { createQAPlugin } from './qa';
+import { createParagraphPlugin, createHOnePlugin, createHTwoPlugin, createHThreePlugin, createHFourPlugin, createHFivePlugin, createHSixPlugin, } from './text';
+import { createVideoTitlePlugin } from './video';
+import { ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_OL, ELEMENT_UL, } from '../../constants';
+export const blocks = [
+    createButtonsPlugin(),
+    createBlockquotePlugin(),
+    createCodeBlockPlugin(),
+    createHeadingPlugin(),
+    createHorizontalRulePlugin(),
+    createImagePlugin({
+        options: {
+            disableUploadInsert: true,
+            disableEmbedInsert: true,
+        },
+    }),
+    createQAPlugin(),
+    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(),
+    createTablePlugin(),
+    createVideoTitlePlugin(),
+];

package/dist/components/editor/plugins/{buttons.js → blocks/buttons.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { createPluginFactory, getBlockAbove, getPluginType, isEditorReadOnly, setNodes, someNode, PlateElement, } from '@udecode/plate';
-import { Button as UIButton } from '../../';
-import { COLORS, ELEMENT_BUTTON, ELEMENT_PARAGRAPH } from '../constants';
+import { Button as UIButton } from '../../..';
+import { COLORS, ELEMENT_BUTTON, ELEMENT_PARAGRAPH } from '../../constants';
 export const Button = React.forwardRef(({ children, editor, element, ...props }, ref) => {
     const { buttonType, color } = element;
     const pressed = !!editor?.selection &&

package/dist/components/editor/plugins/blocks/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideIcon?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuShortcut: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const useOpenState: () => {
+    open: boolean;
+    onOpenChange: (_value?: boolean) => void;
+};

package/dist/components/editor/plugins/blocks/dropdown-menu.js

@@ -0,0 +1,62 @@
+'use client';
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn, createPrimitiveElement, withCn, withProps, withRef, withVariants, } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+import { ChevronRight } from '../../../../icons/arrow/chevron_right';
+import { Checkmark } from '../../../../icons/basic/checkmark';
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuSubTrigger = withRef(({ className, inset, children, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn('flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', className), ...props },
+    children,
+    React.createElement(ChevronRight, { className: "ml-auto h-4 w-4" }))));
+export const DropdownMenuSubContent = withCn(DropdownMenuPrimitive.SubContent, 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
+const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
+    sideOffset: 4,
+    className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'),
+});
+export const DropdownMenuContent = withRef(({ ...props }, ref) => (React.createElement(DropdownMenuPrimitive.Portal, null,
+    React.createElement(DropdownMenuContentVariants, { ref: ref, ...props }))));
+const menuItemVariants = cva(cn('relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'), {
+    variants: {
+        inset: {
+            true: 'pl-8',
+        },
+    },
+});
+export const DropdownMenuItem = withVariants(DropdownMenuPrimitive.Item, menuItemVariants, ['inset']);
+export const DropdownMenuCheckboxItem = withRef(({ className, children, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'cursor-pointer', className), ...props },
+    React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+        React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+            React.createElement(Checkmark, { className: "h-4 w-4" }))),
+    children)));
+export const DropdownMenuRadioItem = withRef(({ className, children, hideIcon, ...props }, ref) => (React.createElement(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn('relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground', className), ...props },
+    !hideIcon && (React.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" },
+        React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+            React.createElement(Checkmark, { className: "h-4 w-4" })))),
+    children)));
+const dropdownMenuLabelVariants = cva(cn('select-none px-2 py-1.5 text-sm font-semibold'), {
+    variants: {
+        inset: {
+            true: 'pl-8',
+        },
+    },
+});
+export const DropdownMenuLabel = withVariants(DropdownMenuPrimitive.Label, dropdownMenuLabelVariants, ['inset']);
+export const DropdownMenuSeparator = withCn(DropdownMenuPrimitive.Separator, '-mx-1 my-1 h-px bg-muted');
+export const DropdownMenuShortcut = withCn(createPrimitiveElement('span'), 'ml-auto text-xs tracking-widest opacity-60');
+export const useOpenState = () => {
+    const [open, setOpen] = useState(false);
+    const onOpenChange = useCallback((_value = !open) => {
+        setOpen(_value);
+    }, [open]);
+    return {
+        open,
+        onOpenChange,
+    };
+};

package/dist/components/editor/plugins/blocks/index.d.ts

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

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

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

package/dist/components/editor/plugins/blocks/plate-button.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "inlineLink" | null | undefined;
+    size?: "none" | "icon" | "default" | "sm" | "xs" | "sms" | "lg" | null | undefined;
+    isMenu?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "inlineLink" | null | undefined;
+    size?: "none" | "icon" | "default" | "sm" | "xs" | "sms" | "lg" | null | undefined;
+    isMenu?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/editor/plugins/blocks/plate-button.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn, withRef } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+export const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            link: 'text-primary underline-offset-4 hover:underline',
+            inlineLink: 'text-base text-primary underline underline-offset-4',
+        },
+        size: {
+            default: 'h-10 px-4 py-2',
+            xs: 'h-8 rounded-md px-3',
+            sm: 'h-9 rounded-md px-3',
+            sms: 'h-9 w-9 rounded-md px-0',
+            lg: 'h-11 rounded-md px-8',
+            icon: 'h-10 w-10',
+            none: '',
+        },
+        isMenu: {
+            true: 'h-auto w-full cursor-pointer justify-start',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+export const Button = withRef(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (React.createElement(Comp, { className: cn(buttonVariants({ isMenu, variant, size, className })), ref: ref, ...props }));
+});

package/dist/components/editor/plugins/blocks/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const popoverVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn, withRef } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const popoverVariants = cva('w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden');
+export const PopoverContent = withRef(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Portal, null,
+    React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn(popoverVariants(), className), style: { zIndex: 1000, ...style }, ...props }))));

package/dist/components/editor/plugins/{qa.js → blocks/qa.js}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createPluginFactory, PlateElement, } from '@udecode/plate';
 import styled from 'styled-components';
-import { ELEMENT_QA } from '../constants';
-import { EditorContext } from '../context';
-import { Button } from '../../actions';
-import { Box } from '../../atoms/box';
-import { HideButRender } from '../../atoms/hide';
-import { H } from '../../atoms/typography';
-import { ChevronDown } from '../../../icons/arrow/chevron_down';
-import { ChevronUp } from '../../../icons/arrow/chevron_up';
+import { ELEMENT_QA } from '../../constants';
+import { EditorContext } from '../../context';
+import { Button } from '../../../actions';
+import { Box } from '../../../atoms/box';
+import { HideButRender } from '../../../atoms/hide';
+import { H } from '../../../atoms/typography';
+import { ChevronDown } from '../../../../icons/arrow/chevron_down';
+import { ChevronUp } from '../../../../icons/arrow/chevron_up';
 export const QuestionAnswerElement = React.forwardRef(({ children, element, ...props }, ref) => {
     const { questionAnswerId } = element;
     const { commentInputLoader: CommentInput, commentLoader: Comments } = React.useContext(EditorContext);

package/dist/components/editor/plugins/blocks/resizable.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export declare const mediaResizeHandleVariants: (props?: ({
+    direction?: "right" | "left" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const ResizeHandle: React.ForwardRefExoticComponent<Omit<{
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    options?: import("@udecode/plate-resizable").ResizeHandleOptions | undefined;
+    state?: {
+        isResizing: boolean;
+        setIsResizing: React.Dispatch<React.SetStateAction<boolean>>;
+        initialPosition: number;
+        setInitialPosition: React.Dispatch<React.SetStateAction<number>>;
+        initialSize: number;
+        setInitialSize: React.Dispatch<React.SetStateAction<number>>;
+        isHorizontal: boolean;
+        direction: import("@udecode/plate-resizable").ResizeDirection;
+        onResize: (event: import("@udecode/plate-resizable").ResizeEvent) => void;
+        onMouseDown: React.MouseEventHandler<Element> | undefined;
+        onTouchStart: React.TouchEventHandler<Element> | undefined;
+        onHover: (() => void) | undefined;
+        onHoverEnd: (() => void) | undefined;
+    } | undefined;
+    setProps?: ((hookProps: {
+        onMouseDown: React.MouseEventHandler<Element>;
+        onTouchStart: React.TouchEventHandler<Element>;
+        onMouseOver: () => void;
+        onMouseOut: () => void;
+        onTouchMove: () => void;
+        onTouchEnd: () => void;
+    }) => Omit<React.HTMLAttributes<HTMLDivElement>, "onResize">) | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;
+export declare const Resizable: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & {
+    options: import("@udecode/plate-resizable").ResizableOptions;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    align?: "center" | "right" | "left" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+'use client';
+import React from 'react';
+import { cn, withRef, withVariants } from '@udecode/cn';
+import { Resizable as ResizablePrimitive, ResizeHandle as ResizeHandlePrimitive, } from '@udecode/plate-resizable';
+import { cva } from 'class-variance-authority';
+export const mediaResizeHandleVariants = cva(cn('top-0 flex w-6 select-none flex-col justify-center', "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"), {
+    variants: {
+        direction: {
+            left: '-left-3 -ml-3 pl-3',
+            right: '-right-3 -mr-3 items-end pr-3',
+        },
+    },
+});
+const resizeHandleVariants = cva(cn('absolute z-40'), {
+    variants: {
+        direction: {
+            left: 'h-full cursor-col-resize',
+            right: 'h-full cursor-col-resize',
+            top: 'w-full cursor-row-resize',
+            bottom: 'w-full cursor-row-resize',
+        },
+    },
+});
+const ResizeHandleVariants = withVariants(ResizeHandlePrimitive, resizeHandleVariants, ['direction']);
+export const ResizeHandle = withRef((props, ref) => (React.createElement(ResizeHandleVariants, { ref: ref, direction: props.options?.direction, ...props })));
+const resizableVariants = cva('', {
+    variants: {
+        align: {
+            left: 'mr-auto',
+            center: 'mx-auto',
+            right: 'ml-auto',
+        },
+    },
+});
+export const Resizable = withVariants(ResizablePrimitive, resizableVariants, [
+    'align',
+]);

package/dist/components/editor/plugins/blocks/separator.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<SeparatorPrimitive.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+'use client';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { withProps, withVariants } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+const separatorVariants = cva('shrink-0 bg-border', {
+    variants: {
+        orientation: {
+            horizontal: 'h-[1px] w-full',
+            vertical: 'h-full w-[1px]',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+export const Separator = withVariants(withProps(SeparatorPrimitive.Root, {
+    orientation: 'horizontal',
+    decorative: true,
+}), separatorVariants);

package/dist/components/editor/plugins/blocks/table-cell.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare const TableCellElement: React.ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
+    element: import("@udecode/slate").TElement;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any> & {
+    elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideBorder?: boolean | undefined;
+    isHeader?: boolean | undefined;
+} & React.RefAttributes<any>>;
+export declare const TableCellHeaderElement: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
+    element: import("@udecode/slate").TElement;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any> & {
+    elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideBorder?: boolean | undefined;
+    isHeader?: boolean | undefined;
+} & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;