diff --git a/projects/addon-editor/components/editor-socket/editor-socket.component.less b/projects/addon-editor/components/editor-socket/editor-socket.component.less index 3262aaf437a4c..7a8d8c07edd96 100644 --- 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 deleted file mode 100644 index 8e2ef4e27f0b5..0000000000000 --- a/projects/addon-editor/scripts/update-styles.js +++ /dev/null @@ -1,10 +0,0 @@ -const {resolve} = require('path'); -const {writeFileSync, readFileSync} = require('fs-extra'); - -const content = resolve(__dirname, '..', 'styles', 'editor-socket.css'); -const file = resolve(__dirname, '..', 'constants', 'default-editor-styles.ts'); -const styles = readFileSync(content, 'utf-8'); - -writeFileSync(file, `export const defaultEditorStyles = \`${styles}\`;`, { - encoding: 'utf-8', -}); diff --git a/projects/addon-editor/styles/editor-socket.css b/projects/addon-editor/styles/editor-socket.css deleted file mode 100644 index df0c9d37e7520..0000000000000 --- a/projects/addon-editor/styles/editor-socket.css +++ /dev/null @@ -1,148 +0,0 @@ -@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap'; - -/* stylelint-disable */ - -body.tui-editor-socket { - margin: 0; - overflow: hidden; - padding: 0 16px; -} - -.tui-editor-socket { - display: block; - color: var(--tui-text-01); - font-size: 15px; - font-family: tuiText, 'Manrope', sans-serif; - line-height: 24px; - white-space: pre-wrap; -} - -.tui-editor-socket ul, -.tui-editor-socket ol { - list-style-type: none; - margin: 16px 16px 16px 24px; - padding: 0; -} - -.tui-editor-socket li { - margin: 16px 0; -} - -.tui-editor-socket ul li:before { - content: ''; - display: inline-block; - width: 8px; - height: 8px; - border-radius: 100%; - margin: 0 14px 1px -22px; - background-color: #ffdd2d; -} - -.tui-editor-socket ol { - counter-reset: counter; -} - -.tui-editor-socket ol li:before { - content: counter(counter) '.'; - width: 24px; - margin: 0 12px 0 -24px; - counter-increment: counter; - color: #909090; -} - -.tui-editor-socket pre { - white-space: pre-wrap; - border-radius: 4px; - margin: 16px 0; - padding: 12px 16px; - font-family: 'Courier', monospace; - color: #666666; - background-color: #f5f5f6; -} - -.tui-editor-socket pre + pre { - margin-top: -29px; - padding-top: 0; -} - -.tui-editor-socket blockquote { - margin: 20px 0 20px 24px !important; - padding-left: 17px !important; - border-left: 1px solid #cbcfd3 !important; -} - -.tui-editor-socket p { - margin: 16px 0; -} - -.tui-editor-socket a { - color: #3d7ab6; - text-decoration: none; - outline: none; -} - -.tui-editor-socket a:hover { - color: #369; - text-decoration: underline; -} - -.tui-editor-socket a:active { - color: #29527c; -} - -.tui-editor-socket hr { - border: none; - border-top: 1px solid #e7e8ea; - margin: 16px 0; -} - -.tui-editor-socket font[face='Courier New'] { - padding: 4px 8px; - border-radius: 4px; - background-color: #ecf1f7; - display: inline-block; - word-break: break-word; -} - -.tui-editor-socket font[size='1'] { - font-size: 11px; - line-height: 16px; -} - -.tui-editor-socket font[size='2'] { - font-size: 13px; - line-height: 20px; -} - -.tui-editor-socket font[size='3'] { - font-size: 15px; - line-height: 24px; -} - -.tui-editor-socket font[size='4'] { - font-size: 17px; - line-height: 24px; -} - -.tui-editor-socket font[size='5'], -.tui-editor-socket font[size='6'], -.tui-editor-socket font[size='7'] { - display: block; - margin: 32px 0 16px; - font-family: var(--tui-font-heading); -} - -.tui-editor-socket font[size='5'] { - font-size: 24px; - line-height: 28px; -} - -.tui-editor-socket font[size='6'] { - font-size: 30px; - line-height: 36px; -} - -.tui-editor-socket font[size='7'] { - font-size: 40px; - line-height: 44px; -} diff --git a/projects/demo-integrations/cypress/support/editor/helpers.ts b/projects/demo-integrations/cypress/support/editor/helpers.ts index 5f0f2acc4cd6a..ac5170e10df60 100644 --- 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 index bd7e1a9add244..26e4edd7b51c6 100644 --- 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 = `

WYSIWYG (What export const HTML_EDITOR_EXAMPLE_UL = `

  1. A
  2. B
`; +export const HTML_EDITOR_EXAMPLE_BLOCKQUOTE = `

123123123a

112323

`; + +export const HTML_EDITOR_EXAMPLE_PRE_CODE = `
%26lt;script%26gt;<%2Fcode><%2Fpre>
%20const%20hello%20%3D%20"world";<%2Fcode><%2Fpre>
%26lt;%2Fscript%26gt;<%2Fcode><%2Fpre>
Hello<%2Fp>
World<%2Fcode><%2Fpre>
Taiga%20UI<%2Fcode>%20%20by%20%20Tinkoff<%2Fcode><%2Fp>`;
+
+export const HTML_EDITOR_EXAMPLE_TABLE = `
<%2Fp>
Hello<%2Fp><%2Fth>
World<%2Fp><%2Fth><%2Ftr>
1<%2Fp><%2Ftd>
2<%2Fp><%2Ftd><%2Ftr>
3<%2Fp><%2Ftd>
4<%2Fp><%2Ftd><%2Ftr><%2Ftbody><%2Ftable>
<%2Fp>`;
+
 export const HTML_EDITOR_EXAMPLE_NESTED_UL = `
  • 1
    • 2
      • 3
      • 4
  • 5
  1. 1
    1. 2
      1. 3
      2. 4
  2. 5
`;
diff --git a/projects/demo-integrations/cypress/support/visit.ts b/projects/demo-integrations/cypress/support/visit.ts
index 21fb8fbb3f5c0..cfe57aa21a15f 100644
--- 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
index 16616b8f2f02c..5a61846946ebc 100644
--- 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();
+            });
+        }
+    });
 });