feat: add editor config

Author: pd4d10

packages/bytemd/src/editor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Editor } from 'codemirror';
+  import type {} from 'codemirror/addon/display/placeholder';
   import type { BytemdPlugin, EditorProps, ViewerProps } from './types';
   import { onMount, createEventDispatcher, onDestroy, tick } from 'svelte';
   import debounce from 'lodash.debounce';
@@ -11,6 +13,7 @@
   export let mode: EditorProps['mode'] = 'split';
   export let previewDebounce: EditorProps['previewDebounce'] = 300;
   export let toolbar: EditorProps['toolbar'];
+  export let editorConfig: EditorProps['editorConfig'];
 
   let el: HTMLElement;
   let previewEl: HTMLElement;
@@ -20,7 +23,7 @@
     sanitize,
   };
   let textarea: HTMLTextAreaElement;
-  let editor: CodeMirror.Editor;
+  let editor: Editor;
   let activeTab = 0;
 
   $: context = { editor, $el: el };
@@ -76,7 +79,7 @@
     editor = codemirror.fromTextArea(textarea, {
       mode: 'yaml-frontmatter',
       lineWrapping: true,
-      placeholder: 'Start writing...',
+      ...editorConfig,
     });
 
     // https://github.com/codemirror/CodeMirror/issues/2428#issuecomment-39315423

packages/bytemd/src/toolbar.ts

@@ -1,7 +1,8 @@
 import type { BytemdToolbarItem, EditorProps } from './types';
+import type { Editor } from 'codemirror';
 import { icons } from './icons';
 
-function handleText(editor: CodeMirror.Editor, before: string, after: string) {
+function handleText(editor: Editor, before: string, after: string) {
   if (editor.somethingSelected()) {
     editor.replaceSelection(before + editor.getSelection() + after);
   } else {
@@ -12,10 +13,7 @@ function handleText(editor: CodeMirror.Editor, before: string, after: string) {
   editor.focus();
 }
 
-function handlePrepend(
-  editor: CodeMirror.Editor,
-  replace: (lines: string[]) => string[]
-) {
+function handlePrepend(editor: Editor, replace: (lines: string[]) => string[]) {
   const [selection] = editor.listSelections();
   const fromLine = selection.from().line;
   const toLine = selection.to().line;

packages/bytemd/src/types.ts

@@ -1,18 +1,30 @@
 import type { Processor } from 'unified';
 import type { Schema } from 'hast-util-sanitize';
 import type { VFile } from 'vfile';
+import type { Editor, EditorConfiguration } from 'codemirror';
 
 export interface EditorContext {
   /**
    * CodeMirror editor instance
    */
-  editor: CodeMirror.Editor;
+  editor: Editor;
   /**
    * Root element, `$('.bytemd')`
    */
   $el: HTMLElement;
 }
 
+export interface ViewerContext {
+  /**
+   * Root element of the Viewer, `$('.markdown-body')`
+   */
+  $el: HTMLElement;
+  /**
+   * Markdown process result
+   */
+  result: VFile;
+}
+
 export interface BytemdToolbarItem {
   /**
    * Tooltip of toolbar item
@@ -52,16 +64,7 @@ export interface BytemdPlugin {
   /**
    * Side effect for viewer, triggers when HTML or plugin list changes
    */
-  viewerEffect?(context: {
-    /**
-     * Root element of the Viewer, `$('.markdown-body')`
-     */
-    $el: HTMLElement;
-    /**
-     * Markdown process result
-     */
-    result: VFile;
-  }): void | (() => void);
+  viewerEffect?(context: ViewerContext): void | (() => void);
 }
 
 export interface EditorProps extends ViewerProps {
@@ -84,6 +87,10 @@ export interface EditorProps extends ViewerProps {
   toolbar?:
     | string[]
     | ((itemMap: Record<string, BytemdToolbarItem>) => string[]);
+  /**
+   * CodeMirror editor config
+   */
+  editorConfig: Omit<EditorConfiguration, 'value' | 'mode'>;
 }
 
 export interface ViewerProps {