@estiva-app/ui 0.50.4 → 0.52.0

package/dist/editor.js

@@ -347,12 +347,298 @@ function suggestionPopup(options) {
   };
 }
 
+// src/ComposerTriggers.tsx
+import { Extension as Extension2 } from "@tiptap/core";
+import { PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import Mention from "@tiptap/extension-mention";
+import Suggestion from "@tiptap/suggestion";
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { Avatar } from "@estiva-app/ui";
+import { EnterHint } from "@estiva-app/ui";
+import { inlineChipClassName } from "@estiva-app/ui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PEOPLE_LIMIT = 6;
+function filterPeople(people, query) {
+  const q = query.toLowerCase();
+  return people.filter((person) => q === "" || person.name.toLowerCase().includes(q)).slice(0, PEOPLE_LIMIT);
+}
+function peopleMenu(urgent) {
+  const section = urgent ? "Urgent mention" : "People";
+  return {
+    ariaLabel: section,
+    // The people and the reference lists are the same box: 658px, capped at 360.
+    width: "w-[658px]",
+    maxHeight: "max-h-[360px]",
+    sections: (people) => [{ label: section, items: people, className: "px-3 py-1" }],
+    itemKey: (person) => person.id,
+    row: (person) => ({
+      label: person.name,
+      description: person.description,
+      leading: person.avatar ?? /* @__PURE__ */ jsx3(Avatar, { size: 32, alt: person.name }),
+      hint: /* @__PURE__ */ jsx3(EnterHint, {}),
+      size: "tall"
+    })
+  };
+}
+function optionsOf(editor, name) {
+  return editor.extensionManager.extensions.find((one) => one.name === name)?.options;
+}
+function personSuggestion(urgent, name) {
+  return {
+    ...urgent ? { char: "!@" } : {},
+    items: ({ query, editor }) => filterPeople(optionsOf(editor, name)?.people() ?? [], query),
+    render: suggestionPopup(peopleMenu(urgent)),
+    command: ({ editor, range, props: person }) => {
+      editor.chain().focus().insertContentAt(range, [
+        { type: name, attrs: { id: person.id, label: person.name, pubkey: person.pubkey ?? null } },
+        { type: "text", text: " " }
+      ]).run();
+    }
+  };
+}
+var HEX_KEY = /^[0-9a-f]{64}$/;
+var NOSTR_URI = /^nostr:[a-z0-9]+$/i;
+var fromData = (name, valid) => ({
+  parseHTML: (element) => {
+    const value = element.getAttribute(`data-${name}`);
+    return value !== null && (!valid || valid.test(value)) ? value : null;
+  },
+  // The node's own `renderHTML` writes it.
+  renderHTML: () => ({})
+});
+var personAttributes = () => ({
+  id: { default: null, ...fromData("id") },
+  label: { default: null, ...fromData("label") },
+  /**
+   * The person's Nostr key, when they have one — SPEC §13.1. `id` is the app's
+   * own and means nothing to another app; this is what the body is written
+   * with, so a mention survives a rename.
+   */
+  pubkey: { default: null, ...fromData("pubkey", HEX_KEY) }
+});
+function personData(attrs) {
+  return {
+    "data-id": String(attrs.id ?? ""),
+    "data-label": String(attrs.label ?? ""),
+    ...typeof attrs.pubkey === "string" && attrs.pubkey ? { "data-pubkey": attrs.pubkey } : {}
+  };
+}
+var PersonMention = Mention.extend({
+  name: "mention",
+  addOptions() {
+    return { ...this.parent(), HTMLAttributes: {}, people: () => [], suggestion: personSuggestion(false, this.name) };
+  },
+  addAttributes: personAttributes,
+  renderHTML({ node }) {
+    return ["span", { "data-mention": "true", ...personData(node.attrs), class: inlineChipClassName("person", "cursor-default") }, `@${node.attrs.label}`];
+  },
+  parseHTML() {
+    return [{ tag: "span[data-mention]" }];
+  }
+});
+var UrgentPersonMention = Mention.extend({
+  name: "urgentMention",
+  addOptions() {
+    return { ...this.parent(), HTMLAttributes: {}, people: () => [], suggestion: personSuggestion(true, this.name) };
+  },
+  addAttributes: personAttributes,
+  renderHTML({ node }) {
+    return [
+      "span",
+      { "data-urgent-mention": "true", ...personData(node.attrs), class: inlineChipClassName("urgent", "cursor-default") },
+      `@${node.attrs.label}`
+    ];
+  },
+  parseHTML() {
+    return [{ tag: "span[data-urgent-mention]" }];
+  }
+});
+function urgentPubkeys(editor) {
+  const urgent = [];
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "urgentMention" && typeof node.attrs.pubkey === "string" && node.attrs.pubkey) urgent.push(node.attrs.pubkey);
+  });
+  return urgent.length > 0 ? urgent : void 0;
+}
+var REFERENCE_LIMIT = 6;
+function filterReferences(items, query) {
+  const q = query.toLowerCase();
+  const shown = q ? items.filter((item) => (item.search ?? item.snippet).toLowerCase().includes(q) || item.label.toLowerCase().includes(q)) : [...items];
+  return shown.slice(-REFERENCE_LIMIT);
+}
+var captionOf = (label, snippet) => snippet ? `${label}: ${snippet}` : label;
+var CaptionedReference = Mention.extend({
+  name: "captionedReference",
+  group: "inline",
+  inline: true,
+  atom: true,
+  addOptions() {
+    return { ...this.parent(), HTMLAttributes: {}, icon: null, suggestion: { char: "\0", items: () => [] } };
+  },
+  addAttributes() {
+    return {
+      id: { default: null, ...fromData("id") },
+      label: { default: null, ...fromData("label") },
+      snippet: { default: "", parseHTML: (element) => element.getAttribute("data-snippet") ?? "", renderHTML: () => ({}) },
+      uri: { default: null, ...fromData("uri", NOSTR_URI) }
+    };
+  },
+  renderHTML({ node }) {
+    return [
+      "span",
+      { [`data-${this.name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`]: "true", "data-id": String(node.attrs.id ?? ""), "data-label": String(node.attrs.label ?? ""), "data-snippet": String(node.attrs.snippet ?? ""), ...node.attrs.uri ? { "data-uri": String(node.attrs.uri) } : {}, class: inlineChipClassName("neutral", "cursor-default") },
+      captionOf(node.attrs.label, node.attrs.snippet)
+    ];
+  },
+  parseHTML() {
+    return [{ tag: `span[data-${this.name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}]` }];
+  },
+  addNodeView() {
+    const icon = this.options.icon;
+    return ReactNodeViewRenderer(
+      ({ node }) => /* @__PURE__ */ jsxs2(NodeViewWrapper, { as: "span", className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: icon }),
+        /* @__PURE__ */ jsx3("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
+      ] }),
+      { as: "span" }
+    );
+  }
+});
+function referenceMenu({ ariaLabel, sectionLabel, icon }) {
+  return {
+    ariaLabel,
+    width: "w-[658px]",
+    maxHeight: "max-h-[360px]",
+    sections: (items) => [{ label: sectionLabel, items, className: "px-2" }],
+    itemKey: (item) => `reference-${item.id}`,
+    row: (item) => ({ leading: icon, label: captionOf(item.label, item.snippet), hint: /* @__PURE__ */ jsx3(EnterHint, {}) })
+  };
+}
+var ReferenceTrigger = Extension2.create({
+  name: "referenceTrigger",
+  addOptions() {
+    return { items: () => [], nodeName: "captionedReference", ariaLabel: "References", sectionLabel: "References", icon: null };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "[",
+        pluginKey: new PluginKey2("referenceTrigger"),
+        // As a mention's: only where the chip may go.
+        allow: ({ state, range }) => {
+          const type = state.schema.nodes[options.nodeName];
+          return !!type && !!state.doc.resolve(range.from).parent.type.contentMatch.matchType(type);
+        },
+        items: ({ query }) => filterReferences(options.items(), query),
+        render: suggestionPopup(referenceMenu(options)),
+        command: ({ editor, range, props: item }) => {
+          editor.chain().focus().insertContentAt(range, [
+            { type: options.nodeName, attrs: { id: item.id, label: item.label, snippet: item.snippet, uri: item.uri } },
+            { type: "text", text: " " }
+          ]).run();
+        }
+      })
+    ];
+  }
+});
+var FORMATS = [
+  { id: "paragraph", label: "Text" },
+  { id: "heading", label: "Heading", trigger: "#" },
+  { id: "subheading", label: "Subheading", trigger: "##" },
+  { id: "quote", label: "Quote", trigger: ">" },
+  { id: "code", label: "Code", trigger: "`" },
+  { id: "bulletList", label: "Bulleted list", trigger: "-" },
+  { id: "orderedList", label: "Numbered list", trigger: "1." }
+];
+function applyFormat(editor, id, code = "inline") {
+  const chain = editor.chain().focus();
+  const run = (command, ...args) => {
+    const named = chain[command];
+    return named ? named(...args).run() : false;
+  };
+  switch (id) {
+    case "paragraph":
+      return run("setParagraph");
+    case "heading":
+      return run("setHeading", { level: 1 });
+    case "subheading":
+      return run("setHeading", { level: 2 });
+    case "quote":
+      return run("toggleBlockquote");
+    case "bulletList":
+      return run("toggleBulletList");
+    case "orderedList":
+      return run("toggleOrderedList");
+    case "code":
+      return run(code === "block" ? "toggleCodeBlock" : "toggleCode");
+    default:
+      return false;
+  }
+}
+function formatSection(code = "inline") {
+  return {
+    label: "Format",
+    commands: FORMATS.map((format) => ({
+      key: `format-${format.id}`,
+      row: { label: format.label, shortcut: format.trigger },
+      keywords: [format.id],
+      run: (editor) => {
+        applyFormat(editor, format.id, code);
+      }
+    }))
+  };
+}
+function typeTrigger(input) {
+  return (editor) => {
+    requestAnimationFrame(() => editor.commands.insertContent(input));
+  };
+}
+function matches(command, q) {
+  return [command.row.label, ...command.keywords ?? []].some((text) => text.toLowerCase().includes(q));
+}
+function filterSlashSections(sections, query) {
+  const q = query.toLowerCase();
+  return sections.map((section) => ({ ...section, commands: q ? section.commands.filter((command) => matches(command, q)) : section.commands }));
+}
+var SlashCommands = Extension2.create({
+  name: "slashCommands",
+  addOptions() {
+    return { sections: [formatSection()] };
+  },
+  addProseMirrorPlugins() {
+    const sections = this.options.sections;
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "/",
+        startOfLine: false,
+        pluginKey: new PluginKey2("slashCommands"),
+        items: ({ query }) => filterSlashSections(sections, query).flatMap((section, at) => section.commands.map((command) => ({ ...command, section: at }))),
+        command: ({ editor, range, props }) => {
+          editor.chain().focus().deleteRange(range).run();
+          props.run(editor);
+        },
+        render: suggestionPopup({
+          ariaLabel: "Commands",
+          width: "w-[300px]",
+          maxHeight: "max-h-[400px]",
+          sections: (rows) => sections.map((section, at) => ({ label: section.label, items: rows.filter((row) => row.section === at) })),
+          itemKey: (row) => row.key,
+          row: (row) => row.row
+        })
+      })
+    ];
+  }
+});
+
 // src/BlockNodes.tsx
