GraphContent: fix blockquotes and newlines

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

@@ -234,7 +234,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>;
@@ -274,12 +274,11 @@ const renderers = {
     return (
       <Text
         lineHeight="tall"
-        display="block"
+        display="inline-block"
         borderLeft="1px solid"
         color="black"
         paddingLeft={2}
-        py={1}
+        my={1}
-        mb={1}
       >
         {children}
       </Text>
@@ -287,9 +286,9 @@ const renderers = {
   },
   paragraph: ({ children }) => {
     return (
-      <Text fontSize={1} lineHeight="tall">
+      <Box fontSize={1} lineHeight="tall">
         {children}
-      </Text>
+      </Box>
     );
   },
   listItem: ({ children }) => {

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',
@@ -15,9 +23,14 @@ const DISABLED_BLOCK_TOKENS = [
 
 const DISABLED_INLINE_TOKENS = ['autoLink', 'url', 'email', 'reference', 'html'];
 
-const tallParser = remark().freeze();
+const tallParser = remark();
 
-export const parseTall = (text: string) => tallParser.parse(text);
+export const parseTall = (text: string, settings: ParserSettings) => {
+  const res = tallParser.parse(text);
+  //const { inList, inBlock, inLink }  = parser.Parser;
+
+  return res;
+}
 
 const wideParser = remark()
   .use([
@@ -28,8 +41,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]
+}