Merge pull request accordproject#96 from accordproject/ds-use-markdown-transform

(chore) update to use markdown-transform

Author: dselman

README.md

@@ -6,17 +6,18 @@
 
 This repo contains two React-based editors:
 1. A WYSIWYG  [Slate][slate]-based editor that edits rich text and calls an `onChange`
-   callback with the modified Slate DOM and the [CommonMark][CommonMark] markdown serialization.
+   callback with the modified Slate DOM.
 2. A TextArea-based markdown editor that edits markdown text and calls an `onChange`
-   callback with the equivalent Slate DOM and the modified markdown text.
+   callback with the modified markdown text.
+
+The demo editor uses the `markdown-transform` package to transform Slate DOM 
+to/from markdown text.
 
 Using these editors you could allow people to either edit rich formatted text using
 markdown (and provide a WYSIWYG preview), or allow them to edit using a WYSIWYG
 editor and use markdown for persistence.
 
-The editor is plugin-based and includes a formatting toolbar. Plugins are used to
-extend the core editor with support with new formatting functionality and/or new
-types of blocks.
+The editor includes a formatting toolbar.
 
 This component is Apache-2 licensed Open Source. Contributors welcome!
 
@@ -32,11 +33,13 @@ npm install @accordproject/markdown-editor
 import { SlateAsInputEditor } from '@accordproject/markdown-editor';
 import List from '@accordproject/markdown-editor/dist/plugins/list';
 import Video from '@accordproject/markdown-editor/dist/plugins/video';
+import { SlateTransformer } from '@accordproject/markdown-slate';
 
-const plugins = [List(), Video()];
+const plugins = [List()];
+const slateTransformer = new SlateTransformer();
 
-function storeLocal(slateValue, markdown) {
-  // console.log(markdown);
+function storeLocal(slateValue) {
+  const markdown = slateTransformer.toMarkdown(slateValue);
   localStorage.setItem('markdown-editor', markdown);
 }
 
@@ -50,9 +53,6 @@ For an example React App see the `./examples/` folder.
 
 A `TextArea` containing [CommonMark][CommonMark] synchronized with a `MarkdownEditor` component, rendered using [Slate][slate].
 
-The code for the sample `video` plugin used in the demo is here:
-https://github.com/accordproject/markdown-editor/blob/master/src/plugins/video.js
-
 ![overview image](overview.png)
 
 In order to run an isolated local development example, run `npm run dev` and then navigate to: http://localhost:3001/examples

examples/src/index.js

@@ -4,23 +4,22 @@ import {
 } from 'semantic-ui-react';
 
 import ReactDOM from 'react-dom';
+import { SlateTransformer } from '@accordproject/markdown-slate';
+
 import './index.css';
 import MarkdownAsInputEditor from '../../src/MarkdownAsInputEditor';
 import SlateAsInputEditor from '../../src/SlateAsInputEditor';
-import PluginManager from '../../src/PluginManager';
-import FromMarkdown from '../../src/markdown/fromMarkdown';
 
 import * as serviceWorker from './serviceWorker';
 import 'semantic-ui-css/semantic.min.css';
-import List from '../../src/plugins/list';
-import Video from '../../src/plugins/video';
 import NoEdit from '../../src/plugins/noedit';
+import List from '../../src/plugins/list';
+
+const plugins = [NoEdit(), List()];
+const slateTransformer = new SlateTransformer();
 
-const plugins = [List(), Video(), NoEdit()];
-const pluginManager = new PluginManager(plugins);
-const fromMarkdown = new FromMarkdown(pluginManager);
+const defaultMarkdown = `# My Heading
 
-const defaultMarkdown = `# Heading One
 This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`.
 
 This is ***bold and italic*** text
@@ -43,13 +42,10 @@ Or:
 
 ### Sub heading
 
-Video:
-
-<video/>
-
-Another video:
+This is more text.
 
-<video src="https://www.youtube.com/embed/cmmq-JBMbbQ"/>`;
+Fin.
+`;
 
 const propsObj = {
   WIDTH: '600px',
@@ -63,23 +59,22 @@ function Demo() {
   /**
    * Current Slate Value
    */
-  const [slateValue, setSlateValue] = useState(fromMarkdown.convert(defaultMarkdown));
+  const [slateValue, setSlateValue] = useState(slateTransformer.fromMarkdown(defaultMarkdown));
   const [markdown, setMarkdown] = useState(defaultMarkdown);
 
   /**
    * Called when the markdown changes
    */
-  const onMarkdownChange = useCallback((slateValue, markdown) => {
+  const onMarkdownChange = useCallback((markdown) => {
     localStorage.setItem('markdown-editor', markdown);
-    // setSlateValue(slateValue);
-    // setMarkdown(markdown);
   }, []);
 
   /**
    * Called when the Slate Value changes
    */
-  const onSlateValueChange = useCallback((slateValue, markdown) => {
+  const onSlateValueChange = useCallback((slateValue) => {
     localStorage.setItem('slate-editor-value', slateValue.toJSON());
+    const markdown = slateTransformer.toMarkdown(slateValue);
     setSlateValue(slateValue);
     setMarkdown(markdown);
   }, []);