From 2608e0a1c4a796152159f905be1b56c352cb0f22 Mon Sep 17 00:00:00 2001 From: flaming-cl Date: Tue, 24 Jan 2023 00:03:20 -0500 Subject: [PATCH] toggle conversion tool --- README.md | 10 +++++---- dist/bundle.js | 2 +- package.json | 2 +- src/index.js | 45 ++++++++++++++++++++++++++-------------- src/picker/index.js | 13 +++++++++++- src/picker/utils/main.js | 16 +++++++++----- 6 files changed, 60 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 20edc90..6ebca3a 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ const ColorPlugin = require('editorjs-text-color-plugin'); ### Load from CDN ```html - + ``` ## Usage @@ -44,6 +44,7 @@ var editor = EditorJS({ colorCollections: ['#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39', '#FFF'], defaultColor: '#FF1300', type: 'text', + customPicker: true // add a button to allow selecting any colour } }, Marker: { @@ -66,9 +67,9 @@ var editor = EditorJS({ |------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------| | colorCollections | `array` | Colors available in the palette. CSS variables, for example var(--main-text-color), are supported | | defaultColor | `string` | Default color (if you do not set up a default color, it will be the first color of your color collections). CSS variables supported. | -| type | `string` | Set the plugin as a marker or a text color tool | -| customPicker | `boolean` | Whether to show a random color picker in the palette, defaults to `false`. | -| icon | `string` | SVG string to replace default button icons. | +| type | `string` | Set the plugin as a marker or a text color tool. It will be set as a text color tool as default. | +| customPicker | `boolean` | Turn on a random color picker in the palette, defaults to `false`. | +| icon | `string` | SVG string to replace default button icons. | ## Output data @@ -89,6 +90,7 @@ Colored text will be wrapped with a `color` tag with an `color-plugin` class. | V1.12.1 | Mar-25-2022 | CSS variable Support for colorCollection/defaultColor. This version supports the newest version of Editor.js (v2.23.2). Previous versions support Editor.js (v2.0) | | V1.13.1 | May-1-2022 | Thanks to HaoCherHong's contribution, we add a custom color picker in this version. | | V2.0.1 | Jan-20-2023 | New features: 1. clean applied text/marker color. When the left area of the plugin color turns blue, it means applied color can be cleaned now. 2. Allow customized icons | +| V2.0.2 | Jan-23-2023 | Fix: 1. toggle conversion tool when opening inline color plugin 2. optimized picker initialization | ## Credits UI Built Based on https://github.com/XboxYan/xy-ui by XboxYan diff --git a/dist/bundle.js b/dist/bundle.js index 0d122a8..a90217a 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ColorPlugin=e():t.ColorPlugin=e()}(self,(()=>(()=>{var t={424:(t,e,n)=>{(e=n(645)(!1)).push([t.id,".picker_wrapper.popup {\n z-index: 99;\n width: 170px;\n margin: 0;\n box-shadow: 0 0 10px 1px #eaeaea;\n background: #ffffff;\n}\n\n.picker_arrow {\n display: none;\n}\n\n.layout_default .picker_slider, .layout_default .picker_selector {\n padding: 5px;\n}\n\n.colorPlugin.ce-inline-tool {\n width: 32px;\n border-radius: 3px;\n}\n\n.colorPlugin.ce-inline-tool--active svg {\n fill: #3c99ff;\n}\n\n#color-left-btn {\n height: 35px;\n width: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n\n#color-left-btn:hover {\n border-radius: 5px 0 0 5px;\n background: rgba(203, 203, 203, 0.49);\n}\n\n#color-text {\n padding: 0 4px;\n}\n\n#color-btn-text {\n height: 15px;\n}\n\n",""]),t.exports=e},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n,o,i,s=t[1]||"",r=t[3];if(!r)return s;if(e&&"function"==typeof btoa){var l=(n=r,o=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),i="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),"/*# ".concat(i," */")),a=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[s].concat(a).concat([l]).join("\n")}return[s].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,o){"string"==typeof t&&(t=[[null,t,""]]);var i={};if(o)for(var s=0;s{var o=n(379),i=n(424);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[t.id,i,""]]);o(i,{insert:"head",singleton:!1}),t.exports=i.locals||{}},379:(t,e,n)=>{"use strict";var o,i=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),s=[];function r(t){for(var e=-1,n=0;n{t.exports={markerIcon:'\n\n\t\n\t\n\t\n\t\n\n',textIcon:'text'}},138:(t,e,n)=>{const o=n(442),{markerIcon:i,textIcon:s}=n(452),{getDefaultColorCache:r,handleCSSVariables:l}=n(697);n(548).toString(),t.exports=class{constructor({config:t,api:e}){this.api=e,this.config=t,this.clickedOnLeft=!1,this.pluginType=this.config.type||"text",this.parentTag="marker"===this.pluginType?"MARK":"FONT",this.hasCustomPicker=this.config.customPicker||!1,this.icon=this.config.icon,this.color=l(r(this.config.defaultColor,this.pluginType)),this.button=null,this.iconClasses={base:this.api.styles.inlineToolButton,active:this.api.styles.inlineToolButtonActive}}static get isInline(){return!0}render(){return this.button=document.createElement("button"),this.button.type="button",this.button.classList.add("colorPlugin"),this.button.classList.add(this.iconClasses.base),this.button.appendChild(this.createLeftButton()),this.button.appendChild(this.createRightButton(this)),this.button}createLeftButton(){const t=document.createElement("div");return t.id="color-left-btn",t.appendChild(this.createButtonIcon()),t.addEventListener("click",(()=>this.clickedOnLeft=!0)),t}createButtonIcon(){const t=document.createElement("div");t.id="color-btn-text";const e="marker"===this.pluginType?i:s;return t.innerHTML=this.icon||e,t}createRightButton(t){return new o.ColorPlugin({onColorPicked:function(e){t.color=e},hasCustomPicker:this.hasCustomPicker,defaultColor:this.config.defaultColor,colorCollections:this.config.colorCollections,type:this.pluginType})}surround(t){if(!t)return;const e=this.api.selection.findParentTag("SPAN");e&&this.unwrap(e);const n=this.api.selection.findParentTag(this.parentTag);n?this.unwrap(n):this.wrap(t),this.clickedOnLeft=!1}wrap(t){const e=t.extractContents(),n=document.createElement(this.parentTag);n.appendChild(e),t.insertNode(n),"marker"===this.pluginType?this.wrapMarker(n):this.wrapTextColor(n),this.api.selection.expandToTag(n)}wrapMarker(t){t.style.backgroundColor=this.color;const e=this.api.selection.findParentTag("FONT");e&&(t.style.color=e.style.color)}wrapTextColor(t){t.style.color=this.color}unwrap(t){this.api.selection.expandToTag(t);const e=window.getSelection(),n=e.getRangeAt(0),o=n.extractContents();this.clickedOnLeft?this.removeWrapper(t):this.updateWrapper(t),n.insertNode(o),e.removeAllRanges(),e.addRange(n)}updateWrapper(t){"marker"===this.pluginType?t.style.backgroundColor=this.color:t.style.color=this.color}removeWrapper(t){t.parentNode.removeChild(t)}checkState(){const t=this.api.selection.findParentTag("SPAN"),e=this.api.selection.findParentTag(this.parentTag);let n=t?this.handleLegacyWrapper(t,e):e;return this.button.classList.toggle(this.iconClasses.active,!!n),!!n}handleLegacyWrapper(t,e){return"marker"===this.pluginType?t:e&t}static get sanitize(){return{font:!0,span:!0,mark:!0}}}},442:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ColorPlugin:()=>c});class o extends HTMLElement{static get observedAttributes(){return["disabled","icon","loading","href","htmltype"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n \n <${this.href?"a":"button"} ${this.htmltype?'type="'+this.htmltype+'"':""} ${this.download&&this.href?'download="'+this.download+'"':""} ${this.href?'href="'+this.href+'" target="'+this.target+'" rel="'+this.rel+'"':""} class="btn" id="btn">${!this.loading&&this.icon&&"null"!=this.icon?'\n :host {\n display:inline-flex;\n }\n ::slotted(xy-button:not(:first-of-type):not(:last-of-type)){\n border-radius:0;\n }\n ::slotted(xy-button){\n margin:0!important;\n }\n ::slotted(xy-button:not(:first-of-type)){\n margin-left:-1px!important;\n }\n ::slotted(xy-button[type]:not([type="dashed"]):not(:first-of-type)){\n margin-left:1px!important;\n }\n ::slotted(xy-button:first-of-type){\n border-top-right-radius: 0;\n border-bottom-right-radius: 0px;\n }\n ::slotted(xy-button:last-of-type){\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n \n \n '}get disabled(){return null!==this.getAttribute("disabled")}set disabled(t){null===t||!1===t?this.removeAttribute("disabled"):this.setAttribute("disabled","")}connectedCallback(){}attributeChangedCallback(t,e,n){}}customElements.get("xy-button-group")||customElements.define("xy-button-group",i);class s extends HTMLElement{static get observedAttributes(){return["open","title","oktext","canceltext","loading","type"]}constructor(t){super(),this.attachShadow({mode:"open"}).innerHTML=`\n \n ${"confirm"===(t||this.type)?'':""}\n
\n ${null!==(t||this.type)?'
'+this.title+'
':""}\n
\n \n
\n ${"confirm"===(t||this.type)?'
'+this.canceltext+''+this.oktext+"
":""}\n
\n `}get open(){return null!==this.getAttribute("open")}get stopfocus(){return null!==this.getAttribute("stopfocus")}get title(){return this.getAttribute("title")||"popcon"}get type(){return this.getAttribute("type")}get oktext(){return this.getAttribute("oktext")||"confirm"}get canceltext(){return this.getAttribute("canceltext")||"cancel"}get loading(){return null!==this.getAttribute("loading")}set title(t){this.setAttribute("title",t)}set type(t){null===t||!1===t?this.removeAttribute("type"):this.setAttribute("type",t)}set oktext(t){this.setAttribute("oktext",t)}set canceltext(t){this.setAttribute("canceltext",t)}set open(t){null===t||!1===t?(this.removeAttribute("open"),this.parentNode.removeAttribute("open")):(this.setAttribute("open",""),this.parentNode.setAttribute("open",""),this.loading&&(this.loading=!1))}set loading(t){null===t||!1===t?this.removeAttribute("loading"):this.setAttribute("loading","")}connectedCallback(){this.remove=!1,this.type&&(this.titles=this.shadowRoot.getElementById("title"),this.btnClose=this.shadowRoot.getElementById("btn-close")),"confirm"==this.type&&(this.btnCancel=this.shadowRoot.getElementById("btn-cancel"),this.btnSubmit=this.shadowRoot.getElementById("btn-submit")),this.addEventListener("transitionend",(t=>{"transform"===t.propertyName&&this.open&&("confirm"==this.type&&this.btnSubmit.focus(),"pane"==this.type&&this.btnClose.focus(),this.dispatchEvent(new CustomEvent("open")))})),this.addEventListener("transitionend",(t=>{"transform"!==t.propertyName||this.open||(this.remove&&this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close")))})),this.addEventListener("click",(t=>{t.target.closest("[autoclose]")&&(this.open=!1,window.xyActiveElement.focus())})),this.type&&this.btnClose.addEventListener("click",(()=>{this.open=!1,window.xyActiveElement.focus()})),"confirm"==this.type&&(this.btnCancel.addEventListener("click",(async()=>{this.dispatchEvent(new CustomEvent("cancel")),this.open=!1,window.xyActiveElement.focus()})),this.btnSubmit.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("submit")),this.loading||(this.open=!1,window.xyActiveElement.focus())})))}attributeChangedCallback(t,e,n){"open"==t&&this.shadowRoot&&null==n&&this.stopfocus,"loading"==t&&this.shadowRoot&&(this.btnSubmit.loading=null!==n),"title"==t&&this.titles&&null!==n&&(this.titles.innerHTML=n),"oktext"==t&&this.btnSubmit&&null!==n&&(this.btnSubmit.innerHTML=n),"canceltext"==t&&this.btnCancel&&null!==n&&(this.btnCancel.innerHTML=n)}}customElements.get("xy-popcon")||customElements.define("xy-popcon",s);class r extends HTMLElement{static get observedAttributes(){return["title","oktext","canceltext","loading","type"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n \n \n '}get title(){return this.getAttribute("title")||"popcon"}get trigger(){return this.getAttribute("trigger")}get disabled(){return null!==this.getAttribute("disabled")}get type(){return this.getAttribute("type")}get accomplish(){return null!==this.getAttribute("accomplish")}get content(){return this.getAttribute("content")}get oktext(){return this.getAttribute("oktext")}get canceltext(){return this.getAttribute("canceltext")}get dir(){return this.getAttribute("dir")}get loading(){return null!==this.getAttribute("loading")}set dir(t){this.setAttribute("dir",t)}set title(t){this.setAttribute("title",t)}set type(t){this.setAttribute("type",t)}set oktext(t){this.setAttribute("oktext",t)}set canceltext(t){this.setAttribute("canceltext",t)}set loading(t){null===t||!1===t?this.removeAttribute("loading"):this.setAttribute("loading","")}set disabled(t){null===t||!1===t?this.removeAttribute("disabled"):this.setAttribute("disabled","")}show(t){if(this.popcon=this.querySelector("xy-popcon"),this.disabled)(this.popcon||this).dispatchEvent(new CustomEvent("submit"));else if(this.popcon||(this.popcon=new s(this.type),this.popcon.type=this.type,this.appendChild(this.popcon),this.popcon.title=this.title||"popover",this.popcon.innerHTML=this.content||"","confirm"==this.type&&(this.popcon.oktext=this.oktext||"confirm",this.popcon.canceltext=this.canceltext||"cancel",this.popcon.onsubmit=()=>this.dispatchEvent(new CustomEvent("submit")),this.popcon.oncancel=()=>this.dispatchEvent(new CustomEvent("cancel")))),"contextmenu"===this.trigger){const{x:e,y:n}=this.getBoundingClientRect();this.popcon.style.setProperty("--x",t.clientX-e+"px"),this.popcon.style.setProperty("--y",t.clientY-n+"px"),this.popcon.open=!0}else(t.path||t.composedPath&&t.composedPath()).includes(this.popcon)||(window.xyActiveElement=document.activeElement,this.accomplish?this.popcon.open=!0:this.popcon.open=!this.popcon.open);return this.popcon}connectedCallback(){this.popcon=this.querySelector("xy-popcon"),this.trigger&&"click"!==this.trigger||this.addEventListener("click",this.show),"contextmenu"===this.trigger&&this.addEventListener("contextmenu",(t=>{t.preventDefault(),(t.path||t.composedPath&&t.composedPath()).includes(this.popcon)||this.show(t)})),document.addEventListener("mousedown",(t=>{const e=t.path||t.composedPath&&t.composedPath();(this.popcon&&!e.includes(this.popcon)&&!this.popcon.loading&&!e.includes(this.children[0])||"contextmenu"===this.trigger&&!e.includes(this.popcon)&&"1"==t.which)&&(this.popcon.open=!1)}))}attributeChangedCallback(t,e,n){"loading"==t&&this.popcon&&(this.popcon.loading=null!==n),"title"==t&&this.popcon&&null!==n&&(this.popcon.title=n),"oktext"==t&&this.popcon&&null!==n&&(this.popcon.oktext=n),"canceltext"==t&&this.popcon&&null!==n&&(this.popcon.canceltext=n)}}customElements.get("xy-popover")||customElements.define("xy-popover",r);var l=n(697);const a=["#ff1300","#EC7878","#9C27B0","#673AB7","#3F51B5","#0070FF","#03A9F4","#00BCD4","#4CAF50","#8BC34A","#CDDC39","#FFE500","#FFBF00","#FF9800","#795548","#9E9E9E","#5A5A5A","#FFF"];class c extends HTMLElement{static get observedAttributes(){return["disabled","dir"]}constructor(t){super();const e=this.attachShadow({mode:"open"});this.colorCollections=t.colorCollections||a,this.onColorPicked=t.onColorPicked,this.defaulColor=(0,l.handleCSSVariables)(t.defaultColor||this.colorCollections[0]),this.pluginType=t.type,this.hasCustomPicker=t.hasCustomPicker,this.customColor=(0,l.getCustomColorCache)(this.pluginType),e.innerHTML=`\n \n
\n \n _\n \n
\n ${this.hasCustomPicker?'