diff --git a/dist/bundle.js b/dist/bundle.js index 1a7e960..f329d5a 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1 +1,302 @@ -!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),r=o(645),n=o.n(r)()(i());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="",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,r){"string"==typeof t&&(t=[[null,t,void 0]]);var n={};if(s)for(var l=0;l0?" ".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),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{"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){if("undefined"==typeof document)return{update:function(){},remove:function(){}};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 r=o.sourceMap;r&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),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=''}},e={};function o(s){var i=e[s];if(void 0!==i)return i.exports;var r=e[s]={id:s,exports:{}};return t[s](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 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),r=o.n(i),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 m={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let b;const k=new Uint8Array(16);function y(){if(!b&&(b="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!b))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return b(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(m.randomUUID&&!e&&!t)return m.randomUUID();const s=(t=t||{}).random||(t.rng||y)();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(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()}(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,nested:!1},this.itemsId=[],this.api=e;const{toolbar:{close:i},blocks:{getCurrentBlockIndex:r,getBlockByIndex:n,getBlocksCount:l,move:c}}=this.api;this.close=i,this.getCurrentBlockIndex=r,this.getBlocksCount=l,this.getBlockByIndex=n,this.move=c,this.wrapper=void 0,this.readOnly=o||!1,this.placeholder=s?.placeholder??"Toggle",this.defaultContent=s?.defaultContent??"Empty toggle. Click or drop blocks inside.",this.nestedMarginLeft=39,this.itemsMarginLeft=39,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:s}=o,i=s.firstChild.firstChild,r=i.children[1].innerHTML,n=r.indexOf("
"),l=-1===n?r.length:n;"closed"===this.data.status&&(this.resolveToggleAction(),this.hideAndShowBlocks());const c=r.slice(l+4,t.focusOffset);i.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,o=null){const s=null===t?this.api.blocks.getCurrentBlockIndex():t,i=o||this.api.blocks.getBlockByIndex(s),{holder:r}=i;setTimeout((()=>{if(this.data.nested){const t=getComputedStyle(r),{marginLeft:e}=t;this.itemsMarginLeft=0===this.data.items?parseFloat(e)+this.nestedMarginLeft:this.itemsMarginLeft,r.style.marginLeft=`${this.itemsMarginLeft}px`}}),1);const n=B();this.itemsId.includes(i.id)||this.itemsId.splice(s-1,0,i.id);const{holder:l}=i,c=l.firstChild.firstChild;l.setAttribute("foreignKey",e),l.setAttribute("id",n),setTimeout((()=>l.classList.add("toggle-block__item"))),this.readOnly||(l.onkeydown=this.setEventsToNestedBlock.bind(this),c.focus())}setEventsToNestedBlock(t){if("Enter"===t.code)setTimeout((()=>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 t=this.itemsId.indexOf(e);this.itemsId.splice(t,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("
"),s=-1===o?e.length:o,i=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);for(let e=1;e=0?this.findToggleRootIndex(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.findToggleRootIndex(t,e);if(s>=0){const o=this.getDescendantsNumber(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(){this.createToggle();const t=this.api.blocks.getCurrentBlockIndex(),e=this.api.blocks.getBlockByIndex(t),{holder:o}=e;if(this.isPartOfAToggle(o)){const e=o.getAttribute("foreignKey");setTimeout((()=>{const o=this.api.blocks.getBlockByIndex(t),{holder:s}=o,i=B();s.classList.add("toggle-block__item"),s.setAttribute("foreignKey",e),s.setAttribute("id",i),this.data.nested=!0}))}return 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{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 e=t.getAttribute("id"),{children:o}=t,s=o[1].innerHTML,i=document.querySelectorAll(`div[foreignKey="${e}"]`);return this.data.fk=e,Object.assign(this.data,{text:s,items:i.length})}getDescendantsNumber(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.getDescendantsNumber(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")[0];return setTimeout((()=>{const e=t.lastChild,o=this.api.blocks.getCurrentBlockIndex();this.highlightToggleItems(this.wrapper.id);const s=e.querySelector('[data-item-name="move-up"]')||e.getElementsByClassName("ce-tune-move-up")[0],i=e.querySelector('[data-item-name="move-down"]')||e.getElementsByClassName("ce-tune-move-down")[0],r=e.querySelector('[data-item-name="delete"]')||e.getElementsByClassName("ce-settings__button--delete")[0];this.addEventsMoveButtons(i,0,o),this.addEventsMoveButtons(s,1,o),this.addEventDeleteButton(r,o)})),document.createElement("div")}addEventsMoveButtons(t,e,o){t&&t.addEventListener("click",(()=>{this.moveToggle(o,e)}))}addEventDeleteButton(t,e){t&&t.addEventListener("click",(()=>{const o=t.classList;-1===Object.values(o).indexOf("clicked-to-destroy-toggle")?t.classList.add("clicked-to-destroy-toggle"):this.removeFullToggle(e)}))}moveToggle(t,e){if(!this.readOnly){this.close();const o=this.getCurrentBlockIndex(),s=this.getDescendantsNumber(this.wrapper.id),i=this.getBlocksCount(),r=t+s;this.move(t,o),t>=0&&r<=i-1&&(0===e?this.moveDown(t,r):this.moveUp(t,r))}}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.getDescendantsNumber(e);this.moveDescendants(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),r=this.getBlockByIndex(i).holder.querySelector(".toggle-block__selector").getAttribute("id"),n=this.getDescendantsNumber(r);return this.move(e,i),void this.moveDescendants(n,e,i,1)}}this.move(e,o)}findIndexOfParentBlock(t,e,o){const s=o-(this.getDescendantsNumber(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}moveDescendants(t,e,o,s){let i=o,r=e;for(;t;)this.move(r,i),0===s&&(i+=1,r+=1),t-=1}removeFullToggle(t){const e=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{length:o}=e;for(let e=t;ethis.api.blocks.delete(t)))}addListeners(){this.readOnly||document.activeElement.addEventListener("keyup",(t=>{const e=document.activeElement,o=this.getCurrentBlockIndex(),{holder:s}=this.getBlockByIndex(o);"Space"===t.code?this.createToggleWithShortcut(e):o>0&&!this.isPartOfAToggle(s)&&"Tab"===t.code&&this.nestBlock(s)}))}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.startBlock0||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 this.assignToggleItemAttributes(o,t),this.moveChildren(e)}else this.nameDragged&&this.assignToggleItemAttributes(o,t);if(!o){const t=this.getIndex(this.holderDragged);this.removeAttributesFromNewBlock(t)}}))}}}))}}assignToggleItemAttributes(t,e){if(t){const t=e.getAttribute("foreignKey")??e.querySelector(".toggle-block__selector").getAttribute("id"),o=this.getIndex(this.holderDragged);this.setAttributesToNewBlock(o,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.startBlockthis.moveChildren(o+i,t.getAttribute("id"))));const r=Math.abs(t-o);t=this.startBlockn){const{id:s}=t.addedNodes[0],i=this.api.blocks.getById(s);this.setAttributesToNewBlock(null,this.wrapper.id,i),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.previousElementSibling,o=e.firstChild.firstChild;if(this.isPartOfAToggle(o)||this.isPartOfAToggle(e)){const s=e.getAttribute("foreignKey"),i=o.getAttribute("id"),r=s||i;t.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),o=["toggle-block__item","toggle-block__input","toggle-block__selector"],s=o.some((e=>0!==t.getElementsByClassName(e).length));return o.some((t=>e.includes(t)))||s}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.findToggleRootIndex(t,o),s=B();for(let o=e;o<=t;o+=1){const t=this.api.blocks.getBlockByIndex(o),{holder:i}=t;o===e?i.firstChild.firstChild.setAttribute("id",`fk-${s}`):i.setAttribute("foreignKey",`fk-${s}`)}}}}}}})(),s.default})())); \ No newline at end of file +/* + * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). + * This devtool is neither made for production nor for readable output files. + * It uses "eval()" calls to create a separate source file in the browser devtools. + * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) + * or disable the default devtool with "devtool: false". + * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). + */ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(); + else if(typeof define === 'function' && define.amd) + define([], factory); + else if(typeof exports === 'object') + exports["ToggleBlock"] = factory(); + else + root["ToggleBlock"] = factory(); +})(self, () => { +return /******/ (() => { // webpackBootstrap +/******/ var __webpack_modules__ = ({ + +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ToggleBlock)\n/* harmony export */ });\n/* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.css */ \"./src/index.css\");\n/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/v4.js\");\n/* harmony import */ var _assets_toggleIcon_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../assets/toggleIcon.svg */ \"./assets/toggleIcon.svg\");\n/* harmony import */ var _assets_toggleIcon_svg__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_assets_toggleIcon_svg__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\n\n/**\n * ToggleBlock for the Editor.js\n * Creates a toggle and paragraphs can be saved in it.\n * Requires no server-side uploader.\n *\n * @typedef {object} ToggleBlockData\n * @description Tool's input and output data format\n * @property {string} text - toggle text\n * @property {string} status - toggle status\n * @property {array} items - toggle paragraphs\n */\n\nclass ToggleBlock {\n /**\n * Icon and title for displaying at the Toolbox\n * @returns {{tittle: string, icon: string}}\n */\n static get toolbox() {\n return {\n title: 'Toggle',\n icon: (_assets_toggleIcon_svg__WEBPACK_IMPORTED_MODULE_1___default())\n };\n }\n\n /**\n * Disables the creation of new EditorJS blocks by pressing\n * 'enter' when in a toggle block.\n */\n static get enableLineBreaks() {\n return true;\n }\n\n /**\n * Notify core that the read-only mode is supported\n *\n * @returns {boolean}\n */\n static get isReadOnlySupported() {\n return true;\n }\n\n /**\n * Render tool`s main Element and fill it with saved data\n *\n * @param {{data: object, api: object}}\n * data - Previously saved data\n * api - Editor.js API\n * readOnly - read-only mode status\n */\n constructor({\n data,\n api,\n readOnly,\n config\n }) {\n console.log('again constructor');\n this.data = {\n text: data.text || '',\n status: data.status || 'open',\n fk: data.fk || `fk-${(0,uuid__WEBPACK_IMPORTED_MODULE_2__[\"default\"])()}`,\n items: data.items || 0,\n nested: data.nested || false\n };\n this.itemsId = [];\n this.api = api;\n const {\n toolbar: {\n close\n },\n blocks: {\n getCurrentBlockIndex,\n getBlockByIndex,\n getBlocksCount,\n move\n }\n } = this.api;\n this.close = close;\n this.getCurrentBlockIndex = getCurrentBlockIndex;\n this.getBlocksCount = getBlocksCount;\n this.getBlockByIndex = getBlockByIndex;\n this.move = move;\n this.wrapper = undefined;\n this.readOnly = readOnly || false;\n this.placeholder = config?.placeholder ?? 'Toggle';\n this.defaultContent = config?.defaultContent ?? 'Empty toggle. Click or drop blocks inside.';\n this.nestedMarginLeft = 39;\n this.itemsMarginLeft = 39;\n this.addListeners();\n this.addSupportForUndoAndRedoActions();\n this.addSupportForDragAndDropActions();\n this.addSupportForCopyAndPasteAction();\n }\n\n /**\n * Returns true if the div element is a toggle child, otherwise, returns false\n * @param {HTMLDivElement} holder\n * @returns {boolean}\n */\n isAToggleItem(holder) {\n return holder.classList.contains('toggle-block__item');\n }\n\n /**\n * Returns true if the div element is a toggle root, otherwise, returns false\n * @param {HTMLDivElement} holder\n * @returns {boolean}\n */\n isAToggleRoot(holder) {\n return holder.classList.contains('toggle-block__selector') || Boolean(holder.querySelector('.toggle-block__selector'));\n }\n\n /**\n * First it gets the toggle index.\n *\n * After checks the toggle status, if this is 'closed' then open it.\n *\n * After inserts a new block after the toggle index and the a method\n * is called to add the required properties to the new block.\n * gets the focus.\n *\n * @param {KeyboardEvent} e - key up event\n */\n createParagraphFromToggleRoot(e) {\n if (e.code === 'Enter') {\n const currentPosition = document.getSelection().focusOffset;\n const originalIndex = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(originalIndex);\n const {\n holder\n } = block;\n const blockCover = holder.firstChild;\n const blockContent = blockCover.firstChild;\n const content = blockContent.children[1].innerHTML;\n const breakLine = content.indexOf('
');\n const end = breakLine === -1 ? content.length : breakLine;\n if (this.data.status === 'closed') {\n this.resolveToggleAction();\n this.hideAndShowBlocks();\n }\n const newText = content.slice(end + 4, currentPosition.focusOffset);\n blockContent.children[1].innerHTML = content.slice(currentPosition.focusOffset, end);\n this.api.blocks.insert('paragraph', {\n text: newText\n }, {}, originalIndex + 1, 1);\n this.setAttributesToNewBlock();\n }\n }\n\n /**\n * Calls the method to add the required properties to the new block.\n */\n createParagraphFromIt() {\n this.setAttributesToNewBlock();\n }\n\n /**\n * Gets the index of the new block, then assigns the required properties,\n * and finally sends the focus.\n */\n setAttributesToNewBlock(entryIndex = null, foreignKey = this.wrapper.id, block = null) {\n const index = entryIndex === null ? this.api.blocks.getCurrentBlockIndex() : entryIndex;\n const newBlock = block || this.api.blocks.getBlockByIndex(index);\n const {\n holder: newHolder\n } = newBlock;\n const setMarginLeft = () => {\n if (this.data.nested) {\n const toggleSelector = this.wrapper.closest('.ce-block');\n const styles = getComputedStyle(toggleSelector);\n const {\n marginLeft\n } = styles;\n this.itemsMarginLeft = this.data.items === 0 ? parseFloat(marginLeft) + this.nestedMarginLeft : this.itemsMarginLeft;\n newHolder.style.marginLeft = `${this.itemsMarginLeft}px`;\n }\n };\n setTimeout(setMarginLeft, 2);\n const id = (0,uuid__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n if (!this.itemsId.includes(newBlock.id)) {\n this.itemsId.splice(index - 1, 0, newBlock.id);\n }\n const {\n holder\n } = newBlock;\n const content = holder.firstChild;\n const item = content.firstChild;\n holder.setAttribute('foreignKey', foreignKey);\n holder.setAttribute('id', id);\n setTimeout(() => holder.classList.add('toggle-block__item'));\n if (!this.readOnly) {\n holder.onkeydown = this.setEventsToNestedBlock.bind(this);\n item.focus();\n }\n }\n\n /**\n * Sets the events to be listened through the holder\n * in a nested block.\n *\n * @param {KeyboardEvent} e - key down event\n */\n setEventsToNestedBlock(e) {\n if (e.code === 'Enter') {\n setTimeout(() => this.createParagraphFromIt());\n } else {\n const indexBlock = this.getCurrentBlockIndex();\n const nestedBlock = this.getBlockByIndex(indexBlock);\n const {\n holder\n } = nestedBlock;\n if (e.code === 'Tab' && e.shiftKey) {\n this.extractBlock(indexBlock);\n }\n if (e.code === 'Backspace') {\n const cursorPosition = document.getSelection().focusOffset;\n this.removeBlock(holder, nestedBlock.id, cursorPosition);\n }\n }\n }\n\n /**\n * When a nested block is removed, the 'items' attribute\n * is updated, subtracting from it an unit.\n * @param {string} id - block identifier\n */\n removeBlock(holder, id, cursorPosition) {\n if (cursorPosition === 0) {\n const position = this.itemsId.indexOf(id);\n this.itemsId.splice(position, 1);\n }\n }\n\n /**\n * Removes all properties of a nested block.\n *\n * @param {number} destiny - block position\n */\n removeAttributesFromNewBlock(destiny) {\n const newBlock = this.api.blocks.getBlockByIndex(destiny);\n const {\n holder\n } = newBlock;\n if (!this.itemsId.includes(newBlock.id)) {\n const i = this.itemsId.indexOf(newBlock.id);\n this.itemsId.splice(i, 1);\n }\n holder.removeAttribute('foreignKey');\n holder.removeAttribute('id');\n holder.onkeydown = {};\n holder.onkeyup = {};\n holder.classList.remove('toggle-block__item');\n holder.style.removeProperty('margin-left');\n }\n\n /**\n * Creates a toggle block view without paragraphs\n * and sets the default content.\n */\n createToggle() {\n this.wrapper = document.createElement('div');\n console.log('Creating toggle...', this.wrapper);\n this.wrapper.classList.add('toggle-block__selector');\n this.wrapper.id = this.data.fk;\n const icon = document.createElement('span');\n const input = document.createElement('div');\n const defaultContent = document.createElement('div');\n icon.classList.add('toggle-block__icon');\n icon.innerHTML = (_assets_toggleIcon_svg__WEBPACK_IMPORTED_MODULE_1___default());\n input.classList.add('toggle-block__input');\n input.setAttribute('contentEditable', !this.readOnly);\n input.innerHTML = this.data.text || '';\n if (this.data.nested) {\n setTimeout(() => {\n console.log('It is nested!');\n const parentElement = this.wrapper.closest('.ce-block');\n const {\n previousSibling: previousItem\n } = parentElement;\n console.log('parentElement: ', parentElement);\n console.log('previousSibling: ', previousItem);\n const foreignKey = previousItem.getAttribute('foreignKey');\n console.log('foreignKey: ', foreignKey);\n parentElement.setAttribute('foreignKey', foreignKey);\n const styles = getComputedStyle(previousItem);\n const {\n marginLeft\n } = styles;\n parentElement.style.marginLeft = marginLeft;\n }, 2000);\n }\n\n // Events\n if (!this.readOnly) {\n // Events to create other blocks and destroy the toggle\n input.addEventListener('keyup', this.createParagraphFromToggleRoot.bind(this));\n input.addEventListener('keydown', this.removeToggle.bind(this));\n\n // Sets the focus at the end of the text when a nested block is deleted with the backspace key\n input.addEventListener('focusin', () => this.setFocusToggleRootAtTheEnd());\n\n // Establishes the placeholder for the toggle root when it's empty\n input.addEventListener('keyup', this.setPlaceHolder.bind(this));\n input.setAttribute('placeholder', this.placeholder);\n\n // Calculates the number of toggle items\n input.addEventListener('focus', this.setDefaultContent.bind(this));\n input.addEventListener('focusout', this.setDefaultContent.bind(this));\n\n // Event to add a block when the default content is clicked\n defaultContent.addEventListener('click', this.clickInDefaultContent.bind(this));\n input.addEventListener('focus', this.setNestedBlockAttributes.bind(this));\n }\n defaultContent.classList.add('toggle-block__content-default', 'toggle-block__hidden');\n defaultContent.innerHTML = this.defaultContent;\n this.wrapper.appendChild(icon);\n this.wrapper.appendChild(input);\n this.wrapper.appendChild(defaultContent);\n }\n\n /**\n * Sets the focus at the end of the toggle root when\n * a nested block is deleted through the backspace key.\n */\n setFocusToggleRootAtTheEnd() {\n const toggle = document.activeElement;\n const selection = window.getSelection();\n const range = document.createRange();\n selection.removeAllRanges();\n range.selectNodeContents(toggle);\n range.collapse(false);\n selection.addRange(range);\n toggle.focus();\n }\n\n /**\n * Adds the actions to do when the default content is clicked.\n */\n clickInDefaultContent() {\n this.api.blocks.insert();\n this.setAttributesToNewBlock();\n this.setDefaultContent();\n }\n\n /**\n * Sets the default content. If the toggle has no other blocks inside it,\n * so sets the 'block__hidden tag' in the default content,\n * otherwise it removes it.\n */\n setDefaultContent() {\n const children = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n const {\n firstChild,\n lastChild\n } = this.wrapper;\n const {\n status\n } = this.data;\n const value = children.length > 0 || status === 'closed';\n lastChild.classList.toggle('toggle-block__hidden', value);\n firstChild.style.color = children.length === 0 ? 'gray' : 'black';\n }\n\n /**\n * Deletes the toggle structure and converts the main text and the nested blocks\n * in regular blocks.\n *\n * @param {KeyboardEvent} e - key down event\n */\n removeToggle(e) {\n if (e.code === 'Backspace') {\n const {\n children\n } = this.wrapper;\n const content = children[1].innerHTML;\n const cursorPosition = document.getSelection();\n if (cursorPosition.focusOffset === 0) {\n const index = this.api.blocks.getCurrentBlockIndex();\n const breakLine = content.indexOf('
');\n const end = breakLine === -1 ? content.length : breakLine;\n const blocks = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n for (let i = 1; i < blocks.length + 1; i += 1) {\n this.removeAttributesFromNewBlock(index + i);\n }\n this.api.blocks.delete(index);\n this.api.blocks.insert('paragraph', {\n text: content.slice(0, end)\n }, {}, index, 1);\n this.api.caret.setToBlock(index);\n }\n }\n }\n\n /**\n * Returns the toggle's root index, given the index of one of its children\n *\n * @param {number} entryIndex - block index\n * @param {String} fk - The block's foreign key\n * @returns {number} The Toggle's root index\n */\n findToggleRootIndex(entryIndex, fk) {\n const block = this.getBlockByIndex(entryIndex);\n const {\n holder\n } = block;\n if (this.isAToggleRoot(holder)) {\n const id = holder.querySelector('.toggle-block__selector').getAttribute('id');\n if (fk === id) {\n return entryIndex;\n }\n }\n if (entryIndex - 1 >= 0) {\n return this.findToggleRootIndex(entryIndex - 1, fk);\n }\n return -1;\n }\n\n /**\n * Extracts a nested block from a toggle\n * with 'shift + tab' combination\n *\n * @param {number} entryIndex - Block's index that will be extracted\n */\n extractBlock(entryIndex) {\n const block = this.getBlockByIndex(entryIndex);\n const {\n holder\n } = block;\n if (this.isAToggleItem(holder)) {\n const fk = holder.getAttribute('foreignKey');\n const parentIndex = this.findToggleRootIndex(entryIndex, fk);\n if (parentIndex >= 0) {\n const items = this.getDescendantsNumber(fk);\n const destiny = parentIndex + items;\n if (items > 1) {\n this.api.blocks.move(destiny, entryIndex);\n }\n setTimeout(() => this.removeAttributesFromNewBlock(destiny), 200);\n }\n }\n this.api.caret.setToBlock(entryIndex);\n this.api.toolbar.close();\n }\n\n /**\n * If the toggle root is empty and the key event received is 'backspace'\n * or 'enter', its content is cleared so that the visible placeholder\n * is set through the css.\n *\n * @param {KeyboardEvent} e - key up event\n */\n setPlaceHolder(e) {\n if (e.code === 'Backspace' || e.code === 'Enter') {\n const {\n children\n } = this.wrapper;\n const {\n length\n } = children[1].textContent;\n if (length === 0) children[1].textContent = '';\n }\n }\n\n /**\n * Renders Tool's view.\n * First renders the toggle root, and immediately\n * renders its items as new blocks under the root.\n *\n * @returns {HTMLDivElement}\n */\n render() {\n this.createToggle();\n const index = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(index) || {};\n const {\n holder\n } = block;\n if (holder && this.isPartOfAToggle(holder)) {\n const foreignKey = holder.getAttribute('foreignKey');\n const styles = getComputedStyle(holder);\n const {\n marginLeft\n } = styles;\n setTimeout(() => {\n const nestedBlock = this.api.blocks.getBlockByIndex(index);\n const {\n holder: nestedHolder\n } = nestedBlock;\n const id = (0,uuid__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n nestedHolder.classList.add('toggle-block__item');\n nestedHolder.setAttribute('foreignKey', foreignKey);\n nestedHolder.setAttribute('id', id);\n this.itemsMarginLeft = parseFloat(marginLeft);\n nestedHolder.style.marginLeft = `${this.itemsMarginLeft}px`;\n this.data.nested = true;\n }, 1);\n }\n\n // Renders the nested blocks after the toggle root is rendered\n setTimeout(() => this.renderItems());\n\n // Adds initial transition for the icon\n setTimeout(() => this.setInitialTransition());\n return this.wrapper;\n }\n\n /**\n * Adds the initial status for the icon, and establishes\n * the delay for the transition displayed when the icon\n * is clicked.\n */\n setInitialTransition() {\n const {\n status\n } = this.data;\n const icon = this.wrapper.firstChild;\n const svg = icon.firstChild;\n svg.style.transition = '0.1s';\n svg.style.transform = `rotate(${status === 'closed' ? 0 : 90}deg)`;\n }\n\n /**\n * Renders the items view and assigns the properties required to look\n * like a block inside the toggle.\n */\n renderItems() {\n const blocksInEditor = this.api.blocks.getBlocksCount();\n const icon = this.wrapper.firstChild;\n let toggleRoot;\n if (this.readOnly) {\n const redactor = document.getElementsByClassName('codex-editor__redactor')[0];\n const {\n children\n } = redactor;\n const {\n length\n } = children;\n for (let i = 0; i < length; i += 1) {\n const blockCover = children[i].firstChild;\n const blockContainer = blockCover.firstChild;\n const {\n id\n } = blockContainer;\n if (id === this.wrapper.id) {\n toggleRoot = i;\n break;\n }\n }\n } else {\n const toggle = this.wrapper.children[1];\n let currentBlock = {};\n let index = this.api.blocks.getCurrentBlockIndex();\n const delta = index === blocksInEditor - 1 ? -1 : 1;\n while (currentBlock[1] !== toggle) {\n toggleRoot = index;\n const block = this.api.blocks.getBlockByIndex(toggleRoot);\n if (!block) break;\n const {\n holder\n } = block;\n const blockCover = holder.firstChild;\n const blockContent = blockCover.firstChild;\n currentBlock = blockContent.children;\n index += delta;\n }\n }\n if (toggleRoot + this.data.items < blocksInEditor) {\n for (let i = toggleRoot + 1, j = 0; i <= toggleRoot + this.data.items; i += 1) {\n const block = this.api.blocks.getBlockByIndex(i);\n const {\n holder\n } = block;\n const cover = holder.firstChild;\n const content = cover.firstChild;\n if (!this.isPartOfAToggle(content)) {\n this.setAttributesToNewBlock(i);\n j += 1;\n } else {\n this.data.items = j;\n break;\n }\n }\n } else {\n this.data.items = 0;\n }\n icon.addEventListener('click', () => {\n this.resolveToggleAction();\n setTimeout(() => {\n this.hideAndShowBlocks();\n });\n });\n this.hideAndShowBlocks();\n }\n\n /**\n * Converts the toggle status to its opposite.\n * If the toggle status is open, then now will be closed and\n * the icon will reset to rotation. Otherwise, will be open\n * and the icon will be rotated 90 degrees to the left.\n *\n * @returns {string} icon - toggle icon\n */\n resolveToggleAction() {\n const icon = this.wrapper.firstChild;\n const svg = icon.firstChild;\n if (this.data.status === 'closed') {\n this.data.status = 'open';\n svg.style.transform = 'rotate(90deg)';\n } else {\n this.data.status = 'closed';\n svg.style.transform = 'rotate(0deg)';\n }\n const toggleBlock = this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex());\n toggleBlock.holder.setAttribute('status', this.data.status);\n }\n\n /**\n * Hides and shows the toggle paragraphs or the default content.\n * If the toggle status is closed, the added value to the hidden attribute\n * in the container paragraph is 'true', otherwise is 'false'.\n *\n * @param {number} index - toggle index\n */\n hideAndShowBlocks(foreignKey = this.wrapper.id, value = this.data.status) {\n const children = document.querySelectorAll(`div[foreignKey=\"${foreignKey}\"]`);\n const {\n length\n } = children;\n if (length > 0) {\n children.forEach(child => {\n child.hidden = value === 'closed';\n\n // Check if this child is a toggle and hide his children too\n const toggles = child.querySelectorAll('.toggle-block__selector');\n const isToggle = toggles.length > 0;\n if (isToggle) {\n const childValue = value === 'closed' ? value : child.getAttribute('status');\n this.hideAndShowBlocks(toggles[0].getAttribute('id'), childValue);\n }\n });\n } else if (foreignKey === this.wrapper.id) {\n const {\n lastChild\n } = this.wrapper;\n lastChild.classList.toggle('toggle-block__hidden', value);\n }\n }\n\n /**\n * Extracts Tool's data from the view\n * @param {HTMLDivElement} blockContent - Toggle tools rendered view\n * @returns {ToggleBlockData} - saved data\n */\n save(blockContent) {\n const id = blockContent.getAttribute('id');\n const {\n children\n } = blockContent;\n const caption = children[1].innerHTML;\n const blocks = document.querySelectorAll(`div[foreignKey=\"${id}\"]`);\n this.data.fk = id;\n return Object.assign(this.data, {\n text: caption,\n items: blocks.length\n });\n }\n\n /**\n * Return the number of blocks inside the root Toggle\n * @param {string} fk - The id of the root Toggle\n */\n getDescendantsNumber(fk) {\n let counter = 0;\n const listChildren = document.querySelectorAll(`div[foreignKey=\"${fk}\"]`);\n listChildren.forEach(child => {\n // Evaluate if the child is a toggle\n if (child.hasAttribute('status')) {\n const childId = child.querySelector('.toggle-block__selector').getAttribute('id');\n counter += this.getDescendantsNumber(childId);\n }\n counter += 1;\n });\n return counter;\n }\n\n /**\n * Highlight the blocks that belongs to the Toggle\n * @param {string} fk - The id of the root Toggle\n */\n highlightToggleItems(fk) {\n const listChildren = document.querySelectorAll(`div[foreignKey=\"${fk}\"]`);\n listChildren.forEach(child => {\n child.classList.add('ce-block--selected');\n // Evaluate if the child is a toggle, then highlight also its children\n if (child.hasAttribute('status')) {\n const childId = child.querySelector('.toggle-block__selector').getAttribute('id');\n this.highlightToggleItems(childId);\n }\n });\n }\n\n /**\n * Adds events for the move up, move down and delete options in the toolbar\n */\n renderSettings() {\n const settingsBar = document.getElementsByClassName('ce-settings');\n const optionsContainer = settingsBar[0];\n setTimeout(() => {\n const options = optionsContainer.lastChild;\n const toggleIndex = this.api.blocks.getCurrentBlockIndex();\n this.highlightToggleItems(this.wrapper.id);\n const moveUpElement = options.querySelector('[data-item-name=\"move-up\"]') || options.getElementsByClassName('ce-tune-move-up')[0];\n const moveDownElement = options.querySelector('[data-item-name=\"move-down\"]') || options.getElementsByClassName('ce-tune-move-down')[0];\n const deleteElement = options.querySelector('[data-item-name=\"delete\"]') || options.getElementsByClassName('ce-settings__button--delete')[0];\n this.addEventsMoveButtons(moveDownElement, 0, toggleIndex);\n this.addEventsMoveButtons(moveUpElement, 1, toggleIndex);\n this.addEventDeleteButton(deleteElement, toggleIndex);\n });\n return document.createElement('div');\n }\n\n /**\n * Add listener to move button.\n * @param {HTMLDivElement} moveElement\n * @param {number} movement // 0: Move down || 1: Move up\n * @param {number} toggleIndex\n */\n addEventsMoveButtons(moveElement, movement, toggleIndex) {\n if (!moveElement) return;\n moveElement.addEventListener('click', () => {\n this.moveToggle(toggleIndex, movement);\n });\n }\n\n /**\n * Add listener to delete button.\n * @param {HTMLDivElement} deleteElement\n * @param {number} toggleIndex\n */\n addEventDeleteButton(deleteElement, toggleIndex) {\n if (!deleteElement) return;\n deleteElement.addEventListener('click', () => {\n const classesList = deleteElement.classList;\n const classes = Object.values(classesList);\n if (classes.indexOf('clicked-to-destroy-toggle') === -1) {\n deleteElement.classList.add('clicked-to-destroy-toggle');\n } else {\n this.removeFullToggle(toggleIndex);\n }\n });\n }\n\n /**\n * Move the Toggle with all its children and nested toggles.\n * Index of the root toggle before it is moved by editorjs core.\n * @param {number} toggleInitialIndex\n * @param {number} direction // 0: Move down || 1: Move up\n */\n moveToggle(toggleInitialIndex, direction) {\n if (!this.readOnly) {\n this.close();\n const currentToggleIndex = this.getCurrentBlockIndex();\n const descendants = this.getDescendantsNumber(this.wrapper.id);\n const blocks = this.getBlocksCount();\n const toggleEndIndex = toggleInitialIndex + descendants;\n\n // Move back the root of the Toggle to its initial position\n this.move(toggleInitialIndex, currentToggleIndex);\n if (toggleInitialIndex >= 0 && toggleEndIndex <= blocks - 1) {\n if (direction === 0) {\n this.moveDown(toggleInitialIndex, toggleEndIndex);\n } else {\n this.moveUp(toggleInitialIndex, toggleEndIndex);\n }\n }\n }\n }\n\n /**\n * Move down the whole current toggle to the next corresponding position\n * @param {number} toggleInitialIndex // index of the root of the current toggle\n * @param {number} toggleEndIndex // index of the last child of the current toggle\n */\n moveDown(toggleInitialIndex, toggleEndIndex) {\n const blockAfterToggleIndex = toggleEndIndex + 1;\n const blockAfterToggle = this.getBlockByIndex(blockAfterToggleIndex);\n const {\n holder\n } = blockAfterToggle;\n this.move(toggleInitialIndex, blockAfterToggleIndex);\n\n // Evaluate if the block is a toggle to move its children\n if (blockAfterToggle.name === 'toggle') {\n const id = holder.querySelector('.toggle-block__selector').getAttribute('id');\n const children = this.getDescendantsNumber(id);\n this.moveDescendants(children, toggleInitialIndex + 1, blockAfterToggleIndex + 1, 0);\n }\n }\n\n /**\n * Move up the whole current toggle to the next corresponding position\n * @param {number} toggleInitialIndex // index of the root of the current toggle\n * @param {number} toggleEndIndex // index of the last child of the current toggle\n */\n moveUp(toggleInitialIndex, toggleEndIndex) {\n const blockBeforeToggleIndex = toggleInitialIndex - 1;\n const blockBeforeToggle = this.getBlockByIndex(blockBeforeToggleIndex);\n if (blockBeforeToggle.name === 'toggle') {\n return;\n }\n const {\n holder\n } = blockBeforeToggle;\n // Evaluate if the block is an item of a toggle to move the whole parent toggle\n if (holder.hasAttribute('foreignKey')) {\n const currentToggle = this.getBlockByIndex(toggleInitialIndex).holder;\n const currentToggleFk = currentToggle.getAttribute('foreignKey');\n const fk = holder.getAttribute('foreignKey');\n if (fk !== currentToggleFk) {\n const parentBlockIdx = this.findIndexOfParentBlock(currentToggleFk, fk, toggleInitialIndex);\n const parentBlock = this.getBlockByIndex(parentBlockIdx).holder;\n const id = parentBlock.querySelector('.toggle-block__selector').getAttribute('id');\n const children = this.getDescendantsNumber(id);\n this.move(toggleEndIndex, parentBlockIdx);\n this.moveDescendants(children, toggleEndIndex, parentBlockIdx, 1);\n return;\n }\n }\n this.move(toggleEndIndex, blockBeforeToggleIndex);\n }\n\n /**\n * Returns the index of the root of the toggle which is at the same level of the toggle that it\n * is expected to be moved\n *\n * fk of the toggle that is going to be moved\n * @param {string} currentToggleFk\n * @param {string} blockFk // fk of block which is above of the current toggle root\n * @param {number} toggleInitialIndex // index of the root of the current toggle root\n * @returns\n */\n findIndexOfParentBlock(currentToggleFk, blockFk, toggleInitialIndex) {\n const NestedToggleChildren = this.getDescendantsNumber(blockFk);\n const parentBlockIndex = toggleInitialIndex - (NestedToggleChildren + 1);\n const parentBlock = this.getBlockByIndex(parentBlockIndex).holder;\n if (parentBlock.hasAttribute('foreignKey')) {\n const parentBlockFk = parentBlock.getAttribute('foreignKey');\n if (parentBlockFk !== currentToggleFk) {\n const beforeBlock = this.getBlockByIndex(parentBlockIndex - 1).holder;\n if (beforeBlock.hasAttribute('foreignKey')) {\n const fk = beforeBlock.getAttribute('foreignKey');\n if (fk !== parentBlockFk) {\n return this.findIndexOfParentBlock(currentToggleFk, fk, parentBlockIndex);\n }\n }\n }\n }\n return parentBlockIndex;\n }\n\n /**\n * Move all the children of the toggle that is being moved\n * @param {number} children // Number of children of the current toggle\n * @param {number} finalIndex // index to calculate where children are going to be moved\n * @param {number} parentInitialIndex // index to calculate where the children are\n * @param {number} direction // 0: to move from top to bottom || 1: to move from bottom to the top\n */\n moveDescendants(children, finalIndex, parentInitialIndex, direction) {\n let childrenCurrentPosition = parentInitialIndex;\n let childrenFinalPosition = finalIndex;\n while (children) {\n this.move(childrenFinalPosition, childrenCurrentPosition);\n if (direction === 0) {\n childrenCurrentPosition += 1;\n childrenFinalPosition += 1;\n }\n children -= 1;\n }\n }\n\n /**\n * Removes a toggle root and its nested blocks.\n *\n * @param {number} toggleIndex - toggle index\n */\n removeFullToggle(toggleIndex) {\n const children = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n const {\n length\n } = children;\n for (let i = toggleIndex; i < toggleIndex + length; i += 1) {\n setTimeout(() => this.api.blocks.delete(toggleIndex));\n }\n }\n\n /**\n * Adds the required listeners to call the toggle shortcuts\n * on the editor.\n */\n addListeners() {\n if (!this.readOnly) {\n const redactor = document.activeElement;\n redactor.addEventListener('keyup', e => {\n const blockContainer = document.activeElement;\n const currentBlock = this.getCurrentBlockIndex();\n const {\n holder: currentBlockContainer\n } = this.getBlockByIndex(currentBlock);\n if (e.code === 'Space') {\n this.createToggleWithShortcut(blockContainer);\n } else if (currentBlock > 0 && !this.isPartOfAToggle(currentBlockContainer) && e.code === 'Tab') {\n this.nestBlock(currentBlockContainer);\n }\n });\n }\n }\n\n /**\n * Adds mutation observer to restore the item attributes\n * when the undo action is executed and they're lost.\n */\n addSupportForUndoAndRedoActions() {\n if (!this.readOnly) {\n const target = document.querySelector('div.codex-editor__redactor');\n const observer = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList') {\n setTimeout(this.restoreItemAttributes.bind(this, mutation));\n }\n });\n });\n const config = {\n attributes: true,\n childList: true,\n characterData: true\n };\n observer.observe(target, config);\n }\n }\n getIndex = target => Array.from(target.parentNode.children).indexOf(target);\n\n /**\n * Checks if target is a child of a toggle\n * @param {string} parentID id of the parent element\n * @param {string} targetFK foreign key of the target element\n * @returns {boolean}\n */\n isChild = (parentID, targetFK) => {\n if (!parentID || !targetFK) return false; // No parent or no target\n if (parentID === targetFK) return true; // Direct child of the toggle\n\n return [...document.querySelectorAll(`div[foreignKey=\"${parentID}\"]`)].some(child => {\n const toggle = child.querySelector('.toggle-block__selector');\n if (!toggle) return false;\n return this.isChild(toggle.getAttribute('id'), targetFK);\n });\n };\n\n /**\n * Adds drop listener to move the childs item\n * when the drag and drop action is executed.\n */\n addSupportForDragAndDropActions() {\n if (!this.readOnly) {\n if (this.wrapper === undefined) {\n setTimeout(() => this.addSupportForDragAndDropActions(), 250);\n return;\n }\n\n // Set status in attribute to a proper hide and show\n const wrapperElement = document.querySelector(`#${this.wrapper.id}`);\n if (wrapperElement) {\n const toggleBlock = document.querySelector(`#${this.wrapper.id}`).parentNode?.parentNode;\n toggleBlock.setAttribute('status', this.data.status);\n }\n const settingsButton = document.querySelector('.ce-toolbar__settings-btn');\n settingsButton.setAttribute('draggable', 'true');\n settingsButton.addEventListener('dragstart', () => {\n this.startBlock = this.api.blocks.getCurrentBlockIndex();\n this.nameDragged = this.api.blocks.getBlockByIndex(this.startBlock).name;\n this.holderDragged = this.api.blocks.getBlockByIndex(this.startBlock).holder;\n });\n document.addEventListener('drop', event => {\n // Get the position when item was dropped\n const {\n target\n } = event;\n if (document.contains(target)) {\n const dropTarget = target.classList.contains('ce-block') ? target : target.closest('.ce-block');\n if (dropTarget && dropTarget !== this.holderDragged) {\n let endBlock = this.getIndex(dropTarget);\n\n // Control the toggle's children will be positioned down of the parent\n endBlock = this.startBlock < endBlock ? endBlock + 1 : endBlock;\n\n // Check if the item dropped is another toggle\n const isTargetAToggle = dropTarget.querySelectorAll('.toggle-block__selector').length > 0 || dropTarget.getAttribute('foreignKey') !== null;\n setTimeout(() => {\n // Verify if the item dropped is the toggle\n if (this.nameDragged === 'toggle') {\n // Verify if the toggle dropped is the same of this eventListener\n const currentToggleDropped = this.holderDragged.querySelector(`#${this.wrapper.id}`);\n if (currentToggleDropped) {\n // Check if the toggle dropped was not dropped in its children\n if (!this.isChild(currentToggleDropped.getAttribute('id'), dropTarget.getAttribute('foreignKey'))) {\n // If is a toggle we have to add the attributes to make it a part of the toggle\n this.assignToggleItemAttributes(isTargetAToggle, dropTarget);\n this.moveChildren(endBlock);\n } else {\n // If we are dropping in the toggle children,\n // we have to move the toggle in the original position\n if (this.startBlock === endBlock) {\n this.api.blocks.move(this.startBlock + 1, endBlock);\n } else {\n this.api.blocks.move(this.startBlock, endBlock);\n }\n\n // And remove the attributes\n if (!isTargetAToggle) {\n const newToggleIndex = this.getIndex(this.holderDragged);\n this.removeAttributesFromNewBlock(newToggleIndex);\n }\n }\n }\n } else if (this.nameDragged) {\n // Add the dropped item as an element of the toggle\n this.assignToggleItemAttributes(isTargetAToggle, dropTarget);\n }\n\n // If we are dropping out of a toggle we have to remove the attributes\n if (!isTargetAToggle) {\n const newToggleIndex = this.getIndex(this.holderDragged);\n this.removeAttributesFromNewBlock(newToggleIndex);\n }\n });\n }\n }\n });\n }\n }\n assignToggleItemAttributes(isTargetAToggle, dropTarget) {\n if (isTargetAToggle) {\n const foreignKey = dropTarget.getAttribute('foreignKey') ?? dropTarget.querySelector('.toggle-block__selector').getAttribute('id');\n const newToggleIndex = this.getIndex(this.holderDragged);\n this.setAttributesToNewBlock(newToggleIndex, foreignKey);\n }\n }\n moveChildren(endBlock, fk = this.wrapper.id) {\n // Get the children of the dropped toggle\n let children = document.querySelectorAll(`div[foreignKey=\"${fk}\"]`);\n\n // Move all the children to the parent position\n children = this.startBlock >= endBlock ? [...children].reverse() : children;\n children.forEach(child => {\n const childIndex = this.getIndex(child);\n this.api.blocks.move(endBlock, childIndex);\n\n // If this child is a toggle we have to move his children too\n const toggles = child.querySelectorAll('.toggle-block__selector');\n const isToggle = toggles.length > 0;\n if (isToggle) {\n const toggleIndex = this.getIndex(child);\n const fix = this.startBlock < endBlock ? 0 : 1;\n toggles.forEach(toggle => this.moveChildren(toggleIndex + fix, toggle.getAttribute('id')));\n const dif = Math.abs(endBlock - toggleIndex);\n endBlock = this.startBlock < endBlock ? endBlock + dif : endBlock - dif;\n }\n });\n }\n\n /**\n * Restores the item attributes to nested blocks.\n *\n * @param {HTMLDivElement} mutation - Html element removed or inserted\n */\n restoreItemAttributes(mutation) {\n if (this.wrapper !== undefined) {\n const index = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(index);\n const {\n holder\n } = block;\n const currentBlockValidation = !this.isPartOfAToggle(holder);\n const {\n length: toggleItemsCount\n } = this.itemsId;\n const {\n length: existingToggleItemsCount\n } = document.querySelectorAll(`div[foreignKey=\"${this.data.fk}\"]`);\n if (this.itemsId.includes(block.id) && currentBlockValidation) {\n this.setAttributesToNewBlock(index);\n } else if (mutation.addedNodes[0] && mutation?.previousSibling && this.isPartOfAToggle(mutation.previousSibling) && !this.isPartOfAToggle(mutation.addedNodes[0]) && toggleItemsCount > existingToggleItemsCount) {\n const {\n id: addedBlockId\n } = mutation.addedNodes[0];\n const addedBlock = this.api.blocks.getById(addedBlockId);\n this.setAttributesToNewBlock(null, this.wrapper.id, addedBlock);\n this.itemsId[index] = block.id;\n }\n }\n }\n\n /**\n * Creates a toggle through the '>' char and the 'Space' key\n */\n createToggleWithShortcut(blockContainer) {\n const content = blockContainer.textContent;\n if (content[0] === '>' && !this.isPartOfAToggle(blockContainer)) {\n const blockCaller = this.api.blocks.getCurrentBlockIndex();\n this.api.blocks.insert('toggle', {\n text: content.slice(2)\n }, this.api, blockCaller, true);\n this.api.blocks.delete(blockCaller + 1);\n this.api.caret.setToBlock(blockCaller);\n }\n }\n\n /**\n * Nests a block inside a toggle through the 'Tab' key\n */\n nestBlock(blockContainer) {\n const previousBlock = blockContainer.previousElementSibling;\n const previousCover = previousBlock.firstChild;\n const previousContainer = previousCover.firstChild;\n if (this.isPartOfAToggle(previousContainer) || this.isPartOfAToggle(previousBlock)) {\n const foreignId = previousBlock.getAttribute('foreignKey');\n const toggleId = previousContainer.getAttribute('id');\n const foreignKey = foreignId || toggleId;\n blockContainer.setAttribute('will-be-a-nested-block', true);\n const toggleRoot = document.getElementById(foreignKey);\n toggleRoot.children[1].focus();\n }\n }\n\n /**\n * Sets the required attributes to convert an external block\n * of the toggle into a block inside the toggle.\n */\n setNestedBlockAttributes() {\n const blockIndex = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(blockIndex);\n const {\n holder\n } = block;\n const willBeABlock = holder.getAttribute('will-be-a-nested-block');\n if (willBeABlock) {\n holder.removeAttribute('will-be-a-nested-block');\n this.setAttributesToNewBlock(blockIndex);\n this.api.toolbar.close();\n }\n }\n\n /**\n * Validates if a block contains one of the classes to be\n * part of a toggle. If It has it returns 'true' (It's part\n * of a toggle), otherwise returns 'false' (It's another\n * type of block)\n *\n * @param {HTMLDivElement} block - Block to be validated\n * @returns {boolean}\n */\n isPartOfAToggle(block) {\n const classes = Array.from(block.classList);\n const classNamesToCheck = ['toggle-block__item', 'toggle-block__input', 'toggle-block__selector'];\n const isToggleChild = classNamesToCheck.some(className => block.getElementsByClassName(className).length !== 0);\n const isToggle = classNamesToCheck.some(className => classes.includes(className));\n return isToggle || isToggleChild;\n }\n\n /**\n * Adds mutation observer to reset the toggle ids\n * when a toggle is copied and pasted.\n */\n addSupportForCopyAndPasteAction() {\n if (!this.readOnly) {\n const target = document.querySelector('div.codex-editor__redactor');\n const observer = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList') {\n setTimeout(this.resetIdToCopiedBlock.bind(this, mutation));\n }\n });\n });\n const config = {\n attributes: true,\n childList: true,\n characterData: true\n };\n observer.observe(target, config);\n }\n }\n\n /**\n * Reset the toggle ids to ensure toggles with unique id.\n */\n resetIdToCopiedBlock() {\n if (this.wrapper !== undefined) {\n const index = this.api.blocks.getCurrentBlockIndex();\n const {\n holder\n } = this.api.blocks.getBlockByIndex(index);\n if (this.isPartOfAToggle(holder)) {\n const foreignKey = holder.getAttribute('foreignKey');\n const toggleRoot = document.querySelectorAll(`#${foreignKey}`);\n if (toggleRoot.length > 1) {\n const parentBlock = this.findToggleRootIndex(index, foreignKey);\n const id = (0,uuid__WEBPACK_IMPORTED_MODULE_2__[\"default\"])();\n for (let i = parentBlock; i <= index; i += 1) {\n const currentBlock = this.api.blocks.getBlockByIndex(i);\n const {\n holder: currentBlockHolder\n } = currentBlock;\n if (i === parentBlock) {\n const externalCover = currentBlockHolder.firstChild;\n const toggleCover = externalCover.firstChild;\n toggleCover.setAttribute('id', `fk-${id}`);\n } else {\n currentBlockHolder.setAttribute('foreignKey', `fk-${id}`);\n }\n }\n }\n }\n }\n }\n}\n\n//# sourceURL=webpack://ToggleBlock/./src/index.js?"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js!./src/index.css": +/*!*************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js!./src/index.css ***! + \*************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.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\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://ToggleBlock/./src/index.css?./node_modules/css-loader/dist/cjs.js"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/runtime/api.js": +/*!*****************************************************!*\ + !*** ./node_modules/css-loader/dist/runtime/api.js ***! + \*****************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/css-loader/dist/runtime/api.js?"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": +/*!**************************************************************!*\ + !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! + \**************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); + +/***/ }), + +/***/ "./src/index.css": +/*!***********************!*\ + !*** ./src/index.css ***! + \***********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./index.css */ \"./node_modules/css-loader/dist/cjs.js!./src/index.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://ToggleBlock/./src/index.css?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": +/*!****************************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! + \****************************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n return result;\n}\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n identifiers.push(identifier);\n }\n return identifiers;\n}\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n return updater;\n}\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n var newLastIdentifiers = modulesToDom(newList, options);\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n var _index = getIndexByIdentifier(_identifier);\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n stylesInDOM.splice(_index, 1);\n }\n }\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": +/*!********************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! + \********************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\nvar memo = {};\n\n/* istanbul ignore next */\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target);\n\n // Special case to return head of iframe instead of iframe itself\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n memo[target] = styleTarget;\n }\n return memo[target];\n}\n\n/* istanbul ignore next */\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": +/*!**********************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! + \**********************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": +/*!**********************************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! + \**********************************************************************************/ +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + +"use strict"; +eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": +/*!***************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! + \***************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n var needLayer = typeof obj.layer !== \"undefined\";\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n css += obj.css;\n if (needLayer) {\n css += \"}\";\n }\n if (obj.media) {\n css += \"}\";\n }\n if (obj.supports) {\n css += \"}\";\n }\n var sourceMap = obj.sourceMap;\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n }\n\n // For old IE\n /* istanbul ignore if */\n options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next */\nfunction domAPI(options) {\n if (typeof document === \"undefined\") {\n return {\n update: function update() {},\n remove: function remove() {}\n };\n }\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); + +/***/ }), + +/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": +/*!*********************************************************************!*\ + !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! + \*********************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n styleElement.appendChild(document.createTextNode(css));\n }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); + +/***/ }), + +/***/ "./assets/toggleIcon.svg": +/*!*******************************!*\ + !*** ./assets/toggleIcon.svg ***! + \*******************************/ +/***/ ((module) => { + +eval("module.exports = \"\"\n\n//# sourceURL=webpack://ToggleBlock/./assets/toggleIcon.svg?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/native.js": +/*!******************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/native.js ***! + \******************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n randomUUID\n});\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/native.js?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/regex.js": +/*!*****************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/regex.js ***! + \*****************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i);\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/regex.js?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/rng.js": +/*!***************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/rng.js ***! + \***************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ rng)\n/* harmony export */ });\n// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nlet getRandomValues;\nconst rnds8 = new Uint8Array(16);\nfunction rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/rng.js?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/stringify.js": +/*!*********************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/stringify.js ***! + \*********************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ \"unsafeStringify\": () => (/* binding */ unsafeStringify)\n/* harmony export */ });\n/* harmony import */ var _validate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./validate.js */ \"./node_modules/uuid/dist/esm-browser/validate.js\");\n\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nconst byteToHex = [];\n\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\n\nfunction unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();\n}\n\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!(0,_validate_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (stringify);\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/stringify.js?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/v4.js": +/*!**************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/v4.js ***! + \**************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _native_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./native.js */ \"./node_modules/uuid/dist/esm-browser/native.js\");\n/* harmony import */ var _rng_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./rng.js */ \"./node_modules/uuid/dist/esm-browser/rng.js\");\n/* harmony import */ var _stringify_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stringify.js */ \"./node_modules/uuid/dist/esm-browser/stringify.js\");\n\n\n\n\nfunction v4(options, buf, offset) {\n if (_native_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].randomUUID && !buf && !options) {\n return _native_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].randomUUID();\n }\n\n options = options || {};\n const rnds = options.random || (options.rng || _rng_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return (0,_stringify_js__WEBPACK_IMPORTED_MODULE_2__.unsafeStringify)(rnds);\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (v4);\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/v4.js?"); + +/***/ }), + +/***/ "./node_modules/uuid/dist/esm-browser/validate.js": +/*!********************************************************!*\ + !*** ./node_modules/uuid/dist/esm-browser/validate.js ***! + \********************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _regex_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./regex.js */ \"./node_modules/uuid/dist/esm-browser/regex.js\");\n\n\nfunction validate(uuid) {\n return typeof uuid === 'string' && _regex_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].test(uuid);\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (validate);\n\n//# sourceURL=webpack://ToggleBlock/./node_modules/uuid/dist/esm-browser/validate.js?"); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ id: moduleId, +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/compat get default export */ +/******/ (() => { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = (module) => { +/******/ var getter = module && module.__esModule ? +/******/ () => (module['default']) : +/******/ () => (module); +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/define property getters */ +/******/ (() => { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = (exports, definition) => { +/******/ for(var key in definition) { +/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { +/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); +/******/ } +/******/ } +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/******/ /* webpack/runtime/make namespace object */ +/******/ (() => { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = (exports) => { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/nonce */ +/******/ (() => { +/******/ __webpack_require__.nc = undefined; +/******/ })(); +/******/ +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module can't be inlined because the eval devtool is used. +/******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); +/******/ __webpack_exports__ = __webpack_exports__["default"]; +/******/ +/******/ return __webpack_exports__; +/******/ })() +; +}); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0656977..aa4fbf5 100644 --- a/src/index.js +++ b/src/index.js @@ -59,7 +59,7 @@ export default class ToggleBlock { status: data.status || 'open', fk: data.fk || `fk-${uuidv4()}`, items: data.items || 0, - nested: false, + nested: data.nested || false, }; this.itemsId = []; this.api = api; @@ -164,7 +164,8 @@ export default class ToggleBlock { const setMarginLeft = () => { if (this.data.nested) { - const styles = getComputedStyle(newHolder); + const toggleSelector = this.wrapper.closest('.ce-block'); + const styles = getComputedStyle(toggleSelector); const { marginLeft } = styles; this.itemsMarginLeft = this.data.items === 0 ? (parseFloat(marginLeft) + this.nestedMarginLeft) : this.itemsMarginLeft; @@ -173,7 +174,7 @@ export default class ToggleBlock { } }; - setTimeout(setMarginLeft, 1); + setTimeout(setMarginLeft, 2); const id = uuidv4(); if (!this.itemsId.includes(newBlock.id)) { @@ -250,6 +251,7 @@ export default class ToggleBlock { holder.onkeydown = {}; holder.onkeyup = {}; holder.classList.remove('toggle-block__item'); + holder.style.removeProperty('margin-left'); } /** @@ -258,6 +260,7 @@ export default class ToggleBlock { */ createToggle() { this.wrapper = document.createElement('div'); + console.log('Creating toggle...', this.wrapper); this.wrapper.classList.add('toggle-block__selector'); this.wrapper.id = this.data.fk; @@ -272,6 +275,23 @@ export default class ToggleBlock { input.setAttribute('contentEditable', !this.readOnly); input.innerHTML = this.data.text || ''; + if (this.data.nested) { + setTimeout(() => { + console.log('It is nested!'); + const parentElement = this.wrapper.closest('.ce-block'); + const { previousSibling: previousItem } = parentElement; + console.log('parentElement: ', parentElement); + console.log('previousSibling: ', previousItem); + const foreignKey = previousItem.getAttribute('foreignKey'); + console.log('foreignKey: ', foreignKey); + parentElement.setAttribute('foreignKey', foreignKey); + + const styles = getComputedStyle(previousItem); + const { marginLeft } = styles; + parentElement.style.marginLeft = marginLeft; + }, 2000); + } + // Events if (!this.readOnly) { // Events to create other blocks and destroy the toggle @@ -449,11 +469,13 @@ export default class ToggleBlock { this.createToggle(); const index = this.api.blocks.getCurrentBlockIndex(); - const block = this.api.blocks.getBlockByIndex(index); + const block = this.api.blocks.getBlockByIndex(index) || {}; const { holder } = block; - if (this.isPartOfAToggle(holder)) { + if (holder && this.isPartOfAToggle(holder)) { const foreignKey = holder.getAttribute('foreignKey'); + const styles = getComputedStyle(holder); + const { marginLeft } = styles; setTimeout(() => { const nestedBlock = this.api.blocks.getBlockByIndex(index); const { holder: nestedHolder } = nestedBlock; @@ -461,8 +483,11 @@ export default class ToggleBlock { nestedHolder.classList.add('toggle-block__item'); nestedHolder.setAttribute('foreignKey', foreignKey); nestedHolder.setAttribute('id', id); + + this.itemsMarginLeft = parseFloat(marginLeft); + nestedHolder.style.marginLeft = `${this.itemsMarginLeft}px`; this.data.nested = true; - }); + }, 1); } // Renders the nested blocks after the toggle root is rendered @@ -939,8 +964,11 @@ export default class ToggleBlock { } // Set status in attribute to a proper hide and show - const toggleBlock = document.querySelector(`#${this.wrapper.id}`).parentNode.parentNode; - toggleBlock.setAttribute('status', this.data.status); + const wrapperElement = document.querySelector(`#${this.wrapper.id}`); + if (wrapperElement) { + const toggleBlock = document.querySelector(`#${this.wrapper.id}`).parentNode?.parentNode; + toggleBlock.setAttribute('status', this.data.status); + } const settingsButton = document.querySelector('.ce-toolbar__settings-btn'); settingsButton.setAttribute('draggable', 'true');