Merge pull request #1864 from merico-dev/richtext-lineheight

feat(rich-text-editor): Add line height control

Author: ZeekoZhu

CHANGELOG.md

@@ -0,0 +1,19 @@
+## 15.58.9 (2025-12-09)
+
+### 🚀 Features
+
+- **rich-text-editor:** Add line height control ([e1ab982d7](https://github.com/merico-dev/table/commit/e1ab982d7))
+
+### ❤️ Thank You
+
+- ZeekoZhu
+
+## v15.58.9 (2025-12-09)
+
+### 🚀 Features
+
+- **rich-text-editor:** Add line height control ([e1ab982d7](https://github.com/merico-dev/table/commit/e1ab982d7))
+
+### ❤️ Thank You
+
+- ZeekoZhu

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.57.2",
+  "version": "14.58.9",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.58.8",
+  "version": "14.58.9",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"

dashboard/src/components/widgets/rich-text-editor/custom-rich-text-editor.tsx

@@ -30,6 +30,7 @@ import {
   ClearInteractionBlockControl,
   InteractionBlockControl,
 } from './interaction-block-node/interaction-block-control';
+import { LineHeightControl, LineHeightMark } from './line-height-mark';
 
 const RTEContentStyle: EmotionSx = {
   'dynamic-color': {
@@ -108,6 +109,7 @@ export const CustomRichTextEditor = forwardRef(
         TextStyle,
         Color,
         FontSize,
+        LineHeightMark,
         DynamicColorMark,
         InteractionBlock,
       ];
@@ -231,6 +233,7 @@ export const CustomRichTextEditor = forwardRef(
             </RichTextEditor.ControlsGroup>
 
             <ChooseFontSize editor={editor} />
+            <LineHeightControl editor={editor} />
           </RichTextEditor.Toolbar>
           <RichTextEditor.Content />
         </RichTextEditor>

dashboard/src/components/widgets/rich-text-editor/font-size-extension.tsx

@@ -51,7 +51,7 @@ export const FontSize = Extension.create<FontSizeOptions>({
               }
 
               return {
-                style: `font-size: ${attributes.fontSize}; line-height: 1.2;  overflow: auto`,
+                style: `font-size: ${attributes.fontSize}; overflow: auto`,
               };
             },
           },

dashboard/src/components/widgets/rich-text-editor/line-height-mark/index.ts

@@ -0,0 +1,3 @@
+export * from './line-height-mark';
+export * from './line-height-control';
+export * from './utils';

dashboard/src/components/widgets/rich-text-editor/line-height-mark/line-height-control.tsx

@@ -0,0 +1,49 @@
+import { NativeSelect } from '@mantine/core';
+import { RichTextEditor } from '@mantine/tiptap';
+import { IconLineHeight } from '@tabler/icons-react';
+import { Editor } from '@tiptap/react';
+import { useTranslation } from 'react-i18next';
+import { LineHeightAttrKey, LineHeightName } from './line-height-mark';
+
+const LINE_HEIGHTS = ['1', '1.2', '1.5', '1.75', '2', '2.5', '3'];
+const LineHeightOptions = [{ label: 'auto', value: '' }].concat(
+  LINE_HEIGHTS.map((s) => ({
+    label: s,
+    value: s,
+  })),
+);
+
+const NativeSelectStyles = {
+  input: {
+    height: '26px',
+    minHeight: '26px',
+    lineHeight: '26px',
+    borderColor: '#ced4da !important',
+  },
+};
+
+export const LineHeightControl = ({ editor }: { editor: Editor }) => {
+  const { t } = useTranslation();
+  const currentLineHeight = editor.getAttributes(LineHeightName)[LineHeightAttrKey];
+
+  return (
+    <RichTextEditor.ControlsGroup>
+      <NativeSelect
+        size="xs"
+        leftSection={<IconLineHeight stroke={1.5} size={16} />}
+        data={LineHeightOptions}
+        styles={NativeSelectStyles}
+        value={currentLineHeight ? currentLineHeight : ''}
+        title={t('rich_text.line_height.label')}
+        onChange={(e) => {
+          const v = e.currentTarget.value;
+          if (!v) {
+            editor.chain().focus().unsetLineHeight().run();
+          } else {
+            editor.chain().focus().setLineHeight(v).run();
+          }
+        }}
+      />
+    </RichTextEditor.ControlsGroup>
+  );
+};

dashboard/src/components/widgets/rich-text-editor/line-height-mark/line-height-mark.tsx

@@ -0,0 +1,85 @@
+import { Mark } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+import { ensurePrefixOnID, getLineHeightID } from './utils';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    lineHeight: {
+      setLineHeight: (lineHeight: string) => ReturnType;
+      unsetLineHeight: () => ReturnType;
+    };
+  }
+}
+
+const AttrKey = 'data-line-height';
+export const LineHeightAttrKey = AttrKey;
+export const LineHeightName = 'lineHeight';
+
+export const LineHeightMark = Mark.create({
+  name: LineHeightName,
+
+  addAttributes() {
+    return {
+      id: {
+        default: getLineHeightID(6),
+        parseHTML: (element) => {
+          const id = element.getAttribute('id');
+          return ensurePrefixOnID(id);
+        },
+      },
+      [AttrKey]: {
+        default: null,
+        parseHTML: (element) => element.getAttribute(AttrKey),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'line-height',
+        getAttrs: (node: string | HTMLElement) => {
+          if (typeof node === 'string') {
+            console.debug(node);
+            return false;
+          }
+
+          return [node.getAttribute(AttrKey)];
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const lineHeight = HTMLAttributes[AttrKey];
+    if (lineHeight) {
+      // Apply line-height as inline style
+      return [
+        'span',
+        {
+          ...HTMLAttributes,
+          style: `line-height: ${lineHeight}`,
+        },
+        0,
+      ];
+    }
+    return ['span', HTMLAttributes, 0];
+  },
+
+  addCommands() {
+    return {
+      setLineHeight:
+        (lineHeight) =>
+        ({ commands }) => {
+          return commands.setMark(this.name, {
+            [AttrKey]: lineHeight,
+          });
+        },
+      unsetLineHeight:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+});

dashboard/src/components/widgets/rich-text-editor/line-height-mark/utils.ts

@@ -0,0 +1,22 @@
+export const LineHeightIDPrefix = 'line_height_';
+export const IDPrefixReg = new RegExp(`^(?!${LineHeightIDPrefix})(.+)$`);
+
+export function ensurePrefixOnID(id: string | null) {
+  if (!id) {
+    return id;
+  }
+  return id.replace(IDPrefixReg, `${LineHeightIDPrefix}$1`);
+}
+
+export const getLineHeightID = (size: number) => {
+  const MASK = 0x3d;
+  const LETTERS = 'abcdefghijklmnopqrstuvwxyz';
+  const NUMBERS = '1234567890';
+  const charset = `${NUMBERS}${LETTERS}${LETTERS.toUpperCase()}`.split('');
+
+  const bytes = new Uint8Array(size);
+  crypto.getRandomValues(bytes);
+
+  const id = bytes.reduce((acc, byte) => `${acc}${charset[byte & MASK]}`, '');
+  return `${LineHeightIDPrefix}${id}`;
+};

dashboard/src/i18n/en.ts

@@ -667,6 +667,9 @@ export const en = {
         toggle_tooltip: 'Toggle interaction block settings',
         clear_tooltip: 'Clear interaction block',
       },
+      line_height: {
+        label: 'Line Height',
+      },
     },
     chart: {
       chart_config: 'Chart Config',