vue-editify 0.2.17 → 0.2.19

package/src/feature/unorderList.ts

@@ -1,7 +1,7 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
-import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor, AlexElement } from 'alex-editor'
 import { MenuButtonType } from '@/core/tool'
-import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
+import { elementIsList, getMatchElementByRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 
@@ -10,47 +10,119 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'unorderList'
 
+type orderType = 'disc' | 'circle' | 'square'
+
 /**
  * 工具栏 - 无序列表
  */
-export const UnorderListToolbarButton = defineComponent(
-	(props, { expose }) => {
+export const UnorderListToolbar = defineComponent(
+	props => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 
-		const btnRef = ref<InstanceType<typeof Button> | null>(null)
-
-		expose({
-			btnRef
+		const active = computed<(val: orderType) => boolean>(() => {
+			return val => {
+				const el = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+					parsedom: 'div',
+					marks: {
+						'data-editify-list': 'ul'
+					}
+				})
+				if (el && el.marks!['data-editify-list-style']) {
+					return el.marks!['data-editify-list-style'] == val
+				}
+				return val == 'disc'
+			}
 		})
 
+		//设置前面列表的序标样式
+		const setPreviouseListStyle = (element: AlexElement, val: orderType) => {
+			element.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(element)
+			if (previousElement && elementIsList(previousElement, false)) {
+				setPreviouseListStyle(previousElement, val)
+			}
+		}
+
+		//设置后面列表的序标样式
+		const setNextListStyle = (element: AlexElement, val: orderType) => {
+			element.marks!['data-editify-list-style'] = val
+			const nextElement = editor.value.getNextElement(element)
+			if (nextElement && elementIsList(nextElement, false)) {
+				setNextListStyle(nextElement, val)
+			}
+		}
+
+		//设置列表序标样式
+		const setListStyle = (val: orderType) => {
+			const el = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+				parsedom: 'div',
+				marks: {
+					'data-editify-list': 'ul'
+				}
+			})!
+			el.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(el)
+			const nextElement = editor.value.getNextElement(el)
+			if (previousElement && elementIsList(previousElement, false)) {
+				setPreviouseListStyle(previousElement, val)
+			}
+			if (nextElement && elementIsList(nextElement, false)) {
+				setNextListStyle(nextElement, val)
+			}
+			editor.value.domRender()
+			editor.value.rangeRender()
+		}
+
 		return () => {
-			return props.config.show
-				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: FEATURE_NAME,
-							title: $editTrans('unorderList'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: rangeIsInList(editor.value, dataRangeCaches.value, false),
-							disabled: props.config.disabled,
-							onOperate: () => {
-								setList(editor.value, dataRangeCaches.value, false)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'list-unordered' })
-						}
-				  )
-				: null
+			return [
+				h(
+					Button,
+					{
+						name: 'disc',
+						title: $editTrans('disc'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('disc'),
+						onOperate: () => setListStyle('disc')
+					},
+					{
+						default: () => h(Icon, { value: 'list-disc', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'circle',
+						title: $editTrans('circle'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('circle'),
+						onOperate: () => setListStyle('circle')
+					},
+					{
+						default: () => h(Icon, { value: 'list-circle', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'square',
+						title: $editTrans('square'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('square'),
+						onOperate: () => setListStyle('square')
+					},
+					{
+						default: () => h(Icon, { value: 'list-square', style: { fontSize: '18px' } })
+					}
+				)
+			]
 		}
 	},
 	{
@@ -58,7 +130,6 @@ export const UnorderListToolbarButton = defineComponent(
 		props: {
 			color: String,
 			zIndex: Number,
-			config: Object as PropType<MenuButtonType>,
 			tooltip: Boolean
 		}
 	}
@@ -83,11 +154,11 @@ export const UnorderListMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('unorderList'),
+							title: `${$editTrans('unorderList')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: rangeIsInList(editor.value, dataRangeCaches.value, false),
-							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 							onOperate: () => {
 								setList(editor.value, dataRangeCaches.value, false)
 								editor.value.domRender()

package/src/feature/video.ts

@@ -278,7 +278,7 @@ export const VideoMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertImage'),
+							title: `${$editTrans('insertVideo')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,

package/src/icon/iconfont.css

@@ -1,9 +1,45 @@
 .editify-icon-info:before {
-	content: '\e610';
+	content: '\e600';
 }
 
-.editify-icon-panel:before {
-	content: '\e6c0';
+.editify-icon-list-square:before {
+	content: '\e659';
+}
+
+.editify-icon-list-circle:before {
+	content: '\e65a';
+}
+
+.editify-icon-list-disc:before {
+	content: '\e65b';
+}
+
+.editify-icon-list-cjk-ideographic:before {
+	content: '\e658';
+}
+
+.editify-icon-list-lower-roman:before {
+	content: '\e653';
+}
+
+.editify-icon-list-lower-greek:before {
+	content: '\e654';
+}
+
+.editify-icon-list-upper-roman:before {
+	content: '\e655';
+}
+
+.editify-icon-list-decimal:before {
+	content: '\e656';
+}
+
+.editify-icon-list-lower-alpha:before {
+	content: '\e657';
+}
+
+.editify-icon-list-upper-alpha:before {
+	content: '\e651';
 }
 
 .editify-icon-merge-cells-up:before {

package/src/index.ts

@@ -57,40 +57,42 @@ export {
 	elementIsMathformula,
 	getMathformulaByElement,
 	hasMathformulaInRange,
-	elementIsPanel,
-	getPanelByElement,
-	hasPanelInRange,
 	elementIsInfoBlock,
 	getInfoBlockByElement,
 	hasInfoBlockInRange,
 	rangeIsInInfoBlock,
 	hasPreInRange,
+	hasTableInRange,
 	hasQuoteInRange,
+	rangeIsInQuote,
 	hasLinkInRange,
-	hasTableInRange,
 	hasImageInRange,
 	hasVideoInRange,
-	rangeIsInQuote,
 	queryTextStyle,
+	setTextStyle,
+	removeTextStyle,
 	queryTextMark,
+	setTextMark,
+	removeTextMark,
 	getRangeText,
+	addSpaceTextToBothSides,
+	setHeading,
 	setIndentIncrease,
 	setIndentDecrease,
 	setQuote,
 	setAlign,
 	setList,
 	setTask,
-	setTextStyle,
-	setTextMark,
-	removeTextStyle,
-	removeTextMark,
 	setLineHeight,
 	insertLink,
 	insertImage,
 	insertVideo,
 	insertTable,
 	insertCodeBlock,
-	insertSeparator
+	insertSeparator,
+	insertAttachment,
+	insertMathformula,
+	insertInfoBlock
 } from '@/core/function'
 
 //安装函数
@@ -98,7 +100,7 @@ const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.17'
+const version = '0.2.19'
 
 //导出组件和安装函数
 export { Editify as default, Editify, install, AlexElement, version }

package/src/locale/en_US.ts

@@ -1,116 +1,115 @@
 import { ObjectType } from '@/core/tool'
 
 export const en_US: ObjectType = {
-	textWrapUp: 'Up feed',
-	textWrapDown: 'Down feed',
-	insertRowTop: 'Insert row forward',
-	insertRowBottom: 'Insert row backward',
-	insertColumnLeft: 'Insert column forward',
-	insertColumnRight: 'Insert column backward',
-	deleteRow: 'Delete rows',
-	deleteColumn: 'Delete column',
-	mergeCellsLeft: 'Merge cells to the left',
-	mergeCellsRight: 'Merge cells to the right',
-	mergeCellsUp: 'Merge cells up',
-	mergeCellsDown: 'Merge cells down',
-	deleteTable: 'Delete table',
-	selectLanguages: 'Select language',
-	autoRecognize: 'Auto',
-	linkAddress: 'Link address',
-	newWindowOpen: 'Open in new window',
-	removeLink: 'Remove',
-	viewLink: 'View',
-	linkUrlEnterPlaceholder: 'Please enter the link address',
-	linkTextEnterPlaceholder: 'Please enter the link text',
-	width30: 'Set the width to 30%',
-	width50: 'Set the width to 50%',
-	width100: 'Set the width to 100%',
-	deleteImage: 'Delete image',
-	autoplay: 'Autoplay',
-	disabledAutoplay: 'Turn off autoplay',
-	loop: 'Loop',
-	disabledLoop: 'Close loop',
-	muted: 'Mute',
-	unmuted: 'Unmute',
-	controls: 'Play control',
-	deleteVideo: 'Delete video',
-	heading: 'Heading',
-	bold: 'Bold',
-	h1: 'Heading 1',
-	h2: 'Heading 2',
-	h3: 'Heading 3',
-	h4: 'Heading 4',
-	h5: 'Heading 5',
-	h6: 'Heading 6',
-	text: 'Paragraph',
-	italic: 'Italic',
-	orderList: 'Ordered list',
-	unorderList: 'Unordered list',
-	strikethrough: 'Strikethrough',
-	underline: 'Underline',
-	code: 'Inline code',
-	super: 'Superscript',
-	sub: 'Subscript',
-	fontSize: 'Font size',
-	fontFamily: 'Font family',
-	defaultFontFamily: 'Default',
-	foreColor: 'Forecolor',
-	defaultColor: 'Default color',
-	backColor: 'Backcolor',
-	formatClear: 'Clear format',
-	defaultSize: 'Default',
-	totalWordCount: 'Total word count: ',
-	align: 'Alignment mode',
-	undo: 'Undo',
-	redo: 'Redo',
-	quote: 'Quote',
-	separator: 'Separator',
-	lineHeight: 'Line height',
-	indent: 'Indent',
-	insertLink: 'Insert Link',
-	insertImage: 'Insert Image',
-	remoteImage: 'Remote',
-	uploadImage: 'Upload',
-	imageUrlPlaceholder: 'Please enter the image address',
-	insert: 'Insert',
-	insertVideo: 'Insert Video',
-	remoteVideo: 'Remote',
-	uploadVideo: 'Upload',
-	videoUrlPlaceholder: 'Please enter the video address',
-	insertTable: 'Insert table',
-	inserCodeBlock: 'Insert code block',
-	sourceView: 'Code view',
-	task: 'Task',
-	indentIncrease: 'Increase indent',
-	indentDecrease: 'Reduce indent',
-	alignLeft: 'Align left',
-	alignCenter: 'Align center',
-	alignRight: 'Align right',
-	alignJustify: 'Align justify',
-	defaultLineHeight: 'Default',
+	textWrapUp: 'up feed',
+	textWrapDown: 'down feed',
+	insertRowTop: 'insert row forward',
+	insertRowBottom: 'insert row backward',
+	insertColumnLeft: 'insert column forward',
+	insertColumnRight: 'insert column backward',
+	deleteRow: 'delete rows',
+	deleteColumn: 'delete column',
+	mergeCellsLeft: 'merge cells to the left',
+	mergeCellsRight: 'merge cells to the right',
+	mergeCellsUp: 'merge cells up',
+	mergeCellsDown: 'merge cells down',
+	deleteTable: 'delete table',
+	selectLanguages: 'select language',
+	autoRecognize: 'auto',
+	linkAddress: 'link address',
+	newWindowOpen: 'open in new window',
+	removeLink: 'remove',
+	viewLink: 'view',
+	linkUrlEnterPlaceholder: 'please enter the link address',
+	linkTextEnterPlaceholder: 'please enter the link text',
+	width30: 'set the width to 30%',
+	width50: 'set the width to 50%',
+	width100: 'set the width to 100%',
+	deleteImage: 'delete image',
+	autoplay: 'autoplay',
+	disabledAutoplay: 'turn off autoplay',
+	loop: 'loop',
+	disabledLoop: 'close loop',
+	muted: 'mute',
+	unmuted: 'unmute',
+	controls: 'play control',
+	deleteVideo: 'delete video',
+	heading: 'heading',
+	bold: 'bold',
+	h1: 'heading 1',
+	h2: 'heading 2',
+	h3: 'heading 3',
+	h4: 'heading 4',
+	h5: 'heading 5',
+	h6: 'heading 6',
+	text: 'paragraph',
+	italic: 'italic',
+	orderList: 'ordered list',
+	unorderList: 'unordered list',
+	strikethrough: 'strikethrough',
+	underline: 'underline',
+	code: 'inline code',
+	super: 'superscript',
+	sub: 'subscript',
+	fontSize: 'font size',
+	fontFamily: 'font family',
+	defaultFontFamily: 'default',
+	foreColor: 'forecolor',
+	defaultColor: 'default color',
+	backColor: 'backcolor',
+	formatClear: 'clear format',
+	defaultSize: 'default',
+	totalWordCount: 'total word count: ',
+	align: 'alignment mode',
+	undo: 'undo',
+	redo: 'redo',
+	quote: 'quote',
+	separator: 'separator',
+	lineHeight: 'line height',
+	indent: 'indent',
+	insertLink: 'insert Link',
+	insertImage: 'insert Image',
+	remoteImage: 'remote',
+	uploadImage: 'upload',
+	imageUrlPlaceholder: 'please enter the image address',
+	insert: 'insert',
+	insertVideo: 'insert Video',
+	remoteVideo: 'remote',
+	uploadVideo: 'upload',
+	videoUrlPlaceholder: 'please enter the video address',
+	insertTable: 'insert table',
+	inserCodeBlock: 'insert code block',
+	sourceView: 'code view',
+	task: 'task',
+	indentIncrease: 'increase indent',
+	indentDecrease: 'reduce indent',
+	alignLeft: 'align left',
+	alignCenter: 'align center',
+	alignRight: 'align right',
+	alignJustify: 'align justify',
+	defaultLineHeight: 'default',
 	auto: 'auto',
-	fullScreen: 'Full screen',
-	confirm: 'Confirm',
-
-	//插件语言配置
-	insertAttachment: 'Insert attachment',
-	uploadAttachment: 'Upload',
-	remoteAttachment: 'Remote',
-	attachmentNamePlaceholder: 'Please enter the attachment name',
-	attachmentUrlPlaceholder: 'Please enter the attachment address',
-	attachmentDownloadTitle: 'Click to download attachment',
+	fullScreen: 'full screen',
+	confirm: 'confirm',
+	insertAttachment: 'insert attachment',
+	uploadAttachment: 'upload',
+	remoteAttachment: 'remote',
+	attachmentNamePlaceholder: 'please enter the attachment name',
+	attachmentUrlPlaceholder: 'please enter the attachment address',
+	attachmentDownloadTitle: 'click to download attachment',
 	attachmentDefaultName: 'attachment',
-
-	//数学公式插件语言配置
-	insertMathformula: 'Insert mathematical formula',
-	editMathformula: 'Edit mathematical formula',
-	mathformulaPlaceholder: 'Please enter LaTex syntax',
-
-	//面板插件语言配置
-	insertPanel: 'Insert Panel',
-	panelTitle: 'Here is the title',
-	panelContent: 'Here is the content',
-
-	//信息插件语言配置
-	insertInfoBlock: 'Insert Information Block'
+	insertMathformula: 'insert mathematical formula',
+	editMathformula: 'edit mathematical formula',
+	mathformulaPlaceholder: 'please enter latex syntax',
+	insertInfoBlock: 'insert Information Block',
+	decimal: 'decimal',
+	lowerRoman: 'lower roman',
+	upperRoman: 'upper roman',
+	lowerAlpha: 'lower alpha',
+	upperAlpha: 'upper alpha',
+	lowerGreek: 'lower greek',
+	cjkIdeographic: 'cjk ideographic',
+	disc: 'disc',
+	circle: 'circle',
+	square: 'square'
 }

package/src/locale/zh_CN.ts

@@ -91,8 +91,6 @@ export const zh_CN: ObjectType = {
 	auto: '自适应',
 	fullScreen: '全屏',
 	confirm: '确定',
-
-	//附件插件语言配置
 	insertAttachment: '插入附件',
 	uploadAttachment: '上传附件',
 	remoteAttachment: '远程地址',
@@ -100,17 +98,18 @@ export const zh_CN: ObjectType = {
 	attachmentUrlPlaceholder: '请输入附件地址',
 	attachmentDownloadTitle: '点击下载附件',
 	attachmentDefaultName: '附件',
-
-	//数学公式插件语言配置
 	insertMathformula: '插入数学公式',
 	editMathformula: '编辑数学公式',
 	mathformulaPlaceholder: '请输入LaTex语法',
-
-	//面板插件语言配置
-	insertPanel: '插入面板',
-	panelTitle: '这里是标题',
-	panelContent: '这里是内容',
-
-	//信息插件语言配置
-	insertInfoBlock: '插入信息块'
+	insertInfoBlock: '插入信息块',
+	decimal: '默认数字',
+	lowerRoman: '小写罗马数字',
+	upperRoman: '大写罗马数字',
+	lowerAlpha: '小写英文字母',
+	upperAlpha: '大写英文字母',
+	lowerGreek: '小写希腊字母',
+	cjkIdeographic: '表意数字',
+	disc: '实心圆',
+	circle: '空心圆',
+	square: '实心方块'
 }

package/lib/feature/panel.d.ts

@@ -1,18 +0,0 @@
-import { MenuButtonType } from '../core/tool';
-
-/**
- * 菜单栏 - 插入面板
- */
-export declare const PanelMenuButton: import('vue').DefineSetupFnComponent<{
-    color: string;
-    zIndex: number;
-    config: MenuButtonType;
-    tooltip: boolean;
-    disabled: boolean;
-}, {}, {}, {
-    color: string;
-    zIndex: number;
-    config: MenuButtonType;
-    tooltip: boolean;
-    disabled: boolean;
-} & {}, import('vue').PublicProps>;