@ckeditor/ckeditor5-dev-manual-server 56.6.0 → 57.0.0-alpha.1

package/dist/manual-test-plugin/collect-pages.d.ts

@@ -3,4 +3,11 @@
 * For licensing, see LICENSE.md.
 */
 import type { ManualPageEntry } from "./types.js";
+/**
+* Discovers manual test pages. A manual test is a single full HTML document named
+* `<slug>.manual.html` located under a package's `tests/manual/` directory. Plain `.html`
+* files are treated as static fixtures and are never collected here.
+*
+* The `patterns` are package root globs, for example `packages/*`.
+*/
 export declare function collectManualPages(patterns: Array<string>, workspaceRoot: string): Map<string, ManualPageEntry>;

package/dist/manual-test-plugin/plugin.d.ts

@@ -3,7 +3,6 @@
 * For licensing, see LICENSE.md.
 */
 import type { Plugin } from "vite";
-export type { ManualData } from "./types.js";
 export interface ManualTestsPluginOptions {
 	paths: Array<string>;
 	include?: Array<string>;

package/dist/manual-test-plugin/types.d.ts

@@ -2,17 +2,8 @@
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md.
 */
-export interface ManualData {
-	displayName: string;
-	instructionsHtml: string;
-	packageName: string;
-}
 export interface ManualPageEntry {
-	displayName: string;
 	htmlFilePath: string;
-	instructionsFilePath?: string;
 	packageName: string;
-	scriptFilePath: string;
 	slug: string;
 }
-export type ManualTestAssetExtension = "html" | "js" | "md" | "ts";

package/dist/static-assets-plugin/plugin.d.ts

@@ -0,0 +1,10 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md.
+*/
+import type { Plugin } from "vite";
+export interface ManualStaticAssetsPluginOptions {
+	paths: Array<string>;
+	include?: Array<string>;
+}
+export declare function manualStaticAssetsPlugin(options: ManualStaticAssetsPluginOptions): Plugin;

package/dist/{manual-test-plugin → static-assets-plugin}/static-assets.d.ts

@@ -6,5 +6,4 @@ import type { IncomingMessage, ServerResponse } from "node:http";
 type ManualStaticAssetsMiddleware = (request: IncomingMessage, response: ServerResponse, next: () => void) => void;
 export declare function collectManualStaticAssets(patterns: Array<string>, workspaceRoot: string): Map<string, string>;
 export declare function createManualStaticAssetsMiddleware(collectStaticAssets: () => Map<string, string>): ManualStaticAssetsMiddleware;
-export declare function getManualStaticAssetFilePath(requestUrl: string | undefined, staticAssets: Map<string, string>): string | null;
 export {};

package/dist/{raw-plugin → svg-plugin}/plugin.d.ts

@@ -3,4 +3,4 @@
 * For licensing, see LICENSE.md.
 */
 import type { Plugin } from "vite";
-export declare function rawHtmlPlugin(): Plugin;
+export declare function rawSvgPlugin(): Plugin;

package/dist/utils.d.ts

@@ -14,6 +14,14 @@ export declare function cacheValue<T>(compute: () => T): CachedValue<T>;
 * Stringifies the values of the given object.
 */
 export declare function stringifyValues(obj: Record<string, unknown>): Record<string, string>;
+export declare function normalizePackageName(packageName: string): string;
+/**
+* Builds a predicate that decides whether a package is part of the `include` selection. When the
+* selection is empty every package is included. Package names are matched by their normalized form,
+* so both short (`case-change`) and full (`ckeditor5-case-change`) names work. A `null` package name
+* (an asset without a package segment) is only kept when the selection is empty.
+*/
+export declare function createPackageNameFilter(includePackageNames: Array<string>): (packageName: string | null) => boolean;
 export declare function toPublicFilePath(filePath: string, workspaceRoot: string): string;
 export declare function toPublicSpecifier(relativeFilePath: string): string;
 export declare function toPosixPath(value: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-dev-manual-server",
-  "version": "56.6.0",
+  "version": "57.0.0-alpha.1",
   "description": "Used to extend Vite to create a manual test server for CKEditor 5.",
   "keywords": [],
   "author": "CKSource (http://cksource.com/)",
@@ -25,14 +25,6 @@
   ],
   "dependencies": {
     "@ckeditor/ckeditor5-inspector": "^5.0.1",
-    "@parse5/tools": "^0.7.0",
-    "hast-util-to-html": "^9.0.5",
-    "parse5": "^8.0.1",
-    "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
-    "unified": "^11.0.5",
-    "vite": "^8.0.13",
-    "vite-svg-loader": "^5.1.1"
+    "vite": "^8.1.0"
   }
 }

package/theme/catalog.css

