feat(core): added preserving and managing original markdown formatting for YfmTable (#558)

Author: makhnatkin

demo/stories/experiments/empty-row/EmptyRow.stories.tsx

@@ -10,6 +10,6 @@ export const Story: StoryObj<typeof component> = {
 Story.storyName = 'Preserve Empty Rows';
 
 export default {
-    title: 'Experiments',
+    title: 'Experiments / Preserve Empty Rows',
     component,
 };

demo/stories/experiments/store-raw/StoreRawMarkup.stories.tsx

@@ -0,0 +1,13 @@
+import type {StoryObj} from '@storybook/react';
+
+import {StoreRawMarkupDemo as component} from './StoreRawMarkup';
+
+export const Story: StoryObj<typeof component> = {
+    args: {},
+};
+Story.storyName = 'Store Raw Markup';
+
+export default {
+    title: 'Experiments',
+    component,
+};

demo/stories/experiments/store-raw/StoreRawMarkup.tsx

@@ -0,0 +1,132 @@
+import React, {useCallback, useLayoutEffect, useState} from 'react';
+
+import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
+
+import {MarkdownEditorView, type RenderPreview, useMarkdownEditor} from '../../../../src';
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+import {SplitModePreview} from '../../../components/SplitModePreview';
+import {plugins} from '../../../defaults/md-plugins';
+import {useMarkdownEditorValue} from '../../../hooks/useMarkdownEditorValue';
+
+const initialMarkup = `
+## YFM Table
+### Simple table
+#|
+|| **Header1** | **Header2** ||
+|| Text        | Text        ||
+|#
+### Multiline content
+#|
+|| Text
+on two lines |
+- Potatoes
+- Carrot
+- Onion
+- Cucumber
+||
+|#
+
+### Nested tables
+#|
+|| 1  | Text before other table
+
+#|
+|| 5  | 6 ||
+|| 7  | 8 ||
+|#
+
+Text after other table
+||
+|| 3 | 4 ||
+
+|#
+
+### Table inside quote
+> #|
+> || **Header1** | **Header2** ||
+> || Text        | Text        ||
+> |#
+
+### Table inside tabs
+
+{% list tabs %}
+
+- tab1
+
+  #|
+    || **Header1** | **Header2** ||
+    || Text        | Text        ||
+    |#
+
+- tab2
+
+  #|
+    || Text
+    on two lines |
+    - Potatoes
+    - Carrot
+    - Onion
+    - Cucumber
+    ||
+    |#
+
+
+{% endlist %}
+`;
+
+type StoreRawMarkupDemoProps = {
+    preserveMarkupFormatting: boolean;
+};
+
+export const StoreRawMarkupDemo = React.memo<StoreRawMarkupDemoProps>((props) => {
+    const {preserveMarkupFormatting} = props;
+    const [mdMarkup, setMdMarkup] = useState(initialMarkup);
+
+    const renderPreview = useCallback<RenderPreview>(
+        ({getValue, md}) => (
+            <SplitModePreview
+                getValue={getValue}
+                allowHTML={md.html}
+                linkify={md.linkify}
+                linkifyTlds={md.linkifyTlds}
+                breaks={md.breaks}
+                needToSanitizeHtml
+                plugins={plugins}
+            />
+        ),
+        [],
+    );
+
+    const editor = useMarkdownEditor(
+        {
+            initial: {markup: mdMarkup},
+            markupConfig: {renderPreview},
+            experimental: {preserveMarkupFormatting},
+        },
+        [],
+    );
+
+    // for preserve edited content
+    const value = useMarkdownEditorValue(editor);
+    useLayoutEffect(() => {
+        setMdMarkup(value);
+    }, [value]);
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    toaster={toaster}
+                    className={className}
+                />
+            )}
+        />
+    );
+});
+
+StoreRawMarkupDemo.displayName = 'Experiments / StoreRawMarkup';

package-lock.json

