style: enhance text formatting options in schema and markdown serializer

- Added underline and strike-through support in the schema for improved text styling.
- Introduced highlight and textStyle attributes to allow for customizable text formatting.
- Updated markdown serializer to handle underline and textStyle, including background color for highlights.

Author: CH1111

packages/utils/src/editor/schema.ts

@@ -273,6 +273,30 @@ export const schema = new Schema({
       },
     } as MarkSpec,
 
+    underline: {
+      parseDOM: [
+        { tag: 'u' },
+        { style: 'text-decoration=underline' },
+        { style: 'text-decoration-line=underline' },
+      ],
+      toDOM() {
+        return ['u', 0];
+      },
+    },
+
+    strike: {
+      parseDOM: [
+        { tag: 's' },
+        { tag: 'strike' },
+        { tag: 'del' },
+        { style: 'text-decoration=line-through' },
+        { style: 'text-decoration-line=line-through' },
+      ],
+      toDOM() {
+        return ['s', 0];
+      },
+    },
+
     link: {
       attrs: {
         href: {},
@@ -301,5 +325,81 @@ export const schema = new Schema({
         return ['code'];
       },
     },
+
+    highlight: {
+      attrs: {
+        color: { default: null },
+      },
+      parseDOM: [
+        {
+          tag: 'mark',
+          getAttrs: (node) => {
+            const dom = node as HTMLElement;
+            return {
+              color: dom.getAttribute('data-color') || dom.style.backgroundColor,
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        const attrs: Record<string, string> = {};
+        if (node.attrs.color) {
+          attrs['data-color'] = node.attrs.color;
+          attrs.style = `background-color: ${node.attrs.color}; color: inherit`;
+        }
+        return ['mark', attrs, 0];
+      },
+    },
+
+    textStyle: {
+      attrs: {
+        color: { default: null },
+        backgroundColor: { default: null },
+        fontSize: { default: null },
+        fontFamily: { default: null },
+        fontWeight: { default: null },
+        textDecoration: { default: null },
+      },
+      parseDOM: [
+        {
+          tag: 'span[style]',
+          getAttrs: (node) => {
+            const dom = node as HTMLElement;
+            return {
+              color: dom.style.color,
+              backgroundColor: dom.style.backgroundColor,
+              fontSize: dom.style.fontSize,
+              fontFamily: dom.style.fontFamily,
+              fontWeight: dom.style.fontWeight,
+              textDecoration: dom.style.textDecoration,
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        const attrs: Record<string, string> = { style: '' };
+
+        if (node.attrs.color) {
+          attrs.style += `color: ${node.attrs.color};`;
+        }
+        if (node.attrs.backgroundColor) {
+          attrs.style += `background-color: ${node.attrs.backgroundColor}; color: inherit;`;
+        }
+        if (node.attrs.fontSize) {
+          attrs.style += `font-size: ${node.attrs.fontSize};`;
+        }
+        if (node.attrs.fontFamily) {
+          attrs.style += `font-family: ${node.attrs.fontFamily};`;
+        }
+        if (node.attrs.fontWeight) {
+          attrs.style += `font-weight: ${node.attrs.fontWeight};`;
+        }
+        if (node.attrs.textDecoration) {
+          attrs.style += `text-decoration: ${node.attrs.textDecoration};`;
+        }
+
+        return ['span', attrs, 0];
+      },
+    },
   },
 });

packages/utils/src/editor/to_markdown.ts

@@ -230,6 +230,12 @@ export const defaultMarkdownSerializer = new MarkdownSerializer(
       mixable: true,
       expelEnclosingWhitespace: true,
     },
+    underline: {
+      open: '__',
+      close: '__',
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
     link: {
       open(state, mark, parent, index) {
         state.inAutolink = isPlainURL(mark, parent, index);
@@ -264,6 +270,26 @@ export const defaultMarkdownSerializer = new MarkdownSerializer(
       mixable: true,
       expelEnclosingWhitespace: true,
     },
+    textStyle: {
+      open(_state, mark, _parent, _index) {
+        // Check if there's backgroundColor and treat it as highlight
+        if (mark.attrs.backgroundColor) {
+          return '==';
+        }
+        // For other text styles, don't add any markdown markers
+        return '';
+      },
+      close(_state, mark, _parent, _index) {
+        // Close highlight syntax if there's backgroundColor
+        if (mark.attrs.backgroundColor) {
+          return '==';
+        }
+        // For other text styles, don't add any markdown markers
+        return '';
+      },
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
   },
 );