@use-kona/editor 0.1.28 → 0.1.30

package/dist/core/createEditable.js

@@ -19,6 +19,9 @@ const SUPPORTED_HANDLERS = [
 const createEditable = (editor, plugins)=>({ readOnly })=>{
         const [selectedNodes] = useState(()=>atom([]));
         const $selectedNodes = useStore(selectedNodes);
+        const renderBlockPlugins = [
+            ...plugins
+        ].sort((left, right)=>(left.renderBlockPriority || 0) - (right.renderBlockPriority || 0));
         const renderElement = (props)=>{
             let result = null;
             for (const plugin of plugins)for (const element of plugin.blocks || []){
@@ -26,7 +29,7 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                 const newElement = element.render(props, editor);
                 result = newElement || result;
             }
-            for (const plugin of plugins)if (plugin.renderBlock) result = plugin.renderBlock({
+            for (const plugin of renderBlockPlugins)if (plugin.renderBlock) result = plugin.renderBlock({
                 ...props,
                 children: result || props.children
             });

package/dist/plugins/CodeBlockPlugin/styles_module.css

@@ -1,4 +1,5 @@
 .root-aY1XCj {
+  counter-reset: line;
   flex-direction: column;
   font-family: monospace;
   display: flex;

package/dist/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Editor, Element, Range, Transforms } from "slate";
+import { ReactEditor, useSlate } from "slate-react";
+import styles_module from "./styles.module.js";
+const sectionTypesByEditor = new WeakMap();
+class CollapsibleBlocksPlugin {
+    types;
+    renderBlockPriority = -1;
+    constructor(types){
+        this.types = types;
+    }
+    init(editor) {
+        sectionTypesByEditor.set(editor, this.types);
+        return editor;
+    }
+    renderBlock = (props)=>{
+        const editor = useSlate();
+        const path = ReactEditor.findPath(editor, props.element);
+        if (1 !== path.length) return props.children;
+        const isHidden = isHiddenByCollapsedBoundary(editor, path, this.types);
+        if (isHidden) return /*#__PURE__*/ jsx("div", {
+            className: styles_module.hidden,
+            "data-collapsible-block-hidden": true,
+            hidden: true,
+            children: props.children
+        });
+        if (this.types.includes(props.element.type)) return /*#__PURE__*/ jsx(CollapsibleBoundary, {
+            editor: editor,
+            element: props.element,
+            path: path,
+            types: this.types,
+            children: props.children
+        });
+        return props.children;
+    };
+}
+const CollapsibleBoundary = ({ children, editor, element, path, types })=>{
+    const isCollapsed = true === element.collapsed;
+    const toggle = ()=>{
+        const willCollapse = !isCollapsed;
+        Transforms.setNodes(editor, {
+            collapsed: willCollapse
+        }, {
+            at: path
+        });
+        if (willCollapse && isSelectionInsideSection(editor, path, types)) Transforms.select(editor, Editor.start(editor, path));
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles_module.boundary,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                "aria-expanded": !isCollapsed,
+                "aria-label": isCollapsed ? 'Expand section' : 'Collapse section',
+                className: isCollapsed ? styles_module.chevron : `${styles_module.chevron} ${styles_module.expanded}`,
+                contentEditable: false,
+                onClick: toggle,
+                onMouseDown: (event)=>event.preventDefault(),
+                type: "button",
+                children: /*#__PURE__*/ jsxs("svg", {
+                    "aria-hidden": "true",
+                    fill: "none",
+                    height: "16",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "1.5",
+                    viewBox: "0 0 24 24",
+                    width: "16",
+                    children: [
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M0 0h24v24H0z",
+                            fill: "none",
+                            stroke: "none"
+                        }),
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M9 6l6 6l-6 6"
+                        })
+                    ]
+                })
+            }),
+            children
+        ]
+    });
+};
+const getCollapsibleSectionPaths = (editor, path)=>{
+    const types = sectionTypesByEditor.get(editor);
+    if (!types || 1 !== path.length) return null;
+    const boundary = editor.children[path[0]];
+    if (!boundary || !types.includes(boundary.type)) return null;
+    const end = getSectionEnd(editor, path[0], types);
+    return Array.from({
+        length: end - path[0]
+    }, (_, index)=>[
+            path[0] + index
+        ]);
+};
+const isHiddenByCollapsedBoundary = (editor, path, types)=>{
+    for(let index = 0; index < path[0]; index++){
+        const node = editor.children[index];
+        if (Element.isElement(node) && true === node.collapsed && types.includes(node.type) && path[0] < getSectionEnd(editor, index, types)) return true;
+    }
+    return false;
+};
+const isSelectionInsideSection = (editor, boundaryPath, types)=>{
+    const { selection } = editor;
+    if (!selection || !Range.isCollapsed(selection)) return false;
+    const selectionIndex = selection.focus.path[0];
+    if (selectionIndex <= boundaryPath[0]) return false;
+    return selectionIndex < getSectionEnd(editor, boundaryPath[0], types);
+};
+const getSectionEnd = (editor, boundaryIndex, types)=>{
+    const boundary = editor.children[boundaryIndex];
+    const boundaryLevel = types.indexOf(boundary.type);
+    for(let index = boundaryIndex + 1; index < editor.children.length; index++){
+        const node = editor.children[index];
+        const nodeLevel = Element.isElement(node) ? types.indexOf(node.type) : -1;
+        if (-1 !== nodeLevel && nodeLevel <= boundaryLevel) return index;
+    }
+    return editor.children.length;
+};
+export { CollapsibleBlocksPlugin, getCollapsibleSectionPaths };