@@ -199,7 +199,8 @@
     "react-error-boundary": "^3.1.4",
     "react-hotkeys-hook": "4.5.0",
     "react-use": "^17.3.2",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "uuid": "11.0.5"
   },
   "devDependencies": {
     "@diplodoc/cut-extension": "^0.6.1",

package.json

@@ -12,6 +12,7 @@ import {
     type WysiwygEditorOptions,
 } from '../core';
 import type {TransformFn} from '../core/markdown/ProseMirrorTransformer';
+import {DynamicModifiers} from '../core/types/dynamicModifiers';
 import {ReactRenderStorage, type RenderStorage} from '../extensions';
 import {i18n} from '../i18n/bundle';
 import {logger} from '../logger';
@@ -21,6 +22,8 @@ import {type CodeEditor, Editor as MarkupEditor} from '../markup/editor';
 import {type Emitter, FileUploadHandler, type Receiver, SafeEventEmitter} from '../utils';
 import type {DirectiveSyntaxContext} from '../utils/directive';
 
+import {MarkupManager} from './MarkupManager';
+import {createDynamicModifiers} from './config/dynamicModifiers';
 import type {
     MarkdownEditorMode as EditorMode,
     MarkdownEditorPreset as EditorPreset,
@@ -144,6 +147,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #mdOptions: Readonly<MarkdownEditorMdOptions>;
     #pmTransformers: TransformFn[] = [];
     #preserveEmptyRows: boolean;
+    #modifiers?: DynamicModifiers[];
 
     readonly #preset: EditorPreset;
     #extensions?: WysiwygEditorOptions['extensions'];
@@ -254,6 +258,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 initialContent: this.#markup,
                 extensions: this.#extensions,
                 pmTransformers: this.#pmTransformers,
+                modifiers: this.#modifiers,
                 allowHTML: this.#mdOptions.html,
                 linkify: this.#mdOptions.linkify,
                 linkifyTlds: this.#mdOptions.linkifyTlds,
@@ -332,6 +337,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             wysiwygConfig = {},
         } = opts;
 
+        this.#modifiers = experimental.preserveMarkupFormatting
+            ? createDynamicModifiers(new MarkupManager())
+            : undefined;
+
         this.#editorMode = initial.mode ?? 'wysiwyg';
         this.#toolbarVisible = initial.toolbarVisible ?? true;
         this.#splitMode = (markupConfig.renderPreview && markupConfig.splitMode) ?? false;

src/bundle/Editor.ts

@@ -0,0 +1,95 @@
+import {Node} from 'prosemirror-model';
+import {v4} from 'uuid';
+
+import {SafeEventEmitter} from '../utils';
+
+export interface IMarkupManager {
+    setMarkup(id: string, rawMarkup: string): void;
+    setNode(id: string, node: Node): void;
+    getMarkup(id: string): string | null;
+    getNode(id: string): Node | null;
+    reset(): void;
+    on<K extends keyof Events>(event: K, listener: (value: Events[K]) => void): void;
+}
+
+export interface Logger {
+    log(message: string): void;
+    error(message: string): void;
+}
+
+interface Events {
+    markupChanged: {id: string; rawMarkup: string};
+    nodeChanged: {id: string; node: Node};
+    reset: {};
+}
+
+export class MarkupManager extends SafeEventEmitter<Events> implements IMarkupManager {
+    private _markups: Map<string, string> = new Map();
+    private _nodes: Map<string, Node> = new Map();
+    private _namespace: string;
+
+    private readonly logger?: Logger;
+
+    constructor(logger?: Logger) {
+        super();
+        this.logger = logger;
+        this._namespace = v4();
+    }
+
+    /**
+     * Set raw markup for a specific id
+     */
+    setMarkup(id: string, rawMarkup: string): void {
+        if (typeof rawMarkup !== 'string') {
+            this.logger?.error('[MarkupManager] rawMarkup must be a string');
+            return;
+        }
+        this._markups.set(id, rawMarkup);
+
+        this.emit('markupChanged', {id, rawMarkup});
+        this.logger?.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
+    }
+
+    /**
+     * Set a node for a specific id
+     */
+    setNode(id: string, node: Node): void {
+        if (!node) {
+            this.logger?.error('[MarkupManager] Node must be a valid ProseMirror Node');
+            return;
+        }
+        this._nodes.set(id, node);
+
+        this.emit('nodeChanged', {id, node});
+        this.logger?.log(`[MarkupManager] Node for ID ${id} set successfully`);
+    }
+
+    /**
+     * Get raw markup for a specific id
+     */
+    getMarkup(id: string): string | null {
+        return this._markups.get(id) ?? null;
+    }
+
+    /**
+     * Get a node for a specific id
+     */
+    getNode(id: string): Node | null {
+        return this._nodes.get(id) ?? null;
+    }
+
+    getNamespace(): string {
+        return this._namespace;
+    }
+
+    /**
+     * Reset the stored markups and nodes
+     */
+    reset(): void {
+        this._markups.clear();
+        this._nodes.clear();
+
+        this.emit('reset', {});
+        this.logger?.log('[MarkupManager] MarkupManager has been reset');
+    }
+}