@spatika/editor 1.5.0

package/src/extensions/ai-action.test.ts

@@ -0,0 +1,26 @@
+import { Editor } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import { describe, expect, it } from "vitest";
+import { AiActionPluginKey, createAiActionExtension } from "./ai-action";
+
+describe("createAiActionExtension", () => {
+  it("stores AI processing and selection range", () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, createAiActionExtension()],
+      content: "<p>Hello world</p>",
+    });
+
+    editor.commands.setAiSelection({ from: 1, to: 6 });
+    editor.commands.setAiProcessing(true);
+
+    expect(editor.storage.aiAction.lastSelection).toEqual({ from: 1, to: 6 });
+    expect(editor.storage.aiAction.processing).toBe(true);
+
+    const plugin = editor.state.plugins.find((item) => item.spec.key === AiActionPluginKey);
+    expect(plugin).toBeDefined();
+
+    editor.destroy();
+  });
+});

package/src/extensions/ai-action.ts

@@ -0,0 +1,73 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+export const AiActionPluginKey = new PluginKey("spatikaAiAction");
+
+export type AiActionStorage = {
+  processing: boolean;
+  lastSelection: { from: number; to: number } | null;
+};
+
+/** Highlights the active selection while an AI transform runs. */
+export function createAiActionExtension() {
+  return Extension.create({
+    name: "aiAction",
+
+    addStorage() {
+      return {
+        processing: false,
+        lastSelection: null,
+      } satisfies AiActionStorage;
+    },
+
+    addCommands() {
+      return {
+        setAiProcessing:
+          (processing: boolean) =>
+          ({ tr, dispatch }) => {
+            this.storage.processing = processing;
+            if (dispatch) dispatch(tr);
+            return true;
+          },
+        setAiSelection:
+          (range: { from: number; to: number } | null) =>
+          ({ tr, dispatch }) => {
+            this.storage.lastSelection = range;
+            if (dispatch) dispatch(tr);
+            return true;
+          },
+      };
+    },
+
+    addProseMirrorPlugins() {
+      const storage = this.storage as AiActionStorage;
+      return [
+        new Plugin({
+          key: AiActionPluginKey,
+          props: {
+            decorations: (state) => {
+              if (!storage.processing || !storage.lastSelection) {
+                return DecorationSet.empty;
+              }
+              const { from, to } = storage.lastSelection;
+              if (from === to) return DecorationSet.empty;
+              return DecorationSet.create(state.doc, [
+                Decoration.inline(from, to, { class: "spk-editor-ai-selection" }),
+              ]);
+            },
+          },
+        }),
+      ];
+    },
+  });
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    aiAction: {
+      setAiProcessing: (processing: boolean) => ReturnType;
+      setAiSelection: (range: { from: number; to: number } | null) => ReturnType;
+    };
+  }
+}

package/src/extensions/mention.test.ts

@@ -0,0 +1,31 @@
+import { Editor } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import { describe, expect, it, vi } from "vitest";
+import { createMentionExtension } from "./mention";
+
+describe("createMentionExtension", () => {
+  it("inserts a mention node and notifies on suggestion updates", () => {
+    const onUpdate = vi.fn();
+    const contacts = [{ id: "asha", label: "Asha Verma" }];
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ...createMentionExtension(contacts, onUpdate)],
+      content: "<p></p>",
+    });
+
+    editor.commands.insertContent([
+      { type: "mention", attrs: { id: "asha", label: "Asha Verma" } },
+      { type: "text", text: " " },
+    ]);
+
+    expect(editor.getHTML()).toContain("spk-editor-mention");
+    expect(editor.getText()).toContain("@Asha Verma");
+
+    const storage = editor.extensionManager.extensions.find((ext) => ext.name === "mentionSuggestion")
+      ?.storage;
+    expect(storage?.contacts).toEqual(contacts);
+
+    editor.destroy();
+  });
+});

package/src/extensions/mention.ts

