@use-kona/editor 0.1.0-rc.0

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@use-kona/editor",
+  "version": "0.1.0-rc.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "./dist/editor.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "build:storybook": "storybook build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "storybook": "storybook dev",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.0.0",
+    "@rsbuild/core": "~1.4.0",
+    "@rsbuild/plugin-react": "^1.3.2",
+    "@rslib/core": "^0.10.4",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/addon-onboarding": "^9.0.13",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/react": "^9.0.13",
+    "@storybook/test": "^9.0.0-alpha.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/is-url": "^1.2.32",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "18",
+    "clsx": "^2.1.1",
+    "is-url": "^1.2.4",
+    "jsdom": "^26.1.0",
+    "react": "^18.3.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "18",
+    "storybook": "^9.0.13",
+    "storybook-addon-rslib": "^2.0.2",
+    "storybook-react-rsbuild": "^2.0.2",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "18"
+  },
+  "dependencies": {
+    "@nanostores/react": "^1.0.0",
+    "escape-html": "^1.0.3",
+    "is-hotkey": "^0.2.0",
+    "nanostores": "^1.0.1",
+    "prismjs": "^1.30.0",
+    "slate": "^0.117.2",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.100.0",
+    "slate-react": "^0.117.3"
+  }
+}

package/src/constants.ts

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

package/src/core/createEditable.tsx

@@ -0,0 +1,159 @@
+import isHotkey from 'is-hotkey';
+import React, {
+  isValidElement,
+  type JSX,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+} from 'react';
+import type { DecoratedRange, Editor, NodeEntry } from 'slate';
+import {
+  Editable,
+  type RenderElementProps,
+  type RenderLeafProps,
+  useReadOnly,
+} from 'slate-react';
+import { BaseElement } from '../elements/BaseElement';
+import type { IPlugin } from '../types';
+import styles from './styles.module.css';
+
+const SUPPORTED_HANDLERS = ['onDrop', 'onKeyDown', 'onPaste'];
+
+type Props = {
+  readOnly?: boolean;
+};
+
+export const createEditable =
+  (editor: Editor, plugins: IPlugin[]) =>
+  ({ readOnly }: Props) => {
+    const renderElement = (props: RenderElementProps): ReactElement => {
+      let result: ReactElement | null = 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 || <BaseElement {...props} />;
+    };
+
+    const renderLeaf = (props: RenderLeafProps): JSX.Element => {
+      let result: ReactNode;
+      for (const plugin of plugins) {
+        plugin.leafs?.map((element) => {
+          const newElement = element.render(
+            {
+              ...props,
+              children: result || props.children,
+            },
+            editor,
+          );
+          if (newElement && isValidElement(newElement)) {
+            result = newElement;
+          }
+        });
+      }
+
+      return result as JSX.Element;
+    };
+
+    const handleHotkey = (event: KeyboardEvent) => {
+      for (const plugin of plugins) {
+        if (plugin.hotkeys) {
+          for (const hotkey of plugin.hotkeys) {
+            if (isHotkey(hotkey[0], event) && hotkey[1]) {
+              event.preventDefault();
+              hotkey[1](event, editor);
+            }
+          }
+        }
+      }
+    };
+
+    const decorate = (entry: NodeEntry) => {
+      const decorators: IPlugin[] = plugins.filter(
+        (plugin) => !!plugin.decorate,
+      );
+
+      return decorators.reduce<DecoratedRange[]>((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 }: { children: ReactNode }) => {
+        const ui = plugins.filter((p) => Boolean(p.ui));
+        const readOnly = useReadOnly();
+
+        if (!ui.length) {
+          return <div className={styles.editor}>{children}</div>;
+        }
+
+        return (
+          <>
+            {ui.map((p, index) => (
+              <React.Fragment key={index}>
+                {p.ui!({ readOnly, children, editor })}
+              </React.Fragment>
+            ))}
+            <div className={styles.editor}>{children}</div>
+          </>
+        );
+      },
+      [editor, plugins.filter],
+    );
+
+    return (
+      <div className={styles.root}>
+        <Ui>
+          <Editable
+            decorate={decorate}
+            renderElement={renderElement}
+            renderLeaf={renderLeaf}
+            readOnly={readOnly}
+            {...handlers}
+          />
+        </Ui>
+      </div>
+    );
+  };

