Add Floater component for wrapping a toolbar (#16)

* Add Floater component
* Only show the menu when the selection is non-empty
* Pass through all the attributes
* Pass the whole doc to onChange, only if it's changed
* Increment the version number

Author: hubgit

react-prosemirror-config-default/package.json

@@ -43,8 +43,8 @@
     "webpack-node-externals": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "scripts": {
     "prepublishOnly": "npm run build",

react-prosemirror-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aeaton/react-prosemirror-example",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "description": "An app with a React ProseMirror component",
   "repository": "",
@@ -11,8 +11,8 @@
   "dependencies": {
     "@aeaton/react-prosemirror": "^0.11.0",
     "@aeaton/react-prosemirror-config-default": "^0.9.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-scripts": "^1.1.0",
     "styled-components": "^3.1.0"
   },

react-prosemirror-example/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
-import { Editor, MenuBar } from '@aeaton/react-prosemirror'
+import { Editor, Floater, MenuBar } from '@aeaton/react-prosemirror'
 import { options, menu } from '@aeaton/react-prosemirror-config-default'
 
 const Container = styled('div')`
@@ -33,12 +33,17 @@ ReactDOM.render(
       <Editor
         options={options}
         value={`<h1>This is a title</h1><p>This is a paragraph</p>`}
-        onChange={value => {
-          document.getElementById('output').textContent = JSON.stringify(value, null, 2)
+        onChange={doc => {
+          document.getElementById('output').textContent = JSON.stringify(doc, null, 2)
         }}
-        render={({ editor, state, dispatch }) => (
+        render={({ editor, view }) => (
           <React.Fragment>
-            <MenuBar menu={menu} state={state} dispatch={dispatch} />
+            <MenuBar menu={menu} view={view} />
+
+            <Floater view={view}>
+              <MenuBar menu={{ marks: menu.marks }} view={view} />
+            </Floater>
+
             {editor}
           </React.Fragment>
         )}

react-prosemirror/README.md

@@ -42,9 +42,9 @@ const CustomEditor = ({ value, onChange }) => (
     options={options}
     value={value}
     onChange={onChange}
-    render={({ editor, state, dispatch }) => (
+    render={({ editor, view }) => (
       <div>
-        <MenuBar menu={menu} state={state} dispatch={dispatch}/>
+        <MenuBar menu={menu} view={view} />
         {editor}
       </div>
     )}

react-prosemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aeaton/react-prosemirror",
-  "version": "0.11.0",
+  "version": "0.20.0",
   "description": "A React component for ProseMirror",
   "main": "dist",
   "files": [
@@ -33,8 +33,8 @@
     "webpack-node-externals": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "scripts": {
     "prepublishOnly": "npm run build",

react-prosemirror/src/Editor.js

@@ -8,41 +8,39 @@ class Editor extends React.Component {
   constructor (props) {
     super(props)
 
-    this.state = {
-      state: EditorState.create(props.options)
-    }
-  }
+    this.editorRef = React.createRef()
+
+    this.view = new EditorView(null, {
+      state: EditorState.create(props.options),
+      dispatchTransaction: transaction => {
+        const { state, transactions } = this.view.state.applyTransaction(transaction)
+
+        this.view.updateState(state)
 
-  createEditorView = node => {
-    if (!this.view) {
-      this.view = new EditorView(node, {
-        state: this.state.state,
-        dispatchTransaction: this.dispatchTransaction,
-        attributes: {
-          placeholder: this.props.placeholder
+        if (transactions.some(tr => tr.docChanged)) {
+          this.props.onChange(state.doc)
         }
-      })
 
-      if (this.props.autoFocus) {
-        this.view.focus()
-      }
-    }
+        this.forceUpdate()
+      },
+      attributes: this.props.attributes
+    })
   }
 
-  dispatchTransaction = transaction => {
-    const state = this.view.state.apply(transaction)
-    this.view.updateState(state)
-    this.setState({ state })
-    this.props.onChange(state.doc.content)
+  componentDidMount () {
+    this.editorRef.current.appendChild(this.view.dom)
+
+    if (this.props.autoFocus) {
+      this.view.focus()
+    }
   }
 
   render () {
-    const editor = <div ref={this.createEditorView} />
+    const editor = <div ref={this.editorRef} />
 
     return this.props.render ? this.props.render({
-      state: this.state.state,
-      dispatch: this.dispatchTransaction,
-      editor
+      editor,
+      view: this.view
     }) : editor
   }
 }

react-prosemirror/src/Editor.md

@@ -18,12 +18,11 @@ const editorStyle = {
 
     <Editor 
       options={options}
-      placeholder="Enter some text…"
       autoFocus
       onChange={doc => setState({ doc })}
-      render={({ editor, state, dispatch }) => (
+      render={({ editor, view }) => (
         <div style={editorStyle}>
-          <MenuBar menu={menu} state={state} dispatch={dispatch}/>
+          <MenuBar menu={menu} view={view} />
           {editor}
         </div>
       )}

react-prosemirror/src/Floater.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import classes from './Floater.module.css'
+
+class Floater extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      style: {
+        left: 0,
+        top: 0
+      }
+    }
+
+    this.menuRef = React.createRef()
+  }
+
+  componentDidMount () {
+    this.setState({
+      style: this.calculateStyle(this.props)
+    })
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.setState({
+      style: this.calculateStyle(nextProps)
+    })
+  }
+
+  render () {
+    return (
+      <div ref={this.menuRef} className={classes.floater} style={this.state.style}>
+        {this.props.children}
+      </div>
+    )
+  }
+
+  calculateStyle (props) {
+    const { view } = props
+
+    const { selection } = view.state
+
+    if (!selection || selection.empty) {
+      return {
+        left: -1000,
+        top: 0
+      }
+    }
+
+    const coords = view.coordsAtPos(selection.$anchor.pos)
+
+    const { offsetWidth } = this.menuRef.current
+
+    return {
+      left: window.innerWidth - offsetWidth < coords.left ? coords.left - offsetWidth + 20 : coords.left,
+      top: coords.top - 40 > 0 ? coords.top - 40 : coords.top + 20
+    }
+  }
+}
+
+export default Floater

react-prosemirror/src/Floater.module.css

@@ -0,0 +1,13 @@
+.floater {
+    position: absolute;
+    z-index: 10;
+    border: 3px solid #151616;
+    border-radius: 3px;
+    white-space: nowrap;
+    margin: 0;
+    display: flex;
+}
+
+.floater :last-child {
+    margin: 0;
+}

react-prosemirror/src/HtmlEditor.js

@@ -10,16 +10,18 @@ const parser = schema => {
   return content => {
     const container = document.createElement('article')
     container.innerHTML = content
+
     return parser.parse(container)
   }
 }
 
 const serializer = schema => {
   const serializer = DOMSerializer.fromSchema(schema)
 
-  return content => {
+  return doc => {
     const container = document.createElement('article')
-    container.appendChild(serializer.serializeFragment(content))
+    container.appendChild(serializer.serializeFragment(doc.content))
+
     return container.innerHTML
   }
 }
@@ -34,19 +36,19 @@ class HtmlEditor extends React.Component {
 
     options.doc = parse(value)
 
-    this.onChange = debounce(value => {
-      onChange(serialize(value))
+    this.onChange = debounce(doc => {
+      onChange(serialize(doc))
     }, 1000, { maxWait: 5000 })
   }
 
   render () {
-    const { autoFocus, options, placeholder, render } = this.props
+    const { autoFocus, options, attributes, render } = this.props
 
     return (
       <Editor
         autoFocus={autoFocus}
         options={options}
-        placeholder={placeholder}
+        attributes={attributes}
         render={render}
         onChange={this.onChange}
       />