style: enhance dark mode support and improve text formatting in editors

- Updated class names in CollaborativeEditor and ReadonlyEditor to support dark mode text colors.
- Added custom components for highlight, underline, and strikethrough in Markdown rendering.
- Integrated new formatting styles in markdown.scss for better visual consistency in dark mode.

Author: CH1111

packages/ai-workspace-common/src/components/document/collab-editor.tsx

@@ -533,7 +533,8 @@ export const CollaborativeEditor = memo(
                 handleDrop: (view, event, _slice, moved) =>
                   handleImageDrop(view, event, moved, uploadFn),
                 attributes: {
-                  class: `prose prose-md prose-headings:font-title font-default focus:outline-none max-w-full prose-img:cursor-pointer ${isDarkMode ? '!text-white' : '!text-black'}`,
+                  class:
+                    'prose prose-md prose-headings:font-title font-default focus:outline-none max-w-full prose-img:cursor-pointer dark:text-white',
 
                   'data-doc-id': docId,
                 },

packages/ai-workspace-common/src/components/document/readonly-editor.tsx

@@ -108,7 +108,7 @@ export const ReadonlyEditor = memo(
                 },
                 attributes: {
                   class:
-                    'prose prose-md prose-headings:font-title font-default focus:outline-none max-w-full',
+                    'prose prose-md prose-headings:font-title font-default focus:outline-none max-w-full dark:text-white',
                   'data-doc-id': docId,
                 },
               }}

packages/ai-workspace-common/src/components/markdown/custom-plugins/rehype-highlight-underline.ts

@@ -0,0 +1,103 @@
+import { visit } from 'unist-util-visit';
+import type { Node } from 'unist';
+
+// Define minimal Plugin type inline to avoid dependency on 'unified'
+type Plugin = () => (tree: any) => void;
+
+/**
+ * Rehype plugin to transform text nodes with ==highlight== and __underline__ syntax
+ * to proper HTML elements.
+ */
+const rehypeHighlightUnderline: Plugin = () => {
+  return (tree: Node) => {
+    // Process text nodes for special syntax
+    visit(tree, 'text', (node: any, index: number | null, parent: any) => {
+      if (!parent || index === null) return;
+
+      const { value } = node;
+      if (typeof value !== 'string') return;
+
+      // Match patterns for highlight and underline
+      const highlightRegex = /==(.*?)==/g;
+      const underlineRegex = /__(.*?)__/g;
+
+      // Check if we have any matches
+      if (!highlightRegex.test(value) && !underlineRegex.test(value)) return;
+
+      // Reset regex lastIndex
+      highlightRegex.lastIndex = 0;
+      underlineRegex.lastIndex = 0;
+
+      // Process the text to create HTML elements
+      const parts = [];
+      let lastIndex = 0;
+      const text = value;
+
+      // First process highlights
+      let match: any = highlightRegex.exec(text);
+      while (match !== null) {
+        // Add text before the match
+        if (match.index > lastIndex) {
+          parts.push({ type: 'text', value: text.slice(lastIndex, match.index) });
+        }
+
+        // Add the highlight element
+        parts.push({
+          type: 'element',
+          tagName: 'mark',
+          properties: {},
+          children: [{ type: 'text', value: match[1] }],
+        });
+
+        lastIndex = match.index + match[0].length;
+        match = highlightRegex.exec(text);
+      }
+
+      // Add any remaining text
+      if (lastIndex < text.length) {
+        parts.push({ type: 'text', value: text.slice(lastIndex) });
+      }
+
+      // If we found any highlights, replace the original node
+      if (parts.length > 0) {
+        parent.children.splice(index, 1, ...parts);
+        return;
+      }
+
+      // Otherwise, check for underlines
+      lastIndex = 0;
+      parts.length = 0;
+
+      match = underlineRegex.exec(text);
+      while (match !== null) {
+        // Add text before the match
+        if (match.index > lastIndex) {
+          parts.push({ type: 'text', value: text.slice(lastIndex, match.index) });
+        }
+
+        // Add the underline element
+        parts.push({
+          type: 'element',
+          tagName: 'u',
+          properties: {},
+          children: [{ type: 'text', value: match[1] }],
+        });
+
+        lastIndex = match.index + match[0].length;
+        match = underlineRegex.exec(text);
+      }
+
+      // Add any remaining text
+      if (lastIndex < text.length) {
+        parts.push({ type: 'text', value: text.slice(lastIndex) });
+      }
+
+      // Replace the original node with our processed parts
+      if (parts.length > 0) {
+        parent.children.splice(index, 1, ...parts);
+      }
+    });
+  };
+};
+
+export default rehypeHighlightUnderline;

