Pass renderMark as plugin to match renderNode

Author: tommoor

src/index.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Value, Editor as TEditor, Schema, Node } from "slate";
 import { Editor } from "slate-react";
 import styled, { ThemeProvider } from "styled-components";
-import type { SlateNodeProps, Plugin, SearchResult } from "./types";
+import type { Plugin, SearchResult } from "./types";
 import { light as lightTheme, dark as darkTheme } from "./theme";
 import defaultSchema from "./schema";
 import getDataTransferFiles from "./lib/getDataTransferFiles";
@@ -14,7 +14,6 @@ import BlockInsert from "./components/BlockInsert";
 import Contents from "./components/Contents";
 import Markdown from "./serializer";
 import createPlugins from "./plugins";
-import renderMark from "./marks";
 import commands from "./commands";
 import queries from "./queries";
 
@@ -285,7 +284,6 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
               commands={commands}
               queries={queries}
               placeholder={placeholder}
-              renderMark={renderMark}
               schema={this.getSchema()}
               onKeyDown={this.handleKeyDown}
               onChange={this.handleChange}

src/marks.js

@@ -8,11 +8,7 @@ type Props = {
   mark: Mark,
 };
 
-export default function renderMark(
-  props: Props,
-  editor: Editor,
-  next: Function
-) {
+function renderMark(props: Props, editor: Editor, next: Function) {
   switch (props.mark.type) {
     case "bold":
       return <strong>{props.children}</strong>;
@@ -30,3 +26,5 @@ export default function renderMark(
       return next();
   }
 }
+
+export default { renderMark };

src/plugins.js

@@ -17,6 +17,7 @@ import MarkdownPaste from "./plugins/MarkdownPaste";
 import Ellipsis from "./plugins/Ellipsis";
 import Embeds from "./plugins/Embeds";
 import Nodes from "./nodes.js";
+import Marks from "./marks.js";
 
 // additional language support based on the most popular programming languages
 import "prismjs/components/prism-ruby";
@@ -29,6 +30,7 @@ import "prismjs/components/prism-java";
 const createPlugins = ({ placeholder, getLinkComponent }: *) => {
   return [
     Nodes,
+    Marks,
     PasteLinkify({
       type: "link",
       collapseTo: "end",