Combine nodes, marks, commands, and queries into markdown plugin

jxnblk · jxnblk · commit fc3d496feeb1 · 2019-04-25T19:28:37.000-04:00
diff --git a/packages/editor/src/components/Editor.js b/packages/editor/src/components/Editor.js
@@ -11,8 +11,8 @@ import { isUrl, isImageUrl } from '../lib/util'
 
 import theme from './theme'
 
-import NodesPlugin from '../plugins/nodes'
-import MarksPlugin from '../plugins/marks'
+import MarkdownPlugin from '../plugins/markdown'
+
 import CodePlugin from '../plugins/code'
 import LiveJSXPlugin from '../plugins/live-jsx'
 import TablePlugin from '../plugins/table'
@@ -24,8 +24,7 @@ import MarkdownShortcutsPlugin from '../plugins/markdown-shortcuts'
 
 const plugins = [
   SoftBreak({ shift: true }),
-  NodesPlugin(),
-  MarksPlugin(),
+  MarkdownPlugin(),
   CodePlugin(),
   LiveJSXPlugin(),
   TablePlugin(),
diff --git a/packages/editor/src/plugins/markdown/commands.js b/packages/editor/src/plugins/markdown/commands.js
@@ -0,0 +1,28 @@
+const DEFAULT_BLOCK = 'paragraph'
+
+const toggleBold = editor => {
+  editor.toggleMark('bold').focus()
+}
+
+const toggleItalic = editor => {
+  editor.toggleMark('italic').focus()
+}
+
+const toggleBlock = (editor, type) => {
+  if (editor.hasBlock(type)) {
+    editor.setBlocks(DEFAULT_BLOCK)
+  } else {
+    editor.setBlocks(type)
+  }
+}
+
+const toggleHeadingOne = editor => toggleBlock(editor, 'heading-one')
+const toggleHeadingTwo = editor => toggleBlock(editor, 'heading-two')
+
+export default {
+  toggleBold,
+  toggleItalic,
+  toggleBlock,
+  toggleHeadingOne,
+  toggleHeadingTwo
+}
diff --git a/packages/editor/src/plugins/markdown/index.js b/packages/editor/src/plugins/markdown/index.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import queries from './queries'
+import commands from './commands'
+import renderMark from './renderMark'
+import renderNode from './renderNode'
+import onKeyDown from './onKeyDown'
+
+export default (opts = {}) => ({
+  queries,
+  commands,
+  renderMark,
+  renderNode,
+  onKeyDown
+})
diff --git a/packages/editor/src/plugins/markdown/onKeyDown.js b/packages/editor/src/plugins/markdown/onKeyDown.js
@@ -0,0 +1,15 @@
+import { keyboardEvent } from '@slate-editor/utils'
+
+export default (event, editor, next) => {
+  if (!keyboardEvent.isMod(event)) return next()
+  switch (event.key) {
+    case 'b':
+      editor.toggleBold()
+      break
+    case 'i':
+      editor.toggleItalic()
+      break
+    default:
+      next()
+  }
+}
diff --git a/packages/editor/src/plugins/markdown/queries.js b/packages/editor/src/plugins/markdown/queries.js
@@ -0,0 +1,7 @@
+const hasBlock = (editor, type) => {
+  return editor.value.blocks.some(node => node.type === type)
+}
+
+export default {
+  hasBlock
+}
diff --git a/packages/editor/src/plugins/markdown/renderMark.js b/packages/editor/src/plugins/markdown/renderMark.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Styled } from 'theme-ui'
+
+export default (props, editor, next) => {
+  const { mark, attributes, children } = props
+
+  switch (mark.type) {
+    case 'bold':
+      return <Styled.strong {...attributes}>{children}</Styled.strong>
+    case 'code':
+      return <Styled.inlineCode {...attributes}>{children}</Styled.inlineCode>
+    case 'italic':
+      return <Styled.em {...attributes}>{children}</Styled.em>
+    case 'underlined':
+      return <u {...attributes}>{children}</u>
+    case 'strikethrough':
+      return <s {...attributes}>{children}</s>
+    default:
+      return next()
+  }
+}
diff --git a/packages/editor/src/plugins/markdown/renderNode.js b/packages/editor/src/plugins/markdown/renderNode.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Styled } from 'theme-ui'
+
+export default (props, editor, next) => {
+  const { node, attributes, children } = props
+
+  switch (node.type) {
+    case 'block-quote':
+      return <Styled.blockquote {...attributes}>{children}</Styled.blockquote>
+    case 'bulleted-list':
+      return <Styled.ul {...attributes}>{children}</Styled.ul>
+    case 'numbered-list':
+      return <Styled.ol {...attributes}>{children}</Styled.ol>
+    case 'list-item':
+      return <Styled.li {...attributes}>{children}</Styled.li>
+    case 'list-item-child':
+      return <Styled.p {...attributes}>{children}</Styled.p>
+    case 'heading-one':
+      return <Styled.h1 {...attributes}>{children}</Styled.h1>
+    case 'heading-two':
+      return <Styled.h2 {...attributes}>{children}</Styled.h2>
+    case 'heading-three':
+      return <Styled.h3 {...attributes}>{children}</Styled.h3>
+    case 'heading-four':
+      return <Styled.h4 {...attributes}>{children}</Styled.h4>
+    case 'heading-five':
+      return <Styled.h5 {...attributes}>{children}</Styled.h5>
+    case 'heading-six':
+      return <Styled.h6 {...attributes}>{children}</Styled.h6>
+    case 'list-item':
+      return <Styled.li {...attributes}>{children}</Styled.li>
+    case 'paragraph':
+      return <Styled.p {...attributes}>{children}</Styled.p>
+    case 'hr':
+      return <Styled.hr {...attributes} />
+    case 'link':
+      return (
+        <Styled.a {...attributes} href={node.data.get('href')}>
+          {children}
+        </Styled.a>
+      )
+    default:
+      return next()
+  }
+}
diff --git a/packages/editor/src/plugins/marks.js b/packages/editor/src/plugins/marks.js
diff --git a/packages/editor/src/plugins/nodes.js b/packages/editor/src/plugins/nodes.js
diff --git a/packages/editor/src/plugins/toolbar/index.js b/packages/editor/src/plugins/toolbar/index.js
@@ -44,8 +44,6 @@ const toggleBlockQuote = editor => {
   }
 }
 
-const toggleHeadingOne = editor => toggleBlock(editor, 'heading-one')
-const toggleHeadingTwo = editor => toggleBlock(editor, 'heading-two')
 const toggleJSX = editor => toggleBlock(editor, 'jsx')
 const togglePre = editor => toggleBlock(editor, 'pre')
 
@@ -83,8 +81,6 @@ export default (opts = {}) => ({
   commands: {
     toggleBlock,
     toggleBlockQuote,
-    toggleHeadingOne,
-    toggleHeadingTwo,
     toggleBulletedList,
     toggleJSX,
     togglePre
