@ckeditor/ckeditor5-language 0.0.0-internal-20241017.0

package/src/textpartlanguageui.js

@@ -0,0 +1,167 @@
+/**
+ * @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 language/textpartlanguageui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { addListToDropdown, createDropdown, ListSeparatorView, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView, ViewModel } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import { stringifyLanguageAttribute } from './utils.js';
+/**
+ * The text part language UI plugin.
+ *
+ * It introduces the `'language'` dropdown.
+ */
+export default class TextPartLanguageUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TextPartLanguageUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const defaultTitle = t('Choose language');
+        const accessibleLabel = t('Language');
+        // Register UI component.
+        editor.ui.componentFactory.add('textPartLanguage', locale => {
+            const { definitions, titles } = this._getItemMetadata();
+            const languageCommand = editor.commands.get('textPartLanguage');
+            const dropdownView = createDropdown(locale);
+            addListToDropdown(dropdownView, definitions, {
+                ariaLabel: accessibleLabel,
+                role: 'menu'
+            });
+            dropdownView.buttonView.set({
+                ariaLabel: accessibleLabel,
+                ariaLabelledBy: undefined,
+                isOn: false,
+                withText: true,
+                tooltip: accessibleLabel
+            });
+            dropdownView.extendTemplate({
+                attributes: {
+                    class: [
+                        'ck-text-fragment-language-dropdown'
+                    ]
+                }
+            });
+            dropdownView.bind('isEnabled').to(languageCommand, 'isEnabled');
+            dropdownView.buttonView.bind('label').to(languageCommand, 'value', value => {
+                return (value && titles[value]) || defaultTitle;
+            });
+            dropdownView.buttonView.bind('ariaLabel').to(languageCommand, 'value', value => {
+                const selectedLanguageTitle = value && titles[value];
+                if (!selectedLanguageTitle) {
+                    return accessibleLabel;
+                }
+                return `${selectedLanguageTitle}, ${accessibleLabel}`;
+            });
+            // Execute command when an item from the dropdown is selected.
+            this.listenTo(dropdownView, 'execute', evt => {
+                languageCommand.execute({
+                    languageCode: evt.source.languageCode,
+                    textDirection: evt.source.textDirection
+                });
+                editor.editing.view.focus();
+            });
+            return dropdownView;
+        });
+        // Register menu bar UI component.
+        editor.ui.componentFactory.add('menuBar:textPartLanguage', locale => {
+            const { definitions } = this._getItemMetadata();
+            const languageCommand = editor.commands.get('textPartLanguage');
+            const menuView = new MenuBarMenuView(locale);
+            menuView.buttonView.set({
+                label: accessibleLabel
+            });
+            const listView = new MenuBarMenuListView(locale);
+            listView.set({
+                ariaLabel: t('Language'),
+                role: 'menu'
+            });
+            for (const definition of definitions) {
+                if (definition.type != 'button') {
+                    listView.items.add(new ListSeparatorView(locale));
+                    continue;
+                }
+                const listItemView = new MenuBarMenuListItemView(locale, menuView);
+                const buttonView = new MenuBarMenuListItemButtonView(locale);
+                buttonView.set({
+                    role: 'menuitemradio',
+                    isToggleable: true
+                });
+                buttonView.bind(...Object.keys(definition.model)).to(definition.model);
+                buttonView.delegate('execute').to(menuView);
+                listItemView.children.add(buttonView);
+                listView.items.add(listItemView);
+            }
+            menuView.bind('isEnabled').to(languageCommand, 'isEnabled');
+            menuView.panelView.children.add(listView);
+            menuView.on('execute', evt => {
+                languageCommand.execute({
+                    languageCode: evt.source.languageCode,
+                    textDirection: evt.source.textDirection
+                });
+                editor.editing.view.focus();
+            });
+            return menuView;
+        });
+    }
+    /**
+     * Returns metadata for dropdown and menu items.
+     */
+    _getItemMetadata() {
+        const editor = this.editor;
+        const itemDefinitions = new Collection();
+        const titles = {};
+        const languageCommand = editor.commands.get('textPartLanguage');
+        const options = editor.config.get('language.textPartLanguage');
+        const t = editor.locale.t;
+        const removeTitle = t('Remove language');
+        // Item definition with false `languageCode` will behave as remove lang button.
+        itemDefinitions.add({
+            type: 'button',
+            model: new ViewModel({
+                label: removeTitle,
+                languageCode: false,
+                withText: true
+            })
+        });
+        itemDefinitions.add({
+            type: 'separator'
+        });
+        for (const option of options) {
+            const def = {
+                type: 'button',
+                model: new ViewModel({
+                    label: option.title,
+                    languageCode: option.languageCode,
+                    role: 'menuitemradio',
+                    textDirection: option.textDirection,
+                    withText: true
+                })
+            };
+            const language = stringifyLanguageAttribute(option.languageCode, option.textDirection);
+            def.model.bind('isOn').to(languageCommand, 'value', value => value === language);
+            itemDefinitions.add(def);
+            titles[language] = option.title;
+        }
+        return {
+            definitions: itemDefinitions,
+            titles
+        };
+    }
+}

