@use-kona/editor 0.1.0-rc.0

package/README.md

@@ -0,0 +1,23 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const ELEMENT_PARAGRAPH = "paragraph";

package/dist/constants.js

@@ -0,0 +1,2 @@
+const ELEMENT_PARAGRAPH = 'paragraph';
+export { ELEMENT_PARAGRAPH };

package/dist/core/createEditable.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from 'slate';
+import type { IPlugin } from '../types';
+type Props = {
+    readOnly?: boolean;
+};
+export declare const createEditable: (editor: Editor, plugins: IPlugin[]) => ({ readOnly }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/createEditable.js

@@ -0,0 +1,110 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import is_hotkey from "is-hotkey";
+import react, { isValidElement, useCallback } from "react";
+import { Editable, useReadOnly } from "slate-react";
+import { BaseElement } from "../elements/BaseElement.js";
+import styles_module from "./styles.module.js";
+const SUPPORTED_HANDLERS = [
+    'onDrop',
+    'onKeyDown',
+    'onPaste'
+];
+const createEditable = (editor, plugins)=>({ readOnly })=>{
+        const renderElement = (props)=>{
+            let result = null;
+            for (const plugin of plugins)for (const element of plugin.blocks || []){
+                if (element.type !== props.element.type) continue;
+                const newElement = element.render(props, editor);
+                result = newElement || result;
+            }
+            for (const plugin of plugins)if (plugin.renderBlock) result = plugin.renderBlock({
+                ...props,
+                children: result || props.children
+            });
+            return result || /*#__PURE__*/ jsx(BaseElement, {
+                ...props
+            });
+        };
+        const renderLeaf = (props)=>{
+            let result;
+            for (const plugin of plugins)plugin.leafs?.map((element)=>{
+                const newElement = element.render({
+                    ...props,
+                    children: result || props.children
+                }, editor);
+                if (newElement && /*#__PURE__*/ isValidElement(newElement)) result = newElement;
+            });
+            return result;
+        };
+        const handleHotkey = (event)=>{
+            for (const plugin of plugins)if (plugin.hotkeys) {
+                for (const hotkey of plugin.hotkeys)if (is_hotkey(hotkey[0], event) && hotkey[1]) {
+                    event.preventDefault();
+                    hotkey[1](event, editor);
+                }
+            }
+        };
+        const decorate = (entry)=>{
+            const decorators = plugins.filter((plugin)=>!!plugin.decorate);
+            return decorators.reduce((decorations, plugin)=>{
+                const pluginDecorators = plugin.decorate?.(entry) || [];
+                return decorations.concat(pluginDecorators);
+            }, []);
+        };
+        const handlers = plugins.reduce((handlers, plugin)=>{
+            SUPPORTED_HANDLERS.forEach((handlerName)=>{
+                if (plugin.handlers?.[handlerName]) {
+                    const lastHandler = handlers[handlerName];
+                    if (lastHandler) handlers[handlerName] = (event)=>{
+                        lastHandler(event, editor);
+                        plugin.handlers?.[handlerName](event, editor);
+                    };
+                    else handlers[handlerName] = (event)=>{
+                        plugin.handlers?.[handlerName](event, editor);
+                    };
+                }
+            });
+            return handlers;
+        }, {
+            onKeyDown: handleHotkey
+        });
+        const Ui = useCallback(({ children })=>{
+            const ui = plugins.filter((p)=>Boolean(p.ui));
+            const readOnly = useReadOnly();
+            if (!ui.length) return /*#__PURE__*/ jsx("div", {
+                className: styles_module.editor,
+                children: children
+            });
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    ui.map((p, index)=>/*#__PURE__*/ jsx(react.Fragment, {
+                            children: p.ui({
+                                readOnly,
+                                children,
+                                editor
+                            })
+                        }, index)),
+                    /*#__PURE__*/ jsx("div", {
+                        className: styles_module.editor,
+                        children: children
+                    })
+                ]
+            });
+        }, [
+            editor,
+            plugins.filter
+        ]);
+        return /*#__PURE__*/ jsx("div", {
+            className: styles_module.root,
+            children: /*#__PURE__*/ jsx(Ui, {
+                children: /*#__PURE__*/ jsx(Editable, {
+                    decorate: decorate,
+                    renderElement: renderElement,
+                    renderLeaf: renderLeaf,
+                    readOnly: readOnly,
+                    ...handlers
+                })
+            })
+        });
+    };
+export { createEditable };

