@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/lang/translations/zh.po

@@ -0,0 +1,214 @@
+# Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Chinese (Taiwan) (https://app.transifex.com/ckeditor/teams/11143/zh_TW/)\n"
+"Language: zh_TW\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "富文本編輯器"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr "編輯區塊"
+
+msgctxt "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Click to edit block"
+msgstr "點擊來編輯區塊"
+
+msgctxt "Second part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Drag to move"
+msgstr "拖曳來移動"
+
+msgctxt "Label for a button showing the next thing (tab, page, etc.)."
+msgid "Next"
+msgstr "下一"
+
+msgctxt "Label for a button showing the previous thing (tab, page, etc.)."
+msgid "Previous"
+msgstr "上一"
+
+msgctxt "Label used by assistive technologies describing a generic editor toolbar."
+msgid "Editor toolbar"
+msgstr "編輯器工具"
+
+msgctxt "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
+msgid "Dropdown toolbar"
+msgstr "下拉選單"
+
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr "下拉式選單"
+
+msgctxt "Label of a button that applies a black color in color pickers."
+msgid "Black"
+msgstr "黑色"
+
+msgctxt "Label of a button that applies a dim grey color in color pickers."
+msgid "Dim grey"
+msgstr "淡灰色"
+
+msgctxt "Label of a button that applies a grey color in color pickers."
+msgid "Grey"
+msgstr "灰色"
+
+msgctxt "Label of a button that applies a light grey color in color pickers."
+msgid "Light grey"
+msgstr "亮灰色"
+
+msgctxt "Label of a button that applies a white color in color pickers."
+msgid "White"
+msgstr "白色"
+
+msgctxt "Label of a button that applies a red color in color pickers."
+msgid "Red"
+msgstr "紅色"
+
+msgctxt "Label of a button that applies a orange color in color pickers."
+msgid "Orange"
+msgstr "橘色"
+
+msgctxt "Label of a button that applies a yellow color in color pickers."
+msgid "Yellow"
+msgstr "黃色"
+
+msgctxt "Label of a button that applies a light green color in color pickers."
+msgid "Light green"
+msgstr "亮綠色"
+
+msgctxt "Label of a button that applies a green color in color pickers."
+msgid "Green"
+msgstr "綠色"
+
+msgctxt "Label of a button that applies a aquamarine color in color pickers."
+msgid "Aquamarine"
+msgstr "淺綠色"
+
+msgctxt "Label of a button that applies a turquoise color in color pickers."
+msgid "Turquoise"
+msgstr "藍綠色"
+
+msgctxt "Label of a button that applies a light blue color in color pickers."
+msgid "Light blue"
+msgstr "亮藍色"
+
+msgctxt "Label of a button that applies a blue color in color pickers."
+msgid "Blue"
+msgstr "藍色"
+
+msgctxt "Label of a button that applies a purple color in color pickers."
+msgid "Purple"
+msgstr "紫色"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "編輯器區塊內容工具列"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "編輯器關聯式工具列"
+
+msgctxt "Label of an input field for typing colors in the HEX color format."
+msgid "HEX"
+msgstr "十六進位"
+
+msgctxt "The main text of the message shown to the user when given query does not match any results."
+msgid "No results found"
+msgstr "找不到結果"
+
+msgctxt "The main text of the message shown to the user when no results are available."
+msgid "No searchable items"
+msgstr "沒有可搜尋的項目"
+
+msgctxt "A default label of a dialog window displayed on top the editor."
+msgid "Editor dialog"
+msgstr "編輯工具對話框"
+
+msgctxt "The label and the tooltip for the close button in the dialog header."
+msgid "Close"
+msgstr "關閉"
+
+msgctxt "Accessibility help dialog assistive technologies label telling users how to exit the dialog."
+msgid "Help Contents. To close this dialog press ESC."
+msgstr "協助內容。想關閉此對話框，請按 ESC 鍵。"
+
+msgctxt "Accessibility help dialog text explaining what can be found in that dialog."
+msgid "Below, you can find a list of keyboard shortcuts that can be used in the editor."
+msgstr "下方是可在編輯器中使用的鍵盤快捷鍵列表。"
+
+msgctxt "Accessibility help dialog text displayed next to keystrokes that may require the Fn key on Mac."
+msgid "(may require <kbd>Fn</kbd>)"
+msgstr "（可能需要 <kbd>Fn</kbd>）"
+
+msgctxt "The label for the button that opens the Accessibility help dialog from the application menu bar."
+msgid "Accessibility"
+msgstr "協助工具"
+
+msgctxt "Accessibility help dialog title."
+msgid "Accessibility help"
+msgstr "無障礙協助"
+
+msgctxt "Assistive technologies label added to each editor editing area informing users about the possibility of opening the accessibility help dialog."
+msgid "Press %0 for help."
+msgstr "按下 %0 來取得協助。"
+
+msgctxt "Keystroke description for assistive technologies: keystroke for moving focus out of an active dialog window."
+msgid "Move focus in and out of an active dialog window"
+msgstr "將焦點移入或移出啟用中的對話視窗"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features related to the whole document (e.g. export to PDF, import from Word, etc.)."
+msgid "MENU_BAR_MENU_FILE"
+msgstr "檔案"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features related to general editing (e.g. undo, redo, select all, etc.)."
+msgid "MENU_BAR_MENU_EDIT"
+msgstr "編輯"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features related to the view of the editor (e.g. show source)."
+msgid "MENU_BAR_MENU_VIEW"
+msgstr "檢視"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features that insert content (e.g. insert table, insert image, etc.)."
+msgid "MENU_BAR_MENU_INSERT"
+msgstr "插入"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features related to content formatting (e.g. bold, font color, heading, etc.)."
+msgid "MENU_BAR_MENU_FORMAT"
+msgstr "格式"
+
+msgctxt "The label of the top-level application menu bar menu containing various editor tools (e.g. AI assistant, track changes, etc.)."
+msgid "MENU_BAR_MENU_TOOLS"
+msgstr "工具"
+
+msgctxt "The label of the top-level application menu bar menu containing buttons and features helping users to learn about the editor (e.g. accessibility help)."
+msgid "MENU_BAR_MENU_HELP"
+msgstr "說明"
+
+msgctxt "The label of the application menu bar menu containing buttons and features that apply formatting to a text (e.g. bold, italic, etc.)."
+msgid "MENU_BAR_MENU_TEXT"
+msgstr "文字"
+
+msgctxt "The label of the application menu bar menu containing buttons and features that control the font of the edited content (e.g. font size, font color, etc.)."
+msgid "MENU_BAR_MENU_FONT"
+msgstr "字型"
+
+msgctxt "The accessible label of the editor menu bar used by assistive technologies."
+msgid "Editor menu bar"
+msgstr "編輯器選單列"
+
+msgctxt "An error text displayed when user attempted to enter an color that is not in HEX format."
+msgid "Please enter a valid color (e.g. \"ff0000\")."
+msgstr "請輸入有效的顏色（例如「ff0000」）。"

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ckeditor/ckeditor5-ui",
+  "version": "0.0.0-internal-20241017.0",
+  "description": "The UI framework and standard UI library of CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-lib",
+    "ckeditor5-dll"
+  ],
+  "type": "module",
+  "main": "src/index.js",
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "0.0.0-internal-20241017.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-internal-20241017.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-internal-20241017.0",
+    "color-convert": "2.0.1",
+    "color-parse": "1.4.2",
+    "lodash-es": "4.17.21",
+    "vanilla-colorful": "0.7.2"
+  },
+  "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-ui"
+  },
+  "files": [
+    "dist",
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "types": "src/index.d.ts"
+}

