From 86200e9e225ba7234f93d6cfc1511220ccd19fec Mon Sep 17 00:00:00 2001
From: Felix Klein <felix@felixklein.com>
Date: Mon, 7 Mar 2022 16:35:06 +0100
Subject: [PATCH] add support for CSP nonces in createStyleTag

---
 docs/api/editor.md                            | 16 ++++++++++++++++
 packages/core/src/Editor.ts                   |  3 ++-
 packages/core/src/types.ts                    |  1 +
 packages/core/src/utilities/createStyleTag.ts |  6 +++++-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/docs/api/editor.md b/docs/api/editor.md
index a45cef91ee..ea5c21f92a 100644
--- a/docs/api/editor.md
+++ b/docs/api/editor.md
@@ -349,6 +349,22 @@ new Editor({
 })
 ```
 
+### injectNonce
+When you use a [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) with `nonce`, you can specify a `nonce` to be added to dynamically created elements. Here is an example:
+
+```js
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+new Editor({
+  extensions: [
+    StarterKit,
+  ],
+  injectCSS: true,
+  injectNonce: "your-nonce-here"
+})
+```
+
 ### editorProps
 For advanced use cases, you can pass `editorProps` which will be handled by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). You can use it to override various editor events or change editor DOM element attributes, for example to add some Tailwind classes. Here is an example:
 
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index f23c64a7a9..4666a9f941 100644
--- a/packages/core/src/Editor.ts
+++ b/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)
     }
   }
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index ac5942b620..ab2b129e27 100644
--- a/packages/core/src/types.ts
+++ b/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,
diff --git a/packages/core/src/utilities/createStyleTag.ts b/packages/core/src/utilities/createStyleTag.ts
index 594192611d..88f156b05b 100644
--- a/packages/core/src/utilities/createStyleTag.ts
+++ b/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)