@cairn214/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
140 lines (139 loc) • 4.98 kB
JavaScript
"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 customerWidgetLink = require("./formats/customer-widget-link.cjs.js");
const docLink = require("./formats/doc-link.cjs.js");
const wikiLink = require("./formats/wiki-link.cjs.js");
const workItemLink = require("./formats/work-item-link.cjs.js");
const Module = Quill.imports["core/module"];
const Delta = Quill.imports.delta;
class GlobalLink extends Module {
static register() {
Quill.register("formats/wiki-link", wikiLink.default);
Quill.register("formats/doc-link", docLink.default);
Quill.register("formats/work-item-link", workItemLink.default);
Quill.register("formats/customer-widget-link", customerWidgetLink.default);
}
constructor(quill, options) {
super(quill, options);
const toolbar = quill.getModule("toolbar");
this.open = false;
this.panel = options.component;
this.wrap = options.wrap;
const globalLinkBtn = toolbar.container && toolbar.container.querySelector(".ql-global-link");
toolbar.addHandler("global-link", this.handleGlobalLinkButtonClick.bind(this));
quill.root.addEventListener("click", this.onEditorClick.bind(this));
document.body.addEventListener("click", (evt) => {
if (!this.wrap.contains(evt.target) && !(globalLinkBtn && globalLinkBtn.contains(evt.target))) {
this.open = false;
this.wrap.classList.add("global-link-hide");
}
});
this.panel.wikiLink.subscribe(this.addWikiLink.bind(this));
this.panel.docLink.subscribe(this.addDocLink.bind(this));
this.panel.workItemLink.subscribe(this.addWorkItemLink.bind(this));
if (this.panel.close) {
this.panel.close.subscribe(this.closePanel.bind(this));
}
}
onEditorClick(evt) {
if (!evt.ctrlKey) return;
const path = editor_utils.getEventComposedPath(evt);
if (!path || path.length <= 0) return;
const linkNode = path.filter((node) => {
return node.classList && (node.classList.contains(wikiLink.default.className) || node.classList.contains(docLink.default.className) || node.classList.contains(workItemLink.default.className));
})[0];
if (!linkNode) return;
if (linkNode.classList.contains(wikiLink.default.className)) {
this.handleLinkClick(linkNode);
} else if (linkNode.classList.contains(docLink.default.className)) {
this.handleLinkClick(linkNode);
} else if (linkNode.classList.contains(workItemLink.default.className)) {
const tableRow = path.filter((node) => {
return node.tagName && node.tagName.toUpperCase() === "TR";
})[0];
if (tableRow) {
this.handleLinkClick(tableRow);
}
}
}
handleLinkClick(linkNode) {
const href = linkNode.getAttribute("href");
if (href) {
window.open(href);
}
}
handleGlobalLinkButtonClick(_value) {
this.open = !this.open;
this.triggerPanel();
}
triggerPanel() {
if (this.open) {
this.wrap.classList.remove("global-link-hide");
} else {
this.wrap.classList.add("global-link-hide");
}
}
addWikiLink(wikiData) {
const index = this.quill.getSelection(true).index;
const arr = [];
const delta = arr.reduce.call(wikiData, (op, wiki) => {
op.insert({
[wikiLink.default.blotName]: {
link: wiki.link,
text: wiki.text
}
});
return op;
}, new Delta().retain(index));
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.setSelection(index + 1, Quill.sources.USER);
if (this.panel.autoClose) {
this.closePanel();
}
}
addDocLink(docData) {
const index = this.quill.getSelection(true).index;
const arr = [];
const delta = arr.reduce.call(docData, (op, doc) => {
op.insert({
[docLink.default.blotName]: {
link: doc.link,
text: doc.text,
icon: doc.icon
}
});
return op;
}, new Delta().retain(index));
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.setSelection(index + 1, Quill.sources.USER);
if (this.panel.autoClose) {
this.closePanel();
}
}
addWorkItemLink(workItemData) {
const index = this.quill.getSelection(true).index;
const arr = [];
const delta = arr.reduce.call(workItemData, (op, workItem) => {
op.insert({
[workItemLink.default.blotName]: {
link: workItem.url,
data: workItem.table
}
});
return op;
}, new Delta().retain(index));
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.setSelection(index + 1, Quill.sources.USER);
if (this.panel.autoClose) {
this.closePanel();
}
}
closePanel() {
this.open = false;
this.triggerPanel();
}
}
exports.default = GlobalLink;
//# sourceMappingURL=index.cjs.js.map