@ckeditor/ckeditor5-code-block 0.0.0-nightly-next-20260118.0 → 0.0.0-nightly-20260119.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.
Files changed (173) hide show
  1. package/build/code-block.js +5 -0
  2. package/build/translations/af.js +1 -0
  3. package/build/translations/ar.js +1 -0
  4. package/build/translations/ast.js +1 -0
  5. package/build/translations/az.js +1 -0
  6. package/build/translations/be.js +1 -0
  7. package/build/translations/bg.js +1 -0
  8. package/build/translations/bn.js +1 -0
  9. package/build/translations/bs.js +1 -0
  10. package/build/translations/ca.js +1 -0
  11. package/build/translations/cs.js +1 -0
  12. package/build/translations/da.js +1 -0
  13. package/build/translations/de-ch.js +1 -0
  14. package/build/translations/de.js +1 -0
  15. package/build/translations/el.js +1 -0
  16. package/build/translations/en-au.js +1 -0
  17. package/build/translations/en-gb.js +1 -0
  18. package/build/translations/eo.js +1 -0
  19. package/build/translations/es-co.js +1 -0
  20. package/build/translations/es.js +1 -0
  21. package/build/translations/et.js +1 -0
  22. package/build/translations/eu.js +1 -0
  23. package/build/translations/fa.js +1 -0
  24. package/build/translations/fi.js +1 -0
  25. package/build/translations/fr.js +1 -0
  26. package/build/translations/gl.js +1 -0
  27. package/build/translations/gu.js +1 -0
  28. package/build/translations/he.js +1 -0
  29. package/build/translations/hi.js +1 -0
  30. package/build/translations/hr.js +1 -0
  31. package/build/translations/hu.js +1 -0
  32. package/build/translations/hy.js +1 -0
  33. package/build/translations/id.js +1 -0
  34. package/build/translations/it.js +1 -0
  35. package/build/translations/ja.js +1 -0
  36. package/build/translations/jv.js +1 -0
  37. package/build/translations/kk.js +1 -0
  38. package/build/translations/km.js +1 -0
  39. package/build/translations/kn.js +1 -0
  40. package/build/translations/ko.js +1 -0
  41. package/build/translations/ku.js +1 -0
  42. package/build/translations/lt.js +1 -0
  43. package/build/translations/lv.js +1 -0
  44. package/build/translations/ms.js +1 -0
  45. package/build/translations/nb.js +1 -0
  46. package/build/translations/ne.js +1 -0
  47. package/build/translations/nl.js +1 -0
  48. package/build/translations/no.js +1 -0
  49. package/build/translations/oc.js +1 -0
  50. package/build/translations/pl.js +1 -0
  51. package/build/translations/pt-br.js +1 -0
  52. package/build/translations/pt.js +1 -0
  53. package/build/translations/ro.js +1 -0
  54. package/build/translations/ru.js +1 -0
  55. package/build/translations/si.js +1 -0
  56. package/build/translations/sk.js +1 -0
  57. package/build/translations/sl.js +1 -0
  58. package/build/translations/sq.js +1 -0
  59. package/build/translations/sr-latn.js +1 -0
  60. package/build/translations/sr.js +1 -0
  61. package/build/translations/sv.js +1 -0
  62. package/build/translations/th.js +1 -0
  63. package/build/translations/ti.js +1 -0
  64. package/build/translations/tk.js +1 -0
  65. package/build/translations/tr.js +1 -0
  66. package/build/translations/tt.js +1 -0
  67. package/build/translations/ug.js +1 -0
  68. package/build/translations/uk.js +1 -0
  69. package/build/translations/ur.js +1 -0
  70. package/build/translations/uz.js +1 -0
  71. package/build/translations/vi.js +1 -0
  72. package/build/translations/zh-cn.js +1 -0
  73. package/build/translations/zh.js +1 -0
  74. package/ckeditor5-metadata.json +1 -1
  75. package/dist/index.js.map +1 -1
  76. package/lang/contexts.json +9 -0
  77. package/lang/translations/af.po +40 -0
  78. package/lang/translations/ar.po +40 -0
  79. package/lang/translations/ast.po +40 -0
  80. package/lang/translations/az.po +40 -0
  81. package/lang/translations/be.po +40 -0
  82. package/lang/translations/bg.po +40 -0
  83. package/lang/translations/bn.po +40 -0
  84. package/lang/translations/bs.po +40 -0
  85. package/lang/translations/ca.po +40 -0
  86. package/lang/translations/cs.po +40 -0
  87. package/lang/translations/da.po +40 -0
  88. package/lang/translations/de-ch.po +40 -0
  89. package/lang/translations/de.po +40 -0
  90. package/lang/translations/el.po +40 -0
  91. package/lang/translations/en-au.po +40 -0
  92. package/lang/translations/en-gb.po +40 -0
  93. package/lang/translations/en.po +40 -0
  94. package/lang/translations/eo.po +40 -0
  95. package/lang/translations/es-co.po +40 -0
  96. package/lang/translations/es.po +40 -0
  97. package/lang/translations/et.po +40 -0
  98. package/lang/translations/eu.po +40 -0
  99. package/lang/translations/fa.po +40 -0
  100. package/lang/translations/fi.po +40 -0
  101. package/lang/translations/fr.po +40 -0
  102. package/lang/translations/gl.po +40 -0
  103. package/lang/translations/gu.po +40 -0
  104. package/lang/translations/he.po +40 -0
  105. package/lang/translations/hi.po +40 -0
  106. package/lang/translations/hr.po +40 -0
  107. package/lang/translations/hu.po +40 -0
  108. package/lang/translations/hy.po +40 -0
  109. package/lang/translations/id.po +40 -0
  110. package/lang/translations/it.po +40 -0
  111. package/lang/translations/ja.po +40 -0
  112. package/lang/translations/jv.po +40 -0
  113. package/lang/translations/kk.po +40 -0
  114. package/lang/translations/km.po +40 -0
  115. package/lang/translations/kn.po +40 -0
  116. package/lang/translations/ko.po +40 -0
  117. package/lang/translations/ku.po +40 -0
  118. package/lang/translations/lt.po +40 -0
  119. package/lang/translations/lv.po +40 -0
  120. package/lang/translations/ms.po +40 -0
  121. package/lang/translations/nb.po +40 -0
  122. package/lang/translations/ne.po +40 -0
  123. package/lang/translations/nl.po +40 -0
  124. package/lang/translations/no.po +40 -0
  125. package/lang/translations/oc.po +40 -0
  126. package/lang/translations/pl.po +40 -0
  127. package/lang/translations/pt-br.po +40 -0
  128. package/lang/translations/pt.po +40 -0
  129. package/lang/translations/ro.po +40 -0
  130. package/lang/translations/ru.po +40 -0
  131. package/lang/translations/si.po +40 -0
  132. package/lang/translations/sk.po +40 -0
  133. package/lang/translations/sl.po +40 -0
  134. package/lang/translations/sq.po +40 -0
  135. package/lang/translations/sr-latn.po +40 -0
  136. package/lang/translations/sr.po +40 -0
  137. package/lang/translations/sv.po +40 -0
  138. package/lang/translations/th.po +40 -0
  139. package/lang/translations/ti.po +40 -0
  140. package/lang/translations/tk.po +40 -0
  141. package/lang/translations/tr.po +40 -0
  142. package/lang/translations/tt.po +40 -0
  143. package/lang/translations/ug.po +40 -0
  144. package/lang/translations/uk.po +40 -0
  145. package/lang/translations/ur.po +40 -0
  146. package/lang/translations/uz.po +40 -0
  147. package/lang/translations/vi.po +40 -0
  148. package/lang/translations/zh-cn.po +40 -0
  149. package/lang/translations/zh.po +40 -0
  150. package/package.json +49 -25
  151. package/src/augmentation.js +5 -0
  152. package/{dist → src}/codeblock.d.ts +1 -1
  153. package/src/codeblock.js +39 -0
  154. package/{dist → src}/codeblockcommand.d.ts +1 -1
  155. package/src/codeblockcommand.js +142 -0
  156. package/src/codeblockconfig.js +5 -0
  157. package/{dist → src}/codeblockediting.d.ts +2 -2
  158. package/src/codeblockediting.js +430 -0
  159. package/{dist → src}/codeblockui.d.ts +1 -1
  160. package/src/codeblockui.js +134 -0
  161. package/{dist → src}/converters.d.ts +2 -2
  162. package/src/converters.js +285 -0
  163. package/{dist → src}/indentcodeblockcommand.d.ts +1 -1
  164. package/src/indentcodeblockcommand.js +82 -0
  165. package/src/index.js +16 -0
  166. package/{dist → src}/outdentcodeblockcommand.d.ts +1 -1
  167. package/src/outdentcodeblockcommand.js +137 -0
  168. package/{dist → src}/utils.d.ts +3 -3
  169. package/src/utils.js +296 -0
  170. package/theme/codeblock.css +40 -0
  171. /package/{dist → src}/augmentation.d.ts +0 -0
  172. /package/{dist → src}/codeblockconfig.d.ts +0 -0
  173. /package/{dist → src}/index.d.ts +0 -0
