summaryrefslogtreecommitdiff
path: root/util
diff options
context:
space:
mode:
Diffstat (limited to 'util')
-rw-r--r--util/processOrg.tsx46
-rw-r--r--util/uniorg.tsx44
2 files changed, 73 insertions, 17 deletions
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
new file mode 100644
index 0000000..df6007e
--- /dev/null
+++ b/util/processOrg.tsx
@@ -0,0 +1,46 @@
+import unified from 'unified'
+//import createStream from 'unified-stream'
+import uniorgParse from 'uniorg-parse'
+import uniorg2rehype from 'uniorg-rehype'
+//import highlight from 'rehype-highlight'
+import katex from 'rehype-katex'
+import 'katex/dist/katex.css'
+import rehype2react from 'rehype-react'
+
+import { PreviewLink } from '../components/Sidebar/Link'
+import { NodeById } from '../pages'
+import React from 'react'
+
+export interface ProcessedOrgProps {
+ nodeById: NodeById
+ previewNode: any
+ setPreviewNode: any
+ getText: any
+ previewText: any
+}
+
+export const ProcessedOrg = (props: ProcessedOrgProps) => {
+ const { nodeById, previewNode, setPreviewNode, getText, previewText } = props
+ console.log(previewText)
+ const processor = unified()
+ .use(uniorgParse)
+ .use(uniorg2rehype)
+ .use(katex)
+ .use(rehype2react, {
+ createElement: React.createElement,
+ // eslint-disable-next-line react/display-name
+ components: {
+ a: ({ props, children, href }) => (
+ <PreviewLink
+ getText={getText}
+ nodeById={nodeById}
+ previewNode={previewNode}
+ setPreviewNode={setPreviewNode}
+ {...{ children, href }}
+ />
+ ),
+ },
+ })
+
+ return <div>{processor.processSync(previewText).result}</div>
+}
diff --git a/util/uniorg.tsx b/util/uniorg.tsx
index 3304a32..e35a021 100644
--- a/util/uniorg.tsx
+++ b/util/uniorg.tsx
@@ -1,24 +1,34 @@
-import unified from 'unified'
-//import createStream from 'unified-stream'
-import uniorgParse from 'uniorg-parse'
-import uniorg2rehype from 'uniorg-rehype'
-//import highlight from 'rehype-highlight'
-import katex from 'rehype-katex'
-import rehype2react from 'rehype-react'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { NodeById } from '../pages/index'
+import { ProcessedOrg } from './processOrg'
export interface UniOrgProps {
- orgText: string
+ nodeById: NodeById
+ previewNode: any
+ setPreviewNode: any
+ getText: any
}
export const UniOrg = (props: UniOrgProps) => {
- const { orgText } = props
- const processor = unified()
- .use(uniorgParse)
- .use(uniorg2rehype)
- .use(katex)
- .use(rehype2react, { createElement: React.createElement })
+ const { nodeById, previewNode, setPreviewNode, getText } = props
- console.log(processor.processSync(orgText))
- return <div> {processor.processSync(orgText).result}</div>
+ const [previewText, setPreviewText] = useState('')
+
+ useEffect(() => {
+ if (previewNode?.id) {
+ getText(previewNode?.id, setPreviewText)
+ }
+ }, [previewNode?.id])
+
+ return (
+ <ProcessedOrg
+ {...{
+ getText,
+ nodeById,
+ previewNode,
+ setPreviewNode,
+ previewText,
+ }}
+ />
+ )
}