@kedataindo/docflow-plugins 0.0.31 → 0.0.33

package/dist/index.js

@@ -853,7 +853,91 @@ var highlightPlugin = definePlugin16({
 import { Extension as Extension2 } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { Markdown } from "tiptap-markdown";
 import { definePlugin as definePlugin17 } from "@kedataindo/docflow-core";
+
+// src/markdownInsert.ts
+import { createNodeFromContent } from "@tiptap/core";
+import { Fragment } from "@tiptap/pm/model";
+import { Selection } from "@tiptap/pm/state";
+import { ReplaceAroundStep, ReplaceStep } from "@tiptap/pm/transform";
+function mdParser(editor) {
+  const storage = editor.storage.markdown;
+  if (!storage || typeof storage !== "object") return void 0;
+  const parser = storage.parser;
+  if (!parser || typeof parser !== "object" || !("parse" in parser)) return void 0;
+  return parser;
+}
+function markdownToFragment(editor, markdown, opts) {
+  const parser = mdParser(editor);
+  if (!parser) return null;
+  let html;
+  try {
+    html = parser.parse(markdown, { inline: opts.inline });
+  } catch {
+    return null;
+  }
+  if (typeof html !== "string") return null;
+  const content = createNodeFromContent(html, editor.schema, {
+    slice: true,
+    parseOptions: { preserveWhitespace: "full" }
+  });
+  if (content instanceof Fragment) return content;
+  return Fragment.from(content);
+}
+function selectionToInsertionEnd(tr, startLen, bias) {
+  const last = tr.steps.length - 1;
+  if (last < startLen) return;
+  const step = tr.steps[last];
+  if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep)) return;
+  const map = tr.mapping.maps[last];
+  let end = 0;
+  map.forEach((_from, _to, _newFrom, newTo) => {
+    if (end === 0) end = newTo;
+  });
+  tr.setSelection(Selection.near(tr.doc.resolve(end), bias));
+}
+function insertMarkdownBlock(editor, view, from, to, markdown) {
+  const fragment = markdownToFragment(editor, markdown, { inline: false });
+  if (!fragment) {
+    view.dispatch(view.state.tr.insertText(markdown, from, to));
+    return;
+  }
+  const tr = view.state.tr;
+  let f = from;
+  let t = to;
+  if (f === t) {
+    let onlyBlock = true;
+    fragment.forEach((n) => {
+      if (!n.isBlock) onlyBlock = false;
+    });
+    if (onlyBlock) {
+      const $pos = tr.doc.resolve(f);
+      const parent = $pos.parent;
+      if (parent.isTextblock && !parent.type.spec.code && !parent.childCount) {
+        f -= 1;
+        t += 1;
+      }
+    }
+  }
+  let onlyText = true;
+  fragment.forEach((n) => {
+    if (!n.isText || n.marks.length > 0) onlyText = false;
+  });
+  if (onlyText) {
+    let text = "";
+    fragment.forEach((n) => {
+      if (n.isText) text += n.text ?? "";
+    });
+    tr.insertText(text, f, t);
+  } else {
+    tr.replaceWith(f, t, fragment);
+  }
+  selectionToInsertionEnd(tr, 0, -1);
+  view.dispatch(tr);
+}
+
+// src/ai.ts
 var aiPluginKey = new PluginKey("docflow-ai");
 var CONTEXT_CHARS = 1500;
 function getAIPreview(editor) {
@@ -991,7 +1075,12 @@ var AIExtension = Extension2.create({
         if (!dispatch) return true;
         const tr = state.tr;
         if (preview.text.trim()) {
-          tr.replaceWith(preview.from, preview.to, state.schema.text(preview.text));
+          const fragment = markdownToFragment(editor, preview.text, { inline: true });
+          if (fragment) {
+            tr.replaceWith(preview.from, preview.to, fragment);
+          } else {
+            tr.replaceWith(preview.from, preview.to, state.schema.text(preview.text));
+          }
         }
         tr.setMeta(aiPluginKey, { type: "clear" });
         dispatch(tr);
@@ -1203,7 +1292,15 @@ var AIExtension = Extension2.create({
 });
 var aiPlugin = definePlugin17({
   id: "ai",
-  tiptapExtensions: [AIExtension],
+  // The `tiptap-markdown` `Markdown` extension is registered alongside AI so
+  // that `editor.storage.markdown.parser` is available on every editor that
+  // can stream AI content. It adds a schema-aware markdown↔HTML bridge
+  // (markdown-it under the hood) used by the AI Insert/accept paths to turn
+  // streamed `| col | col |` tables / `# headings` / `**bold**` into real
+  // nodes instead of literal pipe/asterisk text. Its `insertContentAt` /
+  // `setContent` command overrides are intentionally NOT used by the AI
+  // paths (they force `inline:true`); see `markdownInsert.ts`.
+  tiptapExtensions: [AIExtension, Markdown.configure({ html: true, linkify: true, breaks: false })],
   slashCommands: [{ name: "AI", description: "Generate text with AI", command: "aiGenerate" }]
 });
 
@@ -1247,10 +1344,440 @@ var commentPlugin = {
   commands: {}
 };
 
+// src/smartElements.ts
+import { Node as Node5, mergeAttributes as mergeAttributes6 } from "@tiptap/core";
+import { definePlugin as definePlugin18 } from "@kedataindo/docflow-core";
+function todayISO() {
+  return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+function formatDate(iso) {
+  if (!iso) return "Pick a date";
+  const d = /* @__PURE__ */ new Date(iso + "T00:00:00");
+  if (isNaN(d.getTime())) return "Pick a date";
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+function initialOf(name) {
+  return (name || "?").trim().charAt(0).toUpperCase() || "?";
+}
+var DEFAULT_STATUSES = ["To Do", "In Progress", "Review", "Approved"];
+function slugify(s) {
+  return s.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+}
+var DateChipNode = Node5.create({
+  name: "dateChip",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      date: {
+        default: todayISO(),
+        parseHTML: (el) => el.getAttribute("data-date") ?? todayISO(),
+        renderHTML: (attrs) => ({ "data-date": attrs.date ?? "" })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-node-type="date-chip"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes6(HTMLAttributes, {
+      "data-node-type": "date-chip",
+      class: "docs-chip docs-chip--date"
+    }), formatDate(node.attrs.date)];
+  },
+  addNodeView() {
+    return (props) => {
+      let currentNode = props.node;
+      const getPos = props.getPos;
+      const view = props.view;
+      const dom = document.createElement("span");
+      dom.className = "docs-chip docs-chip--date";
+      dom.setAttribute("data-node-type", "date-chip");
+      dom.setAttribute("contenteditable", "false");
+      const render = () => {
+        if (dom.querySelector("input")) return;
+        dom.textContent = formatDate(currentNode.attrs.date);
+        dom.setAttribute("data-date", currentNode.attrs.date);
+      };
+      render();
+      dom.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (dom.querySelector("input")) return;
+        const input = document.createElement("input");
+        input.type = "date";
+        input.value = currentNode.attrs.date;
+        input.className = "docs-chip-date-input";
+        dom.replaceChildren(input);
+        input.focus();
+        const commit = () => {
+          const newVal = input.value;
+          const pos = getPos();
+          if (typeof pos === "number") {
+            view.dispatch(view.state.tr.setNodeMarkup(pos, void 0, { date: newVal }));
+          }
+          setTimeout(render, 30);
+        };
+        input.addEventListener("change", commit);
+        input.addEventListener("blur", () => setTimeout(render, 30));
+      });
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "dateChip") return false;
+          currentNode = updatedNode;
+          render();
+          return true;
+        }
+      };
+    };
+  }
+});
+var PeopleChipNode = Node5.create({
+  name: "peopleChip",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      userId: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-user-id") ?? "",
+        renderHTML: (attrs) => attrs.userId ? { "data-user-id": attrs.userId } : {}
+      },
+      name: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-name") ?? "",
+        renderHTML: (attrs) => ({ "data-name": attrs.name ?? "" })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-node-type="people-chip"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes6(HTMLAttributes, {
+      "data-node-type": "people-chip",
+      class: "docs-chip docs-chip--people"
+    }), `@${node.attrs.name || "user"}`];
+  },
+  addNodeView() {
+    return (props) => {
+      let currentNode = props.node;
+      const dom = document.createElement("span");
+      dom.className = "docs-chip docs-chip--people";
+      dom.setAttribute("data-node-type", "people-chip");
+      dom.setAttribute("contenteditable", "false");
+      const render = () => {
+        const name = currentNode.attrs.name || "user";
+        dom.innerHTML = "";
+        const avatar = document.createElement("span");
+        avatar.className = "docs-chip-avatar";
+        avatar.textContent = initialOf(name);
+        dom.appendChild(avatar);
+        const label = document.createElement("span");
+        label.className = "docs-chip-label";
+        label.textContent = "@" + name;
+        dom.appendChild(label);
+      };
+      render();
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "peopleChip") return false;
+          currentNode = updatedNode;
+          render();
+          return true;
+        }
+      };
+    };
+  }
+});
+var FileChipNode = Node5.create({
+  name: "fileChip",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      fileId: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-file-id") ?? "",
+        renderHTML: (attrs) => attrs.fileId ? { "data-file-id": attrs.fileId } : {}
+      },
+      name: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-name") ?? "",
+        renderHTML: (attrs) => ({ "data-name": attrs.name ?? "" })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-node-type="file-chip"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes6(HTMLAttributes, {
+      "data-node-type": "file-chip",
+      class: "docs-chip docs-chip--file"
+    }), node.attrs.name || "file"];
+  },
+  addNodeView() {
+    return (props) => {
+      let currentNode = props.node;
+      const dom = document.createElement("span");
+      dom.className = "docs-chip docs-chip--file";
+      dom.setAttribute("data-node-type", "file-chip");
+      dom.setAttribute("contenteditable", "false");
+      const render = () => {
+        const name = currentNode.attrs.name || "Untitled file";
+        dom.innerHTML = "";
+        const icon = document.createElement("span");
+        icon.className = "docs-chip-icon";
+        icon.textContent = "\u{1F5CE}";
+        dom.appendChild(icon);
+        const label = document.createElement("span");
+        label.className = "docs-chip-label";
+        label.textContent = name;
+        dom.appendChild(label);
+      };
+      render();
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "fileChip") return false;
+          currentNode = updatedNode;
+          render();
+          return true;
+        }
+      };
+    };
+  }
+});
+var DropdownChipNode = Node5.create({
+  name: "dropdownChip",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      options: {
+        default: DEFAULT_STATUSES,
+        parseHTML: (el) => {
+          const raw = el.getAttribute("data-options") ?? "";
+          const list = raw ? raw.split("|") : [];
+          return list.length ? list : DEFAULT_STATUSES;
+        },
+        renderHTML: (attrs) => ({
+          "data-options": (attrs.options ?? []).join("|")
+        })
+      },
+      selected: {
+        default: DEFAULT_STATUSES[0],
+        parseHTML: (el) => el.getAttribute("data-selected") ?? DEFAULT_STATUSES[0],
+        renderHTML: (attrs) => ({ "data-selected": attrs.selected ?? "" })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-node-type="dropdown-chip"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes6(HTMLAttributes, {
+      "data-node-type": "dropdown-chip",
+      class: "docs-chip docs-chip--dropdown"
+    }), node.attrs.selected || ""];
+  },
+  addNodeView() {
+    return (props) => {
+      let currentNode = props.node;
+      const getPos = props.getPos;
+      const view = props.view;
+      const dom = document.createElement("span");
+      dom.className = "docs-chip docs-chip--dropdown";
+      dom.setAttribute("data-node-type", "dropdown-chip");
+      dom.setAttribute("contenteditable", "false");
+      const render = () => {
+        const opts = currentNode.attrs.options ?? DEFAULT_STATUSES;
+        const sel = currentNode.attrs.selected ?? (opts[0] ?? "");
+        dom.innerHTML = "";
+        const select = document.createElement("select");
+        select.className = "docs-chip-select";
+        select.addEventListener("mousedown", (e) => e.stopPropagation());
+        for (const opt of opts) {
+          const o = document.createElement("option");
+          o.value = opt;
+          o.textContent = opt;
+          if (opt === sel) o.selected = true;
+          select.appendChild(o);
+        }
+        select.addEventListener("change", () => {
+          const pos = getPos();
+          if (typeof pos === "number") {
+            view.dispatch(view.state.tr.setNodeMarkup(pos, void 0, {
+              ...currentNode.attrs,
+              selected: select.value
+            }));
+          }
+        });
+        dom.appendChild(select);
+      };
+      render();
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "dropdownChip") return false;
+          currentNode = updatedNode;
+          render();
+          return true;
+        }
+      };
+    };
+  }
+});
+var LocationChipNode = Node5.create({
+  name: "locationChip",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      label: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-label") ?? "",
+        renderHTML: (attrs) => ({ "data-label": attrs.label ?? "" })
+      },
+      lat: {
+        default: null,
+        parseHTML: (el) => {
+          const v = el.getAttribute("data-lat");
+          return v === null ? null : Number(v);
+        },
+        renderHTML: (attrs) => attrs.lat != null ? { "data-lat": attrs.lat } : {}
+      },
+      lng: {
+        default: null,
+        parseHTML: (el) => {
+          const v = el.getAttribute("data-lng");
+          return v === null ? null : Number(v);
+        },
+        renderHTML: (attrs) => attrs.lng != null ? { "data-lng": attrs.lng } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-node-type="location-chip"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes6(HTMLAttributes, {
+      "data-node-type": "location-chip",
+      class: "docs-chip docs-chip--location"
+    }), node.attrs.label || ""];
+  },
+  addNodeView() {
+    return (props) => {
+      let currentNode = props.node;
+      const dom = document.createElement("span");
+      dom.className = "docs-chip docs-chip--location";
+      dom.setAttribute("data-node-type", "location-chip");
+      dom.setAttribute("contenteditable", "false");
+      const render = () => {
+        const label = currentNode.attrs.label || "Add location";
+        dom.innerHTML = "";
+        const icon = document.createElement("span");
+        icon.className = "docs-chip-icon";
+        icon.textContent = "\u{1F4CD}";
+        dom.appendChild(icon);
+        const lbl = document.createElement("span");
+        lbl.className = "docs-chip-label";
+        lbl.textContent = label;
+        dom.appendChild(lbl);
+      };
+      render();
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "locationChip") return false;
+          currentNode = updatedNode;
+          render();
+          return true;
+        }
+      };
+    };
+  }
+});
+var smartElementsPlugin = definePlugin18({
+  id: "smart-elements",
+  tiptapExtensions: [
+    DateChipNode,
+    PeopleChipNode,
+    FileChipNode,
+    DropdownChipNode,
+    LocationChipNode
+  ],
+  slashCommands: [
+    { name: "Date", command: "insertDateChip" },
+    { name: "People", command: "insertPeopleChip" },
+    { name: "File", command: "insertFileChip" },
+    { name: "Dropdown", command: "insertDropdownChip" },
+    { name: "Location", command: "insertLocationChip" }
+  ],
+  commands: {
+    insertDateChip: (editor) => {
+      return editor.chain().focus().insertContent({
+        type: "dateChip",
+        attrs: { date: todayISO() }
+      }).run();
+    },
+    insertPeopleChip: (editor) => {
+      const name = typeof window !== "undefined" && typeof window.prompt === "function" ? window.prompt("Enter user name:", "") ?? "" : "";
+      if (!name.trim()) return false;
+      const trimmed = name.trim();
+      return editor.chain().focus().insertContent({
+        type: "peopleChip",
+        attrs: { userId: slugify(trimmed), name: trimmed }
+      }).run();
+    },
+    insertFileChip: (editor) => {
+      const name = typeof window !== "undefined" && typeof window.prompt === "function" ? window.prompt("Enter file/document name:", "") ?? "" : "";
+      if (!name.trim()) return false;
+      const trimmed = name.trim();
+      return editor.chain().focus().insertContent({
+        type: "fileChip",
+        attrs: { fileId: slugify(trimmed), name: trimmed }
+      }).run();
+    },
+    insertDropdownChip: (editor) => {
+      return editor.chain().focus().insertContent({
+        type: "dropdownChip",
+        attrs: { options: DEFAULT_STATUSES, selected: DEFAULT_STATUSES[0] }
+      }).run();
+    },
+    insertLocationChip: (editor) => {
+      const label = typeof window !== "undefined" && typeof window.prompt === "function" ? window.prompt("Enter location name:", "") ?? "" : "";
+      if (!label.trim()) return false;
+      return editor.chain().focus().insertContent({
+        type: "locationChip",
+        attrs: { label: label.trim() }
+      }).run();
+    }
+  }
+});
+
 // src/slashMenu.ts
 import { Extension as Extension3 } from "@tiptap/core";
 import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
