From f276e2182bd6c260e002bd60d263c3d94bead7c2 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:09:04 +0300
Subject: [PATCH] Add custom class for Editors (#143)

---
 src/components/Editor/Editor.tsx           | 13 +++++++------
 src/components/Editor/SimplifiedEditor.tsx |  6 +++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 9117dcdd..b5b69d9c 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -45,7 +45,7 @@ import { TrailingNode } from './extensions/TrailingNode'
 import Article from './extensions/Article'
 import styles from './SimplifiedEditor.module.scss'
 
-type EditorProps = {
+type Props = {
   shoutId: number
   initialContent?: string
   onChange: (text: string) => void
@@ -55,7 +55,7 @@ const yDocs: Record<string, Doc> = {}
 const persisters: Record<string, IndexeddbPersistence> = {}
 const providers: Record<string, HocuspocusProvider> = {}
 
-export const Editor = (props: EditorProps) => {
+export const Editor = (props: Props) => {
   const { t } = useLocalize()
   const { user } = useSession()
   const [isCommonMarkup, setIsCommonMarkup] = createSignal(false)
@@ -114,6 +114,11 @@ export const Editor = (props: EditorProps) => {
 
   const editor = createTiptapEditor(() => ({
     element: editorElRef.current,
+    editorProps: {
+      attributes: {
+        class: 'articleEditor'
+      }
+    },
     extensions: [
       Document,
       Text,
@@ -220,10 +225,6 @@ export const Editor = (props: EditorProps) => {
     content: props.initialContent ?? null
   }))
 
-  onMount(() => {
-    editor().view.dom.classList.add('articleEditor')
-  })
-
   const {
     actions: { countWords, setEditor }
   } = useEditorContext()
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 91aa4191..56c736c3 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -54,6 +54,11 @@ const SimplifiedEditor = (props: Props) => {
 
   const editor = createTiptapEditor(() => ({
     element: editorElRef.current,
+    editorProps: {
+      attributes: {
+        class: styles.simplifiedEditorField
+      }
+    },
     extensions: [
       Document,
       Text,
@@ -132,7 +137,6 @@ const SimplifiedEditor = (props: Props) => {
   }
 
   onMount(() => {
-    editor().view.dom.classList.add(styles.simplifiedEditorField)
     if (props.submitByShiftEnter || props.submitByEnter) {
       window.addEventListener('keydown', handleKeyDown)
     }