@ckeditor/ckeditor5-code-block 40.0.0 → 40.2.0

package/src/codeblockcommand.js

@@ -1,138 +1,138 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { Command } from 'ckeditor5/src/core';
-import { first } from 'ckeditor5/src/utils';
-import { getNormalizedAndLocalizedLanguageDefinitions, canBeCodeBlock } from './utils';
-/**
- * The code block command plugin.
- */
-export default class CodeBlockCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._lastLanguage = null;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        this.value = this._getValue();
-        this.isEnabled = this._checkEnabled();
-    }
-    /**
-     * Executes the command. When the command {@link #value is on}, all topmost code blocks within
-     * the selection will be removed. If it is off, all selected blocks will be flattened and
-     * wrapped by a code block.
-     *
-     * @fires execute
-     * @param options Command options.
-     * @param options.language The code block language.
-     * @param options.forceValue If set, it will force the command behavior. If `true`, the command will apply a code block,
-     * otherwise the command will remove the code block. If not set, the command will act basing on its current value.
-     * @param options.usePreviousLanguageChoice If set on `true` and the `options.language` is not specified, the command
-     * will apply the previous language (if the command was already executed) when inserting the `codeBlock` element.
-     */
-    execute(options = {}) {
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
-        const normalizedLanguagesDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
-        const firstLanguageInConfig = normalizedLanguagesDefs[0];
-        const blocks = Array.from(selection.getSelectedBlocks());
-        const value = options.forceValue == undefined ? !this.value : options.forceValue;
-        const language = getLanguage(options, this._lastLanguage, firstLanguageInConfig.language);
-        model.change(writer => {
-            if (value) {
-                this._applyCodeBlock(writer, blocks, language);
-            }
-            else {
-                this._removeCodeBlock(writer, blocks);
-            }
-        });
-    }
-    /**
-     * Checks the command's {@link #value}.
-     *
-     * @returns The current value.
-     */
-    _getValue() {
-        const selection = this.editor.model.document.selection;
-        const firstBlock = first(selection.getSelectedBlocks());
-        const isCodeBlock = !!(firstBlock && firstBlock.is('element', 'codeBlock'));
-        return isCodeBlock ? firstBlock.getAttribute('language') : false;
-    }
-    /**
-     * Checks whether the command can be enabled in the current context.
-     *
-     * @returns Whether the command should be enabled.
-     */
-    _checkEnabled() {
-        if (this.value) {
-            return true;
-        }
-        const selection = this.editor.model.document.selection;
-        const schema = this.editor.model.schema;
-        const firstBlock = first(selection.getSelectedBlocks());
-        if (!firstBlock) {
-            return false;
-        }
-        return canBeCodeBlock(schema, firstBlock);
-    }
-    _applyCodeBlock(writer, blocks, language) {
-        this._lastLanguage = language;
-        const schema = this.editor.model.schema;
-        const allowedBlocks = blocks.filter(block => canBeCodeBlock(schema, block));
-        for (const block of allowedBlocks) {
-            writer.rename(block, 'codeBlock');
-            writer.setAttribute('language', language, block);
-            schema.removeDisallowedAttributes([block], writer);
-            // Remove children of the  `codeBlock` element that are not allowed. See #9567.
-            Array.from(block.getChildren())
-                .filter(child => !schema.checkChild(block, child))
-                .forEach(child => writer.remove(child));
-        }
-        allowedBlocks.reverse().forEach((currentBlock, i) => {
-            const nextBlock = allowedBlocks[i + 1];
-            if (currentBlock.previousSibling === nextBlock) {
-                writer.appendElement('softBreak', nextBlock);
-                writer.merge(writer.createPositionBefore(currentBlock));
-            }
-        });
-    }
-    _removeCodeBlock(writer, blocks) {
-        const codeBlocks = blocks.filter(block => block.is('element', 'codeBlock'));
-        for (const block of codeBlocks) {
-            const range = writer.createRangeOn(block);
-            for (const item of Array.from(range.getItems()).reverse()) {
-                if (item.is('element', 'softBreak') && item.parent.is('element', 'codeBlock')) {
-                    const { position } = writer.split(writer.createPositionBefore(item));
-                    const elementAfter = position.nodeAfter;
-                    writer.rename(elementAfter, 'paragraph');
-                    writer.removeAttribute('language', elementAfter);
-                    writer.remove(item);
-                }
-            }
-            writer.rename(block, 'paragraph');
-            writer.removeAttribute('language', block);
-        }
-    }
-}
-/**
- * Picks the language for the new code block. If any language is passed as an option,
- * it will be returned. Else, if option usePreviousLanguageChoice is true and some
- * code block was already created (lastLanguage is not null) then previously used
- * language will be returned. If not, it will return default language.
- */
-function getLanguage(options, lastLanguage, defaultLanguage) {
-    if (options.language) {
-        return options.language;
-    }
-    if (options.usePreviousLanguageChoice && lastLanguage) {
-        return lastLanguage;
-    }
-    return defaultLanguage;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+import { getNormalizedAndLocalizedLanguageDefinitions, canBeCodeBlock } from './utils';
+/**
+ * The code block command plugin.
+ */
+export default class CodeBlockCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._lastLanguage = null;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        this.value = this._getValue();
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+     * Executes the command. When the command {@link #value is on}, all topmost code blocks within
+     * the selection will be removed. If it is off, all selected blocks will be flattened and
+     * wrapped by a code block.
+     *
+     * @fires execute
+     * @param options Command options.
+     * @param options.language The code block language.
+     * @param options.forceValue If set, it will force the command behavior. If `true`, the command will apply a code block,
+     * otherwise the command will remove the code block. If not set, the command will act basing on its current value.
+     * @param options.usePreviousLanguageChoice If set on `true` and the `options.language` is not specified, the command
+     * will apply the previous language (if the command was already executed) when inserting the `codeBlock` element.
+     */
+    execute(options = {}) {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        const normalizedLanguagesDefs = getNormalizedAndLocalizedLanguageDefinitions(editor);
+        const firstLanguageInConfig = normalizedLanguagesDefs[0];
+        const blocks = Array.from(selection.getSelectedBlocks());
+        const value = options.forceValue == undefined ? !this.value : options.forceValue;
+        const language = getLanguage(options, this._lastLanguage, firstLanguageInConfig.language);
+        model.change(writer => {
+            if (value) {
+                this._applyCodeBlock(writer, blocks, language);
+            }
+            else {
+                this._removeCodeBlock(writer, blocks);
+            }
+        });
+    }
+    /**
+     * Checks the command's {@link #value}.
+     *
+     * @returns The current value.
+     */
+    _getValue() {
+        const selection = this.editor.model.document.selection;
+        const firstBlock = first(selection.getSelectedBlocks());
+        const isCodeBlock = !!(firstBlock && firstBlock.is('element', 'codeBlock'));
+        return isCodeBlock ? firstBlock.getAttribute('language') : false;
+    }
+    /**
+     * Checks whether the command can be enabled in the current context.
+     *
+     * @returns Whether the command should be enabled.
+     */
+    _checkEnabled() {
+        if (this.value) {
+            return true;
+        }
+        const selection = this.editor.model.document.selection;
+        const schema = this.editor.model.schema;
+        const firstBlock = first(selection.getSelectedBlocks());
+        if (!firstBlock) {
+            return false;
+        }
+        return canBeCodeBlock(schema, firstBlock);
+    }
+    _applyCodeBlock(writer, blocks, language) {
+        this._lastLanguage = language;
+        const schema = this.editor.model.schema;
+        const allowedBlocks = blocks.filter(block => canBeCodeBlock(schema, block));
+        for (const block of allowedBlocks) {
+            writer.rename(block, 'codeBlock');
+            writer.setAttribute('language', language, block);
+            schema.removeDisallowedAttributes([block], writer);
+            // Remove children of the  `codeBlock` element that are not allowed. See #9567.
+            Array.from(block.getChildren())
+                .filter(child => !schema.checkChild(block, child))
+                .forEach(child => writer.remove(child));
+        }
+        allowedBlocks.reverse().forEach((currentBlock, i) => {
+            const nextBlock = allowedBlocks[i + 1];
+            if (currentBlock.previousSibling === nextBlock) {
+                writer.appendElement('softBreak', nextBlock);
+                writer.merge(writer.createPositionBefore(currentBlock));
+            }
+        });
+    }
+    _removeCodeBlock(writer, blocks) {
+        const codeBlocks = blocks.filter(block => block.is('element', 'codeBlock'));
+        for (const block of codeBlocks) {
+            const range = writer.createRangeOn(block);
+            for (const item of Array.from(range.getItems()).reverse()) {
+                if (item.is('element', 'softBreak') && item.parent.is('element', 'codeBlock')) {
+                    const { position } = writer.split(writer.createPositionBefore(item));
+                    const elementAfter = position.nodeAfter;
+                    writer.rename(elementAfter, 'paragraph');
+                    writer.removeAttribute('language', elementAfter);
+                    writer.remove(item);
+                }
+            }
+            writer.rename(block, 'paragraph');
+            writer.removeAttribute('language', block);
+        }
+    }
+}
+/**
+ * Picks the language for the new code block. If any language is passed as an option,
+ * it will be returned. Else, if option usePreviousLanguageChoice is true and some
+ * code block was already created (lastLanguage is not null) then previously used
+ * language will be returned. If not, it will return default language.
+ */
+function getLanguage(options, lastLanguage, defaultLanguage) {
+    if (options.language) {
+        return options.language;
+    }
+    if (options.usePreviousLanguageChoice && lastLanguage) {
+        return lastLanguage;
+    }
+    return defaultLanguage;
+}

package/src/codeblockconfig.d.ts

@@ -1,146 +1,146 @@
-/**
- * @license Copyright (c) 2003-2023, 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/codeblockconfig
- */
-/**
- * The configuration of the {@link module:code-block/codeblock~CodeBlock code block feature}.
- *
- * ```ts
- * ClassicEditor
- * 	.create( editorElement, {
- * 		codeBlock:  ... // The code block feature configuration.
- * 	} )
- * 	.then( ... )
- * 	.catch( ... );
- * ```
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
-export interface CodeBlockConfig {
-    /**
-     * The list of code languages available in the user interface to choose for a particular code block.
-     *
-     * The language of the code block is represented as a CSS class (by default prefixed by "language-") set on the
-     * `<code>` element, both when editing and in the editor data. The CSS class associated with the language
-     * can be used by third–party code syntax highlighters to detect and apply the correct highlighting.
-     *
-     * For instance, this language configuration:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( document.querySelector( '#editor' ), {
-     * 		codeBlock: {
-     * 			languages: [
-     * 				// ...
-     * 				{ language: 'javascript', label: 'JavaScript' },
-     * 				// ...
-     * 			]
-     * 		}
-     * 	} )
-     * 	.then( ... )
-     * 	.catch( ... );
-     * ```
-     *
-     * will result in the following structure of JavaScript code blocks in the editor editing and data:
-     *
-     * ```html
-     * <pre><code class="language-javascript">window.alert( 'Hello world!' )</code></pre>
-     * ```
-     *
-     * You can customize the CSS class by specifying an optional `class` property in the language definition.
-     * You can set **multiple classes** but **only the first one** will be used as defining language class:
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( document.querySelector( '#editor' ), {
-     * 		codeBlock: {
-     * 			languages: [
-     * 				// Do not render the CSS class for the plain text code blocks.
-     * 				{ language: 'plaintext', label: 'Plain text', class: '' },
-     *
-     * 				// Use the "php-code" class for PHP code blocks.
-     * 				{ language: 'php', label: 'PHP', class: 'php-code' },
-     *
-     * 				// Use the "js" class for JavaScript code blocks.
-     * 				// Note that only the first ("js") class will determine the language of the block when loading data.
-     * 				{ language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },
-     *
-     * 				// Python code blocks will have the default "language-python" CSS class.
-     * 				{ language: 'python', label: 'Python' }
-     * 			]
-     * 		}
-     * } )
-     * .then( ... )
-     * .catch( ... );
-     * ```
-     *
-     * The default value of the language configuration is as follows:
-     *
-     * ```ts
-     * languages: [
-     * 	{ language: 'plaintext', label: 'Plain text' }, // The default language.
-     * 	{ language: 'c', label: 'C' },
-     * 	{ language: 'cs', label: 'C#' },
-     * 	{ language: 'cpp', label: 'C++' },
-     * 	{ language: 'css', label: 'CSS' },
-     * 	{ language: 'diff', label: 'Diff' },
-     * 	{ language: 'html', label: 'HTML' },
-     * 	{ language: 'java', label: 'Java' },
-     * 	{ language: 'javascript', label: 'JavaScript' },
-     * 	{ language: 'php', label: 'PHP' },
-     * 	{ language: 'python', label: 'Python' },
-     * 	{ language: 'ruby', label: 'Ruby' },
-     * 	{ language: 'typescript', label: 'TypeScript' },
-     * 	{ language: 'xml', label: 'XML' }
-     * ]
-     * ```
-     *
-     * **Note**: The first language defined in the configuration is considered the default one. This means it will be
-     * applied to code blocks loaded from the data that have no CSS `class` specified (or no matching `class` in the configuration).
-     * It will also be used when creating new code blocks using the main UI button. By default it is "Plain text".
-     */
-    languages?: Array<CodeBlockLanguageDefinition>;
-    /**
-     * A sequence of characters inserted or removed from the code block lines when its indentation
-     * is changed by the user, for instance, using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys.
-     *
-     * The default value is a single tab character ("	", `\u0009` in Unicode).
-     *
-     * This configuration is used by `indentCodeBlock` and `outdentCodeBlock` commands (instances of
-     * {@link module:code-block/indentcodeblockcommand~IndentCodeBlockCommand}).
-     *
-     * **Note**: Setting this configuration to `false` will disable the code block indentation commands
-     * and associated keystrokes.
-     *
-     */
-    indentSequence?: string;
-}
-/**
- * The code block language descriptor. See {@link module:code-block/codeblockconfig~CodeBlockConfig#languages} to learn more.
- *
- * ```ts
- * {
- * 	language: 'javascript',
- * 	label: 'JavaScript'
- * }
- * ```
- */
-export interface CodeBlockLanguageDefinition {
-    /**
-     * The name of the language that will be stored in the model attribute. Also, when `class`
-     * is not specified, it will be used to create the CSS class associated with the language (prefixed by "language-").
-     */
-    language: string;
-    /**
-     * The human–readable label associated with the language and displayed in the UI.
-     */
-    label: string;
-    /**
-     * The CSS class associated with the language. When not specified the `language`
-     * property is used to create a class prefixed by "language-".
-     */
-    class?: string;
-}
+/**
+ * @license Copyright (c) 2003-2023, 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/codeblockconfig
+ */
+/**
+ * The configuration of the {@link module:code-block/codeblock~CodeBlock code block feature}.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		codeBlock:  ... // The code block feature configuration.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface CodeBlockConfig {
+    /**
+     * The list of code languages available in the user interface to choose for a particular code block.
+     *
+     * The language of the code block is represented as a CSS class (by default prefixed by "language-") set on the
+     * `<code>` element, both when editing and in the editor data. The CSS class associated with the language
+     * can be used by third–party code syntax highlighters to detect and apply the correct highlighting.
+     *
+     * For instance, this language configuration:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( document.querySelector( '#editor' ), {
+     * 		codeBlock: {
+     * 			languages: [
+     * 				// ...
+     * 				{ language: 'javascript', label: 'JavaScript' },
+     * 				// ...
+     * 			]
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * will result in the following structure of JavaScript code blocks in the editor editing and data:
+     *
+     * ```html
+     * <pre><code class="language-javascript">window.alert( 'Hello world!' )</code></pre>
+     * ```
+     *
+     * You can customize the CSS class by specifying an optional `class` property in the language definition.
+     * You can set **multiple classes** but **only the first one** will be used as defining language class:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( document.querySelector( '#editor' ), {
+     * 		codeBlock: {
+     * 			languages: [
+     * 				// Do not render the CSS class for the plain text code blocks.
+     * 				{ language: 'plaintext', label: 'Plain text', class: '' },
+     *
+     * 				// Use the "php-code" class for PHP code blocks.
+     * 				{ language: 'php', label: 'PHP', class: 'php-code' },
+     *
+     * 				// Use the "js" class for JavaScript code blocks.
+     * 				// Note that only the first ("js") class will determine the language of the block when loading data.
+     * 				{ language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },
+     *
+     * 				// Python code blocks will have the default "language-python" CSS class.
+     * 				{ language: 'python', label: 'Python' }
+     * 			]
+     * 		}
+     * } )
+     * .then( ... )
+     * .catch( ... );
+     * ```
+     *
+     * The default value of the language configuration is as follows:
+     *
+     * ```ts
+     * languages: [
+     * 	{ language: 'plaintext', label: 'Plain text' }, // The default language.
+     * 	{ language: 'c', label: 'C' },
+     * 	{ language: 'cs', label: 'C#' },
+     * 	{ language: 'cpp', label: 'C++' },
+     * 	{ language: 'css', label: 'CSS' },
+     * 	{ language: 'diff', label: 'Diff' },
+     * 	{ language: 'html', label: 'HTML' },
+     * 	{ language: 'java', label: 'Java' },
+     * 	{ language: 'javascript', label: 'JavaScript' },
+     * 	{ language: 'php', label: 'PHP' },
+     * 	{ language: 'python', label: 'Python' },
+     * 	{ language: 'ruby', label: 'Ruby' },
+     * 	{ language: 'typescript', label: 'TypeScript' },
+     * 	{ language: 'xml', label: 'XML' }
+     * ]
+     * ```
+     *
+     * **Note**: The first language defined in the configuration is considered the default one. This means it will be
+     * applied to code blocks loaded from the data that have no CSS `class` specified (or no matching `class` in the configuration).
+     * It will also be used when creating new code blocks using the main UI button. By default it is "Plain text".
+     */
+    languages?: Array<CodeBlockLanguageDefinition>;
+    /**
+     * A sequence of characters inserted or removed from the code block lines when its indentation
+     * is changed by the user, for instance, using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keys.
+     *
+     * The default value is a single tab character ("	", `\u0009` in Unicode).
+     *
+     * This configuration is used by `indentCodeBlock` and `outdentCodeBlock` commands (instances of
+     * {@link module:code-block/indentcodeblockcommand~IndentCodeBlockCommand}).
+     *
+     * **Note**: Setting this configuration to `false` will disable the code block indentation commands
+     * and associated keystrokes.
+     *
+     */
+    indentSequence?: string;
+}
+/**
+ * The code block language descriptor. See {@link module:code-block/codeblockconfig~CodeBlockConfig#languages} to learn more.
+ *
+ * ```ts
+ * {
+ * 	language: 'javascript',
+ * 	label: 'JavaScript'
+ * }
+ * ```
+ */
+export interface CodeBlockLanguageDefinition {
+    /**
+     * The name of the language that will be stored in the model attribute. Also, when `class`
+     * is not specified, it will be used to create the CSS class associated with the language (prefixed by "language-").
+     */
+    language: string;
+    /**
+     * The human–readable label associated with the language and displayed in the UI.
+     */
+    label: string;
+    /**
+     * The CSS class associated with the language. When not specified the `language`
+     * property is used to create a class prefixed by "language-".
+     */
+    class?: string;
+}

package/src/codeblockconfig.js

@@ -1,5 +1,5 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-export {};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/codeblockediting.d.ts

@@ -1,36 +1,36 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-import { ShiftEnter } from 'ckeditor5/src/enter';
-/**
- * The editing part of the code block feature.
- *
- * Introduces the `'codeBlock'` command and the `'codeBlock'` model element.
- */
-export default class CodeBlockEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "CodeBlockEditing";
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof ShiftEnter];
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * @inheritDoc
-     */
-    afterInit(): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+import { ShiftEnter } from 'ckeditor5/src/enter';
+/**
+ * The editing part of the code block feature.
+ *
+ * Introduces the `'codeBlock'` command and the `'codeBlock'` model element.
+ */
+export default class CodeBlockEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "CodeBlockEditing";
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ShiftEnter];
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}