@@ -0,0 +1,158 @@
+import { Extension, mergeAttributes, Node } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion, { type SuggestionOptions } from "@tiptap/suggestion";
+import type { MentionContact } from "../lib/types";
+
+export type MentionStorage = {
+  contacts: MentionContact[];
+  activeIndex: number;
+  query: string;
+  range: { from: number; to: number } | null;
+  filteredItems: MentionContact[];
+  runCommand: ((item: MentionContact) => void) | null;
+};
+
+export const MentionPluginKey = new PluginKey("spatikaMention");
+
+export function createMentionExtension(
+  contacts: MentionContact[],
+  onUpdate?: (state: MentionStorage) => void,
+) {
+  const MentionNode = Node.create({
+    name: "mention",
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: false,
+
+    addAttributes() {
+      return {
+        id: { default: null },
+        label: { default: null },
+      };
+    },
+
+    parseHTML() {
+      return [{ tag: 'span[data-type="mention"]' }];
+    },
+
+    renderHTML({ node, HTMLAttributes }) {
+      return [
+        "span",
+        mergeAttributes(HTMLAttributes, {
+          "data-type": "mention",
+          class: "spk-editor-mention",
+        }),
+        `@${node.attrs.label ?? node.attrs.id}`,
+      ];
+    },
+
+    renderText({ node }) {
+      return `@${node.attrs.label ?? node.attrs.id}`;
+    },
+  });
+
+  const suggestionExtension = ExtensionWithSuggestion(contacts, onUpdate);
+  return [MentionNode, suggestionExtension];
+}
+
+function ExtensionWithSuggestion(
+  contacts: MentionContact[],
+  onUpdate?: (state: MentionStorage) => void,
+) {
+  return Extension.create({
+    name: "mentionSuggestion",
+
+    addStorage() {
+      return {
+        contacts,
+        activeIndex: 0,
+        query: "",
+        range: null,
+        filteredItems: contacts,
+        runCommand: null,
+      } satisfies MentionStorage;
+    },
+
+    addProseMirrorPlugins() {
+      const editor = this.editor;
+      const storage = this.storage as MentionStorage;
+
+      const suggestion: Partial<SuggestionOptions<MentionContact>> = {
+        char: "@",
+        pluginKey: MentionPluginKey,
+        allowSpaces: false,
+        items: ({ query }) => {
+          const needle = query.toLowerCase();
+          return contacts.filter((contact) =>
+            contact.label.toLowerCase().includes(needle),
+          );
+        },
+        command: ({ editor: ed, range, props }) => {
+          ed.chain()
+            .focus()
+            .insertContentAt(range, [
+              {
+                type: "mention",
+                attrs: { id: props.id, label: props.label },
+              },
+              { type: "text", text: " " },
+            ])
+            .run();
+        },
+        render: () => ({
+          onStart: (props) => {
+            storage.query = props.query;
+            storage.activeIndex = 0;
+            storage.range = props.range;
+            storage.filteredItems = props.items;
+            storage.runCommand = (item) => props.command(item);
+            onUpdate?.({ ...storage });
+          },
+          onUpdate: (props) => {
+            storage.query = props.query;
+            storage.activeIndex = 0;
+            storage.range = props.range;
+            storage.filteredItems = props.items;
+            storage.runCommand = (item) => props.command(item);
+            onUpdate?.({ ...storage });
+          },
+          onKeyDown: (props) => {
+            if (props.event.key === "ArrowUp") {
+              storage.activeIndex = Math.max(0, storage.activeIndex - 1);
+              onUpdate?.({ ...storage });
+              return true;
+            }
+            if (props.event.key === "ArrowDown") {
+              storage.activeIndex = Math.min(storage.filteredItems.length - 1, storage.activeIndex + 1);
+              onUpdate?.({ ...storage });
+              return true;
+            }
+            if (props.event.key === "Enter") {
+              const item = storage.filteredItems[storage.activeIndex];
+              if (item) storage.runCommand?.(item);
+              return true;
+            }
+            if (props.event.key === "Escape") {
+              storage.query = "";
+              storage.range = null;
+              onUpdate?.({ ...storage });
+              return true;
+            }
+            return false;
+          },
+          onExit: () => {
+            storage.query = "";
+            storage.range = null;
+            storage.activeIndex = 0;
+            storage.filteredItems = contacts;
+            storage.runCommand = null;
+            onUpdate?.({ ...storage });
+          },
+        }),
+      };
+
+      return [Suggestion({ editor, ...suggestion })];
+    },
+  });
+}