-import { definePlugin as definePlugin18 } from "@kedataindo/docflow-core";
+import { definePlugin as definePlugin19 } from "@kedataindo/docflow-core";
 var slashState = {
   open: false,
   query: "",
@@ -1395,7 +1922,7 @@ var SlashMenuExtension = Extension3.create({
     ];
   }
 });
-var slashMenuPlugin = definePlugin18({
+var slashMenuPlugin = definePlugin19({
   id: "slash-menu",
   tiptapExtensions: [SlashMenuExtension],
   hooks: {
@@ -1426,7 +1953,8 @@ var defaultPlugins = [
   highlightPlugin,
   citationPlugin,
   aiPlugin,
-  commentPlugin
+  commentPlugin,
+  smartElementsPlugin
 ];
 export {
   AIExtension,
@@ -1438,9 +1966,14 @@ export {
   CiteEngine,
   CommentMark as CommentMarkExtension,
   DEFAULT_CSL_STYLE,
+  DateChipNode,
+  DropdownChipNode,
+  FileChipNode,
   FontSizeExtension,
   FootnoteNode,
+  LocationChipNode,
   PageBreak,
+  PeopleChipNode,
   SlashMenuExtension,
   TocEntryNode,
   TocNode,
@@ -1464,8 +1997,10 @@ export {
   headingsPlugin,
   highlightPlugin,
   imagePlugin,
+  insertMarkdownBlock,
   linkPlugin,
   listsPlugin,
+  markdownToFragment,
   nextCitationId,
   onSlashStateChange,
   pageBreakPlugin,
@@ -1475,6 +2010,7 @@ export {
   sanitizeCiteprocHtml,
   slashMenuPlugin,
   slashState,
+  smartElementsPlugin,
   tablePlugin,
   textColorPlugin,
   tocPlugin

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kedataindo/docflow-plugins",
   "license": "UNLICENSED",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,7 +30,8 @@
     "@tiptap/extension-highlight": "^2.27.2",
     "@tiptap/pm": "^2.11.0",
     "citeproc": "^2.4.63",
-    "@kedataindo/docflow-core": "0.0.29"
+    "tiptap-markdown": "0.8.10",
+    "@kedataindo/docflow-core": "0.0.31"
   },
   "peerDependencies": {
     "@tiptap/core": "^2.11.0",