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

package/src/codeblockui.js

@@ -0,0 +1,134 @@
+/**
+ * @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
+ */
+/**
+ * @module code-block/codeblockui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import { UIModel, SplitButtonView, createDropdown, addListToDropdown, MenuBarMenuListItemButtonView, MenuBarMenuListView, MenuBarMenuView, MenuBarMenuListItemView } from 'ckeditor5/src/ui.js';
+import { IconCodeBlock } from 'ckeditor5/src/icons.js';
+import { getNormalizedAndLocalizedLanguageDefinitions } from './utils.js';
+import '../theme/codeblock.css';
+/**
+ * The code block UI plugin.
+ *
+ * Introduces the `'codeBlock'` dropdown.
+ */
+export class CodeBlockUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'CodeBlockUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const componentFactory = editor.ui.componentFactory;
+        const normalizedLanguageDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
+        const itemDefinitions = this._getLanguageListItemDefinitions(normalizedLanguageDefs);
+        const command = editor.commands.get('codeBlock');
+        componentFactory.add('codeBlock', locale => {
+            const dropdownView = createDropdown(locale, SplitButtonView);
+            const splitButtonView = dropdownView.buttonView;
+            const accessibleLabel = t('Insert code block');
+            splitButtonView.set({
+                label: accessibleLabel,
+                tooltip: true,
+                icon: IconCodeBlock,
+                isToggleable: true
+            });
+            splitButtonView.bind('isOn').to(command, 'value', value => !!value);
+            splitButtonView.on('execute', () => {
+                editor.execute('codeBlock', {
+                    usePreviousLanguageChoice: true
+                });
+                editor.editing.view.focus();
+            });
+            dropdownView.on('execute', evt => {
+                editor.execute('codeBlock', {
+                    language: evt.source._codeBlockLanguage,
+                    forceValue: true
+                });
+                editor.editing.view.focus();
+            });
+            dropdownView.class = 'ck-code-block-dropdown';
+            dropdownView.bind('isEnabled').to(command);
+            addListToDropdown(dropdownView, itemDefinitions, {
+                role: 'menu',
+                ariaLabel: accessibleLabel
+            });
+            return dropdownView;
+        });
+        componentFactory.add('menuBar:codeBlock', locale => {
+            const menuView = new MenuBarMenuView(locale);
+            menuView.buttonView.set({
+                role: 'menuitem',
+                label: t('Code block'),
+                icon: IconCodeBlock
+            });
+            menuView.bind('isEnabled').to(command);
+            const listView = new MenuBarMenuListView(locale);
+            listView.set({
+                ariaLabel: t('Insert code block')
+            });
+            for (const definition of itemDefinitions) {
+                const listItemView = new MenuBarMenuListItemView(locale, menuView);
+                const buttonView = new MenuBarMenuListItemButtonView(locale);
+                buttonView.bind(...Object.keys(definition.model)).to(definition.model);
+                buttonView.set({
+                    isToggleable: true,
+                    role: 'menuitemcheckbox'
+                });
+                buttonView.delegate('execute').to(menuView);
+                buttonView.on('execute', () => {
+                    editor.execute('codeBlock', {
+                        language: definition.model._codeBlockLanguage,
+                        forceValue: command.value == definition.model._codeBlockLanguage ? false : true
+                    });
+                    editor.editing.view.focus();
+                });
+                listItemView.children.add(buttonView);
+                listView.items.add(listItemView);
+            }
+            menuView.panelView.children.add(listView);
+            return menuView;
+        });
+    }
+    /**
+     * A helper returning a collection of the `codeBlock` dropdown items representing languages
+     * available for the user to choose from.
+     */
+    _getLanguageListItemDefinitions(normalizedLanguageDefs) {
+        const editor = this.editor;
+        const command = editor.commands.get('codeBlock');
+        const itemDefinitions = new Collection();
+        for (const languageDef of normalizedLanguageDefs) {
+            const definition = {
+                type: 'button',
+                model: new UIModel({
+                    _codeBlockLanguage: languageDef.language,
+                    label: languageDef.label,
+                    role: 'menuitemradio',
+                    withText: true
+                })
+            };
+            definition.model.bind('isOn').to(command, 'value', value => {
+                return value === definition.model._codeBlockLanguage;
+            });
+            itemDefinitions.add(definition);
+        }
+        return itemDefinitions;
+    }
+}

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

@@ -5,8 +5,8 @@
 /**
  * @module code-block/converters
  */
