diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-07 01:42:14 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-10-07 01:42:14 +0200 |
commit | fd4edbd6a854275c10c5b21173f0875921d547d1 (patch) | |
tree | ae25a9a95609636be0fadf79f70f4ef8eb01b4b5 /util | |
parent | 33839479e269bed905f9eefc374060b9d3ee7e19 (diff) |
feat(preview): hover links + ui upgrade
Diffstat (limited to 'util')
-rw-r--r-- | util/processOrg.tsx | 46 | ||||
-rw-r--r-- | util/uniorg.tsx | 44 |
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, + }} + /> + ) } |