Merge pull request #10 from webislife/v1

minor updates for el function after habr.com feedback

.github/workflows/release-package.yml

@@ -1,4 +1,4 @@
-name: wc-wysiwyg-editor package
+name: wc-wysiwyg package
 
 on:
   release:

README.md

@@ -1,7 +1,45 @@
-# wc-time
-WYWSIWYG HTML5 Editor written in TypeScript and designed by web-componennt, support all JS frameworks and browsers.
+# wc-wysiwyg custom element
+
+WC-WSIWYG HTML5 Editor written in TypeScript and designed by web-componennt, support all JS frameworks and browsers.
 See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features
 
+## Features
+✅ Multilingual support via [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang) attribute  🇷🇺/🇺🇸 supported by default
+
+✅ 🌐 Support all major browsers
+
+✅ 🚀 Reusable between all major JS frameworks
+
+✅ CSS styles for all popular HTML5 tags
+
+✅ CSS support for 🔥 in bulleted lists
+
+✅ Support for style inheritance via CSS class in the `data-content-class` attribute of emoji in bulleted lists
+
+✅ Inline actions on selected text
+
+✅ Storing value in `window.localStorage` and restoring after reload, check in comment form below
+
+✅ Eetting  editable properties of any tags, the number of tags and attributes are configurable
+
+✅ Autocomplete as you type `/` for supported tags in new paragraph
+
+✅ `Text\HTML5` view switcher
+
+✅ Clear format tag button `Ⱦ`
+
+✅ Live preview
+
+- ✅ Keyboard Shortcuts
+    - `ALT`+`SPACE` toggle the current caret pointer outside the tag
+    - `ESCAPE` close bottom editor dialog box
+
+✅ Validation `required`, `minlength`, `maxlength`, `filtertags`
+
+✅ Inserting `<audio>` element
+
+✅ Inserting `<video>` element
+
 
 ## Install
 
@@ -11,26 +49,45 @@ npm i wc-wysiwyg-editor --save
 
 ## Commands
 
-Available package commands
+- Available package commands
+
+    Build scss styles
+```
+npm run sass
+```
+- Compile TypeScript
+```
+npm run tsc
+```
+- Minify code with babel-minify after TypeScript compile
+```
+npm run babel-minify
+```
+build all stpes 1.sass 2.tsc 3.babel-minif
 
 ```
-`npm run sass' - build scss styles
-`npm run tsc' - run typescript
-`npm run babel-minify' - minify code after typescript
-`npm run build' - build all stpes 1.sass 2.tsc 3.babel-minify
+npm run build
 ```
 
-## Custom element demo
+## Integration WC-WYSIWYG element demo
 <!--
 ```
-<custom-element-demo>
-  <template>
-    <link rel="import" href="index.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
+<wc-wysiwyg value="foo">
+  <textarea></textarea>
+</wc-wysiwyg>
 ```
 -->
+First need integrate wc-wysiwyg styles, you have 2 way, vanila css in `dist/sass` or scss in `src/sass` just include in your web project
+
+Second, include JS and define custom element
+```javascript
+import('/src/components/wc-wysiwyg.js').then(esm => {
+    //you can pass any name into define fn
+    esm.define();
+});
+```
+And use in HTML
+
 ```html
 <wc-wysiwyg id="wc-demo-comment"
     data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
@@ -44,8 +101,9 @@ Available package commands
 </wc-wysiwyg>
 ```
 
+
 See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features
 
 Dont forgot star on git! Thank you! Enojoy!
 
-Dev by strokoff.ru - make web, not war)
+Dev by strokoff - make web, not war)

package.json

