feat(bundle): pass md options to renderPreview callback (#435)

Author: d3m1d0v

demo/Playground.tsx

@@ -145,18 +145,18 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
     }, [mdRaw]);
 
     const renderPreview = useCallback<RenderPreview>(
-        ({getValue}) => (
+        ({getValue, md}) => (
             <SplitModePreview
                 getValue={getValue}
-                allowHTML={allowHTML}
-                linkify={linkify}
-                linkifyTlds={linkifyTlds}
-                breaks={breaks}
+                allowHTML={md.html}
+                linkify={md.linkify}
+                linkifyTlds={md.linkifyTlds}
+                breaks={md.breaks}
                 needToSanitizeHtml={sanitizeHtml}
                 plugins={plugins}
             />
         ),
-        [allowHTML, breaks, linkify, linkifyTlds, sanitizeHtml],
+        [sanitizeHtml],
     );
 
     const mdEditor = useMarkdownEditor({

demo/PresetDemo.tsx

@@ -64,18 +64,18 @@ export const PresetDemo = React.memo<PresetDemoProps>((props) => {
     const [mdRaw, setMdRaw] = React.useState<MarkupString>('');
 
     const renderPreview = useCallback<RenderPreview>(
-        ({getValue}) => (
+        ({getValue, md}) => (
             <SplitModePreview
                 getValue={getValue}
-                allowHTML={allowHTML}
-                linkify={linkify}
-                linkifyTlds={linkifyTlds}
-                breaks={breaks}
+                allowHTML={md.html}
+                linkify={md.linkify}
+                linkifyTlds={md.linkifyTlds}
+                breaks={md.breaks}
                 needToSanitizeHtml
                 plugins={plugins}
             />
         ),
-        [allowHTML, breaks, linkify, linkifyTlds],
+        [],
     );
 
     const mdEditor = useMarkdownEditor({

src/bundle/Editor.ts

@@ -22,6 +22,7 @@ import type {FileUploadHandler} from '../utils/upload';
 import type {
     MarkdownEditorMode as EditorMode,
     MarkdownEditorPreset as EditorPreset,
+    MarkdownEditorMdOptions,
     MarkdownEditorOptions,
     MarkdownEditorMarkupConfig as MarkupConfig,
     RenderPreview,
@@ -77,6 +78,7 @@ export interface EditorInt
     readonly splitModeEnabled: boolean;
     readonly splitMode: SplitMode;
     readonly preset: EditorPreset;
+    readonly mdOptions: Readonly<MarkdownEditorMdOptions>;
 
     /** @internal used in demo for dev-tools */
     readonly _wysiwygView?: PMEditorView;
@@ -132,11 +134,9 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #markupEditor?: MarkupEditor;
     #markupConfig: MarkupConfig;
     #escapeConfig?: EscapeConfig;
+    #mdOptions: Readonly<MarkdownEditorMdOptions>;
 
     readonly #preset: EditorPreset;
-    #allowHTML?: boolean;
-    #linkify?: boolean;
-    #linkifyTlds?: string | string[];
     #extensions?: WysiwygEditorOptions['extensions'];
     #renderStorage: ReactRenderStorage;
     #fileUploadHandler?: FileUploadHandler;
@@ -209,6 +209,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#preset;
     }
 
+    get mdOptions(): Readonly<MarkdownEditorMdOptions> {
+        return this.#mdOptions;
+    }
+
     get renderPreview(): RenderPreview | undefined {
         return this.#renderPreview;
     }
@@ -233,9 +237,9 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 mdPreset,
                 initialContent: this.#markup,
                 extensions: this.#extensions,
-                allowHTML: this.#allowHTML,
-                linkify: this.#linkify,
-                linkifyTlds: this.#linkifyTlds,
+                allowHTML: this.#mdOptions.html,
+                linkify: this.#mdOptions.linkify,
+                linkifyTlds: this.#mdOptions.linkifyTlds,
                 escapeConfig: this.#escapeConfig,
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
@@ -303,9 +307,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         this.#markup = initial.markup ?? '';
 
         this.#preset = opts.preset ?? 'full';
-        this.#linkify = md.linkify;
-        this.#linkifyTlds = md.linkifyTlds;
-        this.#allowHTML = md.html;
+        this.#mdOptions = md;
         this.#extensions = wysiwygConfig.extensions;
         this.#markupConfig = {...opts.markupConfig};
 

src/bundle/MarkdownEditorView.tsx

@@ -239,6 +239,7 @@ export const MarkdownEditorView = React.forwardRef<HTMLDivElement, MarkdownEdito
                                         {editor.renderPreview?.({
                                             getValue: editor.getValue,
                                             mode: 'preview',
+                                            md: editor.mdOptions,
                                         })}
                                     </div>
                                     {settings}

src/bundle/SplitModeView.tsx

@@ -106,7 +106,11 @@ const SplitModeView = React.forwardRef<HTMLDivElement, SplitModeProps>(({editor}
             <Label icon={<Eye />} className={b('preview-sign')} size={'m'}>
                 {i18n('split-mode-text')}
             </Label>
-            {editor.renderPreview?.({getValue: editor.getValue, mode: 'split'})}
+            {editor.renderPreview?.({
+                getValue: editor.getValue,
+                mode: 'split',
+                md: editor.mdOptions,
+            })}
         </div>
     );
 });

src/bundle/types.ts

@@ -18,6 +18,7 @@ export type MarkdownEditorSplitMode = false | 'horizontal' | 'vertical';
 export type RenderPreviewParams = {
     getValue: () => MarkupString;
     mode: 'preview' | 'split';
+    md: Readonly<MarkdownEditorMdOptions>;
 };
 export type RenderPreview = (params: RenderPreviewParams) => ReactNode;