From a2d5e51c767bf665e25159523b60fe4d7a0ea4ea Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 8 Jul 2022 10:07:43 +0200
Subject: [PATCH] Moved editor configuration to separate file

---
 apps/comments-ui/src/components/AddForm.js | 32 +++------------------
 apps/comments-ui/src/utils/editor.js       | 33 ++++++++++++++++++++++
 2 files changed, 37 insertions(+), 28 deletions(-)
 create mode 100644 apps/comments-ui/src/utils/editor.js

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index c423772869..a6fdf8c493 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -3,38 +3,14 @@ import {Transition} from '@headlessui/react';
 import AppContext from '../AppContext';
 import Avatar from './Avatar';
 import {useEditor, EditorContent} from '@tiptap/react';
-import Placeholder from '@tiptap/extension-placeholder';
-import Text from '@tiptap/extension-text';
-import Link from '@tiptap/extension-link';
-import Paragraph from '@tiptap/extension-paragraph';
-import Document from '@tiptap/extension-document';
+import { getEditorConfig } from '../utils/editor';
 
 const AddForm = (props) => {
     const {member, postId, onAction} = useContext(AppContext);
     const editor = useEditor({
-        extensions: [
-            Document,
-            Text,
-            Paragraph,
-            Link.configure({
-                openOnClick: false,
-                // Add these HTML attributes to all the <a> links
-                // Warning: we need to do backend changes to make sure the sanitizer always picks the same class for links
-                HTMLAttributes: {
-                    class: 'underline'
-                }
-            }),
-            Placeholder.configure({
-                placeholder: 'Join the discussion'
-            })
-        ],
-        content: '',
-        autofocus: false,
-        editorProps: {
-            attributes: {
-                class: `focus:outline-0`
-            }
-        }
+        ...getEditorConfig({
+            placeholder: 'Join the discussion'
+        })
     });
 
     const focused = editor?.isFocused || !editor?.isEmpty;
diff --git a/apps/comments-ui/src/utils/editor.js b/apps/comments-ui/src/utils/editor.js
new file mode 100644
index 0000000000..a87633eaf6
--- /dev/null
+++ b/apps/comments-ui/src/utils/editor.js
@@ -0,0 +1,33 @@
+import Placeholder from '@tiptap/extension-placeholder';
+import Text from '@tiptap/extension-text';
+import Link from '@tiptap/extension-link';
+import Paragraph from '@tiptap/extension-paragraph';
+import Document from '@tiptap/extension-document';
+
+export function getEditorConfig({placeholder}) {
+    return {
+        extensions: [
+            Document,
+            Text,
+            Paragraph,
+            Link.configure({
+                openOnClick: false,
+                // Add these HTML attributes to all the <a> links
+                // Warning: we need to do backend changes to make sure the sanitizer always picks the same class for links
+                HTMLAttributes: {
+                    class: 'underline'
+                }
+            }),
+            Placeholder.configure({
+                placeholder
+            })
+        ],
+        content: '',
+        autofocus: false,
+        editorProps: {
+            attributes: {
+                class: `focus:outline-0`
+            }
+        }
+    };
+}