-import type { GetCallback } from '@ckeditor/ckeditor5-utils';
-import type { DowncastInsertEvent, Model, UpcastElementEvent, UpcastTextEvent, EditingView } from '@ckeditor/ckeditor5-engine';
+import type { GetCallback } from 'ckeditor5/src/utils.js';
+import type { DowncastInsertEvent, Model, UpcastElementEvent, UpcastTextEvent, EditingView } from 'ckeditor5/src/engine.js';
 import type { CodeBlockLanguageDefinition } from './codeblockconfig.js';
 /**
  * A model-to-view (both editing and data) converter for the `codeBlock` element.

package/src/converters.js

@@ -0,0 +1,285 @@
+/**
+ * @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 { getPropertyAssociation } from './utils.js';
+/**
+ * A model-to-view (both editing and data) converter for the `codeBlock` element.
+ *
+ * Sample input:
+ *
+ * ```html
+ * <codeBlock language="javascript">foo();<softBreak></softBreak>bar();</codeBlock>
+ * ```
+ *
+ * Sample output (editing):
+ *
+ * ```html
+ * <pre data-language="JavaScript"><code class="language-javascript">foo();<br />bar();</code></pre>
+ * ```
+ *
+ * Sample output (data, see {@link module:code-block/converters~modelToDataViewSoftBreakInsertion}):
+ *
+ * ```html
+ * <pre><code class="language-javascript">foo();\nbar();</code></pre>
+ * ```
+ *
+ * @param languageDefs The normalized language configuration passed to the feature.
+ * @param useLabels When `true`, the `<pre>` element will get a `data-language` attribute with a
+ * human–readable label of the language. Used only in the editing.
+ * @returns Returns a conversion callback.
+ * @internal
+ */
+export function modelToViewCodeBlockInsertion(model, languageDefs, useLabels = false) {
+    // Language CSS classes:
+    //
+    //		{
+    //			php: 'language-php',
+    //			python: 'language-python',
+    //			javascript: 'js',
+    //			...
+    //		}
+    const languagesToClasses = getPropertyAssociation(languageDefs, 'language', 'class');
+    // Language labels:
+    //
+    //		{
+    //			php: 'PHP',
+    //			python: 'Python',
+    //			javascript: 'JavaScript',
+    //			...
+    //		}
+    const languagesToLabels = getPropertyAssociation(languageDefs, 'language', 'label');
+    return (evt, data, conversionApi) => {
+        const { writer, mapper, consumable } = conversionApi;
+        if (!consumable.consume(data.item, 'insert')) {
+            return;
+        }
+        const codeBlockLanguage = data.item.getAttribute('language');
+        const targetViewPosition = mapper.toViewPosition(model.createPositionBefore(data.item));
+        const preAttributes = {};
+        // Attributes added only in the editing view.
+        if (useLabels) {
+            preAttributes['data-language'] = languagesToLabels[codeBlockLanguage];
+            preAttributes.spellcheck = 'false';
+        }
+        const codeAttributes = languagesToClasses[codeBlockLanguage] ? {
+            class: languagesToClasses[codeBlockLanguage]
+        } : undefined;
+        const code = writer.createContainerElement('code', codeAttributes);
+        const pre = writer.createContainerElement('pre', preAttributes, code);
+        writer.insert(targetViewPosition, pre);
+        mapper.bindElements(data.item, code);
+    };
+}
+/**
+ * A model-to-data view converter for the new line (`softBreak`) separator.
+ *
+ * Sample input:
+ *
+ * ```html
+ * <codeBlock ...>foo();<softBreak></softBreak>bar();</codeBlock>
+ * ```
+ *
+ * Sample output:
+ *
+ * ```html
+ * <pre><code ...>foo();\nbar();</code></pre>
+ * ```
+ *
+ * @returns Returns a conversion callback.
+ * @internal
+ */
+export function modelToDataViewSoftBreakInsertion(model) {
+    return (evt, data, conversionApi) => {
+        if (data.item.parent.name !== 'codeBlock') {
+            return;
+        }
+        const { writer, mapper, consumable } = conversionApi;
+        if (!consumable.consume(data.item, 'insert')) {
+            return;
+        }
+        const position = mapper.toViewPosition(model.createPositionBefore(data.item));
+        writer.insert(position, writer.createText('\n'));
+    };
+}
+/**
+ * A view-to-model converter for `<pre>` with the `<code>` HTML.
+ *
+ * Sample input:
+ *
+ * ```html
+ * <pre><code class="language-javascript">foo();bar();</code></pre>
+ * ```
+ *
+ * Sample output:
+ *
+ * ```html
+ * <codeBlock language="javascript">foo();bar();</codeBlock>
+ * ```
+ *
+ * @param languageDefs The normalized language configuration passed to the feature.
+ * @returns Returns a conversion callback.
+ * @internal
+ */
+export function dataViewToModelCodeBlockInsertion(editingView, languageDefs) {
+    // Language names associated with CSS classes:
+    //
+    //		{
+    //			'language-php': 'php',
+    //			'language-python': 'python',
+    //			js: 'javascript',
+    //			...
+    //		}
+    const classesToLanguages = getPropertyAssociation(languageDefs, 'class', 'language');
+    const defaultLanguageName = languageDefs[0].language;
+    return (evt, data, conversionApi) => {
+        const viewCodeElement = data.viewItem;
+        const viewPreElement = viewCodeElement.parent;
+        if (!viewPreElement || !viewPreElement.is('element', 'pre')) {
+            return;
+        }
+        // In case of nested code blocks we don't want to convert to another code block.
+        if (data.modelCursor.findAncestor('codeBlock')) {
+            return;
+        }
+        const { consumable, writer } = conversionApi;
+        if (!consumable.test(viewCodeElement, { name: true })) {
+            return;
+        }
+        const codeBlock = writer.createElement('codeBlock');
+        const viewChildClasses = [...viewCodeElement.getClassNames()];
+        // As we're to associate each class with a model language, a lack of class (empty class) can be
+        // also associated with a language if the language definition was configured so. Pushing an empty
+        // string to make sure the association will work.
+        if (!viewChildClasses.length) {
+            viewChildClasses.push('');
+        }
+        // Figure out if any of the <code> element's class names is a valid programming
+        // language class. If so, use it on the model element (becomes the language of the entire block).
+        for (const className of viewChildClasses) {
+            const language = classesToLanguages[className];
+            if (language) {
+                consumable.consume(viewCodeElement, { classes: [className] });
+                writer.setAttribute('language', language, codeBlock);
+                break;
+            }
+        }
+        // If no language value was set, use the default language from the config.
+        if (!codeBlock.hasAttribute('language')) {
+            writer.setAttribute('language', defaultLanguageName, codeBlock);
+        }
+        // Convert children before inserting the code block element
+        // to make sure that code block won't be splitted by any block.
+        conversionApi.convertChildren(viewCodeElement, codeBlock);
+        // Let's try to insert code block.
+        if (!conversionApi.safeInsert(codeBlock, data.modelCursor)) {
+            return;
+        }
+        consumable.consume(viewCodeElement, { name: true });
+        conversionApi.updateConversionResult(codeBlock, data);
+    };
+}
+/**
+ * A view-to-model converter for new line characters in `<pre>`.
+ *
+ * Sample input:
+ *
+ * ```html
+ * <pre><code class="language-javascript">foo();\nbar();</code></pre>
+ * ```
+ *
+ * Sample output:
+ *
+ * ```html
+ * <codeBlock language="javascript">foo();<softBreak></softBreak>bar();</codeBlock>
+ * ```
+ *
+ * @returns {Function} Returns a conversion callback.
+ * @internal
+ */
+export function dataViewToModelTextNewlinesInsertion() {
+    return (evt, data, { consumable, writer }) => {
+        let position = data.modelCursor;
+        // When node is already converted then do nothing.
+        if (!consumable.test(data.viewItem)) {
+            return;
+        }
+        // When not inside `codeBlock` then do nothing.
+        if (!position.findAncestor('codeBlock')) {
+            return;
+        }
+        consumable.consume(data.viewItem);
+        const text = data.viewItem.data;
+        const textLines = text.split('\n').map(data => writer.createText(data));
+        const lastLine = textLines[textLines.length - 1];
+        for (const node of textLines) {
+            writer.insert(node, position);
+            position = position.getShiftedBy(node.offsetSize);
+            if (node !== lastLine) {
+                const softBreak = writer.createElement('softBreak');
+                writer.insert(softBreak, position);
+                position = writer.createPositionAfter(softBreak);
+            }
+        }
+        data.modelRange = writer.createRange(data.modelCursor, position);
+        data.modelCursor = position;
+    };
+}
+/**
+ * A view-to-model converter that handles orphan text nodes (white spaces, new lines, etc.)
+ * that surround `<code>` inside `<pre>`.
+ *
+ * Sample input:
+ *
+ * ```html
+ * // White spaces
+ * <pre> <code>foo()</code> </pre>
+ *
+ * // White spaces
+ * <pre>      <code>foo()</code>      </pre>
+ *
+ * // White spaces
+ * <pre>			<code>foo()</code>			</pre>
+ *
+ * // New lines
+ * <pre>
+ * 	<code>foo()</code>
+ * </pre>
+ *
+ * // Redundant text
+ * <pre>ABC<code>foo()</code>DEF</pre>
+ * ```
+ *
+ * Unified output for each case:
+ *
+ * ```html
+ * <codeBlock language="plaintext">foo()</codeBlock>
+ * ```
+ *
+ * @returns Returns a conversion callback.
+ * @internal
+ */
+export function dataViewToModelOrphanNodeConsumer() {
+    return (evt, data, { consumable }) => {
+        const preElement = data.viewItem;
+        // Don't clean up nested pre elements. Their content should stay as it is, they are not upcasted
+        // to code blocks.
+        if (preElement.findAncestor('pre')) {
+            return;
+        }
+        const preChildren = Array.from(preElement.getChildren());
+        const childCodeElement = preChildren.find(node => node.is('element', 'code'));
+        // <code>-less <pre>. It will not upcast to code block in the model, skipping.
+        if (!childCodeElement) {
+            return;
+        }
+        for (const child of preChildren) {
+            if (child === childCodeElement || !child.is('$text')) {
+                continue;
+            }
+            // Consuming the orphan to remove it from the input data.
+            // Second argument in `consumable.consume` is discarded for text nodes.
+            consumable.consume(child, { name: true });
+        }
+    };
+}

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