package/dist/core/createEditor.d.ts

@@ -0,0 +1,2 @@
+import type { IPlugin } from '../types';
+export declare const createEditor: (plugins: IPlugin[]) => () => import("slate").BaseEditor & import("slate-react").ReactEditor;

package/dist/core/createEditor.js

@@ -0,0 +1,167 @@
+import { Editor, Path, Range, Transforms, createEditor } from "slate";
+import { withHistory } from "slate-history";
+import { withReact } from "slate-react";
+const createEditor_createEditor = (plugins)=>()=>{
+        const baseEditor = withHistory(withReact(createEditor()));
+        const editorWithPlugins = plugins.reduce((editor, plugin)=>{
+            if (plugin.init) return plugin.init(editor);
+            return editor;
+        }, baseEditor);
+        const { isInline, isVoid, normalizeNode, deleteFragment, deleteBackward, deleteForward } = editorWithPlugins;
+        editorWithPlugins.normalizeNode = (entry)=>{
+            const [node, path] = entry;
+            const lastElement = editorWithPlugins.children[editorWithPlugins.children.length - 1];
+            if (!lastElement || 'paragraph' !== lastElement.type) {
+                const paragraph = {
+                    type: 'paragraph',
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ]
+                };
+                Transforms.insertNodes(editorWithPlugins, paragraph, {
+                    at: [
+                        editorWithPlugins.children.length
+                    ]
+                });
+            }
+            return normalizeNode([
+                node,
+                path
+            ]);
+        };
+        editorWithPlugins.isVoid = (element)=>{
+            const result = plugins.reduce((result, plugin)=>{
+                const match = plugin.blocks?.find((el)=>element?.type === el.type);
+                if (match && 'isVoid' in match) return match.isVoid;
+                return result;
+            }, void 0);
+            return result ?? isVoid(element);
+        };
+        editorWithPlugins.isInline = (element)=>{
+            const result = plugins.reduce((result, plugin)=>{
+                const match = plugin.blocks?.find((el)=>element?.type === el.type);
+                if (match && 'isInline' in match) return match.isInline;
+                return result;
+            }, void 0);
+            return result ?? isInline(element);
+        };
+        editorWithPlugins.deleteForward = async (unit)=>{
+            const { selection } = editorWithPlugins;
+            if (!selection) return;
+            if (Range.isCollapsed(selection)) {
+                const firstEntry = Editor.above(editorWithPlugins, {
+                    at: selection.anchor,
+                    match: (n)=>Editor.isBlock(editorWithPlugins, n),
+                    mode: 'lowest'
+                });
+                if (!firstEntry) return;
+                const [, currentPath] = firstEntry;
+                const secondEntry = Editor.above(editorWithPlugins, {
+                    at: Editor.after(editorWithPlugins, selection.anchor),
+                    match: (n)=>Editor.isBlock(editorWithPlugins, n),
+                    mode: 'lowest'
+                });
+                if (!secondEntry) return;
+                const [node, path] = secondEntry;
+                if (node && Editor.isStart(editorWithPlugins, selection.anchor, currentPath)) {
+                    const matchedBlock = plugins.reduce((block, plugin)=>{
+                        const match = plugin.blocks?.find((b)=>b.type === node.type);
+                        return block || match || null;
+                    }, null);
+                    if (matchedBlock) {
+                        const result = matchedBlock.onBeforeDelete ? await matchedBlock?.onBeforeDelete?.([
+                            node
+                        ]) : true;
+                        if (result) {
+                            Transforms.removeNodes(editorWithPlugins, {
+                                at: path
+                            });
+                            matchedBlock.onDelete?.([
+                                node
+                            ]);
+                        }
+                        return;
+                    }
+                }
+            }
+            deleteForward(unit);
+        };
+        editorWithPlugins.deleteBackward = async (unit)=>{
+            const { selection } = editorWithPlugins;
+            if (!selection) return;
+            if (Range.isCollapsed(selection)) {
+                const firstEntry = Editor.above(editorWithPlugins, {
+                    at: selection.anchor,
+                    match: (n)=>Editor.isBlock(editorWithPlugins, n),
+                    mode: 'lowest'
+                });
+                const secondEntry = Editor.above(editorWithPlugins, {
+                    at: Editor.before(editorWithPlugins, selection.anchor),
+                    match: (n)=>Editor.isBlock(editorWithPlugins, n),
+                    mode: 'lowest'
+                });
+                if (!firstEntry || !secondEntry) return;
+                const [_, currentPath] = firstEntry;
+                const [node, path] = secondEntry;
+                if (node && Editor.isStart(editorWithPlugins, selection.anchor, currentPath)) {
+                    const matchedBlock = plugins.reduce((block, plugin)=>{
+                        const match = plugin.blocks?.find((b)=>b.type === node.type);
+                        return block || match || null;
+                    }, null);
+                    if (matchedBlock) {
+                        const result = matchedBlock.onBeforeDelete ? await matchedBlock.onBeforeDelete([
+                            node
+                        ]) : true;
+                        if (result) {
+                            Transforms.removeNodes(editorWithPlugins, {
+                                at: path
+                            });
+                            matchedBlock.onDelete?.([
+                                node
+                            ]);
+                        }
+                        return;
+                    }
+                }
+            }
+            deleteBackward(unit);
+        };
+        editorWithPlugins.deleteFragment = async (options)=>{
+            const { selection } = editorWithPlugins;
+            if (!selection) return;
+            const [start, end] = Range.edges(selection);
+            const isSingleText = Path.equals(start.path, end.path);
+            if (isSingleText) return void deleteFragment(options);
+            const nodes = Array.from(Editor.nodes(editorWithPlugins, {
+                at: selection,
+                match: (n)=>!Editor.isEditor(n) && Editor.isBlock(editorWithPlugins, n)
+            })).reverse();
+            for (const entry of nodes){
+                const [node, path] = entry;
+                const plugin = plugins.find((plugin)=>plugin.blocks?.find((b)=>b.type === node.type));
+                if (plugin) {
+                    const match = plugin.blocks?.find((b)=>b.type === node.type);
+                    const result = match?.onBeforeDelete ? await match.onBeforeDelete([
+                        node
+                    ]) : true;
+                    if (!result) return;
+                    Transforms.removeNodes(editorWithPlugins, {
+                        at: path,
+                        match: (n)=>n.type === node.type
+                    });
+                    match?.onDelete?.([
+                        node
+                    ]);
+                } else Transforms.removeNodes(editorWithPlugins, {
+                    at: path,
+                    match: (n)=>n.type === node.type
+                });
+            }
+            if (nodes.length > 0) return;
+            deleteFragment(options);
+        };
+        return editorWithPlugins;
+    };
+export { createEditor_createEditor as createEditor };

