vue-editify 0.2.13 → 0.2.15

package/src/plugins/attachment/index.ts

@@ -1,237 +0,0 @@
-import { ComponentInternalInstance, h } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
-import { event as DapEvent, common as DapCommon } from 'dap-util'
-import { ObjectType, PluginType } from '@/core/tool'
-import Button from '@/components/button/button.vue'
-import Icon from '@/components/icon/icon.vue'
-import InsertAttachment from './insertAttachment/insertAttachment.vue'
-import { InsertAttachmentUploadErrorType } from './insertAttachment/props'
-import { hasPreInRange } from '@/core/function'
-import { hasMathformulaInRange } from '@/plugins/mathformula'
-
-export type AttachmentOptionsType = {
-	//排序
-	sequence?: number
-	//工具提示内容
-	title?: string
-	//按钮是否显示左侧边框
-	leftBorder?: boolean
-	//按钮是否显示右侧边框
-	rightBorder?: boolean
-	//按钮是否禁用
-	disabled?: boolean
-	//定义可选择的文件类型，默认不限制类型，设定此参数后选择文件时会自动过滤非符合的文件类型
-	accept?: string
-	//支持的类型数组
-	allowedFileType?: string[]
-	//是否多选
-	multiple?: boolean
-	//选择的单个文件最大值，单位kb，不设置将不限制
-	maxSize?: number
-	//选择的单个文件最小值，单位kb，不设置将不限制
-	minSize?: number
-	//是否自定义上传附件
-	customUpload?: ((files: File[]) => string[]) | ((files: File[]) => Promise<string[]>)
-	//处理上传附件异常
-	handleError?: (error: InsertAttachmentUploadErrorType, file: File) => void
-}
-
-/**
- * 元素是否附件
- * @param element
- * @returns
- */
-export const isAttachment = (element: AlexElement) => {
-	if (element.isEmpty()) {
-		return false
-	}
-	return element.parsedom == 'span' && element.type == 'closed' && element.hasMarks() && element.marks!['data-editify-attachment']
-}
-
-/**
- * 选区是否含有附件
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export const hasAttachmentInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
-	if (!editor.range) {
-		return false
-	}
-	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return isAttachment(editor.range.anchor.element)
-	}
-	return dataRangeCaches.flatList.some(item => {
-		return isAttachment(item.element)
-	})
-}
-
-/**
- * 附件插件
- * @param options
- * @returns
- */
-export const attachment = (options?: AttachmentOptionsType) => {
-	if (!DapCommon.isObject(options)) {
-		options = {}
-	}
-	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
-		let isDisabled = false
-		//如果光标选区内有数学公式、代码块则禁用
-		if (editifyInstance.exposed!.editor.value) {
-			isDisabled = hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
-		}
-		return {
-			name: 'attachment',
-			//附件菜单项配置
-			menu: {
-				sequence: options!.sequence || 100,
-				extraDisabled: (name: string) => {
-					//如果光标选区内有附件则禁用链接菜单、代码块菜单
-					if (name == 'link' || name == 'codeBlock') {
-						return hasAttachmentInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
-					}
-					return false
-				},
-				extend: {
-					type: 'select',
-					title: options!.title || editTrans('insertAttachment'),
-					leftBorder: options!.leftBorder,
-					rightBorder: options!.rightBorder,
-					hideScroll: true,
-					active: false,
-					disabled: isDisabled || options!.disabled,
-					default: () => h(Icon, { value: 'attachment' }),
-					layer: (_name: string, btnInstance: InstanceType<typeof Button>) =>
-						h(InsertAttachment, {
-							color: <string | null>editifyInstance.props.color,
-							accept: options!.accept,
-							allowedFileType: options!.allowedFileType || [],
-							multiple: !!options!.multiple,
-							maxSize: options!.maxSize,
-							minSize: options!.minSize,
-							customUpload: options!.customUpload,
-							handleError: options!.handleError,
-							onChange: () => {
-								btnInstance.layerRef!.setPosition()
-							},
-							onInsert: (name: string, urls: string[]) => {
-								//过滤掉空的地址
-								urls = urls.filter(url => {
-									return !!url
-								})
-								//如果有地址存在
-								if (urls.length) {
-									//获取editor对象
-									const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-									//遍历地址数组
-									urls.forEach(url => {
-										const marks: ObjectType = {
-											'data-editify-attachment': url,
-											'data-editify-attachment-name': name || editTrans('attachmentDefaultName')
-										}
-										//创建元素
-										const attachmentElement = AlexElement.create({
-											type: 'closed',
-											parsedom: 'span',
-											marks
-										})
-										//插入编辑器
-										editor.insertElement(attachmentElement)
-										//移动光标到新插入的元素
-										editor.range!.anchor.moveToEnd(attachmentElement)
-										editor.range!.focus.moveToEnd(attachmentElement)
-									})
-									//渲染
-									editor.formatElementStack()
-									editor.domRender()
-									editor.rangeRender()
-								}
-								//关闭浮层
-								btnInstance.show = false
-							}
-						})
-				}
-			},
-			//找到附件元素点击下载
-			updateView: () => {
-				const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-				AlexElement.flatElements(editor.stack).forEach(el => {
-					if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-attachment']) {
-						DapEvent.off(<HTMLElement>el.elm, 'click')
-						//单击下载
-						DapEvent.on(<HTMLElement>el.elm, 'click', async () => {
-							//获取文件地址
-							const url = el.marks!['data-editify-attachment']
-							//使用fetch读取文件地址
-							const res = await fetch(url, {
-								method: 'GET'
-							})
-							//获取blob数据
-							const blob = await res.blob()
-							//创建a标签进行下载
-							const a = document.createElement('a')
-							a.setAttribute('target', '_blank')
-							a.setAttribute('href', URL.createObjectURL(blob))
-							a.setAttribute('download', el.marks!['data-editify-attachment-name'])
-							a.click()
-						})
-					}
-				})
-			},
-			//span含有data-editify-attachment的元素设为自闭合元素
-			customParseNode: (el: AlexElement) => {
-				if (el.hasMarks() && el.marks!['data-editify-attachment'] && el.parsedom == 'span') {
-					el.type = 'closed'
-				}
-				return el
-			},
-			//附件文件自定义保留的标记
-			pasteKeepMarks: el => {
-				const marks: ObjectType = {}
-				if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-attachment']) {
-					marks['data-editify-attachment'] = el.marks!['data-editify-attachment']
-					if (el.marks!['data-editify-attachment-name']) {
-						marks['data-editify-attachment-name'] = el.marks!['data-editify-attachment-name']
-					}
-				}
-				return marks
-			},
-			//自定义渲染规范
-			renderRule: (el: AlexElement) => {
-				if (el.hasMarks() && el.marks!['data-editify-attachment']) {
-					//设置title
-					el.marks!['title'] = editTrans('attachmentDownloadTitle')
-					//如果名称没有则设置名称
-					if (!el.marks!['data-editify-attachment-name']) {
-						el.marks!['data-editify-attachment-name'] = editTrans('attachmentDefaultName')
-					}
-					//获取editor对象
-					const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-					//前一个元素
-					const previousElement = editor.getPreviousElement(el)
-					//后一个元素
-					const newTextElement = editor.getNextElement(el)
-					//如果不存在前一个元素或者前一个元素不是空白元素则设置空白元素
-					if (!previousElement || !previousElement.isSpaceText()) {
-						const spaceText = AlexElement.getSpaceElement()
-						editor.addElementBefore(spaceText, el)
-					}
-					//如果不存在后一个元素或者后一个元素不是空白元素则设置空白元素
-					if (!newTextElement || !newTextElement.isSpaceText()) {
-						const spaceText = AlexElement.getSpaceElement()
-						editor.addElementAfter(spaceText, el)
-					}
-					//如果光标在元素上则更新光标位置
-					if (editor.range && el.isContains(editor.range.anchor.element)) {
-						editor.range.anchor.moveToEnd(editor.getNextElement(el)!)
-					}
-					if (editor.range && el.isContains(editor.range.focus.element)) {
-						editor.range.focus.moveToEnd(editor.getNextElement(el)!)
-					}
-				}
-			}
-		}
-	}
-	return plugin
-}

