Merge pull request #1874 from merico-dev/fix-line-height

fix(rich-text-editor): Fix line-height mark parsing and rendering

Author: ZeekoZhu

api/package.json

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

dashboard/package.json

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

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

@@ -38,32 +38,17 @@ export const LineHeightMark = Mark.create({
     return [
       {
         tag: 'line-height',
-        getAttrs: (node: string | HTMLElement) => {
-          if (typeof node === 'string') {
-            console.debug(node);
-            return false;
-          }
-
-          return [node.getAttribute(AttrKey)];
+        getAttrs: (element) => {
+          const lineHeight = element.getAttribute(AttrKey);
+          console.log('parse html', lineHeight);
+          return lineHeight ? { [AttrKey]: lineHeight } : false;
         },
       },
     ];
   },
 
   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];
+    return ['line-height', { ...HTMLAttributes, style: `line-height: ${HTMLAttributes[AttrKey]}` }, 0];
   },
 
   addCommands() {

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

@@ -24,6 +24,7 @@ import { ColorMappingMark, getColorMappingStyle } from './color-mapping-mark';
 import { DynamicColorMark, getDynamicColorStyles } from './dynamic-color-mark';
 import { FontSize } from './font-size-extension';
 import { InteractionBlock } from './interaction-block-node';
+import { LineHeightMark } from './line-height-mark';
 
 interface IReadonlyRichText {
   value: string;
@@ -61,6 +62,7 @@ export const ReadonlyRichText = forwardRef<HTMLDivElement, IReadonlyRichText>(
         TextStyle,
         Color,
         FontSize,
+        LineHeightMark,
         DynamicColorMark,
         InteractionBlock,
       ];

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.60.2",
+  "version": "14.60.3",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-dev/table"