@heyramzi/ui 1.54.1 → 2.0.0

package/src/editor/image-toolbar.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { Trash, TextAlignLeft, TextAlignCenter, TextAlignRight } from "phosphor-svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	pos: { top: number; left: number };
+	onalign: (align: "left" | "center" | "right") => void;
+	ondelete: () => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { pos, onalign, ondelete }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class="image-toolbar"
+	style="top: {pos.top}px; left: {pos.left}px;"
+	role="toolbar"
+>
+	<button
+		type="button"
+		class="image-toolbar-btn"
+		title="Align left"
+		onclick={() => onalign("left")}
+	>
+		<TextAlignLeft size={14} />
+	</button>
+	<button
+		type="button"
+		class="image-toolbar-btn"
+		title="Align center"
+		onclick={() => onalign("center")}
+	>
+		<TextAlignCenter size={14} />
+	</button>
+	<button
+		type="button"
+		class="image-toolbar-btn"
+		title="Align right"
+		onclick={() => onalign("right")}
+	>
+		<TextAlignRight size={14} />
+	</button>
+	<div class="image-toolbar-divider"></div>
+	<button
+		type="button"
+		class="image-toolbar-btn destructive"
+		title="Delete image"
+		onclick={ondelete}
+	>
+		<Trash size={14} />
+	</button>
+</div>
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	/* ---- IMAGE TOOLBAR ---- */
+	.image-toolbar {
+		position: absolute;
+		z-index: 40;
+		display: flex;
+		align-items: center;
+		gap: 1px;
+		padding: 3px;
+		background: var(--color-popover);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		box-shadow: var(--elev-raised);
+		animation: slash-enter var(--duration-fast) var(--ease-out);
+	}
+
+	.image-toolbar-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--color-muted-foreground);
+		cursor: pointer;
+		transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.image-toolbar-btn:hover {
+			background: var(--color-accent);
+			color: var(--color-foreground);
+		}
+
+		.image-toolbar-btn.destructive:hover {
+			background: oklch(from var(--color-error) l c h / 0.1);
+			color: var(--color-error);
+		}
+	}
+
+	.image-toolbar-divider {
+		width: 1px;
+		height: 1rem;
+		background: var(--color-border);
+		margin: 0 2px;
+		opacity: 0.6;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.image-toolbar {
+			animation: none;
+		}
+	}
+</style>

package/src/editor/index.ts

@@ -0,0 +1,17 @@
+export { default as RichEditor } from "./editor.svelte";
+export { default as RichRenderer } from "./renderer.svelte";
+export {
+  renderTiptapContent,
+  extractHeadings,
+  extractYoutubeVideos,
+} from "./serializer.js";
+export type {
+  ExtractedHeading,
+  ExtractedYoutubeVideo,
+} from "./serializer.js";
+export { BlockIdExtension, generateBlockId } from "./block-id.js";
+
+// WHY: the markdown bridge and block-ops pull in markdown-it, so they aren't
+// re-exported here. Blog pages would bundle it. Import from their subpaths:
+//   @heyramzi/ui/editor/markdown
+//   @heyramzi/ui/editor/block-ops

package/src/editor/inline-editor.svelte

