@editorjs-mentions/plugin 0.1.4

package/dist/index.mjs

@@ -0,0 +1,927 @@
+// src/dropdown.ts
+var MentionsDropdown = class {
+  constructor(options) {
+    this.items = [];
+    this.activeIndex = 0;
+    this.onSelect = options.onSelect;
+    this.renderItem = options.renderItem;
+    this.className = options.className;
+    this.root = document.createElement("div");
+    this.root.className = this.className || "editorjs-mentions-dropdown";
+    this.root.style.display = "none";
+    document.body.appendChild(this.root);
+  }
+  show(position, items) {
+    this.items = items;
+    this.activeIndex = 0;
+    this.root.innerHTML = "";
+    items.forEach((item, index) => {
+      const row = document.createElement("div");
+      row.className = "editorjs-mentions-item";
+      row.dataset.active = index === this.activeIndex ? "true" : "false";
+      row.addEventListener("mousedown", (event) => {
+        event.preventDefault();
+        this.onSelect(item);
+      });
+      if (this.renderItem) {
+        row.innerHTML = this.renderItem(item);
+      } else {
+        const avatar = document.createElement("img");
+        avatar.className = "editorjs-mentions-item-avatar";
+        avatar.alt = item.displayName;
+        avatar.src = item.image || `data:image/svg+xml,${encodeURIComponent(
+          `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><rect width="28" height="28" fill="#D5DEF0"/><text x="50%" y="55%" text-anchor="middle" fill="#334155" font-size="12" font-family="sans-serif">${item.displayName.slice(0, 1).toUpperCase()}</text></svg>`
+        )}`;
+        const main = document.createElement("div");
+        main.className = "editorjs-mentions-item-main";
+        const name = document.createElement("div");
+        name.className = "editorjs-mentions-item-name";
+        name.textContent = item.displayName;
+        main.appendChild(name);
+        if (item.description) {
+          const description = document.createElement("div");
+          description.className = "editorjs-mentions-item-description";
+          description.textContent = item.description;
+          main.appendChild(description);
+        }
+        row.appendChild(avatar);
+        row.appendChild(main);
+      }
+      this.root.appendChild(row);
+    });
+    this.root.style.left = `${Math.max(8, position.left)}px`;
+    this.root.style.top = `${Math.max(8, position.top)}px`;
+    this.root.style.display = items.length > 0 ? "block" : "none";
+  }
+  hide() {
+    this.root.style.display = "none";
+    this.items = [];
+    this.activeIndex = 0;
+  }
+  isVisible() {
+    return this.root.style.display !== "none";
+  }
+  hasItems() {
+    return this.items.length > 0;
+  }
+  moveUp() {
+    if (!this.items.length) {
+      return;
+    }
+    this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
+    this.syncActiveRow();
+  }
+  moveDown() {
+    if (!this.items.length) {
+      return;
+    }
+    this.activeIndex = (this.activeIndex + 1) % this.items.length;
+    this.syncActiveRow();
+  }
+  chooseActive() {
+    if (!this.items.length) {
+      return;
+    }
+    this.onSelect(this.items[this.activeIndex]);
+  }
+  destroy() {
+    this.root.remove();
+  }
+  syncActiveRow() {
+    Array.from(this.root.children).forEach((child, index) => {
+      const row = child;
+      row.dataset.active = index === this.activeIndex ? "true" : "false";
+      if (index === this.activeIndex) {
+        row.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }
+};
+
+// src/providers.ts
+function normalizeProvider(provider) {
+  if (typeof provider === "function") {
+    return provider;
+  }
+  return provider.search.bind(provider);
+}
+function createRestMentionProvider(options) {
+  const queryParam = options.queryParam ?? "query";
+  const triggerParam = options.triggerParam ?? "trigger";
+  const limitParam = options.limitParam ?? "limit";
+  return async (query) => {
+    const url = new URL(options.endpoint, window.location.origin);
+    url.searchParams.set(queryParam, query.query);
+    url.searchParams.set(triggerParam, query.trigger);
+    url.searchParams.set(limitParam, String(query.limit));
+    const response = await fetch(url.toString(), options.fetchInit);
+    if (!response.ok) {
+      throw new Error(`Mention provider request failed: ${response.status}`);
+    }
+    const json = await response.json();
+    if (options.mapResponse) {
+      return options.mapResponse(json);
+    }
+    if (typeof json !== "object" || json === null || !("items" in json)) {
+      return [];
+    }
+    const maybeItems = json.items;
+    return Array.isArray(maybeItems) ? maybeItems : [];
+  };
+}
+
+// src/styles.ts
+var MENTIONS_STYLE_ID = "editorjs-mentions-style";
+var CSS = `
+a.editorjs-mention,
+a.editorjs-mention:visited,
+a.editorjs-mention:hover,
+a.editorjs-mention:active,
+.editorjs-mention {
+  background: #e9f2ff;
+  color: #0b4fb3;
+  border-radius: 4px;
+  padding: 0 4px;
+  white-space: nowrap;
+  text-decoration: none !important;
+  cursor: pointer;
+}
+
+.editorjs-mentions-dropdown {
+  position: fixed;
+  min-width: 260px;
+  max-width: 360px;
+  max-height: 280px;
+  overflow: auto;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid #d7dde5;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+}
+
+.editorjs-mentions-item {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  cursor: pointer;
+}
+
+.editorjs-mentions-item:hover,
+.editorjs-mentions-item[data-active="true"] {
+  background: #f4f8ff;
+}
+
+.editorjs-mentions-item-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: #d5def0;
+}
+
+.editorjs-mentions-item-main {
+  min-width: 0;
+}
+
+.editorjs-mentions-item-name {
+  font-size: 14px;
+  color: #1f2937;
+  line-height: 1.2;
+}
+
+.editorjs-mentions-item-description {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editorjs-mention-tooltip {
+  position: fixed;
+  z-index: 10000;
+  min-width: 220px;
+  max-width: 320px;
+  background: #fff;
+  border: 1px solid #d7dde5;
+  border-radius: 10px;
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
+}
+
+.editorjs-mention-tooltip-inner {
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  gap: 10px;
+  padding: 10px;
+  align-items: start;
+}
+
+.editorjs-mention-tooltip-image,
+.editorjs-mention-tooltip-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.editorjs-mention-tooltip-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #d5def0;
+  color: #334155;
+  font-weight: 600;
+}
+
+.editorjs-mention-tooltip-name {
+  font-size: 14px;
+  line-height: 1.2;
+  color: #1f2937;
+}
+
+.editorjs-mention-tooltip-description {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.editorjs-mention-tooltip-link {
+  margin-top: 7px;
+  display: inline-block;
+  font-size: 12px;
+  color: #0b4fb3;
+}
+`;
+function ensureMentionsStyleInjected() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(MENTIONS_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = MENTIONS_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+
+// src/editorjs-mentions.ts
+var EditorJSMentions = class {
+  constructor(config) {
+    this.requestSerial = 0;
+    this.activeContext = null;
+    this.destroyed = false;
+    this.onClick = (event) => {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      const mentionNode = target?.closest("a.editorjs-mention");
+      if (mentionNode) {
+        event.preventDefault();
+        const item = this.readMentionFromElement(mentionNode);
+        if (item) {
+          this.showTooltip(mentionNode, item);
+        }
+        return;
+      }
+      this.hideTooltip();
+      if (!this.dropdown.isVisible()) {
+        return;
+      }
+      this.evaluateAndFetch();
+    };
+    this.onDocumentMouseDown = (event) => {
+      if (!this.tooltipRoot || this.tooltipRoot.style.display === "none") {
+        return;
+      }
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const clickedMention = target instanceof HTMLElement ? target.closest("a.editorjs-mention") : null;
+      if (clickedMention || this.tooltipRoot.contains(target)) {
+        return;
+      }
+      this.hideTooltip();
+    };
+    this.onInput = () => {
+      this.evaluateAndFetch();
+    };
+    this.onCopy = (event) => {
+      this.handleCopyOrCut(event, false);
+    };
+    this.onCut = (event) => {
+      this.handleCopyOrCut(event, true);
+    };
+    this.onPaste = (event) => {
+      const data = event.clipboardData;
+      if (!data) {
+        return;
+      }
+      const customHtml = data.getData("application/x-editorjs-mentions");
+      const plainHtml = data.getData("text/html");
+      const candidateHtml = customHtml || plainHtml;
+      if (!candidateHtml || !candidateHtml.includes("editorjs-mention")) {
+        return;
+      }
+      const normalized = normalizeMentionAnchorsHtml(candidateHtml);
+      if (!normalized) {
+        return;
+      }
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      const range = selection.getRangeAt(0);
+      range.deleteContents();
+      const fragment = range.createContextualFragment(normalized);
+      const pastedMentions = Array.from(fragment.querySelectorAll("a.editorjs-mention"));
+      const last = fragment.lastChild;
+      range.insertNode(fragment);
+      for (const mention of pastedMentions) {
+        const item = this.readMentionFromElement(mention);
+        if (!item) {
+          continue;
+        }
+        const trigger = mention.dataset.mentionTrigger || "@";
+        this.applyMentionRendering(mention, item, trigger, "paste");
+      }
+      if (last) {
+        const caret = document.createRange();
+        caret.setStartAfter(last);
+        caret.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(caret);
+      }
+    };
+    this.onKeyDown = (event) => {
+      if (!this.dropdown.isVisible()) {
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.dropdown.moveDown();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.dropdown.moveUp();
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.dropdown.chooseActive();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.dropdown.hide();
+        this.activeContext = null;
+      }
+    };
+    this.holder = typeof config.holder === "string" ? document.getElementById(config.holder) ?? (() => {
+      throw new Error(`Cannot find holder element by id: ${config.holder}`);
+    })() : config.holder;
+    this.config = {
+      triggerSymbols: config.triggerSymbols ?? ["@"],
+      maxResults: config.maxResults ?? 8,
+      minChars: config.minChars ?? 0,
+      debounceMs: config.debounceMs ?? 160,
+      onSelect: config.onSelect,
+      renderItem: config.renderItem,
+      className: config.className,
+      renderMention: config.renderMention,
+      mentionRenderContext: config.mentionRenderContext
+    };
+    this.provider = normalizeProvider(config.provider);
+    ensureMentionsStyleInjected();
+    this.dropdown = new MentionsDropdown({
+      className: this.config.className,
+      renderItem: this.config.renderItem,
+      onSelect: (item) => this.selectMention(item)
+    });
+    this.tooltipRoot = document.createElement("div");
+    this.tooltipRoot.className = "editorjs-mention-tooltip";
+    this.tooltipRoot.style.display = "none";
+    document.body.appendChild(this.tooltipRoot);
+    this.bind();
+    this.refreshMentionRendering();
+  }
+  setMentionRenderContext(context) {
+    this.config.mentionRenderContext = context;
+    this.refreshMentionRendering();
+  }
+  refreshMentionRendering() {
+    const mentions = Array.from(this.holder.querySelectorAll("a.editorjs-mention"));
+    for (const mention of mentions) {
+      const anchor = mention;
+      const item = this.readMentionFromElement(anchor);
+      if (!item) {
+        continue;
+      }
+      const trigger = anchor.dataset.mentionTrigger || (anchor.textContent?.startsWith("@") ? "@" : "@");
+      this.applyMentionRendering(anchor, item, trigger, "refresh");
+    }
+  }
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    this.holder.removeEventListener("input", this.onInput, true);
+    this.holder.removeEventListener("keydown", this.onKeyDown, true);
+    this.holder.removeEventListener("click", this.onClick, true);
+    this.holder.removeEventListener("copy", this.onCopy, true);
+    this.holder.removeEventListener("cut", this.onCut, true);
+    this.holder.removeEventListener("paste", this.onPaste, true);
+    document.removeEventListener("mousedown", this.onDocumentMouseDown, true);
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+    this.dropdown.destroy();
+    this.tooltipRoot.remove();
+  }
+  bind() {
+    this.holder.addEventListener("input", this.onInput, true);
+    this.holder.addEventListener("keydown", this.onKeyDown, true);
+    this.holder.addEventListener("click", this.onClick, true);
+    this.holder.addEventListener("copy", this.onCopy, true);
+    this.holder.addEventListener("cut", this.onCut, true);
+    this.holder.addEventListener("paste", this.onPaste, true);
+    document.addEventListener("mousedown", this.onDocumentMouseDown, true);
+  }
+  handleCopyOrCut(event, isCut) {
+    const selection = window.getSelection();
+    const data = event.clipboardData;
+    if (!selection || !selection.rangeCount || !data || selection.isCollapsed) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const root = range.commonAncestorContainer;
+    if (!this.holder.contains(root.nodeType === Node.ELEMENT_NODE ? root : root.parentNode)) {
+      return;
+    }
+    const fragment = range.cloneContents();
+    const wrapper = document.createElement("div");
+    wrapper.appendChild(fragment);
+    const html = wrapper.innerHTML;
+    if (!html.includes("editorjs-mention")) {
+      return;
+    }
+    const normalized = normalizeMentionAnchorsHtml(html);
+    const plain = selection.toString().replace(/\u00A0/g, " ");
+    data.setData("text/plain", plain);
+    data.setData("text/html", normalized);
+    data.setData("application/x-editorjs-mentions", normalized);
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    if (isCut) {
+      range.deleteContents();
+      selection.removeAllRanges();
+      const caret = document.createRange();
+      caret.setStart(range.startContainer, range.startOffset);
+      caret.collapse(true);
+      selection.addRange(caret);
+    }
+  }
+  evaluateAndFetch() {
+    this.activeContext = this.readActiveContext();
+    if (!this.activeContext || this.activeContext.query.length < this.config.minChars) {
+      this.dropdown.hide();
+      return;
+    }
+    const requestId = ++this.requestSerial;
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+    this.debounceTimer = window.setTimeout(async () => {
+      try {
+        const items = await this.provider({
+          trigger: this.activeContext.trigger,
+          query: this.activeContext.query,
+          limit: this.config.maxResults
+        });
+        if (requestId !== this.requestSerial || !this.activeContext) {
+          return;
+        }
+        const caretRect = this.getCaretRect();
+        if (!caretRect) {
+          this.dropdown.hide();
+          return;
+        }
+        this.dropdown.show(
+          {
+            left: caretRect.left,
+            top: caretRect.bottom + 6
+          },
+          items
+        );
+      } catch {
+        this.dropdown.hide();
+      }
+    }, this.config.debounceMs);
+  }
+  readActiveContext() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount || !selection.isCollapsed) {
+      return null;
+    }
+    const range = selection.getRangeAt(0);
+    let node = range.startContainer;
+    let offset = range.startOffset;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      if (!node.childNodes.length || offset === 0) {
+        return null;
+      }
+      const child = node.childNodes[Math.max(0, offset - 1)];
+      if (!child || child.nodeType !== Node.TEXT_NODE) {
+        return null;
+      }
+      node = child;
+      offset = child.data.length;
+    }
+    const textNode = node;
+    const textBefore = textNode.data.slice(0, offset);
+    let best = null;
+    for (const trigger of this.config.triggerSymbols) {
+      const index = textBefore.lastIndexOf(trigger);
+      if (index < 0) {
+        continue;
+      }
+      if (best === null || index > best.index) {
+        best = { trigger, index };
+      }
+    }
+    if (!best) {
+      return null;
+    }
+    const charBeforeTrigger = best.index === 0 ? " " : textBefore[best.index - 1];
+    if (!/\s/.test(charBeforeTrigger)) {
+      return null;
+    }
+    const query = textBefore.slice(best.index + best.trigger.length);
+    if (/\s/.test(query)) {
+      return null;
+    }
+    return {
+      trigger: best.trigger,
+      query,
+      textNode,
+      startOffset: best.index,
+      endOffset: offset
+    };
+  }
+  selectMention(item) {
+    const context = this.activeContext;
+    if (!context) {
+      return;
+    }
+    const range = document.createRange();
+    range.setStart(context.textNode, context.startOffset);
+    range.setEnd(context.textNode, context.endOffset);
+    range.deleteContents();
+    const anchor = document.createElement("a");
+    anchor.className = "editorjs-mention";
+    anchor.contentEditable = "false";
+    anchor.href = `mention://${encodeURIComponent(item.id)}`;
+    anchor.dataset.mentionPayload = encodeURIComponent(
+      JSON.stringify({
+        id: item.id,
+        displayName: item.displayName,
+        description: item.description,
+        image: item.image,
+        link: item.link
+      })
+    );
+    anchor.dataset.mentionLink = item.link || "";
+    anchor.dataset.mentionDescription = item.description || "";
+    anchor.dataset.mentionImage = item.image || "";
+    anchor.dataset.mentionId = item.id;
+    anchor.dataset.mentionDisplayName = item.displayName;
+    anchor.dataset.mentionTrigger = context.trigger;
+    anchor.textContent = `${context.trigger}${item.displayName}`;
+    const trailingSpace = document.createTextNode("\xA0");
+    range.insertNode(trailingSpace);
+    range.insertNode(anchor);
+    this.applyMentionRendering(anchor, item, context.trigger, "insert");
+    const selection = window.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      const caretRange = document.createRange();
+      caretRange.setStartAfter(trailingSpace);
+      caretRange.collapse(true);
+      selection.addRange(caretRange);
+    }
+    this.dropdown.hide();
+    this.hideTooltip();
+    this.activeContext = null;
+    this.config.onSelect?.(item);
+  }
+  showTooltip(anchor, item) {
+    const rect = anchor.getBoundingClientRect();
+    const linkHtml = item.link ? `<a class="editorjs-mention-tooltip-link" href="${escapeHtml(item.link)}" target="_blank" rel="noopener noreferrer">Open details</a>` : "";
+    const imageHtml = item.image ? `<img class="editorjs-mention-tooltip-image" src="${escapeHtml(item.image)}" alt="${escapeHtml(item.displayName)}" />` : `<div class="editorjs-mention-tooltip-placeholder">${escapeHtml(item.displayName.slice(0, 1).toUpperCase())}</div>`;
+    this.tooltipRoot.innerHTML = `
+      <div class="editorjs-mention-tooltip-inner">
+        ${imageHtml}
+        <div class="editorjs-mention-tooltip-main">
+          <div class="editorjs-mention-tooltip-name">${escapeHtml(item.displayName)}</div>
+          ${item.description ? `<div class="editorjs-mention-tooltip-description">${escapeHtml(item.description)}</div>` : ""}
+          ${linkHtml}
+        </div>
+      </div>
+    `;
+    this.tooltipRoot.style.display = "block";
+    this.tooltipRoot.style.left = `${Math.max(8, rect.left)}px`;
+    this.tooltipRoot.style.top = `${Math.max(8, rect.bottom + 6)}px`;
+  }
+  hideTooltip() {
+    this.tooltipRoot.style.display = "none";
+    this.tooltipRoot.innerHTML = "";
+  }
+  readMentionFromElement(anchor) {
+    const payload = anchor.dataset.mentionPayload;
+    if (payload) {
+      try {
+        const json = JSON.parse(decodeURIComponent(payload));
+        if (json && typeof json.id === "string" && typeof json.displayName === "string") {
+          return json;
+        }
+      } catch {
+      }
+    }
+    const id = anchor.dataset.mentionId;
+    const displayName = anchor.dataset.mentionDisplayName || anchor.textContent?.replace(/^@/, "");
+    if (!id || !displayName) {
+      return null;
+    }
+    return {
+      id,
+      displayName,
+      description: anchor.dataset.mentionDescription || void 0,
+      image: anchor.dataset.mentionImage || void 0,
+      link: anchor.dataset.mentionLink || void 0
+    };
+  }
+  applyMentionRendering(anchor, item, trigger, source) {
+    const defaultText = `${trigger}${item.displayName}`;
+    if (!anchor.textContent || anchor.textContent.trim().length === 0) {
+      anchor.textContent = defaultText;
+    }
+    if (!anchor.classList.contains("editorjs-mention")) {
+      anchor.classList.add("editorjs-mention");
+    }
+    this.config.renderMention?.({
+      item,
+      trigger,
+      defaultText,
+      element: anchor,
+      source,
+      context: this.config.mentionRenderContext
+    });
+  }
+  getCaretRect() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) {
+      return null;
+    }
+    const range = selection.getRangeAt(0).cloneRange();
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    if (!rect || rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
+      const marker = document.createElement("span");
+      marker.textContent = "\u200B";
+      range.insertNode(marker);
+      const markerRect = marker.getBoundingClientRect();
+      marker.remove();
+      return markerRect;
+    }
+    return rect;
+  }
+};
+function escapeHtml(input) {
+  return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function normalizeMentionAnchorsHtml(html) {
+  const root = document.createElement("div");
+  root.innerHTML = html;
+  const mentions = Array.from(root.querySelectorAll("a.editorjs-mention, span.editorjs-mention"));
+  for (const mention of mentions) {
+    const el = mention;
+    const text = (el.textContent || "").replace(/\u00A0/g, " ");
+    const id = el.dataset.mentionId || mentionIdFromHref(el.getAttribute("href")) || text;
+    const displayName = el.dataset.mentionDisplayName || text.replace(/^@/, "");
+    const trigger = el.dataset.mentionTrigger || (text.startsWith("@") ? "@" : "@");
+    const payload = safeMentionPayload(el);
+    const anchor = document.createElement("a");
+    anchor.className = "editorjs-mention";
+    anchor.contentEditable = "false";
+    anchor.href = `mention://${encodeURIComponent(id)}`;
+    anchor.dataset.mentionId = id;
+    anchor.dataset.mentionDisplayName = displayName;
+    anchor.dataset.mentionTrigger = trigger;
+    anchor.dataset.mentionDescription = payload.description || "";
+    anchor.dataset.mentionImage = payload.image || "";
+    anchor.dataset.mentionLink = payload.link || "";
+    anchor.dataset.mentionPayload = encodeURIComponent(
+      JSON.stringify({
+        id,
+        displayName,
+        description: payload.description,
+        image: payload.image,
+        link: payload.link
+      })
+    );
+    anchor.textContent = text || `${trigger}${displayName}`;
+    el.replaceWith(anchor);
+  }
+  return root.innerHTML;
+}
+function safeMentionPayload(el) {
+  const encoded = el.dataset.mentionPayload;
+  if (encoded) {
+    try {
+      const parsed = JSON.parse(decodeURIComponent(encoded));
+      return parsed || {};
+    } catch {
+    }
+  }
+  return {
+    description: el.dataset.mentionDescription || void 0,
+    image: el.dataset.mentionImage || void 0,
+    link: el.dataset.mentionLink || void 0
+  };
+}
+function mentionIdFromHref(href) {
+  if (!href || !href.startsWith("mention://")) {
+    return void 0;
+  }
+  return decodeURIComponent(href.slice("mention://".length));
+}
+
+// src/serialization.ts
+function encodeMentionsInOutput(output) {
+  const clone = cloneOutput(output);
+  for (const block of clone.blocks) {
+    const text = block.data?.text;
+    if (typeof text !== "string") {
+      continue;
+    }
+    const encoded = encodeMentionsFromHtml(text);
+    block.data.text = encoded.text;
+    if (encoded.entities.length > 0) {
+      block.data.entities = encoded.entities;
+    } else {
+      delete block.data.entities;
+    }
+  }
+  return clone;
+}
+function decodeMentionsInOutput(output) {
+  const clone = cloneOutput(output);
+  for (const block of clone.blocks) {
+    const text = block.data?.text;
+    const entities = block.data?.entities;
+    if (typeof text !== "string" || !Array.isArray(entities)) {
+      continue;
+    }
+    const mentionEntities = entities.filter(isMentionEntity).sort((a, b) => a.start - b.start);
+    block.data.text = decodeMentionsToHtml(text, mentionEntities);
+  }
+  return clone;
+}
+function encodeMentionsFromHtml(html) {
+  const root = document.createElement("div");
+  root.innerHTML = html;
+  const entities = [];
+  let text = "";
+  const walk = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += (node.textContent || "").replace(/\u00A0/g, " ");
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const el = node;
+    const isMention = el.tagName === "A" && (el.classList.contains("editorjs-mention") || mentionIdFromHref2(el.getAttribute("href"))) || !!el.dataset.mentionId;
+    if (isMention) {
+      const mentionText = (el.textContent || "").replace(/\u00A0/g, " ");
+      const payload = readMentionPayload(el);
+      const id = payload.id || el.dataset.mentionId || mentionIdFromHref2(el.getAttribute("href")) || mentionText;
+      const start = text.length;
+      text += mentionText;
+      const end = text.length;
+      entities.push({
+        type: "mention",
+        id,
+        displayName: payload.displayName || el.dataset.mentionDisplayName || mentionText.replace(/^@/, ""),
+        description: payload.description || void 0,
+        image: payload.image || void 0,
+        link: payload.link || void 0,
+        trigger: el.dataset.mentionTrigger || (mentionText.startsWith("@") ? "@" : void 0),
+        start,
+        end
+      });
+      return;
+    }
+    for (const child of Array.from(el.childNodes)) {
+      walk(child);
+    }
+  };
+  for (const node of Array.from(root.childNodes)) {
+    walk(node);
+  }
+  return { text, entities };
+}
+function decodeMentionsToHtml(text, entities) {
+  let cursor = 0;
+  let html = "";
+  for (const entity of entities) {
+    if (entity.start < cursor || entity.end < entity.start || entity.end > text.length) {
+      continue;
+    }
+    const rawBefore = text.slice(cursor, entity.start);
+    const rawMention = text.slice(entity.start, entity.end);
+    html += escapeHtml2(rawBefore);
+    html += renderMentionAnchor(rawMention, entity);
+    cursor = entity.end;
+  }
+  html += escapeHtml2(text.slice(cursor));
+  return html.replace(/  /g, " &nbsp;");
+}
+function renderMentionAnchor(displayText, entity) {
+  const payload = encodeURIComponent(
+    JSON.stringify({
+      id: entity.id,
+      displayName: entity.displayName,
+      description: entity.description,
+      image: entity.image,
+      link: entity.link
+    })
+  );
+  const href = `mention://${encodeURIComponent(entity.id)}`;
+  const visible = displayText || `${entity.trigger || "@"}${entity.displayName}`;
+  return `<a class="editorjs-mention" href="${escapeAttr(href)}" data-mention-id="${escapeAttr(
+    entity.id
+  )}" data-mention-display-name="${escapeAttr(entity.displayName)}" data-mention-trigger="${escapeAttr(
+    entity.trigger || "@"
+  )}" data-mention-payload="${escapeAttr(payload)}">${escapeHtml2(visible)}</a>`;
+}
+function readMentionPayload(el) {
+  const raw = el.dataset.mentionPayload;
+  if (!raw) {
+    return { id: "", displayName: "" };
+  }
+  try {
+    const decoded = JSON.parse(decodeURIComponent(raw));
+    return decoded || { id: "", displayName: "" };
+  } catch {
+    return { id: "", displayName: "" };
+  }
+}
+function mentionIdFromHref2(href) {
+  if (!href) {
+    return void 0;
+  }
+  if (!href.startsWith("mention://")) {
+    return void 0;
+  }
+  return decodeURIComponent(href.slice("mention://".length));
+}
+function isMentionEntity(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const item = value;
+  return item.type === "mention" && typeof item.id === "string" && typeof item.displayName === "string" && typeof item.start === "number" && typeof item.end === "number";
+}
+function escapeHtml2(input) {
+  return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function escapeAttr(input) {
+  return escapeHtml2(input).replace(/`/g, "&#96;");
+}
+function cloneOutput(output) {
+  return JSON.parse(JSON.stringify(output));
+}
+export {
+  EditorJSMentions,
+  createRestMentionProvider,
+  decodeMentionsInOutput,
+  encodeMentionsFromHtml,
+  encodeMentionsInOutput
+};