package/src/extensions/resizable-image-view.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { applyImageWrapState } from "./resizable-image-view";
+
+describe("applyImageWrapState", () => {
+  it("applies width, alignment, and selection classes", () => {
+    const wrap = document.createElement("div");
+    const img = document.createElement("img");
+    applyImageWrapState(
+      wrap,
+      img,
+      {
+        attrs: {
+          src: "https://example.com/a.png",
+          width: "240px",
+          align: "left",
+        },
+      } as never,
+      true,
+    );
+
+    expect(wrap.className).toContain("spk-editor-image-wrap--selected");
+    expect(wrap.className).toContain("spk-editor-image-wrap--left");
+    expect(img.style.width).toBe("240px");
+    expect(img.src).toContain("https://example.com/a.png");
+  });
+});

package/src/extensions/resizable-image-view.ts

@@ -0,0 +1,96 @@
+import type { Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { ImageAlign } from "./resizable-image";
+
+type CreateImageNodeViewOptions = {
+  node: ProseMirrorNode;
+  getPos: () => number | undefined;
+  editor: Editor;
+  selected: boolean;
+};
+
+export function applyImageWrapState(
+  wrap: HTMLElement,
+  img: HTMLImageElement,
+  node: ProseMirrorNode,
+  selected: boolean,
+) {
+  const width = (node.attrs.width as string | undefined) ?? "100%";
+  const align = (node.attrs.align as ImageAlign | undefined) ?? "center";
+
+  wrap.dataset.align = align;
+  wrap.className = `spk-editor-image-wrap spk-editor-image-wrap--${align}${selected ? " spk-editor-image-wrap--selected" : ""}`;
+  img.src = node.attrs.src as string;
+  img.alt = (node.attrs.alt as string | undefined) ?? "";
+  img.className = "spk-editor-image";
+  img.style.width = width;
+  img.draggable = false;
+}
+
+export function createImageNodeView({ node, getPos, editor, selected }: CreateImageNodeViewOptions) {
+  const wrap = document.createElement("div");
+  wrap.contentEditable = "false";
+  wrap.className = "spk-editor-image-wrap";
+
+  const img = document.createElement("img");
+  const handle = document.createElement("span");
+  handle.className = "spk-editor-image-resize-handle";
+  handle.setAttribute("aria-hidden", "true");
+  handle.title = "Drag to resize";
+
+  applyImageWrapState(wrap, img, node, selected);
+  wrap.append(img, handle);
+
+  let startX = 0;
+  let startWidth = 0;
+
+  const onPointerMove = (event: PointerEvent) => {
+    const pos = getPos();
+    if (pos === undefined) return;
+    const delta = event.clientX - startX;
+    const nextWidth = Math.max(120, Math.round(startWidth + delta));
+    editor.view.dispatch(
+      editor.view.state.tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        width: `${nextWidth}px`,
+      }),
+    );
+  };
+
+  const onPointerUp = () => {
+    document.removeEventListener("pointermove", onPointerMove);
+    document.removeEventListener("pointerup", onPointerUp);
+  };
+
+  const onPointerDown = (event: PointerEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    startX = event.clientX;
+    startWidth = img.getBoundingClientRect().width;
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+  };
+
+  handle.addEventListener("pointerdown", onPointerDown);
+
+  return {
+    dom: wrap,
+    update(updatedNode: ProseMirrorNode) {
+      if (updatedNode.type.name !== "image") return false;
+      node = updatedNode;
+      applyImageWrapState(wrap, img, updatedNode, selected);
+      return true;
+    },
+    selectNode() {
+      wrap.classList.add("spk-editor-image-wrap--selected");
+    },
+    deselectNode() {
+      wrap.classList.remove("spk-editor-image-wrap--selected");
+    },
+    destroy() {
+      handle.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerup", onPointerUp);
+    },
+  };
+}

