vue-editify 0.2.14 → 0.2.15

package/src/feature/backColor.ts

@@ -0,0 +1,171 @@
+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 = 'backColor'
+
+/**
+ * 工具栏 - 背景色
+ */
+export const BackColorToolbarButton = 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 findBackColorItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'background', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'background', item as string)
+			})
+			return findBackColorItem ? (DapCommon.isObject(findBackColorItem) ? ((findBackColorItem as ButtonOptionsItemType).value as string) : (findBackColorItem as string)) : ''
+		})
+		expose({
+			btnRef
+		})
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							type: 'select',
+							title: $editTrans('backColor'),
+							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: 'brush' }),
+							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, {
+											background: 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 BackColorMenuButton = 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 findBackColorItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				if (DapCommon.isObject(item)) {
+					return queryTextStyle(editor.value, dataRangeCaches.value, 'background', (item as ButtonOptionsItemType).value)
+				}
+				return queryTextStyle(editor.value, dataRangeCaches.value, 'background', item as string)
+			})
+			return findBackColorItem ? (DapCommon.isObject(findBackColorItem) ? ((findBackColorItem as ButtonOptionsItemType).value as string) : (findBackColorItem 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('backColor'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled
+						},
+						{
+							default: () => h(Icon, { value: 'brush' }),
+							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, {
+											background: 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/bold.ts

@@ -0,0 +1,136 @@
+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 = 'bold'
+
+/**
+ * 工具栏 - 加粗
+ */
+export const BoldToolbarButton = 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, 'font-weight', 'bold') || queryTextStyle(editor.value, dataRangeCaches.value, 'font-weight', '700')
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							title: $editTrans('bold'),
+							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, ['font-weight'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'font-weight': 'bold'
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'bold' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 加粗
+ */
+export const BoldMenuButton = 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, 'font-weight', 'bold') || queryTextStyle(editor.value, dataRangeCaches.value, 'font-weight', '700')
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('bold'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: active.value,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: () => {
+								if (active.value) {
+									removeTextStyle(editor.value, dataRangeCaches.value, ['font-weight'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'font-weight': 'bold'
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'bold' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/code.ts

@@ -0,0 +1,136 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextMark, removeTextMark, setTextMark } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'code'
+
+/**
+ * 工具栏 - 行内代码
+ */
+export const CodeToolbarButton = 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 queryTextMark(editor.value, dataRangeCaches.value, 'data-editify-code')
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							title: $editTrans('code'),
+							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) {
+									removeTextMark(editor.value, dataRangeCaches.value, ['data-editify-code'])
+								} else {
+									setTextMark(editor.value, dataRangeCaches.value, {
+										'data-editify-code': true
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'code' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 行内代码
+ */
+export const CodeMenuButton = 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 queryTextMark(editor.value, dataRangeCaches.value, 'data-editify-code')
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('code'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: active.value,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: () => {
+								if (active.value) {
+									removeTextMark(editor.value, dataRangeCaches.value, ['data-editify-code'])
+								} else {
+									setTextMark(editor.value, dataRangeCaches.value, {
+										'data-editify-code': true
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'code' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/codeBlock.ts

@@ -0,0 +1,204 @@
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+import { getMatchElementByRange, hasAttachmentInRange, hasImageInRange, hasMathformulaInRange, hasPanelInRange, hasTableInRange, hasVideoInRange, insertCodeBlock } from '@/core/function'
+import { MenuButtonType, MenuDisplayButtonType } from '@/core/tool'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'codeBlock'
+
+/**
+ * 工具栏 - 代码块操作
+ */
+export const CodeBlockToolbar = 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 pre = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+				parsedom: 'pre'
+			})
+			if (pre) {
+				return pre.marks!['data-editify-hljs'] || ''
+			}
+			return ''
+		})
+
+		//代码块前后插入段落
+		const insertParagraphWithPre = (type: 'up' | 'down' | undefined = 'up') => {
+			if (!editor.value.range!.anchor.isEqual(editor.value.range!.focus)) {
+				editor.value.range!.anchor.element = editor.value.range!.focus.element
+				editor.value.range!.anchor.offset = editor.value.range!.focus.offset
+			}
+			const pre = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'pre' })
+			if (pre) {
+				const paragraph = AlexElement.create({
+					type: 'block',
+					parsedom: AlexElement.BLOCK_NODE,
+					children: [
+						{
+							type: 'closed',
+							parsedom: 'br'
+						}
+					]
+				})
+				if (type == 'up') {
+					editor.value.addElementBefore(paragraph, pre)
+				} else {
+					editor.value.addElementAfter(paragraph, pre)
+				}
+				editor.value.range!.anchor.moveToEnd(paragraph)
+				editor.value.range!.focus.moveToEnd(paragraph)
+				editor.value.formatElementStack()
+				editor.value.domRender()
+				editor.value.rangeRender()
+			}
+		}
+		//选择代码语言
+		const selectLanguage = (value: string) => {
+			const pre = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'pre' })
+			if (pre) {
+				Object.assign(pre.marks!, {
+					'data-editify-hljs': value
+				})
+				editor.value.formatElementStack()
+				editor.value.domRender()
+				editor.value.rangeRender()
+			}
+		}
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return [
+				//代码块前插入段落
+				h(
+					Button,
+					{
+						name: 'textWrapUp',
+						title: $editTrans('textWrapUp'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => insertParagraphWithPre('up')
+					},
+					{
+						default: () => h(Icon, { value: 'text-wrap', class: 'editify-icon-rotate' })
+					}
+				),
+				//代码块后插入段落
+				h(
+					Button,
+					{
+						name: 'textWrapDown',
+						title: $editTrans('textWrapDown'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => insertParagraphWithPre('down')
+					},
+					{
+						default: () => h(Icon, { value: 'text-wrap' })
+					}
+				),
+				//代码块语言选择
+				props.language.show
+					? h(
+							Button,
+							{
+								ref: btnRef,
+								name: 'languages',
+								type: 'display',
+								title: $editTrans('selectLanguages'),
+								leftBorder: props.language.leftBorder,
+								rightBorder: props.language.rightBorder,
+								displayConfig: {
+									options: props.language.options,
+									value: selectVal.value,
+									width: props.language.width,
+									maxHeight: props.language.maxHeight
+								},
+								active: false,
+								disabled: props.language.disabled,
+								tooltip: props.tooltip,
+								color: props.color,
+								zIndex: props.zIndex,
+								onOperate: (_name, value) => selectLanguage(value)
+							},
+							{
+								default: () => h(Icon, { value: 'text-wrap' })
+							}
+					  )
+					: null
+			]
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			tooltip: Boolean,
+			language: Object as PropType<MenuDisplayButtonType>
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 插入代码块
+ */
+export const CodeBlockMenuButton = 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('inserCodeBlock'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: !!getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'pre' }),
+							disabled: props.disabled || isSourceView.value || hasTableInRange(editor.value, dataRangeCaches.value) || hasImageInRange(editor.value, dataRangeCaches.value) || hasVideoInRange(editor.value, dataRangeCaches.value) || hasAttachmentInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: () => {
+								insertCodeBlock(editor.value, dataRangeCaches.value)
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'code-block' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)