@@ -1,8 +1,9 @@
 {
-    "name": "wc-wysiwyg-editor",
-    "version": "0.9.1",
+    "name": "@webislife/wc-wysiwyg",
+    "version": "0.9.33",
     "description": "WYWSIWYG HTML5 Editor written in ts and designed by web-componennt, support all JS frameworks and browsers",
-    "main": "src/wc-wysiwyg.ts",
+    "main": "dist/wc-wysiwyg.js",
+    "type": "module",
     "scripts": {
       "sass": "./node_modules/node-sass/bin/node-sass ./src -o ./dist",
       "tsc": "./node_modules/.bin/tsc",
@@ -16,7 +17,8 @@
     "keywords": [
       "web-component",
       "custom-element",
-      "time",
+      "html5 editor",
+      "wysiwyg",
       "html5",
       "esnext",
       "typescript"
@@ -36,4 +38,4 @@
       "@webislife:registry": "https://npm.pkg.github.com"
     }
   }
-  
+  

src/core/el.ts

@@ -1,5 +1,5 @@
 /**
- * Short
+ * Short for document.createElement
  * @param tagName element tag name
  * @param params list of object params for document.createElements
  * @returns 
@@ -27,11 +27,7 @@
     }
     // element.style[prop]
     if(styles) {
-        const stylesKeys = Object.keys(styles);
-        for (let i = 0; i < stylesKeys.length; i++) {
-            const key = stylesKeys[i];
-            element.style[key] = styles[key];
-        }
+        Object.assign(element.style, styles);
     }
     // element[prop]
     if(props) {
@@ -51,11 +47,9 @@
             }
         }
     }
-    if(append) {
-        for (let i = 0; i < append.length; i++) {
-            const appendEl = append[i];
-            element.append(appendEl);
-        }
+    //append child elements
+    if(append.length) {
+        element.append(...append);
     }
     return element;
 };

src/core/translates.ts

@@ -43,6 +43,7 @@ export const t = {
         minlength: 'Min length is:',
         maxlength: 'Max length is:',
         filtertags: 'Found filter tag:',
+        details: 'Spoiler block',
     },
     ru: {
         h1:'Заголовок 1 уровня',
@@ -60,7 +61,7 @@ export const t = {
         b:'Жирный',
         i:'Курсив',
         u:'Подчеркнутый',
-        s:'Маленький',
+        s:'Перечеркнутый',
         sup:'Надстрочный',
         sub:'Подстрочный',
         kbd:'Кнопка',
@@ -87,5 +88,6 @@ export const t = {
         minlength: 'Минимальная длинна:',
         maxlength: 'Максимальная длинна:',
         filtertags: 'Найден запрещенный тег:',
+        details: 'Блок спойлера',
     }
 };

src/sass/content.scss

@@ -90,19 +90,10 @@ h5 {
 h6 {
     font-size: 1em;
 }
-/* h1[id]::before,
-h2[id]::before,
-h3[id]::before,
-h4[id]::before,
-h5[id]::before,
-h6[id]::before {
-    content: '§';
-    color: var(--color-blue-gray-300);
-    margin-right: 0.5em;
-} */
 /* del\ins */
 del {
     color: var(--color-red-900);
+    border-bottom: 1px solid var(--color-red-900);
     background-color: var(--color-red-50);
     text-decoration: none;
 }
@@ -119,6 +110,7 @@ del:before {
 }
 ins {
     color: var(--color-green-900);
+    border-bottom: 1px solid var(--color-green-900);
     background-color: var(--color-green-50);
     text-decoration: none;
 }

src/wc-wysiwyg.ts

@@ -50,6 +50,7 @@ const allTags = [
     { tag: 'audio'},
     { tag: 'video'},
     { tag: 'blockquote'},
+    { tag: 'details'},
 ] as WCWYSIWYGTag[];
 
 class WCWYSIWYG extends HTMLElement {
@@ -99,7 +100,9 @@ class WCWYSIWYG extends HTMLElement {
             //if check exist selection string
             if(selection !== null && selection.toString().length > 0) {
                 this.EditorInlineActionsForm.style.display = '';
-                this.EditorPropertyForm.style.display = 'none';
+                if(this.EditorPropertyForm){
+                    this.EditorPropertyForm.style.display = 'none';
+                }
                 this.showEditorInlineDialog();
             } else {
                 this.hideEditorInlineDialog();
@@ -128,20 +131,13 @@ class WCWYSIWYG extends HTMLElement {
             this.EditorAllowTags = allowTags.split(',');
             this.EditorTags = allTags.filter(tag => allowTags.includes(tag.tag));
 
-            this.#EditProps = this.getAttribute('data-edit-props') !== null ? JSON.parse(this.getAttribute('data-edit-props')) : false;
+            this.#EditProps = this.getAttribute('data-edit-props') !== null ? JSON.parse(this.getAttribute('data-edit-props') || '') : false;
             this.#Autocomplete = this.getAttribute('data-autocomplete') === '1';
             this.#HideBottomActions = this.getAttribute('data-hide-bottom-actions') === '1';
+            
             //allow inline without ['video','audio','img']
             this.EditorInlineActions = this.EditorTags.filter(action =>  ['video','audio','img'].includes(action.tag) === false);
-
-            //Check local storage key
-            this.#SotrageKey = this.getAttribute('data-storage');
-            if(this.#SotrageKey) {
-                let storeValue = window.localStorage.getItem(this.#SotrageKey);
-                if(storeValue) {
-                    this.value = storeValue;
-                }
-            }
+            
             this.EditorActionsSection = el('section', { classList: ['wc-wysiwyg_ec'] });
             //Clear format button
             this.EditorClearFormatBtn = el('button', {
@@ -206,10 +202,58 @@ class WCWYSIWYG extends HTMLElement {
             }
             
             //Actions in footer
-            this.EditorBottomForm = el('fieldset', {
-                classList: ['wc-wysiwyg_bt'],
-            });
+            this.EditorBottomForm = el('fieldset', { classList: ['wc-wysiwyg_bt'] });
             
+            //Check custom tags
+            this.EditorCustomTags = JSON.parse( String(this.getAttribute('data-custom-tags')) );
+            if(this.EditorCustomTags !== null) {
+                //Custom panel tags 
+                this.EditorCustomTagsForm = el('fieldset', {
+                    classList: ['wc-wysiwyg_ce'],
+                });
+                //Make custom actions buttons panel
+                this.#makeActionButtons(this.EditorCustomTagsForm as HTMLElement, this.EditorCustomTags);
+
+                this.appendChild(this.EditorCustomTagsForm as HTMLElement);
+            }
+
+            //Node editable
+            this.EditorNode = el('article', {
+                classList: ['wc-wysiwyg_content', this.getAttribute('data-content-class') || ''],
+                props: {
+                    contentEditable: true,
+                    //Pointer event behaviors
+                    onpointerup: event => {
+                        this.#checkCanClearElement(event);
+                        if(this.#EditProps) {
+                            this.#checkEditProps(event);
+                        }
+                    },
+                    //Update content on input event
+                    oninput: event => {
+                        this.updateContent();
+                        if(this.#Autocomplete) {
+                            this.#checkAutoComplete();
+                        }
+                    },
+                    //Check hot keys is pressed
+                    onkeydown: event => {
+                        this.#checkKeyBindings(event)
+                    }
+                },
+            });
+
+            //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,
+            );
+
             if(this.#HideBottomActions === false) {
                 //Toggler btn text/html
                 this.EditorBottomFormViewToggle = el('button', {
@@ -222,9 +266,9 @@ class WCWYSIWYG extends HTMLElement {
                         type:'button',
                         innerText: 'текст/html5',
                         onpointerup: event => {
-                            let mode = this.EditorBottomFormViewToggle.getAttribute('data-mode');
+                            let mode = this.EditorBottomFormViewToggle?.getAttribute('data-mode');
                             let newMode = mode === 'html5' ? 'text' : 'html5';
-                            this.EditorBottomFormViewToggle.setAttribute('data-mode', newMode);
+                            this.EditorBottomFormViewToggle?.setAttribute('data-mode', newMode);
                             this.EditorNode.style.display = newMode === 'html5' ? '' : 'none';
                             this.EditorPreviewText.classList.toggle('-display-none', newMode === 'html5' ? true : false)
                             if(newMode === 'text') {
@@ -264,103 +308,25 @@ class WCWYSIWYG extends HTMLElement {
                         }
                     }
                 });
-        
-                this.EditorBottomForm.append(
+
+                this.EditorBottomForm?.append(
                     this.EditorBottomFormNewP,
                     this.EditorBottomFormViewToggle,
                     this.EditorFullScreenButton,
                 );
+                this.append(this.EditorBottomForm);
             }
-
-            //Check custom tags
-            this.EditorCustomTags = JSON.parse( String(this.getAttribute('data-custom-tags')) );
-            if(this.EditorCustomTags !== null) {
-                //Custom panel tags 
-                this.EditorCustomTagsForm = el('fieldset', {
-                    classList: ['wc-wysiwyg_ce'],
-                });
-                //Make custom actions buttons panel
-                this.#makeActionButtons(this.EditorCustomTagsForm, this.EditorCustomTags);
-
-                this.appendChild(this.EditorCustomTagsForm);
-            }
-
-            //Node editable
-            this.EditorNode = el('article', {
-                classList: ['wc-wysiwyg_content', this.getAttribute('data-content-class')],
-                props: {
-                    contentEditable: true,
-                    onpointerup: event => {
-                        this.checkCanClearElement(event);
-                        if(this.#EditProps) {
-                            this.checkEditProps(event);
-                        }
-                    },
-                    oninput: event => {
-                        this.updateContent();
-                        if(this.#Autocomplete) {
-                            this.checkAutoComplete();
-                        }
-                    },
-                    //Handle key bindings
-                    onkeydown: event => {
-                        //check hold alt
-                        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);
-                                }
-                            }
-                        }
-                        //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 = window.getSelection();
-                            let tagName = 'p';
-                            //tags with return default browser behavior
-                            if(['LI', 'ARTICLE', 'P'].includes(Selection.anchorNode.parentElement.tagName)) {
-                                return true;
-                            }
-                            const p = el(tagName, { props: { innerHTML: ` ` } });
-                            Selection.anchorNode.parentElement.insertAdjacentElement('afterend', p);
-                            const range = document.createRange();
-                            range.selectNodeContents(p);
-                            Selection.removeAllRanges();
-                            Selection.addRange(range);
-                            event.stopPropagation();
-                            event.preventDefault();
-                        }
-                    }
-                },
-            });
-
-            //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,
-                this.EditorPreviewText,
-                this.EditorBottomForm,
-            );
             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;
+                }
+            }
             this.updateContent();
 
             this.#Connected = true;
@@ -372,6 +338,7 @@ class WCWYSIWYG extends HTMLElement {
      */
     updateContent() {
         this.value = this.EditorNode.innerHTML;
+        this.EditorPreviewText.value = this.value;
         this.checkValidity();
         if(this.#SotrageKey) {
             window.localStorage.setItem(this.#SotrageKey, this.value);
@@ -399,7 +366,7 @@ class WCWYSIWYG extends HTMLElement {
      */
     checkValidity() {
         let hasErros = false,
-            errors= [];
+            errors:string[] = [];
         
         //Check attrs
         if(this.getAttribute('required') !== null) {
@@ -420,8 +387,9 @@ class WCWYSIWYG extends HTMLElement {
                 errors.push(`${this.#t('maxlength')} ${this.getAttribute('maxlength')}`);
             }
         }
-        if(this.getAttribute('filtertags')) {
-            const disallowTags = this.getAttribute('filtertags').split(',');
+        const filterTags = this.getAttribute('filtertags');
+        if(filterTags !== null) {
+            const disallowTags = filterTags.split(',') || [];
             for (let i = 0; i < disallowTags.length; i++) {
                 const checkTag = disallowTags[i];
                 if(this.EditorNode.querySelector(checkTag)) {
@@ -434,7 +402,7 @@ class WCWYSIWYG extends HTMLElement {
         this.EditorNode.classList.toggle('-invalid', hasErros);
         let oldErrors = this.querySelector('.-errors');
         if(oldErrors) {
-            oldErrors.parentElement.removeChild(oldErrors);
+            oldErrors.parentElement?.removeChild(oldErrors);
         }
         if(hasErros) {
             const errosEl = el('p', {
@@ -452,12 +420,12 @@ class WCWYSIWYG extends HTMLElement {
     /**
      * Check if need append autocompleted tags variants
      */
-    checkAutoComplete() {
+    #checkAutoComplete() {
         //CHeck autococmplete 
         const Selecton = window.getSelection();
         if(Selecton !== null && Selecton.anchorNode !== null) {
             const SelectionParentEl = Selecton.anchorNode.parentElement as HTMLParagraphElement;
-            
+            const AutoCompleteForm = this.EditorAutoCompleteForm as HTMLElement;
             if(SelectionParentEl !== null && 
                 //if empty selection
                 Selecton.toString() === '' && 
@@ -470,9 +438,9 @@ class WCWYSIWYG extends HTMLElement {
                         const parsedTagName = SelectionParentEl.innerText.replace('/', '');
                         const filteredActions = this.EditorTags.filter(action => action.tag.toLocaleLowerCase().startsWith(parsedTagName.toLocaleLowerCase()));
                         if(filteredActions.length > 0) {
-                            this.EditorAutoCompleteForm.innerHTML = '';
+                            AutoCompleteForm.innerHTML = '';
                             filteredActions.forEach(action => {
-                                this.EditorAutoCompleteForm.appendChild(el('button', {
+                                AutoCompleteForm?.appendChild(el('button', {
                                     classList: ['wc-wysiwyg_btn', `-${action.tag}`],
                                     attrs: {
                                         'data-hint': this.#t(action.tag) || null,
@@ -484,13 +452,13 @@ class WCWYSIWYG extends HTMLElement {
                                     }
                                 }))
                             });
-                            SelectionParentEl.appendChild(this.EditorAutoCompleteForm);
+                            SelectionParentEl.appendChild(AutoCompleteForm);
                         } else {
                             //clear form
-                            this.EditorAutoCompleteForm.innerHTML = '';
+                            AutoCompleteForm.innerHTML = '';
                             //if exist in DOM detach
-                            if(this.EditorAutoCompleteForm.parentElement) {
-                                this.EditorAutoCompleteForm.parentElement.removeChild(this.EditorAutoCompleteForm);
+                            if(AutoCompleteForm.parentElement) {
+                                AutoCompleteForm.parentElement.removeChild(AutoCompleteForm);
                             }
                         }
                     }
@@ -516,10 +484,10 @@ class WCWYSIWYG extends HTMLElement {
     }
     
     /**
-     * Checking and clear tag, if can do it
+     * Checking clear form and clear, if can do it
      * @param event 
      */
-    checkCanClearElement(event:Event) {
+    #checkCanClearElement(event:Event) {
         const eventTarget = event.target as HTMLElement;
         if(eventTarget !== this.EditorNode) {
             if(eventTarget.nodeName !== 'P' 
@@ -532,7 +500,7 @@ class WCWYSIWYG extends HTMLElement {
                 this.showEditorInlineDialog();
             } else { 
                 this.EditorClearFormatBtn.style.display = 'none';
-                this.EditorClearFormatBtn.onpointerup = undefined;
+                this.EditorClearFormatBtn.onpointerup = null;
             }
         }
     }
@@ -540,8 +508,7 @@ class WCWYSIWYG extends HTMLElement {
     /**
      * Checking click tag for editable props
      **/
-    checkEditProps(event) {
-        //Check need edit props
+    #checkEditProps(event) {
         const eventTarget = event.target as HTMLElement;
         
         //Check exist prop\attr
@@ -591,7 +558,59 @@ class WCWYSIWYG extends HTMLElement {
         }
     }
 
-    #makeActionButtons(toEl:HTMLElement, actions) {
+    /**
+     * Cheking hot keys when keydown pressed
+     * @param event Keyboard event
+     */
+    #checkKeyBindings(event:KeyboardEvent) {
+        //check hold alt
+        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);
+                }
+            }
+        }
+        //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 = window.getSelection();
+            let tagName = 'p';
+            //tags with return default browser behavior
+            if(['LI', 'ARTICLE', 'P'].includes(Selection.anchorNode.parentElement.tagName)) {
+                return false;
+            }
+            const p = el(tagName, { 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();
+        }
+    }
+
+    /**
+     * Make buttons and bind actions
+     * @param toEl htmlelement where append el
+     * @param actions 
+     */
+    #makeActionButtons(toEl:HTMLElement, actions:WCWYSIWYGTag[]) {
         for (let i = 0; i < actions.length; i++) {
             const action = actions[i];
             const button = el('button', {
@@ -600,14 +619,15 @@ class WCWYSIWYG extends HTMLElement {
                     tabIndex: -1,
                     type:'button',
                     textContent: action.is ? `${action.tag} is=${action.is}` : action.tag,
-                    onpointerup: (event) => this.#tag(action.tag, event, action.is),
+                    onpointerup: (event) => {
+                        event.stopPropagation();
+                        this.#tag(action)
+                    },
                 },
                 attrs: {
                     'data-hint': action.hint ? action.hint : this.#t(action.tag) || '-',
                 }
             });
-            //-wc
-            //Make button with 
             toEl.appendChild(button);
         }
     }
@@ -616,44 +636,63 @@ class WCWYSIWYG extends HTMLElement {
     /**
      * Default behaviors fot tag actions
      */
-     #tag = (tag:string, event:Event|false = false, is:boolean|string = false) => {
-        switch (tag) {
+    #tag = (tag:WCWYSIWYGTag) => {
+        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:
-                this.#wrapTag(tag, is);
+                if(typeof tag.method === 'function') {
+                    tag.method.apply(this, tag);
+                } else {
+                    this.#wrapTag(tag, tag.is);
+                }
                 break;
         }
     }
 
+     /**
+     * Insert spoiler
+     **/
+    #Details() {
+        const summaryTitle = prompt('Title', '');
+        if(summaryTitle === '') {
+            return false;
+        }
+        const mediaEl = el('details', { 
+            append: [
+                el('summary', { props: {innerText: summaryTitle} }), 
+                el('p', { props: {innerText: '...'} })] } 
+            );
+        this.EditorNode.append(mediaEl);
+        this.updateContent();
+    }
+
     /**
      * Wrap content in <tag>
      **/
-    #wrapTag = (tag, is:boolean|string = false) => {
-        const isList = ['ul', 'ol'].includes(tag);
+    #wrapTag = (tag:WCWYSIWYGTag, is:boolean|string = false) => {
+        const listTag = ['ul', 'ol'].includes(tag.tag) ? tag.tag : false;
+        const newtag = listTag !== false ? 'li' : tag.tag;
         const Selection = window.getSelection();
-        let className = null;
-        let defaultOptions = {
-            classList: className ? className : undefined,
-        } as any;
-        if(isList) {
-            tag = 'li';
-        }
+        let defaultOptions = {} as any;
         if(is) {
             defaultOptions.options = {is};
         }
-        let tagNode = el(tag, defaultOptions);
+        let tagNode = el(newtag, defaultOptions);
         
         if (Selection !== null && Selection.rangeCount) {
-            if(['ul', 'ol'].includes(tag)) {
-                const list = el(tag);
+            if(listTag !== false) {
+                const list = el(listTag);
                 tagNode.replaceWith(list);
                 list.append(tagNode)
             }
@@ -661,6 +700,7 @@ class WCWYSIWYG extends HTMLElement {
             range.surroundContents(tagNode);
             Selection.removeAllRanges();
             Selection.addRange(range);
+            //If selection has text, insert it
             if(Selection.toString().length === 0) {
                 tagNode.innerText = tag;
             }
@@ -696,15 +736,16 @@ class WCWYSIWYG extends HTMLElement {
         }
         
         if(caption) {
-            const figure = el('figure');
-            
-            const figcaption = el('figcaption', {
-                props: {
-                    textContent: caption
-                }
+            const figure = el('figure', {
+                append: [
+                    img,
+                    el('figcaption', {
+                        props: {
+                            textContent: caption
+                        }
+                    })
+                ]
             });
-            figure.appendChild(img);
-            figure.appendChild(figcaption);
 
             img.setAttribute('alt', caption);
             this.EditorNode.appendChild(figure);