feat(core): autoconvert html to md when pasting in markdown mode (#476)

Author: obenjiro

package-lock.json

@@ -226,6 +226,7 @@
     "@types/gulp": "4.0.9",
     "@types/gulp-sass": "5.0.0",
     "@types/jest": "^27.0.3",
+    "@types/jsdom": "21.1.7",
     "@types/katex": "0.16.7",
     "@types/lodash": "^4.14.177",
     "@types/markdown-it-emoji": "2.0.2",
@@ -246,6 +247,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.1",
     "jest-css-modules": "^2.1.0",
+    "jsdom": "25.0.1",
     "lowlight": "3.0.0",
     "markdown-it-testgen": "^0.1.6",
     "mermaid": "10.9.0",

package.json

@@ -92,6 +92,7 @@ export interface EditorInt
     readonly renderStorage: RenderStorage<ReactNode>;
     readonly fileUploadHandler?: FileUploadHandler;
     readonly needToSetDimensionsForUploadedImages: boolean;
+    readonly disableHTMLParsingInMd?: boolean;
 
     readonly renderPreview?: RenderPreview;
 
@@ -273,6 +274,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                     uploadHandler: this.fileUploadHandler,
                     parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
                     needImageDimensions: this.needToSetDimensionsForUploadedImages,
+                    parseHtmlOnPaste: this.#markupConfig.parseHtmlOnPaste,
                     enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
                     extensions: this.#markupConfig.extensions,
                     disabledExtensions: this.#markupConfig.disabledExtensions,

src/bundle/Editor.ts

@@ -120,6 +120,8 @@ export type MarkdownEditorMarkupConfig = {
     keymaps?: CreateCodemirrorParams['keymaps'];
     /** Overrides the default placeholder content. */
     placeholder?: CreateCodemirrorParams['placeholder'];
+    /** Enable HTML parsing when pasting content. */
+    parseHtmlOnPaste?: boolean;
     /**
      * Additional language data for markdown language in codemirror.
      * Can be used to configure additional autocompletions and others.

src/bundle/types.ts

@@ -3,6 +3,7 @@ export enum DataTransferType {
     Text = 'text/plain',
     Html = 'text/html',
     Yfm = 'text/yfm', // self
+    Rtf = 'text/rtf', // Safari, WebStorm/Intelij
     UriList = 'text/uri-list',
     VSCodeData = 'vscode-editor-data',
     Files = 'Files',

src/extensions/behavior/Clipboard/utils.ts

@@ -1,6 +1,6 @@
 import type {EditorProps} from 'prosemirror-view';
 
-import {DataTransferType} from '../../behavior/Clipboard/utils';
+import {DataTransferType, isVSCode, tryParseVSCodeData} from '../../../utils/clipboard';
 
 import {cbType, codeBlockLangAttr} from './const';
 
@@ -26,32 +26,10 @@ function getCodeData(data: DataTransfer): null | {editor: string; mode?: string;
 
         if (isVSCode(data)) {
             editor = 'vscode';
-            mode = tryCatch<VSCodeData>(() => JSON.parse(data.getData(DataTransferType.VSCodeData)))
-                ?.mode;
+            mode = tryParseVSCodeData(data)?.mode;
         } else return null;
 
         return {editor, mode, value: data.getData(DataTransferType.Text)};
     }
     return null;
 }
-
-type VSCodeData = {
-    version: number;
-    isFromEmptySelection: boolean;
-    multicursorText: null | string;
-    mode: string;
-    [key: string]: unknown;
-};
-
-function isVSCode(data: DataTransfer): boolean {
-    return data.types.includes(DataTransferType.VSCodeData);
-}
-
-function tryCatch<R>(fn: () => R): R | undefined {
-    try {
-        return fn();
-    } catch (e) {
-        console.error(e);
-    }
-    return undefined;
-}

src/extensions/markdown/CodeBlock/handle-paste.ts

@@ -15,10 +15,10 @@ import type {ParseInsertedUrlAsImage} from '../../bundle';
 import type {EventMap} from '../../bundle/Editor';
 import {ActionName} from '../../bundle/config/action-names';
 import type {ReactRenderStorage} from '../../extensions';
-import {DataTransferType} from '../../extensions/behavior/Clipboard/utils';
 import {logger} from '../../logger';
 import {Action as A, formatter as f} from '../../shortcuts';
 import type {Receiver} from '../../utils';
+import {DataTransferType, shouldSkipHtmlConversion} from '../../utils/clipboard';
 import type {DirectiveSyntaxContext} from '../../utils/directive';
 import {
     insertImages,
@@ -42,6 +42,7 @@ import {
 import {DirectiveSyntaxFacet} from './directive-facet';
 import {type FileUploadHandler, FileUploadHandlerFacet} from './files-upload-facet';
 import {gravityHighlightStyle, gravityTheme} from './gravity';
+import {MarkdownConverter} from './html-to-markdown/converters';
 import {PairingCharactersExtension} from './pairing-chars';
 import {ReactRendererFacet} from './react-facet';
 import {SearchPanelPlugin} from './search-plugin/plugin';
@@ -61,6 +62,7 @@ export type CreateCodemirrorParams = {
     onScroll: (event: Event) => void;
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
+    parseHtmlOnPaste?: boolean;
     parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
     needImageDimensions?: boolean;
     enableNewImageSizeCalculation?: boolean;
@@ -91,6 +93,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
         extensions: extraExtensions,
         placeholder: placeholderContent,
         autocompletion: autocompletionConfig,
+        parseHtmlOnPaste,
         parseInsertedUrlAsImage,
         directiveSyntax,
     } = params;
@@ -157,7 +160,47 @@ export function createCodemirror(params: CreateCodemirrorParams) {
                 onScroll(event);
             },
             paste(event, editor) {
-                if (event.clipboardData && parseInsertedUrlAsImage) {
+                if (!event.clipboardData) return;
+
+                // if clipboard contains YFM content - avoid any meddling with pasted content
+                // since text/yfm will contain valid markdown
+                const yfmContent = event.clipboardData.getData(DataTransferType.Yfm);
+                if (yfmContent) {
+                    event.preventDefault();
+                    editor.dispatch(editor.state.replaceSelection(yfmContent));
+                    return;
+                }
+
+                // checking if a copy buffer content is suitable for convertion
+                const shouldSkipHtml = shouldSkipHtmlConversion(event.clipboardData);
+
+                // if we have text/html inside copy/paste buffer
+                const htmlContent = event.clipboardData.getData(DataTransferType.Html);
+                // if we pasting markdown from VsCode we need skip html transformation
+                if (htmlContent && parseHtmlOnPaste && !shouldSkipHtml) {
+                    let parsedMarkdownMarkup: string | undefined;
+                    try {
+                        const parser = new DOMParser();
+                        const htmlDoc = parser.parseFromString(htmlContent, 'text/html');
+
+                        const converter = new MarkdownConverter();
+                        parsedMarkdownMarkup = converter.processNode(htmlDoc.body).trim();
+                    } catch (e) {
+                        // The code is pretty new and there might be random issues we haven't caught yet,
+                        // especially with invalid HTML or weird DOM parsing errors.
+                        // If something goes wrong, I just want to fall back to the "default pasting"
+                        // rather than break the entire experience for the user.
+                        logger.error(e);
+                    }
+
+                    if (parsedMarkdownMarkup !== undefined) {
+                        event.preventDefault();
+                        editor.dispatch(editor.state.replaceSelection(parsedMarkdownMarkup));
+                        return;
+                    }
+                }
+
+                if (parseInsertedUrlAsImage) {
                     const {imageUrl, title} =
                         parseInsertedUrlAsImage(
                             event.clipboardData.getData(DataTransferType.Text) ?? '',

src/markup/codemirror/create.ts

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import {JSDOM} from 'jsdom';
+
+import {MarkdownConverter} from '../converters';
+
+describe('HTML to Markdown Converter', () => {
+    const fixturesPath = path.join(__dirname, './fixtures');
+    const testCases = fs.readdirSync(fixturesPath);
+    let converter: MarkdownConverter;
+
+    beforeEach(() => {
+        converter = new MarkdownConverter();
+    });
+
+    testCases.forEach((testCase) => {
+        it(`should convert ${testCase} correctly`, () => {
+            const inputPath = path.join(fixturesPath, testCase, 'input.html');
+            const outputPath = path.join(fixturesPath, testCase, 'output.md');
+
+            const inputHtml = fs.readFileSync(inputPath, 'utf-8');
+            const expectedOutput = fs.readFileSync(outputPath, 'utf-8').trim();
+
+            // Create a proper HTML document
+            const dom = new JSDOM(`
+                <!DOCTYPE html>
+                <html>
+                    <body>
+                        ${inputHtml}
+                    </body>
+                </html>
+            `);
+
+            // Process the content inside body
+            const result = converter.processNode(dom.window.document.body).trim();
+
+            // Compare the result with expected output
+            expect(result).toBe(expectedOutput);
+        });
+    });
+});

src/markup/codemirror/html-to-markdown/__tests__/converter.test.ts

@@ -0,0 +1,2 @@
+<p>This is a simple paragraph.</p>
+<p>This is another paragraph with some text.</p> 

src/markup/codemirror/html-to-markdown/__tests__/fixtures/basic-text/input.html

@@ -0,0 +1,3 @@
+This is a simple paragraph.
+
+This is another paragraph with some text.