@ckeditor/ckeditor5-dev-manual-server 56.2.0

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

@@ -0,0 +1,18 @@
+/**
+* @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/raw-plugin/plugin.d.ts

@@ -0,0 +1,6 @@
+/**
+* @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 declare function rawHtmlPlugin(): Plugin;

package/dist/refresh-plugin/plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+* @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 declare const MANUAL_REFRESH_EVENT_NAME = "ckeditor5-manual:refresh-available";
+export declare function refreshPlugin(): Plugin;

package/dist/utils.d.ts

@@ -0,0 +1,20 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md.
+*/
+export interface CachedValue<T> {
+	get(): T;
+	invalidate(): void;
+}
+/**
+* Caches the computed value until the cache is invalidated.
+*/
+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 toPublicFilePath(filePath: string, workspaceRoot: string): string;
+export declare function toPublicSpecifier(relativeFilePath: string): string;
+export declare function toPosixPath(value: string): string;
+export declare function stripLeadingSlash(value: string): string;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ckeditor/ckeditor5-dev-manual-server",
+  "version": "56.2.0",
+  "description": "Used to extend Vite to create a manual test server for CKEditor 5.",
+  "keywords": [],
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-manual-server",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5-dev.git",
+    "directory": "packages/ckeditor5-dev-manual-server"
+  },
+  "engines": {
+    "node": ">=24.11.0",
+    "npm": ">=5.7.1"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "theme"
+  ],
+  "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"
+  }
+}

package/theme/catalog.css

@@ -0,0 +1,252 @@
+:root {
+	color-scheme: light;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	--bg: #fafafa;
+	--surface: #fff;
+	--surface-hover: #f5f5f5;
+	--border: #e5e5e5;
+	--border-strong: #d4d4d4;
+	--text: #0a0a0a;
+	--text-muted: #737373;
+	--text-subtle: #a3a3a3;
+	--accent: #171717;
+	--accent-ring: rgb(23 23 23 / 10%);
+	--radius-lg: 12px;
+	--radius-md: 8px;
+	--radius-sm: 6px;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+	background: var(--bg);
+	color: var(--text);
+	font-size: 14px;
+}
+
+a {
+	color: inherit;
+}
+
+.app {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 0 24px 80px;
+}
+
+.app__header {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 32px 0 24px;
+	background: linear-gradient(var(--bg) 80%, transparent);
+	backdrop-filter: blur(8px);
+}
+
+.app__titles {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.app__title {
+	margin: 0;
+	font-size: clamp(24px, 3vw, 32px);
+	font-weight: 700;
+	letter-spacing: -0.02em;
+}
+
+.app__subtitle {
+	margin: 0;
+	font-size: 13px;
+	color: var(--text-muted);
+	font-variant-numeric: tabular-nums;
+}
+
+.app__search {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	height: 44px;
+	padding: 0 14px;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+	transition: border-color 0.12s, box-shadow 0.12s;
+}
+
+.app__search:focus-within {
+	border-color: var(--border-strong);
+	box-shadow: 0 0 0 4px var(--accent-ring);
+}
+
+.app__search-icon {
+	flex-shrink: 0;
+	color: var(--text-subtle);
+}
+
+.app__search-input {
+	flex: 1;
+	min-width: 0;
+	font: inherit;
+	font-size: 14px;
+	color: var(--text);
+	background: transparent;
+	border: 0;
+	outline: none;
+	padding: 0;
+}
+
+.app__search-input::-webkit-search-cancel-button {
+	cursor: pointer;
+}
+
+.app__search-input::placeholder {
+	color: var(--text-muted);
+}
+
+.app__list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+	gap: 16px;
+	align-items: start;
+}
+
+.app__empty {
+	grid-column: 1 / -1;
+	padding: 64px 24px;
+	text-align: center;
+	background: var(--surface);
+	border: 1px dashed var(--border);
+	border-radius: var(--radius-lg);
+}
+
+.app__empty-title {
+	margin: 0 0 4px;
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.app__empty-hint {
+	margin: 0;
+	font-size: 13px;
+	color: var(--text-muted);
+}
+
+.pkg {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	overflow: hidden;
+	transition: border-color 0.12s;
+}
+
+.pkg:hover {
+	border-color: var(--border-strong);
+}
+
+.pkg__header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--border);
+}
+
+.pkg__name {
+	flex: 1;
+	min-width: 0;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 13px;
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.pkg__count {
+	flex-shrink: 0;
+	min-width: 24px;
+	text-align: right;
+	font-size: 12px;
+	color: var(--text-muted);
+	font-variant-numeric: tabular-nums;
+}
+
+.pkg__list {
+	list-style: none;
+	margin: 0;
+	padding: 6px;
+}
+
+.pkg__link {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	border-radius: var(--radius-sm);
+	text-decoration: none;
+	color: inherit;
+	transition: background 0.08s;
+}
+
+.pkg__link:hover {
+	background: var(--surface-hover);
+}
+
+.pkg__link:focus-visible {
+	outline: none;
+	background: var(--surface-hover);
+	box-shadow: inset 0 0 0 2px var(--border-strong);
+}
+
+.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);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+	.app {
+		padding: 0 16px 48px;
+	}
+
+	.app__header {
+		padding: 20px 0 16px;
+	}
+
+	.app__list {
+		grid-template-columns: 1fr;
+	}
+
+	.pkg__test-slug {
+		display: none;
+	}
+}

