add support for CSP nonces in createStyleTag

packages/core/src/Editor.ts

@@ -57,6 +57,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     element: document.createElement('div'),
     content: '',
     injectCSS: true,
+    injectNonce: undefined,
     extensions: [],
     autofocus: false,
     editable: true,
@@ -136,7 +137,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    */
   private injectCSS(): void {
     if (this.options.injectCSS && document) {
-      this.css = createStyleTag(style)
+      this.css = createStyleTag(style, this.options.injectNonce)
     }
   }
 

packages/core/src/types.ts

@@ -70,6 +70,7 @@ export interface EditorOptions {
   content: Content,
   extensions: Extensions,
   injectCSS: boolean,
+  injectNonce: string | undefined,
   autofocus: FocusPosition,
   editable: boolean,
   editorProps: EditorProps,

packages/core/src/utilities/createStyleTag.ts

@@ -1,4 +1,4 @@
-export function createStyleTag(style: string): HTMLStyleElement {
+export function createStyleTag(style: string, nonce?: string): HTMLStyleElement {
   const tipTapStyleTag = (<HTMLStyleElement>document.querySelector('style[data-tiptap-style]'))
 
   if (tipTapStyleTag !== null) {
@@ -7,6 +7,10 @@ export function createStyleTag(style: string): HTMLStyleElement {
 
   const styleNode = document.createElement('style')
 
+  if (nonce) {
+    styleNode.setAttribute('nonce', nonce)
+  }
+
   styleNode.setAttribute('data-tiptap-style', '')
   styleNode.innerHTML = style
   document.getElementsByTagName('head')[0].appendChild(styleNode)