From 8ae8da7c4af1c36bd5a1cbe7c67eae8264e7a32a 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?= <d.strokov@biglion.tech>
Date: Sun, 14 May 2023 01:03:08 +0300
Subject: [PATCH] update to v1 styles

---
 README.md                |   4 +
 dist/wc-wysiwyg.js       |   2 +-
 package.json             |   2 +-
 src/core/el.ts           |   2 +-
 src/sass/wc-wysiwyg.scss | 459 +++++++++++++++++++++++++++++++++------
 src/wc-wysiwyg.ts        | 344 ++++++++++++++++++++---------
 6 files changed, 643 insertions(+), 170 deletions(-)

diff --git a/README.md b/README.md
index 1197aea..0b7e225 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,10 @@ See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list an
 
 ✅ Inserting `<video>` element
 
+- ✅ Suppoer extensions
+    - Color text and background editor
+    -  Emoji table
+
 
 ## Install
 
diff --git a/dist/wc-wysiwyg.js b/dist/wc-wysiwyg.js
index 6a1a7c8..5b87957 100644
--- a/dist/wc-wysiwyg.js
+++ b/dist/wc-wysiwyg.js
@@ -1 +1 @@
-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<selection.toString().length?(this.EditorInlineActionsForm.style.display="",this.EditorPropertyForm&&(this.EditorPropertyForm.style.display="none"),this.showEditorInlineDialog()):this.hideEditorInlineDialog()},this.onfullscreenchange=()=>{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<disallowTags.length;i++){const checkTag=disallowTags[i];if(this.EditorNode.querySelector(checkTag)){hasErros=!0,errors.push(`${this.#t("filtertags")} ${checkTag}`);break}}}this.EditorNode.classList.toggle("-invalid",hasErros);let oldErrors=this.querySelector(".-errors");if(oldErrors&&oldErrors.parentElement?.removeChild(oldErrors),hasErros){const errosEl=el("p",{props:{innerHTML:errors.join("<br>")},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<filteredActions.length?(AutoCompleteForm.innerHTML="",filteredActions.forEach(action=>{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<props.length;i++){const tagProp=props[i],isAttr=-1<tagProp.indexOf("data-")||"class"===tagProp;this.EditorPropertyForm.append(el("label",{props:{innerText:`${tagProp}=`},append:[el("input",{attrs:{placeholder:tagProp},classList:["wc-wysiwyg_inp"],props:{value:isAttr?eventTarget.getAttribute(tagProp):eventTarget[tagProp]||"",oninput:eventInput=>{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:"&#8627;"}}))}}#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("&nbsp");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:`&nbsp;`}});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<actions.length;i++){const action=actions[i],button=el("button",{classList:["wc-wysiwyg_btn",`-${action.tag}`],props:{tabIndex:-1,type:"button",textContent:action.is?`${action.tag} is=${action.is}`:action.tag,onpointerup:event=>{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
+import{t}from"./core/translates.js";import{el}from"./core/el.js";const _t=(key,lang=navigator.language)=>t[lang]?t[lang][key]||"-":t.en[key],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;EditorCustomTagsForm;EditorInlineActions;EditorInlineDialog;EditorInlineActionsForm;EditorPropertyForm;EditorClearFormatBtn;EditorAutoCompleteForm;EditorBottomForm;EditorBottomFormNewP;EditorBottomFormViewToggle;EditorPreviewText;EditorTagsMethods;EditorAllowTags;EditorFullScreenButton;lang="ru";value="";static observedAttributes=["value"];#EditProps;#Autocomplete;#Extensions;#SotrageKey;#HideBottomActions;#Connected=!1;constructor(){super(),this.#checkExtensions(),this.classList.add("wc-wysiwyg"),this.onpointerup=()=>{const editorSelection=this.getSelection();null!==editorSelection.selection&&null!==editorSelection.selection.text?(this.EditorInlineActionsForm.style.display="",this.EditorPropertyForm&&(this.EditorPropertyForm.style.display="none"),this.showEditorInlineDialog()):this.hideEditorInlineDialog()},this.onfullscreenchange=()=>{const isFullScreen=document.fullscreenElement;this.classList.toggle("-fullscreen",null!==isFullScreen)}}connectedCallback(){if(!1===this.#Connected){const asyncExtensions=this.getAttribute("data-async-extensions")||!1;if(!1!==asyncExtensions){const asyncExtensionsPaths=asyncExtensions.split(",");console.log("need load",asyncExtensionsPaths),asyncExtensionsPaths.forEach(extensionPath=>{import(extensionPath).then(esm=>{console.log("asyncExtensionsPaths loaded",esm);const Extension=new esm.default(this);"function"==typeof Extension.connectedCallback&&Extension.connectedCallback(),this.#Extensions instanceof Array?this.#Extensions.push(Extension):this.#Extensions=[Extension]})})}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.EditorClearFormatBtn=el("button",{classList:["wc-wysiwyg_btn","-clear"],attrs:{"data-hint":_t("clearFormat")},props:{innerHTML:"\u023E"}}),this.EditorActionsSection=el("section",{classList:["wc-wysiwyg_ec"]}),this.#makeActionButtons(this.EditorActionsSection,this.EditorTags),this.EditorActionsSection.append(this.EditorClearFormatBtn),this.#EditProps&&(this.EditorPropertyForm=el("form",{styles:{display:"none"},classList:["wc-wysiwyg_pf"],props:{onsubmit:event=>{event.preventDefault(),this.EditorPropertyForm.style.display="none"},onpointerup:event=>event.stopPropagation()}}),this.EditorActionsSection.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.EditorActionsSection.prepend(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)},onpaste:()=>{}}}),this.append(this.EditorActionsSection,this.EditorNode),!1===this.#HideBottomActions&&(this.EditorBottomFormViewToggle=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":_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":_t("addNewParahraph")},props:{type:"button",innerText:"+ \u2761",onpointerup:()=>{const P=el("p",{props:{innerText:"/"}});this.EditorNode.appendChild(P),P.focus()}}}),this.EditorFullScreenButton=el("button",{classList:["wc-wysiwyg_btn"],attrs:{"data-hint":_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"),this.#SotrageKey){let storeValue=window.localStorage.getItem(this.#SotrageKey);storeValue&&(this.EditorNode.innerHTML=storeValue)}this.#Extensions instanceof Array&&this.#Extensions.forEach(extension=>"function"==typeof extension.connectedCallback&&extension.connectedCallback(this)),this.updateContent(),this.#Connected=!0}}updateContent(){this.value=this.EditorNode.innerHTML,this.EditorPreviewText.value=this.value,this.checkValidity(),this.dispatchEvent(new Event("oninput",{bubbles:!0,cancelable:!1})),this.updatePreviewEl(this.getAttribute("data-preview-el")),this.#SotrageKey&&window.localStorage.setItem(this.#SotrageKey,this.value)}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(_t("required"))),+this.getAttribute("minlength")&&(this.EditorNode.textContent+"").length<+this.getAttribute("minlength")&&(hasErros=!0,errors.push(`${_t("minlength")} ${this.getAttribute("minlength")}`)),+this.getAttribute("maxlength")&&(this.EditorNode.textContent+"").length>+this.getAttribute("maxlength")&&(hasErros=!0,errors.push(`${_t("maxlength")} ${this.getAttribute("maxlength")}`));const filterTags=this.getAttribute("filtertags");if(null!==filterTags){const disallowTags=filterTags.split(",")||[];for(let i=0;i<disallowTags.length;i++){const checkTag=disallowTags[i];if(this.EditorNode.querySelector(checkTag)){hasErros=!0,errors.push(`${_t("filtertags")} ${checkTag}`);break}}}this.EditorNode.classList.toggle("-invalid",hasErros);let oldErrors=this.querySelector(".-errors");if(oldErrors&&oldErrors.parentElement?.removeChild(oldErrors),hasErros){const errosEl=el("p",{props:{innerHTML:errors.join("<br>")},classList:["-errors"]});this.append(errosEl)}return!1==hasErros}#checkAutoComplete(){const editorSelection=this.getSelection();if(null!==editorSelection.selection&&null!==editorSelection.selection.anchorNode){const SelectionParentEl=editorSelection.selection.anchorNode.parentElement,AutoCompleteForm=this.EditorAutoCompleteForm;if(null!==SelectionParentEl&&null===editorSelection.text&&"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<filteredActions.length?(AutoCompleteForm.innerHTML="",filteredActions.forEach(action=>{AutoCompleteForm?.appendChild(el("button",{classList:["wc-wysiwyg_btn",`-${action.tag}`],attrs:{"data-hint":_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(){const editorSelection=this.getSelection();if(null!==editorSelection.selection){const range=editorSelection.selection.getRangeAt(0).cloneRange();this.EditorInlineDialog.show(),editorSelection.selection.removeAllRanges(),editorSelection.selection.addRange(range)}else this.EditorInlineDialog.show()}hideEditorInlineDialog(){this.#EditProps&&(this.EditorPropertyForm.style.display="none"),this.EditorInlineDialog.close()}#checkCanClearElement(event){const eventTarget=event.target,clearBtn=this.EditorClearFormatBtn;eventTarget!==this.EditorNode&&("P"!==eventTarget.nodeName&&"SPAN"!==eventTarget.nodeName?(clearBtn.style.display="inline-block",clearBtn.innerHTML=`Ⱦ ${eventTarget.nodeName}`,clearBtn.onpointerup=()=>{eventTarget.replaceWith(document.createTextNode(eventTarget.textContent))},this.showEditorInlineDialog()):(clearBtn.style.display="none",clearBtn.onpointerup=null))}#checkEditProps(event){const eventTarget=event.target;if(this.#EditProps[eventTarget.nodeName]){const props=this.#EditProps[eventTarget.nodeName];event.stopPropagation(),this.dispatchEvent(new CustomEvent("editprops",{detail:{eventTarget}})),this.EditorPropertyForm.style.display="",this.EditorPropertyForm.style.display="block",this.EditorPropertyForm.setAttribute("data-tag",eventTarget.nodeName),this.EditorPropertyForm.innerHTML="";for(let i=0;i<props.length;i++){const tagProp=props[i],isAttr=-1<tagProp.indexOf("data-")||"class"===tagProp;this.EditorPropertyForm.append(el("label",{props:{innerText:`${tagProp}=`},append:[el("input",{attrs:{placeholder:tagProp},classList:["wc-wysiwyg_inp"],props:{value:isAttr?eventTarget.getAttribute(tagProp):eventTarget[tagProp]||"",oninput:eventInput=>{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:"&#8627;"}}))}}#checkKeyBindings(event){if(event.altKey&&"Space"===event.code){const editorSelection=this.getSelection(),Selection=editorSelection.selection;if(null!==Selection&&"Caret"===Selection.type){const span=el("span");Selection.anchorNode?.parentElement?.insertAdjacentElement("afterend",span);const textN=document.createTextNode("&nbsp");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=this.getSelection().selection;if(["LI","ARTICLE","P"].includes(Selection.anchorNode.parentElement.tagName))return!1;const p=el("p",{props:{innerHTML:`&nbsp;`}});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<actions.length;i++){const action=actions[i],button=el("button",{classList:["wc-wysiwyg_btn",`-${action.tag}`],props:{tabIndex:0,type:"button",textContent:action.is?`${action.tag} is=${action.is}`:action.tag,onpointerup:event=>{event.stopPropagation(),this.#tag(action)}},attrs:{"data-hint":action.hint?action.hint:_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=this.getSelection().selection;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(),this.#checkEditProps({target:tagNode,stopPropagation:()=>!1})}};#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)};#checkExtensions(){const _WCWYSIWYG=window._WCWYSIWYG;if(console.log("#checkExtensions",_WCWYSIWYG),void 0!==_WCWYSIWYG&&0<_WCWYSIWYG.extensions.length){this.#Extensions=[];for(let i=0;i<_WCWYSIWYG.extensions.length;i++){const Extension=new _WCWYSIWYG.extensions[i](this);this.#Extensions.push(Extension)}}}getSelection(){const windowSelection=window.getSelection(),editorSelection={selection:null,element:null,text:null,node:null};if(null!==windowSelection){editorSelection.selection=windowSelection,editorSelection.node=windowSelection.anchorNode,editorSelection.element=windowSelection.anchorNode.parentElement;let selectionText=windowSelection.toString();0<selectionText.length&&(editorSelection.text=selectionText)}return console.log("wc selection",editorSelection),editorSelection}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 71a23e1..87a94fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@webislife/wc-wysiwyg",
-    "version": "0.9.34",
+    "version": "1.0.1",
     "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 80ff93d..6930e42 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 HTMLElement\CustomElement
+ * @returns HTML\CUSTOMElement
  */
  export const el = (tagName:keyof HTMLElementTagNameMap|string, {classList, styles, props, attrs, options, append}:{
     classList?: string[],
diff --git a/src/sass/wc-wysiwyg.scss b/src/sass/wc-wysiwyg.scss
index dedbf5e..a0839b4 100644
--- a/src/sass/wc-wysiwyg.scss
+++ b/src/sass/wc-wysiwyg.scss
@@ -1,11 +1,142 @@
+:root {
+    // orange
+    --color-orange-50: #FFF8E1;
+    --color-orange-100: #FFF8E1;
+    --color-orange-500: #FF9800;
+    --color-orange-700: #F57C00;
+    
+    --color-green-50: #E8F5E9;
+    --color-green-100: #C8E6C9;
+    --color-green-300: #AED581;
+    --color-green-500: #4CAF50;
+    --color-green-900: #1B5E20;
+    
+    --color-red-50: #FFEBEE;
+    --color-red-100: #FFCDD2;
+    --color-red-200: #FF8A65;
+    --color-red-500: #F44336;
+    --color-red-900: #B71C1C;
+    
+    --color-amber-50: #FFF8E1;
+    --color-amber-100: #FFE0B2;
+    --color-amber-900: #FF6F00;
+    
+    --color-indigo-100: #C5CAE9;
+    
+    // orange
+    --color-deep-orange-50: #FBE9E7;
+    --color-deep-orange-900: #BF360C;
+    
+    // lime
+    --color-lime-50: #F9FBE7;
+    
+    // grey
+    --color-grey-50: #FAFAFA;
+    --color-grey-100: #F5F5F5;
+    --color-grey-200: #EEEEEE;
+    --color-grey-300: #E0E0E0;
+    --color-grey-400: #BDBDBD;
+    --color-grey-500: #9E9E9E;
+    --color-grey-600: #757575;
+    --color-grey-700: #757575;
+    --color-grey-800: #424242;
+    --color-grey-900: #212121;
+    
+    // blue
+    --color-blue-50: #E3F2FD;
+    --color-blue-100: #BBDEFB;
+    --color-blue-200: #90CAF9;
+    --color-blue-300: #64B5F6;
+    --color-blue-400: #42A5F5;
+    --color-blue-500: #2196F3;
+    --color-blue-800: #1565C0;
+    --color-blue-900: #0D47A1;
+    
+    // blue-gray
+    --color-blue-gray-50: #ECEFF1;
+    --color-blue-gray-100: #CFD8DC;
+    --color-blue-gray-200: #B0BEC5;
+    --color-blue-gray-300: #90A4AE;
+    --color-blue-gray-400: #78909C;
+    --color-blue-gray-700: #455A64;
+    --color-blue-gray-800: #37474F;
+    --color-blue-gray-900: #263238;
+    // blue-light
+    --color-blue-light-50: #E1F5FE;
+    --color-blue-light-100: #B3E5FC;
 
+    --wc-wysiwyg-light: #fff;
+    --wc-wysiwyg-dark: #37474F;
+    }
+    wc-wysiwyg.-word .wc-wysiwyg_pf > label {
+        background-color: var(--color-blue-500);
+    }
+    wc-wysiwyg.-word .wc-wysiwyg_pf {
+        background-color: var(--color-blue-400);
+        border-radius: 5px;
+        padding: 5px;
+    }
+   
+    wc-wysiwyg.-word .wc-wysiwyg_content {
+        border-radius: 5px;
+    }
+    wc-wysiwyg.-word .wc-wysiwyg_bt {
+        background-color: var(--color-blue-300);
+        padding:5px;
+        border-radius: 3px;
+    }
+    wc-wysiwyg.-word .wc-wysiwyg_ec {
+        background-color: var(--wc-wysiwyg-light);
+        padding:5px;
+        border-radius: 3px;
+        margin: 5px 0;
+        border: 0;
+    }
 .wc-wysiwyg {
-    background-color: #eee;
+    background-color: var(--wc-wysiwyg-light);
     font-family: Arial, Helvetica, sans-serif;
     position: relative;
-    border: 1px solid var(--color-blue-gray-400);
+    padding:5px;
     border-radius: 3px;
     display: block;
+    &_dialog {
+        border-radius: 10px;
+        border:none;
+        outline: none;
+        &::backdrop {
+            background: rgba(0, 0, 0, 0.8);
+        }
+        &.-modal {
+            min-width: 90vw;
+            min-height: 90vh;
+            max-height: 90vh;
+            max-height: 90vh;
+        }
+        &.-colors {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            min-width: 0;
+            min-height: 0;
+            max-width: 300px;
+            &:not([open]) {
+                display: none;
+            }
+            & fieldset.-palette {
+                padding: 0;
+                display: flex;
+                flex: 1;
+                margin: 0;
+                border: 0;
+                outline: 0;
+                max-width: 20px;
+                & > button {
+                    flex: 1;
+                    margin: 2px;
+                }
+            }
+        }
+    }
     &_bt {
         display: block;
         padding:5px;
@@ -27,31 +158,23 @@
     
     &_ce {
         position: relative;
-        margin: 0;
-        padding: 7px;
-        border: 1px solid var(--color-blue-500);
-        border-radius: 3px;
-        background-color: var(--color-blue-50);
-    }
-    &_ce:before {
-        content: 'HTML5 custom-elements';
-        color: #fff;
-        background-color: var(--color-blue-500);
-        position: absolute;
-        font-size: 10px;
-        line-height: 0.6em;
-        padding: 3px;
-        border-radius: 3px;
-        transform: translate(0, -50%);
-        top:0;
-        left:0;
-    }
-    &_ce > button {
-        border-color: var(--color-blue-500);
-        background-color: var(--color-blue-100);
-        &:hover {
-            border-color: var(--color-blue-900);
-            background-color: var(--color-blue-200);
+        margin-bottom: 5px;
+        padding: 5px;
+        border-radius: 5px;
+        border: none;
+        background: rgba(0,0,0,0.2);
+        &:before {
+            content: 'HTML5 custom-elements';
+            color: #fff;
+            background-color: var(--color-blue-500);
+            position: absolute;
+            font-size: 10px;
+            line-height: 0.6em;
+            padding: 3px;
+            border-radius: 3px;
+            transform: translate(0, -50%);
+            top:0;
+            left:0;
         }
     }
     /* preview */
@@ -62,7 +185,7 @@
         min-height: 200px;
     }
     &_content {
-        padding:5px 5px 2em 5px;
+        padding:0.5em;
         border:1px solid #ccc;
         background: #fff;
         overflow-x: hidden;
@@ -72,7 +195,7 @@
         box-sizing: border-box;
         margin: 0 auto;
         box-sizing: border-box;
-        display: inline-block;
+        display: block;
         resize: vertical;
         & .-selected {
             background-color: var(--color-blue-100);
@@ -86,52 +209,237 @@
         }
     }
     &_ec {
-        background: var(--color-blue-gray-100);
-        padding: 0.5em 0.25em 0.25em 0.25em;
-        border-radius: 3px;
-        border: 1px solid;
-        border-color: var(--color-blue-gray-100);
-    }
-    &_ec:focus-within  {
-        border-color: var(--color-blue-500);
+        background: #2b393f;
+        padding: 5px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        top:0;
+        position: sticky;
+        z-index: 2;
     }
     &_btn  {
-        background: var(--color-blue-gray-50);
-        outline: none;
-        padding: 3px 6px;
-        border-radius: 3px;
-        border: 1px solid var(--color-blue-gray-200);
-        border-bottom: 3px solid var(--color-blue-gray-200);
-        color: #333;
-        min-width: 0px;
-        text-align: center;
-        box-sizing: border-box;
-        display: inline-block;
-        text-transform: uppercase;
-        font-size: 0.85em;
-        font-weight: 400;
-        line-height: 1;
-        white-space: nowrap;
-        margin-right: 5px;
+        min-width: 30px;
+        line-height: 20px;
+        background-color: var(--wc-wysiwyg-light);
+        box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
+        border:0;
+        border-radius: 5px;
+        padding:2px 5px;
+        margin-right:5px;
         user-select: none;
         cursor: pointer;
         &:hover {
-            background: var(--color-blue-gray-100);
-            border-color: var(--color-blue-gray-300);
+            box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
         }
         &:focus  {
-            border-color: var(--color-blue-500);
+            box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9);
         }
         &:active  {
-            padding-top:2px;
-            background: var(--color-blue-gray-100);
-            border-color: var(--color-blue-gray-700);
-            border-bottom: 1px solid;
+            box-shadow: 0 2px 5px rgba(1, 181, 52, 0.9);
         }
         &.-clear {
             text-decoration: line-through;
             font-weight: bold;
         }
+        &.-emoji {
+            border:none;
+            font-size: 20px;
+            min-width: 32px;
+            min-height: 32px;
+            line-height: 32px;
+            box-sizing: border-box;
+            padding:0;
+            border-radius: 1em;
+            margin: 2px;
+        }
+        &.-color {
+            min-width: 20px;
+            min-height: 20px;
+            border-color: rgba(0,0,0,0.2);
+        }
+        &.-prevcolor {
+            // background-color: transparent;
+            // border: 1px solid #ccc;
+            &::before {
+                display: inline-block;
+                background-color: var(--colorer);
+                width: 12px;
+                content: '';
+                height: 12px;
+                margin-right: 5px;
+                border-radius: 2px;
+                box-sizing: border-box;
+                border: 1px solid rgba(0,0,0,0.5);
+            }
+        }
+        &.-b {
+            font-weight: bold;
+        }
+        &.-i {
+            font-style: italic;
+        }
+        &.-u {
+            text-decoration: underline;
+        }
+        &.-s {
+            text-decoration: line-through;
+        }
+        &.-sub {
+            vertical-align: sub;
+            font-size: 0.5em;
+        }
+        &.-del::before {
+            content: '- ';
+            font-weight: 400;
+        }
+        &.-h1::before {
+            content: '§ ';
+            font-weight: 400;
+        }
+        &.-del {
+            color: var(--color-red-900);
+            border-bottom: 1px solid var(--color-red-900);
+            background-color: var(--color-red-50);
+        }
+        &.-a::before {
+            content: "🔗 ";
+        }
+        &.-ul::before {
+            content: "● ";
+        }
+        &.-ol::before {
+            content: "1. ";
+        }
+        &.-var::before {
+            content: "∫ ";
+        }
+        &.-var {
+            font-weight: bold;
+            font-style: italic;
+        }
+        &.-details:before {
+            content: "&rarr;";
+        }
+        &.-details {
+            text-decoration: dotted;
+            border: 1px dashed var(--color-blue-gray-200);
+        }
+        &.-pre::before {
+            content: "...";
+            display: inline-block;
+            background-color: var(--color-blue-gray-100);
+            color: var(--color-blue-grey-900);
+            border-radius: 2px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            padding: 0 3px;
+            text-transform: uppercase;
+            font-size: 0.8em;
+            line-height: 10px;
+        }
+        &.-pre {
+            background-color: var(--color-blue-gray-50);
+            color: var(--color-blue-grey-900);
+            padding-left: 15px;
+        }
+        &.-ins::before {
+            content: '+ ';
+            font-weight: 400;
+        }
+        &.-ins {
+            color: var(--color-green-900);
+            border-bottom: 1px solid var(--color-green-900);
+            background-color: var(--color-green-50);
+        }
+        &.-sup {
+            vertical-align: super;
+            font-size: 0.5em;
+        }
+        &.-q:before {
+            content: open-quote;
+        }
+        &.-samp:before {
+            content: '> ';
+            color: var(--color-blue-gray-300);
+            font-family: sans-serif;
+        }
+        &.-samp {
+            background-color: var(--color-blue-gray-50);
+            border-bottom: 1px solid var(--color-blue-gray-300);
+        }
+        &.-blockquote::before {
+            content: '❝';
+            font-size: 1em;
+            color: #F57F17;
+            display: block;
+            position: absolute;
+            top: 0px;
+            left: 4px;
+            user-select: none;
+        }
+        &.-blockquote {
+            background-color: var(--color-amber-50);
+            color: #412207;
+            padding-left: 15px;
+            border-left: 2px solid #F57F17;
+        }
+        &.-time:before {
+            content: "📅 ";
+        }
+        &.-img:before {
+            content: "🌅 ";
+        }
+        &.-video:before {
+            content: "🎦 ";
+        }
+        &.-audio:before {
+            content: "🎵 ";
+        }
+        &.-details:before {
+            content: "▸ ";
+        }
+        &.-code {
+            content: "<code>";
+            background-color: var(--color-blue-gray-50);
+            color: var(--color-blue-grey-900);
+        }
+        &.-strong {
+            background-color: var(--color-deep-orange-50);
+            color: var(--color-deep-orange-900);
+            font-weight: 400;
+        }
+        &.-abbr {
+            color: #1A237E;
+        }
+        &.-q {
+            color:#000;
+            background-color: #FFF8E1;
+        }
+        &.-small {
+            font-size: 0.5em;
+        }
+        &.-dfn {
+            color: var(--color-blue-900);
+            font-style: italic;
+        }
+        &.-mark {
+            background-color: var(--color-lime-100);
+            color: var(--color-lime-900);
+            &:hover {
+                background-color: var(--color-lime-200);
+                color: var(--color-lime-900);
+            }
+        }
+        &.-kbd {
+            background: var(--color-blue-gray-50);
+            outline: none;
+            padding: 3px 6px;
+            border-radius: 3px;
+            border: 1px solid var(--color-blue-gray-200);
+            border-bottom: 3px solid var(--color-blue-gray-200);
+            color: #333;
+        }
     }
     &_ia {
         display: flex;
@@ -148,11 +456,10 @@
         position: fixed;
         bottom:0;
         width: 100%;
-        background: var(--color-blue-gray-50);
-        padding:3px;
-        border-radius: 3px;
-        border: 1px solid var(--color-blue-gray-300);
         box-sizing: border-box;
+        background-color: var(--wc-wysiwyg-light);
+        border-radius: 5px;
+        padding: 5px;
         & > form {
             &:nth-child(1n+2) {
                 margin-top: 10px;
@@ -184,7 +491,8 @@
             background-color: var(--color-blue-200);
             color: var(--color-blue-gray-800);
             padding: 3px 3px 3px 5px;
-            display: flex;
+            margin: 5px 0;
+            display: inline-flex;
             align-items: center;
             border-radius: 6px;
             margin-right: 5px;
@@ -239,4 +547,23 @@
     & .-display-none {
         display: none;
     }
+}
+@media (prefers-color-scheme: dark) { 
+.wc-wysiwyg {
+    background-color: var(--wc-wysiwyg-dark);
+    &_di {
+        background-color: var(--wc-wysiwyg-dark);
+    }
+    &_bt {
+        background-color: var(--wc-wysiwyg-dark);
+    }
+    &_btn {
+        background-color: rgba(0,0,0,0.5);
+        color: #ccc;
+        &:hover {
+            background-color: rgba(0,0,0,0.5);
+            color: #ccc;
+        }
+    }
+}
 }
\ No newline at end of file
diff --git a/src/wc-wysiwyg.ts b/src/wc-wysiwyg.ts
index 98d4593..fadd081 100644
--- a/src/wc-wysiwyg.ts
+++ b/src/wc-wysiwyg.ts
@@ -1,18 +1,14 @@
-import {t} from './core/translates.js';
+import { t } from './core/translates.js';
 import { el } from "./core/el.js";
-
-interface WCWYSIWYGTag {
-    tag:string
-    method?:Function,
-    hint?:string,
-    is?: string,
-}
-interface WCWYSIWYGActions {
-    wrapTag: Function,
-    insertImageBlock: Function,
-    insertAudio: Function,
-    insertVideo: Function,
-}
+import test from './extensions/colorerDialog.js';
+import test2 from './extensions/presetList.js';
+/**
+ * Translate function
+ * @param key:string phrase key
+ * @param lang:string language key defaul navigatol.language
+ * @returns 
+ */
+const _t = (key:string, lang = navigator.language):string => t[lang] ? t[lang][key] || "-" : t["en"][key];
 
 //All semantic html5 known editor tags
 const allTags = [
@@ -52,13 +48,30 @@ const allTags = [
     { tag: 'blockquote'},
     { tag: 'details'},
 ] as WCWYSIWYGTag[];
-
+/**
+ * Base class for WCWYSIWYG web component
+ */
 class WCWYSIWYG extends HTMLElement {
+    /**
+     * Tags included to action bar in editor
+     */
     public EditorTags:WCWYSIWYGTag[]
+    /**
+     * Custom tags included to action bar in editor
+     */
     public EditorCustomTags:WCWYSIWYGTag[]
-    //Content editable wc-editor element
+    /**
+     * Main ContentEditable element
+     */
     public EditorNode:HTMLElement
+    /**
+     * Editor actions block elements with EditorTags buttons
+     */
     public EditorActionsSection:HTMLElement
+    /**
+     * Custom web-components buttons <fieldset>
+     */
+    public EditorCustomTagsForm?:HTMLElement
     //Inline edites
     public EditorInlineActions:any[]
     public EditorInlineDialog:HTMLDialogElement
@@ -66,7 +79,7 @@ class WCWYSIWYG extends HTMLElement {
     //Editor props
     public EditorPropertyForm?:HTMLElement
     //Clear btn
-    public EditorClearFormatBtn:HTMLElement
+    public EditorClearFormatBtn:HTMLButtonElement
     //Autocomplete area
     public EditorAutoCompleteForm?:HTMLElement
     //Bottom actions
@@ -75,7 +88,6 @@ class WCWYSIWYG extends HTMLElement {
     public EditorBottomFormViewToggle?:HTMLElement
     
     public EditorPreviewText:HTMLTextAreaElement
-    public EditorCustomTagsForm?:HTMLElement
     public EditorTagsMethods:WCWYSIWYGActions
     public EditorAllowTags:string[]
     public EditorFullScreenButton?:HTMLElement
@@ -86,19 +98,21 @@ class WCWYSIWYG extends HTMLElement {
 
     #EditProps:boolean|object
     #Autocomplete:boolean
+    #Extensions?: any[]
     #SotrageKey:string|null
     #HideBottomActions:boolean
     #Connected:boolean = false;
     
     constructor() {
         super();
+        this.#checkExtensions();
         this.classList.add('wc-wysiwyg');
 
         //Listen root element events
         this.onpointerup = (event) => {
-            const selection = window.getSelection();
+            const editorSelection = this.getSelection();
             //if check exist selection string
-            if(selection !== null && selection.toString().length > 0) {
+            if(editorSelection.selection !== null && editorSelection.selection.text !== null) {
                 this.EditorInlineActionsForm.style.display = '';
                 if(this.EditorPropertyForm){
                     this.EditorPropertyForm.style.display = 'none';
@@ -116,6 +130,25 @@ class WCWYSIWYG extends HTMLElement {
 
     connectedCallback() {
         if(this.#Connected === false) {
+            const asyncExtensions = this.getAttribute('data-async-extensions') || false;
+            if(asyncExtensions !== false) {
+                const asyncExtensionsPaths = asyncExtensions.split(',');
+                console.log('need load', asyncExtensionsPaths);
+                asyncExtensionsPaths.forEach((extensionPath:string) => {
+                    import(extensionPath).then(esm => {
+                        console.log('asyncExtensionsPaths loaded', esm);
+                        const Extension = new esm.default(this);
+                        if(typeof Extension.connectedCallback === 'function') {
+                            Extension.connectedCallback();
+                        }
+                        if(this.#Extensions instanceof Array) {
+                            this.#Extensions.push(Extension);
+                        } else {
+                            this.#Extensions = [Extension];
+                        }
+                    });
+                })
+            }
             //Check Tags
             const allowTags = this.getAttribute('data-allow-tags') || allTags.map(t => t.tag).join(',');
            
@@ -138,30 +171,39 @@ class WCWYSIWYG extends HTMLElement {
             //allow inline without ['video','audio','img']
             this.EditorInlineActions = this.EditorTags.filter(action =>  ['video','audio','img'].includes(action.tag) === false);
             
-            this.EditorActionsSection = el('section', { classList: ['wc-wysiwyg_ec'] });
             //Clear format button
             this.EditorClearFormatBtn = el('button', {
                 classList: ['wc-wysiwyg_btn', '-clear'],
                 attrs: {
-                    'data-hint': this.#t('clearFormat'),
+                    'data-hint': _t('clearFormat'),
                 },
                 props: {
                     innerHTML:'Ⱦ',
                 },
             });
-            //Inline selection actions panel
-            this.EditorInlineActionsForm = el('form');
-            this.EditorInlineDialog = el('dialog', {
-                classList: ['wc-wysiwyg_di'],
-                append: [this.EditorInlineActionsForm, this.EditorClearFormatBtn],
-                props: {
-                    //prevent submit
-                    onsubmit: event => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                    },
-                }
+            //Top editor actions sections
+            this.EditorActionsSection = el('section', { 
+                classList: ['wc-wysiwyg_ec'],
             });
+            this.#makeActionButtons(this.EditorActionsSection, this.EditorTags);
+            this.EditorActionsSection.append(this.EditorClearFormatBtn);
+
+            //Inline selection actions panel
+            // this.EditorInlineActionsForm = el('form');
+            // this.EditorInlineDialog = el('dialog', {
+            //     classList: ['wc-wysiwyg_di'],
+            //     append: [this.EditorInlineActionsForm],
+            //     props: {
+            //         //prevent submit
+            //         onsubmit: event => {
+            //             event.preventDefault();
+            //             event.stopPropagation();
+            //         },
+            //     },
+            //     attrs: {
+            //         tabIndex: -1,
+            //     }
+            // });
 
             //Edit props
             if(this.#EditProps) {
@@ -172,12 +214,12 @@ class WCWYSIWYG extends HTMLElement {
                     props: {
                         onsubmit: event => {
                             event.preventDefault();
-                            this.hideEditorInlineDialog();
+                            this.EditorPropertyForm.style.display = 'none';
                         },
                         onpointerup: event => event.stopPropagation(),
                     }
                 });
-                this.EditorInlineDialog.append(this.EditorPropertyForm);
+                this.EditorActionsSection.append(this.EditorPropertyForm);
             }
 
             //Autocomplete form
@@ -210,11 +252,11 @@ class WCWYSIWYG extends HTMLElement {
                 //Custom panel tags 
                 this.EditorCustomTagsForm = el('fieldset', {
                     classList: ['wc-wysiwyg_ce'],
-                });
+                }) as HTMLElement;
                 //Make custom actions buttons panel
-                this.#makeActionButtons(this.EditorCustomTagsForm as HTMLElement, this.EditorCustomTags);
+                this.#makeActionButtons(this.EditorCustomTagsForm, this.EditorCustomTags);
 
-                this.appendChild(this.EditorCustomTagsForm as HTMLElement);
+                this.EditorActionsSection.prepend(this.EditorCustomTagsForm);
             }
 
             //Node editable
@@ -238,19 +280,32 @@ class WCWYSIWYG extends HTMLElement {
                     },
                     //Check hot keys is pressed
                     onkeydown: event => {
-                        this.#checkKeyBindings(event)
+                        this.#checkKeyBindings(event);
+                    },
+                    onpaste: (event:ClipboardEvent) => {
+                        // if(event.type === 'paste') {
+                        //     window.navigator.clipboard.readText().then(text => {
+                        //         const target = event.target as HTMLElement;
+                        //         //Check isnert html symbol
+                        //         if(text.startsWith('&#') === false) {
+                        //             if(target.tagName === 'BR') {
+                        //                 target.insertAdjacentText('afterend',text);
+                        //             }
+                        //             this.updateContent();
+                        //             event.preventDefault();
+                        //             event.stopPropagation();
+
+                        //             return false;
+                        //         } 
+                        //     });
+                        // }
                     }
                 },
             });
-
-            //Make action buttons
-            this.#makeActionButtons(this.EditorActionsSection, this.EditorTags);
-            this.#makeActionButtons(this.EditorInlineActionsForm, this.EditorInlineActions);
             
             //Inser wc-editor after textarea node
             this.append(
                 this.EditorActionsSection,
-                this.EditorInlineDialog,
                 this.EditorNode,
             );
 
@@ -259,7 +314,7 @@ class WCWYSIWYG extends HTMLElement {
                 this.EditorBottomFormViewToggle = el('button', {
                     classList: ['wc-wysiwyg_btn'],
                     attrs: {
-                        'data-hint': this.#t('toggleViewMode'),
+                        'data-hint': _t('toggleViewMode'),
                         'data-mode': 'html5',
                     },
                     props: {
@@ -281,11 +336,11 @@ class WCWYSIWYG extends HTMLElement {
                 this.EditorBottomFormNewP = el('button', {
                     classList: ['wc-wysiwyg_btn'],
                     attrs: {
-                        'data-hint': this.#t('addNewParahraph'),
+                        'data-hint': _t('addNewParahraph'),
                     },
                     props: {
                         type:'button',
-                        innerText: '+ P',
+                        innerText: '+ ❡',
                         onpointerup: event => {
                             const P = el('p', {props: {innerText: '/'}});
                             this.EditorNode.appendChild(P);
@@ -297,7 +352,7 @@ class WCWYSIWYG extends HTMLElement {
                 this.EditorFullScreenButton = el('button', {
                     classList: ['wc-wysiwyg_btn'],
                     attrs: {
-                        'data-hint': this.#t('fullScreen'),
+                        'data-hint': _t('fullScreen'),
                     },
                     props: {
                         type: "button",
@@ -319,14 +374,16 @@ class WCWYSIWYG extends HTMLElement {
             this.EditorNode.innerHTML = this.EditorPreviewText.value;
             //Check local storage key
             this.#SotrageKey = this.getAttribute('data-storage');
-            console.log('storage key is ', this.#SotrageKey);
             if(this.#SotrageKey) {
                 let storeValue = window.localStorage.getItem(this.#SotrageKey);
-                console.log('restore from storage', storeValue);
                 if(storeValue) {
                     this.EditorNode.innerHTML = storeValue;
                 }
             }
+            //Check and call connectedCallback in extensions
+            if(this.#Extensions instanceof Array) {
+                this.#Extensions.forEach(extension => typeof extension.connectedCallback === 'function' ? extension.connectedCallback(this) : false);
+            }
             this.updateContent();
 
             this.#Connected = true;
@@ -337,14 +394,20 @@ class WCWYSIWYG extends HTMLElement {
      * Update content value and update behaviors
      */
     updateContent() {
+        // Update the value of the editor node to the current innerHTML
         this.value = this.EditorNode.innerHTML;
+        // Update the value of the EditorPreviewText to the current value
         this.EditorPreviewText.value = this.value;
+        // Check the validity of the current value
         this.checkValidity();
+        // Dispatch an event to indicate that the input has been changed
+        this.dispatchEvent(new Event('oninput', { bubbles: true, cancelable: false }));
+        // Update the preview element with the data attribute 'data-preview-el'
+        this.updatePreviewEl(this.getAttribute('data-preview-el'));
+        //Update storage value if StorageKey exits
         if(this.#SotrageKey) {
             window.localStorage.setItem(this.#SotrageKey, this.value);
         }
-        this.dispatchEvent(new Event('oninput', { bubbles: true, cancelable: false }));
-        this.updatePreviewEl(this.getAttribute('data-preview-el'));
     }
 
     /**
@@ -372,19 +435,19 @@ class WCWYSIWYG extends HTMLElement {
         if(this.getAttribute('required') !== null) {
             if(String(this.EditorNode.textContent).length === 0) {
                 hasErros = true;
-                errors.push(this.#t('required'));
+                errors.push(_t('required'));
             }
         }
         if(Number(this.getAttribute('minlength'))) {
             if(String(this.EditorNode.textContent).length < Number(this.getAttribute('minlength'))) {
                 hasErros = true;
-                errors.push(`${this.#t('minlength')} ${this.getAttribute('minlength')}`);
+                errors.push(`${_t('minlength')} ${this.getAttribute('minlength')}`);
             }
         }
         if(Number(this.getAttribute('maxlength'))) {
             if(String(this.EditorNode.textContent).length > Number(this.getAttribute('maxlength'))) {
                 hasErros = true;
-                errors.push(`${this.#t('maxlength')} ${this.getAttribute('maxlength')}`);
+                errors.push(`${_t('maxlength')} ${this.getAttribute('maxlength')}`);
             }
         }
         const filterTags = this.getAttribute('filtertags');
@@ -394,7 +457,7 @@ class WCWYSIWYG extends HTMLElement {
                 const checkTag = disallowTags[i];
                 if(this.EditorNode.querySelector(checkTag)) {
                     hasErros = true;
-                    errors.push(`${this.#t('filtertags')} ${checkTag}`);
+                    errors.push(`${_t('filtertags')} ${checkTag}`);
                     break;
                 }
             }
@@ -422,17 +485,17 @@ class WCWYSIWYG extends HTMLElement {
      */
     #checkAutoComplete() {
         //CHeck autococmplete 
-        const Selecton = window.getSelection();
-        if(Selecton !== null && Selecton.anchorNode !== null) {
-            const SelectionParentEl = Selecton.anchorNode.parentElement as HTMLParagraphElement;
+        const editorSelection = this.getSelection();
+        if(editorSelection.selection !== null && editorSelection.selection.anchorNode !== null) {
+            const SelectionParentEl = editorSelection.selection.anchorNode.parentElement as HTMLParagraphElement;
             const AutoCompleteForm = this.EditorAutoCompleteForm as HTMLElement;
             if(SelectionParentEl !== null && 
-                //if empty selection
-                Selecton.toString() === '' && 
-                //and parent node is <p>
-                SelectionParentEl.nodeName === 'P' && 
-                //and parent <p> is parentElement in EditorNode
-                SelectionParentEl.parentElement === this.EditorNode) {
+            //if empty selection
+            editorSelection.text === null && 
+            //and parent node is <p>
+            SelectionParentEl.nodeName === 'P' && 
+            //and parent <p> is parentElement in EditorNode
+            SelectionParentEl.parentElement === this.EditorNode) {
                     //and parent <p> inner text starts with `/` 
                     if(SelectionParentEl.innerText.startsWith('/')) {
                         const parsedTagName = SelectionParentEl.innerText.replace('/', '');
@@ -443,7 +506,7 @@ class WCWYSIWYG extends HTMLElement {
                                 AutoCompleteForm?.appendChild(el('button', {
                                     classList: ['wc-wysiwyg_btn', `-${action.tag}`],
                                     attrs: {
-                                        'data-hint': this.#t(action.tag) || null,
+                                        'data-hint': _t(action.tag) || null,
                                     },
                                     props: {
                                         type: 'submit',
@@ -462,7 +525,7 @@ class WCWYSIWYG extends HTMLElement {
                             }
                         }
                     }
-            }
+                }
         }
     }
 
@@ -470,7 +533,17 @@ class WCWYSIWYG extends HTMLElement {
      * Show and position inline actions dialog at targetNode
      **/
     showEditorInlineDialog() {
-        this.EditorInlineDialog.show();
+        //Save selection range
+        const editorSelection = this.getSelection();
+        if(editorSelection.selection !== null) {
+            const range = editorSelection.selection.getRangeAt(0).cloneRange();
+            this.EditorInlineDialog.show();
+            //Restore selection range after dialog show
+            editorSelection.selection.removeAllRanges();
+            editorSelection.selection.addRange(range);
+        } else {
+            this.EditorInlineDialog.show();
+        }
     }
 
     /**
@@ -488,19 +561,20 @@ class WCWYSIWYG extends HTMLElement {
      * @param event 
      */
     #checkCanClearElement(event:Event) {
-        const eventTarget = event.target as HTMLElement;
+        const eventTarget = event.target as HTMLElement,
+            clearBtn = this.EditorClearFormatBtn;
         if(eventTarget !== this.EditorNode) {
             if(eventTarget.nodeName !== 'P' 
             && eventTarget.nodeName !== 'SPAN') {
-                this.EditorClearFormatBtn.style.display = 'inline-block';
-                this.EditorClearFormatBtn.innerHTML = `Ⱦ ${eventTarget.nodeName}`,
-                this.EditorClearFormatBtn.onpointerup = (event) => {
+                clearBtn.style.display = 'inline-block';
+                clearBtn.innerHTML = `Ⱦ ${eventTarget.nodeName}`,
+                clearBtn.onpointerup = (event) => {
                     eventTarget.replaceWith(document.createTextNode(eventTarget.textContent));
-                }
+                };
                 this.showEditorInlineDialog();
             } else { 
-                this.EditorClearFormatBtn.style.display = 'none';
-                this.EditorClearFormatBtn.onpointerup = null;
+                clearBtn.style.display = 'none';
+                clearBtn.onpointerup = null;
             }
         }
     }
@@ -515,8 +589,11 @@ class WCWYSIWYG extends HTMLElement {
         if(this.#EditProps[eventTarget.nodeName]) {
             const props = this.#EditProps[eventTarget.nodeName];
             event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('editprops', {
+                detail: { eventTarget }
+            }));
             this.EditorPropertyForm.style.display = '';
-            this.showEditorInlineDialog();
+            this.EditorPropertyForm.style.display = 'block';
             this.EditorPropertyForm.setAttribute('data-tag', eventTarget.nodeName);
             this.EditorPropertyForm.innerHTML = '';
             for (let i = 0; i < props.length; i++) {
@@ -567,18 +644,21 @@ class WCWYSIWYG extends HTMLElement {
         if(event.altKey) {
             //alt+space - move caret to parent node next sibling
             if(event.code === 'Space') {
-                const Selection = window.getSelection();
-                if(Selection?.type === 'Caret') {
-                    //insertAdjacentElement dont support textNodes, first insert span
-                    const span = el('span');
-                    Selection?.anchorNode?.parentElement?.insertAdjacentElement('afterend', span)
-                    //after replace span with textnode and select it
-                    const textN = document.createTextNode('&nbsp');
-                    span.replaceWith(textN);
-                    const range = document.createRange();
-                    range.selectNodeContents(textN);
-                    Selection.removeAllRanges();
-                    Selection.addRange(range);
+                const editorSelection = this.getSelection();
+                const Selection = editorSelection.selection;
+                if(Selection !== null) {
+                    if(Selection.type === 'Caret') {
+                        //insertAdjacentElement dont support textNodes, first insert span
+                        const span = el('span');
+                        Selection.anchorNode?.parentElement?.insertAdjacentElement('afterend', span)
+                        //after replace span with textnode and select it
+                        const textN = document.createTextNode('&nbsp');
+                        span.replaceWith(textN);
+                        const range = document.createRange();
+                        range.selectNodeContents(textN);
+                        Selection.removeAllRanges();
+                        Selection.addRange(range);
+                    }
                 }
             }
         }
@@ -588,7 +668,7 @@ class WCWYSIWYG extends HTMLElement {
         }
         //enter - set p as default tag in newline
         if(event.code === 'Enter' && event.shiftKey === false) {
-            const Selection = window.getSelection();
+            const Selection = this.getSelection().selection;
             let tagName = 'p';
             //tags with return default browser behavior
             if(['LI', 'ARTICLE', 'P'].includes(Selection.anchorNode.parentElement.tagName)) {
@@ -616,7 +696,7 @@ class WCWYSIWYG extends HTMLElement {
             const button = el('button', {
                 classList: ['wc-wysiwyg_btn', `-${action.tag}`],
                 props: {
-                    tabIndex: -1,
+                    tabIndex: 0,
                     type:'button',
                     textContent: action.is ? `${action.tag} is=${action.is}` : action.tag,
                     onpointerup: (event) => {
@@ -625,8 +705,8 @@ class WCWYSIWYG extends HTMLElement {
                     },
                 },
                 attrs: {
-                    'data-hint': action.hint ? action.hint : this.#t(action.tag) || '-',
-                }
+                    'data-hint': action.hint ? action.hint : _t(action.tag) || '-',
+                },
             });
             toEl.appendChild(button);
         }
@@ -679,11 +759,14 @@ class WCWYSIWYG extends HTMLElement {
 
     /**
      * Wrap content in <tag>
+     * @param tag:WCWYSIWYGTag 
      **/
     #wrapTag = (tag:WCWYSIWYGTag, is:boolean|string = false) => {
+        //First check if this tag is list item
         const listTag = ['ul', 'ol'].includes(tag.tag) ? tag.tag : false;
+        //If list tag is true - set newTag is list item as <li>
         const newtag = listTag !== false ? 'li' : tag.tag;
-        const Selection = window.getSelection();
+        const Selection = this.getSelection().selection;
         let defaultOptions = {} as any;
         if(is) {
             defaultOptions.options = {is};
@@ -705,6 +788,8 @@ class WCWYSIWYG extends HTMLElement {
                 tagNode.innerText = tag;
             }
             this.updateContent();
+            //Check if new tag has editable props
+            this.#checkEditProps({target:tagNode, stopPropagation: () => false});
         }
     }
  
@@ -755,13 +840,46 @@ class WCWYSIWYG extends HTMLElement {
     }
 
     /**
-     * Translate function
-     * @param key:string phrase key
-     * @returns 
+     * Check available extensions in global scope
      */
-    #t(key:string):string {
-        let lang = this.lang;
-        return t[lang] ? t[lang][key] || "-" : t["en"][key];
+     #checkExtensions() {
+        // Check extensions in global
+        const _WCWYSIWYG = window._WCWYSIWYG;
+        console.log('#checkExtensions',_WCWYSIWYG);
+        if(_WCWYSIWYG !== undefined && _WCWYSIWYG.extensions.length > 0) {
+            this.#Extensions = [];
+            for (let i = 0; i < _WCWYSIWYG.extensions.length; i++) {
+                const Extension = new _WCWYSIWYG.extensions[i](this);
+                this.#Extensions.push(Extension);
+            }
+        }
+    }
+    /**
+     * Get selection info from editor
+     * @returns editorSelection
+     */
+    getSelection() {
+        const windowSelection = window.getSelection();
+        const editorSelection = {
+            selection: null,
+            element: null,
+            text: null,
+            node: null,
+        };
+
+        if(windowSelection !== null) {
+            editorSelection.selection = windowSelection;
+            editorSelection.node = windowSelection.anchorNode;
+            editorSelection.element = windowSelection.anchorNode.parentElement;
+            let selectionText = windowSelection.toString();
+            if(selectionText.length > 0) {
+                editorSelection.text = selectionText;
+            }
+        }
+
+        console.log('wc selection', editorSelection);
+
+        return editorSelection;
     }
     //define WCWYSIWYG as custom element
     static define(name = 'wc-wysiwyg') {
@@ -769,4 +887,28 @@ class WCWYSIWYG extends HTMLElement {
     }
 }
 export default WCWYSIWYG;
-export const define = WCWYSIWYG.define;
\ No newline at end of file
+export const define = WCWYSIWYG.define;
+export interface WCWYSIWYGTag {
+    // The HTML tag name
+    tag: string,
+    // Optional method to be called when the tag is used
+    method?: Function,
+    // Optional hint to be displayed when the tag button is pressed\hovered
+    hint?: string,
+    // Optional string to specify the custom tag element
+    is?: string,
+}
+export interface WCWYSIWYGActions {
+    wrapTag: Function,
+    insertImageBlock: Function,
+    insertAudio: Function,
+    insertVideo: Function,
+}
+declare global {
+    interface Window {
+        _WCWYSIWYG: {
+            extensions?:any[],
+            asyncExtensions?:string[],
+        }
+    }
+}