@aeaton/react-prosemirror - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

dist/index.js

@@ -64,3 +64,3 @@ module.exports =
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 4);
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
 /******/ })
@@ -213,3 +213,3 @@ /************************************************************************/
 
-var	fixUrls = __webpack_require__(9);
+var	fixUrls = __webpack_require__(10);
 
@@ -546,10 +546,14 @@ module.exports = function(list, options) {
 
-var _prosemirrorState = __webpack_require__(5);
+var _prosemirrorState = __webpack_require__(6);
 
-var _prosemirrorView = __webpack_require__(6);
+var _prosemirrorView = __webpack_require__(4);
 
-__webpack_require__(7);
+var _decorations = __webpack_require__(7);
 
-__webpack_require__(10);
+var _decorations2 = _interopRequireDefault(_decorations);
 
+__webpack_require__(8);
+
+__webpack_require__(11);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -575,3 +579,4 @@
           state: _this.state.state,
-          dispatchTransaction: _this.dispatchTransaction
+          dispatchTransaction: _this.dispatchTransaction,
+          decorations: (0, _decorations2.default)(_this.props)
         });
@@ -614,2 +619,8 @@ }
 /* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("prosemirror-view");
+
+/***/ }),
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -633,3 +644,3 @@
 
-var _HtmlEditor = __webpack_require__(12);
+var _HtmlEditor = __webpack_require__(13);
 
