@ckeditor/ckeditor5-style 0.0.0-internal-20241017.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ckeditor/ckeditor5-style",
+  "version": "0.0.0-internal-20241017.0",
+  "description": "Style feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
+  ],
+  "type": "module",
+  "main": "src/index.js",
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "0.0.0-internal-20241017.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-internal-20241017.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-internal-20241017.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-internal-20241017.0",
+    "ckeditor5": "0.0.0-internal-20241017.0",
+    "lodash-es": "4.17.21"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com/ckeditor-5",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-style"
+  },
+  "files": [
+    "dist",
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "build",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "types": "src/index.d.ts"
+}

package/src/augmentation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+import type { StyleConfig, StyleCommand, Style, StyleEditing, StyleUI, StyleUtils } from './index.js';
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [Style.pluginName]: Style;
+        [StyleEditing.pluginName]: StyleEditing;
+        [StyleUI.pluginName]: StyleUI;
+        [StyleUtils.pluginName]: StyleUtils;
+    }
+    interface CommandsMap {
+        style: StyleCommand;
+    }
+    interface EditorConfig {
+        /**
+         * The configuration of the {@link module:style/style~Style} feature.
+         *
+         * Read more in {@link module:style/styleconfig~StyleConfig}.
+         */
+        style?: StyleConfig;
+    }
+}

package/src/augmentation.js

@@ -0,0 +1,5 @@
+/**
+ * @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 {};

package/src/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @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 style
+ */
+export { default as Style } from './style.js';
+export { default as StyleEditing } from './styleediting.js';
+export { default as StyleUI } from './styleui.js';
+export { default as StyleUtils } from './styleutils.js';
+export type { StyleConfig, StyleDefinition } from './styleconfig.js';
+export type { default as StyleCommand } from './stylecommand.js';
+import './augmentation.js';

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @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 style
+ */
+export { default as Style } from './style.js';
+export { default as StyleEditing } from './styleediting.js';
+export { default as StyleUI } from './styleui.js';
+export { default as StyleUtils } from './styleutils.js';
+import './augmentation.js';

package/src/integrations/link.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 style/integrations/link
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import StyleUtils from '../styleutils.js';
+export default class LinkStyleSupport extends Plugin {
+    private _styleUtils;
+    private _htmlSupport;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "LinkStyleSupport";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof StyleUtils, "GeneralHtmlSupport"];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Verifies if the given style is applicable to the provided document selection.
+     */
+    private _isStyleEnabled;
+    /**
+     * Returns true if the given style is applied to the specified document selection.
+     */
+    private _isStyleActive;
+    /**
+     * Returns a selectable that given style should be applied to.
+     */
+    private _getAffectedSelectable;
+}

package/src/integrations/link.js