package/dist/core/deserialize.d.ts

@@ -0,0 +1,3 @@
+import { type Descendant } from 'slate';
+import type { IPlugin } from '../types';
+export declare const deserialize: (plugins: IPlugin[]) => (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;

package/dist/core/deserialize.js

@@ -0,0 +1,33 @@
+import { Element } from "slate";
+import { jsx } from "slate-hyperscript";
+const deserialize = (plugins)=>(element)=>{
+        if (3 === element.nodeType) return element.textContent;
+        if (1 !== element.nodeType) return null;
+        if ('BR' === element.nodeName) return '\n';
+        let children = Array.from(element.childNodes).flatMap((node)=>deserialize(plugins)(node));
+        if (0 === children.length) children = [
+            {
+                text: ''
+            }
+        ];
+        if ('BODY' === element.nodeName) if (children.some((c)=>Element.isElement(c))) return jsx('fragment', {}, children);
+        else return jsx('element', {
+            type: 'paragraph'
+        }, children);
+        if ('P' === element.nodeName) return jsx('element', {
+            type: 'paragraph'
+        }, children);
+        let result = null;
+        for (const plugin of plugins){
+            if (plugin.blocks?.some((b)=>b.deserialize)) plugin.blocks.forEach((e)=>{
+                if (e.deserialize) {
+                    const childrenAsDescendants = children;
+                    const newResult = e.deserialize(element, childrenAsDescendants);
+                    if (newResult) result = newResult;
+                }
+            });
+            if (result) return result;
+        }
+        return children.filter((child)=>null !== child);
+    };
+export { deserialize };

package/dist/core/queries.d.ts

@@ -0,0 +1,2 @@
+import { Editor, NodeEntry, Node } from 'slate';
+export declare const getPrev: (editor: Editor, node: NodeEntry) => Node | null;

package/dist/core/queries.js

@@ -0,0 +1,10 @@
+import { Node, Path } from "slate";
+const getPrev = (editor, node)=>{
+    try {
+        const [, path] = node;
+        return Node.get(editor, Path.previous(path));
+    } catch (e) {
+        return null;
+    }
+};
+export { getPrev };

package/dist/core/serialize.d.ts

@@ -0,0 +1,3 @@
+import type { CustomElement, CustomText } from '../../types';
+import type { IPlugin } from '../types';
+export declare const serialize: (plugins: IPlugin[]) => (node: CustomElement | CustomElement[] | CustomText | CustomText[]) => string;

package/dist/core/serialize.js

@@ -0,0 +1,13 @@
+import escape_html from "escape-html";
+import { Text } from "slate";
+const serialize = (plugins)=>(node)=>{
+        const serializers = plugins.flatMap((plugin)=>plugin.blocks?.map((element)=>element.serialize)).filter(Boolean);
+        if (Array.isArray(node)) return node.map(serialize(plugins)).join('');
+        if (Text.isText(node)) return serializers.reduce((prev, current)=>current?.(node) || prev, escape_html(node.text));
+        {
+            const children = node.children?.map((n)=>serialize(plugins)(n)).join('');
+            if ('paragraph' === node.type) return `<p>${children}</p>`;
+            return serializers.reduce((prev, current)=>current?.(node, children) || prev, '') || children;
+        }
+    };
+export { serialize };

package/dist/core/styles.module.js

@@ -0,0 +1,6 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-e1gdll",
+    editor: "editor-K2itFp"
+};
+export { styles_module as default };

