feat: support custom escape regexp (#337)

Author: saxumcordis

demo/EscapeConfig.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type {ComponentMeta, Story} from '@storybook/react';
+
+import {Playground as PlaygroundComponent, PlaygroundProps} from './Playground';
+import {parseLocation} from './location';
+import {initialMdContent} from './md-content';
+
+export default {
+    title: 'Markdown Editor',
+    component: PlaygroundComponent,
+} as ComponentMeta<any>;
+
+type PlaygroundStoryProps = Pick<PlaygroundProps, 'initialEditor'> & {
+    commonEscapeRegexp: string;
+    startOfLineEscapeRegexp: string;
+};
+export const EscapeConfig: Story<PlaygroundStoryProps> = ({
+    commonEscapeRegexp,
+    startOfLineEscapeRegexp,
+    ...props
+}) => (
+    <PlaygroundComponent
+        {...props}
+        initial={parseLocation() || initialMdContent}
+        escapeConfig={{
+            commonEscape: new RegExp(commonEscapeRegexp),
+            startOfLineEscape: new RegExp(startOfLineEscapeRegexp),
+        }}
+    />
+);
+
+EscapeConfig.args = {
+    initialEditor: 'wysiwyg',
+    commonEscapeRegexp: '^$',
+    startOfLineEscapeRegexp: '^$',
+};

demo/Playground.tsx

@@ -15,7 +15,7 @@ import {
     useMarkdownEditor,
     wysiwygToolbarConfigs,
 } from '../src';
-import type {ToolbarActionData} from '../src/bundle/Editor';
+import type {EscapeConfig, ToolbarActionData} from '../src/bundle/Editor';
 import {FoldingHeading} from '../src/extensions/yfm/FoldingHeading';
 import {Math} from '../src/extensions/yfm/Math';
 import {Mermaid} from '../src/extensions/yfm/Mermaid';
@@ -74,6 +74,7 @@ export type PlaygroundProps = {
     initialSplitModeEnabled?: boolean;
     renderPreviewDefined?: boolean;
     height?: CSSProperties['height'];
+    escapeConfig?: EscapeConfig;
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
 };
@@ -100,6 +101,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         stickyToolbar,
         renderPreviewDefined,
         height,
+        escapeConfig,
     } = props;
     const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>(
         initialEditor ?? 'wysiwyg',
@@ -135,6 +137,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         initialSplitModeEnabled: initialSplitModeEnabled,
         initialToolbarVisible: true,
         splitMode: splitModeOrientation,
+        escapeConfig: escapeConfig,
         renderPreview: renderPreviewDefined ? renderPreview : undefined,
         fileUploadHandler,
         prepareRawMarkup: prepareRawMarkup

src/bundle/Editor.ts

@@ -126,6 +126,11 @@ export type MarkupConfig = {
     languageData?: YfmLangOptions['languageData'];
 };
 
+export type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
+
 export type EditorOptions = Pick<
     WysiwygEditorOptions,
     'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'
@@ -158,6 +163,7 @@ export type EditorOptions = Pick<
     /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
     markupConfig?: MarkupConfig;
+    escapeConfig?: EscapeConfig;
 };
 
 /** @internal */
@@ -171,6 +177,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #wysiwygEditor?: WysiwygEditor;
     #markupEditor?: MarkupEditor;
     #markupConfig: MarkupConfig;
+    #escapeConfig?: EscapeConfig;
 
     readonly #preset: EditorPreset;
     #allowHTML?: boolean;
@@ -272,6 +279,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 allowHTML: this.#allowHTML,
                 linkify: this.#linkify,
                 linkifyTlds: this.#linkifyTlds,
+                escapeConfig: this.#escapeConfig,
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
             });
@@ -340,6 +348,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             opts.needToSetDimensionsForUploadedImages,
         );
         this.#prepareRawMarkup = opts.prepareRawMarkup;
+        this.#escapeConfig = opts.escapeConfig;
     }
 
     // ---> implements CodeEditor
@@ -483,6 +492,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     private shouldReplaceMarkupEditorValue(markupValue: string, wysiwygValue: string) {
         const serializedEditorMarkup = this.#wysiwygEditor?.serializer.serialize(
             this.#wysiwygEditor.parser.parse(markupValue),
+            this.#escapeConfig,
         );
         return serializedEditorMarkup?.trim() !== wysiwygValue.trim();
     }

src/core/Editor.ts

@@ -16,6 +16,11 @@ import {logTransactionMetrics} from './utils/metrics';
 
 type OnChange = (editor: WysiwygEditor) => void;
 
+type EscapeConfig = {
+    commonEscape?: RegExp;
+    startOfLineEscape?: RegExp;
+};
+
 export type WysiwygEditorOptions = {
     domElem?: Element;
     /** markdown markup */
@@ -26,6 +31,7 @@ export type WysiwygEditorOptions = {
     allowHTML?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
+    escapeConfig?: EscapeConfig;
     /** Call on any state change (move cursor, change selection, etc...) */
     onChange?: OnChange;
     /** Call only if document change */
@@ -38,6 +44,7 @@ export class WysiwygEditor implements CommonEditor, ActionStorage {
     #parser: Parser;
     #actions: ActionsManager;
     #contentHandler: ContentHandler;
+    #escapeConfig?: EscapeConfig;
 
     get dom() {
         return this.#view.dom;
@@ -68,6 +75,7 @@ export class WysiwygEditor implements CommonEditor, ActionStorage {
         mdPreset,
         linkify,
         linkifyTlds,
+        escapeConfig,
         onChange,
         onDocChange,
     }: WysiwygEditorOptions) {
@@ -117,6 +125,7 @@ export class WysiwygEditor implements CommonEditor, ActionStorage {
         this.#serializer = serializer;
         this.#parser = parser;
         this.#contentHandler = new WysiwygContentHandler(this.#view, parser);
+        this.#escapeConfig = escapeConfig;
     }
 
     action<T extends keyof WysiwygEditor.Actions>(actionName: T): WysiwygEditor.Actions[T] {
@@ -132,7 +141,7 @@ export class WysiwygEditor implements CommonEditor, ActionStorage {
     }
 
     getValue(): MarkupString {
-        return this.#serializer.serialize(this.#view.state.doc);
+        return this.#serializer.serialize(this.#view.state.doc, this.#escapeConfig);
     }
 
     isEmpty(): boolean {

src/core/markdown/MarkdownSerializer.js

@@ -296,9 +296,11 @@ export class MarkdownSerializerState {
     // content. If `startOfLine` is true, also escape characters that
     // have special meaning only at the start of the line.
     esc(str, startOfLine) {
-        // TODO: add a setting which characters need to be escaped
-        str = str.replace(/[`\^+*\\\|~\[\]\{\}<>\$]/g, '\\$&');
-        if (startOfLine) str = str.replace(/^[:#\-*+>]/, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
+        const escRegexp = this.options?.commonEscape || /[`\^+*\\\|~\[\]\{\}<>\$]/g;
+        const startOfLineEscRegexp = this.options?.startOfLineEscape || /^[:#\-*+>]/;
+
+        str = str.replace(escRegexp, '\\$&');
+        if (startOfLine) str = str.replace(startOfLineEscRegexp, '\\$&').replace(/^(\s*\d+)\./, '$1\\.');
         return str;
     }