feat: expose remark options

packages/bytemd/react/src/viewer.tsx

@@ -3,12 +3,16 @@ import * as bytemd from 'bytemd';
 
 export interface ViewerProps extends bytemd.ViewerProps {}
 
-export const Viewer: React.FC<ViewerProps> = ({ value, plugins }) => {
+export const Viewer: React.FC<ViewerProps> = ({
+  value,
+  markdownOptions,
+  plugins,
+}) => {
   const el = useRef<HTMLDivElement>(null);
-  const html = useMemo(() => bytemd.processMarkdown(value, plugins), [
-    value,
-    plugins,
-  ]);
+  const html = useMemo(
+    () => bytemd.processMarkdown({ value, markdownOptions, plugins }),
+    [value, markdownOptions, plugins]
+  );
 
   useEffect(() => {
     plugins?.forEach(({ onMount }) => {

packages/bytemd/src/editor.svelte

@@ -5,9 +5,10 @@
   import { dataUrlFileHandler, initEditor } from './editor';
 
   export let value = '';
+  export let markdownOptions = [];
+  export let plugins = [];
   export let containerStyle;
   export let fileHandler = dataUrlFileHandler;
-  export let plugins = [];
   export let mode = 'split';
   export let editorConfig;
   export let toolbar = true;
@@ -96,7 +97,7 @@
       class="bytemd-viewer"
       bind:this={viewer}
       class:hidden={mode === 'tab' && activeTab === 0}>
-      <Viewer {value} {plugins} />
+      <Viewer {value} {markdownOptions} {plugins} />
     </div>
   </div>
 </div>

packages/bytemd/src/index.ts

@@ -2,6 +2,7 @@ import Editor from './editor.svelte';
 import Viewer from './viewer.svelte';
 import { EditorConfiguration } from 'codemirror';
 import * as unified from 'unified';
+import { RemarkParseOptions } from 'remark-parse';
 
 export { Editor, Viewer };
 export { processMarkdown } from './utils';
@@ -15,12 +16,10 @@ export interface BytemdPlugin {
   onMount?(el: HTMLElement): void;
 }
 
-export interface EditorProps {
-  value: string;
+export interface EditorProps extends ViewerProps {
   mode?: 'split' | 'tab';
   containerStyle?: string;
   fileHandler?: (file: File) => Promise<string>;
-  plugins?: BytemdPlugin[];
   editorConfig?: Omit<EditorConfiguration, 'value'>;
   toolbar?: boolean;
   /**
@@ -35,5 +34,6 @@ export interface EditorProps {
 
 export interface ViewerProps {
   value: string;
+  markdownOptions?: Partial<RemarkParseOptions>;
   plugins?: BytemdPlugin[];
 }

packages/bytemd/src/utils.ts

@@ -6,10 +6,14 @@ import rehypeSanitize from 'rehype-sanitize';
 import stringify from 'rehype-stringify';
 import merge from 'deepmerge';
 import ghSchema from 'hast-util-sanitize/lib/github.json';
-import { BytemdPlugin } from '.';
-
-export function processMarkdown(value: string, plugins: BytemdPlugin[] = []) {
-  let parser = unified().use(remark);
+import { ViewerProps } from '.';
+
+export function processMarkdown({
+  value,
+  markdownOptions,
+  plugins = [],
+}: ViewerProps) {
+  let parser = unified().use(remark, markdownOptions);
 
   plugins.forEach(({ remarkTransformer }) => {
     if (remarkTransformer) parser = remarkTransformer(parser);

packages/bytemd/src/viewer.svelte

@@ -3,20 +3,22 @@
   import { processMarkdown } from './utils';
 
   export let value = '';
-  export let plugins = [];
+  export let markdownOptions;
+  export let plugins;
 
   let el;
 
   afterUpdate(() => {
-    plugins.forEach((p) => {
-      if (p.onMount) {
-        p.onMount(el);
-      }
-    });
+    if (plugins) {
+      plugins.forEach((p) => {
+        if (p.onMount) {
+          p.onMount(el);
+        }
+      });
+    }
   });
 
-  $: html = processMarkdown(value, plugins);
-  // $: console.log(html);
+  $: html = processMarkdown({ value, plugins, markdownOptions });
 </script>
 
 <div bind:this={el} class="markdown-body">

packages/bytemd/vue/src/editor.vue

@@ -8,10 +8,11 @@ import * as bytemd from 'bytemd';
 export default {
   props: [
     'value',
+    'markdownOptions',
+    'plugins',
     'mode',
     'containerStyle',
     'fileHandler',
-    'plugins',
     'editorConfig',
     'toolbar',
     'toolbarItems',

packages/bytemd/vue/src/viewer.vue

@@ -6,7 +6,7 @@
 import { processMarkdown } from 'bytemd';
 
 export default {
-  props: ['value', 'plugins'],
+  props: ['value', 'markdownOptions', 'plugins'],
   mounted() {
     if (this.plugins) {
       this.plugins.forEach(({ onMount }) => {
@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     html() {
-      return processMarkdown(this.value, this.plugins);
+      return processMarkdown(this.$props);
     },
   },
 };