Figure caption with editor menu

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)} />
     </>

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
 }
 
@@ -89,6 +90,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
           />
         </Match>
         <Match when={!linkEditorOpen()}>
+          <>
+            <Show when={!props.isCommonMarkup}>
               <>
                 <div class={styles.dropDownHolder}>
                   <button
@@ -173,6 +176,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   </Show>
                 </div>
                 <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>
+
+            <Show when={!props.isCommonMarkup}>
               <button
                 type="button"
                 class={clsx(styles.bubbleMenuButton, {
                   [styles.bubbleMenuButtonActive]: isHighlight()
                 })}
-              onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#F6E3A1' }).run()}
+                onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#f6e3a1' }).run()}
               >
                 <div class={styles.toggleHighlight} />
               </button>
+            </Show>
             <div class={styles.delimiter} />
             <button
               type="button"
@@ -210,6 +218,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
             >
               <Icon name="editor-link" />
             </button>
+            <Show when={!props.isCommonMarkup}>
+              <>
                 <button type="button" class={styles.bubbleMenuButton}>
                   <Icon name="editor-footnote" />
                 </button>
@@ -258,6 +268,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   </Show>
                 </div>
               </>
+            </Show>
+          </>
         </Match>
       </Switch>
     </div>

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'))

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} />

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)