@@ -5,7 +5,7 @@
 /**
  * @module code-block/indentcodeblockcommand
  */
-import { Command, type Editor } from '@ckeditor/ckeditor5-core';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The code block indentation increase command plugin.
  */

package/src/indentcodeblockcommand.js

@@ -0,0 +1,82 @@
+/**
+ * @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
+ */
+/**
+ * @module code-block/indentcodeblockcommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+import { getIndentOutdentPositions, isModelSelectionInCodeBlock } from './utils.js';
+/**
+ * The code block indentation increase command plugin.
+ */
+export class IndentCodeBlockCommand extends Command {
+    /**
+     * A sequence of characters added to 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 increased.
+     *
+     * @fires execute
+     */
+    execute() {
+        const editor = this.editor;
+        const model = editor.model;
+        model.change(writer => {
+            const positions = getIndentOutdentPositions(model);
+            // Indent all positions, for instance assuming the indent sequence is 4x space ("    "):
+            //
+            //		<codeBlock>^foo</codeBlock>        ->       <codeBlock>    foo</codeBlock>
+            //
+            //		<codeBlock>foo^bar</codeBlock>     ->       <codeBlock>foo    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 indentSequenceTextElement = writer.createText(this._indentSequence);
+                // Previously insertion was done by writer.insertText(). It was changed to insertContent() to enable
+                // integration of code block with track changes. It's the easiest way of integration because insertContent()
+                // 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.insertContent(indentSequenceTextElement, position);
+            }
+        });
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     */
+    _checkEnabled() {
+        if (!this._indentSequence) {
+            return false;
+        }
+        // Indent (forward) command is always enabled when there's any code block in the selection
+        // because you can always indent code lines.
+        return isModelSelectionInCodeBlock(this.editor.model.document.selection);
+    }
+}

