frontend: embeds and collapsing

- fix entity id parsing

frontend/packages/app/components/app-embeds.tsx

@@ -128,10 +128,17 @@ function EmbedWrapper({
 }
 
 export function EmbedPublicationContent(props: EntityComponentProps) {
-  const docId = props.type == 'd' ? createHmId('d', props.eid) : undefined
+  const docId =
+    props.type == 'd'
+      ? createHmId('d', props.eid, {
+          blockRange: props.blockRange,
+          blockRef: props.blockRef,
+          version: props.version,
+        })
+      : undefined
   const [showReferenced, setShowReferenced] = useState(false)
   const pub = usePublicationVariant({
-    documentId: docId,
+    documentId: props.qid,
     versionId:
       showReferenced && props.version
         ? props.version
@@ -174,7 +181,14 @@ export function EmbedPublicationContent(props: EntityComponentProps) {
 }
 
 export function EmbedPublicationCard(props: EntityComponentProps) {
-  const docId = props.type == 'd' ? createHmId('d', props.eid) : undefined
+  const docId =
+    props.type == 'd'
+      ? createHmId('d', props.eid, {
+          blockRange: props.blockRange,
+          blockRef: props.blockRef,
+          version: props.version,
+        })
+      : undefined
   const pub = usePublicationVariant({
     documentId: docId,
     versionId: props.latest ? undefined : props.version || undefined,
@@ -276,7 +290,12 @@ function AvatarComponent({accountId}: {accountId: string}) {
 }
 
 export function EmbedGroup(props: EntityComponentProps) {
-  const groupId = props.type == 'g' ? createHmId('g', props.eid) : undefined
+  const groupId =
+    props.type == 'g'
+      ? createHmId('g', props.eid, {
+          version: props.version,
+        })
+      : undefined
   const groupQuery = useGroup(groupId, props.version || undefined)
 
   const group = hmGroup(groupQuery.data)

frontend/packages/app/components/favoriting.tsx

@@ -1,8 +1,7 @@
 import {useHover} from '@mintter/shared'
-import {Button, Tooltip} from '@mintter/ui'
-import {Star} from '@tamagui/lucide-icons'
+import {Button, Star, StarFull, Tooltip} from '@mintter/ui'
+
 import {ComponentProps} from 'react'
-import {TiStarFullOutline, TiStarOutline} from 'react-icons/ti'
 import {useFavorite} from '../models/favorites'
 
 function RemoveFavoriteButton({
@@ -16,7 +15,7 @@ function RemoveFavoriteButton({
       <Button
         {...hover}
         size="$2"
-        icon={hover.hover ? TiStarOutline : TiStarFullOutline}
+        icon={hover.hover ? Star : StarFull}
         onPress={onPress}
         color={hover.hover ? undefined : '$yellow10'}
         theme={hover.hover ? 'red' : undefined}
@@ -42,7 +41,7 @@ export function FavoriteButton({url}: {url: string}) {
   return (
     <Tooltip content="Add To Favorites">
       <Button
-        icon={TiStarOutline}
+        icon={Star}
         size="$2"
         onPress={(e) => {
           e.stopPropagation()

frontend/packages/app/components/launcher.tsx

@@ -6,9 +6,9 @@ import {
   GRPCClient,
   HYPERMEDIA_ENTITY_TYPES,
   HYPERMEDIA_SCHEME,
-  extractBlockRefOfUrl,
   hmIdWithVersion,
   isHypermediaScheme,
+  parseFragment,
   unpackHmId,
 } from '@mintter/shared'
 import {
@@ -93,12 +93,11 @@ function useURLHandler() {
       }
     } else {
       const result = await fetchWebLink(queryClient, httpSearch)
-      console.log('web result', result)
-      const blockRef = extractBlockRefOfUrl(httpSearch)
+      const fragment = parseFragment(httpSearch)
       const fullHmId = hmIdWithVersion(
         result?.hmId,
         result?.hmVersion,
-        blockRef,
+        fragment?.blockId,
       )
       console.log('fullHmId', fullHmId)
       if (!fullHmId) throw new Error('Failed to fetch web link')

frontend/packages/app/models/web-links.ts

@@ -1,5 +1,5 @@
 import {AppQueryClient} from '@mintter/app/query-client'
-import {extractBlockRefOfUrl} from '@mintter/shared'
+import {parseFragment} from '@mintter/shared'
 import {useQuery} from '@tanstack/react-query'
 import {useEffect, useRef, useState} from 'react'
 import {queryKeys} from './query-keys'
@@ -64,12 +64,13 @@ export async function fetchWebLinkMeta(
     const hmUrl = extractMetaTagValue(doc, 'hypermedia-url')
     const hmVersion = extractMetaTagValue(doc, 'hypermedia-entity-version')
     const hmTitle = extractMetaTagValue(doc, 'hypermedia-entity-title')
+    const fragment = parseFragment(url)
     return {
       hmUrl,
       hmId,
       hmVersion,
       hmTitle,
-      blockRef: extractBlockRefOfUrl(url),
+      blockRef: fragment?.blockId || null,
     }
   } catch (e) {
     return null

frontend/packages/editor/src/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx

@@ -5,7 +5,7 @@ import {
   UnpackedHypermediaId,
   isHypermediaScheme,
   isPublicGatewayLink,
-  normlizeHmId,
+  normalizeHmId,
 } from '@mintter/shared'
 import {
   FileText,
@@ -86,7 +86,7 @@ export function getLinkMenuItems({
           icon: <SquareAsterisk size={18} />,
           execute: (editor: BlockNoteEditor, ref: string) => {
             if (isPublicGatewayLink(ref, gwUrl) || isHypermediaScheme(ref)) {
-              const hmId = normlizeHmId(ref, gwUrl)
+              const hmId = normalizeHmId(ref, gwUrl)
               if (!hmId) return
               ref = hmId
             }
@@ -119,7 +119,7 @@ export function getLinkMenuItems({
           icon: <FileText size={18} />,
           execute: (editor: BlockNoteEditor, ref: string) => {
             if (isPublicGatewayLink(ref, gwUrl) || isHypermediaScheme(ref)) {
-              const hmId = normlizeHmId(ref, gwUrl)
+              const hmId = normalizeHmId(ref, gwUrl)
               if (!hmId) return
               ref = hmId
             }

frontend/packages/editor/src/embed-block.tsx

@@ -5,12 +5,12 @@ import {useOpenUrl} from '@mintter/app/open-url'
 import {
   BlockContentEmbed,
   createHmDocLink,
-  extractBlockRefOfUrl,
   hmIdWithVersion,
   isHypermediaScheme,
   isPublicGatewayLink,
-  normlizeHmId,
+  normalizeHmId,
   unpackHmId,
+  useHover,
 } from '@mintter/shared'
 import {ErrorBlock} from '@mintter/shared/src/publication-content'
 import {
@@ -79,7 +79,7 @@ const Render = (
     setLoading: any,
   ) => {
     if (isPublicGatewayLink(url, gwUrl) || isHypermediaScheme(url)) {
-      const hmLink = normlizeHmId(url, gwUrl)
+      const hmLink = normalizeHmId(url, gwUrl)
       const newUrl = hmLink ? hmLink : url
       assign({props: {url: newUrl}} as MediaType)
       const cursorPosition = editor.getTextCursorPosition()
@@ -106,7 +106,7 @@ const Render = (
           const fullHmId = hmIdWithVersion(
             res?.hmId,
             res?.hmVersion,
-            extractBlockRefOfUrl(url),
+            res?.blockRef,
           )
           if (fullHmId) {
             assign({props: {url: fullHmId}} as MediaType)
@@ -215,6 +215,7 @@ function EmbedControl({
   const popoverViewState = usePopoverState()
   const popoverLatestState = usePopoverState()
   const popoverToDocumentState = usePopoverState()
+  const expandButtonHover = useHover()
 
   let versionValue = block.props.url.includes('&l') ? 'latest' : 'exact'
   let isVersionLatest = versionValue == 'latest'
@@ -226,15 +227,15 @@ function EmbedControl({
     }
   }, [])
 
-  const expanded = useMemo(
-    () =>
+  const expanded = useMemo(() => {
+    let res =
       hmId &&
       hmId?.blockRef &&
       hmId.blockRange &&
       'expanded' in hmId.blockRange &&
-      hmId.blockRange?.expanded,
-    [block.props.url],
-  )
+      hmId.blockRange?.expanded
+    return res
+  }, [block.props.url])
 
   const handleVersionSelect = useCallback(
     (versionMode: 'exact' | 'latest') => {
@@ -265,8 +266,13 @@ function EmbedControl({
     if (unpackedRef) {
       assign({
         props: {
-          url: createHmDocLink(hmId!),
-
+          url: createHmDocLink({
+            documentId: unpackedRef?.qid,
+            version: unpackedRef?.version,
+            blockRef: unpackedRef?.blockRef,
+            variants: unpackedRef?.variants,
+            latest: unpackedRef?.latest || undefined,
+          }),
           view: 'content',
         },
       })
@@ -297,42 +303,59 @@ function EmbedControl({
           }}
         />
       </Tooltip>
-      <Tooltip
-        content={
-          expanded
-            ? `Embed only the block's content`
-            : `Embed the block and its children`
-        }
-      >
-        <Button
-          size="$2"
-          icon={expanded ? Check : ChevronRight}
-          backgroundColor="$backgroundStrong"
-          onPress={(e) => {
-            e.stopPropagation()
-            let url = createHmDocLink({
-              documentId: hmId?.qid,
-              version: hmId?.version,
-              variants: hmId?.variants,
-              latest: !!hmId?.latest,
-              blockRef: hmId?.blockRef,
-              blockRange: {
-                expanded: !expanded,
-              },
-            })
-
-            console.log('--- URL', url)
-            assign({
-              props: {
-                url,
-                view: 'content',
-              },
-            })
-          }}
+      {hmId?.blockRef ? (
+        <Tooltip
+          content={
+            expanded
+              ? `Embed only the block's content`
+              : `Embed the block and its children`
+          }
         >
-          {expanded ? 'Collapse' : 'Expand'}
-        </Button>
-      </Tooltip>
+          <Button
+            {...expandButtonHover}
+            size="$2"
+            icon={
+              expanded
+                ? expandButtonHover.hover
+                  ? ChevronRight
+                  : ChevronDown
+                : expandButtonHover.hover
+                ? ChevronDown
+                : ChevronRight
+            }
+            backgroundColor="$backgroundStrong"
+            onPress={(e) => {
+              e.stopPropagation()
+              let url = createHmDocLink({
+                documentId: hmId?.qid,
+                version: hmId?.version,
+                variants: hmId?.variants,
+                latest: !!hmId?.latest,
+                blockRef: hmId?.blockRef,
+                blockRange: {
+                  expanded: !expanded,
+                },
+              })
+
+              assign({
+                props: {
+                  url,
+                  view: 'content',
+                },
+              })
+            }}
+          >
+            {expanded
+              ? expandButtonHover.hover
+                ? 'Expand'
+                : 'Collapse'
+              : expandButtonHover.hover
+              ? 'Collapse'
+              : 'Expand'}
+          </Button>
+        </Tooltip>
+      ) : null}
+
       {allowViewSwitcher && (
         <Popover
           {...popoverViewState}

frontend/packages/editor/src/tiptap-extension-link/helpers/pasteHandler.ts

@@ -12,7 +12,7 @@ import {
   hmIdWithVersion,
   isHypermediaScheme,
   isPublicGatewayLink,
-  normlizeHmId,
+  normalizeHmId,
   unpackHmId,
 } from '@mintter/shared'
 import {Editor} from '@tiptap/core'
@@ -100,7 +100,7 @@ export function pasteHandler(options: PasteHandlerOptions): Plugin {
         const nativeHyperLink =
           isHypermediaScheme(textContent) ||
           isPublicGatewayLink(textContent, options.gwUrl)
-            ? normlizeHmId(textContent, options.gwUrl)
+            ? normalizeHmId(textContent, options.gwUrl)
             : null
 
         const unpackedHmId =
@@ -151,12 +151,23 @@ export function pasteHandler(options: PasteHandlerOptions): Plugin {
 
         if (selection.empty && unpackedHmId?.eid && unpackedHmId.type) {
           let tr = view.state.tr
+
           let pos = tr.selection.from
           const normalizedHmUrl = createHmId(
             unpackedHmId.type,
             unpackedHmId.eid,
-            unpackedHmId,
+            {
+              blockRef: unpackedHmId.blockRef,
+              blockRange: unpackedHmId.blockRange,
+              version: unpackedHmId.version,
+            },
           )
+
+          console.log(`== ~ pasteHandler ~ normalizedHmUrl:`, {
+            textContent,
+            normalizedHmUrl,
+            unpackedHmId,
+          })
           fetchEntityTitle(unpackedHmId, options.grpcClient)
             .then((title) => {
               if (title) {