Refactoring

demo/tsconfig.json

@@ -5,6 +5,7 @@
      "rootDir": "./src",
      "composite": true
   },
+  "include": ["src"],
   "references": [
     {
       "path": "../react-prosemirror"

react-prosemirror-html-editor/src/HTMLEditor.tsx

@@ -1,3 +1,6 @@
+import { baseKeymap } from 'prosemirror-commands'
+import { history } from 'prosemirror-history'
+import { keymap } from 'prosemirror-keymap'
 import { EditorProps } from 'prosemirror-view'
 import React, { useMemo } from 'react'
 import {
@@ -6,11 +9,19 @@ import {
   EditorProvider,
 } from 'react-prosemirror'
 
-import { FloatingToolbar } from './FloatingToolbar'
-import { MainToolbar } from './MainToolbar'
-import * as nodeViews from './nodeViews'
-import { plugins } from './plugins'
-import { EditorSchema, schema } from './schema'
+import { FloatingToolbar, MainToolbar } from './components'
+import { keys, rules } from './plugins'
+import { createSchema, EditorSchema } from './schema'
+import { paragraphView } from './views'
+
+const schema = createSchema()
+
+const plugins = [
+  history(), // undo/redo
+  keys(schema), // custom keymap
+  keymap(baseKeymap), // base keymap
+  rules(schema), // input rules
+]
 
 const transformer = createHtmlTransformer<EditorSchema>(schema)
 
@@ -40,7 +51,9 @@ export const HTMLEditor = React.memo<{
             return false
           },
         },
-        nodeViews,
+        nodeViews: {
+          paragraph: paragraphView,
+        },
         scrollMargin: 16,
         scrollThreshold: 16,
       }),
@@ -56,9 +69,9 @@ export const HTMLEditor = React.memo<{
         transformer={transformer}
         value={value}
       >
-        <MainToolbar />
+        <MainToolbar schema={schema} />
         <EditorContent autoFocus={autoFocus} />
-        <FloatingToolbar />
+        <FloatingToolbar schema={schema} />
       </EditorProvider>
     )
   }

react-prosemirror-html-editor/src/FloatingToolbar.tsx → react-prosemirror-html-editor/src/components/FloatingToolbar.tsx

@@ -12,9 +12,11 @@ import { toggleMark } from 'prosemirror-commands'
 import React from 'react'
 import { Floater, markActive, Toolbar, ToolbarItem } from 'react-prosemirror'
 
-import { schema } from './schema'
+import { EditorSchema } from '../schema'
 