@@ -0,0 +1,261 @@
+<script lang="ts" module>
+// The tiptap side of a small in-place text field (a canvas card). It speaks ProseMirror JSON
+// and hands the host a plain `InlineEditorApi`, so no tiptap type leaks out.
+export type InlineDoc = Record<string, unknown>;
+
+export type InlineCommand = "bold" | "italic" | "strike" | "bulletList" | "orderedList" | "taskList";
+
+export type InlineEditorApi = {
+  toggle: (command: InlineCommand) => void;
+  setLink: (href: string | null) => void;
+  isActive: (name: string) => boolean;
+  linkHref: () => string;
+  hasSelection: () => boolean;
+  /** Types at the caret, replacing any selection. */
+  insertText: (text: string) => void;
+  setDoc: (doc: InlineDoc) => void;
+  getDoc: () => InlineDoc;
+  focus: () => void;
+};
+</script>
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { Editor, Extension, Node as TiptapNode, mergeAttributes, wrappingInputRule } from "@tiptap/core";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { untrack } from "svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+  doc: InlineDoc;
+  placeholder?: string;
+  class?: string;
+  /** Marks only: bold, italic, strike, code and link. No lists, so a table cell stays a line of words. */
+  inline?: boolean;
+  /** Where the click landed, so the caret opens there. Without it the caret goes to the end. */
+  at?: { x: number; y: number };
+  /** Opens with all the text selected, so the first key replaces it. */
+  selectAll?: boolean;
+  /** Opens with the text replaced by these characters and the caret after them. */
+  seed?: string;
+  onchange: (doc: InlineDoc) => void;
+  onexit: () => void;
+  onlink?: () => void;
+  onstate?: () => void;
+  onready?: (api: InlineEditorApi) => void;
+};
+
+// =========================
+// PROPS
+// =========================
+let { doc, placeholder = "", class: klass = "", inline = false, at, selectAll = false, seed, onchange, onexit, onlink, onstate, onready }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let element: HTMLDivElement | undefined = $state();
+
+// =========================
+// CONSTANTS
+// =========================
+const TaskList = TiptapNode.create({
+  name: "taskList",
+  group: "block list",
+  content: "taskItem+",
+  parseHTML: () => [{ tag: 'ul[data-type="taskList"]' }],
+  renderHTML: ({ HTMLAttributes }) => ["ul", mergeAttributes(HTMLAttributes, { "data-type": "taskList" }), 0],
+  addInputRules() {
+    return [wrappingInputRule({ find: /^\s*\[\s?\]\s$/, type: this.type })];
+  },
+});
+
+// A checklist item. Its box is a real input, so a tick is one transaction and one undo step.
+const TaskItem = TiptapNode.create({
+  name: "taskItem",
+  content: "paragraph",
+  defining: true,
+  addAttributes() {
+    return { checked: { default: false, keepOnSplit: false } };
+  },
+  parseHTML: () => [{ tag: 'li[data-type="taskItem"]', priority: 51 }],
+  renderHTML: ({ node, HTMLAttributes }) => [
+    "li",
+    mergeAttributes(HTMLAttributes, { "data-type": "taskItem", "data-checked": String(node.attrs.checked) }),
+    0,
+  ],
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.commands.splitListItem(this.name),
+      "Shift-Tab": () => this.editor.commands.liftListItem(this.name),
+    };
+  },
+  addNodeView() {
+    return ({ node, getPos, editor }) => {
+      let current = node;
+      const li = document.createElement("li");
+      li.dataset.type = "taskItem";
+      const label = document.createElement("label");
+      label.contentEditable = "false";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      label.append(input);
+      const body = document.createElement("div");
+      li.append(label, body);
+      const paint = () => {
+        li.dataset.checked = String(current.attrs.checked);
+        input.checked = current.attrs.checked === true;
+      };
+      paint();
+      input.addEventListener("change", () => {
+        const pos = getPos();
+        if (typeof pos !== "number") return;
+        editor
+          .chain()
+          .command(({ tr }) => {
+            tr.setNodeMarkup(pos, undefined, { ...current.attrs, checked: input.checked });
+            return true;
+          })
+          .run();
+      });
+      return {
+        dom: li,
+        contentDOM: body,
+        update(next) {
+          if (next.type !== current.type) return false;
+          current = next;
+          paint();
+          return true;
+        },
+      };
+    };
+  },
+});
+
+// =========================
+// EFFECTS
+// =========================
+$effect(() => {
+  if (!element) return;
+  const host = element;
+  return untrack(() => build(host));
+});
+
+function build(host: HTMLElement) {
+
+  const keys = Extension.create({
+    name: "cardKeys",
+    priority: 1000,
+    addKeyboardShortcuts() {
+      return {
+        "Mod-Shift-x": () => this.editor.commands.toggleStrike(),
+        "Mod-k": () => {
+          onlink?.();
+          return true;
+        },
+        Escape: () => {
+          onexit();
+          return true;
+        },
+        // Lists stay flat: the stored text has no nesting, so Tab does nothing.
+        Tab: () => true,
+      };
+    },
+  });
+
+  const marksOnly = untrack(() => inline);
+  const editor = new Editor({
+    element: host,
+    content: doc,
+    extensions: [
+      StarterKit.configure({
+        ...(marksOnly && { bulletList: false, orderedList: false, listItem: false, listKeymap: false }),
+        heading: false,
+        blockquote: false,
+        codeBlock: false,
+        horizontalRule: false,
+        hardBreak: false,
+        underline: false,
+        trailingNode: false,
+        link: {
+          openOnClick: false,
+          autolink: false,
+          HTMLAttributes: { target: "_blank", rel: "noopener noreferrer" },
+        },
+        ...(!marksOnly && {
+          listKeymap: {
+            listTypes: [
+              { itemName: "listItem", wrapperNames: ["bulletList", "orderedList"] },
+              { itemName: "taskItem", wrapperNames: ["taskList"] },
+            ],
+          },
+        }),
+      }),
+      ...(marksOnly ? [] : [TaskList, TaskItem]),
+      Placeholder.configure({ placeholder }),
+      keys,
+    ],
+    editorProps: {
+      attributes: { class: `rich-text ${klass}`, role: "textbox", "aria-multiline": "true" },
+      handleKeyDown: (_view, event) => {
+        // Every key typed here is the field's. Only save leaves, so no canvas shortcut fires while typing.
+        if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s")) event.stopPropagation();
+        return false;
+      },
+      handleDOMEvents: {
+        click: (_view, event) => {
+          const anchor = (event.target as HTMLElement).closest("a");
+          if (anchor && (event.metaKey || event.ctrlKey)) window.open(anchor.getAttribute("href") ?? "", "_blank", "noopener");
+          return false;
+        },
+      },
+    },
+    onUpdate: ({ editor: ed, transaction }) => {
+      if (transaction.docChanged) onchange(ed.getJSON());
+    },
+    onTransaction: () => onstate?.(),
+  });
+
+  const hit = at ? editor.view.posAtCoords({ left: at.x, top: at.y }) : null;
+  if (seed) editor.chain().focus().selectAll().insertContent({ type: "text", text: seed }).run();
+  else if (selectAll) editor.chain().focus().selectAll().run();
+  else if (hit) editor.chain().setTextSelection(hit.pos).focus().run();
+  else editor.commands.focus("end");
+
+  onready?.({
+    toggle: (command) => {
+      if (marksOnly && (command === "bulletList" || command === "orderedList" || command === "taskList")) return;
+      const chain = editor.chain().focus();
+      if (command === "bold") chain.toggleBold().run();
+      else if (command === "italic") chain.toggleItalic().run();
+      else if (command === "strike") chain.toggleStrike().run();
+      else if (command === "bulletList") chain.toggleBulletList().run();
+      else if (command === "orderedList") chain.toggleOrderedList().run();
+      else chain.toggleList("taskList", "taskItem").run();
+    },
+    setLink: (href) => {
+      const chain = editor.chain().focus().extendMarkRange("link");
+      if (href) chain.setLink({ href }).run();
+      else chain.unsetLink().run();
+    },
+    isActive: (name) => editor.isActive(name),
+    linkHref: () => String(editor.getAttributes("link").href ?? ""),
+    hasSelection: () => !editor.state.selection.empty,
+    insertText: (text) => editor.chain().focus().insertContent({ type: "text", text }).run(),
+    setDoc: (next) => editor.commands.setContent(next, { emitUpdate: false }),
+    getDoc: () => editor.getJSON(),
+    focus: () => editor.commands.focus(),
+  });
+
+  return () => editor.destroy();
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div bind:this={element} class="inline-editor contents"></div>

package/src/editor/markdown-escaping.test.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vite-plus/test";
+import { tiptapToMarkdown, markdownToTiptap } from "./markdown.js";
+import { blocks } from "./markdown-test-helpers.js";
+
+// ---- snake_case / underscore correctness ----
+// The reason the hand-rolled parser went: its regex read any single underscore
+// as italic and mangled snake_case identifiers.
+describe("snake_case and underscore safety", () => {
+  it("clic_tempo_v2 survives round-trip as plain text with no italic marks", () => {
+    const doc = markdownToTiptap("clic_tempo_v2");
+    const para = blocks(doc)[0];
+    // No node should carry an italic mark.
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+    // All content should be text nodes.
+    const allText = para.content?.every((n) => n.type === "text");
+    expect(allText).toBe(true);
+    // The serialized markdown should not wrap content in emphasis delimiters.
+    const out = tiptapToMarkdown(doc);
+    expect(out).not.toContain("*clic");
+    expect(out).not.toContain("_clic");
+  });
+
+  it("api_key_prod survives round-trip as plain text with no italic marks", () => {
+    const doc = markdownToTiptap("api_key_prod");
+    const para = blocks(doc)[0];
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+    const out = tiptapToMarkdown(doc);
+    expect(out).not.toContain("*api");
+    expect(out).not.toContain("_api");
+  });
+
+  it("snake_case_naming survives round-trip as plain text with no italic marks", () => {
+    const doc = markdownToTiptap("snake_case_naming");
+    const para = blocks(doc)[0];
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+  });
+
+  it("plain URL with underscores stays literal", () => {
+    const doc = markdownToTiptap("https://app.example.com/a_b_c");
+    const para = blocks(doc)[0];
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+    // The URL text must be preserved.
+    const fullText = para.content?.map((n) => n.text ?? "").join("") ?? "";
+    expect(fullText).toContain("a_b_c");
+  });
+
+  it("link with underscore href parses to a single link mark with the full href", () => {
+    const doc = markdownToTiptap("[docs](https://x.com/a_b_c)");
+    const para = blocks(doc)[0];
+    // Exactly one text node with a link mark.
+    const linkNode = para.content?.find((n) => n.marks?.some((m) => m.type === "link"));
+    expect(linkNode).toBeDefined();
+    const linkMark = linkNode?.marks?.find((m) => m.type === "link");
+    expect(linkMark?.attrs?.href).toBe("https://x.com/a_b_c");
+    // No italic mark anywhere.
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+    // Round-trip: serialized form preserves the full href.
+    const out = tiptapToMarkdown(doc);
+    expect(out).toContain("(https://x.com/a_b_c)");
+  });
+
+  it("inline code protects underscores from italic parsing", () => {
+    // Backtick content is never split on underscores.
+    const doc = markdownToTiptap("Use `client_id` to auth");
+    const para = blocks(doc)[0];
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+    const codeNode = para.content?.find((n) => n.marks?.some((m) => m.type === "code"));
+    expect(codeNode?.text).toBe("client_id");
+    // Round-trip preserves the backtick form.
+    const out = tiptapToMarkdown(doc);
+    expect(out).toContain("`client_id`");
+  });
+});
+
+// ---- markdown character escaping ----
+describe("markdown character escaping in serializer", () => {
+  it("literal * in text is escaped on output and round-trips correctly", () => {
+    // Build a doc with plain text that contains an asterisk.
+    const doc = {
+      type: "doc" as const,
+      content: [
+        {
+          type: "paragraph",
+          attrs: { id: "a" },
+          content: [{ type: "text", text: "price * 5" }],
+        },
+      ],
+    };
+    const out = tiptapToMarkdown(doc);
+    // Output should escape the asterisk.
+    expect(out).toContain("\\*");
+    // Parsing the output must produce plain text with the literal asterisk.
+    const doc2 = markdownToTiptap(out);
+    const fullText =
+      doc2.content[0]?.content?.map((n: { text?: string }) => n.text ?? "").join("") ?? "";
+    expect(fullText).toBe("price * 5");
+    // No bold/italic marks.
+    const hasEmphasis = doc2.content[0]?.content?.some((n: { marks?: { type: string }[] }) =>
+      n.marks?.some((m) => m.type === "bold" || m.type === "italic"),
+    );
+    expect(hasEmphasis).toBeFalsy();
+  });
+
+  it("literal _ in text is escaped on output and round-trips correctly", () => {
+    const doc = {
+      type: "doc" as const,
+      content: [
+        {
+          type: "paragraph",
+          attrs: { id: "b" },
+          content: [{ type: "text", text: "a_b" }],
+        },
+      ],
+    };
+    const out = tiptapToMarkdown(doc);
+    expect(out).toContain("\\_");
+    const doc2 = markdownToTiptap(out);
+    const fullText =
+      doc2.content[0]?.content?.map((n: { text?: string }) => n.text ?? "").join("") ?? "";
+    expect(fullText).toBe("a_b");
+  });
+
+  it("literal backtick in text is escaped on output", () => {
+    const doc = {
+      type: "doc" as const,
+      content: [
+        {
+          type: "paragraph",
+          attrs: { id: "c" },
+          content: [{ type: "text", text: "use a `tick`" }],
+        },
+      ],
+    };
+    const out = tiptapToMarkdown(doc);
+    expect(out).toContain("\\`");
+  });
+
+  it("literal [ in text is escaped on output", () => {
+    const doc = {
+      type: "doc" as const,
+      content: [
+        {
+          type: "paragraph",
+          attrs: { id: "d" },
+          content: [{ type: "text", text: "not [a link]" }],
+        },
+      ],
+    };
+    const out = tiptapToMarkdown(doc);
+    expect(out).toContain("\\[");
+  });
+});

package/src/editor/markdown-marks.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vite-plus/test";
+import { tiptapToMarkdown, markdownToTiptap } from "./markdown.js";
+import { blocks } from "./markdown-test-helpers.js";
+
+// ---- marks: bold ----
+describe("bold mark", () => {
+  it("round-trips bold text", () => {
+    const md = "Hello **world** text";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe(md);
+  });
+
+  it("produces bold mark on the right text node", () => {
+    const doc = markdownToTiptap("**bold**");
+    const para = blocks(doc)[0];
+    const boldNode = para.content?.find((n) => n.marks?.some((m) => m.type === "bold"));
+    expect(boldNode?.text).toBe("bold");
+  });
+});
+
+// ---- marks: italic ----
+describe("italic mark", () => {
+  it("parses _italic_ and serializes as *italic*", () => {
+    // WHY: italic parses from _ or *, but we always write *. Underscore emphasis
+    // has word-boundary rules that would corrupt identifiers.
+    const md = "Some _italic_ word";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe("Some *italic* word");
+  });
+
+  it("round-trips *italic* (asterisk form)", () => {
+    const md = "Some *italic* word";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe(md);
+  });
+});
+
+// ---- marks: strike ----
+describe("strike mark", () => {
+  it("round-trips strikethrough text", () => {
+    const md = "Some ~~struck~~ text";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe(md);
+  });
+});
+
+// ---- marks: inline code ----
+describe("inline code mark", () => {
+  it("round-trips inline code", () => {
+    const md = "Use `console.log()` to debug";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe(md);
+  });
+});
+
+// ---- marks: link ----
+describe("link mark", () => {
+  it("round-trips a link", () => {
+    const md = "Visit [example](https://example.com) now";
+    expect(tiptapToMarkdown(markdownToTiptap(md))).toBe(md);
+  });
+
+  it("produces link mark with href attr", () => {
+    const doc = markdownToTiptap("[click](https://example.com)");
+    const para = blocks(doc)[0];
+    const linkNode = para.content?.find((n) => n.marks?.some((m) => m.type === "link"));
+    const linkMark = linkNode?.marks?.find((m) => m.type === "link");
+    expect(linkMark?.attrs?.href).toBe("https://example.com");
+  });
+});
+
+// ---- italic parsing: both forms ----
+describe("italic parsing: both * and _ forms", () => {
+  it("*italic* parses to italic mark", () => {
+    const doc = markdownToTiptap("*italic*");
+    const para = blocks(doc)[0];
+    const italicNode = para.content?.find((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(italicNode?.text).toBe("italic");
+  });
+
+  it("_italic_ (word-boundary) parses to italic mark", () => {
+    const doc = markdownToTiptap("_italic_");
+    const para = blocks(doc)[0];
+    const italicNode = para.content?.find((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(italicNode?.text).toBe("italic");
+  });
+
+  it("intraword underscores (clic_tempo) are NOT parsed as italic", () => {
+    const doc = markdownToTiptap("clic_tempo");
+    const para = blocks(doc)[0];
+    const hasItalic = para.content?.some((n) => n.marks?.some((m) => m.type === "italic"));
+    expect(hasItalic).toBe(false);
+  });
+});

package/src/editor/markdown-test-helpers.ts

@@ -0,0 +1,13 @@
+import type { markdownToTiptap } from "./markdown.js";
+
+type Doc = ReturnType<typeof markdownToTiptap>;
+
+/** The top-level block nodes of a doc. */
+export function blocks(doc: Doc) {
+  return doc.content;
+}
+
+/** True when every top-level block carries a string id. */
+export function allHaveIds(doc: Doc) {
+  return doc.content.every((n) => typeof n.attrs?.id === "string" && n.attrs.id.length > 0);
+}