Migrate demos with external plugins to new installation methods

.gitignore

@@ -0,0 +1 @@
+builds

ai-assistant/README.md

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

ai-assistant/index.html

@@ -149,7 +149,7 @@ <h3>Quick translations 🌐</h3>
 			</div>
 		</div>
 
-		<script src="https://cdn.ckbox.io/CKBox/2.0.0/ckbox.js"></script>
-		<script src="./dist/main.js"></script>
+		<script src="https://cdn.ckbox.io/CKBox/2.4.0/ckbox.js"></script>
+		<script type="module" src="index.js"></script>
 	</body>
 </html>

ai-assistant/index.js

@@ -3,78 +3,102 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-// AI Assistant require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features
+// CKEditor Commercial Features require a license key to work properly.
+// * You can get a trial license key: https://orders.ckeditor.com/trial/premium-features.
+// * Or you can comment out (disable) the plugins imported from the "ckeditor5-premium-features" package.
 const LICENSE_KEY = '';
 
-// https://ckeditor.com/docs/ckeditor5/40.2.0/features/ai-assistant/ai-assistant-integration.html#integrating-with-the-proxy-endpoint
+if (!LICENSE_KEY) {
+	alert(
+		'CKEditor Commercial Features included in this demo require a license key.\n' +
+		'Check the index.ts file for more information.'
+	);
+}
+
+// AI Assistant requires additional configuration.
+// See https://ckeditor.com/docs/ckeditor5/latest/features/ai-assistant/ai-assistant-integration.html#integrating-with-the-proxy-endpoint
 const AI_API_URL = '';
 
-/* You must provide a valid token URL in order to use the CKBox application.
-After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
-https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint */
+if (!AI_API_URL) {
+	alert(
+		'CKEditor AI Assistant included in this demo requires additional configuration.\n' +
+		'Check the index.ts file for more information.'
+	);
+}
+
+// CKBox plugin requires a valid token URL in order to use the CKBox application.
+// After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
+// https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint
 const CKBOX_TOKEN_URL = '';
 
-// Editor creators
-import AiAssistantDemoEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import {
+	ClassicEditor,
+	Alignment,
+	AutoImage,
+	BlockQuote,
+	Bold,
+	CKBox,
+	Code,
+	CodeBlock,
+	CloudServices,
+	CloudServicesUploadAdapter,
+	List,
+	ListProperties,
+	EasyImage,
+	Essentials,
+	FindAndReplace,
+	FontBackgroundColor,
+	FontColor,
+	FontFamily,
+	FontSize,
+	GeneralHtmlSupport,
+	Heading,
+	Italic,
+	Image,
+	ImageCaption,
+	ImageResize,
+	ImageToolbar,
+	ImageUpload,
+	ImageInsert,
+	Link,
+	LinkImage,
+	AutoLink,
+	Mention,
+	Underline,
+	PictureEditing,
+	Paragraph,
+	PasteFromOffice,
+	RemoveFormat,
+	SpecialCharacters,
+	SpecialCharactersEssentials,
+	Strikethrough,
+	Subscript,
+	Superscript,
+	Table,
+	TableCaption,
+	TableCellProperties,
+	TableProperties,
+	TableToolbar,
+	TableColumnResize,
+} from 'ckeditor5';
 
-// Features
-import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
-import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
-import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
-import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox';
-import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
-import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
-import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
-import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
-import ExportPdf from '@ckeditor/ckeditor5-export-pdf/src/exportpdf';
-import ExportWord from '@ckeditor/ckeditor5-export-word/src/exportword';
-import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';
-import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
-import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
-import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
-import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
-import Heading from '@ckeditor/ckeditor5-heading/src/heading';
-import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
-import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
-import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
-import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
-import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
-import AutoLink from '@ckeditor/ckeditor5-link/src/autolink';
-import Mention from '@ckeditor/ckeditor5-mention/src/mention';
-import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
-import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
-import PasteFromOfficeEnhanced from '@ckeditor/ckeditor5-paste-from-office-enhanced/src/pastefromofficeenhanced';
-import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
-import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand';
-import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
-import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
-import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
-import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
-import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
-import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
-import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize';
-import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
+import {
+	ExportPdf,
+	ExportWord,
+	ImportWord,
+	AIAssistant,
+	OpenAITextAdapter,
+	SlashCommand,
+	PasteFromOfficeEnhanced,
+} from 'ckeditor5-premium-features';
 