-import { Extension as Extension2, Node as Node2 } from "@tiptap/core";
-import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { Extension as Extension3, Node as Node2 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey3 } from "@tiptap/pm/state";
 import { Mapping, ReplaceAroundStep } from "@tiptap/pm/transform";
-import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var BLOCK_TYPES = [
   "paragraph",
   "heading",
@@ -497,7 +783,7 @@ function bringsInBlocks(transactions) {
     })
   );
 }
-var BlockId = Extension2.create({
+var BlockId = Extension3.create({
   name: "blockId",
   onCreate() {
     const { state, view } = this.editor;
@@ -510,7 +796,7 @@ var BlockId = Extension2.create({
   addProseMirrorPlugins() {
     return [
       new Plugin2({
-        key: new PluginKey2("blockIdSplit"),
+        key: new PluginKey3("blockIdSplit"),
         appendTransaction: (transactions, old, state) => {
           if (!bringsInBlocks(transactions)) return null;
           const mapping = new Mapping();
@@ -569,7 +855,7 @@ var ReferenceNode = Node2.create({
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer(({ node }) => /* @__PURE__ */ jsx3(NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsx3(View, { uri: String(node.attrs.uri ?? "") }) }));
+    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx4(NodeViewWrapper2, { as: "span", className: "inline", children: /* @__PURE__ */ jsx4(View, { uri: String(node.attrs.uri ?? "") }) }));
   }
 });
 var UnknownBlock = Node2.create({
@@ -591,14 +877,14 @@ var UnknownBlock = Node2.create({
     return ["div", { "data-unknown-block": String(node.attrs.blockId ?? "") }, String(node.attrs.text ?? "")];
   },
   addNodeView() {
-    return ReactNodeViewRenderer(UnknownBlockView);
+    return ReactNodeViewRenderer2(UnknownBlockView);
   }
 });
 function UnknownBlockView({ node }) {
   const source = node.attrs.source;
   const text = String(node.attrs.text ?? "");
-  return /* @__PURE__ */ jsx3(
-    NodeViewWrapper,
+  return /* @__PURE__ */ jsx4(
+    NodeViewWrapper2,
     {
       "data-block-id": source?.id,
       "data-block-type": source?.type,
@@ -637,19 +923,34 @@ var AttachmentNode = Node2.create({
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer(({ node }) => /* @__PURE__ */ jsx3(NodeViewWrapper, { className: "my-2", children: /* @__PURE__ */ jsx3(View, { attrs: node.attrs }) }));
+    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx4(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx4(View, { attrs: node.attrs }) }));
   }
 });
 export {
   AttachmentNode,
   BlockId,
+  CaptionedReference,
+  FORMATS,
   KeptSelection,
+  PersonMention,
   ReferenceNode,
+  ReferenceTrigger,
   SelectionToolbar,
+  SlashCommands,
   UnknownBlock,
+  UrgentPersonMention,
+  applyFormat,
+  filterPeople,
+  filterReferences,
+  filterSlashSections,
+  formatSection,
   isSuggestionActive,
   isSuggestionOpen,
   normalizeHref,
-  suggestionPopup
+  peopleMenu,
+  referenceMenu,
+  suggestionPopup,
+  typeTrigger,
+  urgentPubkeys
 };
 //# sourceMappingURL=editor.js.map