fix: several ux issues on linking panel

tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx

@@ -11,11 +11,10 @@ import { TextInput } from '../inputs/TextInput'
 interface LogseqQuickSearchProps {
   onChange: (id: string) => void
   className?: string
-  create?: boolean
   placeholder?: string
   style?: React.CSSProperties
   onBlur?: () => void
-  shape?: LogseqPortalShape
+  onAddBlock?: (uuid: string) => void
 }
 
 const LogseqTypeTag = ({
@@ -95,7 +94,7 @@ const useSearch = (q: string, searchFilter: 'B' | 'P' | null) => {
 }
 
 export const LogseqQuickSearch = observer(
-  ({ className, style, placeholder, create, onChange, onBlur, shape }: LogseqQuickSearchProps) => {
+  ({ className, style, placeholder, onChange, onBlur, onAddBlock }: LogseqQuickSearchProps) => {
     const [q, setQ] = React.useState(LogseqPortalShape.defaultSearchQuery)
     const [searchFilter, setSearchFilter] = React.useState<'B' | 'P' | null>(
       LogseqPortalShape.defaultSearchFilter
@@ -113,21 +112,19 @@ export const LogseqQuickSearch = observer(
       }
     }, [])
 
-    // TODO: should move this implementation to LogseqPortalShape
-    const onAddBlock = React.useCallback(
+    const handleAddBlock = React.useCallback(
       (content: string) => {
         const uuid = handlers?.addNewBlock(content)
         if (uuid) {
           finishSearching(uuid)
           // wait until the editor is mounted
           setTimeout(() => {
-            app.api.editShape(shape)
-            window.logseq?.api?.edit_block?.(uuid)
+            onAddBlock?.(uuid)
           })
         }
         return uuid
       },
-      [shape]
+      [onAddBlock]
     )
 
     const optionsWrapperRef = React.useRef<HTMLDivElement>(null)
@@ -165,12 +162,12 @@ export const LogseqQuickSearch = observer(
         return []
       }
 
-      if (create) {
+      if (onAddBlock) {
         // New block option
         options.push({
           actionIcon: 'circle-plus',
           onChosen: () => {
-            return !!onAddBlock(q)
+            return !!handleAddBlock(q)
           },
           element: (
             <div className="tl-quick-search-option-row">
@@ -189,7 +186,7 @@ export const LogseqQuickSearch = observer(
       }
 
       // New page or whiteboard option when no exact match
-      if (!searchResult?.pages?.some(p => p.toLowerCase() === q.toLowerCase()) && q && create) {
+      if (!searchResult?.pages?.some(p => p.toLowerCase() === q.toLowerCase()) && q) {
         options.push(
           {
             actionIcon: 'circle-plus',
@@ -389,6 +386,7 @@ export const LogseqQuickSearch = observer(
               if (e.key === 'Enter') {
                 finishSearching(q)
               }
+              e.stopPropagation()
             }}
             onBlur={onBlur}
           />

tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx

@@ -173,15 +173,18 @@ export function ShapeLinksInput({
                 <TablerIcon name="plus" />
                 Add a new link
               </Button>
-              <div className="h-2" />
-              <div className="text-center">
-                <span className="opacity-50 mr-1">Paste from clipboard with</span>
-                <span className="keyboard-shortcut">
-                  <code>{MOD_KEY}</code> <code>⇧</code> <code>V</code>
-                </span>
-              </div>
             </div>
           )}
+          <div className="h-2" />
+          <div
+            className="text-center"
+            style={{ visibility: !showQuickSearch ? 'visible' : 'hidden' }}
+          >
+            <span className="opacity-50 mr-1">Paste from clipboard with</span>
+            <span className="keyboard-shortcut">
+              <code>{MOD_KEY}</code> <code>⇧</code> <code>V</code>
+            </span>
+          </div>
           {refs.length > 0 && (
             <>
               <div className="h-2" />

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -443,8 +443,10 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           {isCreating ? (
             <LogseqQuickSearch
               onChange={onPageNameChanged}
-              create
-              shape={this}
+              onAddBlock={uuid => {
+                app.api.editShape(this)
+                window.logseq?.api?.edit_block?.(uuid)
+              }}
               placeholder="Create or search your graph..."
             />
           ) : (

yarn.lock

@@ -1616,12 +1616,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001370:
-  version "1.0.30001431"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz"
-  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
-
-caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   version "1.0.30001431"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
   integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==