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.
Files changed (62) hide show
  1. package/examples/App.vue +3 -287
  2. package/lib/components/tooltip/tooltip.vue.d.ts +1 -1
  3. package/lib/core/function.d.ts +1 -28
  4. package/lib/core/shortcut.d.ts +36 -0
  5. package/lib/core/tool.d.ts +11 -3
  6. package/lib/editify/editify.vue.d.ts +152 -14
  7. package/lib/editify/props.d.ts +0 -4
  8. package/lib/editify/toolbar/toolbar.vue.d.ts +1 -1
  9. package/lib/editify.es.js +3534 -2669
  10. package/lib/editify.umd.js +2 -2
  11. package/lib/index.d.ts +154 -16
  12. package/package.json +2 -2
  13. package/src/core/function.ts +1 -105
  14. package/src/core/rule.ts +2 -2
  15. package/src/core/shortcut.ts +386 -0
  16. package/src/core/tool.ts +107 -49
  17. package/src/css/var.less +0 -10
  18. package/src/editify/editify.less +1 -29
  19. package/src/editify/editify.vue +89 -25
  20. package/src/editify/menu/menu.vue +2 -3
  21. package/src/editify/props.ts +0 -5
  22. package/src/feature/align.ts +1 -1
  23. package/src/feature/attachment.ts +1 -1
  24. package/src/feature/backColor.ts +1 -1
  25. package/src/feature/bold.ts +1 -1
  26. package/src/feature/code.ts +1 -1
  27. package/src/feature/codeBlock.ts +3 -3
  28. package/src/feature/fontFamily.ts +1 -1
  29. package/src/feature/fontSize.ts +1 -1
  30. package/src/feature/foreColor.ts +1 -1
  31. package/src/feature/formatClear.ts +1 -1
  32. package/src/feature/fullScreen.ts +1 -1
  33. package/src/feature/heading.ts +3 -3
  34. package/src/feature/image.ts +1 -1
  35. package/src/feature/indent.ts +1 -1
  36. package/src/feature/infoBlock.ts +3 -3
  37. package/src/feature/italic.ts +1 -1
  38. package/src/feature/lineHeight.ts +1 -1
  39. package/src/feature/link.ts +1 -1
  40. package/src/feature/mathformula.ts +1 -1
  41. package/src/feature/orderList.ts +3 -3
  42. package/src/feature/quote.ts +3 -3
  43. package/src/feature/redo.ts +1 -1
  44. package/src/feature/separator.ts +1 -1
  45. package/src/feature/sourceView.ts +1 -1
  46. package/src/feature/strikethrough.ts +1 -1
  47. package/src/feature/sub.ts +1 -1
  48. package/src/feature/super.ts +1 -1
  49. package/src/feature/table.ts +3 -3
  50. package/src/feature/task.ts +3 -3
  51. package/src/feature/underline.ts +1 -1
  52. package/src/feature/undo.ts +1 -1
  53. package/src/feature/unorderList.ts +3 -3
  54. package/src/feature/video.ts +1 -1
  55. package/src/icon/iconfont.css +4 -8
  56. package/src/icon/iconfont.ttf +0 -0
  57. package/src/icon/iconfont.woff +0 -0
  58. package/src/index.ts +2 -6
  59. package/src/locale/en_US.ts +0 -3
  60. package/src/locale/zh_CN.ts +0 -3
  61. package/lib/feature/panel.d.ts +0 -18
  62. 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
- panel: 30,
732
- infoBlock: 31,
733
- sourceView: 32,
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;
@@ -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: '\e610';
501
+ content: '\e600';
530
502
  font-family: 'editify-icon' !important;
531
503
  font-size: 1.25em;
532
504
  padding: 0 20px;
@@ -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, elementIsPanel, elementIsInfoBlock, getMatchElementByElement } from '@/core/function'
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: Event) => {
740
+ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
745
741
  if (isDisabled.value) {
746
742
  return
747
743
  }
748
- //单独按下tab键
749
- if ((e as KeyboardEvent).key.toLocaleLowerCase() == 'tab' && !(e as KeyboardEvent).metaKey && !(e as KeyboardEvent).shiftKey && !(e as KeyboardEvent).ctrlKey && !(e as KeyboardEvent).altKey && props.tab) {
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
- const historyRecord = editor.value!.history.get(-1)
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
- const historyRecord = editor.value!.history.get(1)
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, PanelMenuButton, InfoBlockMenuButton])
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,
@@ -156,11 +156,6 @@ export const EditifyProps = {
156
156
  type: Boolean,
157
157
  default: false
158
158
  },
159
- //是否使用tab快捷键
160
- tab: {
161
- type: Boolean,
162
- default: true
163
- },
164
159
  //是否使用深色模式
165
160
  dark: {
166
161
  type: Boolean,
@@ -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,