fix(addon-editor): removing all !important styles

taiga-family · Oct 3, 2022 · fbbb264 · fbbb264
1 parent 1dcc3cc
commit fbbb264
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 175 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
@@ -92,11 +92,11 @@
 }
 
 .tui-editor-socket pre code {
-    box-shadow: none !important;
-}
-
-.tui-editor-socket :focus pre {
-    background-color: var(--tui-base-01);
+    &,
+    /* stylelint-disable-next-line */
+    &:not(.hljs):not([class*='language-']):not(.exception) {
+        box-shadow: none;
+    }
 }
 
 .tui-editor-socket pre + pre {
@@ -105,9 +105,9 @@
 }
 
 .tui-editor-socket blockquote {
-    margin: 1.25rem 0 1.25rem 1.5rem !important;
-    padding-left: 1.0625rem !important;
-    border-left: 1px solid var(--tui-base-04) !important;
+    margin: 1.25rem 0 1.25rem 1.5rem;
+    padding-left: 1.0625rem;
+    border-left: 1px solid var(--tui-base-04);
 }
 
 .tui-editor-socket p {
@@ -181,13 +181,13 @@
 }
 
 .tui-editor-socket table td > * {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 .tui-editor-socket table th > * {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 /* stylelint-disable-next-line */

diff --git a/projects/addon-editor/scripts/update-styles.js b/projects/addon-editor/scripts/update-styles.js
diff --git a/projects/addon-editor/styles/editor-socket.css b/projects/addon-editor/styles/editor-socket.css
diff --git a/projects/demo-integrations/cypress/support/editor/helpers.ts b/projects/demo-integrations/cypress/support/editor/helpers.ts
@@ -10,12 +10,22 @@ export function tuiVisitEditorApiPage({
     content,
     maxHeight,
     enableNightMode,
-}: Partial<{content: string; maxHeight: number; enableNightMode: boolean}> = {}): void {
+    skipDecodingUrl,
+}: Partial<{
+    content: string;
+    maxHeight: number;
+    enableNightMode: boolean;
+    skipDecodingUrl: boolean;
+}> = {}): void {
     cy.viewport(1650, 900).tuiVisit(
         `${EDITOR_PAGE_URL}/API?ngModel=${
             content ?? HTML_EDITOR_BASIC_EXAMPLE
         }&style.max-height.px=${maxHeight ?? 300}`,
-        {skipExpectUrl: true, enableNightMode: enableNightMode ?? false},
+        {
+            skipExpectUrl: true,
+            enableNightMode: enableNightMode ?? false,
+            skipDecodingUrl: skipDecodingUrl ?? false,
+        },
     );
 
     cy.wait(DEFAULT_TIMEOUT_BEFORE_ACTION);

diff --git a/projects/demo-integrations/cypress/support/editor/html.ts b/projects/demo-integrations/cypress/support/editor/html.ts
@@ -2,4 +2,10 @@ export const HTML_EDITOR_BASIC_EXAMPLE = `<p><strong>WYSIWYG</strong> (<em>What
 
 export const HTML_EDITOR_EXAMPLE_UL = `<ul><li>1</li><li>2</li></ul><ol><li>A</li><li>B</li></ol>`;
 
+export const HTML_EDITOR_EXAMPLE_BLOCKQUOTE = `<blockquote><p>123123123a</p><p>112323</p></blockquote><p></p>`;
+
+export const HTML_EDITOR_EXAMPLE_PRE_CODE = `<pre><code>%26lt;script%26gt;<%2Fcode><%2Fpre><pre><code>%20const%20hello%20%3D%20"world";<%2Fcode><%2Fpre><pre><code>%26lt;%2Fscript%26gt;<%2Fcode><%2Fpre><p>Hello<%2Fp><pre><code>World<%2Fcode><%2Fpre><p><code>Taiga%20UI<%2Fcode>%20%20by%20%20<code>Tinkoff<%2Fcode><%2Fp>`;
+
+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>`;
diff --git a/projects/demo-integrations/cypress/support/visit.ts b/projects/demo-integrations/cypress/support/visit.ts
@@ -22,6 +22,7 @@ interface TuiVisitOptions {
     noSmoothScroll?: boolean;
     hideHeader?: boolean;
     hideNavigation?: boolean;
+    skipDecodingUrl?: boolean;
     skipExpectUrl?: boolean;
     rootSelector?: string;
     /**
@@ -55,6 +56,7 @@ export function tuiVisit(path: string, options: TuiVisitOptions = {}): void {
         noSmoothScroll = true,
         hideHeader = true,
         skipExpectUrl = false,
+        skipDecodingUrl = false,
         hideNavigation = true,
         hideVersionManager = true,
         hideLanguageSwitcher = true,
@@ -65,9 +67,11 @@ export function tuiVisit(path: string, options: TuiVisitOptions = {}): void {
     stubExternalIcons();
     stubMetrics();
 
-    const encodedPath = encodeURI(
-        decodeURIComponent(path), // @note: prevent twice encoding
-    );
+    const encodedPath = skipDecodingUrl
+        ? path
+        : encodeURI(
+              decodeURIComponent(path), // @note: prevent twice encoding
+          );
 
     cy.visit(`/`, {
         onBeforeLoad: window => {

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
@@ -13,7 +13,10 @@ import {
     tuiVisitEditorApiPage,
 } from '../../support/editor/helpers';
 import {
+    HTML_EDITOR_EXAMPLE_BLOCKQUOTE,
     HTML_EDITOR_EXAMPLE_NESTED_UL,
+    HTML_EDITOR_EXAMPLE_PRE_CODE,
+    HTML_EDITOR_EXAMPLE_TABLE,
     HTML_EDITOR_EXAMPLE_UL,
 } from '../../support/editor/html';
 import {
@@ -217,4 +220,32 @@ describe(`Editor API`, () => {
             tuiGetScreenshotArea().matchImageSnapshot(`8-2-added-new-link`);
         });
     });
+
+    describe(`Check editor styles without important`, () => {
+        for (const {name, content} of [
+            {
+                name: `blockquote`,
+                content: HTML_EDITOR_EXAMPLE_BLOCKQUOTE,
+            },
+            {
+                name: `code`,
+                content: HTML_EDITOR_EXAMPLE_PRE_CODE,
+            },
+            {
+                name: `table`,
+                content: HTML_EDITOR_EXAMPLE_TABLE,
+            },
+        ]) {
+            it(name, () => {
+                tuiVisitEditorApiPage({content, skipDecodingUrl: true});
+
+                cy.get(`[contenteditable]`).focus();
+
+                tuiGetDemoContent()
+                    .find(`tui-editor-socket.tui-example`)
+                    .wait(WAIT_BEFORE_SCREENSHOT)
+                    .matchImageSnapshot();
+            });
+        }
+    });
 });