Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
editorjs-toggle-block
Advanced tools
editorjs-toggle-block - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
@@ -0,1 +1,5 @@ | ||
| ## 0.1.2 (12.05.2022) | ||
| * Adjust the behavior of the toolbar icon | ||
| ## 0.1.1 (06.05.2022) | ||
@@ -2,0 +6,0 @@ |
@@ -1,1 +0,231 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Toggle=e():t.Toggle=e()}(self,(function(){return(()=>{var t={424:(t,e,i)=>{"use strict";i.d(e,{Z:()=>l});var s=i(81),o=i.n(s),n=i(645),r=i.n(n)()(o());r.push([t.id,".toggle-block__selector > div {\n vertical-align: middle;\n display: inline-block;\n padding: 1% 0 1% 0;\n outline: none;\n border: none;\n width: 90%;\n}\n\n.toggle-block__selector br {\n display: none;\n}\n\n.toggle-block__icon > svg {\n vertical-align: middle;\n width: 15px;\n height: auto;\n}\n\n.toggle-block__icon:hover {\n color: #388ae5;\n cursor: pointer;\n}\n\n.bi-play-fill {\n width: 34px;\n height: 34px;\n}\n\n.toggle-block__input {\n margin-left: 5px;\n}\n\n.toggle-block__input:empty:before {\n content: attr(placeholder);\n position: absolute;\n color: gray;\n background-color: transparent;\n}\n\n.toggle-block__content-default {\n margin-left: 20px;\n}\n\n.toggle-block__item {\n margin-left: 39px;\n}\n\n.toggle-block__content-default {\n color: gray;\n border-radius: 5px;\n}\n\n.toggle-block__content-default:hover {\n cursor: pointer;\n background: rgba(55, 53, 47, 0.08);\n}\n\ndiv.toggle-block__hidden {\n display: none;\n}\n",""]);const l=r},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i="",s=void 0!==e[5];return e[4]&&(i+="@supports (".concat(e[4],") {")),e[2]&&(i+="@media ".concat(e[2]," {")),s&&(i+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),i+=t(e),s&&(i+="}"),e[2]&&(i+="}"),e[4]&&(i+="}"),i})).join("")},e.i=function(t,i,s,o,n){"string"==typeof t&&(t=[[null,t,void 0]]);var r={};if(s)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(r[c]=!0)}for(var a=0;a<t.length;a++){var d=[].concat(t[a]);s&&r[d[0]]||(void 0!==n&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=n),i&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=i):d[2]=i),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),e.push(d))}},e}},81:t=>{"use strict";t.exports=function(t){return t[1]}},379:t=>{"use strict";var e=[];function i(t){for(var i=-1,s=0;s<e.length;s++)if(e[s].identifier===t){i=s;break}return i}function s(t,s){for(var n={},r=[],l=0;l<t.length;l++){var c=t[l],a=s.base?c[0]+s.base:c[0],d=n[a]||0,h="".concat(a," ").concat(d);n[a]=d+1;var u=i(h),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)e[u].references++,e[u].updater(p);else{var g=o(p,s);s.byIndex=l,e.splice(l,0,{identifier:h,updater:g,references:1})}r.push(h)}return r}function o(t,e){var i=e.domAPI(e);return i.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;i.update(t=e)}else i.remove()}}t.exports=function(t,o){var n=s(t=t||[],o=o||{});return function(t){t=t||[];for(var r=0;r<n.length;r++){var l=i(n[r]);e[l].references--}for(var c=s(t,o),a=0;a<n.length;a++){var d=i(n[a]);0===e[d].references&&(e[d].updater(),e.splice(d,1))}n=c}}},569:t=>{"use strict";var e={};t.exports=function(t,i){var s=function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}e[t]=i}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(i)}},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,i)=>{"use strict";t.exports=function(t){var e=i.nc;e&&t.setAttribute("nonce",e)}},795:t=>{"use strict";t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(i){!function(t,e,i){var s="";i.supports&&(s+="@supports (".concat(i.supports,") {")),i.media&&(s+="@media ".concat(i.media," {"));var o=void 0!==i.layer;o&&(s+="@layer".concat(i.layer.length>0?" ".concat(i.layer):""," {")),s+=i.css,o&&(s+="}"),i.media&&(s+="}"),i.supports&&(s+="}");var n=i.sourceMap;n&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),e.styleTagTransform(s,t,e.options)}(e,t,i)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},589:t=>{"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},370:t=>{t.exports='<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path></svg>'}},e={};function i(s){var o=e[s];if(void 0!==o)return o.exports;var n=e[s]={id:s,exports:{}};return t[s](n,n.exports,i),n.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};return(()=>{"use strict";i.d(s,{default:()=>k});var t=i(379),e=i.n(t),o=i(795),n=i.n(o),r=i(569),l=i.n(r),c=i(565),a=i.n(c),d=i(216),h=i.n(d),u=i(589),p=i.n(u),g=i(424),f={};f.styleTagTransform=p(),f.setAttributes=a(),f.insert=l().bind(null,"head"),f.domAPI=n(),f.insertStyleElement=h(),e()(g.Z,f),g.Z&&g.Z.locals&&g.Z.locals;var b=i(370),m=i.n(b);class k{static get toolbox(){return{title:"Toggle",icon:m()}}static get enableLineBreaks(){return!0}static get isReadOnlySupported(){return!0}constructor({data:t,api:e,readOnly:i}){this.data={text:t.text||"",status:t.status||"open",items:t.items||0},this.itemsId=[],this.api=e,this.wrapper=void 0,this.readOnly=i||!1,this.addListeners(),this.addSupportForUndoAndRedoActions()}createParagraphFromToggleRoot(t){if("Enter"===t.code){const t=document.getSelection().focusOffset,e=this.api.blocks.getCurrentBlockIndex(),i=this.api.blocks.getBlockByIndex(e),{holder:s}=i,o=s.firstChild.firstChild,n=o.children[1].innerHTML,r=n.indexOf("<br>"),l=-1===r?n.length:r;"closed"===this.data.status&&(this.resolveToggleAction(),this.hideAndShowBlocks(e));const c=n.slice(l+4,t.focusOffset);o.children[1].innerHTML=n.slice(t.focusOffset,l),this.api.blocks.insert("paragraph",{text:c},{},e+1,1),this.setAttributesToNewBlock()}}createParagraphFromIt(){this.setAttributesToNewBlock()}setAttributesToNewBlock(t=null){const e=this.wrapper.id,i=null===t?this.api.blocks.getCurrentBlockIndex():t,s=crypto.randomUUID(),o=this.api.blocks.getBlockByIndex(i);this.itemsId.includes(o.id)||this.itemsId.splice(i-1,0,o.id);const{holder:n}=o,r=n.firstChild.firstChild;n.setAttribute("foreignKey",e),n.setAttribute("id",s),n.classList.add("toggle-block__item"),this.readOnly||(n.onkeydown=this.setEventsToNestedBlock.bind(this),r.focus())}setEventsToNestedBlock(t){if("Enter"===t.code)this.createParagraphFromIt();else{const e=this.api.blocks.getCurrentBlockIndex(),i=this.api.blocks.getBlockByIndex(e),{holder:s}=i;if("Tab"===t.code&&t.shiftKey&&this.extractBlock(e),"Backspace"===t.code){const t=document.getSelection().focusOffset;this.removeBlock(s,i.id,t)}}}removeBlock(t,e,i){if(0===i){const i=t.nextSibling.firstChild.firstChild.innerHTML;t.firstChild.firstChild.children[1].innerHTML+=i;const s=this.itemsId.indexOf(e);this.itemsId.splice(s,1);const o=this.api.blocks.getCurrentBlockIndex();this.api.blocks.delete(o+1)}}removeAttributesFromNewBlock(t){const e=this.api.blocks.getBlockByIndex(t),{holder:i}=e;if(!this.itemsId.includes(e.id)){const t=this.itemsId.indexOf(e.id);this.itemsId.splice(t,1)}i.removeAttribute("foreignKey"),i.removeAttribute("id"),i.onkeydown={},i.onkeyup={},i.classList.remove("toggle-block__item")}createToggle(){this.wrapper=document.createElement("div"),this.wrapper.classList.add("toggle-block__selector"),this.wrapper.id=crypto.randomUUID();const t=document.createElement("span"),e=document.createElement("div"),i=document.createElement("div");t.classList.add("toggle-block__icon"),t.innerHTML=m(),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","Toggle"),e.addEventListener("focus",this.setDefaultContent.bind(this)),e.addEventListener("focusout",this.setDefaultContent.bind(this)),i.addEventListener("click",this.clickInDefaultContent.bind(this)),e.addEventListener("focus",this.setNestedBlockAttributes.bind(this))),i.classList.add("toggle-block__content-default","toggle-block__hidden"),i.innerHTML="Empty toggle. Click or drop blocks inside.",this.wrapper.appendChild(t),this.wrapper.appendChild(e),this.wrapper.appendChild(i)}setFocusToggleRootAtTheEnd(){const t=document.activeElement,e=window.getSelection(),i=document.createRange();e.removeAllRanges(),i.selectNodeContents(t),i.collapse(!1),e.addRange(i),t.focus()}clickInDefaultContent(){this.api.blocks.insert(),this.setAttributesToNewBlock(),this.setDefaultContent()}setDefaultContent(){const t=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{firstChild:e,lastChild:i}=this.wrapper,{status:s}=this.data,o=t.length>0||"closed"===s;i.classList.toggle("toggle-block__hidden",o),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(),i=e.indexOf("<br>"),s=-1===i?e.length:i,o=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);for(let e=1;e<o.length+1;e+=1)this.removeAttributesFromNewBlock(t+e);this.api.blocks.delete(t),this.api.blocks.insert("paragraph",{text:e.slice(0,s)},{},t,1),this.api.caret.setToBlock(t)}}}extractBlock(t){const e=this.wrapper.children[1];let i,s={};for(;s[1]!==e;){this.api.caret.setToPreviousBlock("end",0),i=this.api.blocks.getCurrentBlockIndex();const t=this.api.blocks.getBlockByIndex(i),{holder:e}=t;s=e.firstChild.firstChild.children}const o=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),n=i+o.length;this.api.caret.setToBlock(t),o.length>1&&this.api.blocks.move(n),setTimeout((()=>this.removeAttributesFromNewBlock(n)),200),this.api.toolbar.close()}setPlaceHolder(t){if("Backspace"===t.code||"Enter"===t.code){const{children:t}=this.wrapper,{length:e}=t[1].textContent;0===e&&(t[1].textContent="")}}render(){return this.createToggle(),setTimeout((()=>this.renderItems())),setTimeout((()=>this.setInitialTransition())),this.wrapper}setInitialTransition(){const{status:t}=this.data,e=this.wrapper.firstChild.firstChild;e.style.transition="0.1s",e.style.transform=`rotate(${"closed"===t?0:90}deg)`}renderItems(){const t=this.api.blocks.getBlocksCount(),e=this.wrapper.firstChild;let i;if(this.readOnly){const t=document.getElementsByClassName("codex-editor__redactor")[0],{children:e}=t,{length:s}=e;for(let t=0;t<s;t+=1){const s=e[t].firstChild.firstChild,{id:o}=s;if(o===this.wrapper.id){i=t;break}}}else{const t=this.wrapper.children[1];let e={};for(;e[1]!==t;){i=this.api.blocks.getCurrentBlockIndex();const t=this.api.blocks.getBlockByIndex(i),{holder:s}=t;e=s.firstChild.firstChild.children,this.api.caret.setToNextBlock("end",0)}}if(i+this.data.items<t)for(let t=i+1,e=0;t<=i+this.data.items;t+=1){const i=this.api.blocks.getBlockByIndex(t),{holder:s}=i,o=s.firstChild.firstChild;if(this.isPartOfAToggle(o)){this.data.items=e;break}this.setAttributesToNewBlock(t),e+=1}else this.data.items=0;e.addEventListener("click",(()=>{this.resolveToggleAction(),setTimeout((()=>{const t=this.readOnly?i:null;this.hideAndShowBlocks(t)}))})),this.hideAndShowBlocks(i)}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)")}hideAndShowBlocks(t=null){const e="closed"===this.data.status,i=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{length:s}=i;let o=null===t?this.api.blocks.getCurrentBlockIndex():t;if(s>0)for(let t=0;t<s;t+=1){const{holder:t}=this.api.blocks.getBlockByIndex(o+=1);t.hidden=e}else{const{lastChild:t}=this.wrapper;t.classList.toggle("toggle-block__hidden",e)}}save(t){const{children:e}=t,i=e[1].innerHTML,s=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`);return Object.assign(this.data,{text:i,items:s.length})}renderSettings(){const t=document.getElementsByClassName("ce-settings--opened")[0].lastChild,e=this.api.blocks.getCurrentBlockIndex();setTimeout((()=>{const i=t.getElementsByClassName("ce-settings__button--delete")[0];i.addEventListener("click",(()=>{const t=i.classList;-1===Object.values(t).indexOf("clicked-to-destroy-toggle")?i.classList.add("clicked-to-destroy-toggle"):this.removeFullToggle(e)}))}))}removeFullToggle(t){const e=document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`),{length:i}=e;for(let e=t;e<t+i;e+=1)this.api.blocks.delete(t)}addListeners(){this.readOnly||document.activeElement.addEventListener("keyup",(t=>{const e=document.activeElement,i=this.api.blocks.getCurrentBlockIndex(),s=e.parentElement.parentElement;"Space"===t.code?this.createToggleWithShortcut(e):i>0&&!this.isPartOfAToggle(e)&&!this.isPartOfAToggle(s)&&"Tab"===t.code&&this.nestBlock(e)}))}addSupportForUndoAndRedoActions(){if(!this.readOnly){const t=document.querySelector("div.codex-editor__redactor"),e={attributes:!0,childList:!0,characterData:!0};new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&setTimeout(this.restoreItemAttributes.bind(this,t))}))})).observe(t,e)}}restoreItemAttributes(t){if(void 0!==this.wrapper){const e=this.api.blocks.getCurrentBlockIndex(),i=this.api.blocks.getBlockByIndex(e),{holder:s}=i,o=!this.isPartOfAToggle(s),n=t.removedNodes[0];if(this.itemsId.includes(i.id)&&o)this.setAttributesToNewBlock(e);else if(n&&this.isPartOfAToggle(n)&&o){const t=s.firstChild.firstChild;this.isPartOfAToggle(t)||(this.setAttributesToNewBlock(e),this.itemsId[e]=i.id)}}}createToggleWithShortcut(t){const e=t.textContent;if(">"===e[0]&&!this.isPartOfAToggle(t)){const t=this.api.blocks.getCurrentBlockIndex();this.api.blocks.insert("toggle",{text:e.slice(2)},this.api,t,!0),this.api.blocks.delete(t+1),this.api.caret.setToBlock(t)}}nestBlock(t){const e=t.parentElement.parentElement,i=e.previousElementSibling,s=i.firstChild.firstChild;if(this.isPartOfAToggle(s)||this.isPartOfAToggle(i)){const t=i.getAttribute("foreignKey"),o=s.getAttribute("id"),n=t||o;e.setAttribute("will-be-a-nested-block",!0),document.getElementById(n).children[1].focus()}}setNestedBlockAttributes(){const t=this.api.blocks.getCurrentBlockIndex(),e=this.api.blocks.getBlockByIndex(t),{holder:i}=e;i.getAttribute("will-be-a-nested-block")&&(i.removeAttribute("will-be-a-nested-block"),this.setAttributesToNewBlock(t),this.api.toolbar.close())}isPartOfAToggle(t){const e=Array.from(t.classList);return e.includes("toggle-block__item")||e.includes("toggle-block__input")||e.includes("toggle-block__selector")}}})(),s.default})()})); | ||
| /* | ||
| * 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["Toggle"] = factory(); | ||
| else | ||
| root["Toggle"] = factory(); | ||
| })(self, function() { | ||
| 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 _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 * 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 * Disables the creation of new EditorJS blocks by pressing\n * 'enter' when in a toggle block.\n */\n\n\n static get enableLineBreaks() {\n return true;\n }\n /**\n * Notify core that the read-only mode is supported\n *\n * @returns {boolean}\n */\n\n\n static get isReadOnlySupported() {\n return true;\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\n\n constructor({\n data,\n api,\n readOnly\n }) {\n this.data = {\n text: data.text || '',\n status: data.status || 'open',\n items: data.items || 0\n };\n this.itemsId = [];\n this.api = api;\n this.wrapper = undefined;\n this.readOnly = readOnly || false;\n this.addListeners();\n this.addSupportForUndoAndRedoActions();\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\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('<br>');\n const end = breakLine === -1 ? content.length : breakLine;\n\n if (this.data.status === 'closed') {\n this.resolveToggleAction();\n this.hideAndShowBlocks(originalIndex);\n }\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 * Calls the method to add the required properties to the new block.\n */\n\n\n createParagraphFromIt() {\n this.setAttributesToNewBlock();\n }\n /**\n * Gets the index of the new block, then assigns the required properties,\n * and finally sends the focus.\n */\n\n\n setAttributesToNewBlock(entryIndex = null) {\n const foreignKey = this.wrapper.id;\n const index = entryIndex === null ? this.api.blocks.getCurrentBlockIndex() : entryIndex;\n const id = crypto.randomUUID();\n const newBlock = this.api.blocks.getBlockByIndex(index);\n\n if (!this.itemsId.includes(newBlock.id)) {\n this.itemsId.splice(index - 1, 0, newBlock.id);\n }\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 holder.classList.add('toggle-block__item');\n\n if (!this.readOnly) {\n holder.onkeydown = this.setEventsToNestedBlock.bind(this);\n item.focus();\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\n\n setEventsToNestedBlock(e) {\n if (e.code === 'Enter') {\n this.createParagraphFromIt();\n } else {\n const indexBlock = this.api.blocks.getCurrentBlockIndex();\n const nestedBlock = this.api.blocks.getBlockByIndex(indexBlock);\n const {\n holder\n } = nestedBlock;\n\n if (e.code === 'Tab' && e.shiftKey) {\n this.extractBlock(indexBlock);\n }\n\n if (e.code === 'Backspace') {\n const cursorPosition = document.getSelection().focusOffset;\n this.removeBlock(holder, nestedBlock.id, cursorPosition);\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\n\n removeBlock(holder, id, cursorPosition) {\n if (cursorPosition === 0) {\n const currentBlock = holder.nextSibling;\n const blockCover = currentBlock.firstChild;\n const blockContent = blockCover.firstChild;\n const oldContent = blockContent.innerHTML;\n const toggleCover = holder.firstChild;\n const toggleContent = toggleCover.firstChild;\n toggleContent.children[1].innerHTML += oldContent;\n const position = this.itemsId.indexOf(id);\n this.itemsId.splice(position, 1);\n const togglePosition = this.api.blocks.getCurrentBlockIndex();\n this.api.blocks.delete(togglePosition + 1);\n }\n }\n /**\n * Removes all properties of a nested block.\n *\n * @param {number} destiny - block position\n */\n\n\n removeAttributesFromNewBlock(destiny) {\n const newBlock = this.api.blocks.getBlockByIndex(destiny);\n const {\n holder\n } = newBlock;\n\n if (!this.itemsId.includes(newBlock.id)) {\n const i = this.itemsId.indexOf(newBlock.id);\n this.itemsId.splice(i, 1);\n }\n\n holder.removeAttribute('foreignKey');\n holder.removeAttribute('id');\n holder.onkeydown = {};\n holder.onkeyup = {};\n holder.classList.remove('toggle-block__item');\n }\n /**\n * Creates a toggle block view without paragraphs\n * and sets the default content.\n */\n\n\n createToggle() {\n this.wrapper = document.createElement('div');\n this.wrapper.classList.add('toggle-block__selector');\n this.wrapper.id = crypto.randomUUID();\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 || ''; // Events\n\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)); // Sets the focus at the end of the text when a nested block is deleted with the backspace key\n\n input.addEventListener('focusin', () => this.setFocusToggleRootAtTheEnd()); // Establishes the placeholder for the toggle root when it's empty\n\n input.addEventListener('keyup', this.setPlaceHolder.bind(this));\n input.setAttribute('placeholder', 'Toggle'); // Calculates the number of toggle items\n\n input.addEventListener('focus', this.setDefaultContent.bind(this));\n input.addEventListener('focusout', this.setDefaultContent.bind(this)); // Event to add a block when the default content is clicked\n\n defaultContent.addEventListener('click', this.clickInDefaultContent.bind(this));\n input.addEventListener('focus', this.setNestedBlockAttributes.bind(this));\n }\n\n defaultContent.classList.add('toggle-block__content-default', 'toggle-block__hidden');\n defaultContent.innerHTML = 'Empty toggle. Click or drop blocks inside.';\n this.wrapper.appendChild(icon);\n this.wrapper.appendChild(input);\n this.wrapper.appendChild(defaultContent);\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\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 * Adds the actions to do when the default content is clicked.\n */\n\n\n clickInDefaultContent() {\n this.api.blocks.insert();\n this.setAttributesToNewBlock();\n this.setDefaultContent();\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\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 * 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\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\n if (cursorPosition.focusOffset === 0) {\n const index = this.api.blocks.getCurrentBlockIndex();\n const breakLine = content.indexOf('<br>');\n const end = breakLine === -1 ? content.length : breakLine;\n const blocks = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n\n for (let i = 1; i < blocks.length + 1; i += 1) {\n this.removeAttributesFromNewBlock(index + i);\n }\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 * Extracts a nested block from a toggle\n * with 'shift + tab' combination\n *\n * @param {HTMLDivElement} entryIndex - block index\n */\n\n\n extractBlock(entryIndex) {\n const toggle = this.wrapper.children[1];\n let currentBlock = {};\n let index;\n\n while (currentBlock[1] !== toggle) {\n this.api.caret.setToPreviousBlock('end', 0);\n index = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(index);\n const {\n holder\n } = block;\n const blockCover = holder.firstChild;\n const blockContent = blockCover.firstChild;\n currentBlock = blockContent.children;\n }\n\n const items = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n const destiny = index + items.length;\n this.api.caret.setToBlock(entryIndex);\n\n if (items.length > 1) {\n this.api.blocks.move(destiny);\n }\n\n setTimeout(() => this.removeAttributesFromNewBlock(destiny), 200);\n this.api.toolbar.close();\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\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 * 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\n\n render() {\n this.createToggle(); // Renders the nested blocks after the toggle root is rendered\n\n setTimeout(() => this.renderItems()); // Adds initial transition for the icon\n\n setTimeout(() => this.setInitialTransition());\n return this.wrapper;\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\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 * Renders the items view and assigns the properties required to look\n * like a block inside the toggle.\n */\n\n\n renderItems() {\n const blocksInEditor = this.api.blocks.getBlocksCount();\n const icon = this.wrapper.firstChild;\n let toggleRoot;\n\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\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\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\n while (currentBlock[1] !== toggle) {\n toggleRoot = this.api.blocks.getCurrentBlockIndex();\n const block = this.api.blocks.getBlockByIndex(toggleRoot);\n const {\n holder\n } = block;\n const blockCover = holder.firstChild;\n const blockContent = blockCover.firstChild;\n currentBlock = blockContent.children;\n this.api.caret.setToNextBlock('end', 0);\n }\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\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\n icon.addEventListener('click', () => {\n this.resolveToggleAction();\n setTimeout(() => {\n const toggleIndex = this.readOnly ? toggleRoot : null;\n this.hideAndShowBlocks(toggleIndex);\n });\n });\n this.hideAndShowBlocks(toggleRoot);\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\n\n resolveToggleAction() {\n const icon = this.wrapper.firstChild;\n const svg = icon.firstChild;\n\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 }\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\n\n hideAndShowBlocks(index = null) {\n const value = this.data.status === 'closed';\n const children = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n const {\n length\n } = children;\n let toggleIndex = index === null ? this.api.blocks.getCurrentBlockIndex() : index;\n\n if (length > 0) {\n for (let i = 0; i < length; i += 1) {\n const {\n holder\n } = this.api.blocks.getBlockByIndex(toggleIndex += 1);\n holder.hidden = value;\n }\n } else {\n const {\n lastChild\n } = this.wrapper;\n lastChild.classList.toggle('toggle-block__hidden', value);\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\n\n save(blockContent) {\n const {\n children\n } = blockContent;\n const caption = children[1].innerHTML;\n const blocks = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n return Object.assign(this.data, {\n text: caption,\n items: blocks.length\n });\n }\n /**\n * Adds an event in a existent button to destroy the nested blocks\n * when the toggle root is removed.\n */\n\n\n renderSettings() {\n const settingsBar = document.getElementsByClassName('ce-settings--opened');\n const optionsContainer = settingsBar[0];\n const options = optionsContainer.lastChild;\n const toggleIndex = this.api.blocks.getCurrentBlockIndex();\n const listChildren = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n\n for (let i = 0; i < listChildren.length; i += 1) {\n listChildren[i].classList.add('ce-block--selected');\n }\n\n setTimeout(() => {\n const deleteButton = options.getElementsByClassName('ce-settings__button--delete')[0];\n deleteButton.addEventListener('click', () => {\n const classesList = deleteButton.classList;\n const classes = Object.values(classesList);\n\n if (classes.indexOf('clicked-to-destroy-toggle') === -1) {\n deleteButton.classList.add('clicked-to-destroy-toggle');\n } else {\n this.removeFullToggle(toggleIndex);\n }\n });\n });\n }\n /**\n * Removes a toggle root and its nested blocks.\n *\n * @param {number} toggleIndex - toggle index\n */\n\n\n removeFullToggle(toggleIndex) {\n const children = document.querySelectorAll(`div[foreignKey=\"${this.wrapper.id}\"]`);\n const {\n length\n } = children;\n\n for (let i = toggleIndex; i < toggleIndex + length; i += 1) {\n this.api.blocks.delete(toggleIndex);\n }\n }\n /**\n * Adds the required listeners to call the toggle shortcuts\n * on the editor.\n */\n\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.api.blocks.getCurrentBlockIndex();\n const blockCover = blockContainer.parentElement;\n const block = blockCover.parentElement;\n\n if (e.code === 'Space') {\n this.createToggleWithShortcut(blockContainer);\n } else if (currentBlock > 0 && !(this.isPartOfAToggle(blockContainer) || this.isPartOfAToggle(block)) && e.code === 'Tab') {\n this.nestBlock(blockContainer);\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\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 /**\n * Restores the item attributes to nested blocks.\n *\n * @param {HTMLDivElement} mutation - Html element removed or inserted\n */\n\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 mutatedBlock = mutation.removedNodes[0];\n\n if (this.itemsId.includes(block.id) && currentBlockValidation) {\n this.setAttributesToNewBlock(index);\n } else if (mutatedBlock && this.isPartOfAToggle(mutatedBlock) && currentBlockValidation) {\n const blockCover = holder.firstChild;\n const blockContainer = blockCover.firstChild;\n\n if (!this.isPartOfAToggle(blockContainer)) {\n this.setAttributesToNewBlock(index);\n this.itemsId[index] = block.id;\n }\n }\n }\n }\n /**\n * Creates a toggle through the '>' char and the 'Space' key\n */\n\n\n createToggleWithShortcut(blockContainer) {\n const content = blockContainer.textContent;\n\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 * Nests a block inside a toggle through the 'Tab' key\n */\n\n\n nestBlock(blockContainer) {\n const blockCover = blockContainer.parentElement;\n const block = blockCover.parentElement;\n const previousBlock = block.previousElementSibling;\n const previousCover = previousBlock.firstChild;\n const previousContainer = previousCover.firstChild;\n\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 block.setAttribute('will-be-a-nested-block', true);\n const toggleRoot = document.getElementById(foreignKey);\n toggleRoot.children[1].focus();\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\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\n if (willBeABlock) {\n holder.removeAttribute('will-be-a-nested-block');\n this.setAttributesToNewBlock(blockIndex);\n this.api.toolbar.close();\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\n\n isPartOfAToggle(block) {\n const classes = Array.from(block.classList);\n const answer = classes.includes('toggle-block__item') || classes.includes('toggle-block__input') || classes.includes('toggle-block__selector');\n return answer;\n }\n\n}\n\n//# sourceURL=webpack://Toggle/./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 position: absolute;\\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://Toggle/./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 = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\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\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\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\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://Toggle/./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://Toggle/./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());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \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://Toggle/./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 = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\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\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\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\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\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\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\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\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://Toggle/./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/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\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\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\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\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://Toggle/./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}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://Toggle/./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\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://Toggle/./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\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\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}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://Toggle/./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\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://Toggle/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); | ||
| /***/ }), | ||
| /***/ "./assets/toggleIcon.svg": | ||
| /*!*******************************!*\ | ||
| !*** ./assets/toggleIcon.svg ***! | ||
| \*******************************/ | ||
| /***/ ((module) => { | ||
| eval("module.exports = \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-play-fill\\\" viewBox=\\\"0 0 16 16\\\"><path d=\\\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z\\\"></path></svg>\"\n\n//# sourceURL=webpack://Toggle/./assets/toggleIcon.svg?"); | ||
| /***/ }) | ||
| /******/ }); | ||
| /************************************************************************/ | ||
| /******/ // 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 }); | ||
| /******/ }; | ||
| /******/ })(); | ||
| /******/ | ||
| /************************************************************************/ | ||
| /******/ | ||
| /******/ // 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__; | ||
| /******/ })() | ||
| ; | ||
| }); |
| { | ||
| "name": "editorjs-toggle-block", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "Toogle block tool for Editor.js", | ||
@@ -5,0 +5,0 @@ "main": "./dist/bundle.js", |
@@ -557,3 +557,8 @@ import './index.css'; | ||
| const toggleIndex = this.api.blocks.getCurrentBlockIndex(); | ||
| const listChildren = document.querySelectorAll(`div[foreignKey="${this.wrapper.id}"]`); | ||
| for (let i = 0; i < listChildren.length; i += 1) { | ||
| listChildren[i].classList.add('ce-block--selected'); | ||
| } | ||
| setTimeout(() => { | ||
@@ -560,0 +565,0 @@ const deleteButton = options.getElementsByClassName('ce-settings__button--delete')[0]; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.96%
1217443
- Lines of code
- increased by28.47%
1489
No dependency changes