todo build own remark pkg (markedjs/marked#2843 (comment))

nominalrune · Aug 25, 2024 · c61e5c6 · c61e5c6 · expo · Aug 25, 2024
1 parent 9287ffa
commit c61e5c6
Show file tree

Hide file tree

Showing 15 changed files with 16,512 additions and 10,302 deletions.
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -1,7 +1,10 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    // presets: ['babel-preset-expo'],
-    plugins: ["nativewind/babel"],
+    presets: ['babel-preset-expo'],
+    plugins: [
+      "nativewind/babel",
+      "@babel/plugin-transform-unicode-escapes"
+    ],
   };
 };
diff --git a/components/MarkdownEdit/Blockquote.tsx b/components/MarkdownEdit/Blockquote.tsx
@@ -1,11 +1,14 @@
-import { Blockquote as BlockquoteType } from "mdast";
+// import { Blockquote as BlockquoteType } from "mdast";
 import { Text, View } from 'react-native';
 import FlowContent from './FlowContent';
 import WithText from '../../types/WithText';
-export default function Blockquote({ node }: { node: WithText<BlockquoteType>; 
+import { Token, Tokens } from 'marked';
+export default function Blockquote({ node }: {
+	 node: Tokens.Blockquote; 
 	prefix?: string;}) {
 	return <Text>
-			{node.children.map((item, i) => <FlowContent key={i} node={item as FlowContentType} />)}
+		<Text className='text-slate-400/80 font-extrabold'>{`> `}</Text> 
+			{node.tokens.map((item, i) => <FlowContent key={i} node={item as Token} />)}
 		{'\n'}
 	</Text>;
 }
diff --git a/components/MarkdownEdit/Code.tsx b/components/MarkdownEdit/Code.tsx
@@ -1,10 +1,11 @@
 import { Code as CodeType } from "mdast";
 import { Text, useColorScheme, View } from 'react-native';
 import WithText from '../../types/WithText';
-export default function Code({ node}: { node: WithText<CodeType>; }) {
+import { Tokens } from 'marked';
+export default function Code({ node}: { node: Tokens.Code; }) {
 	const colorScheme = useColorScheme();
 	const isLight = colorScheme === 'light';
 	return <Text className={(isLight ? 'bg-slate-100' : 'bg-slate-700') + ' rounded p-2'}>
-			{node.value}
+			{node.raw}
 		</Text>;
 }
diff --git a/components/MarkdownEdit/FlowContent.tsx b/components/MarkdownEdit/FlowContent.tsx
@@ -13,9 +13,11 @@ import Table from './Table';
 import { Text, View } from 'react-native';
 import WithText from '../../types/WithText';
 import FlowContentType from '../../types/FlowContentType';
+import { Token } from 'marked';
 
 interface Prop {
-	node: FlowContentType;
+	// node: FlowContentType;
+	node:Token
 	prefix?:string
 }
 export default function FlowContent({ node, prefix }: Prop) {
@@ -35,6 +37,6 @@ export default function FlowContent({ node, prefix }: Prop) {
 		case 'table':
 			return <Table node={node} />;
 		default:
-			return <Text>{node.text}</Text>;
+			return <Text>{node.raw}</Text>;
 	}
 }
diff --git a/components/MarkdownEdit/Heading.tsx b/components/MarkdownEdit/Heading.tsx
@@ -3,9 +3,10 @@ import { Text, View } from 'react-native';
 import PhrasingContent from './PhrasingContent';
 import WithText from '../../types/WithText';
 import PhrasingContentType from '../../types/PhrasingContentType';
+import { Tokens } from 'marked';
 
-export default function Heading({ node }: { node: WithText<HeadingType>; }) {
-	const match = node.text.match(/^([ \t]*#+ )?(.*?)$/);
+export default function Heading({ node }: { node: Tokens.Heading; }) {
+	const match = node.raw.match(/^([ \t]*#+ )?(.*?)$/);
 	const mark = match?.[1] ?? '';
 	const rest = match?.[2] ?? '';
 	return <Text className={`${node.depth === 1 ? 'text-2xl' : node.depth === 2 ? "text-xl" : "text-lg"}`}>

diff --git a/components/MarkdownEdit/Html.tsx b/components/MarkdownEdit/Html.tsx
@@ -1,7 +1,8 @@
+import { Tokens } from 'marked';
 import { Html as HtmlType } from "mdast";
 import { Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
-export default function Html({ node }: { node: HtmlType;
+export default function Html({ node }: { node: Tokens.HTML|Tokens.Tag;
 	prefix?: string; }) {
-	return <Text>{node.value}\n</Text>;
+	return <Text>{node.raw}\n</Text>;
 }
diff --git a/components/MarkdownEdit/List.tsx b/components/MarkdownEdit/List.tsx
@@ -4,46 +4,53 @@ import { FlatList, Text, View } from 'react-native';
 import Paragraph from './Paragraph';
 import { useState } from 'react';
 import WithText from '../../types/WithText';
-export default function List({ node, prefix }: { node: WithText<ListType>; prefix?: string; }) {
+import { Tokens } from 'marked';
+export default function List({ node, prefix }: { node: Tokens.List; prefix?: string; }) {
 	// return <Text>{node.text}</Text>
 	return <Text className="flex flex-col justify-start">
 		{
-			node.children.map((item, i) => <ListItem key={i} node={item} prefix={prefix} />)
+			node.items.map((item, i) => <ListItem key={i} node={item} prefix={prefix} />)
 		}
 	</Text>;
 }
 
-function ListItem({ node, prefix: _prefix = '' }: { node: WithText<ListItemType>; prefix?: string; }) {
+function ListItem({ node, prefix: _prefix = '' }: { node: Tokens.ListItem; prefix?: string; }) {
 	const matchReg = /^([ \t]*)((?:[\-\*]|(?:\d+.)) )?(\[[x ]\] )?(.*)(?:¥n(.*?))?$/s;
-	const match = node.text.match(matchReg);
+	const match = node.raw.match(matchReg);
 	const prefix = match?.[1] ?? '';
 	const mark = match?.[2] ?? '';
 	const checkmark = match?.[3] ?? '';
 	const rest = match?.[4] ?? "";
 	const nextPrefix = (match?.[5] ?? "").match(matchReg)?.[1]??'';
-	const children = [...node.children];
+	const children = [...node.tokens];
 	const paragraph = children.shift();
 	const itemText = paragraph?.type==='paragraph' ? <Paragraph node={paragraph} /> : <Text>{`\n`}</Text>;
 	// return <Text>{node.text}{`\n`}</Text>
 	// console.log('LISTITEM: text:' + node.text, '_prefix|' + _prefix + '|', 'prefix|' + prefix + '|');
 	return <>
 		<Text className='text-slate-400/80 font-extrabold'>
 			{_prefix}
-			{prefix}
+			{/* {prefix} */}
 			{mark}
-			{node.checked !== null && (checkmark === '[x] '
+			{node.task && (node.checked
 				? <>[<Text className='text-green-600'>x</Text>] </>
 				: <>{checkmark}</>
 			)}
 		</Text>
-		{itemText}
+		{node.text}
+		{/* {itemText} */}
 		{/* {(match?.[5] ?? "")} */}
 		{
+			node.tokens.map((item, i) => <Text key={i}>
+					<FlowContent node={item} prefix={_prefix + prefix+ '  '} />
+				</Text>)
+		}
+		{/* {
 			!!children.length
 				? children.map((item, i) => <Text key={i}>
 					<FlowContent node={item} prefix={_prefix + prefix+ '  '} />
 				</Text>)
 				: <></>
-		}
+		} */}
 	</>;
 }
diff --git a/components/MarkdownEdit/Paragraph.tsx b/components/MarkdownEdit/Paragraph.tsx
@@ -3,12 +3,13 @@ import { Text, View } from 'react-native';
 import PhrasingContent from './PhrasingContent';
 import { Fragment } from 'react';
 import WithText from '../../types/WithText';
+import { Tokens } from 'marked';
 export default function Paragraph({ node, prefix='' }: {
-	node: WithText<ParagraphType>;
+	node: Tokens.Paragraph;
 	prefix?:string;
 }) {
 	return <Text>{
-		node.children.map((child,i) => <Fragment key={i}>
+		node.tokens.map((child,i) => <Fragment key={i}>
 			<Text>{prefix}</Text>
 			<PhrasingContent node={child} />
 		</Fragment>)

diff --git a/components/MarkdownEdit/PhrasingContent.tsx b/components/MarkdownEdit/PhrasingContent.tsx
@@ -9,18 +9,19 @@ import Link from './Link';
 import InlineCode from './InlineCode';
 import WithText from '../../types/WithText';
 import PhrasingContentType from '../../types/PhrasingContentType';
+import { MarkedToken, Token } from 'marked';
 
 interface Prop {
-	node: PhrasingContentType;
+	node: MarkedToken;
 }
 export default function PhrasingContent({ node }: Prop) {
 	// return <Text>{node.text}</Text>;
 	switch (node.type) {
-		case 'break':
-			return <Text area-type={node.type}>{node.text}</Text>;
-		case 'delete': // TODO
-			return <Text>~~{node.children.map(item => <PhrasingContent node={item as PhrasingContentType} />)}~~</Text>;
-		case 'emphasis':
+		// case 'break':
+		// 	return <Text area-type={node.type}>{node.text}</Text>;
+		// case 'delete': // TODO
+		// 	return <Text>~~{node.tokens.map(item => <PhrasingContent node={item as PhrasingContentType} />)}~~</Text>;
+		case 'em':
 		case 'strong':
 			return <Text><Strong node={node} /></Text>;
 		case 'html':
@@ -29,8 +30,8 @@ export default function PhrasingContent({ node }: Prop) {
 			return <Image node={node} />;
 		case 'link':
 			return <Link node={node} />;
-		case 'inlineCode':
-			return <InlineCode node={node} />;
+		// case 'inlineCode':
+		// 	return <InlineCode node={node} />;
 		case 'text':
 			return <Text>{node.text}</Text>;
 		default:

diff --git a/components/MarkdownEdit/Root.tsx b/components/MarkdownEdit/Root.tsx
@@ -1,4 +1,4 @@
-import { Root as RootType } from "mdast";
+// import { Root as RootType } from "mdast";
 import { NativeSyntheticEvent, ScrollView, Text, TextInput, TextInputChangeEventData, TextInputKeyPressEventData, View } from 'react-native';
 import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import Parser from '../../services/Markdown/Parser';
@@ -54,7 +54,7 @@ export default function Root({ content, update, setSelection }:Prop ) {
 			onSelectionChange={handleSelectionChange}
 			onKeyPress={handlePressed}
 		>
-			{contentNode.children?.map((node, i) => <FlowContent key={i} node={node} />)}
+			{contentNode?.map((node, i) => <FlowContent key={i} node={node} />)}
 		</TextInput>
 	</View>;
 }
diff --git a/components/MarkdownEdit/Strong.tsx b/components/MarkdownEdit/Strong.tsx
@@ -3,7 +3,8 @@ import { Text, View } from 'react-native';
 import PhrasingContent from './PhrasingContent';
 import WithText from '../../types/WithText';
 import PhrasingContentType from '../../types/PhrasingContentType';
-export default function Strong({ node }: { node: WithText<StrongType> | WithText<Emphasis>; }) {
+import { Tokens } from 'marked';
+export default function Strong({ node }: { node: Tokens.Em | Tokens.Strong; }) {
 	// return <Text className='font-semibold'>{node.text}</Text>
 	const match = node.text.match(/((?:\*\*)|(?:__)).*?((?:\*\*)|(?:__))/);
 	const prefix = match?.[1] ?? '';