add basic styling

build/packages/config.js

@@ -5,6 +5,7 @@ import flow from 'rollup-plugin-flow-no-whitespace'
 import cjs from 'rollup-plugin-commonjs'
 import node from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
+import cssOnly from 'rollup-plugin-css-only'
 
 const resolve = _path => path.resolve(__dirname, '../../', _path)
 
@@ -21,6 +22,7 @@ function genConfig(opts) {
     input: {
       input: opts.input,
       plugins: [
+        cssOnly({ output: false }),
         flow(),
         node(),
         cjs(),

package.json

@@ -68,6 +68,7 @@
     "rollup": "^1.13.1",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-css-only": "^1.0.0",
     "rollup-plugin-flow-no-whitespace": "^1.0.0",
     "rollup-plugin-node-resolve": "^5.0.1",
     "rollup-plugin-replace": "^2.2.0",

packages/tiptap/src/Editor.js

@@ -13,9 +13,14 @@ import { baseKeymap } from 'prosemirror-commands'
 import { inputRules, undoInputRule } from 'prosemirror-inputrules'
 import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
 import {
- camelCase, Emitter, ExtensionManager, ComponentView,
+  injectCSS,
+  camelCase,
+  Emitter,
+  ExtensionManager,
+  ComponentView,
 } from './Utils'
 import { Doc, Paragraph, Text } from './Nodes'
+import css from './style.css'
 
 export default class Editor extends Emitter {
 
@@ -39,6 +44,7 @@ export default class Editor extends Emitter {
       disablePasteRules: false,
       dropCursor: {},
       parseOptions: {},
+      injectCSS: true,
       onInit: () => {},
       onTransaction: () => {},
       onUpdate: () => {},
@@ -79,6 +85,10 @@ export default class Editor extends Emitter {
     this.commands = this.createCommands()
     this.setActiveNodesAndMarks()
 
+    if (this.options.injectCSS) {
+      injectCSS(css)
+    }
+
     if (this.options.autoFocus !== null) {
       this.focus(this.options.autoFocus)
     }
@@ -254,16 +264,12 @@ export default class Editor extends Emitter {
   }
 
   createView() {
-    const view = new EditorView(this.element, {
+    return new EditorView(this.element, {
       state: this.createState(),
       handlePaste: (...args) => { this.emit('paste', ...args) },
       handleDrop: (...args) => { this.emit('drop', ...args) },
       dispatchTransaction: this.dispatchTransaction.bind(this),
     })
-
-    view.dom.style.whiteSpace = 'pre-wrap'
-
-    return view
   }
 
   setParentComponent(component = null) {

packages/tiptap/src/Utils/index.js

@@ -3,5 +3,6 @@ export { default as ComponentView } from './ComponentView'
 export { default as Emitter } from './Emitter'
 export { default as Extension } from './Extension'
 export { default as ExtensionManager } from './ExtensionManager'
+export { default as injectCSS } from './injectCSS'
 export { default as Mark } from './Mark'
 export { default as Node } from './Node'

packages/tiptap/src/Utils/injectCSS.js

@@ -0,0 +1,13 @@
+export default function (css) {
+  const style = document.createElement('style')
+  style.type = 'text/css'
+  style.textContent = css
+  const { head } = document
+  const { firstChild } = head
+
+  if (firstChild) {
+    head.insertBefore(style, firstChild)
+  } else {
+    head.appendChild(style)
+  }
+}

packages/tiptap/src/style.css

@@ -0,0 +1,40 @@
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}

yarn.lock

@@ -10531,6 +10531,14 @@ rollup-plugin-commonjs@^10.0.0:
     resolve "^1.10.1"
     rollup-pluginutils "^2.7.0"
 
+rollup-plugin-css-only@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-1.0.0.tgz#dc027d657d02e7706b855d856dcb0fdd49935135"
+  integrity sha512-WY8bISLKzWCnUmHMOhsgbQ/bZz1J1eigwMROixTWZb4yPrMCA4vbfQog6n3bsOQMfq39Kih6jWY9Xn9rYjiqXw==
+  dependencies:
+    mkdirp "^0.5.1"
+    rollup-pluginutils "^2.3.3"
+
 rollup-plugin-flow-no-whitespace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-flow-no-whitespace/-/rollup-plugin-flow-no-whitespace-1.0.0.tgz#bd4ba1bcd99ad5b88234d72e6e2dacea9aa02d16"
@@ -10581,7 +10589,7 @@ rollup-pluginutils@^1.5.2:
     estree-walker "^0.2.1"
     minimatch "^3.0.2"
 
-rollup-pluginutils@^2.3.0, rollup-pluginutils@^2.4.1, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0:
+rollup-pluginutils@^2.3.0, rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.4.1, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97"
   integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==