package/src/arialiveannouncer.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @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 { Editor } from '@ckeditor/ckeditor5-core';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from './viewcollection.js';
+import View from './view.js';
+import '../theme/components/arialiveannouncer/arialiveannouncer.css';
+/**
+ * The politeness level of an `aria-live` announcement.
+ *
+ * Available keys are:
+ * * `AriaLiveAnnouncerPoliteness.POLITE`,
+ * * `AriaLiveAnnouncerPoliteness.ASSERTIVE`
+ *
+ * [Learn more](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels).
+ */
+export declare const AriaLiveAnnouncerPoliteness: {
+    readonly POLITE: "polite";
+    readonly ASSERTIVE: "assertive";
+};
+/**
+ * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+ * to the state of the editor features.
+ *
+ * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+ * state of the editor.
+ *
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
+ * ```ts
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
+ * ```
+ */
+export default class AriaLiveAnnouncer {
+    /**
+     * The editor instance.
+     */
+    readonly editor: Editor;
+    /**
+     * The view that aggregates all `aria-live` regions.
+     */
+    view?: AriaLiveAnnouncerView;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
+     *
+     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
+     *
+     * The default announcement politeness level is `'polite'`.
+     *
+     * ```ts
+     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
+     * ```
+     */
+    announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
+}
+/**
+ * The view that aggregates all `aria-live` regions.
+ */
+export declare class AriaLiveAnnouncerView extends View {
+    /**
+     * A collection of all views that represent individual `aria-live` regions.
+     */
+    readonly regionViews: ViewCollection<AriaLiveAnnouncerRegionView>;
+    constructor(locale: Locale);
+}
+/**
+ * The view that represents a single `aria-live`.
+ */
+export declare class AriaLiveAnnouncerRegionView extends View {
+    /**
+     * Current politeness level of the region.
+     */
+    readonly politeness: AriaLiveAnnouncerPolitenessValue;
+    /**
+     * DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
+     */
+    private _domConverter;
+    /**
+     * Interval used to remove additions. It prevents accumulation of added nodes in region.
+     */
+    private _pruneAnnouncementsInterval;
+    constructor(editor: Editor, politeness: AriaLiveAnnouncerPolitenessValue);
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }: AriaLiveAppendContentAttributes): void;
+    /**
+     * Return current announcements list HTML element.
+     */
+    private get _listElement();
+}
+type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+type AriaLiveAppendContentAttributes = {
+    announcement: string;
+    isUnsafeHTML?: boolean;
+};
+type AriaLiveAnnounceConfig = {
+    politeness: AriaLiveAnnouncerPolitenessValue;
+    isUnsafeHTML?: boolean;
+};
+export {};

