@aquera/nile-elements 1.1.8-beta-1.2 → 1.1.8-beta-1.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.1.8-beta-1.2",
+  "version": "1.1.8-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-rich-text-editor/utils.ts

@@ -583,39 +583,110 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
   const sel = document.getSelection();
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
+  function styleList(list: HTMLElement) {
+    list.style.paddingInlineStart = '0';
+    list.style.margin = '0';
+  }
+
+  function isEmptyBlock(el: HTMLElement) {
+    return !el.textContent?.trim() && !el.querySelector('img,br');
+  }
+
+  function setCursorInside(el: HTMLElement) {
+    const selection = document.getSelection();
+    if (!selection) return;
+    const r = document.createRange();
+    r.selectNodeContents(el);
+    r.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(r);
+  }
+
+  function closestBlock(node: Node | null): HTMLElement | null {
+    while (node && node !== root) {
+      if (node instanceof HTMLElement) {
+        const display = getComputedStyle(node).display;
+        if (
+          node.tagName.match(/^(P|DIV|H[1-6]|LI)$/) ||
+          display === 'block' ||
+          display === 'list-item'
+        )
+          return node;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+
+  function unwrapList(list: HTMLElement) {
+    const frag = document.createDocumentFragment();
+    (Array.from(list.querySelectorAll('li')) as HTMLElement[]).forEach((li) => {
+      const p = document.createElement('p');
+      if (li.style.textAlign) p.style.textAlign = li.style.textAlign;  
+      while (li.firstChild) p.appendChild(li.firstChild);
+      frag.appendChild(p);
+    });
+    list.replaceWith(frag);
+  }
+  
+  function unwrapListItem(block: HTMLElement) {
+    const li = block.closest('li');
+    if (!li) return;
+    const list = li.parentElement as HTMLElement;
+    const p = document.createElement('p');
+    if (li.style.textAlign) p.style.textAlign = li.style.textAlign; 
+    while (li.firstChild) p.appendChild(li.firstChild);
+    list.parentNode?.insertBefore(p, list.nextSibling);
+    li.remove();
+    if (list.childNodes.length === 0) list.remove();
+    setCursorInside(p);
+  }
+  
+
+  function switchListType(list: HTMLElement, newType: 'ul' | 'ol') {
+    const newList = document.createElement(newType);
+    styleList(newList);
+    while (list.firstChild) newList.appendChild(list.firstChild);
+    list.replaceWith(newList);
+  }
   if (range.collapsed) {
-    const block = closestBlock(range.startContainer, root);
-    if (!block || block === root || block.childNodes.length === 0) {
+    const block = closestBlock(range.startContainer);
+    const insideList = block?.closest('ul,ol') as HTMLElement | null;
+    if (insideList && insideList.tagName.toLowerCase() === kind) {
+      unwrapListItem(block as HTMLElement);
+      return;
+    }
+
+    if (insideList && insideList.tagName.toLowerCase() !== kind) {
+      switchListType(insideList, kind);
+      return;
+    }
+    if (!block || block === root || block.childNodes.length === 0 || isEmptyBlock(block)) {
       const list = document.createElement(kind);
       const li = document.createElement('li');
       li.appendChild(document.createElement('br'));
       list.appendChild(li);
+      styleList(list);
       range.insertNode(list);
-      const r = document.createRange();
-      r.selectNodeContents(li);
-      r.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(r);
+      setCursorInside(li);
       return;
     }
     const list = document.createElement(kind);
+    styleList(list);
     const li = document.createElement('li');
+    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
     while (block.firstChild) li.appendChild(block.firstChild);
     list.appendChild(li);
     block.replaceWith(list);
-    const r = document.createRange();
-    r.selectNodeContents(li);
-    r.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(r);
+    setCursorInside(li);
     return;
   }
+
   const blocks: HTMLElement[] = [];
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (n) => {
       if (!(n instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
       if (!/^(P|DIV|LI|H[1-6])$/.test(n.tagName)) return NodeFilter.FILTER_SKIP;
-
       const r = document.createRange();
       r.selectNodeContents(n);
       const intersects =
@@ -624,12 +695,11 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
       return intersects ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     },
   });
-
   let n: Node | null;
   while ((n = walker.nextNode())) blocks.push(n as HTMLElement);
 
   if (blocks.length === 0) {
-    const block = closestBlock(range.startContainer, root);
+    const block = closestBlock(range.startContainer);
     if (block) blocks.push(block);
   }
 
@@ -637,37 +707,15 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
   if (firstLi) {
     const currentList = firstLi.closest('ul,ol') as HTMLElement | null;
     if (!currentList) return;
-    const currentAlign =
-      (firstLi as HTMLElement).style.textAlign ||
-      (currentList as HTMLElement).style.textAlign ||
-      '';
-
-    if (currentList.tagName.toLowerCase() === kind) {
-      const frag = document.createDocumentFragment();
-      for (const li of Array.from(currentList.querySelectorAll('li'))) {
-        const p = document.createElement('p');
-        p.style.textAlign = (li as HTMLElement).style.textAlign || currentAlign || '';
-        while (li.firstChild) p.appendChild(li.firstChild);
-        frag.appendChild(p);
-      }
-      currentList.replaceWith(frag);
-    } else {
-      const newList = document.createElement(kind);
-      while (currentList.firstChild) {
-        const li = currentList.firstChild as HTMLElement;
-        li.style.textAlign = li.style.textAlign || currentAlign || '';
-        newList.appendChild(li);
-      }
-      currentList.replaceWith(newList);
-    }
+    if (currentList.tagName.toLowerCase() === kind) unwrapList(currentList);
+    else switchListType(currentList, kind);
     return;
   }
-
   const newList = document.createElement(kind);
+  styleList(newList);
   for (const block of blocks) {
     const li = document.createElement('li');
-    const align = block.style.textAlign;
-    if (align) li.style.textAlign = align;
+    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
     while (block.firstChild) li.appendChild(block.firstChild);
     newList.appendChild(li);
   }
@@ -677,6 +725,8 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
 
 
 
+
+
 export function insertOrEditLink(root: HTMLElement, href?: string) {
   const sel = document.getSelection();
   if (!sel || sel.rangeCount === 0) return;
@@ -712,7 +762,7 @@ export function insertOrEditLink(root: HTMLElement, href?: string) {
     const r = document.createRange();
     r.setStartAfter(link);
     r.collapse(true);
-    sel.removeAllRanges();
+    sel?.removeAllRanges();
     sel.addRange(r);
     return;
   }