WIP: eval using marked

shared/common-adapters/markdown/shared.tsx

@@ -2,10 +2,12 @@ import * as Styles from '../../styles'
 import * as React from 'react'
 import SimpleMarkdown from 'simple-markdown'
 import Text from '../text'
+import {Box2} from '../box'
 import logger from '../../logger'
 import type {Props as MarkdownProps} from '.'
 import {emojiIndexByChar, emojiRegex, commonTlds} from './emoji-gen'
 import {reactOutput, previewOutput, bigEmojiOutput, markdownStyles, serviceOnlyOutput} from './react'
+import TEMP from '../markdown2'
 
 const serviceBeginDecorationTag = '\\$\\>kb\\$'
 const serviceEndDecorationTag = '\\$\\<kb\\$'
@@ -277,6 +279,17 @@ class SimpleMarkdownComponent extends React.PureComponent<MarkdownProps, {hasErr
   }
 
   render() {
+    const old = this.renderOLD()
+
+    return (
+      <Box2 direction="vertical" fullWidth={true} style={{position: 'relative'}}>
+        {old}
+        <TEMP>{this.props.children}</TEMP>
+      </Box2>
+    )
+  }
+
+  renderOLD() {
     if (this.state.hasError) {
       return (
         <Text

shared/common-adapters/markdown2/index.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react'
+import * as Styles from '../../styles'
+import Text from '../text'
+import {marked} from 'marked'
+type Props = {
+  children: React.ReactNode
+}
+
+type Token = {type: string; raw: string; tokens?: Array<Token>; text: string}
+
+const parse = (tokens?: Array<Token>) => {
+  return (
+    tokens?.map(t => {
+      console.log('aaa', t)
+      switch (t.type) {
+        case 'paragraph':
+          return (
+            <Text type="Body" style={markdownStyles.textBlockStyle}>
+              {parse(t.tokens)}
+            </Text>
+          )
+        case 'text':
+          return t.raw
+        case 'em':
+          const bold = t.raw[0] === '*'
+          return (
+            <Text
+              type={bold ? 'BodySemibold' : 'Body'}
+              style={bold ? markdownStyles.boldStyle : markdownStyles.italicStyle}
+            >
+              {parse(t.tokens)}
+            </Text>
+          )
+        default:
+          return t.raw
+      }
+    }) ?? null
+  )
+}
+
+const Markdown2 = React.memo(function Markdown2(p: Props) {
+  const {children} = p
+  const tokens = marked.lexer(children, {gfm: true, mangle: false})
+  const debug = parse(tokens)
+  return (
+    <div
+      style={
+        {
+          /*position: 'absolute', left: 0, top: 0, right: 0, bottom: 0*/
+        }
+      }
+    >
+      {/* {JSON.stringify(tokens)} */}
+      {debug}
+    </div>
+  )
+})
+
+const markdownStyles = Styles.styleSheetCreate(() => {
+  const electronWrapStyle = {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  } as const
+  return {
+    bigTextBlockStyle: Styles.platformStyles({
+      isElectron: {
+        ...electronWrapStyle,
+        color: 'inherit',
+        display: 'block',
+        fontWeight: 'inherit',
+      },
+      isMobile: {
+        fontSize: 32,
+        lineHeight: 39.5, // matches 40 px height
+      },
+    } as const),
+    boldStyle: Styles.platformStyles({
+      common: {...Styles.globalStyles.fontBold},
+      isElectron: {color: 'inherit', ...electronWrapStyle},
+      isMobile: {color: undefined},
+    }),
+    get codeSnippetBlockStyle() {
+      return Styles.platformStyles({
+        common: {
+          ...this.codeSnippetStyle,
+          backgroundColor: Styles.globalColors.redLighter,
+          marginBottom: Styles.globalMargins.xtiny,
+          marginTop: Styles.globalMargins.xtiny,
+          paddingBottom: Styles.globalMargins.xtiny,
+          paddingLeft: Styles.globalMargins.tiny,
+          paddingRight: Styles.globalMargins.tiny,
+          paddingTop: Styles.globalMargins.xtiny,
+        },
+        isElectron: {
+          ...electronWrapStyle,
+          color: Styles.globalColors.black,
+          display: 'block',
+        },
+      })
+    },
+    codeSnippetBlockTextStyle: Styles.platformStyles({
+      isMobile: {
+        ...Styles.globalStyles.fontTerminal,
+        backgroundColor: Styles.globalColors.redLighter,
+        color: Styles.globalColors.black,
+        fontSize: 15,
+      },
+    }),
+    codeSnippetStyle: Styles.platformStyles({
+      common: {
+        ...Styles.globalStyles.fontTerminal,
+        ...Styles.globalStyles.rounded,
+        backgroundColor: Styles.globalColors.redLighter,
+        color: Styles.globalColors.blueDarkOrBlueLight,
+        paddingLeft: Styles.globalMargins.xtiny,
+        paddingRight: Styles.globalMargins.xtiny,
+      },
+      isElectron: {
+        ...electronWrapStyle,
+        fontSize: 12,
+      },
+      isMobile: {fontSize: 15},
+    }),
+    italicStyle: Styles.platformStyles({
+      common: {fontStyle: 'italic'},
+      isElectron: {color: 'inherit', fontWeight: 'inherit', ...electronWrapStyle},
+      isMobile: {color: undefined, fontWeight: undefined},
+    }),
+    linkStyle: Styles.platformStyles({
+      isElectron: {
+        ...electronWrapStyle,
+        fontWeight: 'inherit',
+      },
+      isMobile: {fontWeight: undefined},
+    }),
+    neutralPreviewStyle: Styles.platformStyles({
+      isElectron: {color: 'inherit', fontWeight: 'inherit'},
+      isMobile: {color: Styles.globalColors.black_50, fontWeight: undefined},
+    }),
+    quoteStyle: Styles.platformStyles({
+      common: {
+        borderLeftColor: Styles.globalColors.grey,
+        borderLeftWidth: 3,
+        borderStyle: 'solid',
+      },
+      isElectron: {
+        display: 'block',
+        paddingLeft: Styles.globalMargins.small,
+      },
+      isMobile: {
+        paddingLeft: Styles.globalMargins.tiny,
+      },
+    }),
+    strikeStyle: Styles.platformStyles({
+      isElectron: {
+        ...electronWrapStyle,
+        color: 'inherit',
+        fontWeight: 'inherit',
+        textDecoration: 'line-through',
+      } as const,
+      isMobile: {
+        fontWeight: undefined,
+        textDecorationLine: 'line-through',
+      },
+    }),
+    textBlockStyle: Styles.platformStyles({
+      isAndroid: {lineHeight: undefined},
+      isElectron: {color: 'inherit', display: 'block', fontWeight: 'inherit', ...electronWrapStyle},
+    } as const),
+    wrapStyle: Styles.platformStyles({isElectron: electronWrapStyle}),
+  } as const
+})
+
+export default Markdown2

shared/package.json

@@ -110,6 +110,7 @@
     "lottie-ios": "3.5.0",
     "lottie-react-native": "5.1.4",
     "lottie-web": "5.10.0",
+    "marked": "4.2.12",
     "memoize-one": "6.0.0",
     "menubar": "9.2.3",
     "mousetrap": "1.6.5",

shared/yarn.lock

@@ -7173,6 +7173,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@4.2.12:
+  version "4.2.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
+  integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"