refactor(editor): narrow text format parameter (#12946)

#### PR Dependency Tree


* **PR #12946** 👈
  * **PR #12947**
    * **PR #12948**

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Updated terminology and types from "text style" to "text attributes"
throughout the text formatting features for improved clarity and
consistency.
* Separated style-specific attributes (like bold, italic, color, and
background) from other text metadata.
* Renamed relevant commands and updated menu and toolbar configurations
to use the new attribute structure.

* **New Features**
* Added support for color and background properties in text style
attributes.

* **Bug Fixes**
* Improved consistency and reliability in text formatting and
highlighting behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/inlines/preset/src/command/config.ts

@@ -11,7 +11,7 @@ import { type EditorHost, TextSelection } from '@blocksuite/std';
 import type { TemplateResult } from 'lit';
 
 import {
-  isTextStyleActive,
+  isTextAttributeActive,
   toggleBold,
   toggleCode,
   toggleItalic,
@@ -38,7 +38,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'bold' })
+        .pipe(isTextAttributeActive, { key: 'bold' })
         .run();
       return result;
     },
@@ -54,7 +54,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'italic' })
+        .pipe(isTextAttributeActive, { key: 'italic' })
         .run();
       return result;
     },
@@ -70,7 +70,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'underline' })
+        .pipe(isTextAttributeActive, { key: 'underline' })
         .run();
       return result;
     },
@@ -86,7 +86,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'strike' })
+        .pipe(isTextAttributeActive, { key: 'strike' })
         .run();
       return result;
     },
@@ -102,7 +102,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'code' })
+        .pipe(isTextAttributeActive, { key: 'code' })
         .run();
       return result;
     },
@@ -118,7 +118,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'link' })
+        .pipe(isTextAttributeActive, { key: 'link' })
         .run();
       return result;
     },

blocksuite/affine/inlines/preset/src/command/format-text.ts

