Feat/7023 dify editor can resize the image (#7296)

web/app/components/base/markdown.tsx

@@ -14,6 +14,7 @@ import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
 import Flowchart from '@/app/components/base/mermaid'
+import ImageGallery from '@/app/components/base/image-gallery'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -46,9 +47,9 @@ const getCorrectCapitalizationLanguageName = (language: string) => {
 const preprocessLaTeX = (content: string) => {
   if (typeof content !== 'string')
     return content
-  return content.replace(/\\\[(.*?)\\\]/gs, (_, equation) => `$$${equation}$$`)
-    .replace(/\\\((.*?)\\\)/gs, (_, equation) => `$$${equation}$$`)
-    .replace(/(^|[^\\])\$(.+?)\$/gs, (_, prefix, equation) => `${prefix}$${equation}$`)
+  return content.replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation}$$`)
+    .replace(/\\\((.*?)\\\)/g, (_, equation) => `$$${equation}$$`)
+    .replace(/(^|[^\\])\$(.+?)\$/g, (_, prefix, equation) => `${prefix}$${equation}$`)
 }
 
 export function PreCode(props: { children: any }) {
@@ -58,12 +59,6 @@ export function PreCode(props: { children: any }) {
     <pre ref={ref}>
       <span
         className="copy-code-button"
-        onClick={() => {
-          if (ref.current) {
-            const code = ref.current.innerText
-            // copyToClipboard(code);
-          }
-        }}
       ></span>
       {props.children}
     </pre>
@@ -172,7 +167,7 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
           {children}
         </code>
       )
-  }, [children, className, inline, isSVG, language, languageShowName, match, props])
+  }, [chartData, children, className, inline, isSVG, language, languageShowName, match, props])
 })
 
 CodeBlock.displayName = 'CodeBlock'
@@ -188,17 +183,9 @@ export function Markdown(props: { content: string; className?: string }) {
         ]}
         components={{
           code: CodeBlock,
-          img({ src, alt, ...props }) {
+          img({ src }) {
             return (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={src}
-                alt={alt}
-                width={250}
-                height={250}
-                className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
-                {...props}
-              />
+              <ImageGallery srcs={[src || '']} />
             )
           },
           p: (paragraph) => {
@@ -208,14 +195,7 @@ export function Markdown(props: { content: string; className?: string }) {
 
               return (
                 <>
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
-                    src={image.properties.src}
-                    width={250}
-                    height={250}
-                    className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
-                    alt={image.properties.alt}
-                  />
+                  <ImageGallery srcs={[image.properties.src]} />
                   <p>{paragraph.children.slice(1)}</p>
                 </>
               )