minor

src/components/Editor/Editor.tsx

@@ -183,13 +183,14 @@ export const EditorComponent = (props: EditorComponentProps) => {
             const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
             if (isEmptyTextBlock) {
               e?.chain().focus().removeTextWrap({ class: 'highlight-fake-selection' }).run()
+              return false
             }
             const hasSelection = !selection.empty && from !== to
             const isFootnoteOrFigcaption =
               e.isActive('footnote') || (e.isActive('figcaption') && hasSelection)
 
             const result =
-              e.isFocused &&
+              e.view.hasFocus() &&
               hasSelection &&
               !e.isActive('image') &&
               !e.isActive('figure') &&

src/components/Editor/MicroEditor.tsx

@@ -2,7 +2,7 @@ import BubbleMenu from '@tiptap/extension-bubble-menu'
 import Placeholder from '@tiptap/extension-placeholder'
 import clsx from 'clsx'
 import { type JSX, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
-import { createEditorTransaction, createTiptapEditor, useEditorHTML } from 'solid-tiptap'
+import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import { minimal } from '~/lib/editorExtensions'
 import { MicroBubbleMenu } from './Toolbar/MicroBubbleMenu'
 
@@ -47,10 +47,6 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
   const html = useEditorHTML(editor)
   createEffect(on(html, (c?: string) => c && props.onChange?.(c)))
 
-  const lostFocusEmpty = createEditorTransaction(
-    editor,
-    (e) => e && !e.isFocused && e?.view.state.doc.textContent.trim() === ''
-  )
   createEffect(
     on(
       isBlurred,

src/components/Editor/Toolbar/BubbleMenu.module.scss

@@ -26,7 +26,6 @@
   }
 
   .delimiter {
-    background: #fff;
     opacity: 0.5;
     display: inline-block;
     height: 1.4em;
@@ -48,9 +47,9 @@
       top: calc(100% + 8px);
       left: 50%;
       transform: translateX(-50%);
-      box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+      box-shadow: 0 4px 10px var(--shadow-color-medium);
-      background: #000;
+      background: var(--black-500);
-      color: #898c94;
+      color: var(--text-color-secondary);
 
       & > header {
         font-size: 10px;

src/components/Editor/Toolbar/EditorFloatingMenu.module.scss

@@ -14,7 +14,6 @@
   }
 
   .menuHolder {
-    background: #fff;
     left: 24px;
     position: absolute;
     top: -4px;

src/components/Views/EditView.tsx

@@ -342,6 +342,7 @@ export const EditView = (props: Props) => {
                   </Show>
                   <Show when={isLeadVisible()}>
                     <MicroEditor
+                      focusOnMount={true}
                       shownAsLead={isLeadVisible()}
                       placeholder={t('A short introduction to keep the reader interested')}
                       content={form.lead}