From aa28b2cbfd80108b565a6a4018724a38c27b1eae Mon Sep 17 00:00:00 2001
From: ilia tapazukk <tapazukk@gmail.com>
Date: Thu, 11 May 2023 11:43:14 +0000
Subject: [PATCH] Figure caption with editor menu

---
 src/components/Editor/Editor.tsx              |  14 +-
 .../Editor/TextBubbleMenu/TextBubbleMenu.tsx  | 286 +++++++++---------
 .../UploadModalContent/UploadModalContent.tsx |   2 +-
 src/components/Views/Edit.tsx                 |   4 +-
 src/stores/ui.ts                              |   5 +-
 5 files changed, 165 insertions(+), 146 deletions(-)

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 716f379d..49f5e375 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -1,4 +1,4 @@
-import { createEffect } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import { useLocalize } from '../../context/localize'
 import { Blockquote } from '@tiptap/extension-blockquote'
@@ -57,6 +57,7 @@ const providers: Record<string, HocuspocusProvider> = {}
 export const Editor = (props: EditorProps) => {
   const { t } = useLocalize()
   const { user } = useSession()
+  const [isCommonMarkup, setIsCommonMarkup] = createSignal(false)
 
   const docName = `shout-${props.shoutId}`
 
@@ -165,9 +166,8 @@ export const Editor = (props: EditorProps) => {
 
           const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
 
-          return (
-            view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image') && !e.isActive('figure')
-          )
+          setIsCommonMarkup(e.isActive('figure'))
+          return view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image')
         }
       }),
       BubbleMenu.configure({
@@ -206,7 +206,11 @@ export const Editor = (props: EditorProps) => {
   return (
     <>
       <div ref={(el) => (editorElRef.current = el)} />
-      <TextBubbleMenu editor={editor()} ref={(el) => (textBubbleMenuRef.current = el)} />
+      <TextBubbleMenu
+        isCommonMarkup={isCommonMarkup()}
+        editor={editor()}
+        ref={(el) => (textBubbleMenuRef.current = el)}
+      />
       <ImageBubbleMenu editor={editor()} ref={(el) => (imageBubbleMenuRef.current = el)} />
       <EditorFloatingMenu editor={editor()} ref={(el) => (floatingMenuRef.current = el)} />
     </>
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index 0f7065dc..19e3b40b 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
@@ -10,6 +10,7 @@ import { validateUrl } from '../../../utils/validateUrl'
 
 type BubbleMenuProps = {
   editor: Editor
+  isCommonMarkup: boolean
   ref: (el: HTMLDivElement) => void
 }
 
@@ -90,89 +91,93 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
         </Match>
         <Match when={!linkEditorOpen()}>
           <>
-            <div class={styles.dropDownHolder}>
-              <button
-                type="button"
-                class={clsx(styles.bubbleMenuButton, {
-                  [styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
-                })}
-                onClick={toggleTextSizePopup}
-              >
-                <Icon name="editor-text-size" />
-                <Icon name="down-triangle" class={styles.triangle} />
-              </button>
-              <Show when={textSizeBubbleOpen()}>
-                <div class={styles.dropDown}>
-                  <header>{t('Headers')}</header>
-                  <div class={styles.actions}>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isH1()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleHeading({ level: 1 }).run()
-                        toggleTextSizePopup()
-                      }}
-                    >
-                      <Icon name="editor-h1" />
-                    </button>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isH2()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleHeading({ level: 2 }).run()
-                        toggleTextSizePopup()
-                      }}
-                    >
-                      <Icon name="editor-h2" />
-                    </button>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isH3()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleHeading({ level: 3 }).run()
-                        toggleTextSizePopup()
-                      }}
-                    >
-                      <Icon name="editor-h3" />
-                    </button>
-                  </div>
-                  <header>{t('Quotes')}</header>
-                  <div class={styles.actions}>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isBlockQuote()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleBlockquote().run()
-                        toggleTextSizePopup()
-                      }}
-                    >
-                      <Icon name="editor-blockquote" />
-                    </button>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isBlockQuote()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleBlockquote().run()
-                        toggleTextSizePopup()
-                      }}
-                    >
-                      <Icon name="editor-quote" />
-                    </button>
-                  </div>
+            <Show when={!props.isCommonMarkup}>
+              <>
+                <div class={styles.dropDownHolder}>
+                  <button
+                    type="button"
+                    class={clsx(styles.bubbleMenuButton, {
+                      [styles.bubbleMenuButtonActive]: textSizeBubbleOpen()
+                    })}
+                    onClick={toggleTextSizePopup}
+                  >
+                    <Icon name="editor-text-size" />
+                    <Icon name="down-triangle" class={styles.triangle} />
+                  </button>
+                  <Show when={textSizeBubbleOpen()}>
+                    <div class={styles.dropDown}>
+                      <header>{t('Headers')}</header>
+                      <div class={styles.actions}>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isH1()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleHeading({ level: 1 }).run()
+                            toggleTextSizePopup()
+                          }}
+                        >
+                          <Icon name="editor-h1" />
+                        </button>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isH2()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleHeading({ level: 2 }).run()
+                            toggleTextSizePopup()
+                          }}
+                        >
+                          <Icon name="editor-h2" />
+                        </button>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isH3()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleHeading({ level: 3 }).run()
+                            toggleTextSizePopup()
+                          }}
+                        >
+                          <Icon name="editor-h3" />
+                        </button>
+                      </div>
+                      <header>{t('Quotes')}</header>
+                      <div class={styles.actions}>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isBlockQuote()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleBlockquote().run()
+                            toggleTextSizePopup()
+                          }}
+                        >
+                          <Icon name="editor-blockquote" />
+                        </button>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isBlockQuote()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleBlockquote().run()
+                            toggleTextSizePopup()
+                          }}
+                        >
+                          <Icon name="editor-quote" />
+                        </button>
+                      </div>
+                    </div>
+                  </Show>
                 </div>
