@use-kona/editor 0.1.0-rc.0

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -0,0 +1,205 @@
+import { useStore } from '@nanostores/react';
+import cn from 'clsx';
+import type { MapStore } from 'nanostores';
+import React, {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Editor } from 'slate';
+import { useFocused, useSlate, useSlateSelection } from 'slate-react';
+import type { CustomElement } from '../../../types';
+import { insert, insertText, removeCommand, set, wrap } from './actions';
+import styles from './styles.module.css';
+import type { Command, CommandsStore } from './types';
+
+type Props = {
+  $store: MapStore<CommandsStore>;
+  commands: Command[];
+  ignoreNodes?: string[];
+  renderMenu: (children: ReactNode) => ReactNode;
+};
+
+export const Menu = (props: Props) => {
+  const { commands, $store, renderMenu, ignoreNodes = [] } = props;
+  const store = useStore($store);
+  const [style, setStyle] = useState<CSSProperties | undefined>({});
+  const [active, setActive] = useState(0);
+  const refs = useRef<Record<string, HTMLButtonElement>>({});
+
+  const selection = useSlateSelection();
+  const editor = useSlate() as Editor;
+  const isFocused = useFocused();
+
+  const entry = Editor.above<CustomElement>(editor, {
+    match: (n) => Editor.isBlock(editor, n as CustomElement),
+  });
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about those deps
+  const actions = useMemo(() => {
+    return {
+      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]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about those deps
+  useLayoutEffect(() => {
+    const { selection } = editor;
+
+    if (!selection || !isFocused) {
+      setStyle(undefined);
+      return;
+    }
+
+    setTimeout(() => {
+      const domSelection = window.getSelection();
+      const domRange = domSelection?.getRangeAt(0);
+      const rect = domRange?.getBoundingClientRect();
+
+      if (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`,
+        });
+      } else {
+        setStyle({
+          opacity: 0,
+          transform: 'scale(0.9)',
+        });
+      }
+    }, 0);
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      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]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about filter
+  useEffect(() => {
+    if (active < 0) {
+      setActive(0);
+      return;
+    }
+
+    if (active > commands.length - 1) {
+      setActive(commands.length - 1);
+    }
+  }, [store.filter]);
+
+  const handleMenuLayout = (element: HTMLDivElement) => {
+    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 createPortal(
+    renderMenu(
+      <>
+        {store.isOpen && <div className={styles.backdrop} onClick={close} />}
+        <div
+          ref={handleMenuLayout}
+          style={style}
+          className={styles.menu}
+          onMouseDown={(event) => {
+            event.preventDefault();
+          }}
+        >
+          {commands.map((command, index) => (
+            <button
+              type="button"
+              ref={(element) => {
+                if (element) {
+                  refs.current[index] = element;
+                }
+              }}
+              key={index}
+              className={cn(styles.button, {
+                [styles.active]: index === active,
+              })}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                command.action(actions, editor);
+                $store.setKey('isOpen', false);
+              }}
+            >
+              <span className={styles.icon}>{command.icon}</span>
+              <span>{command.title}</span>
+            </button>
+          ))}
+        </div>
+      </>,
+    ),
+    document.body,
+  );
+};

package/src/plugins/CommandsPlugin/actions.ts

@@ -0,0 +1,41 @@
+import { type Editor, type Selection, Transforms } from 'slate';
+import type { CustomElement } from '../../../types';
+
+export const removeCommand =
+  (editor: Editor, selection: Selection, filter?: string | boolean) => () => {
+    Transforms.delete(editor, {
+      at: selection?.focus,
+      distance: typeof filter === 'string' ? filter.length + 1 : 1,
+      reverse: true,
+      unit: 'character',
+    });
+  };
+
+export const set =
+  (editor: Editor, selection: Selection, filter?: string | boolean) =>
+  (params: Partial<CustomElement>, options = {}) => {
+    removeCommand(editor, selection, filter)();
+    Transforms.setNodes(editor, params, {
+      ...options,
+    });
+  };
+
+export const insert =
+  (editor: Editor, selection: Selection, filter?: string | boolean) =>
+  (params: CustomElement | CustomElement[]) => {
+    removeCommand(editor, selection, filter)();
+    Transforms.insertNodes(editor, params);
+  };
+
+export const wrap =
+  (editor: Editor, selection: Selection, filter?: string | boolean) =>
+  (params: CustomElement, options = {}) => {
+    removeCommand(editor, selection, filter)();
+    Transforms.wrapNodes(editor, params, {
+      ...options,
+    });
+  };
+
+export const insertText = (editor: Editor) => (text: string) => {
+  Transforms.insertText(editor, text);
+};

package/src/plugins/CommandsPlugin/index.ts

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

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

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

package/src/plugins/CommandsPlugin/types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+
+import type { Editor, Node } 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/src/plugins/DnDPlugin/DnDPlugin.tsx

@@ -0,0 +1,200 @@
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import {
+  type ConnectDragPreview,
+  type ConnectDragSource,
+  type ConnectDropTarget,
+  useDrag,
+  useDrop,
+} from 'react-dnd';
+import { NativeTypes } from 'react-dnd-html5-backend';
+import { Editor, Path, Transforms } from 'slate';
+import {
+  ReactEditor,
+  type RenderElementProps,
+  useReadOnly,
+  useSlate,
+} 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 class DnDPlugin implements IPlugin {
+  constructor(private options: Options) {}
+
+  static DND_BLOCK_ELEMENT = 'block';
+
+  handlers = {
+    onDrop: (event: DragEvent) => {
+      event.preventDefault();
+    },
+  };
+
+  renderBlock = (props: RenderElementProps) => {
+    const editor = useSlate();
+
+    const options = this.options;
+    const isReadOnly = useReadOnly();
+
+    const [dropPosition, setDropPosition] = useState<'top' | 'bottom' | null>(
+      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,
+        ) as HTMLElement;
+        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;
+
+        if (hoverClientY < hoverMiddleY) {
+          setDropPosition('top');
+        } else {
+          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 as { files: File[] }).files,
+              dropPath,
+            );
+            break;
+          default: {
+            const targetTo = ReactEditor.findPath(
+              editor,
+              (item as { element: CustomElement }).element,
+            );
+
+            if (!dropPosition) {
+              return;
+            }
+
+            moveNode(editor, sourceTo, targetTo, dropPosition);
+            break;
+          }
+        }
+
+        setDropPosition(null);
+      },
+    });
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about this dep
+    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: Editor,
+  targetNodePath: Path,
+  position: 'top' | 'bottom' | null,
+) => {
+  const target = Editor.node(editor, targetNodePath);
+
+  switch (position) {
+    case 'top':
+      return target[1];
+    case 'bottom':
+      return Path.next(target[1]);
+  }
+};
+
+const moveNode = (
+  editor: Editor,
+  targetNodePath: Path,
+  sourceNodePath: Path,
+  position: 'top' | 'bottom',
+) => {
+  const dropPath = getDropPath(editor, targetNodePath, position);
+
+  if (!dropPath) return;
+
+  Transforms.moveNodes(editor, {
+    at: sourceNodePath,
+    to: dropPath,
+    mode: 'highest',
+  });
+};

package/src/plugins/DnDPlugin/index.ts

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

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

@@ -0,0 +1,42 @@
+.root {
+  position: relative;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.block {
+  position: relative;
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  column-gap: 8px;
+  align-items: start;
+  padding: 4px 8px 4px 8px;
+  transition: background-color 0.25s;
+}
+
+.block:hover {
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+.block:hover .drag {
+  opacity: 1;
+}
+
+.drag {
+  display: inline-block;
+  vertical-align: baseline;
+  width: 16px;
+  cursor: move;
+  line-height: 1.2;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.top {
+  border-top: 2px solid #3498db;
+}
+
+.bottom {
+  border-bottom: 2px solid #3498db;
+}