@use-kona/editor 0.1.0-rc.0

package/dist/plugins/CommandsPlugin/actions.js

@@ -0,0 +1,29 @@
+import { Transforms } from "slate";
+const removeCommand = (editor, selection, filter)=>()=>{
+        Transforms["delete"](editor, {
+            at: selection?.focus,
+            distance: 'string' == typeof filter ? filter.length + 1 : 1,
+            reverse: true,
+            unit: 'character'
+        });
+    };
+const set = (editor, selection, filter)=>(params, options = {})=>{
+        removeCommand(editor, selection, filter)();
+        Transforms.setNodes(editor, params, {
+            ...options
+        });
+    };
+const insert = (editor, selection, filter)=>(params)=>{
+        removeCommand(editor, selection, filter)();
+        Transforms.insertNodes(editor, params);
+    };
+const wrap = (editor, selection, filter)=>(params, options = {})=>{
+        removeCommand(editor, selection, filter)();
+        Transforms.wrapNodes(editor, params, {
+            ...options
+        });
+    };
+const insertText = (editor)=>(text)=>{
+        Transforms.insertText(editor, text);
+    };
+export { insert, insertText, removeCommand, set, wrap };

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

@@ -0,0 +1,2 @@
+export { CommandsPlugin } from './CommandsPlugin';
+export type { Command } from './types';

package/dist/plugins/CommandsPlugin/index.js

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

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

@@ -0,0 +1,9 @@
+import "./styles_module.css";
+const styles_module = {
+    menu: "menu-ZXHiGS",
+    button: "button-yrhMLR",
+    active: "active-Is5D6b",
+    icon: "icon-Xca6dM",
+    backdrop: "backdrop-lw7AjW"
+};
+export { styles_module as default };

package/dist/plugins/CommandsPlugin/styles_module.css