@@ -0,0 +1,142 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
+ */
5
+ import { Command } from 'ckeditor5/src/core.js';
6
+ import { first } from 'ckeditor5/src/utils.js';
7
+ import { getNormalizedAndLocalizedLanguageDefinitions, canBeCodeBlock } from './utils.js';
8
+ /**
9
+ * The code block command plugin.
10
+ */
11
+ export class CodeBlockCommand extends Command {
12
+ /**
13
+ * Contains the last used language.
14
+ */
15
+ _lastLanguage;
16
+ /**
17
+ * @inheritDoc
18
+ */
19
+ constructor(editor) {
20
+ super(editor);
21
+ this._lastLanguage = null;
22
+ }
23
+ /**
24
+ * @inheritDoc
25
+ */
26
+ refresh() {
27
+ this.value = this._getValue();
28
+ this.isEnabled = this._checkEnabled();
29
+ }
30
+ /**
31
+ * Executes the command. When the command {@link #value is on}, all topmost code blocks within
32
+ * the selection will be removed. If it is off, all selected blocks will be flattened and
33
+ * wrapped by a code block.
34
+ *
35
+ * @fires execute
36
+ * @param options Command options.
37
+ * @param options.language The code block language.
38
+ * @param options.forceValue If set, it will force the command behavior. If `true`, the command will apply a code block,
39
+ * otherwise the command will remove the code block. If not set, the command will act basing on its current value.
40
+ * @param options.usePreviousLanguageChoice If set on `true` and the `options.language` is not specified, the command
41
+ * will apply the previous language (if the command was already executed) when inserting the `codeBlock` element.
42
+ */
43
+ execute(options = {}) {
44
+ const editor = this.editor;
45
+ const model = editor.model;
46
+ const selection = model.document.selection;
47
+ const normalizedLanguagesDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
48
+ const firstLanguageInConfig = normalizedLanguagesDefs[0];
49
+ const blocks = Array.from(selection.getSelectedBlocks());
50
+ const value = options.forceValue == undefined ? !this.value : options.forceValue;
51
+ const language = getLanguage(options, this._lastLanguage, firstLanguageInConfig.language);
52
+ model.change(writer => {
53
+ if (value) {
54
+ this._applyCodeBlock(writer, blocks, language);
55
+ }
56
+ else {
57
+ this._removeCodeBlock(writer, blocks);
58
+ }
59
+ });
60
+ }
61
+ /**
62
+ * Checks the command's {@link #value}.
63
+ *
64
+ * @returns The current value.
65
+ */
66
+ _getValue() {
67
+ const selection = this.editor.model.document.selection;
68
+ const firstBlock = first(selection.getSelectedBlocks());
69
+ const isCodeBlock = !!firstBlock?.is('element', 'codeBlock');
70
+ return isCodeBlock ? firstBlock.getAttribute('language') : false;
71
+ }
72
+ /**
73
+ * Checks whether the command can be enabled in the current context.
74
+ *
75
+ * @returns Whether the command should be enabled.
76
+ */
77
+ _checkEnabled() {
78
+ if (this.value) {
79
+ return true;
80
+ }
81
+ const selection = this.editor.model.document.selection;
82
+ const schema = this.editor.model.schema;
83
+ const firstBlock = first(selection.getSelectedBlocks());
84
+ if (!firstBlock) {
85
+ return false;
86
+ }
87
+ return canBeCodeBlock(schema, firstBlock);
88
+ }
89
+ _applyCodeBlock(writer, blocks, language) {
90
+ this._lastLanguage = language;
91
+ const schema = this.editor.model.schema;
92
+ const allowedBlocks = blocks.filter(block => canBeCodeBlock(schema, block));
93
+ for (const block of allowedBlocks) {
94
+ writer.rename(block, 'codeBlock');
95
+ writer.setAttribute('language', language, block);
96
+ schema.removeDisallowedAttributes([block], writer);
97
+ // Remove children of the `codeBlock` element that are not allowed. See #9567.
98
+ Array.from(block.getChildren())
99
+ .filter(child => !schema.checkChild(block, child))
100
+ .forEach(child => writer.remove(child));
101
+ }
102
+ allowedBlocks.reverse().forEach((currentBlock, i) => {
103
+ const nextBlock = allowedBlocks[i + 1];
104
+ if (currentBlock.previousSibling === nextBlock) {
105
+ writer.appendElement('softBreak', nextBlock);
106
+ writer.merge(writer.createPositionBefore(currentBlock));
107
+ }
108
+ });
109
+ }
110
+ _removeCodeBlock(writer, blocks) {
111
+ const codeBlocks = blocks.filter(block => block.is('element', 'codeBlock'));
112
+ for (const block of codeBlocks) {
113
+ const range = writer.createRangeOn(block);
114
+ for (const item of Array.from(range.getItems()).reverse()) {
115
+ if (item.is('element', 'softBreak') && item.parent.is('element', 'codeBlock')) {
116
+ const { position } = writer.split(writer.createPositionBefore(item));
117
+ const elementAfter = position.nodeAfter;
118
+ writer.rename(elementAfter, 'paragraph');
119
+ writer.removeAttribute('language', elementAfter);
120
+ writer.remove(item);
121
+ }
122
+ }
123
+ writer.rename(block, 'paragraph');
124
+ writer.removeAttribute('language', block);
125
+ }
126
+ }
127
+ }
128
+ /**
129
+ * Picks the language for the new code block. If any language is passed as an option,
130
+ * it will be returned. Else, if option usePreviousLanguageChoice is true and some
131
+ * code block was already created (lastLanguage is not null) then previously used
132
+ * language will be returned. If not, it will return default language.
133
+ */
134
+ function getLanguage(options, lastLanguage, defaultLanguage) {
135
+ if (options.language) {
136
+ return options.language;
137
+ }
138
+ if (options.usePreviousLanguageChoice && lastLanguage) {
139
+ return lastLanguage;
140
+ }
141
+ return defaultLanguage;
142
+ }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
+ */
5
+ export {};
@@ -5,8 +5,8 @@
5
5
  /**
6
6
  * @module code-block/codeblockediting
7
7
  */
