wip: forward links

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -1,4 +1,4 @@
-import { Decoration, isNonNullable } from '@tldraw/core'
+import { Decoration, isNonNullable, validUUID } from '@tldraw/core'
 import { useApp } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import React from 'react'
@@ -503,25 +503,80 @@ const TextStyleAction = observer(() => {
 const ReferencesAction = observer(() => {
   const app = useApp<Shape>()
   const shape = app.selectedShapesArray[0]
-  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    shape.update({ refs: [e.target.value] })
-    app.persist()
-  }, [])
 
-  const [value, setValue] = React.useState(shape.props.refs?.[0] ?? '')
+  const [value, setValue] = React.useState('')
+
+  const [show, setShow] = React.useState(false)
+
+  const { handlers } = React.useContext(LogseqContext)
+
+  const handleChange = () => {
+    const refs = shape.props.refs ?? []
+    if (refs.includes(value)) return
+    shape.update({ refs: [...refs, value] })
+    app.persist()
+  }
+
+  const hasLinks = shape.props.refs && shape.props.refs.length > 0
 
   return (
-    <span className="flex gap-3">
-      {shape.props.refs?.length}
-      <TextInput
-        title="Website Url"
-        className="tl-iframe-src"
-        value={value}
-        onChange={e => {
-          setValue(e.target.value)
-        }}
-        onBlur={handleChange}
-      />
+    <span className="flex gap-3 relative">
+      <ToggleInput
+        className="px-2 tl-button"
+        pressed={show}
+        onPressedChange={s => setShow(s)}
+        title="Open References and Links"
+      >
+        <TablerIcon name="link" />
+        {hasLinks && <div className="tl-shape-references-count">{shape.props.refs?.length}</div>}
+      </ToggleInput>
+
+      {show && (
+        <div className="tl-shape-references-panel">
+          <TextInput
+            title="Website Url"
+            className="tl-iframe-src"
+            value={value}
+            onChange={e => {
+              setValue(e.target.value)
+            }}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                handleChange()
+              }
+              e.stopPropagation()
+            }}
+          />
+          <div className="text-xs font-bold inline-flex gap-1 items-center">
+            <TablerIcon name="link" />
+            Your Links
+          </div>
+          {shape.props.refs?.map((ref, i) => {
+            return (
+              <div className="tl-shape-references-panel-item">
+                <div>{ref}</div>
+                <div className="flex-1" />
+                <Button
+                  title="Open Page in Right Sidebar"
+                  type="button"
+                  onClick={() => handlers?.sidebarAddBlock(ref, validUUID(ref) ? 'block' : 'page')}
+                >
+                  <TablerIcon name="layout-sidebar-right" />
+                </Button>
+                <button
+                  className="hover:opacity-60"
+                  onClick={() => {
+                    shape.update({ refs: shape.props.refs?.filter((_, j) => j !== i) })
+                    app.persist()
+                  }}
+                >
+                  <TablerIcon name="x" />
+                </button>
+              </div>
+            )
+          })}
+        </div>
+      )}
     </span>
   )
 })

tldraw/apps/tldraw-logseq/src/styles.css

@@ -246,10 +246,10 @@ html[data-theme='light'] {
 }
 
 .tl-button {
-  @apply relative flex items-center justify-center rounded border-0;
+  @apply relative flex items-center justify-center rounded border-0 gap-1;
 
   height: 32px;
-  width: 32px;
+  min-width: 32px;
   font-family: var(--ls-font-family);
   background: none;
   cursor: pointer;
@@ -859,7 +859,7 @@ html[data-theme='dark'] {
 .tl-toggle-input {
   @apply inline-flex items-center justify-center;
   height: 32px;
-  width: 32px;
+  min-width: 32px;
   color: var(--ls-secondary-text-color);
 
   &:hover {
@@ -993,4 +993,24 @@ html[data-theme='dark'] {
   background-color: var(--color-selectedFill);
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
-}
+}
+
+.tl-shape-references-count {
+  @apply px-1;
+  background-color: var(--ls-page-properties-background-color);
+}
+
+.tl-shape-references-panel {
+  @apply absolute shadow-lg rounded-lg p-3;
+  width: 320px;
+  transform: translate(20px, -8px);
+  left: 100%;
+  top: 0;
+  background-color: var(--ls-secondary-background-color);
+}
+
+.tl-shape-references-panel-item {
+  @apply rounded py-1 px-4 flex items-center justify-center gap-1;
+  color: var(--color-text);
+  background-color: var(--ls-tertiary-background-color);
+}