@treenity/mods 3.0.1

package/doc/markdown.ts

@@ -0,0 +1,284 @@
+// Markdown ↔ Tiptap JSON converters
+// Used by: text.ts (Tiptap→md), fs-codec decode/encode (.md files ↔ doc.page nodes)
+
+export type TiptapNode = {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: { type: string }[];
+};
+
+// ── Tiptap JSON → Markdown ──
+
+export function inlineToMd(node: TiptapNode): string {
+  if (node.text) {
+    let t = node.text;
+    if (node.marks?.some((m) => m.type === 'bold')) t = `**${t}**`;
+    if (node.marks?.some((m) => m.type === 'italic')) t = `*${t}*`;
+    if (node.marks?.some((m) => m.type === 'code')) t = `\`${t}\``;
+    return t;
+  }
+  return (node.content ?? []).map(inlineToMd).join('');
+}
+
+export function tiptapToMd(node: TiptapNode): string {
+  const children = node.content ?? [];
+
+  switch (node.type) {
+    case 'doc':
+      return children.map((c) => tiptapToMd(c)).join('\n\n');
+
+    case 'heading': {
+      const level = (node.attrs?.level as number) ?? 1;
+      return '#'.repeat(level) + ' ' + children.map(inlineToMd).join('');
+    }
+
+    case 'paragraph':
+      return children.map(inlineToMd).join('');
+
+    case 'bulletList':
+      return children.map((c) => tiptapToMd(c)).join('\n');
+
+    case 'orderedList':
+      return children.map((c, i) => `${i + 1}. ${tiptapToMd(c).replace(/^- /, '')}`).join('\n');
+
+    case 'taskList':
+      return children.map((c) => tiptapToMd(c)).join('\n');
+
+    case 'taskItem': {
+      const checked = node.attrs?.checked ? 'x' : ' ';
+      const inner = children.map((c) => tiptapToMd(c)).join('\n');
+      return `- [${checked}] ${inner}`;
+    }
+
+    case 'listItem': {
+      const inner = children.map((c) => tiptapToMd(c)).join('\n');
+      return '- ' + inner;
+    }
+
+    case 'table': {
+      const rows = children;
+      if (!rows.length) return '';
+      const mdRows = rows.map((row) => {
+        const cells = (row.content ?? []).map((cell) => {
+          const text = (cell.content ?? []).map((c) => tiptapToMd(c)).join('').replace(/\|/g, '\\|');
+          return text.trim();
+        });
+        return '| ' + cells.join(' | ') + ' |';
+      });
+      // Insert separator after header row
+      const firstRow = rows[0];
+      const colCount = (firstRow.content ?? []).length;
+      const sep = '| ' + Array(colCount).fill('---').join(' | ') + ' |';
+      return [mdRows[0], sep, ...mdRows.slice(1)].join('\n');
+    }
+
+    case 'tableRow':
+    case 'tableCell':
+    case 'tableHeader':
+      return children.map((c) => tiptapToMd(c)).join('');
+
+    case 'codeBlock': {
+      const lang = (node.attrs?.language as string) ?? '';
+      return '```' + lang + '\n' + children.map(inlineToMd).join('') + '\n```';
+    }
+
+    case 'blockquote':
+      return children.map((c) => '> ' + tiptapToMd(c)).join('\n');
+
+    case 'horizontalRule':
+      return '---';
+
+    case 'treenityBlock': {
+      const ref = node.attrs?.ref as string | null;
+      const type = node.attrs?.type as string | null;
+      if (ref) return `[Component: ${type ?? 'unknown'} at ${ref}]`;
+      return `[Component: ${type ?? 'unknown'} (inline)]`;
+    }
+
+    default:
+      return children.map((c) => tiptapToMd(c)).join('');
+  }
+}
+
+// ── Markdown → Tiptap JSON ──
+
+export function mdToTiptap(markdown: string): TiptapNode {
+  const lines = markdown.split('\n');
+  const blocks: TiptapNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Empty line → skip
+    if (!line.trim()) { i++; continue; }
+
+    // Heading
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      blocks.push({
+        type: 'heading',
+        attrs: { level: headingMatch[1].length },
+        content: parseInline(headingMatch[2]),
+      });
+      i++;
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^---+$/.test(line.trim()) || /^\*\*\*+$/.test(line.trim())) {
+      blocks.push({ type: 'horizontalRule' });
+      i++;
+      continue;
+    }
+
+    // Code block
+    if (line.trimStart().startsWith('```')) {
+      const lang = line.trim().slice(3).trim();
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing ```
+      blocks.push({
+        type: 'codeBlock',
+        attrs: lang ? { language: lang } : {},
+        content: [{ type: 'text', text: codeLines.join('\n') }],
+      });
+      continue;
+    }
+
+    // Task list: - [ ] or - [x]
+    if (/^[-*]\s\[[x ]\]\s/i.test(line.trimStart())) {
+      const items: TiptapNode[] = [];
+      while (i < lines.length && /^[-*]\s\[[x ]\]\s/i.test(lines[i].trimStart())) {
+        const m = lines[i].trimStart().match(/^[-*]\s\[([x ])\]\s+(.*)/i)!;
+        const checked = m[1].toLowerCase() === 'x';
+        items.push({
+          type: 'taskItem',
+          attrs: { checked },
+          content: [{ type: 'paragraph', content: parseInline(m[2]) }],
+        });
+        i++;
+      }
+      blocks.push({ type: 'taskList', content: items });
+      continue;
+    }
+
+    // Bullet list
+    if (/^[-*]\s/.test(line.trimStart())) {
+      const items: TiptapNode[] = [];
+      while (i < lines.length && /^[-*]\s/.test(lines[i].trimStart()) && !/^[-*]\s\[[x ]\]\s/i.test(lines[i].trimStart())) {
+        const text = lines[i].trimStart().replace(/^[-*]\s+/, '');
+        items.push({
+          type: 'listItem',
+          content: [{ type: 'paragraph', content: parseInline(text) }],
+        });
+        i++;
+      }
+      if (items.length) blocks.push({ type: 'bulletList', content: items });
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+\.\s/.test(line.trimStart())) {
+      const items: TiptapNode[] = [];
+      while (i < lines.length && /^\d+\.\s/.test(lines[i].trimStart())) {
+        const text = lines[i].trimStart().replace(/^\d+\.\s+/, '');
+        items.push({
+          type: 'listItem',
+          content: [{ type: 'paragraph', content: parseInline(text) }],
+        });
+        i++;
+      }
+      blocks.push({ type: 'orderedList', content: items });
+      continue;
+    }
+
+    // Blockquote
+    if (line.trimStart().startsWith('> ')) {
+      const quoteLines: string[] = [];
+      while (i < lines.length && lines[i].trimStart().startsWith('> ')) {
+        quoteLines.push(lines[i].trimStart().slice(2));
+        i++;
+      }
+      blocks.push({
+        type: 'blockquote',
+        content: [{ type: 'paragraph', content: parseInline(quoteLines.join(' ')) }],
+      });
+      continue;
+    }
+
+    // Table: lines starting with |
+    if (line.trimStart().startsWith('|')) {
+      const tableLines: string[] = [];
+      while (i < lines.length && lines[i].trimStart().startsWith('|')) {
+        tableLines.push(lines[i].trim());
+        i++;
+      }
+      // Filter out separator rows (| --- | --- |)
+      const dataRows = tableLines.filter((r) => !/^\|[-\s|:]+\|$/.test(r));
+      if (dataRows.length) {
+        const tiptapRows: TiptapNode[] = dataRows.map((row, rowIdx) => {
+          const cells = row.replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+          const cellType = rowIdx === 0 ? 'tableHeader' : 'tableCell';
+          return {
+            type: 'tableRow',
+            content: cells.map((cellText) => ({
+              type: cellType,
+              attrs: { colspan: 1, rowspan: 1 },
+              content: [{ type: 'paragraph', content: parseInline(cellText) }],
+            })),
+          };
+        });
+        blocks.push({ type: 'table', content: tiptapRows });
+      }
+      continue;
+    }
+
+    // Paragraph (default)
+    const paraLines: string[] = [];
+    while (i < lines.length && lines[i].trim() && !lines[i].match(/^#{1,6}\s/) && !lines[i].match(/^[-*]\s/) && !lines[i].match(/^\d+\.\s/) && !lines[i].trimStart().startsWith('```') && !lines[i].trimStart().startsWith('> ') && !lines[i].trimStart().startsWith('|') && !/^---+$/.test(lines[i].trim())) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length) {
+      blocks.push({ type: 'paragraph', content: parseInline(paraLines.join(' ')) });
+    }
+  }
+
+  return { type: 'doc', content: blocks.length ? blocks : [{ type: 'paragraph' }] };
+}
+
+function parseInline(text: string): TiptapNode[] {
+  const nodes: TiptapNode[] = [];
+  // Simple regex-based inline parser: **bold**, *italic*, `code`
+  const re = /(\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+?)`)/g;
+  let last = 0;
+
+  for (const match of text.matchAll(re)) {
+    if (match.index! > last) {
+      nodes.push({ type: 'text', text: text.slice(last, match.index!) });
+    }
+
+    if (match[2]) {
+      nodes.push({ type: 'text', text: match[2], marks: [{ type: 'bold' }] });
+    } else if (match[3]) {
+      nodes.push({ type: 'text', text: match[3], marks: [{ type: 'italic' }] });
+    } else if (match[4]) {
+      nodes.push({ type: 'text', text: match[4], marks: [{ type: 'code' }] });
+    }
+
+    last = match.index! + match[0].length;
+  }
+
+  if (last < text.length) {
+    nodes.push({ type: 'text', text: text.slice(last) });
+  }
+
+  return nodes.length ? nodes : [{ type: 'text', text: text || '' }];
+}

package/doc/prefab.ts

@@ -0,0 +1,26 @@
+import { type NodeData } from '@treenity/core';
+import { registerPrefab } from '@treenity/core/mod';
+import { mdToTiptap } from './markdown';
+
+// FS mount-point for a docs directory
+// Setup accepts { root: string } to set the filesystem path
+registerPrefab('doc', 'library', [
+  { $path: '.', $type: 'mount-point', mount: { $type: 't.mount.fs' }, root: '' },
+] as NodeData[], (nodes, params) => {
+  const p = params as { root?: string } | undefined;
+  if (!p?.root) return nodes;
+  return nodes.map(n => n.$path === '.' ? { ...n, root: p.root } : n);
+});
+
+// Sample doc.page node
+const welcomeMd = `A rich document with **bold**, *italic*, and \`code\`.
+
+- Stored as Tiptap JSON
+- Editable with WYSIWYG toolbar
+- Supports embedded Treenity components via /slash commands`;
+
+const welcomeContent = JSON.stringify(mdToTiptap(welcomeMd));
+
+registerPrefab('doc', 'demo', [
+  { $path: 'welcome', $type: 'doc.page', title: 'Welcome to Docs', content: welcomeContent },
+] as NodeData[]);

package/doc/renderers.tsx

@@ -0,0 +1,126 @@
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+import { Table } from '@tiptap/extension-table';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
+import TaskItem from '@tiptap/extension-task-item';
+import TaskList from '@tiptap/extension-task-list';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { register } from '@treenity/core';
+import { common, createLowlight } from 'lowlight';
+import { useCallback, useEffect, useRef } from 'react';
+import { SlashCommand } from './slash-command';
+import { Toolbar } from './toolbar';
+import { TreenityBlock } from './treenity-block';
+
+const lowlight = createLowlight(common);
+
+type BlockProps = { value: any; onChange?: (data: any) => void };
+
+function DocPageView({ value, onChange }: BlockProps) {
+  const suppressRef = useRef(false);
+  const contentRef = useRef(value.content);
+
+  const handleUpdate = useCallback(({ editor }: any) => {
+    if (suppressRef.current) return;
+    const json = JSON.stringify(editor.getJSON());
+    contentRef.current = json;
+    onChange?.({ ...value, content: json });
+  }, [onChange, value]);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ codeBlock: false }),
+      CodeBlockLowlight.configure({ lowlight }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      TreenityBlock,
+      SlashCommand,
+    ],
+    content: parseContent(value.content),
+    editable: !!onChange,
+    onUpdate: handleUpdate,
+  });
+
+  // Sync editor content when node changes (navigating between docs)
+  useEffect(() => {
+    if (!editor || value.content === contentRef.current) return;
+    contentRef.current = value.content;
+    suppressRef.current = true;
+    editor.commands.setContent(parseContent(value.content));
+    suppressRef.current = false;
+  }, [editor, value.content]);
+
+  // Sync editable state
+  useEffect(() => {
+    if (editor && editor.isEditable !== !!onChange) {
+      editor.setEditable(!!onChange);
+    }
+  }, [editor, onChange]);
+
+  if (!editor) return null;
+
+  return (
+    <div className="max-w-3xl mx-auto py-6 px-4">
+      {/* Title */}
+      <div className="mb-5">
+        {onChange ? (
+          <input
+            type="text"
+            value={value.title || ''}
+            onChange={(e) => onChange({ ...value, title: e.target.value })}
+            placeholder="Untitled"
+            className="w-full text-2xl font-semibold tracking-tight bg-transparent border-none outline-none text-[var(--text)] placeholder:text-[var(--text-3)]"
+          />
+        ) : (
+          value.title && <h1 className="text-2xl font-semibold tracking-tight text-[var(--text)]">{value.title}</h1>
+        )}
+      </div>
+
+      {/* Toolbar — only in edit mode */}
+      {onChange && <Toolbar editor={editor} />}
+
+      {/* Editor content */}
+      <div
+        className={`min-h-[300px] ${onChange ? 'pt-4' : ''}`}
+        onDrop={(e) => {
+          if (!editor || !onChange) return;
+          const path = e.dataTransfer.getData('application/treenity-path');
+          if (!path) return;
+          e.preventDefault();
+          e.stopPropagation();
+          editor.chain().focus().insertContent({
+            type: 'treenityBlock',
+            attrs: { ref: path, type: null, props: {} },
+          }).run();
+        }}
+        onDragOver={(e) => {
+          if (e.dataTransfer.types.includes('application/treenity-path')) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }
+        }}
+      >
+        <EditorContent editor={editor} />
+      </div>
+    </div>
+  );
+}
+
+function parseContent(content: string | undefined): any {
+  if (!content) return undefined;
+  try {
+    return JSON.parse(content);
+  } catch {
+    return { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: content }] }] };
+  }
+}
+
+export function registerDocViews() {
+  register('doc.page', 'react', DocPageView);
+}

