@use-kona/editor 0.1.0-rc.0

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.d.ts

@@ -0,0 +1,55 @@
+import type { KeyboardEvent } from 'react';
+import { Editor, type NodeEntry } from 'slate';
+import { type RenderElementProps, type RenderLeafProps } from 'slate-react';
+import type { IPlugin } from '../../types';
+import type { CodeElement } from './types';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-markdown';
+type Options = {
+    renderLanguageSelector: (value: string, onChange: (value: string) => void, params: {
+        element: CodeElement;
+    }) => React.ReactNode;
+};
+export declare class CodeBlockPlugin implements IPlugin {
+    private options;
+    constructor(options: Options);
+    static CODE_ELEMENT: string;
+    static CODE_LINE_ELEMENT: string;
+    handlers: {
+        onKeyDown: (event: KeyboardEvent, editor: Editor) => void;
+    };
+    decorate(entry: NodeEntry): (import("slate").BaseRange & {
+        merge?: (leaf: import("slate").Text, decoration: object) => void;
+    } & {
+        token: boolean;
+    })[];
+    blocks: {
+        type: string;
+        render: (props: RenderElementProps, editor: Editor) => import("react/jsx-runtime").JSX.Element;
+    }[];
+    leafs: {
+        render: (props: RenderLeafProps) => import("react/jsx-runtime").JSX.Element;
+    }[];
+    static isCodeBlockActive(editor: Editor): boolean;
+    static toggleCodeBlock: (editor: Editor) => void;
+}
+export {};

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.js

