fix(blocks): support overlapping of inline styles (#6998)

Close #6986 https://github.com/toeverything/blocksuite/assets/50035259/a425bc24-b87e-45c3-90e9-cf02d339c61f
toeverything · May 10, 2024 · b5e411a · b5e411a
1 parent 523d713
commit b5e411a
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 63 deletions.
diff --git a/packages/blocks/src/_common/inline/presets/affine-inline-specs.ts b/packages/blocks/src/_common/inline/presets/affine-inline-specs.ts
@@ -77,16 +77,6 @@ export const affineInlineSpecsWithoutReference: InlineSpecs<AffineTextAttributes
         return html`<affine-text .delta=${delta}></affine-text>`;
       },
     },
-    {
-      name: 'link',
-      schema: z.string().optional().nullable().catch(undefined),
-      match: delta => {
-        return !!delta.attributes?.link;
-      },
-      renderer: delta => {
-        return html`<affine-link .delta=${delta}></affine-link>`;
-      },
-    },
     {
       name: 'background',
       schema: z.string().optional().nullable().catch(undefined),
@@ -140,5 +130,15 @@ export function getAffineInlineSpecsWithReference(
       },
       embed: true,
     },
+    {
+      name: 'link',
+      schema: z.string().optional().nullable().catch(undefined),
+      match: delta => {
+        return !!delta.attributes?.link;
+      },
+      renderer: delta => {
+        return html`<affine-link .delta=${delta}></affine-link>`;
+      },
+    },
   ];
 }
