Merge branch 'next/groups' into groups/embed-fix

pkg/interface/src/views/components/RemoteContent/index.tsx

@@ -1,3 +1,6 @@
+import {
+  Box,
+} from '@tlon/indigo-react';
 import React from 'react';
 import useSettingsState from '~/logic/state/settings';
 import {
@@ -94,38 +97,42 @@ function RemoteContentInner(props: RemoteContentProps) {
     embedOnly: !renderUrl || tall
   };
 
-  const fallback = !renderUrl ? null : (
-    <RemoteContentWrapper {...wrapperProps}>
-      <TruncatedText>{url}</TruncatedText>
-    </RemoteContentWrapper>
-  );
+  const fallback = null;
 
   if (isImage && remoteContentPolicy.imageShown) {
     return (
-      <RemoteContentWrapper {...wrapperProps} noOp={transcluded} replaced>
-        <RemoteContentImageEmbed url={url} />
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper {...wrapperProps} noOp={transcluded} replaced>
+          <RemoteContentImageEmbed url={url} />
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isAudio && remoteContentPolicy.audioShown) {
     return (
-      <RemoteContentWrapper {...wrapperProps}>
-        <RemoteContentAudioEmbed url={url} />
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper {...wrapperProps}>
+          <RemoteContentAudioEmbed url={url} />
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isVideo && remoteContentPolicy.videoShown) {
     return (
-      <RemoteContentWrapper
-        {...wrapperProps}
-        detail={<RemoteContentVideoEmbed url={url} />}
-      >
-        <TruncatedText>{url}</TruncatedText>
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper
+          {...wrapperProps}
+          detail={<RemoteContentVideoEmbed url={url} />}
+        >
+          <TruncatedText>{url}</TruncatedText>
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isOembed && remoteContentPolicy.oembedShown) {
     return (
-      <AsyncFallback fallback={fallback}>
-        <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} oembed={oembed} />
-      </AsyncFallback>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <AsyncFallback fallback={fallback}>
+          <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} />
+        </AsyncFallback>
+      </Box>
     );
   }
   return fallback;

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx

@@ -74,7 +74,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
   const writers = _.get(
     group?.tags,
     ['graph', association.resource, 'writers'],
-    new Set()
+    []
   );
 
   let [, , hostShip] = association.resource.split('/');
@@ -91,7 +91,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
 
   const initialValues = {
     writePerms,
-    writers: Array.from(writers)
+    writers: writers
       .filter(x => x !== hostShip),
     readerComments: association.metadata.vip === 'reader-comments'
   };
@@ -104,7 +104,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
       resource: association.resource,
       tag: 'writers'
     };
-    const allWriters = Array.from(writers).map(w => `~${w}`);
+    const allWriters = writers.map(w => `~${w}`);
     if (values.readerComments !== readerComments) {
       await airlock.poke(metadataEdit(association, {
         vip: values.readerComments ? 'reader-comments' : ''
@@ -170,7 +170,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
           <Col>
             <Label mb={2}>Permissions Summary</Label>
             <PermissionsSummary
-              writersSize={writers.size}
+              writersSize={writers.length}
               vip={association.metadata.vip}
             />
           </Col>

pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx

@@ -147,13 +147,14 @@ const contentToMdAst = (tall: boolean) => (
     ];
   } else if ('url' in content) {
     return [
-      'block',
+      'inline',
       {
         type: 'root',
         children: [
           {
-            type: 'graph-url',
-            url: content.url
+            type: 'link',
+            url: content.url,
+            children: [{ type: 'text', value: content.url }]
           }
         ]
       }
@@ -186,8 +187,20 @@ function stitchInline(a: any, b: any) {
   if (!a?.children) {
     throw new Error('Bad stitchInline call: missing root');
   }
+
   const lastParaIdx = a.children.length - 1;
   const last = a.children[lastParaIdx];
+
+  // wrap bare link in list-item inside a p node
+  // for better typography consistency
+  if (last?.type === 'listItem') {
+    if (last?.children.length === 0) {
+      last.children.push({
+        type: 'paragraph',
+        children: []
+      });
+    }
+  }
   if (last?.children) {
     const ros = {
       ...a,
@@ -217,7 +230,7 @@ function getChildren<T extends unknown>(node: T): AstContent[] {
 }
 
 export function asParent<T extends BlockContent>(node: T): Parent | undefined {
-  return ['paragraph', 'heading', 'list', 'listItem', 'table'].includes(
+    return ['paragraph', 'heading', 'list', 'listItem', 'table', 'blockquote'].includes(
     node.type
   )
     ? (node as Parent)
@@ -241,6 +254,7 @@ function stitchMerge(a: Root, b: Root) {
       children: [...aChildren.slice(0, -1), mergedPara, ...bChildren.slice(1)]
     };
   }
+
   return { ...a, children: [...aChildren, ...bChildren] };
 }
 
@@ -256,10 +270,10 @@ function stitchInlineAfterBlock(a: Root, b: GraphMentionNode[]) {
 }
 
 function stitchAsts(asts: [StitchMode, GraphAstNode][]) {
-  return _.reduce(
+  const t = _.reduce(
     asts,
     ([prevMode, ast], [mode, val]): [StitchMode, GraphAstNode] => {
-      if (prevMode === 'block') {
+      if (prevMode === 'block' || prevMode === 'inline') {
         if (mode === 'inline') {
           return [mode, stitchInlineAfterBlock(ast, val?.children ?? [])];
         }
@@ -283,6 +297,56 @@ function stitchAsts(asts: [StitchMode, GraphAstNode][]) {
     },
     ['block', { type: 'root', children: [] }] as [StitchMode, GraphAstNode]
   );
+
+  t[1].children.map((c, idx) => {
+    if (c.type === 'blockquote' && t[1].children[idx +1] !== undefined && t[1].children[idx +1].type === 'paragraph') {
+        const next = idx !== t[1].children.length -1
+            ? t[1].children.splice(idx +1, 1)
+            : [];
+
+        if (next.length > 0) {
+            t[1].children[idx].children.push(next[0]);
+        }
+    }
+
+    const links = [];
+    function addRichEmbedURL(nodes) {
+      if (nodes?.children) {
+        nodes.children.filter((k) => {
+          if (k.type === 'link') {
+            links.push({
+              type: 'root',
+              children: [
+                {
+                  type: 'graph-url',
+                  url: k.url
+                }
+              ]
+            });
+          } else if (k?.children) {
+            k.children.filter((o) => {
+              if (o.type === 'link') {
+                links.push({
+                  type: 'root',
+                  children: [
+                    {
+                      type: 'graph-url',
+                      url: o.url
+                    }
+                  ]
+                });
+              }
+            });
+          }
+        });
+
+        nodes.children.push(...links);
+      }
+    }
+    addRichEmbedURL(c);
+  });
+
+  return t;
 }
 const header = ({ children, depth, ...rest }) => {
   const level = depth;
@@ -408,7 +472,7 @@ const renderers = {
     );
   },
   list: ({ depth, ordered, children }) => {
-    return ordered ? <Ol>{children}</Ol> : <Ul>{children}</Ul>;
+    return ordered ? <Ol fontSize="1">{children}</Ol> : <Ul fontSize="1">{children}</Ul>;
   },
   'graph-mention': (obj) => {
     return <Mention ship={obj.ship} emphasis={obj.emphasis} />;
@@ -419,9 +483,7 @@ const renderers = {
     </Box>
   ),
   'graph-url': ({ url, tall }) => (
-    <Box mt={1} mb={2} flexShrink={0}>
-      <RemoteContent key={url} url={url} tall={tall} />
-    </Box>
+     <RemoteContent key={url} url={url} tall={tall} />
   ),
   'graph-reference': ({ reference, transcluded }) => {
     const { link } = referenceToPermalink({ reference });

pkg/interface/src/views/landscape/components/Graph/blockquote.js

@@ -120,7 +120,6 @@ function blockquote(eat, value, silent) {
 
   exit = self.enterBlock()
   contents = self.tokenizeBlock(contents.join(lineFeed), now)
-  console.log(values);
   exit()
 
   const added = add({type: 'blockquote', children: contents})

pkg/landscape/app/group-view.hoon

@@ -190,6 +190,11 @@
     |%
     ++  pull-action  pull-hook-action+!>([%add ship rid])
     ::
+    ++  listen-hark
+      |=  gr=resource
+      %+  poke-our:pass:io  %hark-graph-hook
+      hark-graph-hook-action+!>([%listen gr /])
+    ::
     ++  watch-md      (watch-our:(jn-pass-io /md) %metadata-store /updates)
     ++  watch-groups  (watch-our:(jn-pass-io /groups) %group-store /groups)
     ++  watch-md-nacks  (watch-our:(jn-pass-io /md-nacks) %metadata-pull-hook /nack)
@@ -436,6 +441,9 @@
       =?  jn-core  |(hidden autojoin.request)
         %-  emit-many
         (turn graphs pull-gra:pass)
+      =?  jn-core  hidden
+        %-  emit-many
+        (turn graphs listen-hark:pass)
       jn-core
       ::
       ++  feed-rid

pkg/landscape/ted/graph/create.hoon

@@ -35,6 +35,8 @@
     (poke-our %group-store group-update-0+!>([%add-members rid (sy our.bowl ~)]))
   ;<  ~  bind:m
     (poke-our %group-push-hook push-hook-act)
+  ;<  ~  bind:m
+    (poke-our %hark-graph-hook hark-graph-hook-action+!>([%listen rid /]))
   (pure:m rid)
 --
 ::

pkg/landscape/ted/group/leave.hoon

@@ -38,4 +38,6 @@
   (raw-poke-our %contact-pull-hook pull-hook-act)
 ;<  ~  bind:m
   (raw-poke-our %group-store remove)
+;<  ~  bind:m
+  (raw-poke-our %group-view group-view-action+!>([%done rid]))
 (pure:m !>(~))