@@ -0,0 +1,224 @@
+import { jsx } from "react/jsx-runtime";
+import prismjs from "prismjs";
+import { Editor, Element, Node, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { CodeBlock } from "./CodeBlock.js";
+import { normalizeTokens } from "./utils.js";
+import "prismjs/themes/prism.css";
+import { CodeBlockLine } from "./CodeBlockLine.js";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-cpp";
+import "prismjs/components/prism-csharp";
+import "prismjs/components/prism-go";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markdown";
+class CodeBlockPlugin {
+    options;
+    constructor(options){
+        this.options = options;
+    }
+    static CODE_ELEMENT = 'code';
+    static CODE_LINE_ELEMENT = 'code-line';
+    handlers = {
+        onKeyDown: (event, editor)=>{
+            const entry = Editor.above(editor, {
+                match: (n)=>!Editor.isEditor(n) && Editor.isBlock(editor, n),
+                mode: 'highest'
+            });
+            if (!entry) return;
+            const [node] = entry;
+            if ('Tab' === event.key && node.type === CodeBlockPlugin.CODE_ELEMENT) {
+                event.preventDefault();
+                if (event.shiftKey) {
+                    const { selection } = editor;
+                    if (selection && selection.anchor.offset === selection.focus.offset) {
+                        const [line] = Editor.node(editor, selection.anchor.path);
+                        const text = Node.string(line);
+                        const cursorPos = selection.anchor.offset;
+                        if (cursorPos >= 4 && '    ' === text.substring(cursorPos - 4, cursorPos)) editor.delete({
+                            unit: 'character',
+                            distance: 4,
+                            reverse: true
+                        });
+                        else if (text.startsWith('    ')) {
+                            const path = selection.anchor.path;
+                            const start = {
+                                path,
+                                offset: 0
+                            };
+                            const end = {
+                                path,
+                                offset: 4
+                            };
+                            editor.delete({
+                                at: {
+                                    anchor: start,
+                                    focus: end
+                                }
+                            });
+                        }
+                    }
+                } else editor.insertText('    ');
+            }
+            if ('a' === event.key && (event.ctrlKey || event.metaKey) && node && node.type === CodeBlockPlugin.CODE_ELEMENT) {
+                event.preventDefault();
+                const entry = Editor.above(editor, {
+                    match: (n)=>!Editor.isEditor(n) && Element.isElement(n) && n.type === CodeBlockPlugin.CODE_ELEMENT
+                });
+                if (entry) {
+                    const [, codeBlockPath] = entry;
+                    const start = Editor.start(editor, codeBlockPath);
+                    const end = Editor.end(editor, codeBlockPath);
+                    Transforms.select(editor, {
+                        anchor: start,
+                        focus: end
+                    });
+                }
+            }
+        }
+    };
+    decorate(entry) {
+        const [block, blockPath] = entry;
+        if (!Element.isElement(block) || block.type !== CodeBlockPlugin.CODE_ELEMENT) return [];
+        const language = block.language || 'plaintext';
+        const text = block.children.map((line)=>Node.string(line)).join('\n');
+        const prismLanguage = prismjs.languages[language] || prismjs.languages.javascript || {};
+        const tokens = prismjs.tokenize(text, prismLanguage);
+        const normalizedTokens = normalizeTokens(tokens);
+        const decorations = [];
+        for(let index = 0; index < normalizedTokens.length; index++){
+            const tokens = normalizedTokens[index];
+            let start = 0;
+            for (const token of tokens){
+                const length = token.content.length;
+                if (!length) continue;
+                const end = start + length;
+                const path = [
+                    ...blockPath,
+                    index,
+                    0
+                ];
+                decorations.push({
+                    anchor: {
+                        path,
+                        offset: start
+                    },
+                    focus: {
+                        path,
+                        offset: end
+                    },
+                    token: true,
+                    ...Object.fromEntries(token.types.map((type)=>[
+                            type,
+                            true
+                        ]))
+                });
+                start = end;
+            }
+        }
+        return decorations;
+    }
+    blocks = [
+        {
+            type: CodeBlockPlugin.CODE_ELEMENT,
+            render: (props, editor)=>{
+                const onChange = (language)=>{
+                    const path = ReactEditor.findPath(editor, props.element);
+                    Transforms.setNodes(editor, {
+                        language
+                    }, {
+                        at: path
+                    });
+                };
+                return /*#__PURE__*/ jsx(CodeBlock, {
+                    ...props,
+                    element: props.element,
+                    renderLanguageSelector: (element)=>this.options.renderLanguageSelector(props.element.language, onChange, {
+                            element: element
+                        })
+                });
+            }
+        },
+        {
+            type: CodeBlockPlugin.CODE_LINE_ELEMENT,
+            render: (props)=>/*#__PURE__*/ jsx(CodeBlockLine, {
+                    ...props
+                })
+        }
+    ];
+    leafs = [
+        {
+            render: (props)=>{
+                const { leaf, attributes, children } = props;
+                const { text, ...rest } = leaf;
+                return /*#__PURE__*/ jsx("span", {
+                    ...attributes,
+                    className: Object.keys(rest).join(' '),
+                    children: children
+                });
+            }
+        }
+    ];
+    static isCodeBlockActive(editor) {
+        const [match] = Array.from(Editor.nodes(editor, {
+            match: (n)=>!Editor.isEditor(n) && n.type === CodeBlockPlugin.CODE_ELEMENT,
+            mode: 'highest'
+        }));
+        return !!match;
+    }
+    static toggleCodeBlock = (editor)=>{
+        Editor.withoutNormalizing(editor, ()=>{
+            const node = Editor.above(editor, {
+                match: (n)=>!Editor.isEditor(n) && n.type === CodeBlockPlugin.CODE_ELEMENT,
+                mode: 'highest'
+            });
+            if (node) {
+                Transforms.setNodes(editor, {
+                    type: 'paragraph'
+                }, {
+                    at: node[1],
+                    match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT,
+                    mode: 'lowest'
+                });
+                Transforms.unwrapNodes(editor, {
+                    at: node[1],
+                    match: (n)=>n.type === CodeBlockPlugin.CODE_ELEMENT,
+                    split: true
+                });
+            } else {
+                Transforms.setNodes(editor, {
+                    type: CodeBlockPlugin.CODE_LINE_ELEMENT,
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ]
+                }, {
+                    match: (n)=>Editor.isBlock(editor, n) && 'paragraph' === n.type
+                });
+                Transforms.wrapNodes(editor, {
+                    type: CodeBlockPlugin.CODE_ELEMENT,
+                    language: "javascript",
+                    children: []
+                }, {
+                    match: (n)=>n.type === CodeBlockPlugin.CODE_LINE_ELEMENT
+                });
+            }
+        });
+    };
+}
+export { CodeBlockPlugin };

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

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

