@pixerate/editor 0.47.0 → 0.49.0

package/dist/{chunk-TK2XZK6Z.js → chunk-QFTVLEVN.js}

@@ -1,3 +1,16 @@
+import {
+  ChartController,
+  chartFromMermaid,
+  chartSceneToDomSpec,
+  chartToMermaid,
+  describeChart,
+  layoutChart,
+  layoutSparkline
+} from "./chunk-WBOAXDKD.js";
+import {
+  DEFAULT_CHART_THEME,
+  normalizeChartSpec
+} from "./chunk-OV7UAKIY.js";
 import {
   isTrackChangesEnabled
 } from "./chunk-SWE3NPOU.js";
@@ -1174,6 +1187,570 @@ function createTableExtensions(options = {}) {
   ];
 }
 
+// src/extensions/chart/node-view.ts
+import { DOMSerializer } from "@tiptap/pm/model";
+import { NodeSelection } from "@tiptap/pm/state";
+var specKey = (spec) => JSON.stringify(spec);
+var ChartNodeView = class {
+  constructor(props, mount, renderStatic) {
+    this.renderStatic = renderStatic;
+    this.editor = props.editor;
+    this.node = props.node;
+    this.getPos = typeof props.getPos === "function" ? props.getPos : () => void 0;
+    this.editable = this.editor.isEditable;
+    this.dom = document.createElement("div");
+    this.dom.className = "pixerate-chart-node";
+    this.dom.setAttribute("data-type", "chart");
+    this.dom.contentEditable = "false";
+    this.syncAttributes();
+    this.key = specKey(this.node.attrs.spec);
+    this.controller = new ChartController({ spec: this.node.attrs.spec });
+    this.unsubscribe = this.controller.subscribe((state) => {
+      if (!state.gesture) this.writeBack();
+    });
+    this.editor.on("update", this.onEditorUpdate);
+    this.renderer = mount ? mount(this.dom, this.viewState()) : null;
+    if (!mount) this.drawStatic();
+  }
+  renderStatic;
+  dom;
+  node;
+  editor;
+  getPos;
+  controller;
+  renderer;
+  unsubscribe;
+  editing = false;
+  selected = false;
+  editable;
+  key;
+  viewState() {
+    return {
+      id: this.node.attrs.id ?? null,
+      controller: this.controller,
+      width: this.node.attrs.width ?? null,
+      height: this.node.attrs.height,
+      editable: this.editable,
+      selected: this.selected,
+      editing: this.editing,
+      setEditing: this.setEditing,
+      setSize: this.setSize
+    };
+  }
+  render() {
+    if (this.renderer) this.renderer.update(this.viewState());
+    else this.drawStatic();
+    this.dom.toggleAttribute("data-editing", this.editing);
+  }
+  drawStatic() {
+    const { dom } = DOMSerializer.renderSpec(document, this.renderStatic(this.node));
+    this.dom.replaceChildren(dom);
+  }
+  syncAttributes() {
+    if (this.node.attrs.id) this.dom.setAttribute("data-chart-id", this.node.attrs.id);
+    else this.dom.removeAttribute("data-chart-id");
+  }
+  onEditorUpdate = () => {
+    if (this.editor.isEditable === this.editable) return;
+    this.editable = this.editor.isEditable;
+    if (!this.editable) this.editing = false;
+    this.render();
+  };
+  /** Writes the controller's spec into the node, if it changed. */
+  writeBack() {
+    const spec = this.controller.toJSON();
+    const key = specKey(spec);
+    if (key === this.key) return;
+    const pos = this.getPos();
+    if (typeof pos !== "number" || this.editor.isDestroyed) return;
+    this.key = key;
+    this.editor.view.dispatch(this.editor.state.tr.setNodeMarkup(pos, void 0, { ...this.node.attrs, spec }));
+  }
+  setEditing = (editing) => {
+    if (editing && !this.editor.isEditable) return;
+    if (editing && !this.selected) {
+      const pos = this.getPos();
+      if (typeof pos === "number") {
+        this.editor.view.dispatch(this.editor.state.tr.setSelection(NodeSelection.create(this.editor.state.doc, pos)));
+      }
+    }
+    if (this.editing === editing) return;
+    this.editing = editing;
+    this.render();
+  };
+  setSize = (size) => {
+    const pos = this.getPos();
+    if (typeof pos !== "number" || !this.editor.isEditable) return;
+    this.editor.view.dispatch(this.editor.state.tr.setNodeMarkup(pos, void 0, { ...this.node.attrs, ...size }));
+  };
+  update(node) {
+    if (node.type !== this.node.type) return false;
+    this.node = node;
+    this.syncAttributes();
+    const key = specKey(node.attrs.spec);
+    if (key !== this.key) {
+      this.key = key;
+      if (specKey(this.controller.toJSON()) !== key) this.controller.load(node.attrs.spec, { clearHistory: true });
+    }
+    this.render();
+    return true;
+  }
+  selectNode() {
+    this.selected = true;
+    this.dom.classList.add("ProseMirror-selectednode");
+    this.render();
+  }
+  deselectNode() {
+    this.selected = false;
+    this.editing = false;
+    this.dom.classList.remove("ProseMirror-selectednode");
+    this.render();
+  }
+  /** The inspector's inputs, buttons and chart gestures keep their events while it is open. */
+  stopEvent(event) {
+    if (!this.editing) return false;
+    return !(event.type === "dragstart" && event.target === this.dom);
+  }
+  ignoreMutation() {
+    return true;
+  }
+  destroy() {
+    this.editor.off("update", this.onEditorUpdate);
+    this.unsubscribe();
+    this.renderer?.destroy();
+    this.controller.destroy();
+  }
+};
+function createChartNodeView(mount, renderStatic) {
+  return (props) => new ChartNodeView(props, mount, renderStatic);
+}
+
+// src/extensions/chart/chart-node.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+
+// src/extensions/document-structure/utils.ts
+import { createDocument } from "@tiptap/core";
+import { EditorState } from "@tiptap/pm/state";
+import { ReplaceAroundStep, ReplaceStep } from "@tiptap/pm/transform";
+var idCounter = 0;
+function generateStructureId(prefix) {
+  idCounter = (idCounter + 1) % 1296;
+  const random = Math.random().toString(36).slice(2, 8).padEnd(6, "0");
+  return `${prefix}-${random}${idCounter.toString(36).padStart(2, "0")}`;
+}
+function transactionsInsert(transactions, typeNames) {
+  for (const tr of transactions) {
+    for (const step of tr.steps) {
+      if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep)) {
+        const mark = step.mark;
+        if (mark && typeNames.includes(mark.type.name)) return true;
+        continue;
+      }
+      let found = false;
+      step.slice.content.descendants((node) => {
+        if (found) return false;
+        if (typeNames.includes(node.type.name) || node.marks.some((m) => typeNames.includes(m.type.name))) {
+          found = true;
+        }
+        return !found;
+      });
+      if (found) return true;
+    }
+  }
+  return false;
+}
+function docContains(doc, typeNames) {
+  let found = false;
+  doc.descendants((node) => {
+    if (found) return false;
+    if (typeNames.includes(node.type.name) || node.marks.some((m) => typeNames.includes(m.type.name))) {
+      found = true;
+    }
+    return !found;
+  });
+  return found;
+}
+function presenceStateSpec(typeNames) {
+  return {
+    init: (_config, state) => docContains(state.doc, typeNames),
+    apply: (tr, present, _oldState, newState) => {
+      if (!tr.docChanged) return present;
+      if (!present && !transactionsInsert([tr], typeNames)) return false;
+      return docContains(newState.doc, typeNames);
+    }
+  };
+}
+function arraysEqual(a, b, eq) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!eq(a[i], b[i])) return false;
+  }
+  return true;
+}
+function scrollDomAtPos(view, pos, behavior = "smooth") {
+  try {
+    const dom = view?.nodeDOM?.(pos);
+    if (dom && typeof dom.scrollIntoView === "function") {
+      dom.scrollIntoView({ block: "start", behavior });
+    }
+  } catch {
+  }
+}
+function syncInitialContent(editor, sync) {
+  const { content } = editor.options;
+  if (content == null || content === "") return;
+  try {
+    const doc = createDocument(content, editor.schema, editor.options.parseOptions, {
+      errorOnInvalidContent: false
+    });
+    const tr = sync(EditorState.create({ doc }));
+    if (tr?.docChanged) editor.options.content = tr.doc;
+  } catch {
+  }
+}
+var STRUCTURE_PRIORITY = 45;
+
+// src/extensions/chart/chart-node.ts
+var chartPluginKey = new PluginKey2("chartNode");
+function getDocumentCharts(doc, typeName = "chart") {
+  const charts = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === typeName) {
+      charts.push({ id: node.attrs.id ?? null, pos, node, spec: node.attrs.spec });
+      return false;
+    }
+    return !node.isTextblock;
+  });
+  return charts;
+}
+function isChartEnabled(editor) {
+  return !!editor?.schema?.nodes?.chart;
+}
+function readSpec(value) {
+  let input = value;
+  if (typeof value === "string") {
+    try {
+      input = JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  if (!input || typeof input !== "object" || Array.isArray(input)) return null;
+  return normalizeChartSpec(input).spec;
+}
+var readSize = (value) => {
+  const n = value === null ? NaN : Number(value);
+  return Number.isFinite(n) && n >= 50 && n <= 4096 ? n : null;
+};
+function syncChartIds(state, typeName, generateId) {
+  const seen = /* @__PURE__ */ new Set();
+  let tr = null;
+  for (const chart of getDocumentCharts(state.doc, typeName)) {
+    if (chart.id && !seen.has(chart.id)) {
+      seen.add(chart.id);
+      continue;
+    }
+    let id = generateId();
+    while (seen.has(id)) id = generateId();
+    seen.add(id);
+    tr = tr ?? state.tr;
+    tr.setNodeMarkup(chart.pos, void 0, { ...chart.node.attrs, id });
+  }
+  return tr?.setMeta("addToHistory", false) ?? null;
+}
+function staticChartSvg(node, options) {
+  const spec = node.attrs.spec;
+  const width = node.attrs.width ?? options.defaultWidth;
+  const height = node.attrs.height ?? options.defaultHeight;
+  const scene = layoutChart(spec, { width, height, theme: options.theme, selection: null });
+  return chartSceneToDomSpec(scene, {
+    ariaLabel: spec.title || "Chart",
+    description: describeChart(spec),
+    attrs: { style: "max-width: 100%; height: auto; display: block" }
+  });
+}
+var longestBacktickRun = (text) => Math.max(0, ...Array.from(text.matchAll(/`+/g), (m) => m[0].length));
+var Chart = Node.create({
+  name: "chart",
+  priority: STRUCTURE_PRIORITY,
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      nodeView: null,
+      theme: DEFAULT_CHART_THEME,
+      defaultWidth: 640,
+      defaultHeight: 320,
+      generateId: () => generateStructureId("chart")
+    };
+  },
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-chart-id") || null,
+        renderHTML: (attributes) => attributes.id ? { "data-chart-id": attributes.id } : {}
+      },
+      spec: {
+        default: normalizeChartSpec({}).spec,
+        // null (no `data-chart`) keeps what the parse rule found, e.g. a mermaid block's spec.
+        parseHTML: (element) => readSpec(element.getAttribute("data-chart")),
+        renderHTML: (attributes) => ({
+          "data-chart": JSON.stringify(attributes.spec)
+        })
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => readSize(element.getAttribute("data-width")),
+        renderHTML: (attributes) => attributes.width ? { "data-width": String(attributes.width) } : {}
+      },
+      height: {
+        default: this.options.defaultHeight,
+        parseHTML: (element) => readSize(element.getAttribute("data-height")),
+        renderHTML: (attributes) => ({
+          "data-height": String(attributes.height)
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="chart"]',
+        priority: 60,
+        // A missing or broken spec falls through, so the fallback content inside (e.g. a
+        // DOCX import's caption and data table) is kept instead.
+        getAttrs: (element) => readSpec(element.getAttribute("data-chart")) ? null : false
+      },
+      {
+        // ```mermaid blocks (from markdown) that hold a chart; other diagrams stay code.
+        tag: "pre",
+        priority: 60,
+        getAttrs: (element) => {
+          const code = element.querySelector("code");
+          const language = code?.getAttribute("class") ?? element.getAttribute("data-language") ?? "";
+          if (!/(?:^|\s)language-mermaid(?:\s|$)/.test(language) && language !== "mermaid") return false;
+          const result = chartFromMermaid((code ?? element).textContent ?? "");
+          return result.family ? { spec: result.spec } : false;
+        }
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const svg = staticChartSvg(node, this.options);
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "chart",
+        class: "pixerate-chart"
+      }),
+      svg
+    ];
+  },
+  renderText({ node }) {
+    return `[Chart: ${node.attrs.spec?.title || "untitled"}]`;
+  },
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          const text = chartToMermaid(node.attrs.spec);
+          const fence = "`".repeat(Math.max(3, longestBacktickRun(text) + 1));
+          state.write(`${fence}mermaid
+`);
+          state.text(text, false);
+          state.ensureNewLine();
+          state.write(fence);
+          state.closeBlock(node);
+        },
+        parse: {
+          // markdown-it renders ```mermaid as <pre><code class="language-mermaid">, which
+          // `parseHTML` reads.
+        }
+      }
+    };
+  },
+  addCommands() {
+    return {
+      insertChart: (options) => ({ commands }) => commands.insertContent({
+        type: this.name,
+        attrs: {
+          id: options.id ?? this.options.generateId(),
+          spec: normalizeChartSpec(options.spec ?? {}).spec,
+          width: options.width ?? null,
+          height: options.height ?? this.options.defaultHeight
+        }
+      }),
+      updateChart: (id, changes) => ({ state, tr, dispatch }) => {
+        const chart = getDocumentCharts(state.doc, this.name).find((c) => c.id === id);
+        if (!chart) return false;
+        if (dispatch) {
+          tr.setNodeMarkup(chart.pos, void 0, {
+            ...chart.node.attrs,
+            ...changes.spec !== void 0 ? { spec: normalizeChartSpec(changes.spec).spec } : {},
+            ...changes.width !== void 0 ? { width: changes.width } : {},
+            ...changes.height !== void 0 ? { height: changes.height } : {}
+          });
+        }
+        return true;
+      }
+    };
+  },
+  addNodeView() {
+    return createChartNodeView(this.options.nodeView, (node) => staticChartSvg(node, this.options));
+  },
+  addProseMirrorPlugins() {
+    const { name } = this;
+    const { generateId } = this.options;
+    return [
+      new Plugin2({
+        key: chartPluginKey,
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return null;
+          if (!transactionsInsert(transactions, [name])) return null;
+          return syncChartIds(newState, name, generateId);
+        }
+      })
+    ];
+  },
+  onBeforeCreate() {
+    const { generateId } = this.options;
+    syncInitialContent(this.editor, (state) => syncChartIds(state, this.name, generateId));
+  }
+});
+
+// src/extensions/chart/sparkline-node.ts
+import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+var SPARKLINE_KINDS = ["line", "column", "win-loss"];
+var MAX_SPARKLINE_VALUES = 1e3;
+function normalizeSparklineValues(values) {
+  if (!Array.isArray(values)) return [];
+  return values.slice(0, MAX_SPARKLINE_VALUES).map((v) => typeof v === "number" && Number.isFinite(v) ? v : null);
+}
+function readValues(text) {
+  if (!text) return [];
+  try {
+    return normalizeSparklineValues(JSON.parse(text));
+  } catch {
+    return normalizeSparklineValues(text.split(/[\s,]+/).filter(Boolean).map(Number));
+  }
+}
+var readNumber = (text, fallback, max) => {
+  const n = text === null ? NaN : Number(text);
+  return Number.isFinite(n) && n >= 4 && n <= max ? n : fallback;
+};
+function sparklineLabel(node) {
+  if (node.attrs.label) return node.attrs.label;
+  const present = node.attrs.values.filter((v) => v !== null);
+  return present.length ? `Trend from ${present[0]} to ${present[present.length - 1]}` : "No data";
+}
+var Sparkline = Node2.create({
+  name: "sparkline",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addOptions() {
+    return { HTMLAttributes: {}, color: "#4269d0", negativeColor: "#e5484d" };
+  },
+  addAttributes() {
+    return {
+      values: {
+        default: [],
+        parseHTML: (element) => readValues(element.getAttribute("data-values")),
+        renderHTML: (attributes) => ({ "data-values": JSON.stringify(attributes.values ?? []) })
+      },
+      kind: {
+        default: "line",
+        parseHTML: (element) => {
+          const kind = element.getAttribute("data-kind");
+          return SPARKLINE_KINDS.includes(kind) ? kind : "line";
+        },
+        renderHTML: (attributes) => ({ "data-kind": attributes.kind })
+      },
+      width: {
+        default: 80,
+        parseHTML: (element) => readNumber(element.getAttribute("data-width"), 80, 1e3),
+        renderHTML: (attributes) => ({ "data-width": String(attributes.width) })
+      },
+      height: {
+        default: 18,
+        parseHTML: (element) => readNumber(element.getAttribute("data-height"), 18, 200),
+        renderHTML: (attributes) => ({ "data-height": String(attributes.height) })
+      },
+      color: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-color") || null,
+        renderHTML: (attributes) => attributes.color ? { "data-color": attributes.color } : {}
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label") || null,
+        renderHTML: (attributes) => attributes.label ? { "data-label": attributes.label } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-type="sparkline"]', priority: 60 }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const scene = layoutSparkline(node.attrs.values, {
+      kind: node.attrs.kind,
+      width: node.attrs.width,
+      height: node.attrs.height,
+      color: node.attrs.color ?? this.options.color,
+      negativeColor: this.options.negativeColor
+    });
+    const svg = chartSceneToDomSpec(scene, {
+      ariaLabel: sparklineLabel(node),
+      attrs: { style: "display: inline-block; vertical-align: middle" }
+    });
+    return [
+      "span",
+      mergeAttributes2(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "sparkline",
+        class: "pixerate-sparkline"
+      }),
+      svg
+    ];
+  },
+  renderText({ node }) {
+    return `[${sparklineLabel(node)}]`;
+  },
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state, node) {
+          const attr = (name, value) => value === null || value === void 0 ? "" : ` ${name}="${String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;")}"`;
+          state.write(
+            `<span data-type="sparkline"${attr("data-values", JSON.stringify(node.attrs.values))}${attr("data-kind", node.attrs.kind)}${attr("data-width", node.attrs.width)}${attr("data-height", node.attrs.height)}${attr("data-color", node.attrs.color)}${attr("data-label", node.attrs.label)}></span>`
+          );
+        },
+        parse: {}
+      }
+    };
+  },
+  addCommands() {
+    return {
+      insertSparkline: (options) => ({ commands }) => commands.insertContent({
+        type: this.name,
+        attrs: {
+          values: normalizeSparklineValues(options.values),
+          kind: options.kind && SPARKLINE_KINDS.includes(options.kind) ? options.kind : "line",
+          width: options.width ?? 80,
+          height: options.height ?? 18,
+          color: options.color ?? null,
+          label: options.label ?? null
+        }
+      })
+    };
+  }
+});
+
 // src/extensions/table/actions.ts
 import { CellSelection as CellSelection2, isInTable, selectedRect } from "@tiptap/pm/tables";
 var TABLE_ACTIONS = [
@@ -1430,6 +2007,12 @@ export {
   handleTablePasteWithoutNesting,
   unnestTables,
   createTableNestingPlugin,
+  generateStructureId,
+  presenceStateSpec,
+  arraysEqual,
+  scrollDomAtPos,
+  syncInitialContent,
+  STRUCTURE_PRIORITY,
   FIND_PARAGRAPH_MARK,
   MAX_FIND_PATTERN_LENGTH,
   createSearchBudget,
@@ -1449,6 +2032,18 @@ export {
   TableCell,
   TableHeader,
   createTableExtensions,
+  ChartNodeView,
+  createChartNodeView,
+  chartPluginKey,
+  getDocumentCharts,
+  isChartEnabled,
+  staticChartSvg,
+  Chart,
+  SPARKLINE_KINDS,
+  MAX_SPARKLINE_VALUES,
+  normalizeSparklineValues,
+  sparklineLabel,
+  Sparkline,
   TABLE_ACTIONS,
   DEFAULT_TABLE_TOOLBAR,
   MAX_TABLE_ROWS,
@@ -1462,4 +2057,4 @@ export {
   getTableState,
   createTableStore
 };
-//# sourceMappingURL=chunk-TK2XZK6Z.js.map
+//# sourceMappingURL=chunk-QFTVLEVN.js.map