-              </Show>
-            </div>
-            <div class={styles.delimiter} />
+                <div class={styles.delimiter} />
+              </>
+            </Show>
             <button
               type="button"
               class={clsx(styles.bubbleMenuButton, {
@@ -191,15 +196,18 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
             >
               <Icon name="editor-italic" />
             </button>
-            <button
-              type="button"
-              class={clsx(styles.bubbleMenuButton, {
-                [styles.bubbleMenuButtonActive]: isHighlight()
-              })}
-              onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#F6E3A1' }).run()}
-            >
-              <div class={styles.toggleHighlight} />
-            </button>
+
+            <Show when={!props.isCommonMarkup}>
+              <button
+                type="button"
+                class={clsx(styles.bubbleMenuButton, {
+                  [styles.bubbleMenuButtonActive]: isHighlight()
+                })}
+                onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()}
+              >
+                <div class={styles.toggleHighlight} />
+              </button>
+            </Show>
             <div class={styles.delimiter} />
             <button
               type="button"
@@ -210,53 +218,57 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
             >
               <Icon name="editor-link" />
             </button>
-            <button type="button" class={styles.bubbleMenuButton}>
-              <Icon name="editor-footnote" />
-            </button>
-            <div class={styles.delimiter} />
-            <div class={styles.dropDownHolder}>
-              <button
-                type="button"
-                class={clsx(styles.bubbleMenuButton, {
-                  [styles.bubbleMenuButtonActive]: listBubbleOpen()
-                })}
-                onClick={toggleListPopup}
-              >
-                <Icon name="editor-ul" />
-                <Icon name="down-triangle" class={styles.triangle} />
-              </button>
-              <Show when={listBubbleOpen()}>
-                <div class={styles.dropDown}>
-                  <header>{t('Lists')}</header>
-                  <div class={styles.actions}>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isBulletList()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleBulletList().run()
-                        toggleListPopup()
-                      }}
-                    >
-                      <Icon name="editor-ul" />
-                    </button>
-                    <button
-                      type="button"
-                      class={clsx(styles.bubbleMenuButton, {
-                        [styles.bubbleMenuButtonActive]: isOrderedList()
-                      })}
-                      onClick={() => {
-                        props.editor.chain().focus().toggleOrderedList().run()
-                        toggleListPopup()
-                      }}
-                    >
-                      <Icon name="editor-ol" />
-                    </button>
-                  </div>
+            <Show when={!props.isCommonMarkup}>
+              <>
+                <button type="button" class={styles.bubbleMenuButton}>
+                  <Icon name="editor-footnote" />
+                </button>
+                <div class={styles.delimiter} />
+                <div class={styles.dropDownHolder}>
+                  <button
+                    type="button"
+                    class={clsx(styles.bubbleMenuButton, {
+                      [styles.bubbleMenuButtonActive]: listBubbleOpen()
+                    })}
+                    onClick={toggleListPopup}
+                  >
+                    <Icon name="editor-ul" />
+                    <Icon name="down-triangle" class={styles.triangle} />
+                  </button>
+                  <Show when={listBubbleOpen()}>
+                    <div class={styles.dropDown}>
+                      <header>{t('Lists')}</header>
+                      <div class={styles.actions}>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isBulletList()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleBulletList().run()
+                            toggleListPopup()
+                          }}
+                        >
+                          <Icon name="editor-ul" />
+                        </button>
+                        <button
+                          type="button"
+                          class={clsx(styles.bubbleMenuButton, {
+                            [styles.bubbleMenuButtonActive]: isOrderedList()
+                          })}
+                          onClick={() => {
+                            props.editor.chain().focus().toggleOrderedList().run()
+                            toggleListPopup()
+                          }}
+                        >
+                          <Icon name="editor-ol" />
+                        </button>
+                      </div>
+                    </div>
+                  </Show>
                 </div>
