add basic styling

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;
+}