package/src/utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @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 language/utils
+ */
+import { type LanguageDirection } from 'ckeditor5/src/utils.js';
+/**
+ * Returns the language attribute value in a human-readable text format:
+ *
+ * ```
+ * <languageCode>:<textDirection>
+ * ```
+ *
+ * * `languageCode` - The language code used for the `lang` attribute in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+ * * `textDirection` - One of the following values: `rtl` or `ltr`, indicating the reading direction of the language.
+ *
+ * See the {@link module:core/editor/editorconfig~LanguageConfig#textPartLanguage text part language configuration}
+ * for more information about language properties.
+ *
+ * If the `textDirection` argument is omitted, it will be automatically detected based on `languageCode`.
+ *
+ * @param languageCode The language code in the ISO 639-1 format.
+ * @param textDirection The language text direction. Automatically detected if omitted.
+ */
+export declare function stringifyLanguageAttribute(languageCode: string, textDirection?: LanguageDirection): string;
+/**
+ * Retrieves language properties converted to attribute value by the
+ * {@link module:language/utils~stringifyLanguageAttribute stringifyLanguageAttribute} function.
+ *
+ * @param str The attribute value.
+ * @returns The object with properties:
+ * * languageCode - The language code in the ISO 639 format.
+ * * textDirection - The language text direction.
+ */
+export declare function parseLanguageAttribute(str: string): {
+    languageCode: string;
+    textDirection: string;
+};

package/src/utils.js

@@ -0,0 +1,43 @@
+/**
+ * @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 language/utils
+ */
+import { getLanguageDirection } from 'ckeditor5/src/utils.js';
+/**
+ * Returns the language attribute value in a human-readable text format:
+ *
+ * ```
+ * <languageCode>:<textDirection>
+ * ```
+ *
+ * * `languageCode` - The language code used for the `lang` attribute in the [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) format.
+ * * `textDirection` - One of the following values: `rtl` or `ltr`, indicating the reading direction of the language.
+ *
+ * See the {@link module:core/editor/editorconfig~LanguageConfig#textPartLanguage text part language configuration}
+ * for more information about language properties.
+ *
+ * If the `textDirection` argument is omitted, it will be automatically detected based on `languageCode`.
+ *
+ * @param languageCode The language code in the ISO 639-1 format.
+ * @param textDirection The language text direction. Automatically detected if omitted.
+ */
+export function stringifyLanguageAttribute(languageCode, textDirection) {
+    textDirection = textDirection || getLanguageDirection(languageCode);
+    return `${languageCode}:${textDirection}`;
+}
+/**
+ * Retrieves language properties converted to attribute value by the
+ * {@link module:language/utils~stringifyLanguageAttribute stringifyLanguageAttribute} function.
+ *
+ * @param str The attribute value.
+ * @returns The object with properties:
+ * * languageCode - The language code in the ISO 639 format.
+ * * textDirection - The language text direction.
+ */
+export function parseLanguageAttribute(str) {
+    const [languageCode, textDirection] = str.split(':');
+    return { languageCode, textDirection };
+}