-import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
-import { DocumentList, DocumentListProperties } from '@ckeditor/ckeditor5-list';
-import ImportWord from '@ckeditor/ckeditor5-import-word/src/importword';
+import 'ckeditor5/ckeditor5.css';
+import 'ckeditor5-premium-features/ckeditor5-premium-features.css';
 
-import AIAssistant from '@ckeditor/ckeditor5-ai/src/aiassistant';
-import OpenAITextAdapter from '@ckeditor/ckeditor5-ai/src/adapters/openaitextadapter';
+import coreStylesheets from 'ckeditor5/ckeditor5.css?url';
+import premiumStylesheets from 'ckeditor5-premium-features/ckeditor5-premium-features.css?url';
 
-AiAssistantDemoEditor.create(
+ClassicEditor.create(
 	document.querySelector('#cke5-ai-assistant-demo'),
 	{
 		plugins: [
@@ -83,10 +107,7 @@ AiAssistantDemoEditor.create(
 			AutoImage,
 			BlockQuote,
 			Bold,
-			/* You must provide a valid token URL in order to use the CKBox application.
-			After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
-			https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint */
-			// CKBox,
+			...(CKBOX_TOKEN_URL ? [CKBox] : []),
 			PictureEditing,
 			Code,
 			CodeBlock,
@@ -113,8 +134,8 @@ AiAssistantDemoEditor.create(
 			Link,
 			LinkImage,
 			AutoLink,
-			DocumentList,
-			DocumentListProperties,
+			List,
+			ListProperties,
 			Mention,
 			OpenAITextAdapter,
 			Paragraph,
@@ -134,7 +155,7 @@ AiAssistantDemoEditor.create(
 			TableToolbar,
 			TableColumnResize,
 			Underline,
-			UploadAdapter,
+			CloudServicesUploadAdapter,
 		],
 		toolbar: {
 			items: [
@@ -169,10 +190,7 @@ AiAssistantDemoEditor.create(
 				'blockQuote',
 				'|',
 				'insertImage',
-				/* You must provide a valid token URL in order to use the CKBox application.
-				After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
-				https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint*/
-				// 'ckbox',
+				'ckbox',
 				'insertTable',
 				'codeBlock',
 				'specialCharacters',
@@ -240,22 +258,8 @@ AiAssistantDemoEditor.create(
 				'|',
 				'resizeImage',
 			],
-			upload: {
-				panel: {
-					items: ['insertImageViaUrl'],
-				},
-			},
 			insert: {
-				integrations: ['url'],
-			},
-		},
-		typing: {
-			transformations: {
-				extra: [
-					{ from: ':)', to: '🙂' },
-					{ from: ':+1:', to: '👍' },
-					{ from: ':tada:', to: '🎉' },
-				],
+				integrations: ['upload', 'assetManager', 'url'],
 			},
 		},
 		table: {
@@ -301,7 +305,7 @@ AiAssistantDemoEditor.create(
 				editor.getData({
 					showSuggestionHighlights: true,
 				}),
-			stylesheets: ['EDITOR_STYLES'],
+			stylesheets: [coreStylesheets, premiumStylesheets],
 			converterOptions: {
 				format: 'A4',
 				margin_top: '20mm',
@@ -317,30 +321,29 @@ AiAssistantDemoEditor.create(
 				editor.getData({
 					showSuggestionHighlights: true,
 				}),
-			stylesheets: ['EDITOR_STYLES'],
+			stylesheets: [coreStylesheets, premiumStylesheets],
 			converterOptions: {
 				format: 'A4',
 				margin_top: '20mm',
 				margin_bottom: '20mm',
 				margin_right: '12mm',
 				margin_left: '12mm',
-				page_orientation: 'portrait',
+				orientation: 'portrait',
 			},
 			tokenUrl: false,
 		},
 		// AI configuration will land here:
 		ai: {
 			openAI: {
 				apiUrl: AI_API_URL,
-				authKey: LICENSE_KEY,
 			},
 		},
 		licenseKey: LICENSE_KEY,
 	}
 )
-	.then((editor) => {
-		window.editor = editor;
-	})
-	.catch((error) => {
-		console.error(error.stack);
-	});
+.then((editor) => {
+	window.editor = editor;
+})
+.catch((error) => {
+	console.error(error.stack);
+});

ai-assistant/package.json

@@ -1,55 +1,22 @@
 {
 	"name": "ai-assistant",
-	"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,
-	"devDependencies": {
-		"@ckeditor/ckeditor5-adapter-ckfinder": "^40.2.0",
-		"@ckeditor/ckeditor5-ai": "^40.2.0",
-		"@ckeditor/ckeditor5-alignment": "^40.2.0",
-		"@ckeditor/ckeditor5-basic-styles": "^40.2.0",
-		"@ckeditor/ckeditor5-block-quote": "^40.2.0",
-		"@ckeditor/ckeditor5-ckbox": "^40.2.0",
-		"@ckeditor/ckeditor5-cloud-services": "^40.2.0",
-		"@ckeditor/ckeditor5-code-block": "^40.2.0",
-		"@ckeditor/ckeditor5-dev-utils": "^39.5.0",
-		"@ckeditor/ckeditor5-easy-image": "^40.2.0",
-		"@ckeditor/ckeditor5-editor-classic": "^40.2.0",
-		"@ckeditor/ckeditor5-essentials": "^40.2.0",
-		"@ckeditor/ckeditor5-export-pdf": "^40.2.0",
-		"@ckeditor/ckeditor5-export-word": "^40.2.0",
-		"@ckeditor/ckeditor5-find-and-replace": "^40.2.0",
-		"@ckeditor/ckeditor5-font": "^40.2.0",
-		"@ckeditor/ckeditor5-heading": "^40.2.0",
-		"@ckeditor/ckeditor5-html-support": "^40.2.0",
-		"@ckeditor/ckeditor5-image": "^40.2.0",
-		"@ckeditor/ckeditor5-import-word": "^40.2.0",
-		"@ckeditor/ckeditor5-link": "^40.2.0",
-		"@ckeditor/ckeditor5-list": "^40.2.0",
-		"@ckeditor/ckeditor5-mention": "^40.2.0",
-		"@ckeditor/ckeditor5-paragraph": "^40.2.0",
-		"@ckeditor/ckeditor5-paste-from-office": "^40.2.0",
-		"@ckeditor/ckeditor5-paste-from-office-enhanced": "^40.2.0",
-		"@ckeditor/ckeditor5-remove-format": "^40.2.0",
-		"@ckeditor/ckeditor5-slash-command": "^40.2.0",
-		"@ckeditor/ckeditor5-special-characters": "^40.2.0",
-		"@ckeditor/ckeditor5-theme-lark": "^40.2.0",
-		"css-loader": "^5.2.7",
-		"postcss": "^8.4.19",
-		"postcss-loader": "^4.3.0",
-		"raw-loader": "^4.0.2",
-		"style-loader": "^2.0.0",
-		"terser-webpack-plugin": "^4.2.3",
-		"webpack": "^5.75.0",
-		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.11.1"
+	"type": "module",
+	"engines": {
+		"node": ">=18.0.0"
 	},
 	"scripts": {
-		"build": "webpack --mode production",
-		"build-dev": "webpack --mode development",
-		"start": "webpack serve --open /index.html --mode development"
+		"dev": "vite --open",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"ckeditor5": "^42.0.0",
+		"ckeditor5-premium-features": "^42.0.0",
+		"vite": "^5.0.0"
 	}
 }