@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.
83 lines (82 loc) • 3.54 kB
JavaScript
"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