inject css

packages/tiptap-core/src/Editor.ts

@@ -9,6 +9,7 @@ import {addListNodes} from "prosemirror-schema-list"
 import {exampleSetup} from "prosemirror-example-setup" 
 
 import elementFromString from './utils/elementFromString'
+import injectCSS from './utils/injectCSS'
 
 type EditorContent = string | JSON
 
@@ -38,6 +39,8 @@ export class Editor {
     this.registerCommand('focus', require('./commands/focus').default)
     this.registerCommand('insertText', require('./commands/insertText').default)
     this.registerCommand('insertHTML', require('./commands/insertHTML').default)
+
+    injectCSS(require('./style.css'))
   }
 
   get state() {
@@ -144,5 +147,13 @@ export class Editor {
 
     return div.innerHTML
   }
+
+  public destroy() {
+    if (!this.view) {
+      return
+    }
+
+    this.view.destroy()
+  }
   
 }

packages/tiptap-core/src/style.css

@@ -0,0 +1,52 @@
+.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-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}

packages/tiptap-core/src/utils/injectCSS.ts

@@ -0,0 +1,15 @@
+export default function (css: string) {
+  if (process.env.NODE_ENV !== 'test') {
+    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)
+    }
+  }
+}