8
- import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
9
- import { ShiftEnter } from '@ckeditor/ckeditor5-enter';
8
+ import { Plugin, type Editor } from 'ckeditor5/src/core.js';
9
+ import { ShiftEnter } from 'ckeditor5/src/enter.js';
10
10
  /**
11
11
  * The editing part of the code block feature.
12
12
  *
@@ -0,0 +1,430 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
+ */
5
+ /**
6
+ * @module code-block/codeblockediting
7
+ */
8
+ import { Plugin } from 'ckeditor5/src/core.js';
9
+ import { ShiftEnter } from 'ckeditor5/src/enter.js';
10
+ import { ViewUpcastWriter } from 'ckeditor5/src/engine.js';
11
+ import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
12
+ import { CodeBlockCommand } from './codeblockcommand.js';
13
+ import { IndentCodeBlockCommand } from './indentcodeblockcommand.js';
14
+ import { OutdentCodeBlockCommand } from './outdentcodeblockcommand.js';
15
+ import { getNormalizedAndLocalizedLanguageDefinitions, getLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment, getCodeBlockAriaAnnouncement, getTextNodeAtLineStart } from './utils.js';
16
+ import { modelToViewCodeBlockInsertion, modelToDataViewSoftBreakInsertion, dataViewToModelCodeBlockInsertion, dataViewToModelTextNewlinesInsertion, dataViewToModelOrphanNodeConsumer } from './converters.js';
17
+ const DEFAULT_ELEMENT = 'paragraph';
18
+ /**
19
+ * The editing part of the code block feature.
20
+ *
21
+ * Introduces the `'codeBlock'` command and the `'codeBlock'` model element.
22
+ */
23
+ export class CodeBlockEditing extends Plugin {
24
+ /**
25
+ * @inheritDoc
26
+ */
27
+ static get pluginName() {
28
+ return 'CodeBlockEditing';
29
+ }
30
+ /**
31
+ * @inheritDoc
32
+ */
33
+ static get isOfficialPlugin() {
34
+ return true;
35
+ }
36
+ /**
37
+ * @inheritDoc
38
+ */
39
+ static get requires() {
40
+ return [ShiftEnter];
41
+ }
42
+ /**
43
+ * @inheritDoc
44
+ */
45
+ constructor(editor) {
46
+ super(editor);
47
+ editor.config.define('codeBlock', {
48
+ languages: [
49
+ { language: 'plaintext', label: 'Plain text' },
50
+ { language: 'c', label: 'C' },
51
+ { language: 'cs', label: 'C#' },
52
+ { language: 'cpp', label: 'C++' },
53
+ { language: 'css', label: 'CSS' },
54
+ { language: 'diff', label: 'Diff' },
55
+ { language: 'go', label: 'Go' },
56
+ { language: 'html', label: 'HTML' },
57
+ { language: 'java', label: 'Java' },
58
+ { language: 'javascript', label: 'JavaScript' },
59
+ { language: 'php', label: 'PHP' },
60
+ { language: 'python', label: 'Python' },
61
+ { language: 'ruby', label: 'Ruby' },
62
+ { language: 'typescript', label: 'TypeScript' },
63
+ { language: 'xml', label: 'XML' }
64
+ ],
65
+ // A single tab.
66
+ indentSequence: '\t'
67
+ });
68
+ }
69
+ /**
70
+ * @inheritDoc
71
+ */
72
+ init() {
73
+ const editor = this.editor;
74
+ const schema = editor.model.schema;
75
+ const model = editor.model;
76
+ const view = editor.editing.view;
77
+ const normalizedLanguagesDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
78
+ // The main command.
79
+ editor.commands.add('codeBlock', new CodeBlockCommand(editor));
80
+ // Commands that change the indentation.
81
+ editor.commands.add('indentCodeBlock', new IndentCodeBlockCommand(editor));
82
+ editor.commands.add('outdentCodeBlock', new OutdentCodeBlockCommand(editor));
83
+ this.listenTo(view.document, 'tab', (evt, data) => {
84
+ const commandName = data.shiftKey ? 'outdentCodeBlock' : 'indentCodeBlock';
85
+ const command = editor.commands.get(commandName);
86
+ if (!command.isEnabled) {
87
+ return;
88
+ }
89
+ editor.execute(commandName);
90
+ data.stopPropagation();
91
+ data.preventDefault();
92
+ evt.stop();
93
+ }, { context: 'pre' });
94
+ schema.register('codeBlock', {
95
+ allowWhere: '$block',
96
+ allowChildren: '$text',
97
+ // Disallow `$inlineObject` and its derivatives like `inlineWidget` inside `codeBlock` to ensure that only text,
98
+ // not other inline elements like inline images, are allowed. This maintains the semantic integrity of code blocks.
99
+ disallowChildren: '$inlineObject',
100
+ allowAttributes: ['language'],
101
+ allowAttributesOf: '$listItem',
102
+ isBlock: true
103
+ });
104
+ // Disallow formatting attributes on `codeBlock` children.
105
+ schema.addAttributeCheck((context, attributeName) => {
106
+ const parent = context.getItem(context.length - 2);
107
+ const isFormatting = schema.getAttributeProperties(attributeName).isFormatting;
108
+ if (isFormatting && parent && parent.name == 'codeBlock') {
109
+ return false;
110
+ }
111
+ });
112
+ // Conversion.
113
+ editor.editing.downcastDispatcher.on('insert:codeBlock', modelToViewCodeBlockInsertion(model, normalizedLanguagesDefs, true));
114
+ editor.data.downcastDispatcher.on('insert:codeBlock', modelToViewCodeBlockInsertion(model, normalizedLanguagesDefs));
115
+ editor.data.downcastDispatcher.on('insert:softBreak', modelToDataViewSoftBreakInsertion(model), { priority: 'high' });
116
+ editor.data.upcastDispatcher.on('element:code', dataViewToModelCodeBlockInsertion(view, normalizedLanguagesDefs));
117
+ editor.data.upcastDispatcher.on('text', dataViewToModelTextNewlinesInsertion());
118
+ editor.data.upcastDispatcher.on('element:pre', dataViewToModelOrphanNodeConsumer(), { priority: 'high' });
119
+ // Intercept the clipboard input (paste) when the selection is anchored in the code block and force the clipboard
120
+ // data to be pasted as a single plain text. Otherwise, the code lines will split the code block and
121
+ // "spill out" as separate paragraphs.
122
+ this.listenTo(editor.editing.view.document, 'clipboardInput', (evt, data) => {
123
+ let insertionRange = model.createRange(model.document.selection.anchor);
124
+ // Use target ranges in case this is a drop.
125
+ if (data.targetRanges) {
126
+ insertionRange = editor.editing.mapper.toModelRange(data.targetRanges[0]);
127
+ }
128
+ if (!insertionRange.start.parent.is('element', 'codeBlock')) {
129
+ return;
130
+ }
131
+ const text = data.dataTransfer.getData('text/plain');
132
+ const writer = new ViewUpcastWriter(editor.editing.view.document);
133
+ // Pass the view fragment to the default clipboardInput handler.
134
+ data.content = rawSnippetTextToViewDocumentFragment(writer, text);
135
+ });
136
+ if (editor.plugins.has('ClipboardPipeline')) {
137
+ // Elements may have a plain textual representation (hence be present in the 'text/plain' data transfer),
138
+ // but not be allowed in the code block.
139
+ // Filter them out before inserting the content to the model.
140
+ editor.plugins.get(ClipboardPipeline).on('contentInsertion', (evt, data) => {
141
+ const model = editor.model;
142
+ const selection = model.document.selection;
143
+ if (!selection.anchor.parent.is('element', 'codeBlock')) {
144
+ return;
145
+ }
146
+ model.change(writer => {
147
+ const contentRange = writer.createRangeIn(data.content);
148
+ for (const item of [...contentRange.getItems()]) {
149
+ // Remove all nodes disallowed in the code block.
150
+ if (item.is('node') && !schema.checkChild(selection.anchor, item)) {
151
+ writer.remove(item);
152
+ }
153
+ }
154
+ });
155
+ });
156
+ }
157
+ // Make sure multi–line selection is always wrapped in a code block when `getSelectedContent()`
158
+ // is used (e.g. clipboard copy). Otherwise, only the raw text will be copied to the clipboard and,
159
+ // upon next paste, this bare text will not be inserted as a code block, which is not the best UX.
160
+ // Similarly, when the selection in a single line, the selected content should be an inline code
161
+ // so it can be pasted later on and retain it's preformatted nature.
162
+ this.listenTo(model, 'getSelectedContent', (evt, [selection]) => {
163
+ const anchor = selection.anchor;
164
+ if (selection.isCollapsed || !anchor.parent.is('element', 'codeBlock') || !anchor.hasSameParentAs(selection.focus)) {
165
+ return;
166
+ }
167
+ model.change(writer => {
168
+ const docFragment = evt.return;
169
+ // fo[o<softBreak></softBreak>b]ar -> <codeBlock language="...">[o<softBreak></softBreak>b]<codeBlock>
170
+ if (anchor.parent.is('element') &&
171
+ (docFragment.childCount > 1 || selection.containsEntireContent(anchor.parent))) {
172
+ const codeBlock = writer.createElement('codeBlock', anchor.parent.getAttributes());
173
+ writer.append(docFragment, codeBlock);
174
+ const newDocumentFragment = writer.createDocumentFragment();
175
+ writer.append(codeBlock, newDocumentFragment);
176
+ evt.return = newDocumentFragment;
177
+ return;
178
+ }
179
+ // "f[oo]" -> <$text code="true">oo</text>
180
+ const textNode = docFragment.getChild(0);
181
+ if (schema.checkAttribute(textNode, 'code')) {
182
+ writer.setAttribute('code', true, textNode);
183
+ }
184
+ });
185
+ });
186
+ }
187
+ /**
188
+ * @inheritDoc
189
+ */
190
+ afterInit() {
191
+ const editor = this.editor;
192
+ const commands = editor.commands;
193
+ const indent = commands.get('indent');
194
+ const outdent = commands.get('outdent');
195
+ if (indent) {
196
+ // Priority is highest due to integration with `IndentList` command of `List` plugin.
197
+ // If selection is in a code block we give priority to it. This way list item cannot be indented
198
+ // but if we would give priority to indenting list item then user would have to indent list item
199
+ // as much as possible and only then he could indent code block.
200
+ indent.registerChildCommand(commands.get('indentCodeBlock'), { priority: 'highest' });
201
+ }
202
+ if (outdent) {
203
+ outdent.registerChildCommand(commands.get('outdentCodeBlock'));
204
+ }
205
+ // Customize the response to the <kbd>Enter</kbd> and <kbd>Shift</kbd>+<kbd>Enter</kbd>
206
+ // key press when the selection is in the code block. Upon enter key press we can either
207
+ // leave the block if it's "two or three enters" in a row or create a new code block line, preserving
208
+ // previous line's indentation.
209
+ this.listenTo(editor.editing.view.document, 'enter', (evt, data) => {
210
+ const positionParent = editor.model.document.selection.getLastPosition().parent;
211
+ if (!positionParent.is('element', 'codeBlock')) {
212
+ return;
213
+ }
214
+ if (!leaveBlockStartOnEnter(editor, data.isSoft) && !leaveBlockEndOnEnter(editor, data.isSoft)) {
215
+ breakLineOnEnter(editor);
216
+ }
217
+ data.preventDefault();
218
+ evt.stop();
219
+ }, { context: 'pre' });
220
+ this._initAriaAnnouncements();
221
+ }
222
+ /**
223
+ * Observe when user enters or leaves code block and set proper aria value in global live announcer.
224
+ * This allows screen readers to indicate when the user has entered and left the specified code block.
225
+ *
226
+ * @internal
227
+ */
228
+ _initAriaAnnouncements() {
229
+ const { model, ui, t } = this.editor;
230
+ const languageDefs = getNormalizedAndLocalizedLanguageDefinitions(this.editor);
231
+ let lastFocusedCodeBlock = null;
232
+ model.document.selection.on('change:range', () => {
233
+ const focusParent = model.document.selection.focus.parent;
234
+ if (!ui || lastFocusedCodeBlock === focusParent || !focusParent.is('element')) {
235
+ return;
236
+ }
237
+ if (lastFocusedCodeBlock && lastFocusedCodeBlock.is('element', 'codeBlock')) {
238
+ ui.ariaLiveAnnouncer.announce(getCodeBlockAriaAnnouncement(t, languageDefs, lastFocusedCodeBlock, 'leave'));
239
+ }
240
+ if (focusParent.is('element', 'codeBlock')) {
241
+ ui.ariaLiveAnnouncer.announce(getCodeBlockAriaAnnouncement(t, languageDefs, focusParent, 'enter'));
242
+ }
243
+ lastFocusedCodeBlock = focusParent;
244
+ });
245
+ }
246
+ }
247
+ /**
248
+ * Normally, when the Enter (or Shift+Enter) key is pressed, a soft line break is to be added to the
249
+ * code block. Let's try to follow the indentation of the previous line when possible, for instance:
250
+ *
251
+ * ```html
252
+ * // Before pressing enter (or shift enter)
253
+ * <codeBlock>
254
+ * " foo()"[] // Indent of 4 spaces.
255
+ * </codeBlock>
256
+ *
257
+ * // After pressing:
258
+ * <codeBlock>
259
+ * " foo()" // Indent of 4 spaces.
260
+ * <softBreak></softBreak> // A new soft break created by pressing enter.
261
+ * " "[] // Retain the indent of 4 spaces.
262
+ * </codeBlock>
263
+ * ```
264
+ */
265
+ function breakLineOnEnter(editor) {
266
+ const model = editor.model;
267
+ const modelDoc = model.document;
268
+ // Use last position as other mechanisms (e.g. condition deciding whether this function should be called) also check that.
269
+ const lastSelectionPosition = modelDoc.selection.getLastPosition();
270
+ let leadingWhiteSpaces;
271
+ const node = getTextNodeAtLineStart(lastSelectionPosition, model);
272
+ // Figure out the indentation (white space chars) at the beginning of the line.
273
+ if (node && node.is('$text')) {
274
+ leadingWhiteSpaces = getLeadingWhiteSpaces(node);
275
+ }
276
+ // Keeping everything in a change block for a single undo step.
277
+ editor.model.change(writer => {
278
+ editor.execute('shiftEnter');
279
+ // If the line before being broken in two had some indentation, let's retain it
280
+ // in the new line.
281
+ if (leadingWhiteSpaces) {
282
+ writer.insertText(leadingWhiteSpaces, modelDoc.selection.anchor);
283
+ }
284
+ });
285
+ }
286
+ /**
287
+ * Leave the code block when Enter (but NOT Shift+Enter) has been pressed twice at the beginning
288
+ * of the code block:
289
+ *
290
+ * ```html
291
+ * // Before:
292
+ * <codeBlock>[]<softBreak></softBreak>foo</codeBlock>
293
+ *
294
+ * // After pressing:
295
+ * <paragraph>[]</paragraph><codeBlock>foo</codeBlock>
296
+ * ```
297
+ *
298
+ * @param isSoftEnter When `true`, enter was pressed along with <kbd>Shift</kbd>.
299
+ * @returns `true` when selection left the block. `false` if stayed.
300
+ */
301
+ function leaveBlockStartOnEnter(editor, isSoftEnter) {
302
+ const model = editor.model;
303
+ const modelDoc = model.document;
304
+ const view = editor.editing.view;
305
+ const lastSelectionPosition = modelDoc.selection.getLastPosition();
306
+ const nodeAfter = lastSelectionPosition.nodeAfter;
307
+ if (isSoftEnter || !modelDoc.selection.isCollapsed || !lastSelectionPosition.isAtStart) {
308
+ return false;
309
+ }
310
+ if (!isSoftBreakNode(nodeAfter)) {
311
+ return false;
312
+ }
313
+ // We're doing everything in a single change block to have a single undo step.
314
+ editor.model.change(writer => {
315
+ // "Clone" the <codeBlock> in the standard way.
316
+ editor.execute('enter');
317
+ // The cloned block exists now before the original code block.
318
+ const newBlock = modelDoc.selection.anchor.parent.previousSibling;
319
+ // Make the cloned <codeBlock> a regular <paragraph> (with clean attributes, so no language).
320
+ writer.rename(newBlock, DEFAULT_ELEMENT);
321
+ writer.setSelection(newBlock, 'in');
322
+ editor.model.schema.removeDisallowedAttributes([newBlock], writer);
323
+ // Remove the <softBreak> that originally followed the selection position.
324
+ writer.remove(nodeAfter);
325
+ });
326
+ // Eye candy.
327
+ view.scrollToTheSelection();
328
+ return true;
329
+ }
330
+ /**
331
+ * Leave the code block when Enter (but NOT Shift+Enter) has been pressed twice at the end
332
+ * of the code block:
333
+ *
334
+ * ```html
335
+ * // Before:
336
+ * <codeBlock>foo[]</codeBlock>
337
+ *
338
+ * // After first press:
339
+ * <codeBlock>foo<softBreak></softBreak>[]</codeBlock>
340
+ *
341
+ * // After second press:
342
+ * <codeBlock>foo</codeBlock><paragraph>[]</paragraph>
343
+ * ```
344
+ *
345
+ * @param isSoftEnter When `true`, enter was pressed along with <kbd>Shift</kbd>.
346
+ * @returns `true` when selection left the block. `false` if stayed.
347
+ */
348
+ function leaveBlockEndOnEnter(editor, isSoftEnter) {
349
+ const model = editor.model;
350
+ const modelDoc = model.document;
351
+ const view = editor.editing.view;
352
+ const lastSelectionPosition = modelDoc.selection.getLastPosition();
353
+ const nodeBefore = lastSelectionPosition.nodeBefore;
354
+ let emptyLineRangeToRemoveOnEnter;
355
+ if (isSoftEnter || !modelDoc.selection.isCollapsed || !lastSelectionPosition.isAtEnd || !nodeBefore || !nodeBefore.previousSibling) {
356
+ return false;
357
+ }
358
+ // When the position is directly preceded by two soft breaks
359
+ //
360
+ // <codeBlock>foo<softBreak></softBreak><softBreak></softBreak>[]</codeBlock>
361
+ //
362
+ // it creates the following range that will be cleaned up before leaving:
363
+ //
364
+ // <codeBlock>foo[<softBreak></softBreak><softBreak></softBreak>]</codeBlock>
365
+ //
366
+ if (isSoftBreakNode(nodeBefore) && isSoftBreakNode(nodeBefore.previousSibling)) {
367
+ emptyLineRangeToRemoveOnEnter = model.createRange(model.createPositionBefore(nodeBefore.previousSibling), model.createPositionAfter(nodeBefore));
368
+ }
369
+ // When there's some text before the position that is
370
+ // preceded by two soft breaks and made purely of white–space characters
371
+ //
372
+ // <codeBlock>foo<softBreak></softBreak><softBreak></softBreak> []</codeBlock>
373
+ //
374
+ // it creates the following range to clean up before leaving:
375
+ //
376
+ // <codeBlock>foo[<softBreak></softBreak><softBreak></softBreak> ]</codeBlock>
377
+ //
378
+ else if (isEmptyishTextNode(nodeBefore) &&
379
+ isSoftBreakNode(nodeBefore.previousSibling) &&
380
+ isSoftBreakNode(nodeBefore.previousSibling.previousSibling)) {
381
+ emptyLineRangeToRemoveOnEnter = model.createRange(model.createPositionBefore(nodeBefore.previousSibling.previousSibling), model.createPositionAfter(nodeBefore));
382
+ }
383
+ // When there's some text before the position that is made purely of white–space characters
384
+ // and is preceded by some other text made purely of white–space characters
385
+ //
386
+ // <codeBlock>foo<softBreak></softBreak> <softBreak></softBreak> []</codeBlock>
387
+ //
388
+ // it creates the following range to clean up before leaving:
389
+ //
390
+ // <codeBlock>foo[<softBreak></softBreak> <softBreak></softBreak> ]</codeBlock>
391
+ //
392
+ else if (isEmptyishTextNode(nodeBefore) &&
393
+ isSoftBreakNode(nodeBefore.previousSibling) &&
394
+ isEmptyishTextNode(nodeBefore.previousSibling.previousSibling) &&
395
+ nodeBefore.previousSibling.previousSibling &&
396
+ isSoftBreakNode(nodeBefore.previousSibling.previousSibling.previousSibling)) {
397
+ emptyLineRangeToRemoveOnEnter = model.createRange(model.createPositionBefore(nodeBefore.previousSibling.previousSibling.previousSibling), model.createPositionAfter(nodeBefore));
398
+ }
399
+ // Not leaving the block in the following cases:
400
+ //
401
+ // <codeBlock> []</codeBlock>
402
+ // <codeBlock> a []</codeBlock>
403
+ // <codeBlock>foo<softBreak></softBreak>[]</codeBlock>
404
+ // <codeBlock>foo<softBreak></softBreak><softBreak></softBreak>bar[]</codeBlock>
405
+ // <codeBlock>foo<softBreak></softBreak><softBreak></softBreak> a []</codeBlock>
406
+ //
407
+ else {
408
+ return false;
409
+ }
410
+ // We're doing everything in a single change block to have a single undo step.
411
+ editor.model.change(writer => {
412
+ // Remove the last <softBreak>s and all white space characters that followed them.
413
+ writer.remove(emptyLineRangeToRemoveOnEnter);
414
+ // "Clone" the <codeBlock> in the standard way.
415
+ editor.execute('enter');
416
+ const newBlock = modelDoc.selection.anchor.parent;
417
+ // Make the cloned <codeBlock> a regular <paragraph> (with clean attributes, so no language).
418
+ writer.rename(newBlock, DEFAULT_ELEMENT);
419
+ editor.model.schema.removeDisallowedAttributes([newBlock], writer);
420
+ });
421
+ // Eye candy.
422
+ view.scrollToTheSelection();
423
+ return true;
424
+ }
425
+ function isEmptyishTextNode(node) {
426
+ return node && node.is('$text') && !node.data.match(/\S/);
427
+ }
428
+ function isSoftBreakNode(node) {
429
+ return node && node.is('element', 'softBreak');
430
+ }
@@ -5,7 +5,7 @@
5
5
  /**
6
6
  * @module code-block/codeblockui
7
7
  */
8
- import { Plugin } from '@ckeditor/ckeditor5-core';
8
+ import { Plugin } from 'ckeditor5/src/core.js';
9
9
  import '../theme/codeblock.css';
10
10
  /**
11
11
  * The code block UI plugin.