package/theme/catalog.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
+	<title>CKEditor 5 manual tests catalog</title>
+	<script type="module" src="./catalog.ts"></script>
+</head>
+<body>
+	<template id="manual-index-template">
+		<main class="app">
+			<header class="app__header">
+				<div class="app__titles">
+					<h1 class="app__title">CKEditor 5 manual tests</h1>
+					<p class="app__subtitle"></p>
+				</div>
+				<label class="app__search">
+					<svg class="app__search-icon" viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
+						<path fill="currentColor" d="M7 2a5 5 0 103.546 8.546l3.204 3.204a.75.75 0 101.06-1.06l-3.204-3.204A5 5 0 007 2zM3.5 7a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/>
+					</svg>
+					<input type="search" class="app__search-input" placeholder="Filter by package or test name…" autocomplete="off" autofocus>
+				</label>
+			</header>
+			<div class="app__list" role="list"></div>
+		</main>
+	</template>
+
+	<template id="manual-empty-template">
+		<div class="app__empty">
+			<p class="app__empty-title">No matches</p>
+			<p class="app__empty-hint">Try a different search term.</p>
+		</div>
+	</template>
+
+	<template id="manual-package-template">
+		<section class="pkg" role="listitem">
+			<header class="pkg__header">
+				<code class="pkg__name"></code>
+				<span class="pkg__count"></span>
+			</header>
+			<ul class="pkg__list"></ul>
+		</section>
+	</template>
+
+	<template id="manual-test-template">
+		<li class="pkg__item">
+			<a class="pkg__link">
+				<span class="pkg__test-name"></span>
+				<span class="pkg__test-slug"></span>
+			</a>
+		</li>
+	</template>
+
+	<div id="app"></div>
+</body>
+</html>

package/theme/catalog.ts

