UNPKG

@opentiny/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.

75 lines (74 loc) 2.57 kB
"use strict"; Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } }); const Quill = require("quill"); const is = require("../../utils/is.cjs.js"); const Delta = Quill.import("delta"); const Tooltip = Quill.import("ui/tooltip"); const _MathliveTooltip = class _MathliveTooltip extends Tooltip { constructor(quill, boundsContainer) { super(quill, boundsContainer); this.mathliveDom = document.createElement("math-field"); this.mathliveDom.classList.add("ql-math-field"); this.root.appendChild(this.mathliveDom); this.root.classList.add("math-field-tooltip"); this.listen(); } listen() { this.mathliveDom.addEventListener("blur", (event) => { this.hide(); }); this.root.addEventListener("keydown", (event) => { if (event.key === "Enter") { event.preventDefault(); this.save(); } else if (event.key === "Escape") { event.preventDefault(); this.cancel(); } }); } cancel() { this.hide(); this.restoreFocus(); } edit(value) { this.editValue = value; this.root.classList.remove("ql-hidden"); this.root.classList.add("ql-editing"); this.mathliveDom.setValue(value || ""); const range = this.quill.getSelection(); const bounds = range ? this.quill.getBounds(range) : null; if (bounds != null) { this.position(bounds); } this.show(); this.mathliveDom.focus(); } restoreFocus() { this.mathliveDom.blur(); this.quill.focus({ preventScroll: true }); } save() { const range = this.quill.getSelection(true); const inputValue = this.mathliveDom.value; if (!inputValue) return; const contentData = this.quill.getContents(range.index, 1).ops[0].insert; let deleteCount = 0; if (!is.isString(contentData) && contentData.mathlive) { deleteCount += 1; } const delta = new Delta().retain(range.index).delete(Math.max(deleteCount, range.length)).insert({ mathlive: { value: inputValue, mode: "dialog" } }); this.quill.updateContents(delta, Quill.sources.USER); this.quill.setSelection(range.index + 1, Quill.sources.SILENT); this.hide(); } position(reference) { const adjustedReference = { ...reference }; adjustedReference.left = reference.left + this.root.offsetWidth / 2 - reference.width / 2; return super.position(adjustedReference); } }; _MathliveTooltip.TEMPLATE = ``; let MathliveTooltip = _MathliveTooltip; exports.default = MathliveTooltip; //# sourceMappingURL=tooltip.cjs.js.map