Update the placeholder plugin and move + import styles

Author: hubgit

prosemirror-footnotes/package.json

@@ -7,7 +7,8 @@
   "main": "dist",
   "files": [
     "dist",
-    "src"
+    "src",
+    "style"
   ],
   "publishConfig": {
     "access": "public"

prosemirror-footnotes/src/footnotes.js

@@ -1,8 +1,6 @@
 import { Plugin } from 'prosemirror-state'
 import FootnoteView from './FootnoteView'
 
-import './footnotes.css'
-
 export default options => {
   return new Plugin({
     props: {

prosemirror-footnotes/src/footnotes.css renamed to prosemirror-footnotes/style/footnotes.css

@@ -7,7 +7,8 @@
   "main": "dist",
   "files": [
     "dist",
-    "src"
+    "src",
+    "style"
   ],
   "publishConfig": {
     "access": "public"

prosemirror-placeholder/package.json

@@ -1,27 +1,25 @@
 import { Plugin } from 'prosemirror-state'
-import { DecorationSet, Decoration } from 'prosemirror-view'
+import { Decoration, DecorationSet } from 'prosemirror-view'
 
-import './placeholder.css'
-
-const isEmpty = doc => (
-  doc.childCount === 1 &&
-  doc.firstChild.isTextblock &&
-  doc.firstChild.content.size === 0
-)
-
-export default options => {
+export default () => {
   return new Plugin({
     props: {
       decorations: state => {
-        if (!isEmpty(state.doc)) return null
+        const decorations = []
+
+        const decorate = (node, pos) => {
+          if (node.type.isBlock && node.childCount === 0) {
+            decorations.push(
+              Decoration.node(pos, pos + node.nodeSize, {
+                class: 'empty-node'
+              })
+            )
+          }
+        }
 
-        const node = document.createElement('div')
-        node.textContent = options.content
-        node.className = 'placeholder'
+        state.doc.descendants(decorate)
 
-        return DecorationSet.create(state.doc, [
-          Decoration.widget(1, node)
-        ])
+        return DecorationSet.create(state.doc, decorations)
       }
     }
   })

prosemirror-placeholder/src/placeholder.css

@@ -0,0 +1,11 @@
+.ProseMirror .empty-node::before {
+  float: left;
+  color: #aaa;
+  pointer-events: none;
+  height: 0;
+  font-style: italic;
+}
+
+.ProseMirror p.empty-node:first-child::before {
+  content: 'Start typing…';
+}

prosemirror-placeholder/src/placeholder.js

@@ -7,16 +7,16 @@ import { footnotes } from '@aeaton/prosemirror-footnotes'
 
 import 'prosemirror-tables/style/tables.css'
 import 'prosemirror-gapcursor/style/gapcursor.css'
+import '@aeaton/prosemirror-footnotes/style/footnotes.css'
+import '@aeaton/prosemirror-placeholder/style/placeholder.css'
 
 import keys from './keys'
 import rules from './rules'
 
 export default [
   rules,
   keys,
-  placeholder({
-    content: 'Start typing…'
-  }),
+  placeholder(),
   footnotes(),
   dropCursor(),
   gapCursor(),