vue-editify 0.2.18 → 0.2.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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,
|