diff --git a/README.md b/README.md
index 0b7e225..57c35b9 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list an
     - Color text and background editor
     -  Emoji table
 
+🚀 Vite support for wc-wysiwyg develop 
 
 ## Install
 
@@ -55,7 +56,7 @@ npm i wc-wysiwyg-editor --save
 
 - Available package commands
 
-    Build scss styles
+- Build scss styles
 ```
 npm run sass
 ```
@@ -67,11 +68,12 @@ npm run tsc
 ```
 npm run babel-minify
 ```
-build all stpes 1.sass 2.tsc 3.babel-minif
+- build all stpes 1.sass 2.tsc 3.babel-minif
 
 ```
 npm run build
 ```
+- start vite serve mode for wc-wysiwyg development
 
 ## Integration WC-WYSIWYG element demo
 <!--
@@ -89,6 +91,18 @@ import('/src/components/wc-wysiwyg.js').then(esm => {
     //you can pass any name into define fn
     esm.define();
 });
+```
+
+For use extensions, load before wc-wysiwig
+```javascript
+Promise.all([
+    import('./src/extensions/colorerDialog.ts'),
+    import('./src/extensions/emojiDialog.ts'),
+    import('./src/extensions/presetList.ts'),
+]).then(modules => {
+    import('./src/wc-wysiwyg.ts').then(esm => esm.define());
+});
+
 ```
 And use in HTML
 
diff --git a/dist/sass/wc-wysiwyg.css b/dist/sass/wc-wysiwyg.css
index bc502ed..da30652 100644
--- a/dist/sass/wc-wysiwyg.css
+++ b/dist/sass/wc-wysiwyg.css
@@ -1,8 +1,85 @@
+@charset "UTF-8";
+:root {
+  --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;
+  --color-deep-orange-50: #FBE9E7;
+  --color-deep-orange-900: #BF360C;
+  --color-lime-50: #F9FBE7;
+  --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;
+  --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;
+  --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;
+  --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;
   /* custom elements */
@@ -10,6 +87,37 @@
   /* inline dialog */
   /* props form */
   /* hints */ }
+  .wc-wysiwyg_dialog {
+    border-radius: 10px;
+    border: none;
+    outline: none; }
+    .wc-wysiwyg_dialog::backdrop {
+      background: rgba(0, 0, 0, 0.8); }
+    .wc-wysiwyg_dialog.-modal {
+      min-width: 90vw;
+      min-height: 90vh;
+      max-height: 90vh;
+      max-height: 90vh; }
+    .wc-wysiwyg_dialog.-colors {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      min-width: 0;
+      min-height: 0;
+      max-width: 300px; }
+      .wc-wysiwyg_dialog.-colors:not([open]) {
+        display: none; }
+      .wc-wysiwyg_dialog.-colors fieldset.-palette {
+        padding: 0;
+        display: flex;
+        flex: 1;
+        margin: 0;
+        border: 0;
+        outline: 0;
+        max-width: 20px; }
+        .wc-wysiwyg_dialog.-colors fieldset.-palette > button {
+          flex: 1;
+          margin: 2px; }
   .wc-wysiwyg_bt {
     display: block;
     padding: 5px;
@@ -27,36 +135,30 @@
       border-radius: 3px; }
   .wc-wysiwyg_ce {
     position: relative;
-    margin: 0;
-    padding: 7px;
-    border: 1px solid var(--color-blue-500);
-    border-radius: 3px;
-    background-color: var(--color-blue-50); }
-  .wc-wysiwyg_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; }
-  .wc-wysiwyg_ce > button {
-    border-color: var(--color-blue-500);
-    background-color: var(--color-blue-100); }
-    .wc-wysiwyg_ce > button: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); }
+    .wc-wysiwyg_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; }
   .wc-wysiwyg_pr {
     width: 100%;
     box-sizing: border-box;
     max-width: 100%;
     min-height: 200px; }
   .wc-wysiwyg_content {
-    padding: 5px 5px 2em 5px;
+    padding: 0.5em;
     border: 1px solid #ccc;
     background: #fff;
     overflow-x: hidden;
@@ -66,7 +168,7 @@
     box-sizing: border-box;
     margin: 0 auto;
     box-sizing: border-box;
-    display: inline-block;
+    display: block;
     resize: vertical; }
     .wc-wysiwyg_content .-selected {
       background-color: var(--color-blue-100); }
@@ -76,46 +178,186 @@
     .wc-wysiwyg_content.-invalid:focus {
       outline: 5px solid var(--color-red-500); }
   .wc-wysiwyg_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); }
-  .wc-wysiwyg_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; }
   .wc-wysiwyg_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;
+    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; }
     .wc-wysiwyg_btn: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); }
     .wc-wysiwyg_btn:focus {
-      border-color: var(--color-blue-500); }
+      box-shadow: 0 2px 5px rgba(0, 110, 253, 0.9); }
     .wc-wysiwyg_btn: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); }
     .wc-wysiwyg_btn.-clear {
       text-decoration: line-through;
       font-weight: bold; }
+    .wc-wysiwyg_btn.-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; }
+    .wc-wysiwyg_btn.-color {
+      min-width: 20px;
+      min-height: 20px;
+      border-color: rgba(0, 0, 0, 0.2); }
+    .wc-wysiwyg_btn.-prevcolor::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); }
+    .wc-wysiwyg_btn.-b {
+      font-weight: bold; }
+    .wc-wysiwyg_btn.-i {
+      font-style: italic; }
+    .wc-wysiwyg_btn.-u {
+      text-decoration: underline; }
+    .wc-wysiwyg_btn.-s {
+      text-decoration: line-through; }
+    .wc-wysiwyg_btn.-sub {
+      vertical-align: sub;
+      font-size: 0.5em; }
+    .wc-wysiwyg_btn.-del::before {
+      content: '- ';
+      font-weight: 400; }
+    .wc-wysiwyg_btn.-h1::before {
+      content: '§ ';
+      font-weight: 400; }
+    .wc-wysiwyg_btn.-del {
+      color: var(--color-red-900);
+      border-bottom: 1px solid var(--color-red-900);
+      background-color: var(--color-red-50); }
+    .wc-wysiwyg_btn.-a::before {
+      content: "🔗 "; }
+    .wc-wysiwyg_btn.-ul::before {
+      content: "● "; }
+    .wc-wysiwyg_btn.-ol::before {
+      content: "1. "; }
+    .wc-wysiwyg_btn.-var::before {
+      content: "∫ "; }
+    .wc-wysiwyg_btn.-var {
+      font-weight: bold;
+      font-style: italic; }
+    .wc-wysiwyg_btn.-details:before {
+      content: "&rarr;"; }
+    .wc-wysiwyg_btn.-details {
+      text-decoration: dotted;
+      border: 1px dashed var(--color-blue-gray-200); }
+    .wc-wysiwyg_btn.-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; }
+    .wc-wysiwyg_btn.-pre {
+      background-color: var(--color-blue-gray-50);
+      color: var(--color-blue-grey-900);
+      padding-left: 15px; }
+    .wc-wysiwyg_btn.-ins::before {
+      content: '+ ';
+      font-weight: 400; }
+    .wc-wysiwyg_btn.-ins {
+      color: var(--color-green-900);
+      border-bottom: 1px solid var(--color-green-900);
+      background-color: var(--color-green-50); }
+    .wc-wysiwyg_btn.-sup {
+      vertical-align: super;
+      font-size: 0.5em; }
+    .wc-wysiwyg_btn.-q:before {
+      content: open-quote; }
+    .wc-wysiwyg_btn.-samp:before {
+      content: '> ';
+      color: var(--color-blue-gray-300);
+      font-family: sans-serif; }
+    .wc-wysiwyg_btn.-samp {
+      background-color: var(--color-blue-gray-50);
+      border-bottom: 1px solid var(--color-blue-gray-300); }
+    .wc-wysiwyg_btn.-blockquote::before {
+      content: '❝';
+      font-size: 1em;
+      color: #F57F17;
+      display: block;
+      position: absolute;
+      top: 0px;
+      left: 4px;
+      user-select: none; }
+    .wc-wysiwyg_btn.-blockquote {
+      background-color: var(--color-amber-50);
+      color: #412207;
+      padding-left: 15px;
+      border-left: 2px solid #F57F17; }
+    .wc-wysiwyg_btn.-time:before {
+      content: "📅 "; }
+    .wc-wysiwyg_btn.-img:before {
+      content: "🌅 "; }
+    .wc-wysiwyg_btn.-video:before {
+      content: "🎦 "; }
+    .wc-wysiwyg_btn.-audio:before {
+      content: "🎵 "; }
+    .wc-wysiwyg_btn.-details:before {
+      content: "▸ "; }
+    .wc-wysiwyg_btn.-code {
+      content: "<code>";
+      background-color: var(--color-blue-gray-50);
+      color: var(--color-blue-grey-900); }
+    .wc-wysiwyg_btn.-strong {
+      background-color: var(--color-deep-orange-50);
+      color: var(--color-deep-orange-900);
+      font-weight: 400; }
+    .wc-wysiwyg_btn.-abbr {
+      color: #1A237E; }
+    .wc-wysiwyg_btn.-q {
+      color: #000;
+      background-color: #FFF8E1; }
+    .wc-wysiwyg_btn.-small {
+      font-size: 0.5em; }
+    .wc-wysiwyg_btn.-dfn {
+      color: var(--color-blue-900);
+      font-style: italic; }
+    .wc-wysiwyg_btn.-mark {
+      background-color: var(--color-lime-100);
+      color: var(--color-lime-900); }
+      .wc-wysiwyg_btn.-mark:hover {
+        background-color: var(--color-lime-200);
+        color: var(--color-lime-900); }
+    .wc-wysiwyg_btn.-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; }
   .wc-wysiwyg_ia {
     display: flex;
     flex-wrap: wrap; }
@@ -128,17 +370,17 @@
     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; }
+    box-sizing: border-box;
+    background-color: var(--wc-wysiwyg-light);
+    border-radius: 5px;
+    padding: 5px; }
     .wc-wysiwyg_di > form:nth-child(1n+2) {
       margin-top: 10px; }
   .wc-wysiwyg_pf {
     display: flex;
     border-radius: 3px;
     padding: 3px;
+    margin: 10px 0;
     background-color: var(--color-blue-100);
     flex-wrap: nowrap;
     font-size: 0.9em;
@@ -157,7 +399,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;
@@ -201,3 +444,17 @@
     line-height: 10px; }
   .wc-wysiwyg .-display-none {
     display: none; }
+
+@media (prefers-color-scheme: dark) {
+  .wc-wysiwyg {
+    background-color: var(--wc-wysiwyg-dark); }
+    .wc-wysiwyg_di {
+      background-color: var(--wc-wysiwyg-dark); }
+    .wc-wysiwyg_bt {
+      background-color: var(--wc-wysiwyg-dark); }
+    .wc-wysiwyg_btn {
+      background-color: rgba(0, 0, 0, 0.5);
+      color: #ccc; }
+      .wc-wysiwyg_btn:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #ccc; } }
diff --git a/dist/wc-wysiwyg.js b/dist/wc-wysiwyg.js
index 5b87957..b06feeb 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 _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
+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;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.EditorPropertyForm&&(this.EditorPropertyForm.style.display="none")},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(",");asyncExtensionsPaths.forEach(extensionPath=>{import(extensionPath).then(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))}}}#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))}):(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("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(_WCWYSIWYG!==void 0&&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 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/index.html b/index.html
new file mode 100644
index 0000000..61b0f78
--- /dev/null
+++ b/index.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>wc-wysiwyg</title>
+</head>
+<body>
+    <wc-wysiwyg 
+    data-custom-tags='[{"method":"wrapTag","tag":"a","displayType":"inline","hint":"Продвинутая ссылка a is=\"wc-a\"","is":"wc-a"},{"method":"wrapTag","tag":"pre","displayType":"block","hint":"Вставка кода pre is=\"wc-pre\"","is":"wc-pre"},{"method":"wrapTag","tag":"time","displayType":"inline","hint":"Вставка кода pre is=\"wc-pre\"","is":"wc-time"}]'
+    data-edit-props='{"A":["href"],"ABBR":["title"],"PRE":["data-lang"],"LI":["data-liststyle"],"DFN":["title"],"H1":["id"],"H2":["id"],"H3":["id"],"H4":["id"],"H5":["id"],"H6":["id"],"SPAN":["class"],"TIME":["datetime"],"IMG":["alt","src","class"],"P":["class"],"AUDIO":["src"]}'
+    data-autocomplete="1"
+    data-content-class="a__content"
+    data-preset-list='[{"tag":"mark", "class": "-custom-mark", "name": "Выделенный синий"}, {"tag":"h1", "style":"color: red;", "name": "Красный заголовок H1"}, {"tag":"h2", "style":"color: green;", "name": "Зеленый заголовок H2"}]'
+    id="wceditor"
+    filtertags="script,iframe,object"
+    required
+    minlength="20"
+    maxlength="20000000"
+    data-preview-el="#preview">
+    <textarea><h1>wc-wysiwyg</h1>
+    <p><mark>Д</mark><small>е</small><sup>м</sup><sub>о</sub><dfn title="definiton title">н</dfn><kbd>с</kbd><strong>т</strong><abbr title="ABBR">р</abbr><code>а</code><q>ц</q><del>и</del><ins>я</ins> <samp>и</samp> обзор возможностей веб-компонента wc-wysiwyg</p>
+    
+    <blockquote><b>WYSIWYG</b> (произносится [ˈwɪziwɪɡ], является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор».</blockquote>
+    <ul>
+        <li><a is="wc-a" href="https://github.com/webislife/wc-wysiwyg">github репозиторий</a></li>
+        <li><a class="wc-a" href="https://www.npmjs.com/package/wc-wysiwyg-editor">npm package</a></li>
+    </ul>
+    <h2>Базовые возможности редактора</h2>
+    <p>
+        Редактор вдохновлен <a is="wc-a" href="https://html.spec.whatwg.org/multipage/" v-is="HTML5" target="_blank">HTML5</a> идеями семантики веба и старается максимально их поддерживать. В основе интерактивности редактора лежит нативная javascript реализация с применением веб-компонентов и браузерных API. Данный веб-компонент не имеет зависимостей в <code>package.json</code> и не требует дополнительной установки каких либо библиотек и javascript фреймворков.
+    </p>
+    <h3>Текстовое форматирование</h3>
+    <p>
+        Текстовое базовое форматирование основано на HTML5 тегах, <abbr title="но никто не мешает их добавить"> вместо CSS стилей</abbr>. Базовая палитра цветов взята из <a is="wc-a" href="https://materialui.co/colors/">materialui.co</a>
+    </p>
+    <h4>Строчные элементы</h4>
+    <p>
+        <ol>
+            <li><code>b</code> - <b>жирный</b> </li>
+            <li><code>u</code> - <u>подчеркнутый</u></li>
+            <li><code>s</code> - <s>зачерекнутый</s></li>
+            <li><code>i</code> - <i>курсивный</i></li>
+            <li><code>q</code> - <q>цитата</q></li>
+            <li><code>small</code> - <small>маленький текст</small></li>
+            <li><code>sup</code> - <sup>надстрочный</sup></li>
+            <li><code>sub</code> - <sub>подстрочный</sub></li>
+            <li><code>mark</code> - <mark>выделенный текст</mark></li>
+            <li><code>strong</code> - <strong>важный текст</strong></li>
+            <li><code>samp</code> - <samp>вывод компьютерной программы</samp></li>
+            <li><code>kbd</code> - <kbd>ПРОБЕЛ</kbd> обозначение кнопки </li>
+            <li><code>del</code> - <del>удаленный текст</del> из документа </li>
+            <li><code>ins</code> - <ins>добавленный текст</ins> в документ </li>
+            <li><code>code</code> - Внутритекстовый <code>код</code> </li>
+            <li><code>var</code> - обозначение <var>X</var> переменных </li>
+            <li><code>dfn</code> - <dfn title="Тег dfn (сокращенно от definition)">определение</dfn></li>
+            <li><code>abbr</code> - <abbr title="Тег abbr (сокращенно от abbreviation)">аббрeвиатура</abbr></li>
+        </ol>
+    </p>
+    <h4>HTML5 строчные элементы</h4>
+    <p>
+        <ol>
+            <li>
+                <code>wc-time</code> - веб-компонент расширяющий возможности показа даты и времени, совместим с этим редактором, вы открыли эту страницу - <time is="wc-time" data-format-time="minute,hour,second"></time> больше возможностей и реализацию, <a is="wc-a" href="https://webislife.ru/demo/wc-time/">читайте здесь</a> или <a is="wc-a" href="https://github.com/webislife/wc-time">смотрите на github</a>. 
+                <br> Сравните две даты <time datetime="12.12.2023 01:23">12.12.2023 01:23</time> и версию <code>is="wc-time"</code> <time is="wc-time" datetime="12.12.2023 01:23">12.12.2023 01:23</time>
+            </li>
+            <li><code>a is="wc-a"</code> - пример интеграции анонимного веб-компонента <a href="https://webislife.ru">просто ссылка</a> и <a https:="https://webislife.ru/demo/wc-editor" is="wc-a">wc-a ссылка</a></a></li>
+        </ol>
+    </p>
+    <h4>Аббревиатуры <code>abbr</code></h4>
+    <p>
+        Использование аббревиатур в статьях и комментариях бывает уместно и позволяет подсказать пользователям, что такое 
+        <abbr title="Hyper Text Markup Language">HTML</abbr> или как расшифровать <abbr title="Имею Мнение Хрен Оспоришь">ИМХО</abbr> или
+        <abbr title="Синхрофазотро́н (от синхронизация + фаза + электрон) — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты.">Синхрофазотрон</abbr>
+    </p>
+
+    <h3>Блочные элементы</h3>
+    <p>
+        В блочные элементы входят все заголовки, а также:
+    </p>
+    <p>
+        <ul>
+            <li><code>details</code> - спойлер
+                <details>
+                    <summary>Заголовок спойлера</summary>
+                    текст в спойлере
+                </details>
+            </li>
+            <li><code>pre</code> - блок форматированного текста, примеры применения:
+                <pre data-lang="English proverb">Strike while the iron is hot</pre>
+                <pre data-lang="file.txt">содержимое file.txt</pre>
+                <pre data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
+                А вот пример применения <code>is="wc-pre"</code>
+                <pre is="wc-pre" data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
+            </li>
+            <li>
+                <code>audio</code> - а что если дать возможность читателю  запустить трек перед длительным чтением статьи? Или автору вставлять аудиофрагменты 
+                <audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
+            </li>
+            <li>
+                <code>video</code> - простая интеграция video не сложнее чем audio
+                <video controls width="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
+                </video>
+            </li>
+            <li>
+                <code>figure</code> - тоже является блочным элементом, может быть использован для оборачивания изображений и audio элементов
+                <figure>
+                    <audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
+                    <figcaption>🎵 Luke-Bergs-Bliss.mp3</figcaption>
+                </figure>
+            </li>
+            <li>
+                <code>blockquote</code> - блок цитаты
+                <blockquote><h5>для больших</h5><br><h5>цитат</h5></blockquote>
+            </li>
+        </ul>
+    </p>
+    <h4>
+        Спойлер 
+    </h4>
+    <p>
+        Для спойлеров используется тег <code>details</code>
+    </p>
+    <details>
+        <summary>Нажми, чтобы увидеть спойлер</summary>
+        <p>
+            Ура, спойлерить в комментариях можно! Но скрыть <abbr title="когда хочешь немного больше">одно или пару</abbr> можно и аббривеатурой.
+        </p>
+    </details>
+    <p>
+        Можно спрятать код в спойлер, если его чтение опционально или затрудняет статью
+    </p>
+    <details>
+        <summary>Код под спойлером</summary>
+        <p>
+            <pre is="wc-pre" data-lang="ts">//Все знакомые редатору теги
+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'},
+] as WCWYSIWYGTag[];</pre>
+        </p>
+    </details>
+    <h4>
+        Цитаты
+    </h4>
+    <p>
+        Используем тег <code>q</code> для коротких <abbr title="внутритекстовых">inline</abbr> цитат
+    </p>
+    <p>
+        Есть такая фраза <q>Я не слишком богат, чтобы покупать вещи дважды</q> - вы слышали?
+    </p>
+    <p>
+        Используем тег <code>blockquote</code> для блока цитаты
+    </p>
+    <blockquote>
+        <b>БлокЦитаты</b> - лучше использовать отдельно<br>
+        Он лучше подходит для цитат и выдержек на несколько строк
+    </blockquote>
+    
+    <p>
+        Для интеграции редактора на страницу достаточно в HTML разместить разметку
+    </p>
+    <pre data-lang="HTML">&lt; wc-wysiwyg id="wc-demo-comment"
+data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
+data-storage="demo-comment"
+data-hide-bottom-actions="1"
+is="wc-wysiwyg"
+required
+minlength="5"
+maxlength="500">
+&lt; textarea>&lt; /textarea>&lt; wc-wysiwyg></pre>
+    <p>
+        Подключить модуль компонента на странице или импортировать его из <code>javaScript</code> и вызвать метод <code>define</code>. Пример подключения на этой странице:
+    </p>
+    <pre is="wc-pre" data-lang="javascript">import('/wp-content/themes/wl/ts/components/web/wc-editor.js').then(esm => {
+esm.define();
+});</pre>
+    <p>
+        Попытки вставить javaScript и прочие пакости как value для этого веб-компонента должны обрезаться и пресекаться на стороне сервера,
+        список доступных тегов для каждого ресурса может быть индивидуален.
+    </p>
+    <h4>Выравнивание текста</h4>
+    <p>В будущем автор возможно добавит выравнивание элементов кнопками, но на уровне CSS классов это доступно уже сейчас</p>
+    <p class="-text-center">Текст по центру с применением CSS класса <code>-text-center</code></p>
+    <p class="-text-right">Текст по правому краю с применением CSS класса <code>-text-right</code></p>
+    <p class="-text-left">Текст по левому краю с применением CSS класса <code>-text-left</code></p>
+    <h4>Копирование в буфер</h4>
+    <p>
+        А что если прямо в редакторе: 
+        <ol>
+            <li>
+                нажать <kbd>ctrl</kbd>+<kbd>a</kbd> и просто все выделить
+            </li>
+            <li>
+                потом все вырезать <kbd>ctrl</kbd>+<kbd>X</kbd>
+            </li>
+            <li>
+                а потом вставить обратно <kbd>ctrl</kbd>+<kbd>V</kbd>
+            </li>
+        </ol>
+        Останется ли на месте все созданное? - <q>все кроме скрытого содержания спойлеров вернется на место, но будет вставлено в виде форматированного инлайн стилями html</q>
+    </p>
+    
+    <h4>Списки</h4>
+    <ol>
+        <li> Нумерованный </li>
+        <li> Список </li>
+    </ol>
+    <ul>
+        <li> Маркированный </li>
+        <li> Список </li>
+    </ul>
+    <p>
+        🔥 Cписок возможностей <code>textarea is="wc-wysiwyg"</code> или 
+    </p>
+    <ul>
+        <li data-listStyle="✅">Поддержка мультиязычности через аттрибут <a is="wc-a" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang">HTMLElement.lang</a> <br>
+            🇷🇺/🇺🇸 поддерживаются по умолчанию</li>
+        <li data-listStyle="✅">CSS стили для всех популярных HTML5 тегов </li>
+        <li data-listStyle="✅">CSS поддержка emoji в маркированных списках </li>
+        <li data-listStyle="✅">Поддержка наследования стилей через CSS class в аттрибуте <code>data-content-class</code> emoji в маркированных списках </li>
+        <li data-listStyle="✅">Внутритекстовое действия над выделенным текстом </li>
+        <li data-listStyle="✅">Хранение значения в <code>window.localStorage</code> и восстановление после перезагрузки, проверьте в форме комментариев ниже</li>
+        <li data-listStyle="✅">Редактирование сразу нескольких атрибутов и свойств для тегов <code>h1-6</code> / <code>abbr</code> / <code>dfn</code> / <code>a</code> / <code>pre</code> / <code>ul > li</code> и любых других тегов, количество тегов и атрибуты настраиваются</li>
+        <li data-listStyle="✅">Autocomplete при вводе <code>/</code> для поддерживаемых тегов в новом параграфе</li>
+        <li data-listStyle="✅">Переключатель вида текст\HTML5</li>
+        <li data-listStyle="✅">Кнопка очистки формата <kbd>Ⱦ</kbd></li>
+        <li data-listStyle="✅">Предпросмотр в режиме реального времени</li>
+        <li data-listStyle="✅">Сочетания клавиш
+            <ol>
+                <li><kbd>alt</kbd>+<kbd>space</kbd> переключить текущий указатель каретки вне тега</li>
+                <li><kbd>Escape</kbd> закрыть нижнюю диалоговую панель редактора</li>
+            </ol>
+        </li>
+        <li data-listStyle="✅">Валидация <code>required</code>, <code>minlength</code>, <code>maxlength</code>, <code>filtertags</code></li>
+        <li data-listStyle="✅">Вставка <code>audio</code> элемента</li>
+        <li data-listStyle="✅">Вставка <code>video</code> элемента</li>
+        <li data-listStyle="⌛">
+            В разработке
+            <ul>
+                <li data-listStyle="🖊">Работа с таблицами</li>
+                <li data-listStyle="🖊">Изменение размеров изображения прямо в редакторе</li>
+                <li data-listStyle="🖊">Поддержка placeholder</li>
+                <li data-listStyle="🖊">Выравнивание текста по краям в параграфе с помощью кнопок</li>
+                <li data-listStyle="🖊">Цветовое оформление цвета и фона у текста с <code>colorPicker</code></li>
+                <li data-listStyle="🖊">Поддержка <dfn title="горячих клавиш">hotkeys</dfn></li>
+                <li data-listStyle="🖊">Разметка <dfn title="markdown разметки">.md</dfn> </li>
+                <li data-listStyle="🖊">Поддержка <dfn title="еще один популярный язык разметки">bbcode</dfn></li>
+            </ul>
+        </li>
+    </ul>
+    <h3>
+        Изображения
+    </h3>
+    <p>Изображение c описанием будет вставлено как <code>figure->img+figcaption</code> также описание картинки будет продублировано в <code>alt=""</code> аттрибут <code>img</code></p>
+    <figure>
+        <img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-24-v-20.24.51.png">
+        <figcaption>
+            Поддержка браузерами <code>custom-elements</code> в 2023 году <code>figcaption</code>
+        </figcaption>
+    </figure>
+    <p>Изображение без описания будет вставлено как <code>img</code></p>
+    <img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png" alt="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png">
+
+    </textarea>
+</wc-wysiwyg>
+<style>
+    *, html, body {
+        margin:0;
+        padding:0;
+    }
+</style>
+    <script>
+        import('./src/sass/content.scss');
+        import('./src/sass/wc-wysiwyg.scss');
+        
+        Promise.all([
+            import('./src/extensions/colorerDialog.ts'),
+            import('./src/extensions/emojiDialog.ts'),
+            import('./src/extensions/presetList.ts'),
+        ]).then(modules => {
+            import('./src/wc-wysiwyg.ts').then(esm => esm.define());
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 87a94fb..f411e2c 100644
--- a/package.json
+++ b/package.json
@@ -1,41 +1,43 @@
 {
     "name": "@webislife/wc-wysiwyg",
-    "version": "1.0.1",
+    "version": "1.0.4",
     "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",
     "scripts": {
-      "sass": "./node_modules/node-sass/bin/node-sass ./src -o ./dist",
-      "tsc": "./node_modules/.bin/tsc",
-      "babel-minify": " ./node_modules/.bin/minify ./dist --mangle=false --out-dir ./dist --sourceType=module",
-      "build": "npm run sass && npm run tsc && npm run babel-minify"
+        "vite": "./node_modules/vite/bin/vite.js",
+        "sass": "./node_modules/node-sass/bin/node-sass ./src -o ./dist",
+        "tsc": "./node_modules/.bin/tsc",
+        "babel-minify": " ./node_modules/.bin/minify ./dist --mangle=false --out-dir ./dist --sourceType=module",
+        "build": "npm run sass && npm run tsc && npm run babel-minify"
     },
     "repository": {
-      "type": "git",
-      "url": "git+https://github.com/webislife/wc-wysiwyg.git"
+        "type": "git",
+        "url": "git+https://github.com/webislife/wc-wysiwyg.git"
     },
     "keywords": [
-      "web-component",
-      "custom-element",
-      "html5 editor",
-      "wysiwyg",
-      "html5",
-      "esnext",
-      "typescript"
+        "web-component",
+        "custom-element",
+        "html5 editor",
+        "wysiwyg",
+        "html5",
+        "esnext",
+        "typescript"
     ],
     "author": "srokoff",
     "license": "MIT",
     "bugs": {
-      "url": "https://github.com/webislife/wc-wysiwyg/issues"
+        "url": "https://github.com/webislife/wc-wysiwyg/issues"
     },
     "homepage": "https://github.com/webislife/wc-wysiwyg#readme",
     "devDependencies": {
-      "babel-minify": "^0.5.2",
-      "node-sass": "^8.0.0",
-      "typescript": "^4.9.4"
+        "babel-minify": "^0.5.2",
+        "node-sass": "^8.0.0",
+        "sass": "^1.62.1",
+        "typescript": "^4.9.4",
+        "vite": "^4.3.9"
     },
     "publishConfig": {
-      "@webislife:registry": "https://npm.pkg.github.com"
+        "@webislife:registry": "https://npm.pkg.github.com"
     }
-  }
-  
+}
diff --git a/src/sass/wc-wysiwyg.scss b/src/sass/wc-wysiwyg.scss
index a0839b4..99aa178 100644
--- a/src/sass/wc-wysiwyg.scss
+++ b/src/sass/wc-wysiwyg.scss
@@ -471,6 +471,7 @@
         display: flex;
         border-radius: 3px;
         padding: 3px;
+        margin: 10px 0;
         background-color: var(--color-blue-100);
         flex-wrap: nowrap;
         font-size: 0.9em;
diff --git a/src/wc-wysiwyg.ts b/src/wc-wysiwyg.ts
index fadd081..cf8779d 100644
--- a/src/wc-wysiwyg.ts
+++ b/src/wc-wysiwyg.ts
@@ -1,7 +1,5 @@
 import { t } from './core/translates.js';
 import { el } from "./core/el.js";
-import test from './extensions/colorerDialog.js';
-import test2 from './extensions/presetList.js';
 /**
  * Translate function
  * @param key:string phrase key
@@ -74,8 +72,6 @@ class WCWYSIWYG extends HTMLElement {
     public EditorCustomTagsForm?:HTMLElement
     //Inline edites
     public EditorInlineActions:any[]
-    public EditorInlineDialog:HTMLDialogElement
-    public EditorInlineActionsForm:HTMLElement
     //Editor props
     public EditorPropertyForm?:HTMLElement
     //Clear btn
@@ -113,13 +109,9 @@ class WCWYSIWYG extends HTMLElement {
             const editorSelection = this.getSelection();
             //if check exist selection string
             if(editorSelection.selection !== null && editorSelection.selection.text !== null) {
-                this.EditorInlineActionsForm.style.display = '';
                 if(this.EditorPropertyForm){
                     this.EditorPropertyForm.style.display = 'none';
                 }
-                this.showEditorInlineDialog();
-            } else {
-                this.hideEditorInlineDialog();
             }
         };
         this.onfullscreenchange = (event) => {
@@ -133,10 +125,8 @@ class WCWYSIWYG extends HTMLElement {
             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();
@@ -188,23 +178,6 @@ class WCWYSIWYG extends HTMLElement {
             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) {
                 //Inline property editor
@@ -528,33 +501,6 @@ class WCWYSIWYG extends HTMLElement {
                 }
         }
     }
-
-    /**
-     * Show and position inline actions dialog at targetNode
-     **/
-    showEditorInlineDialog() {
-        //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();
-        }
-    }
-
-    /**
-     * Hide inline dialog
-     **/
-    hideEditorInlineDialog() {
-        if(this.#EditProps){
-            this.EditorPropertyForm.style.display = 'none';
-        }
-        this.EditorInlineDialog.close();
-    }
     
     /**
      * Checking clear form and clear, if can do it
@@ -571,7 +517,6 @@ class WCWYSIWYG extends HTMLElement {
                 clearBtn.onpointerup = (event) => {
                     eventTarget.replaceWith(document.createTextNode(eventTarget.textContent));
                 };
-                this.showEditorInlineDialog();
             } else { 
                 clearBtn.style.display = 'none';
                 clearBtn.onpointerup = null;
@@ -662,10 +607,6 @@ class WCWYSIWYG extends HTMLElement {
                 }
             }
         }
-        //tag - hide editor dialog
-        if(event.code === 'Escape') {
-            this.hideEditorInlineDialog();
-        }
         //enter - set p as default tag in newline
         if(event.code === 'Enter' && event.shiftKey === false) {
             const Selection = this.getSelection().selection;
@@ -712,7 +653,6 @@ class WCWYSIWYG extends HTMLElement {
         }
     }
 
-
     /**
      * Default behaviors fot tag actions
      */
@@ -845,7 +785,6 @@ class WCWYSIWYG extends HTMLElement {
      #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++) {
@@ -876,9 +815,6 @@ class WCWYSIWYG extends HTMLElement {
                 editorSelection.text = selectionText;
             }
         }
-
-        console.log('wc selection', editorSelection);
-
         return editorSelection;
     }
     //define WCWYSIWYG as custom element
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..b6cf29a
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+ export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, './src/wc-wysiwyg.ts'),
+      name: 'WcWysiwyg',
+      fileName: (format) => `wc-wysiwyg.${format}.js`,
+    },
+  },
+});
\ No newline at end of file