editorjs-toggle-block - npm Package Compare versions

Comparing version 0.3.9 to 0.3.10

CHANGELOG.md

 # Changelog
 
+## 0.3.10 (31.03.2023)
+
+* Update dependency webpack to v5.76.0 [SECURITY].
+* Fix bug that shared id and foreign key when copy-and-paste a toggle.
+
 ## 0.3.9 (10.03.2023)
@@ -4,0 +9,0 @@

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ToggleBlock=e():t.ToggleBlock=e()}(self,(()=>(()=>{var t={424:(t,e,o)=>{"use strict";o.d(e,{Z:()=>l});var s=o(81),i=o.n(s),n=o(645),r=o.n(n)()(i());r.push([t.id,".toggle-block__selector > div {\n  vertical-align: middle;\n  display: inline-block;\n  padding: 1% 0 1% 0;\n  outline: none;\n  border: none;\n  width: 90%;\n}\n\n.toggle-block__selector br {\n  display: none;\n}\n\n.toggle-block__icon > svg {\n  vertical-align: middle;\n  width: 15px;\n  height: auto;\n}\n\n.toggle-block__icon:hover {\n  color: #388ae5;\n  cursor: pointer;\n}\n\n.bi-play-fill {\n  width: 34px;\n  height: 34px;\n}\n\n.toggle-block__input {\n  margin-left: 5px;\n}\n\n.toggle-block__input:empty:before {\n  content: attr(placeholder);\n  color: gray;\n  background-color: transparent;\n}\n\n.toggle-block__content-default {\n  margin-left: 20px;\n}\n\n.toggle-block__item {\n  margin-left: 39px;\n}\n\n.toggle-block__content-default {\n  color: gray;\n  border-radius: 5px;\n}\n\n.toggle-block__content-default:hover {\n  cursor: pointer;\n  background: rgba(55, 53, 47, 0.08);\n}\n\ndiv.toggle-block__hidden {\n  display: none;\n}\n",""]);const l=r},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o="",s=void 0!==e[5];return e[4]&&(o+="@supports (".concat(e[4],") {")),e[2]&&(o+="@media ".concat(e[2]," {")),s&&(o+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),o+=t(e),s&&(o+="}"),e[2]&&(o+="}"),e[4]&&(o+="}"),o})).join("")},e.i=function(t,o,s,i,n){"string"==typeof t&&(t=[[null,t,void 0]]);var r={};if(s)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(r[c]=!0)}for(var d=0;d<t.length;d++){var a=[].concat(t[d]);s&&r[a[0]]||(void 0!==n&&(void 0===a[5]||(a[1]="@layer".concat(a[5].length>0?" ".concat(a[5]):""," {").concat(a[1],"}")),a[5]=n),o&&(a[2]?(a[1]="@media ".concat(a[2]," {").concat(a[1],"}"),a[2]=o):a[2]=o),i&&(a[4]?(a[1]="@supports (".concat(a[4],") {").concat(a[1],"}"),a[4]=i):a[4]="".concat(i)),e.push(a))}},e}},81:t=>{"use strict";t.exports=function(t){return t[1]}},379:t=>{"use strict";var e=[];function o(t){for(var o=-1,s=0;s<e.length;s++)if(e[s].identifier===t){o=s;break}return o}function s(t,s){for(var n={},r=[],l=0;l<t.length;l++){var c=t[l],d=s.base?c[0]+s.base:c[0],a=n[d]||0,h="".concat(d," ").concat(a);n[d]=a+1;var g=o(h),u={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==g)e[g].references++,e[g].updater(u);else{var p=i(u,s);s.byIndex=l,e.splice(l,0,{identifier:h,updater:p,references:1})}r.push(h)}return r}function i(t,e){var o=e.domAPI(e);return o.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;o.update(t=e)}else o.remove()}}t.exports=function(t,i){var n=s(t=t||[],i=i||{});return function(t){t=t||[];for(var r=0;r<n.length;r++){var l=o(n[r]);e[l].references--}for(var c=s(t,i),d=0;d<n.length;d++){var a=o(n[d]);0===e[a].references&&(e[a].updater(),e.splice(a,1))}n=c}}},569:t=>{"use strict";var e={};t.exports=function(t,o){var s=function(t){if(void 0===e[t]){var o=document.querySelector(t);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}e[t]=o}return e[t]}(t);if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(o)}},216:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,o)=>{"use strict";t.exports=function(t){var e=o.nc;e&&t.setAttribute("nonce",e)}},795:t=>{"use strict";t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(o){!function(t,e,o){var s="";o.supports&&(s+="@supports (".concat(o.supports,") {")),o.media&&(s+="@media ".concat(o.media," {"));var i=void 0!==o.layer;i&&(s+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),s+=o.css,i&&(s+="}"),o.media&&(s+="}"),o.supports&&(s+="}");var n=o.sourceMap;n&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),e.styleTagTransform(s,t,e.options)}(e,t,o)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},370:t=>{t.exports='<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path></svg>'}},e={};function o(s){var i=e[s];if(void 0!==i)return i.exports;var n=e[s]={id:s,exports:{}};return t[s](n,n.exports,o),n.exports}o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var s in e)o.o(e,s)&&!o.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.nc=void 0;var s={};return(()=>{"use strict";o.d(s,{default:()=>I});var t=o(379),e=o.n(t),i=o(795),n=o.n(i),r=o(569),l=o.n(r),c=o(565),d=o.n(c),a=o(216),h=o.n(a),g=o(589),u=o.n(g),p=o(424),f={};f.styleTagTransform=u(),f.setAttributes=d(),f.insert=l().bind(null,"head"),f.domAPI=n(),f.insertStyleElement=h(),e()(p.Z,f),p.Z&&p.Z.locals&&p.Z.locals;const b={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let m;const k=new Uint8Array(16);function v(){if(!m&&(m="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!m))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return m(k)}const y=[];for(let t=0;t<256;++t)y.push((t+256).toString(16).slice(1));const B=function(t,e,o){if(b.randomUUID&&!e&&!t)return b.randomUUID();const s=(t=t||{}).random||(t.rng||v)();if(s[6]=15&s[6]|64,s[8]=63&s[8]|128,e){o=o||0;for(let t=0;t<16;++t)e[o+t]=s[t];return e}return function(t,e=0){return(y[t[e+0]]+y[t[e+1]]+y[t[e+2]]+y[t[e+3]]+"-"+y[t[e+4]]+y[t[e+5]]+"-"+y[t[e+6]]+y[t[e+7]]+"-"+y[t[e+8]]+y[t[e+9]]+"-"+y[t[e+10]]+y[t[e+11]]+y[t[e+12]]+y[t[e+13]]+y[t[e+14]]+y[t[e+15]]).toLowerCase()}(s)};var A=o(370),x=o.n(A);class I{static get toolbox(){return{title:"Toggle",icon:x()}}static get enableLineBreaks(){return!0}static get isReadOnlySupported(){return!0}constructor({data:t,api:e,readOnly:o,config:s}){this.data={text:t.text||"",status:t.status||"open",fk:t.fk||`fk-${B()}`,items:t.items||0},this.itemsId=[],this.api=e;const{toolbar:{close:i},blocks:{getCurrentBlockIndex:n,getBlockByIndex:r,getBlocksCount:l,move:c}}=this.api;this.close=i,this.getCurrentBlockIndex=n,this.getBlocksCount=l,this.getBlockByIndex=r,this.move=c,this.wrapper=void 0,this.readOnly=o||!1,this.placeholder=(null==s?void 0:s.placeholder)??"Toggle",this.defaultContent=(null==s?void 0:s.defaultContent)??"Empty toggle. Click or drop blocks inside.",this.addListeners(),this.addSupportForUndoAndRedoActions(),this.addSupportForDragAndDropActions()}isAToggleItem(t){return t.classList.contains("toggle-block__item")}isAToggleRoot(t){return t.classList.contains("toggle-block__selector")||Boolean(t.querySelector(".toggle-block__selector"))}createParagraphFromToggleRoot(t){if("Enter"===t.code){const t=document.getSelection().focusOffset,e=this.api.blocks.getCurrentBlockIndex(),o=this.api.blocks.getBlockByIndex(e),{holder:s}=o,i=s.firstChild.firstChild,n=i.children[1].innerHTML,r=n.indexOf("<br>"),l=-1===r?n.length:r;"closed"===this.data.status&&(this.resolveToggleAction(),this.hideAndShowBlocks());const c=n.slice(l+4,t.focusOffset);i.children[1].innerHTML=n.slice(t.focusOffset,l),this.api.blocks.insert("paragraph",{text:c},{},e+1,1),this.setAttributesToNewBlock()}}createParagraphFromIt(){this.setAttributesToNewBlock()}setAttributesToNewBlock(t=null,e=this.wrapper.id){const o=null===t?this.api.blocks.getCurrentBlockIndex():t,s=B(),i=this.api.blocks.getBlockByIndex(o);this.itemsId.includes(i.id)||this.itemsId.splice(o-1,0,i.id);const{holder:n}=i,r=n.firstChild.firstChild;n.setAttribute("foreignKey",e),n.setAttribute("id",s),n.classList.add("toggle-block__item"),this.readOnly||(n.onkeydown=this.setEventsToNestedBlock.bind(this),r.focus())}setEventsToNestedBlock(t){if("Enter"===t.code)this.createParagraphFromIt();else{const e=this.getCurrentBlockIndex(),o=this.getBlockByIndex(e),{holder:s}=o;if("Tab"===t.code&&t.shiftKey&&this.extractBlock(e),"Backspace"===t.code){const t=document.getSelection().focusOffset;this.removeBlock(s,o.id,t)}}}removeBlock(t,e,o){if(0===o){const o=t.nextSibling.firstChild.firstChild.innerHTML;t.firstChild.firstChild.children[1].innerHTML+=o;const s=this.itemsId.indexOf(e);this.itemsId.splice(s,1);const i=this.api.blocks.getCurrentBlockIndex();this.api.blocks.delete(i+1)}}removeAttributesFromNewBlock(t){const e=this.api.blocks.getBlockByIndex(t),{holder:o}=e;if(!this.itemsId.includes(e.id)){const t=this.itemsId.indexOf(e.id);this.itemsId.splice(t,1)}o.removeAttribute("foreignKey"),o.removeAttribute("id"),o.onkeydown={},o.onkeyup={},o.classList.remove("toggle-block__item")}createToggle(){this.wrapper=document.createElement("div"),this.wrapper.classList.add("toggle-block__selector"),this.wrapper.id=this.data.fk;const t=document.createElement("span"),e=document.createElement("div"),o=document.createElement("div");t.classList.add("toggle-block__icon"),t.innerHTML=x(),e.classList.add("toggle-block__input"),e.setAttribute("contentEditable",!this.readOnly),e.innerHTML=this.data.text||"",this.readOnly||(e.addEventListener("keyup",this.createParagraphFromToggleRoot.bind(this)),e.addEventListener("keydown",this.removeToggle.bind(this)),e.addEventListener("focusin",(()=>this.setFocusToggleRootAtTheEnd())),e.addEventListener("keyup",this.setPlaceHolder.bind(this)),e.setAttribute("placeholder",this.placeholder),e.addEventListener("focus",this.setDefaultContent.bind(this)),e.addEventListener("focusout",this.setDefaultContent.bind(this)),o.addEventListener("click",this.clickInDefaultContent.bind(this)),e.addEventListener("focus",this.setNestedBlockAttributes.bind(this))),o.classList.add("toggle-block__content-default","toggle-block__hidden"),o.innerHTML=this.defaultContent,this.wrapper.appendChild(t),this.wrapper.appendChild(e),this.wrapper.appendChild(o)}setFocusToggleRootAtTheEnd(){const t=document.activeElement,e=window.getSelection(),o=document.createRange();e.removeAllRanges(),o.selectNodeContents(t),o.collapse(!1),e.addRange(o),t.focus()}clickInDefaultContent(){this.api.blocks.insert(),this.setAttributesToNewBlock(),this.setDefaultContent()}setDefaultContent(){const t=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{firstChild:e,lastChild:o}=this.wrapper,{status:s}=this.data,i=t.length>0||"closed"===s;o.classList.toggle("toggle-block__hidden",i),e.style.color=0===t.length?"gray":"black"}removeToggle(t){if("Backspace"===t.code){const{children:t}=this.wrapper,e=t[1].innerHTML;if(0===document.getSelection().focusOffset){const t=this.api.blocks.getCurrentBlockIndex(),o=e.indexOf("<br>"),s=-1===o?e.length:o,i=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);for(let e=1;e<i.length+1;e+=1)this.removeAttributesFromNewBlock(t+e);this.api.blocks.delete(t),this.api.blocks.insert("paragraph",{text:e.slice(0,s)},{},t,1),this.api.caret.setToBlock(t)}}}findToogleRootIndex(t,e){const o=this.getBlockByIndex(t),{holder:s}=o;return this.isAToggleRoot(s)&&e===s.querySelector(".toggle-block__selector").getAttribute("id")?t:t-1>=0?this.findToogleRootIndex(t-1,e):-1}extractBlock(t){const e=this.getBlockByIndex(t),{holder:o}=e;if(this.isAToggleItem(o)){const e=o.getAttribute("foreignKey"),s=this.findToogleRootIndex(t,e);if(s>=0){const o=this.getDecendentsNumber(e),i=s+o;o>1&&this.api.blocks.move(i,t),setTimeout((()=>this.removeAttributesFromNewBlock(i)),200)}}this.api.caret.setToBlock(t),this.api.toolbar.close()}setPlaceHolder(t){if("Backspace"===t.code||"Enter"===t.code){const{children:t}=this.wrapper,{length:e}=t[1].textContent;0===e&&(t[1].textContent="")}}render(){return this.createToggle(),setTimeout((()=>this.renderItems())),setTimeout((()=>this.setInitialTransition())),this.wrapper}setInitialTransition(){const{status:t}=this.data,e=this.wrapper.firstChild.firstChild;e.style.transition="0.1s",e.style.transform=`rotate(${"closed"===t?0:90}deg)`}renderItems(){const t=this.api.blocks.getBlocksCount(),e=this.wrapper.firstChild;let o;if(this.readOnly){const t=document.getElementsByClassName("codex-editor__redactor")[0],{children:e}=t,{length:s}=e;for(let t=0;t<s;t+=1){const s=e[t].firstChild.firstChild,{id:i}=s;if(i===this.wrapper.id){o=t;break}}}else{const t=this.wrapper.children[1];let e={},s=this.api.blocks.getCurrentBlockIndex();for(;e[1]!==t;){o=s;const t=this.api.blocks.getBlockByIndex(o),{holder:i}=t;e=i.firstChild.firstChild.children,s-=1}}if(o+this.data.items<t)for(let t=o+1,e=0;t<=o+this.data.items;t+=1){const o=this.api.blocks.getBlockByIndex(t),{holder:s}=o,i=s.firstChild.firstChild;if(this.isPartOfAToggle(i)){this.data.items=e;break}this.setAttributesToNewBlock(t),e+=1}else this.data.items=0;e.addEventListener("click",(()=>{this.resolveToggleAction(),setTimeout((()=>{this.hideAndShowBlocks()}))})),this.hideAndShowBlocks()}resolveToggleAction(){const t=this.wrapper.firstChild.firstChild;"closed"===this.data.status?(this.data.status="open",t.style.transform="rotate(90deg)"):(this.data.status="closed",t.style.transform="rotate(0deg)"),this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex()).holder.setAttribute("status",this.data.status)}hideAndShowBlocks(t=this.wrapper.id,e=this.data.status){const o=document.querySelectorAll(`div[foreignKey="${t}"]`),{length:s}=o;if(s>0)o.forEach((t=>{t.hidden="closed"===e;const o=t.querySelectorAll(".toggle-block__selector");if(o.length>0){const s="closed"===e?e:t.getAttribute("status");this.hideAndShowBlocks(o[0].getAttribute("id"),s)}}));else if(t===this.wrapper.id){const{lastChild:t}=this.wrapper;t.classList.toggle("toggle-block__hidden",e)}}save(t){const{children:e}=t,o=e[1].innerHTML,s=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);return Object.assign(this.data,{text:o,items:s.length})}getDecendentsNumber(t){let e=0;return document.querySelectorAll(`div[foreignKey="${t}"]`).forEach((t=>{if(t.hasAttribute("status")){const o=t.querySelector(".toggle-block__selector").getAttribute("id");e+=this.getDecendentsNumber(o)}e+=1})),e}highlightToggleItems(t){document.querySelectorAll(`div[foreignKey="${t}"]`).forEach((t=>{if(t.classList.add("ce-block--selected"),t.hasAttribute("status")){const e=t.querySelector(".toggle-block__selector").getAttribute("id");this.highlightToggleItems(e)}}))}renderSettings(){const t=document.getElementsByClassName("ce-settings--opened")[0].lastChild,e=this.api.blocks.getCurrentBlockIndex();this.highlightToggleItems(this.wrapper.id),setTimeout((()=>{this.addEventsMoveButtons("ce-tune-move-down",0,t,e),this.addEventsMoveButtons("ce-tune-move-up",1,t,e);const o=t.getElementsByClassName("ce-settings__button--delete")[0];o&&o.addEventListener("click",(()=>{const t=o.classList;-1===Object.values(t).indexOf("clicked-to-destroy-toggle")?o.classList.add("clicked-to-destroy-toggle"):this.removeFullToggle(e)}))}))}addEventsMoveButtons(t,e,o,s){const i=o.getElementsByClassName(t);if(!i.length)return;const n=i[0];n&&n.addEventListener("click",(()=>{this.moveToggle(s,e)}))}moveToggle(t,e){if(!this.readOnly){this.close();const o=this.getCurrentBlockIndex(),s=this.getDecendentsNumber(this.wrapper.id),i=this.getBlocksCount(),n=t+s;this.move(t,o),t>=0&&n<=i-1&&(0===e?this.moveDown(t,n):this.moveUp(t,n))}}moveDown(t,e){const o=e+1,s=this.getBlockByIndex(o),{holder:i}=s;if(this.move(t,o),"toggle"===s.name){const e=i.querySelector(".toggle-block__selector").getAttribute("id"),s=this.getDecendentsNumber(e);this.moveDecendents(s,t+1,o+1,0)}}moveUp(t,e){const o=t-1,s=this.getBlockByIndex(o);if("toggle"===s.name)return;const{holder:i}=s;if(i.hasAttribute("foreignKey")){const o=this.getBlockByIndex(t).holder.getAttribute("foreignKey"),s=i.getAttribute("foreignKey");if(s!==o){const i=this.findIndexOfParentBlock(o,s,t),n=this.getBlockByIndex(i).holder.querySelector(".toggle-block__selector").getAttribute("id"),r=this.getDecendentsNumber(n);return this.move(e,i),void this.moveDecendents(r,e,i,1)}}this.move(e,o)}findIndexOfParentBlock(t,e,o){const s=o-(this.getDecendentsNumber(e)+1),i=this.getBlockByIndex(s).holder;if(i.hasAttribute("foreignKey")){const e=i.getAttribute("foreignKey");if(e!==t){const o=this.getBlockByIndex(s-1).holder;if(o.hasAttribute("foreignKey")){const i=o.getAttribute("foreignKey");if(i!==e)return this.findIndexOfParentBlock(t,i,s)}}}return s}moveDecendents(t,e,o,s){let i=o,n=e;for(;t;)this.move(n,i),0===s&&(i+=1,n+=1),t-=1}removeFullToggle(t){const e=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{length:o}=e;for(let e=t;e<t+o;e+=1)this.api.blocks.delete(t)}addListeners(){this.readOnly||document.activeElement.addEventListener("keyup",(t=>{const e=document.activeElement,o=this.api.blocks.getCurrentBlockIndex(),s=e.parentElement.parentElement;"Space"===t.code?this.createToggleWithShortcut(e):o>0&&!this.isPartOfAToggle(e)&&!this.isPartOfAToggle(s)&&"Tab"===t.code&&this.nestBlock(e)}))}addSupportForUndoAndRedoActions(){if(!this.readOnly){const t=document.querySelector("div.codex-editor__redactor"),e={attributes:!0,childList:!0,characterData:!0};new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&setTimeout(this.restoreItemAttributes.bind(this,t))}))})).observe(t,e)}}getIndex=t=>Array.from(t.parentNode.children).indexOf(t);isChild=(t,e)=>!(!t||!e)&&(t===e||[...document.querySelectorAll(`div[foreignKey="${t}"]`)].some((t=>{const o=t.querySelector(".toggle-block__selector");return!!o&&this.isChild(o.getAttribute("id"),e)})));addSupportForDragAndDropActions(){if(!this.readOnly){if(void 0===this.wrapper)return void setTimeout((()=>this.addSupportForDragAndDropActions()),250);document.querySelector(`#${this.wrapper.id}`).parentNode.parentNode.setAttribute("status",this.data.status);const t=document.querySelector(".ce-toolbar__settings-btn");t.setAttribute("draggable","true"),t.addEventListener("dragstart",(()=>{this.startBlock=this.api.blocks.getCurrentBlockIndex(),this.nameDragged=this.api.blocks.getBlockByIndex(this.startBlock).name,this.holderDragged=this.api.blocks.getBlockByIndex(this.startBlock).holder})),document.addEventListener("drop",(t=>{const{target:e}=t;if(document.contains(e)){const t=e.classList.contains("ce-block")?e:e.closest(".ce-block");if(t&&t!==this.holderDragged){let e=this.getIndex(t);e=this.startBlock<e?e+1:e;const o=t.querySelectorAll(".toggle-block__selector").length>0||null!==t.getAttribute("foreignKey");setTimeout((()=>{if("toggle"===this.nameDragged){const s=this.holderDragged.querySelector(`#${this.wrapper.id}`);if(s)if(this.isChild(s.getAttribute("id"),t.getAttribute("foreignKey"))){if(this.startBlock===e?this.api.blocks.move(this.startBlock+1,e):this.api.blocks.move(this.startBlock,e),!o){const t=this.getIndex(this.holderDragged);this.removeAttributesFromNewBlock(t)}}else{if(o){const e=t.getAttribute("foreignKey")??t.querySelector(".toggle-block__selector").getAttribute("id"),o=this.getIndex(this.holderDragged);this.setAttributesToNewBlock(o,e)}this.moveChildren(e)}}if(!o){const t=this.getIndex(this.holderDragged);this.removeAttributesFromNewBlock(t)}}))}}}))}}moveChildren(t,e=this.wrapper.id){let o=document.querySelectorAll(`div[foreignKey="${e}"]`);o=this.startBlock>=t?[...o].reverse():o,o.forEach((e=>{const o=this.getIndex(e);this.api.blocks.move(t,o);const s=e.querySelectorAll(".toggle-block__selector");if(s.length>0){const o=this.getIndex(e),i=this.startBlock<t?0:1;s.forEach((t=>this.moveChildren(o+i,t.getAttribute("id"))));const n=Math.abs(t-o);t=this.startBlock<t?t+n:t-n}}))}restoreItemAttributes(t){if(void 0!==this.wrapper){const e=this.api.blocks.getCurrentBlockIndex(),o=this.api.blocks.getBlockByIndex(e),{holder:s}=o,i=!this.isPartOfAToggle(s),n=t.removedNodes[0];if(this.itemsId.includes(o.id)&&i)this.setAttributesToNewBlock(e);else if(n&&this.isPartOfAToggle(n)&&i){const t=s.firstChild.firstChild;this.isPartOfAToggle(t)||(this.setAttributesToNewBlock(e),this.itemsId[e]=o.id)}}}createToggleWithShortcut(t){const e=t.textContent;if(">"===e[0]&&!this.isPartOfAToggle(t)){const t=this.api.blocks.getCurrentBlockIndex();this.api.blocks.insert("toggle",{text:e.slice(2)},this.api,t,!0),this.api.blocks.delete(t+1),this.api.caret.setToBlock(t)}}nestBlock(t){const e=t.parentElement.parentElement,o=e.previousElementSibling,s=o.firstChild.firstChild;if(this.isPartOfAToggle(s)||this.isPartOfAToggle(o)){const t=o.getAttribute("foreignKey"),i=s.getAttribute("id"),n=t||i;e.setAttribute("will-be-a-nested-block",!0),document.getElementById(n).children[1].focus()}}setNestedBlockAttributes(){const t=this.api.blocks.getCurrentBlockIndex(),e=this.api.blocks.getBlockByIndex(t),{holder:o}=e;o.getAttribute("will-be-a-nested-block")&&(o.removeAttribute("will-be-a-nested-block"),this.setAttributesToNewBlock(t),this.api.toolbar.close())}isPartOfAToggle(t){const e=Array.from(t.classList);return e.includes("toggle-block__item")||e.includes("toggle-block__input")||e.includes("toggle-block__selector")}}})(),s.default})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ToggleBlock=e():t.ToggleBlock=e()}(self,(()=>(()=>{var t={424:(t,e,o)=>{"use strict";o.d(e,{Z:()=>l});var i=o(81),s=o.n(i),r=o(645),n=o.n(r)()(s());n.push([t.id,".toggle-block__selector > div {\n  vertical-align: middle;\n  display: inline-block;\n  padding: 1% 0 1% 0;\n  outline: none;\n  border: none;\n  width: 90%;\n}\n\n.toggle-block__selector br {\n  display: none;\n}\n\n.toggle-block__icon > svg {\n  vertical-align: middle;\n  width: 15px;\n  height: auto;\n}\n\n.toggle-block__icon:hover {\n  color: #388ae5;\n  cursor: pointer;\n}\n\n.bi-play-fill {\n  width: 34px;\n  height: 34px;\n}\n\n.toggle-block__input {\n  margin-left: 5px;\n}\n\n.toggle-block__input:empty:before {\n  content: attr(placeholder);\n  color: gray;\n  background-color: transparent;\n}\n\n.toggle-block__content-default {\n  margin-left: 20px;\n}\n\n.toggle-block__item {\n  margin-left: 39px;\n}\n\n.toggle-block__content-default {\n  color: gray;\n  border-radius: 5px;\n}\n\n.toggle-block__content-default:hover {\n  cursor: pointer;\n  background: rgba(55, 53, 47, 0.08);\n}\n\ndiv.toggle-block__hidden {\n  display: none;\n}\n",""]);const l=n},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o="",i=void 0!==e[5];return e[4]&&(o+="@supports (".concat(e[4],") {")),e[2]&&(o+="@media ".concat(e[2]," {")),i&&(o+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),o+=t(e),i&&(o+="}"),e[2]&&(o+="}"),e[4]&&(o+="}"),o})).join("")},e.i=function(t,o,i,s,r){"string"==typeof t&&(t=[[null,t,void 0]]);var n={};if(i)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(n[c]=!0)}for(var d=0;d<t.length;d++){var a=[].concat(t[d]);i&&n[a[0]]||(void 0!==r&&(void 0===a[5]||(a[1]="@layer".concat(a[5].length>0?" ".concat(a[5]):""," {").concat(a[1],"}")),a[5]=r),o&&(a[2]?(a[1]="@media ".concat(a[2]," {").concat(a[1],"}"),a[2]=o):a[2]=o),s&&(a[4]?(a[1]="@supports (".concat(a[4],") {").concat(a[1],"}"),a[4]=s):a[4]="".concat(s)),e.push(a))}},e}},81:t=>{"use strict";t.exports=function(t){return t[1]}},379:t=>{"use strict";var e=[];function o(t){for(var o=-1,i=0;i<e.length;i++)if(e[i].identifier===t){o=i;break}return o}function i(t,i){for(var r={},n=[],l=0;l<t.length;l++){var c=t[l],d=i.base?c[0]+i.base:c[0],a=r[d]||0,h="".concat(d," ").concat(a);r[d]=a+1;var g=o(h),u={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==g)e[g].references++,e[g].updater(u);else{var p=s(u,i);i.byIndex=l,e.splice(l,0,{identifier:h,updater:p,references:1})}n.push(h)}return n}function s(t,e){var o=e.domAPI(e);return o.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;o.update(t=e)}else o.remove()}}t.exports=function(t,s){var r=i(t=t||[],s=s||{});return function(t){t=t||[];for(var n=0;n<r.length;n++){var l=o(r[n]);e[l].references--}for(var c=i(t,s),d=0;d<r.length;d++){var a=o(r[d]);0===e[a].references&&(e[a].updater(),e.splice(a,1))}r=c}}},569:t=>{"use strict";var e={};t.exports=function(t,o){var i=function(t){if(void 0===e[t]){var o=document.querySelector(t);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}e[t]=o}return e[t]}(t);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(o)}},216:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},565:(t,e,o)=>{"use strict";t.exports=function(t){var e=o.nc;e&&t.setAttribute("nonce",e)}},795:t=>{"use strict";t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(o){!function(t,e,o){var i="";o.supports&&(i+="@supports (".concat(o.supports,") {")),o.media&&(i+="@media ".concat(o.media," {"));var s=void 0!==o.layer;s&&(i+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),i+=o.css,s&&(i+="}"),o.media&&(i+="}"),o.supports&&(i+="}");var r=o.sourceMap;r&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),e.styleTagTransform(i,t,e.options)}(e,t,o)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},370:t=>{t.exports='<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path></svg>'}},e={};function o(i){var s=e[i];if(void 0!==s)return s.exports;var r=e[i]={id:i,exports:{}};return t[i](r,r.exports,o),r.exports}o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.nc=void 0;var i={};return(()=>{"use strict";o.d(i,{default:()=>I});var t=o(379),e=o.n(t),s=o(795),r=o.n(s),n=o(569),l=o.n(n),c=o(565),d=o.n(c),a=o(216),h=o.n(a),g=o(589),u=o.n(g),p=o(424),f={};f.styleTagTransform=u(),f.setAttributes=d(),f.insert=l().bind(null,"head"),f.domAPI=r(),f.insertStyleElement=h(),e()(p.Z,f),p.Z&&p.Z.locals&&p.Z.locals;const b={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let m;const k=new Uint8Array(16);function y(){if(!m&&(m="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!m))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return m(k)}const v=[];for(let t=0;t<256;++t)v.push((t+256).toString(16).slice(1));const B=function(t,e,o){if(b.randomUUID&&!e&&!t)return b.randomUUID();const i=(t=t||{}).random||(t.rng||y)();if(i[6]=15&i[6]|64,i[8]=63&i[8]|128,e){o=o||0;for(let t=0;t<16;++t)e[o+t]=i[t];return e}return function(t,e=0){return(v[t[e+0]]+v[t[e+1]]+v[t[e+2]]+v[t[e+3]]+"-"+v[t[e+4]]+v[t[e+5]]+"-"+v[t[e+6]]+v[t[e+7]]+"-"+v[t[e+8]]+v[t[e+9]]+"-"+v[t[e+10]]+v[t[e+11]]+v[t[e+12]]+v[t[e+13]]+v[t[e+14]]+v[t[e+15]]).toLowerCase()}(i)};var A=o(370),x=o.n(A);class I{static get toolbox(){return{title:"Toggle",icon:x()}}static get enableLineBreaks(){return!0}static get isReadOnlySupported(){return!0}constructor({data:t,api:e,readOnly:o,config:i}){this.data={text:t.text||"",status:t.status||"open",fk:t.fk||`fk-${B()}`,items:t.items||0},this.itemsId=[],this.api=e;const{toolbar:{close:s},blocks:{getCurrentBlockIndex:r,getBlockByIndex:n,getBlocksCount:l,move:c}}=this.api;this.close=s,this.getCurrentBlockIndex=r,this.getBlocksCount=l,this.getBlockByIndex=n,this.move=c,this.wrapper=void 0,this.readOnly=o||!1,this.placeholder=i?.placeholder??"Toggle",this.defaultContent=i?.defaultContent??"Empty toggle. Click or drop blocks inside.",this.addListeners(),this.addSupportForUndoAndRedoActions(),this.addSupportForDragAndDropActions(),this.addSupportForCopyAndPasteAction()}isAToggleItem(t){return t.classList.contains("toggle-block__item")}isAToggleRoot(t){return t.classList.contains("toggle-block__selector")||Boolean(t.querySelector(".toggle-block__selector"))}createParagraphFromToggleRoot(t){if("Enter"===t.code){const t=document.getSelection().focusOffset,e=this.api.blocks.getCurrentBlockIndex(),o=this.api.blocks.getBlockByIndex(e),{holder:i}=o,s=i.firstChild.firstChild,r=s.children[1].innerHTML,n=r.indexOf("<br>"),l=-1===n?r.length:n;"closed"===this.data.status&&(this.resolveToggleAction(),this.hideAndShowBlocks());const c=r.slice(l+4,t.focusOffset);s.children[1].innerHTML=r.slice(t.focusOffset,l),this.api.blocks.insert("paragraph",{text:c},{},e+1,1),this.setAttributesToNewBlock()}}createParagraphFromIt(){this.setAttributesToNewBlock()}setAttributesToNewBlock(t=null,e=this.wrapper.id){const o=null===t?this.api.blocks.getCurrentBlockIndex():t,i=B(),s=this.api.blocks.getBlockByIndex(o);this.itemsId.includes(s.id)||this.itemsId.splice(o-1,0,s.id);const{holder:r}=s,n=r.firstChild.firstChild;r.setAttribute("foreignKey",e),r.setAttribute("id",i),r.classList.add("toggle-block__item"),this.readOnly||(r.onkeydown=this.setEventsToNestedBlock.bind(this),n.focus())}setEventsToNestedBlock(t){if("Enter"===t.code)this.createParagraphFromIt();else{const e=this.getCurrentBlockIndex(),o=this.getBlockByIndex(e),{holder:i}=o;if("Tab"===t.code&&t.shiftKey&&this.extractBlock(e),"Backspace"===t.code){const t=document.getSelection().focusOffset;this.removeBlock(i,o.id,t)}}}removeBlock(t,e,o){if(0===o){const o=t.nextSibling.firstChild.firstChild.innerHTML;t.firstChild.firstChild.children[1].innerHTML+=o;const i=this.itemsId.indexOf(e);this.itemsId.splice(i,1);const s=this.api.blocks.getCurrentBlockIndex();this.api.blocks.delete(s+1)}}removeAttributesFromNewBlock(t){const e=this.api.blocks.getBlockByIndex(t),{holder:o}=e;if(!this.itemsId.includes(e.id)){const t=this.itemsId.indexOf(e.id);this.itemsId.splice(t,1)}o.removeAttribute("foreignKey"),o.removeAttribute("id"),o.onkeydown={},o.onkeyup={},o.classList.remove("toggle-block__item")}createToggle(){this.wrapper=document.createElement("div"),this.wrapper.classList.add("toggle-block__selector"),this.wrapper.id=this.data.fk;const t=document.createElement("span"),e=document.createElement("div"),o=document.createElement("div");t.classList.add("toggle-block__icon"),t.innerHTML=x(),e.classList.add("toggle-block__input"),e.setAttribute("contentEditable",!this.readOnly),e.innerHTML=this.data.text||"",this.readOnly||(e.addEventListener("keyup",this.createParagraphFromToggleRoot.bind(this)),e.addEventListener("keydown",this.removeToggle.bind(this)),e.addEventListener("focusin",(()=>this.setFocusToggleRootAtTheEnd())),e.addEventListener("keyup",this.setPlaceHolder.bind(this)),e.setAttribute("placeholder",this.placeholder),e.addEventListener("focus",this.setDefaultContent.bind(this)),e.addEventListener("focusout",this.setDefaultContent.bind(this)),o.addEventListener("click",this.clickInDefaultContent.bind(this)),e.addEventListener("focus",this.setNestedBlockAttributes.bind(this))),o.classList.add("toggle-block__content-default","toggle-block__hidden"),o.innerHTML=this.defaultContent,this.wrapper.appendChild(t),this.wrapper.appendChild(e),this.wrapper.appendChild(o)}setFocusToggleRootAtTheEnd(){const t=document.activeElement,e=window.getSelection(),o=document.createRange();e.removeAllRanges(),o.selectNodeContents(t),o.collapse(!1),e.addRange(o),t.focus()}clickInDefaultContent(){this.api.blocks.insert(),this.setAttributesToNewBlock(),this.setDefaultContent()}setDefaultContent(){const t=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{firstChild:e,lastChild:o}=this.wrapper,{status:i}=this.data,s=t.length>0||"closed"===i;o.classList.toggle("toggle-block__hidden",s),e.style.color=0===t.length?"gray":"black"}removeToggle(t){if("Backspace"===t.code){const{children:t}=this.wrapper,e=t[1].innerHTML;if(0===document.getSelection().focusOffset){const t=this.api.blocks.getCurrentBlockIndex(),o=e.indexOf("<br>"),i=-1===o?e.length:o,s=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);for(let e=1;e<s.length+1;e+=1)this.removeAttributesFromNewBlock(t+e);this.api.blocks.delete(t),this.api.blocks.insert("paragraph",{text:e.slice(0,i)},{},t,1),this.api.caret.setToBlock(t)}}}findToogleRootIndex(t,e){const o=this.getBlockByIndex(t),{holder:i}=o;return this.isAToggleRoot(i)&&e===i.querySelector(".toggle-block__selector").getAttribute("id")?t:t-1>=0?this.findToogleRootIndex(t-1,e):-1}extractBlock(t){const e=this.getBlockByIndex(t),{holder:o}=e;if(this.isAToggleItem(o)){const e=o.getAttribute("foreignKey"),i=this.findToogleRootIndex(t,e);if(i>=0){const o=this.getDecendentsNumber(e),s=i+o;o>1&&this.api.blocks.move(s,t),setTimeout((()=>this.removeAttributesFromNewBlock(s)),200)}}this.api.caret.setToBlock(t),this.api.toolbar.close()}setPlaceHolder(t){if("Backspace"===t.code||"Enter"===t.code){const{children:t}=this.wrapper,{length:e}=t[1].textContent;0===e&&(t[1].textContent="")}}render(){return this.createToggle(),setTimeout((()=>this.renderItems())),setTimeout((()=>this.setInitialTransition())),this.wrapper}setInitialTransition(){const{status:t}=this.data,e=this.wrapper.firstChild.firstChild;e.style.transition="0.1s",e.style.transform=`rotate(${"closed"===t?0:90}deg)`}renderItems(){const t=this.api.blocks.getBlocksCount(),e=this.wrapper.firstChild;let o;if(this.readOnly){const t=document.getElementsByClassName("codex-editor__redactor")[0],{children:e}=t,{length:i}=e;for(let t=0;t<i;t+=1){const i=e[t].firstChild.firstChild,{id:s}=i;if(s===this.wrapper.id){o=t;break}}}else{const t=this.wrapper.children[1];let e={},i=this.api.blocks.getCurrentBlockIndex();for(;e[1]!==t;){o=i;const t=this.api.blocks.getBlockByIndex(o),{holder:s}=t;e=s.firstChild.firstChild.children,i-=1}}if(o+this.data.items<t)for(let t=o+1,e=0;t<=o+this.data.items;t+=1){const o=this.api.blocks.getBlockByIndex(t),{holder:i}=o,s=i.firstChild.firstChild;if(this.isPartOfAToggle(s)){this.data.items=e;break}this.setAttributesToNewBlock(t),e+=1}else this.data.items=0;e.addEventListener("click",(()=>{this.resolveToggleAction(),setTimeout((()=>{this.hideAndShowBlocks()}))})),this.hideAndShowBlocks()}resolveToggleAction(){const t=this.wrapper.firstChild.firstChild;"closed"===this.data.status?(this.data.status="open",t.style.transform="rotate(90deg)"):(this.data.status="closed",t.style.transform="rotate(0deg)"),this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex()).holder.setAttribute("status",this.data.status)}hideAndShowBlocks(t=this.wrapper.id,e=this.data.status){const o=document.querySelectorAll(`div[foreignKey="${t}"]`),{length:i}=o;if(i>0)o.forEach((t=>{t.hidden="closed"===e;const o=t.querySelectorAll(".toggle-block__selector");if(o.length>0){const i="closed"===e?e:t.getAttribute("status");this.hideAndShowBlocks(o[0].getAttribute("id"),i)}}));else if(t===this.wrapper.id){const{lastChild:t}=this.wrapper;t.classList.toggle("toggle-block__hidden",e)}}save(t){const e=t.getAttribute("id"),{children:o}=t,i=o[1].innerHTML,s=document.querySelectorAll(`div[foreignKey="${e}"]`);return this.data.fk=e,Object.assign(this.data,{text:i,items:s.length})}getDecendentsNumber(t){let e=0;return document.querySelectorAll(`div[foreignKey="${t}"]`).forEach((t=>{if(t.hasAttribute("status")){const o=t.querySelector(".toggle-block__selector").getAttribute("id");e+=this.getDecendentsNumber(o)}e+=1})),e}highlightToggleItems(t){document.querySelectorAll(`div[foreignKey="${t}"]`).forEach((t=>{if(t.classList.add("ce-block--selected"),t.hasAttribute("status")){const e=t.querySelector(".toggle-block__selector").getAttribute("id");this.highlightToggleItems(e)}}))}renderSettings(){const t=document.getElementsByClassName("ce-settings--opened")[0].lastChild,e=this.api.blocks.getCurrentBlockIndex();this.highlightToggleItems(this.wrapper.id),setTimeout((()=>{this.addEventsMoveButtons("ce-tune-move-down",0,t,e),this.addEventsMoveButtons("ce-tune-move-up",1,t,e);const o=t.getElementsByClassName("ce-settings__button--delete")[0];o&&o.addEventListener("click",(()=>{const t=o.classList;-1===Object.values(t).indexOf("clicked-to-destroy-toggle")?o.classList.add("clicked-to-destroy-toggle"):this.removeFullToggle(e)}))}))}addEventsMoveButtons(t,e,o,i){const s=o.getElementsByClassName(t);if(!s.length)return;const r=s[0];r&&r.addEventListener("click",(()=>{this.moveToggle(i,e)}))}moveToggle(t,e){if(!this.readOnly){this.close();const o=this.getCurrentBlockIndex(),i=this.getDecendentsNumber(this.wrapper.id),s=this.getBlocksCount(),r=t+i;this.move(t,o),t>=0&&r<=s-1&&(0===e?this.moveDown(t,r):this.moveUp(t,r))}}moveDown(t,e){const o=e+1,i=this.getBlockByIndex(o),{holder:s}=i;if(this.move(t,o),"toggle"===i.name){const e=s.querySelector(".toggle-block__selector").getAttribute("id"),i=this.getDecendentsNumber(e);this.moveDecendents(i,t+1,o+1,0)}}moveUp(t,e){const o=t-1,i=this.getBlockByIndex(o);if("toggle"===i.name)return;const{holder:s}=i;if(s.hasAttribute("foreignKey")){const o=this.getBlockByIndex(t).holder.getAttribute("foreignKey"),i=s.getAttribute("foreignKey");if(i!==o){const s=this.findIndexOfParentBlock(o,i,t),r=this.getBlockByIndex(s).holder.querySelector(".toggle-block__selector").getAttribute("id"),n=this.getDecendentsNumber(r);return this.move(e,s),void this.moveDecendents(n,e,s,1)}}this.move(e,o)}findIndexOfParentBlock(t,e,o){const i=o-(this.getDecendentsNumber(e)+1),s=this.getBlockByIndex(i).holder;if(s.hasAttribute("foreignKey")){const e=s.getAttribute("foreignKey");if(e!==t){const o=this.getBlockByIndex(i-1).holder;if(o.hasAttribute("foreignKey")){const s=o.getAttribute("foreignKey");if(s!==e)return this.findIndexOfParentBlock(t,s,i)}}}return i}moveDecendents(t,e,o,i){let s=o,r=e;for(;t;)this.move(r,s),0===i&&(s+=1,r+=1),t-=1}removeFullToggle(t){const e=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{length:o}=e;for(let e=t;e<t+o;e+=1)this.api.blocks.delete(t)}addListeners(){this.readOnly||document.activeElement.addEventListener("keyup",(t=>{const e=document.activeElement,o=this.api.blocks.getCurrentBlockIndex(),i=e.parentElement.parentElement;"Space"===t.code?this.createToggleWithShortcut(e):o>0&&!this.isPartOfAToggle(e)&&!this.isPartOfAToggle(i)&&"Tab"===t.code&&this.nestBlock(e)}))}addSupportForUndoAndRedoActions(){if(!this.readOnly){const t=document.querySelector("div.codex-editor__redactor"),e={attributes:!0,childList:!0,characterData:!0};new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&setTimeout(this.restoreItemAttributes.bind(this,t))}))})).observe(t,e)}}getIndex=t=>Array.from(t.parentNode.children).indexOf(t);isChild=(t,e)=>!(!t||!e)&&(t===e||[...document.querySelectorAll(`div[foreignKey="${t}"]`)].some((t=>{const o=t.querySelector(".toggle-block__selector");return!!o&&this.isChild(o.getAttribute("id"),e)})));addSupportForDragAndDropActions(){if(!this.readOnly){if(void 0===this.wrapper)return void setTimeout((()=>this.addSupportForDragAndDropActions()),250);document.querySelector(`#${this.wrapper.id}`).parentNode.parentNode.setAttribute("status",this.data.status);const t=document.querySelector(".ce-toolbar__settings-btn");t.setAttribute("draggable","true"),t.addEventListener("dragstart",(()=>{this.startBlock=this.api.blocks.getCurrentBlockIndex(),this.nameDragged=this.api.blocks.getBlockByIndex(this.startBlock).name,this.holderDragged=this.api.blocks.getBlockByIndex(this.startBlock).holder})),document.addEventListener("drop",(t=>{const{target:e}=t;if(document.contains(e)){const t=e.classList.contains("ce-block")?e:e.closest(".ce-block");if(t&&t!==this.holderDragged){let e=this.getIndex(t);e=this.startBlock<e?e+1:e;const o=t.querySelectorAll(".toggle-block__selector").length>0||null!==t.getAttribute("foreignKey");setTimeout((()=>{if("toggle"===this.nameDragged){const i=this.holderDragged.querySelector(`#${this.wrapper.id}`);if(i)if(this.isChild(i.getAttribute("id"),t.getAttribute("foreignKey"))){if(this.startBlock===e?this.api.blocks.move(this.startBlock+1,e):this.api.blocks.move(this.startBlock,e),!o){const t=this.getIndex(this.holderDragged);this.removeAttributesFromNewBlock(t)}}else{if(o){const e=t.getAttribute("foreignKey")??t.querySelector(".toggle-block__selector").getAttribute("id"),o=this.getIndex(this.holderDragged);this.setAttributesToNewBlock(o,e)}this.moveChildren(e)}}if(!o){const t=this.getIndex(this.holderDragged);this.removeAttributesFromNewBlock(t)}}))}}}))}}moveChildren(t,e=this.wrapper.id){let o=document.querySelectorAll(`div[foreignKey="${e}"]`);o=this.startBlock>=t?[...o].reverse():o,o.forEach((e=>{const o=this.getIndex(e);this.api.blocks.move(t,o);const i=e.querySelectorAll(".toggle-block__selector");if(i.length>0){const o=this.getIndex(e),s=this.startBlock<t?0:1;i.forEach((t=>this.moveChildren(o+s,t.getAttribute("id"))));const r=Math.abs(t-o);t=this.startBlock<t?t+r:t-r}}))}restoreItemAttributes(t){if(void 0!==this.wrapper){const e=this.api.blocks.getCurrentBlockIndex(),o=this.api.blocks.getBlockByIndex(e),{holder:i}=o,s=!this.isPartOfAToggle(i),r=t.removedNodes[0];if(this.itemsId.includes(o.id)&&s)this.setAttributesToNewBlock(e);else if(r&&this.isPartOfAToggle(r)&&s){const t=i.firstChild.firstChild;this.isPartOfAToggle(t)||(this.setAttributesToNewBlock(e),this.itemsId[e]=o.id)}}}createToggleWithShortcut(t){const e=t.textContent;if(">"===e[0]&&!this.isPartOfAToggle(t)){const t=this.api.blocks.getCurrentBlockIndex();this.api.blocks.insert("toggle",{text:e.slice(2)},this.api,t,!0),this.api.blocks.delete(t+1),this.api.caret.setToBlock(t)}}nestBlock(t){const e=t.parentElement.parentElement,o=e.previousElementSibling,i=o.firstChild.firstChild;if(this.isPartOfAToggle(i)||this.isPartOfAToggle(o)){const t=o.getAttribute("foreignKey"),s=i.getAttribute("id"),r=t||s;e.setAttribute("will-be-a-nested-block",!0),document.getElementById(r).children[1].focus()}}setNestedBlockAttributes(){const t=this.api.blocks.getCurrentBlockIndex(),e=this.api.blocks.getBlockByIndex(t),{holder:o}=e;o.getAttribute("will-be-a-nested-block")&&(o.removeAttribute("will-be-a-nested-block"),this.setAttributesToNewBlock(t),this.api.toolbar.close())}isPartOfAToggle(t){const e=Array.from(t.classList);return e.includes("toggle-block__item")||e.includes("toggle-block__input")||e.includes("toggle-block__selector")}addSupportForCopyAndPasteAction(){if(!this.readOnly){const t=document.querySelector("div.codex-editor__redactor"),e={attributes:!0,childList:!0,characterData:!0};new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&setTimeout(this.resetIdToCopiedBlock.bind(this,t))}))})).observe(t,e)}}resetIdToCopiedBlock(){if(void 0!==this.wrapper){const t=this.api.blocks.getCurrentBlockIndex(),{holder:e}=this.api.blocks.getBlockByIndex(t);if(this.isPartOfAToggle(e)){const o=e.getAttribute("foreignKey");if(document.querySelectorAll(`#${o}`).length>1){const e=this.findToogleRootIndex(t,o),i=B();for(let o=e;o<=t;o+=1){const t=this.api.blocks.getBlockByIndex(o),{holder:s}=t;o===e?s.firstChild.firstChild.setAttribute("id",`fk-${i}`):s.setAttribute("foreignKey",`fk-${i}`)}}}}}}})(),i.default})()));

package.json

 {
   "name": "editorjs-toggle-block",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Toogle block tool for Editor.js",
@@ -5,0 +5,0 @@ "main": "./dist/bundle.js",

src/index.js

@@ -88,2 +88,3 @@ import './index.css';
     this.addSupportForDragAndDropActions();
+    this.addSupportForCopyAndPasteAction();
   }
@@ -599,5 +600,7 @@
   save(blockContent) {
+    const id = blockContent.getAttribute('id');
     const { children } = blockContent;
     const caption = children[1].innerHTML;
-    const blocks = document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);
+    const blocks = document.querySelectorAll(`div[foreignKey="${id}"]`);
+    this.data.fk = id;
 
@@ -1101,2 +1104,56 @@ return Object.assign(this.data, {
   }
+
+  /**
+   * Adds mutation observer to reset the toggle ids
+   * when a toggle is copied and pasted.
+   */
+  addSupportForCopyAndPasteAction() {
+    if (!this.readOnly) {
+      const target = document.querySelector('div.codex-editor__redactor');
+
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            setTimeout(this.resetIdToCopiedBlock.bind(this, mutation));
+          }
+        });
+      });
+
+      const config = { attributes: true, childList: true, characterData: true };
+
+      observer.observe(target, config);
+    }
+  }
+
+  /**
+   * Reset the toggle ids to ensure toggles with unique id.
+   */
+  resetIdToCopiedBlock() {
+    if (this.wrapper !== undefined) {
+      const index = this.api.blocks.getCurrentBlockIndex();
+      const { holder } = this.api.blocks.getBlockByIndex(index);
+
+      if (this.isPartOfAToggle(holder)) {
+        const foreignKey = holder.getAttribute('foreignKey');
+        const toggleRoot = document.querySelectorAll(`#${foreignKey}`);
+
+        if (toggleRoot.length > 1) {
+          const parentBlock = this.findToogleRootIndex(index, foreignKey);
+          const id = uuidv4();
+
+          for (let i = parentBlock; i <= index; i += 1) {
+            const currentBlock = this.api.blocks.getBlockByIndex(i);
+            const { holder: currentBlockHolder } = currentBlock;
+            if (i === parentBlock) {
+              const externalCover = currentBlockHolder.firstChild;
+              const toggleCover = externalCover.firstChild;
+              toggleCover.setAttribute('id', `fk-${id}`);
+            } else {
+              currentBlockHolder.setAttribute('foreignKey', `fk-${id}`);
+            }
+          }
+        }
+      }
+    }
+  }
 }

test/testHelpers.js

@@ -196,1 +196,23 @@ import { v4 as uuidv4 } from 'uuid';
 }
+
+export function resetIdToCopiedBlock(redactor, lastCopiedBlock, index, childrenNumber) {
+  const foreignKey = lastCopiedBlock.getAttribute('foreignKey');
+  const toggleRoot = document.querySelectorAll(`#${foreignKey}`);
+
+  if (toggleRoot.length > 1) {
+    const parentBlock = index - childrenNumber;
+    const id = uuidv4();
+    const blocks = redactor.children;
+
+    for (let i = parentBlock; i < index; i += 1) {
+      const currentBlock = blocks[i];
+      if (i === parentBlock) {
+        const externalCover = currentBlock.firstChild;
+        const toggleCover = externalCover.firstChild;
+        toggleCover.setAttribute('id', `fk-${id}`);
+      } else {
+        currentBlock.setAttribute('foreignKey', `fk-${id}`);
+      }
+    }
+  }
+}

test/toggleBlock.test.js

@@ -8,3 +8,3 @@ import ToggleBlock from '../src';
   extractionBlock, createDefaultBlock, createToggle, getEditorElements, nestBlock,
-  createToggleRoot, changeToggleStatus, startDocument,
+  createToggleRoot, changeToggleStatus, startDocument, resetIdToCopiedBlock,
 } from './testHelpers';
