@nikala-ui/core 0.11.0 → 0.12.1

package/src/registry/components/ui/rich-text-editor/markdown.ts

@@ -0,0 +1,170 @@
+/**
+ * Clean bidirectional HTML <-> Markdown serializer for Nikala Rich Text Editor.
+ */
+
+export function htmlToMarkdown(html: string): string {
+  if (!html) return "";
+
+  let md = html;
+
+  // Replace headings
+  md = md.replace(/<h1[^>]*>(.*?)<\/h1>/gi, "# $1\n\n");
+  md = md.replace(/<h2[^>]*>(.*?)<\/h2>/gi, "## $1\n\n");
+  md = md.replace(/<h3[^>]*>(.*?)<\/h3>/gi, "### $1\n\n");
+  md = md.replace(/<h4[^>]*>(.*?)<\/h4>/gi, "#### $1\n\n");
+
+  // Replace blockquotes
+  md = md.replace(/<blockquote[^>]*>[\s\S]*?<p>(.*?)<\/p>[\s\S]*?<\/blockquote>/gi, "> $1\n\n");
+  md = md.replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gi, "> $1\n\n");
+
+  // Replace code blocks
+  md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, "```\n$1\n```\n\n");
+
+  // Replace inline formatting
+  md = md.replace(/<strong>(.*?)<\/strong>/gi, "**$1**");
+  md = md.replace(/<b>(.*?)<\/b>/gi, "**$1**");
+  md = md.replace(/<em>(.*?)<\/em>/gi, "*$1*");
+  md = md.replace(/<i>(.*?)<\/i>/gi, "*$1*");
+  md = md.replace(/<s>(.*?)<\/s>/gi, "~~$1~~");
+  md = md.replace(/<del>(.*?)<\/del>/gi, "~~$1~~");
+  md = md.replace(/<code>(.*?)<\/code>/gi, "`$1`");
+  md = md.replace(/<mark[^>]*>(.*?)<\/mark>/gi, "==$1==");
+
+  // Replace task list items
+  md = md.replace(/<li[^>]*data-checked="true"[^>]*>[\s\S]*?<label>[\s\S]*?<\/label>[\s\S]*?<div>[\s\S]*?<p>(.*?)<\/p>[\s\S]*?<\/div><\/li>/gi, "- [x] $1\n");
+  md = md.replace(/<li[^>]*data-checked="false"[^>]*>[\s\S]*?<label>[\s\S]*?<\/label>[\s\S]*?<div>[\s\S]*?<p>(.*?)<\/p>[\s\S]*?<\/div><\/li>/gi, "- [ ] $1\n");
+  md = md.replace(/<li[^>]*data-checked="true"[^>]*>[\s\S]*?<label>[\s\S]*?<\/label>[\s\S]*?<div>(.*?)<\/div><\/li>/gi, "- [x] $1\n");
+  md = md.replace(/<li[^>]*data-checked="false"[^>]*>[\s\S]*?<label>[\s\S]*?<\/label>[\s\S]*?<div>(.*?)<\/div><\/li>/gi, "- [ ] $1\n");
+  md = md.replace(/<li[^>]*data-checked="true"[^>]*>([\s\S]*?)<\/li>/gi, "- [x] $1\n");
+  md = md.replace(/<li[^>]*data-checked="false"[^>]*>([\s\S]*?)<\/li>/gi, "- [ ] $1\n");
+
+  // Replace ordered list items inside <ol>
+  md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, (match, listContent) => {
+    let index = 1;
+    return listContent.replace(/<li[^>]*>[\s\S]*?<p>(.*?)<\/p>[\s\S]*?<\/li>/gi, () => `${index++}. $1\n`)
+      .replace(/<li[^>]*>(.*?)<\/li>/gi, () => `${index++}. $1\n`) + "\n";
+  });
+
+  // Replace unordered list items inside <ul>
+  md = md.replace(/<ul(?:(?!data-type="taskList")[^>])*>([\s\S]*?)<\/ul>/gi, (match, listContent) => {
+    return listContent.replace(/<li[^>]*>[\s\S]*?<p>(.*?)<\/p>[\s\S]*?<\/li>/gi, "- $1\n")
+      .replace(/<li[^>]*>(.*?)<\/li>/gi, "- $1\n") + "\n";
+  });
+
+  // Replace links
+  md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, "[$2]($1)");
+
+  // Replace images
+  md = md.replace(/<img[^>]*src="([^"]*)"[^>]*alt="([^"]*)"[^>]*>/gi, "![$2]($1)");
+  md = md.replace(/<img[^>]*src="([^"]*)"[^>]*>/gi, "![]($1)");
+
+  // Replace paragraphs and line breaks
+  md = md.replace(/<p[^>]*>(.*?)<\/p>/gi, "$1\n\n");
+  md = md.replace(/<br\s*[\/]?>/gi, "\n");
+  md = md.replace(/<hr\s*[\/]?>/gi, "---\n\n");
+
+  // Strip remaining HTML tags securely (iterative loop prevents bypasses)
+  let prev: string;
+  do {
+    prev = md;
+    md = md.replace(/<[^>]*>/g, "");
+  } while (md !== prev);
+
+  // Clean multiple extra line breaks
+  md = md.replace(/\n{3,}/g, "\n\n").trim();
+
+  return md;
+}
+
+export function markdownToHtml(md: string): string {
+  if (!md) return "";
+
+  let processed = md;
+
+  // Headings
+  processed = processed.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+  processed = processed.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+  processed = processed.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+
+  // Code blocks
+  processed = processed.replace(/```([\s\S]*?)```/gim, "<pre><code>$1</code></pre>");
+
+  // Blockquotes
+  processed = processed.replace(/^\> (.*$)/gim, "<blockquote><p>$1</p></blockquote>");
+
+  // Bold, Italic, Strikethrough, Inline Code, Highlight
+  processed = processed.replace(/\*\*(.*?)\*\*/gim, "<strong>$1</strong>");
+  processed = processed.replace(/\*(.*?)\*/gim, "<em>$1</em>");
+  processed = processed.replace(/~~(.*?)~~/gim, "<s>$1</s>");
+  processed = processed.replace(/`([^`]+)`/gim, "<code>$1</code>");
+  processed = processed.replace(/==([^=]+)==/gim, "<mark>$1</mark>");
+
+  // Links & Images
+  processed = processed.replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" />');
+  processed = processed.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2" target="_blank">$1</a>');
+
+  // Group consecutive Task Checklist items (- [x] or - [ ])
+  processed = processed.replace(/(?:^|\n)((?:- \[[ xX]\] .*(?:\n|$))+)/g, (match, block) => {
+    const items = block
+      .trim()
+      .split("\n")
+      .filter(Boolean)
+      .map((line: string) => {
+        const checked = /^- \[[xX]\]/.test(line.trim());
+        const text = line.trim().replace(/^- \[[ xX]\]\s*/, "");
+        return `<li data-checked="${checked}" data-type="taskItem"><label><input type="checkbox"${checked ? ' checked="checked"' : ""}><span></span></label><div><p>${text}</p></div></li>`;
+      })
+      .join("");
+    return `\n<ul data-type="taskList">${items}</ul>\n`;
+  });
+
+  // Group consecutive Bullet List items (- or *)
+  processed = processed.replace(/(?:^|\n)((?:(?:-|\*) (?!\[[ xX]\]).*(?:\n|$))+)/g, (match, block) => {
+    const items = block
+      .trim()
+      .split("\n")
+      .filter(Boolean)
+      .map((line: string) => {
+        const text = line.trim().replace(/^(?:-|\*)\s*/, "");
+        return `<li><p>${text}</p></li>`;
+      })
+      .join("");
+    return `\n<ul>${items}</ul>\n`;
+  });
+
+  // Group consecutive Numbered List items (1. 2. 3.)
+  processed = processed.replace(/(?:^|\n)((?:^\d+\. .*(?:\n|$))+)/gm, (match, block) => {
+    const items = block
+      .trim()
+      .split("\n")
+      .filter(Boolean)
+      .map((line: string) => {
+        const text = line.trim().replace(/^\d+\.\s*/, "");
+        return `<li><p>${text}</p></li>`;
+      })
+      .join("");
+    return `\n<ol>${items}</ol>\n`;
+  });
+
+  // Paragraphs for remaining text blocks
+  const finalHtml = processed
+    .split(/\n\n+/)
+    .map((block) => {
+      const trimmed = block.trim();
+      if (!trimmed) return "";
+      if (
+        trimmed.startsWith("<h") ||
+        trimmed.startsWith("<pre") ||
+        trimmed.startsWith("<blockquote") ||
+        trimmed.startsWith("<ul") ||
+        trimmed.startsWith("<ol") ||
+        trimmed.startsWith("<table")
+      ) {
+        return trimmed;
+      }
+      return `<p>${trimmed.replace(/\n/g, "<br />")}</p>`;
+    })
+    .join("\n");
+
+  return finalHtml;
+}

package/src/registry/components/ui/rich-text-editor/slash-command.tsx

@@ -0,0 +1,301 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  Show,
+  For,
+  type Component,
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { useRichTextEditor } from "./editor.js";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  ListTodo,
+  Quote,
+  Table as TableIcon,
+  Sparkles,
+  Minus,
+} from "lucide-solid";
+
+export interface SlashCommandItem {
+  title: string;
+  description: string;
+  icon: Component<{ class?: string }>;
+  action: () => void;
+}
+
+export const EditorSlashCommand: Component = () => {
+  const { actions, container, isFullscreen } = useRichTextEditor();
+  const [isOpen, setIsOpen] = createSignal(false);
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [query, setQuery] = createSignal("");
+  const [position, setPosition] = createSignal({ top: 0, left: 0 });
+
+  const itemRefs: HTMLElement[] = [];
+
+  const items: SlashCommandItem[] = [
+    {
+      title: "Heading 1",
+      description: "Big section heading",
+      icon: Heading1,
+      action: () => actions.setHeading(1),
+    },
+    {
+      title: "Heading 2",
+      description: "Medium section heading",
+      icon: Heading2,
+      action: () => actions.setHeading(2),
+    },
+    {
+      title: "Heading 3",
+      description: "Small section heading",
+      icon: Heading3,
+      action: () => actions.setHeading(3),
+    },
+    {
+      title: "Bullet List",
+      description: "Create a simple bulleted list",
+      icon: List,
+      action: actions.toggleBulletList,
+    },
+    {
+      title: "Numbered List",
+      description: "Create a numbered sequence",
+      icon: ListOrdered,
+      action: actions.toggleOrderedList,
+    },
+    {
+      title: "Task Checklist",
+      description: "Track tasks with interactive checkboxes",
+      icon: ListTodo,
+      action: actions.toggleTaskList,
+    },
+    {
+      title: "Blockquote",
+      description: "Capture a notable quote or callout",
+      icon: Quote,
+      action: actions.toggleBlockquote,
+    },
+    {
+      title: "Code Block",
+      description: "Display code with monospace font",
+      icon: Sparkles,
+      action: actions.toggleCodeBlock,
+    },
+    {
+      title: "Table",
+      description: "Insert a 3x3 editable data table",
+      icon: TableIcon,
+      action: () => actions.insertTable({ rows: 3, cols: 3, withHeaderRow: true }),
+    },
+    {
+      title: "Divider",
+      description: "Separate content with a horizontal line",
+      icon: Minus,
+      action: actions.insertHorizontalRule,
+    },
+  ];
+
+  const filteredItems = () =>
+    items.filter(
+      (item) =>
+        item.title.toLowerCase().includes(query().toLowerCase()) ||
+        item.description.toLowerCase().includes(query().toLowerCase())
+    );
+
+  // Auto-scroll active item into view
+  createEffect(() => {
+    if (!isOpen()) return;
+    const idx = selectedIndex();
+    const el = itemRefs[idx];
+    if (el) {
+      el.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  });
+
+  const executeItem = (item: SlashCommandItem) => {
+    const ed = actions.editor();
+    if (ed) {
+      const { from } = ed.state.selection;
+      const textBefore = ed.state.doc.textBetween(Math.max(0, from - 20), from, "\n");
+      const slashIndex = textBefore.lastIndexOf("/");
+      if (slashIndex !== -1) {
+        const deleteCount = textBefore.length - slashIndex;
+        ed.commands.deleteRange({ from: from - deleteCount, to: from });
+      }
+    }
+    item.action();
+    setIsOpen(false);
+    setQuery("");
+  };
+
+  createEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleEditorUpdate = () => {
+      const ed = actions.editor();
+      const containerEl = container();
+      if (!ed || !ed.isFocused || !ed.isEditable) {
+        setIsOpen(false);
+        return;
+      }
+
+      const { from, empty } = ed.state.selection;
+      if (!empty) {
+        setIsOpen(false);
+        return;
+      }
+
+      const textBefore = ed.state.doc.textBetween(Math.max(0, from - 25), from, "\n");
+      const match = textBefore.match(/(?:^|\s)\/([a-zA-Z0-9]*)$/);
+
+      if (match) {
+        const matchedQuery = match[1] || "";
+        setQuery(matchedQuery);
+        setSelectedIndex(0);
+
+        try {
+          const coords = ed.view.coordsAtPos(from);
+          const menuHeight = 280;
+          const menuWidth = 288;
+
+          if (isFullscreen() && containerEl) {
+            // Fullscreen mode: position relative to container
+            const containerRect = containerEl.getBoundingClientRect();
+            const spaceBelow = containerRect.bottom - coords.bottom;
+            let top: number;
+
+            if (spaceBelow < menuHeight && coords.top - containerRect.top > menuHeight) {
+              // Flip upwards if not enough room below
+              top = coords.top - containerRect.top - menuHeight - 6;
+            } else {
+              // Open downwards
+              top = coords.bottom - containerRect.top + 6;
+            }
+
+            const left = Math.max(12, Math.min(containerRect.width - menuWidth - 12, coords.left - containerRect.left));
+
+            setPosition({ top, left });
+            setIsOpen(true);
+          } else {
+            // Normal mode: viewport fixed coordinates to prevent any container overflow clipping
+            const spaceBelow = window.innerHeight - coords.bottom;
+            let top: number;
+
+            if (spaceBelow < menuHeight && coords.top > menuHeight) {
+              // Flip upwards
+              top = coords.top - menuHeight - 6;
+            } else {
+              // Open downwards
+              top = coords.bottom + 6;
+            }
+
+            const left = Math.max(12, Math.min(window.innerWidth - menuWidth - 12, coords.left));
+
+            setPosition({ top, left });
+            setIsOpen(true);
+          }
+        } catch {
+          setIsOpen(false);
+        }
+      } else {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen()) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredItems().length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredItems().length) % filteredItems().length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const current = filteredItems()[selectedIndex()];
+        if (current) executeItem(current);
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    document.addEventListener("selectionchange", handleEditorUpdate);
+    document.addEventListener("input", handleEditorUpdate);
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("selectionchange", handleEditorUpdate);
+      document.removeEventListener("input", handleEditorUpdate);
+    });
+  });
+
+  const portalTarget = () => {
+    if (typeof document === "undefined") return undefined;
+    return isFullscreen() ? container() || document.body : document.body;
+  };
+
+  return (
+    <Show when={isOpen() && filteredItems().length > 0}>
+      <Portal mount={portalTarget()}>
+        <div
+          class={`${
+            isFullscreen() ? "absolute" : "fixed"
+          } z-[999999] w-72 rounded-lg border border-border bg-popover text-popover-foreground shadow-2xl p-1.5 max-h-72 overflow-y-auto animate-in fade-in zoom-in-95 pointer-events-auto`}
+          style={{
+            top: `${position().top}px`,
+            left: `${position().left}px`,
+          }}
+        >
+          <div class="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider border-b border-border/60 mb-1">
+            Slash Commands
+          </div>
+          <For each={filteredItems()}>
+            {(item, index) => {
+              const Icon = item.icon;
+              const isSelected = () => index() === selectedIndex();
+              return (
+                <button
+                  ref={(el) => (itemRefs[index()] = el)}
+                  type="button"
+                  class={`flex items-center justify-between w-full px-2 py-2 rounded-md text-left text-xs transition-colors cursor-pointer ${
+                    isSelected()
+                      ? "bg-accent/80 text-accent-foreground font-semibold ring-1 ring-border shadow-xs"
+                      : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                  }`}
+                  onClick={() => executeItem(item)}
+                  onMouseEnter={() => setSelectedIndex(index())}
+                >
+                  <div class="flex items-center gap-2.5 truncate">
+                    <div
+                      class={`flex items-center justify-center h-6 w-6 rounded-md shrink-0 border ${
+                        isSelected()
+                          ? "bg-background text-foreground border-border shadow-2xs"
+                          : "bg-muted text-muted-foreground border-transparent"
+                      }`}
+                    >
+                      <Icon class="h-3.5 w-3.5" />
+                    </div>
+                    <div class="flex flex-col truncate">
+                      <span class="text-foreground text-xs">{item.title}</span>
+                      <span class="text-[10px] text-muted-foreground truncate">{item.description}</span>
+                    </div>
+                  </div>
+                  <Show when={isSelected()}>
+                    <span class="text-[10px] text-muted-foreground font-mono ml-1">↵</span>
+                  </Show>
+                </button>
+              );
+            }}
+          </For>
+        </div>
+      </Portal>
+    </Show>
+  );
+};

package/src/registry/components/ui/rich-text-editor/table-controls.tsx

@@ -0,0 +1,68 @@
+import { Show, type Component } from "solid-js";
+import { useRichTextEditor } from "./editor.js";
+import { Plus, Minus, Trash2 } from "lucide-solid";
+
+export const EditorTableControls: Component = () => {
+  const { actions, showTableMenu, setShowTableMenu } = useRichTextEditor();
+
+  return (
+    <Show when={showTableMenu()}>
+      <div class="absolute top-full left-0 mt-1 z-20 flex flex-col gap-1 p-2 bg-popover text-popover-foreground border border-border rounded-md shadow-md min-w-[160px]">
+        <Show
+          when={actions.isActive("table")}
+          fallback={
+            <button
+              type="button"
+              class="flex items-center gap-2 px-2 py-1.5 text-xs text-left rounded hover:bg-muted cursor-pointer transition-colors"
+              onClick={() => {
+                actions.insertTable({ rows: 3, cols: 3, withHeaderRow: true });
+                setShowTableMenu(false);
+              }}
+            >
+              <Plus class="h-3.5 w-3.5" /> Insert 3x3 Table
+            </button>
+          }
+        >
+          <button
+            type="button"
+            class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded hover:bg-muted cursor-pointer transition-colors"
+            onClick={() => actions.editor()?.chain().focus().addRowAfter().run()}
+          >
+            <Plus class="h-3.5 w-3.5" /> Add Row Below
+          </button>
+          <button
+            type="button"
+            class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded hover:bg-muted cursor-pointer transition-colors"
+            onClick={() => actions.editor()?.chain().focus().addColumnAfter().run()}
+          >
+            <Plus class="h-3.5 w-3.5" /> Add Column Right
+          </button>
+          <button
+            type="button"
+            class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded hover:bg-muted cursor-pointer text-destructive transition-colors"
+            onClick={() => actions.editor()?.chain().focus().deleteRow().run()}
+          >
+            <Minus class="h-3.5 w-3.5" /> Delete Row
+          </button>
+          <button
+            type="button"
+            class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded hover:bg-muted cursor-pointer text-destructive transition-colors"
+            onClick={() => actions.editor()?.chain().focus().deleteColumn().run()}
+          >
+            <Minus class="h-3.5 w-3.5" /> Delete Column
+          </button>
+          <button
+            type="button"
+            class="flex items-center gap-2 px-2 py-1 text-xs text-left rounded hover:bg-muted cursor-pointer text-destructive font-medium border-t border-border mt-1 pt-1.5 transition-colors"
+            onClick={() => {
+              actions.editor()?.chain().focus().deleteTable().run();
+              setShowTableMenu(false);
+            }}
+          >
+            <Trash2 class="h-3.5 w-3.5" /> Delete Table
+          </button>
+        </Show>
+      </div>
+    </Show>
+  );
+};