vue-editify 0.2.13 → 0.2.15

package/src/feature/fontFamily.ts

@@ -0,0 +1,140 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { common as DapCommon } from 'dap-util'
+import { MenuDisplayButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextStyle, setTextStyle } from '@/core/function'
+import { Button, ButtonOptionsItemType } from '@/components/button'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'fontFamily'
+
+/**
+ * 工具栏 - 字体
+ */
+export const FontFamilyToolbarButton = 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 selectVal = computed<string>(() => {
+			const findFamilyItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'font-family', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'font-family', item as string)
+			})
+			return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
+		})
+		expose({
+			btnRef
+		})
+		return () => {
+			return props.config.show
+				? h(Button, {
+						ref: btnRef,
+						name: FEATURE_NAME,
+						type: 'display',
+						title: $editTrans('fontFamily'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						active: false,
+						disabled: props.config.disabled,
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						onOperate: (_name: string, val: string) => {
+							setTextStyle(editor.value, dataRangeCaches.value, {
+								'font-family': val
+							})
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 字体
+ */
+export const FontFamilyMenuButton = 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 selectVal = computed<string>(() => {
+			const findFamilyItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'font-family', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'font-family', item as string)
+			})
+			return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
+		})
+
+		return () => {
+			return props.config.show
+				? h(Button, {
+						name: FEATURE_NAME,
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						type: 'display',
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						title: $editTrans('fontFamily'),
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						active: false,
+						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+						onOperate: (_name, val) => {
+							setTextStyle(editor.value, dataRangeCaches.value, {
+								'font-family': val
+							})
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/fontSize.ts

@@ -0,0 +1,142 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { common as DapCommon } from 'dap-util'
+import { MenuDisplayButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextStyle, setTextStyle } from '@/core/function'
+import { Button, ButtonOptionsItemType } from '@/components/button'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'fontSize'
+
+/**
+ * 工具栏 - 字号
+ */
+export const FontSizeToolbarButton = 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 selectVal = computed<string | number>(() => {
+			const findFontItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'font-size', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'font-size', item as string | number)
+			})
+			return findFontItem ? (DapCommon.isObject(findFontItem) ? ((findFontItem as ButtonOptionsItemType).value as string | number) : (findFontItem as string | number)) : (props.config.defaultValue as string | number)
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(Button, {
+						ref: btnRef,
+						name: FEATURE_NAME,
+						type: 'display',
+						title: $editTrans('fontSize'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						active: false,
+						disabled: props.config.disabled,
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						onOperate: (_name: string, val: string) => {
+							setTextStyle(editor.value, dataRangeCaches.value, {
+								'font-size': val
+							})
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 字号
+ */
+export const FontSizeMenuButton = 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 selectVal = computed<string>(() => {
+			const findFontItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'font-size', (item as ButtonOptionsItemType).value as string)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'font-size', item as string)
+			})
+			return findFontItem ? (DapCommon.isObject(findFontItem) ? ((findFontItem as ButtonOptionsItemType).value as string) : (findFontItem as string)) : (props.config.defaultValue as string)
+		})
+
+		return () => {
+			return props.config.show
+				? h(Button, {
+						name: FEATURE_NAME,
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						type: 'display',
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						title: $editTrans('fontSize'),
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+						active: false,
+						onOperate: (_name, val) => {
+							setTextStyle(editor.value, dataRangeCaches.value, {
+								'font-size': val
+							})
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/foreColor.ts

@@ -0,0 +1,173 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { common as DapCommon } from 'dap-util'
+import { MenuSelectButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextStyle, setTextStyle } from '@/core/function'
+import { Button, ButtonOptionsItemType } from '@/components/button'
+import { Icon } from '@/components/icon'
+import { Colors } from '@/components/colors'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'foreColor'
+
+/**
+ * 工具栏 - 前景色
+ */
+export const ForeColorToolbarButton = 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 selectVal = computed<string>(() => {
+			const findForeColorItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'color', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'color', item as string | number)
+			})
+			return findForeColorItem ? (DapCommon.isObject(findForeColorItem) ? ((findForeColorItem as ButtonOptionsItemType).value as string) : (findForeColorItem as string)) : ''
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							type: 'select',
+							title: $editTrans('foreColor'),
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.config.disabled,
+							selectConfig: {
+								options: props.config.options
+							},
+							hideScroll: true
+						},
+						{
+							default: () => h(Icon, { value: 'font-color' }),
+							layer: ({ options }: { options: ButtonOptionsItemType[] }) => {
+								return h(Colors, {
+									tooltip: props.tooltip,
+									color: props.color,
+									value: selectVal.value,
+									data: options,
+									onChange: (val: string) => {
+										setTextStyle(editor.value, dataRangeCaches.value, {
+											color: val
+										})
+										btnRef.value!.show = false
+										editor.value.formatElementStack()
+										editor.value.domRender()
+										editor.value.rangeRender()
+									}
+								})
+							}
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuSelectButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 前景色
+ */
+export const ForeColorMenuButton = 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 btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		const selectVal = computed<string>(() => {
+			const findForeColorItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'color', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'color', <string>item)
+			})
+			return findForeColorItem ? (DapCommon.isObject(findForeColorItem) ? ((findForeColorItem as ButtonOptionsItemType).value as string) : (findForeColorItem as string)) : ''
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							type: 'select',
+							selectConfig: {
+								options: props.config.options
+							},
+							hideScroll: true,
+							title: $editTrans('foreColor'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							active: false
+						},
+						{
+							default: () => h(Icon, { value: 'font-color' }),
+							layer: ({ options }: { options: ButtonOptionsItemType[] }) => {
+								return h(Colors, {
+									tooltip: props.tooltip,
+									color: props.color,
+									value: selectVal.value,
+									data: options,
+									onChange: (val: string) => {
+										setTextStyle(editor.value, dataRangeCaches.value, {
+											color: val
+										})
+										editor.value.formatElementStack()
+										editor.value.domRender()
+										editor.value.rangeRender()
+										btnRef.value!.show = false
+									}
+								})
+							}
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuSelectButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/formatClear.ts

@@ -0,0 +1,118 @@
+import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPreInRange, removeTextMark, removeTextStyle } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'formatClear'
+
+/**
+ * 工具栏 - 清除样式
+ */
+export const FormatClearToolbarButton = 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('formatClear'),
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.config.disabled,
+							onOperate: () => {
+								removeTextStyle(editor.value, dataRangeCaches.value)
+								removeTextMark(editor.value, dataRangeCaches.value)
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'format-clear' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 清除样式
+ */
+export const FormatClearMenuButton = 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('formatClear'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: () => {
+								removeTextStyle(editor.value, dataRangeCaches.value)
+								removeTextMark(editor.value, dataRangeCaches.value)
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'format-clear' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/fullScreen.ts

@@ -0,0 +1,57 @@
+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 = 'fullScreen'
+
+/**
+ * 菜单栏 - 全屏
+ */
+export const FullScreenMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isFullScreen = inject<Ref<boolean>>('isFullScreen')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('fullScreen'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: isFullScreen.value,
+							disabled: props.disabled || props.config.disabled,
+							onOperate: () => {
+								isFullScreen.value = !isFullScreen.value
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'full-screen' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)