@@ -411,2 +411,40 @@
   });
+
+  describe('When a toggle and its nested blocks are copied and pasted', () => {
+    beforeEach(() => {
+      const blocks = generateFullToggle(toggleBlock, data);
+      blocks.forEach((block) => {
+        redactor.appendChild(block);
+      });
+    });
+
+    it('resets the duplicated ids from a toggle with 3 paragraphs', () => {
+      const { children: originalChildren } = redactor;
+      const childrenNumber = originalChildren.length;
+
+      redactor.innerHTML += redactor.innerHTML;
+
+      const { children: modifiedChildren } = redactor;
+      const lastCopiedBlock = redactor.lastChild;
+      const index = modifiedChildren.length;
+
+      resetIdToCopiedBlock(redactor, lastCopiedBlock, index, childrenNumber);
+
+      for (let i = 0; i < childrenNumber; i += 1) {
+        const originalBlock = originalChildren[i];
+        const copiedBlock = modifiedChildren[i + childrenNumber];
+
+        if (i === 0) {
+          const externalCover = [originalBlock.firstChild, copiedBlock.firstChild];
+          const toggleCover = [externalCover[0].firstChild, externalCover[1].firstChild];
+
+          expect(toggleCover[0].getAttribute('id')).not.toEqual(toggleCover[1].getAttribute('id'));
+        } else {
+          expect(originalBlock.getAttribute('foreignKey')).not.toEqual(copiedBlock.getAttribute('foreignKey'));
+        }
+
+        expect(originalBlock.textContent).toEqual(copiedBlock.textContent);
+      }
+    });
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

1226422

increased by0.41%

Lines of code

1725

increased by5.96%

No dependency changes