vue-editify 0.2.19 → 0.2.21
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +10 -1
- package/lib/components/button/button.vue.d.ts +1 -0
- package/lib/core/tool.d.ts +1 -1
- package/lib/editify/menu/menu.vue.d.ts +8 -1
- package/lib/editify.es.js +274 -252
- package/lib/editify.umd.js +2 -2
- package/lib/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/button/button.vue +2 -1
- package/src/core/shortcut.ts +48 -201
- package/src/core/tool.ts +1 -1
- package/src/editify/editify.vue +20 -4
- package/src/editify/menu/menu.vue +15 -6
- package/src/editify/toolbar/toolbar.vue +1 -1
- package/src/feature/align.ts +9 -2
- package/src/feature/attachment.ts +5 -1
- package/src/feature/backColor.ts +7 -1
- package/src/feature/bold.ts +8 -1
- package/src/feature/code.ts +8 -1
- package/src/feature/codeBlock.ts +8 -1
- package/src/feature/fontFamily.ts +10 -1
- package/src/feature/fontSize.ts +8 -1
- package/src/feature/foreColor.ts +5 -1
- package/src/feature/formatClear.ts +8 -1
- package/src/feature/fullScreen.ts +9 -2
- package/src/feature/heading.ts +9 -2
- package/src/feature/image.ts +5 -1
- package/src/feature/indent.ts +9 -2
- package/src/feature/infoBlock.ts +9 -2
- package/src/feature/italic.ts +8 -1
- package/src/feature/lineHeight.ts +9 -2
- package/src/feature/link.ts +5 -1
- package/src/feature/mathformula.ts +5 -1
- package/src/feature/orderList.ts +9 -2
- package/src/feature/quote.ts +9 -2
- package/src/feature/redo.ts +9 -2
- package/src/feature/separator.ts +9 -2
- package/src/feature/sourceView.ts +9 -2
- package/src/feature/strikethrough.ts +8 -1
- package/src/feature/sub.ts +8 -1
- package/src/feature/super.ts +8 -1
- package/src/feature/table.ts +5 -1
- package/src/feature/task.ts +9 -2
- package/src/feature/underline.ts +8 -1
- package/src/feature/undo.ts +9 -2
- package/src/feature/unorderList.ts +9 -2
- package/src/feature/video.ts +5 -1
- package/src/index.ts +1 -1
package/src/feature/codeBlock.ts
CHANGED
@@ -155,17 +155,24 @@ export const CodeBlockToolbar = defineComponent(
|
|
155
155
|
* 菜单栏 - 插入代码块
|
156
156
|
*/
|
157
157
|
export const CodeBlockMenuButton = defineComponent(
|
158
|
-
props => {
|
158
|
+
(props, { expose }) => {
|
159
159
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
160
160
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
161
161
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
162
162
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
163
163
|
|
164
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
165
|
+
|
166
|
+
expose({
|
167
|
+
btnRef
|
168
|
+
})
|
169
|
+
|
164
170
|
return () => {
|
165
171
|
return props.config.show
|
166
172
|
? h(
|
167
173
|
Button,
|
168
174
|
{
|
175
|
+
ref: btnRef,
|
169
176
|
name: FEATURE_NAME,
|
170
177
|
tooltip: props.tooltip,
|
171
178
|
color: props.color,
|
@@ -30,9 +30,11 @@ export const FontFamilyToolbarButton = defineComponent(
|
|
30
30
|
})
|
31
31
|
return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
|
32
32
|
})
|
33
|
+
|
33
34
|
expose({
|
34
35
|
btnRef
|
35
36
|
})
|
37
|
+
|
36
38
|
return () => {
|
37
39
|
return props.config.show
|
38
40
|
? h(Button, {
|
@@ -79,12 +81,14 @@ export const FontFamilyToolbarButton = defineComponent(
|
|
79
81
|
* 菜单栏 - 字体
|
80
82
|
*/
|
81
83
|
export const FontFamilyMenuButton = defineComponent(
|
82
|
-
props => {
|
84
|
+
(props, { expose }) => {
|
83
85
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
84
86
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
85
87
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
86
88
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
87
89
|
|
90
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
91
|
+
|
88
92
|
const selectVal = computed<string>(() => {
|
89
93
|
const findFamilyItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
|
90
94
|
if (DapCommon.isObject(item)) {
|
@@ -95,9 +99,14 @@ export const FontFamilyMenuButton = defineComponent(
|
|
95
99
|
return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
|
96
100
|
})
|
97
101
|
|
102
|
+
expose({
|
103
|
+
btnRef
|
104
|
+
})
|
105
|
+
|
98
106
|
return () => {
|
99
107
|
return props.config.show
|
100
108
|
? h(Button, {
|
109
|
+
ref: btnRef,
|
101
110
|
name: FEATURE_NAME,
|
102
111
|
tooltip: props.tooltip,
|
103
112
|
color: props.color,
|
package/src/feature/fontSize.ts
CHANGED
@@ -81,12 +81,14 @@ export const FontSizeToolbarButton = defineComponent(
|
|
81
81
|
* 菜单栏 - 字号
|
82
82
|
*/
|
83
83
|
export const FontSizeMenuButton = defineComponent(
|
84
|
-
props => {
|
84
|
+
(props, { expose }) => {
|
85
85
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
86
86
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
87
87
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
88
88
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
89
89
|
|
90
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
91
|
+
|
90
92
|
const selectVal = computed<string>(() => {
|
91
93
|
const findFontItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
|
92
94
|
if (DapCommon.isObject(item)) {
|
@@ -97,9 +99,14 @@ export const FontSizeMenuButton = defineComponent(
|
|
97
99
|
return findFontItem ? (DapCommon.isObject(findFontItem) ? ((findFontItem as ButtonOptionsItemType).value as string) : (findFontItem as string)) : (props.config.defaultValue as string)
|
98
100
|
})
|
99
101
|
|
102
|
+
expose({
|
103
|
+
btnRef
|
104
|
+
})
|
105
|
+
|
100
106
|
return () => {
|
101
107
|
return props.config.show
|
102
108
|
? h(Button, {
|
109
|
+
ref: btnRef,
|
103
110
|
name: FEATURE_NAME,
|
104
111
|
tooltip: props.tooltip,
|
105
112
|
color: props.color,
|
package/src/feature/foreColor.ts
CHANGED
@@ -96,7 +96,7 @@ export const ForeColorToolbarButton = defineComponent(
|
|
96
96
|
* 菜单栏 - 前景色
|
97
97
|
*/
|
98
98
|
export const ForeColorMenuButton = defineComponent(
|
99
|
-
props => {
|
99
|
+
(props, { expose }) => {
|
100
100
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
101
101
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
102
102
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
@@ -114,6 +114,10 @@ export const ForeColorMenuButton = defineComponent(
|
|
114
114
|
return findForeColorItem ? (DapCommon.isObject(findForeColorItem) ? ((findForeColorItem as ButtonOptionsItemType).value as string) : (findForeColorItem as string)) : ''
|
115
115
|
})
|
116
116
|
|
117
|
+
expose({
|
118
|
+
btnRef
|
119
|
+
})
|
120
|
+
|
117
121
|
return () => {
|
118
122
|
return props.config.show
|
119
123
|
? h(
|
@@ -69,17 +69,24 @@ export const FormatClearToolbarButton = defineComponent(
|
|
69
69
|
* 菜单栏 - 清除样式
|
70
70
|
*/
|
71
71
|
export const FormatClearMenuButton = defineComponent(
|
72
|
-
props => {
|
72
|
+
(props, { expose }) => {
|
73
73
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
74
74
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
75
75
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
76
76
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
77
77
|
|
78
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
79
|
+
|
80
|
+
expose({
|
81
|
+
btnRef
|
82
|
+
})
|
83
|
+
|
78
84
|
return () => {
|
79
85
|
return props.config.show
|
80
86
|
? h(
|
81
87
|
Button,
|
82
88
|
{
|
89
|
+
ref: btnRef,
|
83
90
|
name: FEATURE_NAME,
|
84
91
|
tooltip: props.tooltip,
|
85
92
|
color: props.color,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuButtonType } from '@/core/tool'
|
@@ -13,16 +13,23 @@ const FEATURE_NAME = 'fullScreen'
|
|
13
13
|
* 菜单栏 - 全屏
|
14
14
|
*/
|
15
15
|
export const FullScreenMenuButton = defineComponent(
|
16
|
-
props => {
|
16
|
+
(props, { expose }) => {
|
17
17
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
18
18
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
19
19
|
const isFullScreen = inject<Ref<boolean>>('isFullScreen')!
|
20
20
|
|
21
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
22
|
+
|
23
|
+
expose({
|
24
|
+
btnRef
|
25
|
+
})
|
26
|
+
|
21
27
|
return () => {
|
22
28
|
return props.config.show
|
23
29
|
? h(
|
24
30
|
Button,
|
25
31
|
{
|
32
|
+
ref: btnRef,
|
26
33
|
name: FEATURE_NAME,
|
27
34
|
tooltip: props.tooltip,
|
28
35
|
color: props.color,
|
package/src/feature/heading.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
|
3
3
|
import { common as DapCommon } from 'dap-util'
|
4
4
|
import { MenuDisplayButtonType } from '@/core/tool'
|
@@ -14,13 +14,15 @@ const FEATURE_NAME = 'heading'
|
|
14
14
|
* 菜单栏 - 标题
|
15
15
|
*/
|
16
16
|
export const HeadingMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
const rangeKey = inject<Ref<number | null>>('rangeKey')!
|
23
23
|
|
24
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
25
|
+
|
24
26
|
const selectVal = computed<string>(() => {
|
25
27
|
const findHeadingItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
|
26
28
|
let val: string | number | ButtonOptionsItemType = item
|
@@ -40,9 +42,14 @@ export const HeadingMenuButton = defineComponent(
|
|
40
42
|
return findHeadingItem ? (DapCommon.isObject(findHeadingItem) ? ((findHeadingItem as ButtonOptionsItemType).value as string) : (findHeadingItem as string)) : (props.config.defaultValue as string)
|
41
43
|
})
|
42
44
|
|
45
|
+
expose({
|
46
|
+
btnRef
|
47
|
+
})
|
48
|
+
|
43
49
|
return () => {
|
44
50
|
return props.config.show
|
45
51
|
? h(Button, {
|
52
|
+
ref: btnRef,
|
46
53
|
name: FEATURE_NAME,
|
47
54
|
tooltip: props.tooltip,
|
48
55
|
color: props.color,
|
package/src/feature/image.ts
CHANGED
@@ -143,7 +143,7 @@ export const ImageToolbar = defineComponent(
|
|
143
143
|
* 菜单栏 - 插入图片
|
144
144
|
*/
|
145
145
|
export const ImageMenuButton = defineComponent(
|
146
|
-
props => {
|
146
|
+
(props, { expose }) => {
|
147
147
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
148
148
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
149
149
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
@@ -151,6 +151,10 @@ export const ImageMenuButton = defineComponent(
|
|
151
151
|
|
152
152
|
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
153
153
|
|
154
|
+
expose({
|
155
|
+
btnRef
|
156
|
+
})
|
157
|
+
|
154
158
|
return () => {
|
155
159
|
return props.config.show
|
156
160
|
? h(
|
package/src/feature/indent.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuSelectButtonType } from '@/core/tool'
|
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'indent'
|
|
14
14
|
* 菜单栏 - 缩进
|
15
15
|
*/
|
16
16
|
export const IndentMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
|
23
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
24
|
+
|
25
|
+
expose({
|
26
|
+
btnRef
|
27
|
+
})
|
28
|
+
|
23
29
|
return () => {
|
24
30
|
return props.config.show
|
25
31
|
? h(
|
26
32
|
Button,
|
27
33
|
{
|
34
|
+
ref: btnRef,
|
28
35
|
name: FEATURE_NAME,
|
29
36
|
tooltip: props.tooltip,
|
30
37
|
color: props.color,
|
package/src/feature/infoBlock.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuButtonType } from '@/core/tool'
|
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'infoBlock'
|
|
14
14
|
* 菜单栏 - 信息块
|
15
15
|
*/
|
16
16
|
export const InfoBlockMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
|
23
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
24
|
+
|
25
|
+
expose({
|
26
|
+
btnRef
|
27
|
+
})
|
28
|
+
|
23
29
|
return () => {
|
24
30
|
return props.config.show
|
25
31
|
? h(
|
26
32
|
Button,
|
27
33
|
{
|
34
|
+
ref: btnRef,
|
28
35
|
name: FEATURE_NAME,
|
29
36
|
tooltip: props.tooltip,
|
30
37
|
color: props.color,
|
package/src/feature/italic.ts
CHANGED
@@ -78,21 +78,28 @@ export const ItalicToolbarButton = defineComponent(
|
|
78
78
|
* 菜单栏 - 斜体
|
79
79
|
*/
|
80
80
|
export const ItalicMenuButton = defineComponent(
|
81
|
-
props => {
|
81
|
+
(props, { expose }) => {
|
82
82
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
83
83
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
84
84
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
85
85
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
86
86
|
|
87
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
88
|
+
|
87
89
|
const active = computed<boolean>(() => {
|
88
90
|
return queryTextStyle(editor.value, dataRangeCaches.value, 'font-style', 'italic')
|
89
91
|
})
|
90
92
|
|
93
|
+
expose({
|
94
|
+
btnRef
|
95
|
+
})
|
96
|
+
|
91
97
|
return () => {
|
92
98
|
return props.config.show
|
93
99
|
? h(
|
94
100
|
Button,
|
95
101
|
{
|
102
|
+
ref: btnRef,
|
96
103
|
name: FEATURE_NAME,
|
97
104
|
tooltip: props.tooltip,
|
98
105
|
color: props.color,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
|
3
3
|
import { common as DapCommon } from 'dap-util'
|
4
4
|
import { MenuDisplayButtonType } from '@/core/tool'
|
@@ -14,13 +14,15 @@ const FEATURE_NAME = 'lineHeight'
|
|
14
14
|
* 菜单栏 - 行高
|
15
15
|
*/
|
16
16
|
export const LineHeightMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
const rangeKey = inject<Ref<number | null>>('rangeKey')!
|
23
23
|
|
24
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
25
|
+
|
24
26
|
const selectVal = computed<string>(() => {
|
25
27
|
const findHeightItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
|
26
28
|
let val: string | number | ButtonOptionsItemType = item
|
@@ -46,9 +48,14 @@ export const LineHeightMenuButton = defineComponent(
|
|
46
48
|
return findHeightItem ? (DapCommon.isObject(findHeightItem) ? ((findHeightItem as ButtonOptionsItemType).value as string) : (findHeightItem as string)) : (props.config.defaultValue as string)
|
47
49
|
})
|
48
50
|
|
51
|
+
expose({
|
52
|
+
btnRef
|
53
|
+
})
|
54
|
+
|
49
55
|
return () => {
|
50
56
|
return props.config.show
|
51
57
|
? h(Button, {
|
58
|
+
ref: btnRef,
|
52
59
|
name: FEATURE_NAME,
|
53
60
|
tooltip: props.tooltip,
|
54
61
|
color: props.color,
|
package/src/feature/link.ts
CHANGED
@@ -81,7 +81,7 @@ export const linkToolbar = defineComponent(
|
|
81
81
|
* 菜单栏 - 插入链接
|
82
82
|
*/
|
83
83
|
export const LinkMenuButton = defineComponent(
|
84
|
-
props => {
|
84
|
+
(props, { expose }) => {
|
85
85
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
86
86
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
87
87
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
@@ -91,6 +91,10 @@ export const LinkMenuButton = defineComponent(
|
|
91
91
|
|
92
92
|
const presetText = computed<string>(() => getRangeText(dataRangeCaches.value))
|
93
93
|
|
94
|
+
expose({
|
95
|
+
btnRef
|
96
|
+
})
|
97
|
+
|
94
98
|
return () => {
|
95
99
|
return props.config.show
|
96
100
|
? h(
|
@@ -20,7 +20,7 @@ export const extraKeepTagsForMathformula = ['math', 'mrow', 'mi', 'mo', 'mn', 'm
|
|
20
20
|
* 菜单栏 - 插入数学公式
|
21
21
|
*/
|
22
22
|
export const MathformulaMenuButton = defineComponent(
|
23
|
-
props => {
|
23
|
+
(props, { expose }) => {
|
24
24
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
25
25
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
26
26
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
@@ -42,6 +42,10 @@ export const MathformulaMenuButton = defineComponent(
|
|
42
42
|
return ''
|
43
43
|
})
|
44
44
|
|
45
|
+
expose({
|
46
|
+
btnRef
|
47
|
+
})
|
48
|
+
|
45
49
|
return () => {
|
46
50
|
return props.config.show
|
47
51
|
? h(
|
package/src/feature/orderList.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexElementsRangeType, AlexEditor, AlexElement } from 'alex-editor'
|
3
3
|
import { MenuButtonType } from '@/core/tool'
|
4
4
|
import { elementIsList, getMatchElementByRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
|
@@ -199,17 +199,24 @@ export const OrderListToolbar = defineComponent(
|
|
199
199
|
* 菜单栏 - 有序列表
|
200
200
|
*/
|
201
201
|
export const OrderListMenuButton = defineComponent(
|
202
|
-
props => {
|
202
|
+
(props, { expose }) => {
|
203
203
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
204
204
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
205
205
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
206
206
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
207
207
|
|
208
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
209
|
+
|
210
|
+
expose({
|
211
|
+
btnRef
|
212
|
+
})
|
213
|
+
|
208
214
|
return () => {
|
209
215
|
return props.config.show
|
210
216
|
? h(
|
211
217
|
Button,
|
212
218
|
{
|
219
|
+
ref: btnRef,
|
213
220
|
name: FEATURE_NAME,
|
214
221
|
tooltip: props.tooltip,
|
215
222
|
color: props.color,
|
package/src/feature/quote.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuSelectButtonType } from '@/core/tool'
|
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'quote'
|
|
14
14
|
* 菜单栏 - 引用
|
15
15
|
*/
|
16
16
|
export const QuoteMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
|
23
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
24
|
+
|
25
|
+
expose({
|
26
|
+
btnRef
|
27
|
+
})
|
28
|
+
|
23
29
|
return () => {
|
24
30
|
return props.config.show
|
25
31
|
? h(
|
26
32
|
Button,
|
27
33
|
{
|
34
|
+
ref: btnRef,
|
28
35
|
name: FEATURE_NAME,
|
29
36
|
tooltip: props.tooltip,
|
30
37
|
color: props.color,
|
package/src/feature/redo.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuButtonType } from '@/core/tool'
|
@@ -13,18 +13,25 @@ const FEATURE_NAME = 'redo'
|
|
13
13
|
* 菜单栏 - 重做
|
14
14
|
*/
|
15
15
|
export const RedoMenuButton = defineComponent(
|
16
|
-
props => {
|
16
|
+
(props, { expose }) => {
|
17
17
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
18
18
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
19
19
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
20
20
|
const rangeKey = inject<Ref<number | null>>('rangeKey')!
|
21
21
|
const redo = inject<() => void>('redo')!
|
22
22
|
|
23
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
24
|
+
|
25
|
+
expose({
|
26
|
+
btnRef
|
27
|
+
})
|
28
|
+
|
23
29
|
return () => {
|
24
30
|
return props.config.show
|
25
31
|
? h(
|
26
32
|
Button,
|
27
33
|
{
|
34
|
+
ref: btnRef,
|
28
35
|
name: FEATURE_NAME,
|
29
36
|
tooltip: props.tooltip,
|
30
37
|
color: props.color,
|
package/src/feature/separator.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuSelectButtonType } from '@/core/tool'
|
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'separator'
|
|
14
14
|
* 菜单栏 - 分隔线
|
15
15
|
*/
|
16
16
|
export const SeparatorMenuButton = defineComponent(
|
17
|
-
props => {
|
17
|
+
(props, { expose }) => {
|
18
18
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
19
19
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
20
20
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
21
21
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
22
22
|
|
23
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
24
|
+
|
25
|
+
expose({
|
26
|
+
btnRef
|
27
|
+
})
|
28
|
+
|
23
29
|
return () => {
|
24
30
|
return props.config.show
|
25
31
|
? h(
|
26
32
|
Button,
|
27
33
|
{
|
34
|
+
ref: btnRef,
|
28
35
|
name: FEATURE_NAME,
|
29
36
|
tooltip: props.tooltip,
|
30
37
|
color: props.color,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, h, inject, PropType, Ref } from 'vue'
|
1
|
+
import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
|
2
2
|
import { AlexEditor } from 'alex-editor'
|
3
3
|
import { Button } from '@/components/button'
|
4
4
|
import { MenuButtonType } from '@/core/tool'
|
@@ -13,16 +13,23 @@ const FEATURE_NAME = 'sourceView'
|
|
13
13
|
* 菜单栏 - 代码视图
|
14
14
|
*/
|
15
15
|
export const SourceViewMenuButton = defineComponent(
|
16
|
-
props => {
|
16
|
+
(props, { expose }) => {
|
17
17
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
18
18
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
19
19
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
20
20
|
|
21
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
22
|
+
|
23
|
+
expose({
|
24
|
+
btnRef
|
25
|
+
})
|
26
|
+
|
21
27
|
return () => {
|
22
28
|
return props.config.show
|
23
29
|
? h(
|
24
30
|
Button,
|
25
31
|
{
|
32
|
+
ref: btnRef,
|
26
33
|
name: FEATURE_NAME,
|
27
34
|
tooltip: props.tooltip,
|
28
35
|
color: props.color,
|
@@ -78,21 +78,28 @@ export const StrikethroughToolbarButton = defineComponent(
|
|
78
78
|
* 菜单栏 - 删除线
|
79
79
|
*/
|
80
80
|
export const StrikethroughMenuButton = defineComponent(
|
81
|
-
props => {
|
81
|
+
(props, { expose }) => {
|
82
82
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
83
83
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
84
84
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
85
85
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
86
86
|
|
87
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
88
|
+
|
87
89
|
const active = computed<boolean>(() => {
|
88
90
|
return queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration', 'line-through') || queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration-line', 'line-through')
|
89
91
|
})
|
90
92
|
|
93
|
+
expose({
|
94
|
+
btnRef
|
95
|
+
})
|
96
|
+
|
91
97
|
return () => {
|
92
98
|
return props.config.show
|
93
99
|
? h(
|
94
100
|
Button,
|
95
101
|
{
|
102
|
+
ref: btnRef,
|
96
103
|
name: FEATURE_NAME,
|
97
104
|
tooltip: props.tooltip,
|
98
105
|
color: props.color,
|
package/src/feature/sub.ts
CHANGED
@@ -78,21 +78,28 @@ export const SubToolbarButton = defineComponent(
|
|
78
78
|
* 菜单栏 - 下标
|
79
79
|
*/
|
80
80
|
export const SubMenuButton = defineComponent(
|
81
|
-
props => {
|
81
|
+
(props, { expose }) => {
|
82
82
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
83
83
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
84
84
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
85
85
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
86
86
|
|
87
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
88
|
+
|
87
89
|
const active = computed<boolean>(() => {
|
88
90
|
return queryTextStyle(editor.value, dataRangeCaches.value, 'vertical-align', 'sub')
|
89
91
|
})
|
90
92
|
|
93
|
+
expose({
|
94
|
+
btnRef
|
95
|
+
})
|
96
|
+
|
91
97
|
return () => {
|
92
98
|
return props.config.show
|
93
99
|
? h(
|
94
100
|
Button,
|
95
101
|
{
|
102
|
+
ref: btnRef,
|
96
103
|
name: FEATURE_NAME,
|
97
104
|
tooltip: props.tooltip,
|
98
105
|
color: props.color,
|
package/src/feature/super.ts
CHANGED
@@ -78,21 +78,28 @@ export const SuperToolbarButton = defineComponent(
|
|
78
78
|
* 菜单栏 - 上标
|
79
79
|
*/
|
80
80
|
export const SuperMenuButton = defineComponent(
|
81
|
-
props => {
|
81
|
+
(props, { expose }) => {
|
82
82
|
const editor = inject<Ref<AlexEditor>>('editor')!
|
83
83
|
const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
|
84
84
|
const $editTrans = inject<(key: string) => any>('$editTrans')!
|
85
85
|
const isSourceView = inject<Ref<boolean>>('isSourceView')!
|
86
86
|
|
87
|
+
const btnRef = ref<InstanceType<typeof Button> | null>(null)
|
88
|
+
|
87
89
|
const active = computed<boolean>(() => {
|
88
90
|
return queryTextStyle(editor.value, dataRangeCaches.value, 'vertical-align', 'super')
|
89
91
|
})
|
90
92
|
|
93
|
+
expose({
|
94
|
+
btnRef
|
95
|
+
})
|
96
|
+
|
91
97
|
return () => {
|
92
98
|
return props.config.show
|
93
99
|
? h(
|
94
100
|
Button,
|
95
101
|
{
|
102
|
+
ref: btnRef,
|
96
103
|
name: FEATURE_NAME,
|
97
104
|
tooltip: props.tooltip,
|
98
105
|
color: props.color,
|