@ckeditor/ckeditor5-dev-manual-server 56.2.0

package/theme/shell.css

@@ -0,0 +1,361 @@
+.manual-test-container {
+	min-width: 0;
+	box-sizing: border-box;
+	padding: calc( var( --shell-height, 44px ) + 8px ) 8px 8px;
+}
+
+body.shell-enabled {
+	box-sizing: border-box;
+}
+
+.shell {
+	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%);
+}
+
+.shell__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;
+}
+
+.shell__pill:hover {
+	background: rgb(0 0 0 / 5%);
+}
+
+.shell__pill:active {
+	background: rgb(0 0 0 / 10%);
+}
+
+.shell__pill:focus-visible {
+	outline: 2px solid rgb(0 0 0 / 30%);
+	outline-offset: 1px;
+}
+
+.shell__divider {
+	flex-shrink: 0;
+	align-self: center;
+	width: 1px;
+	height: 16px;
+	background: rgb(0 0 0 / 10%);
+	margin: 0 2px;
+}
+
+.shell__label {
+	display: inline-flex;
+	align-items: center;
+	flex: 1 1 auto;
+	gap: 10px;
+	padding: 8px 14px;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.shell__label-name {
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.shell__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;
+}
+
+.manual-refresh-prompt {
+	position: fixed;
+	top: calc( var( --shell-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( --shell-height, 44px ) ) );
+	transition: transform 0.18s ease-out, opacity 0.18s ease-out, background 0.1s;
+}
+
+.manual-refresh-prompt--visible {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translate(-50%, -50%);
+}
+
+.manual-refresh-prompt:hover {
+	background: #bfdbfe;
+}
+
+.manual-refresh-prompt:active {
+	background: #93c5fd;
+}
+
+.manual-refresh-prompt:focus-visible {
+	outline: 2px solid #2563eb;
+	outline-offset: 1px;
+}
+
+@media (max-width: 600px) {
+	.shell {
+		font-size: 11px;
+	}
+
+	.shell__label-package {
+		display: none;
+	}
+
+	.shell__label-name {
+		max-width: 20ch;
+	}
+}
+
+.shell-instructions {
+	--shell-instructions-width: min(420px, 45vw);
+	--shell-instructions-transition-duration: 0.18s;
+
+	position: fixed;
+	top: 44px;
+	right: 0;
+	bottom: 0;
+	z-index: 99998;
+	order: 2;
+	align-self: start;
+	flex: 0 0 0;
+	width: 0;
+	height: 0;
+	min-height: 0;
+	padding: 0;
+	border: 0;
+	background: #fff;
+	color: #0a0a0a;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	line-height: 1.6;
+	overflow: hidden;
+	transition:
+		flex-basis var(--shell-instructions-transition-duration) ease-out,
+		width var(--shell-instructions-transition-duration) ease-out;
+}
+
+.shell-instructions--open,
+.shell-instructions--closing {
+	align-self: stretch;
+	height: auto;
+	border-left: 1px solid rgb(0 0 0 / 8%);
+	box-shadow: -8px 0 24px rgb(0 0 0 / 8%);
+}
+
+.shell-instructions--open {
+	flex-basis: var(--shell-instructions-width);
+	width: var(--shell-instructions-width);
+}
+
+.shell-instructions__inner {
+	display: flex;
+	flex-direction: column;
+	width: var(--shell-instructions-width);
+	height: 100%;
+}
+
+.shell-instructions__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;
+}
+
+.shell-instructions__titles {
+	min-width: 0;
+}
+
+.shell-instructions__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;
+}
+
+.shell-instructions__package {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 12px;
+	color: #737373;
+}
+
+.shell-instructions__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;
+}
+
+.shell-instructions__close:hover {
+	background: rgb(0 0 0 / 5%);
+	color: #0a0a0a;
+}
+
+.shell-instructions__close:focus-visible {
+	outline: 2px solid rgb(0 0 0 / 30%);
+	outline-offset: 1px;
+}
+
+.shell-instructions__body {
+	padding: 20px 24px 28px;
+	font-size: 14px;
+	overflow-y: auto;
+	min-height: 0;
+}
+
+.shell-instructions__body h1,
+.shell-instructions__body h2,
+.shell-instructions__body h3,
+.shell-instructions__body h4,
+.shell-instructions__body h5,
+.shell-instructions__body h6 {
+	margin: 24px 0 8px;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	line-height: 1.3;
+}
+
+.shell-instructions__body h1 { font-size: 20px; }
+.shell-instructions__body h2 { font-size: 17px; }
+.shell-instructions__body h3 { font-size: 15px; }
+.shell-instructions__body h4,
+.shell-instructions__body h5,
+.shell-instructions__body h6 { font-size: 14px; }
+
+.shell-instructions__body > :first-child { margin-top: 0; }
+.shell-instructions__body > :last-child { margin-bottom: 0; }
+
+.shell-instructions__body p {
+	margin: 8px 0;
+}
+
+.shell-instructions__body ul,
+.shell-instructions__body ol {
+	margin: 8px 0;
+	padding-left: 24px;
+}
+
+.shell-instructions__body li {
+	margin: 3px 0;
+}
+
+.shell-instructions__body code {
+	padding: 1px 6px;
+	border-radius: 4px;
+	background: #f0f0f0;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 0.9em;
+}
+
+.shell-instructions__body pre {
+	margin: 12px 0;
+	padding: 12px 14px;
+	border-radius: 8px;
+	background: #f5f5f5;
+	overflow-x: auto;
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.shell-instructions__body pre code {
+	padding: 0;
+	background: transparent;
+	font-size: inherit;
+}
+
+.shell-instructions__body a {
+	color: #1d4ed8;
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.shell-instructions__body blockquote {
+	margin: 12px 0;
+	padding: 4px 14px;
+	border-left: 3px solid rgb(0 0 0 / 15%);
+	color: #525252;
+}
+
+.shell-instructions__body table {
+	margin: 12px 0;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+
+.shell-instructions__body th,
+.shell-instructions__body td {
+	padding: 6px 10px;
+	border: 1px solid rgb(0 0 0 / 10%);
+	text-align: left;
+}
+
+.shell-instructions__body th {
+	background: #f5f5f5;
+	font-weight: 600;
+}
+
+.shell-instructions__body hr {
+	margin: 16px 0;
+	border: 0;
+	border-top: 1px solid rgb(0 0 0 / 10%);
+}
+
+@media (max-width: 800px) {
+	.shell-instructions {
+		--shell-instructions-width: min(360px, 70vw);
+	}
+}

package/theme/shell.html

@@ -0,0 +1,46 @@
+<!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></title>
+	<script type="module" data-manual-shell-script></script>
+	<script type="module" data-manual-test-script></script>
+</head>
+<body>
+	<template id="manual-shell-template">
+		<div class="shell">
+			<a class="shell__pill" href="/" title="Back to test index">&larr; All tests</a>
+			<span class="shell__divider" aria-hidden="true"></span>
+			<span class="shell__label">
+				<span class="shell__label-name" data-manual-shell-field="displayName"></span>
+				<span class="shell__label-package" data-manual-shell-field="packageName"></span>
+			</span>
+			<span class="shell__divider" data-manual-shell-section="instructions" aria-hidden="true"></span>
+			<button type="button" class="shell__pill" data-manual-shell-section="instructions" data-shell-action="show-instructions" aria-expanded="false">
+				Instructions
+			</button>
+		</div>
+
+		<aside class="shell-instructions" data-manual-shell-section="instructions" aria-hidden="true" inert>
+			<div class="shell-instructions__inner">
+				<header class="shell-instructions__header">
+					<div class="shell-instructions__titles">
+						<h1 class="shell-instructions__title" data-manual-shell-field="displayName"></h1>
+						<code class="shell-instructions__package" data-manual-shell-field="packageName"></code>
+					</div>
+					<button type="button" class="shell-instructions__close" data-shell-action="close-instructions" aria-label="Close">
+						<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+							<path fill="currentColor" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+						</svg>
+					</button>
+				</header>
+				<article class="shell-instructions__body"></article>
+			</div>
+		</aside>
+	</template>
+
+	<script id="manual-shell-data" type="application/json"></script>
+</body>
+</html>

package/theme/shell.ts

@@ -0,0 +1,179 @@
+/**
+ * @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 './shell.css';
+
+declare const LICENSE_KEY: string;
+
+interface ManualData {
+	displayName: string;
+	instructionsHtml: string;
+	packageName: string;
+}
+
+interface ViteHotContextLike {
+	on( event: string, callback: () => void ): void;
+}
+
+const MANUAL_REFRESH_EVENT_NAME = 'ckeditor5-manual:refresh-available';
+const globalTarget = window as any;
+
+renderManual();
+setupManualTestContainerState();
+setupManualRefreshPrompt();
+
+// 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;
+globalTarget.CKEDITOR_GLOBAL_LICENSE_KEY ||= LICENSE_KEY;
+
+/**
+ * Clones the injected Shell template, fills it with current test metadata,
+ * and prepends it to the page before the test content is wrapped.
+ */
+function renderManual(): void {
+	const template = document.querySelector<HTMLTemplateElement>( '#manual-shell-template' )!;
+	const dataElement = document.querySelector<HTMLScriptElement>( '#manual-shell-data' )!;
+	const data = JSON.parse( dataElement.textContent! ) as ManualData;
+	const fragment = template.content.cloneNode( true ) as DocumentFragment;
+
+	for ( const element of fragment.querySelectorAll<HTMLElement>( '[data-manual-shell-field="displayName"]' ) ) {
+		element.textContent = data.displayName;
+	}
+
+	for ( const element of fragment.querySelectorAll<HTMLElement>( '[data-manual-shell-field="packageName"]' ) ) {
+		element.textContent = data.packageName;
+	}
+
+	if ( data.instructionsHtml ) {
+		fragment.querySelector<HTMLElement>( '.shell-instructions__body' )!.innerHTML = data.instructionsHtml;
+	} else {
+		for ( const element of fragment.querySelectorAll<HTMLElement>( '[data-manual-shell-section="instructions"]' ) ) {
+			element.remove();
+		}
+	}
+
+	template.remove();
+	dataElement.remove();
+	document.body.prepend( fragment );
+}
+
+/**
+ * Sets up shell-related state for the manual test container injected by the HTML transform.
+ */
+function setupManualTestContainerState(): void {
+	document.body.classList.add( 'shell-enabled' );
+
+	if ( document.querySelector( '.shell-instructions' ) ) {
+		document.body.classList.add( 'shell-has-instructions' );
+	}
+}
+
+/**
+ * Shows a manual refresh prompt when the dev server reports source changes.
+ */
+function setupManualRefreshPrompt(): void {
+	const hot = ( import.meta as ImportMeta & { hot?: ViteHotContextLike } ).hot;
+
+	if ( !hot ) {
+		return;
+	}
+
+	const button = document.createElement( 'button' );
+
+	button.type = 'button';
+	button.className = 'manual-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() );
+
+	document.body.appendChild( button );
+
+	hot.on( MANUAL_REFRESH_EVENT_NAME, () => {
+		button.removeAttribute( 'aria-hidden' );
+		button.removeAttribute( 'tabindex' );
+		button.classList.add( 'manual-refresh-prompt--visible' );
+	} );
+}
+
+/**
+ * Opens or closes the instructions panel and synchronizes related accessibility state.
+ */
+function toggleInstructions( isOpen: boolean ): void {
+	const panel = document.querySelector<HTMLElement>( '.shell-instructions' );
+	const trigger = document.querySelector<HTMLElement>( '[data-shell-action="show-instructions"]' );
+
+	if ( !panel || !trigger ) {
+		return;
+	}
+
+	panel.classList.remove( 'shell-instructions--closing' );
+
+	if ( !isOpen && panel.classList.contains( 'shell-instructions--open' ) ) {
+		panel.classList.add( 'shell-instructions--closing' );
+	}
+
+	panel.classList.toggle( 'shell-instructions--open', isOpen );
+	panel.setAttribute( 'aria-hidden', String( !isOpen ) );
+	panel.toggleAttribute( 'inert', !isOpen );
+	trigger.setAttribute( 'aria-expanded', String( isOpen ) );
+}
+
+/**
+ * Handles clicks on Shell action buttons.
+ */
+document.addEventListener( 'click', event => {
+	const target = event.target;
+
+	if ( !( target instanceof Element ) ) {
+		return;
+	}
+
+	const trigger = target.closest<HTMLElement>( '[data-shell-action]' );
+
+	if ( !trigger ) {
+		return;
+	}
+
+	if ( trigger.dataset.shellAction == 'show-instructions' ) {
+		const panel = document.querySelector<HTMLElement>( '.shell-instructions' )!;
+
+		toggleInstructions( !panel.classList.contains( 'shell-instructions--open' ) );
+	} else if ( trigger.dataset.shellAction == 'close-instructions' ) {
+		toggleInstructions( false );
+	}
+} );
+
+/**
+ * Cleans up the closing state after the instructions panel transition finishes.
+ */
+document.addEventListener( 'transitionend', event => {
+	const target = event.target;
+
+	if (
+		event.propertyName == 'width' &&
+		target instanceof Element &&
+		target.classList.contains( 'shell-instructions' ) &&
+		!target.classList.contains( 'shell-instructions--open' )
+	) {
+		target.classList.remove( 'shell-instructions--closing' );
+	}
+} );
+
+/**
+ * Allows closing the instructions panel with Escape.
+ */
+document.addEventListener( 'keydown', event => {
+	if ( event.key == 'Escape' ) {
+		toggleInstructions( false );
+	}
+} );