package/src/plugins/infoBlock/index.ts

@@ -1,238 +0,0 @@
-import { common as DapCommon, color as DapColor } from 'dap-util'
-import { ComponentInternalInstance, h } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
-import { PluginType } from '@/core/tool'
-import Icon from '@/components/icon/icon.vue'
-import { elementToParagraph, hasPreInRange, hasTableInRange } from '@/core/function'
-import { hasPanelInRange } from '@/plugins/panel'
-
-export type InfoBlockOptionsType = {
-	//排序
-	sequence?: number
-	//工具提示内容
-	title?: string
-	//按钮是否显示左侧边框
-	leftBorder?: boolean
-	//按钮是否显示右侧边框
-	rightBorder?: boolean
-	//按钮是否禁用
-	disabled?: boolean
-}
-
-/**
- * 是否信息元素
- * @param el
- * @returns
- */
-export const isInfoBlock = (el: AlexElement) => {
-	return el.parsedom == 'div' && el.hasMarks() && el.marks!['data-editify-info']
-}
-
-/**
- * 判断某个元素是否在信息元素内
- * @param el
- * @returns
- */
-export const isUnderInfoBlock = (el: AlexElement): boolean => {
-	if (isInfoBlock(el)) {
-		return true
-	}
-	if (el.parent) {
-		return isUnderInfoBlock(el.parent)
-	}
-	return false
-}
-
-/**
- * 根据某个元素获取所在的信息元素，如果不在信息元素内则返回null
- * @param el
- * @returns
- */
-export const getInfoBlockElement = (el: AlexElement): AlexElement | null => {
-	if (isInfoBlock(el)) {
-		return el
-	}
-	if (el.parent) {
-		return getInfoBlockElement(el.parent)
-	}
-	return null
-}
-
-/**
- * 选区是否含有信息元素
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export const hasInfoBlockInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
-	if (!editor.range) {
-		return false
-	}
-	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return isUnderInfoBlock(editor.range.anchor.element)
-	}
-	return dataRangeCaches.flatList.some(item => {
-		return isUnderInfoBlock(item.element)
-	})
-}
-
-/**
- * 选区是否都在信息块内
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export const isRangeInInfoBlock = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
-	if (!editor.range) {
-		return false
-	}
-	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return isUnderInfoBlock(editor.range.anchor.element)
-	}
-	return dataRangeCaches.flatList.every(item => {
-		return isUnderInfoBlock(item.element)
-	})
-}
-
-/**
- * 选区是否在某个信息元素下，如果是返回该信息元素否则返回null
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export const getInfoBlockElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
-	if (!editor.range) {
-		return null
-	}
-	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
-		return getInfoBlockElement(editor.range.anchor.element)
-	}
-	const arr = dataRangeCaches.list.map(item => {
-		return getInfoBlockElement(item.element)
-	})
-	let hasNull = arr.some(el => {
-		return el == null
-	})
-	//如果存在null，则表示有的选区元素不在公式元素下，返回null
-	if (hasNull) {
-		return null
-	}
-	//如果只有一个元素，则返回该元素
-	if (arr.length == 1) {
-		return arr[0]!
-	}
-	//默认数组中的元素都相等
-	let flag = true
-	for (let i = 1; i < arr.length; i++) {
-		if (!arr[i]!.isEqual(arr[0]!)) {
-			flag = false
-			break
-		}
-	}
-	//如果相等，则返回该元素
-	if (flag) {
-		return arr[0]
-	}
-	return null
-}
-
-/**
- * 信息插件
- * @param options
- * @returns
- */
-export const infoBlock = (options?: InfoBlockOptionsType) => {
-	if (!DapCommon.isObject(options)) {
-		options = {}
-	}
-	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
-		let isDisabled: boolean = false
-		//光标在表格、代码块和面板中则禁用
-		if (editifyInstance.exposed!.editor.value) {
-			isDisabled = hasTableInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPanelInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
-		}
-		return {
-			//插件名称
-			name: 'infoBlock',
-			//菜单项配置
-			menu: {
-				sequence: options!.sequence || 103,
-				extend: {
-					type: 'default',
-					title: options!.title || editTrans('insertInfoBlock'),
-					leftBorder: options!.leftBorder,
-					rightBorder: options!.rightBorder,
-					hideScroll: true,
-					active: editifyInstance.exposed!.editor.value ? isRangeInInfoBlock(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
-					disabled: isDisabled || options!.disabled,
-					default: () => h(Icon, { value: 'info' }),
-					onOperate: () => {
-						const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-						const dataRangeCaches = <AlexElementsRangeType>editifyInstance.exposed!.dataRangeCaches.value
-						//是否都在引用里
-						const flag = isRangeInInfoBlock(editor, dataRangeCaches)
-						//起点和终点在一起
-						if (editor.range!.anchor.isEqual(editor.range!.focus)) {
-							const block = editor.range!.anchor.element.getBlock()
-							elementToParagraph(block)
-							if (!flag) {
-								block.parsedom = 'div'
-								block.marks = {
-									'data-editify-info': 'true'
-								}
-							}
-						}
-						//起点和终点不在一起
-						else {
-							let blocks: AlexElement[] = []
-							dataRangeCaches.list.forEach(item => {
-								const block = item.element.getBlock()
-								const exist = blocks.some(el => block.isEqual(el))
-								if (!exist) {
-									blocks.push(block)
-								}
-							})
-							blocks.forEach(block => {
-								elementToParagraph(block)
-								if (!flag) {
-									block.parsedom = 'div'
-									block.marks = {
-										'data-editify-info': 'true'
-									}
-								}
-							})
-						}
-						//渲染
-						editor.formatElementStack()
-						editor.domRender()
-						editor.rangeRender()
-					}
-				}
-			},
-			//粘贴保留的属性
-			pasteKeepMarks: (element: AlexElement) => {
-				if (isInfoBlock(element)) {
-					return {
-						'data-editify-info': 'true'
-					}
-				}
-				return {}
-			},
-			renderRule: (el: AlexElement) => {
-				if (isInfoBlock(el)) {
-					const color = DapColor.hex2rgb(editifyInstance.props.color as string)
-					if (el.hasStyles()) {
-						el.styles!['background-color'] = `rgba(${color[0]},${color[1]},${color[2]},0.15)`
-						el.styles!['color'] = editifyInstance.props.color
-					} else {
-						el.styles = {
-							'background-color': `rgba(${color[0]},${color[1]},${color[2]},0.15)`,
-							color: editifyInstance.props.color
-						}
-					}
-				}
-			}
-		}
-	}
-	return plugin
-}