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 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 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`
+ }
+ }
+ };
+}