fix(addon-editor): support nested ordered list inside a bullet list (#…

…2805)
taiga-family · Oct 5, 2022 · 340ebdc · 340ebdc
1 parent a59afe8
commit 340ebdc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/projects/addon-editor/components/editor-socket/editor-socket.component.less b/projects/addon-editor/components/editor-socket/editor-socket.component.less
@@ -43,7 +43,7 @@
     margin: 0 auto;
 }
 
-.tui-editor-socket ul li:before {
+.tui-editor-socket ul > li:before {
     content: '';
     display: inline-block;
     width: 0.5rem;
@@ -71,7 +71,7 @@
     counter-reset: counter;
 }
 
-.tui-editor-socket ol li:before {
+.tui-editor-socket ol > li:before {
     content: counter(counter) '.';
     width: 1.5rem;
     margin: 0 0.75rem 0 -1.5rem;

diff --git a/projects/demo-integrations/cypress/support/editor/html.ts b/projects/demo-integrations/cypress/support/editor/html.ts
@@ -9,3 +9,5 @@ export const HTML_EDITOR_EXAMPLE_PRE_CODE = `<pre><code>%26lt;script%26gt;<%2Fco
 export const HTML_EDITOR_EXAMPLE_TABLE = `<p><%2Fp><table><tbody><tr><th%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>Hello<%2Fp><%2Fth><th%20colspan%3D"1"%20rowspan%3D"1"><p>World<%2Fp><%2Fth><%2Ftr><tr><td%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>1<%2Fp><%2Ftd><td%20colspan%3D"1"%20rowspan%3D"1"><p>2<%2Fp><%2Ftd><%2Ftr><tr><td%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>3<%2Fp><%2Ftd><td%20colspan%3D"1"%20rowspan%3D"1"><p>4<%2Fp><%2Ftd><%2Ftr><%2Ftbody><%2Ftable><p><%2Fp>`;
 
 export const HTML_EDITOR_EXAMPLE_NESTED_UL = `<ul><li>1<ul><li>2<ul><li>3</li><li>4</li></ul></li></ul></li><li>5</li></ul><ol><li>1<ol><li>2<ol><li>3</li><li>4</li></ol></li></ol></li><li>5</li></ol>`;
+
+export const HTML_EDITOR_EXAMPLE_NESTED_OL_UL = `<ul><li><p>Lorem</p><ol><li><p>Ipsum</p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">is simply</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">dummy text of</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the printing</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">and typesetting</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">industry</span></p><p></p></li></ul></li></ul></li></ul></li></ol></li></ul><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Lorem</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Ipsum</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">has been</span></p><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the industry's</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">standard dummy</span></p></li></ol></li></ul></li></ul></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">text ever since the 1500s</span></p></li></ol>`;
diff --git a/projects/demo-integrations/cypress/tests/addon-editor/editor-api.cy.ts b/projects/demo-integrations/cypress/tests/addon-editor/editor-api.cy.ts
@@ -14,6 +14,7 @@ import {
 } from '../../support/editor/helpers';
 import {
     HTML_EDITOR_EXAMPLE_BLOCKQUOTE,
+    HTML_EDITOR_EXAMPLE_NESTED_OL_UL,
     HTML_EDITOR_EXAMPLE_NESTED_UL,
     HTML_EDITOR_EXAMPLE_PRE_CODE,
     HTML_EDITOR_EXAMPLE_TABLE,
@@ -94,7 +95,7 @@ describe(`Editor API`, () => {
                 .matchImageSnapshot(`4-1-bullet-and-ordered-list`);
         });
 
-        it(`nested`, () => {
+        it(`nested ul`, () => {
             tuiVisitEditorApiPage({content: HTML_EDITOR_EXAMPLE_NESTED_UL});
 
             tuiGetDemoContent()
@@ -103,6 +104,15 @@ describe(`Editor API`, () => {
                 .matchImageSnapshot(`5-1-bullet-and-ordered-nested-list`);
         });
 
+        it(`nested ol and ul`, () => {
+            tuiVisitEditorApiPage({content: HTML_EDITOR_EXAMPLE_NESTED_OL_UL});
+
+            tuiGetDemoContent()
+                .find(`tui-editor-socket.tui-example`)
+                .wait(WAIT_BEFORE_SCREENSHOT)
+                .matchImageSnapshot(`5-2-bullet-and-ordered-nested-list`);
+        });
+
         it(`emulate user toggling`, () => {
             tuiVisitEditorApiPage({content: ``});
             tuiGetDemoContent().as(`wrapper`);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@ export const HTML_EDITOR_EXAMPLE_PRE_CODE = `<pre><code>%26lt;script%26gt;<%2Fco
		export const HTML_EDITOR_EXAMPLE_TABLE = `<p><%2Fp><table><tbody><tr><th%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>Hello<%2Fp><%2Fth><th%20colspan%3D"1"%20rowspan%3D"1"><p>World<%2Fp><%2Fth><%2Ftr><tr><td%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>1<%2Fp><%2Ftd><td%20colspan%3D"1"%20rowspan%3D"1"><p>2<%2Fp><%2Ftd><%2Ftr><tr><td%20colspan%3D"1"%20rowspan%3D"1"%20colwidth%3D"121"><p>3<%2Fp><%2Ftd><td%20colspan%3D"1"%20rowspan%3D"1"><p>4<%2Fp><%2Ftd><%2Ftr><%2Ftbody><%2Ftable><p><%2Fp>`;

		export const HTML_EDITOR_EXAMPLE_NESTED_UL = `<ul><li>1<ul><li>2<ul><li>3</li><li>4</li></ul></li></ul></li><li>5</li></ul><ol><li>1<ol><li>2<ol><li>3</li><li>4</li></ol></li></ol></li><li>5</li></ol>`;

		export const HTML_EDITOR_EXAMPLE_NESTED_OL_UL = `<ul><li><p>Lorem</p><ol><li><p>Ipsum</p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">is simply</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">dummy text of</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the printing</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">and typesetting</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">industry</span></p><p></p></li></ul></li></ul></li></ul></li></ol></li></ul><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Lorem</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">Ipsum</span></p><ul><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">has been</span></p><ol><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">the industry's</span></p></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">standard dummy</span></p></li></ol></li></ul></li></ul></li><li><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px">text ever since the 1500s</span></p></li></ol>`;