uview-ultra 4.5.46

package/components/up-parse/props.js

@@ -0,0 +1,48 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+		containerStyle: {
+          type: String,
+          default: null
+		},
+        content: String,
+        copyLink: {
+		  type: Boolean,
+		  default: () => defProps.parse.copyLink
+        },
+        domain: String,
+        errorImg: {
+		  type: String,
+		  default: () => defProps.parse.errorImg
+        },
+        lazyLoad: {
+		  type: Boolean,
+		  default: () => defProps.parse.lazyLoad
+        },
+        loadingImg: {
+		  type: String,
+		  default: () => defProps.parse.loadingImg
+        },
+        pauseVideo: {
+		  type: Boolean,
+		  default: () => defProps.parse.pauseVideo
+        },
+        previewImg: {
+		  type: Boolean,
+		  default: () => defProps.parse.previewImg
+        },
+        scrollTable: Boolean,
+        selectable: Boolean,
+        setTitle: {
+		  type: Boolean,
+		  default: () => defProps.parse.setTitle
+        },
+        showImgMenu: {
+		  type: Boolean,
+		  default: () => defProps.parse.showImgMenu
+        },
+        tagStyle: Object,
+        useAnchor: null
+	  }
+})

package/components/up-parse/props.uts

@@ -0,0 +1,68 @@
+import { defineMixin } from '../../libs/vue.uts'
+
+export const props = defineMixin({
+    props: {
+        containerStyle: {
+            type: String,
+            default: ''
+        },
+        content: {
+            type: String,
+            default: ''
+        },
+        copyLink: {
+            type: Boolean,
+            default: false
+        },
+        domain: {
+            type: String,
+            default: ''
+        },
+        errorImg: {
+            type: String,
+            default: ''
+        },
+        lazyLoad: {
+            type: Boolean,
+            default: false
+        },
+        loadingImg: {
+            type: String,
+            default: ''
+        },
+        pauseVideo: {
+            type: Boolean,
+            default: false
+        },
+        previewImg: {
+            type: Boolean,
+            default: true
+        },
+        scrollTable: {
+            type: Boolean,
+            default: false
+        },
+        selectable: {
+            type: Boolean,
+            default: false
+        },
+        setTitle: {
+            type: Boolean,
+            default: true
+        },
+        showImgMenu: {
+            type: Boolean,
+            default: true
+        },
+        tagStyle: {
+            type: Object,
+            default(): UTSJSONObject {
+                return {} as UTSJSONObject
+            }
+        },
+        useAnchor: {
+            type: [Boolean, Number],
+            default: false
+        }
+    }
+})

package/components/up-parse/up-parse.uvue