@@ -0,0 +1,162 @@
+/**
+ * @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 style/integrations/link
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { findAttributeRange, findAttributeRangeBound } from 'ckeditor5/src/typing.js';
+import StyleUtils from '../styleutils.js';
+export default class LinkStyleSupport extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'LinkStyleSupport';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [StyleUtils, 'GeneralHtmlSupport'];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        if (!editor.plugins.has('LinkEditing')) {
+            return;
+        }
+        this._styleUtils = editor.plugins.get(StyleUtils);
+        this._htmlSupport = this.editor.plugins.get('GeneralHtmlSupport');
+        this.listenTo(this._styleUtils, 'isStyleEnabledForInlineSelection', (evt, [definition, selection]) => {
+            if (definition.element == 'a') {
+                evt.return = this._isStyleEnabled(definition, selection);
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'isStyleActiveForInlineSelection', (evt, [definition, selection]) => {
+            if (definition.element == 'a') {
+                evt.return = this._isStyleActive(definition, selection);
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'getAffectedInlineSelectable', (evt, [definition, selection]) => {
+            if (definition.element != 'a') {
+                return;
+            }
+            const selectable = this._getAffectedSelectable(definition, selection);
+            if (selectable) {
+                evt.return = selectable;
+                evt.stop();
+            }
+        }, { priority: 'high' });
+    }
+    /**
+     * Verifies if the given style is applicable to the provided document selection.
+     */
+    _isStyleEnabled(definition, selection) {
+        const model = this.editor.model;
+        // Handle collapsed selection.
+        if (selection.isCollapsed) {
+            return selection.hasAttribute('linkHref');
+        }
+        // Non-collapsed selection.
+        for (const range of selection.getRanges()) {
+            for (const item of range.getItems()) {
+                if ((item.is('$textProxy') || model.schema.isInline(item)) && item.hasAttribute('linkHref')) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Returns true if the given style is applied to the specified document selection.
+     */
+    _isStyleActive(definition, selection) {
+        const model = this.editor.model;
+        const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
+        // Handle collapsed selection.
+        if (selection.isCollapsed) {
+            if (selection.hasAttribute('linkHref')) {
+                const ghsAttributeValue = selection.getAttribute(attributeName);
+                if (this._styleUtils.hasAllClasses(ghsAttributeValue, definition.classes)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        // Non-collapsed selection.
+        for (const range of selection.getRanges()) {
+            for (const item of range.getItems()) {
+                if ((item.is('$textProxy') || model.schema.isInline(item)) && item.hasAttribute('linkHref')) {
+                    const ghsAttributeValue = item.getAttribute(attributeName);
+                    return this._styleUtils.hasAllClasses(ghsAttributeValue, definition.classes);
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Returns a selectable that given style should be applied to.
+     */
+    _getAffectedSelectable(definition, selection) {
+        const model = this.editor.model;
+        // Handle collapsed selection.
+        if (selection.isCollapsed) {
+            const linkHref = selection.getAttribute('linkHref');
+            return findAttributeRange(selection.getFirstPosition(), 'linkHref', linkHref, model);
+        }
+        // Non-collapsed selection.
+        const ranges = [];
+        for (const range of selection.getRanges()) {
+            // First expand range to include the whole link.
+            const expandedRange = model.createRange(expandAttributePosition(range.start, 'linkHref', true, model), expandAttributePosition(range.end, 'linkHref', false, model));
+            // Pick only ranges on links.
+            for (const item of expandedRange.getItems()) {
+                if ((item.is('$textProxy') || model.schema.isInline(item)) && item.hasAttribute('linkHref')) {
+                    ranges.push(this.editor.model.createRangeOn(item));
+                }
+            }
+        }
+        // Make sure that we have a continuous range on a link
+        // (not split between text nodes with mixed attributes like bold etc.)
+        return normalizeRanges(ranges);
+    }
+}
+/**
+ * Walks forward or backward (depends on the `lookBack` flag), node by node, as long as they have the same attribute value
+ * and returns a position just before or after (depends on the `lookBack` flag) the last matched node.
+ */
+function expandAttributePosition(position, attributeName, lookBack, model) {
+    const referenceNode = position.textNode || (lookBack ? position.nodeAfter : position.nodeBefore);
+    if (!referenceNode || !referenceNode.hasAttribute(attributeName)) {
+        return position;
+    }
+    const attributeValue = referenceNode.getAttribute(attributeName);
+    return findAttributeRangeBound(position, attributeName, attributeValue, lookBack, model);
+}
+/**
+ * Normalizes list of ranges by joining intersecting or "touching" ranges.
+ *
+ * Note: It assumes that ranges are sorted.
+ */
+function normalizeRanges(ranges) {
+    for (let i = 1; i < ranges.length; i++) {
+        const joinedRange = ranges[i - 1].getJoined(ranges[i]);
+        if (joinedRange) {
+            // Replace the ranges on the list with the new joined range.
+            ranges.splice(--i, 2, joinedRange);
+        }
+    }
+    return ranges;
+}

package/src/integrations/list.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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 style/integrations/list
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import StyleUtils from '../styleutils.js';
+export default class ListStyleSupport extends Plugin {
+    private _listUtils;
+    private _styleUtils;
+    private _htmlSupport;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListStyleSupport";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof StyleUtils, "GeneralHtmlSupport"];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Verifies if the given style is applicable to the provided block element.
+     */
+    private _isStyleEnabledForBlock;
+    /**
+     * Returns true if the given style is applied to the specified block element.
+     */
+    private _isStyleActiveForBlock;
+    /**
+     * Returns an array of block elements that style should be applied to.
+     */
+    private _getAffectedBlocks;
+    /**
+     * Returns a view template definition for the style preview.
+     */
+    private _getStylePreview;
+}

package/src/integrations/list.js

@@ -0,0 +1,148 @@
+/**
+ * @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 style/integrations/list
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import StyleUtils from '../styleutils.js';
+export default class ListStyleSupport extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListStyleSupport';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [StyleUtils, 'GeneralHtmlSupport'];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        if (!editor.plugins.has('ListEditing')) {
+            return;
+        }
+        this._styleUtils = editor.plugins.get(StyleUtils);
+        this._listUtils = this.editor.plugins.get('ListUtils');
+        this._htmlSupport = this.editor.plugins.get('GeneralHtmlSupport');
+        this.listenTo(this._styleUtils, 'isStyleEnabledForBlock', (evt, [definition, block]) => {
+            if (this._isStyleEnabledForBlock(definition, block)) {
+                evt.return = true;
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'isStyleActiveForBlock', (evt, [definition, block]) => {
+            if (this._isStyleActiveForBlock(definition, block)) {
+                evt.return = true;
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'getAffectedBlocks', (evt, [definition, block]) => {
+            const blocks = this._getAffectedBlocks(definition, block);
+            if (blocks) {
+                evt.return = blocks;
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'getStylePreview', (evt, [definition, children]) => {
+            const templateDefinition = this._getStylePreview(definition, children);
+            if (templateDefinition) {
+                evt.return = templateDefinition;
+                evt.stop();
+            }
+        }, { priority: 'high' });
+    }
+    /**
+     * Verifies if the given style is applicable to the provided block element.
+     */
+    _isStyleEnabledForBlock(definition, block) {
+        const model = this.editor.model;
+        if (!['ol', 'ul', 'li'].includes(definition.element)) {
+            return false;
+        }
+        if (!this._listUtils.isListItemBlock(block)) {
+            return false;
+        }
+        const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
+        if (definition.element == 'ol' || definition.element == 'ul') {
+            if (!model.schema.checkAttribute(block, attributeName)) {
+                return false;
+            }
+            const isNumbered = this._listUtils.isNumberedListType(block.getAttribute('listType'));
+            const viewElementName = isNumbered ? 'ol' : 'ul';
+            return definition.element == viewElementName;
+        }
+        else {
+            return model.schema.checkAttribute(block, attributeName);
+        }
+    }
+    /**
+     * Returns true if the given style is applied to the specified block element.
+     */
+    _isStyleActiveForBlock(definition, block) {
+        const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
+        const ghsAttributeValue = block.getAttribute(attributeName);
+        return this._styleUtils.hasAllClasses(ghsAttributeValue, definition.classes);
+    }
+    /**
+     * Returns an array of block elements that style should be applied to.
+     */
+    _getAffectedBlocks(definition, block) {
+        if (!this._isStyleEnabledForBlock(definition, block)) {
+            return null;
+        }
+        if (definition.element == 'li') {
+            return this._listUtils.expandListBlocksToCompleteItems(block, { withNested: false });
+        }
+        else {
+            return this._listUtils.expandListBlocksToCompleteList(block);
+        }
+    }
+    /**
+     * Returns a view template definition for the style preview.
+     */
+    _getStylePreview(definition, children) {
+        const { element, classes } = definition;
+        if (element == 'ol' || element == 'ul') {
+            return {
+                tag: element,
+                attributes: {
+                    class: classes
+                },
+                children: [
+                    {
+                        tag: 'li',
+                        children
+                    }
+                ]
+            };
+        }
+        else if (element == 'li') {
+            return {
+                tag: 'ol',
+                children: [
+                    {
+                        tag: element,
+                        attributes: {
+                            class: classes
+                        },
+                        children
+                    }
+                ]
+            };
+        }
+        return null;
+    }
+}

package/src/integrations/table.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @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 style/integrations/table
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import StyleUtils from '../styleutils.js';
+export default class TableStyleSupport extends Plugin {
+    private _tableUtils;
+    private _styleUtils;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "TableStyleSupport";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof StyleUtils];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Checks if this plugin's custom logic should be applied for defintion-block pair.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block Block element to check if should be styled.
+     * @returns True if the defintion-block pair meet the plugin criteria, false otherwise.
+     */
+    private _isApplicable;
+    /**
+     * Checks if the style definition should be applied to selected block.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block Block element to check if should be styled.
+     * @returns True if the block should be style with the style description, false otherwise.
+     */
+    private _isStyleEnabledForBlock;
+    /**
+     * Gets all blocks that the style should be applied to.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block A block element from selection.
+     * @returns An array with the block that was passed as an argument if meets the criteria, null otherwise.
+     */
+    private _getAffectedBlocks;
+}

package/src/integrations/table.js

@@ -0,0 +1,121 @@
+/**
+ * @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 style/integrations/table
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import StyleUtils from '../styleutils.js';
+export default class TableStyleSupport extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TableStyleSupport';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [StyleUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        if (!editor.plugins.has('TableEditing')) {
+            return;
+        }
+        this._styleUtils = editor.plugins.get(StyleUtils);
+        this._tableUtils = this.editor.plugins.get('TableUtils');
+        this.listenTo(this._styleUtils, 'isStyleEnabledForBlock', (evt, [definition, block]) => {
+            if (this._isApplicable(definition, block)) {
+                evt.return = this._isStyleEnabledForBlock(definition, block);
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'getAffectedBlocks', (evt, [definition, block]) => {
+            if (this._isApplicable(definition, block)) {
+                evt.return = this._getAffectedBlocks(definition, block);
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        this.listenTo(this._styleUtils, 'configureGHSDataFilter', (evt, [{ block }]) => {
+            const ghsDataFilter = this.editor.plugins.get('DataFilter');
+            ghsDataFilter.loadAllowedConfig(block
+                .filter(definition => definition.element == 'figcaption')
+                .map(definition => ({ name: 'caption', classes: definition.classes })));
+        });
+    }
+    /**
+     * Checks if this plugin's custom logic should be applied for defintion-block pair.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block Block element to check if should be styled.
+     * @returns True if the defintion-block pair meet the plugin criteria, false otherwise.
+     */
+    _isApplicable(definition, block) {
+        if (['td', 'th'].includes(definition.element)) {
+            return block.name == 'tableCell';
+        }
+        if (['thead', 'tbody'].includes(definition.element)) {
+            return block.name == 'table';
+        }
+        return false;
+    }
+    /**
+     * Checks if the style definition should be applied to selected block.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block Block element to check if should be styled.
+     * @returns True if the block should be style with the style description, false otherwise.
+     */
+    _isStyleEnabledForBlock(definition, block) {
+        if (['td', 'th'].includes(definition.element)) {
+            const location = this._tableUtils.getCellLocation(block);
+            const tableRow = block.parent;
+            const table = tableRow.parent;
+            const headingRows = table.getAttribute('headingRows') || 0;
+            const headingColumns = table.getAttribute('headingColumns') || 0;
+            const isHeadingCell = location.row < headingRows || location.column < headingColumns;
+            if (definition.element == 'th') {
+                return isHeadingCell;
+            }
+            else {
+                return !isHeadingCell;
+            }
+        }
+        if (['thead', 'tbody'].includes(definition.element)) {
+            const headingRows = block.getAttribute('headingRows') || 0;
+            if (definition.element == 'thead') {
+                return headingRows > 0;
+            }
+            else {
+                return headingRows < this._tableUtils.getRows(block);
+            }
+        }
+        /* istanbul ignore next -- @preserve */
+        return false;
+    }
+    /**
+     * Gets all blocks that the style should be applied to.
+     *
+     * @param definition Style definition that is being considered.
+     * @param block A block element from selection.
+     * @returns An array with the block that was passed as an argument if meets the criteria, null otherwise.
+     */
+    _getAffectedBlocks(definition, block) {
+        if (!this._isStyleEnabledForBlock(definition, block)) {
+            return null;
+        }
+        return [block];
+    }
+}