diff --git a/packages/blocks/src/_common/inline/presets/nodes/affine-text.ts b/packages/blocks/src/_common/inline/presets/nodes/affine-text.ts
@@ -1,6 +1,6 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { type DeltaInsert, ZERO_WIDTH_SPACE } from '@blocksuite/inline';
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
@@ -44,13 +44,6 @@ export function affineTextStyles(
 
 @customElement('affine-text')
 export class AffineText extends ShadowlessElement {
-  static override styles = css`
-    affine-text {
-      white-space: break-spaces;
-      word-break: break-word;
-    }
-  `;
-
   @property({ type: Object })
   delta: DeltaInsert<AffineTextAttributes> = {
     insert: ZERO_WIDTH_SPACE,

diff --git a/packages/blocks/src/_common/inline/presets/nodes/link-node/affine-link.ts b/packages/blocks/src/_common/inline/presets/nodes/link-node/affine-link.ts
@@ -62,22 +62,9 @@ export class AffineLink extends ShadowlessElement {
   }
 
   static override styles = css`
-    affine-link > a {
-      white-space: nowrap;
-      word-break: break-word;
-      color: var(--affine-link-color);
-      fill: var(--affine-link-color);
-      text-decoration: none;
-      cursor: pointer;
-    }
-
     affine-link > a:hover [data-v-text='true'] {
       text-decoration: underline;
     }
-
-    affine-link > a > v-text {
-      white-space: break-spaces;
-    }
   `;
 
   private _whenHover = new HoverController(this, ({ abortController }) => {
@@ -129,7 +116,12 @@ export class AffineLink extends ShadowlessElement {
 
   override render() {
     const style = this.delta.attributes
-      ? affineTextStyles(this.delta.attributes)
+      ? affineTextStyles(this.delta.attributes, {
+          color: 'var(--affine-link-color)',
+          fill: 'var(--affine-link-color)',
+          'text-decoration': 'none',
+          cursor: 'pointer',
+        })
       : styleMap({});
 
     return html`<a

diff --git a/packages/blocks/src/_common/inline/presets/nodes/link-node/link-popup/link-popup.ts b/packages/blocks/src/_common/inline/presets/nodes/link-node/link-popup/link-popup.ts
@@ -217,14 +217,10 @@ export class LinkPopup extends WithDisposable(LitElement) {
     const link = normalizeUrl(linkInputValue);
 
     if (this.type === 'create') {
-      this.inlineEditor.formatText(
-        this.targetInlineRange,
-        {
-          link: link,
-          reference: null,
-        },
-        { mode: 'replace' }
-      );
+      this.inlineEditor.formatText(this.targetInlineRange, {
+        link: link,
+        reference: null,
+      });
       this.inlineEditor.setInlineRange(this.targetInlineRange);
       const textSelection = this.host.selection.find('text');
       assertExists(textSelection);

diff --git a/packages/blocks/src/_common/inline/presets/nodes/reference-node/reference-node.ts b/packages/blocks/src/_common/inline/presets/nodes/reference-node/reference-node.ts
@@ -58,7 +58,6 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
       margin-left: 4px;
       border-bottom: 0.5px solid var(--affine-divider-color);
       transition: border 0.2s ease-out;
-      white-space: break-spaces;
     }
     .affine-reference-title:hover {
       border-bottom: 0.5px solid var(--affine-icon-color);

diff --git a/packages/blocks/src/code-block/affine-code-line.ts b/packages/blocks/src/code-block/affine-code-line.ts
@@ -32,15 +32,7 @@ export class AffineCodeLine extends ShadowlessElement {
     const { lang, highlighter } = this.highlightOptionsGetter();
 
     if (!highlighter || !highlighter.getLoadedLanguages().includes(lang)) {
-      return html`<span
-        ><v-text
-          .str=${this.delta.insert}
-          .styles=${{
-            'word-wrap': 'break-word',
-            'white-space': 'break-spaces',
-          }}
-        ></v-text
-      ></span>`;
+      return html`<span><v-text .str=${this.delta.insert}></v-text></span>`;
     }
 
     const mode = getThemeMode();
@@ -66,8 +58,6 @@ export class AffineCodeLine extends ShadowlessElement {
       return html`<v-text
         .str=${token.content}
         .styles=${{
-          'word-wrap': 'break-word',
-          'white-space': 'break-spaces',
           color: token.color,
         }}
       ></v-text>`;

diff --git a/packages/framework/inline/src/components/v-text.ts b/packages/framework/inline/src/components/v-text.ts
@@ -12,7 +12,10 @@ export class VText extends LitElement {
   @property({ attribute: false })
   styles: StyleInfo = {
     'word-break': 'break-word',
-    'white-space': 'pre-wrap',
+    // In most cases, break-spaces should be used.
+    // When replacing, pay attention to the differences in handling spaces for different keywords.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+    'white-space': 'break-spaces',
     cursor: 'text',
   };
 

diff --git a/packages/framework/inline/src/utils/attribute-renderer.ts b/packages/framework/inline/src/utils/attribute-renderer.ts
@@ -30,8 +30,6 @@ function inlineTextStyles(
   }
 
   return styleMap({
-    'word-wrap': 'break-word',
-    'white-space': 'break-spaces',
     'font-weight': props.bold ? 'bold' : 'normal',
     'font-style': props.italic ? 'italic' : 'normal',
     'text-decoration': textDecorations.length > 0 ? textDecorations : 'none',

diff --git a/packages/playground/examples/inline/test-page.ts b/packages/playground/examples/inline/test-page.ts
@@ -46,8 +46,6 @@ function inlineTextStyles(
   }
 
   return styleMap({
-    'word-wrap': 'break-word',
-    'white-space': 'break-spaces',
     'font-weight': props.bold ? 'bold' : 'normal',
     'font-style': props.italic ? 'italic' : 'normal',
     'text-decoration': textDecorations.length > 0 ? textDecorations : 'none',
@@ -73,10 +71,7 @@ const attributeRenderer: AttributeRenderer = (
 
   const style = delta.attributes
     ? inlineTextStyles(delta.attributes)
-    : styleMap({
-        'white-space': 'break-spaces',
-        'word-wrap': 'break-word',
-      });
+    : styleMap({});
 
   return html`<span style=${style}
     ><v-text .str=${delta.insert}></v-text
@@ -204,8 +199,6 @@ export class TestRichText extends ShadowlessElement {
 
         .rich-text-container {
           outline: none;
-          word-break: break-word;
-          white-space: break-spaces;
         }
 
         code {