@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.
118 lines (117 loc) • 4.3 kB
JavaScript
import { isInside } from "../../../config/editor.utils.es.js";
import CustomResizeAction from "../actions/CustomResizeAction.es.js";
import DeleteAction from "../actions/DeleteAction.es.js";
import ImageSpec from "./ImageSpec.es.js";
class CustomImageSpec extends ImageSpec {
constructor(formatter) {
super(formatter);
this.imageMouseout = (event) => {
if (event.target.nodeName === "IMG" || event.target.classList.contains("blot-formatter__overlay")) {
const imgDom = event.target;
if (!isInside(event, imgDom)) {
this.removeImagePreviewOverlay();
}
}
};
this.onClick = (event) => {
var _a;
const el = event.target;
const isReadonly = this.formatter.quill.options.readOnly;
if (!(el instanceof HTMLElement) || el.tagName !== "IMG" || isReadonly) {
return;
}
this.img = el;
this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
this.resetOverlayMarginTop();
this.formatter.show(this);
const imageDom = (_a = this.formatter.currentSpec) == null ? void 0 : _a.getTargetElement();
if (imageDom) {
imageDom.classList.add("current-select-img");
const quill = this.formatter.quill;
const imgBlot = quill.scroll.find(this.img);
const index = quill.getIndex(imgBlot);
const len = imgBlot.length();
quill.setSelection(index, len);
}
};
this.formatter = formatter;
this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
this.editorElem = this.formatter.quill.container;
if (this.formatter.quill.root === this.formatter.quill.scrollingContainer) {
this.formatter.quill.root.addEventListener("scroll", this.handleQuillRootScroll.bind(this));
}
}
handleQuillRootScroll() {
if (this.formatter.overlay) {
this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`;
}
}
init() {
this.editorElem.addEventListener("mouseover", this.imageMouseOver.bind(this));
this.editorElem.addEventListener("mouseout", this.imageMouseout);
super.init();
}
getActions() {
return [DeleteAction, CustomResizeAction];
}
imageMouseOver(event) {
var _a;
const target = event.target;
const isBlotFormatter = (_a = target == null ? void 0 : target.classList) == null ? void 0 : _a.contains("blot-formatter__overlay");
if (target.nodeName === "IMG" || isBlotFormatter) {
}
}
addImagePreviewOverlay(event) {
const target = event.target;
const {
left: imgLeft,
width: imgWidth
} = target.getBoundingClientRect();
const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop;
const {
left: editorLeft,
top: editorTop
} = event.currentTarget.getBoundingClientRect();
const imgRelativeLeft = imgLeft - editorLeft;
const imgRelativeTop = imgTop - editorTop;
const maxmizeWidth = 24;
const maxmizePadding = 15;
const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding;
const previewTop = imgRelativeTop + maxmizePadding;
const previewStyle = `
left: ${previewLeft}px;
top: ${previewTop}px;
width: ${maxmizeWidth}px;
`;
const imageSrc = target.src || target.getAttribute("data-image");
const imageId = target.getAttribute("data-image-id");
const previewDom = event.currentTarget.querySelector(".image-preview__overlay");
if (!previewDom) {
event.currentTarget.insertAdjacentHTML("beforeend", `
<div class="image-preview__overlay" style="${previewStyle}">
<i class="icon-maxmize" id="btn-image-preview" data-image-id="${imageId}"
data-image="${imageSrc}"></i>
</div>
`);
}
}
removeImagePreviewOverlay() {
const previewDom = this.editorElem.querySelector(".image-preview__overlay");
if (previewDom) {
previewDom.parentNode.removeChild(previewDom);
}
}
onHide() {
this.removeImagePreviewOverlay();
super.onHide();
}
resetOverlayMarginTop() {
if (this.formatter.overlay) {
this.formatter.overlay.style.marginTop = "0px";
}
}
}
export {
CustomImageSpec
};
//# sourceMappingURL=CustomImageSpec.es.js.map