@@ -0,0 +1,66 @@
+:root {
+  --menu-background-color: #fff;
+  --menu-background-color-hover: #f9f9f9;
+  --menu-text-color: #444;
+  --menu-border-color: #ddd;
+}
+
+.menu-ZXHiGS {
+  color: var(--menu-text-color, #444);
+  z-index: 31;
+  opacity: 0;
+  background-color: var(--menu-background-color, #fff);
+  border: 1px solid var(--menu-border-color, #ddd);
+  border-radius: 4px;
+  flex-direction: column;
+  max-height: 200px;
+  margin-top: -6px;
+  font-size: 12px;
+  transition: transform .25s;
+  display: flex;
+  position: absolute;
+  top: -100000px;
+  left: -100000px;
+  overflow-y: auto;
+  transform: scale(.9);
+  box-shadow: 0 1px 3px #00000006;
+}
+
+.button-yrhMLR {
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 40px;
+  color: var(--menu-text-color, #444);
+  background: none;
+  border: none;
+  align-items: center;
+  column-gap: 8px;
+  padding: 8px;
+  display: inline-flex;
+}
+
+.button-yrhMLR:hover, .active-Is5D6b {
+  background-color: var(--menu-background-color-hover, #f9f9f9);
+}
+
+.icon-Xca6dM {
+  opacity: .5;
+  background: var(--menu-background-color-hover, #f9f9f9);
+  width: 24px;
+  height: 24px;
+  color: var(--menu-text-color, #444);
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.backdrop-lw7AjW {
+  z-index: 30;
+  background-color: #0000;
+  position: fixed;
+  inset: 0;
+}
+

package/dist/plugins/CommandsPlugin/types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { Editor } from 'slate';
+import type { CustomElement } from '../../../types';
+export type Options = {
+    commands: Command[];
+    renderMenu: (children: ReactNode) => ReactNode;
+    ignoreNodes?: string[];
+};
+export type CommandsStore = {
+    isOpen: boolean;
+    filter: boolean | string;
+    commands: Command[];
+};
+export type Command = {
+    name: string;
+    title: string;
+    commandName: string;
+    icon: ReactNode;
+    action: (actions: Actions, editor: Editor) => void;
+};
+export type Actions = {
+    removeCommand: () => void;
+    set: (params: Partial<CustomElement>, options?: any) => void;
+    insert: (params: CustomElement) => void;
+    wrap: (params: CustomElement, options?: any) => void;
+    insertText: (text: string) => void;
+};

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

@@ -0,0 +1,33 @@
+import type React from 'react';
+import { type ConnectDragPreview, type ConnectDragSource, type ConnectDropTarget } from 'react-dnd';
+import { Editor, Path } from 'slate';
+import { type RenderElementProps } from 'slate-react';
+import type { CustomElement } from '../../../types';
+import type { IPlugin } from '../../types';
+type Options = {
+    onDropFiles: (editor: Editor, files: File[], path: Path) => void;
+    renderBlock?: (params: {
+        props: RenderElementProps;
+        dragRef: ConnectDragSource;
+        dropRef: ConnectDropTarget;
+        previewRef: ConnectDragPreview;
+        position: 'top' | 'bottom' | null;
+    }) => React.ReactNode;
+    ignoreNodes?: string[];
+    customTypes?: {
+        [type: string]: {
+            type: string | symbol;
+            getData?: (element: CustomElement) => Record<string, unknown>;
+        };
+    };
+};
+export declare class DnDPlugin implements IPlugin {
+    private options;
+    constructor(options: Options);
+    static DND_BLOCK_ELEMENT: string;
+    handlers: {
+        onDrop: (event: DragEvent) => void;
+    };
+    renderBlock: (props: RenderElementProps) => any;
+}
+export {};

package/dist/plugins/DnDPlugin/DnDPlugin.js

@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { NativeTypes } from "react-dnd-html5-backend";
+import { Editor, Path, Transforms } from "slate";
+import { ReactEditor, useReadOnly, useSlate } from "slate-react";
+class DnDPlugin {
+    options;
+    constructor(options){
+        this.options = options;
+    }
+    static DND_BLOCK_ELEMENT = 'block';
+    handlers = {
+        onDrop: (event)=>{
+            event.preventDefault();
+        }
+    };
+    renderBlock = (props)=>{
+        const editor = useSlate();
+        const options = this.options;
+        const isReadOnly = useReadOnly();
+        const [dropPosition, setDropPosition] = useState(null);
+        const customType = options.customTypes?.[props.element.type];
+        const [, drag, preview] = useDrag({
+            type: customType?.type || DnDPlugin.DND_BLOCK_ELEMENT,
+            item: {
+                ...customType?.getData?.(props.element) || {},
+                element: props.element
+            },
+            canDrag: !isReadOnly
+        });
+        const allCustomTypes = Object.values(options.customTypes || {}).map((customType)=>customType.type);
+        const [{ isOver }, drop] = useDrop({
+            accept: [
+                DnDPlugin.DND_BLOCK_ELEMENT,
+                NativeTypes.FILE,
+                ...allCustomTypes
+            ],
+            collect (monitor) {
+                return {
+                    item: monitor.getItem(),
+                    isOver: monitor.isOver(),
+                    position: monitor.isOver() ? monitor.getClientOffset() : null
+                };
+            },
+            hover (_, monitor) {
+                const element = ReactEditor.toDOMNode(editor, props.element);
+                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');
+            },
+            drop (item, monitor) {
+                const itemType = monitor.getItemType();
+                const sourceTo = ReactEditor.findPath(editor, props.element);
+                if (!sourceTo) return;
+                const dropPath = getDropPath(editor, sourceTo, dropPosition);
+                if (!dropPath) return;
+                switch(itemType){
+                    case NativeTypes.FILE:
+                        options.onDropFiles(editor, item.files, dropPath);
+                        break;
+                    default:
+                        {
+                            const targetTo = ReactEditor.findPath(editor, item.element);
+                            if (!dropPosition) return;
+                            moveNode(editor, sourceTo, targetTo, dropPosition);
+                            break;
+                        }
+                }
+                setDropPosition(null);
+            }
+        });
+        useEffect(()=>{
+            setDropPosition(null);
+        }, [
+            isOver
+        ]);
+        if (this.options.ignoreNodes?.includes(props.element.type)) return props.children;
+        if (editor.isInline(props.element)) return props.children;
+        return options.renderBlock?.({
+            props,
+            dragRef: drag,
+            dropRef: drop,
+            previewRef: preview,
+            position: dropPosition
+        });
+    };
+}
+const getDropPath = (editor, targetNodePath, position)=>{
+    const target = Editor.node(editor, targetNodePath);
+    switch(position){
+        case 'top':
+            return target[1];
+        case 'bottom':
+            return Path.next(target[1]);
+    }
+};
+const moveNode = (editor, targetNodePath, sourceNodePath, position)=>{
+    const dropPath = getDropPath(editor, targetNodePath, position);
+    if (!dropPath) return;
+    Transforms.moveNodes(editor, {
+        at: sourceNodePath,
+        to: dropPath,
+        mode: 'highest'
+    });
+};
+export { DnDPlugin };

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

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

package/dist/plugins/DnDPlugin/index.js

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

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

@@ -0,0 +1,9 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-mImbWh",
+    block: "block-Zksas5",
+    drag: "drag-ONjCpH",
+    top: "top-aH68un",
+    bottom: "bottom-RubLVC"
+};
+export { styles_module as default };

package/dist/plugins/DnDPlugin/styles_module.css

@@ -0,0 +1,43 @@
+.root-mImbWh {
+  border-top: 2px solid #0000;
+  border-bottom: 2px solid #0000;
+  position: relative;
+}
+
+.block-Zksas5 {
+  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;
+}
+
+.block-Zksas5:hover {
+  background-color: #00000006;
+}
+
+.block-Zksas5:hover .drag-ONjCpH {
+  opacity: 1;
+}
+
+.drag-ONjCpH {
+  vertical-align: baseline;
+  cursor: move;
+  opacity: 0;
+  width: 16px;
+  line-height: 1.2;
+  transition: opacity .25s;
+  display: inline-block;
+}
+
+.top-aH68un {
+  border-top: 2px solid #3498db;
+}
+
+.bottom-RubLVC {
+  border-bottom: 2px solid #3498db;
+}
+

package/dist/plugins/FloatingMenuPlugin/FloatingMenu.d.ts

@@ -0,0 +1,9 @@
+import type { Options } from './types';
+type Props = {
+    focused?: HTMLElement | null;
+    options: Options;
+    isVisible?: boolean;
+    onVisibilityChange?: (isVisible: boolean) => void;
+};
+export declare const FloatingMenu: (props: Props) => import("react").ReactPortal | null;
+export {};

package/dist/plugins/FloatingMenuPlugin/FloatingMenu.js

@@ -0,0 +1,89 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Editor, Range } from "slate";
+import { useFocused, useSlate, useSlateSelection } from "slate-react";
+import styles_module from "./styles.module.js";
+const FloatingMenu = (props)=>{
+    const { options, focused, isVisible, onVisibilityChange } = props;
+    const [style, setStyle] = useState(void 0);
+    const ref = useRef(null);
+    const selection = useSlateSelection();
+    const editor = useSlate();
+    const isFocused = useFocused();
+    const onClose = ()=>{
+        setStyle(void 0);
+        options.onHide();
+    };
+    useLayoutEffect(()=>{
+        if (!selection) return;
+        const entry = Editor.above(editor, {
+            at: selection,
+            match: (n)=>!Editor.isEditor(n),
+            mode: 'highest'
+        });
+        if (!selection || !isFocused || Range.isCollapsed(selection) || '' === Editor.string(editor, selection) || !entry || options.ignoreNodes?.includes(entry[0].type)) return void onVisibilityChange?.(options.onHide());
+        onVisibilityChange?.(options.onShow());
+    }, [
+        selection
+    ]);
+    useLayoutEffect(()=>{
+        if (!selection) return;
+        const entry = Editor.above(editor, {
+            at: selection,
+            match: (n)=>!Editor.isEditor(n),
+            mode: 'highest'
+        });
+        if (!selection || !isFocused || Range.isCollapsed(selection) || '' === Editor.string(editor, selection) || !entry || options.ignoreNodes?.includes(entry?.[0].type)) return;
+        handleUpdate();
+    }, [
+        selection
+    ]);
+    const handleUpdate = ()=>{
+        const element = ref.current;
+        let rect;
+        if (focused) rect = focused.getBoundingClientRect();
+        else {
+            const domSelection = window.getSelection();
+            if (!domSelection || domSelection.isCollapsed) return;
+            const domRange = domSelection?.getRangeAt(0);
+            rect = domRange?.getBoundingClientRect();
+        }
+        setStyle({
+            opacity: 1,
+            transform: 'scale(1)',
+            top: `${(rect?.top || 0) + window.scrollY - (element?.offsetHeight || 0)}px`,
+            left: `${(rect?.left || 0) + window.scrollX - (element?.offsetWidth || 0) / 2 + (rect?.width || 0) / 2}px`
+        });
+    };
+    if (!isVisible) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                onMouseDown: ()=>{
+                    setStyle(void 0);
+                },
+                children: options.renderBackdrop?.({
+                    onClose,
+                    onUpdate: handleUpdate
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                style: {
+                    ...style,
+                    display: 'block'
+                },
+                className: styles_module.root,
+                onMouseDown: (event)=>{
+                    event.preventDefault();
+                },
+                children: options.renderMenu(editor, {
+                    onClose,
+                    onUpdate: handleUpdate
+                })
+            })
+        ]
+    }), document.body);
+};
+export { FloatingMenu };

package/dist/plugins/FloatingMenuPlugin/FloatingMenuPlugin.d.ts

@@ -0,0 +1,15 @@
+import { type MapStore } from 'nanostores';
+import type { IPlugin } from '../../types';
+import type { Options } from './types';
+export declare class FloatingMenuPlugin implements IPlugin {
+    private options;
+    $store: MapStore<{
+        isVisible: boolean;
+        focused: HTMLElement | null;
+    }>;
+    constructor(options: Options);
+    openOnElement: (element: HTMLElement) => void;
+    ui({ readOnly }: {
+        readOnly: any;
+    }): import("react/jsx-runtime").JSX.Element | null;
+}

package/dist/plugins/FloatingMenuPlugin/FloatingMenuPlugin.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { map } from "nanostores";
+import { FloatingMenu } from "./FloatingMenu.js";
+class FloatingMenuPlugin {
+    options;
+    $store;
+    constructor(options){
+        this.options = options;
+        this.$store = map({
+            focused: null
+        });
+    }
+    openOnElement = (element)=>{
+        this.$store.setKey('focused', element);
+        this.$store.setKey('isVisible', true);
+    };
+    ui({ readOnly }) {
+        const { focused, isVisible } = useStore(this.$store);
+        return readOnly ? null : /*#__PURE__*/ jsx(FloatingMenu, {
+            focused: focused,
+            isVisible: isVisible,
+            onVisibilityChange: (isVisible)=>{
+                this.$store.setKey('isVisible', isVisible);
+            },
+            options: {
+                ...this.options,
+                onHide: ()=>{
+                    this.$store.setKey('focused', null);
+                    return this.options.onHide();
+                }
+            }
+        });
+    }
+}
+export { FloatingMenuPlugin };

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

@@ -0,0 +1,2 @@
+export { FloatingMenuPlugin } from './FloatingMenuPlugin';
+export type { Commands } from './types';

package/dist/plugins/FloatingMenuPlugin/index.js

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

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

@@ -0,0 +1,7 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-j2ULfe",
+    button: "button-Ava9ko",
+    active: "active-GxBDgg"
+};
+export { styles_module as default };

package/dist/plugins/FloatingMenuPlugin/styles_module.css

@@ -0,0 +1,23 @@
+.root-j2ULfe {
+  z-index: 20;
+  opacity: 0;
+  margin-top: -6px;
+  transition: transform .25s;
+  position: absolute;
+  top: -100000px;
+  left: -100000px;
+  transform: scale(.8);
+}
+
+.button-Ava9ko {
+  cursor: pointer;
+  opacity: .4;
+  align-items: center;
+  padding: 4px;
+  display: inline-flex;
+}
+
+.active-GxBDgg {
+  opacity: .7;
+}
+

package/dist/plugins/FloatingMenuPlugin/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { Editor } from 'slate';
+export type Options = {
+    ignoreNodes?: string[];
+    renderMenu: (editor: Editor, commands: Commands) => ReactNode;
+    renderBackdrop: (commands: {
+        onClose: () => void;
+        onUpdate: () => void;
+    }) => ReactNode;
+    onShow: () => boolean;
+    onHide: () => boolean;
+};
+export type Commands = {
+    onClose: () => void;
+    onUpdate: () => void;
+};

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from 'slate';
+import { RenderElementProps } from 'slate-react';
+import { IPlugin } from '../../types';
+export declare class HeadingsPlugin implements IPlugin {
+    static HeadingLevel1: string;
+    static HeadingLevel2: string;
+    static HeadingLevel3: string;
+    blocks: {
+        type: string;
+        render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+    }[];
+    static isHeading1Active(editor: Editor): boolean;
+    static isHeading2Active(editor: Editor): boolean;
+    static isHeading3Active(editor: Editor): boolean;
+    private static toggleHeading;
+    static toggleHeading1(editor: Editor): void;
+    static toggleHeading2(editor: Editor): void;
+    static toggleHeading3(editor: Editor): void;
+}

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { Editor, Element, Transforms } from "slate";
+class HeadingsPlugin {
+    static HeadingLevel1 = 'h1';
+    static HeadingLevel2 = 'h2';
+    static HeadingLevel3 = 'h3';
+    blocks = [
+        {
+            type: HeadingsPlugin.HeadingLevel1,
+            render: (props)=>/*#__PURE__*/ jsx("h1", {
+                    ...props.attributes,
+                    children: props.children
+                })
+        },
+        {
+            type: HeadingsPlugin.HeadingLevel2,
+            render: (props)=>/*#__PURE__*/ jsx("h2", {
+                    ...props.attributes,
+                    children: props.children
+                })
+        },
+        {
+            type: HeadingsPlugin.HeadingLevel3,
+            render: (props)=>/*#__PURE__*/ jsx("h3", {
+                    ...props.attributes,
+                    children: props.children
+                })
+        }
+    ];
+    static isHeading1Active(editor) {
+        return isBlockActive(editor, HeadingsPlugin.HeadingLevel1);
+    }
+    static isHeading2Active(editor) {
+        return isBlockActive(editor, HeadingsPlugin.HeadingLevel2);
+    }
+    static isHeading3Active(editor) {
+        return isBlockActive(editor, HeadingsPlugin.HeadingLevel3);
+    }
+    static toggleHeading(editor, type) {
+        const isActive = isBlockActive(editor, type);
+        Transforms.setNodes(editor, {
+            type: isActive ? 'paragraph' : type
+        });
+    }
+    static toggleHeading1(editor) {
+        HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel1);
+    }
+    static toggleHeading2(editor) {
+        HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel2);
+    }
+    static toggleHeading3(editor) {
+        HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel3);
+    }
+}
+const isBlockActive = (editor, type)=>{
+    const { selection } = editor;
+    if (!selection) return false;
+    const [match] = Array.from(Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: (node)=>!Editor.isEditor(node) && Element.isElement(node) && node.type === type
+    }));
+    return !!match;
+};
+export { HeadingsPlugin };

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

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

package/dist/plugins/HeadingsPlugin/index.js

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

package/dist/plugins/HighlightsPlugin/HighlightsPlugin.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from 'slate';
+import type { RenderLeafProps } from 'slate-react';
+import type { IPlugin } from '../../types';
+type Options = {
+    colors: Record<string, string>;
+};
+export declare class HighlightsPlugin implements IPlugin {
+    private options;
+    constructor(options: Options);
+    static toggleHighlight(editor: Editor, color: string): void;
+    static isHighlightActive(editor: Editor, color: string): boolean;
+    leafs: {
+        render: (props: RenderLeafProps) => import("react/jsx-runtime").JSX.Element;
+    }[];
+}
+export {};