vue-editify 0.1.10 → 0.1.12

package/src/core/{tool.js → tool.ts}

@@ -1,8 +1,203 @@
 import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
 import { languages } from '../hljs'
+import { AlexElement } from 'alex-editor'
+import { ButtonOptionsItemType, ButtonTypeType } from '../components/button/props'
+import { LocaleType } from '../locale'
+import { InsertImageUploadErrorType } from '../components/insertImage/props'
+import { Slot } from 'vue'
+import Button from '../components/button/button.vue'
+
+export type ObjectType = {
+	[key: string]: any
+}
+
+export type ButtonOptionsConfigType = {
+	heading?: (string | number | ButtonOptionsItemType)[]
+	indent?: (string | number | ButtonOptionsItemType)[]
+	align?: (string | number | ButtonOptionsItemType)[]
+	fontSize?: (string | number | ButtonOptionsItemType)[]
+	fontFamily?: (string | number | ButtonOptionsItemType)[]
+	lineHeight?: (string | number | ButtonOptionsItemType)[]
+	foreColor?: (string | number | ButtonOptionsItemType)[]
+	backColor?: (string | number | ButtonOptionsItemType)[]
+}
+
+export interface MenuButtonType {
+	show?: boolean
+	leftBorder?: boolean
+	rightBorder?: boolean
+}
+
+export interface MenuSelectButtonType extends MenuButtonType {
+	options?: (string | number | ButtonOptionsItemType)[]
+	width?: number | ''
+	maxHeight?: number | ''
+}
+
+export interface MenuDisplayButtonType extends MenuSelectButtonType {
+	defaultValue?: string | number
+}
+
+export interface MenuImageButtonType extends MenuButtonType {
+	accept?: string[]
+	multiple?: boolean
+	maxSize?: number | null
+	minSize?: number | null
+	customUpload?: (((files: File[]) => string[]) | Promise<string[]>) | null
+	handleError?: ((error: InsertImageUploadErrorType, file: File) => void) | null
+}
+
+export interface MenuVideoButtonType extends MenuButtonType {
+	accept?: string[]
+	multiple?: boolean
+	maxSize?: number | null
+	minSize?: number | null
+	customUpload?: (((files: File[]) => string[]) | Promise<string[]>) | null
+	handleError?: ((error: InsertImageUploadErrorType, file: File) => void) | null
+}
+
+export interface MenuTableButtonType extends MenuButtonType {
+	maxRows?: number
+	maxColumns?: number
+}
+
+export type MenuCustomButtonType = {
+	type: ButtonTypeType
+	title?: string
+	leftBorder?: boolean
+	rightBorder?: boolean
+	disabled?: boolean
+	active?: boolean
+	width?: number
+	maxHeight?: number
+	options?: ButtonOptionsItemType[]
+	value?: string | number
+	hideScroll?: boolean
+	onLayerShow?: (name: string, btnInstance: InstanceType<typeof Button>) => void
+	onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
+	onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
+	onOperate?: (name: string, value: string | number | undefined, btnInstance: InstanceType<typeof Button>) => void
+	default?: Slot
+	layer?: Slot
+	option?: Slot
+}
+
+export type CodeBlockToolbarType = {
+	languages?: MenuSelectButtonType
+}
+
+export type TextToolbarType = {
+	heading?: MenuDisplayButtonType
+	align?: MenuSelectButtonType
+	orderList?: MenuButtonType
+	unorderList?: MenuButtonType
+	task?: MenuButtonType
+	bold?: MenuButtonType
+	italic?: MenuButtonType
+	strikethrough?: MenuButtonType
+	underline?: MenuButtonType
+	code?: MenuButtonType
+	super?: MenuButtonType
+	sub?: MenuButtonType
+	fontSize?: MenuDisplayButtonType
+	fontFamily?: MenuDisplayButtonType
+	lineHeight?: MenuDisplayButtonType
+	foreColor?: MenuSelectButtonType
+	backColor?: MenuSelectButtonType
+	formatClear?: MenuButtonType
+}
+
+export type ToolbarConfigType = {
+	use?: boolean
+	style?: ObjectType | null
+	tooltip?: boolean
+	codeBlock?: CodeBlockToolbarType
+	text?: TextToolbarType
+	extraDisabled?: ((name: string) => boolean) | null
+}
+
+export type MenuSequenceType = {
+	[key: string]: number
+	undo: number
+	redo: number
+	heading: number
+	indent: number
+	quote: number
+	align: number
+	orderList: number
+	unorderList: number
+	task: number
+	bold: number
+	underline: number
+	italic: number
+	strikethrough: number
+	code: number
+	super: number
+	sub: number
+	formatClear: number
+	fontSize: number
+	fontFamily: number
+	lineHeight: number
+	foreColor: number
+	backColor: number
+	link: number
+	image: number
+	video: number
+	table: number
+	codeBlock: number
+	sourceView: number
+	fullScreen: number
+}
+
+export type MenuModeType = 'default' | 'inner' | 'fixed'
+
+export type MenuConfigType = {
+	use?: boolean
+	tooltip?: boolean
+	mode?: MenuModeType
+	extraDisabled?: ((name: string) => boolean) | null
+	style?: ObjectType | null
+	sequence?: MenuSequenceType
+	undo?: MenuButtonType
+	redo?: MenuButtonType
+	heading?: MenuDisplayButtonType
+	indent?: MenuSelectButtonType
+	quote?: MenuButtonType
+	align?: MenuSelectButtonType
+	orderList?: MenuButtonType
+	unorderList?: MenuButtonType
+	task?: MenuButtonType
+	bold?: MenuButtonType
+	underline?: MenuButtonType
+	italic?: MenuButtonType
+	strikethrough?: MenuButtonType
+	code?: MenuButtonType
+	super?: MenuButtonType
+	sub?: MenuButtonType
+	formatClear?: MenuButtonType
+	fontSize?: MenuDisplayButtonType
+	fontFamily?: MenuDisplayButtonType
+	lineHeight?: MenuDisplayButtonType
+	foreColor?: MenuSelectButtonType
+	backColor?: MenuSelectButtonType
+	link?: MenuButtonType
+	image?: MenuImageButtonType
+	video?: MenuVideoButtonType
+	table?: MenuTableButtonType
+	//代码块
+	codeBlock?: MenuButtonType
+	//代码视图
+	sourceView?: MenuButtonType
+	//全屏
+	fullScreen?: MenuButtonType
+	//拓展菜单，每个key表示拓展菜单的唯一名称，value是对象，包含type/title/rightBorder/leftBorder/disabled/active/width/maxHeight/options/value/hideScroll/onLayerShow/onLayerShown/onLayerHidden/onOperate/default/layer/option属性
+	extends?: {
+		[name: string]: MenuCustomButtonType
+	}
+}
 
 //粘贴html时保留的数据
