@ckeditor/ckeditor5-dev-manual-server 57.4.0 → 59.0.0

package/theme/catalog.css

@@ -1,3 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
 :root {
 	color-scheme: light;
 	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
@@ -15,6 +20,10 @@
 	--text-subtle: #a3a3a3;
 	--accent: #171717;
 	--accent-ring: rgb(23 23 23 / 10%);
+	--search-match-background: #e6d3fa;
+	--search-match-text: #480090;
+	--favorites-surface: #f7f0ff;
+	--favorites-border: #d9c2f0;
 	--radius-lg: 12px;
 	--radius-md: 8px;
 	--radius-sm: 6px;
@@ -36,6 +45,12 @@ a {
 	color: inherit;
 }
 
+::highlight(ckeditor5-manual-search-match) {
+	background-color: var(--search-match-background);
+	color: var(--search-match-text);
+}
+
+/* Application shell. */
 .app {
 	max-width: 1280px;
 	margin: 0 auto;
@@ -75,12 +90,11 @@ a {
 	font-variant-numeric: tabular-nums;
 }
 
+/* Search. */
 .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);
@@ -92,7 +106,19 @@ a {
 	box-shadow: 0 0 0 4px var(--accent-ring);
 }
 
-.app__search-icon {
+.app__search-label {
+	display: flex;
+	align-items: center;
+	align-self: stretch;
+	flex: 1;
+	min-width: 0;
+	gap: 10px;
+	padding: 0 10px 0 14px;
+	cursor: text;
+}
+
+.app__search-icon,
+.app__search-clear {
 	flex-shrink: 0;
 	color: var(--text-subtle);
 }
@@ -110,13 +136,33 @@ a {
 }
 
 .app__search-input::-webkit-search-cancel-button {
-	cursor: pointer;
+	display: none;
 }
 
 .app__search-input::placeholder {
 	color: var(--text-muted);
 }
 
+.app__search:has(.app__search-input:placeholder-shown) .app__search-clear {
+	visibility: hidden;
+}
+
+.app__search-clear {
+	margin-inline-end: 10px;
+	padding: 6px;
+	line-height: 0;
+	background: none;
+	border: 0;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+}
+
+.app__search-clear:hover {
+	color: var(--text);
+	background: var(--surface-hover);
+}
+
+/* Catalog content. */
 .app__list {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
@@ -145,6 +191,7 @@ a {
 	color: var(--text-muted);
 }
 
+/* Package cards. */
 .pkg {
 	background: var(--surface);
 	border: 1px solid var(--border);
@@ -160,11 +207,14 @@ a {
 .pkg__header {
 	display: flex;
 	align-items: center;
-	gap: 10px;
-	padding: 12px 16px;
+	padding: 12px 6px 12px 16px;
 	border-bottom: 1px solid var(--border);
 }
 
+.pkg__header > * + * {
+	margin-inline-start: 10px;
+}
+
 .pkg__name {
 	flex: 1;
 	min-width: 0;
@@ -177,23 +227,91 @@ a {
 }
 
 .pkg__count {
-	flex-shrink: 0;
-	min-width: 24px;
-	text-align: right;
+	flex: 0 0 38px;
+	text-align: center;
 	font-size: 12px;
 	color: var(--text-muted);
 	font-variant-numeric: tabular-nums;
 }
 
+.pkg__favorite,
+.pkg__favorites-clear {
+	flex-shrink: 0;
+	line-height: 0;
+	color: var(--text-subtle);
+	background: none;
+	border: 0;
+	border-radius: var(--radius-sm);
+	cursor: pointer;
+}
+
+/* Favorites card. */
+.pkg--favorites,
+.pkg--favorites:hover {
+	border-color: var(--favorites-border);
+}
+
+.pkg--favorites .pkg__header {
+	color: var(--search-match-text);
+	background: var(--favorites-surface);
+}
+
+.pkg--favorites .pkg__name {
+	font-family: inherit;
+}
+
+.pkg__favorites-icon {
+	flex-shrink: 0;
+}
+
+.pkg__favorites-icon path,
+.pkg__favorite-icon path {
+	fill: none;
+	stroke: currentColor;
+	stroke-linejoin: round;
+	stroke-width: 1.5px;
+}
+
+.pkg__favorites-icon path,
+.favorite--active .pkg__favorite-icon path {
+	fill: currentColor;
+}
+
+.pkg__favorites-clear {
+	padding: 0;
+}
+
+.pkg__favorites-clear:hover {
+	color: var(--text);
+}
+
+.pkg__favorites-clear:not([hidden]) + .pkg__count {
+	margin-inline-start: 2px;
+}
+
+/* Package contents. */
 .pkg__list {
 	list-style: none;
 	margin: 0;
 	padding: 6px;
 }
 
+.pkg__favorites-empty {
+	padding: 10px 12px;
+	font-size: 12px;
+	color: var(--text-muted);
+}
+
+.pkg__item {
+	display: flex;
+	align-items: center;
+}
+
 .pkg__link {
 	display: flex;
 	align-items: center;
+	flex: 1;
+	min-width: 0;
 	gap: 12px;
 	padding: 10px 12px;
 	border-radius: var(--radius-sm);
@@ -206,12 +324,6 @@ a {
 	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;
@@ -223,6 +335,27 @@ a {
 	white-space: nowrap;
 }
 
+.pkg__favorite {
+	padding: 11px;
+}
+
+.pkg__favorite:hover {
+	color: var(--text);
+	background: var(--surface-hover);
+}
+
+.pkg__favorite.favorite--active {
+	color: var(--search-match-text);
+}
+
+.pkg__link:focus-visible,
+.pkg__favorite:focus-visible,
+.pkg__favorites-clear:focus-visible {
+	outline: none;
+	background: var(--surface-hover);
+	box-shadow: inset 0 0 0 2px var(--border-strong);
+}
+
 @media (max-width: 600px) {
 	.app {
 		padding: 0 16px 48px;

package/theme/catalog.html

@@ -15,12 +15,19 @@
 					<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>
+				<div class="app__search" role="search">
+					<label class="app__search-label">
+						<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>
+					<button type="button" class="app__search-clear" aria-label="Clear search">
+						<svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
+							<path fill="currentColor" d="M3.22 3.22a.75.75 0 011.06 0L8 6.94l3.72-3.72a.75.75 0 111.06 1.06L9.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L8 9.06l-3.72 3.72a.75.75 0 01-1.06-1.06L6.94 8 3.22 4.28a.75.75 0 010-1.06z"/>
+						</svg>
+					</button>
+				</div>
 			</header>
 			<div class="app__list" role="list"></div>
 		</main>
@@ -43,11 +50,31 @@
 		</section>
 	</template>
 
+	<template id="manual-favorites-template">
+		<section class="pkg pkg--favorites" role="listitem">
+			<header class="pkg__header">
+				<span class="pkg__name">Favorites</span>
+				<button type="button" class="pkg__favorites-clear" aria-label="Clear all favorites" title="Clear all favorites" hidden>
+					<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+						<path fill="currentColor" d="M5.5 2.5h5l.5 1H14V5H2V3.5h3l.5-1zM3.5 6h9l-.65 8h-7.7L3.5 6zm2.25 1.5v5h1.5v-5h-1.5zm3 0v5h1.5v-5h-1.5z"/>
+					</svg>
+				</button>
+				<span class="pkg__count"></span>
+			</header>
+			<ul class="pkg__list"></ul>
+		</section>
+	</template>
+
+	<template id="manual-favorites-empty-template">
+		<li class="pkg__favorites-empty">Star tests to add them here.</li>
+	</template>
+
 	<template id="manual-test-template">
 		<li class="pkg__item">
 			<a class="pkg__link">
 				<span class="pkg__test-name"></span>
 			</a>
+			<button type="button" class="pkg__favorite"></button>
 		</li>
 	</template>
 

package/theme/catalog.ts

@@ -5,10 +5,22 @@
 
 // @ts-expect-error Virtual module provided by the manual test entries plugin.
 import { manualTestEntries, type ManualTestEntry } from 'virtual:ckeditor5-manual-entries';
+import {
+	filterFavoriteEntries,
+	getFavoriteId,
+	loadFavoriteIds,
+	saveFavoriteIds,
+	toggleFavoriteId,
+	updateFavoriteButtonState
+} from './catalog-favorites.js';
+import { filterEntries, findMatchOffsets } from './catalog-search.js';
+import { createFavoriteIcon } from './favorite-icon.js';
 
 import './catalog.css';
 
 const SEARCH_QUERY_PARAMETER = 'q';
+const SEARCH_HIGHLIGHT_NAME = 'ckeditor5-manual-search-match';
+const SEARCH_LABEL_SELECTOR = '.pkg__name, .pkg__test-name';
 
 /**
  * Root element for the manual test index application.
@@ -22,6 +34,7 @@ renderApp( appElement, manualTestEntries );
  */
 function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 	const packageCount = new Set( entries.map( entry => entry.packageName ) ).size;
+	const favoriteIds = loadFavoriteIds();
 
 	root.replaceChildren( cloneTemplateElement( 'manual-index-template' ) );
 
@@ -29,9 +42,18 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 
 	const listElement = root.querySelector<HTMLElement>( '.app__list' )!;
 	const searchInput = root.querySelector<HTMLInputElement>( '.app__search-input' )!;
+	const clearSearchButton = root.querySelector<HTMLButtonElement>( '.app__search-clear' )!;
 
 	const render = ( query: string ): void => {
-		listElement.replaceChildren( ...renderGroups( filterEntries( entries, query ) ) );
+		const normalizedQuery = query.trim().toLowerCase();
+		const renderedGroups = renderGroups( filterEntries( entries, normalizedQuery ), favoriteIds );
+
+		if ( !normalizedQuery && entries.length ) {
+			renderedGroups.unshift( renderFavoritesCard( entries, favoriteIds ) );
+		}
+
+		listElement.replaceChildren( ...renderedGroups );
+		updateSearchHighlights( listElement, normalizedQuery );
 	};
 
 	const setQuery = ( query: string ): void => {
@@ -39,9 +61,54 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 		render( query );
 	};
 
-	searchInput.addEventListener( 'input', () => {
+	const applySearchInput = (): void => {
 		updateSearchQueryInUrl( searchInput.value );
 		render( searchInput.value );
+	};
+
+	searchInput.addEventListener( 'input', applySearchInput );
+
+	listElement.addEventListener( 'click', event => {
+		const target = event.target;
+
+		if ( !( target instanceof Element ) ) {
+			return;
+		}
+
+		const favoriteActionButton = target.closest<HTMLButtonElement>( '.pkg__favorite, .pkg__favorites-clear' );
+
+		if ( !favoriteActionButton ) {
+			return;
+		}
+
+		const favoriteId = favoriteActionButton.dataset.favoriteId;
+		const shouldRestoreFocus = document.activeElement == favoriteActionButton;
+
+		if ( favoriteId ) {
+			toggleFavoriteId( favoriteIds, favoriteId );
+		} else {
+			favoriteIds.clear();
+		}
+
+		saveFavoriteIds( favoriteIds );
+		render( searchInput.value );
+
+		if ( !shouldRestoreFocus ) {
+			return;
+		}
+
+		if ( favoriteId ) {
+			focusFavoriteButton( listElement, favoriteId );
+		} else {
+			searchInput.focus();
+		}
+	} );
+
+	clearSearchButton.addEventListener( 'click', () => {
+		searchInput.value = '';
+		searchInput.focus();
+
+		applySearchInput();
 	} );
 
 	window.addEventListener( 'popstate', () => {
@@ -59,6 +126,16 @@ function renderApp( root: HTMLElement, entries: Array<ManualTestEntry> ): void {
 	setQuery( getSearchQueryFromUrl() );
 }
 
+/**
+ * Focuses the re-rendered favorite control in its package card.
+ */
+function focusFavoriteButton( root: HTMLElement, favoriteId: string ): void {
+	const favoriteButton = [ ...root.querySelectorAll<HTMLButtonElement>( '.pkg:not(.pkg--favorites) .pkg__favorite' ) ]
+		.find( button => button.dataset.favoriteId == favoriteId );
+
+	favoriteButton?.focus();
+}
+
 /**
  * Returns the current search query from the page URL.
  */
@@ -86,25 +163,46 @@ function updateSearchQueryInUrl( query: string ): void {
 }
 
 /**
- * Returns entries matching the current search query.
+ * Highlights query matches in the currently rendered package and test names.
  */
-function filterEntries( entries: Array<ManualTestEntry>, query: string ): Array<ManualTestEntry> {
-	const normalized = query.trim().toLowerCase();
+function updateSearchHighlights( root: HTMLElement, normalizedQuery: string ): void {
+	if ( !( 'highlights' in CSS ) ) {
+		return;
+	}
 
-	if ( !normalized ) {
-		return entries;
+	CSS.highlights.delete( SEARCH_HIGHLIGHT_NAME );
+
+	if ( !normalizedQuery ) {
+		return;
 	}
 
-	return entries.filter( entry =>
-		entry.packageName.toLowerCase().includes( normalized ) ||
-		entry.slug.toLowerCase().includes( normalized )
-	);
+	const ranges: Array<Range> = [];
+
+	for ( const label of root.querySelectorAll<HTMLElement>( SEARCH_LABEL_SELECTOR ) ) {
+		const textNode = label.firstChild;
+
+		if ( !textNode || textNode.nodeType != Node.TEXT_NODE ) {
+			continue;
+		}
+
+		for ( const { start, end } of findMatchOffsets( textNode.textContent!, normalizedQuery ) ) {
+			const range = new Range();
+
+			range.setStart( textNode, start );
+			range.setEnd( textNode, end );
+			ranges.push( range );
+		}
+	}
+
+	if ( ranges.length ) {
+		CSS.highlights.set( SEARCH_HIGHLIGHT_NAME, new Highlight( ...ranges ) );
+	}
 }
 
 /**
  * Groups visible entries by package and renders package cards.
  */
-function renderGroups( entries: Array<ManualTestEntry> ): Array<HTMLElement> {
+function renderGroups( entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): Array<HTMLElement> {
 	if ( !entries.length ) {
 		return [ cloneTemplateElement( 'manual-empty-template' ) ];
 	}
@@ -118,32 +216,64 @@ function renderGroups( entries: Array<ManualTestEntry> ): Array<HTMLElement> {
 		groups.set( entry.packageName, group );
 	}
 
-	return [ ...groups.entries() ].map( ( [ packageName, packageEntries ] ) => renderPackageCard( packageName, packageEntries ) );
+	return [ ...groups.entries() ].map( ( [ packageName, packageEntries ] ) =>
+		renderPackageCard( packageName, packageEntries, favoriteIds )
+	);
 }
 
 /**
  * Renders a single package card with all tests belonging to that package.
  */
-function renderPackageCard( packageName: string, entries: Array<ManualTestEntry> ): HTMLElement {
+function renderPackageCard( packageName: string, entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): 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 ) ) );
+	list.replaceChildren( ...entries.map( entry => renderTestItem( entry, favoriteIds ) ) );
 
 	return packageCard;
 }
 
+/**
+ * Renders the favorites card, including its empty state.
+ */
+function renderFavoritesCard( entries: Array<ManualTestEntry>, favoriteIds: Set<string> ): HTMLElement {
+	const favoritesCard = cloneTemplateElement( 'manual-favorites-template' );
+	const favoriteEntries = filterFavoriteEntries( entries, favoriteIds );
+	const list = favoritesCard.querySelector<HTMLElement>( '.pkg__list' )!;
+	const clearButton = favoritesCard.querySelector<HTMLButtonElement>( '.pkg__favorites-clear' )!;
+
+	favoritesCard.querySelector<HTMLElement>( '.pkg__header' )!.prepend( createFavoriteIcon( 'pkg__favorites-icon' ) );
+	favoritesCard.querySelector<HTMLElement>( '.pkg__count' )!.textContent = String( favoriteEntries.length );
+	clearButton.hidden = !favoriteEntries.length;
+
+	if ( favoriteEntries.length ) {
+		list.replaceChildren( ...favoriteEntries.map( entry => renderTestItem( entry, favoriteIds, true ) ) );
+	} else {
+		list.replaceChildren( cloneTemplateElement( 'manual-favorites-empty-template' ) );
+	}
+
+	return favoritesCard;
+}
+
 /**
  * Renders a single test link inside a package card.
  */
-function renderTestItem( entry: ManualTestEntry ): HTMLElement {
+function renderTestItem( entry: ManualTestEntry, favoriteIds: Set<string>, showPackageName = false ): HTMLElement {
 	const testItem = cloneTemplateElement( 'manual-test-template' );
 	const link = testItem.querySelector<HTMLAnchorElement>( '.pkg__link' )!;
+	const favoriteButton = testItem.querySelector<HTMLButtonElement>( '.pkg__favorite' )!;
+	const favoriteId = getFavoriteId( entry );
 
 	link.href = entry.href;
-	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = entry.slug;
+
+	testItem.querySelector<HTMLElement>( '.pkg__test-name' )!.textContent = showPackageName ? favoriteId : entry.slug;
+
+	favoriteButton.dataset.favoriteId = favoriteId;
+	favoriteButton.append( createFavoriteIcon( 'pkg__favorite-icon' ) );
+
+	updateFavoriteButtonState( favoriteButton, favoriteIds, favoriteId );
 
 	return testItem;
 }

package/theme/favorite-icon.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const FAVORITE_ICON_PATH = 'M8 1.5l1.94 3.93 4.34.63-3.14 3.06.74 4.32L8 11.4l-3.88 2.04.74-4.32-3.14-3.06 4.34-.63L8 1.5z';
+
+/**
+ * Creates the favorite star icon used by the catalog and manual test header.
+ */
+export function createFavoriteIcon( className: string ): SVGSVGElement {
+	const icon = document.createElementNS( SVG_NAMESPACE, 'svg' );
+	const path = document.createElementNS( SVG_NAMESPACE, 'path' );
+
+	icon.classList.add( className );
+	icon.setAttribute( 'viewBox', '0 0 16 16' );
+	icon.setAttribute( 'width', '16' );
+	icon.setAttribute( 'height', '16' );
+	icon.setAttribute( 'aria-hidden', 'true' );
+	path.setAttribute( 'd', FAVORITE_ICON_PATH );
+	icon.append( path );
+
+	return icon;
+}

package/theme/manual-bootstrap.css

@@ -7,7 +7,7 @@
 
 .refresh-prompt {
 	position: fixed;
-	top: calc( var( --ck-manual-header-height, 44px ) / 1.25 );
+	top: 16px;
 	left: 50%;
 	z-index: 100000;
 	box-sizing: border-box;
@@ -20,14 +20,14 @@
 	cursor: pointer;
 	opacity: 0;
 	pointer-events: none;
-	transform: translate(-50%, calc( -100% - var( --ck-manual-header-height, 44px ) ) );
+	transform: translate(-50%, calc( -100% - 16px ) );
 	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%);
+	transform: translate(-50%, 0);
 }
 
 .refresh-prompt:hover {

package/theme/manual-header.css

@@ -7,15 +7,9 @@
 
 :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;
@@ -37,7 +31,7 @@
 	padding: 8px 14px;
 	border: 0;
 	background: transparent;
-	border-radius: 999px;
+	border-radius: 6px;
 	text-decoration: none;
 	color: inherit;
 	font: inherit;
@@ -74,7 +68,7 @@
 	align-items: center;
 	flex: 1 1 auto;
 	gap: 10px;
-	padding: 8px 14px;
+	padding: 0 14px;
 	overflow: hidden;
 	min-width: 0;
 }
@@ -96,6 +90,29 @@
 	white-space: nowrap;
 }
 
+.favorite {
+	flex-shrink: 0;
+	justify-content: center;
+	padding: 8px;
+	margin-inline-start: -8px;
+	color: #737373;
+}
+
+.favorite__icon {
+	fill: none;
+	stroke: currentColor;
+	stroke-linejoin: round;
+	stroke-width: 1.5px;
+}
+
+.favorite--active {
+	color: #6d28d9;
+}
+
+.favorite--active .favorite__icon {
+	fill: currentColor;
+}
+
 :host( :not( [ has-instructions ] ) ) .instructions-only {
 	display: none;
 }
@@ -119,7 +136,7 @@
 	--panel-transition-duration: 0.18s;
 
 	position: fixed;
-	top: var(--ck-manual-header-height);
+	top: 0;
 	right: 0;
 	bottom: 0;
 	z-index: 99998;