@xenosystem/blocks 0.20.0 → 0.21.0

package/dist/chunk-5VOA3OSG.js

@@ -0,0 +1,688 @@
+import {
+  DOCUMENT_MARK_TYPES,
+  DOCUMENT_NODE_TYPES,
+  SAFE_IMAGE,
+  SAFE_LINK,
+  XdocError,
+  emptyContent,
+  nodeTypesIn,
+  pageLinksIn,
+  parseXdoc,
+  plainText,
+  serializeXdoc,
+  validateContent,
+  wordCount
+} from "./chunk-NFOBZJDF.js";
+
+// src/docs/document/extensions/Callout.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+var Callout = Node.create({
+  name: "callout",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      type: {
+        default: "info",
+        parseHTML: (element) => element.getAttribute("data-callout-type") || "info",
+        renderHTML: (attributes) => ({
+          "data-callout-type": attributes.type
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      { tag: "div[data-callout-type]" },
+      { tag: "div.callout" }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const type = HTMLAttributes["data-callout-type"] || "info";
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: `callout ${type}`,
+        "data-callout-type": type
+      }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setCallout: (attrs) => ({ commands }) => {
+        return commands.wrapIn(this.name, attrs);
+      },
+      toggleCallout: (attrs) => ({ commands }) => {
+        return commands.toggleWrap(this.name, attrs);
+      }
+    };
+  }
+});
+
+// src/docs/document/extensions/ToggleBlock.ts
+import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+var ToggleBlock = Node2.create({
+  name: "toggleBlock",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      open: {
+        default: true,
+        parseHTML: (element) => element.getAttribute("data-open") !== "false",
+        renderHTML: (attributes) => ({
+          "data-open": String(attributes.open)
+        })
+      },
+      summary: {
+        default: "Toggle",
+        parseHTML: (element) => element.getAttribute("data-summary") || "Toggle",
+        renderHTML: (attributes) => ({
+          "data-summary": attributes.summary
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      { tag: "div[data-toggle-block]" },
+      {
+        tag: "details",
+        getAttrs: (element) => ({
+          open: element.hasAttribute("open"),
+          summary: element.querySelector("summary")?.textContent || "Toggle"
+        })
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "details",
+      mergeAttributes2(HTMLAttributes, {
+        "data-toggle-block": "true",
+        ...HTMLAttributes["data-open"] === "true" ? { open: "open" } : {}
+      }),
+      ["summary", {}, HTMLAttributes["data-summary"] || "Toggle"],
+      ["div", { class: "toggle-content" }, 0]
+    ];
+  },
+  addCommands() {
+    return {
+      setToggleBlock: () => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: { summary: "Click to expand", open: true },
+          content: [{ type: "paragraph", content: [{ type: "text", text: "Content here..." }] }]
+        });
+      }
+    };
+  }
+});
+
+// src/docs/document/extensions/PageBreak.ts
+import { Node as Node3, mergeAttributes as mergeAttributes3 } from "@tiptap/core";
+var PageBreak = Node3.create({
+  name: "pageBreak",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  parseHTML() {
+    return [
+      { tag: "div[data-page-break]" },
+      {
+        tag: "div",
+        getAttrs: (element) => element.style.pageBreakAfter === "always" ? {} : false
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes3(HTMLAttributes, {
+        "data-page-break": "true",
+        class: "page-break",
+        contenteditable: "false",
+        style: "page-break-after: always;"
+      }),
+      ["div", { class: "page-break-rule" }],
+      ["span", { class: "page-break-label" }, "Page Break"],
+      ["div", { class: "page-break-rule" }]
+    ];
+  },
+  addCommands() {
+    return {
+      setPageBreak: () => ({ commands }) => {
+        return commands.insertContent({ type: this.name });
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Enter": () => this.editor.commands.setPageBreak()
+    };
+  }
+});
+
+// src/docs/document/extensions/WikiLink.ts
+import { Mark, mergeAttributes as mergeAttributes4 } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+var WikiLinkMark = Mark.create({
+  name: "wikiLink",
+  priority: 1e3,
+  addOptions() {
+    return {
+      onClickLink: () => {
+      },
+      HTMLAttributes: {
+        class: "wiki-link"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      pageId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-page-id"),
+        renderHTML: (attributes) => ({
+          "data-page-id": attributes.pageId
+        })
+      },
+      pageTitle: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-page-title"),
+        renderHTML: (attributes) => ({
+          "data-page-title": attributes.pageTitle
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-wiki-link]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes4(
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+        { "data-wiki-link": "" }
+      ),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setWikiLink: (attrs) => ({ commands }) => {
+        return commands.setMark(this.name, attrs);
+      },
+      unsetWikiLink: () => ({ commands }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const { onClickLink } = this.options;
+    return [
+      new Plugin({
+        key: new PluginKey("wikiLinkClick"),
+        props: {
+          handleClick(view, pos) {
+            const { state } = view;
+            const $pos = state.doc.resolve(pos);
+            const marks = $pos.marks();
+            for (const mark of marks) {
+              if (mark.type.name === "wikiLink") {
+                const { pageId, pageTitle } = mark.attrs;
+                if (pageId || pageTitle) {
+                  onClickLink(pageId || "", pageTitle || "");
+                  return true;
+                }
+              }
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/docs/document/schema.ts
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Placeholder from "@tiptap/extension-placeholder";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import Highlight from "@tiptap/extension-highlight";
+import Typography from "@tiptap/extension-typography";
+var SafeImage = Image.extend({
+  parseHTML() {
+    return [{ tag: "img[src]", getAttrs: (el) => SAFE_IMAGE.test(el.getAttribute("src") ?? "") ? null : false }];
+  }
+});
+function createDocumentExtensions(options = {}) {
+  const list = [
+    StarterKit.configure({
+      ...options.codeBlock ? { codeBlock: false } : {},
+      heading: { levels: [1, 2, 3, 4, 5, 6] },
+      ...options.history === false ? { history: false } : {}
+    }),
+    Underline,
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    Placeholder.configure({ placeholder: options.placeholder ?? 'Start writing, or press "/" for commands...' }),
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Table.configure({ resizable: options.resizableTables ?? false }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    SafeImage.configure({ inline: false }),
+    Link.configure({
+      openOnClick: false,
+      autolink: true,
+      HTMLAttributes: { rel: "noopener noreferrer nofollow", target: "_blank" },
+      // the format refuses anything else; the editor must not be able to produce what the format refuses
+      isAllowedUri: (url) => SAFE_LINK.test(String(url).trim())
+    }),
+    Subscript,
+    Superscript,
+    Highlight.configure({ multicolor: true }),
+    Typography,
+    Callout,
+    ToggleBlock,
+    PageBreak,
+    WikiLinkMark.configure({ onClickLink: options.onOpenPage ?? (() => {
+    }) })
+  ];
+  if (options.codeBlock) list.push(options.codeBlock);
+  return list;
+}
+
+// src/docs/document/surface.ts
+import { Editor } from "@tiptap/core";
+function runFormat(editor, command, arg, promptLink) {
+  const c = editor.chain().focus();
+  switch (command) {
+    case "paragraph":
+      return c.setParagraph().run();
+    case "h1":
+      return c.toggleHeading({ level: 1 }).run();
+    case "h2":
+      return c.toggleHeading({ level: 2 }).run();
+    case "h3":
+      return c.toggleHeading({ level: 3 }).run();
+    case "bold":
+      return c.toggleBold().run();
+    case "italic":
+      return c.toggleItalic().run();
+    case "underline":
+      return c.toggleUnderline().run();
+    case "strike":
+      return c.toggleStrike().run();
+    case "code":
+      return c.toggleCode().run();
+    case "highlight":
+      return c.toggleHighlight().run();
+    case "bulletList":
+      return c.toggleBulletList().run();
+    case "orderedList":
+      return c.toggleOrderedList().run();
+    case "taskList":
+      return c.toggleTaskList().run();
+    case "blockquote":
+      return c.toggleBlockquote().run();
+    case "codeBlock":
+      return c.toggleCodeBlock().run();
+    case "callout":
+      return c.toggleCallout({ type: "info" }).run();
+    case "toggle":
+      return c.setToggleBlock().run();
+    case "pageBreak":
+      return c.setPageBreak().run();
+    case "horizontalRule":
+      return c.setHorizontalRule().run();
+    case "unlink":
+      return c.unsetLink().run();
+    case "undo":
+      return c.undo().run();
+    case "redo":
+      return c.redo().run();
+    case "link": {
+      const current = editor.getAttributes("link").href ?? null;
+      const href = typeof arg === "string" ? arg : promptLink ? promptLink(current) : null;
+      if (href === null || href === void 0) return false;
+      if (href.trim() === "") return c.unsetLink().run();
+      if (!SAFE_LINK.test(href.trim())) return false;
+      return c.extendMarkRange("link").setLink({ href: href.trim(), target: "_blank" }).run();
+    }
+    default:
+      return false;
+  }
+}
+var ACTIVE = {
+  paragraph: ["paragraph"],
+  h1: ["heading", { level: 1 }],
+  h2: ["heading", { level: 2 }],
+  h3: ["heading", { level: 3 }],
+  bold: ["bold"],
+  italic: ["italic"],
+  underline: ["underline"],
+  strike: ["strike"],
+  code: ["code"],
+  highlight: ["highlight"],
+  bulletList: ["bulletList"],
+  orderedList: ["orderedList"],
+  taskList: ["taskList"],
+  blockquote: ["blockquote"],
+  codeBlock: ["codeBlock"],
+  callout: ["callout"],
+  toggle: ["toggleBlock"],
+  link: ["link"]
+};
+function editorHandle(editor, promptLink) {
+  return {
+    getJSON: () => editor.getJSON(),
+    setContent: (content) => {
+      editor.commands.setContent(content, false);
+    },
+    setEditable: (editable) => editor.setEditable(editable),
+    focus: () => {
+      editor.commands.focus();
+    },
+    run: (command, arg) => runFormat(editor, command, arg, promptLink),
+    isActive: (command) => {
+      const a = ACTIVE[command];
+      return a ? editor.isActive(a[0], a[1]) : false;
+    },
+    insertText: (text) => {
+      editor.chain().focus().insertContent({ type: "text", text }).run();
+    },
+    insertPageLink: (pageId, pageTitle, label) => {
+      const { from, to } = editor.state.selection;
+      const words = label || (from !== to ? editor.state.doc.textBetween(from, to, " ") : "") || pageTitle || "Untitled";
+      editor.chain().focus().insertContentAt({ from, to }, [
+        { type: "text", text: words, marks: [{ type: "wikiLink", attrs: { pageId, pageTitle } }] },
+        { type: "text", text: " " }
+      ]).run();
+    }
+  };
+}
+function mountDocumentSurface(element, controller, options = {}) {
+  const state = controller.getState();
+  const editor = new Editor({
+    element,
+    extensions: [...createDocumentExtensions({ ...options, onOpenPage: (id, title) => controller.openPage(id, title) }), ...options.extensions ?? []],
+    content: state.unsupported.length || state.status === "unsupported" ? "" : state.content,
+    editable: !state.readOnly,
+    editorProps: {
+      attributes: {
+        ...options.editorClass ? { class: options.editorClass } : {},
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": options.label ?? "Document text",
+        "data-xeno-document-surface": ""
+      }
+    },
+    onUpdate: () => controller.contentChanged(),
+    onSelectionUpdate: () => controller.selectionChanged()
+  });
+  const unbind = controller.attach(editorHandle(editor, options.promptLink));
+  return () => {
+    unbind();
+    editor.destroy();
+  };
+}
+
+// src/docs/document/controller.ts
+var DOCUMENT_FORMAT_COMMANDS = Object.freeze([
+  "paragraph",
+  "h1",
+  "h2",
+  "h3",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "highlight",
+  "bulletList",
+  "orderedList",
+  "taskList",
+  "blockquote",
+  "codeBlock",
+  "callout",
+  "toggle",
+  "pageBreak",
+  "horizontalRule",
+  "link",
+  "unlink",
+  "undo",
+  "redo"
+]);
+var KNOWN = /* @__PURE__ */ new Set([...DOCUMENT_NODE_TYPES, ...DOCUMENT_MARK_TYPES.map((m) => `mark:${m}`)]);
+var DOCUMENT_TOOLBAR = Object.freeze([
+  { command: "h1", label: "H1" },
+  { command: "h2", label: "H2" },
+  { command: "h3", label: "H3" },
+  { command: "paragraph", label: "Text" },
+  { command: "bold", label: "Bold" },
+  { command: "italic", label: "Italic" },
+  { command: "underline", label: "Underline" },
+  { command: "strike", label: "Strike" },
+  { command: "code", label: "Code" },
+  { command: "bulletList", label: "List" },
+  { command: "orderedList", label: "Numbered" },
+  { command: "taskList", label: "Tasks" },
+  { command: "blockquote", label: "Quote" },
+  { command: "codeBlock", label: "Code block" },
+  { command: "callout", label: "Callout" },
+  { command: "link", label: "Link" }
+]);
+var DocumentController = class {
+  host;
+  state = { id: null, versionId: null, title: "", readOnly: false, unsupported: [], dirty: false, status: "empty", message: null, content: emptyContent(), revision: 0 };
+  created = Date.now();
+  /** XENO Docs' comment threads, carried through a save untouched (this block does not edit comments). */
+  commentThreads;
+  editor = null;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(options) {
+    this.host = options.host;
+  }
+  /** Subscribe to state changes (a view re-renders on each). */
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+  getState() {
+    return this.state;
+  }
+  set(patch) {
+    this.state = { ...this.state, ...patch };
+    for (const fn of this.listeners) fn();
+  }
+  /**
+   * Open a document. A file the shared schema cannot render is NOT coerced: it opens read-only with
+   * the unknown types listed, so nothing the user wrote elsewhere is lost on a save here.
+   */
+  load(input) {
+    let content;
+    let unsupported = [];
+    let message = null;
+    try {
+      if (input.xdoc !== void 0) {
+        const f = parseXdoc(input.xdoc);
+        content = f.content;
+        this.created = f.created;
+        this.commentThreads = f.commentThreads;
+      } else {
+        content = input.content ?? emptyContent();
+        const problems = validateContent(content);
+        if (problems.length) throw new XdocError(problems[0].detail, problems);
+        this.created = input.created ?? Date.now();
+        this.commentThreads = void 0;
+      }
+    } catch (e) {
+      let raw = emptyContent();
+      try {
+        const r = typeof input.xdoc === "string" ? JSON.parse(input.xdoc) : input.xdoc ?? { content: input.content };
+        if (r && typeof r === "object" && r.content) raw = r.content;
+      } catch {
+      }
+      content = raw;
+      unsupported = [...nodeTypesIn(raw)].filter((t) => !KNOWN.has(t));
+      message = e instanceof Error ? e.message : "This document cannot be edited here";
+    }
+    this.set({
+      id: input.id,
+      versionId: input.versionId ?? null,
+      title: input.title,
+      readOnly: !!input.readOnly || unsupported.length > 0 || message !== null,
+      unsupported,
+      dirty: false,
+      status: message ? "unsupported" : "ready",
+      message,
+      content,
+      revision: this.state.revision + 1
+    });
+    if (this.editor) {
+      this.editor.setContent(message ? emptyContent() : content);
+      this.editor.setEditable(!this.state.readOnly);
+    }
+  }
+  /** Bind the live editor (`./surface` does this). Returns the unbind. */
+  attach(editor) {
+    this.editor = editor;
+    editor.setEditable(!this.state.readOnly);
+    return () => {
+      if (this.editor === editor) this.editor = null;
+    };
+  }
+  hasEditor() {
+    return this.editor !== null;
+  }
+  /** The editor reported an edit. */
+  contentChanged() {
+    if (this.state.readOnly) return;
+    if (!this.state.dirty) this.host.emit("dirty", { dirty: true });
+    this.set({ dirty: true, status: this.state.status === "saved" ? "ready" : this.state.status });
+  }
+  /** The cursor moved: a view re-reads which format commands are active. No state changes. */
+  selectionChanged() {
+    this.set({});
+  }
+  setTitle(title) {
+    if (this.state.readOnly || title === this.state.title) return;
+    if (!this.state.dirty) this.host.emit("dirty", { dirty: true });
+    this.set({ title, dirty: true });
+  }
+  /** The content as it stands — the live editor's when bound. */
+  currentContent() {
+    return this.editor ? this.editor.getJSON() : this.state.content;
+  }
+  /** Run a format command against the live editor. */
+  format(command, arg) {
+    if (this.state.readOnly || !this.editor) return false;
+    if (!DOCUMENT_FORMAT_COMMANDS.includes(command)) return false;
+    return this.editor.run(command, arg);
+  }
+  isActive(command) {
+    return this.editor ? this.editor.isActive(command) : false;
+  }
+  insertText(text) {
+    if (this.state.readOnly || !this.editor) return false;
+    this.editor.insertText(String(text));
+    return true;
+  }
+  insertPageLink(pageId, pageTitle, label) {
+    if (this.state.readOnly || !this.editor || !pageId) return false;
+    this.editor.insertPageLink(pageId, pageTitle, label);
+    return true;
+  }
+  /** A page link was clicked — the host navigates. */
+  openPage(pageId, pageTitle) {
+    if (pageId || pageTitle) this.host.emit("openPage", { pageId, pageTitle });
+  }
+  /** The `.xdoc` for the document as it stands. Throws {@link XdocError} if it would not validate. */
+  toXdoc() {
+    return serializeXdoc({ ...this.state.id ? { id: this.state.id } : {}, title: this.state.title, content: this.currentContent(), created: this.created, lastModified: Date.now(), ...this.commentThreads ? { commentThreads: this.commentThreads } : {} });
+  }
+  /** Ask the host to save. Refused (false) when read-only, when nothing is open, or mid-save. */
+  save() {
+    const s = this.state;
+    if (!s.id || s.readOnly || s.status === "saving") return false;
+    const title = s.title.trim();
+    if (!title) {
+      this.set({ status: "failed", message: "A title is required" });
+      return false;
+    }
+    let xdoc;
+    const content = this.currentContent();
+    try {
+      xdoc = this.toXdoc();
+    } catch (e) {
+      this.set({ status: "failed", message: e instanceof Error ? e.message : "The document cannot be saved" });
+      return false;
+    }
+    this.set({ status: "saving", message: null });
+    const save = { id: s.id, ...s.versionId ? { expectedVersion: s.versionId } : {}, title, xdoc, content, text: plainText(content), pageLinks: pageLinksIn(content) };
+    this.host.emit("save", save);
+    return true;
+  }
+  /** The host saved: adopt its new version id. */
+  saved(versionId) {
+    this.set({ versionId: versionId ?? this.state.versionId, dirty: false, status: "saved", message: null });
+    this.host.emit("dirty", { dirty: false });
+  }
+  /** The host reports an outcome that is not success (`conflict`, `failed`) or a message. */
+  setStatus(status, message) {
+    this.set({ status, message: message ?? null });
+  }
+  /** What an agent reads. The status travels with the words so "empty" is never a guess. */
+  describe() {
+    const content = this.currentContent();
+    const s = this.state;
+    return { id: s.id, title: s.title, status: s.status, readOnly: s.readOnly, dirty: s.dirty, text: plainText(content), wordCount: wordCount(content), pageLinks: pageLinksIn(content), unsupported: s.unsupported };
+  }
+  serialize() {
+    return { id: this.state.id, title: this.state.title };
+  }
+  deserialize(_state) {
+  }
+  dispose() {
+    this.listeners.clear();
+    this.editor = null;
+  }
+};
+
+export {
+  Callout,
+  ToggleBlock,
+  PageBreak,
+  WikiLinkMark,
+  SafeImage,
+  createDocumentExtensions,
+  runFormat,
+  editorHandle,
+  mountDocumentSurface,
+  DOCUMENT_FORMAT_COMMANDS,
+  DOCUMENT_TOOLBAR,
+  DocumentController
+};