From 40af94e101548a09352bc6042f2979672307e500 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Thu, 27 Jul 2023 20:38:38 +0300
Subject: [PATCH] add editor fixes (#144)

* add editor fixes
---
 .../Article/AudioPlayer/PlayerPlaylist.tsx      |  1 +
 src/components/Article/Comment.tsx              |  2 ++
 src/components/Article/CommentsTree.tsx         |  2 --
 src/components/Editor/Editor.tsx                |  7 +++----
 src/components/Editor/SimplifiedEditor.tsx      |  9 ++++-----
 .../Editor/TextBubbleMenu/TextBubbleMenu.tsx    |  2 +-
 src/components/Inbox/Message.tsx                |  5 -----
 .../GrowingTextarea/GrowingTextarea.module.scss |  1 +
 .../_shared/SolidSwiper/SolidSwiper.tsx         |  1 +
 src/context/inbox.tsx                           | 17 +++++++++--------
 10 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index 917d8ed0..ac4e1b11 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -163,6 +163,7 @@ export const PlayerPlaylist = (props: Props) => {
                     onSubmit={(value) => handleMediaItemFieldChange('body', value)}
                     placeholder={t('Description')}
                     smallHeight={true}
+                    submitButtonText={t('Save')}
                   />
                   <GrowingTextarea
                     allowEnterKey={true}
diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index dde58252..b1b330fa 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -159,6 +159,8 @@ export const Comment = (props: Props) => {
             <Show when={editMode()} fallback={<MD body={body()} />}>
               <Suspense fallback={<p>{t('Loading')}</p>}>
                 <SimplifiedEditor
+                  initialContent={comment().body}
+                  submitButtonText={t('Save')}
                   quoteEnabled={true}
                   imageEnabled={true}
                   placeholder={t('Write a comment...')}
diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index 947c1144..874391d6 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -43,7 +43,6 @@ export const CommentsTree = (props: Props) => {
   const { t } = useLocalize()
   const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt')
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
-  const [submitted, setSubmitted] = createSignal(false)
   const {
     reactionEntities,
     actions: { createReaction }
@@ -97,7 +96,6 @@ export const CommentsTree = (props: Props) => {
         body: value,
         shout: props.shoutId
       })
-      setSubmitted(true)
     } catch (error) {
       console.error('[handleCreate reaction]:', error)
     }
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index b5b69d9c..52749462 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onMount } from 'solid-js'
+import { createEffect, createSignal, onMount, untrack } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import { useLocalize } from '../../context/localize'
 import { Bold } from '@tiptap/extension-bold'
@@ -43,7 +43,6 @@ import type { Doc } from 'yjs/dist/src/utils/Doc'
 import './Prosemirror.scss'
 import { TrailingNode } from './extensions/TrailingNode'
 import Article from './extensions/Article'
-import styles from './SimplifiedEditor.module.scss'
 
 type Props = {
   shoutId: number
@@ -111,7 +110,7 @@ export const Editor = (props: Props) => {
   } = {
     current: null
   }
-
+  const { initialContent } = props
   const editor = createTiptapEditor(() => ({
     element: editorElRef.current,
     editorProps: {
@@ -222,7 +221,7 @@ export const Editor = (props: Props) => {
       TrailingNode,
       Article
     ],
-    content: props.initialContent ?? null
+    content: initialContent ?? null
   }))
 
   const {
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 56c736c3..210a9576 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -18,7 +18,6 @@ import { Popover } from '../_shared/Popover'
 import { Italic } from '@tiptap/extension-italic'
 import { Modal } from '../Nav/Modal'
 import { hideModal, showModal } from '../../stores/ui'
-import { Link } from '@tiptap/extension-link'
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { CustomImage } from './extensions/CustomImage'
 import { UploadModalContent } from './UploadModalContent'
@@ -27,11 +26,13 @@ import { clsx } from 'clsx'
 import styles from './SimplifiedEditor.module.scss'
 import { Placeholder } from '@tiptap/extension-placeholder'
 import { InsertLinkForm } from './InsertLinkForm'
+import { Link } from '@tiptap/extension-link'
 
 type Props = {
   initialContent?: string
   onSubmit: (text: string) => void
   placeholder: string
+  submitButtonText?: string
   quoteEnabled?: boolean
   imageEnabled?: boolean
   setClear?: boolean
@@ -137,9 +138,7 @@ const SimplifiedEditor = (props: Props) => {
   }
 
   onMount(() => {
-    if (props.submitByShiftEnter || props.submitByEnter) {
-      window.addEventListener('keydown', handleKeyDown)
-    }
+    window.addEventListener('keydown', handleKeyDown)
   })
 
   onCleanup(() => {
@@ -224,7 +223,7 @@ const SimplifiedEditor = (props: Props) => {
         <div class={styles.buttons}>
           <Button value={t('cancel')} variant="secondary" disabled={isEmpty()} onClick={handleClear} />
           <Button
-            value={t('Send')}
+            value={props.submitButtonText ?? t('Send')}
             variant="primary"
             disabled={isEmpty()}
             onClick={() => props.onSubmit(html())}
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index fe4055fd..ba5c964b 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
@@ -236,8 +236,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   </button>
                 )}
               </Popover>
+              <div class={styles.delimiter} />
             </Show>
-            <div class={styles.delimiter} />
             <Popover content={t('Add url')}>
               {(triggerRef: (el) => void) => (
                 <button
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
index 416c785e..1d0c41de 100644
--- a/src/components/Inbox/Message.tsx
+++ b/src/components/Inbox/Message.tsx
@@ -19,11 +19,6 @@ type Props = {
   replyAuthor?: string
 }
 
-const md = new MarkdownIt({
-  linkify: true,
-  breaks: true
-})
-
 export const Message = (props: Props) => {
   const isOwn = props.ownId === Number(props.content.author)
   const user = props.members?.find((m) => m.id === Number(props.content.author))
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
index 28aa37f3..0149af68 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
@@ -50,6 +50,7 @@
     color: #000;
     opacity: 1;
     position: absolute;
+    z-index: 1;
     right: 0.6rem;
     bottom: -1.2rem;
     font-size: 1.1rem;
diff --git a/src/components/_shared/SolidSwiper/SolidSwiper.tsx b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
index d62c475a..0ef86059 100644
--- a/src/components/_shared/SolidSwiper/SolidSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/SolidSwiper.tsx
@@ -205,6 +205,7 @@ export const SolidSwiper = (props: Props) => {
                             smallHeight={true}
                             placeholder={t('Enter image description')}
                             onSubmit={(value) => handleSlideDescriptionChange(index(), 'body', value)}
+                            submitButtonText={t('Save')}
                           />
                         </div>
                       </Match>
diff --git a/src/context/inbox.tsx b/src/context/inbox.tsx
index f4b068bc..06084b2e 100644
--- a/src/context/inbox.tsx
+++ b/src/context/inbox.tsx
@@ -71,14 +71,15 @@ export const InboxProvider = (props: { children: JSX.Element }) => {
     return chat
   }
 
-  pipe(
-    subclient().subscription(newMessage, {}),
-    subscribe((result) => {
-      // console.info('[subscription]')
-      // console.debug(result)
-      // TODO: handle data result
-    })
-  )
+  // pipe(
+  //   subclient().subscription(newMessage, {}),
+  //   subscribe((result) => {
+  //     console.info('[subscription]')
+  //     console.debug(result)
+  //     // TODO: handle data result
+  //   })
+  // )
+
   const actions = {
     createChat,
     loadChats,