Merge pull request #11 from ikoamu/support-html-attr

Support html attr

Author: ikoamu

components/Sidebar/Link.tsx

@@ -155,7 +155,6 @@ export const PreviewLink = (props: LinkProps) => {
   const type = href.replaceAll(/(.*?)\:.*/g, '$1')
 
   const extraNoteStyle = outline ? outlineNoteStyle : viewerNoteStyle
-  console.log(previewNode)
   const getText = () => {
     fetch(`notes/${id}`)
       .then((res) => {

components/Sidebar/OrgImage.tsx

@@ -82,7 +82,6 @@ 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} />

components/Sidebar/Section.tsx

@@ -1,15 +1,14 @@
 import { Box, Flex, IconButton } from '@chakra-ui/react'
-import React, { ReactChild, useContext, useEffect, useState } from 'react'
+import React, { FC, PropsWithChildren, ReactChild, useContext, useEffect, useState } from 'react'
 import { VscCircleFilled, VscCircleOutline } from 'react-icons/vsc'
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import { NoteContext } from '../../util/NoteContext'
 
 export interface SectionProps {
-  children: any
   className: string
 }
 
-export const Section = (props: SectionProps) => {
+export const Section: FC<PropsWithChildren<SectionProps>> = (props) => {
   const {
     children,
     className, // outline
@@ -20,15 +19,28 @@ export const Section = (props: SectionProps) => {
     setOpen(!collapse)
   }, [collapse])
 
+  if (!children) {
+    return null
+  }
+
+
   if (className === 'h0Wrapper headingWrapper') {
     return <Box className="preHeadingContent"> {children}</Box>
   }
-  const kids = children as ReactChild[]
+
+  if (typeof children === 'string') {
+    return <Box className="sectionContent">{children}</Box>
+  }
+
+  if (!Array.isArray(children)) {
+    return <Box className="sectionContent">{children}</Box>
+  }
+
   return (
     <Box className={'sec'}>
       <Box display="block">
         <Flex className="headingFlex" alignItems="baseline">
-          {open && kids.length > 0 ? (
+          {open && children.length > 0 ? (
             <>
               <IconButton
                 className="viewerHeadingButton"
@@ -87,10 +99,10 @@ export const Section = (props: SectionProps) => {
               />
             </>
           )}
-          {kids[0]}
+          {children[0]}
         </Flex>
       </Box>
-      {open && <Box className="sectionContent">{kids.slice(1)}</Box>}
+      {open && <Box className="sectionContent">{children?.slice(1)}</Box>}
     </Box>
   )
 }

util/processOrg.tsx

@@ -170,11 +170,11 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
               return <OrgImage org={org} file={previewNode?.file} />
             },
             section: ({ children, className }) => {
-              if (className && (className as string).slice(-1) === `${previewNode.level}`) {
-                return <Box>{(children as React.ReactElement[]).slice(1)}</Box>
+              if (className && className?.slice(-1) === `${previewNode.level}`) {
+                return <Box>{children}</Box>
               }
               return (
-                <Section {...{ outline, collapse }} className={className as string}>
+                <Section {...{ outline, collapse }} className={className ?? ""}>
                   {children}
                 </Section>
               )
@@ -191,7 +191,7 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
                 borderLeftWidth={4}
                 borderLeftColor="gray.700"
               >
-                {children as React.ReactElement[]}
+                {children}
               </chakra.blockquote>
             ),
             p: ({ children }) => {
@@ -207,7 +207,7 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
                   color="gray.800"
                   bgColor="gray.300"
                 >
-                  {children as any}
+                  {children}
                 </chakra.code>
               }
               return children;