Merge pull request #4905 from urbit/lf/more-markdown

GraphContent: improve rendering

pkg/interface/package-lock.json

@@ -1483,9 +1483,9 @@
       "integrity": "sha512-xO8hj2Ak6cEYe2QCM3w7UuaSB8ubg6G0G6/OkPVMVrz6b5ztccZmkbmYCYJ/Ot6976lGzKFsWFKRUhwRgCHfHQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.2.22",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.22.tgz",
-      "integrity": "sha512-8w2TkYicch+R0kkZT+MZ4oG0pIJFNjhmVlbXgqyXhOCPRJB2WrAh6OM5Cbb389r7lA+CXXfu3Nx7Rdiuxjf/vg==",
+      "version": "1.2.23",
+      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.23.tgz",
+      "integrity": "sha512-RH9106bWwRjLm91vnVRmdtPeXNg0YujsaBNwPt7Wsezj1IKVJKabGu50dRY7bovfBbiE5JhBZzA3lw3LABfj/w==",
       "requires": {
         "@reach/menu-button": "^0.10.5",
         "react": "^16.13.1",
@@ -11332,6 +11332,7 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -11398,6 +11399,7 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
+          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }

pkg/interface/package.json

@@ -11,7 +11,7 @@
     "@react-spring/web": "^9.1.1",
     "@tlon/indigo-dark": "^1.0.6",
     "@tlon/indigo-light": "^1.0.7",
-    "@tlon/indigo-react": "^1.2.22",
+    "@tlon/indigo-react": "^1.2.23",
     "@tlon/sigil-js": "^1.4.3",
     "@urbit/api": "file:../npm/api",
     "any-ascii": "^0.1.7",

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

@@ -3,7 +3,8 @@ import {
   Col, H1,
   H2,
   H3,
-  H4, Text
+  H4, Text,
+  Li, Ol, Ul
 } from '@tlon/indigo-react';
 import { Content, ReferenceContent } from '@urbit/api';
 import _ from 'lodash';
