@opentiny/fluent-editor 3.19.0 → 3.19.1-alpha.0

package/lib/mention/Mention.cjs.js

@@ -0,0 +1,329 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Quill = require("quill");
+const editor_utils = require("../config/editor.utils.cjs.js");
+const constants = require("./constants.cjs.js");
+const MentionLink = require("./MentionLink.cjs.js");
+const { Scope } = Quill.imports["parchment"];
+const Delta = Quill.imports["delta"];
+class Mention {
+  // @ts-ignore
+  constructor(quill, options) {
+    this.quill = quill;
+    this.activeMentionIndex = 0;
+    this.searchTerm = "";
+    this.needInsertBr = true;
+    this.defaultOptions = {
+      defaultLink: "#",
+      target: "_blank",
+      mentionChar: constants.DEFAULT_MENTION_CHAR,
+      maxHeight: 200,
+      renderMentionItem(data) {
+        let mentionItem = data.name || data.id;
+        if (this.itemKey) {
+          mentionItem = data[this.itemKey];
+        }
+        const dom = document.createElement("SPAN");
+        dom.textContent = mentionItem;
+        return dom;
+      },
+      renderMentionText(data) {
+        let mentionText = data.name || data.id;
+        if (this.itemKey) {
+          mentionText = data[this.itemKey];
+        }
+        return `${mentionText}`;
+      },
+      containerClass: "ql-mention-list-container",
+      listClass: "ql-mention-list",
+      listHideClass: "ql-mention-list--hide",
+      itemClass: "ql-mention-item",
+      itemActiveClass: "ql-mention-item--active",
+      itemKey: "name",
+      searchKey: "name",
+      dataAttributes: ["id"],
+      select(_data) {
+      },
+      remove(_data) {
+      }
+    };
+    this.handleTextChange = (_delta, _oldDelta, source) => {
+      setTimeout(() => {
+        if (Quill.sources.USER === source) {
+          const range = this.quill.getSelection();
+          if (!range) {
+            return;
+          }
+          const caretPos = this.latestCaretPos = range.index;
+          const content = this.quill.getContents();
+          const beforeCaretText = content.reduce((newText, op) => {
+            if (typeof op.insert === "string") {
+              return newText += op.insert;
+            } else {
+              return newText += " ";
+            }
+          }, "");
+          const mentionCharPos = beforeCaretText.lastIndexOf(this.options.mentionChar);
+          if (mentionCharPos > -1) {
+            const searchTerm = beforeCaretText.substring(mentionCharPos + this.options.mentionChar.length, caretPos);
+            this.searchTerm = searchTerm;
+            if (!"".startsWith.call(searchTerm, " ")) {
+              this.latestMentionCharPos = mentionCharPos;
+              this.searchMentionListByTerm(searchTerm);
+            } else {
+              this.hideMentionList();
+            }
+          } else {
+            this.hideMentionList();
+          }
+        }
+      });
+    };
+    this.handleArrowUpKey = () => {
+      if (this.isOpen()) {
+        this.activeMentionIndex = (this.activeMentionIndex + this.latestMentionList.length - 1) % this.latestMentionList.length;
+        this.highlightMentionItem(this.activeMentionIndex);
+        return false;
+      }
+      return true;
+    };
+    this.handleArrowDownKey = () => {
+      if (this.isOpen()) {
+        this.activeMentionIndex = (this.activeMentionIndex + 1) % this.latestMentionList.length;
+        this.highlightMentionItem(this.activeMentionIndex);
+        return false;
+      }
+      return true;
+    };
+    this.handleEnterKey = () => {
+      if (this.isOpen()) {
+        this.selectMentionItem();
+        this.needInsertBr = false;
+      }
+      return true;
+    };
+    this.handleEscapeKey = () => {
+      if (this.isOpen()) {
+        this.hideMentionList();
+        return false;
+      }
+      return true;
+    };
+    if (!options.search) {
+      console.warn("please provide a search function!");
+      return;
+    }
+    this.options = Object.assign(this.defaultOptions, options);
+    const container = document.createElement("div");
+    container.classList.add("ql-mention-list-container");
+    if (this.options.containerClass !== "ql-mention-list-container") {
+      container.classList.add(this.options.containerClass);
+    }
+    this.mentionListEL = document.createElement("ul");
+    this.mentionListEL.classList.add(this.options.listClass, this.options.listHideClass);
+    this.mentionListEL.style.cssText += `
+      max-height: ${this.options.maxHeight}px;
+    `;
+    quill.on(Quill.events.TEXT_CHANGE, this.handleTextChange);
+    quill.keyboard.addBinding({ key: "ArrowUp" }, this.handleArrowUpKey);
+    quill.keyboard.addBinding({ key: "ArrowDown" }, this.handleArrowDownKey);
+    quill.keyboard.addBinding({ key: "Enter" }, this.handleEnterKey);
+    quill.keyboard.addBinding({ key: "Tab" }, this.handleEnterKey);
+    quill.keyboard.addBinding({ key: "Escape" }, this.handleEscapeKey);
+    quill.keyboard.bindings["Enter"].unshift(quill.keyboard.bindings["Enter"].pop());
+    quill.keyboard.bindings["Tab"].unshift(quill.keyboard.bindings["Tab"].pop());
+    quill.keyboard.bindings["Escape"].unshift(quill.keyboard.bindings["Escape"].pop());
+    const customKeyboardEnter = {
+      key: "Enter",
+      shiftKey: null,
+      handler: (range, context) => {
+        const lineFormats = Object.keys(context.format).reduce(
+          (formats, format) => {
+            if (this.quill.scroll.query(format, Scope.BLOCK) && !Array.isArray(context.format[format])) {
+              formats[format] = context.format[format];
+            }
+            return formats;
+          },
+          {}
+        );
+        let selectionIndex = range.index - this.searchTerm.length;
+        let delta = new Delta().retain(range.index).delete(range.length);
+        if (this.needInsertBr) {
+          delta = delta.insert("\n", lineFormats);
+          selectionIndex = range.index + 1;
+        }
+        this.quill.updateContents(delta, Quill.sources.USER);
+        this.quill.setSelection(selectionIndex, Quill.sources.SILENT);
+        this.quill.focus();
+        Object.keys(context.format).forEach((name) => {
+          if (!editor_utils.isNullOrUndefined(lineFormats[name])) return;
+          if (Array.isArray(context.format[name])) return;
+          if (name === "code" || name === "link") return;
+          this.quill.format(name, context.format[name], Quill.sources.USER);
+        });
+        this.needInsertBr = true;
+      }
+    };
+    quill.keyboard.bindings["Enter"] = quill.keyboard.bindings["Enter"].map((item) => {
+      const buildinKeyboardEnter = item.format === void 0 && item.shiftKey === null;
+      if (buildinKeyboardEnter) {
+        return customKeyboardEnter;
+      } else {
+        return item;
+      }
+    });
+    this.on("click", this.handleMouseClick);
+    this.on("mouseover", this.handleMouseEnter);
+    quill.emitter.on(constants.ON_MENTION_LINK_REMOVE, async ({ mention, name }) => {
+      const [result] = mention && [mention] || await this.options.search(name);
+      this.options.remove(result);
+    });
+    container.appendChild(this.mentionListEL);
+    quill.container.parentElement.insertBefore(container, quill.container);
+  }
+  static register() {
+    Quill.register(MentionLink.default);
+  }
+  on(eventName, callback) {
+    this.mentionListEL.addEventListener(eventName, (evt) => {
+      let target = evt.target;
+      let targetItemEL;
+      while (this.mentionListEL.contains(target) && target !== this.mentionListEL) {
+        if (target.classList.contains(this.options.itemClass)) {
+          targetItemEL = target;
+        }
+        target = target.parentElement;
+      }
+      if (targetItemEL) {
+        callback.call(this, targetItemEL, this.getMentionItemIndex(targetItemEL));
+      }
+    });
+  }
+  getMentionItemIndex(itemEl) {
+    return [].reduce.call(
+      this.mentionListEL.children,
+      (index, item, idx) => item === itemEl ? idx : index,
+      -1
+    );
+  }
+  handleMouseClick(_itemEl, index) {
+    this.selectMentionItem(index, true);
+    this.quill.focus();
+  }
+  handleMouseEnter(_itemEl, index) {
+    this.activeMentionIndex = index;
+    this.highlightMentionItem(index);
+  }
+  getActiveMentionItem() {
+    return this.mentionListEL.querySelector(`.${this.options.itemActiveClass}`);
+  }
+  isOpen() {
+    return !this.mentionListEL.classList.contains(this.options.listHideClass);
+  }
+  async searchMentionListByTerm(term) {
+    const mentionList = await this.options.search(term);
+    this.latestMentionList = mentionList;
+    if (!mentionList || mentionList.length === 0) {
+      return this.hideMentionList();
+    }
+    this.showMentionList(mentionList);
+  }
+  showMentionList(mentionList) {
+    if (!this.isOpen()) {
+      this.mentionListEL.classList.remove(this.options.listHideClass);
+    }
+    this.activeMentionIndex = 0;
+    this.setMentionListPos();
+    this.render(mentionList);
+  }
+  hideMentionList() {
+    if (this.isOpen()) {
+      this.activeMentionIndex = 0;
+      this.mentionListEL.classList.add(this.options.listHideClass);
+    }
+  }
+  setMentionListPos() {
+    const cursorIndex = this.quill.selection.savedRange.index;
+    const cursorBounds = this.quill.getBounds(cursorIndex);
+    const { left, top } = cursorBounds;
+    const container = this.quill.container;
+    const hostElement = container.parentNode;
+    const { left: editorLeft, top: editorTop } = container.getBoundingClientRect();
+    const { left: hostElementLeft, top: hostElementTop } = hostElement.getBoundingClientRect();
+    const relativeLeft = editorLeft - hostElementLeft;
+    const relativeTop = editorTop - hostElementTop;
+    const menuLeft = left + relativeLeft - 5;
+    const menuTop = top + relativeTop + 20;
+    this.mentionListEL.style.cssText += `
+      left: ${menuLeft}px;
+      top: ${menuTop}px;
+    `;
+  }
+  render(mentionList) {
+    const wrapEl = document.createElement("div");
+    [].forEach.call(mentionList, (mentionItem, index) => {
+      const mentionItemEl = document.createElement("li");
+      mentionItemEl.classList.add(this.options.itemClass);
+      if (index === this.activeMentionIndex) {
+        mentionItemEl.classList.add(this.options.itemActiveClass);
+      }
+      const renderResult = this.options.renderMentionItem(mentionItem);
+      if (typeof renderResult === "string") {
+        mentionItemEl.insertAdjacentHTML("afterbegin", renderResult);
+      } else {
+        mentionItemEl.insertAdjacentElement("afterbegin", renderResult);
+      }
+      wrapEl.appendChild(mentionItemEl);
+    });
+    this.mentionListEL.innerHTML = wrapEl.innerHTML;
+  }
+  highlightMentionItem(index) {
+    const oldActiveItem = this.getActiveMentionItem();
+    if (oldActiveItem) {
+      oldActiveItem.classList.remove(this.options.itemActiveClass);
+    }
+    const newActiveItem = this.mentionListEL.querySelector(`.${this.options.itemClass}:nth-of-type(${index + 1})`);
+    if (newActiveItem) {
+      newActiveItem.classList.add(this.options.itemActiveClass);
+      this.scrollIntoView(newActiveItem);
+    }
+  }
+  scrollIntoView(node) {
+    const nodeAsAny = node;
+    if (nodeAsAny.scrollIntoViewIfNeeded) {
+      nodeAsAny.scrollIntoViewIfNeeded(false);
+      return;
+    }
+    if (node.scrollIntoView) {
+      node.scrollIntoView(false);
+      return;
+    }
+  }
+  selectMentionItem(index = this.activeMentionIndex, isClick) {
+    const activeMentionItem = this.latestMentionList[index];
+    this.insertMentionBlot(activeMentionItem, isClick);
+    this.options.select(activeMentionItem);
+    this.hideMentionList();
+  }
+  insertMentionBlot(activeMentionItem, isClick) {
+    const mention = this.options.renderMentionText(activeMentionItem);
+    const delta = new Delta().retain(this.latestMentionCharPos).delete(this.latestCaretPos - this.latestMentionCharPos).insert({
+      [MentionLink.default.blotName]: {
+        char: this.options.mentionChar,
+        text: mention,
+        mention: activeMentionItem,
+        link: this.options.defaultLink,
+        target: this.options.target,
+        searchKey: this.options.searchKey
+      }
+    });
+    if (isClick) {
+      this.quill.updateContents(delta, Quill.sources.USER);
+    } else {
+      this.quill.updateContents(delta, Quill.sources.API);
+    }
+    this.quill.setSelection(this.latestMentionCharPos + 1, Quill.sources.API);
+  }
+}
+exports.default = Mention;
+//# sourceMappingURL=Mention.cjs.js.map

