vue-editify 0.2.14 → 0.2.16

package/src/feature/task.ts

@@ -0,0 +1,114 @@
+import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInTask, setTask } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+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
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 任务列表
+ */
+export const TaskMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('task'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: rangeIsInTask(editor.value, dataRangeCaches.value),
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || 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,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/underline.ts

@@ -0,0 +1,134 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextStyle, removeTextStyle, setTextStyle } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'underline'
+
+/**
+ * 工具栏 - 下划线
+ */
+export const UnderlineToolbarButton = 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)
+
+		const active = computed<boolean>(() => {
+			return queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration', 'underline') || queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration-line', 'underline')
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							title: $editTrans('underline'),
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: active.value,
+							disabled: props.config.disabled,
+							onOperate: () => {
+								if (active.value) {
+									removeTextStyle(editor.value, dataRangeCaches.value, ['text-decoration', 'text-decoration-line'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'text-decoration': 'underline'
+									})
+								}
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'underline' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 下划线
+ */
+export const UnderlineMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		const active = computed<boolean>(() => {
+			return queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration', 'underline') || queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration-line', 'underline')
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('underline'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							active: active.value,
+							onOperate: () => {
+								if (active.value) {
+									removeTextStyle(editor.value, dataRangeCaches.value, ['text-decoration', 'text-decoration-line'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'text-decoration': 'underline'
+									})
+								}
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'underline' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/undo.ts

@@ -0,0 +1,56 @@
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { AlexEditor } from 'alex-editor'
+import { Button } from '@/components/button'
+import { MenuButtonType } from '@/core/tool'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'undo'
+
+/**
+ * 菜单栏 - 撤销
+ */
+export const UndoMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+		const rangeKey = inject<Ref<number | null>>('rangeKey')!
+		const undo = inject<() => void>('undo')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('undo'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && !editor.value.history.get(-1)) || props.config.disabled,
+							onOperate: () => undo()
+						},
+						{
+							default: () => h(Icon, { value: 'undo' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/unorderList.ts

@@ -0,0 +1,114 @@
+import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'unorderList'
+
+/**
+ * 工具栏 - 无序列表
+ */
+export const UnorderListToolbarButton = 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('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
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 无序列表
+ */
+export const UnorderListMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('unorderList'),
+							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,
+							onOperate: () => {
+								setList(editor.value, dataRangeCaches.value, false)
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'list-unordered' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)