-export const pasteKeepData = {
+export const pasteKeepData: ObjectType = {
 	//粘贴html时元素保留的样式（全部元素）
 	marks: {
 		'data-editify-list': ['div'],
@@ -29,127 +224,8 @@ export const pasteKeepData = {
 	}
 }
 
-//编辑器props属性
-export const editorProps = {
-	//编辑器内容
-	modelValue: {
-		type: String,
-		default: '<p><br></p>'
-	},
-	//占位符
-	placeholder: {
-		type: String,
-		default: ''
-	},
-	//是否自动获取焦点
-	autofocus: {
-		type: Boolean,
-		default: false
-	},
-	//是否禁用编辑器
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	//是否允许复制
-	allowCopy: {
-		type: Boolean,
-		default: true
-	},
-	//是否允许粘贴
-	allowPaste: {
-		type: Boolean,
-		default: true
-	},
-	//是否允许剪切
-	allowCut: {
-		type: Boolean,
-		default: true
-	},
-	//是否允许粘贴html
-	allowPasteHtml: {
-		type: Boolean,
-		default: false
-	},
-	//是否显示边框
-	border: {
-		type: Boolean,
-		default: false
-	},
-	//主题色
-	color: {
-		type: String,
-		default: '#03a8f3',
-		validator(value) {
-			return DapCommon.matchingText(value, 'hex')
-		}
-	},
-	//视频宽高比
-	videoRatio: {
-		type: Number,
-		default: 16 / 9
-	},
-	//工具条按钮设置
-	toolbar: {
-		type: Object,
-		default: null
-	},
-	//是否显示字数统计
-	showWordLength: {
-		type: Boolean,
-		default: false
-	},
-	//自定义粘贴图片
-	customImagePaste: {
-		type: Function,
-		default: null
-	},
-	//自定义粘贴视频
-	customVideoPaste: {
-		type: Function,
-		default: null
-	},
-	//菜单栏配置
-	menu: {
-		type: Object,
-		default: null
-	},
-	//粘贴html时额外保留的标记（全部元素生效）
-	pasteKeepMarks: {
-		type: Object,
-		default: null
-	},
-	//粘贴html时额外保留的样式（仅在非文本元素生效）
-	pasteKeepStyles: {
-		type: Object,
-		default: null
-	},
-	//自定义node转元素时的处理
-	customParseNode: {
-		type: Function,
-		default: null
-	},
-	//自定义额外的渲染规范
-	renderRules: {
-		type: Array,
-		default: function () {
-			return []
-		}
-	},
-	//自适应高度
-	autoheight: {
-		type: Boolean,
-		default: false
-	},
-	//是否使用tab快捷键
-	tab: {
-		type: Boolean,
-		default: true
-	}
-}
-
 //对象平替值方法
-export const mergeObject = function (o1, o2) {
+export const mergeObject = function (o1: ObjectType, o2: ObjectType) {
 	if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
 		return null
 	}
@@ -167,7 +243,7 @@ export const mergeObject = function (o1, o2) {
 }
 
 //判断对象是否含有某个属性或者属性值是否一致
-export const queryHasValue = function (obj, name, value) {
+export const queryHasValue = function (obj: ObjectType, name: string, value?: string | number) {
 	//如果value不存在则判断是否拥有属性name
 	if (value == null || value == undefined) {
 		return obj.hasOwnProperty(name)
@@ -208,7 +284,7 @@ export const queryHasValue = function (obj, name, value) {
 }
 
 //深拷贝函数
-export const cloneData = function (data) {
+export const cloneData = function (data: any) {
 	if (DapCommon.isObject(data) || Array.isArray(data)) {
 		return JSON.parse(JSON.stringify(data))
 	}
@@ -216,12 +292,12 @@ export const cloneData = function (data) {
 }
 
 //根据行元素获取colgroup的col数量
-export const getColNumbers = function (row) {
-	const children = row?.children || []
+export const getColNumbers = function (row: AlexElement) {
+	const children = row.children || []
 	let num = 0
 	children.forEach(td => {
-		if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
-			const span = Number(td.marks.colspan)
+		if (td.hasMarks() && td.marks!.hasOwnProperty('colspan')) {
+			const span = Number(td.marks!.colspan)
 			if (!isNaN(span)) {
 				num += span
 			}
@@ -233,7 +309,7 @@ export const getColNumbers = function (row) {
 }
 
 //获取菜单按钮列表数据配置
-export const getButtonOptionsConfig = function (editTrans) {
+export const getButtonOptionsConfig = function (editTrans: (key: string) => any): ButtonOptionsConfigType {
 	return {
 		//标题配置
 		heading: [
@@ -429,7 +505,7 @@ export const getButtonOptionsConfig = function (editTrans) {
 }
 
 //工具条全量配置
-export const getToolbarConfig = function (editTrans, editLocale) {
+export const getToolbarConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): ToolbarConfigType {
 	return {
 		//是否使用工具条
 		use: true,
@@ -468,7 +544,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: true,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).heading,
+				options: getButtonOptionsConfig(editTrans).heading,
 				//按钮默认显示的值
 				defaultValue: 'p',
 				//浮层宽度
@@ -485,7 +561,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: false,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).align,
+				options: getButtonOptionsConfig(editTrans).align,
 				//浮层宽度
 				width: editLocale == 'zh_CN' ? 110 : 130,
 				//浮层最大高度
@@ -590,7 +666,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: true,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
+				options: getButtonOptionsConfig(editTrans).fontSize,
 				//按钮默认显示的值
 				defaultValue: '',
 				//浮层宽度
@@ -607,7 +683,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: false,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
+				options: getButtonOptionsConfig(editTrans).fontFamily,
 				//按钮默认显示的值
 				defaultValue: '',
 				//浮层宽度
@@ -624,7 +700,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: false,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
+				options: getButtonOptionsConfig(editTrans).lineHeight,
 				//按钮默认显示的值
 				defaultValue: '',
 				//浮层宽度
@@ -641,7 +717,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: true,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
+				options: getButtonOptionsConfig(editTrans).foreColor,
 				//左侧边框是否显示
 				leftBorder: false,
 				//右侧边框是否显示
@@ -652,7 +728,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 				//是否显示此工具
 				show: true,
 				//列表配置
-				options: getButtonOptionsConfig(editTrans, editLocale).backColor,
+				options: getButtonOptionsConfig(editTrans).backColor,
 				//左侧边框是否显示
 				leftBorder: false,
 				//右侧边框是否显示
@@ -674,7 +750,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 }
 
 //菜单栏全量配置
-export const getMenuConfig = function (editTrans, editLocale) {
+export const getMenuConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): MenuConfigType {
 	return {
 		//是否使用菜单栏
 		use: true,
@@ -741,7 +817,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此按钮
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).heading,
+			options: getButtonOptionsConfig(editTrans).heading,
 			//按钮默认显示的值
 			defaultValue: 'p',
 			//浮层宽度
@@ -758,7 +834,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).indent,
+			options: getButtonOptionsConfig(editTrans).indent,
 			//浮层宽度
 			width: editLocale == 'en_US' ? 150 : 110,
 			//浮层最大高度
@@ -782,7 +858,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).align,
+			options: getButtonOptionsConfig(editTrans).align,
 			//浮层宽度
 			width: editLocale == 'zh_CN' ? 110 : 130,
 			//浮层最大高度
@@ -896,7 +972,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).fontSize,
+			options: getButtonOptionsConfig(editTrans).fontSize,
 			//按钮默认显示的值
 			defaultValue: '',
 			//浮层宽度
@@ -913,7 +989,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).fontFamily,
+			options: getButtonOptionsConfig(editTrans).fontFamily,
 			//按钮默认显示的值
 			defaultValue: '',
 			//浮层宽度
@@ -930,7 +1006,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).lineHeight,
+			options: getButtonOptionsConfig(editTrans).lineHeight,
 			//按钮默认显示的值
 			defaultValue: '',
 			//浮层宽度
@@ -947,7 +1023,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).foreColor,
+			options: getButtonOptionsConfig(editTrans).foreColor,
 			//左侧边框是否显示
 			leftBorder: true,
 			//右侧边框是否显示
@@ -958,7 +1034,7 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//是否显示此工具
 			show: true,
 			//列表配置
-			options: getButtonOptionsConfig(editTrans, editLocale).backColor,
+			options: getButtonOptionsConfig(editTrans).backColor,
 			//左侧边框是否显示
 			leftBorder: false,
 			//右侧边框是否显示