diff options
| -rw-r--r-- | components/Sidebar/Link.tsx | 46 | ||||
| -rw-r--r-- | next.config.js | 3 | ||||
| -rw-r--r-- | org-roam-ui.el | 8 | ||||
| -rw-r--r-- | util/processOrg.tsx | 15 |
4 files changed, 58 insertions, 14 deletions
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx index 1211cb4..57fb723 100644 --- a/components/Sidebar/Link.tsx +++ b/components/Sidebar/Link.tsx @@ -47,6 +47,7 @@ export interface NormalLinkProps { import { hexToRGBA, getThemeColor } from '../../pages/index' import noteStyle from './noteStyle' +import { OrgImage } from './OrgImage' export const NormalLink = (props: NormalLinkProps) => { const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props @@ -66,6 +67,7 @@ export const NormalLink = (props: NormalLinkProps) => { color={highlightColor} textDecoration="underline" onClick={() => setPreviewNode(nodeById[uri])} + // TODO don't hardcode the opacitycolor _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }} _focus={{ outlineColor: highlightColor }} > @@ -86,8 +88,9 @@ export const PreviewLink = (props: LinkProps) => { } = props // TODO figure out how to properly type this // see https://github.com/rehypejs/rehype-react/issues/25 - const [orgText, setOrgText] = useState<any>() + const [orgText, setOrgText] = useState<any>(null) const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0] + const [hover, setHover] = useState(false) const getId = (type: string, uri: string) => { if (type === 'id') { @@ -108,6 +111,7 @@ export const PreviewLink = (props: LinkProps) => { } const id = getId(type, uri) + const file = encodeURIComponent(encodeURIComponent(nodeById[id]?.file as string)) const processor = unified() .use(uniorgParse) @@ -118,19 +122,24 @@ export const PreviewLink = (props: LinkProps) => { components: { // eslint-disable-next-line react/display-name a: ({ children, href }) => ( - <NormalLink + <PreviewLink + nodeByCite={nodeByCite} setSidebarHighlightedNode={setSidebarHighlightedNode} + href={href} nodeById={nodeById} - nodeByCite={nodeByCite} setPreviewNode={setPreviewNode} - {...{ children, href }} - /> + > + {nodeById[id as string]?.title} + </PreviewLink> ), + img: ({ src }) => { + return <OrgImage src={src as string} file={file} /> + }, }, }) - const file = encodeURIComponent(encodeURIComponent(nodeById[id]?.file as string)) const getText = () => { + console.log('gettin text') fetch(`http://localhost:35901/file/${file}`) .then((res) => { return res.text() @@ -148,15 +157,26 @@ export const PreviewLink = (props: LinkProps) => { }) } - useMemo(() => { + useEffect(() => { + if (!!orgText) { + return + } + if (!hover) { + return + } getText() - }, [id]) + }, [hover, orgText]) + if (id) { return ( <> <Popover gutter={12} trigger="hover" placement="top-start"> <PopoverTrigger> - <Box display="inline"> + <Box + display="inline" + onMouseEnter={() => setHover(true)} + onMouseLeave={() => setHover(false)} + > <NormalLink key={nodeById[id]?.title ?? id} {...{ @@ -176,8 +196,12 @@ export const PreviewLink = (props: LinkProps) => { boxShadow="xl" position="relative" zIndex="tooltip" - onMouseEnter={() => setSidebarHighlightedNode(nodeById[id] ?? {})} - onMouseLeave={() => setSidebarHighlightedNode({})} + onMouseEnter={() => { + setSidebarHighlightedNode(nodeById[id] ?? {}) + }} + onMouseLeave={() => { + setSidebarHighlightedNode({}) + }} > <PopoverArrow /> <PopoverBody diff --git a/next.config.js b/next.config.js index d6d2e0e..ef3578f 100644 --- a/next.config.js +++ b/next.config.js @@ -7,4 +7,7 @@ const withTM = require('next-transpile-modules')(d3packages) module.exports = withPlugins([withTM], { distDir: 'build', + images: { + domains: ['localhost'], + }, }) diff --git a/org-roam-ui.el b/org-roam-ui.el index e018b09..8726a76 100644 --- a/org-roam-ui.el +++ b/org-roam-ui.el @@ -236,10 +236,16 @@ This serves the web-build and API over HTTP." (websocket-send-text ws (json-encode `((type . "orgText") (data . ,text)))))) -(defservlet* note/:id text/plain () +(defservlet* file/:file text/plain () (progn (insert-file-contents-literally (org-link-decode file)) (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*"))) + + +(defservlet* img/:file text/plain () + (progn + (httpd-send-file t (org-link-decode file)) +(httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*"))) ;(insert "error") ;(httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*") diff --git a/util/processOrg.tsx b/util/processOrg.tsx index a025645..3f32d30 100644 --- a/util/processOrg.tsx +++ b/util/processOrg.tsx @@ -15,6 +15,7 @@ import rehype2react from 'rehype-react' import { PreviewLink } from '../components/Sidebar/Link' import { NodeByCite, NodeById } from '../pages' import React, { useMemo } from 'react' +import { OrgImage } from '../components/Sidebar/OrgImage' export interface ProcessedOrgProps { nodeById: NodeById @@ -26,7 +27,14 @@ export interface ProcessedOrgProps { } export const ProcessedOrg = (props: ProcessedOrgProps) => { - const { nodeById, setSidebarHighlightedNode, setPreviewNode, previewText, nodeByCite } = props + const { + nodeById, + setSidebarHighlightedNode, + setPreviewNode, + previewText, + nodeByCite, + previewNode, + } = props const processor = unified() .use(uniorgParse) @@ -48,10 +56,13 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => { nodeById={nodeById} setPreviewNode={setPreviewNode} > - {typeof children === 'string' ? children : null} + {children} </PreviewLink> ) }, + img: ({ src }) => { + return <OrgImage src={src as string} file={previewNode.file} /> + }, }, }) |