king
1 year ago
commit
be80cbab2d
@ -0,0 +1,4 @@ |
|||||||
|
export default definePageConfig({ |
||||||
|
navigationBarTitleText: '链接', |
||||||
|
onReachBottomDistance: 30 |
||||||
|
}) |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import {FC} from "react"; |
||||||
|
import {WebView} from "@tarojs/components"; |
||||||
|
import {useRouter} from "@tarojs/taro"; |
||||||
|
|
||||||
|
const Web:FC = () => { |
||||||
|
const {url} = useRouter().params as unknown as { url: string } |
||||||
|
return <WebView src={url}></WebView> |
||||||
|
} |
||||||
|
export default Web |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import { FC, ReactNode} from "react"; |
||||||
|
import {View} from "@tarojs/components"; |
||||||
|
import Taro from "@tarojs/taro"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface TabLinkProps{ |
||||||
|
className:string |
||||||
|
url:string |
||||||
|
children: ReactNode[] |
||||||
|
} |
||||||
|
|
||||||
|
const TabLink:FC<TabLinkProps> = (props:TabLinkProps) => { |
||||||
|
function linkTab(){ |
||||||
|
console.log(props.url) |
||||||
|
let webExp= new RegExp(/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/) |
||||||
|
if(webExp.test(props.url)){ |
||||||
|
//跳转webview
|
||||||
|
Taro.navigateTo({url:`/pages/preview/webView/webView?url=${props.url}`}) |
||||||
|
}else{ |
||||||
|
//跳转小程序页面
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<View onClick={linkTab} className="font-28" style={{display:"inline-block",color:'#45D4A8'}}>22222</View> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default TabLink |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
.code {} |
||||||
|
|
||||||
|
.h1 { |
||||||
|
font-size: 48rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.h2 { |
||||||
|
font-size: 44rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.h3 { |
||||||
|
font-size: 40rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.h4 { |
||||||
|
font-size: 36rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.h5 { |
||||||
|
font-size: 32rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.h6 { |
||||||
|
font-size: 28rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.hr { |
||||||
|
border-bottom: 1px solid #aaa; |
||||||
|
margin-top: 12rpx; |
||||||
|
margin-bottom: 12rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.blockquote { |
||||||
|
border-left: 8rpx solid #aaa; |
||||||
|
padding: 16rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.list, |
||||||
|
.taskList, |
||||||
|
.orderedList { |
||||||
|
display: block; |
||||||
|
margin-bottom: 12rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.listItem, |
||||||
|
.taskListItem, |
||||||
|
.orderedListItem { |
||||||
|
padding-left: 1rem; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.taskListItem { |
||||||
|
padding-left: 1.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.checkedTaskIndicator, |
||||||
|
.uncheckTaskIndicator, |
||||||
|
.listItemIndicator { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.checkedTaskIndicator, |
||||||
|
.uncheckTaskIndicator { |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
overflow: hidden; |
||||||
|
border: 2px solid #ddd; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 0.65rem; |
||||||
|
border-radius: 8rpx; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.paragraph { |
||||||
|
margin-top: 4rpx; |
||||||
|
margin-bottom: 12rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #444444; |
||||||
|
line-height: 35rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.blockHtml {} |
||||||
|
|
||||||
|
.inlineHtml {} |
||||||
|
|
||||||
|
.text { |
||||||
|
} |
||||||
|
|
||||||
|
.def {} |
||||||
|
|
||||||
|
.strong { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.em { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.del { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
|
||||||
|
.codespan { |
||||||
|
padding: 0 12rpx; |
||||||
|
font-size: 85%; |
||||||
|
border: 1px solid #aaa; |
||||||
|
background-color: #ccc; |
||||||
|
border-radius: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
//.escape {} |
||||||
|
//.br {} |
||||||
|
|
||||||
|
.link { |
||||||
|
display: inline; |
||||||
|
text-decoration: underline; |
||||||
|
color: blue; |
||||||
|
// todo 取消点击时的背景 |
||||||
|
} |
||||||
|
|
||||||
|
.image { |
||||||
|
display: inline-block; |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.video { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
// todo 自动换行 |
||||||
|
.table { |
||||||
|
max-width: 100%; |
||||||
|
overflow-x: auto; |
||||||
|
border: 1px solid #dee2e6; |
||||||
|
} |
||||||
|
|
||||||
|
.tableBodyRow, |
||||||
|
.tableHeader { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
&:not(:last-child) { |
||||||
|
border-bottom: 1px solid #dee2e6; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tableHeaderCell, |
||||||
|
.tableBodyCell { |
||||||
|
flex: 1; |
||||||
|
padding: 8rpx 12rpx; |
||||||
|
|
||||||
|
&:not(:last-child) { |
||||||
|
border-right: 1px solid #dee2e6; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,319 @@ |
|||||||
|
import {Token, Tokens, lexer} from "marked" |
||||||
|
import {Attributes, ComponentType, createElement, ReactElement, ReactNode} from "react" |
||||||
|
import {View, Text, Image, Video, Audio} from "@tarojs/components" |
||||||
|
import {parseHeadingId, walkTokens, unescape} from "./utils" |
||||||
|
import TabLink from "./components/Tablink"; |
||||||
|
import './marked.scss' |
||||||
|
|
||||||
|
/** |
||||||
|
* 解析 Markdown 文本 |
||||||
|
* |
||||||
|
* ```ts
|
||||||
|
* const Markdown: FC<{ source: string }> = ({ source }) => { |
||||||
|
* const { children, headings } = useMemo(() => parse(source), [source]) |
||||||
|
* console.log(headings) // => [{level: 1, text: 'heading', id: 'custom-id'}]
|
||||||
|
* return (<View>{children}</View>) |
||||||
|
* } |
||||||
|
* |
||||||
|
* <Markdown source={'# heading {#custom-id}'} /> |
||||||
|
* ``` |
||||||
|
* |
||||||
|
* @param {string} content 原始文本 |
||||||
|
* |
||||||
|
* @see {@link https://www.markdownguide.org}
|
||||||
|
* @see {@link https://marked.js.org}
|
||||||
|
*/ |
||||||
|
export const parse = (content: string) => { |
||||||
|
const headings: Heading[] = [] |
||||||
|
let nextKey = 0 |
||||||
|
|
||||||
|
const ctx: RenderContext = { |
||||||
|
createReactElement<P>(type: ComponentType<P>, props?: Props<P>): ReactElement<P> { |
||||||
|
props ??= {} as Props<P> |
||||||
|
props.key ??= ++nextKey |
||||||
|
return createElement(type, props) |
||||||
|
}, |
||||||
|
|
||||||
|
ensureHeading(token: Tokens.Heading): string { |
||||||
|
// todo(hupeh): id 不能重复
|
||||||
|
// todo(hupeh): 第一层标题级别必须一致
|
||||||
|
const id = parseHeadingId(token) |
||||||
|
headings.push({id, text: token.text, level: token.depth}) |
||||||
|
return id |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
const tokens = lexer(content) |
||||||
|
const children = render(ctx, tokens) |
||||||
|
|
||||||
|
return {children, headings} |
||||||
|
} |
||||||
|
|
||||||
|
export interface Heading { |
||||||
|
level: number |
||||||
|
text: string |
||||||
|
id: string |
||||||
|
} |
||||||
|
|
||||||
|
type Props<P> = Attributes & P |
||||||
|
|
||||||
|
interface RenderContext { |
||||||
|
createReactElement<P>(type: ComponentType<P>, props?: Props<P>): ReactElement<P> |
||||||
|
|
||||||
|
ensureHeading(token: Tokens.Heading): string |
||||||
|
} |
||||||
|
|
||||||
|
function render(ctx: RenderContext, tokens: Token[]) { |
||||||
|
return walkTokens<ReactNode>(tokens, (token) => renderToken(ctx, token)) |
||||||
|
} |
||||||
|
|
||||||
|
function renderToken(ctx: RenderContext, token: Token) { |
||||||
|
return (renderer[token.type] ?? renderer.generic)(ctx, token) |
||||||
|
} |
||||||
|
|
||||||
|
const renderer = { |
||||||
|
space(_: RenderContext, tk: Tokens.Space) { |
||||||
|
// todo(hupeh): 测试是否需要 Text 实现
|
||||||
|
return tk.raw |
||||||
|
}, |
||||||
|
|
||||||
|
code(ctx: RenderContext, tk: Tokens.Code) { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'code', |
||||||
|
children: tk.escaped ? escape(tk.text) : tk.text, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
heading(ctx: RenderContext, tk: Tokens.Heading) { |
||||||
|
const id = ctx.ensureHeading(tk) |
||||||
|
|
||||||
|
// todo(hupeh): 是否需要调整标题级别保证顺序一致
|
||||||
|
return ctx.createReactElement(View, { |
||||||
|
id, |
||||||
|
className: `h${tk.depth}`, |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
hr(ctx: RenderContext, _: Tokens.Hr) { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'hr', |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
blockquote(ctx: RenderContext, tk: Tokens.Blockquote) { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'blockquote', |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
list(ctx: RenderContext, tk: Tokens.List) { |
||||||
|
const isTaskList = tk.items[0]?.task == true; |
||||||
|
// todo(hupeh): 什么是 tk.loose
|
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: isTaskList ? 'taskList' : tk.ordered ? 'orderedList' : 'list', |
||||||
|
children: tk.items.map((item, index) => { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: isTaskList ? 'taskListItem' : tk.ordered ? 'orderedListItem' : "listItem", |
||||||
|
children: [ |
||||||
|
!isTaskList ? ctx.createReactElement(View, { |
||||||
|
className: 'listItemIndicator', |
||||||
|
children: tk.ordered ? index + 1 : '•', |
||||||
|
}) : null, |
||||||
|
item.task ? ctx.createReactElement(View, { |
||||||
|
className: item.checked ? 'checkedTaskIndicator' : 'uncheckTaskIndicator', |
||||||
|
children: item.checked ? ctx.createReactElement(Text, { |
||||||
|
children: '✔', |
||||||
|
}) : null, |
||||||
|
}) : null, |
||||||
|
...render(ctx, item.tokens), |
||||||
|
], |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
paragraph(ctx: RenderContext, tk: Tokens.Paragraph) { |
||||||
|
// todo(hupeh): tk.pre
|
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'paragraph', |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
html(ctx: RenderContext, tk: Tokens.HTML) { |
||||||
|
// todo(hupeh): 什么是 tk.pre ? 对应 <pre> 标签吗？
|
||||||
|
// if (tk.pre) {}
|
||||||
|
if (tk.block) { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'blockHtml', |
||||||
|
children: tk.text.split(/\r?\n/).map(line => { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'blockHtmlItem', |
||||||
|
children: ctx.createReactElement(Text, { |
||||||
|
space: 'nbsp', // 空格符号渲染方式
|
||||||
|
decode: true, // 正确显示实体
|
||||||
|
children: line.trimEnd(), |
||||||
|
}), |
||||||
|
}) |
||||||
|
}), |
||||||
|
}) |
||||||
|
} |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'inlineHtml', |
||||||
|
children: tk.text, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
text(ctx: RenderContext, tk: Tokens.Text) { |
||||||
|
if (tk.tokens?.length) { |
||||||
|
return render(ctx, tk.tokens) |
||||||
|
} |
||||||
|
// todo 转义 HTML 实体
|
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'text', |
||||||
|
children: unescape(tk.text), |
||||||
|
decode: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
def(ctx: RenderContext, tk: Tokens.Def) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'def', |
||||||
|
children: tk.title, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
escape(ctx: RenderContext, tk: Tokens.Escape) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'escape', |
||||||
|
children: escape(tk.text), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
link(ctx: RenderContext, tk: Tokens.Link) { |
||||||
|
// todo(hupeh): 页面内部跳转，根据 heading 的 ID 实现
|
||||||
|
return ctx.createReactElement(TabLink, { |
||||||
|
className: 'link', |
||||||
|
url: tk.href, |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
image(ctx: RenderContext, tk: Tokens.Image) { |
||||||
|
// todo(hupeh): 相关控制属性可以通过 QueryString 解析出来
|
||||||
|
const ext = tk.href.split('?').shift()!.split('.').pop()!.toLowerCase(); |
||||||
|
switch (ext) { |
||||||
|
case 'mp4': |
||||||
|
case 'm4v': |
||||||
|
case 'mov': |
||||||
|
case 'qt': |
||||||
|
case 'avi': |
||||||
|
case 'flv': |
||||||
|
case 'wmv': |
||||||
|
case 'asf': |
||||||
|
case 'mkv': |
||||||
|
case 'rm': |
||||||
|
case 'rmvb': |
||||||
|
case 'vob': |
||||||
|
case 'ts': |
||||||
|
case 'dat': |
||||||
|
return ctx.createReactElement(Video, { |
||||||
|
className: 'video', |
||||||
|
src: tk.href, |
||||||
|
}) |
||||||
|
case 'mp3': |
||||||
|
case 'wma': |
||||||
|
case 'flac': |
||||||
|
case 'wav': |
||||||
|
// todo(hupeh): 使用 Taro.createInnerAudioContext 接口封装组件
|
||||||
|
return ctx.createReactElement(Audio, { |
||||||
|
className: 'audio', |
||||||
|
src: tk.href |
||||||
|
}) |
||||||
|
default: |
||||||
|
return ctx.createReactElement(Image, { |
||||||
|
className: 'image', |
||||||
|
src: tk.href, |
||||||
|
mode: "widthFix", |
||||||
|
webp: ext === 'web', |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
strong(ctx: RenderContext, tk: Tokens.Strong) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'strong', |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
em(ctx: RenderContext, tk: Tokens.Em) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'em', |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
codespan(ctx: RenderContext, tk: Tokens.Codespan) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'codespan', |
||||||
|
children: tk.text, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
br(ctx: RenderContext, _: Tokens.Br) { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'br', |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
del(ctx: RenderContext, tk: Tokens.Del) { |
||||||
|
return ctx.createReactElement(Text, { |
||||||
|
className: 'del', |
||||||
|
children: render(ctx, tk.tokens), |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
table(ctx: RenderContext, tk: Tokens.Table) { |
||||||
|
// todo(hupeh): 使用自定义 table 组件，检测单元格宽度
|
||||||
|
// return "暂不支持表格渲染";
|
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'table', |
||||||
|
children: [ |
||||||
|
ctx.createReactElement(View, { |
||||||
|
className: 'tableHeader', |
||||||
|
children: tk.header.map((cell, index) => { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'tableHeaderCell', |
||||||
|
style: {textAlign: tk.align[index] || 'left'}, |
||||||
|
children: render(ctx, cell.tokens), |
||||||
|
}) |
||||||
|
}), |
||||||
|
}), |
||||||
|
ctx.createReactElement(View, { |
||||||
|
className: 'tableBody', |
||||||
|
children: tk.rows.map(rows => { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'tableBodyRow', |
||||||
|
children: rows.map((cell, index) => { |
||||||
|
return ctx.createReactElement(View, { |
||||||
|
className: 'tableBodyCell', |
||||||
|
style: {textAlign: tk.align[index] || 'left'}, |
||||||
|
children: render(ctx, cell.tokens), |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}), |
||||||
|
}), |
||||||
|
], |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
generic(ctx: RenderContext, tk: Tokens.Generic) { |
||||||
|
// todo(hupeh): 验证 tk.type
|
||||||
|
// todo(hupeh): 调试模式下不返回 null
|
||||||
|
return tk.tokens?.length ? render(ctx, tk.tokens) : null |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
import {Token, Tokens, TokensList} from "@/utils/marked/marked" |
||||||
|
import {Attributes, ComponentType, createElement, ReactElement} from "react"; |
||||||
|
|
||||||
|
|
||||||
|
const unescapeTest = /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig |
||||||
|
|
||||||
|
export function unescape(html: string) { |
||||||
|
// explicitly match decimal, hex, and named HTML entities
|
||||||
|
return html.replace(unescapeTest, (_, n) => { |
||||||
|
n = n.toLowerCase() |
||||||
|
if (n === 'colon') return ':' |
||||||
|
if (n.charAt(0) === '#') { |
||||||
|
return n.charAt(1) === 'x' |
||||||
|
? String.fromCharCode(parseInt(n.substring(2), 16)) |
||||||
|
: String.fromCharCode(+n.substring(1)) |
||||||
|
} |
||||||
|
return '' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// This alphabet uses `A-Za-z0-9_-` symbols.
|
||||||
|
// The order of characters is optimized for better gzip and brotli compression.
|
||||||
|
// Same as in non-secure/index.js
|
||||||
|
const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict' |
||||||
|
|
||||||
|
export function hash(str: string) { |
||||||
|
const parts = Math.abs(str.split("") |
||||||
|
.reduce((a, b) => { |
||||||
|
a = ((a << 5) - a) + b.charCodeAt(0); |
||||||
|
return a & a; |
||||||
|
}, 0)) |
||||||
|
.toString() |
||||||
|
.split('') |
||||||
|
|
||||||
|
let id = '' |
||||||
|
// We are reading directly from the random pool to avoid creating new array
|
||||||
|
for (const part of parts) { |
||||||
|
const size = Number.parseInt(part) |
||||||
|
if (!Number.isNaN(size)) { |
||||||
|
// It is incorrect to use bytes exceeding the alphabet size.
|
||||||
|
// The following mask reduces the random byte in the 0-255 value
|
||||||
|
// range to the 0-63 value range. Therefore, adding hacks, such
|
||||||
|
// as empty string fallback or magic numbers, is unneccessary because
|
||||||
|
// the bitmask trims bytes down to the alphabet size.
|
||||||
|
id += urlAlphabet[size & 63] |
||||||
|
} |
||||||
|
} |
||||||
|
return id.replace(/^-+|-+$/g, '') |
||||||
|
} |
||||||
|
|
||||||
|
export function walkTokens<T = void>(tokens: Token[] | TokensList, callback: (token: Token) => T | T[]) { |
||||||
|
let values: T[] = []; |
||||||
|
for (const token of tokens) { |
||||||
|
values = values.concat(callback.call(this, token)) |
||||||
|
} |
||||||
|
return values |
||||||
|
} |
||||||
|
|
||||||
|
export function parseHeadingId(tk: Tokens.Heading) { |
||||||
|
const index = tk.tokens.length - 1; |
||||||
|
if (tk.tokens[index].type !== 'text') { |
||||||
|
return hash(tk.raw) |
||||||
|
} |
||||||
|
|
||||||
|
// https://github.com/markedjs/marked-custom-heading-id/blob/main/src/index.js
|
||||||
|
const child = tk.tokens[index] as Tokens.Text |
||||||
|
const headingIdRegex = /(?: +|^)\{#([a-z][\w-]*)\}(?: +|$)/i; |
||||||
|
const hasId = child.text.match(headingIdRegex); |
||||||
|
|
||||||
|
if (!hasId) { |
||||||
|
return hash(tk.raw) |
||||||
|
} |
||||||
|
|
||||||
|
child.text = child.text.replace(headingIdRegex, '') |
||||||
|
tk.text = tk.text.replace(headingIdRegex, '') |
||||||
|
|
||||||
|
return hasId[1] |
||||||
|
} |
||||||
|
|
||||||
|
let nextKey = 0 |
||||||
|
|
||||||
|
export function h<Props>(type: ComponentType<Props>, props?: Attributes & Props): ReactElement<Props> { |
||||||
|
props ??= {} as Attributes & Props |
||||||
|
props.key ??= ++nextKey |
||||||
|
return createElement(type, props) |
||||||
|
} |
||||||
Loading…
Reference in new issue