@@ -0,0 +1,162 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+// @ts-expect-error Virtual module provided by the manual test entries plugin.
+import { manualTestEntries, type ManualTestEntry } from 'virtual:ckeditor5-manual-entries';
+
+import './catalog.css';
+
+const SEARCH_QUERY_PARAMETER = 'q';
+
+/**
+ * Root element for the manual test index application.
+ */
+const appElement = document.querySelector<HTMLElement>( '#app' )!;
+
+renderApp( appElement, manualTestEntries );
+
+/**
+ * Renders the index shell from the HTML template and wires filtering behavior.
+ */
+function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
+	const packageCount = new Set( entries.map( entry => entry.packageName ) ).size;
+
+	root.replaceChildren( cloneTemplateElement( 'manual-index-template' ) );
+
+	root.querySelector<HTMLElement>( '.app__subtitle' )!.textContent = `${ entries.length } tests across ${ packageCount } packages`;
+
+	const listElement = root.querySelector<HTMLElement>( '.app__list' )!;
+	const searchInput = root.querySelector<HTMLInputElement>( '.app__search-input' )!;
+
+	const render = ( query: string ): void => {
+		listElement.replaceChildren( ...renderGroups( filterEntries( entries, query ) ) );
+	};
+
+	const setQuery = ( query: string ): void => {
+		searchInput.value = query;
+		render( query );
+	};
+
+	searchInput.addEventListener( 'input', () => {
+		updateSearchQueryInUrl( searchInput.value );
+		render( searchInput.value );
+	} );
+
+	window.addEventListener( 'popstate', () => {
+		setQuery( getSearchQueryFromUrl() );
+	} );
+
+	document.addEventListener( 'keydown', event => {
+		if ( event.key == '/' && document.activeElement != searchInput ) {
+			event.preventDefault();
+			searchInput.focus();
+			searchInput.select();
+		}
+	} );
+
+	setQuery( getSearchQueryFromUrl() );
+}
+
+/**
+ * Returns the current search query from the page URL.
+ */
+function getSearchQueryFromUrl(): string {
+	return new URL( window.location.href ).searchParams.get( SEARCH_QUERY_PARAMETER ) || '';
+}
+
+/**
+ * Updates the page URL to reflect the current search query.
+ */
+function updateSearchQueryInUrl( query: string ): void {
+	if ( query == getSearchQueryFromUrl() ) {
+		return;
+	}
+
+	const url = new URL( window.location.href );
+
+	if ( query ) {
+		url.searchParams.set( SEARCH_QUERY_PARAMETER, query );
+	} else {
+		url.searchParams.delete( SEARCH_QUERY_PARAMETER );
+	}
+
+	history.replaceState( null, '', `${ url.pathname }${ url.search }${ url.hash }` );
+}
+
+/**
+ * Returns entries matching the current search query.
+ */
+function filterEntries( entries: Array<ManualTestEntry>, query: string ): Array<ManualTestEntry> {
+	const normalized = query.trim().toLowerCase();
+
+	if ( !normalized ) {
+		return entries;
+	}
+
+	return entries.filter( entry =>
+		entry.packageName.toLowerCase().includes( normalized ) ||
+		entry.slug.toLowerCase().includes( normalized ) ||
+		entry.displayName.toLowerCase().includes( normalized )
+	);
+}
+
+/**
+ * Groups visible entries by package and renders package cards.
+ */
+function renderGroups( entries: Array<ManualTestEntry> ): Array<HTMLElement> {
+	if ( !entries.length ) {
+		return [ cloneTemplateElement( 'manual-empty-template' ) ];
+	}
+
+	const groups = new Map<string, Array<ManualTestEntry>>();
+
+	for ( const entry of entries ) {
+		const group = groups.get( entry.packageName ) || [];
+
+		group.push( entry );
+		groups.set( entry.packageName, group );
+	}
+
+	return [ ...groups.entries() ].map( ( [ packageName, packageEntries ] ) => renderPackageCard( packageName, packageEntries ) );
+}
+
+/**
+ * Renders a single package card with all tests belonging to that package.
+ */
+function renderPackageCard( packageName: string, entries: Array<ManualTestEntry> ): HTMLElement {
+	const packageCard = cloneTemplateElement( 'manual-package-template' );
+	const list = packageCard.querySelector<HTMLElement>( '.pkg__list' )!;
+
+	packageCard.querySelector<HTMLElement>( '.pkg__name' )!.textContent = packageName;
+	packageCard.querySelector<HTMLElement>( '.pkg__count' )!.textContent = String( entries.length );
+	list.replaceChildren( ...entries.map( entry => renderTestItem( entry ) ) );
+
+	return packageCard;
+}
+
+/**
+ * Renders a single test link inside a package card.
+ */
+function renderTestItem( entry: ManualTestEntry ): HTMLElement {
+	const testItem = cloneTemplateElement( 'manual-test-template' );
+	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;
+
+	return testItem;
+}
+
+/**
+ * Clones a one-root HTML template used by the index UI.
+ */
+function cloneTemplateElement( templateId: string ): HTMLElement {
+	const fragment = document
+		.querySelector<HTMLTemplateElement>( `#${ templateId }` )!
+		.content.cloneNode( true ) as DocumentFragment;
+
+	return fragment.firstElementChild as HTMLElement;
+}