package/dist/plugins/CollapsibleBlocksPlugin/index.js

@@ -0,0 +1,2 @@
+import { CollapsibleBlocksPlugin } from "./CollapsibleBlocksPlugin.js";
+export { CollapsibleBlocksPlugin };

package/dist/plugins/CollapsibleBlocksPlugin/styles.module.js

@@ -0,0 +1,8 @@
+import "./styles_module.css";
+const styles_module = {
+    boundary: "boundary-gLj40W",
+    chevron: "chevron-up0Fid",
+    expanded: "expanded-HCZXmg",
+    hidden: "hidden-icZZ78"
+};
+export { styles_module as default };

package/dist/plugins/CollapsibleBlocksPlugin/styles_module.css

@@ -0,0 +1,38 @@
+.boundary-gLj40W {
+  position: relative;
+}
+
+.chevron-up0Fid {
+  appearance: none;
+  color: inherit;
+  cursor: pointer;
+  inset-inline-start: -20px;
+  width: 16px;
+  height: 16px;
+  font: inherit;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  transition: transform .15s;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.expanded-HCZXmg {
+  transform: translateY(-50%)rotate(90deg);
+}
+
+.chevron-up0Fid svg {
+  display: block;
+}
+
+.hidden-icZZ78 {
+  display: none;
+}
+

package/dist/plugins/CommandsPlugin/Menu.js

@@ -196,9 +196,9 @@ const Menu = (props)=>{
                     break;
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown, true);
         return ()=>{
-            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keydown', handleKeyDown, true);
         };
     }, [
         actions,

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -6,6 +6,7 @@ import { NativeTypes } from "react-dnd-html5-backend";
 import { Editor, Element, Path, Transforms } from "slate";
 import { ReactEditor, useReadOnly, useSlate } from "slate-react";
 import { useEditorContext } from "../../provider.js";
+import { getCollapsibleSectionPaths } from "../CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.js";
 import { getNodesByNodeIds } from "./utils.js";
 class DnDPlugin {
     options;
@@ -37,7 +38,9 @@ class DnDPlugin {
             type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
             item: ()=>{
                 const selected = $selectedNodes;
-                const nodes = selected.length > 0 && selected.find((node)=>node.nodeId === currentElement.nodeId) ? getNodesByNodeIds(editor, selected.map((node)=>node.nodeId)) : [
+                const path = ReactEditor.findPath(editor, props.element);
+                const sectionPaths = getCollapsibleSectionPaths(editor, path);
+                const nodes = sectionPaths ? getNodesAtPaths(editor, sectionPaths) : selected.length > 0 && selected.find((node)=>node.nodeId === currentElement.nodeId) ? getNodesByNodeIds(editor, selected.map((node)=>node.nodeId)) : [
                     structuredClone(props.element)
                 ];
                 const item = this.options.customTypes?.[currentElement.type]?.getData?.(currentElement);
@@ -52,7 +55,9 @@ class DnDPlugin {
                     items,
                     source: {
                         editor,
-                        documentId: options.documentId
+                        documentId: options.documentId,
+                        path,
+                        sectionPaths: sectionPaths || void 0
                     }
                 };
                 return dragItem;
@@ -77,14 +82,8 @@ class DnDPlugin {
                 };
             },
             hover (_, monitor) {
-                const element = dropTargetRef.current;
-                if (!element) return;
-                const hoverBoundingRect = element.getBoundingClientRect();
-                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-                const clientOffset = monitor.getClientOffset();
-                if (!clientOffset) return;
-                const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-                hoverClientY < hoverMiddleY ? setDropPosition('top') : setDropPosition('bottom');
+                const position = getDropPosition(dropTargetRef.current, monitor);
+                if (position) setDropPosition(position);
             },
             drop: (data, monitor)=>{
                 const itemType = monitor.getItemType();
@@ -93,7 +92,8 @@ class DnDPlugin {
                 const isSameEditor = 'inner' === data.kind && data.source?.editor === editor;
                 const sourceTo = ReactEditor.findPath(editor, props.element);
                 if (!sourceTo) return;
-                const insertAt = getDropPath(editor, sourceTo, dropPosition || 'bottom');
+                const position = getDropPosition(dropTargetRef.current, monitor) || dropPosition || 'bottom';
+                const insertAt = getDropPath(editor, sourceTo, position);
                 if (!insertAt) return;
                 const customDropHandler = itemType && options.customDropHandlers?.[itemType];
                 if (customDropHandler && 'outer' === data.kind) return void customDropHandler.onDrop({
@@ -109,18 +109,18 @@ class DnDPlugin {
                         {
                             const dragItem = data;
                             if ('outer' === dragItem.kind) return;
-                            if (!dropPosition || !dragItem.nodes.length) return;
-                            const nodeIds = dragItem.nodes.map((node)=>node.nodeId);
+                            if (!dragItem.nodes.length) return;
+                            const nodeIds = dragItem.nodes.map((node)=>node.nodeId).filter((nodeId)=>'string' == typeof nodeId);
                             if (isSameDocument || isSameEditor) if (isCopying.current) {
                                 if (!generateId) return;
                                 const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
                                 insertNodes(editor, insertAt, clonedNodes);
-                            } else moveNode(editor, sourceTo, nodeIds, dropPosition);
+                            } else moveNode(editor, sourceTo, nodeIds, position, dragItem.source.path, dragItem.source.sectionPaths);
                             else {
                                 if (!generateId) return;
                                 const clonedNodes = cloneWithNewIds(dragItem.nodes, generateId);
                                 insertNodes(editor, insertAt, clonedNodes);
-                                if (!isCopying.current && sourceEditor) removeNodes(sourceEditor, nodeIds);
+                                if (!isCopying.current && sourceEditor) removeNodes(sourceEditor, nodeIds, dragItem.source.sectionPaths);
                             }
                             selectedNodes.set([]);
                             break;
@@ -174,11 +174,33 @@ const getDropPath = (editor, targetNodePath, position)=>{
             return Path.next(target[1]);
     }
 };
-const moveNode = (editor, targetNodePath, nodeIds, position)=>{
+const getDropPosition = (element, monitor)=>{
+    if (!element) return null;
+    const clientOffset = monitor.getClientOffset();
+    if (!clientOffset) return null;
+    const rect = element.getBoundingClientRect();
+    return clientOffset.y - rect.top < (rect.bottom - rect.top) / 2 ? 'top' : 'bottom';
+};
+const moveNode = (editor, targetNodePath, nodeIds, position, sourcePath, sectionPaths)=>{
     const dropPath = getDropPath(editor, targetNodePath, position);
     if (!dropPath) return;
-    if (!Editor.hasPath(editor, dropPath)) return;
+    if (!isValidInsertPath(editor, dropPath)) return;
+    if (sectionPaths?.some((path)=>Path.equals(path, targetNodePath))) return;
     Editor.withoutNormalizing(editor, ()=>{
+        if (sectionPaths?.length) {
+            const sectionNodes = new Set(sectionPaths.filter((path)=>Editor.hasPath(editor, path)).map((path)=>Editor.node(editor, path)[0]));
+            Transforms.moveNodes(editor, {
+                at: [],
+                match: (node)=>sectionNodes.has(node),
+                to: dropPath,
+                mode: 'highest'
+            });
+            return;
+        }
+        if (0 === nodeIds.length && sourcePath && Editor.hasPath(editor, sourcePath)) return void Transforms.moveNodes(editor, {
+            at: sourcePath,
+            to: dropPath
+        });
         Transforms.moveNodes(editor, {
             at: [],
             match: (n)=>{
@@ -194,6 +216,13 @@ const moveNode = (editor, targetNodePath, nodeIds, position)=>{
     });
     Editor.normalize(editor);
 };
+const isValidInsertPath = (editor, path)=>{
+    const parentPath = Path.parent(path);
+    const index = path[path.length - 1];
+    if (void 0 === index || !Editor.hasPath(editor, parentPath)) return false;
+    const [parent] = Editor.node(editor, parentPath);
+    return 'children' in parent && index <= parent.children.length;
+};
 const insertNodes = (editor, path, nodes)=>{
     Editor.withoutNormalizing(editor, ()=>{
         Transforms.insertNodes(editor, nodes, {
@@ -201,8 +230,20 @@ const insertNodes = (editor, path, nodes)=>{
         });
     });
 };
-const removeNodes = (editor, nodeIds)=>{
+const getNodesAtPaths = (editor, paths)=>paths.filter((path)=>Editor.hasPath(editor, path)).map((path)=>structuredClone(Editor.node(editor, path)[0]));
+const removeNodes = (editor, nodeIds, sectionPaths)=>{
     try {
+        if (sectionPaths?.length) {
+            const paths = sectionPaths.filter((path)=>Editor.hasPath(editor, path)).sort((left, right)=>Path.compare(right, left));
+            Editor.withoutNormalizing(editor, ()=>{
+                paths.forEach((path)=>{
+                    Transforms.removeNodes(editor, {
+                        at: path
+                    });
+                });
+            });
+            return;
+        }
         Transforms.removeNodes(editor, {
             at: [],
             match: (n)=>{
@@ -228,4 +269,4 @@ const cloneWithNewIds = (nodes, generateId)=>{
     copy.forEach(assignId);
     return copy;
 };
-export { DnDPlugin };
+export { DnDPlugin, moveNode };

package/dist/plugins/index.js

@@ -2,6 +2,7 @@ import { AttachmentsPlugin } from "./AttachmentsPlugin/index.js";
 import { BasicFormattingPlugin } from "./BasicFormattingPlugin/index.js";
 import { BreaksPlugin } from "./BreaksPlugin/index.js";
 import { CodeBlockPlugin } from "./CodeBlockPlugin/index.js";
+import { CollapsibleBlocksPlugin } from "./CollapsibleBlocksPlugin/index.js";
 import { CommandsPlugin } from "./CommandsPlugin/index.js";
 import { DnDPlugin } from "./DnDPlugin/index.js";
 import { EmojiPlugin } from "./EmojiPlugin/index.js";
@@ -15,4 +16,4 @@ import { NodeIdPlugin } from "./NodeIdPlugin/index.js";
 import { PlaceholderPlugin } from "./PlaceholderPlugin/index.js";
 import { ShortcutsPlugin } from "./ShortcutsPlugin/index.js";
 import { TableOfContentsPlugin } from "./TableOfContentsPlugin/index.js";
-export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin, isSafeLinkUrl };
+export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CollapsibleBlocksPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin, isSafeLinkUrl };

package/dist/src/plugins/CollapsibleBlocksPlugin/CollapsibleBlocksPlugin.d.ts

@@ -0,0 +1,13 @@
+import { Editor, type Path } from 'slate';
+import { ReactEditor, type RenderElementProps } from 'slate-react';
+import type { IPlugin } from '../../types';
+export declare class CollapsibleBlocksPlugin implements IPlugin {
+    private types;
+    renderBlockPriority: number;
+    constructor(types: string[]);
+    init(editor: Editor): import("slate").BaseEditor & ReactEditor & {
+        getCommands: <T extends IPlugin>(plugin: new () => T) => T["commands"];
+    };
+    renderBlock: (props: RenderElementProps) => any;
+}
+export declare const getCollapsibleSectionPaths: (editor: Editor, path: Path) => number[][] | null;

package/dist/src/plugins/CollapsibleBlocksPlugin/index.d.ts

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

package/dist/src/plugins/DnDPlugin/DnDPlugin.d.ts

@@ -1,4 +1,4 @@
-import { Editor } from 'slate';
+import { Editor, Path } from 'slate';
 import { ReactEditor, type RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
 import type { Options } from './types';
@@ -14,3 +14,4 @@ export declare class DnDPlugin implements IPlugin {
     };
     renderBlock: (props: RenderElementProps) => any;
 }
+export declare const moveNode: (editor: Editor, targetNodePath: Path, nodeIds: string[], position: "top" | "bottom", sourcePath?: Path, sectionPaths?: Path[]) => void;

package/dist/src/plugins/DnDPlugin/types.d.ts

@@ -61,6 +61,7 @@ export type EditorInnerDragItem<TItem = unknown> = {
          */
         documentId?: string | null;
         path?: Path;
+        sectionPaths?: Path[];
     };
     data?: Record<string, unknown>;
 };

package/dist/src/plugins/index.d.ts

@@ -2,6 +2,7 @@ export { AttachmentsPlugin } from './AttachmentsPlugin';
 export { BasicFormattingPlugin } from './BasicFormattingPlugin';
 export { BreaksPlugin } from './BreaksPlugin';
 export { CodeBlockPlugin, type CodeElement } from './CodeBlockPlugin';
+export { CollapsibleBlocksPlugin } from './CollapsibleBlocksPlugin';
 export { type Command, type CommandPathEntry, CommandsPlugin, type GetCommandsContext, } from './CommandsPlugin';
 export { DnDPlugin } from './DnDPlugin';
 export { EmojiPlugin } from './EmojiPlugin';

package/dist/src/types.d.ts

@@ -8,6 +8,11 @@ export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomE
     blocks?: Block<TEditor, TBlock>[];
     leafs?: Leaf<TEditor, TLeaf>[];
     hotkeys?: Hotkey[];
+    /**
+     * Render block wrappers from lower to higher priority. Plugins with the same
+     * priority retain the order supplied to KonaEditor.
+     */
+    renderBlockPriority?: number;
     renderBlock?: (props: RenderElementProps) => ReactElement | null;
     renderLeaf?: (props: RenderLeafProps) => ReactElement | null;
     handlers?: {

package/dist/types.d.ts

@@ -3,5 +3,6 @@ export type CustomText = {
 };
 export type CustomElement = {
     type: string;
+    collapsed?: boolean;
     children: (CustomElement | CustomText)[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/core/createEditable.tsx

@@ -47,6 +47,10 @@ export const createEditable =
     const [selectedNodes] = useState(() => atom<CustomElement[]>([]));
 
     const $selectedNodes = useStore(selectedNodes);
+    const renderBlockPlugins = [...plugins].sort(
+      (left, right) =>
+        (left.renderBlockPriority || 0) - (right.renderBlockPriority || 0),
+    );
 
     const renderElement = (props: RenderElementProps): ReactElement => {
       let result: ReactElement | null = null;
@@ -60,7 +64,7 @@ export const createEditable =
         }
       }
 
-      for (const plugin of plugins) {
+      for (const plugin of renderBlockPlugins) {
         if (plugin.renderBlock) {
           result = plugin.renderBlock({
             ...props,

package/src/plugins/CodeBlockPlugin/styles.module.css

@@ -1,4 +1,5 @@
 .root {
+  counter-reset: line;
   overflow: hidden;
   font-family: monospace;
   display: flex;