@ckeditor/ckeditor5-code-block 0.0.0-nightly-20240715.0 → 0.0.0-nightly-20240717.0

package/dist/types/codeblockediting.d.ts

@@ -6,6 +6,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/dist/types/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-code-block",
-  "version": "0.0.0-nightly-20240715.0",
+  "version": "0.0.0-nightly-20240717.0",
   "description": "Code block feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,8 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20240715.0",
-    "lodash-es": "4.17.21"
+    "ckeditor5": "0.0.0-nightly-20240717.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';
 /**
@@ -120,6 +124,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 +256,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/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;
+}