@@ -1,6 +1,9 @@
 import { clearMarksOnDiscontinuousInput } from '@blocksuite/affine-rich-text';
 import { getSelectedBlocksCommand } from '@blocksuite/affine-shared/commands';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type {
+  AffineTextAttributes,
+  AffineTextStyleAttributes,
+} from '@blocksuite/affine-shared/types';
 import type { Command, TextSelection } from '@blocksuite/std';
 import {
   INLINE_ROOT_ATTR,
@@ -13,7 +16,7 @@ import { FORMAT_TEXT_SUPPORT_FLAVOURS } from './consts.js';
 export const formatTextCommand: Command<{
   currentTextSelection?: TextSelection;
   textSelection?: TextSelection;
-  styles: AffineTextAttributes;
+  styles: AffineTextStyleAttributes;
   mode?: 'replace' | 'merge';
 }> = (ctx, next) => {
   const { styles, mode = 'merge' } = ctx;

blocksuite/affine/inlines/preset/src/command/index.ts

@@ -10,8 +10,8 @@ export { formatBlockCommand } from './format-block.js';
 export { formatNativeCommand } from './format-native.js';
 export { formatTextCommand } from './format-text.js';
 export {
-  getTextStyle,
-  isTextStyleActive,
+  getTextAttributes,
+  isTextAttributeActive,
   toggleBold,
   toggleCode,
   toggleItalic,

blocksuite/affine/inlines/preset/src/command/text-style.ts

@@ -2,25 +2,31 @@ import {
   getBlockSelectionsCommand,
   getTextSelectionCommand,
 } from '@blocksuite/affine-shared/commands';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type {
+  AffineTextAttributes,
+  AffineTextStyleAttributes,
+} from '@blocksuite/affine-shared/types';
 import type { Command } from '@blocksuite/std';
 
 import { formatBlockCommand } from './format-block.js';
 import { formatNativeCommand } from './format-native.js';
 import { formatTextCommand } from './format-text.js';
-import { getCombinedTextStyle } from './utils.js';
+import { getCombinedTextAttributes } from './utils.js';
 
 export const toggleTextStyleCommand: Command<{
   key: Extract<
-    keyof AffineTextAttributes,
+    keyof AffineTextStyleAttributes,
     'bold' | 'italic' | 'underline' | 'strike' | 'code'
   >;
 }> = (ctx, next) => {
   const { std, key } = ctx;
-  const [active] = std.command.chain().pipe(isTextStyleActive, { key }).run();
+  const [active] = std.command
+    .chain()
+    .pipe(isTextAttributeActive, { key })
+    .run();
 
   const payload: {
-    styles: AffineTextAttributes;
+    styles: AffineTextStyleAttributes;
     mode?: 'replace' | 'merge';
   } = {
     styles: {
@@ -46,7 +52,7 @@ export const toggleTextStyleCommand: Command<{
 
 const toggleTextStyleCommandWrapper = (
   key: Extract<
-    keyof AffineTextAttributes,
+    keyof AffineTextStyleAttributes,
     'bold' | 'italic' | 'underline' | 'strike' | 'code'
   >
 ): Command => {
@@ -66,30 +72,29 @@ export const toggleUnderline = toggleTextStyleCommandWrapper('underline');
 export const toggleStrike = toggleTextStyleCommandWrapper('strike');
 export const toggleCode = toggleTextStyleCommandWrapper('code');
 
-export const getTextStyle: Command<{}, { textStyle: AffineTextAttributes }> = (
-  ctx,
-  next
-) => {
-  const [result, innerCtx] = getCombinedTextStyle(
+export const getTextAttributes: Command<
+  {},
+  { textAttributes: AffineTextAttributes }
+> = (ctx, next) => {
+  const [result, innerCtx] = getCombinedTextAttributes(
     ctx.std.command.chain()
   ).run();
   if (!result) {
     return false;
   }
 
-  return next({ textStyle: innerCtx.textStyle });
+  return next({ textAttributes: innerCtx.textAttributes });
 };
 
-export const isTextStyleActive: Command<{ key: keyof AffineTextAttributes }> = (
-  ctx,
-  next
-) => {
+export const isTextAttributeActive: Command<{
+  key: keyof AffineTextAttributes;
+}> = (ctx, next) => {
   const key = ctx.key;
-  const [result] = getCombinedTextStyle(ctx.std.command.chain())
+  const [result] = getCombinedTextAttributes(ctx.std.command.chain())
     .pipe((ctx, next) => {
-      const { textStyle } = ctx;
+      const { textAttributes } = ctx;
 
-      if (textStyle && key in textStyle) {
+      if (textAttributes && key in textAttributes) {
         return next();
       }
 

blocksuite/affine/inlines/preset/src/command/utils.ts

@@ -77,8 +77,8 @@ function handleCurrentSelection(
   handler: (
     type: 'text' | 'block' | 'native',
     inlineEditors: InlineEditor<AffineTextAttributes>[]
-  ) => { textStyle: AffineTextAttributes } | boolean | void
-): Chain<InitCommandCtx & { textStyle: AffineTextAttributes }> {
+  ) => { textAttributes: AffineTextAttributes } | boolean | void
+): Chain<InitCommandCtx & { textAttributes: AffineTextAttributes }> {
   return chain.try(chain => [
     // text selection, corresponding to `formatText` command
     chain
@@ -174,25 +174,25 @@ function handleCurrentSelection(
   ]);
 }
 
-export function getCombinedTextStyle(chain: Chain<InitCommandCtx>) {
+export function getCombinedTextAttributes(chain: Chain<InitCommandCtx>) {
   return handleCurrentSelection(chain, (type, inlineEditors) => {
     if (type === 'text') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, e.getInlineRange()])
         ),
       };
     }
     if (type === 'block') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, { index: 0, length: e.yTextLength }])
         ),
       };
     }
     if (type === 'native') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, e.getInlineRange()])
         ),
       };