vue-editify 0.1.26 → 0.1.29

package/src/core/tool.ts

@@ -198,8 +198,15 @@ export type MenuConfigType = {
 	extends?: MenuExtendType
 }
 
+export type PluginMenuConfigType = {
+	extraDisabled?: ((name: string) => boolean) | null
+	sequence: number
+	extend: MenuCustomButtonType
+}
+
 export type PluginResultType = {
-	menu?: MenuConfigType
+	name: string
+	menu?: PluginMenuConfigType
 	updateView?: () => void
 	customParseNode?: (element: AlexElement) => AlexElement
 	renderRule?: (el: AlexElement) => void
@@ -209,7 +216,9 @@ export type PluginResultType = {
 
 export type PluginType = (editifyInstance: ComponentInternalInstance, color: string | null, editTrans: (key: string) => any) => PluginResultType
 
-//粘贴html时保留的数据
+/**
+ * 粘贴html时保留的数据
+ */
 export const pasteKeepData: ObjectType = {
 	//粘贴html时元素保留的样式（全部元素）
 	marks: {
@@ -237,7 +246,12 @@ export const pasteKeepData: ObjectType = {
 	}
 }
 
-//对象平替值方法
+/**
+ * 对象平替值方法
+ * @param o1
+ * @param o2
+ * @returns
+ */
 export const mergeObject = function (o1: ObjectType, o2: ObjectType) {
 	if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
 		return null
@@ -255,7 +269,13 @@ export const mergeObject = function (o1: ObjectType, o2: ObjectType) {
 	return o1
 }
 
-//判断对象是否含有某个属性或者属性值是否一致
+/**
+ * 判断对象是否含有某个属性或者属性值是否一致
+ * @param obj
+ * @param name
+ * @param value
+ * @returns
+ */
 export const queryHasValue = function (obj: ObjectType, name: string, value?: string | number) {
 	//如果value不存在则判断是否拥有属性name
 	if (value == null || value == undefined) {
@@ -296,7 +316,11 @@ export const queryHasValue = function (obj: ObjectType, name: string, value?: st
 	return ownValue == value
 }
 
-//深拷贝函数
+/**
+ * 深拷贝函数
+ * @param data
+ * @returns
+ */
 export const cloneData = function (data: any) {
 	if (DapCommon.isObject(data) || Array.isArray(data)) {
 		return JSON.parse(JSON.stringify(data))
@@ -304,7 +328,11 @@ export const cloneData = function (data: any) {
 	return data
 }
 
-//根据行元素获取colgroup的col数量
+/**
+ * 根据行元素获取colgroup的col数量
+ * @param row
+ * @returns
+ */
 export const getColNumbers = function (row: AlexElement) {
 	const children = row.children || []
 	let num = 0
@@ -321,7 +349,11 @@ export const getColNumbers = function (row: AlexElement) {
 	return num
 }
 
-//获取菜单按钮列表数据配置
+/**
+ * 获取菜单按钮列表数据配置
+ * @param editTrans
+ * @returns
+ */
 export const getButtonOptionsConfig = function (editTrans: (key: string) => any): ButtonOptionsConfigType {
 	return {
 		//标题配置
@@ -517,7 +549,12 @@ export const getButtonOptionsConfig = function (editTrans: (key: string) => any)
 	}
 }
 
-//工具条全量配置
+/**
+ * 工具条全量配置
+ * @param editTrans
+ * @param editLocale
+ * @returns
+ */
 export const getToolbarConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): ToolbarConfigType {
 	return {
 		//是否使用工具条
@@ -762,7 +799,12 @@ export const getToolbarConfig = function (editTrans: (key: string) => any, editL
 	}
 }
 
-//菜单栏全量配置
+/**
+ * 菜单栏全量配置
+ * @param editTrans
+ * @param editLocale
+ * @returns
+ */
 export const getMenuConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): MenuConfigType {
 	return {
 		//是否使用菜单栏

package/src/editify/editify.less

@@ -348,7 +348,7 @@
 			color: @font-color-link;
 			transition: all 200ms;
 			position: relative;
-			padding: 0 2px;
+			padding: 0 10px;
 			font-size: 14px;
 			vertical-align: baseline;
 
@@ -378,6 +378,7 @@
 			&.editify-placeholder::before {
 				cursor: auto;
 			}
+
 			:deep(a) {
 				cursor: pointer;
 			}

package/src/editify/editify.vue

@@ -5,7 +5,7 @@
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
 		<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
 			<!-- 编辑器 -->
-			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
+			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': disabled }" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
 			<!-- 代码视图 -->
 			<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
 			<!-- 工具条 -->
@@ -41,12 +41,10 @@ const instance = getCurrentInstance()!
 //属性
 const props = defineProps(EditifyProps)
 //事件
-const emits = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'keydown', 'insertparagraph', 'rangeupdate', 'updateview'])
+const emits = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'keydown', 'keyup', 'insertparagraph', 'rangeupdate', 'updateview'])
 
 //设置国际化方法
 const $editTrans = trans(props.locale || 'zh_CN')
-//对子孙后代组件提供国际化方法
-provide('$editTrans', $editTrans)
 
 //是否编辑器内部修改值
 const isModelChange = ref<boolean>(false)
@@ -135,15 +133,7 @@ const pluginResultList = computed<PluginResultType[]>(() => {
 })
 //最终生效的菜单栏配置
 const menuConfig = computed<MenuConfigType>(() => {
-	let menu: MenuConfigType = {}
-	//注册插件：自定义菜单栏
-	pluginResultList.value.forEach(pluginResult => {
-		menu = <MenuConfigType>mergeObject(menu, pluginResult.menu || {})
-	})
-	//加入自定义menu配置
-	menu = <MenuConfigType>mergeObject(menu, props.menu || {})
-	//返回最终配置
-	return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), menu)
+	return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {})
 })
 
 //编辑器内部修改值的方法
@@ -303,6 +293,8 @@ const createEditor = () => {
 	editor.value.on('change', handleEditorChange)
 	editor.value.on('focus', handleEditorFocus)
 	editor.value.on('blur', handleEditorBlur)
+	editor.value.on('keydown', handleEditorKeydown)
+	editor.value.on('keyup', handleEditorKeyup)
 	editor.value.on('insertParagraph', handleInsertParagraph)
 	editor.value.on('rangeUpdate', handleRangeUpdate)
 	editor.value.on('deleteInStart', handleDeleteInStart)
@@ -522,7 +514,7 @@ const handleCustomParseNode = (ele: AlexElement) => {
 	return ele
 }
 //编辑区域键盘按下：设置缩进快捷键
-const handleEditorKeydown = (e: Event) => {
+const handleEditorKeydown = (val: string, e: Event) => {
 	if (props.disabled) {
 		return
 	}
@@ -535,7 +527,15 @@ const handleEditorKeydown = (e: Event) => {
 		editor.value!.rangeRender()
 	}
 	//自定义键盘按下操作
-	emits('keydown', e)
+	emits('keydown', val, e)
+}
+//编辑区域键盘松开
+const handleEditorKeyup = (val: string, e: Event) => {
+	if (props.disabled) {
+		return
+	}
+	//自定义键盘松开操作
+	emits('keyup', val, e)
 }
 //点击编辑器：处理图片和视频的光标聚集
 const handleEditorClick = (e: Event) => {
@@ -625,8 +625,8 @@ const handleEditorFocus = (val: string) => {
 const handleInsertParagraph = (element: AlexElement, previousElement: AlexElement) => {
 	//两个元素不一致，则表示不在代码块样式内
 	if (!element.isEqual(previousElement)) {
-		//前一个块元素如果是只包含换行符的元素，并且当前块元素也是包含换行符的元素，则当前块元素转为段落
-		if (previousElement.isOnlyHasBreak() && element.isOnlyHasBreak()) {
+		//前一个根级块元素如果是只包含换行符的元素，并且当前根级块元素也是包含换行符的元素，则当前根级块元素转为段落
+		if (previousElement.isBlock() && element.isBlock() && previousElement.isOnlyHasBreak() && element.isOnlyHasBreak()) {
 			if (previousElement.parsedom != AlexElement.BLOCK_NODE) {
 				elementToParagraph(previousElement)
 				editor.value!.range!.anchor.moveToStart(previousElement)
@@ -674,6 +674,7 @@ const handleRangeUpdate = () => {
 			}
 		}
 	}, 200)
+	//触发rangeupdate事件
 	emits('rangeupdate')
 }
 //编辑器部分删除情景(在编辑器起始处)
@@ -830,6 +831,7 @@ onBeforeUnmount(() => {
 	editor.value!.destroy()
 })
 
+provide('$editTrans', $editTrans)
 provide('editify', instance)
 provide('isSourceView', isSourceView)
 provide('isFullScreen', isFullScreen)
@@ -837,6 +839,7 @@ provide('canUseMenu', canUseMenu)
 provide('editor', editor)
 provide('dataRangeCaches', dataRangeCaches)
 provide('showBorder', showBorder)
+provide('pluginResultList', pluginResultList)
 
 defineExpose({
 	editor,

package/src/hljs/index.ts

@@ -74,7 +74,12 @@ export type LanguagesItemType = {
 	value?: string
 }
 
-//获取经过hljs处理的html元素
+/**
+ * 获取经过hljs处理的html元素
+ * @param code
+ * @param language
+ * @returns
+ */
 export const getHljsHtml = function (code: string, language: string) {
 	if (language) {
 		return hljs.highlight(code, {
@@ -84,7 +89,9 @@ export const getHljsHtml = function (code: string, language: string) {
 	}
 	return hljs.highlightAuto(code).value
 }
-//可选择语言列表
+/**
+ * 可选择语言列表
+ */
 export const languages: LanguagesItemType[] = [
 	{
 		label: 'Plain Text',

package/src/index.ts

@@ -9,7 +9,7 @@ export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, But
 export type { InsertImageUploadErrorType } from './components/insertImage/props'
 export type { InsertVideoUploadErrorType } from './components/insertVideo/props'
 export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginType, PluginResultType } from './core/tool'
-//插件相关类型
+//导出插件相关类型
 export type { AttachmentOptionsType } from './plugins/attachment'
 export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props'
 
@@ -21,13 +21,15 @@ const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.26'
+const version = '0.1.29'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
 
+//导出插件
+export { attachment } from './plugins/attachment'
+
 //导出组件和安装函数
 export { install as default, install, Editify, version }
 
-//导出插件
-export { attachment } from './plugins/attachment'
+console.log(`%c vue-editify %c v${version} `, 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;')

package/src/locale/en_US.ts

@@ -90,7 +90,8 @@ export const en_US: ObjectType = {
 	insertAttachment: 'Insert attachment',
 	uploadAttachment: 'Upload',
 	remoteAttachment: 'Remote',
+	attachmentNamePlaceholder: 'Please enter the attachment name',
 	attachmentUrlPlaceholder: 'Please enter the attachment address',
-	downloadAttachment: 'Click to download attachment',
-	attachmentDownloadName: 'attachment'
+	attachmentDownloadTitle: 'Click to download attachment',
+	attachmentDefaultName: 'attachment'
 }

package/src/locale/index.ts

@@ -1,10 +1,13 @@
 import { en_US } from './en_US'
 import { zh_CN } from './zh_CN'
 
-//语言类型
 export type LocaleType = 'zh_CN' | 'en_US'
 
-//翻译方法
+/**
+ * 翻译方法
+ * @param locale
+ * @returns
+ */
 export const trans = (locale: LocaleType) => {
 	return (key: string) => {
 		return { zh_CN, en_US }[locale][key]

package/src/locale/zh_CN.ts

@@ -90,7 +90,8 @@ export const zh_CN: ObjectType = {
 	insertAttachment: '插入附件',
 	uploadAttachment: '上传附件',
 	remoteAttachment: '远程地址',
-	attachmentUrlPlaceholder: '请输入远程地址',
-	downloadAttachment: '点击下载附件',
-	attachmentDownloadName: '附件'
+	attachmentNamePlaceholder: '请输入附件名称',
+	attachmentUrlPlaceholder: '请输入附件地址',
+	attachmentDownloadTitle: '点击下载附件',
+	attachmentDefaultName: '附件'
 }

package/src/plugins/attachment/index.ts

@@ -1,5 +1,5 @@
 import { ComponentInternalInstance, h } from 'vue'
-import { AlexEditor, AlexElement } from 'alex-editor'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { ObjectType, PluginType } from '../../core/tool'
 import Layer from '../../components/layer/layer.vue'
 import Button from '../../components/button/button.vue'
@@ -7,7 +7,7 @@ import Icon from '../../components/icon/icon.vue'
 import InsertAttachment from './insertAttachment/insertAttachment.vue'
 import { InsertAttachmentUploadErrorType } from './insertAttachment/props'
 import { event as DapEvent, common as DapCommon } from 'dap-util'
-import { hasPreInRange } from '../../core/function'
+import { hasLinkInRange, hasPreInRange, hasQuoteInRange } from '../../core/function'
 
 export type AttachmentOptionsType = {
 	//排序
@@ -19,7 +19,7 @@ export type AttachmentOptionsType = {
 	//按钮是否显示右侧边框
 	rightBorder?: boolean
 	//定义可选择的文件类型，默认不限制类型，设定此参数后选择文件时会自动过滤非符合的文件类型
-	accept?: 'rar' | 'zip' | 'txt' | 'image' | 'video' | 'audio' | 'html' | 'doc' | 'xml' | 'js' | 'json' | 'ppt' | 'pdf' | null
+	accept?: string
 	//支持的类型数组
 	allowedFileType?: string[]
 	//是否多选
@@ -34,42 +34,90 @@ export type AttachmentOptionsType = {
 	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-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, color: string | null, editTrans: (key: string) => any) => {
+		let isDisabled = false
+		//如果光标范围内有链接、代码块和引用则禁用
+		if (editifyInstance.exposed!.editor.value) {
+			isDisabled = hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasQuoteInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+		}
 		return {
+			name: 'attachment',
 			//附件菜单项配置
 			menu: {
-				sequence: {
-					attachment: options!.sequence || 100
+				sequence: options!.sequence || 100,
+				extraDisabled: (name: string) => {
+					//如果光标选区内有附件则禁用链接菜单和引用菜单
+					if (name == 'link' || name == 'quote') {
+						return hasAttachmentInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+					}
+					return false
 				},
-				extends: {
-					attachment: {
-						type: 'select',
-						title: options!.title || editTrans('insertAttachment'),
-						leftBorder: options!.leftBorder,
-						rightBorder: options!.rightBorder,
-						disabled: editifyInstance.exposed!.editor.value ? hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
-						default: () => h(Icon, { value: 'attachment' }),
-						layer: (_name: string, btnInstance: InstanceType<typeof Button>) =>
-							h(InsertAttachment, {
-								color: color,
-								accept: options!.accept,
-								allowedFileType: options!.allowedFileType || [],
-								multiple: !!options!.multiple,
-								maxSize: options!.maxSize,
-								minSize: options!.minSize,
-								customUpload: options!.customUpload,
-								handleError: options!.handleError,
-								onChange: () => {
-									;(<InstanceType<typeof Layer>>btnInstance.$refs.layerRef).setPosition()
-								},
-								onInsert: (url: string) => {
+				extend: {
+					type: 'select',
+					title: options!.title || editTrans('insertAttachment'),
+					leftBorder: options!.leftBorder,
+					rightBorder: options!.rightBorder,
+					hideScroll: true,
+					disabled: isDisabled,
+					default: () => h(Icon, { value: 'attachment' }),
+					layer: (_name: string, btnInstance: InstanceType<typeof Button>) =>
+						h(InsertAttachment, {
+							color: color,
+							accept: options!.accept,
+							allowedFileType: options!.allowedFileType || [],
+							multiple: !!options!.multiple,
+							maxSize: options!.maxSize,
+							minSize: options!.minSize,
+							customUpload: options!.customUpload,
+							handleError: options!.handleError,
+							onChange: () => {
+								;(<InstanceType<typeof Layer>>btnInstance.$refs.layerRef).setPosition()
+							},
+							onInsert: (name: string, url: string) => {
+								//如果地址存在
+								if (url) {
 									const marks: ObjectType = {
 										'data-attachment': url,
-										'data-attachment-name': editTrans('attachmentDownloadName'),
+										'data-attachment-name': name || editTrans('attachmentDefaultName'),
 										contenteditable: 'false'
 									}
 									//创建元素
@@ -91,11 +139,11 @@ export const attachment = (options?: AttachmentOptionsType) => {
 									editor.formatElementStack()
 									editor.domRender()
 									editor.rangeRender()
-									//关闭浮层
-									btnInstance.show = false
 								}
-							})
-					}
+								//关闭浮层
+								btnInstance.show = false
+							}
+						})
 				}
 			},
 			//找到附件元素点击下载
@@ -104,11 +152,21 @@ export const attachment = (options?: AttachmentOptionsType) => {
 				AlexElement.flatElements(editor.stack).forEach(el => {
 					if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-attachment']) {
 						DapEvent.off(<HTMLElement>el.elm, 'click')
-						DapEvent.on(<HTMLElement>el.elm, 'click', () => {
+						//单击下载
+						DapEvent.on(<HTMLElement>el.elm, 'click', async () => {
+							//获取文件地址
 							const url = el.marks!['data-attachment']
+							//使用fetch读取文件地址
+							const res = await fetch(url, {
+								method: 'GET'
+							})
+							//获取blob数据
+							const blob = await res.blob()
+							//创建a标签进行下载
 							const a = document.createElement('a')
-							a.setAttribute('href', url)
-							a.setAttribute('download', editTrans('attachmentDownloadName'))
+							a.setAttribute('target', '_blank')
+							a.setAttribute('href', URL.createObjectURL(blob))
+							a.setAttribute('download', el.marks!['data-attachment-name'])
 							a.click()
 						})
 					}
@@ -130,7 +188,7 @@ export const attachment = (options?: AttachmentOptionsType) => {
 			renderRule: (el: AlexElement) => {
 				if (el.type == 'closed' && el.hasMarks() && el.marks!['data-attachment']) {
 					//设置title
-					el.marks!['title'] = editTrans('downloadAttachment')
+					el.marks!['title'] = editTrans('attachmentDownloadTitle')
 					//获取editor对象
 					const editor = <AlexEditor>editifyInstance.exposed!.editor.value
 					//前一个元素

package/src/plugins/attachment/insertAttachment/insertAttachment.less

@@ -8,9 +8,10 @@
 		justify-content: flex-start;
 		align-items: center;
 		width: 100%;
-		margin-bottom: 20px;
+		margin-bottom: 10px;
 		position: relative;
 		padding-bottom: 6px;
+		user-select: none;
 
 		.editify-attachment-header-slider {
 			position: absolute;
@@ -107,29 +108,57 @@
 
 	.editify-attachment-upload {
 		display: flex;
-		justify-content: center;
-		align-items: center;
+		justify-content: space-between;
+		align-items: flex-end;
 		width: 100%;
 		padding: 15px 0;
-		font-size: 36px;
-		opacity: 0.8;
-		transition: all 200ms;
-		position: relative;
 
-		&:hover {
-			cursor: pointer;
-			opacity: 1;
+		input[type='text'] {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: block;
+			width: 100%;
+			margin: 0;
+			padding: 4px 2px;
+			border: none;
+			font-size: @font-size;
+			color: @font-color;
+			border-bottom: 1px solid @border-color;
+			line-height: 1.5;
+			transition: border-color 500ms;
+			background-color: transparent;
+			outline: none;
+			box-sizing: border-box;
+
+			&::-webkit-input-placeholder,
+			&::placeholder {
+				color: @font-color-disabled;
+				font-family: inherit;
+				font-size: inherit;
+				vertical-align: middle;
+			}
 		}
 
-		input {
-			opacity: 0;
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 1;
-			cursor: pointer;
+		.editify-attachment-btn {
+			position: relative;
+			font-size: 20px;
+			line-height: 1;
+			opacity: 0.8;
+			transition: all 200ms;
+			color: @font-color;
+			border-radius: 2px;
+			padding: 2px;
+			margin-left: 15px;
+
+			&:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+
+			input[type='file'] {
+				display: none;
+			}
 		}
 	}
 }