Merge pull request #936 from refly-ai/fix/ducoument-share-issue

mrcfps · web-flow · commit 83e3fc63c0d0 · 2025-05-22T11:45:48.000+08:00
Fix/ducoument share issue
diff --git a/packages/ai-workspace-common/src/components/document/collab-editor.tsx b/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,
                 },
diff --git a/packages/ai-workspace-common/src/components/document/readonly-editor.tsx b/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,
                 },
               }}
diff --git a/packages/ai-workspace-common/src/components/markdown/custom-plugins/rehype-highlight.ts b/packages/ai-workspace-common/src/components/markdown/custom-plugins/rehype-highlight.ts
@@ -0,0 +1,66 @@
+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== syntax to proper HTML elements.
+ */
+const rehypeHighlight: 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
+      const highlightRegex = /==(.*?)==/g;
+
+      // Check if we have any matches
+      if (!highlightRegex.test(value)) return;
+
+      // Reset regex lastIndex
+      highlightRegex.lastIndex = 0;
+
+      // Process the text to create HTML elements
+      const parts = [];
+      let lastIndex = 0;
+      const text = value;
+
+      // 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) });
+      }
+
+      // Replace the original node with our processed parts
+      if (parts.length > 0) {
+        parent.children.splice(index, 1, ...parts);
+      }
+    });
+  };
+};
+
+export default rehypeHighlight;
diff --git a/packages/ai-workspace-common/src/components/markdown/index.tsx b/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 rehypeHighlight from './custom-plugins/rehype-highlight';
 
 // styles
 import './styles/markdown.scss';
@@ -48,6 +50,17 @@ 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 StrikethroughComponent = ({ children }: { children: React.ReactNode }) => (
+  <del>{children}</del>
+);
+
 export const Markdown = memo(
   (
     props: {
@@ -127,9 +140,10 @@ export const Markdown = memo(
               plugins.RehypeKatex &&
               plugins.RehypeHighlight && (
                 <ReactMarkdown
-                  remarkPlugins={[RemarkBreaks, plugins.RemarkMath]}
+                  remarkPlugins={[RemarkBreaks, plugins.RemarkMath, RemarkGfm]}
                   rehypePlugins={[
                     ...rehypePlugins,
+                    rehypeHighlight,
                     plugins.RehypeKatex,
                     [
                       plugins.RehypeHighlight,
@@ -143,6 +157,8 @@ export const Markdown = memo(
                     ...artifactComponents,
                     a: (args) => LinkElement.Component(args, props?.sources || []),
                     img: MarkdownImage,
+                    mark: HighlightComponent,
+                    del: StrikethroughComponent,
                   }}
                   linkTarget={'_blank'}
                 >
diff --git a/packages/ai-workspace-common/src/components/markdown/styles/markdown.scss b/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 {
diff --git a/packages/ai-workspace-common/src/modules/multilingual-search/components/action-menu.tsx b/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}
diff --git a/packages/utils/src/editor/schema.ts b/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];
+      },
+    },
   },
 });
diff --git a/packages/utils/src/editor/to_markdown.ts b/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,
+    },
   },
 );
 
