Merge pull request #10 from ikoamu/revert-9-support-html-attr

Revert "support org-html"

Author: ikoamu

components/Search/SearchContent.tsx

@@ -64,7 +64,7 @@ export const SearchContent: React.FC<{
           autoHeight={true}
           autoHide={true}
           autoHeightMax={500}
-          renderThumbVertical={({ style, ...props }: { style: React.CSSProperties }) => (
+          renderThumbVertical={({ style, ...props }) => (
             <Box
               style={{
                 ...style,

components/Sidebar/Link.tsx

@@ -270,7 +270,7 @@ export const PreviewLink = (props: LinkProps) => {
                   autoHeight
                   autoHeightMax={300}
                   autoHide
-                  renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
+                  renderThumbVertical={({ style, ...props }) => (
                     <Box
                       style={{
                         ...style,

components/Sidebar/OrgImage.tsx

@@ -5,34 +5,24 @@ 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 {
-  org: React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement>
+  src: string
   file: string
 }
 
 export const OrgImage = (props: OrgImageProps) => {
-  const { org, file } = props
-  const { src, ...attr } = org
+  const { src, file } = props
 
-  if (!src) {
-    return null
-  }
+  // const [image, setImage] = useState<any>(null)
+
+  /* )
+*   .then((res) => res.blob())
+*   .then((res) => setImage(res))
+*   .catch((e) => {
+*     setImage(null)
+*     console.error(e)
+*   })
+}, [fullPath]) */
 
   const dumbLoader = ({ src, width, quality }: { [key: string]: string | number }) => {
     return `${src}`
@@ -41,38 +31,17 @@ 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
-        {...attr}
-        layout={layout}
-        loader={dumbLoader}
-        src={srcName}
-        width={attrWidth}
-        height={attrHeight}
-        alt={attr.alt ?? "Wow, an image."}
-      />
+      <Image layout="responsive" loader={dumbLoader} src={srcName} alt="" />
     )
   }
 
   if (/(http)?.*/g.test(src.replace(/(http)?.*/g, '$1'))) {
-    const attrWidth = convertToNextImageAttr(attr.width)
-    const attrHeight = convertToNextImageAttr(attr.height)
-    const layout = attrWidth || attrHeight ? undefined : "responsive"
+    console.log(src.replace(/(http)?.*/g, '$1'))
     return (
-      <Image
-        {...attr}
-        layout={layout}
-        loader={dumbLoader}
-        src={src}
-        width={attrWidth}
-        height={attrHeight}
-        alt={attr.alt ?? "Wow, an image."}
-      />
+      <Image layout="responsive" loader={dumbLoader} src={src} alt="" />
     )
   }
 
@@ -82,10 +51,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 {...attr} alt={attr.alt ?? "Wow, an image."} src={fullPath} />
+      <img alt="Wow, an image." src={fullPath} />
     </Container>
   )
 }

components/Sidebar/index.tsx

@@ -193,7 +193,7 @@ const Sidebar = (props: SidebarProps) => {
             //autoHeight
             //autoHeightMax={600}
             autoHide
-            renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
+            renderThumbVertical={({ style, ...props }) => (
               <Box
                 style={{
                   ...style,

components/Tweaks/DropDownMenu.tsx

@@ -18,9 +18,9 @@ export const DropDownMenu = (props: DropDownMenuProps) => {
       <Portal>
         {' '}
         <MenuList zIndex="popover">
-          {textArray.map((option, i) => (
-            <MenuItem key={i} onClick={onClickArray[i]}> {option} </MenuItem>
-          ))}
+          {textArray.map((option, i) => {
+            ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem>
+          })}
         </MenuList>
       </Portal>
     </Menu>

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: any) =>
+    (color) =>
       setVisuals((curr: typeof initialVisuals) => {
         return {
           ...curr,

components/Tweaks/Visual/ThemeSelect.tsx

@@ -29,7 +29,7 @@ export const ThemeSelect = () => {
           color="black"
           rightIcon={<ChevronDownIcon />}
         >
-          {String(emacsTheme[0])}
+          {emacsTheme[0]}
         </MenuButton>
         <MenuList minW={10} zIndex="popover" bgColor="gray.200">
           <MenuItem

components/Tweaks/Visual/VisualsPanel.tsx

@@ -45,7 +45,7 @@ export const VisualsPanel = (props: VisualsPanelProps) => {
     setHighlightColor,
     threeDim,
   } = props
-  const setVisualsCallback = useCallback((val: any) => setVisuals(val), [])
+  const setVisualsCallback = useCallback((val) => setVisuals(val), [])
   return (
     <VStack justifyContent="flex-start" align="stretch">
       <ThemeSelect />

components/Tweaks/index.tsx

@@ -155,7 +155,7 @@ export const Tweaks = (props: TweakProps) => {
         autoHeight
         autoHeightMax={0.85 * globalThis.innerHeight}
         autoHide
-        renderThumbVertical={({ style, ...props }: { style: any, [key: string]: any }) => (
+        renderThumbVertical={({ style, ...props }) => (
           <Box
             {...props}
             style={{

package.json

@@ -46,10 +46,10 @@
     "react-resizable": "^3.0.4",
     "react-spring": "^9.2.4",
     "reconnecting-websocket": "^4.4.0",
-    "rehype": "^13.0.0",
+    "rehype": "^11.0.0",
     "rehype-highlight": "^4.1.0",
-    "rehype-katex": "^7.0.0",
-    "rehype-react": "^8.0.0",
+    "rehype-katex": "^5.0.0",
+    "rehype-react": "^6.2.1",
     "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": "^11.0.4",
-    "uniorg": "^1.1.1",
+    "unified": "^9.2.2",
+    "uniorg": "^0.4.0",
     "uniorg-attach": "^0.4.5",
     "uniorg-extract-keywords": "^0.4.5",
-    "uniorg-parse": "^2.1.1",
-    "uniorg-rehype": "^1.1.1",
+    "uniorg-parse": "^0.4.5",
+    "uniorg-rehype": "^0.4.8",
     "uniorg-slug": "^0.4.8",
     "unist-util-find-after": "^3.0.0",
     "unist-util-is": "^4.1.0",
@@ -83,8 +83,7 @@
     "@types/d3-interpolate": "^3.0.1",
     "@types/mapbox__rehype-prism": "^0.8.3",
     "@types/node": "20.12.11",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "17.0.14",
     "eslint": "7.31.0",
     "eslint-config-next": "^14.2.3",
     "next-compose-plugins": "^2.2.1",

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, useEffect, useMemo, useState } from 'react'
+import React, { createContext, ReactNode, useMemo } from 'react'
 import { OrgImage } from '../components/Sidebar/OrgImage'
 import { Section } from '../components/Sidebar/Section'
 import { NoteContext } from './NoteContext'
@@ -38,7 +38,6 @@ 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
@@ -73,8 +72,13 @@ 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,
@@ -123,11 +127,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(
     () =>
-      orgProcessor
+      baseProcessor
         .use(katex, {
           trust: (context) => ['\\htmlId', '\\href'].includes(context.command),
           macros: {
@@ -138,12 +142,9 @@ 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 (
@@ -166,8 +167,8 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
                 </PreviewLink>
               )
             },
-            img: (org) => {
-              return <OrgImage org={org} file={previewNode?.file} />
+            img: ({ src }) => {
+              return <OrgImage src={src as string} file={previewNode?.file} />
             },
             section: ({ children, className }) => {
               if (className && (className as string).slice(-1) === `${previewNode.level}`) {
@@ -219,10 +220,6 @@ 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>
   )