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.

79 lines (78 loc) 2.77 kB
var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); import Quill from "quill"; import { isString } from "../../utils/is.es.js"; const Delta = Quill.import("delta"); const Tooltip = Quill.import("ui/tooltip"); class MathliveTooltip extends Tooltip { constructor(quill, boundsContainer) { super(quill, boundsContainer); __publicField(this, "mathliveDom"); __publicField(this, "editValue"); 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 (!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); } } __publicField(MathliveTooltip, "TEMPLATE", ``); export { MathliveTooltip }; //# sourceMappingURL=tooltip.es.js.map