package/src/extensions/resizable-image.test.ts

@@ -0,0 +1,28 @@
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { describe, expect, it } from "vitest";
+import { ResizableImage } from "./resizable-image";
+
+describe("ResizableImage", () => {
+  it("parses width and align attributes from HTML", () => {
+    const editor = new Editor({
+      extensions: [
+        StarterKit.configure({
+          code: false,
+          codeBlock: false,
+          link: false,
+          underline: false,
+        }),
+        ResizableImage,
+      ],
+      content: '<img src="https://example.com/a.png" data-width="50%" data-align="left" />',
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('data-width="50%"');
+    expect(html).toContain('data-align="left"');
+    expect(html).toContain("spk-editor-image-wrap--left");
+
+    editor.destroy();
+  });
+});

package/src/extensions/resizable-image.ts

@@ -0,0 +1,75 @@
+import Image from "@tiptap/extension-image";
+import { mergeAttributes } from "@tiptap/core";
+import { createImageNodeView } from "./resizable-image-view";
+
+export type ImageAlign = "left" | "center" | "right";
+
+/** Image node with drag-resize handles, width, and float alignment attributes. */
+export const ResizableImage = Image.extend({
+  name: "image",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: "100%",
+        parseHTML: (element) => {
+          const fromData = element.getAttribute("data-width");
+          if (fromData) return fromData;
+          const styleWidth = element.style.width;
+          return styleWidth || "100%";
+        },
+        renderHTML: (attributes) => ({
+          "data-width": attributes.width,
+          style: `width: ${attributes.width}`,
+        }),
+      },
+      align: {
+        default: "center" as ImageAlign,
+        parseHTML: (element) => {
+          const parent = element.parentElement;
+          const fromParent = parent?.getAttribute("data-align") as ImageAlign | null;
+          return fromParent ?? ((element.getAttribute("data-align") as ImageAlign) ?? "center");
+        },
+        renderHTML: (attributes) => ({
+          "data-align": attributes.align,
+          class: `spk-editor-image spk-editor-image--${attributes.align}`,
+        }),
+      },
+    };
+  },
+
+  addNodeView() {
+    return ({ node, getPos, editor }) =>
+      createImageNodeView({
+        node,
+        getPos,
+        editor,
+        selected: false,
+      });
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const align = (HTMLAttributes["data-align"] as ImageAlign | undefined) ?? "center";
+    return [
+      "div",
+      {
+        class: `spk-editor-image-wrap spk-editor-image-wrap--${align}`,
+        "data-align": align,
+        contenteditable: "false",
+      },
+      ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)],
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.spk-editor-image-wrap img",
+      },
+      {
+        tag: "img[src]",
+      },
+    ];
+  },
+});

package/src/extensions/slash-command.test.ts

@@ -0,0 +1,45 @@
+import { Editor } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import { describe, expect, it, vi } from "vitest";
+import { createSlashCommandExtension, defaultSlashCommands } from "./slash-command";
+
+describe("defaultSlashCommands", () => {
+  it("includes common block types", () => {
+    const ids = defaultSlashCommands().map((item) => item.id);
+    expect(ids).toEqual(
+      expect.arrayContaining(["paragraph", "h1", "bullet", "task", "code-block", "table", "divider"]),
+    );
+  });
+});
+
+describe("createSlashCommandExtension", () => {
+  it("registers slash command storage and filters items by query", () => {
+    const onUpdate = vi.fn();
+    const custom = {
+      id: "custom",
+      title: "Custom block",
+      command: vi.fn(),
+    };
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        createSlashCommandExtension([...defaultSlashCommands(), custom], onUpdate),
+      ],
+      content: "<p></p>",
+    });
+
+    const storage = editor.storage.slashCommand;
+    expect(storage.items.some((item: { id: string }) => item.id === "custom")).toBe(true);
+
+    const pluginItems = storage.items.filter((item: { title: string }) =>
+      item.title.toLowerCase().includes("heading"),
+    );
+    expect(pluginItems.length).toBeGreaterThan(0);
+
+    editor.destroy();
+  });
+});