From 4fcb4e94bd339aed04bde69a57d878b9f33e1c76 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 30 Sep 2020 17:12:17 +0200
Subject: [PATCH] refactor style loading for the Editor

---
 packages/core/src/Editor.ts               | 16 ++++++++++++----
 packages/core/src/{style.css => style.ts} |  6 ++++--
 packages/core/src/utils/createStyleTag.ts |  8 ++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)
 rename packages/core/src/{style.css => style.ts} (94%)
 create mode 100644 packages/core/src/utils/createStyleTag.ts

diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index 3e4b448e..b474ac8b 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -10,6 +10,7 @@ import getMarkAttrs from './utils/getMarkAttrs'
 import removeElement from './utils/removeElement'
 import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import getHtmlFromFragment from './utils/getHtmlFromFragment'
+import createStyleTag from './utils/createStyleTag'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
@@ -18,6 +19,7 @@ import Node from './Node'
 import Mark from './Mark'
 import defaultPlugins from './plugins'
 import * as coreCommands from './commands'
+import style from './style'
 
 export type Command = (props: {
   editor: Editor,
@@ -118,10 +120,7 @@ export class Editor extends EventEmitter {
     this.extensionManager.resolveConfigs()
     this.createView()
     this.registerCommands(coreCommands)
-
-    if (this.options.injectCSS) {
-      require('./style.css')
-    }
+    this.injectCSS()
 
     this.proxy.focus(this.options.autoFocus)
   }
@@ -143,6 +142,15 @@ export class Editor extends EventEmitter {
     return this.commandManager.createChain()
   }
 
+  /**
+   * Inject CSS styles.
+   */
+  private injectCSS() {
+    if (this.options.injectCSS && document) {
+      this.css = createStyleTag(style)
+    }
+  }
+
   /**
    * Update editor options.
    *
diff --git a/packages/core/src/style.css b/packages/core/src/style.ts
similarity index 94%
rename from packages/core/src/style.css
rename to packages/core/src/style.ts
index b41718f4..ce819062 100644
--- a/packages/core/src/style.css
+++ b/packages/core/src/style.ts
@@ -1,4 +1,4 @@
-.ProseMirror {
+const style = `.ProseMirror {
   position: relative;
 }
 
@@ -49,4 +49,6 @@
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
-}
+}`
+
+export default style
diff --git a/packages/core/src/utils/createStyleTag.ts b/packages/core/src/utils/createStyleTag.ts
new file mode 100644
index 00000000..b9078034
--- /dev/null
+++ b/packages/core/src/utils/createStyleTag.ts
@@ -0,0 +1,8 @@
+export default function createStyleTag(style: string): HTMLStyleElement {
+  const styleNode = document.createElement('style')
+
+  styleNode.innerHTML = style
+  document.getElementsByTagName('head')[0].appendChild(styleNode)
+
+  return styleNode
+}