vue-editify 0.2.17 → 0.2.18

package/src/feature/orderList.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, hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 
@@ -10,47 +10,179 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'orderList'
 
+type orderType = 'decimal' | 'lower-roman' | 'upper-roman' | 'lower-alpha' | 'upper-alpha' | 'lower-greek' | 'cjk-ideographic'
+
 /**
  * 工具栏 - 有序列表
  */
-export const OrderListToolbarButton = defineComponent(
-	(props, { expose }) => {
+export const OrderListToolbar = 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': 'ol'
+					}
+				})
+				if (el && el.marks!['data-editify-list-style']) {
+					return el.marks!['data-editify-list-style'] == val
+				}
+				return val == 'decimal'
+			}
 		})
 
+		//设置前面列表的序标样式
+		const setPreviouseListStyle = (element: AlexElement, val: orderType) => {
+			element.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(element)
+			if (previousElement && elementIsList(previousElement, true)) {
+				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, true)) {
+				setNextListStyle(nextElement, val)
+			}
+		}
+
+		//设置列表序标样式
+		const setListStyle = (val: orderType) => {
+			const el = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+				parsedom: 'div',
+				marks: {
+					'data-editify-list': 'ol'
+				}
+			})!
+			el.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(el)
+			const nextElement = editor.value.getNextElement(el)
+			if (previousElement && elementIsList(previousElement, true)) {
+				setPreviouseListStyle(previousElement, val)
+			}
+			if (nextElement && elementIsList(nextElement, true)) {
+				setNextListStyle(nextElement, val)
+			}
+			editor.value.domRender()
+			editor.value.rangeRender()
+		}
+
 		return () => {
-			return props.config.show
-				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: FEATURE_NAME,
-							title: $editTrans('orderList'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: rangeIsInList(editor.value, dataRangeCaches.value, true),
-							disabled: props.config.disabled,
-							onOperate: () => {
-								setList(editor.value, dataRangeCaches.value, true)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'list-ordered' })
-						}
-				  )
-				: null
+			return [
+				h(
+					Button,
+					{
+						name: 'decimal',
+						title: $editTrans('decimal'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('decimal'),
+						onOperate: () => setListStyle('decimal')
+					},
+					{
+						default: () => h(Icon, { value: 'list-decimal', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'cjk-ideographic',
+						title: $editTrans('cjkIdeographic'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('cjk-ideographic'),
+						onOperate: () => setListStyle('cjk-ideographic')
+					},
+					{
+						default: () => h(Icon, { value: 'list-cjk-ideographic', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-roman',
+						title: $editTrans('lowerRoman'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-roman'),
+						onOperate: () => setListStyle('lower-roman')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-roman', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'upper-roman',
+						title: $editTrans('upperRoman'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('upper-roman'),
+						onOperate: () => setListStyle('upper-roman')
+					},
+					{
+						default: () => h(Icon, { value: 'list-upper-roman', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-alpha',
+						title: $editTrans('lowerAlpha'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-alpha'),
+						onOperate: () => setListStyle('lower-alpha')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-alpha', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'upper-alpha',
+						title: $editTrans('upperAlpha'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('upper-alpha'),
+						onOperate: () => setListStyle('upper-alpha')
+					},
+					{
+						default: () => h(Icon, { value: 'list-upper-alpha', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-greek',
+						title: $editTrans('lowerGreek'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-greek'),
+						onOperate: () => setListStyle('lower-greek')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-greek', style: { fontSize: '18px' } })
+					}
+				)
+			]
 		}
 	},
 	{
@@ -58,7 +190,6 @@ export const OrderListToolbarButton = defineComponent(
 		props: {
 			color: String,
 			zIndex: Number,
-			config: Object as PropType<MenuButtonType>,
 			tooltip: Boolean
 		}
 	}

package/src/feature/panel.ts

@@ -1,9 +1,9 @@
 import { defineComponent, h, inject, PropType, Ref } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
 import { Icon } from '@/components/icon'
-import { hasMathformulaInRange, hasPanelInRange, hasTableInRange } from '@/core/function'
+import { hasMathformulaInRange, hasPanelInRange, hasTableInRange, insertPanel } from '@/core/function'
 
 /**
  * feature名称
@@ -35,53 +35,8 @@ export const PanelMenuButton = defineComponent(
 							active: false,
 							disabled: props.disabled || isSourceView.value || hasPanelInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 							onOperate: () => {
-								const panelElement = AlexElement.create({
-									type: 'block',
-									parsedom: 'div',
-									marks: {
-										'data-editify-panel': 'true'
-									},
-									children: [
-										{
-											type: 'inblock',
-											parsedom: 'div',
-											behavior: 'block',
-											children: [
-												{
-													type: 'text',
-													textcontent: $editTrans('panelTitle')
-												}
-											]
-										},
-										{
-											type: 'inblock',
-											parsedom: 'div',
-											behavior: 'block',
-											children: [
-												{
-													type: 'text',
-													textcontent: $editTrans('panelContent')
-												}
-											]
-										}
-									]
-								})
-								editor.value.insertElement(panelElement)
-								//面板后面插入段落
-								const paragraph = AlexElement.create({
-									type: 'block',
-									parsedom: AlexElement.BLOCK_NODE,
-									children: [
-										{
-											type: 'closed',
-											parsedom: 'br'
-										}
-									]
-								})
-								editor.value.addElementAfter(paragraph, panelElement)
-								//移动光标到新插入的元素
-								editor.value.range!.anchor.moveToEnd(panelElement.children![0])
-								editor.value.range!.focus.moveToEnd(panelElement.children![0])
+								//插入面板
+								insertPanel(editor.value, $editTrans('panelTitle'), $editTrans('panelContent'))
 								//渲染
 								editor.value.domRender()
 								editor.value.rangeRender()

package/src/feature/sub.ts

@@ -97,7 +97,7 @@ export const SubMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('subscript'),
+							title: $editTrans('sub'),
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,

package/src/feature/super.ts

@@ -97,7 +97,7 @@ export const SuperMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('superscript'),
+							title: $editTrans('super'),
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: active.value,

package/src/feature/task.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { MenuButtonType } from '@/core/tool'
 import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInTask, setTask } from '@/core/function'
@@ -10,60 +10,6 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'task'
 
-/**
- * 工具栏 - 任务列表
- */
-export const TaskToolbarButton = defineComponent(
-	(props, { expose }) => {
-		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
-		})
-
-		return () => {
-			return props.config.show
-				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: FEATURE_NAME,
-							title: $editTrans('task'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: rangeIsInTask(editor.value, dataRangeCaches.value),
-							disabled: props.config.disabled,
-							onOperate: () => {
-								setTask(editor.value, dataRangeCaches.value)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'task' })
-						}
-				  )
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 任务列表
  */

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, hasPanelInRange, 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
 		}
 	}

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'),
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,

package/src/icon/iconfont.css

@@ -1,3 +1,43 @@
+.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-info:before {
 	content: '\e610';
 }

package/src/index.ts

@@ -65,32 +65,38 @@ export {
 	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,
+	insertPanel
 } from '@/core/function'
 
 //安装函数
@@ -98,7 +104,7 @@ const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.17'
+const version = '0.2.18'
 
 //导出组件和安装函数
 export { Editify as default, Editify, install, AlexElement, version }