@ckeditor/ckeditor5-code-block 0.0.0-nightly-next-20260118.0 → 0.0.0-nightly-20260119.0

package/src/outdentcodeblockcommand.js

@@ -0,0 +1,137 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import { getLeadingWhiteSpaces, getIndentOutdentPositions, isModelSelectionInCodeBlock, getTextNodeAtLineStart } from './utils.js';
+/**
+ * The code block indentation decrease command plugin.
+ */
+export class OutdentCodeBlockCommand extends Command {
+    /**
+     * A sequence of characters removed from the line when the command is executed.
+     */
+    _indentSequence;
+    constructor(editor) {
+        super(editor);
+        this._indentSequence = editor.config.get('codeBlock.indentSequence');
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Executes the command. When the command {@link #isEnabled is enabled}, the indentation of the
+     * code lines in the selection will be decreased.
+     *
+     * @fires execute
+     */
+    execute() {
+        const editor = this.editor;
+        const model = editor.model;
+        model.change(() => {
+            const positions = getIndentOutdentPositions(model);
+            // Outdent all positions, for instance assuming the indent sequence is 4x space ("    "):
+            //
+            //		<codeBlock>^foo</codeBlock>         ->       <codeBlock>foo</codeBlock>
+            //
+            //		<codeBlock>    ^bar</codeBlock>     ->       <codeBlock>bar</codeBlock>
+            //
+            // Also, when there is more than one position:
+            //
+            //		<codeBlock>
+            //			    ^foobar
+            //			<softBreak></softBreak>
+            //			    ^bazqux
+            //		</codeBlock>
+            //
+            //		->
+            //
+            //		<codeBlock>
+            //			foobar
+            //			<softBreak></softBreak>
+            //			bazqux
+            //		</codeBlock>
+            for (const position of positions) {
+                const range = getLastOutdentableSequenceRange(model, position, this._indentSequence);
+                if (range) {
+                    // Previously deletion was done by writer.remove(). It was changed to deleteContent() to enable
+                    // integration of code block with track changes. It's the easiest way of integration because deleteContent()
+                    // is already integrated with track changes, but if it ever cause any troubles it can be reverted, however
+                    // some additional work will be required in track changes integration of code block.
+                    model.deleteContent(model.createSelection(range));
+                }
+            }
+        });
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @private
+     * @returns {Boolean} Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        if (!this._indentSequence) {
+            return false;
+        }
+        const model = this.editor.model;
+        if (!isModelSelectionInCodeBlock(model.document.selection)) {
+            return false;
+        }
+        // Outdent command can execute only when there is an indent character sequence
+        // in some of the lines.
+        return getIndentOutdentPositions(model).some(position => {
+            return getLastOutdentableSequenceRange(model, position, this._indentSequence);
+        });
+    }
+}
+// For a position coming from `getIndentOutdentPositions()`, it returns the range representing
+// the last occurrence of the indent sequence among the leading whitespaces of the code line the
+// position represents.
+//
+// For instance, assuming the indent sequence is 4x space ("    "):
+//
+//		<codeBlock>foo^</codeBlock>                                 ->          null
+//		<codeBlock>foo^<softBreak></softBreak>bar</codeBlock>       ->          null
+//		<codeBlock>  ^foo</codeBlock>                               ->          null
+//		<codeBlock>        ^foo</codeBlock>                         ->          <codeBlock>    [    ]foo</codeBlock>
+//		<codeBlock>    ^foo    bar</codeBlock>                      ->          <codeBlock>[    ]foo    bar</codeBlock>
+//
+// @param {<module:engine/model/model~Model>} model
+// @param {<module:engine/model/position~ModelPosition>} position
+// @param {String} sequence
+// @returns {<module:engine/model/range~ModelRange>|null}
+function getLastOutdentableSequenceRange(model, position, sequence) {
+    // Positions start before each text node (code line). Get the node corresponding to the position.
+    const nodeAtPosition = getTextNodeAtLineStart(position, model);
+    if (!nodeAtPosition) {
+        return null;
+    }
+    const leadingWhiteSpaces = getLeadingWhiteSpaces(nodeAtPosition);
+    const lastIndexOfSequence = leadingWhiteSpaces.lastIndexOf(sequence);
+    // For instance, assuming the indent sequence is 4x space ("    "):
+    //
+    //		<codeBlock>    	^foo</codeBlock>           ->             null
+    //
+    if (lastIndexOfSequence + sequence.length !== leadingWhiteSpaces.length) {
+        return null;
+    }
+    // For instance, assuming the indent sequence is 4x space ("    "):
+    //
+    //		<codeBlock>  ^foo</codeBlock>           ->             null
+    //
+    if (lastIndexOfSequence === -1) {
+        return null;
+    }
+    const { parent, startOffset } = nodeAtPosition;
+    // Create a range that contains the **last** indent sequence among the leading whitespaces
+    // of the line.
+    //
+    // For instance, assuming the indent sequence is 4x space ("    "):
+    //
+    //		<codeBlock>        ^foo</codeBlock>      ->     <codeBlock>    [    ]foo</codeBlock>
+    //
+    return model.createRange(model.createPositionAt(parent, startOffset + lastIndexOfSequence), model.createPositionAt(parent, startOffset + lastIndexOfSequence + sequence.length));
+}

package/{dist → src}/utils.d.ts

@@ -5,10 +5,10 @@
 /**
  * @module code-block/utils
  */
-import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Editor } from 'ckeditor5/src/core.js';
 import type { CodeBlockLanguageDefinition } from './codeblockconfig.js';
-import type { ModelDocumentSelection, ModelElement, Model, ModelPosition, ModelSchema, ModelText, ViewUpcastWriter, ViewDocumentFragment } from '@ckeditor/ckeditor5-engine';
-import { type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
+import type { ModelDocumentSelection, ModelElement, Model, ModelPosition, ModelSchema, ModelText, ViewUpcastWriter, ViewDocumentFragment } from 'ckeditor5/src/engine.js';
+import { type LocaleTranslate } from 'ckeditor5/src/utils.js';
 /**
  * Returns code block languages as defined in `config.codeBlock.languages` but processed:
  *

package/src/utils.js

@@ -0,0 +1,296 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { first } from 'ckeditor5/src/utils.js';
+/**
+ * Returns code block languages as defined in `config.codeBlock.languages` but processed:
+ *
+ * * To consider the editor localization, i.e. to display {@link module:code-block/codeblockconfig~CodeBlockLanguageDefinition}
+ * in the correct language. There is no way to use {@link module:utils/locale~Locale#t} when the user
+ * configuration is defined because the editor does not exist yet.
+ * * To make sure each definition has a CSS class associated with it even if not specified
+ * in the original configuration.
+ *
+ * @internal
+ */
+export function getNormalizedAndLocalizedLanguageDefinitions(editor) {
+    const t = editor.t;
+    const languageDefs = editor.config.get('codeBlock.languages');
+    for (const def of languageDefs) {
+        if (def.label === 'Plain text') {
+            def.label = t('Plain text');
+        }
+        if (def.class === undefined) {
+            def.class = `language-${def.language}`;
+        }
+    }
+    return languageDefs;
+}
+/**
+ * Returns an object associating certain language definition properties with others. For instance:
+ *
+ * For:
+ *
+ * ```ts
+ * const definitions = {
+ * 	{ language: 'php', class: 'language-php', label: 'PHP' },
+ * 	{ language: 'javascript', class: 'js', label: 'JavaScript' },
+ * };
+ *
+ * getPropertyAssociation( definitions, 'class', 'language' );
+ * ```
+ *
+ * returns:
+ *
+ * ```ts
+ * {
+ * 	'language-php': 'php',
+ * 	'js': 'javascript'
+ * }
+ * ```
+ *
+ * and
+ *
+ * ```ts
+ * getPropertyAssociation( definitions, 'language', 'label' );
+ * ```
+ *
+ * returns:
+ *
+ * ```ts
+ * {
+ * 	'php': 'PHP',
+ * 	'javascript': 'JavaScript'
+ * }
+ * ```
+ *
+ * @internal
+ */
+export function getPropertyAssociation(languageDefs, key, value) {
+    const association = {};
+    for (const def of languageDefs) {
+        if (key === 'class') {
+            // Only the first class is considered.
+            const newKey = (def[key]).split(' ').shift();
+            association[newKey] = def[value];
+        }
+        else {
+            association[def[key]] = def[value];
+        }
+    }
+    return association;
+}
+/**
+ * For a given model text node, it returns white spaces that precede other characters in that node.
+ * This corresponds to the indentation part of the code block line.
+ *
+ * @internal
+ */
+export function getLeadingWhiteSpaces(textNode) {
+    return textNode.data.match(/^(\s*)/)[0];
+}
+/**
+ * For plain text containing the code (a snippet), it returns a document fragment containing
+ * view text nodes separated by `<br>` elements (in place of new line characters "\n"), for instance:
+ *
+ * Input:
+ *
+ * ```ts
+ * "foo()\n
+ * bar()"
+ * ```
+ *
+ * Output:
+ *
+ * ```html
+ * <DocumentFragment>
+ * 	"foo()"
+ * 	<br/>
+ * 	"bar()"
+ * </DocumentFragment>
+ * ```
+ *
+ * @param text The raw code text to be converted.
+ * @internal
+ */
+export function rawSnippetTextToViewDocumentFragment(writer, text) {
+    const fragment = writer.createDocumentFragment();
+    const textLines = text.split('\n');
+    const items = textLines.reduce((nodes, line, lineIndex) => {
+        nodes.push(line);
+        if (lineIndex < textLines.length - 1) {
+            nodes.push(writer.createElement('br'));
+        }
+        return nodes;
+    }, []);
+    writer.appendChild(items, fragment);
+    return fragment;
+}
+/**
+ * Returns an array of all model positions within the selection that represent code block lines.
+ *
+ * If the selection is collapsed, it returns the exact selection anchor position:
+ *
+ * ```html
+ * <codeBlock>[]foo</codeBlock>        ->     <codeBlock>^foo</codeBlock>
+ * <codeBlock>foo[]bar</codeBlock>     ->     <codeBlock>foo^bar</codeBlock>
+ * ```
+ *
+ * Otherwise, it returns positions **before** each text node belonging to all code blocks contained by the selection:
+ *
+ * ```html
+ * <codeBlock>                                <codeBlock>
+ *     foo[bar                                   ^foobar
+ *     <softBreak></softBreak>         ->        <softBreak></softBreak>
+ *     baz]qux                                   ^bazqux
+ * </codeBlock>                               </codeBlock>
+ * ```
+ *
+ * It also works across other non–code blocks:
+ *
+ * ```html
+ * <codeBlock>                                <codeBlock>
+ *     foo[bar                                   ^foobar
+ * </codeBlock>                               </codeBlock>
+ * <paragraph>text</paragraph>         ->     <paragraph>text</paragraph>
+ * <codeBlock>                                <codeBlock>
+ *     baz]qux                                   ^bazqux
+ * </codeBlock>                               </codeBlock>
+ * ```
+ *
+ * **Note:** The positions are in reverse order so they do not get outdated when iterating over them and
+ * the writer inserts or removes elements at the same time.
+ *
+ * **Note:** The position is located after the leading white spaces in the text node.
+ *
+ * @internal
+ */
+export function getIndentOutdentPositions(model) {
+    const selection = model.document.selection;
+    const positions = [];
+    // When the selection is collapsed, there's only one position we can indent or outdent.
+    if (selection.isCollapsed) {
+        return [selection.anchor];
+    }
+    // When the selection is NOT collapsed, collect all positions starting before text nodes
+    // (code lines) in any <codeBlock> within the selection.
+    // Walk backward so positions we are about to collect here do not get outdated when
+    // inserting or deleting using the writer.
+    const walker = selection.getFirstRange().getWalker({
+        ignoreElementEnd: true,
+        direction: 'backward'
+    });
+    for (const { item } of walker) {
+        let node = item.is('$textProxy') ? item.textNode : item;
+        const parent = node.parent;
+        if (!parent.is('element', 'codeBlock') || node.is('element', 'softBreak')) {
+            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);
+        }
+    }
+    return positions;
+}
+/**
+ * Checks if any of the blocks within the model selection is a code block.
+ *
+ * @internal
+ */
+export function isModelSelectionInCodeBlock(selection) {
+    const firstBlock = first(selection.getSelectedBlocks());
+    return !!firstBlock && firstBlock.is('element', 'codeBlock');
+}
+/**
+ * Checks if an {@link module:engine/model/element~ModelElement Element} can become a code block.
+ *
+ * @param schema Model's schema.
+ * @param element The element to be checked.
+ * @returns Check result.
+ * @internal
+ */
+export function canBeCodeBlock(schema, element) {
+    if (element.is('rootElement') || schema.isLimit(element)) {
+        return false;
+    }
+    return schema.checkChild(element.parent, 'codeBlock');
+}
+/**
+ * Get the translated message read by the screen reader when you enter or exit an element with your cursor.
+ *
+ * @internal
+ */
+export function getCodeBlockAriaAnnouncement(t, languageDefs, element, direction) {
+    const languagesToLabels = getPropertyAssociation(languageDefs, 'language', 'label');
+    const codeBlockLanguage = element.getAttribute('language');
+    if (codeBlockLanguage in languagesToLabels) {
+        const language = languagesToLabels[codeBlockLanguage];
+        if (direction === 'enter') {
+            return t('Entering %0 code snippet', language);
+        }
+        return t('Leaving %0 code snippet', language);
+    }
+    if (direction === 'enter') {
+        return t('Entering code snippet');
+    }
+    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
+ * ```
+ *
+ * @internal
+ */
+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;
+}

package/theme/codeblock.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck-content pre {
+	padding: 1em;
+	color: hsl(0, 0%, 20.8%);
+	background: hsla(0, 0%, 78%, 0.3);
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+
+	/* Code block are language direction–agnostic. */
+	text-align: left;
+	direction: ltr;
+
+	tab-size: 4;
+	white-space: pre-wrap;
+
+	/* Don't inherit the style, e.g. when in a block quote. */
+	font-style: normal;
+
+	/* Don't let the code be squashed e.g. when in a table cell. */
+	min-width: 200px;
+
+	& code {
+		background: unset;
+		padding: 0;
+		border-radius: 0;
+	}
+}
+
+.ck.ck-editor__editable pre {
+	position: relative;
+
+	&[data-language]::after {
+		content: attr(data-language);
+		position: absolute;
+	}
+}