package/dist/core/styles_module.css

@@ -0,0 +1,29 @@
+.root-e1gdll {
+  height: 100%;
+  color: var(--kona-editor-text-color, #444);
+  background-color: var(--kona-editor-background-color, #fff);
+  flex-direction: column;
+  display: flex;
+  position: relative;
+}
+
+.editor-K2itFp {
+  outline: none;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    background: #00000006;
+    border-radius: 8px;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #00000013;
+    border-radius: 8px;
+  }
+
+  & > [role="textbox"] {
+    outline: none;
+  }
+}
+

package/dist/defaultValue.d.ts

@@ -0,0 +1,4 @@
+import type { Descendant } from 'slate';
+export declare const defaultValue: {
+    children: Descendant[];
+};

package/dist/defaultValue.js

@@ -0,0 +1,13 @@
+const defaultValue = {
+    children: [
+        {
+            type: 'paragraph',
+            children: [
+                {
+                    text: ''
+                }
+            ]
+        }
+    ]
+};
+export { defaultValue };

package/dist/editor.d.ts

@@ -0,0 +1,10 @@
+import { type Descendant } from 'slate';
+import type { EditorRef, IPlugin } from './types';
+type KonaEditorProps = {
+    readOnly?: boolean;
+    plugins?: IPlugin[];
+    initialValue: Descendant[];
+    onChange: (value: Descendant[]) => void;
+};
+export declare const KonaEditor: import("react").ForwardRefExoticComponent<KonaEditorProps & import("react").RefAttributes<EditorRef>>;
+export {};

package/dist/editor.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
+import { Transforms } from "slate";
+import { ReactEditor, Slate } from "slate-react";
+import { createEditable } from "./core/createEditable.js";
+import { createEditor } from "./core/createEditor.js";
+import { deserialize } from "./core/deserialize.js";
+import { serialize } from "./core/serialize.js";
+import { isEmpty } from "./utils.js";
+const KonaEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { initialValue, plugins = [], readOnly = false, onChange } = props;
+    const [editor] = useState(createEditor(plugins));
+    const SlateEditable = useCallback(createEditable(editor, plugins), []);
+    useImperativeHandle(ref, ()=>{
+        const deleteNode = (match)=>{
+            Transforms.removeNodes(editor, {
+                at: [],
+                match
+            });
+        };
+        return {
+            serialize: serialize(plugins),
+            deserialize: deserialize(plugins),
+            deleteNode,
+            isEmpty: ()=>isEmpty(editor.children),
+            focus: ()=>{
+                ReactEditor.focus(editor);
+            }
+        };
+    }, [
+        editor,
+        plugins
+    ]);
+    return /*#__PURE__*/ jsx(Slate, {
+        editor: editor,
+        initialValue: initialValue,
+        onValueChange: onChange,
+        children: /*#__PURE__*/ jsx(SlateEditable, {
+            readOnly: readOnly
+        })
+    });
+});
+export { KonaEditor };

