fix: apply style if all list is selected

peterpeterparker · peterpeterparker · commit 187edb064b6c · 2020-10-29T13:07:29.000+01:00
diff --git a/webcomponents/inline-editor/src/index.html b/webcomponents/inline-editor/src/index.html
@@ -11,6 +11,11 @@
   <body style="overflow: hidden">
     <p contenteditable>Bet on the Web</p>
 
+    <ul contenteditable="true">
+      <li>lksandsk</li>
+      <li>sadflkmdsklm</li>
+    </ul>
+
     <h2 contenteditable>Environment variables with StencilJS</h2>
 
     <div>
@@ -34,7 +39,7 @@ <h3 contenteditable>Credits</h3>
 
     <p contenteditable><img style="width: 100px" src="https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png" /></p>
 
-    <deckgo-inline-editor sticky-mobile="true" containers="h1,h2,h3,h4,h5,h6,p" img-editable="true" custom-actions="my-inline-action">
+    <deckgo-inline-editor sticky-mobile="true" containers="h1,h2,h3,h4,h5,h6,p,ol,ul" img-editable="true" custom-actions="my-inline-action">
       <span style="color: red" slot="my-inline-action">My</span>
     </deckgo-inline-editor>
 
diff --git a/webcomponents/inline-editor/src/utils/execcommand-style.utils.tsx b/webcomponents/inline-editor/src/utils/execcommand-style.utils.tsx
@@ -32,6 +32,12 @@ async function updateSelection(container: HTMLElement, action: ExecCommandStyle,
 async function replaceSelection(container: HTMLElement, action: ExecCommandStyle, selection: Selection, containers: string) {
   const range: Range = selection.getRangeAt(0);
 
+  // User selected a all list?
+  if (range.commonAncestorContainer && ['ol', 'ul', 'dl'].some((listType) => listType === range.commonAncestorContainer.nodeName.toLowerCase())) {
+    await updateSelection(range.commonAncestorContainer as HTMLElement, action, containers);
+    return;
+  }
+
   const fragment: DocumentFragment = range.extractContents();
 
   const span: HTMLSpanElement = await createSpan(container, action, containers);
