From 9e9b0d75fda9a3548003d91eb4428eb6c47857d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=A1=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2?= Date: Fri, 17 Feb 2023 21:19:20 +0300 Subject: [PATCH] 0.9.34 fix for bug with el.fn, update dist folder --- dist/core/el.js | 2 +- dist/core/translates.js | 2 +- dist/sass/content.css | 12 ++---------- dist/wc-wysiwyg.js | 2 +- package.json | 2 +- src/core/el.ts | 10 ++++++---- 6 files changed, 12 insertions(+), 18 deletions(-) diff --git a/dist/core/el.js b/dist/core/el.js index 6b6e9f4..7a631e5 100644 --- a/dist/core/el.js +++ b/dist/core/el.js @@ -1 +1 @@ -export const el=(tagName,{classList,styles,props,attrs,options,append}={})=>{if(!tagName)throw new Error(`Undefined tag ${tagName}`);const element=document.createElement(tagName,options);if(classList)for(let i=0;i{if(!tagName)throw new Error(`Undefined tag ${tagName}`);const element=document.createElement(tagName,options);if(classList)for(let i=0;i{const selection=window.getSelection();null!==selection&&0{const isFullScreen=document.fullscreenElement;this.classList.toggle("-fullscreen",null!==isFullScreen)}}connectedCallback(){if(!1===this.#Connected){const allowTags=this.getAttribute("data-allow-tags")||allTags.map(t=>t.tag).join(",");if(this.EditorPreviewText=this.querySelector("textarea"),this.EditorPreviewText.className="wc-wysiwyg_pr -display-none",this.EditorPreviewText.oninput=event=>{const target=event.target;this.EditorNode.innerHTML=target.value,this.value=target.value},this.EditorAllowTags=allowTags.split(","),this.EditorTags=allTags.filter(tag=>allowTags.includes(tag.tag)),this.#EditProps=null!==this.getAttribute("data-edit-props")&&JSON.parse(this.getAttribute("data-edit-props")),this.#Autocomplete="1"===this.getAttribute("data-autocomplete"),this.#HideBottomActions="1"===this.getAttribute("data-hide-bottom-actions"),this.EditorInlineActions=this.EditorTags.filter(action=>!1===["video","audio","img"].includes(action.tag)),this.#SotrageKey=this.getAttribute("data-storage"),this.#SotrageKey){let storeValue=window.localStorage.getItem(this.#SotrageKey);storeValue&&(this.value=storeValue)}this.EditorActionsSection=el("section",{classList:["wc-wysiwyg_ec"]}),this.EditorClearFormatBtn=el("button",{classList:["wc-wysiwyg_btn","-clear"],attrs:{"data-hint":this.#t("clearFormat")},props:{innerHTML:"\u023E"}}),this.EditorInlineActionsForm=el("form"),this.EditorInlineDialog=el("dialog",{classList:["wc-wysiwyg_di"],append:[this.EditorInlineActionsForm,this.EditorClearFormatBtn],props:{onsubmit:event=>{event.preventDefault(),event.stopPropagation()}}}),this.#EditProps&&(this.EditorPropertyForm=el("form",{styles:{display:"none"},classList:["wc-wysiwyg_pf"],props:{onsubmit:event=>{event.preventDefault(),this.hideEditorInlineDialog()},onpointerup:event=>event.stopPropagation()}}),this.EditorInlineDialog.append(this.EditorPropertyForm)),this.#Autocomplete&&(this.EditorAutoCompleteForm=el("form",{classList:["wc-wysiwyg_au"],props:{onsubmit:submitEvent=>{submitEvent.preventDefault(),submitEvent.stopPropagation();const tagName=submitEvent.submitter.value,newEl=el(tagName,{props:{innerHTML:tagName}});submitEvent.target.parentElement.replaceWith(newEl),newEl.focus()}}})),this.EditorBottomForm=el("fieldset",{classList:["wc-wysiwyg_bt"]}),!1===this.#HideBottomActions&&(this.EditorBottomFormViewToggle=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("toggleViewMode"),"data-mode":"html5"},props:{type:"button",innerText:"\u0442\u0435\u043A\u0441\u0442/html5",onpointerup:()=>{let mode=this.EditorBottomFormViewToggle.getAttribute("data-mode"),newMode="html5"===mode?"text":"html5";this.EditorBottomFormViewToggle.setAttribute("data-mode",newMode),this.EditorNode.style.display="html5"===newMode?"":"none",this.EditorPreviewText.classList.toggle("-display-none","html5"===newMode),"text"===newMode&&(this.EditorPreviewText.value=this.EditorNode.innerHTML)}}}),this.EditorBottomFormNewP=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("addNewParahraph")},props:{type:"button",innerText:"+ P",onpointerup:()=>{const P=el("p",{props:{innerText:"/"}});this.EditorNode.appendChild(P),P.focus()}}}),this.EditorFullScreenButton=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("fullScreen")},props:{type:"button",ariaRoleDescription:"button",innerText:"\uD83D\uDDA5\uFE0F",onpointerup:()=>{this.requestFullscreen()}}}),this.EditorBottomForm.append(this.EditorBottomFormNewP,this.EditorBottomFormViewToggle,this.EditorFullScreenButton)),this.EditorCustomTags=JSON.parse(this.getAttribute("data-custom-tags")+""),null!==this.EditorCustomTags&&(this.EditorCustomTagsForm=el("fieldset",{classList:["wc-wysiwyg_ce"]}),this.#makeActionButtons(this.EditorCustomTagsForm,this.EditorCustomTags),this.appendChild(this.EditorCustomTagsForm)),this.EditorNode=el("article",{classList:["wc-wysiwyg_content",this.getAttribute("data-content-class")],props:{contentEditable:!0,onpointerup:event=>{this.checkCanClearElement(event),this.#EditProps&&this.checkEditProps(event)},oninput:()=>{this.updateContent(),this.#Autocomplete&&this.checkAutoComplete()},onkeydown:event=>{if(event.altKey&&"Space"===event.code){const Selection=window.getSelection();if("Caret"===Selection.type){const span=el("span");Selection.anchorNode.parentElement.insertAdjacentElement("afterend",span);const textN=document.createTextNode(" ");span.replaceWith(textN);const range=document.createRange();range.selectNodeContents(textN),Selection.removeAllRanges(),Selection.addRange(range)}}if("Escape"===event.code&&this.hideEditorInlineDialog(),"Enter"===event.code&&!1===event.shiftKey){const Selection=window.getSelection();if(["LI","ARTICLE","P"].includes(Selection.anchorNode.parentElement.tagName))return!0;const p=el("p",{props:{innerHTML:` `}});Selection.anchorNode.parentElement.insertAdjacentElement("afterend",p);const range=document.createRange();range.selectNodeContents(p),Selection.removeAllRanges(),Selection.addRange(range),event.stopPropagation(),event.preventDefault()}}}}),this.#makeActionButtons(this.EditorActionsSection,this.EditorTags),this.#makeActionButtons(this.EditorInlineActionsForm,this.EditorInlineActions),this.append(this.EditorActionsSection,this.EditorInlineDialog,this.EditorNode,this.EditorPreviewText,this.EditorBottomForm),this.EditorNode.innerHTML=this.EditorPreviewText.value,this.updateContent(),this.#Connected=!0}}updateContent(){this.value=this.EditorNode.innerHTML,this.checkValidity(),this.#SotrageKey&&window.localStorage.setItem(this.#SotrageKey,this.value),this.dispatchEvent(new Event("oninput",{bubbles:!0,cancelable:!1})),this.updatePreviewEl(this.getAttribute("data-preview-el"))}updatePreviewEl(selector){if(selector){const previewEl=window.document.body.querySelector(selector);previewEl&&(previewEl.innerHTML=this.value)}}checkValidity(){let hasErros=!1,errors=[];if(null!==this.getAttribute("required")&&0===(this.EditorNode.textContent+"").length&&(hasErros=!0,errors.push(this.#t("required"))),+this.getAttribute("minlength")&&(this.EditorNode.textContent+"").length<+this.getAttribute("minlength")&&(hasErros=!0,errors.push(`${this.#t("minlength")} ${this.getAttribute("minlength")}`)),+this.getAttribute("maxlength")&&(this.EditorNode.textContent+"").length>+this.getAttribute("maxlength")&&(hasErros=!0,errors.push(`${this.#t("maxlength")} ${this.getAttribute("maxlength")}`)),this.getAttribute("filtertags")){const disallowTags=this.getAttribute("filtertags").split(",");for(let i=0;i")},classList:["-errors"]});this.append(errosEl)}return!1==hasErros}checkAutoComplete(){const Selecton=window.getSelection();if(null!==Selecton&&null!==Selecton.anchorNode){const SelectionParentEl=Selecton.anchorNode.parentElement;if(null!==SelectionParentEl&&""===Selecton.toString()&&"P"===SelectionParentEl.nodeName&&SelectionParentEl.parentElement===this.EditorNode&&SelectionParentEl.innerText.startsWith("/")){const parsedTagName=SelectionParentEl.innerText.replace("/",""),filteredActions=this.EditorTags.filter(action=>action.tag.toLocaleLowerCase().startsWith(parsedTagName.toLocaleLowerCase()));0{this.EditorAutoCompleteForm.appendChild(el("button",{classList:["wc-wysiwyg_btn",`-${action.tag}`],attrs:{"data-hint":this.#t(action.tag)||null},props:{type:"submit",innerText:action.tag,value:action.tag}}))}),SelectionParentEl.appendChild(this.EditorAutoCompleteForm)):(this.EditorAutoCompleteForm.innerHTML="",this.EditorAutoCompleteForm.parentElement&&this.EditorAutoCompleteForm.parentElement.removeChild(this.EditorAutoCompleteForm))}}}showEditorInlineDialog(){this.EditorInlineDialog.show()}hideEditorInlineDialog(){this.#EditProps&&(this.EditorPropertyForm.style.display="none"),this.EditorInlineDialog.close()}checkCanClearElement(event){const eventTarget=event.target;eventTarget!==this.EditorNode&&("P"!==eventTarget.nodeName&&"SPAN"!==eventTarget.nodeName?(this.EditorClearFormatBtn.style.display="inline-block",this.EditorClearFormatBtn.innerHTML=`Ⱦ ${eventTarget.nodeName}`,this.EditorClearFormatBtn.onpointerup=()=>{eventTarget.replaceWith(document.createTextNode(eventTarget.textContent))},this.showEditorInlineDialog()):(this.EditorClearFormatBtn.style.display="none",this.EditorClearFormatBtn.onpointerup=void 0))}checkEditProps(event){const eventTarget=event.target;if(this.#EditProps[eventTarget.nodeName]){const props=this.#EditProps[eventTarget.nodeName];event.stopPropagation(),this.EditorPropertyForm.style.display="",this.showEditorInlineDialog(),this.EditorPropertyForm.setAttribute("data-tag",eventTarget.nodeName),this.EditorPropertyForm.innerHTML="";for(let i=0;i{const eventInputTarget=eventInput.target;"class"===tagProp&&(eventTarget.className=eventInputTarget.value),(isAttr||"datetime"===tagProp)&&null!==eventInputTarget?eventTarget.setAttribute(tagProp,eventInputTarget.value):eventTarget[tagProp]=eventInputTarget.value,this.updateContent()}}})]}))}this.EditorPropertyForm.append(el("button",{classList:["wc-wysiwyg_btn"],props:{type:"submit",innerHTML:"↳"}}))}}#makeActionButtons(toEl,actions){for(let i=0;ithis.#tag(action.tag,event,action.is)},attrs:{"data-hint":action.hint?action.hint:this.#t(action.tag)||"-"}});toEl.appendChild(button)}}#tag=(tag,event=!1,is=!1)=>{switch(tag){case"audio":this.#Media("audio");break;case"video":this.#Media("video");break;case"img":this.#Image();break;default:this.#wrapTag(tag,is);}};#wrapTag=(tag,is=!1)=>{const isList=["ul","ol"].includes(tag),Selection=window.getSelection();let className=null,defaultOptions={classList:void 0};isList&&(tag="li"),is&&(defaultOptions.options={is});let tagNode=el(tag,defaultOptions);if(null!==Selection&&Selection.rangeCount){if(["ul","ol"].includes(tag)){const list=el(tag);tagNode.replaceWith(list),list.append(tagNode)}const range=Selection.getRangeAt(0).cloneRange();range.surroundContents(tagNode),Selection.removeAllRanges(),Selection.addRange(range),0===Selection.toString().length&&(tagNode.innerText=tag),this.updateContent()}};#Media=tagName=>{const mediaSrc=prompt("src","");if(""===mediaSrc)return!1;const mediaEl=el(tagName,{attrs:{controls:!0},props:{src:mediaSrc}});this.EditorNode.append(mediaEl),this.updateContent()};#Image=()=>{const src=prompt("IMG URL"),caption=prompt("IMG caption"),img=new Image;if(src)img.src=src;else return alert("Invalid src");if(caption){const figure=el("figure"),figcaption=el("figcaption",{props:{textContent:caption}});figure.appendChild(img),figure.appendChild(figcaption),img.setAttribute("alt",caption),this.EditorNode.appendChild(figure)}else this.EditorNode.appendChild(img)};#t(key){let lang=this.lang;return t[lang]?t[lang][key]||"-":t.en[key]}static define(name="wc-wysiwyg"){window.customElements.define(name,WCWYSIWYG)}}export default WCWYSIWYG;export const define=WCWYSIWYG.define; \ No newline at end of file +import{t}from"./core/translates.js";import{el}from"./core/el.js";const allTags=[{tag:"h1"},{tag:"h2"},{tag:"h3"},{tag:"h4"},{tag:"h5"},{tag:"h6"},{tag:"span"},{tag:"mark"},{tag:"small"},{tag:"dfn"},{tag:"a"},{tag:"q"},{tag:"b"},{tag:"i"},{tag:"u"},{tag:"s"},{tag:"sup"},{tag:"sub"},{tag:"kbd"},{tag:"abbr"},{tag:"strong"},{tag:"code"},{tag:"samp"},{tag:"del"},{tag:"ins"},{tag:"var"},{tag:"ul"},{tag:"ol"},{tag:"pre"},{tag:"time"},{tag:"img"},{tag:"audio"},{tag:"video"},{tag:"blockquote"},{tag:"details"}];class WCWYSIWYG extends HTMLElement{EditorTags;EditorCustomTags;EditorNode;EditorActionsSection;EditorInlineActions;EditorInlineDialog;EditorInlineActionsForm;EditorPropertyForm;EditorClearFormatBtn;EditorAutoCompleteForm;EditorBottomForm;EditorBottomFormNewP;EditorBottomFormViewToggle;EditorPreviewText;EditorCustomTagsForm;EditorTagsMethods;EditorAllowTags;EditorFullScreenButton;lang="ru";value="";static observedAttributes=["value"];#EditProps;#Autocomplete;#SotrageKey;#HideBottomActions;#Connected=!1;constructor(){super(),this.classList.add("wc-wysiwyg"),this.onpointerup=()=>{const selection=window.getSelection();null!==selection&&0{const isFullScreen=document.fullscreenElement;this.classList.toggle("-fullscreen",null!==isFullScreen)}}connectedCallback(){if(!1===this.#Connected){const allowTags=this.getAttribute("data-allow-tags")||allTags.map(t=>t.tag).join(",");if(this.EditorPreviewText=this.querySelector("textarea"),this.EditorPreviewText.className="wc-wysiwyg_pr -display-none",this.EditorPreviewText.oninput=event=>{const target=event.target;this.EditorNode.innerHTML=target.value,this.value=target.value},this.EditorAllowTags=allowTags.split(","),this.EditorTags=allTags.filter(tag=>allowTags.includes(tag.tag)),this.#EditProps=null!==this.getAttribute("data-edit-props")&&JSON.parse(this.getAttribute("data-edit-props")||""),this.#Autocomplete="1"===this.getAttribute("data-autocomplete"),this.#HideBottomActions="1"===this.getAttribute("data-hide-bottom-actions"),this.EditorInlineActions=this.EditorTags.filter(action=>!1===["video","audio","img"].includes(action.tag)),this.EditorActionsSection=el("section",{classList:["wc-wysiwyg_ec"]}),this.EditorClearFormatBtn=el("button",{classList:["wc-wysiwyg_btn","-clear"],attrs:{"data-hint":this.#t("clearFormat")},props:{innerHTML:"\u023E"}}),this.EditorInlineActionsForm=el("form"),this.EditorInlineDialog=el("dialog",{classList:["wc-wysiwyg_di"],append:[this.EditorInlineActionsForm,this.EditorClearFormatBtn],props:{onsubmit:event=>{event.preventDefault(),event.stopPropagation()}}}),this.#EditProps&&(this.EditorPropertyForm=el("form",{styles:{display:"none"},classList:["wc-wysiwyg_pf"],props:{onsubmit:event=>{event.preventDefault(),this.hideEditorInlineDialog()},onpointerup:event=>event.stopPropagation()}}),this.EditorInlineDialog.append(this.EditorPropertyForm)),this.#Autocomplete&&(this.EditorAutoCompleteForm=el("form",{classList:["wc-wysiwyg_au"],props:{onsubmit:submitEvent=>{submitEvent.preventDefault(),submitEvent.stopPropagation();const tagName=submitEvent.submitter.value,newEl=el(tagName,{props:{innerHTML:tagName}});submitEvent.target.parentElement.replaceWith(newEl),newEl.focus()}}})),this.EditorBottomForm=el("fieldset",{classList:["wc-wysiwyg_bt"]}),this.EditorCustomTags=JSON.parse(this.getAttribute("data-custom-tags")+""),null!==this.EditorCustomTags&&(this.EditorCustomTagsForm=el("fieldset",{classList:["wc-wysiwyg_ce"]}),this.#makeActionButtons(this.EditorCustomTagsForm,this.EditorCustomTags),this.appendChild(this.EditorCustomTagsForm)),this.EditorNode=el("article",{classList:["wc-wysiwyg_content",this.getAttribute("data-content-class")||""],props:{contentEditable:!0,onpointerup:event=>{this.#checkCanClearElement(event),this.#EditProps&&this.#checkEditProps(event)},oninput:()=>{this.updateContent(),this.#Autocomplete&&this.#checkAutoComplete()},onkeydown:event=>{this.#checkKeyBindings(event)}}}),this.#makeActionButtons(this.EditorActionsSection,this.EditorTags),this.#makeActionButtons(this.EditorInlineActionsForm,this.EditorInlineActions),this.append(this.EditorActionsSection,this.EditorInlineDialog,this.EditorNode),!1===this.#HideBottomActions&&(this.EditorBottomFormViewToggle=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("toggleViewMode"),"data-mode":"html5"},props:{type:"button",innerText:"\u0442\u0435\u043A\u0441\u0442/html5",onpointerup:()=>{let mode=this.EditorBottomFormViewToggle?.getAttribute("data-mode"),newMode="html5"===mode?"text":"html5";this.EditorBottomFormViewToggle?.setAttribute("data-mode",newMode),this.EditorNode.style.display="html5"===newMode?"":"none",this.EditorPreviewText.classList.toggle("-display-none","html5"===newMode),"text"===newMode&&(this.EditorPreviewText.value=this.EditorNode.innerHTML)}}}),this.EditorBottomFormNewP=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("addNewParahraph")},props:{type:"button",innerText:"+ P",onpointerup:()=>{const P=el("p",{props:{innerText:"/"}});this.EditorNode.appendChild(P),P.focus()}}}),this.EditorFullScreenButton=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":this.#t("fullScreen")},props:{type:"button",ariaRoleDescription:"button",innerText:"\uD83D\uDDA5\uFE0F",onpointerup:()=>{this.requestFullscreen()}}}),this.EditorBottomForm?.append(this.EditorBottomFormNewP,this.EditorBottomFormViewToggle,this.EditorFullScreenButton),this.append(this.EditorBottomForm)),this.EditorNode.innerHTML=this.EditorPreviewText.value,this.#SotrageKey=this.getAttribute("data-storage"),console.log("storage key is ",this.#SotrageKey),this.#SotrageKey){let storeValue=window.localStorage.getItem(this.#SotrageKey);console.log("restore from storage",storeValue),storeValue&&(this.EditorNode.innerHTML=storeValue)}this.updateContent(),this.#Connected=!0}}updateContent(){this.value=this.EditorNode.innerHTML,this.EditorPreviewText.value=this.value,this.checkValidity(),this.#SotrageKey&&window.localStorage.setItem(this.#SotrageKey,this.value),this.dispatchEvent(new Event("oninput",{bubbles:!0,cancelable:!1})),this.updatePreviewEl(this.getAttribute("data-preview-el"))}updatePreviewEl(selector){if(selector){const previewEl=window.document.body.querySelector(selector);previewEl&&(previewEl.innerHTML=this.value)}}checkValidity(){let hasErros=!1,errors=[];null!==this.getAttribute("required")&&0===(this.EditorNode.textContent+"").length&&(hasErros=!0,errors.push(this.#t("required"))),+this.getAttribute("minlength")&&(this.EditorNode.textContent+"").length<+this.getAttribute("minlength")&&(hasErros=!0,errors.push(`${this.#t("minlength")} ${this.getAttribute("minlength")}`)),+this.getAttribute("maxlength")&&(this.EditorNode.textContent+"").length>+this.getAttribute("maxlength")&&(hasErros=!0,errors.push(`${this.#t("maxlength")} ${this.getAttribute("maxlength")}`));const filterTags=this.getAttribute("filtertags");if(null!==filterTags){const disallowTags=filterTags.split(",")||[];for(let i=0;i")},classList:["-errors"]});this.append(errosEl)}return!1==hasErros}#checkAutoComplete(){const Selecton=window.getSelection();if(null!==Selecton&&null!==Selecton.anchorNode){const SelectionParentEl=Selecton.anchorNode.parentElement,AutoCompleteForm=this.EditorAutoCompleteForm;if(null!==SelectionParentEl&&""===Selecton.toString()&&"P"===SelectionParentEl.nodeName&&SelectionParentEl.parentElement===this.EditorNode&&SelectionParentEl.innerText.startsWith("/")){const parsedTagName=SelectionParentEl.innerText.replace("/",""),filteredActions=this.EditorTags.filter(action=>action.tag.toLocaleLowerCase().startsWith(parsedTagName.toLocaleLowerCase()));0{AutoCompleteForm?.appendChild(el("button",{classList:["wc-wysiwyg_btn",`-${action.tag}`],attrs:{"data-hint":this.#t(action.tag)||null},props:{type:"submit",innerText:action.tag,value:action.tag}}))}),SelectionParentEl.appendChild(AutoCompleteForm)):(AutoCompleteForm.innerHTML="",AutoCompleteForm.parentElement&&AutoCompleteForm.parentElement.removeChild(AutoCompleteForm))}}}showEditorInlineDialog(){this.EditorInlineDialog.show()}hideEditorInlineDialog(){this.#EditProps&&(this.EditorPropertyForm.style.display="none"),this.EditorInlineDialog.close()}#checkCanClearElement(event){const eventTarget=event.target;eventTarget!==this.EditorNode&&("P"!==eventTarget.nodeName&&"SPAN"!==eventTarget.nodeName?(this.EditorClearFormatBtn.style.display="inline-block",this.EditorClearFormatBtn.innerHTML=`Ⱦ ${eventTarget.nodeName}`,this.EditorClearFormatBtn.onpointerup=()=>{eventTarget.replaceWith(document.createTextNode(eventTarget.textContent))},this.showEditorInlineDialog()):(this.EditorClearFormatBtn.style.display="none",this.EditorClearFormatBtn.onpointerup=null))}#checkEditProps(event){const eventTarget=event.target;if(this.#EditProps[eventTarget.nodeName]){const props=this.#EditProps[eventTarget.nodeName];event.stopPropagation(),this.EditorPropertyForm.style.display="",this.showEditorInlineDialog(),this.EditorPropertyForm.setAttribute("data-tag",eventTarget.nodeName),this.EditorPropertyForm.innerHTML="";for(let i=0;i{const eventInputTarget=eventInput.target;"class"===tagProp&&(eventTarget.className=eventInputTarget.value),(isAttr||"datetime"===tagProp)&&null!==eventInputTarget?eventTarget.setAttribute(tagProp,eventInputTarget.value):eventTarget[tagProp]=eventInputTarget.value,this.updateContent()}}})]}))}this.EditorPropertyForm.append(el("button",{classList:["wc-wysiwyg_btn"],props:{type:"submit",innerHTML:"↳"}}))}}#checkKeyBindings(event){if(event.altKey&&"Space"===event.code){const Selection=window.getSelection();if("Caret"===Selection?.type){const span=el("span");Selection?.anchorNode?.parentElement?.insertAdjacentElement("afterend",span);const textN=document.createTextNode(" ");span.replaceWith(textN);const range=document.createRange();range.selectNodeContents(textN),Selection.removeAllRanges(),Selection.addRange(range)}}if("Escape"===event.code&&this.hideEditorInlineDialog(),"Enter"===event.code&&!1===event.shiftKey){const Selection=window.getSelection();if(["LI","ARTICLE","P"].includes(Selection.anchorNode.parentElement.tagName))return!1;const p=el("p",{props:{innerHTML:` `}});Selection?.anchorNode?.parentElement?.insertAdjacentElement("afterend",p);const range=document.createRange();range.selectNodeContents(p),Selection?.removeAllRanges(),Selection?.addRange(range),event.stopPropagation(),event.preventDefault()}}#makeActionButtons(toEl,actions){for(let i=0;i{event.stopPropagation(),this.#tag(action)}},attrs:{"data-hint":action.hint?action.hint:this.#t(action.tag)||"-"}});toEl.appendChild(button)}}#tag=tag=>{switch(tag.tag){case"audio":this.#Media("audio");break;case"video":this.#Media("video");break;case"details":this.#Details();break;case"img":this.#Image();break;default:"function"==typeof tag.method?tag.method.apply(this,tag):this.#wrapTag(tag,tag.is);}};#Details(){const summaryTitle=prompt("Title","");if(""===summaryTitle)return!1;const mediaEl=el("details",{append:[el("summary",{props:{innerText:summaryTitle}}),el("p",{props:{innerText:"..."}})]});this.EditorNode.append(mediaEl),this.updateContent()}#wrapTag=(tag,is=!1)=>{const listTag=!!["ul","ol"].includes(tag.tag)&&tag.tag,newtag=!1===listTag?tag.tag:"li",Selection=window.getSelection();let defaultOptions={};is&&(defaultOptions.options={is});let tagNode=el(newtag,defaultOptions);if(null!==Selection&&Selection.rangeCount){if(!1!==listTag){const list=el(listTag);tagNode.replaceWith(list),list.append(tagNode)}const range=Selection.getRangeAt(0).cloneRange();range.surroundContents(tagNode),Selection.removeAllRanges(),Selection.addRange(range),0===Selection.toString().length&&(tagNode.innerText=tag),this.updateContent()}};#Media=tagName=>{const mediaSrc=prompt("src","");if(""===mediaSrc)return!1;const mediaEl=el(tagName,{attrs:{controls:!0},props:{src:mediaSrc}});this.EditorNode.append(mediaEl),this.updateContent()};#Image=()=>{const src=prompt("IMG URL"),caption=prompt("IMG caption"),img=new Image;if(src)img.src=src;else return alert("Invalid src");if(caption){const figure=el("figure",{append:[img,el("figcaption",{props:{textContent:caption}})]});img.setAttribute("alt",caption),this.EditorNode.appendChild(figure)}else this.EditorNode.appendChild(img)};#t(key){let lang=this.lang;return t[lang]?t[lang][key]||"-":t.en[key]}static define(name="wc-wysiwyg"){window.customElements.define(name,WCWYSIWYG)}}export default WCWYSIWYG;export const define=WCWYSIWYG.define; \ No newline at end of file diff --git a/package.json b/package.json index e1ed8a1..71a23e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@webislife/wc-wysiwyg", - "version": "0.9.33", + "version": "0.9.34", "description": "WYWSIWYG HTML5 Editor written in ts and designed by web-componennt, support all JS frameworks and browsers", "main": "dist/wc-wysiwyg.js", "type": "module", diff --git a/src/core/el.ts b/src/core/el.ts index 4b9433d..80ff93d 100644 --- a/src/core/el.ts +++ b/src/core/el.ts @@ -2,7 +2,7 @@ * Short for document.createElement * @param tagName element tag name * @param params list of object params for document.createElements - * @returns + * @returns HTMLElement\CustomElement */ export const el = (tagName:keyof HTMLElementTagNameMap|string, {classList, styles, props, attrs, options, append}:{ classList?: string[], @@ -21,8 +21,9 @@ // element.classList if(classList) { for (let i = 0; i < classList.length; i++) { - const styleClass = classList[i]; - element.classList.add(styleClass) + if(classList[i]){ + element.classList.add(classList[i]); + } } } // element.style[prop] @@ -48,8 +49,9 @@ } } //append child elements - if(append.length) { + if(append) { element.append(...append); } + return element; }; \ No newline at end of file