AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 20:19:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
crazywoola 2024-08-15 14:23:56 +08:00 committed by GitHub
parent 3f9720bca0
commit 603a89055c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/app/components/base/markdown.tsx
View File

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