@optilogic/editor 1.0.0-beta.0

package/dist/index.d.cts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { BaseEditor, Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
+
+/**
+ * SlateEditor Component
+ *
+ * A reusable rich text editor primitive based on Slate.js
+ * Provides consistent theming and can be used as an alternative to textarea
+ */
+
+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;
+    }
+}
+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;
+}
+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;
+}
+/**
+ * Convert Slate content to plain text
+ */
+declare function serializeToText(nodes: Descendant[]): string;
+/**
+ * Convert plain text to Slate nodes (preserving existing tags)
+ */
+declare function deserializeFromText(text: string): Descendant[];
+/**
+ * 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)}
+ * />
+ */
+declare const SlateEditor: React.ForwardRefExoticComponent<SlateEditorProps & React.RefAttributes<SlateEditorRef>>;
+
+export { SlateEditor, type SlateEditorProps, type SlateEditorRef, deserializeFromText, serializeToText };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { BaseEditor, Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
+
+/**
+ * SlateEditor Component
+ *
+ * A reusable rich text editor primitive based on Slate.js
+ * Provides consistent theming and can be used as an alternative to textarea
+ */
+
+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;
+    }
+}
+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;
+}
+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;
+}
+/**
+ * Convert Slate content to plain text
+ */
+declare function serializeToText(nodes: Descendant[]): string;
+/**
+ * Convert plain text to Slate nodes (preserving existing tags)
+ */
+declare function deserializeFromText(text: string): Descendant[];
+/**
+ * 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)}
+ * />
+ */
+declare const SlateEditor: React.ForwardRefExoticComponent<SlateEditorProps & React.RefAttributes<SlateEditorRef>>;
+
+export { SlateEditor, type SlateEditorProps, type SlateEditorRef, deserializeFromText, serializeToText };

package/dist/index.js

@@ -0,0 +1,463 @@
+import * as React from 'react';
+import { createEditor, Transforms, Editor, Range, Path, Text, Node, Element } from 'slate';
+import { withReact, ReactEditor, Slate, Editable } from 'slate-react';
+import { withHistory } from 'slate-history';
+import { cn } from '@optilogic/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/slate-editor.tsx
+var withTags = (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) && Element.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) && Element.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) && Element.isElement(n) && n.type === "tag"
+        });
+        if (afterTagEntry) {
+          const [, path] = afterTagEntry;
+          Transforms.removeNodes(editor, { at: path });
+          return;
+        }
+      }
+    }
+    deleteForward(unit);
+  };
+  return editor;
+};
+function serializeToText(nodes) {
+  return nodes.map((n) => {
+    if (Text.isText(n)) {
+      return n.text;
+    }
+    if (Element.isElement(n)) {
+      if (n.type === "tag") {
+        return `#${n.tag}`;
+      }
+      return serializeToText(n.children);
+    }
+    return "";
+  }).join("");
+}
+function deserializeFromText(text) {
+  if (!text) {
+    return [{ type: "paragraph", children: [{ text: "" }] }];
+  }
+  const children = [];
+  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 }];
+}
+var TagElementRenderer = ({
+  attributes,
+  children,
+  element
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "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"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-bold", children: "#" }),
+        element.tag,
+        children
+      ]
+    }
+  );
+};
+var DefaultElement = ({ attributes, children }) => {
+  return /* @__PURE__ */ jsx("p", { ...attributes, children });
+};
+var Leaf = ({ attributes, children }) => {
+  return /* @__PURE__ */ jsx("span", { ...attributes, children });
+};
+var SlateEditor = React.forwardRef(
+  ({
+    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(null);
+    const [currentTagText, setCurrentTagText] = React.useState("");
+    const [editorValue, setEditorValue] = React.useState(
+      () => 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 = [
+            { type: "paragraph", children: [{ text: "" }] }
+          ];
+          setEditorValue(newValue);
+          Transforms.select(editor, Editor.start(editor, []));
+        },
+        getText: () => serializeToText(editorValue),
+        insertText: (text) => {
+          Transforms.insertText(editor, text);
+        },
+        insertTag: (tag) => {
+          insertTag(editor, tag);
+          onTagCreate?.(tag);
+        }
+      }),
+      [editor, editorValue, onTagCreate]
+    );
+    const handleChange = React.useCallback(
+      (newValue) => {
+        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 {
+              }
+            }
+          }
+        }
+        const oldTags = /* @__PURE__ */ new Set();
+        const newTags = /* @__PURE__ */ new Set();
+        for (const node of Node.descendants(editor, {
+          from: [],
+          pass: ([n]) => Element.isElement(n) && n.type === "paragraph"
+        })) {
+          const [n] = node;
+          if (Element.isElement(n) && n.type === "tag") {
+            oldTags.add(n.tag);
+          }
+        }
+        const extractTags = (nodes) => {
+          for (const node of nodes) {
+            if (Element.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 = (editor2, tag) => {
+      const tagNode = {
+        type: "tag",
+        tag,
+        children: [{ text: "" }]
+      };
+      Transforms.insertNodes(editor2, tagNode);
+      Transforms.move(editor2);
+      Transforms.insertText(editor2, " ");
+    };
+    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) => {
+        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) && Element.isElement(n) && n.type === "tag"
+              });
+              if (tagEntry) {
+                event.preventDefault();
+                const [tagNode, tagPath] = tagEntry;
+                if (Element.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) => {
+      switch (props.element.type) {
+        case "tag":
+          return /* @__PURE__ */ jsx(
+            TagElementRenderer,
+            {
+              ...props,
+              element: props.element
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsx(DefaultElement, { ...props });
+      }
+    }, []);
+    const renderLeaf = React.useCallback((props) => {
+      return /* @__PURE__ */ jsx(Leaf, { ...props });
+    }, []);
+    const lineHeight = 24;
+    const minHeight = lineHeight * minRows;
+    const maxHeight = lineHeight * maxRows;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative w-full rounded-md",
+          "bg-transparent",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Slate,
+            {
+              editor,
+              initialValue: editorValue,
+              onChange: handleChange,
+              children: /* @__PURE__ */ jsx(
+                Editable,
+                {
+                  readOnly: disabled,
+                  placeholder,
+                  renderElement,
+                  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: true,
+                  autoCorrect: "off",
+                  autoCapitalize: "off"
+                }
+              )
+            }
+          ),
+          isCreatingTag && /* @__PURE__ */ jsxs("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", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center px-2 py-1 rounded-md border shadow-sm bg-accent/20 border-accent/40", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-sm text-accent", children: "#" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium min-w-[2ch] text-accent", children: currentTagText || /* @__PURE__ */ jsx("span", { className: "opacity-50 italic", children: "tag" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/80 text-[11px]", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mr-1", children: "Enter" }),
+              "or",
+              /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mx-1", children: "Space" }),
+              "to add",
+              /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/50", children: "\xB7" }),
+              /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono mr-1", children: "Esc" }),
+              "to cancel"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+SlateEditor.displayName = "SlateEditor";
+
+export { SlateEditor, deserializeFromText, serializeToText };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map