editorjs-inline-formatter
Version:
Inline formatter tool for editorjs
114 lines (113 loc) • 5.15 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".speech-word[data-italic=true]{font-style:italic}.speech-word[data-bold=true]{font-weight:700}.speech-word[data-underline=true]{text-decoration:underline}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
const a = ({
shortcut: u,
formatStyle: h,
toolboxIcon: p
}) => {
var d;
return d = class {
/**
* @param {object} api - Editor.js API
*/
constructor({ api: t }) {
this.button = null, this.api = t, this.button = null, this.formatStyle = h, this.attribute = `data-${this.formatStyle}`.toLowerCase(), this.iconClasses = {
base: this.api.styles.inlineToolButton,
active: this.api.styles.inlineToolButtonActive
};
}
/**
* Create button element for Toolbar
*
* @returns {HTMLButtonElement}
*/
render() {
return this.button = document.createElement("button"), this.button.type = "button", this.button.classList.add(this.iconClasses.base), this.button.innerHTML = this.toolboxIcon, this.button;
}
/**
* Wrap/Unwrap selected fragment
*
* @param {Range} range - selected fragment
*/
surround(t) {
if (!t)
return;
this.expandSelectionToNode(t);
const n = t.extractContents(), o = Array.from(n.querySelectorAll("span")), s = o.some((e) => e.getAttribute(this.attribute));
o.forEach((e) => {
s ? e.removeAttribute(this.attribute) : e.setAttribute(this.attribute, "true");
}), t.insertNode(n);
}
/**
* Expands selection range to the speech word node
*
* @param {Range} range
*/
expandSelectionToNode(t) {
var r, c;
const n = t.startContainer, o = t.endContainer, e = t.toString().split(/\s+/).filter((l) => !!l);
if (e.length > 0) {
const l = e[0], i = e[e.length - 1];
n.parentNode && n.nodeType === Node.TEXT_NODE && ((r = n.textContent) != null && r.includes(l)) && t.setStartBefore(n.parentNode), o.parentNode && o.nodeType === Node.TEXT_NODE && ((c = o.textContent) != null && c.includes(i)) && t.setEndAfter(o.parentNode);
}
}
/**
* Check and change Term's state for current selection
*
* @param {Selection} selection - selection
*/
checkState(t) {
var s, e;
const o = this.getNodesFromSelection(t).some((r) => r.nodeType === Node.ELEMENT_NODE && r.getAttribute(this.attribute) === "true");
return (e = (s = this.button) == null ? void 0 : s.classList) == null || e.toggle(this.iconClasses.active, o), o;
}
getNodesFromSelection(t) {
if (!t || !t.anchorNode || !t.focusNode)
return [];
const n = t.getRangeAt(0), { commonAncestorContainer: o, startContainer: s, endContainer: e } = n;
if (o.nodeType === Node.TEXT_NODE)
return o.parentNode ? [o.parentNode] : [];
if (s.nodeType === Node.TEXT_NODE && e.nodeType === Node.TEXT_NODE) {
const r = s.parentNode, c = e.parentNode;
if (!(r instanceof Element) || !(c instanceof Element))
return [];
const l = [r];
let i = r.nextElementSibling;
for (; i && i !== c.nextElementSibling; )
l.push(i), i = i.nextElementSibling;
return l;
}
return Array.from(s.childNodes).slice(n.startOffset, n.endOffset);
}
/**
* Get Tool icon's SVG
*
* @returns {string}
*/
get toolboxIcon() {
return p;
}
/**
* Set a shortcut
*/
get shortcut() {
return u;
}
}, d.isInline = !0, d;
}, f = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 12L9 7.1C9 7.04477 9.04477 7 9.1 7H10.4C11.5 7 14 7.1 14 9.5C14 9.5 14 12 11 12M9 12V16.8C9 16.9105 9.08954 17 9.2 17H12.5C14 17 15 16 15 14.5C15 11.7046 11 12 11 12M9 12H11"/></svg>', N = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13.34 10C12.4223 12.7337 11 17 11 17"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M14.21 7H14.2"/></svg>', b = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7.5V11.5C9 12.2956 9.31607 13.0587 9.87868 13.6213C10.4413 14.1839 11.2044 14.5 12 14.5C12.7956 14.5 13.5587 14.1839 14.1213 13.6213C14.6839 13.0587 15 12.2956 15 11.5V7.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.71429 18H16.2857"/></svg>', m = a({
shortcut: "CMD+I",
formatStyle: "italic",
toolboxIcon: N
}), C = a({
shortcut: "CMD+B",
formatStyle: "bold",
toolboxIcon: f
}), T = a({
formatStyle: "underline",
toolboxIcon: b
});
export {
m as ItalicInlineTool,
C as StrongInlineTool,
T as UnderlineInlineTool,
a as default
};