editor-markup-fix

src/components/Editor/Editor.tsx

@@ -7,7 +7,7 @@ import { Collaboration } from '@tiptap/extension-collaboration'
 import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
 import { FloatingMenu } from '@tiptap/extension-floating-menu'
 import { Placeholder } from '@tiptap/extension-placeholder'
-import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import { createTiptapEditor } from 'solid-tiptap'
 import uniqolor from 'uniqolor'
@@ -20,7 +20,6 @@ import { Author } from '~/graphql/schema/core.gen'
 import { base, custom, extended } from '~/lib/editorExtensions'
 import { handleImageUpload } from '~/lib/handleImageUpload'
 import { allowedImageTypes, renderUploadedImage } from '../Upload/renderUploadedImage'
-import { Panel } from './Panel/Panel'
 import { BlockquoteBubbleMenu } from './Toolbar/BlockquoteBubbleMenu'
 import { EditorFloatingMenu } from './Toolbar/EditorFloatingMenu'
 import { FigureBubbleMenu } from './Toolbar/FigureBubbleMenu'
@@ -349,25 +348,6 @@ export const EditorComponent = (props: EditorComponentProps) => {
 
   return (
     <>
-      <div>
-        <Show when={editor()} keyed>
-          {(ed: Editor) => (
-            <>
-              <TextBubbleMenu
-                shouldShow={shouldShowTextBubbleMenu()}
-                isCommonMarkup={isCommonMarkup()}
-                editor={ed}
-                ref={setTextBubbleMenuRef}
-              />
-              <BlockquoteBubbleMenu editor={ed} ref={setBlockquoteBubbleMenuRef} />
-              <FigureBubbleMenu editor={ed} ref={setFigureBubbleMenuRef} />
-              <IncutBubbleMenu editor={ed} ref={setIncutBubbleMenuRef} />
-              <EditorFloatingMenu editor={ed} ref={setFloatingMenuRef} />
-            </>
-          )}
-        </Show>
-      </div>
-
       <div class="row">
         <div class="col-md-5" />
         <div class="col-md-12">
@@ -375,9 +355,16 @@ export const EditorComponent = (props: EditorComponentProps) => {
         </div>
       </div>
 
-      <Show when={props.shoutId}>
+      <TextBubbleMenu
-        <Panel shoutId={props.shoutId} />
+        shouldShow={shouldShowTextBubbleMenu()}
-      </Show>
+        isCommonMarkup={isCommonMarkup()}
+        editor={editor() as Editor}
+        ref={setTextBubbleMenuRef}
+      />
+      <BlockquoteBubbleMenu editor={editor() as Editor} ref={setBlockquoteBubbleMenuRef} />
+      <FigureBubbleMenu editor={editor() as Editor} ref={setFigureBubbleMenuRef} />
+      <IncutBubbleMenu editor={editor() as Editor} ref={setIncutBubbleMenuRef} />
+      <EditorFloatingMenu editor={editor() as Editor} ref={setFloatingMenuRef} />
     </>
   )
 }

src/components/Editor/Toolbar/EditorFloatingMenu.tsx

@@ -39,10 +39,9 @@ const validateEmbed = (value: string): boolean => {
   const doc = parser.parseFromString(value, 'text/html')
   const iframe = doc.querySelector('iframe')
 
-  return !iframe || !iframe.getAttribute('src')
+  return !iframe?.getAttribute('src')
 }
 
-
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   const { t } = useLocalize()
   const { showModal } = useUI()
@@ -68,7 +67,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
         return
       }
       default: {
-        props.editor.chain().focus().run()
+        props.editor?.chain().focus().run()
         setSelectedMenuItem()
         return
       }
@@ -118,7 +117,7 @@ export const EditorFloatingMenu = (props: FloatingMenuProps) => {
                 showInput={true}
                 onClose={closeUploadModalHandler}
                 onClear={() => setSelectedMenuItem()}
-                validate={(value: string) => validateEmbed(value) ? t('Error') : ''}
+                validate={(value: string) => (validateEmbed(value) ? t('Error') : '')}
                 onSubmit={handleEmbedFormSubmit}
               />
             </Show>

src/components/Views/EditView.tsx

@@ -28,6 +28,7 @@ import { Modal } from '../_shared/Modal'
 import { TableOfContents } from '../_shared/TableOfContents'
 
 import styles from '~/styles/views/EditView.module.scss'
+import { Panel } from '../Editor/Panel/Panel'
 
 const MicroEditor = lazy(() => import('../Editor/MicroEditor'))
 const GrowingTextarea = lazy(() => import('~/components/_shared/GrowingTextarea/GrowingTextarea'))
@@ -456,6 +457,9 @@ export const EditView = (props: Props) => {
                 onChange={(body: string) => handleInputChange('body', body)}
                 disableCollaboration={!isCollabMode()}
               />
+              <Show when={draft()?.id}>
+                <Panel shoutId={draft()?.id} />
+              </Show>
             </Show>
           </div>
         </form>