diff --git a/client/index.html b/client/index.html
index b620792..6d50d3f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -13,6 +13,8 @@
TheWhiteSilk
+
+
diff --git a/client/index.ts b/client/index.ts
index 298fc60..a7024cc 100644
--- a/client/index.ts
+++ b/client/index.ts
@@ -6,6 +6,8 @@ import { breakpoint, Dialog } from "mdui"
import * as React from 'react'
import ReactDOM from 'react-dom/client'
+import './ui/custom-elements/chat-image.js'
+
const urlParams = new URL(location.href).searchParams
// deno-lint-ignore no-window no-window-prefix
diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 41186fc..75d8477 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -22,8 +22,15 @@ interface Args extends React.HTMLAttributes {
const markedInstance = new marked.Marked({
renderer: {
heading({ tokens, depth: _depth }) {
- const text = this.parser.parseInline(tokens);
+ const text = this.parser.parseInline(tokens)
return `${text}`
+ },
+ paragraph({ tokens, depth: _depth }) {
+ const text = this.parser.parseInline(tokens)
+ return `${text}`
+ },
+ image({ title, href }) {
+ return ``
}
}
})
@@ -187,7 +194,15 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
-
+
)
}
diff --git a/client/ui/custom-elements/chat-image.js b/client/ui/custom-elements/chat-image.js
new file mode 100644
index 0000000..f7098a1
--- /dev/null
+++ b/client/ui/custom-elements/chat-image.js
@@ -0,0 +1,91 @@
+function openImageViewer(src) {
+ $('#image-viewer-dialog-inner').empty()
+
+ const e = new Image()
+ e.src = src
+ $('#image-viewer-dialog-inner').append(e)
+
+ e.onload = () => $('#image-viewer-dialog-inner').get(0).setTransform({
+ scale: 0.6,
+ x: $(window).width() / 2 - (e.width / 4),
+ y: $(window).height() / 2 - (e.height / 3),
+ })
+ $('#image-viewer-dialog').get(0).open = true
+}
+
+customElements.define('chat-image', class extends HTMLElement {
+ constructor() {
+ super()
+ }
+ connectedCallback() {
+ const e = new Image()
+ e.style.maxWidth = "100%"
+ e.style.maxHeight = "90%"
+ e.style.marginTop = "13px"
+ e.style.borderRadius = "var(--mdui-shape-corner-medium)"
+ e.src = $(this).attr('src')
+ e.alt = $(this).attr('alt')
+ e.onerror = () => {
+ const bak = $(this).html()
+ $(this).html(`
`)
+ $(this).attr('alt', '無法加載圖像')
+ $(this).on('click', () => dialog({
+ headline: "圖片無法載入",
+ description: "您是否需要重新加載?",
+ actions: [
+ {
+ text: "重載",
+ onClick: () => {
+ $(this).html(bak)
+ return false
+ },
+ },
+ {
+ text: "取消",
+ onClick: () => {
+ return false
+ },
+ },
+ ],
+ }))
+ }
+ e.onclick = () => {
+ openImageViewer($(this).attr('src'))
+ }
+ this.appendChild(e)
+ }
+})
+
+document.body.appendChild(new DOMParser().parseFromString(`
+
+
+
+
+
+
+
+
+
+`, 'text/html').body.firstChild)