Merge pull request #11 from webislife/v1

0.9.34 fix for bug with el.fn, update dist folder

dist/core/el.js

@@ -1 +1 @@
-export const el=(tagName,{classList,styles,props,attrs,options,append}={})=>{if(!tagName)throw new Error(`Undefined tag ${tagName}`);const element=document.createElement(tagName,options);if(classList)for(let i=0;i<classList.length;i++){const styleClass=classList[i];element.classList.add(styleClass)}if(styles){const stylesKeys=Object.keys(styles);for(let i=0;i<stylesKeys.length;i++){const key=stylesKeys[i];element.style[key]=styles[key]}}if(props){const propKeys=Object.keys(props);for(let i=0;i<propKeys.length;i++){const key=propKeys[i];element[key]=props[key]}}if(attrs){const attrsKeys=Object.keys(attrs);for(let i=0;i<attrsKeys.length;i++){const key=attrsKeys[i];attrs[key]&&element.setAttribute(key,attrs[key])}}if(append)for(let i=0;i<append.length;i++){const appendEl=append[i];element.append(appendEl)}return element};
+export const el=(tagName,{classList,styles,props,attrs,options,append}={})=>{if(!tagName)throw new Error(`Undefined tag ${tagName}`);const element=document.createElement(tagName,options);if(classList)for(let i=0;i<classList.length;i++)classList[i]&&element.classList.add(classList[i]);if(styles&&Object.assign(element.style,styles),props){const propKeys=Object.keys(props);for(let i=0;i<propKeys.length;i++){const key=propKeys[i];element[key]=props[key]}}if(attrs){const attrsKeys=Object.keys(attrs);for(let i=0;i<attrsKeys.length;i++){const key=attrsKeys[i];attrs[key]&&element.setAttribute(key,attrs[key])}}return append&&element.append(...append),element};

dist/sass/content.css

@@ -75,19 +75,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; }
 
@@ -104,6 +95,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; }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webislife/wc-wysiwyg",
-    "version": "0.9.32",
+    "version": "0.9.34",
     "description": "WYWSIWYG HTML5 Editor written in ts and designed by web-componennt, support all JS frameworks and browsers",
     "main": "dist/wc-wysiwyg.js",
     "type": "module",

src/core/el.ts

@@ -1,8 +1,8 @@
 /**
- * Short
+ * Short for document.createElement
  * @param tagName element tag name
  * @param params list of object params for document.createElements
- * @returns 
+ * @returns HTMLElement\CustomElement
  */
  export const el = (tagName:keyof HTMLElementTagNameMap|string, {classList, styles, props, attrs, options, append}:{
     classList?: string[],
@@ -21,17 +21,14 @@
     // element.classList
     if(classList) {
         for (let i = 0; i < classList.length; i++) {
-            const styleClass = classList[i];
-            element.classList.add(styleClass)
+            if(classList[i]){
+                element.classList.add(classList[i]);
+            }
         }
     }
     // element.style[prop]
     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 +48,10 @@
             }
         }
     }
+    //append child elements
     if(append) {
-        for (let i = 0; i < append.length; i++) {
-            const appendEl = append[i];
-            element.append(appendEl);
-        }
+        element.append(...append);
     }
+    
     return element;
 };

src/wc-wysiwyg.ts

@@ -680,18 +680,15 @@ class WCWYSIWYG extends HTMLElement {
     /**
      * Wrap content in <tag>
      **/
-    #wrapTag = (tag, is:boolean|string = false) => {
-        const listTag = ['ul', 'ol'].includes(tag) ? tag : false;
-        tag = listTag !== false ? 'li' : 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;
+        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(listTag !== false) {