@ckeditor/ckeditor5-code-block 0.0.0-nightly-20240603.0 → 0.0.0-nightly-20240604.0
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/README.md +0 -6
- package/dist/index.js +152 -183
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -15,12 +15,6 @@ Check out the [demo in the code block feature guide](https://ckeditor.com/docs/c
|
|
|
15
15
|
|
|
16
16
|
See the [`@ckeditor/ckeditor5-code-block` package](https://ckeditor.com/docs/ckeditor5/latest/api/code-block.html) page as well as the [code block feature](https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html) guide in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
|
|
17
17
|
|
|
18
|
-
## Installation
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install ckeditor5
|
|
22
|
-
```
|
|
23
|
-
|
|
24
18
|
## License
|
|
25
19
|
|
|
26
20
|
Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).
|
package/dist/index.js
CHANGED
|
@@ -224,37 +224,26 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
224
224
|
return t('Leaving code snippet');
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
-
|
|
228
|
-
* The code block command plugin.
|
|
229
|
-
*/ class CodeBlockCommand extends Command {
|
|
230
|
-
/**
|
|
231
|
-
* Contains the last used language.
|
|
232
|
-
*/ _lastLanguage;
|
|
233
|
-
/**
|
|
234
|
-
* @inheritDoc
|
|
235
|
-
*/ constructor(editor){
|
|
236
|
-
super(editor);
|
|
237
|
-
this._lastLanguage = null;
|
|
238
|
-
}
|
|
227
|
+
class CodeBlockCommand extends Command {
|
|
239
228
|
/**
|
|
240
|
-
|
|
241
|
-
|
|
229
|
+
* @inheritDoc
|
|
230
|
+
*/ refresh() {
|
|
242
231
|
this.value = this._getValue();
|
|
243
232
|
this.isEnabled = this._checkEnabled();
|
|
244
233
|
}
|
|
245
234
|
/**
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
235
|
+
* Executes the command. When the command {@link #value is on}, all topmost code blocks within
|
|
236
|
+
* the selection will be removed. If it is off, all selected blocks will be flattened and
|
|
237
|
+
* wrapped by a code block.
|
|
238
|
+
*
|
|
239
|
+
* @fires execute
|
|
240
|
+
* @param options Command options.
|
|
241
|
+
* @param options.language The code block language.
|
|
242
|
+
* @param options.forceValue If set, it will force the command behavior. If `true`, the command will apply a code block,
|
|
243
|
+
* otherwise the command will remove the code block. If not set, the command will act basing on its current value.
|
|
244
|
+
* @param options.usePreviousLanguageChoice If set on `true` and the `options.language` is not specified, the command
|
|
245
|
+
* will apply the previous language (if the command was already executed) when inserting the `codeBlock` element.
|
|
246
|
+
*/ execute(options = {}) {
|
|
258
247
|
const editor = this.editor;
|
|
259
248
|
const model = editor.model;
|
|
260
249
|
const selection = model.document.selection;
|
|
@@ -272,20 +261,20 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
272
261
|
});
|
|
273
262
|
}
|
|
274
263
|
/**
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
264
|
+
* Checks the command's {@link #value}.
|
|
265
|
+
*
|
|
266
|
+
* @returns The current value.
|
|
267
|
+
*/ _getValue() {
|
|
279
268
|
const selection = this.editor.model.document.selection;
|
|
280
269
|
const firstBlock = first(selection.getSelectedBlocks());
|
|
281
270
|
const isCodeBlock = !!(firstBlock && firstBlock.is('element', 'codeBlock'));
|
|
282
271
|
return isCodeBlock ? firstBlock.getAttribute('language') : false;
|
|
283
272
|
}
|
|
284
273
|
/**
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
274
|
+
* Checks whether the command can be enabled in the current context.
|
|
275
|
+
*
|
|
276
|
+
* @returns Whether the command should be enabled.
|
|
277
|
+
*/ _checkEnabled() {
|
|
289
278
|
if (this.value) {
|
|
290
279
|
return true;
|
|
291
280
|
}
|
|
@@ -335,6 +324,12 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
335
324
|
writer.removeAttribute('language', block);
|
|
336
325
|
}
|
|
337
326
|
}
|
|
327
|
+
/**
|
|
328
|
+
* @inheritDoc
|
|
329
|
+
*/ constructor(editor){
|
|
330
|
+
super(editor);
|
|
331
|
+
this._lastLanguage = null;
|
|
332
|
+
}
|
|
338
333
|
}
|
|
339
334
|
/**
|
|
340
335
|
* Picks the language for the new code block. If any language is passed as an option,
|
|
@@ -351,27 +346,18 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
351
346
|
return defaultLanguage;
|
|
352
347
|
}
|
|
353
348
|
|
|
354
|
-
|
|
355
|
-
* The code block indentation increase command plugin.
|
|
356
|
-
*/ class IndentCodeBlockCommand extends Command {
|
|
349
|
+
class IndentCodeBlockCommand extends Command {
|
|
357
350
|
/**
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
constructor(editor){
|
|
361
|
-
super(editor);
|
|
362
|
-
this._indentSequence = editor.config.get('codeBlock.indentSequence');
|
|
363
|
-
}
|
|
364
|
-
/**
|
|
365
|
-
* @inheritDoc
|
|
366
|
-
*/ refresh() {
|
|
351
|
+
* @inheritDoc
|
|
352
|
+
*/ refresh() {
|
|
367
353
|
this.isEnabled = this._checkEnabled();
|
|
368
354
|
}
|
|
369
355
|
/**
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
356
|
+
* Executes the command. When the command {@link #isEnabled is enabled}, the indentation of the
|
|
357
|
+
* code lines in the selection will be increased.
|
|
358
|
+
*
|
|
359
|
+
* @fires execute
|
|
360
|
+
*/ execute() {
|
|
375
361
|
const editor = this.editor;
|
|
376
362
|
const model = editor.model;
|
|
377
363
|
model.change((writer)=>{
|
|
@@ -409,8 +395,8 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
409
395
|
});
|
|
410
396
|
}
|
|
411
397
|
/**
|
|
412
|
-
|
|
413
|
-
|
|
398
|
+
* Checks whether the command can be enabled in the current context.
|
|
399
|
+
*/ _checkEnabled() {
|
|
414
400
|
if (!this._indentSequence) {
|
|
415
401
|
return false;
|
|
416
402
|
}
|
|
@@ -418,29 +404,24 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
418
404
|
// because you can always indent code lines.
|
|
419
405
|
return isModelSelectionInCodeBlock(this.editor.model.document.selection);
|
|
420
406
|
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
/**
|
|
424
|
-
* The code block indentation decrease command plugin.
|
|
425
|
-
*/ class OutdentCodeBlockCommand extends Command {
|
|
426
|
-
/**
|
|
427
|
-
* A sequence of characters removed from the line when the command is executed.
|
|
428
|
-
*/ _indentSequence;
|
|
429
407
|
constructor(editor){
|
|
430
408
|
super(editor);
|
|
431
409
|
this._indentSequence = editor.config.get('codeBlock.indentSequence');
|
|
432
410
|
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
class OutdentCodeBlockCommand extends Command {
|
|
433
414
|
/**
|
|
434
|
-
|
|
435
|
-
|
|
415
|
+
* @inheritDoc
|
|
416
|
+
*/ refresh() {
|
|
436
417
|
this.isEnabled = this._checkEnabled();
|
|
437
418
|
}
|
|
438
419
|
/**
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
420
|
+
* Executes the command. When the command {@link #isEnabled is enabled}, the indentation of the
|
|
421
|
+
* code lines in the selection will be decreased.
|
|
422
|
+
*
|
|
423
|
+
* @fires execute
|
|
424
|
+
*/ execute() {
|
|
444
425
|
const editor = this.editor;
|
|
445
426
|
const model = editor.model;
|
|
446
427
|
model.change(()=>{
|
|
@@ -479,11 +460,11 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
479
460
|
});
|
|
480
461
|
}
|
|
481
462
|
/**
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
463
|
+
* Checks whether the command can be enabled in the current context.
|
|
464
|
+
*
|
|
465
|
+
* @private
|
|
466
|
+
* @returns {Boolean} Whether the command should be enabled.
|
|
467
|
+
*/ _checkEnabled() {
|
|
487
468
|
if (!this._indentSequence) {
|
|
488
469
|
return false;
|
|
489
470
|
}
|
|
@@ -497,6 +478,10 @@ import { createDropdown, SplitButtonView, addListToDropdown, MenuBarMenuView, Me
|
|
|
497
478
|
return getLastOutdentableSequenceRange(model, position, this._indentSequence);
|
|
498
479
|
});
|
|
499
480
|
}
|
|
481
|
+
constructor(editor){
|
|
482
|
+
super(editor);
|
|
483
|
+
this._indentSequence = editor.config.get('codeBlock.indentSequence');
|
|
484
|
+
}
|
|
500
485
|
}
|
|
501
486
|
// For a position coming from `getIndentOutdentPositions()`, it returns the range representing
|
|
502
487
|
// the last occurrence of the indent sequence among the leading whitespaces of the code line the
|
|
@@ -839,93 +824,22 @@ function getCodeLineTextNodeAtPosition(position) {
|
|
|
839
824
|
}
|
|
840
825
|
|
|
841
826
|
const DEFAULT_ELEMENT = 'paragraph';
|
|
842
|
-
|
|
843
|
-
* The editing part of the code block feature.
|
|
844
|
-
*
|
|
845
|
-
* Introduces the `'codeBlock'` command and the `'codeBlock'` model element.
|
|
846
|
-
*/ class CodeBlockEditing extends Plugin {
|
|
827
|
+
class CodeBlockEditing extends Plugin {
|
|
847
828
|
/**
|
|
848
|
-
|
|
849
|
-
|
|
829
|
+
* @inheritDoc
|
|
830
|
+
*/ static get pluginName() {
|
|
850
831
|
return 'CodeBlockEditing';
|
|
851
832
|
}
|
|
852
833
|
/**
|
|
853
|
-
|
|
854
|
-
|
|
834
|
+
* @inheritDoc
|
|
835
|
+
*/ static get requires() {
|
|
855
836
|
return [
|
|
856
837
|
ShiftEnter
|
|
857
838
|
];
|
|
858
839
|
}
|
|
859
840
|
/**
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
super(editor);
|
|
863
|
-
editor.config.define('codeBlock', {
|
|
864
|
-
languages: [
|
|
865
|
-
{
|
|
866
|
-
language: 'plaintext',
|
|
867
|
-
label: 'Plain text'
|
|
868
|
-
},
|
|
869
|
-
{
|
|
870
|
-
language: 'c',
|
|
871
|
-
label: 'C'
|
|
872
|
-
},
|
|
873
|
-
{
|
|
874
|
-
language: 'cs',
|
|
875
|
-
label: 'C#'
|
|
876
|
-
},
|
|
877
|
-
{
|
|
878
|
-
language: 'cpp',
|
|
879
|
-
label: 'C++'
|
|
880
|
-
},
|
|
881
|
-
{
|
|
882
|
-
language: 'css',
|
|
883
|
-
label: 'CSS'
|
|
884
|
-
},
|
|
885
|
-
{
|
|
886
|
-
language: 'diff',
|
|
887
|
-
label: 'Diff'
|
|
888
|
-
},
|
|
889
|
-
{
|
|
890
|
-
language: 'html',
|
|
891
|
-
label: 'HTML'
|
|
892
|
-
},
|
|
893
|
-
{
|
|
894
|
-
language: 'java',
|
|
895
|
-
label: 'Java'
|
|
896
|
-
},
|
|
897
|
-
{
|
|
898
|
-
language: 'javascript',
|
|
899
|
-
label: 'JavaScript'
|
|
900
|
-
},
|
|
901
|
-
{
|
|
902
|
-
language: 'php',
|
|
903
|
-
label: 'PHP'
|
|
904
|
-
},
|
|
905
|
-
{
|
|
906
|
-
language: 'python',
|
|
907
|
-
label: 'Python'
|
|
908
|
-
},
|
|
909
|
-
{
|
|
910
|
-
language: 'ruby',
|
|
911
|
-
label: 'Ruby'
|
|
912
|
-
},
|
|
913
|
-
{
|
|
914
|
-
language: 'typescript',
|
|
915
|
-
label: 'TypeScript'
|
|
916
|
-
},
|
|
917
|
-
{
|
|
918
|
-
language: 'xml',
|
|
919
|
-
label: 'XML'
|
|
920
|
-
}
|
|
921
|
-
],
|
|
922
|
-
// A single tab.
|
|
923
|
-
indentSequence: '\t'
|
|
924
|
-
});
|
|
925
|
-
}
|
|
926
|
-
/**
|
|
927
|
-
* @inheritDoc
|
|
928
|
-
*/ init() {
|
|
841
|
+
* @inheritDoc
|
|
842
|
+
*/ init() {
|
|
929
843
|
const editor = this.editor;
|
|
930
844
|
const schema = editor.model.schema;
|
|
931
845
|
const model = editor.model;
|
|
@@ -1032,8 +946,8 @@ const DEFAULT_ELEMENT = 'paragraph';
|
|
|
1032
946
|
});
|
|
1033
947
|
}
|
|
1034
948
|
/**
|
|
1035
|
-
|
|
1036
|
-
|
|
949
|
+
* @inheritDoc
|
|
950
|
+
*/ afterInit() {
|
|
1037
951
|
const editor = this.editor;
|
|
1038
952
|
const commands = editor.commands;
|
|
1039
953
|
const indent = commands.get('indent');
|
|
@@ -1070,11 +984,11 @@ const DEFAULT_ELEMENT = 'paragraph';
|
|
|
1070
984
|
this._initAriaAnnouncements();
|
|
1071
985
|
}
|
|
1072
986
|
/**
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
987
|
+
* Observe when user enters or leaves code block and set proper aria value in global live announcer.
|
|
988
|
+
* This allows screen readers to indicate when the user has entered and left the specified code block.
|
|
989
|
+
*
|
|
990
|
+
* @internal
|
|
991
|
+
*/ _initAriaAnnouncements() {
|
|
1078
992
|
const { model, ui, t } = this.editor;
|
|
1079
993
|
const languageDefs = getNormalizedAndLocalizedLanguageDefinitions(this.editor);
|
|
1080
994
|
let lastFocusedCodeBlock = null;
|
|
@@ -1092,6 +1006,73 @@ const DEFAULT_ELEMENT = 'paragraph';
|
|
|
1092
1006
|
lastFocusedCodeBlock = focusParent;
|
|
1093
1007
|
});
|
|
1094
1008
|
}
|
|
1009
|
+
/**
|
|
1010
|
+
* @inheritDoc
|
|
1011
|
+
*/ constructor(editor){
|
|
1012
|
+
super(editor);
|
|
1013
|
+
editor.config.define('codeBlock', {
|
|
1014
|
+
languages: [
|
|
1015
|
+
{
|
|
1016
|
+
language: 'plaintext',
|
|
1017
|
+
label: 'Plain text'
|
|
1018
|
+
},
|
|
1019
|
+
{
|
|
1020
|
+
language: 'c',
|
|
1021
|
+
label: 'C'
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
language: 'cs',
|
|
1025
|
+
label: 'C#'
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
language: 'cpp',
|
|
1029
|
+
label: 'C++'
|
|
1030
|
+
},
|
|
1031
|
+
{
|
|
1032
|
+
language: 'css',
|
|
1033
|
+
label: 'CSS'
|
|
1034
|
+
},
|
|
1035
|
+
{
|
|
1036
|
+
language: 'diff',
|
|
1037
|
+
label: 'Diff'
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
language: 'html',
|
|
1041
|
+
label: 'HTML'
|
|
1042
|
+
},
|
|
1043
|
+
{
|
|
1044
|
+
language: 'java',
|
|
1045
|
+
label: 'Java'
|
|
1046
|
+
},
|
|
1047
|
+
{
|
|
1048
|
+
language: 'javascript',
|
|
1049
|
+
label: 'JavaScript'
|
|
1050
|
+
},
|
|
1051
|
+
{
|
|
1052
|
+
language: 'php',
|
|
1053
|
+
label: 'PHP'
|
|
1054
|
+
},
|
|
1055
|
+
{
|
|
1056
|
+
language: 'python',
|
|
1057
|
+
label: 'Python'
|
|
1058
|
+
},
|
|
1059
|
+
{
|
|
1060
|
+
language: 'ruby',
|
|
1061
|
+
label: 'Ruby'
|
|
1062
|
+
},
|
|
1063
|
+
{
|
|
1064
|
+
language: 'typescript',
|
|
1065
|
+
label: 'TypeScript'
|
|
1066
|
+
},
|
|
1067
|
+
{
|
|
1068
|
+
language: 'xml',
|
|
1069
|
+
label: 'XML'
|
|
1070
|
+
}
|
|
1071
|
+
],
|
|
1072
|
+
// A single tab.
|
|
1073
|
+
indentSequence: '\t'
|
|
1074
|
+
});
|
|
1075
|
+
}
|
|
1095
1076
|
}
|
|
1096
1077
|
/**
|
|
1097
1078
|
* Normally, when the Enter (or Shift+Enter) key is pressed, a soft line break is to be added to the
|
|
@@ -1243,19 +1224,15 @@ function isSoftBreakNode(node) {
|
|
|
1243
1224
|
return node && node.is('element', 'softBreak');
|
|
1244
1225
|
}
|
|
1245
1226
|
|
|
1246
|
-
|
|
1247
|
-
* The code block UI plugin.
|
|
1248
|
-
*
|
|
1249
|
-
* Introduces the `'codeBlock'` dropdown.
|
|
1250
|
-
*/ class CodeBlockUI extends Plugin {
|
|
1227
|
+
class CodeBlockUI extends Plugin {
|
|
1251
1228
|
/**
|
|
1252
|
-
|
|
1253
|
-
|
|
1229
|
+
* @inheritDoc
|
|
1230
|
+
*/ static get pluginName() {
|
|
1254
1231
|
return 'CodeBlockUI';
|
|
1255
1232
|
}
|
|
1256
1233
|
/**
|
|
1257
|
-
|
|
1258
|
-
|
|
1234
|
+
* @inheritDoc
|
|
1235
|
+
*/ init() {
|
|
1259
1236
|
const editor = this.editor;
|
|
1260
1237
|
const t = editor.t;
|
|
1261
1238
|
const componentFactory = editor.ui.componentFactory;
|
|
@@ -1326,9 +1303,9 @@ function isSoftBreakNode(node) {
|
|
|
1326
1303
|
});
|
|
1327
1304
|
}
|
|
1328
1305
|
/**
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1306
|
+
* A helper returning a collection of the `codeBlock` dropdown items representing languages
|
|
1307
|
+
* available for the user to choose from.
|
|
1308
|
+
*/ _getLanguageListItemDefinitions(normalizedLanguageDefs) {
|
|
1332
1309
|
const editor = this.editor;
|
|
1333
1310
|
const command = editor.commands.get('codeBlock');
|
|
1334
1311
|
const itemDefinitions = new Collection();
|
|
@@ -1351,26 +1328,18 @@ function isSoftBreakNode(node) {
|
|
|
1351
1328
|
}
|
|
1352
1329
|
}
|
|
1353
1330
|
|
|
1354
|
-
|
|
1355
|
-
* The code block plugin.
|
|
1356
|
-
*
|
|
1357
|
-
* For more information about this feature check the {@glink api/code-block package page} and the
|
|
1358
|
-
* {@glink features/code-blocks code block} feature guide.
|
|
1359
|
-
*
|
|
1360
|
-
* This is a "glue" plugin that loads the {@link module:code-block/codeblockediting~CodeBlockEditing code block editing feature}
|
|
1361
|
-
* and the {@link module:code-block/codeblockui~CodeBlockUI code block UI feature}.
|
|
1362
|
-
*/ class CodeBlock extends Plugin {
|
|
1331
|
+
class CodeBlock extends Plugin {
|
|
1363
1332
|
/**
|
|
1364
|
-
|
|
1365
|
-
|
|
1333
|
+
* @inheritDoc
|
|
1334
|
+
*/ static get requires() {
|
|
1366
1335
|
return [
|
|
1367
1336
|
CodeBlockEditing,
|
|
1368
1337
|
CodeBlockUI
|
|
1369
1338
|
];
|
|
1370
1339
|
}
|
|
1371
1340
|
/**
|
|
1372
|
-
|
|
1373
|
-
|
|
1341
|
+
* @inheritDoc
|
|
1342
|
+
*/ static get pluginName() {
|
|
1374
1343
|
return 'CodeBlock';
|
|
1375
1344
|
}
|
|
1376
1345
|
}
|