@lesjoursfr/edith 2.2.2 → 2.2.4

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/dist/ui/editor.js CHANGED
@@ -209,8 +209,8 @@ export class EdithEditor {
209
209
  }
210
210
  _processKeyEvent(e) {
211
211
  // Check the key code
212
- switch (e.keyCode) {
213
- case 13: // Enter : 13
212
+ switch (e.key) {
213
+ case "Enter":
214
214
  if (e.type === "keydown") {
215
215
  this.replaceByHtml("<br />"); // Insert a line break
216
216
  }
@@ -223,38 +223,43 @@ export class EdithEditor {
223
223
  }
224
224
  _processKeyEventWithMeta(e) {
225
225
  // Check the key code
226
- switch (e.keyCode) {
227
- case 13: // Enter : 13
226
+ switch (e.key) {
227
+ case "Enter":
228
228
  if (e.type === "keydown") {
229
229
  this.replaceByHtml("<br />"); // Insert a line break
230
230
  }
231
231
  return true;
232
- case 32: // Space : 32
232
+ case " ":
233
233
  if (e.type === "keydown") {
234
234
  this.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>'); // Insert a non-breaking space
235
235
  }
236
236
  return true;
237
- case 66: // b : 66
237
+ case "b":
238
238
  if (e.type === "keydown") {
239
239
  this.wrapInsideTag("b"); // Toggle bold
240
240
  }
241
241
  return true;
242
- case 73: // i : 73
242
+ case "i":
243
243
  if (e.type === "keydown") {
244
244
  this.wrapInsideTag("i"); // Toggle italic
245
245
  }
246
246
  return true;
247
- case 85: // u : 85
247
+ case "k":
248
+ if (e.type === "keydown") {
249
+ this.insertLink();
250
+ }
251
+ return true;
252
+ case "u":
248
253
  if (e.type === "keydown") {
249
254
  this.wrapInsideTag("u"); // Toggle underline
250
255
  }
251
256
  return true;
252
- case 83: // s : 83
257
+ case "s":
253
258
  if (e.type === "keydown") {
254
259
  this.wrapInsideTag("s"); // Toggle strikethrough
255
260
  }
256
261
  return true;
257
- case 90: // z : 90
262
+ case "z":
258
263
  if (e.type === "keydown") {
259
264
  this.restoreSnapshot(); // Undo
260
265
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lesjoursfr/edith",
3
- "version": "2.2.2",
3
+ "version": "2.2.4",
4
4
  "description": "Simple WYSIWYG editor.",
5
5
  "license": "MIT",
6
6
  "repository": "lesjoursfr/edith",
@@ -12,7 +12,7 @@
12
12
  "access": "public"
13
13
  },
14
14
  "engines": {
15
- "node": "18.x || 20.x"
15
+ "node": "20.x || 22.x"
16
16
  },
17
17
  "browserslist": [
18
18
  "> 1%",
@@ -24,8 +24,8 @@
24
24
  "type": "module",
25
25
  "scripts": {
26
26
  "freshlock": "rm -rf node_modules/ && rm .yarn/install-state.gz && rm yarn.lock && yarn",
27
- "eslint-check": "eslint . --ext .js,.jsx,.ts,.tsx",
28
- "eslint-fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
27
+ "eslint-check": "eslint",
28
+ "eslint-fix": "eslint --fix",
29
29
  "stylelint-check": "stylelint **/*.scss",
30
30
  "stylelint-fix": "stylelint **/*.scss --fix",
31
31
  "prettier-check": "prettier --check .",
@@ -47,52 +47,53 @@
47
47
  "editor"
48
48
  ],
49
49
  "dependencies": {
50
- "@lesjoursfr/browser-tools": "^1.1.1"
50
+ "@lesjoursfr/browser-tools": "^1.1.3"
51
51
  },
52
52
  "devDependencies": {
53
- "@babel/core": "^7.23.9",
54
- "@babel/preset-env": "^7.23.9",
55
- "@codemirror/lang-html": "^6.4.8",
56
- "@fortawesome/fontawesome-free": "^6.5.1",
53
+ "@babel/core": "^7.25.2",
54
+ "@babel/preset-env": "^7.25.3",
55
+ "@codemirror/lang-html": "^6.4.9",
56
+ "@eslint/js": "^9.8.0",
57
+ "@fortawesome/fontawesome-free": "^6.6.0",
57
58
  "@popperjs/core": "^2.11.8",
58
- "@tsconfig/next": "^2.0.1",
59
+ "@tsconfig/next": "^2.0.3",
59
60
  "@types/babel__core": "^7.20.5",
60
- "@types/babel__preset-env": "^7.9.6",
61
+ "@types/babel__preset-env": "^7.9.7",
61
62
  "@types/color": "^3.0.6",
62
- "@types/jsdom": "^21.1.6",
63
- "@types/mocha": "^10.0.6",
64
- "@types/node": "^20.11.15",
65
- "@typescript-eslint/eslint-plugin": "^6.20.0",
66
- "@typescript-eslint/parser": "^6.20.0",
63
+ "@types/jsdom": "^21.1.7",
64
+ "@types/mocha": "^10.0.7",
65
+ "@types/node": "^20.14.13",
67
66
  "babel-loader": "^9.1.3",
68
67
  "codemirror": "^6.0.1",
69
- "css-loader": "^6.10.0",
70
- "css-minimizer-webpack-plugin": "^6.0.0",
71
- "eslint": "^8.56.0",
68
+ "css-loader": "^7.1.2",
69
+ "css-minimizer-webpack-plugin": "^7.0.0",
70
+ "eslint": "^9.8.0",
72
71
  "eslint-config-prettier": "^9.1.0",
73
72
  "fs-extra": "^11.2.0",
74
- "jsdom": "^24.0.0",
75
- "mini-css-extract-plugin": "^2.7.7",
76
- "mocha": "^10.2.0",
77
- "postcss": "^8.4.33",
78
- "prettier": "^3.2.4",
79
- "sass": "^1.70.0",
80
- "sass-loader": "^14.1.0",
81
- "stylelint": "^16.2.0",
82
- "stylelint-config-sass-guidelines": "^11.0.0",
73
+ "globals": "^15.9.0",
74
+ "jsdom": "^24.1.1",
75
+ "mini-css-extract-plugin": "^2.9.0",
76
+ "mocha": "^10.7.0",
77
+ "postcss": "^8.4.40",
78
+ "prettier": "^3.3.3",
79
+ "sass": "^1.77.8",
80
+ "sass-loader": "^16.0.0",
81
+ "stylelint": "^16.8.1",
82
+ "stylelint-config-standard-scss": "^13.1.0",
83
83
  "terser-webpack-plugin": "^5.3.10",
84
84
  "ts-loader": "^9.5.1",
85
85
  "ts-node": "^10.9.2",
86
- "typescript": "^5.3.3",
87
- "webpack": "^5.90.0",
86
+ "typescript": "^5.5.4",
87
+ "typescript-eslint": "^8.0.0",
88
+ "webpack": "^5.93.0",
88
89
  "webpack-cli": "^5.1.4",
89
- "webpack-dev-server": "^4.15.1"
90
+ "webpack-dev-server": "^5.0.4"
90
91
  },
91
92
  "peerDependencies": {
92
- "@codemirror/lang-html": "^6.4.8",
93
- "@fortawesome/fontawesome-free": "^6.5.1",
93
+ "@codemirror/lang-html": "^6.4.9",
94
+ "@fortawesome/fontawesome-free": "^6.6.0",
94
95
  "@popperjs/core": "^2.11.8",
95
96
  "codemirror": "^6.0.1"
96
97
  },
97
- "packageManager": "yarn@4.1.0"
98
+ "packageManager": "yarn@4.3.1"
98
99
  }
@@ -24,260 +24,260 @@ $color-modal-submit-color: #fff;
24
24
  $color-modal-submit-border: #0d6efd;
25
25
 
26
26
  .edith {
27
- background-color: $color-toolbar;
28
- border: 1px solid $color-toolbar-border;
29
- border-radius: 0.25rem;
30
- padding: 5px;
27
+ background-color: $color-toolbar;
28
+ border: 1px solid $color-toolbar-border;
29
+ border-radius: 0.25rem;
30
+ padding: 5px;
31
31
  }
32
32
 
33
33
  .edith-toolbar {
34
- background-color: $color-toolbar;
34
+ background-color: $color-toolbar;
35
35
  }
36
36
 
37
37
  .edith-btn {
38
- background-color: $color-button;
39
- border: 1px solid $color-button-border;
40
- border-radius: 0.25rem;
41
- color: $color-button-text;
42
- cursor: pointer;
43
- display: inline-block;
44
- font-size: 1rem;
45
- font-weight: 900;
46
- line-height: 1.5;
47
- padding: 0.375rem 0.75rem;
48
- text-align: center;
49
- text-decoration: none;
50
- user-select: none;
51
- vertical-align: middle;
52
-
53
- &:disabled {
54
- color: color.scale($color-button-text, $lightness: 70%);
55
- cursor: not-allowed;
56
- }
38
+ background-color: $color-button;
39
+ border: 1px solid $color-button-border;
40
+ border-radius: 0.25rem;
41
+ color: $color-button-text;
42
+ cursor: pointer;
43
+ display: inline-block;
44
+ font-size: 1rem;
45
+ font-weight: 900;
46
+ line-height: 1.5;
47
+ padding: 0.375rem 0.75rem;
48
+ text-align: center;
49
+ text-decoration: none;
50
+ user-select: none;
51
+ vertical-align: middle;
52
+
53
+ &:disabled {
54
+ color: color.scale($color-button-text, $lightness: 70%);
55
+ cursor: not-allowed;
56
+ }
57
57
  }
58
58
 
59
59
  .edith-btn-group {
60
- display: inline-flex;
61
- position: relative;
62
- vertical-align: middle;
63
-
64
- &:not(:first-child) {
65
- margin-left: 10px;
66
- }
67
-
68
- :not(:first-child) {
69
- margin-left: -1px;
70
- }
71
-
72
- .edith-btn:not(:last-child) {
73
- border-bottom-right-radius: 0;
74
- border-top-right-radius: 0;
75
- }
76
-
77
- .edith-btn:not(:first-child) {
78
- border-bottom-left-radius: 0;
79
- border-top-left-radius: 0;
80
- }
60
+ display: inline-flex;
61
+ position: relative;
62
+ vertical-align: middle;
63
+
64
+ &:not(:first-child) {
65
+ margin-left: 10px;
66
+ }
67
+
68
+ :not(:first-child) {
69
+ margin-left: -1px;
70
+ }
71
+
72
+ .edith-btn:not(:last-child) {
73
+ border-bottom-right-radius: 0;
74
+ border-top-right-radius: 0;
75
+ }
76
+
77
+ .edith-btn:not(:first-child) {
78
+ border-bottom-left-radius: 0;
79
+ border-top-left-radius: 0;
80
+ }
81
81
  }
82
82
 
83
83
  .edith-btn-nbsp {
84
- &::before {
85
- content: "\0020";
86
- display: block;
87
- height: 16px;
88
- width: 12px;
89
- }
84
+ &::before {
85
+ content: "\0020";
86
+ display: block;
87
+ height: 16px;
88
+ width: 12px;
89
+ }
90
90
  }
91
91
 
92
92
  .edith-tooltip {
93
- background: $color-tooltip;
94
- border-radius: 4px;
95
- color: $color-tooltip-text;
96
- font-size: 13px;
97
- font-weight: bold;
98
- padding: 4px 8px;
99
- z-index: 10;
100
-
101
- .arrow,
102
- .arrow::before {
103
- background: inherit;
104
- height: 8px;
105
- position: absolute;
106
- width: 8px;
107
- }
108
-
109
- .arrow {
110
- visibility: hidden;
111
- }
112
-
113
- .arrow::before {
114
- content: "";
115
- transform: rotate(45deg);
116
- visibility: visible;
117
- }
118
-
119
- &[data-popper-placement^="top"] > .arrow {
120
- bottom: -4px;
121
- }
122
-
123
- &[data-popper-placement^="bottom"] > .arrow {
124
- top: -4px;
125
- }
126
-
127
- &[data-popper-placement^="left"] > .arrow {
128
- right: -4px;
129
- }
130
-
131
- &[data-popper-placement^="right"] > .arrow {
132
- left: -4px;
133
- }
93
+ background: $color-tooltip;
94
+ border-radius: 4px;
95
+ color: $color-tooltip-text;
96
+ font-size: 13px;
97
+ font-weight: bold;
98
+ padding: 4px 8px;
99
+ z-index: 10;
100
+
101
+ .arrow,
102
+ .arrow::before {
103
+ background: inherit;
104
+ height: 8px;
105
+ position: absolute;
106
+ width: 8px;
107
+ }
108
+
109
+ .arrow {
110
+ visibility: hidden;
111
+ }
112
+
113
+ .arrow::before {
114
+ content: "";
115
+ transform: rotate(45deg);
116
+ visibility: visible;
117
+ }
118
+
119
+ &[data-popper-placement^="top"] > .arrow {
120
+ bottom: -4px;
121
+ }
122
+
123
+ &[data-popper-placement^="bottom"] > .arrow {
124
+ top: -4px;
125
+ }
126
+
127
+ &[data-popper-placement^="left"] > .arrow {
128
+ right: -4px;
129
+ }
130
+
131
+ &[data-popper-placement^="right"] > .arrow {
132
+ left: -4px;
133
+ }
134
134
  }
135
135
 
136
136
  .edith-editing-area {
137
- background-color: $color-editor;
138
- border-radius: 0.25rem;
139
- margin-top: 5px;
140
- padding: 5px;
137
+ background-color: $color-editor;
138
+ border-radius: 0.25rem;
139
+ margin-top: 5px;
140
+ padding: 5px;
141
141
  }
142
142
 
143
143
  .edith-visual,
144
144
  .edith-code {
145
- height: 100%;
146
- outline: none;
147
- overflow: auto;
145
+ height: 100%;
146
+ outline: none;
147
+ overflow: auto;
148
148
  }
149
149
 
150
150
  .edith-hidden {
151
- display: none;
151
+ display: none;
152
152
  }
153
153
 
154
154
  .edith-visual {
155
- color: $color-editor-text;
155
+ color: $color-editor-text;
156
156
 
157
- .edith-nbsp {
158
- color: color.scale($color-button-text, $lightness: 70%);
159
- }
157
+ .edith-nbsp {
158
+ color: color.scale($color-button-text, $lightness: 70%);
159
+ }
160
160
  }
161
161
 
162
162
  .edith-modal {
163
- background: $color-modal;
164
- border: 2px solid $color-modal-border;
165
- border-radius: 10px;
166
- left: calc(50% - 200px);
167
- position: fixed;
168
- top: 20%;
169
- width: 400px;
170
- z-index: 10;
171
-
172
- .edith-modal-header {
173
- border-bottom: 1px solid $color-modal-border;
174
- color: $color-modal-title;
175
- font-size: 20px;
176
- font-weight: 700;
177
- line-height: 1.4;
178
- padding: 5px 10px;
179
- }
180
-
181
- .edith-modal-content {
182
- color: $color-modal-text;
183
- margin: 10px;
184
- }
185
-
186
- .edith-modal-input {
187
- display: flex;
188
- flex-wrap: wrap;
189
- margin: 10px 0;
190
-
191
- label,
192
- input {
193
- width: 100%;
194
- }
195
-
196
- input {
197
- appearance: none;
198
- background-clip: padding-box;
199
- background-color: $color-modal;
200
- border: 1px solid $color-checkbox-border;
201
- border-radius: 0.25rem;
202
- font-size: 1rem;
203
- font-weight: 400;
204
- line-height: 1.5;
205
- outline: 0;
206
- padding: 0.375rem 0.75rem;
207
- width: 100%;
208
- }
209
-
210
- label {
211
- font-size: 16px;
212
- font-weight: 700;
213
- margin-bottom: 5px;
214
- }
215
- }
216
-
217
- .edith-modal-checkbox {
218
- margin: 10px 0;
219
-
220
- label {
221
- display: flex;
222
- }
223
-
224
- input {
225
- appearance: none;
226
- background-color: $color-modal;
227
- background-position: 50%;
228
- background-repeat: no-repeat;
229
- background-size: contain;
230
- border: 1px solid $color-checkbox-border;
231
- border-radius: 0.25em;
232
- height: 1em;
233
- margin-top: 0.25em;
234
- vertical-align: top;
235
- width: 1em;
236
-
237
- &:checked {
238
- background-color: $color-checkbox-background;
239
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
240
- border-color: $color-checkbox-background;
241
- }
242
- }
243
- }
244
-
245
- .edith-modal-footer {
246
- border-top: 1px solid $color-modal-border;
247
- display: flex;
248
- justify-content: flex-end;
249
- padding: 5px 10px;
250
-
251
- :not(:last-child) {
252
- margin-right: 10px;
253
- }
254
- }
255
-
256
- .edith-modal-cancel,
257
- .edith-modal-submit {
258
- border: 1px solid transparent;
259
- border-radius: 0.25rem;
260
- cursor: pointer;
261
- display: inline-block;
262
- font-size: 1rem;
263
- font-weight: 400;
264
- line-height: 1.5;
265
- padding: 0.375rem 0.75rem;
266
- text-align: center;
267
- text-decoration: none;
268
- user-select: none;
269
- vertical-align: middle;
270
- }
271
-
272
- .edith-modal-cancel {
273
- background-color: $color-modal-cancel-background;
274
- border-color: $color-modal-cancel-border;
275
- color: $color-modal-cancel-color;
276
- }
277
-
278
- .edith-modal-submit {
279
- background-color: $color-modal-submit-background;
280
- border-color: $color-modal-submit-border;
281
- color: $color-modal-submit-color;
282
- }
163
+ background: $color-modal;
164
+ border: 2px solid $color-modal-border;
165
+ border-radius: 10px;
166
+ left: calc(50% - 200px);
167
+ position: fixed;
168
+ top: 20%;
169
+ width: 400px;
170
+ z-index: 10;
171
+
172
+ .edith-modal-header {
173
+ border-bottom: 1px solid $color-modal-border;
174
+ color: $color-modal-title;
175
+ font-size: 20px;
176
+ font-weight: 700;
177
+ line-height: 1.4;
178
+ padding: 5px 10px;
179
+ }
180
+
181
+ .edith-modal-content {
182
+ color: $color-modal-text;
183
+ margin: 10px;
184
+ }
185
+
186
+ .edith-modal-input {
187
+ display: flex;
188
+ flex-wrap: wrap;
189
+ margin: 10px 0;
190
+
191
+ label,
192
+ input {
193
+ width: 100%;
194
+ }
195
+
196
+ input {
197
+ appearance: none;
198
+ background-clip: padding-box;
199
+ background-color: $color-modal;
200
+ border: 1px solid $color-checkbox-border;
201
+ border-radius: 0.25rem;
202
+ font-size: 1rem;
203
+ font-weight: 400;
204
+ line-height: 1.5;
205
+ outline: 0;
206
+ padding: 0.375rem 0.75rem;
207
+ width: 100%;
208
+ }
209
+
210
+ label {
211
+ font-size: 16px;
212
+ font-weight: 700;
213
+ margin-bottom: 5px;
214
+ }
215
+ }
216
+
217
+ .edith-modal-checkbox {
218
+ margin: 10px 0;
219
+
220
+ label {
221
+ display: flex;
222
+ }
223
+
224
+ input {
225
+ appearance: none;
226
+ background-color: $color-modal;
227
+ background-position: 50%;
228
+ background-repeat: no-repeat;
229
+ background-size: contain;
230
+ border: 1px solid $color-checkbox-border;
231
+ border-radius: 0.25em;
232
+ height: 1em;
233
+ margin-top: 0.25em;
234
+ vertical-align: top;
235
+ width: 1em;
236
+
237
+ &:checked {
238
+ background-color: $color-checkbox-background;
239
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
240
+ border-color: $color-checkbox-background;
241
+ }
242
+ }
243
+ }
244
+
245
+ .edith-modal-footer {
246
+ border-top: 1px solid $color-modal-border;
247
+ display: flex;
248
+ justify-content: flex-end;
249
+ padding: 5px 10px;
250
+
251
+ :not(:last-child) {
252
+ margin-right: 10px;
253
+ }
254
+ }
255
+
256
+ .edith-modal-cancel,
257
+ .edith-modal-submit {
258
+ border: 1px solid transparent;
259
+ border-radius: 0.25rem;
260
+ cursor: pointer;
261
+ display: inline-block;
262
+ font-size: 1rem;
263
+ font-weight: 400;
264
+ line-height: 1.5;
265
+ padding: 0.375rem 0.75rem;
266
+ text-align: center;
267
+ text-decoration: none;
268
+ user-select: none;
269
+ vertical-align: middle;
270
+ }
271
+
272
+ .edith-modal-cancel {
273
+ background-color: $color-modal-cancel-background;
274
+ border-color: $color-modal-cancel-border;
275
+ color: $color-modal-cancel-color;
276
+ }
277
+
278
+ .edith-modal-submit {
279
+ background-color: $color-modal-submit-background;
280
+ border-color: $color-modal-submit-border;
281
+ color: $color-modal-submit-color;
282
+ }
283
283
  }