🌟feat: html render support

Author: blinko-space

next.config.js

@@ -4,7 +4,7 @@ const withPWA = require('next-pwa')({
   disable: process.env.NODE_ENV === 'development',
 })
 module.exports = withPWA({
-  transpilePackages: ['@mdxeditor/editor', 'react-diff-view','highlight.js','remark-gfm'],
+  transpilePackages: ['@mdxeditor/editor', 'react-diff-view','highlight.js','remark-gfm','rehype-raw'],
   webpack: (config, { isServer }) => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
     if (!isServer) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blinko",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "browser": {
     "fs": false,
@@ -110,6 +110,8 @@
     "react-masonry-css": "^1.0.16",
     "react-photo-view": "^1.2.6",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "sharp": "^0.33.5",
     "superjson": "^2.2.1",

pnpm-lock.yaml

@@ -14,6 +14,8 @@ import { RootStore } from '@/store';
 import { StorageState } from '@/store/standard/StorageState';
 import { Icon } from '@iconify/react';
 import { PhotoProvider, PhotoView } from 'react-photo-view';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 
 const highlightTags = (text) => {
   if (!text) return text
@@ -58,43 +60,6 @@ const LinkPreview = ({ href }) => {
   const store = RootStore.Local(() => ({
     previewData: new StorageState<LinkInfo | null>({ key: href, default: null })
   }))
-  try {
-    if (typeof href == 'object') {
-      return <div className='react-image'>
-        <PhotoProvider >
-          <PhotoView src={href?.props?.src}>
-            <Image src={href?.props?.src} />
-          </PhotoView>
-        </PhotoProvider>
-      </div>
-    }
-    if (href?.startsWith('<img')) {
-      const src = href.match(/src="([^"]+)"/)?.[1]
-      const regex = /height="(\d+)"\s+width="(\d+)"/;
-      const matches = href.match(regex);
-      console.log(matches)
-      let style = {}
-      if (matches) {
-        let height = matches[1];
-        let width = matches[2];
-        style = { height: height + 'px', width: width + 'px' }
-        console.log(`Height: ${height}, Width: ${width}`);
-      } else {
-        console.log("No match found.");
-      }
-      return <div className='text-image'>
-        <PhotoProvider >
-          <PhotoView src={src}>
-            <Image src={src}  {...style} />
-          </PhotoView>
-        </PhotoProvider>
-      </div>
-    }
-  } catch (error) {
-    console.log(error)
-    return href
-  }
-
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -124,6 +89,21 @@ const LinkPreview = ({ href }) => {
   );
 };
 
+const ImageWrapper = ({ src, alt, width, height }) => {
+  return (
+    <div className="custom-image-wrapper">
+      <div className='react-image'>
+        <PhotoProvider >
+          <PhotoView src={src}>
+            <Image src={src} width={width} height={height} />
+          </PhotoView>
+        </PhotoProvider>
+      </div>
+    </div>
+  );
+};
+
+
 
 export const MarkdownRender = observer(({ content = '', onChange }: { content?: string, onChange?: (newContent: string) => void }) => {
   const { theme } = useTheme()
@@ -150,6 +130,7 @@ export const MarkdownRender = observer(({ content = '', onChange }: { content?:
       <div ref={contentRef} data-markdown-theme={theme} className={`markdown-body content ${isExpanded ? "expanded" : "collapsed"}`}>
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw, rehypeSanitize]} //xss
           components={{
             p: ({ node, children }) => <p>{highlightTags(children)}</p>,
             code: Code,
@@ -180,6 +161,7 @@ export const MarkdownRender = observer(({ content = '', onChange }: { content?:
               }
               return <li >{children}</li>
             },
+            img: ImageWrapper
           }}
         >
           {content}

src/components/Common/MarkdownRender.tsx

@@ -10,6 +10,10 @@
   color: #0969da !important;
 }
 
+._linkDialogPopoverContent_uazmk_600, ._tableColumnEditorPopoverContent_uazmk_601, ._dialogContent_uazmk_602{
+  background-color:var(--background)!important;
+}
+
 .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)),
 .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)),
 .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)),
@@ -25,8 +29,7 @@
   height: 100%;
 }
 
-#radix-\:r51\:,
-#radix-\:rq8\: {
+[id^="radix-"] {
   display: none;
 }