vue-editify 0.2.17 → 0.2.19

package/src/core/tool.ts

@@ -1,10 +1,12 @@
-import { App, Component, VNode } from 'vue'
+import { App, Component, Ref, VNode } from 'vue'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { common as DapCommon, string as DapString, color as DapColor, element as DapElement } from 'dap-util'
 import { languages } from '@/hljs'
 import { LocaleType } from '@/locale'
 import { Button, ButtonOptionsItemType, ButtonTypeType } from '@/components/button'
 import { InsertImageUploadErrorType } from '@/components/insertImage'
 import { InsertAttachmentUploadErrorType } from '@/components/insertAttachment'
+import { config as shortcutConfig } from './shortcut'
 
 export type ObjectType = {
 	[key: string]: any
@@ -21,11 +23,18 @@ export type ButtonOptionsConfigType = {
 	backColor?: (string | number | ButtonOptionsItemType)[]
 }
 
+export type ShortcutType = {
+	title: string
+	define: ((event: KeyboardEvent) => boolean | { [code: string]: boolean }) | null
+	operation?: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, isSourceView: Ref<boolean>, isFullScreen: Ref<boolean>, code?: string) => void
+}
+
 export interface MenuButtonType {
 	show?: boolean
 	leftBorder?: boolean
 	rightBorder?: boolean
 	disabled?: boolean
+	shortcut?: ShortcutType
 }
 
 export interface MenuSelectButtonType extends MenuButtonType {
@@ -88,6 +97,7 @@ export type MenuCustomButtonType = {
 	options?: ButtonOptionsItemType[]
 	value?: string | number
 	hideScroll?: boolean
+	shortcut?: ShortcutType
 	onLayerShow?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
@@ -102,11 +112,6 @@ export type CodeBlockToolbarType = {
 }
 
 export type TextToolbarType = {
-	heading?: MenuDisplayButtonType
-	align?: MenuSelectButtonType
-	orderList?: MenuButtonType
-	unorderList?: MenuButtonType
-	task?: MenuButtonType
 	bold?: MenuButtonType
 	italic?: MenuButtonType
 	strikethrough?: MenuButtonType
@@ -116,7 +121,6 @@ export type TextToolbarType = {
 	sub?: MenuButtonType
 	fontSize?: MenuDisplayButtonType
 	fontFamily?: MenuDisplayButtonType
-	lineHeight?: MenuDisplayButtonType
 	foreColor?: MenuSelectButtonType
 	backColor?: MenuSelectButtonType
 	formatClear?: MenuButtonType
@@ -163,7 +167,6 @@ export type MenuSequenceType = {
 	fullScreen?: number
 	attachment?: number
 	mathformula?: number
-	panel?: number
 	infoBlock?: number
 }
 
@@ -211,7 +214,6 @@ export type MenuConfigType = {
 	fullScreen?: MenuButtonType
 	attachment?: MenuAttachmentButtonType
 	mathformula?: MenuMathformulaButtonType
-	panel?: MenuButtonType
 	infoBlock?: MenuButtonType
 	extends?: MenuExtendType
 }
@@ -288,18 +290,6 @@ export const queryHasValue = (obj: ObjectType, name: string, value?: string | nu
 	return ownValue == value
 }
 
-/**
- * 深拷贝函数
- * @param data
- * @returns
- */
-export const cloneData = (data: any) => {
-	if (DapCommon.isObject(data) || Array.isArray(data)) {
-		return JSON.parse(JSON.stringify(data))
-	}
-	return data
-}
-
 /**
  * 获取菜单按钮列表数据配置
  * @param editTrans
@@ -506,7 +496,7 @@ export const getButtonOptionsConfig = (editTrans: (key: string) => any): ButtonO
  * @param editLocale
  * @returns
  */
-export const getToolbarConfig = (editTrans: (key: string) => any, editLocale: LocaleType): ToolbarConfigType => {
+export const getToolbarConfig = (editTrans: (key: string) => any): ToolbarConfigType => {
 	return {
 		//是否使用工具条
 		use: true,
@@ -542,75 +532,6 @@ export const getToolbarConfig = (editTrans: (key: string) => any, editLocale: Lo
 		},
 		//文本工具条配置
 		text: {
-			//标题
-			heading: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//列表配置
-				options: getButtonOptionsConfig(editTrans).heading,
-				//按钮默认显示的值
-				defaultValue: 'p',
-				//浮层宽度
-				width: editLocale == 'zh_CN' ? 130 : 150,
-				//浮层最大高度
-				maxHeight: '',
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
-			//对齐方式
-			align: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//列表配置
-				options: getButtonOptionsConfig(editTrans).align,
-				//浮层宽度
-				width: editLocale == 'zh_CN' ? 110 : 130,
-				//浮层最大高度
-				maxHeight: '',
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
-			//有序列表
-			orderList: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
-			//无序列表
-			unorderList: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
-			//任务列表
-			task: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
 			//粗体
 			bold: {
 				//是否显示此工具
@@ -726,25 +647,6 @@ export const getToolbarConfig = (editTrans: (key: string) => any, editLocale: Lo
 				//右侧边框是否显示
 				rightBorder: false
 			},
-			//行高
-			lineHeight: {
-				//是否显示此工具
-				show: false,
-				//是否禁用此工具
-				disabled: false,
-				//列表配置
-				options: getButtonOptionsConfig(editTrans).lineHeight,
-				//按钮默认显示的值
-				defaultValue: '',
-				//浮层宽度
-				width: 90,
-				//浮层最大高度
-				maxHeight: '',
-				//左侧边框是否显示
-				leftBorder: false,
-				//右侧边框是否显示
-				rightBorder: false
-			},
 			//前景色
 			foreColor: {
 				//是否显示此工具
@@ -754,7 +656,7 @@ export const getToolbarConfig = (editTrans: (key: string) => any, editLocale: Lo
 				//列表配置
 				options: getButtonOptionsConfig(editTrans).foreColor,
 				//左侧边框是否显示
-				leftBorder: false,
+				leftBorder: true,
 				//右侧边框是否显示
 				rightBorder: false
 			},
@@ -832,12 +734,11 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			video: 25,
 			table: 26,
 			codeBlock: 27,
-			sourceView: 28,
-			fullScreen: 29,
-			attachment: 30,
-			mathformula: 31,
-			panel: 32,
-			infoBlock: 33
+			attachment: 28,
+			mathformula: 29,
+			infoBlock: 30,
+			sourceView: 31,
+			fullScreen: 32
 		},
 		//撤销按钮配置
 		undo: {
@@ -878,7 +779,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.heading
 		},
 		//缩进
 		indent: {
@@ -895,7 +798,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.indent
 		},
 		//引用
 		quote: {
@@ -906,7 +811,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.quote
 		},
 		//分隔线
 		separator: {
@@ -917,7 +824,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.separator
 		},
 		//对齐方式
 		align: {
@@ -934,7 +843,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.align
 		},
 		//有序列表
 		orderList: {
@@ -945,7 +856,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.orderList
 		},
 		//无序列表
 		unorderList: {
@@ -956,7 +869,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.unorderList
 		},
 		//任务列表
 		task: {
@@ -967,7 +882,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.task
 		},
 		//粗体
 		bold: {
@@ -978,7 +895,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.bold
 		},
 		//下划线
 		underline: {
@@ -989,7 +908,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.underline
 		},
 		//斜体
 		italic: {
@@ -1000,7 +921,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.italic
 		},
 		//删除线
 		strikethrough: {
@@ -1011,7 +934,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.strikethrough
 		},
 		//行内代码
 		code: {
@@ -1022,7 +947,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.code
 		},
 		//上标
 		super: {
@@ -1033,7 +960,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.super
 		},
 		//下标
 		sub: {
@@ -1044,7 +973,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.sub
 		},
 		//清除格式
 		formatClear: {
@@ -1055,7 +986,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.formatClear
 		},
 		//字号
 		fontSize: {
@@ -1074,7 +1007,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.fontSize
 		},
 		//字体
 		fontFamily: {
@@ -1093,7 +1028,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.fontFamily
 		},
 		//行高
 		lineHeight: {
@@ -1112,7 +1049,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.lineHeight
 		},
 		//前景色
 		foreColor: {
@@ -1125,7 +1064,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.foreColor
 		},
 		//背景色
 		backColor: {
@@ -1138,7 +1079,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.backColor
 		},
 		//链接
 		link: {
@@ -1149,7 +1092,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.link
 		},
 		//图片
 		image: {
@@ -1172,7 +1117,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//自定义上传图片
 			customUpload: undefined,
 			//异常处理函数
-			handleError: undefined
+			handleError: undefined,
+			//快捷键
+			shortcut: shortcutConfig.image
 		},
 		//视频
 		video: {
@@ -1195,7 +1142,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//自定义上传视频
 			customUpload: undefined,
 			//异常处理函数
-			handleError: undefined
+			handleError: undefined,
+			//快捷键
+			shortcut: shortcutConfig.video
 		},
 		//表格
 		table: {
@@ -1210,7 +1159,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//创建时表格的最大行数
 			maxRows: 10,
 			//创建时表格的最大列数
-			maxColumns: 10
+			maxColumns: 10,
+			//快捷键
+			shortcut: shortcutConfig.table
 		},
 		//代码块
 		codeBlock: {
@@ -1221,7 +1172,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.codeBlock
 		},
 		//代码视图
 		sourceView: {
@@ -1232,7 +1185,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.sourceView
 		},
 		//全屏
 		fullScreen: {
@@ -1243,7 +1198,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.fullScreen
 		},
 		//附件
 		attachment: {
@@ -1268,7 +1225,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//自定义上传附件
 			customUpload: undefined,
 			//异常处理函数
-			handleError: undefined
+			handleError: undefined,
+			//快捷键
+			shortcut: shortcutConfig.attachment
 		},
 		//数学公式
 		mathformula: {
@@ -1281,18 +1240,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//右侧边框是否显示
 			rightBorder: false,
 			//异常处理函数
-			handleError: undefined
-		},
-		//面板
-		panel: {
-			//是否显示此按钮
-			show: false,
-			//是否禁用此按钮
-			disabled: false,
-			//左侧边框是否显示
-			leftBorder: false,
-			//右侧边框是否显示
-			rightBorder: false
+			handleError: undefined,
+			//快捷键
+			shortcut: shortcutConfig.mathformula
 		},
 		//信息块
 		infoBlock: {
@@ -1303,7 +1253,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示
-			rightBorder: false
+			rightBorder: false,
+			//快捷键
+			shortcut: shortcutConfig.infoBlock
 		},
 		//拓展菜单
 		extends: {}

package/src/css/var.less

@@ -49,10 +49,6 @@
 	--editify-font-color-disabled: #6d6d6d;
 	//较深的字体颜色（编辑器内容区域字体颜色）
 	--editify-font-color-dark: #fff;
-	//链接字体颜色
-	--editify-font-color-link: #079457;
-	//链接字体悬浮色
-	--editify-font-color-link-dark: #05683d;
 	//边框颜色
 	--editify-border-color: #3e3e3e;
 	//默认背景色
@@ -63,12 +59,6 @@
 	--editify-background-darker: #2c2c2c;
 	//代码块背景色
 	--editify-pre-background: #242424;
-	//反色调字体颜色
-	--editify-reverse-color: #333;
-	//反色调背景色
-	--editify-reverse-background: #f7f8fa;
-	//视频背景色
-	--editify-video-background: #f5f5f5;
 	//代码高亮样式
 	--editify-hljs-color-1: #7765dd;
 	--editify-hljs-color-2: #6a737d;