@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.
116 lines (115 loc) • 4.03 kB
JavaScript
;
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);
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const Quill = require("quill");
const editor_utils = require("../../config/editor.utils.cjs.js");
const is = require("../../utils/is.cjs.js");
require("./actions/index.cjs.js");
const imageToolbarButtons = require("./actions/image-toolbar-buttons.cjs.js");
const Embed = Quill.import("blots/embed");
const ATTRIBUTES = ["alt", "height", "width", "image-id"];
const _CustomImage = class _CustomImage extends Embed {
static setOptions(allowInvalidUrl) {
this.allowInvalidUrl = allowInvalidUrl;
}
static create(value) {
const node = super.create(value);
const url = typeof value === "string" ? value : value.src;
if (url) {
const imgURL = this.sanitize(url);
if (!(imgURL == null ? void 0 : imgURL.startsWith("data:image"))) {
node.dataset.src = imgURL;
}
node.setAttribute("src", imgURL);
}
node.setAttribute("data-image-id", `img${_CustomImage.ID_SEED++}`);
node.style.verticalAlign = "baseline";
if (is.isObject(value)) {
if (value.align && imageToolbarButtons.alignmentHandler[value.align]) {
node.setAttribute(imageToolbarButtons.ALIGN_ATTR, value.align);
imageToolbarButtons.alignmentHandler[value.align](node);
}
if (value.width) {
node.setAttribute("width", String(value.width));
}
if (value.height) {
node.setAttribute("height", String(value.height));
}
}
return node;
}
static formats(domNode) {
return ATTRIBUTES.reduce((formats, attribute) => {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute);
}
return formats;
}, {});
}
static match(url) {
return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
}
static register() {
if (/Firefox/i.test(navigator.userAgent)) {
setTimeout(() => {
document.execCommand("enableObjectResizing", false, "false");
}, 1);
}
}
static sanitize(url) {
if (editor_utils.sanitize(url, ["http", "https", "blob", "data"]) || this.allowInvalidUrl) {
return url;
}
return "//:0";
}
static value(domNode) {
const formats = {};
const imageSrc = domNode.getAttribute("src");
formats.src = this.sanitize(imageSrc);
formats.imageId = domNode.dataset.imageId;
if (domNode.dataset.align) {
formats.align = domNode.dataset.align;
}
if (domNode.hasAttribute("width")) {
formats.width = domNode.getAttribute("width");
}
if (domNode.hasAttribute("height")) {
formats.height = domNode.getAttribute("height");
}
return formats;
}
format(name, value) {
if (ATTRIBUTES.includes(name)) {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name);
}
} else {
super.format(name, value);
}
}
unWrap() {
this.parent.replaceWith(this);
}
wrap(name, value) {
const wrapper = typeof name === "string" ? this.scroll.create(name, value) : name;
if (!editor_utils.isNullOrUndefined(this.parent)) {
this.parent.insertBefore(wrapper, this.next || void 0);
}
if (typeof wrapper.appendChild !== "function") {
throw new TypeError(`Cannot wrap ${name}`);
}
wrapper.appendChild(this);
return wrapper;
}
};
__publicField(_CustomImage, "blotName", "image");
__publicField(_CustomImage, "tagName", "IMG");
__publicField(_CustomImage, "ID_SEED", 0);
__publicField(_CustomImage, "allowInvalidUrl", false);
let CustomImage = _CustomImage;
exports.CustomImage = CustomImage;
//# sourceMappingURL=image.cjs.js.map