landscape: resource descriptions include links
-import React, { useCallback, ReactNode } from "react";
+import React, { ReactNode } from "react";
import { Row, Box, Col, Text } from "@tlon/indigo-react";
import styled from "styled-components";
import { Link } from "react-router-dom";
@@ -6,8 +6,9 @@ import { Link } from "react-router-dom";
import { ChatResource } from "~/views/apps/chat/ChatResource";
import { PublishResource } from "~/views/apps/publish/PublishResource";
+import RichText from '~/views/components/RichText';
+
import { Association } from "~/types/metadata-update";
-import { StoreState } from "~/logic/store/type";
import GlobalApi from "~/logic/api/global";
import { RouteComponentProps, Route, Switch } from "react-router-dom";
import { ChannelSettings } from "./ChannelSettings";
@@ -34,6 +35,12 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
const appPath = association["app-path"];
const workspace = (baseUrl === '/~landscape/home') ? '/home' : association["group-path"];
const title = props.title || association?.metadata?.title;
+ const disableRemoteContent = {
+ audioShown: false,
+ imageShown: false,
+ oembedShown: false,
+ videoShown: false
+ };
return (
<Col width="100%" height="100%" overflowY="hidden">
<Box
@@ -70,16 +77,19 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
{atRoot && (
<>
<Box pr={1} mr={2}>
- <Text>{title}</Text>
+ <Text display='inline-block' verticalAlign='middle'>{title}</Text>
</Box>
<TruncatedBox
display={["none", "block"]}
maxWidth="60%"
+ verticalAlign='middle'
flexShrink={1}
title={association?.metadata?.description}
color="gray"
>
+ <RichText color='gray' remoteContentPolicy={disableRemoteContent} mb='0' display='inline-block'>
{association?.metadata?.description}
+ </RichText>
</TruncatedBox>
<Box flexGrow={1} />
<ChannelMenu association={association} api={api} />