package/src/arialiveannouncer.js

@@ -0,0 +1,165 @@
+/**
+ * @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 View from './view.js';
+import '../theme/components/arialiveannouncer/arialiveannouncer.css';
+/**
+ * The politeness level of an `aria-live` announcement.
+ *
+ * Available keys are:
+ * * `AriaLiveAnnouncerPoliteness.POLITE`,
+ * * `AriaLiveAnnouncerPoliteness.ASSERTIVE`
+ *
+ * [Learn more](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels).
+ */
+export const AriaLiveAnnouncerPoliteness = {
+    POLITE: 'polite',
+    ASSERTIVE: 'assertive'
+};
+/**
+ * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+ * to the state of the editor features.
+ *
+ * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+ * state of the editor.
+ *
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
+ * ```ts
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
+ * ```
+ */
+export default class AriaLiveAnnouncer {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        this.editor = editor;
+        /**
+         * Some screen readers only look at changes in the aria-live region.
+         * They might not read a region that already has content when it is added.
+         * To stop this problem, make sure to set up regions for all politeness settings when the editor starts.
+         */
+        editor.once('ready', () => {
+            for (const politeness of Object.values(AriaLiveAnnouncerPoliteness)) {
+                this.announce('', politeness);
+            }
+        });
+    }
+    /**
+     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
+     *
+     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
+     *
+     * The default announcement politeness level is `'polite'`.
+     *
+     * ```ts
+     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
+     * ```
+     */
+    announce(announcement, attributes = AriaLiveAnnouncerPoliteness.POLITE) {
+        const editor = this.editor;
+        if (!editor.ui.view) {
+            return;
+        }
+        if (!this.view) {
+            this.view = new AriaLiveAnnouncerView(editor.locale);
+            editor.ui.view.body.add(this.view);
+        }
+        const { politeness, isUnsafeHTML } = typeof attributes === 'string' ? {
+            politeness: attributes
+        } : attributes;
+        let politenessRegionView = this.view.regionViews.find(view => view.politeness === politeness);
+        if (!politenessRegionView) {
+            politenessRegionView = new AriaLiveAnnouncerRegionView(editor, politeness);
+            this.view.regionViews.add(politenessRegionView);
+        }
+        politenessRegionView.announce({
+            announcement,
+            isUnsafeHTML
+        });
+    }
+}
+/**
+ * The view that aggregates all `aria-live` regions.
+ */
+export class AriaLiveAnnouncerView extends View {
+    constructor(locale) {
+        super(locale);
+        this.regionViews = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-aria-live-announcer'
+                ]
+            },
+            children: this.regionViews
+        });
+    }
+}
+/**
+ * The view that represents a single `aria-live`.
+ */
+export class AriaLiveAnnouncerRegionView extends View {
+    constructor(editor, politeness) {
+        super(editor.locale);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                'aria-live': politeness,
+                'aria-relevant': 'additions'
+            },
+            children: [
+                {
+                    tag: 'ul',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-aria-live-region-list'
+                        ]
+                    }
+                }
+            ]
+        });
+        editor.on('destroy', () => {
+            if (this._pruneAnnouncementsInterval !== null) {
+                clearInterval(this._pruneAnnouncementsInterval);
+                this._pruneAnnouncementsInterval = null;
+            }
+        });
+        this.politeness = politeness;
+        this._domConverter = editor.data.htmlProcessor.domConverter;
+        this._pruneAnnouncementsInterval = setInterval(() => {
+            if (this.element && this._listElement.firstChild) {
+                this._listElement.firstChild.remove();
+            }
+        }, 5000);
+    }
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }) {
+        if (!announcement.trim().length) {
+            return;
+        }
+        const messageListItem = document.createElement('li');
+        if (isUnsafeHTML) {
+            this._domConverter.setContentOf(messageListItem, announcement);
+        }
+        else {
+            messageListItem.innerText = announcement;
+        }
+        this._listElement.appendChild(messageListItem);
+    }
+    /**
+     * Return current announcements list HTML element.
+     */
+    get _listElement() {
+        return this.element.querySelector('ul');
+    }
+}

package/src/augmentation.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @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 { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification, Dialog, AccessibilityHelp } from './index.js';
+import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
+         * feature.
+         *
+         * ## Configuring toolbar items
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: {
+         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         */
+        balloonToolbar?: ToolbarConfig;
+        /**
+         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
+         * feature.
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: {
+         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         *
+         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         */
+        blockToolbar?: ToolbarConfig;
+    }
+    interface PluginsMap {
+        [BalloonToolbar.pluginName]: BalloonToolbar;
+        [BlockToolbar.pluginName]: BlockToolbar;
+        [ContextualBalloon.pluginName]: ContextualBalloon;
+        [Dialog.pluginName]: Dialog;
+        [Notification.pluginName]: Notification;
+        [AccessibilityHelp.pluginName]: AccessibilityHelp;
+    }
+}

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 {};