@@ -234,7 +235,7 @@ const header = ({ children, depth, ...rest }) => {
 const renderers = {
   heading: header,
   break: () => {
-    return <Box display="block" width="100%" height={2}></Box>;
+    return <br />
   },
   thematicBreak: () => {
     return <Box display="block" width="100%" height={2}></Box>;
@@ -254,16 +255,12 @@ const renderers = {
   },
   strong: ({ children }) => {
     return (
-      <Text fontWeight="bold" lineHeight="1">
-        {children}
-      </Text>
+        <b>{children}</b>
     );
   },
   emphasis: ({ children }) => {
     return (
-      <Text fontStyle="italic" fontSize={1} lineHeight="tall">
-        {children}
-      </Text>
+        <i>{children}</i>
     );
   },
   blockquote: ({ children, depth, tall, ...rest }) => {
@@ -274,12 +271,11 @@ const renderers = {
     return (
       <Text
         lineHeight="tall"
-        display="block"
+        display="inline-block"
         borderLeft="1px solid"
         color="black"
         paddingLeft={2}
-        py={1}
-        mb={1}
+        my={1}
       >
         {children}
       </Text>
@@ -287,29 +283,18 @@ const renderers = {
   },
   paragraph: ({ children }) => {
     return (
-      <Text fontSize={1} lineHeight="tall">
+      <Box fontSize={1} lineHeight="tall">
         {children}
-      </Text>
+      </Box>
     );
   },
   listItem: ({ children }) => {
     return (
-      <Box position="relative" alignItems="center">
-        <Dot
-          top="7px"
-          position="absolute"
-          left="0px"
-          mr={1}
-          height="20px"
-          width="20px"
-        />
-        <Box ml={2}>{children}</Box>
-      </Box>
+      <Li>{children}</Li>
     );
   },
 
   code: ({ language, tall, value, ...rest }) => {
-    console.log(rest);
     const inner = (
       <Text
         p={1}
@@ -340,12 +325,8 @@ const renderers = {
       </Anchor>
     );
   },
-  list: ({ depth, children }) => {
-    return (
-      <Col ml={3} gapY={2} my={2}>
-        {children}
-      </Col>
-    );
+  list: ({ depth, ordered, children }) => {
+    return ordered ? <Ol>{children}</Ol> : <Ul>{children}</Ul>;
   },
   'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />,
   image: ({ url }) => (

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

@@ -0,0 +1,124 @@
+/** pulled from remark-parse
+ * 
+ *  critical change is that blockquotes require a newline to be continued, see
+ *  the `if(!prefixed) conditional
+ */
+'use strict'
+
+var trim = require('trim')
+var interrupt = require('remark-parse/lib/util/interrupt')
+
+module.exports = blockquote
+
+var lineFeed = '\n'
+var tab = '\t'
+var space = ' '
+var greaterThan = '>'
+
+function blockquote(eat, value, silent) {
+  var self = this
+  var offsets = self.offset
+  var tokenizers = self.blockTokenizers
+  var interruptors = self.interruptBlockquote
+  var now = eat.now()
+  var currentLine = now.line
+  var length = value.length
+  var values = []
+  var contents = []
+  var indents = []
+  var add
+  var index = 0
+  var character
+  var rest
+  var nextIndex
+  var content
+  var line
+  var startIndex
+  var prefixed
+  var exit
+
+  while (index < length) {
+    character = value.charAt(index)
+
+    if (character !== space && character !== tab) {
+      break
+    }
+
+    index++
+  }
+
+  if (value.charAt(index) !== greaterThan) {
+    return
+  }
+
+  if (silent) {
+    return true
+  }
+
+  index = 0
+
+  while (index < length) {
+    nextIndex = value.indexOf(lineFeed, index)
+    startIndex = index
+    prefixed = false
+
+    if (nextIndex === -1) {
+      nextIndex = length
+    }
+
+    while (index < length) {
+      character = value.charAt(index)
+
+      if (character !== space && character !== tab) {
+        break
+      }
+
+      index++
+    }
+
+    if (value.charAt(index) === greaterThan) {
+      index++
+      prefixed = true
+
+      if (value.charAt(index) === space) {
+        index++
+      }
+    } else {
+      index = startIndex
+    }
+
+    content = value.slice(index, nextIndex)
+
+    if (!prefixed && !trim(content)) {
+      index = startIndex
+      break
+    }
+
+    if (!prefixed) {
+      break;
+    }
+
+    line = startIndex === index ? content : value.slice(startIndex, nextIndex)
+
+    indents.push(index - startIndex)
+    values.push(line)
+    contents.push(content)
+
+    index = nextIndex + 1
+  }
+
+  index = -1
+  length = indents.length
+  add = eat(values.join(lineFeed))
+
+  while (++index < length) {
+    offsets[currentLine] = (offsets[currentLine] || 0) + indents[index]
+    currentLine++
+  }
+
+  exit = self.enterBlock()
+  contents = self.tokenizeBlock(contents.join(lineFeed), now)
+  exit()
+
+  return add({type: 'blockquote', children: contents})
+}

pkg/interface/src/views/landscape/components/Graph/parse.ts

@@ -1,6 +1,14 @@
 import remark from 'remark';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
 import RemarkBreaks from 'remark-breaks';
+import ResumeParse from './resume';
+import newlines from './remark-break';
+
+export interface ParserSettings {
+  inList: boolean;
+  inBlock: boolean;
+  inLink: boolean;
+}
 
 const DISABLED_BLOCK_TOKENS = [
   'indentedCode',
@@ -28,8 +36,7 @@ const wideParser = remark()
         inline: DISABLED_INLINE_TOKENS,
       },
     ],
-    RemarkBreaks,
+    newlines
   ])
-  .freeze();
 
 export const parseWide = (text: string) => wideParser.parse(text);

pkg/interface/src/views/landscape/components/Graph/remark-break.ts

@@ -0,0 +1,24 @@
+import blockquote from './blockquote';
+
+function lineBreak(eat, value: string, silent) {
+  let index = -1;
+  let character: string | null;
+  while(++index < length ) {
+    character = value.charAt(index)
+    if(character === '\n') {
+      eat(character)({type : 'break' })
+    } else {
+      return;
+    }
+  }
+}
+
+lineBreak.locator = function(value, fromIndex) {
+  return value.indexOf('\n', fromIndex);
+}
+
+export default function plugin() {
+  this.Parser.prototype.blockTokenizers.break = lineBreak;
+  this.Parser.prototype.inlineTokenizers.break = lineBreak;
+  this.Parser.prototype.blockTokenizers.blockquote = blockquote;
+}

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

@@ -0,0 +1,10 @@
+
+export default function ResumeParse(settings) {
+  let parser = {};
+  function create() {
+    parser.current = this.Parser;
+    Object.assign(this.Parser, settings);
+  }
+
+  return [parser, create]
+}