feat: react wrapper

packages/bytemd/react/src/index.tsx

@@ -1,64 +1,52 @@
-import React, { RefObject } from 'react';
+import React, { useMemo, useEffect, useRef } from 'react';
 import * as bytemd from 'bytemd';
-import { SvelteComponent } from 'svelte';
-
-class SvelteWrapper<
-  P extends Record<string, unknown> = {}
-> extends React.Component<
-  P & {
-    component: typeof SvelteComponent;
-    onMount?: (instance: SvelteComponent) => void;
-  }
-> {
-  private container: RefObject<HTMLDivElement> = React.createRef();
-  private instance?: SvelteComponent;
-
-  componentDidMount() {
-    const { component: Component, onMount } = this.props;
-
-    this.instance = new Component({
-      target: this.container.current!,
-      props: this.props,
-    });
-
-    if (onMount) {
-      onMount(this.instance);
-    }
-  }
-
-  componentDidUpdate() {
-    this.instance!.$set(this.props);
-  }
-
-  componentWillUnmount() {
-    this.instance!.$destroy();
-  }
-
-  render() {
-    return <div ref={this.container} />;
-  }
-}
 
 export interface EditorProps extends bytemd.EditorProps {
   onChange?(value: string): void;
 }
 
-export const Editor: React.FC<EditorProps> = (props) => (
-  <SvelteWrapper
-    {...props}
-    onMount={(instance) => {
-      instance.$on('change', (e: any) => {
-        if (props.onChange) {
-          props.onChange(e.detail.value);
-        }
-      });
-    }}
-    component={bytemd.Editor}
-  />
-);
+export const Editor: React.FC<EditorProps> = (props) => {
+  const ins = useRef<bytemd.Editor>();
+  const el = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!el.current) return;
+
+    const editor = new bytemd.Editor({
+      target: el.current,
+      props,
+    });
+    editor.$on('change', (e) => {
+      if (props.onChange) {
+        props.onChange(e.detail.value);
+      }
+    });
+    ins.current = editor;
+  }, [el.current]);
+
+  return <div ref={el}></div>;
+};
 
 export interface ViewerProps extends bytemd.ViewerProps {}
 
-export const Viewer: React.FC<ViewerProps> = (props) => (
-  <SvelteWrapper {...props} component={bytemd.Viewer} />
-);
+export const Viewer: React.FC<ViewerProps> = ({ value, plugins }) => {
+  const el = useRef<HTMLDivElement>(null);
+  const html = useMemo(() => bytemd.processMarkdown(value, plugins), [
+    value,
+    plugins,
+  ]);
+
+  useEffect(() => {
+    plugins?.forEach(({ onMount }) => {
+      if (onMount && el.current) onMount(el.current);
+    });
+  }, [html]);
+
+  return (
+    <div
+      ref={el}
+      className="markdown-body"
+      dangerouslySetInnerHTML={{ __html: html }}
+    ></div>
+  );
+};

packages/bytemd/src/index.ts

@@ -1,10 +1,10 @@
 import Editor from './editor.svelte';
 import Viewer from './viewer.svelte';
-import { createCodeBlockPlugin, getCodeBlockMeta, HastNode } from './helpers';
 import * as cm from 'codemirror';
 import * as unified from 'unified';
 
-export { Editor, Viewer, createCodeBlockPlugin, getCodeBlockMeta, HastNode };
+export { Editor, Viewer };
+export { processMarkdown } from './utils';
 
 type Transformer = (x: unified.Processor) => unified.Processor;
 

packages/bytemd/src/toolbar.svelte

@@ -15,14 +15,11 @@
     handleOl,
     handleUl,
     handleTask,
-    covertToHtml,
   } from './toolbar';
 
   const dispatch = createEventDispatcher();
 
   export let cm;
-  export let remarkTransformer;
-  export let rehypeTransformer;
   export let fileHandler;
   export let mode;
   export let activeTab;
@@ -103,11 +100,6 @@
   <ToolbarButton tooltip="task list" on:click={() => handleTask(cm)}>
     {@html iconMap.tasklist}
   </ToolbarButton>
-  <ToolbarButton
-    tooltip="convert to HTML"
-    on:click={() => covertToHtml(cm, remarkTransformer, rehypeTransformer)}>
-    {@html iconMap.html}
-  </ToolbarButton>
 
   {#each toolbarItems as item}
     {#if item.bodyHtml && item.tooltip}

packages/bytemd/src/toolbar.ts

@@ -1,6 +1,5 @@
 import { Editor } from 'codemirror';
-import { processMarkdown } from './utils';
-import { EditorProps, BytemdPlugin } from '.';
+import { EditorProps } from '.';
 
 export function handleText(cm: Editor, before: string, after: string) {
   if (cm.somethingSelected()) {
@@ -128,16 +127,3 @@ export function handleTask(cm: Editor) {
   }
   cm.focus();
 }
-
-export function covertToHtml(cm: Editor, plugins: BytemdPlugin[]) {
-  if (cm.somethingSelected()) {
-    const [selection] = cm.listSelections();
-    const text = cm.getSelection();
-    cm.replaceRange(
-      processMarkdown(text, plugins).toString(),
-      selection.anchor,
-      selection.head
-    );
-  }
-  cm.focus();
-}

packages/bytemd/src/utils.ts

@@ -8,7 +8,7 @@ import merge from 'deepmerge';
 import ghSchema from 'hast-util-sanitize/lib/github.json';
 import { BytemdPlugin } from '.';
 
-export function processMarkdown(value: string, plugins: BytemdPlugin[]) {
+export function processMarkdown(value: string, plugins: BytemdPlugin[] = []) {
   let parser = unified().use(remark);
 
   plugins.forEach(({ remarkTransformer }) => {