package/dist/plugins/CodeBlockPlugin/index.js

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

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

@@ -0,0 +1,6 @@
+import "./styles_module.css";
+const styles_module = {
+    code: "code-j4FgXP",
+    content: "content-HIkMJO"
+};
+export { styles_module as default };

package/dist/plugins/CodeBlockPlugin/styles_module.css

@@ -0,0 +1,12 @@
+.code-j4FgXP {
+  border: 1px solid var(--kona-editor-border-color, #eee);
+  border-radius: 4px;
+  font-family: monospace;
+  overflow: hidden;
+}
+
+.content-HIkMJO {
+  background-color: var(--kona-editor-background-color, #fff);
+  padding: 8px;
+}
+

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

@@ -0,0 +1,8 @@
+import type { CustomElement, CustomText } from '../../../types';
+export type CodeElement = {
+    language: string;
+    children: CodeLineElement[];
+} & CustomElement;
+export type CodeLineElement = {
+    children: CustomText[];
+};

package/dist/plugins/CodeBlockPlugin/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copied from prism-react-renderer repo
+ * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/utils/normalizeTokens.js
+ * */
+import Prism from 'prismjs';
+type PrismToken = Prism.Token;
+type Token = {
+    types: string[];
+    content: string;
+    empty?: boolean;
+};
+export declare const normalizeTokens: (tokens: Array<PrismToken | string>) => Token[][];
+export {};

package/dist/plugins/CodeBlockPlugin/utils.js

@@ -0,0 +1,87 @@
+const newlineRe = /\r\n|\r|\n/;
+const normalizeEmptyLines = (line)=>{
+    if (0 === line.length) line.push({
+        types: [
+            'plain'
+        ],
+        content: '\n',
+        empty: true
+    });
+    else if (1 === line.length && '' === line[0].content) {
+        line[0].content = '\n';
+        line[0].empty = true;
+    }
+};
+const appendTypes = (types, add)=>{
+    const typesSize = types.length;
+    if (typesSize > 0 && types[typesSize - 1] === add) return types;
+    return types.concat(add);
+};
+const normalizeTokens = (tokens)=>{
+    const typeArrStack = [
+        []
+    ];
+    const tokenArrStack = [
+        tokens
+    ];
+    const tokenArrIndexStack = [
+        0
+    ];
+    const tokenArrSizeStack = [
+        tokens.length
+    ];
+    let i = 0;
+    let stackIndex = 0;
+    let currentLine = [];
+    const acc = [
+        currentLine
+    ];
+    while(stackIndex > -1){
+        while((i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]){
+            let content;
+            let types = typeArrStack[stackIndex];
+            const tokenArr = tokenArrStack[stackIndex];
+            const token = tokenArr[i];
+            if ('string' == typeof token) {
+                types = stackIndex > 0 ? types : [
+                    'plain'
+                ];
+                content = token;
+            } else {
+                types = appendTypes(types, token.type);
+                if (token.alias) types = appendTypes(types, token.alias);
+                content = token.content;
+            }
+            if ('string' != typeof content) {
+                stackIndex++;
+                typeArrStack.push(types);
+                tokenArrStack.push(content);
+                tokenArrIndexStack.push(0);
+                tokenArrSizeStack.push(content.length);
+                continue;
+            }
+            const splitByNewlines = content.split(newlineRe);
+            const newlineCount = splitByNewlines.length;
+            currentLine.push({
+                types,
+                content: splitByNewlines[0]
+            });
+            for(let i = 1; i < newlineCount; i++){
+                normalizeEmptyLines(currentLine);
+                acc.push(currentLine = []);
+                currentLine.push({
+                    types,
+                    content: splitByNewlines[i]
+                });
+            }
+        }
+        stackIndex--;
+        typeArrStack.pop();
+        tokenArrStack.pop();
+        tokenArrIndexStack.pop();
+        tokenArrSizeStack.pop();
+    }
+    normalizeEmptyLines(currentLine);
+    return acc;
+};
+export { normalizeTokens };

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

@@ -0,0 +1,11 @@
+import { type MapStore, type ReadableAtom } from 'nanostores';
+import type { IPlugin, UiParams } from '../../types';
+import type { CommandsStore, Options } from './types';
+export declare class CommandsPlugin implements IPlugin {
+    options: Options;
+    $store: MapStore<CommandsStore>;
+    $commands: ReadableAtom<CommandsStore['commands']>;
+    constructor(options: Options);
+    init(editor: any): any;
+    ui(params: UiParams): import("react/jsx-runtime").JSX.Element | null;
+}

package/dist/plugins/CommandsPlugin/CommandsPlugin.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { computed, map } from "nanostores";
+import { Editor, Node } from "slate";
+import { Menu } from "./Menu.js";
+class CommandsPlugin {
+    options;
+    $store;
+    $commands;
+    constructor(options){
+        this.options = options;
+        this.$store = map({
+            isOpen: false,
+            filter: false,
+            commands: []
+        });
+        this.$commands = computed(this.$store, (store)=>{
+            if (false === store.filter) return [];
+            return store.commands.filter((command)=>{
+                const isCommandMatches = command.commandName.toLocaleLowerCase().includes(store.filter.toLocaleLowerCase());
+                const isTitleMatches = command.title.toLocaleLowerCase().includes(store.filter.toLocaleLowerCase());
+                return isCommandMatches || isTitleMatches;
+            });
+        });
+    }
+    init(editor) {
+        const { onChange, insertText } = editor;
+        editor.insertText = (text)=>{
+            if ('/' === text) {
+                this.$store.setKey('isOpen', true);
+                this.$store.setKey('commands', this.options.commands);
+                this.$store.setKey('filter', '');
+            }
+            insertText(text);
+        };
+        editor.onChange = (...args)=>{
+            if (this.$store.get().isOpen) {
+                const filter = /\/([^/]*)$/g.exec(getCurrentText(editor));
+                if (filter?.[0]) this.$store.setKey('filter', filter[1]);
+                else this.$store.setKey('filter', false);
+            }
+            return onChange(...args);
+        };
+        return editor;
+    }
+    ui(params) {
+        const commands = useStore(this.$commands);
+        const { isOpen } = useStore(this.$store);
+        if (!isOpen) return null;
+        return /*#__PURE__*/ jsx(Menu, {
+            renderMenu: this.options.renderMenu,
+            $store: this.$store,
+            commands: commands,
+            ignoreNodes: this.options.ignoreNodes
+        });
+    }
+}
+const getCurrentText = (editor)=>{
+    const entry = Editor.above(editor, {
+        match: (n)=>Editor.isBlock(editor, n)
+    });
+    if (entry) return Node.string(entry[0]);
+    return '';
+};
+export { CommandsPlugin };

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

@@ -0,0 +1,11 @@
+import type { MapStore } from 'nanostores';
+import React, { type ReactNode } from 'react';
+import type { Command, CommandsStore } from './types';
+type Props = {
+    $store: MapStore<CommandsStore>;
+    commands: Command[];
+    ignoreNodes?: string[];
+    renderMenu: (children: ReactNode) => ReactNode;
+};
+export declare const Menu: (props: Props) => React.ReactPortal | null;
+export {};

package/dist/plugins/CommandsPlugin/Menu.js

@@ -0,0 +1,153 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import clsx from "clsx";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Editor } from "slate";
+import { useFocused, useSlate, useSlateSelection } from "slate-react";
+import { insert, insertText, removeCommand, set, wrap } from "./actions.js";
+import styles_module from "./styles.module.js";
+const Menu = (props)=>{
+    const { commands, $store, renderMenu, ignoreNodes = [] } = props;
+    const store = useStore($store);
+    const [style, setStyle] = useState({});
+    const [active, setActive] = useState(0);
+    const refs = useRef({});
+    const selection = useSlateSelection();
+    const editor = useSlate();
+    const isFocused = useFocused();
+    const entry = Editor.above(editor, {
+        match: (n)=>Editor.isBlock(editor, n)
+    });
+    const actions = useMemo(()=>({
+            removeCommand: removeCommand(editor, selection, store.filter),
+            set: set(editor, selection, store.filter),
+            insert: insert(editor, selection, store.filter),
+            wrap: wrap(editor, selection, store.filter),
+            insertText: insertText(editor)
+        }), [
+        commands,
+        store.filter
+    ]);
+    useLayoutEffect(()=>{
+        const { selection } = editor;
+        if (!selection || !isFocused) return void setStyle(void 0);
+        setTimeout(()=>{
+            const domSelection = window.getSelection();
+            const domRange = domSelection?.getRangeAt(0);
+            const rect = domRange?.getBoundingClientRect();
+            store.isOpen ? setStyle({
+                opacity: 1,
+                transform: 'scale(1)',
+                top: `${(rect?.top || 0) + window.scrollY + (rect?.height || 0) + 2}px`,
+                left: `${(rect?.left || 0) + window.scrollX + (rect?.width || 0) / 2}px`
+            }) : setStyle({
+                opacity: 0,
+                transform: 'scale(0.9)'
+            });
+        }, 0);
+        const handleKeyDown = (event)=>{
+            switch(event.key){
+                case 'ArrowDown':
+                    event.preventDefault();
+                    setActive((active)=>{
+                        const newActive = active >= commands.length - 1 ? 0 : active + 1;
+                        refs.current[newActive]?.scrollIntoView({
+                            block: 'nearest'
+                        });
+                        return newActive;
+                    });
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    setActive((active)=>{
+                        const newActive = active <= 0 ? commands.length - 1 : active - 1;
+                        refs.current[newActive]?.scrollIntoView({
+                            block: 'nearest'
+                        });
+                        return newActive;
+                    });
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    commands[active]?.action(actions, editor);
+                    $store.setKey('isOpen', false);
+                    break;
+                case 'Escape':
+                    event.stopPropagation();
+                    $store.setKey('isOpen', false);
+                    close();
+                    break;
+            }
+        };
+        if (store.isOpen && commands.length > 0) document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        selection,
+        active,
+        actions,
+        store.isOpen
+    ]);
+    useEffect(()=>{
+        if (active < 0) return void setActive(0);
+        if (active > commands.length - 1) setActive(commands.length - 1);
+    }, [
+        store.filter
+    ]);
+    const handleMenuLayout = (element)=>{
+        if (element) {
+            const { height, top } = element.getBoundingClientRect();
+            const domSelection = window.getSelection();
+            const domRange = domSelection?.getRangeAt(0);
+            const rect = domRange?.getBoundingClientRect();
+            if (top + height >= window.innerHeight) setStyle((style)=>({
+                    ...style,
+                    top: `${top - height - (rect?.height ?? 22)}px`
+                }));
+        }
+    };
+    if (!commands.length) return null;
+    if (entry && ignoreNodes.includes(entry[0].type)) return null;
+    return /*#__PURE__*/ createPortal(renderMenu(/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            store.isOpen && /*#__PURE__*/ jsx("div", {
+                className: styles_module.backdrop,
+                onClick: close
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: handleMenuLayout,
+                style: style,
+                className: styles_module.menu,
+                onMouseDown: (event)=>{
+                    event.preventDefault();
+                },
+                children: commands.map((command, index)=>/*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        ref: (element)=>{
+                            if (element) refs.current[index] = element;
+                        },
+                        className: clsx(styles_module.button, {
+                            [styles_module.active]: index === active
+                        }),
+                        onMouseDown: (event)=>{
+                            event.preventDefault();
+                            command.action(actions, editor);
+                            $store.setKey('isOpen', false);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: styles_module.icon,
+                                children: command.icon
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: command.title
+                            })
+                        ]
+                    }, index))
+            })
+        ]
+    })), document.body);
+};
+export { Menu };

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

@@ -0,0 +1,7 @@
+import { type Editor, type Selection } from 'slate';
+import type { CustomElement } from '../../../types';
+export declare const removeCommand: (editor: Editor, selection: Selection, filter?: string | boolean) => () => void;
+export declare const set: (editor: Editor, selection: Selection, filter?: string | boolean) => (params: Partial<CustomElement>, options?: {}) => void;
+export declare const insert: (editor: Editor, selection: Selection, filter?: string | boolean) => (params: CustomElement | CustomElement[]) => void;
+export declare const wrap: (editor: Editor, selection: Selection, filter?: string | boolean) => (params: CustomElement, options?: {}) => void;
+export declare const insertText: (editor: Editor) => (text: string) => void;