feat(bundle): improve drilling of codemirror config (#323)

Author: d3m1d0v

src/bundle/Editor.ts

@@ -9,7 +9,7 @@ import {ActionStorage, WysiwygEditor, WysiwygEditorOptions} from '../core';
 import {ReactRenderStorage, RenderStorage} from '../extensions';
 import {i18n} from '../i18n/bundle';
 import {logger} from '../logger';
-import {createCodemirror} from '../markup/codemirror';
+import {type CreateCodemirrorParams, createCodemirror} from '../markup/codemirror';
 import type {YfmLangOptions} from '../markup/codemirror/yfm';
 import {CodeEditor, Editor as MarkupEditor} from '../markup/editor';
 import {Emitter, Receiver, SafeEventEmitter} from '../utils/event-emitter';
@@ -108,6 +108,17 @@ type ChangeEditorModeOptions = {
     reason: 'error-boundary' | 'settings' | 'manually';
 };
 
+export type MarkupConfig = {
+    /** Additional extensions for codemirror instance. */
+    extensions?: CreateCodemirrorParams['extensions'];
+    /**
+     * Additional language data for markdown language in codemirror.
+     * Can be used to configure additional autocompletions and others.
+     * See more https://codemirror.net/docs/ref/#state.EditorState.languageDataAt
+     */
+    languageData?: YfmLangOptions['languageData'];
+};
+
 export type EditorOptions = Pick<
     WysiwygEditorOptions,
     'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'
@@ -137,8 +148,9 @@ export type EditorOptions = Pick<
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
+    /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
-    yfmLangOptions?: YfmLangOptions;
+    markupConfig?: MarkupConfig;
 };
 
 /** @internal */
@@ -151,8 +163,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #renderPreview?: RenderPreview;
     #wysiwygEditor?: WysiwygEditor;
     #markupEditor?: MarkupEditor;
-    #extraMarkupExtensions?: CodemirrorExtension[];
-    #yfmLangOptions?: YfmLangOptions;
+    #markupConfig: MarkupConfig;
 
     readonly #preset: EditorPreset;
     #allowHTML?: boolean;
@@ -275,8 +286,8 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                     reactRenderer: this.#renderStorage,
                     uploadHandler: this.fileUploadHandler,
                     needImgDimms: this.needToSetDimensionsForUploadedImages,
-                    extraMarkupExtensions: this.#extraMarkupExtensions,
-                    yfmLangOptions: this.#yfmLangOptions,
+                    extensions: this.#markupConfig.extensions,
+                    yfmLangOptions: {languageData: this.#markupConfig.languageData},
                     receiver: this,
                 }),
             );
@@ -311,8 +322,8 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         this.#linkifyTlds = opts.linkifyTlds;
         this.#allowHTML = opts.allowHTML;
         this.#extensions = opts.extensions;
-        this.#extraMarkupExtensions = opts.extraMarkupExtensions;
-        this.#yfmLangOptions = opts.yfmLangOptions;
+        this.#markupConfig = {...opts.markupConfig};
+        this.#markupConfig.extensions ??= opts.extraMarkupExtensions;
 
         this.#renderStorage = opts.renderStorage;
         this.#fileUploadHandler = opts.fileUploadHandler;

src/bundle/index.ts

@@ -2,6 +2,7 @@ export type {
     Editor as MarkdownEditorInstance,
     EditorMode as MarkdownEditorMode,
     EditorPreset as MarkdownEditorPreset,
+    MarkupConfig as MarkdownEditorMarkupConfig,
     RenderPreview,
     SplitMode,
 } from './Editor';

src/markup/codemirror/create.ts

@@ -41,6 +41,8 @@ import {ReactRendererFacet} from './react-facet';
 import {SearchPanelPlugin} from './search-plugin/plugin';
 import {type YfmLangOptions, yfmLang} from './yfm';
 
+export type {YfmLangOptions};
+
 export type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
     placeholderText: string;
@@ -52,7 +54,7 @@ export type CreateCodemirrorParams = {
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
     needImgDimms?: boolean;
-    extraMarkupExtensions?: Extension[];
+    extensions?: Extension[];
     receiver?: Receiver<EventMap>;
     yfmLangOptions?: YfmLangOptions;
 };
@@ -67,7 +69,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
         onSubmit,
         onChange,
         onDocChange,
-        extraMarkupExtensions,
+        extensions: extraExtensions,
         receiver,
         yfmLangOptions,
     } = params;
@@ -138,8 +140,8 @@ export function createCodemirror(params: CreateCodemirrorParams) {
             }),
         );
     }
-    if (extraMarkupExtensions) {
-        extensions.push(...extraMarkupExtensions);
+    if (extraExtensions) {
+        extensions.push(...extraExtensions);
     }
 
     return new EditorView({