package/doc/seed.ts

@@ -0,0 +1,10 @@
+import { type NodeData } from '@treenity/core';
+import { registerPrefab } from '@treenity/core/mod';
+import { join } from 'node:path';
+
+registerPrefab('doc', 'seed', [
+  { $path: 'docs', $type: 'mount-point', mount: { $type: 't.mount.fs' }, root: '' },
+] as NodeData[], (nodes) => {
+  const root = process.env.DOCS_ROOT || join(process.cwd(), 'docs');
+  return nodes.map(n => n.$path === 'docs' ? { ...n, root } : n);
+}, { tier: 'core' });

package/doc/server.ts

@@ -0,0 +1,5 @@
+import './types';
+import './text';
+import './fs-codec';
+import './prefab';
+import './seed';

package/doc/slash-command.ts

@@ -0,0 +1,136 @@
+import { Extension } from '@tiptap/core';
+import { ReactRenderer } from '@tiptap/react';
+import Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';
+import { SlashMenu, type SlashMenuItem } from './slash-menu';
+
+const defaultItems: SlashMenuItem[] = [
+  {
+    title: 'Heading 1',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 1 }).run(),
+  },
+  {
+    title: 'Heading 2',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 2 }).run(),
+  },
+  {
+    title: 'Heading 3',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleHeading({ level: 3 }).run(),
+  },
+  {
+    title: 'Bullet List',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBulletList().run(),
+  },
+  {
+    title: 'Ordered List',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleOrderedList().run(),
+  },
+  {
+    title: 'Code Block',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+  },
+  {
+    title: 'Quote',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
+  },
+  {
+    title: 'Divider',
+    group: 'Text',
+    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+  },
+  {
+    title: 'Component',
+    group: 'Treenity',
+    command: () => {},
+    pickComponent: true,
+  },
+];
+
+export const SlashCommand = Extension.create({
+  name: 'slashCommand',
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: '/',
+        command: ({ editor, range, props }: any) => {
+          props.command({ editor, range });
+        },
+      } as Partial<SuggestionOptions>,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+        items: ({ query }: { query: string }) =>
+          defaultItems.filter((item) =>
+            item.title.toLowerCase().includes(query.toLowerCase()),
+          ),
+        render: () => {
+          let component: ReactRenderer;
+
+          return {
+            onStart: (props: any) => {
+              component = new ReactRenderer(SlashMenu, {
+                props,
+                editor: props.editor,
+              });
+              // ReactRenderer.element is a detached div — must add to DOM
+              document.body.appendChild(component.element);
+              positionElement(component.element, props.clientRect);
+            },
+
+            onUpdate: (props: any) => {
+              component.updateProps(props);
+              positionElement(component.element, props.clientRect);
+            },
+
+            onKeyDown: (props: any) => {
+              if (props.event.key === 'Escape') {
+                component?.element?.remove();
+                component?.destroy();
+                return true;
+              }
+              return (component?.ref as any)?.onKeyDown?.(props) ?? false;
+            },
+
+            onExit: () => {
+              component?.element?.remove();
+              component?.destroy();
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
+
+function positionElement(el: HTMLElement, clientRect: (() => DOMRect | null) | null) {
+  const rect = clientRect?.();
+  if (!rect) return;
+
+  const menuH = 300; // approximate max height
+  const menuW = 210;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const left = Math.min(rect.left, vw - menuW - 8);
+  const fitsBelow = rect.bottom + 4 + menuH < vh;
+  const top = fitsBelow ? rect.bottom + 4 : rect.top - menuH - 4;
+
+  Object.assign(el.style, {
+    position: 'fixed',
+    left: `${Math.max(4, left)}px`,
+    top: `${Math.max(4, top)}px`,
+    zIndex: '9999',
+  });
+}

package/doc/slash-menu.tsx

@@ -0,0 +1,91 @@
+import { MiniTree } from '@treenity/react/mods/editor-ui/form-fields';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+
+export type SlashMenuItem = {
+  title: string;
+  group: string;
+  command: (props: any) => void;
+  pickComponent?: boolean;
+};
+
+type SlashMenuProps = {
+  items: SlashMenuItem[];
+  command: (item: any) => void;
+  editor: any;
+  range: any;
+};
+
+export const SlashMenu = forwardRef<any, SlashMenuProps>(({ items, command, editor, range }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showPicker, setShowPicker] = useState(false);
+
+  useEffect(() => setSelectedIndex(0), [items]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setSelectedIndex((i) => (i + 1) % items.length);
+        return true;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setSelectedIndex((i) => (i - 1 + items.length) % items.length);
+        return true;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        selectItem(selectedIndex);
+        return true;
+      }
+      return false;
+    },
+  }));
+
+  const selectItem = (index: number) => {
+    const item = items[index];
+    if (!item) return;
+    if (item.pickComponent) {
+      setShowPicker(true);
+      return;
+    }
+    command(item);
+  };
+
+  const handlePickNode = (path: string) => {
+    setShowPicker(false);
+    editor.chain().focus().deleteRange(range).insertContent({
+      type: 'treenityBlock',
+      attrs: { ref: path, type: null, props: {} },
+    }).run();
+  };
+
+  if (showPicker) {
+    return <MiniTree onSelect={(path) => { handlePickNode(path); setShowPicker(false); }} />;
+  }
+
+  if (!items.length) {
+    return (
+      <div className="slash-menu">
+        <div className="slash-menu-empty">No commands</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="slash-menu">
+      {items.map((item, i) => (
+        <button
+          key={item.title}
+          onMouseDown={(e) => { e.preventDefault(); selectItem(i); }}
+          className={`slash-menu-item${i === selectedIndex ? ' selected' : ''}`}
+        >
+          <span className="slash-menu-title">{item.title}</span>
+          <span className="slash-menu-group">{item.group}</span>
+        </button>
+      ))}
+    </div>
+  );
+});
+
+SlashMenu.displayName = 'SlashMenu';