From 1bd00bfe173c73f972a9e5691d96e2e07fe02207 Mon Sep 17 00:00:00 2001 From: Valentina Morales <89993510+ValenMorales@users.noreply.github.com> Date: Wed, 4 Sep 2024 08:47:10 -0500 Subject: [PATCH 1/5] Update README.md (#152) Example and section added on plugin usage and customizing the indicator style to enhance documentation clarity. --- README.md | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3d2a5dc..4cfb305 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ $ npm i --save-dev editorjs-drag-drop Include module at your application ```javascript -import DragDrop from 'editorjs-drag-drop'; +import DragDrop from "editorjs-drag-drop"; ``` ### Load from CDN @@ -38,6 +38,8 @@ Require this script on a page with Editor.js. ## Usage +Add the plugin to the onReady property of the Editor.js configuration to initialize it: + ```javascript const editor = new EditorJS({ onReady: () => { @@ -46,11 +48,23 @@ const editor = new EditorJS({ }); ``` +You can customize the indicator border style by passing a second parameter to the plugin constructor: + +```javascript +const editor = new EditorJS({ + onReady: () => { + new DragDrop(editor, "2px solid #fff"); + }, +}); +``` + +If no parameter is provided, the default border style `1px dashed #aaa` is used. + Select the block, drag the toolbar settings button, and drop it at the desired position. -You can optionally provide a second parameter to customize the indicator border style. If no parameter is provided, the default border style `1px dashed #aaa` is used. +### Integration with editorjs-undo -If you're already using [editorjs-undo](https://github.com/kommitters/editorjs-undo), then your code will look somewhat like this: +If you're already using [editorjs-undo](https://github.com/kommitters/editorjs-undo), your code might look like this: ```javascript const editor = new EditorJS({ @@ -60,6 +74,7 @@ const editor = new EditorJS({ }, }); ``` + ### Usage with React. If you are using React, you could create a function to handle the onReady property, the function will store the DragDrop instance. Then, you must call the function in onReady in the editorJS instance. @@ -80,15 +95,16 @@ class ReactEditor extends Component { } } ``` -**Note:** If you are already using [editorjs-undo](https://github.com/kommitters/editorjs-undo) your handleReady function must have the editorjs-undo instance. + +**Note:** If you are also using [editorjs-undo](https://github.com/kommitters/editorjs-undo) your handleReady function must have the editorjs-undo instance as well. ```javascript const handleReady = (editor) => { new Undo({ editor }); new DragDrop(editor); }; - ``` + ### Usage with [react-editor-js](https://github.com/Jungwoo-An/react-editor-js). If you are using [react-editor-js](https://github.com/Jungwoo-An/react-editor-js), you should use the 'onInitialize' prop in the ReactEditorJS component to obtain the abstract editorjs as follow: @@ -145,18 +161,23 @@ $ yarn test ``` ## Code of conduct + We welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before. ## Contributing + For information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide. ## Changelog + Features and bug fixes are listed in the [CHANGELOG][changelog] file. ## License + This library is licensed under an MIT license. See [LICENSE][license] for details. ## Acknowledgements + Made with 💙 by [kommitters Open Source](https://kommit.co) [license]: https://github.com/kommitters/editorjs-drag-drop/blob/master/LICENSE From 510964fac8cd83f9f0bf8846c53f3e690f30f642 Mon Sep 17 00:00:00 2001 From: Valentina Morales <89993510+ValenMorales@users.noreply.github.com> Date: Fri, 6 Sep 2024 11:14:10 -0500 Subject: [PATCH 2/5] Ensure setAttribute fires after editor is ready (#154) --- src/index.js | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 0255681..cde810e 100644 --- a/src/index.js +++ b/src/index.js @@ -57,14 +57,36 @@ export default class DragDrop { setDragListener() { if (!this.readOnly) { const settingsButton = this.holder.querySelector('.ce-toolbar__settings-btn'); + if (settingsButton) { + this.initializeDragListener(settingsButton); + } else { + // If there's no settings button, we wait for it to be added to the DOM + const observer = new MutationObserver((mutations, obs) => { + const settingsButton = this.holder.querySelector( + ".ce-toolbar__settings-btn" + ); + if (settingsButton) { + this.initializeDragListener(settingsButton); + obs.disconnect(); + } + }); - settingsButton.setAttribute('draggable', 'true'); - settingsButton.addEventListener('dragstart', () => { - this.startBlock = this.api.getCurrentBlockIndex(); - }); + observer.observe(this.holder, { + childList: true, + subtree: true, + }); + } + } + } + + initializeDragListener(settingsButton) { + settingsButton.setAttribute("draggable", "true"); + settingsButton.addEventListener("dragstart", () => { + this.startBlock = this.api.getCurrentBlockIndex(); + }); settingsButton.addEventListener('drag', () => { - this.toolbar.close(); // this closes the toolbar when we start the drag - if (!this.isTheOnlyBlock()) { + this.toolbar.close(); // this closes the toolbar when we start the drag + if (!this.isTheOnlyBlock()) { const allBlocks = this.holder.querySelectorAll('.ce-block'); const blockFocused = this.holder.querySelector('.ce-block--drop-target'); this.setElementCursor(blockFocused); @@ -72,7 +94,7 @@ export default class DragDrop { } }); } - } + /** * Sets dinamically the borders in the blocks when a block is dragged * @param {object} allBlocks Contains all the blocks in the holder From 732408db56626912db1b5d909f03a09fe9ba542f Mon Sep 17 00:00:00 2001 From: Valentina Morales <89993510+ValenMorales@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:59:19 -0500 Subject: [PATCH 3/5] Updated changelog and package.json for release 1.1.15 (#155) --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ca28c2..c2158c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 1.1.15 (06.09.2024) + +* Bug fix: Ensure `setAttribute` fires after editor is ready. See [Issue #148](https://github.com/kommitters/editorjs-drag-drop/issues/148) + +* Updated README: Added section on plugin usage and customizing the indicator style to enhance documentation clarity. + ## 1.1.14 (24.04.2024) * Update all dependencies. See [PR #131](https://github.com/kommitters/editorjs-drag-drop/pull/131) diff --git a/package.json b/package.json index 9fe6272..094faec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "editorjs-drag-drop", - "version": "1.1.14", + "version": "1.1.15", "keywords": [ "drag", "drop", From 4c2db453bb9b58322b63bf833e8be8f24b65c99a Mon Sep 17 00:00:00 2001 From: Valentina Morales <89993510+ValenMorales@users.noreply.github.com> Date: Thu, 12 Sep 2024 12:34:48 -0500 Subject: [PATCH 4/5] Bundle update (#158) * fix: update package.json and bundle.js --- dist/bundle.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index 8824238..473947e 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DragDrop=t():e.DragDrop=t()}(self,(()=>(()=>{"use strict";var e={523:(e,t,r)=>{r.d(t,{A:()=>c});var o=r(601),n=r.n(o),a=r(314),i=r.n(a)()(n());i.push([e.id,'.ce-block--drop-target .ce-block__content:before {\n content: "";\n position: absolute;\n top: 50%;\n left: -20px;\n margin-top: -1px;\n height: 8px;\n width: 8px;\n border: solid #a0a0a0;\n border-width: 1px 1px 0 0;\n -webkit-transform-origin: right;\n transform-origin: right;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.ce-block--drop-target .ce-block__content:after {\n background: none;\n}\n',""]);const c=i},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",o=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),o&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),o&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,o,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(o)for(var c=0;c0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),n&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=n):u[4]="".concat(n)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function r(e){for(var r=-1,o=0;o{var t={};e.exports=function(e,r){var o=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(r)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var o="";r.supports&&(o+="@supports (".concat(r.supports,") {")),r.media&&(o+="@media ".concat(r.media," {"));var n=void 0!==r.layer;n&&(o+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),o+=r.css,n&&(o+="}"),r.media&&(o+="}"),r.supports&&(o+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(o,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var a=t[o]={id:o,exports:{}};return e[o](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.nc=void 0;var o={};return(()=>{r.d(o,{default:()=>g});var e=r(72),t=r.n(e),n=r(825),a=r.n(n),i=r(659),c=r.n(i),s=r(56),l=r.n(s),u=r(540),d=r.n(u),f=r(113),p=r.n(f),v=r(523),y={};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function b(e,t){for(var r=0;rr.startBlock?n.style.borderBottom=r.borderStyle:n.style.borderTop=r.borderStyle}))}},{key:"setDropListener",value:function(){var e=this;document.addEventListener("drop",(function(t){var r=t.target;if(e.holder.contains(r)&&null!==e.startBlock){var o=e.getDropTarget(r);if(o){var n=o.querySelector(".ce-block__content");n.style.removeProperty("border-top"),n.style.removeProperty("border-bottom"),e.endBlock=e.getTargetPosition(o),e.moveBlocks()}}e.startBlock=null}))}},{key:"getDropTarget",value:function(e){return e.classList.contains("ce-block")?e:e.closest(".ce-block")}},{key:"getTargetPosition",value:function(e){return Array.from(e.parentNode.children).indexOf(e)}},{key:"isTheOnlyBlock",value:function(){return 1===this.api.getBlocksCount()}},{key:"moveBlocks",value:function(){this.isTheOnlyBlock()||this.api.move(this.endBlock,this.startBlock)}}])&&b(e.prototype,t),r&&b(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t,r}()})(),o.default})())); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DragDrop=t():e.DragDrop=t()}(self,(()=>(()=>{"use strict";var e={523:(e,t,r)=>{r.d(t,{A:()=>c});var n=r(601),o=r.n(n),i=r(314),a=r.n(i)()(o());a.push([e.id,'.ce-block--drop-target .ce-block__content:before {\n content: "";\n position: absolute;\n top: 50%;\n left: -20px;\n margin-top: -1px;\n height: 8px;\n width: 8px;\n border: solid #a0a0a0;\n border-width: 1px 1px 0 0;\n -webkit-transform-origin: right;\n transform-origin: right;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.ce-block--drop-target .ce-block__content:after {\n background: none;\n}\n',""]);const c=a},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(n)for(var c=0;c0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function r(e){for(var r=-1,n=0;n{var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,r)=>{e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.nc=void 0;var n={};return(()=>{r.d(n,{default:()=>g});var e=r(72),t=r.n(e),o=r(825),i=r.n(o),a=r(659),c=r.n(a),s=r(56),l=r.n(s),u=r(540),d=r.n(u),f=r(113),p=r.n(f),v=r(523),y={};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function b(e,t){for(var r=0;rr.startBlock?o.style.borderBottom=r.borderStyle:o.style.borderTop=r.borderStyle}))}},{key:"setDropListener",value:function(){var e=this;document.addEventListener("drop",(function(t){var r=t.target;if(e.holder.contains(r)&&null!==e.startBlock){var n=e.getDropTarget(r);if(n){var o=n.querySelector(".ce-block__content");o.style.removeProperty("border-top"),o.style.removeProperty("border-bottom"),e.endBlock=e.getTargetPosition(n),e.moveBlocks()}}e.startBlock=null}))}},{key:"getDropTarget",value:function(e){return e.classList.contains("ce-block")?e:e.closest(".ce-block")}},{key:"getTargetPosition",value:function(e){return Array.from(e.parentNode.children).indexOf(e)}},{key:"isTheOnlyBlock",value:function(){return 1===this.api.getBlocksCount()}},{key:"moveBlocks",value:function(){this.isTheOnlyBlock()||this.api.move(this.endBlock,this.startBlock)}}])&&b(e.prototype,t),r&&b(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t,r}()})(),n.default})())); \ No newline at end of file diff --git a/package.json b/package.json index 094faec..5c5d90e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "editorjs-drag-drop", - "version": "1.1.15", + "version": "1.1.16", "keywords": [ "drag", "drop", From 9ec6509271378c478140d07b4b719d5e2cae5fd8 Mon Sep 17 00:00:00 2001 From: Lorenzo Zuluaga <32212593+L-Zuluaga@users.noreply.github.com> Date: Fri, 13 Sep 2024 11:25:48 -0500 Subject: [PATCH 5/5] Prepare release v1.1.16 (#159) --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2158c1..1353d38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.1.16 (13.09.2024) + +* Bundle update (#158). See [PR #158](https://github.com/kommitters/editorjs-drag-drop/pull/158) + ## 1.1.15 (06.09.2024) * Bug fix: Ensure `setAttribute` fires after editor is ready. See [Issue #148](https://github.com/kommitters/editorjs-drag-drop/issues/148)