toolbar-appear-fix

src/components/Article/CommentsTree.tsx

@@ -156,7 +156,7 @@ export const CommentsTree = (props: Props) => {
       >
         <MiniEditor
           placeholder={t('Write a comment...')}
-          onSubmit={(value) => handleSubmitComment(value)}
+          onSubmit={handleSubmitComment}
         />
         <Show when={posting()}>
           <Loading />

src/components/Editor/EditorToolbar/MicroToolbar.tsx

@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/core'
-import { Show, createEffect, createSignal, on } from 'solid-js'
+import { Accessor, Show, createEffect, createSignal, on } from 'solid-js'
 import { createEditorTransaction } from 'solid-tiptap'
 import { Icon } from '~/components/_shared/Icon/Icon'
 import { useLocalize } from '~/context/localize'
@@ -10,7 +10,7 @@ import styles from '../SimplifiedEditor.module.scss'
 
 export interface MicroToolbarProps {
   showing?: boolean
-  editor?: Editor
+  editor: Accessor<Editor|undefined>
 }
 
 export const MicroToolbar = (props: MicroToolbarProps) => {
@@ -19,7 +19,7 @@ export const MicroToolbar = (props: MicroToolbarProps) => {
   // show / hide for menu
   const [showSimpleMenu, setShowSimpleMenu] = createSignal(!props.showing)
   const selection = createEditorTransaction(
-    () => props.editor,
+    props.editor,
     (instance) => instance?.state.selection
   )
 
@@ -30,13 +30,13 @@ export const MicroToolbar = (props: MicroToolbarProps) => {
   createEffect(on([selection, showLinkInput], ([s, l]) => !l && setShowSimpleMenu(!s?.empty)))
 
   // focus on link input when it shows up
-  createEffect(on(showLinkInput, (x?: boolean) => x && props.editor?.chain().focus().run()))
+  createEffect(on(showLinkInput, (x?: boolean) => x && props.editor()?.chain().focus().run()))
 
   const [storedSelection, setStoredSelection] = createSignal<Editor['state']['selection']>()
   const recoverSelection = () => {
     if (!storedSelection()?.empty) {
       createEditorTransaction(
-        () => props.editor,
+        props.editor,
         (instance?: Editor) => {
           const r = selection()
           if (instance && r) {
@@ -48,14 +48,14 @@ export const MicroToolbar = (props: MicroToolbarProps) => {
     }
   }
   const storeSelection = () => {
-    const selection = props.editor?.state.selection
+    const selection = props.editor()?.state.selection
     if (!selection?.empty) {
       setStoredSelection(selection)
     }
   }
   const toggleShowLink = () => {
     if (showLinkInput()) {
-      props.editor?.chain().focus().run()
+      props.editor()?.chain().focus().run()
       recoverSelection()
     } else {
       storeSelection()
@@ -63,7 +63,7 @@ export const MicroToolbar = (props: MicroToolbarProps) => {
     setShowLinkInput(!showLinkInput())
   }
   return (
-    <Show when={props.editor} keyed>
+    <Show when={props.editor()} keyed>
       {(instance) => (
         <Show when={!showSimpleMenu()}>
           <div

src/components/Editor/EditorToolbar/MiniToolbar.tsx

@@ -1,16 +1,16 @@
 import { Editor } from '@tiptap/core'
-import { Show, createEffect, createSignal, on } from 'solid-js'
+import { Accessor, Show, createEffect, createSignal, on } from 'solid-js'
+import { createEditorTransaction } from 'solid-tiptap'
 import { Icon } from '~/components/_shared/Icon/Icon'
 import { useLocalize } from '~/context/localize'
 import { useUI } from '~/context/ui'
 import { InsertLinkForm } from '../InsertLinkForm/InsertLinkForm'
 import { ToolbarControl as Control } from './ToolbarControl'
 
-import { createEditorTransaction } from 'solid-tiptap'
 import styles from '../SimplifiedEditor.module.scss'
 
 interface MiniToolbarProps {
-  editor?: Editor
+  editor: Accessor<Editor | undefined>
 }
 
 export const MiniToolbar = (props: MiniToolbarProps) => {
@@ -21,17 +21,17 @@ export const MiniToolbar = (props: MiniToolbarProps) => {
   const [showLinkInput, setShowLinkInput] = createSignal(false)
 
   // focus on link input when it shows up
-  createEffect(on(showLinkInput, (x?: boolean) => x && props.editor?.chain().focus().run()))
+  createEffect(on(showLinkInput, (x?: boolean) => x && props.editor()?.chain().focus().run()))
 
   const selection = createEditorTransaction(
-    () => props.editor,
+    props.editor,
     (instance) => instance?.state.selection
   )
   const [storedSelection, setStoredSelection] = createSignal<Editor['state']['selection']>()
   const recoverSelection = () => {
     if (!storedSelection()?.empty) {
       createEditorTransaction(
-        () => props.editor,
+        props.editor,
         (instance?: Editor) => {
           const r = selection()
           if (instance && r) {
@@ -43,14 +43,14 @@ export const MiniToolbar = (props: MiniToolbarProps) => {
     }
   }
   const storeSelection = () => {
-    const selection = props.editor?.state.selection
+    const selection = props.editor()?.state.selection
     if (!selection?.empty) {
       setStoredSelection(selection)
     }
   }
   const toggleShowLink = () => {
     if (showLinkInput()) {
-      props.editor?.chain().focus().run()
+      props.editor()?.chain().focus().run()
       recoverSelection()
     } else {
       storeSelection()
@@ -60,7 +60,7 @@ export const MiniToolbar = (props: MiniToolbarProps) => {
 
   return (
     <div style={{ 'background-color': 'white', display: 'inline-flex' }}>
-      <Show when={props.editor} keyed>
+      <Show when={props.editor()} keyed>
         {(instance) => (
           <div class={styles.controls}>
             <div class={styles.actions}>

src/components/Editor/MicroEditor/MicroEditor.tsx

@@ -43,7 +43,7 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
       })}
     >
       <div>
-        <MicroToolbar />
+        <MicroToolbar editor={editor} />
 
         <div id="micro-editor" ref={setEditorElement} style={styles.minimal} />
       </div>

src/components/Editor/MiniEditor/MiniEditor.tsx

@@ -53,7 +53,7 @@ export default function MiniEditor(props: MiniEditorProps): JSX.Element {
       <div>
         <div id="mini-editor" ref={setEditorElement} />
 
-        <MiniToolbar />
+        <MiniToolbar editor={editor} />
 
         <Show when={counter() > 0}>
           <small class={styles.limit}>