package/lib/mention/Mention.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mention.cjs.js","sources":["../../../src/mention/Mention.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport { isNullOrUndefined } from '../config/editor.utils'\r\nimport { DEFAULT_MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'\r\nimport MentionLink from './MentionLink'\r\n\r\nconst { Scope } = Quill.imports['parchment']\r\nconst Delta = Quill.imports['delta']\r\n\r\ninterface MentionOption {\r\n  containerClass?: string\r\n  dataAttributes?: string[]\r\n  defaultLink?: string\r\n  itemActiveClass?: string\r\n  itemKey: string\r\n  itemClass?: string\r\n  listClass?: string\r\n  listHideClass?: string\r\n  maxHeight?: number\r\n  mentionChar?: string\r\n  remove?: (data: any) => void\r\n  renderMentionItem?: (data: any) => string | HTMLElement\r\n  renderMentionText?: (data: any) => string | HTMLElement\r\n  search?: (term: string) => Promise<any[]>\r\n  searchKey: string\r\n  select?: (data: any) => void\r\n  target?: string\r\n}\r\n\r\n// @dynamic\r\nclass Mention {\r\n  private readonly options: MentionOption\r\n  private readonly mentionListEL: HTMLUListElement\r\n  private activeMentionIndex = 0\r\n  private latestMentionList: any[]\r\n  private latestMentionCharPos: number\r\n  private latestCaretPos: number\r\n  private searchTerm = ''\r\n  private needInsertBr = true\r\n  private readonly defaultOptions: MentionOption = {\r\n    defaultLink: '#',\r\n    target: '_blank',\r\n    mentionChar: DEFAULT_MENTION_CHAR,\r\n    maxHeight: 200,\r\n    renderMentionItem(data: any) {\r\n      let mentionItem = data.name || data.id\r\n      if (this.itemKey) {\r\n        mentionItem = data[this.itemKey]\r\n      }\r\n      const dom = document.createElement('SPAN')\r\n      dom.textContent = mentionItem\r\n      return dom\r\n    },\r\n    renderMentionText(data: any) {\r\n      let mentionText = data.name || data.id\r\n      if (this.itemKey) {\r\n        mentionText = data[this.itemKey]\r\n      }\r\n      return `${mentionText}`\r\n    },\r\n    containerClass: 'ql-mention-list-container',\r\n    listClass: 'ql-mention-list',\r\n    listHideClass: 'ql-mention-list--hide',\r\n    itemClass: 'ql-mention-item',\r\n    itemActiveClass: 'ql-mention-item--active',\r\n    itemKey: 'name',\r\n    searchKey: 'name',\r\n    dataAttributes: ['id'],\r\n    select(_data: any) {},\r\n    remove(_data: any) {},\r\n  }\r\n\r\n  static register() {\r\n    Quill.register(MentionLink)\r\n  }\r\n\r\n  // @ts-ignore\r\n  constructor(private quill: Quill, options: MentionOption) {\r\n    if (!options.search) {\r\n      console.warn('please provide a search function!')\r\n      return\r\n    }\r\n\r\n    this.options = Object.assign(this.defaultOptions, options)\r\n    const container = document.createElement('div')\r\n    container.classList.add('ql-mention-list-container')\r\n    if (this.options.containerClass !== 'ql-mention-list-container') {\r\n      container.classList.add(this.options.containerClass)\r\n    }\r\n    this.mentionListEL = document.createElement('ul')\r\n    this.mentionListEL.classList.add(this.options.listClass, this.options.listHideClass)\r\n    this.mentionListEL.style.cssText += `\r\n      max-height: ${this.options.maxHeight}px;\r\n    `\r\n\r\n    quill.on(Quill.events.TEXT_CHANGE, this.handleTextChange)\r\n    quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey)\r\n    quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey)\r\n    quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey)\r\n    quill.keyboard.addBinding({ key: 'Tab' }, this.handleEnterKey)\r\n    quill.keyboard.addBinding({ key: 'Escape' }, this.handleEscapeKey)\r\n    quill.keyboard.bindings['Enter'].unshift(quill.keyboard.bindings['Enter'].pop())\r\n    quill.keyboard.bindings['Tab'].unshift(quill.keyboard.bindings['Tab'].pop())\r\n    quill.keyboard.bindings['Escape'].unshift(quill.keyboard.bindings['Escape'].pop())\r\n\r\n    const customKeyboardEnter = {\r\n      key: 'Enter',\r\n      shiftKey: null,\r\n      handler: (range, context) => {\r\n        const lineFormats = Object.keys(context.format).reduce(\r\n          (formats, format) => {\r\n            if (\r\n              this.quill.scroll.query(format, Scope.BLOCK)\r\n              && !Array.isArray(context.format[format])\r\n            ) {\r\n              formats[format] = context.format[format]\r\n            }\r\n            return formats\r\n          },\r\n          {},\r\n        )\r\n\r\n        // fix: 解决@提醒之后插入多余空行和光标位置不对的问题\r\n        let selectionIndex = range.index - this.searchTerm.length\r\n        let delta = new Delta()\r\n          .retain(range.index)\r\n          .delete(range.length)\r\n        if (this.needInsertBr) {\r\n          delta = delta.insert('\\n', lineFormats)\r\n          selectionIndex = range.index + 1\r\n        }\r\n\r\n        this.quill.updateContents(delta, Quill.sources.USER)\r\n        this.quill.setSelection(selectionIndex, Quill.sources.SILENT)\r\n        this.quill.focus()\r\n\r\n        Object.keys(context.format).forEach((name) => {\r\n          if (!isNullOrUndefined(lineFormats[name])) return\r\n          if (Array.isArray(context.format[name])) return\r\n          if (name === 'code' || name === 'link') return\r\n          this.quill.format(name, context.format[name], Quill.sources.USER)\r\n        })\r\n\r\n        this.needInsertBr = true // 标记是否是输入@提醒的Enter\r\n      },\r\n    }\r\n\r\n    // 用自定义的Enter替换内置的Enter\r\n    quill.keyboard.bindings['Enter'] = quill.keyboard.bindings['Enter'].map((item) => {\r\n      const buildinKeyboardEnter = item.format === undefined && item.shiftKey === null\r\n      if (buildinKeyboardEnter) {\r\n        return customKeyboardEnter\r\n      }\r\n      else {\r\n        return item\r\n      }\r\n    })\r\n\r\n    this.on('click', this.handleMouseClick)\r\n    this.on('mouseover', this.handleMouseEnter)\r\n    quill.emitter.on(ON_MENTION_LINK_REMOVE, async ({ mention, name }) => {\r\n      const [result] = (mention && [mention]) || (await this.options.search(name))\r\n      this.options.remove(result)\r\n    })\r\n    container.appendChild(this.mentionListEL)\r\n    quill.container.parentElement.insertBefore(container, quill.container)\r\n  }\r\n\r\n  on(eventName, callback) {\r\n    this.mentionListEL.addEventListener(eventName, (evt) => {\r\n      let\r\n        target = evt.target\r\n      let targetItemEL\r\n\r\n      while (this.mentionListEL.contains(target) && target !== this.mentionListEL) {\r\n        if (target.classList.contains(this.options.itemClass)) {\r\n          targetItemEL = target\r\n        }\r\n        target = target.parentElement\r\n      }\r\n\r\n      if (targetItemEL) {\r\n        callback.call(this, targetItemEL, this.getMentionItemIndex(targetItemEL))\r\n      }\r\n    })\r\n  }\r\n\r\n  getMentionItemIndex(itemEl: Element) {\r\n    return [].reduce.call(this.mentionListEL.children,\r\n      (index, item, idx) => item === itemEl ? idx : index, -1)\r\n  }\r\n\r\n  handleTextChange = (_delta, _oldDelta, source) => {\r\n    // defer handler to make sure that we can get correct quill selection range.\r\n    setTimeout(() => {\r\n      if (Quill.sources.USER === source) {\r\n        const range = this.quill.getSelection()\r\n        if (!range) {\r\n          return\r\n        }\r\n\r\n        const caretPos = this.latestCaretPos = range.index\r\n        // beforeCaretText的计算有问题，没有把图片内容和@提醒内容的非字符内容算进去\r\n        const content = this.quill.getContents()\r\n        const beforeCaretText = content.reduce((newText, op) => {\r\n          if (typeof op.insert === 'string') {\r\n            // eslint-disable-next-line no-return-assign\r\n            return (newText += op.insert)\r\n          }\r\n          else {\r\n            // eslint-disable-next-line no-return-assign\r\n            return (newText += ' ') // 将图片内容和@提醒内容的非字符内容置为' '，算一个位置\r\n          }\r\n        }, '')\r\n        const mentionCharPos = beforeCaretText.lastIndexOf(this.options.mentionChar)\r\n\r\n        if (mentionCharPos > -1) {\r\n          const searchTerm = beforeCaretText.substring(mentionCharPos + this.options.mentionChar.length, caretPos)\r\n          this.searchTerm = searchTerm\r\n          if (!''.startsWith.call(searchTerm, ' ')) {\r\n            this.latestMentionCharPos = mentionCharPos\r\n            this.searchMentionListByTerm(searchTerm)\r\n          }\r\n          else {\r\n            this.hideMentionList()\r\n          }\r\n        }\r\n        else {\r\n          this.hideMentionList()\r\n        }\r\n      }\r\n    })\r\n  }\r\n\r\n  handleMouseClick(_itemEl: HTMLLIElement, index: number) {\r\n    this.selectMentionItem(index, true)\r\n    this.quill.focus()\r\n  }\r\n\r\n  handleMouseEnter(_itemEl: HTMLLIElement, index: number) {\r\n    this.activeMentionIndex = index\r\n    this.highlightMentionItem(index)\r\n  }\r\n\r\n  handleArrowUpKey = () => {\r\n    if (this.isOpen()) {\r\n      this.activeMentionIndex\r\n        = (this.activeMentionIndex + this.latestMentionList.length - 1) % this.latestMentionList.length\r\n      this.highlightMentionItem(this.activeMentionIndex)\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n\r\n  handleArrowDownKey = () => {\r\n    if (this.isOpen()) {\r\n      this.activeMentionIndex = (this.activeMentionIndex + 1) % this.latestMentionList.length\r\n      this.highlightMentionItem(this.activeMentionIndex)\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n\r\n  handleEnterKey = () => {\r\n    if (this.isOpen()) {\r\n      this.selectMentionItem()\r\n      this.needInsertBr = false\r\n    }\r\n    return true\r\n  }\r\n\r\n  handleEscapeKey = () => {\r\n    if (this.isOpen()) {\r\n      this.hideMentionList()\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n\r\n  getActiveMentionItem() {\r\n    return this.mentionListEL.querySelector(`.${this.options.itemActiveClass}`)\r\n  }\r\n\r\n  isOpen() {\r\n    return !this.mentionListEL.classList.contains(this.options.listHideClass)\r\n  }\r\n\r\n  async searchMentionListByTerm(term: string) {\r\n    const mentionList = await this.options.search(term)\r\n    this.latestMentionList = mentionList\r\n    if (!mentionList || mentionList.length === 0) {\r\n      return this.hideMentionList()\r\n    }\r\n\r\n    this.showMentionList(mentionList)\r\n  }\r\n\r\n  showMentionList(mentionList: any[]) {\r\n    if (!this.isOpen()) {\r\n      this.mentionListEL.classList.remove(this.options.listHideClass)\r\n    }\r\n    this.activeMentionIndex = 0\r\n    this.setMentionListPos()\r\n    this.render(mentionList)\r\n  }\r\n\r\n  hideMentionList() {\r\n    if (this.isOpen()) {\r\n      this.activeMentionIndex = 0\r\n      this.mentionListEL.classList.add(this.options.listHideClass)\r\n    }\r\n  }\r\n\r\n  setMentionListPos() {\r\n    const cursorIndex = this.quill.selection.savedRange.index\r\n    const cursorBounds = this.quill.getBounds(cursorIndex)\r\n    const { left, top } = cursorBounds\r\n    const container = this.quill.container\r\n    const hostElement = container.parentNode as HTMLDivElement\r\n    const { left: editorLeft, top: editorTop } = container.getBoundingClientRect()\r\n    const { left: hostElementLeft, top: hostElementTop } = hostElement.getBoundingClientRect()\r\n    const relativeLeft = editorLeft - hostElementLeft\r\n    const relativeTop = editorTop - hostElementTop\r\n    const menuLeft = left + relativeLeft - 5\r\n    const menuTop = top + relativeTop + 20\r\n    this.mentionListEL.style.cssText += `\r\n      left: ${menuLeft}px;\r\n      top: ${menuTop}px;\r\n    `\r\n  }\r\n\r\n  render(mentionList: any[]) {\r\n    const wrapEl = document.createElement('div');\r\n\r\n    [].forEach.call(mentionList, (mentionItem, index) => {\r\n      const mentionItemEl = document.createElement('li')\r\n      mentionItemEl.classList.add(this.options.itemClass)\r\n      if (index === this.activeMentionIndex) {\r\n        mentionItemEl.classList.add(this.options.itemActiveClass)\r\n      }\r\n      const renderResult = this.options.renderMentionItem(mentionItem)\r\n      if (typeof renderResult === 'string') {\r\n        mentionItemEl.insertAdjacentHTML('afterbegin', renderResult)\r\n      }\r\n      else {\r\n        mentionItemEl.insertAdjacentElement('afterbegin', renderResult)\r\n      }\r\n      wrapEl.appendChild(mentionItemEl)\r\n    })\r\n\r\n    this.mentionListEL.innerHTML = wrapEl.innerHTML\r\n  }\r\n\r\n  highlightMentionItem(index: number) {\r\n    const oldActiveItem = this.getActiveMentionItem()\r\n    if (oldActiveItem) {\r\n      oldActiveItem.classList.remove(this.options.itemActiveClass)\r\n    }\r\n\r\n    const newActiveItem = this.mentionListEL.querySelector(`.${this.options.itemClass}:nth-of-type(${index + 1})`)\r\n    if (newActiveItem) {\r\n      newActiveItem.classList.add(this.options.itemActiveClass)\r\n      this.scrollIntoView(newActiveItem)\r\n    }\r\n  }\r\n\r\n  scrollIntoView(node: Element): void {\r\n    const nodeAsAny: any = node\r\n    if (nodeAsAny.scrollIntoViewIfNeeded) {\r\n      nodeAsAny.scrollIntoViewIfNeeded(false)\r\n      return\r\n    }\r\n    if (node.scrollIntoView) {\r\n      node.scrollIntoView(false)\r\n      return\r\n    }\r\n  }\r\n\r\n  selectMentionItem(index = this.activeMentionIndex, isClick?: boolean) {\r\n    const activeMentionItem = this.latestMentionList[index]\r\n    this.insertMentionBlot(activeMentionItem, isClick)\r\n    this.options.select(activeMentionItem)\r\n    this.hideMentionList()\r\n  }\r\n\r\n  insertMentionBlot(activeMentionItem: any, isClick?: boolean) {\r\n    const mention = this.options.renderMentionText(activeMentionItem)\r\n    const delta = new Delta()\r\n      .retain(this.latestMentionCharPos)\r\n      .delete(this.latestCaretPos - this.latestMentionCharPos)\r\n      .insert({\r\n        [MentionLink.blotName]: {\r\n          char: this.options.mentionChar,\r\n          text: mention,\r\n          mention: activeMentionItem,\r\n          link: this.options.defaultLink,\r\n          target: this.options.target,\r\n          searchKey: this.options.searchKey,\r\n        },\r\n      })\r\n    if (isClick) {\r\n      this.quill.updateContents(delta, Quill.sources.USER)\r\n    }\r\n    else {\r\n      this.quill.updateContents(delta, Quill.sources.API)\r\n    }\r\n    this.quill.setSelection(this.latestMentionCharPos + 1, Quill.sources.API)\r\n  }\r\n}\r\n\r\nexport { Mention as default }\r\n"],"names":["DEFAULT_MENTION_CHAR","isNullOrUndefined","ON_MENTION_LINK_REMOVE","MentionLink"],"mappings":"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"}

package/lib/mention/MentionLink.cjs.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Quill = require("quill");
+const constants = require("./constants.cjs.js");
+const Embed = Quill.imports["blots/embed"];
+class MentionLink extends Embed {
+  static create(data) {
+    const node = super.create(data);
+    node.dataset.mentionId = data.name || data.mention && data.mention[data.searchKey || "name"] || "";
+    node.setAttribute("title", data.text);
+    node.setAttribute(constants.MENTION_CHAR, data.char);
+    node.textContent = data.char + data.text;
+    return node;
+  }
+  static value(domNode) {
+    const char = domNode.getAttribute(constants.MENTION_CHAR) || constants.DEFAULT_MENTION_CHAR;
+    const text = domNode.getAttribute("title");
+    const name = domNode.dataset.mentionId;
+    return { char, text, name };
+  }
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+    this.mentionData = data;
+  }
+  value() {
+    return super.value();
+  }
+  remove() {
+    this.scroll.emitter.emit(constants.ON_MENTION_LINK_REMOVE, this.mentionData);
+    return super.remove();
+  }
+}
+MentionLink.blotName = "mention";
+MentionLink.tagName = "span";
+MentionLink.className = "ql-mention-link";
+exports.default = MentionLink;
+//# sourceMappingURL=MentionLink.cjs.js.map

