editorjs-style
Advanced tools
Comparing version 1.3.2 to 1.3.3
@@ -1,19 +0,2 @@ | ||
import type { InlineTool, InlineToolConstructorOptions } from '@editorjs/editorjs'; | ||
declare class EditorJSStyle implements InlineTool { | ||
static get isInline(): boolean; | ||
static get sanitize(): { | ||
span: boolean; | ||
}; | ||
static get title(): string; | ||
private static initializeSpan; | ||
private actions; | ||
private api; | ||
constructor({ api }: InlineToolConstructorOptions); | ||
get shortcut(): string; | ||
checkState(): boolean; | ||
clear(): void; | ||
render(): HTMLButtonElement; | ||
renderActions(): HTMLElement; | ||
surround(range: Range): void; | ||
} | ||
import EditorJSStyle from './EditorJSStyle'; | ||
export default EditorJSStyle; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.EditorJSStyle=t():e.EditorJSStyle=t()}(window,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var i=function(){function e(e){var t=e.api;this.actions=document.createElement("div"),this.api=t}return Object.defineProperty(e,"isInline",{get:function(){return!0},enumerable:!1,configurable:!0}),Object.defineProperty(e,"sanitize",{get:function(){return{span:!0}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"title",{get:function(){return"Style"},enumerable:!1,configurable:!0}),e.initializeSpan=function(e){var t=e.span;t.classList.add("editorjs-style"),t.addEventListener("keydown",(function(e){return e.stopPropagation()})),new MutationObserver((function(){var e,n,i,r,o,l;"#text"===(null===(e=t.firstChild)||void 0===e?void 0:e.nodeName)&&""===(null===(i=null===(n=t.firstChild)||void 0===n?void 0:n.textContent)||void 0===i?void 0:i.slice(0,1))||t.prepend(""),"#text"===(null===(r=t.lastChild)||void 0===r?void 0:r.nodeName)&&""===(null===(l=null===(o=t.lastChild)||void 0===o?void 0:o.textContent)||void 0===l?void 0:l.slice(-1))||t.append("")})).observe(t,{characterData:!0,childList:!0,subtree:!0})},Object.defineProperty(e.prototype,"shortcut",{get:function(){return"CMD+S"},enumerable:!1,configurable:!0}),e.prototype.checkState=function(){var e;this.actions.innerHTML="";var t=this.api.selection.findParentTag("SPAN","editorjs-style");if(!t)return!1;this.actions.innerHTML='\n <div style="margin-left: 0.5rem; ">\n <div style="display: flex; align-items: center; justify-content: space-between; ">\n <div>Style settings</div>\n\n <button class="delete-button '+this.api.styles.settingsButton+'" type="button">\n <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>\n </svg>\n </button>\n </div>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>ID</span>\n\n <input class="id-input '+this.api.styles.input+'" placeholder="exciting" style="width: 80%; ">\n </label>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>Class</span>\n\n <input class="class-input '+this.api.styles.input+'" placeholder="note editorial" style="width: 80%; ">\n </label>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>Style</span>\n\n <textarea\n class="style-textarea '+this.api.styles.input+'"\n placeholder="background: #ffe7e8;"\n style="resize: none; width: 80%; ">\n </textarea>\n </label>\n </div>\n ';var n=this.actions.querySelector(".delete-button"),i=this.actions.querySelector(".class-input"),r=this.actions.querySelector(".id-input"),o=this.actions.querySelector(".style-textarea");if(!(n&&i&&r&&o))throw new Error("Couldn't render actions for editorjs-style. ");return n.addEventListener("click",(function(){var e=Array.from(t.childNodes).map((function(e){return e.cloneNode(!0)}));if(e.forEach((function(e){var n;return null===(n=t.parentNode)||void 0===n?void 0:n.insertBefore(e,t)})),t.remove(),0!==e.length){var n=window.getSelection();if(!n)throw new Error("Couldn't select unwrapped editorjs-style contents. ");n.removeAllRanges();var i=new Range;i.setStartBefore(e[0]),i.setEndAfter(e[e.length-1]),n.addRange(i)}})),this.api.tooltip.onHover(n,"Delete style",{placement:"top"}),i.value=Array.from(t.classList).filter((function(e){return"editorjs-style"!==e})).join(" "),i.addEventListener("input",(function(){return t.setAttribute("class","editorjs-style "+i.value)})),r.value=t.id,r.addEventListener("input",(function(){return t.id=r.value})),o.value=null!==(e=t.getAttribute("style"))&&void 0!==e?e:"",o.addEventListener("keydown",(function(e){return e.stopPropagation()})),o.addEventListener("input",(function(){return t.setAttribute("style",o.value)})),!0},e.prototype.clear=function(){this.actions.innerHTML=""},e.prototype.render=function(){var t=document.createElement("button");return t.classList.add(this.api.styles.inlineToolButton),t.type="button",t.innerHTML='\n <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>\n </svg>\n ',setTimeout((function(){var n=t.closest(".codex-editor");if(!n)throw new Error("Couldn't find the parent Editor.js of editorjs-style. ");var i=new MutationObserver((function(){n.querySelector(".codex-editor__loader")||(n.querySelectorAll("span.editorjs-style").forEach((function(t){e.initializeSpan({span:t}),t.append("")})),i.disconnect())}));i.observe(n,{childList:!0})})),t},e.prototype.renderActions=function(){return this.actions},e.prototype.surround=function(t){var n=this,i=document.createElement("span");e.initializeSpan({span:i}),i.append(t.collapsed?"new style":t.extractContents()),setTimeout((function(){t.insertNode(i),n.api.selection.expandToTag(i)}))},e}();t.default=i}]).default})); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.EditorJSStyle=t():e.EditorJSStyle=t()}(window,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);class i extends HTMLElement{constructor(){super(),this.addEventListener("keydown",e=>e.stopPropagation());new MutationObserver(()=>{var e,t,n,i,s,o;"#text"===(null===(e=this.firstChild)||void 0===e?void 0:e.nodeName)&&""===(null===(n=null===(t=this.firstChild)||void 0===t?void 0:t.textContent)||void 0===n?void 0:n.slice(0,1))||this.prepend(""),"#text"===(null===(i=this.lastChild)||void 0===i?void 0:i.nodeName)&&""===(null===(o=null===(s=this.lastChild)||void 0===s?void 0:s.textContent)||void 0===o?void 0:o.slice(-1))||this.append("")}).observe(this,{characterData:!0,childList:!0,subtree:!0})}}var s=i;var o=class{constructor({api:e}){this.actions=document.createElement("div"),this.api=e,customElements.get("editorjs-style")||customElements.define("editorjs-style",s)}static get isInline(){return!0}static get sanitize(){return{"editorjs-style":!0}}static get title(){return"Style"}get shortcut(){return"CMD+S"}checkState(){var e;this.actions.innerHTML="";const t=this.api.selection.findParentTag("EDITORJS-STYLE");if(!t)return!1;this.actions.innerHTML=`\n <div style="margin-left: 0.5rem; ">\n <div style="display: flex; align-items: center; justify-content: space-between; ">\n <div>Style settings</div>\n\n <button class="delete-button ${this.api.styles.settingsButton}" type="button">\n <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>\n </svg>\n </button>\n </div>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>ID</span>\n\n <input class="id-input ${this.api.styles.input}" placeholder="exciting" style="width: 80%; ">\n </label>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>Class</span>\n\n <input class="class-input ${this.api.styles.input}" placeholder="note editorial" style="width: 80%; ">\n </label>\n\n <label style="display: flex; align-items: center; justify-content: space-between; ">\n <span>Style</span>\n\n <textarea\n class="style-textarea ${this.api.styles.input}"\n placeholder="background: #ffe7e8;"\n style="resize: none; width: 80%; ">\n </textarea>\n </label>\n </div>\n `;const n=this.actions.querySelector(".delete-button"),i=this.actions.querySelector(".class-input"),s=this.actions.querySelector(".id-input"),o=this.actions.querySelector(".style-textarea");if(!(n&&i&&s&&o))throw new Error("Couldn't render actions for editorjs-style. ");return n.addEventListener("click",()=>{const e=Array.from(t.childNodes).map(e=>e.cloneNode(!0));if(e.forEach(e=>{var n;return null===(n=t.parentNode)||void 0===n?void 0:n.insertBefore(e,t)}),t.remove(),0===e.length)return;const n=window.getSelection();if(!n)throw new Error("Couldn't select unwrapped editorjs-style contents. ");n.removeAllRanges();const i=new Range;i.setStartBefore(e[0]),i.setEndAfter(e[e.length-1]),n.addRange(i)}),this.api.tooltip.onHover(n,"Delete style",{placement:"top"}),i.value=t.className,i.addEventListener("input",()=>t.setAttribute("class",i.value)),s.value=t.id,s.addEventListener("input",()=>t.id=s.value),o.value=null!==(e=t.getAttribute("style"))&&void 0!==e?e:"",o.addEventListener("keydown",e=>e.stopPropagation()),o.addEventListener("input",()=>t.setAttribute("style",o.value)),!0}clear(){this.actions.innerHTML=""}render(){const e=document.createElement("button");return e.classList.add(this.api.styles.inlineToolButton),e.type="button",e.innerHTML='\n <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>\n </svg>\n ',e}renderActions(){return this.actions}surround(e){const t=new s;t.append(e.collapsed?"new style":e.extractContents()),setTimeout(()=>{e.insertNode(t),this.api.selection.expandToTag(t)})}};t.default=o}]).default})); |
{ | ||
"name": "editorjs-style", | ||
"version": "1.3.2", | ||
"version": "1.3.3", | ||
"description": "Inline-style Tool for Editor.js", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
Work in progress | ||
# editorjs-style | ||
<h1 align="center">Welcome to editorjs-style 👋</h1> | ||
<p> | ||
<a href="https://www.npmjs.com/package/editorjs-style" target="_blank"> | ||
<img alt="Version" src="https://img.shields.io/npm/v/editorjs-style.svg"> | ||
</a> | ||
<a href="#" target="_blank"> | ||
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" /> | ||
</a> | ||
<a href="https://lgtm.com/projects/g/hata6502/editorjs-style/alerts/"> | ||
<img alt="Total alerts" src="https://img.shields.io/lgtm/alerts/g/hata6502/editorjs-style.svg?logo=lgtm&logoWidth=18"/> | ||
</a> | ||
<a href="https://lgtm.com/projects/g/hata6502/editorjs-style/context:javascript"> | ||
<img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/hata6502/editorjs-style.svg?logo=lgtm&logoWidth=18"/> | ||
</a> | ||
<a href="https://twitter.com/hata6502" target="_blank"> | ||
<img alt="Twitter: hata6502" src="https://img.shields.io/twitter/follow/hata6502.svg?style=social" /> | ||
</a> | ||
</p> | ||
Inline-style Tool for Editor.js | ||
> Inline-style Tool for Editor.js | ||
@@ -12,6 +29,46 @@ ## 💡 Motivation | ||
**Note: This is an experimental inline tool 🔬** | ||
### ✨ [Demo](https://hata6502.github.io/editorjs-style/) | ||
## ✨ Demo | ||
## Install | ||
[Live demo](https://hata6502.github.io/editorjs-style/) | ||
```sh | ||
yarn add editorjs-style | ||
``` | ||
## Run tests | ||
```sh | ||
yarn test | ||
``` | ||
## Author | ||
<img alt="hata6502" src="https://avatars.githubusercontent.com/hata6502" width="48" /> **hata6502** | ||
- Website: https://b-hood.site/ | ||
- Twitter: [@hata6502](https://twitter.com/hata6502) | ||
- Github: [@hata6502](https://github.com/hata6502) | ||
## 🤝 Contributing | ||
Contributions, issues and feature requests are welcome! | ||
Feel free to check [issues page](https://github.com/hata6502/editorjs-style/issues). | ||
## Show your support | ||
Give a ⭐️ if this project helped you! | ||
## 📝 License | ||
Copyright © 2020 [hata6502](https://github.com/hata6502). | ||
This project is [MIT](https://github.com/hata6502/editorjs-style/blob/master/LICENSE) licensed. | ||
## Disclaimer | ||
Please see [DISCLAIMER.md](https://github.com/hata6502/editorjs-style/blob/master/DISCLAIMER.md). | ||
--- | ||
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_ |
253
src/index.ts
@@ -1,254 +0,3 @@ | ||
import type { | ||
API, | ||
InlineTool, | ||
InlineToolConstructorOptions, | ||
} from '@editorjs/editorjs'; | ||
import EditorJSStyle from './EditorJSStyle'; | ||
class EditorJSStyle implements InlineTool { | ||
static get isInline() { | ||
return true; | ||
} | ||
static get sanitize() { | ||
return { | ||
span: true, | ||
}; | ||
} | ||
static get title() { | ||
return 'Style'; | ||
} | ||
private static initializeSpan({ span }: { span: HTMLSpanElement }) { | ||
span.classList.add('editorjs-style'); | ||
// To prevent Editor.js keydown event | ||
span.addEventListener('keydown', (event) => event.stopPropagation()); | ||
const mutationObserver = new MutationObserver(() => { | ||
if ( | ||
span.firstChild?.nodeName !== '#text' || | ||
span.firstChild?.textContent?.slice(0, 1) !== '\u200b' | ||
) { | ||
span.prepend('\u200b'); | ||
} | ||
if ( | ||
span.lastChild?.nodeName !== '#text' || | ||
span.lastChild?.textContent?.slice(-1) !== '\u200b' | ||
) { | ||
span.append('\u200b'); | ||
} | ||
}); | ||
mutationObserver.observe(span, { | ||
characterData: true, | ||
childList: true, | ||
subtree: true, | ||
}); | ||
} | ||
private actions: HTMLDivElement; | ||
private api: API; | ||
constructor({ api }: InlineToolConstructorOptions) { | ||
this.actions = document.createElement('div'); | ||
this.api = api; | ||
} | ||
get shortcut() { | ||
return 'CMD+S'; | ||
} | ||
checkState() { | ||
this.actions.innerHTML = ''; | ||
const span = this.api.selection.findParentTag('SPAN', 'editorjs-style'); | ||
if (!span) { | ||
return false; | ||
} | ||
this.actions.innerHTML = ` | ||
<div style="margin-left: 0.5rem; "> | ||
<div style="display: flex; align-items: center; justify-content: space-between; "> | ||
<div>Style settings</div> | ||
<button class="delete-button ${this.api.styles.settingsButton}" type="button"> | ||
<svg class="icon" height="24" viewBox="0 0 24 24" width="24"> | ||
<path d="M0 0h24v24H0z" fill="none"/> | ||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/> | ||
</svg> | ||
</button> | ||
</div> | ||
<label style="display: flex; align-items: center; justify-content: space-between; "> | ||
<span>ID</span> | ||
<input class="id-input ${this.api.styles.input}" placeholder="exciting" style="width: 80%; "> | ||
</label> | ||
<label style="display: flex; align-items: center; justify-content: space-between; "> | ||
<span>Class</span> | ||
<input class="class-input ${this.api.styles.input}" placeholder="note editorial" style="width: 80%; "> | ||
</label> | ||
<label style="display: flex; align-items: center; justify-content: space-between; "> | ||
<span>Style</span> | ||
<textarea | ||
class="style-textarea ${this.api.styles.input}" | ||
placeholder="background: #ffe7e8;" | ||
style="resize: none; width: 80%; "> | ||
</textarea> | ||
</label> | ||
</div> | ||
`; | ||
const deleteButton = this.actions.querySelector( | ||
'.delete-button' | ||
) as HTMLButtonElement | null; | ||
const classInput = this.actions.querySelector( | ||
'.class-input' | ||
) as HTMLInputElement | null; | ||
const idInput = this.actions.querySelector( | ||
'.id-input' | ||
) as HTMLInputElement | null; | ||
const styleTextarea = this.actions.querySelector( | ||
'.style-textarea' | ||
) as HTMLTextAreaElement | null; | ||
if (!deleteButton || !classInput || !idInput || !styleTextarea) { | ||
throw new Error("Couldn't render actions for editorjs-style. "); | ||
} | ||
deleteButton.addEventListener('click', () => { | ||
const clonedNodes = Array.from(span.childNodes).map((node) => | ||
node.cloneNode(true) | ||
); | ||
clonedNodes.forEach((node) => span.parentNode?.insertBefore(node, span)); | ||
span.remove(); | ||
if (clonedNodes.length === 0) { | ||
return; | ||
} | ||
const selection = window.getSelection(); | ||
if (!selection) { | ||
throw new Error("Couldn't select unwrapped editorjs-style contents. "); | ||
} | ||
selection.removeAllRanges(); | ||
const range = new Range(); | ||
range.setStartBefore(clonedNodes[0]); | ||
range.setEndAfter(clonedNodes[clonedNodes.length - 1]); | ||
selection.addRange(range); | ||
}); | ||
this.api.tooltip.onHover(deleteButton, 'Delete style', { | ||
placement: 'top', | ||
}); | ||
classInput.value = Array.from(span.classList) | ||
.filter((className) => className !== 'editorjs-style') | ||
.join(' '); | ||
classInput.addEventListener('input', () => | ||
span.setAttribute('class', `editorjs-style ${classInput.value}`) | ||
); | ||
idInput.value = span.id; | ||
idInput.addEventListener('input', () => (span.id = idInput.value)); | ||
styleTextarea.value = span.getAttribute('style') ?? ''; | ||
// To input line breaks | ||
styleTextarea.addEventListener('keydown', (event) => | ||
event.stopPropagation() | ||
); | ||
styleTextarea.addEventListener('input', () => | ||
span.setAttribute('style', styleTextarea.value) | ||
); | ||
return true; | ||
} | ||
clear() { | ||
this.actions.innerHTML = ''; | ||
} | ||
render() { | ||
const button = document.createElement('button'); | ||
button.classList.add(this.api.styles.inlineToolButton); | ||
button.type = 'button'; | ||
button.innerHTML = ` | ||
<svg class="icon" height="24" viewBox="0 0 24 24" width="24"> | ||
<path d="M0 0h24v24H0z" fill="none"/> | ||
<path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/> | ||
</svg> | ||
`; | ||
setTimeout(() => { | ||
const codexEditor = button.closest('.codex-editor'); | ||
if (!codexEditor) { | ||
throw new Error( | ||
"Couldn't find the parent Editor.js of editorjs-style. " | ||
); | ||
} | ||
const mutationObserver = new MutationObserver(() => { | ||
if (codexEditor.querySelector('.codex-editor__loader')) { | ||
return; | ||
} | ||
codexEditor | ||
.querySelectorAll('span.editorjs-style') | ||
.forEach((element) => { | ||
EditorJSStyle.initializeSpan({ span: element as HTMLSpanElement }); | ||
// To dispatch mutation observer | ||
element.append(''); | ||
}); | ||
mutationObserver.disconnect(); | ||
}); | ||
mutationObserver.observe(codexEditor, { childList: true }); | ||
}); | ||
return button; | ||
} | ||
renderActions(): HTMLElement { | ||
return this.actions; | ||
} | ||
surround(range: Range) { | ||
const span = document.createElement('span'); | ||
EditorJSStyle.initializeSpan({ span }); | ||
span.append(range.collapsed ? 'new style' : range.extractContents()); | ||
setTimeout(() => { | ||
range.insertNode(span); | ||
this.api.selection.expandToTag(span); | ||
}); | ||
} | ||
} | ||
export default EditorJSStyle; |
@@ -13,4 +13,4 @@ { | ||
"strict": true, | ||
"target": "ES5" | ||
"target": "ES2015" | ||
} | ||
} |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
720348
20
74
243
1