@optilogic/editor 1.0.0-beta.0

package/src/slate-editor.tsx

@@ -0,0 +1,659 @@
+/**
+ * SlateEditor Component
+ *
+ * A reusable rich text editor primitive based on Slate.js
+ * Provides consistent theming and can be used as an alternative to textarea
+ */
+
+import * as React from "react";
+import {
+  createEditor,
+  Descendant,
+  Editor,
+  Transforms,
+  Text,
+  Element as SlateElement,
+  Range,
+  Node,
+  BaseEditor,
+  Path,
+} from "slate";
+import {
+  Slate,
+  Editable,
+  withReact,
+  ReactEditor,
+  RenderElementProps,
+  RenderLeafProps,
+} from "slate-react";
+import { withHistory, HistoryEditor } from "slate-history";
+import { cn } from "@optilogic/core";
+
+type TagElement = {
+  type: "tag";
+  tag: string;
+  children: [{ text: "" }];
+};
+
+type ParagraphElement = {
+  type: "paragraph";
+  children: Descendant[];
+};
+
+type CustomElement = TagElement | ParagraphElement;
+type CustomText = { text: string };
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor & HistoryEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}
+
+const isTagElement = (element: CustomElement): element is TagElement => {
+  return element.type === "tag";
+};
+
+export interface SlateEditorRef {
+  /** Focus the editor */
+  focus: () => void;
+  /** Clear the editor content */
+  clear: () => void;
+  /** Get plain text content */
+  getText: () => string;
+  /** Insert text at cursor */
+  insertText: (text: string) => void;
+  /** Insert a tag element */
+  insertTag: (tag: string) => void;
+}
+
+export interface SlateEditorProps {
+  /** Initial plain text value */
+  value?: string;
+  /** Callback when content changes (plain text) */
+  onChange?: (value: string) => void;
+  /** Callback when a tag is created */
+  onTagCreate?: (tag: string) => void;
+  /** Callback when a tag is deleted */
+  onTagDelete?: (tag: string) => void;
+  /** Callback when Enter is pressed (without Shift) */
+  onSubmit?: (text: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the editor is disabled */
+  disabled?: boolean;
+  /** Whether to enable tag detection (# character) */
+  enableTags?: boolean;
+  /** Minimum number of rows */
+  minRows?: number;
+  /** Maximum number of rows before scrolling */
+  maxRows?: number;
+  /** Additional class names */
+  className?: string;
+}
+
+const withTags = (editor: Editor) => {
+  const { isInline, isVoid, deleteBackward, deleteForward } = editor;
+
+  editor.isInline = (element) => {
+    return element.type === "tag" ? true : isInline(element);
+  };
+
+  editor.isVoid = (element) => {
+    return element.type === "tag" ? true : isVoid(element);
+  };
+
+  editor.deleteBackward = (unit) => {
+    const { selection } = editor;
+
+    if (selection && Range.isCollapsed(selection)) {
+      const [tagEntry] = Editor.nodes(editor, {
+        match: (n) =>
+          !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === "tag",
+      });
+
+      if (tagEntry) {
+        const [, path] = tagEntry;
+        const after = Editor.after(editor, path);
+        if (after && Path.equals(selection.anchor.path, after.path)) {
+          Transforms.removeNodes(editor, { at: path });
+          return;
+        }
+      }
+
+      const before = Editor.before(editor, selection);
+      if (before) {
+        const [beforeTagEntry] = Editor.nodes(editor, {
+          at: before,
+          match: (n) =>
+            !Editor.isEditor(n) &&
+            SlateElement.isElement(n) &&
+            n.type === "tag",
+        });
+
+        if (beforeTagEntry) {
+          const [, path] = beforeTagEntry;
+          Transforms.removeNodes(editor, { at: path });
+          return;
+        }
+      }
+    }
+
+    deleteBackward(unit);
+  };
+
+  editor.deleteForward = (unit) => {
+    const { selection } = editor;
+
+    if (selection && Range.isCollapsed(selection)) {
+      const after = Editor.after(editor, selection);
+      if (after) {
+        const [afterTagEntry] = Editor.nodes(editor, {
+          at: after,
+          match: (n) =>
+            !Editor.isEditor(n) &&
+            SlateElement.isElement(n) &&
+            n.type === "tag",
+        });
+
+        if (afterTagEntry) {
+          const [, path] = afterTagEntry;
+          Transforms.removeNodes(editor, { at: path });
+          return;
+        }
+      }
+    }
+
+    deleteForward(unit);
+  };
+
+  return editor;
+};
+
+/**
+ * Convert Slate content to plain text
+ */
+export function serializeToText(nodes: Descendant[]): string {
+  return nodes
+    .map((n) => {
+      if (Text.isText(n)) {
+        return n.text;
+      }
+      if (SlateElement.isElement(n)) {
+        if (n.type === "tag") {
+          return `#${n.tag}`;
+        }
+        return serializeToText(n.children);
+      }
+      return "";
+    })
+    .join("");
+}
+
+/**
+ * Convert plain text to Slate nodes (preserving existing tags)
+ */
+export function deserializeFromText(text: string): Descendant[] {
+  if (!text) {
+    return [{ type: "paragraph", children: [{ text: "" }] }];
+  }
+
+  const children: Descendant[] = [];
+  const tagRegex = /#([a-zA-Z0-9@#$_-]+(?:--[a-zA-Z0-9_-]+)?)/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = tagRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      children.push({ text: text.substring(lastIndex, match.index) });
+    }
+
+    children.push({
+      type: "tag",
+      tag: match[1],
+      children: [{ text: "" }],
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    children.push({ text: text.substring(lastIndex) });
+  }
+
+  if (children.length === 0) {
+    children.push({ text: "" });
+  }
+
+  return [{ type: "paragraph", children }];
+}
+
+const TagElementRenderer = ({
+  attributes,
+  children,
+  element,
+}: RenderElementProps & { element: TagElement }) => {
+  return (
+    <span
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "inline-flex items-center",
+        "px-1.5 py-0.5 mx-0.5",
+        "rounded-md border",
+        "bg-accent/20 text-accent border-accent/40",
+        "text-sm font-medium",
+        "select-none cursor-default"
+      )}
+    >
+      <span className="font-bold">#</span>
+      {element.tag}
+      {children}
+    </span>
+  );
+};
+
+const DefaultElement = ({ attributes, children }: RenderElementProps) => {
+  return <p {...attributes}>{children}</p>;
+};
+
+const Leaf = ({ attributes, children }: RenderLeafProps) => {
+  return <span {...attributes}>{children}</span>;
+};
+
+/**
+ * SlateEditor component
+ *
+ * A rich text editor based on Slate.js with support for inline tags.
+ * Can be used as a drop-in replacement for textarea with enhanced features.
+ *
+ * @example
+ * <SlateEditor
+ *   value={content}
+ *   onChange={setContent}
+ *   placeholder="Type your message..."
+ *   onSubmit={(text) => console.log('Submitted:', text)}
+ * />
+ */
+export const SlateEditor = React.forwardRef<SlateEditorRef, SlateEditorProps>(
+  (
+    {
+      value = "",
+      onChange,
+      onTagCreate,
+      onTagDelete,
+      onSubmit,
+      placeholder = "Type something...",
+      disabled = false,
+      enableTags = true,
+      minRows = 3,
+      maxRows = 8,
+      className,
+    },
+    ref
+  ) => {
+    const editor = React.useMemo(
+      () => withTags(withHistory(withReact(createEditor()))),
+      []
+    );
+
+    const [isCreatingTag, setIsCreatingTag] = React.useState(false);
+    const [tagStartPoint, setTagStartPoint] = React.useState<{
+      path: Path;
+      offset: number;
+    } | null>(null);
+    const [currentTagText, setCurrentTagText] = React.useState("");
+
+    const [editorValue, setEditorValue] = React.useState<Descendant[]>(() =>
+      deserializeFromText(value)
+    );
+
+    React.useEffect(() => {
+      const newValue = deserializeFromText(value);
+      const currentText = serializeToText(editorValue);
+      if (currentText !== value) {
+        setEditorValue(newValue);
+        Transforms.removeNodes(editor, { at: [] });
+        Transforms.insertNodes(editor, newValue, { at: [0] });
+        Transforms.select(editor, Editor.start(editor, []));
+      }
+    }, [value, editor]);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          ReactEditor.focus(editor);
+        },
+        clear: () => {
+          const newValue: Descendant[] = [
+            { type: "paragraph", children: [{ text: "" }] },
+          ];
+          setEditorValue(newValue);
+          Transforms.select(editor, Editor.start(editor, []));
+        },
+        getText: () => serializeToText(editorValue),
+        insertText: (text: string) => {
+          Transforms.insertText(editor, text);
+        },
+        insertTag: (tag: string) => {
+          insertTag(editor, tag);
+          onTagCreate?.(tag);
+        },
+      }),
+      [editor, editorValue, onTagCreate]
+    );
+
+    const handleChange = React.useCallback(
+      (newValue: Descendant[]) => {
+        setEditorValue(newValue);
+
+        if (isCreatingTag && tagStartPoint) {
+          const { selection } = editor;
+          if (selection && Range.isCollapsed(selection)) {
+            const currentPath = selection.anchor.path;
+            const currentOffset = selection.anchor.offset;
+
+            if (Path.equals(currentPath, tagStartPoint.path)) {
+              try {
+                const [textNode] = Editor.node(editor, currentPath);
+                if (Text.isText(textNode)) {
+                  const tagText = textNode.text.substring(
+                    tagStartPoint.offset + 1,
+                    currentOffset
+                  );
+                  setCurrentTagText(tagText);
+                }
+              } catch {
+                // Ignore - node may not exist
+              }
+            }
+          }
+        }
+
+        const oldTags = new Set<string>();
+        const newTags = new Set<string>();
+
+        for (const node of Node.descendants(editor, {
+          from: [],
+          pass: ([n]) => SlateElement.isElement(n) && n.type === "paragraph",
+        })) {
+          const [n] = node;
+          if (SlateElement.isElement(n) && n.type === "tag") {
+            oldTags.add(n.tag);
+          }
+        }
+
+        const extractTags = (nodes: Descendant[]) => {
+          for (const node of nodes) {
+            if (SlateElement.isElement(node)) {
+              if (node.type === "tag") {
+                newTags.add(node.tag);
+              }
+              if ("children" in node) {
+                extractTags(node.children);
+              }
+            }
+          }
+        };
+        extractTags(newValue);
+
+        for (const tag of oldTags) {
+          if (!newTags.has(tag)) {
+            onTagDelete?.(tag);
+          }
+        }
+
+        const text = serializeToText(newValue);
+        onChange?.(text);
+      },
+      [editor, onChange, onTagDelete, isCreatingTag, tagStartPoint]
+    );
+
+    const insertTag = (editor: Editor, tag: string) => {
+      const tagNode: TagElement = {
+        type: "tag",
+        tag,
+        children: [{ text: "" }],
+      };
+      Transforms.insertNodes(editor, tagNode);
+      Transforms.move(editor);
+      Transforms.insertText(editor, " ");
+    };
+
+    const completeTag = React.useCallback(() => {
+      if (!isCreatingTag || !tagStartPoint) return;
+
+      const { selection } = editor;
+      if (!selection || !Range.isCollapsed(selection)) return;
+
+      const currentPath = selection.anchor.path;
+      const currentOffset = selection.anchor.offset;
+
+      if (!Path.equals(currentPath, tagStartPoint.path)) {
+        setIsCreatingTag(false);
+        setTagStartPoint(null);
+        setCurrentTagText("");
+        return;
+      }
+
+      const [textNode] = Editor.node(editor, currentPath);
+      if (!Text.isText(textNode)) {
+        setIsCreatingTag(false);
+        setTagStartPoint(null);
+        setCurrentTagText("");
+        return;
+      }
+
+      const tagText = textNode.text.substring(
+        tagStartPoint.offset + 1,
+        currentOffset
+      );
+
+      if (!tagText.trim()) {
+        setIsCreatingTag(false);
+        setTagStartPoint(null);
+        setCurrentTagText("");
+        return;
+      }
+
+      const start = { path: currentPath, offset: tagStartPoint.offset };
+      const end = { path: currentPath, offset: currentOffset };
+
+      Transforms.delete(editor, { at: { anchor: start, focus: end } });
+      insertTag(editor, tagText.trim());
+
+      onTagCreate?.(tagText.trim());
+
+      setIsCreatingTag(false);
+      setTagStartPoint(null);
+      setCurrentTagText("");
+    }, [editor, isCreatingTag, tagStartPoint, onTagCreate]);
+
+    const cancelTag = React.useCallback(() => {
+      setIsCreatingTag(false);
+      setTagStartPoint(null);
+      setCurrentTagText("");
+    }, []);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (isCreatingTag) {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            completeTag();
+            return;
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelTag();
+            return;
+          }
+        }
+
+        if (enableTags && event.key === "#" && !isCreatingTag) {
+          const { selection } = editor;
+          if (selection && Range.isCollapsed(selection)) {
+            setIsCreatingTag(true);
+            setCurrentTagText("");
+            setTagStartPoint({
+              path: selection.anchor.path,
+              offset: selection.anchor.offset,
+            });
+          }
+        }
+
+        if (event.key === "Enter" && !event.shiftKey && !isCreatingTag) {
+          event.preventDefault();
+          const text = serializeToText(editorValue);
+          if (text.trim() && onSubmit) {
+            onSubmit(text.trim());
+          }
+          return;
+        }
+
+        if (
+          (event.key === "Backspace" || event.key === "Delete") &&
+          event.ctrlKey
+        ) {
+          const { selection } = editor;
+          if (selection && Range.isCollapsed(selection)) {
+            const direction =
+              event.key === "Backspace" ? "backward" : "forward";
+            const pointFn =
+              direction === "backward" ? Editor.before : Editor.after;
+            const point = pointFn(editor, selection, { unit: "word" });
+
+            if (point) {
+              const [tagEntry] = Editor.nodes(editor, {
+                at:
+                  direction === "backward"
+                    ? { anchor: point, focus: selection.anchor }
+                    : { anchor: selection.anchor, focus: point },
+                match: (n) =>
+                  !Editor.isEditor(n) &&
+                  SlateElement.isElement(n) &&
+                  n.type === "tag",
+              });
+
+              if (tagEntry) {
+                event.preventDefault();
+                const [tagNode, tagPath] = tagEntry;
+                if (SlateElement.isElement(tagNode) && tagNode.type === "tag") {
+                  onTagDelete?.(tagNode.tag);
+                }
+                Transforms.removeNodes(editor, { at: tagPath });
+                return;
+              }
+            }
+          }
+        }
+      },
+      [
+        editor,
+        editorValue,
+        isCreatingTag,
+        enableTags,
+        completeTag,
+        cancelTag,
+        onSubmit,
+        onTagDelete,
+      ]
+    );
+
+    const renderElement = React.useCallback((props: RenderElementProps) => {
+      switch (props.element.type) {
+        case "tag":
+          return (
+            <TagElementRenderer
+              {...props}
+              element={props.element as TagElement}
+            />
+          );
+        default:
+          return <DefaultElement {...props} />;
+      }
+    }, []);
+
+    const renderLeaf = React.useCallback((props: RenderLeafProps) => {
+      return <Leaf {...props} />;
+    }, []);
+
+    const lineHeight = 24;
+    const minHeight = lineHeight * minRows;
+    const maxHeight = lineHeight * maxRows;
+
+    return (
+      <div
+        className={cn(
+          "relative w-full rounded-md",
+          "bg-transparent",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        )}
+      >
+        <Slate
+          editor={editor}
+          initialValue={editorValue}
+          onChange={handleChange}
+        >
+          <Editable
+            readOnly={disabled}
+            placeholder={placeholder}
+            renderElement={renderElement}
+            renderLeaf={renderLeaf}
+            onKeyDown={handleKeyDown}
+            className={cn(
+              "w-full outline-none",
+              "text-foreground placeholder:text-muted-foreground",
+              "leading-6",
+              "overflow-y-auto overflow-x-hidden",
+              "whitespace-pre-wrap break-words"
+            )}
+            style={{
+              minHeight: `${minHeight}px`,
+              maxHeight: `${maxHeight}px`,
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+            }}
+            spellCheck
+            autoCorrect="off"
+            autoCapitalize="off"
+          />
+        </Slate>
+
+        {isCreatingTag && (
+          <div className="absolute bottom-full left-0 mb-2 flex items-center gap-2.5 animate-in fade-in-0 slide-in-from-bottom-1 duration-150">
+            <div className="flex items-center px-2 py-1 rounded-md border shadow-sm bg-accent/20 border-accent/40">
+              <span className="font-bold text-sm text-accent">#</span>
+              <span className="text-sm font-medium min-w-[2ch] text-accent">
+                {currentTagText || (
+                  <span className="opacity-50 italic">tag</span>
+                )}
+              </span>
+            </div>
+            <span className="text-muted-foreground/80 text-[11px]">
+              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mr-1">
+                Enter
+              </kbd>
+              or
+              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mx-1">
+                Space
+              </kbd>
+              to add
+              <span className="mx-1.5 text-muted-foreground/50">·</span>
+              <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mr-1">
+                Esc
+              </kbd>
+              to cancel
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SlateEditor.displayName = "SlateEditor";