package/lib/mention/MentionLink.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionLink.cjs.js","sources":["../../../src/mention/MentionLink.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport { DEFAULT_MENTION_CHAR, MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'\r\n\r\nconst Embed = Quill.imports['blots/embed']\r\n\r\n// @dynamic\r\nclass MentionLink extends Embed {\r\n  static blotName: string\r\n  static tagName: string\r\n  static className: string\r\n  scroll: any\r\n  mentionData: any\r\n\r\n  static create(data) {\r\n    const node = super.create(data)\r\n    node.dataset.mentionId = data.name || (data.mention && data.mention[data.searchKey || 'name']) || ''\r\n    node.setAttribute('title', data.text)\r\n    node.setAttribute(MENTION_CHAR, data.char)\r\n    node.textContent = data.char + data.text\r\n    return node\r\n  }\r\n\r\n  static value(domNode) {\r\n    const\r\n      char = domNode.getAttribute(MENTION_CHAR) || DEFAULT_MENTION_CHAR\r\n    const text = domNode.getAttribute('title')\r\n    const name = domNode.dataset.mentionId\r\n    return { char, text, name }\r\n  }\r\n\r\n  constructor(scroll, domNode, data) {\r\n    super(scroll, domNode, data)\r\n    this.mentionData = data\r\n  }\r\n\r\n  value() {\r\n    // fix: 将@提醒内容加入到 Delta 里，以解决输入空格，@提醒内容被删除的问题\r\n    // return ' ';\r\n    return super.value()\r\n  }\r\n\r\n  remove() {\r\n    this.scroll.emitter.emit(ON_MENTION_LINK_REMOVE, this.mentionData)\r\n    return super.remove()\r\n  }\r\n}\r\n\r\nMentionLink.blotName = 'mention'\r\nMentionLink.tagName = 'span'\r\nMentionLink.className = 'ql-mention-link'\r\nexport { MentionLink as default }\r\n"],"names":["MENTION_CHAR","DEFAULT_MENTION_CHAR","ON_MENTION_LINK_REMOVE"],"mappings":";;;;AAGA,MAAM,QAAQ,MAAM,QAAQ,aAAa;AAGzC,MAAM,oBAAoB,MAAM;AAAA,EAO9B,OAAO,OAAO,MAAM;AACZ,UAAA,OAAO,MAAM,OAAO,IAAI;AACzB,SAAA,QAAQ,YAAY,KAAK,QAAS,KAAK,WAAW,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAM;AAC7F,SAAA,aAAa,SAAS,KAAK,IAAI;AAC/B,SAAA,aAAaA,UAAAA,cAAc,KAAK,IAAI;AACpC,SAAA,cAAc,KAAK,OAAO,KAAK;AAC7B,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,SAAS;AACpB,UACE,OAAO,QAAQ,aAAaA,UAAY,YAAA,KAAKC,UAAAA;AACzC,UAAA,OAAO,QAAQ,aAAa,OAAO;AACnC,UAAA,OAAO,QAAQ,QAAQ;AACtB,WAAA,EAAE,MAAM,MAAM;EACvB;AAAA,EAEA,YAAY,QAAQ,SAAS,MAAM;AAC3B,UAAA,QAAQ,SAAS,IAAI;AAC3B,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,QAAQ;AAGN,WAAO,MAAM;EACf;AAAA,EAEA,SAAS;AACP,SAAK,OAAO,QAAQ,KAAKC,UAAAA,wBAAwB,KAAK,WAAW;AACjE,WAAO,MAAM;EACf;AACF;AAEA,YAAY,WAAW;AACvB,YAAY,UAAU;AACtB,YAAY,YAAY;;"}

package/lib/mention/constants.cjs.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ON_MENTION_LINK_REMOVE = "mention-link/remove";
+const MENTION_CHAR = "mentionChar";
+const DEFAULT_MENTION_CHAR = "@";
+exports.DEFAULT_MENTION_CHAR = DEFAULT_MENTION_CHAR;
+exports.MENTION_CHAR = MENTION_CHAR;
+exports.ON_MENTION_LINK_REMOVE = ON_MENTION_LINK_REMOVE;
+//# sourceMappingURL=constants.cjs.js.map

package/lib/mention/constants.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs.js","sources":["../../../src/mention/constants.ts"],"sourcesContent":["export const ON_MENTION_LINK_REMOVE = 'mention-link/remove'\r\nexport const MENTION_CHAR = 'mentionChar'\r\nexport const DEFAULT_MENTION_CHAR = '@'\r\n"],"names":[],"mappings":";;AAAO,MAAM,yBAAyB;AAC/B,MAAM,eAAe;AACrB,MAAM,uBAAuB;;;;"}

package/lib/quick-menu/index.cjs.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+class QuickMenu {
+  // @ts-ignore
+  constructor(quill, options) {
+    this.quill = quill;
+    this.options = options;
+    this.handleSlashKeyDown = (_range, context) => {
+      const index = this.quill.selection.savedRange.index;
+      this.quill.insertText(index, "/");
+      const shouldTriggerQuickMenu = context.prefix === "" && Object.keys(context.format).length === 0;
+      if (shouldTriggerQuickMenu) {
+        const cursorIndex = this.quill.selection.savedRange.index;
+        const cursorBounds = this.quill.getBounds(cursorIndex);
+        const { left, top } = cursorBounds;
+        const { left: editorLeft, top: editorTop } = this.container.getBoundingClientRect();
+        const { left: hostElementLeft, top: hostElementTop } = this.hostElement.getBoundingClientRect();
+        const relativeLeft = editorLeft - hostElementLeft;
+        const relativeTop = editorTop - hostElementTop;
+        const menuLeft = left + relativeLeft - 5;
+        const menuTop = top + relativeTop + 20;
+        this.quickMenu.style.display = "block";
+        const zIndex = this.quill.options.modules.quickmenu.zIndex;
+        let style = `left:${menuLeft}px;top:${menuTop}px;`;
+        if (zIndex || zIndex === 0) {
+          style += `z-index:${zIndex}`;
+        }
+        this.quickMenuContainer.setAttribute("style", style);
+        this.options.component.activeIndex = 0;
+      } else {
+        this.quickMenu.style.display = "none";
+      }
+    };
+    this.hideQuickMenu = (event) => {
+      if (this.quickMenuContainer && !this.quickMenuContainer.contains(event.target)) {
+        this.quickMenuContainer.style.display = "none";
+      }
+    };
+    this.handleArrowUpKey = (_range, _context) => {
+      if (this.isOpen()) {
+        const index = this.options.component.activeIndex;
+        const total = this.options.component.quickMenus.length;
+        this.options.component.activeIndex = (index + total - 1) % total;
+        return false;
+      }
+      return true;
+    };
+    this.handleArrowDownKey = (_range, _context) => {
+      if (this.isOpen()) {
+        const index = this.options.component.activeIndex;
+        const total = this.options.component.quickMenus.length;
+        this.options.component.activeIndex = (index + 1) % total;
+        return false;
+      }
+      return true;
+    };
+    this.handleEnterKey = (_range, _context) => {
+      if (this.isOpen()) {
+        this.options.component.onEnter();
+        return false;
+      }
+      return true;
+    };
+    this.quill = quill;
+    this.options = options;
+    this.container = this.quill.container;
+    this.hostElement = this.container.parentNode;
+    this.quickMenu = this.hostElement.querySelector(".quick-menu");
+    this.quickMenuContainer = this.quickMenu.querySelector(".quick-menu-container");
+    quill.keyboard.addBinding({ key: "/" }, this.handleSlashKeyDown);
+    quill.keyboard.addBinding({ key: "ArrowUp" }, this.handleArrowUpKey);
+    quill.keyboard.addBinding({ key: "ArrowDown" }, this.handleArrowDownKey);
+    quill.keyboard.addBinding({ key: "Enter" }, this.handleEnterKey);
+    quill.keyboard.bindings["Enter"].unshift(quill.keyboard.bindings["Enter"].pop());
+    document.body.addEventListener("click", this.hideQuickMenu.bind(this));
+  }
+  isOpen() {
+    return this.quickMenuContainer.style.display !== "none" && this.quickMenu.style.display === "block";
+  }
+}
+exports.default = QuickMenu;
+//# sourceMappingURL=index.cjs.js.map

package/lib/quick-menu/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/quick-menu/index.ts"],"sourcesContent":["import Quill from 'quill'\r\n\r\ninterface QuickMenuOptions {\r\n  container: string\r\n  component: any\r\n}\r\n\r\nclass QuickMenu {\r\n  private container: HTMLDivElement\r\n  private hostElement: HTMLDivElement\r\n  private quickMenu: HTMLDivElement\r\n  private quickMenuContainer: HTMLDivElement\r\n\r\n  // @ts-ignore\r\n  constructor(private quill: Quill, private options: QuickMenuOptions) {\r\n    this.quill = quill\r\n    this.options = options\r\n    this.container = this.quill.container\r\n    this.hostElement = this.container.parentNode as HTMLDivElement\r\n    this.quickMenu = this.hostElement.querySelector('.quick-menu')\r\n    this.quickMenuContainer = this.quickMenu.querySelector('.quick-menu-container')\r\n    quill.keyboard.addBinding({ key: '/' }, this.handleSlashKeyDown)\r\n    quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey)\r\n    quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey)\r\n    quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey)\r\n    quill.keyboard.bindings['Enter'].unshift(quill.keyboard.bindings['Enter'].pop())\r\n    document.body.addEventListener('click', this.hideQuickMenu.bind(this))\r\n  }\r\n\r\n  handleSlashKeyDown = (_range, context) => {\r\n    const index = this.quill.selection.savedRange.index\r\n    this.quill.insertText(index, '/')\r\n\r\n    // 一行的第一个字符为 '/'，且没有格式化，则触发快捷菜单\r\n    const shouldTriggerQuickMenu = context.prefix === '' && Object.keys(context.format).length === 0\r\n    if (shouldTriggerQuickMenu) {\r\n      const cursorIndex = this.quill.selection.savedRange.index\r\n      const cursorBounds = this.quill.getBounds(cursorIndex)\r\n      const { left, top } = cursorBounds\r\n      const { left: editorLeft, top: editorTop } = this.container.getBoundingClientRect()\r\n      const { left: hostElementLeft, top: hostElementTop } = this.hostElement.getBoundingClientRect()\r\n      const relativeLeft = editorLeft - hostElementLeft\r\n      const relativeTop = editorTop - hostElementTop\r\n      const menuLeft = left + relativeLeft - 5\r\n      const menuTop = top + relativeTop + 20\r\n\r\n      this.quickMenu.style.display = 'block'\r\n      const zIndex = this.quill.options.modules.quickmenu.zIndex\r\n      let style = `left:${menuLeft}px;top:${menuTop}px;`\r\n      if (zIndex || zIndex === 0) {\r\n        style += `z-index:${zIndex}`\r\n      }\r\n      this.quickMenuContainer.setAttribute('style', style)\r\n      this.options.component.activeIndex = 0\r\n    }\r\n    else {\r\n      this.quickMenu.style.display = 'none'\r\n    }\r\n  }\r\n\r\n  private isOpen() {\r\n    return this.quickMenuContainer.style.display !== 'none' && this.quickMenu.style.display === 'block'\r\n  }\r\n\r\n  hideQuickMenu = (event) => {\r\n    if (this.quickMenuContainer && !this.quickMenuContainer.contains(event.target)) {\r\n      this.quickMenuContainer.style.display = 'none'\r\n    }\r\n  }\r\n\r\n  handleArrowUpKey = (_range, _context) => {\r\n    if (this.isOpen()) {\r\n      const index = this.options.component.activeIndex\r\n      const total = this.options.component.quickMenus.length\r\n      this.options.component.activeIndex = (index + total - 1) % total\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n\r\n  handleArrowDownKey = (_range, _context) => {\r\n    if (this.isOpen()) {\r\n      const index = this.options.component.activeIndex\r\n      const total = this.options.component.quickMenus.length\r\n      this.options.component.activeIndex = (index + 1) % total\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n\r\n  handleEnterKey = (_range, _context) => {\r\n    if (this.isOpen()) {\r\n      this.options.component.onEnter()\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n}\r\n\r\nexport default QuickMenu\r\n"],"names":[],"mappings":"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"}