fix: admin/home: not displaying images in changelogs
Massimo Melina committed
Mar 25, 2024 at 14:59 UTC
398e82b7a99adcd118d9eb74a8e1fafad127b091
2 files changed
+11
-11
frontend/src/components.ts
+1
-8
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { getHFS, hfsEvent, hIcon, isPrimitive, onlyTruthy, prefix } from './misc'
3
+import { getHFS, hfsEvent, hIcon, Html, isPrimitive, onlyTruthy, prefix } from './misc'
4
import { ButtonHTMLAttributes, ChangeEvent, createElement as h, CSSProperties, FC, forwardRef, Fragment,
5
HTMLAttributes, InputHTMLAttributes, isValidElement, MouseEventHandler, ReactNode, SelectHTMLAttributes,
6
useMemo, useState, ComponentPropsWithoutRef } from 'react'
@@ -66,13 +66,6 @@ export function Select<T extends string>({ onChange, value, options, ...props }:
66
}, options.map(({ value, label }) => h('option', { key: value, value }, label)))
67
}
68
69
-export function Html({ code, ...rest }: { code:string } & HTMLAttributes<any>) {
70
- return !code ? null : h('span', { ...rest, ref(x) {
71
- if (x)
72
- x.replaceChildren(document.createRange().createContextualFragment(code))
73
- } })
74
-}
75
-
69
export function CustomCode({ name, props, ifEmpty }: { name: string, props?: any, ifEmpty?: FC }) {
70
const children = useMemo(() => {
71
const ret = onlyTruthy(hfsEvent(name, props)
shared/md.ts
+10
-3
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, Fragment, ReactNode } from 'react'
3
+import { createElement as h, Fragment, HTMLAttributes, ReactNode } from 'react'
4
5
export const MD_TAGS = {
6
a: 'a',
@@ -12,11 +12,11 @@ type OnText = (s: string) => ReactNode
12
export function md(text: string | TemplateStringsArray, { linkTarget='_blank', onText=(x=>x) as OnText }={}) {
13
if (typeof text !== 'string')
14
text = text[0]
15
- return replaceStringToReact(text, /(`|_|\*\*?)(.+?)\1|(\n)|\[(.+?)\]\((.+?)\)|<([^ >/]+)>(.*?)<\/\6>|<([^ >/]+) *\/>/g, m =>
15
+ return replaceStringToReact(text, /(`|_|\*\*?)(.+?)\1|(\n)|\[(.+?)\]\((.+?)\)|(<(\w+?)(?:\s+[^>]*?)?>(?:.*?<\/\7>)?)/g, m =>
16
m[4] ? h(MD_TAGS.a, { href: m[5], target: linkTarget }, onText(m[4]))
17
: m[3] ? h('br')
18
: m[1] ? h((MD_TAGS as any)[ m[1] ] || Fragment, {}, onText(m[2]))
19
- : h(m[6] || m[8], {}, m[7]),
19
+ : h(Html, { code: m[6] }),
20
onText)
21
}
22
@@ -32,3 +32,10 @@ export function replaceStringToReact(text: string, re: RegExp, cb: (match: RegEx
32
}
33
return h(Fragment, {}, ...res, onText(text.slice(last, Infinity)))
34
}
35
+
36
+export function Html({ code, ...rest }: { code:string } & HTMLAttributes<any>) {
37
+ return !code ? null : h('span', { ...rest, ref(x) {
38
+ if (x)
39
+ x.replaceChildren(document.createRange().createContextualFragment(code))
40
+ } })
41
+}