Revert "Revert "support org-html""

ikoamu · web-flow · commit 009e0f8b1d65 · 2024-06-22T16:28:02.000+09:00
diff --git a/components/Search/SearchContent.tsx b/components/Search/SearchContent.tsx
@@ -64,7 +64,7 @@ export const SearchContent: React.FC<{
           autoHeight={true}
           autoHide={true}
           autoHeightMax={500}
-          renderThumbVertical={({ style, ...props }) => (
+          renderThumbVertical={({ style, ...props }: { style: React.CSSProperties }) => (
             <Box
               style={{
                 ...style,
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
@@ -270,7 +270,7 @@ export const PreviewLink = (props: LinkProps) => {
                   autoHeight
                   autoHeightMax={300}
                   autoHide
-                  renderThumbVertical={({ style, ...props }) => (
+                  renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
                     <Box
                       style={{
                         ...style,
diff --git a/components/Sidebar/OrgImage.tsx b/components/Sidebar/OrgImage.tsx
@@ -5,24 +5,34 @@ import path from 'path'
 import { Container } from '@chakra-ui/react'
 //import '../../../public/placeholder.png'
 
+const convertToNextImageAttr = (value: string | number | undefined): number | undefined => {
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typeof value === 'number' || !isNaN(Number(value))) {
+    return Number(value)
+  }
+
+  if (value.endsWith('px')) {
+    return Number(value.replace('px', ''))
+  }
+
+  return undefined
+}
+
 export interface OrgImageProps {
-  src: string
+  org: React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement>
   file: string
 }
 
 export const OrgImage = (props: OrgImageProps) => {
-  const { src, file } = props
-
-  // const [image, setImage] = useState<any>(null)
+  const { org, file } = props
+  const { src, ...attr } = org
 
-  /* )
-*   .then((res) => res.blob())
-*   .then((res) => setImage(res))
-*   .catch((e) => {
-*     setImage(null)
-*     console.error(e)
-*   })
-}, [fullPath]) */
+  if (!src) {
+    return null
+  }
 
   const dumbLoader = ({ src, width, quality }: { [key: string]: string | number }) => {
     return `${src}`
@@ -31,17 +41,38 @@ export const OrgImage = (props: OrgImageProps) => {
     return `img/${src}`
   }
 
-  if (src.startsWith("file:")) {
+  if (src?.startsWith("file:")) {
     const srcName = src.replace(/file:/g, './')
+    const attrWidth = convertToNextImageAttr(attr.width)
+    const attrHeight = convertToNextImageAttr(attr.height)
+    const layout = attrWidth || attrHeight ? undefined : "responsive"
     return (
-      <Image layout="responsive" loader={dumbLoader} src={srcName} alt="" />
+      <Image
+        {...attr}
+        layout={layout}
+        loader={dumbLoader}
+        src={srcName}
+        width={attrWidth}
+        height={attrHeight}
+        alt={attr.alt ?? "Wow, an image."}
+      />
     )
   }
 
   if (/(http)?.*/g.test(src.replace(/(http)?.*/g, '$1'))) {
-    console.log(src.replace(/(http)?.*/g, '$1'))
+    const attrWidth = convertToNextImageAttr(attr.width)
+    const attrHeight = convertToNextImageAttr(attr.height)
+    const layout = attrWidth || attrHeight ? undefined : "responsive"
     return (
-      <Image layout="responsive" loader={dumbLoader} src={src} alt="" />
+      <Image
+        {...attr}
+        layout={layout}
+        loader={dumbLoader}
+        src={src}
+        width={attrWidth}
+        height={attrHeight}
+        alt={attr.alt ?? "Wow, an image."}
+      />
     )
   }
 
@@ -51,10 +82,10 @@ export const OrgImage = (props: OrgImageProps) => {
   const fullPath =
     path.isAbsolute(srcName) || srcName.slice(0, 1) === '~' ? srcName : path.join(dir, srcName)
   const encodedPath = encodeURIComponent(encodeURIComponent(fullPath))
-
+  console.log(srcName, " is ", "local")
   return (
     <Container my={4} position="relative">
-      <img alt="Wow, an image." src={fullPath} />
+      <img {...attr} alt={attr.alt ?? "Wow, an image."} src={fullPath} />
     </Container>
   )
 }
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
@@ -193,7 +193,7 @@ const Sidebar = (props: SidebarProps) => {
             //autoHeight
             //autoHeightMax={600}
             autoHide
-            renderThumbVertical={({ style, ...props }) => (
+            renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
               <Box
                 style={{
                   ...style,
diff --git a/components/Tweaks/DropDownMenu.tsx b/components/Tweaks/DropDownMenu.tsx
@@ -18,9 +18,9 @@ export const DropDownMenu = (props: DropDownMenuProps) => {
       <Portal>
         {' '}
         <MenuList zIndex="popover">
-          {textArray.map((option, i) => {
-            ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem>
-          })}
+          {textArray.map((option, i) => (
+            <MenuItem key={i} onClick={onClickArray[i]}> {option} </MenuItem>
+          ))}
         </MenuList>
       </Portal>
     </Menu>
diff --git a/components/Tweaks/Visual/ColorMenu.tsx b/components/Tweaks/Visual/ColorMenu.tsx
@@ -29,7 +29,7 @@ export const ColorMenu = (props: ColorMenuProps) => {
   const { label, colorList, value, visValue, setVisuals, noEmpty } = props
 
   const clickCallback = useCallback(
-    (color) =>
+    (color: any) =>
       setVisuals((curr: typeof initialVisuals) => {
         return {
           ...curr,
diff --git a/components/Tweaks/Visual/ThemeSelect.tsx b/components/Tweaks/Visual/ThemeSelect.tsx
@@ -29,7 +29,7 @@ export const ThemeSelect = () => {
           color="black"
           rightIcon={<ChevronDownIcon />}
         >
-          {emacsTheme[0]}
+          {String(emacsTheme[0])}
         </MenuButton>
         <MenuList minW={10} zIndex="popover" bgColor="gray.200">
           <MenuItem
diff --git a/components/Tweaks/Visual/VisualsPanel.tsx b/components/Tweaks/Visual/VisualsPanel.tsx
@@ -45,7 +45,7 @@ export const VisualsPanel = (props: VisualsPanelProps) => {
     setHighlightColor,
     threeDim,
   } = props
-  const setVisualsCallback = useCallback((val) => setVisuals(val), [])
+  const setVisualsCallback = useCallback((val: any) => setVisuals(val), [])
   return (
     <VStack justifyContent="flex-start" align="stretch">
       <ThemeSelect />
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
@@ -155,7 +155,7 @@ export const Tweaks = (props: TweakProps) => {
         autoHeight
         autoHeightMax={0.85 * globalThis.innerHeight}
         autoHide
-        renderThumbVertical={({ style, ...props }) => (
+        renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
           <Box
             {...props}
             style={{
diff --git a/package.json b/package.json
@@ -46,10 +46,10 @@
     "react-resizable": "^3.0.4",
     "react-spring": "^9.2.4",
     "reconnecting-websocket": "^4.4.0",
-    "rehype": "^11.0.0",
+    "rehype": "^13.0.0",
     "rehype-highlight": "^4.1.0",
-    "rehype-katex": "^5.0.0",
-    "rehype-react": "^6.2.1",
+    "rehype-katex": "^7.0.0",
+    "rehype-react": "^8.0.0",
     "remark-extract-frontmatter": "^3.2.0",
     "remark-frontmatter": "^3.0.0",
     "remark-gfm": "^1.0.0",
@@ -64,12 +64,12 @@
     "three-spritetext": "^1.6.2",
     "through": "^2.3.8",
     "to-vfile": "^6.1.0",
-    "unified": "^9.2.2",
-    "uniorg": "^0.4.0",
+    "unified": "^11.0.4",
+    "uniorg": "^1.1.1",
     "uniorg-attach": "^0.4.5",
     "uniorg-extract-keywords": "^0.4.5",
-    "uniorg-parse": "^0.4.5",
-    "uniorg-rehype": "^0.4.8",
+    "uniorg-parse": "^2.1.1",
+    "uniorg-rehype": "^1.1.1",
     "uniorg-slug": "^0.4.8",
     "unist-util-find-after": "^3.0.0",
     "unist-util-is": "^4.1.0",
@@ -83,7 +83,8 @@
     "@types/d3-interpolate": "^3.0.1",
     "@types/mapbox__rehype-prism": "^0.8.3",
     "@types/node": "20.12.11",
-    "@types/react": "17.0.14",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "eslint": "7.31.0",
     "eslint-config-next": "^14.2.3",
     "next-compose-plugins": "^2.2.1",
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
@@ -1,4 +1,4 @@
-import unified from 'unified'
+import { unified } from 'unified'
 //import createStream from 'unified-stream'
 import uniorgParse from 'uniorg-parse'
 import uniorg2rehype from 'uniorg-rehype'
@@ -28,7 +28,7 @@ import remarkRehype from 'remark-rehype'
 
 import { PreviewLink } from '../components/Sidebar/Link'
 import { LinksByNodeId, NodeByCite, NodeById } from '../pages'
-import React, { createContext, ReactNode, useMemo } from 'react'
+import React, { createContext, ReactNode, useEffect, useMemo, useState } from 'react'
 import { OrgImage } from '../components/Sidebar/OrgImage'
 import { Section } from '../components/Sidebar/Section'
 import { NoteContext } from './NoteContext'
@@ -38,6 +38,7 @@ import { OrgRoamLink, OrgRoamNode } from '../api'
 import { toString } from 'hast-util-to-string'
 import { Box, chakra } from '@chakra-ui/react'
 import { normalizeLinkEnds } from './normalizeLinkEnds'
+import * as prod from 'react/jsx-runtime'
 
 export interface ProcessedOrgProps {
   nodeById: NodeById
@@ -72,13 +73,8 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
     useInheritance,
   } = props
 
-  if (!previewNode || !linksByNodeId) {
-    return null
-  }
-
   const orgProcessor = unified()
     .use(uniorgParse)
-    .data('settings', { fragment: true })
     .use(extractKeywords)
     .use(attachments, {
       idDir: attachDir || undefined,
@@ -127,11 +123,11 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
   // .use(highlight)
 
   const isMarkdown = previewNode?.file?.slice(-3) === '.md'
-  const baseProcessor = isMarkdown ? mdProcessor : orgProcessor
+  // const baseProcessor = isMarkdown ? mdProcessor : orgProcessor
 
   const processor = useMemo(
     () =>
-      baseProcessor
+      orgProcessor
         .use(katex, {
           trust: (context) => ['\\htmlId', '\\href'].includes(context.command),
           macros: {
@@ -142,9 +138,12 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
             ...macros,
           },
         })
+        // @ts-ignore
         .use(rehype2react, {
+          Fragment: prod.Fragment,
+          jsx: prod.jsx,
+          jsxs: prod.jsxs,
           createElement: React.createElement,
-          // eslint-disable-next-line react/display-name
           components: {
             a: ({ children, href }) => {
               return (
@@ -167,8 +166,8 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
                 </PreviewLink>
               )
             },
-            img: ({ src }) => {
-              return <OrgImage src={src as string} file={previewNode?.file} />
+            img: (org) => {
+              return <OrgImage org={org} file={previewNode?.file} />
             },
             section: ({ children, className }) => {
               if (className && (className as string).slice(-1) === `${previewNode.level}`) {
@@ -220,6 +219,10 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
   )
 
   const text = useMemo(() => processor.processSync(previewText).result, [previewText])
+  if (!previewNode || !linksByNodeId) {
+    return null
+  }
+
   return (
     <NoteContext.Provider value={{ collapse, outline }}>{text as ReactNode}</NoteContext.Provider>
   )
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export const ThemeSelect = () => {`
`29`	`29`	`color="black"`
`30`	`30`	`rightIcon={<ChevronDownIcon />}`
`31`	`31`	`>`
`32`		`- {emacsTheme[0]}`
	`32`	`+ {String(emacsTheme[0])}`
`33`	`33`	`</MenuButton>`
`34`	`34`	`<MenuList minW={10} zIndex="popover" bgColor="gray.200">`
`35`	`35`	`<MenuItem`