From 3bab9a78d2c8fcd8de8a22c690a665725433e7b6 Mon Sep 17 00:00:00 2001
From: Isaac Woods <isaacwoods.home@gmail.com>
Date: Wed, 31 Jul 2024 17:50:26 +0100
Subject: [PATCH] Display the floating menu in more places

Not sure this is 100% correct yet but is needed for inserting Zettel links
in non-root locations (e.g. menu items). Might want to rework in the future.
---
 app/src/scenes/zettel.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/src/scenes/zettel.tsx b/app/src/scenes/zettel.tsx
index fc4ece6..b347871 100644
--- a/app/src/scenes/zettel.tsx
+++ b/app/src/scenes/zettel.tsx
@@ -126,6 +126,22 @@ function ZettelEditor(props: { id: number }) {
         }
     }, [editor]);
 
+    const shouldShowFloatingMenu = ({ editor, view, state, oldState }) => {
+        const { selection } = state;
+        const { $anchor, empty } = selection;
+        const isRootDepth = $anchor.depth === 1;
+        const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent;
+
+        // This differs from the default one in that we don't check the depth, allowing the menu to
+        // appear in non-root nodes (e.g. list items). We might want to be more specific about where
+        // idk.
+        if (!view.hasFocus() || !empty || !isEmptyTextBlock || !editor.isEditable) {
+            return false;
+        }
+
+        return true;
+    };
+
     return (
         <>
             <Header title={zettel ? zettel.title : "Loading Zettel..."} actions={
@@ -136,7 +152,7 @@ function ZettelEditor(props: { id: number }) {
                     <Flex auto column>
                         <Title defaultValue={zettel.title} placeholder="Add a title..." onChange={onChangeTitle} onKeyDown={onTitleKeyDown} />
                         <StyledEditorContent editor={editor} />
-                        <FloatingMenu editor={editor}>
+                        <FloatingMenu editor={editor} shouldShow={shouldShowFloatingMenu}>
                             <MenuButton onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }>Table</MenuButton>
                             <MenuButton onClick={addImage}>Image</MenuButton>
                             <MenuButton onClick={() => editor.chain().focus().setDetails().run() }>Details</MenuButton>
@@ -203,7 +219,7 @@ const StyledEditorContent = styled(EditorContent)`
             padding-left: 1rem;
         }
 
-        :first-child {
+        .tiptap :first-child {
             margin-top: 0;
         }