package/dist/elements/BaseElement.d.ts

@@ -0,0 +1,2 @@
+import { RenderElementProps } from 'slate-react';
+export declare const BaseElement: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/elements/BaseElement.js

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+const BaseElement = (props)=>/*#__PURE__*/ jsx("p", {
+        ...props.attributes,
+        children: props.children
+    });
+export { BaseElement };

package/dist/examples/Backdrop.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    onClose: () => void;
+};
+export declare const Backdrop: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/examples/Backdrop.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import Backdrop_module from "./Backdrop.module.js";
+import { $store } from "./store.js";
+const Backdrop = (props)=>{
+    const { isFloatingMenuOpen } = useStore($store);
+    const { onClose } = props;
+    return isFloatingMenuOpen ? /*#__PURE__*/ jsx("div", {
+        className: Backdrop_module.root,
+        onClick: onClose
+    }) : null;
+};
+export { Backdrop };

package/dist/examples/Backdrop.module.js

@@ -0,0 +1,5 @@
+import "./Backdrop_module.css";
+const Backdrop_module = {
+    root: "root-f5Zwn7"
+};
+export { Backdrop_module as default };

package/dist/examples/Backdrop_module.css

@@ -0,0 +1,6 @@
+.root-f5Zwn7 {
+  z-index: 1;
+  position: fixed;
+  inset: 0;
+}
+

package/dist/examples/DragBlock.d.ts

@@ -0,0 +1,11 @@
+import type { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
+import type { RenderElementProps } from 'slate-react';
+type Props = {
+    props: RenderElementProps;
+    dragRef: ConnectDragSource;
+    dropRef: ConnectDropTarget;
+    previewRef: ConnectDragPreview;
+    position: 'top' | 'bottom' | null;
+};
+export declare const DragBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/examples/DragBlock.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import DragBlock_module from "./DragBlock.module.js";
+import { DragHandler } from "./DragHandler.js";
+const DragBlock = (props)=>{
+    const { props: { attributes, element, children }, dragRef: drag, dropRef: drop, previewRef: preview, position } = props;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(DragBlock_module.root, {
+            [DragBlock_module.top]: 'top' === position,
+            [DragBlock_module.bottom]: 'bottom' === position
+        }),
+        ...attributes,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: DragBlock_module.block,
+            ref: (e)=>{
+                drop(preview(e));
+            },
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: DragBlock_module.drag,
+                    ref: (element)=>{
+                        drag(element);
+                    },
+                    contentEditable: false,
+                    children: /*#__PURE__*/ jsx(DragHandler, {
+                        attributes: attributes,
+                        element: element,
+                        children: children
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    children: children
+                })
+            ]
+        })
+    });
+};
+export { DragBlock };

package/dist/examples/DragBlock.module.js

@@ -0,0 +1,9 @@
+import "./DragBlock_module.css";
+const DragBlock_module = {
+    root: "root-QYAUnT",
+    top: "top-qIwygJ",
+    bottom: "bottom-K22AI8",
+    drag: "drag-v0MSZ1",
+    block: "block-y_k_tl"
+};
+export { DragBlock_module as default };

package/dist/examples/DragBlock_module.css

@@ -0,0 +1,43 @@
+.root-QYAUnT {
+  border-top: 2px solid #0000;
+  border-bottom: 2px solid #0000;
+  position: relative;
+}
+
+.top-qIwygJ {
+  border-top: 2px solid #3498db;
+}
+
+.bottom-K22AI8 {
+  border-bottom: 2px solid #3498db;
+}
+
+.drag-v0MSZ1 {
+  vertical-align: baseline;
+  cursor: move;
+  opacity: 0;
+  width: 16px;
+  line-height: 1.2;
+  transition: opacity .25s;
+  display: inline-block;
+}
+
+.block-y_k_tl {
+  border-radius: 4px;
+  grid-template-columns: 16px 1fr;
+  align-items: start;
+  column-gap: 8px;
+  padding: 4px 8px;
+  transition: background-color .25s;
+  display: grid;
+  position: relative;
+
+  &:hover {
+    background-color: #00000004;
+  }
+
+  &:hover .drag-v0MSZ1 {
+    opacity: 1;
+  }
+}
+

package/dist/examples/DragHandler.d.ts

@@ -0,0 +1,2 @@
+import type { RenderElementProps } from 'slate-react';
+export declare const DragHandler: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;