packages/ai-workspace-common/src/components/markdown/index.tsx

@@ -3,11 +3,13 @@ import { memo, useEffect, useRef, useState, Suspense, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 
 import RemarkBreaks from 'remark-breaks';
+import RemarkGfm from 'remark-gfm';
 
 import { cn, markdownCitationParse } from '@refly/utils';
 
 // plugins
 import LinkElement from './plugins/link';
+import rehypeHighlightUnderline from './custom-plugins/rehype-highlight-underline';
 
 // styles
 import './styles/markdown.scss';
@@ -48,6 +50,21 @@ const MarkdownImage = memo(({ src, alt, ...props }: React.ImgHTMLAttributes<HTML
   );
 });
 
+// Custom Components for enhanced Markdown rendering
+const HighlightComponent = ({ children }: { children: React.ReactNode }) => (
+  <mark className="bg-yellow-200 dark:bg-yellow-800 dark:text-gray-200 rounded-sm px-1 text-inherit">
+    {children}
+  </mark>
+);
+
+const UnderlineComponent = ({ children }: { children: React.ReactNode }) => (
+  <span className="underline">{children}</span>
+);
+
+const StrikethroughComponent = ({ children }: { children: React.ReactNode }) => (
+  <del>{children}</del>
+);
+
 export const Markdown = memo(
   (
     props: {
@@ -127,9 +144,10 @@ export const Markdown = memo(
               plugins.RehypeKatex &&
               plugins.RehypeHighlight && (
                 <ReactMarkdown
-                  remarkPlugins={[RemarkBreaks, plugins.RemarkMath]}
+                  remarkPlugins={[RemarkBreaks, plugins.RemarkMath, RemarkGfm]}
                   rehypePlugins={[
                     ...rehypePlugins,
+                    rehypeHighlightUnderline,
                     plugins.RehypeKatex,
                     [
                       plugins.RehypeHighlight,
@@ -143,6 +161,9 @@ export const Markdown = memo(
                     ...artifactComponents,
                     a: (args) => LinkElement.Component(args, props?.sources || []),
                     img: MarkdownImage,
+                    mark: HighlightComponent,
+                    del: StrikethroughComponent,
+                    u: UnderlineComponent,
                   }}
                   linkTarget={'_blank'}
                 >

packages/ai-workspace-common/src/components/markdown/styles/markdown.scss

@@ -98,6 +98,18 @@
   background-color: var(--color-canvas-default);
   line-height: 1.5;
   word-wrap: break-word;
+  
+  // Custom formatting styles
+  del {
+    text-decoration: line-through;
+    color: var(--color-fg-subtle);
+  }
+  
+  u, .underline {
+    text-decoration: underline;
+    text-decoration-thickness: 0.1em;
+    text-underline-offset: 0.1em;
+  }
 }
 
 .light {

packages/ai-workspace-common/src/modules/multilingual-search/components/action-menu.tsx

@@ -159,7 +159,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = (props) => {
 
   return (
     <Affix offsetBottom={0} target={props.getTarget}>
-      <div className="intergation-footer bg-white dark:bg-[#1f1f1f] border-[#e5e5e5] dark:!border-[#2f2f2f]">
+      <div className="intergation-footer bg-white dark:bg-[#1f1f1f] !border-[#e5e5e5] dark:!border-[#2f2f2f]">
         <div className="footer-location">
           <Checkbox
             checked={selectedItems.length && selectedItems.length === results.length}