package/src/core/createEditor.ts

@@ -0,0 +1,244 @@
+import {
+  createEditor as createBaseEditor,
+  Editor,
+  Path,
+  Range,
+  Transforms,
+} from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+import type { CustomElement } from '../../types';
+import type { Block, IPlugin } from '../types';
+
+export const createEditor = (plugins: IPlugin[]) => () => {
+  const baseEditor = withHistory(withReact(createBaseEditor()));
+
+  const editorWithPlugins = plugins.reduce<Editor>((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 || (lastElement as CustomElement).type !== 'paragraph') {
+      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<boolean | undefined>((result, plugin) => {
+      const match = plugin.blocks?.find((el) => element?.type === el.type);
+      if (match && 'isVoid' in match) {
+        return match.isVoid;
+      }
+
+      return result;
+    }, undefined);
+
+    return result ?? isVoid(element);
+  };
+
+  editorWithPlugins.isInline = (element) => {
+    const result = plugins.reduce<boolean | undefined>((result, plugin) => {
+      const match = plugin.blocks?.find((el) => element?.type === el.type);
+      if (match && 'isInline' in match) {
+        return match.isInline;
+      }
+
+      return result;
+    }, undefined);
+
+    return result ?? isInline(element);
+  };
+
+  editorWithPlugins.deleteForward = async (unit) => {
+    const { selection } = editorWithPlugins;
+
+    if (!selection) {
+      return;
+    }
+
+    if (Range.isCollapsed(selection)) {
+      const firstEntry = Editor.above<CustomElement>(editorWithPlugins, {
+        at: selection.anchor,
+        match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
+        mode: 'lowest',
+      });
+
+      if (!firstEntry) {
+        return;
+      }
+
+      const [, currentPath] = firstEntry;
+
+      const secondEntry = Editor.above<CustomElement>(editorWithPlugins, {
+        at: Editor.after(editorWithPlugins, selection.anchor),
+        match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
+        mode: 'lowest',
+      });
+
+      if (!secondEntry) {
+        return;
+      }
+
+      const [node, path] = secondEntry;
+
+      if (
+        node &&
+        Editor.isStart(editorWithPlugins, selection.anchor, currentPath)
+      ) {
+        const matchedBlock = plugins.reduce<Block | null>((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<CustomElement>(editorWithPlugins, {
+        at: selection.anchor,
+        match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
+        mode: 'lowest',
+      });
+      const secondEntry = Editor.above<CustomElement>(editorWithPlugins, {
+        at: Editor.before(editorWithPlugins, selection.anchor),
+        match: (n) => Editor.isBlock(editorWithPlugins, n as CustomElement),
+        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 | null>((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) {
+      deleteFragment(options);
+      return;
+    }
+    const nodes = Array.from(
+      Editor.nodes<CustomElement>(editorWithPlugins, {
+        at: selection,
+        match: (n) =>
+          !Editor.isEditor(n) &&
+          Editor.isBlock(editorWithPlugins, n as CustomElement),
+      }),
+    ).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) {
+          Transforms.removeNodes(editorWithPlugins, {
+            at: path,
+            match: (n) => (n as CustomElement).type === node.type,
+          });
+          match?.onDelete?.([node]);
+        } else {
+          return;
+        }
+      } else {
+        Transforms.removeNodes(editorWithPlugins, {
+          at: path,
+          match: (n) => (n as CustomElement).type === node.type,
+        });
+      }
+    }
+
+    if (nodes.length > 0) {
+      return;
+    }
+
+    deleteFragment(options);
+  };
+
+  return editorWithPlugins;
+};

package/src/core/deserialize.ts

@@ -0,0 +1,57 @@
+import { type Descendant, Element, type Node } from 'slate';
+import { jsx } from 'slate-hyperscript';
+import type { IPlugin } from '../types';
+
+export const deserialize =
+  (plugins: IPlugin[]) =>
+  (
+    element: HTMLElement,
+  ): (Descendant | string)[] | string | Descendant | null => {
+    if (element.nodeType === 3) {
+      return element.textContent;
+    } else if (element.nodeType !== 1) {
+      return null;
+    } else if (element.nodeName === 'BR') {
+      return '\n';
+    }
+
+    let children = Array.from(element.childNodes).flatMap((node) =>
+      deserialize(plugins)(node as HTMLElement),
+    );
+
+    if (children.length === 0) {
+      children = [{ text: '' }];
+    }
+
+    if (element.nodeName === 'BODY') {
+      if (children.some((c) => Element.isElement(c))) {
+        return jsx('fragment', {}, children);
+      } else {
+        return jsx('element', { type: 'paragraph' }, children);
+      }
+    }
+
+    if (element.nodeName === 'P') {
+      return jsx('element', { type: 'paragraph' }, children);
+    }
+
+    let result: Node | null = null;
+    for (const plugin of plugins) {
+      if (plugin.blocks?.some((b) => b.deserialize)) {
+        plugin.blocks.forEach((e) => {
+          if (e.deserialize) {
+            // Cast children to match the expected type in Deserialize interface
+            const childrenAsDescendants = children as (string | Descendant)[];
+            const newResult = e.deserialize(element, childrenAsDescendants);
+            if (newResult) {
+              result = newResult;
+            }
+          }
+        });
+      }
+      if (result) {
+        return result;
+      }
+    }
+    return children.filter((child) => child !== null);
+  };

package/src/core/queries.ts

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

package/src/core/serialize.ts

@@ -0,0 +1,38 @@
+import escapeHtml from 'escape-html';
+import { Text } from 'slate';
+import type { CustomElement, CustomText } from '../../types';
+import type { IPlugin } from '../types';
+
+export const serialize =
+  (plugins: IPlugin[]) =>
+  (
+    node: CustomElement | CustomElement[] | CustomText | CustomText[],
+  ): string => {
+    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) => {
+        return current?.(node) || prev;
+      }, escapeHtml(node.text));
+    } else {
+      const children: string = node.children
+        ?.map((n) => serialize(plugins)(n))
+        .join('');
+
+      if (node.type === 'paragraph') {
+        return `<p>${children}</p>`;
+      }
+
+      return (
+        serializers.reduce((prev, current) => {
+          return current?.(node, children) || prev;
+        }, '') || children
+      );
+    }
+  };

package/src/core/styles.module.css

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

package/src/defaultValue.ts

@@ -0,0 +1,10 @@
+import type { Descendant } from 'slate';
+
+export const defaultValue: { children: Descendant[] } = {
+  children: [
+    {
+      type: 'paragraph',
+      children: [{ text: '' }],
+    },
+  ],
+};

package/src/editor.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { type Descendant, type NodeMatch, Transforms } from 'slate';
+import { ReactEditor, Slate } from 'slate-react';
+import type { CustomElement } from '../types';
+import { createEditable } from './core/createEditable';
+import { createEditor } from './core/createEditor';
+import { deserialize } from './core/deserialize';
+import { serialize } from './core/serialize';
+import type { EditorRef, IPlugin } from './types';
+import { isEmpty } from './utils';
+
+type KonaEditorProps = {
+  readOnly?: boolean;
+  plugins?: IPlugin[];
+  initialValue: Descendant[];
+  onChange: (value: Descendant[]) => void;
+};
+
+export const KonaEditor = forwardRef<EditorRef, KonaEditorProps>(
+  (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: NodeMatch<CustomElement>) => {
+        Transforms.removeNodes(editor, { at: [], match });
+      };
+
+      return {
+        serialize: serialize(plugins),
+        deserialize: deserialize(plugins),
+        deleteNode,
+        isEmpty: () => {
+          return isEmpty(editor.children);
+        },
+        focus: () => {
+          ReactEditor.focus(editor);
+        },
+      };
+    }, [editor, plugins]);
+
+    return (
+      <Slate
+        editor={editor}
+        initialValue={initialValue}
+        onValueChange={onChange}
+      >
+        <SlateEditable readOnly={readOnly} />
+      </Slate>
+    );
+  },
+);

package/src/elements/BaseElement.tsx

@@ -0,0 +1,5 @@
+import { RenderElementProps } from 'slate-react';
+
+export const BaseElement = (props: RenderElementProps) => {
+  return <p {...props.attributes}>{props.children}</p>;
+};

package/src/examples/Backdrop.module.css

@@ -0,0 +1,8 @@
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}