@@ -215,19 +215,9 @@ a {
 .pkg__test-name {
 	flex: 1;
 	min-width: 0;
-	font-size: 13px;
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.pkg__test-slug {
-	flex-shrink: 0;
-	max-width: 50%;
 	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	font-size: 11px;
-	color: var(--text-subtle);
+	font-size: 12px;
+	font-weight: 500;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -245,8 +235,4 @@ a {
 	.app__list {
 		grid-template-columns: 1fr;
 	}
-
-	.pkg__test-slug {
-		display: none;
-	}
 }

package/theme/catalog.html

@@ -47,7 +47,6 @@
 		<li class="pkg__item">
 			<a class="pkg__link">
 				<span class="pkg__test-name"></span>
-				<span class="pkg__test-slug"></span>
 			</a>
 		</li>
 	</template>

package/theme/catalog.ts

@@ -97,8 +97,7 @@ function filterEntries( entries: Array<ManualTestEntry>, query: string ): Array<
 
 	return entries.filter( entry =>
 		entry.packageName.toLowerCase().includes( normalized ) ||
-		entry.slug.toLowerCase().includes( normalized ) ||
-		entry.displayName.toLowerCase().includes( normalized )
+		entry.slug.toLowerCase().includes( normalized )
 	);
 }
 
@@ -144,8 +143,7 @@ function renderTestItem( entry: ManualTestEntry ): HTMLElement {
 	const link = testItem.querySelector<HTMLAnchorElement>( '.pkg__link' )!;
 
 	link.href = entry.href;
-	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = entry.displayName;
-	testItem.querySelector<HTMLElement>( '.pkg__test-slug' )!.textContent = entry.slug;
+	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = entry.slug;
 
 	return testItem;
 }

package/theme/manual-bootstrap.css

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Styles for the shadow DOM hosting the "source changed" refresh prompt (manual-bootstrap.ts). */
+
+.refresh-prompt {
+	position: fixed;
+	top: calc( var( --ck-manual-header-height, 44px ) / 1.25 );
+	left: 50%;
+	z-index: 100000;
+	box-sizing: border-box;
+	padding: 8px 14px;
+	border: 1px solid #bfdbfe;
+	border-radius: 999px;
+	font: 600 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	color: #1d4ed8;
+	background: #dbeafe;
+	cursor: pointer;
+	opacity: 0;
+	pointer-events: none;
+	transform: translate(-50%, calc( -100% - var( --ck-manual-header-height, 44px ) ) );
+	transition: transform 0.18s ease-out, opacity 0.18s ease-out, background 0.1s;
+}
+
+.refresh-prompt--visible {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translate(-50%, -50%);
+}
+
+.refresh-prompt:hover {
+	background: #bfdbfe;
+}
+
+.refresh-prompt:active {
+	background: #93c5fd;
+}
+
+.refresh-prompt:focus-visible {
+	outline: 2px solid #2563eb;
+	outline-offset: 1px;
+}

package/theme/manual-bootstrap.ts

@@ -0,0 +1,105 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
+
+import promptStyles from './manual-bootstrap.css?inline';
+
+declare const LICENSE_KEY: string;
+
+interface ViteHotContextLike {
+	on( event: string, callback: () => void ): void;
+}
+
+const MANUAL_REFRESH_EVENT_NAME = 'ckeditor5-manual:refresh-available';
+
+const globalTarget = window as any;
+
+/**
+ * Invisible environment setup injected by the manual test server into EVERY manual test page
+ * (`*.manual.html`), with or without the `<ck-manual-header>` chrome:
+ *
+ * - sets the global license key so tests do not have to pass `licenseKey` explicitly;
+ * - resets the `window.editor` named DOM property and auto-attaches the CKEditor inspector;
+ * - renders the "source changed" refresh prompt driven by the dev server (`refreshPlugin`).
+ *
+ * The refresh prompt is part of the dev-server contract, not test chrome, so it belongs here.
+ */
+
+// In direct HTML manual tests, `id="editor"` creates `window.editor` as a named DOM property.
+// Reset it so manual tests can safely reuse `window.editor` for the editor instance.
+if ( globalTarget.editor instanceof Element ) {
+	globalTarget.editor = null;
+}
+
+globalTarget.CKEditorInspector ||= CKEditorInspector;
+
+if ( typeof LICENSE_KEY != 'undefined' ) {
+	globalTarget.CKEDITOR_GLOBAL_LICENSE_KEY ||= LICENSE_KEY;
+}
+
+autoAttachInspector();
+setUpRefreshPrompt();
+
+function autoAttachInspector(): void {
+	let editor = globalTarget.editor;
+
+	Object.defineProperty( globalTarget, 'editor', {
+		configurable: true,
+		set( value ) {
+			editor = value;
+
+			if ( editor ) {
+				CKEditorInspector.attach( editor );
+			}
+		},
+		get() {
+			return editor;
+		}
+	} );
+}
+
+/**
+ * Shows a refresh prompt when the dev server reports source changes (see `refreshPlugin`).
+ */
+function setUpRefreshPrompt(): void {
+	const hot = ( import.meta as ImportMeta & { hot?: ViteHotContextLike } ).hot;
+
+	if ( !hot ) {
+		return;
+	}
+
+	const button = document.createElement( 'button' );
+
+	button.type = 'button';
+	button.className = 'refresh-prompt';
+	button.textContent = 'Source changed. Click here to refresh the page.';
+	button.tabIndex = -1;
+	button.setAttribute( 'aria-hidden', 'true' );
+	button.addEventListener( 'click', () => window.location.reload() );
+
+	// Render the prompt inside a shadow host so its styles do not leak into the test page.
+	const host = document.createElement( 'div' );
+	const shadow = host.attachShadow( { mode: 'open' } );
+	const sheet = new CSSStyleSheet();
+
+	sheet.replaceSync( promptStyles );
+	shadow.adoptedStyleSheets = [ sheet ];
+	shadow.append( button );
+
+	const appendHost = () => document.body.append( host );
+
+	if ( document.body ) {
+		appendHost();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', appendHost );
+	}
+
+	hot.on( MANUAL_REFRESH_EVENT_NAME, () => {
+		button.removeAttribute( 'aria-hidden' );
+		button.removeAttribute( 'tabindex' );
+		button.classList.add( 'refresh-prompt--visible' );
+	} );
+}

package/theme/manual-header.css

@@ -0,0 +1,217 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Styles for the shadow DOM of the <ck-manual-header> component (test chrome). */
+
+:host {
+	display: block;
+	--ck-manual-header-height: 44px;
+}
+
+.bar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 99999;
+	display: flex;
+	align-items: stretch;
+	box-sizing: border-box;
+	padding: 6px 8px;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	font-size: 12px;
+	line-height: 1.25;
+	color: #0a0a0a;
+	background: rgb(255 255 255 / 85%);
+	backdrop-filter: saturate(180%) blur(20px);
+	-webkit-backdrop-filter: saturate(180%) blur(20px);
+	border-bottom: 1px solid rgb(0 0 0 / 8%);
+	box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+}
+
+.pill {
+	display: inline-flex;
+	align-items: center;
+	padding: 8px 14px;
+	border: 0;
+	background: transparent;
+	border-radius: 999px;
+	text-decoration: none;
+	color: inherit;
+	font: inherit;
+	font-weight: 500;
+	white-space: nowrap;
+	transition: background 0.1s;
+	cursor: pointer;
+}
+
+.pill:hover {
+	background: rgb(0 0 0 / 5%);
+}
+
+.pill:active {
+	background: rgb(0 0 0 / 10%);
+}
+
+.pill:focus-visible {
+	outline: 2px solid rgb(0 0 0 / 30%);
+	outline-offset: 1px;
+}
+
+.divider {
+	flex-shrink: 0;
+	align-self: center;
+	width: 1px;
+	height: 16px;
+	background: rgb(0 0 0 / 10%);
+	margin: 0 2px;
+}
+
+.label {
+	display: inline-flex;
+	align-items: center;
+	flex: 1 1 auto;
+	gap: 10px;
+	padding: 8px 14px;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.label__name {
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.label__package {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-weight: 400;
+	font-size: 11px;
+	opacity: 0.55;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:host( :not( [ has-instructions ] ) ) .instructions-only {
+	display: none;
+}
+
+@media (max-width: 600px) {
+	.bar {
+		font-size: 11px;
+	}
+
+	.label__package {
+		display: none;
+	}
+
+	.label__name {
+		max-width: 20ch;
+	}
+}
+
+.panel {
+	--panel-width: min(420px, 45vw);
+	--panel-transition-duration: 0.18s;
+
+	position: fixed;
+	top: var(--ck-manual-header-height);
+	right: 0;
+	bottom: 0;
+	z-index: 99998;
+	box-sizing: border-box;
+	width: 0;
+	background: #fff;
+	color: #0a0a0a;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	line-height: 1.6;
+	overflow: hidden;
+	transition: width var(--panel-transition-duration) ease-out;
+}
+
+.panel--open {
+	width: var(--panel-width);
+	border-left: 1px solid rgb(0 0 0 / 8%);
+	box-shadow: -8px 0 24px rgb(0 0 0 / 8%);
+}
+
+.panel__inner {
+	display: flex;
+	flex-direction: column;
+	width: var(--panel-width);
+	height: 100%;
+}
+
+.panel__header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 20px 24px;
+	border-bottom: 1px solid rgb(0 0 0 / 8%);
+	flex-shrink: 0;
+}
+
+.panel__titles {
+	min-width: 0;
+}
+
+.panel__title {
+	margin: 0 0 4px;
+	font-size: 18px;
+	font-weight: 700;
+	letter-spacing: -0.01em;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.panel__package {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 12px;
+	color: #737373;
+}
+
+.panel__close {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	padding: 0;
+	border: 0;
+	border-radius: 8px;
+	background: transparent;
+	color: #737373;
+	cursor: pointer;
+	transition: background 0.1s, color 0.1s;
+}
+
+.panel__close:hover {
+	background: rgb(0 0 0 / 5%);
+	color: #0a0a0a;
+}
+
+.panel__close:focus-visible {
+	outline: 2px solid rgb(0 0 0 / 30%);
+	outline-offset: 1px;
+}
+
+.panel__body {
+	padding: 20px 24px 28px;
+	font-size: 14px;
+	overflow-y: auto;
+	min-height: 0;
+}
+
+@media (max-width: 800px) {
+	.panel {
+		--panel-width: min(360px, 70vw);
+	}
+}