-              </Show>
-            </div>
+              </>
+            </Show>
           </>
         </Match>
       </Switch>
diff --git a/src/components/Editor/UploadModalContent/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx
index 9be2138d..b01b91e9 100644
--- a/src/components/Editor/UploadModalContent/UploadModalContent.tsx
+++ b/src/components/Editor/UploadModalContent/UploadModalContent.tsx
@@ -27,8 +27,8 @@ export const UploadModalContent = (props: Props) => {
     try {
       setIsUploading(true)
       const fileUrl = await handleFileUpload(file)
-      setIsUploading(false)
       props.onClose(fileUrl)
+      setIsUploading(false)
     } catch (error) {
       setIsUploading(false)
       setUploadError(t('Error'))
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 5c273aa0..725e647e 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -248,7 +248,7 @@ export const EditView = (props: EditViewProps) => {
                     <div class={styles.actions}>
                       <Button
                         variant="primary"
-                        onClick={() => showModal('uploadImage')}
+                        onClick={() => showModal('uploadCoverImage')}
                         value={coverImage() || form.coverImageUrl ? t('Add another image') : t('Add image')}
                       />
                       <Show when={coverImage() ?? form.coverImageUrl}>
@@ -276,7 +276,7 @@ export const EditView = (props: EditViewProps) => {
           </div>
         </form>
       </div>
-      <Modal variant="narrow" name="uploadImage">
+      <Modal variant="narrow" name="uploadCoverImage">
         <UploadModalContent onClose={(value) => handleUploadModalContentCloseSetCover(value)} />
       </Modal>
       <Panel shoutId={props.shout.id} />
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index fa97affa..3bf13675 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -11,6 +11,8 @@ export type ModalType =
   | 'donate'
   | 'inviteToChat'
   | 'uploadImage'
+  | 'uploadCoverImage'
+
 type WarnKind = 'error' | 'warn' | 'info'
 
 export interface Warning {
@@ -26,7 +28,8 @@ export const MODALS: Record<ModalType, ModalType> = {
   thank: 'thank',
   donate: 'donate',
   inviteToChat: 'inviteToChat',
-  uploadImage: 'uploadImage'
+  uploadImage: 'uploadImage',
+  uploadCoverImage: 'uploadCoverImage'
 }
 
 const [modal, setModal] = createSignal<ModalType | null>(null)