package/src/index.js

@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+/**
+ * @module code-block
+ */
+export { CodeBlock } from './codeblock.js';
+export { CodeBlockEditing } from './codeblockediting.js';
+export { CodeBlockUI } from './codeblockui.js';
+export { CodeBlockCommand } from './codeblockcommand.js';
+export { IndentCodeBlockCommand } from './indentcodeblockcommand.js';
+export { OutdentCodeBlockCommand } from './outdentcodeblockcommand.js';
+export { modelToViewCodeBlockInsertion as _modelToViewCodeBlockInsertion, modelToDataViewSoftBreakInsertion as _modelToDataViewCodeBlockSoftBreakInsertion, dataViewToModelCodeBlockInsertion as _dataViewToModelCodeBlockInsertion, dataViewToModelTextNewlinesInsertion as _dataViewToModelCodeBlockTextNewlinesInsertion, dataViewToModelOrphanNodeConsumer as _dataViewToModelCodeBlockOrphanNodeConsumer } from './converters.js';
+export { getNormalizedAndLocalizedLanguageDefinitions as _getNormalizedAndLocalizedCodeBlockLanguageDefinitions, getPropertyAssociation as _getCodeBlockPropertyAssociation, getLeadingWhiteSpaces as _getCodeBlockLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment as _rawCodeBlockSnippetTextToViewDocumentFragment, getIndentOutdentPositions as _getCodeBlockIndentOutdentPositions, isModelSelectionInCodeBlock as _isModelSelectionInCodeBlock, canBeCodeBlock as _canBeCodeBlock, getCodeBlockAriaAnnouncement as _getCodeBlockAriaAnnouncement, getTextNodeAtLineStart as _getCodeBlockTextNodeAtLineStart } from './utils.js';
+import './augmentation.js';

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

@@ -2,7 +2,7 @@
  * @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, type Editor } from '@ckeditor/ckeditor5-core';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
 /**
  * The code block indentation decrease command plugin.
  */