@kedataindo/docflow-plugins 0.0.31 → 0.0.32

package/dist/index.cjs

@@ -39,9 +39,14 @@ __export(index_exports, {
   CiteEngine: () => CiteEngine,
   CommentMarkExtension: () => CommentMark,
   DEFAULT_CSL_STYLE: () => DEFAULT_CSL_STYLE,
+  DateChipNode: () => DateChipNode,
+  DropdownChipNode: () => DropdownChipNode,
+  FileChipNode: () => FileChipNode,
   FontSizeExtension: () => import_docflow_core14.FontSizeExtension,
   FootnoteNode: () => FootnoteNode,
+  LocationChipNode: () => LocationChipNode,
   PageBreak: () => PageBreak,
+  PeopleChipNode: () => PeopleChipNode,
   SlashMenuExtension: () => SlashMenuExtension,
   TocEntryNode: () => TocEntryNode,
   TocNode: () => TocNode,
@@ -76,6 +81,7 @@ __export(index_exports, {
   sanitizeCiteprocHtml: () => sanitizeCiteprocHtml,
   slashMenuPlugin: () => slashMenuPlugin,
   slashState: () => slashState,
+  smartElementsPlugin: () => smartElementsPlugin,
   tablePlugin: () => tablePlugin,
   textColorPlugin: () => textColorPlugin,
   tocPlugin: () => tocPlugin
@@ -2723,10 +2729,440 @@ var commentPlugin = {
   commands: {}
 };
 
-// src/slashMenu.ts
+// src/smartElements.ts
 var import_core10 = require("@tiptap/core");
-var import_state2 = require("@tiptap/pm/state");
 var import_docflow_core19 = require("@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 = import_core10.Node.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", (0, import_core10.mergeAttributes)(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 = import_core10.Node.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", (0, import_core10.mergeAttributes)(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 = import_core10.Node.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", (0, import_core10.mergeAttributes)(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 = import_core10.Node.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", (0, import_core10.mergeAttributes)(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 = import_core10.Node.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", (0, import_core10.mergeAttributes)(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 = (0, import_docflow_core19.definePlugin)({
+  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
+var import_core11 = require("@tiptap/core");
+var import_state2 = require("@tiptap/pm/state");
+var import_docflow_core20 = require("@kedataindo/docflow-core");
 var slashState = {
   open: false,
   query: "",
@@ -2780,7 +3216,7 @@ function getRegisteredCommands() {
     return true;
   });
 }
-var SlashMenuExtension = import_core10.Extension.create({
+var SlashMenuExtension = import_core11.Extension.create({
   name: "slashMenu",
   addProseMirrorPlugins() {
     return [
@@ -2871,7 +3307,7 @@ var SlashMenuExtension = import_core10.Extension.create({
     ];
   }
 });
-var slashMenuPlugin = (0, import_docflow_core19.definePlugin)({
+var slashMenuPlugin = (0, import_docflow_core20.definePlugin)({
   id: "slash-menu",
   tiptapExtensions: [SlashMenuExtension],
   hooks: {
@@ -2902,7 +3338,8 @@ var defaultPlugins = [
   highlightPlugin,
   citationPlugin,
   aiPlugin,
-  commentPlugin
+  commentPlugin,
+  smartElementsPlugin
 ];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2915,9 +3352,14 @@ var defaultPlugins = [
   CiteEngine,
   CommentMarkExtension,
   DEFAULT_CSL_STYLE,
+  DateChipNode,
+  DropdownChipNode,
+  FileChipNode,
   FontSizeExtension,
   FootnoteNode,
+  LocationChipNode,
   PageBreak,
+  PeopleChipNode,
   SlashMenuExtension,
   TocEntryNode,
   TocNode,
@@ -2952,6 +3394,7 @@ var defaultPlugins = [
   sanitizeCiteprocHtml,
   slashMenuPlugin,
   slashState,
+  smartElementsPlugin,
   tablePlugin,
   textColorPlugin,
   tocPlugin

package/dist/index.d.cts

@@ -225,6 +225,13 @@ declare const CommentMark: Mark<any, any>;
  */
 declare const commentPlugin: DocsEditorPlugin;
 
+declare const DateChipNode: Node<any, any>;
+declare const PeopleChipNode: Node<any, any>;
+declare const FileChipNode: Node<any, any>;
+declare const DropdownChipNode: Node<any, any>;
+declare const LocationChipNode: Node<any, any>;
+declare const smartElementsPlugin: _kedata_indonesia_docflow_core.DocsEditorPlugin;
+
 /**
  * Bibliography — a fully derived block. It stores NOTHING (no attrs): the
  * node view renders the engine's citeproc-sorted entries and repaints on
@@ -257,4 +264,4 @@ declare const slashMenuPlugin: _kedata_indonesia_docflow_core.DocsEditorPlugin;
 
 declare const defaultPlugins: _kedata_indonesia_docflow_core.DocsEditorPlugin[];
 
-export { AIExtension, type AIPreviewState, BibliographyNode, CitationEngineExtension, CitationNode, CiteEngine, type CommentMarkAttrs, CommentMark as CommentMarkExtension, FootnoteNode, PageBreak, type PlaceholderPluginOptions, SlashMenuExtension, TocEntryNode, TocNode, TocPageNumNode, aiPlugin, aiPluginKey, alignmentPlugin, blockquotePlugin, citationPlugin, codeBlockPlugin, collectHeadings, commentPlugin, createPlaceholderPlugin, defaultPlugins, fontSizePlugin, footnotePlugin, formattingPlugin, getAIPreview, getCitationEngine, headingsPlugin, highlightPlugin, imagePlugin, linkPlugin, listsPlugin, onSlashStateChange, pageBreakPlugin, placeholderPlugin, regenerateToc, registerSlashCommands, slashMenuPlugin, slashState, tablePlugin, textColorPlugin, tocPlugin };
+export { AIExtension, type AIPreviewState, BibliographyNode, CitationEngineExtension, CitationNode, CiteEngine, type CommentMarkAttrs, CommentMark as CommentMarkExtension, DateChipNode, DropdownChipNode, FileChipNode, FootnoteNode, LocationChipNode, PageBreak, PeopleChipNode, type PlaceholderPluginOptions, SlashMenuExtension, TocEntryNode, TocNode, TocPageNumNode, aiPlugin, aiPluginKey, alignmentPlugin, blockquotePlugin, citationPlugin, codeBlockPlugin, collectHeadings, commentPlugin, createPlaceholderPlugin, defaultPlugins, fontSizePlugin, footnotePlugin, formattingPlugin, getAIPreview, getCitationEngine, headingsPlugin, highlightPlugin, imagePlugin, linkPlugin, listsPlugin, onSlashStateChange, pageBreakPlugin, placeholderPlugin, regenerateToc, registerSlashCommands, slashMenuPlugin, slashState, smartElementsPlugin, tablePlugin, textColorPlugin, tocPlugin };

package/dist/index.d.ts

@@ -225,6 +225,13 @@ declare const CommentMark: Mark<any, any>;
  */
 declare const commentPlugin: DocsEditorPlugin;
 
+declare const DateChipNode: Node<any, any>;
+declare const PeopleChipNode: Node<any, any>;
+declare const FileChipNode: Node<any, any>;
+declare const DropdownChipNode: Node<any, any>;
+declare const LocationChipNode: Node<any, any>;
+declare const smartElementsPlugin: _kedata_indonesia_docflow_core.DocsEditorPlugin;
+
 /**
  * Bibliography — a fully derived block. It stores NOTHING (no attrs): the
  * node view renders the engine's citeproc-sorted entries and repaints on
@@ -257,4 +264,4 @@ declare const slashMenuPlugin: _kedata_indonesia_docflow_core.DocsEditorPlugin;
 
 declare const defaultPlugins: _kedata_indonesia_docflow_core.DocsEditorPlugin[];
 
-export { AIExtension, type AIPreviewState, BibliographyNode, CitationEngineExtension, CitationNode, CiteEngine, type CommentMarkAttrs, CommentMark as CommentMarkExtension, FootnoteNode, PageBreak, type PlaceholderPluginOptions, SlashMenuExtension, TocEntryNode, TocNode, TocPageNumNode, aiPlugin, aiPluginKey, alignmentPlugin, blockquotePlugin, citationPlugin, codeBlockPlugin, collectHeadings, commentPlugin, createPlaceholderPlugin, defaultPlugins, fontSizePlugin, footnotePlugin, formattingPlugin, getAIPreview, getCitationEngine, headingsPlugin, highlightPlugin, imagePlugin, linkPlugin, listsPlugin, onSlashStateChange, pageBreakPlugin, placeholderPlugin, regenerateToc, registerSlashCommands, slashMenuPlugin, slashState, tablePlugin, textColorPlugin, tocPlugin };
+export { AIExtension, type AIPreviewState, BibliographyNode, CitationEngineExtension, CitationNode, CiteEngine, type CommentMarkAttrs, CommentMark as CommentMarkExtension, DateChipNode, DropdownChipNode, FileChipNode, FootnoteNode, LocationChipNode, PageBreak, PeopleChipNode, type PlaceholderPluginOptions, SlashMenuExtension, TocEntryNode, TocNode, TocPageNumNode, aiPlugin, aiPluginKey, alignmentPlugin, blockquotePlugin, citationPlugin, codeBlockPlugin, collectHeadings, commentPlugin, createPlaceholderPlugin, defaultPlugins, fontSizePlugin, footnotePlugin, formattingPlugin, getAIPreview, getCitationEngine, headingsPlugin, highlightPlugin, imagePlugin, linkPlugin, listsPlugin, onSlashStateChange, pageBreakPlugin, placeholderPlugin, regenerateToc, registerSlashCommands, slashMenuPlugin, slashState, smartElementsPlugin, tablePlugin, textColorPlugin, tocPlugin };

package/dist/index.js

@@ -1247,10 +1247,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 +1825,7 @@ var SlashMenuExtension = Extension3.create({
     ];
   }
 });
-var slashMenuPlugin = definePlugin18({
+var slashMenuPlugin = definePlugin19({
   id: "slash-menu",
   tiptapExtensions: [SlashMenuExtension],
   hooks: {
@@ -1426,7 +1856,8 @@ var defaultPlugins = [
   highlightPlugin,
   citationPlugin,
   aiPlugin,
-  commentPlugin
+  commentPlugin,
+  smartElementsPlugin
 ];
 export {
   AIExtension,
@@ -1438,9 +1869,14 @@ export {
   CiteEngine,
   CommentMark as CommentMarkExtension,
   DEFAULT_CSL_STYLE,
+  DateChipNode,
+  DropdownChipNode,
+  FileChipNode,
   FontSizeExtension,
   FootnoteNode,
+  LocationChipNode,
   PageBreak,
+  PeopleChipNode,
   SlashMenuExtension,
   TocEntryNode,
   TocNode,
@@ -1475,6 +1911,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.32",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,7 +30,7 @@
     "@tiptap/extension-highlight": "^2.27.2",
     "@tiptap/pm": "^2.11.0",
     "citeproc": "^2.4.63",
-    "@kedataindo/docflow-core": "0.0.29"
+    "@kedataindo/docflow-core": "0.0.30"
   },
   "peerDependencies": {
     "@tiptap/core": "^2.11.0",