From dd443776246fcb195753ee4c157237c47e915c59 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Fri, 19 Mar 2021 08:51:29 +1000 Subject: [PATCH] interface: update transclusion for reference content --- pkg/arvo/lib/graph-store.hoon | 4 +- pkg/interface/src/logic/lib/permalinks.ts | 19 ++++++++ .../src/logic/lib/tokenizeMessage.js | 15 +++++- .../apps/chat/components/ChatMessage.tsx | 23 ++++----- .../views/apps/permalinks/TranscludedNode.tsx | 48 +++++++++++++++---- .../src/views/apps/permalinks/embed.tsx | 4 +- .../src/views/components/CommentItem.tsx | 2 + .../src/views/components/Comments.tsx | 4 ++ .../src/views/components/MentionText.tsx | 7 +++ .../src/views/components/RichText.js | 6 ++- pkg/npm/api/graph/types.ts | 15 +++++- 11 files changed, 121 insertions(+), 26 deletions(-) diff --git a/pkg/arvo/lib/graph-store.hoon b/pkg/arvo/lib/graph-store.hoon index 77c233904e..0528e6deb5 100644 --- a/pkg/arvo/lib/graph-store.hoon +++ b/pkg/arvo/lib/graph-store.hoon @@ -202,8 +202,8 @@ ++ graph |= [grp=res gra=res idx=^index] %- pairs - :~ graph+s+(enjs-path:res grp) - group+s+(enjs-path:res gra) + :~ graph+s+(enjs-path:res gra) + group+s+(enjs-path:res grp) index+(index idx) == :: diff --git a/pkg/interface/src/logic/lib/permalinks.ts b/pkg/interface/src/logic/lib/permalinks.ts index 48dcbd1f7c..46e58cd7a0 100644 --- a/pkg/interface/src/logic/lib/permalinks.ts +++ b/pkg/interface/src/logic/lib/permalinks.ts @@ -57,6 +57,25 @@ function parseGraphPermalink( }; } +export function referenceToPermalink({ reference }: ReferenceContent): Permalink { + if('graph' in reference) { + const { graph, group, index } = reference.graph; + const link = `web+urbit://group${group.slice(5)}/graph${graph.slice(5)}${index}`; + return { + type: 'graph', + link, + ...reference.graph + }; + } else { + const link = `web+urbit://group${reference.group.slice(5)}`; + return { + type: 'group', + link, + ...reference + } + } +} + export function parsePermalink(url: string): Permalink | null { const [kind, ...rest] = url.slice(12).split("/"); if (kind === "group") { diff --git a/pkg/interface/src/logic/lib/tokenizeMessage.js b/pkg/interface/src/logic/lib/tokenizeMessage.js index 7ee17d9697..2dfce87783 100644 --- a/pkg/interface/src/logic/lib/tokenizeMessage.js +++ b/pkg/interface/src/logic/lib/tokenizeMessage.js @@ -45,7 +45,20 @@ const tokenizeMessage = (text) => { isInCodeBlock = false; } - if (isUrl(str) && !isInCodeBlock) { + if(isRef(str) && !isInCodeBlock) { + if (message.length > 0) { + // If we're in the middle of a message, add it to the stack and reset + messages.push({ text: message.join(' ') }); + } + const link = parsePermalink(str); + if(!link) { + messages.push({ url: str }); + } else { + const reference = permalinkToReference(link); + messages.push({ reference }); + } + message = []; + } else if (isUrl(str) && !isInCodeBlock) { if (message.length > 0) { // If we're in the middle of a message, add it to the stack and reset messages.push({ text: message.join(' ') }); diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 412d021e4e..3fb7e43df7 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -42,6 +42,7 @@ import useContactState from '~/logic/state/contact'; import { useIdlingState } from '~/logic/lib/idling'; import {useCopy} from '~/logic/lib/useCopy'; import {PermalinkEmbed} from '../../permalinks/embed'; +import {referenceToPermalink} from '~/logic/lib/permalinks'; export const DATESTAMP_FORMAT = '[~]YYYY.M.D'; @@ -573,18 +574,18 @@ export const Message = ({ /> ); case 'code': - return ; - case 'url': - if(content.url.startsWith('web+urbit:/')) { - return ( - - ); - } + return ; + case 'reference': + const { link } = referenceToPermalink(content); return ( + + ); + case 'url': + return ( ); case 2: - return ; + return ( + + ); default: return null; } } -function TranscludedComment(props: { node: GraphNode; assoc: Association }) { - const { assoc, node } = props; +function TranscludedComment(props: { + node: GraphNode; + assoc: Association; + api: GlobalApi; + transcluded: number; +}) { + const { assoc, node, api, transcluded } = props; const group = useGroupForAssoc(assoc)!; const comment = node.children?.peekLargest()![1]!; @@ -47,7 +65,12 @@ function TranscludedComment(props: { node: GraphNode; assoc: Association }) { group={group} /> - ; + ); @@ -56,8 +79,10 @@ function TranscludedComment(props: { node: GraphNode; assoc: Association }) { function TranscludedPublishNode(props: { node: GraphNode; assoc: Association; + api: GlobalApi; + transcluded: number; }) { - const { node, assoc } = props; + const { node, assoc, transcluded, api } = props; const group = useGroupForAssoc(assoc)!; const idx = node.post.index.slice(1).split("/"); switch (idx.length) { @@ -86,7 +111,14 @@ function TranscludedPublishNode(props: { ); case 3: - return ; + return ( + + ); default: return null; } diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx index b3885f7c8f..24bb0ac287 100644 --- a/pkg/interface/src/views/apps/permalinks/embed.tsx +++ b/pkg/interface/src/views/apps/permalinks/embed.tsx @@ -55,7 +55,7 @@ function GraphPermalink( } })(); }, [graph, index]); - const showTransclusion = !!(association && node && transcluded < 2); + const showTransclusion = !!(association && node && transcluded < 1); const rowTransclusionStyle = showTransclusion ? { @@ -77,7 +77,7 @@ function GraphPermalink( {showTransclusion && ( diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx index 481aa540da..f3e9500b93 100644 --- a/pkg/interface/src/views/components/CommentItem.tsx +++ b/pkg/interface/src/views/components/CommentItem.tsx @@ -108,6 +108,8 @@ export function CommentItem(props: CommentItemProps): ReactElement { backgroundColor={props.highlighted ? 'lightGray' : 'white'} > diff --git a/pkg/interface/src/views/components/Comments.tsx b/pkg/interface/src/views/components/Comments.tsx index 3d7c681c12..7b72bddd21 100644 --- a/pkg/interface/src/views/components/Comments.tsx +++ b/pkg/interface/src/views/components/Comments.tsx @@ -15,6 +15,7 @@ import { PropFunc } from '~/types/util'; import { isWriter } from '~/logic/lib/group'; import useHarkState from '~/logic/state/hark'; import {useQuery} from '~/logic/lib/useQuery'; +import {referenceToPermalink} from '~/logic/lib/permalinks'; interface CommentsProps { comments: GraphNode; @@ -107,7 +108,10 @@ export function Comments(props: CommentsProps & PropFunc) { val = val + curr.url; } else if ('code' in curr) { val = val + curr.code.expression; + } else if ('reference' in curr) { + val = `${val}web+urbit:/${referenceToPermalink(curr).link}`; } + return val; }, ''); } diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx index ac9f5755ba..387a6d2b93 100644 --- a/pkg/interface/src/views/components/MentionText.tsx +++ b/pkg/interface/src/views/components/MentionText.tsx @@ -7,11 +7,15 @@ import { cite, useShowNickname, uxToHex } from '~/logic/lib/util'; import OverlaySigil from '~/views/components/OverlaySigil'; import { useHistory } from 'react-router-dom'; import useContactState from '~/logic/state/contact'; +import {referenceToPermalink} from '~/logic/lib/permalinks'; +import GlobalApi from '~/logic/api/global'; interface MentionTextProps { contact?: Contact; content: Content[]; group: Group; + transcluded: number; + api: GlobalApi; } export function MentionText(props: MentionTextProps) { const { content, contact, group, ...rest } = props; @@ -25,6 +29,9 @@ export function MentionText(props: MentionTextProps) { return accum + `[~${c.mention}]`; } else if ('url' in c) { return accum + `\n ${c.url}`; + } else if ('reference' in c) { + const { link } = referenceToPermalink(c); + return accum + `\n [${link}]`; } return accum; }, '')} diff --git a/pkg/interface/src/views/components/RichText.js b/pkg/interface/src/views/components/RichText.js index 00d152d17f..3593aa46fb 100644 --- a/pkg/interface/src/views/components/RichText.js +++ b/pkg/interface/src/views/components/RichText.js @@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown'; import RemarkDisableTokenizers from 'remark-disable-tokenizers'; import { Anchor, Text } from '@tlon/indigo-react'; import { isValidPatp } from 'urbit-ob'; +import { PermalinkEmbed } from "~/views/apps/permalinks/embed" import { deSig } from '~/logic/lib/util'; import { Mention } from '~/views/components/MentionText'; @@ -22,7 +23,7 @@ const DISABLED_BLOCK_TOKENS = [ const DISABLED_INLINE_TOKENS = []; -const RichText = React.memo(({ disableRemoteContent, ...props }) => ( +const RichText = React.memo(({ disableRemoteContent, api, ...props }) => ( ( const linkText = String(linkProps.children[0].props.children); if (isValidPatp(linkText)) { return ; + } else if(linkText.startsWith('web+urbit://')) { + return ; + } return linkText; }, diff --git a/pkg/npm/api/graph/types.ts b/pkg/npm/api/graph/types.ts index 8bf8edc86f..d5bc11bd4d 100644 --- a/pkg/npm/api/graph/types.ts +++ b/pkg/npm/api/graph/types.ts @@ -15,8 +15,21 @@ export interface CodeContent { } export interface ReferenceContent { - uid: string; + reference: GraphReference | GroupReference; } + +export interface GraphReference { + graph: { + graph: string; + group: string; + index: string; + } +} + +export interface GroupReference { + group: string; +} + export interface MentionContent { mention: string; }