@aeaton/react-prosemirror - npm Package Compare versions

Comparing version 0.9.2 to 0.9.3

dist/index.js

@@ -569,6 +569,8 @@ module.exports =
     _this.createEditorView = function (node) {
-      _this.view = new _prosemirrorView.EditorView(node, {
-        state: _this.state.state,
-        dispatchTransaction: _this.dispatchTransaction
-      });
+      if (!_this.view) {
+        _this.view = new _prosemirrorView.EditorView(node, {
+          state: _this.state.state,
+          dispatchTransaction: _this.dispatchTransaction
+        });
+      }
     };
@@ -592,7 +594,9 @@
     value: function render() {
-      return this.props.render({
+      var editor = _react2.default.createElement('div', { ref: this.createEditorView });
+
+      return this.props.render ? this.props.render({
         state: this.state.state,
         dispatch: this.dispatchTransaction,
-        editor: _react2.default.createElement('div', { ref: this.createEditorView })
-      });
+        editor: editor
+      }) : editor;
     }
@@ -599,0 +603,0 @@ }]);

package.json

 {
   "name": "@aeaton/react-prosemirror",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "A React component for ProseMirror",
@@ -30,2 +30,3 @@ "main": "dist",
     "css-loader": "^0.28.7",
+    "react-styleguidist": "^6.0.32",
     "rimraf": "^2.6.2",
@@ -43,4 +44,6 @@ "style-loader": "^0.19.0",
     "prebuild": "rimraf dist",
-    "build": "webpack --progress"
+    "build": "webpack --progress && npm run styleguide:build",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   }
 }

README.md

@@ -19,18 +19,34 @@ ## Installation
 import React from 'react'
+import { HtmlEditor } from '@aeaton/react-prosemirror'
+import { options } from '@aeaton/react-prosemirror-config-default'
+
+const CustomEditor = ({ value, onChange }) => (
+  <HtmlEditor
+    options={options}
+    value={value}
+    onChange={onChange}
+  />
+)
+
+export default CustomEditor
+```
+
+Use a `render` prop to add the menu bar:
+
+```js
+import React from 'react'
 import { HtmlEditor, MenuBar } from '@aeaton/react-prosemirror'
 import { options, menu } from '@aeaton/react-prosemirror-config-default'
 
-const render = ({ editor, state, dispatch }) => (
-  <div>
-    <MenuBar menu={menu} state={state} dispatch={dispatch}/>
-    {editor}
-  </div>
-);
-
 const CustomEditor = ({ value, onChange }) => (
   <HtmlEditor
     options={options}
-    render={render}
     value={value}
     onChange={onChange}
+    render={({ editor, state, dispatch }) => (
+      <div>
+        <MenuBar menu={menu} state={state} dispatch={dispatch}/>
+        {editor}
+      </div>
+    )}
   />
@@ -41,2 +57,1 @@ )
 ```
-

src/Editor.js

@@ -17,6 +17,8 @@ import React from 'react'
   createEditorView = node => {
-    this.view = new EditorView(node, {
-      state: this.state.state,
-      dispatchTransaction: this.dispatchTransaction
-    })
+    if (!this.view) {
+      this.view = new EditorView(node, {
+        state: this.state.state,
+        dispatchTransaction: this.dispatchTransaction
+      })
+    }
   }
@@ -32,7 +34,9 @@
   render () {
-    return this.props.render({
+    const editor = <div ref={this.createEditorView} />
+
+    return this.props.render ? this.props.render({
       state: this.state.state,
       dispatch: this.dispatchTransaction,
-      editor: <div ref={this.createEditorView} />
-    })
+      editor
+    }) : editor
   }
@@ -39,0 +43,0 @@ }

src/Editor.md

@@ -7,9 +7,2 @@ An editor for content stored as ProseMirror JSON.
 
-const render = ({ editor, state, dispatch }) => (
-  <div style={{background:'#eee',padding:5}}>
-    <MenuBar menu={menu} state={state} dispatch={dispatch}/>
-    {editor}
-  </div>
-);
-
 initialState = {
@@ -19,2 +12,7 @@ doc: {}
 
+const editorStyle = {
+  background: '#eee',
+  padding: 5
+};
+
 <div>
@@ -26,3 +24,8 @@ <h2>Input</h2>
       onChange={doc => setState({ doc })}
-      render={render}
+      render={({ editor, state, dispatch }) => (
+        <div style={editorStyle}>
+          <MenuBar menu={menu} state={state} dispatch={dispatch}/>
+          {editor}
+        </div>
+      )}
     />
@@ -29,0 +32,0 @@

src/HtmlEditor.md

@@ -9,9 +9,2 @@ An editor for content stored as HTML.
 
-const render = ({ editor, state, dispatch }) => (
-  <div style={{background:'#eee',padding:5}}>
-    <MenuBar menu={menu} state={state} dispatch={dispatch}/>
-    {editor}
-  </div>
-);
-
 initialState = {
@@ -21,2 +14,7 @@ value: `<h1>This is a title</h1><p>This is a paragraph.</p>`
 
+const editorStyle = {
+  background: '#eee',
+  padding: 5
+};
+
 const onChange = value => {
@@ -31,5 +29,10 @@ setState({ value })
       options={options}
-      render={render}
       value={state.value} 
       onChange={onChange}
+      render={({ editor, state, dispatch }) => (
+        <div style={editorStyle}>
+          <MenuBar menu={menu} state={state} dispatch={dispatch}/>
+          {editor}
+        </div>
+      )}
     />
@@ -36,0 +39,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43235

increased by1.86%

Lines of code

1058

increased by0.57%

Number of lines in readme file

56

increased by36.59%

Worsened metrics

Dev dependency count

11

increased by10%

No dependency changes