diff --git a/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx b/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx index 2234e7ca3..71166e7df 100644 --- a/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/BlockLink/BlockLink.tsx @@ -3,14 +3,14 @@ import React from 'react' import { LogseqContext } from '../../lib/logseq-context' import { TablerIcon } from '../icons' -export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => { +export const BlockLink = ({ id }: { id: string }) => { const { handlers: { isWhiteboardPage, redirectToPage, sidebarAddBlock, queryBlockByUUID }, renderers: { Breadcrumb, PageNameLink }, } = React.useContext(LogseqContext) let iconName = '' - type = type ?? (validUUID(id) ? 'B' : 'P') + let linkType = validUUID(id) ? 'B' : 'P' if (validUUID(id)) { if (queryBlockByUUID(id)?.properties?.['ls-type'] === 'whiteboard-shape') { @@ -32,7 +32,7 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => { onPointerDown={e => { e.stopPropagation() if (e.shiftKey) { - sidebarAddBlock(id, type === 'B' ? 'block' : 'page') + sidebarAddBlock(id, linkType === 'B' ? 'block' : 'page') } else { redirectToPage(id) } @@ -40,7 +40,11 @@ export const BlockLink = ({ type, id }: { type?: 'P' | 'B'; id: string }) => { > - {type === 'P' ? : } + {linkType === 'P' ? ( + + ) : ( + + )} ) diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx index 9f9d401d4..5b5ea0d4f 100644 --- a/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/QuickLinks/QuickLinks.tsx @@ -1,26 +1,27 @@ import type { TLQuickLinksComponent } from '@tldraw/react' import { observer } from 'mobx-react-lite' +import React from 'react' import type { Shape } from '../../lib' import { BlockLink } from '../BlockLink' export const QuickLinks: TLQuickLinksComponent = observer(({ id, shape }) => { - const refs = shape.props.refs ?? [] - const portalType = shape.props.type === 'logseq-portal' && shape.props.blockType + const links = React.useMemo(() => { + const links = [...(shape.props.refs ?? [])] - if (refs.length === 0 && !portalType) return null + if (shape.props.type === 'logseq-portal' && shape.props.pageId) { + links.unshift(shape.props.pageId) + } + + return links + }, [shape.props.type, shape.props.parentId, shape.props.refs]) + + if (links.length === 0) return null return (
- {portalType && shape.props.type === 'logseq-portal' && ( - <> -
- -
- - )} - {refs.map(ref => { + {links.map(ref => { return ( -
+
) diff --git a/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx b/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx index ec3bb2e74..d1a10c5f9 100644 --- a/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/QuickSearch/QuickSearch.tsx @@ -131,6 +131,8 @@ export const LogseqQuickSearch = observer( const [prefixIcon, setPrefixIcon] = React.useState('circle-plus') + const [showPanel, setShowPanel] = React.useState(false) + React.useEffect(() => { // autofocus attr seems not to be working setTimeout(() => { @@ -384,7 +386,13 @@ export const LogseqQuickSearch = observer( } e.stopPropagation() }} - onBlur={onBlur} + onFocus={() => { + setShowPanel(true) + }} + onBlur={() => { + setShowPanel(false) + onBlur?.() + }} />
{/* TODO: refactor to radix-ui popover */} @@ -393,6 +401,11 @@ export const LogseqQuickSearch = observer( onWheelCapture={e => e.stopPropagation()} className="tl-quick-search-options" ref={optionsWrapperRef} + style={{ + // not using display: none so we can persist the scroll position + visibility: showPanel ? 'visible' : 'hidden', + pointerEvents: showPanel ? 'all' : 'none', + }} > +
- +
{onRemove && ( - )}
@@ -132,7 +137,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({ References
-
)} @@ -141,7 +145,6 @@ export const ShapeLinksInput = observer(function ShapeLinksInput({ Link to any page or block
-
{canAddLink && ( 0 && ( - <> -
-
- {refs.map((ref, i) => { - return ( - { - onRefsChange(refs.filter((_, j) => i !== j)) - }} - /> - ) - })} -
- +
+ {refs.map((ref, i) => { + return ( + { + onRefsChange(refs.filter((_, j) => i !== j)) + }} + /> + ) + })} +
)}
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index e6582dc55..808180775 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -1029,7 +1029,7 @@ html[data-theme='dark'] { .tl-shape-links-panel, .tl-shape-links-reference-panel { - @apply p-3; + @apply p-3 flex flex-col gap-2; min-width: 340px; max-width: 516px; color: var(--ls-primary-text-color); @@ -1056,6 +1056,18 @@ html[data-theme='dark'] { } } +button.tl-shape-links-panel-item-remove-button { + @apply rounded-full w-6 h-6 min-w-0 -ml-4; + + transform: translate(16px, -16px); + + background-color: var(--ls-primary-background-color); + + &:hover { + background-color: var(--ls-tertiary-background-color); + } +} + .tl-shape-links-panel-add-button { @apply w-full font-medium text-base h-[40px]; background-color: var(--ls-secondary-background-color); @@ -1110,12 +1122,12 @@ html[data-theme='dark'] { } } -.tl-quick-links-row-primary { +.tl-quick-links-row:nth-child(1) { @apply rounded bg-indigo-600; color: #fff; } -.tl-quick-links-row-secondary { +.tl-quick-links-row:nth-child(2) { @apply opacity-50; color: var(--ls-secondary-text-color); @@ -1125,10 +1137,10 @@ html[data-theme='dark'] { } .tl-quick-links:hover { - .tl-quick-links-row-primary:not(:hover) { + .tl-quick-links-row:nth-child(1):not(:hover) { @apply opacity-50; } - .tl-quick-links-row-primary:hover { + .tl-quick-links-row:nth-child(1):hover { @apply bg-indigo-500; } }