-export const FloatingToolbar: React.FC = () => {
+export const FloatingToolbar: React.FC<{ schema: EditorSchema }> = ({
+  schema,
+}) => {
   return (
     <Floater>
       <Toolbar>

react-prosemirror-html-editor/src/MainToolbar.tsx → react-prosemirror-html-editor/src/components/MainToolbar.tsx

@@ -21,9 +21,9 @@ import {
   ToolbarItem,
 } from 'react-prosemirror'
 
-import { schema } from './schema'
+import { EditorSchema } from '../schema'
 
-export const MainToolbar: React.FC = () => {
+export const MainToolbar: React.FC<{ schema: EditorSchema }> = ({ schema }) => {
   return (
     <Toolbar>
       <ToolbarGroup>

react-prosemirror-html-editor/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar'
+export * from './MainToolbar'

react-prosemirror-html-editor/src/index.ts

@@ -1 +1 @@
-export * from './HTMLEditor'
+export { HTMLEditor } from './HTMLEditor'

react-prosemirror-html-editor/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export * from './keys'
+export * from './rules'

react-prosemirror-html-editor/src/plugins/keys.ts

@@ -0,0 +1,23 @@
+import { joinBackward, toggleMark } from 'prosemirror-commands'
+import { redo, undo } from 'prosemirror-history'
+import { keymap } from 'prosemirror-keymap'
+import {
+  liftListItem,
+  sinkListItem,
+  splitListItem,
+} from 'prosemirror-schema-list'
+import { Plugin } from 'prosemirror-state'
+
+import { EditorSchema } from '../schema'
+
+export const keys = (schema: EditorSchema): Plugin<EditorSchema> =>
+  keymap({
+    'Mod-b': toggleMark<EditorSchema>(schema.marks.strong),
+    'Mod-i': toggleMark<EditorSchema>(schema.marks.em),
+    'Mod-z': undo,
+    'Shift-Mod-z': redo,
+    Backspace: joinBackward, // TODO: select all + delete
+    Enter: splitListItem<EditorSchema>(schema.nodes.list_item),
+    'Shift-Tab': liftListItem<EditorSchema>(schema.nodes.list_item),
+    Tab: sinkListItem<EditorSchema>(schema.nodes.list_item),
+  })

react-prosemirror-html-editor/src/plugins.ts → react-prosemirror-html-editor/src/plugins/rules.ts

@@ -1,41 +1,15 @@
-import { baseKeymap, joinBackward, toggleMark } from 'prosemirror-commands'
-import { history, redo, undo } from 'prosemirror-history'
+// input rules from prosemirror-example-setup
 import {
   inputRules,
   textblockTypeInputRule,
   wrappingInputRule,
 } from 'prosemirror-inputrules'
-import { keymap } from 'prosemirror-keymap'
-import {
-  liftListItem,
-  sinkListItem,
-  splitListItem,
-} from 'prosemirror-schema-list'
 import { Plugin } from 'prosemirror-state'
 
-import { EditorSchema, schema } from './schema'
-
-export const plugins: Plugin<EditorSchema>[] = [
-  // undo/redo
-  history(),
-
-  // your custom keymap
-  keymap<EditorSchema>({
-    'Mod-b': toggleMark<EditorSchema>(schema.marks.strong),
-    'Mod-i': toggleMark<EditorSchema>(schema.marks.em),
-    'Mod-z': undo,
-    'Shift-Mod-z': redo,
-    Backspace: joinBackward, // TODO: select all + delete
-    Enter: splitListItem<EditorSchema>(schema.nodes.list_item),
-    'Shift-Tab': liftListItem<EditorSchema>(schema.nodes.list_item),
-    Tab: sinkListItem<EditorSchema>(schema.nodes.list_item),
-  }),
-
-  // the base keymap
-  keymap<EditorSchema>(baseKeymap),
+import { EditorSchema } from '../schema'
 
-  // input rules from prosemirror-example-setup
-  inputRules<EditorSchema>({
+export const rules = (schema: EditorSchema): Plugin<EditorSchema> =>
+  inputRules({
     rules: [
       // block quote
       wrappingInputRule<EditorSchema>(/^\s*>\s$/, schema.nodes.blockquote),
@@ -72,5 +46,4 @@ export const plugins: Plugin<EditorSchema>[] = [
         (matches) => ({ level: matches[1].length })
       ),
     ],
-  }),
-]
+  })

react-prosemirror-html-editor/src/schema.ts → react-prosemirror-html-editor/src/schema/index.ts

@@ -46,4 +46,8 @@ export interface EditorSchema extends Schema {
   marks: Record<MarkName, MarkType>
 }
 
-export const schema: EditorSchema = new Schema({ nodes, marks })
+export const createSchema = (): EditorSchema =>
+  new Schema({
+    nodes,
+    marks,
+  })

react-prosemirror-html-editor/src/views/index.ts

@@ -0,0 +1 @@
+export * from './paragraph'

react-prosemirror-html-editor/src/views/paragraph.ts

@@ -0,0 +1,22 @@
+import { NodeViewCreator } from './types'
+
+export const paragraphView: NodeViewCreator = (
+  node,
+  view,
+  getPos,
+  decorations
+) => {
+  const contentDOM = document.createElement('p')
+
+  return {
+    contentDOM,
+    update: (newNode, newDecorations) => {
+      if (!node.sameMarkup(newNode)) {
+        return false
+      }
+
+      contentDOM.classList.toggle('empty-node', !node.childCount)
+      return true
+    },
+  }
+}

react-prosemirror-html-editor/src/views/types.ts

@@ -0,0 +1,9 @@
+import { Node } from 'prosemirror-model'
+import { Decoration, EditorView, NodeView } from 'prosemirror-view'
+
+export type NodeViewCreator = (
+  node: Node,
+  view: EditorView,
+  getPos: boolean | (() => number),
+  decorations: Decoration[]
+) => NodeView

react-prosemirror-html-editor/tsconfig.json

@@ -5,6 +5,7 @@
     "rootDir": "./src",
     "composite": true
   },
+  "include": ["src"],
   "references": [
     {
       "path": "../react-prosemirror"

react-prosemirror/tsconfig.json

@@ -4,5 +4,6 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "composite": true
-  }
+  },
+  "include": ["src/**/*"]
 }