@ckeditor/ckeditor5-code-block 42.0.2-alpha.2 → 43.0.0-alpha.0

package/dist/translations/sr-latn.js

@@ -2,4 +2,4 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-export default {"sr-latn":{"dictionary":{"Insert code block":"Dodaj blok koda","Plain text":"Običan tekst","Leaving %0 code snippet":"","Entering %0 code snippet":"","Entering code snippet":"","Leaving code snippet":"","Code block":""},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}}
+export default {"sr-latn":{"dictionary":{"Insert code block":"Dodaj blok koda","Plain text":"Običan tekst","Leaving %0 code snippet":"Ostavljate %0 isečak koda","Entering %0 code snippet":"Unosite %0 isečak koda","Entering code snippet":"Unošenje isečka koda","Leaving code snippet":"Ostavljanje fragmenta koda  ","Code block":"Blok koda"},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}}

package/dist/translations/sr-latn.umd.js

@@ -4,7 +4,7 @@
  */
 
 ( e => {
-const { [ 'sr-latn' ]: { dictionary, getPluralForm } } = {"sr-latn":{"dictionary":{"Insert code block":"Dodaj blok koda","Plain text":"Običan tekst","Leaving %0 code snippet":"","Entering %0 code snippet":"","Entering code snippet":"","Leaving code snippet":"","Code block":""},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}};
+const { [ 'sr-latn' ]: { dictionary, getPluralForm } } = {"sr-latn":{"dictionary":{"Insert code block":"Dodaj blok koda","Plain text":"Običan tekst","Leaving %0 code snippet":"Ostavljate %0 isečak koda","Entering %0 code snippet":"Unosite %0 isečak koda","Entering code snippet":"Unošenje isečka koda","Leaving code snippet":"Ostavljanje fragmenta koda  ","Code block":"Blok koda"},getPluralForm(n){return (n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);}}};
 e[ 'sr-latn' ] ||= { dictionary: {}, getPluralForm: null };
 e[ 'sr-latn' ].dictionary = Object.assign( e[ 'sr-latn' ].dictionary, dictionary );
 e[ 'sr-latn' ].getPluralForm = getPluralForm;

package/dist/utils.d.ts

@@ -145,3 +145,37 @@ export declare function canBeCodeBlock(schema: Schema, element: Element): boolea
  * Get the translated message read by the screen reader when you enter or exit an element with your cursor.
  */
 export declare function getCodeBlockAriaAnnouncement(t: LocaleTranslate, languageDefs: Array<CodeBlockLanguageDefinition>, element: Element, direction: 'enter' | 'leave'): string;
+/**
+ * For given position, finds the closest position that is at the beginning of a line of code and returns a text node that is at the
+ * beginning of the line (or `null` if there's no text node at the beginning of a given line).
+ *
+ * Line beings at the start of a code block element and after each `softBreak` element.
+ *
+ * Note: even though code block doesn't allow inline elements other than `<softBreak>` by default, some features may overwrite this rule,
+ * so such inline elements are taken into account.
+ *
+ * Some examples of expected results:
+ *
+ * ```
+ * <codeBlock>^</codeBlock>                                ->   null
+ * <codeBlock>^foobar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foobar^</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^bar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^<softBreak />bar</codeBlock>             ->   <codeBlock>[foo]<softBreak />bar</codeBlock>
+ * <codeBlock>foo<softBreak />bar^</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />b^ar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />^bar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>^<element /></codeBlock>                     ->   null
+ * <codeBlock><element />^</codeBlock>                     ->   null
+ * <codeBlock>foo^<element /></codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />^</codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />bar^</codeBlock>               ->   <codeBlock>[foo]<element />bar</codeBlock>
+ * <codeBlock><element />bar^</codeBlock>                  ->   null
+ * <codeBlock>foo<softBreak />^<softBreak /></codeBlock>   ->   null
+ * <codeBlock>foo<softBreak />^<element /></codeBlock>     ->   null
+ * <codeBlock>foo<softBreak /><element />^</codeBlock>     ->   null
+ * <codeBlock>foo<softBreak />bar<element />^</codeBlock>  ->   <codeBlock>foo<softBreak />[bar]<element /></codeBlock>
+ * <codeBlock>foo<softBreak /><element />ba^r</codeBlock>  ->   null
+ * ```
+ */
+export declare function getTextNodeAtLineStart(position: Position, model: Model): Text | null;

package/lang/translations/sr-latn.po

@@ -27,20 +27,20 @@ msgstr "Običan tekst"
 
 msgctxt "Assistive technologies label for leaving the code block with a specified programming language. Example: 'Leaving JavaScript code snippet'"
 msgid "Leaving %0 code snippet"
-msgstr ""
+msgstr "Ostavljate %0 isečak koda"
 
 msgctxt "Assistive technologies label for entering the code block with a specified programming language. Example: 'Entering JavaScript code snippet'"
 msgid "Entering %0 code snippet"
-msgstr ""
+msgstr "Unosite %0 isečak koda"
 
 msgctxt "Assistive technologies label for entering the code block with unspecified programming language."
 msgid "Entering code snippet"
-msgstr ""
+msgstr "Unošenje isečka koda"
 
 msgctxt "Assistive technologies label for leaving the code block with unspecified programming language."
 msgid "Leaving code snippet"
-msgstr ""
+msgstr "Ostavljanje fragmenta koda  "
 
 msgctxt "The accessible label of the menu bar button that inserts a code block into editor content."
 msgid "Code block"
-msgstr ""
+msgstr "Blok koda"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-code-block",
-  "version": "42.0.2-alpha.2",
+  "version": "43.0.0-alpha.0",
   "description": "Code block feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,13 +13,13 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-engine": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-enter": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-ui": "42.0.2-alpha.2",
-    "@ckeditor/ckeditor5-utils": "42.0.2-alpha.2",
-    "ckeditor5": "42.0.2-alpha.2",
-    "lodash-es": "4.17.21"
+    "@ckeditor/ckeditor5-core": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-clipboard": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "43.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "43.0.0-alpha.0",
+    "ckeditor5": "43.0.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",

package/src/codeblockediting.d.ts

@@ -2,6 +2,9 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
+/**
+ * @module code-block/codeblockediting
+ */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { ShiftEnter } from 'ckeditor5/src/enter.js';
 /**

package/src/codeblockediting.js

@@ -2,13 +2,17 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
+/**
+ * @module code-block/codeblockediting
+ */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ShiftEnter } from 'ckeditor5/src/enter.js';
 import { UpcastWriter } from 'ckeditor5/src/engine.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
 import CodeBlockCommand from './codeblockcommand.js';
 import IndentCodeBlockCommand from './indentcodeblockcommand.js';
 import OutdentCodeBlockCommand from './outdentcodeblockcommand.js';
-import { getNormalizedAndLocalizedLanguageDefinitions, getLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment, getCodeBlockAriaAnnouncement } from './utils.js';
+import { getNormalizedAndLocalizedLanguageDefinitions, getLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment, getCodeBlockAriaAnnouncement, getTextNodeAtLineStart } from './utils.js';
 import { modelToViewCodeBlockInsertion, modelToDataViewSoftBreakInsertion, dataViewToModelCodeBlockInsertion, dataViewToModelTextNewlinesInsertion, dataViewToModelOrphanNodeConsumer } from './converters.js';
 const DEFAULT_ELEMENT = 'paragraph';
 /**
@@ -90,9 +94,11 @@ export default class CodeBlockEditing extends Plugin {
             allowAttributesOf: '$listItem',
             isBlock: true
         });
-        // Disallow all attributes on `$text` inside `codeBlock`.
-        schema.addAttributeCheck(context => {
-            if (context.endsWith('codeBlock $text')) {
+        // Disallow formatting attributes on `codeBlock` children.
+        schema.addAttributeCheck((context, attributeName) => {
+            const parent = context.getItem(context.length - 2);
+            const isFormatting = schema.getAttributeProperties(attributeName).isFormatting;
+            if (isFormatting && parent && parent.name == 'codeBlock') {
                 return false;
             }
         });
@@ -120,6 +126,27 @@ export default class CodeBlockEditing extends Plugin {
             // Pass the view fragment to the default clipboardInput handler.
             data.content = rawSnippetTextToViewDocumentFragment(writer, text);
         });
+        if (editor.plugins.has('ClipboardPipeline')) {
+            // Elements may have a plain textual representation (hence be present in the 'text/plain' data transfer),
+            // but not be allowed in the code block.
+            // Filter them out before inserting the content to the model.
+            editor.plugins.get(ClipboardPipeline).on('contentInsertion', (evt, data) => {
+                const model = editor.model;
+                const selection = model.document.selection;
+                if (!selection.anchor.parent.is('element', 'codeBlock')) {
+                    return;
+                }
+                model.change(writer => {
+                    const contentRange = writer.createRangeIn(data.content);
+                    for (const item of [...contentRange.getItems()]) {
+                        // Remove all nodes disallowed in the code block.
+                        if (item.is('node') && !schema.checkChild(selection.anchor, item)) {
+                            writer.remove(item);
+                        }
+                    }
+                });
+            });
+        }
         // Make sure multi–line selection is always wrapped in a code block when `getSelectedContent()`
         // is used (e.g. clipboard copy). Otherwise, only the raw text will be copied to the clipboard and,
         // upon next paste, this bare text will not be inserted as a code block, which is not the best UX.
@@ -231,9 +258,10 @@ export default class CodeBlockEditing extends Plugin {
 function breakLineOnEnter(editor) {
     const model = editor.model;
     const modelDoc = model.document;
+    // Use last position as other mechanisms (e.g. condition deciding whether this function should be called) also check that.
     const lastSelectionPosition = modelDoc.selection.getLastPosition();
-    const node = lastSelectionPosition.nodeBefore || lastSelectionPosition.textNode;
     let leadingWhiteSpaces;
+    const node = getTextNodeAtLineStart(lastSelectionPosition, model);
     // Figure out the indentation (white space chars) at the beginning of the line.
     if (node && node.is('$text')) {
         leadingWhiteSpaces = getLeadingWhiteSpaces(node);

package/src/codeblockui.js

@@ -67,6 +67,7 @@ export default class CodeBlockUI extends Plugin {
         componentFactory.add('menuBar:codeBlock', locale => {
             const menuView = new MenuBarMenuView(locale);
             menuView.buttonView.set({
+                role: 'menuitem',
                 label: t('Code block'),
                 icon: icons.codeBlock
             });
@@ -79,7 +80,10 @@ export default class CodeBlockUI extends Plugin {
                 const listItemView = new MenuBarMenuListItemView(locale, menuView);
                 const buttonView = new MenuBarMenuListItemButtonView(locale);
                 buttonView.bind(...Object.keys(definition.model)).to(definition.model);
-                buttonView.bind('ariaChecked').to(buttonView, 'isOn');
+                buttonView.set({
+                    isToggleable: true,
+                    role: 'menuitemcheckbox'
+                });
                 buttonView.delegate('execute').to(menuView);
                 buttonView.on('execute', () => {
                     editor.execute('codeBlock', {

package/src/outdentcodeblockcommand.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { Command } from 'ckeditor5/src/core.js';
-import { getLeadingWhiteSpaces, getIndentOutdentPositions, isModelSelectionInCodeBlock } from './utils.js';
+import { getLeadingWhiteSpaces, getIndentOutdentPositions, isModelSelectionInCodeBlock, getTextNodeAtLineStart } from './utils.js';
 /**
  * The code block indentation decrease command plugin.
  */
@@ -101,7 +101,7 @@ export default class OutdentCodeBlockCommand extends Command {
 // @returns {<module:engine/model/range~Range>|null}
 function getLastOutdentableSequenceRange(model, position, sequence) {
     // Positions start before each text node (code line). Get the node corresponding to the position.
-    const nodeAtPosition = getCodeLineTextNodeAtPosition(position);
+    const nodeAtPosition = getTextNodeAtLineStart(position, model);
     if (!nodeAtPosition) {
         return null;
     }
@@ -131,18 +131,3 @@ function getLastOutdentableSequenceRange(model, position, sequence) {
     //
     return model.createRange(model.createPositionAt(parent, startOffset + lastIndexOfSequence), model.createPositionAt(parent, startOffset + lastIndexOfSequence + sequence.length));
 }
-function getCodeLineTextNodeAtPosition(position) {
-    // Positions start before each text node (code line). Get the node corresponding to the position.
-    let nodeAtPosition = position.parent.getChild(position.index);
-    // <codeBlock>foo^</codeBlock>
-    // <codeBlock>foo^<softBreak></softBreak>bar</codeBlock>
-    if (!nodeAtPosition || nodeAtPosition.is('element', 'softBreak')) {
-        nodeAtPosition = position.nodeBefore;
-    }
-    // <codeBlock>^</codeBlock>
-    // <codeBlock>foo^<softBreak></softBreak>bar</codeBlock>
-    if (!nodeAtPosition || nodeAtPosition.is('element', 'softBreak')) {
-        return null;
-    }
-    return nodeAtPosition;
-}

package/src/utils.d.ts

@@ -141,3 +141,37 @@ export declare function canBeCodeBlock(schema: Schema, element: Element): boolea
  * Get the translated message read by the screen reader when you enter or exit an element with your cursor.
  */
 export declare function getCodeBlockAriaAnnouncement(t: LocaleTranslate, languageDefs: Array<CodeBlockLanguageDefinition>, element: Element, direction: 'enter' | 'leave'): string;
+/**
+ * For given position, finds the closest position that is at the beginning of a line of code and returns a text node that is at the
+ * beginning of the line (or `null` if there's no text node at the beginning of a given line).
+ *
+ * Line beings at the start of a code block element and after each `softBreak` element.
+ *
+ * Note: even though code block doesn't allow inline elements other than `<softBreak>` by default, some features may overwrite this rule,
+ * so such inline elements are taken into account.
+ *
+ * Some examples of expected results:
+ *
+ * ```
+ * <codeBlock>^</codeBlock>                                ->   null
+ * <codeBlock>^foobar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foobar^</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^bar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^<softBreak />bar</codeBlock>             ->   <codeBlock>[foo]<softBreak />bar</codeBlock>
+ * <codeBlock>foo<softBreak />bar^</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />b^ar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />^bar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>^<element /></codeBlock>                     ->   null
+ * <codeBlock><element />^</codeBlock>                     ->   null
+ * <codeBlock>foo^<element /></codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />^</codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />bar^</codeBlock>               ->   <codeBlock>[foo]<element />bar</codeBlock>
+ * <codeBlock><element />bar^</codeBlock>                  ->   null
+ * <codeBlock>foo<softBreak />^<softBreak /></codeBlock>   ->   null
+ * <codeBlock>foo<softBreak />^<element /></codeBlock>     ->   null
+ * <codeBlock>foo<softBreak /><element />^</codeBlock>     ->   null
+ * <codeBlock>foo<softBreak />bar<element />^</codeBlock>  ->   <codeBlock>foo<softBreak />[bar]<element /></codeBlock>
+ * <codeBlock>foo<softBreak /><element />ba^r</codeBlock>  ->   null
+ * ```
+ */
+export declare function getTextNodeAtLineStart(position: Position, model: Model): Text | null;

package/src/utils.js

@@ -173,17 +173,23 @@ export function getIndentOutdentPositions(model) {
         direction: 'backward'
     });
     for (const { item } of walker) {
-        if (!item.is('$textProxy')) {
+        let node = item.is('$textProxy') ? item.textNode : item;
+        const parent = node.parent;
+        if (!parent.is('element', 'codeBlock') || node.is('element', 'softBreak')) {
             continue;
         }
-        const { parent, startOffset } = item.textNode;
-        if (!parent.is('element', 'codeBlock')) {
-            continue;
+        // For each item in code block, move backwards until the beginning of the line it is in is found.
+        while (node.previousSibling && !node.previousSibling.is('element', 'softBreak')) {
+            node = node.previousSibling;
+        }
+        // Take the leading white spaces into account (only for text nodes).
+        const startOffset = !node.is('$text') ? node.startOffset : node.startOffset + getLeadingWhiteSpaces(node).length;
+        const position = model.createPositionAt(parent, startOffset);
+        // Do not add the same position twice. Unfortunately using set doesn't deduplicate positions because
+        // they are different objects.
+        if (positions.every(pos => !pos.isEqual(position))) {
+            positions.push(position);
         }
-        const leadingWhiteSpaces = getLeadingWhiteSpaces(item.textNode);
-        // Make sure the position is after all leading whitespaces in the text node.
-        const position = model.createPositionAt(parent, startOffset + leadingWhiteSpaces.length);
-        positions.push(position);
     }
     return positions;
 }
@@ -225,3 +231,50 @@ export function getCodeBlockAriaAnnouncement(t, languageDefs, element, direction
     }
     return t('Leaving code snippet');
 }
+/**
+ * For given position, finds the closest position that is at the beginning of a line of code and returns a text node that is at the
+ * beginning of the line (or `null` if there's no text node at the beginning of a given line).
+ *
+ * Line beings at the start of a code block element and after each `softBreak` element.
+ *
+ * Note: even though code block doesn't allow inline elements other than `<softBreak>` by default, some features may overwrite this rule,
+ * so such inline elements are taken into account.
+ *
+ * Some examples of expected results:
+ *
+ * ```
+ * <codeBlock>^</codeBlock>                                ->   null
+ * <codeBlock>^foobar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foobar^</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^bar</codeBlock>                          ->   <codeBlock>[foobar]</codeBlock>
+ * <codeBlock>foo^<softBreak />bar</codeBlock>             ->   <codeBlock>[foo]<softBreak />bar</codeBlock>
+ * <codeBlock>foo<softBreak />bar^</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />b^ar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>foo<softBreak />^bar</codeBlock>             ->   <codeBlock>foo<softBreak />[bar]</codeBlock>
+ * <codeBlock>^<element /></codeBlock>                     ->   null
+ * <codeBlock><element />^</codeBlock>                     ->   null
+ * <codeBlock>foo^<element /></codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />^</codeBlock>                  ->   <codeBlock>[foo]<element /></codeBlock>
+ * <codeBlock>foo<element />bar^</codeBlock>               ->   <codeBlock>[foo]<element />bar</codeBlock>
+ * <codeBlock><element />bar^</codeBlock>                  ->   null
+ * <codeBlock>foo<softBreak />^<softBreak /></codeBlock>   ->   null
+ * <codeBlock>foo<softBreak />^<element /></codeBlock>     ->   null
+ * <codeBlock>foo<softBreak /><element />^</codeBlock>     ->   null
+ * <codeBlock>foo<softBreak />bar<element />^</codeBlock>  ->   <codeBlock>foo<softBreak />[bar]<element /></codeBlock>
+ * <codeBlock>foo<softBreak /><element />ba^r</codeBlock>  ->   null
+ * ```
+ */
+export function getTextNodeAtLineStart(position, model) {
+    // First, move position before a text node, if it is inside a text node.
+    if (position.textNode) {
+        position = model.createPositionBefore(position.textNode);
+    }
+    // Then, jump-back the position until it is before a `softBreak` or at the beginning of the `codeBlock`.
+    while (position.nodeBefore && !position.nodeBefore.is('element', 'softBreak')) {
+        position = model.createPositionBefore(position.nodeBefore);
+    }
+    // Now, the position is at the beginning of a line.
+    // Return a text node after the position, if there is one.
+    const nodeAtStart = position.nodeAfter;
+    return nodeAtStart && nodeAtStart.is('$text') ? nodeAtStart : null;
+}