@@ -0,0 +1,561 @@
+<template>
+	<view id="_root" :class="rootClass" :style="containerStyle" @click="onRootClick">
+		<slot v-if="nodes.length == 0"></slot>
+		<rich-text
+			v-else
+			:nodes="nodes"
+			:selectable="selectableValue"
+			@itemclick="onRichTextItemClick"
+		></rich-text>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
+
+const blockTags = ['address', 'article', 'aside', 'blockquote', 'body', 'caption', 'center', 'dd', 'div', 'dl', 'dt', 'fieldset', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'li', 'main', 'nav', 'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'] as string[]
+const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'] as string[]
+const ignoreTags = ['area', 'base', 'canvas', 'frame', 'head', 'iframe', 'input', 'link', 'map', 'meta', 'param', 'script', 'style', 'textarea', 'track', 'wbr'] as string[]
+
+function makeNode(name: string): UTSJSONObject {
+	return {
+		type: 'node',
+		name,
+		attrs: {} as UTSJSONObject,
+		children: [] as Array<UTSJSONObject>
+	} as UTSJSONObject
+}
+
+function makeText(text: string): UTSJSONObject {
+	return {
+		type: 'text',
+		text
+	} as UTSJSONObject
+}
+
+function hasString(list: string[], value: string): boolean {
+	for (let i = 0; i < list.length; i++) {
+		if (list[i] == value) return true
+	}
+	return false
+}
+
+function decodeHtml(value: string): string {
+	return value
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot;/g, '"')
+		.replace(/&#39;/g, "'")
+		.replace(/&apos;/g, "'")
+		.replace(/&nbsp;/g, ' ')
+		.replace(/&amp;/g, '&')
+}
+
+function textValue(value: any | null): string {
+	return value == null ? '' : value.toString()
+}
+
+function boolValue(value: any | null): boolean {
+	return value == true || value == 'true'
+}
+
+function normalizeSpace(value: string, keepSpace: boolean): string {
+	if (keepSpace) return value
+	return value.replace(/\s+/g, ' ')
+}
+
+function readAttr(source: string, name: string): string {
+	const doublePattern = new RegExp(name + '\\s*=\\s*"([^"]*)"', 'i')
+	const doubleMatch = source.match(doublePattern)
+	if (doubleMatch != null && doubleMatch.length > 1) {
+		const value = doubleMatch[1]
+		return decodeHtml(value == null ? '' : value)
+	}
+	const singlePattern = new RegExp(name + "\\s*=\\s*'([^']*)'", 'i')
+	const singleMatch = source.match(singlePattern)
+	if (singleMatch != null && singleMatch.length > 1) {
+		const value = singleMatch[1]
+		return decodeHtml(value == null ? '' : value)
+	}
+	const barePattern = new RegExp(name + "\\s*=\\s*([^\\s\"'>/]+)", 'i')
+	const bareMatch = source.match(barePattern)
+	if (bareMatch != null && bareMatch.length > 1) {
+		const value = bareMatch[1]
+		return decodeHtml(value == null ? '' : value)
+	}
+	return ''
+}
+
+function firstWord(value: string): string {
+	const trimmed = value.trim()
+	const space = trimmed.search(/\s/)
+	return (space == -1 ? trimmed : trimmed.substring(0, space)).toLowerCase()
+}
+
+function appendChild(stack: Array<UTSJSONObject>, roots: Array<UTSJSONObject>, node: UTSJSONObject): void {
+	if (stack.length == 0) {
+		roots.push(node)
+		return
+	}
+	const parent = stack[stack.length - 1]
+	const children = parent['children'] as Array<UTSJSONObject>
+	children.push(node)
+}
+
+function collectText(nodes: Array<UTSJSONObject>): string {
+	let result = ''
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i]
+		const type = textValue(node['type'])
+		if (type == 'text') {
+			result += textValue(node['text'])
+		} else {
+			const name = textValue(node['name'])
+			if (name == 'br') {
+				result += '\n'
+			}
+			const children = node['children'] as Array<UTSJSONObject> | null
+			if (children != null) {
+				const isBlock = hasString(blockTags, name)
+				if (isBlock && result.length > 0 && !result.endsWith('\n')) result += '\n'
+				result += collectText(children)
+				if (isBlock && result.length > 0 && !result.endsWith('\n')) result += '\n'
+			}
+		}
+	}
+	return result
+}
+
+function findNodeByAttr(nodes: Array<UTSJSONObject>, name: string, attr: string, value: string): UTSJSONObject | null {
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i]
+		if (textValue(node['name']) == name) {
+			const attrs = node['attrs'] as UTSJSONObject | null
+			if (attrs != null && textValue(attrs[attr]) == value) {
+				return node
+			}
+		}
+		const children = node['children'] as Array<UTSJSONObject> | null
+		if (children != null) {
+			const result = findNodeByAttr(children, name, attr, value)
+			if (result != null) return result
+		}
+	}
+	return null
+}
+
+function cloneAttrs(node: UTSJSONObject | null): UTSJSONObject {
+	if (node == null) return {} as UTSJSONObject
+	const attrs = node['attrs'] as UTSJSONObject | null
+	if (attrs == null) return {} as UTSJSONObject
+	const cloned = {} as UTSJSONObject
+	const keys = UTSJSONObject.keys(attrs)
+	for (let i = 0; i < keys.length; i++) {
+		cloned[keys[i]] = attrs[keys[i]]
+	}
+	return cloned
+}
+
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-parse'
+})
+
+const props = defineProps({
+	containerStyle: {
+		type: String,
+		default: ''
+	},
+	content: {
+		type: String,
+		default: ''
+	},
+	copyLink: {
+		type: Boolean,
+		default: false
+	},
+	domain: {
+		type: String,
+		default: ''
+	},
+	errorImg: {
+		type: String,
+		default: ''
+	},
+	lazyLoad: {
+		type: Boolean,
+		default: false
+	},
+	loadingImg: {
+		type: String,
+		default: ''
+	},
+	pauseVideo: {
+		type: Boolean,
+		default: false
+	},
+	previewImg: {
+		type: Boolean,
+		default: true
+	},
+	scrollTable: {
+		type: Boolean,
+		default: false
+	},
+	selectable: {
+		type: Boolean,
+		default: false
+	},
+	setTitle: {
+		type: Boolean,
+		default: true
+	},
+	showImgMenu: {
+		type: Boolean,
+		default: true
+	},
+	tagStyle: {
+		type: Object,
+		default(): UTSJSONObject {
+			return {} as UTSJSONObject
+		}
+	},
+	useAnchor: {
+		type: [Boolean, Number],
+		default: false
+	}
+})
+
+const emit = defineEmits(['load', 'ready', 'imgTap', 'linkTap', 'play', 'error', 'tap', 'click'])
+const instance = getCurrentInstance()!.proxy!
+
+const nodes = ref<Array<UTSJSONObject>>([] as Array<UTSJSONObject>)
+const imgList = ref<Array<string>>([] as Array<string>)
+
+const selectableValue = computed((): boolean => {
+	return boolValue(props.selectable)
+})
+
+const rootClass = computed((): string => {
+	return (selectableValue.value ? '_select ' : '') + '_root'
+})
+
+const previewImgValue = computed((): boolean => {
+	return boolValue(props.previewImg)
+})
+
+const copyLinkValue = computed((): boolean => {
+	return boolValue(props.copyLink)
+})
+
+const showImgMenuValue = computed((): boolean => {
+	return boolValue(props.showImgMenu)
+})
+
+function getText(targetNodes: Array<UTSJSONObject> | null = null): string {
+	return collectText(targetNodes == null ? nodes.value as Array<UTSJSONObject> : targetNodes)
+}
+
+const getRect = (): Promise<any> => {
+	return new Promise((resolve, reject) => {
+		uni.createSelectorQuery()
+			.in(instance)
+			.select('#_root')
+			.boundingClientRect()
+			.exec((res: Array<any>) => {
+				if (res.length > 0 && res[0] != null) {
+					resolve(res[0])
+				} else {
+					reject(new Error('Root label not found'))
+				}
+			})
+	})
+}
+
+function navigateTo(id: string, offset: number = 0): Promise<void> {
+	return new Promise((resolve, reject) => {
+		if (!boolValue(props.useAnchor)) {
+			reject(new Error('Anchor is disabled'))
+			return
+		}
+		const selector = id.length > 0 ? '#_root #' + id : '#_root'
+		uni.createSelectorQuery()
+			.in(instance)
+			.select(selector)
+			.boundingClientRect()
+			.exec((res: Array<any>) => {
+				if (res.length == 0 || res[0] == null) {
+					reject(new Error('Label not found'))
+					return
+				}
+				const rect = res[0] as UTSJSONObject
+				const top = parseFloat(textValue(rect['top']))
+				uni.pageScrollTo({
+					scrollTop: (isNaN(top) ? 0 : top) + offset,
+					duration: 300
+				})
+				resolve()
+			})
+	})
+}
+
+const appendText = (text: string, stack: Array<UTSJSONObject>, roots: Array<UTSJSONObject>): void => {
+	const keepSpace = stack.length > 0 && textValue(stack[stack.length - 1]['name']) == 'pre'
+	const normalized = normalizeSpace(decodeHtml(text), keepSpace)
+	if (normalized.length == 0 || (!keepSpace && normalized == ' ')) return
+	appendChild(stack, roots, makeText(normalized))
+}
+
+const closeTag = (name: string, stack: Array<UTSJSONObject>): void => {
+	for (let i = stack.length - 1; i >= 0; i--) {
+		if (textValue(stack[i]['name']) == name) {
+			while (stack.length > i) stack.pop()
+			return
+		}
+	}
+}
+
+const getDefaultStyle = (name: string): string => {
+	const custom = props.tagStyle as UTSJSONObject | null
+	if (custom != null && custom[name] != null) {
+		return textValue(custom[name])
+	}
+	if (name == 'h1') return 'font-size:2em;font-weight:bold;margin:0.67em 0'
+	if (name == 'h2') return 'font-size:1.5em;font-weight:bold;margin:0.83em 0'
+	if (name == 'h3') return 'font-size:1.17em;font-weight:bold;margin:1em 0'
+	if (name == 'h4' || name == 'h5' || name == 'h6') return 'font-weight:bold;margin:1em 0'
+	if (name == 'p') return 'margin:0.5em 0'
+	if (name == 'blockquote') return 'border-left:4px solid #dcdfe6;padding-left:10px;color:#606266'
+	if (name == 'code') return 'font-family:monospace;background-color:#f5f7fa;padding:2px 4px'
+	if (name == 'pre') return 'font-family:monospace;white-space:pre-wrap;background-color:#f5f7fa;padding:8px;overflow:auto'
+	if (name == 'table') return 'border-collapse:collapse;width:100%'
+	if (name == 'th' || name == 'td') return 'border:1px solid #ebeef5;padding:6px'
+	return ''
+}
+
+const resolveUrl = (url: string): string => {
+	if (url.startsWith('//')) {
+		return 'https:' + url
+	}
+	if (url.startsWith('/') && textValue(props.domain).length > 0) {
+		return textValue(props.domain) + url
+	}
+	if (!url.includes('://') && !url.startsWith('#') && textValue(props.domain).length > 0) {
+		return textValue(props.domain) + '/' + url
+	}
+	return url
+}
+
+const applyAttrs = (node: UTSJSONObject, raw: string): void => {
+	const name = textValue(node['name'])
+	const attrs = {} as UTSJSONObject
+	const id = readAttr(raw, 'id')
+	const klass = readAttr(raw, 'class')
+	const style = readAttr(raw, 'style')
+	const href = readAttr(raw, 'href')
+	const src = readAttr(raw, 'src')
+	const alt = readAttr(raw, 'alt')
+	if (id.length > 0) attrs['id'] = id
+	if (klass.length > 0) attrs['class'] = klass
+	const tagStyle = getDefaultStyle(name)
+	const mergedStyle = tagStyle + (style.length > 0 && tagStyle.length > 0 ? ';' : '') + style
+	if (mergedStyle.length > 0) attrs['style'] = mergedStyle
+	if (href.length > 0) attrs['href'] = resolveUrl(href)
+	if (src.length > 0) attrs['src'] = resolveUrl(src)
+	if (alt.length > 0) attrs['alt'] = alt
+	if (name == 'img' && textValue(attrs['src']).length > 0) {
+		attrs['i'] = imgList.value.length
+		imgList.value.push(textValue(attrs['src']))
+	}
+	if (name == 'title' && boolValue(props.setTitle)) {
+		node['__title'] = true
+	}
+	node['attrs'] = attrs
+}
+
+const parseContent = (content: string): Array<UTSJSONObject> => {
+	imgList.value = [] as Array<string>
+	const roots = [] as Array<UTSJSONObject>
+	const stack = [] as Array<UTSJSONObject>
+	let index = 0
+	let skipTag = ''
+	while (index < content.length) {
+		const lt = content.indexOf('<', index)
+		if (lt == -1) {
+			appendText(content.substring(index), stack, roots)
+			break
+		}
+		if (lt > index) {
+			appendText(content.substring(index, lt), stack, roots)
+		}
+		const gt = content.indexOf('>', lt + 1)
+		if (gt == -1) {
+			appendText(content.substring(lt), stack, roots)
+			break
+		}
+		const raw = content.substring(lt + 1, gt)
+		const trimmed = raw.trim()
+		if (trimmed.startsWith('!--')) {
+			index = gt + 1
+			continue
+		}
+		if (trimmed.startsWith('/')) {
+			const closeName = firstWord(trimmed.substring(1))
+			if (skipTag == closeName) {
+				skipTag = ''
+			} else {
+				closeTag(closeName, stack)
+			}
+			index = gt + 1
+			continue
+		}
+		if (skipTag.length > 0) {
+			index = gt + 1
+			continue
+		}
+		const name = firstWord(trimmed)
+		if (name.length == 0) {
+			index = gt + 1
+			continue
+		}
+		if (name == 'script' || name == 'style') {
+			skipTag = name
+			index = gt + 1
+			continue
+		}
+		if (hasString(ignoreTags, name) && name != 'img') {
+			index = gt + 1
+			continue
+		}
+		const node = makeNode(name)
+		applyAttrs(node, trimmed)
+		appendChild(stack, roots, node)
+		if (!trimmed.endsWith('/') && !hasString(voidTags, name)) {
+			stack.push(node)
+		}
+		index = gt + 1
+	}
+	while (stack.length > 0) {
+		stack.pop()
+	}
+	return roots
+}
+
+function setContent(content: string, append: boolean = false): void {
+	const parsed = parseContent(content)
+	nodes.value = append ? (nodes.value as Array<UTSJSONObject>).concat(parsed) : parsed
+	nextTick(() => {
+		emit('load')
+		getRect().then((rect: any) => {
+			emit('ready', rect)
+		}).catch(() => {
+			emit('ready', {} as UTSJSONObject)
+		})
+	})
+}
+
+const handleImgTap = (attrs: UTSJSONObject): void => {
+	emit('imgTap', attrs)
+	if (previewImgValue.value && imgList.value.length > 0) {
+		const current = parseInt(textValue(attrs['i']))
+		uni.previewImage({
+			current: isNaN(current) ? 0 : current,
+			urls: imgList.value
+		})
+	}
+}
+
+const handleLinkTap = (attrs: UTSJSONObject): void => {
+	emit('linkTap', attrs)
+	const href = textValue(attrs['href'])
+	if (href.length == 0) return
+	if (href.startsWith('#')) {
+		navigateTo(href.substring(1)).catch(() => {})
+	} else if (href.includes('://')) {
+		if (copyLinkValue.value) {
+			uni.setClipboardData({ data: href })
+		}
+	} else {
+		uni.navigateTo({
+			url: href,
+			fail: () => {
+				uni.switchTab({ url: href })
+			}
+		})
+	}
+}
+
+const onRichTextItemClick = (event: UniRichTextItemClickEvent): void => {
+	// #ifdef APP
+	const detail = event.detail as UTSJSONObject
+	// #endif
+	// #ifndef APP
+	const detail = event.detail as any
+	// #endif
+	const src = textValue(detail['src'])
+	const href = textValue(detail['href'])
+	if (src.length > 0) {
+		handleImgTap(cloneAttrs(findNodeByAttr(nodes.value as Array<UTSJSONObject>, 'img', 'src', src)))
+		return
+	}
+	if (href.length > 0) {
+		const node = findNodeByAttr(nodes.value as Array<UTSJSONObject>, 'a', 'href', href)
+		const attrs = cloneAttrs(node)
+		const children = node == null ? null : node['children'] as Array<UTSJSONObject> | null
+		attrs['innerText'] = children == null ? '' : collectText(children)
+		handleLinkTap(attrs)
+	}
+}
+
+const handleMediaError = (payload: UTSJSONObject): void => {
+	emit('error', payload)
+}
+
+const onRootClick = (): void => {
+	emit('tap')
+	emit('click')
+}
+
+const pauseMedia = (): void => {}
+const setPlaybackRate = (_rate: number): void => {}
+
+watch((): string => props.content, (value: string) => {
+	setContent(value, false)
+}, { immediate: true })
+
+defineExpose({
+	nodes,
+	imgList,
+	rootClass,
+	selectableValue,
+	previewImgValue,
+	copyLinkValue,
+	showImgMenuValue,
+	getText,
+	getRect,
+	navigateTo,
+	setContent,
+	parseContent,
+	appendText,
+	closeTag,
+	applyAttrs,
+	getDefaultStyle,
+	resolveUrl,
+	handleImgTap,
+	handleLinkTap,
+	onRichTextItemClick,
+	handleMediaError,
+	onRootClick,
+	pauseMedia,
+	setPlaybackRate
+})
+</script>
+
+<style>
+._root {
+	padding: 1px 0;
+}
+
+._select {
+}
+</style>