@@ -643,3 +654,3 @@ Object.defineProperty(exports, 'HtmlEditor', {
 
-var _MenuBar = __webpack_require__(15);
+var _MenuBar = __webpack_require__(16);
 
@@ -656,3 +667,3 @@ Object.defineProperty(exports, 'MenuBar', {
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports) {
@@ -663,9 +674,40 @@
 /***/ }),
-/* 6 */
-/***/ (function(module, exports) {
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("prosemirror-view");
+"use strict";
 
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _prosemirrorView = __webpack_require__(4);
+
+var isEmpty = function isEmpty(doc) {
+  return doc.childCount === 1 && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
+};
+
+var placeholder = function placeholder(content) {
+  var container = document.createElement('div');
+  container.textContent = content;
+  container.classList.add('placeholder');
+
+  return _prosemirrorView.Decoration.widget(1, container);
+};
+
+exports.default = function (props) {
+  return function (state) {
+    var decorations = [];
+
+    if (props.placeholder && isEmpty(state.doc)) {
+      decorations.push(placeholder(props.placeholder));
+    }
+
+    return _prosemirrorView.DecorationSet.create(state.doc, decorations);
+  };
+};
+
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -676,3 +718,3 @@
 // load the styles
-var content = __webpack_require__(8);
+var content = __webpack_require__(9);
 if(typeof content === 'string') content = [[module.i, content, '']];
@@ -702,3 +744,3 @@ // Prepare cssTransformation
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -717,3 +759,3 @@
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports) {
@@ -813,3 +855,3 @@
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -820,3 +862,3 @@
 // load the styles
-var content = __webpack_require__(11);
+var content = __webpack_require__(12);
 if(typeof content === 'string') content = [[module.i, content, '']];
@@ -846,3 +888,3 @@ // Prepare cssTransformation
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -855,3 +897,3 @@
 // module
-exports.push([module.i, ".ProseMirror {\n  font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  padding: 10px;\n  background: #fff;\n}\n\n.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror hr {\n  padding: 2px 10px;\n  border: none;\n  margin: 1em 0;\n}\n\n.ProseMirror hr:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background-color: silver;\n  line-height: 2px;\n}\n\n.ProseMirror ul, .ProseMirror ol {\n  padding-left: 30px;\n}\n\n.ProseMirror blockquote {\n  padding-left: 1em;\n  border-left: 3px solid #eee;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.ProseMirror img {\n  cursor: default;\n}\n\n.ProseMirror th,\n.ProseMirror td {\n  border: 1px solid #eee;\n  padding: 2px 5px;\n}\n\n.ProseMirror sup,\n.ProseMirror sub {\n  line-height: 0;\n}\n", ""]);
+exports.push([module.i, ".ProseMirror {\n  font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  padding: 10px;\n  background: #fff;\n}\n\n.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror .placeholder {\n  color: #aaa;\n  pointer-events: none;\n  height: 0;\n}\n\n.ProseMirror:focus .placeholder {\n  display: none;\n}\n\n.ProseMirror hr {\n  padding: 2px 10px;\n  border: none;\n  margin: 1em 0;\n}\n\n.ProseMirror hr:after {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background-color: silver;\n  line-height: 2px;\n}\n\n.ProseMirror ul, .ProseMirror ol {\n  padding-left: 30px;\n}\n\n.ProseMirror blockquote {\n  padding-left: 1em;\n  border-left: 3px solid #eee;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.ProseMirror img {\n  cursor: default;\n}\n\n.ProseMirror th,\n.ProseMirror td {\n  border: 1px solid #eee;\n  padding: 2px 5px;\n}\n\n.ProseMirror sup,\n.ProseMirror sub {\n  line-height: 0;\n}\n", ""]);
 
@@ -862,3 +904,3 @@ // exports
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -879,7 +921,7 @@
 
-var _debounce = __webpack_require__(13);
+var _debounce = __webpack_require__(14);
 
 var _debounce2 = _interopRequireDefault(_debounce);
 
-var _prosemirrorModel = __webpack_require__(14);
+var _prosemirrorModel = __webpack_require__(15);
 
@@ -951,3 +993,4 @@ var _Editor = __webpack_require__(3);
           options = _props2.options,
-          render = _props2.render;
+          render = _props2.render,
+          placeholder = _props2.placeholder;
 
@@ -958,2 +1001,3 @@
         render: render,
+        placeholder: placeholder,
         onChange: this.onChange
@@ -970,3 +1014,3 @@ });
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, exports) {
@@ -977,3 +1021,3 @@
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports) {
@@ -984,3 +1028,3 @@
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -999,11 +1043,11 @@
 
-var _map = __webpack_require__(16);
+var _map = __webpack_require__(17);
 
 var _map2 = _interopRequireDefault(_map);
 
-var _classnames2 = __webpack_require__(17);
+var _classnames2 = __webpack_require__(18);
 
 var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _MenuBarModule = __webpack_require__(18);
+var _MenuBarModule = __webpack_require__(19);
 
@@ -1063,3 +1107,3 @@ var _MenuBarModule2 = _interopRequireDefault(_MenuBarModule);
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
@@ -1070,3 +1114,3 @@
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports) {
@@ -1077,3 +1121,3 @@
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1084,3 +1128,3 @@
 // load the styles
-var content = __webpack_require__(19);
+var content = __webpack_require__(20);
 if(typeof content === 'string') content = [[module.i, content, '']];
@@ -1110,3 +1154,3 @@ // Prepare cssTransformation
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1113,0 +1157,0 @@

package.json

 {
   "name": "@aeaton/react-prosemirror",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "A React component for ProseMirror",
@@ -5,0 +5,0 @@ "main": "dist",

src/Editor.js

 import React from 'react'
 import { EditorState } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
+import decorations from './decorations'
 import 'prosemirror-view/style/prosemirror.css'
@@ -20,3 +21,4 @@ import './Editor.css'
         state: this.state.state,
-        dispatchTransaction: this.dispatchTransaction
+        dispatchTransaction: this.dispatchTransaction,
+        decorations: decorations(this.props)
       })
@@ -23,0 +25,0 @@ }

src/Editor.md

@@ -21,2 +21,3 @@ An editor for content stored as ProseMirror JSON.
       options={options}
+      placeholder="Enter some text…"
       onChange={doc => setState({ doc })}
@@ -23,0 +24,0 @@ render={({ editor, state, dispatch }) => (

src/HtmlEditor.js

@@ -43,3 +43,3 @@ import React from 'react'
   render () {
-    const { options, render } = this.props
+    const { options, render, placeholder } = this.props
 
@@ -50,2 +50,3 @@ return (
         render={render}
+        placeholder={placeholder}
         onChange={this.onChange}
@@ -52,0 +53,0 @@ />

src/HtmlEditor.md

@@ -29,2 +29,3 @@ An editor for content stored as HTML.
       onChange={onChange}
+      placeholder="Enter some text…"
       render={({ editor, state, dispatch }) => (
@@ -31,0 +32,0 @@ <div style={editorStyle}>

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

45463

increased by5.15%

Number of package files

13

increased by8.33%

Lines of code

1120

increased by5.86%

No dependency changes