vue-editify 0.2.18 → 0.2.20
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +3 -287
- package/lib/components/tooltip/tooltip.vue.d.ts +1 -1
- package/lib/core/function.d.ts +1 -28
- package/lib/core/shortcut.d.ts +36 -0
- package/lib/core/tool.d.ts +11 -3
- package/lib/editify/editify.vue.d.ts +152 -14
- package/lib/editify/props.d.ts +0 -4
- package/lib/editify/toolbar/toolbar.vue.d.ts +1 -1
- package/lib/editify.es.js +3534 -2669
- package/lib/editify.umd.js +2 -2
- package/lib/index.d.ts +154 -16
- package/package.json +2 -2
- package/src/core/function.ts +1 -105
- package/src/core/rule.ts +2 -2
- package/src/core/shortcut.ts +386 -0
- package/src/core/tool.ts +107 -49
- package/src/css/var.less +0 -10
- package/src/editify/editify.less +1 -29
- package/src/editify/editify.vue +89 -25
- package/src/editify/menu/menu.vue +2 -3
- package/src/editify/props.ts +0 -5
- package/src/feature/align.ts +1 -1
- package/src/feature/attachment.ts +1 -1
- package/src/feature/backColor.ts +1 -1
- package/src/feature/bold.ts +1 -1
- package/src/feature/code.ts +1 -1
- package/src/feature/codeBlock.ts +3 -3
- package/src/feature/fontFamily.ts +1 -1
- package/src/feature/fontSize.ts +1 -1
- package/src/feature/foreColor.ts +1 -1
- package/src/feature/formatClear.ts +1 -1
- package/src/feature/fullScreen.ts +1 -1
- package/src/feature/heading.ts +3 -3
- package/src/feature/image.ts +1 -1
- package/src/feature/indent.ts +1 -1
- package/src/feature/infoBlock.ts +3 -3
- package/src/feature/italic.ts +1 -1
- package/src/feature/lineHeight.ts +1 -1
- package/src/feature/link.ts +1 -1
- package/src/feature/mathformula.ts +1 -1
- package/src/feature/orderList.ts +3 -3
- package/src/feature/quote.ts +3 -3
- package/src/feature/redo.ts +1 -1
- package/src/feature/separator.ts +1 -1
- package/src/feature/sourceView.ts +1 -1
- package/src/feature/strikethrough.ts +1 -1
- package/src/feature/sub.ts +1 -1
- package/src/feature/super.ts +1 -1
- package/src/feature/table.ts +3 -3
- package/src/feature/task.ts +3 -3
- package/src/feature/underline.ts +1 -1
- package/src/feature/undo.ts +1 -1
- package/src/feature/unorderList.ts +3 -3
- package/src/feature/video.ts +1 -1
- package/src/icon/iconfont.css +4 -8
- package/src/icon/iconfont.ttf +0 -0
- package/src/icon/iconfont.woff +0 -0
- package/src/index.ts +2 -6
- package/src/locale/en_US.ts +0 -3
- package/src/locale/zh_CN.ts +0 -3
- package/lib/feature/panel.d.ts +0 -18
- package/src/feature/panel.ts +0 -62
package/src/core/tool.ts
CHANGED
@@ -1,10 +1,12 @@
|
|
1
|
-
import { App, Component, VNode } from 'vue'
|
1
|
+
import { App, Component, Ref, VNode } from 'vue'
|
2
|
+
import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
|
2
3
|
import { common as DapCommon, string as DapString, color as DapColor, element as DapElement } from 'dap-util'
|
3
4
|
import { languages } from '@/hljs'
|
4
5
|
import { LocaleType } from '@/locale'
|
5
6
|
import { Button, ButtonOptionsItemType, ButtonTypeType } from '@/components/button'
|
6
7
|
import { InsertImageUploadErrorType } from '@/components/insertImage'
|
7
8
|
import { InsertAttachmentUploadErrorType } from '@/components/insertAttachment'
|
9
|
+
import { config as shortcutConfig } from './shortcut'
|
8
10
|
|
9
11
|
export type ObjectType = {
|
10
12
|
[key: string]: any
|
@@ -21,11 +23,18 @@ export type ButtonOptionsConfigType = {
|
|
21
23
|
backColor?: (string | number | ButtonOptionsItemType)[]
|
22
24
|
}
|
23
25
|
|
26
|
+
export type ShortcutType = {
|
27
|
+
title: string
|
28
|
+
define: ((event: KeyboardEvent) => boolean | { [code: string]: boolean }) | null
|
29
|
+
operation?: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, isSourceView: Ref<boolean>, isFullScreen: Ref<boolean>, code?: string) => void
|
30
|
+
}
|
31
|
+
|
24
32
|
export interface MenuButtonType {
|
25
33
|
show?: boolean
|
26
34
|
leftBorder?: boolean
|
27
35
|
rightBorder?: boolean
|
28
36
|
disabled?: boolean
|
37
|
+
shortcut?: ShortcutType
|
29
38
|
}
|
30
39
|
|
31
40
|
export interface MenuSelectButtonType extends MenuButtonType {
|
@@ -88,6 +97,7 @@ export type MenuCustomButtonType = {
|
|
88
97
|
options?: ButtonOptionsItemType[]
|
89
98
|
value?: string | number
|
90
99
|
hideScroll?: boolean
|
100
|
+
shortcut?: ShortcutType
|
91
101
|
onLayerShow?: (name: string, btnInstance: InstanceType<typeof Button>) => void
|
92
102
|
onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
|
93
103
|
onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
|
@@ -157,7 +167,6 @@ export type MenuSequenceType = {
|
|
157
167
|
fullScreen?: number
|
158
168
|
attachment?: number
|
159
169
|
mathformula?: number
|
160
|
-
panel?: number
|
161
170
|
infoBlock?: number
|
162
171
|
}
|
163
172
|
|
@@ -205,7 +214,6 @@ export type MenuConfigType = {
|
|
205
214
|
fullScreen?: MenuButtonType
|
206
215
|
attachment?: MenuAttachmentButtonType
|
207
216
|
mathformula?: MenuMathformulaButtonType
|
208
|
-
panel?: MenuButtonType
|
209
217
|
infoBlock?: MenuButtonType
|
210
218
|
extends?: MenuExtendType
|
211
219
|
}
|
@@ -728,10 +736,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
728
736
|
codeBlock: 27,
|
729
737
|
attachment: 28,
|
730
738
|
mathformula: 29,
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
fullScreen: 33
|
739
|
+
infoBlock: 30,
|
740
|
+
sourceView: 31,
|
741
|
+
fullScreen: 32
|
735
742
|
},
|
736
743
|
//撤销按钮配置
|
737
744
|
undo: {
|
@@ -772,7 +779,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
772
779
|
//左侧边框是否显示
|
773
780
|
leftBorder: true,
|
774
781
|
//右侧边框是否显示
|
775
|
-
rightBorder: false
|
782
|
+
rightBorder: false,
|
783
|
+
//快捷键
|
784
|
+
shortcut: shortcutConfig.heading
|
776
785
|
},
|
777
786
|
//缩进
|
778
787
|
indent: {
|
@@ -789,7 +798,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
789
798
|
//左侧边框是否显示
|
790
799
|
leftBorder: false,
|
791
800
|
//右侧边框是否显示
|
792
|
-
rightBorder: false
|
801
|
+
rightBorder: false,
|
802
|
+
//快捷键
|
803
|
+
shortcut: shortcutConfig.indent
|
793
804
|
},
|
794
805
|
//引用
|
795
806
|
quote: {
|
@@ -800,7 +811,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
800
811
|
//左侧边框是否显示
|
801
812
|
leftBorder: false,
|
802
813
|
//右侧边框是否显示
|
803
|
-
rightBorder: false
|
814
|
+
rightBorder: false,
|
815
|
+
//快捷键
|
816
|
+
shortcut: shortcutConfig.quote
|
804
817
|
},
|
805
818
|
//分隔线
|
806
819
|
separator: {
|
@@ -811,7 +824,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
811
824
|
//左侧边框是否显示
|
812
825
|
leftBorder: false,
|
813
826
|
//右侧边框是否显示
|
814
|
-
rightBorder: false
|
827
|
+
rightBorder: false,
|
828
|
+
//快捷键
|
829
|
+
shortcut: shortcutConfig.separator
|
815
830
|
},
|
816
831
|
//对齐方式
|
817
832
|
align: {
|
@@ -828,7 +843,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
828
843
|
//左侧边框是否显示
|
829
844
|
leftBorder: true,
|
830
845
|
//右侧边框是否显示
|
831
|
-
rightBorder: false
|
846
|
+
rightBorder: false,
|
847
|
+
//快捷键
|
848
|
+
shortcut: shortcutConfig.align
|
832
849
|
},
|
833
850
|
//有序列表
|
834
851
|
orderList: {
|
@@ -839,7 +856,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
839
856
|
//左侧边框是否显示
|
840
857
|
leftBorder: false,
|
841
858
|
//右侧边框是否显示
|
842
|
-
rightBorder: false
|
859
|
+
rightBorder: false,
|
860
|
+
//快捷键
|
861
|
+
shortcut: shortcutConfig.orderList
|
843
862
|
},
|
844
863
|
//无序列表
|
845
864
|
unorderList: {
|
@@ -850,7 +869,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
850
869
|
//左侧边框是否显示
|
851
870
|
leftBorder: false,
|
852
871
|
//右侧边框是否显示
|
853
|
-
rightBorder: false
|
872
|
+
rightBorder: false,
|
873
|
+
//快捷键
|
874
|
+
shortcut: shortcutConfig.unorderList
|
854
875
|
},
|
855
876
|
//任务列表
|
856
877
|
task: {
|
@@ -861,7 +882,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
861
882
|
//左侧边框是否显示
|
862
883
|
leftBorder: false,
|
863
884
|
//右侧边框是否显示
|
864
|
-
rightBorder: false
|
885
|
+
rightBorder: false,
|
886
|
+
//快捷键
|
887
|
+
shortcut: shortcutConfig.task
|
865
888
|
},
|
866
889
|
//粗体
|
867
890
|
bold: {
|
@@ -872,7 +895,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
872
895
|
//左侧边框是否显示
|
873
896
|
leftBorder: true,
|
874
897
|
//右侧边框是否显示
|
875
|
-
rightBorder: false
|
898
|
+
rightBorder: false,
|
899
|
+
//快捷键
|
900
|
+
shortcut: shortcutConfig.bold
|
876
901
|
},
|
877
902
|
//下划线
|
878
903
|
underline: {
|
@@ -883,7 +908,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
883
908
|
//左侧边框是否显示
|
884
909
|
leftBorder: false,
|
885
910
|
//右侧边框是否显示
|
886
|
-
rightBorder: false
|
911
|
+
rightBorder: false,
|
912
|
+
//快捷键
|
913
|
+
shortcut: shortcutConfig.underline
|
887
914
|
},
|
888
915
|
//斜体
|
889
916
|
italic: {
|
@@ -894,7 +921,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
894
921
|
//左侧边框是否显示
|
895
922
|
leftBorder: false,
|
896
923
|
//右侧边框是否显示
|
897
|
-
rightBorder: false
|
924
|
+
rightBorder: false,
|
925
|
+
//快捷键
|
926
|
+
shortcut: shortcutConfig.italic
|
898
927
|
},
|
899
928
|
//删除线
|
900
929
|
strikethrough: {
|
@@ -905,7 +934,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
905
934
|
//左侧边框是否显示
|
906
935
|
leftBorder: false,
|
907
936
|
//右侧边框是否显示
|
908
|
-
rightBorder: false
|
937
|
+
rightBorder: false,
|
938
|
+
//快捷键
|
939
|
+
shortcut: shortcutConfig.strikethrough
|
909
940
|
},
|
910
941
|
//行内代码
|
911
942
|
code: {
|
@@ -916,7 +947,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
916
947
|
//左侧边框是否显示
|
917
948
|
leftBorder: false,
|
918
949
|
//右侧边框是否显示
|
919
|
-
rightBorder: false
|
950
|
+
rightBorder: false,
|
951
|
+
//快捷键
|
952
|
+
shortcut: shortcutConfig.code
|
920
953
|
},
|
921
954
|
//上标
|
922
955
|
super: {
|
@@ -927,7 +960,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
927
960
|
//左侧边框是否显示
|
928
961
|
leftBorder: false,
|
929
962
|
//右侧边框是否显示
|
930
|
-
rightBorder: false
|
963
|
+
rightBorder: false,
|
964
|
+
//快捷键
|
965
|
+
shortcut: shortcutConfig.super
|
931
966
|
},
|
932
967
|
//下标
|
933
968
|
sub: {
|
@@ -938,7 +973,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
938
973
|
//左侧边框是否显示
|
939
974
|
leftBorder: false,
|
940
975
|
//右侧边框是否显示
|
941
|
-
rightBorder: false
|
976
|
+
rightBorder: false,
|
977
|
+
//快捷键
|
978
|
+
shortcut: shortcutConfig.sub
|
942
979
|
},
|
943
980
|
//清除格式
|
944
981
|
formatClear: {
|
@@ -949,7 +986,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
949
986
|
//左侧边框是否显示
|
950
987
|
leftBorder: false,
|
951
988
|
//右侧边框是否显示
|
952
|
-
rightBorder: false
|
989
|
+
rightBorder: false,
|
990
|
+
//快捷键
|
991
|
+
shortcut: shortcutConfig.formatClear
|
953
992
|
},
|
954
993
|
//字号
|
955
994
|
fontSize: {
|
@@ -968,7 +1007,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
968
1007
|
//左侧边框是否显示
|
969
1008
|
leftBorder: true,
|
970
1009
|
//右侧边框是否显示
|
971
|
-
rightBorder: false
|
1010
|
+
rightBorder: false,
|
1011
|
+
//快捷键
|
1012
|
+
shortcut: shortcutConfig.fontSize
|
972
1013
|
},
|
973
1014
|
//字体
|
974
1015
|
fontFamily: {
|
@@ -987,7 +1028,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
987
1028
|
//左侧边框是否显示
|
988
1029
|
leftBorder: false,
|
989
1030
|
//右侧边框是否显示
|
990
|
-
rightBorder: false
|
1031
|
+
rightBorder: false,
|
1032
|
+
//快捷键
|
1033
|
+
shortcut: shortcutConfig.fontFamily
|
991
1034
|
},
|
992
1035
|
//行高
|
993
1036
|
lineHeight: {
|
@@ -1006,7 +1049,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1006
1049
|
//左侧边框是否显示
|
1007
1050
|
leftBorder: false,
|
1008
1051
|
//右侧边框是否显示
|
1009
|
-
rightBorder: false
|
1052
|
+
rightBorder: false,
|
1053
|
+
//快捷键
|
1054
|
+
shortcut: shortcutConfig.lineHeight
|
1010
1055
|
},
|
1011
1056
|
//前景色
|
1012
1057
|
foreColor: {
|
@@ -1019,7 +1064,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1019
1064
|
//左侧边框是否显示
|
1020
1065
|
leftBorder: true,
|
1021
1066
|
//右侧边框是否显示
|
1022
|
-
rightBorder: false
|
1067
|
+
rightBorder: false,
|
1068
|
+
//快捷键
|
1069
|
+
shortcut: shortcutConfig.foreColor
|
1023
1070
|
},
|
1024
1071
|
//背景色
|
1025
1072
|
backColor: {
|
@@ -1032,7 +1079,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1032
1079
|
//左侧边框是否显示
|
1033
1080
|
leftBorder: false,
|
1034
1081
|
//右侧边框是否显示
|
1035
|
-
rightBorder: false
|
1082
|
+
rightBorder: false,
|
1083
|
+
//快捷键
|
1084
|
+
shortcut: shortcutConfig.backColor
|
1036
1085
|
},
|
1037
1086
|
//链接
|
1038
1087
|
link: {
|
@@ -1043,7 +1092,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1043
1092
|
//左侧边框是否显示
|
1044
1093
|
leftBorder: true,
|
1045
1094
|
//右侧边框是否显示
|
1046
|
-
rightBorder: false
|
1095
|
+
rightBorder: false,
|
1096
|
+
//快捷键
|
1097
|
+
shortcut: shortcutConfig.link
|
1047
1098
|
},
|
1048
1099
|
//图片
|
1049
1100
|
image: {
|
@@ -1066,7 +1117,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1066
1117
|
//自定义上传图片
|
1067
1118
|
customUpload: undefined,
|
1068
1119
|
//异常处理函数
|
1069
|
-
handleError: undefined
|
1120
|
+
handleError: undefined,
|
1121
|
+
//快捷键
|
1122
|
+
shortcut: shortcutConfig.image
|
1070
1123
|
},
|
1071
1124
|
//视频
|
1072
1125
|
video: {
|
@@ -1089,7 +1142,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1089
1142
|
//自定义上传视频
|
1090
1143
|
customUpload: undefined,
|
1091
1144
|
//异常处理函数
|
1092
|
-
handleError: undefined
|
1145
|
+
handleError: undefined,
|
1146
|
+
//快捷键
|
1147
|
+
shortcut: shortcutConfig.video
|
1093
1148
|
},
|
1094
1149
|
//表格
|
1095
1150
|
table: {
|
@@ -1104,7 +1159,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1104
1159
|
//创建时表格的最大行数
|
1105
1160
|
maxRows: 10,
|
1106
1161
|
//创建时表格的最大列数
|
1107
|
-
maxColumns: 10
|
1162
|
+
maxColumns: 10,
|
1163
|
+
//快捷键
|
1164
|
+
shortcut: shortcutConfig.table
|
1108
1165
|
},
|
1109
1166
|
//代码块
|
1110
1167
|
codeBlock: {
|
@@ -1115,7 +1172,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1115
1172
|
//左侧边框是否显示
|
1116
1173
|
leftBorder: false,
|
1117
1174
|
//右侧边框是否显示
|
1118
|
-
rightBorder: false
|
1175
|
+
rightBorder: false,
|
1176
|
+
//快捷键
|
1177
|
+
shortcut: shortcutConfig.codeBlock
|
1119
1178
|
},
|
1120
1179
|
//代码视图
|
1121
1180
|
sourceView: {
|
@@ -1126,7 +1185,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1126
1185
|
//左侧边框是否显示
|
1127
1186
|
leftBorder: false,
|
1128
1187
|
//右侧边框是否显示
|
1129
|
-
rightBorder: false
|
1188
|
+
rightBorder: false,
|
1189
|
+
//快捷键
|
1190
|
+
shortcut: shortcutConfig.sourceView
|
1130
1191
|
},
|
1131
1192
|
//全屏
|
1132
1193
|
fullScreen: {
|
@@ -1137,7 +1198,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1137
1198
|
//左侧边框是否显示
|
1138
1199
|
leftBorder: false,
|
1139
1200
|
//右侧边框是否显示
|
1140
|
-
rightBorder: false
|
1201
|
+
rightBorder: false,
|
1202
|
+
//快捷键
|
1203
|
+
shortcut: shortcutConfig.fullScreen
|
1141
1204
|
},
|
1142
1205
|
//附件
|
1143
1206
|
attachment: {
|
@@ -1162,7 +1225,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1162
1225
|
//自定义上传附件
|
1163
1226
|
customUpload: undefined,
|
1164
1227
|
//异常处理函数
|
1165
|
-
handleError: undefined
|
1228
|
+
handleError: undefined,
|
1229
|
+
//快捷键
|
1230
|
+
shortcut: shortcutConfig.attachment
|
1166
1231
|
},
|
1167
1232
|
//数学公式
|
1168
1233
|
mathformula: {
|
@@ -1175,18 +1240,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1175
1240
|
//右侧边框是否显示
|
1176
1241
|
rightBorder: false,
|
1177
1242
|
//异常处理函数
|
1178
|
-
handleError: undefined
|
1179
|
-
|
1180
|
-
|
1181
|
-
panel: {
|
1182
|
-
//是否显示此按钮
|
1183
|
-
show: false,
|
1184
|
-
//是否禁用此按钮
|
1185
|
-
disabled: false,
|
1186
|
-
//左侧边框是否显示
|
1187
|
-
leftBorder: false,
|
1188
|
-
//右侧边框是否显示
|
1189
|
-
rightBorder: false
|
1243
|
+
handleError: undefined,
|
1244
|
+
//快捷键
|
1245
|
+
shortcut: shortcutConfig.mathformula
|
1190
1246
|
},
|
1191
1247
|
//信息块
|
1192
1248
|
infoBlock: {
|
@@ -1197,7 +1253,9 @@ export const getMenuConfig = (editTrans: (key: string) => any, editLocale: Local
|
|
1197
1253
|
//左侧边框是否显示
|
1198
1254
|
leftBorder: false,
|
1199
1255
|
//右侧边框是否显示
|
1200
|
-
rightBorder: false
|
1256
|
+
rightBorder: false,
|
1257
|
+
//快捷键
|
1258
|
+
shortcut: shortcutConfig.infoBlock
|
1201
1259
|
},
|
1202
1260
|
//拓展菜单
|
1203
1261
|
extends: {}
|
package/src/css/var.less
CHANGED
@@ -49,10 +49,6 @@
|
|
49
49
|
--editify-font-color-disabled: #6d6d6d;
|
50
50
|
//较深的字体颜色(编辑器内容区域字体颜色)
|
51
51
|
--editify-font-color-dark: #fff;
|
52
|
-
//链接字体颜色
|
53
|
-
--editify-font-color-link: #079457;
|
54
|
-
//链接字体悬浮色
|
55
|
-
--editify-font-color-link-dark: #05683d;
|
56
52
|
//边框颜色
|
57
53
|
--editify-border-color: #3e3e3e;
|
58
54
|
//默认背景色
|
@@ -63,12 +59,6 @@
|
|
63
59
|
--editify-background-darker: #2c2c2c;
|
64
60
|
//代码块背景色
|
65
61
|
--editify-pre-background: #242424;
|
66
|
-
//反色调字体颜色
|
67
|
-
--editify-reverse-color: #333;
|
68
|
-
//反色调背景色
|
69
|
-
--editify-reverse-background: #f7f8fa;
|
70
|
-
//视频背景色
|
71
|
-
--editify-video-background: #f5f5f5;
|
72
62
|
//代码高亮样式
|
73
63
|
--editify-hljs-color-1: #7765dd;
|
74
64
|
--editify-hljs-color-2: #6a737d;
|
package/src/editify/editify.less
CHANGED
@@ -477,34 +477,6 @@
|
|
477
477
|
background: var(--editify-background-darker);
|
478
478
|
}
|
479
479
|
}
|
480
|
-
//面板样式
|
481
|
-
:deep(div[data-editify-panel]) {
|
482
|
-
display: block;
|
483
|
-
position: relative;
|
484
|
-
width: 100%;
|
485
|
-
background-color: var(--editify-background-dark);
|
486
|
-
color: var(--editify-font-color);
|
487
|
-
border-radius: 4px;
|
488
|
-
margin-bottom: 15px;
|
489
|
-
padding: 10px 10px 1px 10px;
|
490
|
-
border: 1px solid var(--editify-border-color);
|
491
|
-
|
492
|
-
& > div {
|
493
|
-
margin: 0 0 10px 0;
|
494
|
-
font-size: var(--editify-font-size);
|
495
|
-
|
496
|
-
&:first-child {
|
497
|
-
margin: 0 0 15px 0;
|
498
|
-
font-size: 18px;
|
499
|
-
border-bottom: 1px solid var(--editify-border-color);
|
500
|
-
padding-bottom: 8px;
|
501
|
-
|
502
|
-
&:empty {
|
503
|
-
background-color: #000;
|
504
|
-
}
|
505
|
-
}
|
506
|
-
}
|
507
|
-
}
|
508
480
|
//信息块样式
|
509
481
|
:deep(div[data-editify-info]) {
|
510
482
|
display: block;
|
@@ -526,7 +498,7 @@
|
|
526
498
|
display: flex;
|
527
499
|
justify-content: center;
|
528
500
|
align-items: center;
|
529
|
-
content: '\
|
501
|
+
content: '\e600';
|
530
502
|
font-family: 'editify-icon' !important;
|
531
503
|
font-size: 1.25em;
|
532
504
|
padding: 0 20px;
|
package/src/editify/editify.vue
CHANGED
@@ -22,9 +22,9 @@
|
|
22
22
|
import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
|
23
23
|
import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType } from 'alex-editor'
|
24
24
|
import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor, common as DapCommon } from 'dap-util'
|
25
|
-
import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, clickIsOut } from '@/core/tool'
|
25
|
+
import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, clickIsOut, ShortcutType, MenuExtendType } from '@/core/tool'
|
26
26
|
import { listHandle, imageHandle, videoHandle, separatorHandle, linkHandle, codeHandle, tableHandle, preHandle, attachmentHandle, mathformulaHandle, infoBlockHandle, specialInblockHandle } from '@/core/rule'
|
27
|
-
import { elementToParagraph, getMatchElementByRange, elementIsTask, elementIsAttachment, elementIsList, elementIsMathformula, getMathformulaByElement,
|
27
|
+
import { elementToParagraph, getMatchElementByRange, elementIsTask, elementIsAttachment, elementIsList, elementIsMathformula, getMathformulaByElement, elementIsInfoBlock, getMatchElementByElement, hasTableInRange, hasPreInRange } from '@/core/function'
|
28
28
|
import { trans } from '@/locale'
|
29
29
|
import { LanguagesItemType } from '@/hljs'
|
30
30
|
import { extraKeepTagsForMathformula } from '@/feature/mathformula'
|
@@ -629,10 +629,6 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
|
|
629
629
|
if (!!getMathformulaByElement(el)) {
|
630
630
|
marks = mergeObject(marks, DapCommon.clone(el.marks!))!
|
631
631
|
}
|
632
|
-
//面板属性保留
|
633
|
-
if (elementIsPanel(el)) {
|
634
|
-
marks['data-editify-panel'] = el.marks!['data-editify-panel']
|
635
|
-
}
|
636
632
|
//信息块属性保留
|
637
633
|
if (elementIsInfoBlock(el)) {
|
638
634
|
marks['data-editify-info'] = el.marks!['data-editify-info']
|
@@ -741,12 +737,94 @@ const handleCustomParseNode = (ele: AlexElement) => {
|
|
741
737
|
return ele
|
742
738
|
}
|
743
739
|
//编辑区域键盘按下
|
744
|
-
const handleEditorKeydown = (val: string, e:
|
740
|
+
const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
|
745
741
|
if (isDisabled.value) {
|
746
742
|
return
|
747
743
|
}
|
748
|
-
|
749
|
-
|
744
|
+
//遍历菜单栏配置,设置快捷键
|
745
|
+
for (let key in menuConfig.value) {
|
746
|
+
//如果是拓展菜单
|
747
|
+
if (key == 'extends') {
|
748
|
+
//获取拓展菜单列表
|
749
|
+
const extendMenus = (menuConfig.value as any)[key] as MenuExtendType
|
750
|
+
//遍历拓展菜单列表
|
751
|
+
Object.keys(extendMenus).forEach(extendKey => {
|
752
|
+
//获取拓展菜单配置
|
753
|
+
const item = extendMenus[extendKey]
|
754
|
+
//获取该菜单按钮的快捷键配置
|
755
|
+
const shortcut = item.shortcut as ShortcutType | undefined
|
756
|
+
//如果快捷键配置存在并且定义了define方法
|
757
|
+
if (shortcut && typeof shortcut.define == 'function') {
|
758
|
+
//获取define方法执行结果
|
759
|
+
const res = shortcut.define(e) as boolean | { [code: string]: boolean }
|
760
|
+
//如果执行结果是true,则表示该快捷键按下
|
761
|
+
if (res === true) {
|
762
|
+
//阻止默认行为
|
763
|
+
e.preventDefault()
|
764
|
+
//没有被禁用则执行对应的操作
|
765
|
+
if (!item.disabled) {
|
766
|
+
shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
|
767
|
+
}
|
768
|
+
}
|
769
|
+
//如果是对象,则表示有多个快捷键操作
|
770
|
+
else if (res && DapCommon.isObject(res)) {
|
771
|
+
//遍历
|
772
|
+
Object.keys(res).forEach(code => {
|
773
|
+
//如果是true,则执行对应的操作
|
774
|
+
if (!!res[code]) {
|
775
|
+
//阻止默认行为
|
776
|
+
e.preventDefault()
|
777
|
+
//没有被禁用则执行对应的操作
|
778
|
+
if (!item.disabled) {
|
779
|
+
shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
|
780
|
+
}
|
781
|
+
}
|
782
|
+
})
|
783
|
+
}
|
784
|
+
}
|
785
|
+
})
|
786
|
+
}
|
787
|
+
//如果是内置菜单
|
788
|
+
else if (!['use', 'tooltip', 'mode', 'style', 'sequence'].includes(key)) {
|
789
|
+
const item = (menuConfig.value as any)[key]
|
790
|
+
//这里多做一步判断:判断是否菜单并且是否有快捷键配置
|
791
|
+
if (DapCommon.isObject(item) && item.show === true && DapCommon.isObject(item.shortcut)) {
|
792
|
+
//获取该菜单按钮的快捷键配置
|
793
|
+
const shortcut = item.shortcut as ShortcutType
|
794
|
+
//如果定义了define方法
|
795
|
+
if (typeof shortcut.define == 'function') {
|
796
|
+
//获取define方法执行结果
|
797
|
+
const res = shortcut.define(e) as boolean | { [code: string]: boolean }
|
798
|
+
//如果执行结果是true,则表示该快捷键按下
|
799
|
+
if (res === true) {
|
800
|
+
//阻止默认行为
|
801
|
+
e.preventDefault()
|
802
|
+
//没有被禁用则执行对应的操作
|
803
|
+
if (!item.disabled) {
|
804
|
+
shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
|
805
|
+
}
|
806
|
+
}
|
807
|
+
//如果是对象,则表示有多个快捷键操作
|
808
|
+
else if (res && DapCommon.isObject(res)) {
|
809
|
+
//遍历
|
810
|
+
Object.keys(res).forEach(code => {
|
811
|
+
//如果是true,则执行对应的操作
|
812
|
+
if (!!res[code]) {
|
813
|
+
//阻止默认行为
|
814
|
+
e.preventDefault()
|
815
|
+
//没有被禁用则执行对应的操作
|
816
|
+
if (!item.disabled) {
|
817
|
+
shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
|
818
|
+
}
|
819
|
+
}
|
820
|
+
})
|
821
|
+
}
|
822
|
+
}
|
823
|
+
}
|
824
|
+
}
|
825
|
+
}
|
826
|
+
//代码块和表格中单独按下tab键,插入4个空格
|
827
|
+
if (e.key.toLocaleLowerCase() == 'tab' && !e.metaKey && !e.shiftKey && !e.ctrlKey && !e.altKey && (hasTableInRange(editor.value!, dataRangeCaches.value) || hasPreInRange(editor.value!, dataRangeCaches.value))) {
|
750
828
|
e.preventDefault()
|
751
829
|
editor.value!.insertText(' ')
|
752
830
|
editor.value!.domRender()
|
@@ -971,28 +1049,14 @@ const undo = () => {
|
|
971
1049
|
if (isDisabled.value) {
|
972
1050
|
return
|
973
1051
|
}
|
974
|
-
|
975
|
-
if (historyRecord) {
|
976
|
-
editor.value!.history.current = historyRecord.current
|
977
|
-
editor.value!.stack = historyRecord.stack
|
978
|
-
editor.value!.range = historyRecord.range
|
979
|
-
editor.value!.domRender(true)
|
980
|
-
editor.value!.rangeRender()
|
981
|
-
}
|
1052
|
+
editor.value!.undo()
|
982
1053
|
}
|
983
1054
|
//api:重做
|
984
1055
|
const redo = () => {
|
985
1056
|
if (isDisabled.value) {
|
986
1057
|
return
|
987
1058
|
}
|
988
|
-
|
989
|
-
if (historyRecord) {
|
990
|
-
editor.value!.history.current = historyRecord.current
|
991
|
-
editor.value!.stack = historyRecord.stack
|
992
|
-
editor.value!.range = historyRecord.range
|
993
|
-
editor.value!.domRender(true)
|
994
|
-
editor.value!.rangeRender()
|
995
|
-
}
|
1059
|
+
editor.value!.redo()
|
996
1060
|
}
|
997
1061
|
|
998
1062
|
//监听编辑的值变更
|
@@ -46,7 +46,6 @@ import { SourceViewMenuButton } from '@/feature/sourceView'
|
|
46
46
|
import { FullScreenMenuButton } from '@/feature/fullScreen'
|
47
47
|
import { AttachmentMenuButton } from '@/feature/attachment'
|
48
48
|
import { MathformulaMenuButton } from '@/feature/mathformula'
|
49
|
-
import { PanelMenuButton } from '@/feature/panel'
|
50
49
|
import { InfoBlockMenuButton } from '@/feature/infoBlock'
|
51
50
|
|
52
51
|
defineOptions({
|
@@ -84,7 +83,7 @@ const menuNames = computed<string[]>(() => {
|
|
84
83
|
})
|
85
84
|
})
|
86
85
|
//内置菜单组件的数组
|
87
|
-
const defaultMenus = shallowRef([UndoMenuButton, RedoMenuButton, HeadingMenuButton, IndentMenuButton, QuoteMenuButton, SeparatorMenuButton, AlignMenuButton, OrderListMenuButton, UnorderListMenuButton, TaskMenuButton, BoldMenuButton, UnderlineMenuButton, ItalicMenuButton, StrikethroughMenuButton, CodeMenuButton, SuperMenuButton, SubMenuButton, FormatClearMenuButton, FontSizeMenuButton, FontFamilyMenuButton, LineHeightMenuButton, ForeColorMenuButton, BackColorMenuButton, LinkMenuButton, ImageMenuButton, VideoMenuButton, TableMenuButton, CodeBlockMenuButton, SourceViewMenuButton, FullScreenMenuButton, AttachmentMenuButton, MathformulaMenuButton,
|
86
|
+
const defaultMenus = shallowRef([UndoMenuButton, RedoMenuButton, HeadingMenuButton, IndentMenuButton, QuoteMenuButton, SeparatorMenuButton, AlignMenuButton, OrderListMenuButton, UnorderListMenuButton, TaskMenuButton, BoldMenuButton, UnderlineMenuButton, ItalicMenuButton, StrikethroughMenuButton, CodeMenuButton, SuperMenuButton, SubMenuButton, FormatClearMenuButton, FontSizeMenuButton, FontFamilyMenuButton, LineHeightMenuButton, ForeColorMenuButton, BackColorMenuButton, LinkMenuButton, ImageMenuButton, VideoMenuButton, TableMenuButton, CodeBlockMenuButton, SourceViewMenuButton, FullScreenMenuButton, AttachmentMenuButton, MathformulaMenuButton, InfoBlockMenuButton])
|
88
87
|
//根据菜单名称获取对应的内置菜单组件
|
89
88
|
const currentDefaultMenu = computed(() => {
|
90
89
|
return (name: string) => defaultMenus.value.find(item => item.name == `_${name}`)
|
@@ -128,7 +127,7 @@ const ExtendMenuButton = defineComponent(
|
|
128
127
|
zIndex: props.zIndex + 1,
|
129
128
|
ref: btnRef,
|
130
129
|
type: configuration.type || 'default',
|
131
|
-
title: configuration.title || ''
|
130
|
+
title: `${configuration.title || ''}${configuration.shortcut?.title ? `【${configuration.shortcut?.title}】` : ''}`,
|
132
131
|
leftBorder: configuration.leftBorder || false,
|
133
132
|
rightBorder: configuration.rightBorder || false,
|
134
133
|
hideScroll: configuration.hideScroll || false,
|
package/src/editify/props.ts
CHANGED
package/src/feature/align.ts
CHANGED
@@ -30,7 +30,7 @@ export const AlignMenuButton = defineComponent(
|
|
30
30
|
color: props.color,
|
31
31
|
zIndex: props.zIndex,
|
32
32
|
type: 'select',
|
33
|
-
title: $editTrans('align')
|
33
|
+
title: `${$editTrans('align')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
|
34
34
|
selectConfig: {
|
35
35
|
options: props.config.options,
|
36
36
|
width: props.config.width,
|
@@ -35,7 +35,7 @@ export const AttachmentMenuButton = defineComponent(
|
|
35
35
|
zIndex: props.zIndex,
|
36
36
|
type: 'select',
|
37
37
|
hideScroll: true,
|
38
|
-
title: $editTrans('insertAttachment')
|
38
|
+
title: `${$editTrans('insertAttachment')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
|
39
39
|
leftBorder: props.config.leftBorder,
|
40
40
|
rightBorder: props.config.rightBorder,
|
41
41
|
active: false,
|