Migrate 'headless' demo to NIM.

headless/README.md

@@ -23,5 +23,5 @@ cd ckeditor5-demos/headless && yarn
 3. Start the demo:
 
 ```shell
-yarn start
+yarn dev
 ```

headless/index.html

@@ -20,6 +20,6 @@ <h1>Headless editor</h1>
 			<div id="cke5-headless"></div>
 		</div>
 
-		<script src="./dist/main.js"></script>
+		<script type="module" src="index.tsx"></script>
 	</body>
 </html>

headless/index.ts

@@ -0,0 +1,100 @@
+/**
+ * @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 {
+	DecoupledEditor,
+	Alignment,
+	Autoformat,
+	BlockQuote,
+	Bold,
+	Code,
+	CodeBlock,
+	Essentials,
+	Heading,
+	Image,
+	ImageCaption,
+	ImageResize,
+	ImageStyle,
+	ImageToolbar,
+	Indent,
+	IndentBlock,
+	Italic,
+	Link,
+	List,
+	ListProperties,
+	Paragraph,
+	PasteFromOffice,
+	PictureEditing,
+	RemoveFormat,
+	Strikethrough,
+	Table,
+	TableToolbar,
+	TextTransformation,
+	Underline,
+} from 'ckeditor5';
+
+import 'ckeditor5/index.css';
+
+class HeadlessEditor extends DecoupledEditor {}
+
+HeadlessEditor.builtinPlugins = [
+	Alignment,
+	Autoformat,
+	BlockQuote,
+	Bold,
+	Code,
+	CodeBlock,
+	Essentials,
+	Heading,
+	Image,
+	ImageCaption,
+	ImageResize,
+	ImageStyle,
+	ImageToolbar,
+	Indent,
+	IndentBlock,
+	Italic,
+	Link,
+	List,
+	ListProperties,
+	Paragraph,
+	PasteFromOffice,
+	PictureEditing,
+	RemoveFormat,
+	Strikethrough,
+	Table,
+	TableToolbar,
+	TextTransformation,
+	Underline,
+];
+
+// Editor configuration.
+HeadlessEditor.defaultConfig = {
+	codeBlock: {
+		languages: [
+			{ language: 'css', label: 'CSS' },
+			{ language: 'html', label: 'HTML' },
+			{ language: 'javascript', label: 'JavaScript' },
+			{ language: 'php', label: 'PHP' },
+		],
+	},
+	image: {
+		resizeUnit: 'px',
+		toolbar: [
+			'imageStyle:inline',
+			'imageStyle:wrapText',
+			'imageStyle:breakText',
+			'|',
+			'toggleImageCaption',
+			'imageTextAlternative',
+		],
+	},
+	table: {
+		contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
+	},
+	language: 'en',
+};
+
+export default HeadlessEditor;

headless/index.jsx → headless/index.tsx

@@ -4,9 +4,9 @@
  */
 
 import React, { useState, useEffect, StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import HeadlessEditor from '.';
-import { createRoot } from 'react-dom/client';
 
 function App() {
 	const [editor, setEditor] = useState(null);
@@ -59,7 +59,7 @@ function App() {
 				onReady={(editor) => {
 					setEditor(editor);
 
-					window.editor = editor;
+					(window as any).editor = editor;
 				}}
 			/>
 		</div>
@@ -140,12 +140,19 @@ function EditorToolbar({ editor }) {
 	);
 }
 
+type EditorToolbarButtonProps = {
+	label: string;
+	editor: HeadlessEditor;
+	commandName: string;
+	commandValue?: string;
+};
+
 function EditorToolbarButton({
 	label,
 	editor,
 	commandName,
-	commandValue = null,
-}) {
+	commandValue,
+}: EditorToolbarButtonProps) {
 	const command = editor ? editor.commands.get(commandName) : null;
 	const [isOn, setIsOn] = useState(false);
 	const [isEnabled, setIsEnabled] = useState(true);
@@ -156,15 +163,15 @@ function EditorToolbarButton({
 		}
 
 		function handleValueChange() {
-			if (typeof command.value === 'boolean') {
-				setIsOn(!!command.value);
+			if (typeof command!.value === 'boolean') {
+				setIsOn(!!command!.value);
 			} else {
-				setIsOn(commandValue === command.value);
+				setIsOn(commandValue === command!.value);
 			}
 		}
 
 		function handleIsEnabledChange() {
-			setIsEnabled(command.isEnabled);
+			setIsEnabled(command!.isEnabled);
 		}
 
 		command.on('change:value', handleValueChange);

headless/package.json

@@ -1,59 +1,25 @@
 {
 	"name": "headless",
-	"version": "0.0.1",
-	"main": "index.js",
+	"version": "0.1.0",
 	"repository": "https://github.com/ckeditor/ckeditor5-demos",
 	"author": "CKSource (http://cksource.com/)",
 	"license": "GPL-2.0-or-later",
 	"private": true,
+	"type": "module",
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"scripts": {
+		"dev": "vite --open",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
 	"devDependencies": {
-		"@babel/core": "^7.20.7",
-		"@babel/preset-env": "^7.20.2",
-		"@babel/preset-react": "^7.18.6",
-		"@ckeditor/ckeditor5-alignment": "40.2.0",
-		"@ckeditor/ckeditor5-autoformat": "40.2.0",
-		"@ckeditor/ckeditor5-basic-styles": "40.2.0",
-		"@ckeditor/ckeditor5-block-quote": "40.2.0",
-		"@ckeditor/ckeditor5-code-block": "40.2.0",
-		"@ckeditor/ckeditor5-core": "40.2.0",
-		"@ckeditor/ckeditor5-dev-utils": "^39.5.0",
-		"@ckeditor/ckeditor5-editor-decoupled": "40.2.0",
-		"@ckeditor/ckeditor5-engine": "40.2.0",
-		"@ckeditor/ckeditor5-enter": "40.2.0",
-		"@ckeditor/ckeditor5-essentials": "40.2.0",
-		"@ckeditor/ckeditor5-heading": "40.2.0",
-		"@ckeditor/ckeditor5-image": "40.2.0",
-		"@ckeditor/ckeditor5-indent": "40.2.0",
-		"@ckeditor/ckeditor5-link": "40.2.0",
-		"@ckeditor/ckeditor5-list": "40.2.0",
-		"@ckeditor/ckeditor5-paragraph": "40.2.0",
-		"@ckeditor/ckeditor5-paste-from-office": "40.2.0",
 		"@ckeditor/ckeditor5-react": "5.0.5",
-		"@ckeditor/ckeditor5-remove-format": "40.2.0",
-		"@ckeditor/ckeditor5-table": "40.2.0",
-		"@ckeditor/ckeditor5-theme-lark": "40.2.0",
-		"@ckeditor/ckeditor5-typing": "40.2.0",
-		"@ckeditor/ckeditor5-ui": "40.2.0",
-		"@ckeditor/ckeditor5-undo": "40.2.0",
-		"@ckeditor/ckeditor5-utils": "40.2.0",
-		"babel-loader": "^9.1.0",
-		"css-loader": "^6.7.3",
-		"postcss": "^8.4.19",
-		"postcss-loader": "^4.3.0",
-		"raw-loader": "^4.0.2",
+		"ckeditor5": "nightly",
+		"ckeditor5-premium-features": "nightly",
+		"vite": "^5.0.0",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"sass": "^1.57.1",
-		"sass-loader": "^13.2.0",
-		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^4.2.3",
-		"webpack": "^5.75.0",
-		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.11.1"
-	},
-	"scripts": {
-		"build": "webpack --mode production",
-		"build-dev": "webpack --mode development",
-		"start": "webpack serve --open /index.html --mode development"
+		"react-dom": "^18.2.0"
 	}
 }