diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ec2a80e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +builds \ No newline at end of file diff --git a/ai-assistant/README.md b/ai-assistant/README.md index 4f5da2f..444e70a 100644 --- a/ai-assistant/README.md +++ b/ai-assistant/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/ai-assistant && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/ai-assistant/index.html b/ai-assistant/index.html index 355d9ed..74257e7 100644 --- a/ai-assistant/index.html +++ b/ai-assistant/index.html @@ -149,7 +149,7 @@

Quick translations ๐ŸŒ

- - + + diff --git a/ai-assistant/index.js b/ai-assistant/index.js deleted file mode 100644 index a449d59..0000000 --- a/ai-assistant/index.js +++ /dev/null @@ -1,346 +0,0 @@ -/** - * @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 - */ - -// AI Assistant require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features -const LICENSE_KEY = ''; - -// https://ckeditor.com/docs/ckeditor5/40.2.0/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 */ -const CKBOX_TOKEN_URL = ''; - -// Editor creators -import AiAssistantDemoEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - -// 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 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 AIAssistant from '@ckeditor/ckeditor5-ai/src/aiassistant'; -import OpenAITextAdapter from '@ckeditor/ckeditor5-ai/src/adapters/openaitextadapter'; - -AiAssistantDemoEditor.create( - document.querySelector('#cke5-ai-assistant-demo'), - { - plugins: [ - AIAssistant, - Alignment, - 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, - PictureEditing, - Code, - CodeBlock, - CloudServices, - EasyImage, - Essentials, - ExportPdf, - ExportWord, - ImportWord, - FindAndReplace, - FontBackgroundColor, - FontColor, - FontFamily, - FontSize, - Heading, - GeneralHtmlSupport, - Image, - ImageCaption, - ImageResize, - ImageToolbar, - ImageUpload, - ImageInsert, - Italic, - Link, - LinkImage, - AutoLink, - DocumentList, - DocumentListProperties, - Mention, - OpenAITextAdapter, - Paragraph, - PasteFromOffice, - PasteFromOfficeEnhanced, - RemoveFormat, - SlashCommand, - SpecialCharacters, - SpecialCharactersEssentials, - Strikethrough, - Subscript, - Superscript, - Table, - TableCaption, - TableCellProperties, - TableProperties, - TableToolbar, - TableColumnResize, - Underline, - UploadAdapter, - ], - toolbar: { - items: [ - 'aiCommands', - 'aiAssistant', - '|', - 'undo', - 'redo', - 'findAndReplace', - '|', - 'heading', - '|', - 'fontsize', - 'fontfamily', - 'fontColor', - 'fontBackgroundColor', - '|', - 'bold', - 'italic', - 'underline', - 'strikethrough', - 'subscript', - 'superscript', - 'code', - 'removeFormat', - 'link', - '|', - 'alignment', - '|', - 'bulletedList', - 'numberedList', - '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', - 'insertTable', - 'codeBlock', - 'specialCharacters', - '|', - 'exportPdf', - 'exportWord', - 'importWord', - ], - }, - link: { - decorators: { - isExternal: { - mode: 'manual', - label: 'Open in a new tab', - attributes: { - target: '_blank', - rel: 'noopener noreferrer', - }, - }, - isDownloadable: { - mode: 'manual', - label: 'Downloadable', - attributes: { - download: 'download', - }, - }, - isGallery: { - mode: 'manual', - label: 'Gallery link', - classes: 'gallery', - }, - }, - }, - ckbox: { - tokenUrl: CKBOX_TOKEN_URL, - }, - list: { - properties: { - styles: true, - startIndex: true, - reversed: true, - }, - }, - image: { - resizeOptions: [ - { - name: 'resizeImage:original', - label: 'Original size', - value: null, - }, - { - name: 'resizeImage:50', - label: '50%', - value: '50', - }, - { - name: 'resizeImage:75', - label: '75%', - value: '75', - }, - ], - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'resizeImage', - ], - upload: { - panel: { - items: ['insertImageViaUrl'], - }, - }, - insert: { - integrations: ['url'], - }, - }, - typing: { - transformations: { - extra: [ - { from: ':)', to: '๐Ÿ™‚' }, - { from: ':+1:', to: '๐Ÿ‘' }, - { from: ':tada:', to: '๐ŸŽ‰' }, - ], - }, - }, - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'tableCellProperties', - 'toggleTableCaption', - ], - tableToolbar: ['bold', 'italic'], - }, - heading: { - options: [ - { - model: 'paragraph', - title: 'Paragraph', - class: 'ck-heading_paragraph', - }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - ], - }, - exportPdf: { - dataCallback: (editor) => - editor.getData({ - showSuggestionHighlights: true, - }), - stylesheets: ['EDITOR_STYLES'], - converterOptions: { - format: 'A4', - margin_top: '20mm', - margin_bottom: '20mm', - margin_right: '12mm', - margin_left: '12mm', - page_orientation: 'portrait', - }, - tokenUrl: false, - }, - exportWord: { - dataCallback: (editor) => - editor.getData({ - showSuggestionHighlights: true, - }), - stylesheets: ['EDITOR_STYLES'], - converterOptions: { - format: 'A4', - margin_top: '20mm', - margin_bottom: '20mm', - margin_right: '12mm', - margin_left: '12mm', - page_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); - }); diff --git a/ai-assistant/index.ts b/ai-assistant/index.ts new file mode 100644 index 0000000..63cafbf --- /dev/null +++ b/ai-assistant/index.ts @@ -0,0 +1,351 @@ +/** + * @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 + */ + +// 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 = ''; + +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 = ''; + +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 = ''; + +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'; + +import { + ExportPdf, + ExportWord, + ImportWord, + AIAssistant, + OpenAITextAdapter, + SlashCommand, + PasteFromOfficeEnhanced, +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +// @ts-ignore +import coreStylesheets from 'ckeditor5/index.css?url'; +// @ts-ignore +import premiumStylesheets from 'ckeditor5-premium-features/index.css?url'; + +ClassicEditor.create( + document.querySelector('#cke5-ai-assistant-demo') as HTMLElement, + { + plugins: [ + AIAssistant, + Alignment, + AutoImage, + BlockQuote, + Bold, + ...(CKBOX_TOKEN_URL ? [CKBox] : []), + PictureEditing, + Code, + CodeBlock, + CloudServices, + EasyImage, + Essentials, + ExportPdf, + ExportWord, + ImportWord, + FindAndReplace, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + Heading, + GeneralHtmlSupport, + Image, + ImageCaption, + ImageResize, + ImageToolbar, + ImageUpload, + ImageInsert, + Italic, + Link, + LinkImage, + AutoLink, + List, + ListProperties, + Mention, + OpenAITextAdapter, + Paragraph, + PasteFromOffice, + PasteFromOfficeEnhanced, + RemoveFormat, + SlashCommand, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Subscript, + Superscript, + Table, + TableCaption, + TableCellProperties, + TableProperties, + TableToolbar, + TableColumnResize, + Underline, + CloudServicesUploadAdapter, + ], + toolbar: { + items: [ + 'aiCommands', + 'aiAssistant', + '|', + 'undo', + 'redo', + 'findAndReplace', + '|', + 'heading', + '|', + 'fontsize', + 'fontfamily', + 'fontColor', + 'fontBackgroundColor', + '|', + 'bold', + 'italic', + 'underline', + 'strikethrough', + 'subscript', + 'superscript', + 'code', + 'removeFormat', + 'link', + '|', + 'alignment', + '|', + 'bulletedList', + 'numberedList', + 'blockQuote', + '|', + 'insertImage', + 'ckbox', + 'insertTable', + 'codeBlock', + 'specialCharacters', + '|', + 'exportPdf', + 'exportWord', + 'importWord', + ], + }, + link: { + decorators: { + isExternal: { + mode: 'manual', + label: 'Open in a new tab', + attributes: { + target: '_blank', + rel: 'noopener noreferrer', + }, + }, + isDownloadable: { + mode: 'manual', + label: 'Downloadable', + attributes: { + download: 'download', + }, + }, + isGallery: { + mode: 'manual', + label: 'Gallery link', + classes: 'gallery', + }, + }, + }, + ckbox: { + tokenUrl: CKBOX_TOKEN_URL, + }, + list: { + properties: { + styles: true, + startIndex: true, + reversed: true, + }, + }, + image: { + resizeOptions: [ + { + name: 'resizeImage:original', + label: 'Original size', + value: null, + }, + { + name: 'resizeImage:50', + label: '50%', + value: '50', + }, + { + name: 'resizeImage:75', + label: '75%', + value: '75', + }, + ], + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'resizeImage', + ], + insert: { + integrations: ['upload', 'assetManager', 'url'], + }, + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'tableCellProperties', + 'toggleTableCaption', + ], + tableToolbar: ['bold', 'italic'], + }, + heading: { + options: [ + { + model: 'paragraph', + title: 'Paragraph', + class: 'ck-heading_paragraph', + }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + ], + }, + exportPdf: { + dataCallback: (editor) => + editor.getData({ + showSuggestionHighlights: true, + }), + stylesheets: [coreStylesheets, premiumStylesheets], + converterOptions: { + format: 'A4', + margin_top: '20mm', + margin_bottom: '20mm', + margin_right: '12mm', + margin_left: '12mm', + page_orientation: 'portrait', + }, + tokenUrl: false, + }, + exportWord: { + dataCallback: (editor) => + editor.getData({ + showSuggestionHighlights: true, + }), + stylesheets: [coreStylesheets, premiumStylesheets], + converterOptions: { + format: 'A4', + margin_top: '20mm', + margin_bottom: '20mm', + margin_right: '12mm', + margin_left: '12mm', + orientation: 'portrait', + }, + tokenUrl: false, + }, + // AI configuration will land here: + ai: { + openAI: { + apiUrl: AI_API_URL, + }, + }, + licenseKey: LICENSE_KEY, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/ai-assistant/package.json b/ai-assistant/package.json index b810884..cd88987 100644 --- a/ai-assistant/package.json +++ b/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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/ai-assistant/webpack.config.js b/ai-assistant/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/ai-assistant/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/feature-rich/package.json b/feature-rich/package.json index b308ad6..f37a36a 100644 --- a/feature-rich/package.json +++ b/feature-rich/package.json @@ -7,60 +7,60 @@ "license": "GPL-2.0-or-later", "private": true, "devDependencies": { - "@ckeditor/ckeditor5-adapter-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-alignment": "41.2.1", - "@ckeditor/ckeditor5-autoformat": "41.2.1", - "@ckeditor/ckeditor5-basic-styles": "41.2.1", - "@ckeditor/ckeditor5-block-quote": "41.2.1", - "@ckeditor/ckeditor5-ckbox": "41.2.1", - "@ckeditor/ckeditor5-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-clipboard": "41.2.1", - "@ckeditor/ckeditor5-cloud-services": "41.2.1", - "@ckeditor/ckeditor5-code-block": "41.2.1", - "@ckeditor/ckeditor5-core": "41.2.1", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "41.2.1", - "@ckeditor/ckeditor5-engine": "41.2.1", - "@ckeditor/ckeditor5-enter": "41.2.1", - "@ckeditor/ckeditor5-essentials": "41.2.1", - "@ckeditor/ckeditor5-export-pdf": "41.2.1", - "@ckeditor/ckeditor5-export-word": "41.2.1", - "@ckeditor/ckeditor5-find-and-replace": "41.2.1", - "@ckeditor/ckeditor5-font": "41.2.1", - "@ckeditor/ckeditor5-heading": "41.2.1", - "@ckeditor/ckeditor5-highlight": "41.2.1", - "@ckeditor/ckeditor5-horizontal-line": "41.2.1", - "@ckeditor/ckeditor5-html-embed": "41.2.1", - "@ckeditor/ckeditor5-html-support": "41.2.1", - "@ckeditor/ckeditor5-image": "41.2.1", - "@ckeditor/ckeditor5-import-word": "41.2.1", - "@ckeditor/ckeditor5-indent": "41.2.1", - "@ckeditor/ckeditor5-language": "41.2.1", - "@ckeditor/ckeditor5-link": "41.2.1", - "@ckeditor/ckeditor5-list": "41.2.1", - "@ckeditor/ckeditor5-media-embed": "41.2.1", - "@ckeditor/ckeditor5-mention": "41.2.1", - "@ckeditor/ckeditor5-page-break": "41.2.1", - "@ckeditor/ckeditor5-paragraph": "41.2.1", - "@ckeditor/ckeditor5-paste-from-office": "41.2.1", - "@ckeditor/ckeditor5-remove-format": "41.2.1", - "@ckeditor/ckeditor5-select-all": "41.2.1", - "@ckeditor/ckeditor5-special-characters": "41.2.1", - "@ckeditor/ckeditor5-style": "41.2.1", - "@ckeditor/ckeditor5-table": "41.2.1", - "@ckeditor/ckeditor5-theme-lark": "41.2.1", - "@ckeditor/ckeditor5-typing": "41.2.1", - "@ckeditor/ckeditor5-ui": "41.2.1", - "@ckeditor/ckeditor5-undo": "41.2.1", - "@ckeditor/ckeditor5-upload": "41.2.1", - "@ckeditor/ckeditor5-utils": "41.2.1", - "@ckeditor/ckeditor5-widget": "41.2.1", - "@ckeditor/ckeditor5-word-count": "41.2.1", - "@ckeditor/ckeditor5-template": "41.2.1", - "@ckeditor/ckeditor5-document-outline": "41.2.1", - "@ckeditor/ckeditor5-format-painter": "41.2.1", - "@ckeditor/ckeditor5-slash-command": "41.2.1", + "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-alignment": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-block-quote": "41.4.2", + "@ckeditor/ckeditor5-ckbox": "41.4.2", + "@ckeditor/ckeditor5-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-clipboard": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-code-block": "41.4.2", + "@ckeditor/ckeditor5-core": "41.4.2", + "@ckeditor/ckeditor5-dev-translations": "^40.2.0", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-editor-classic": "41.4.2", + "@ckeditor/ckeditor5-engine": "41.4.2", + "@ckeditor/ckeditor5-enter": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-export-pdf": "41.4.2", + "@ckeditor/ckeditor5-export-word": "41.4.2", + "@ckeditor/ckeditor5-find-and-replace": "41.4.2", + "@ckeditor/ckeditor5-font": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-highlight": "41.4.2", + "@ckeditor/ckeditor5-horizontal-line": "41.4.2", + "@ckeditor/ckeditor5-html-embed": "41.4.2", + "@ckeditor/ckeditor5-html-support": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-import-word": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-language": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-media-embed": "41.4.2", + "@ckeditor/ckeditor5-mention": "41.4.2", + "@ckeditor/ckeditor5-page-break": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-remove-format": "41.4.2", + "@ckeditor/ckeditor5-select-all": "41.4.2", + "@ckeditor/ckeditor5-special-characters": "41.4.2", + "@ckeditor/ckeditor5-style": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-theme-lark": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@ckeditor/ckeditor5-ui": "41.4.2", + "@ckeditor/ckeditor5-undo": "41.4.2", + "@ckeditor/ckeditor5-upload": "41.4.2", + "@ckeditor/ckeditor5-utils": "41.4.2", + "@ckeditor/ckeditor5-widget": "41.4.2", + "@ckeditor/ckeditor5-word-count": "41.4.2", + "@ckeditor/ckeditor5-template": "41.4.2", + "@ckeditor/ckeditor5-document-outline": "41.4.2", + "@ckeditor/ckeditor5-format-painter": "41.4.2", + "@ckeditor/ckeditor5-slash-command": "41.4.2", "@webspellchecker/wproofreader-ckeditor5": "2.3.1", "css-loader": "^5.2.7", "postcss": "^8.4.19", diff --git a/headless/README.md b/headless/README.md index b4cc115..5ab2521 100644 --- a/headless/README.md +++ b/headless/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/headless && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/headless/index.html b/headless/index.html index b1a5498..9f89203 100644 --- a/headless/index.html +++ b/headless/index.html @@ -20,6 +20,6 @@

Headless editor

- + diff --git a/headless/index.js b/headless/index.js deleted file mode 100644 index b88c565..0000000 --- a/headless/index.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * @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 DecoupledEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; - -import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; -import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -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 ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; -import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; - -class HeadlessEditor extends DecoupledEditorBase {} - -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; diff --git a/headless/index.ts b/headless/index.ts new file mode 100644 index 0000000..8d777f7 --- /dev/null +++ b/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; diff --git a/headless/index.jsx b/headless/index.tsx similarity index 92% rename from headless/index.jsx rename to headless/index.tsx index 5bcb465..6c7565c 100644 --- a/headless/index.jsx +++ b/headless/index.tsx @@ -4,9 +4,9 @@ */ import React, { useState, useEffect, StrictMode } from 'react'; -import { CKEditor } from '@ckeditor/ckeditor5-react'; -import HeadlessEditor from '.'; import { createRoot } from 'react-dom/client'; +import { CKEditor } from '@ckeditor/ckeditor5-react'; +import HeadlessEditor from './index.ts'; 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; }} /> @@ -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); diff --git a/headless/package.json b/headless/package.json index efb5efe..cc42e68 100644 --- a/headless/package.json +++ b/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" } } diff --git a/headless/webpack.config.js b/headless/webpack.config.js deleted file mode 100644 index c8a0037..0000000 --- a/headless/webpack.config.js +++ /dev/null @@ -1,116 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: ['./index.js', './index.jsx'], - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - { - test: /\.jsx$/, - exclude: /node_modules/, - use: [ - { - loader: 'babel-loader', - options: { - presets: [ - [ - '@babel/preset-env', - { - targets: 'defaults', - }, - ], - '@babel/preset-react', - ], - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/internationalization/README.md b/internationalization/README.md index e9fc018..1f7f37d 100644 --- a/internationalization/README.md +++ b/internationalization/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/internationalization && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/internationalization/index.html b/internationalization/index.html index 321e5eb..f9c07a6 100644 --- a/internationalization/index.html +++ b/internationalization/index.html @@ -201,9 +201,6 @@

่จ€่ชž ๐Ÿ‡ฏ๐Ÿ‡ต

- - - - + diff --git a/internationalization/index.js b/internationalization/index.js deleted file mode 100644 index 2edb2e6..0000000 --- a/internationalization/index.js +++ /dev/null @@ -1,310 +0,0 @@ -/** - * @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 ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - -import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage'; -import AutoLink from '@ckeditor/ckeditor5-link/src/autolink'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import cloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices.js'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; -import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; -import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; -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 Table from '@ckeditor/ckeditor5-table/src/table'; -import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption'; -import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; - -const plugins = [ - Alignment, - Autoformat, - AutoImage, - AutoLink, - BlockQuote, - Bold, - CKFinder, - cloudServices, - Essentials, - FindAndReplace, - Heading, - Highlight, - HorizontalLine, - Image, - ImageCaption, - ImageInsert, - ImageStyle, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - IndentBlock, - Italic, - Link, - LinkImage, - List, - MediaEmbed, - Paragraph, - RemoveFormat, - SpecialCharacters, - SpecialCharactersEssentials, - Strikethrough, - Table, - TableCaption, - TableProperties, - TableToolbar, - TextTransformation, - Underline, - UploadAdapter, -]; - -/** - * Localized CKEditor 5 demos (in German, Arabic and Japanese). - */ - -window.editor = {}; - -const germanEditorElement = document.querySelector('#cke5-localized-de-demo'); - -ClassicEditor.create(germanEditorElement, { - language: 'de', - content: 'de', - plugins: plugins, - placeholder: 'Tippen Sie Ihren Inhalt hier oder fรผgen Sie ihn ein!', - toolbar: [ - 'undo', - 'redo', - '|', - 'findAndReplace', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'underline', - 'strikethrough', - 'removeFormat', - '|', - 'link', - 'insertImage', - 'insertTable', - 'highlight', - 'specialCharacters', - { - label: 'Einfรผgen', - icon: 'plus', - items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], - }, - '|', - 'alignment', - '|', - 'bulletedList', - 'numberedList', - 'outdent', - 'indent', - ], - image: { - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - ], - insert: { - integrations: ['url'], - }, - }, - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'toggleTableCaption', - ], - }, -}) - .then((editor) => { - window.editor.de = editor; - - return editor; - }) - .catch((error) => { - console.error(error.stack); - }); - -const arabicEditorElement = document.querySelector('#cke5-localized-ar-demo'); - -ClassicEditor.create(arabicEditorElement, { - language: 'ar', - content: 'ar', - plugins: plugins, - placeholder: 'ุงูƒุชุจ ุฃูˆ ุงู„ุตู‚ ุงู„ู…ุญุชูˆู‰ ุงู„ุฎุงุต ุจูƒ ู‡ู†ุง!', - toolbar: [ - 'undo', - 'redo', - '|', - 'findAndReplace', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'underline', - 'strikethrough', - 'removeFormat', - '|', - 'link', - 'insertImage', - 'insertTable', - 'highlight', - 'specialCharacters', - { - label: 'ุฅุฏุฑุงุฌ', - icon: 'plus', - items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], - }, - '|', - 'alignment', - '|', - 'bulletedList', - 'numberedList', - 'outdent', - 'indent', - ], - image: { - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - ], - insert: { - integrations: ['url'], - }, - }, - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'toggleTableCaption', - ], - }, -}) - .then((editor) => { - window.editor.ar = editor; - - return editor; - }) - .catch((error) => { - console.error(error.stack); - }); - -const japaneseEditorElement = document.querySelector('#cke5-localized-ja-demo'); - -ClassicEditor.create(japaneseEditorElement, { - language: 'ja', - content: 'ja', - plugins: plugins, - placeholder: 'ใ“ใกใ‚‰ใซๅ†…ๅฎนใ‚’ๅ…ฅๅŠ›ใ™ใ‚‹ใ‹ๅผตใ‚Šไป˜ใ‘ใฆใใ ใ•ใ„ใ€‚', - toolbar: [ - 'undo', - 'redo', - '|', - 'findAndReplace', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'underline', - 'strikethrough', - 'removeFormat', - '|', - 'link', - 'insertImage', - 'insertTable', - 'highlight', - 'specialCharacters', - { - label: 'ๆŒฟๅ…ฅ', - icon: 'plus', - items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], - }, - '|', - 'alignment', - '|', - 'bulletedList', - 'numberedList', - 'outdent', - 'indent', - ], - image: { - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - ], - insert: { - integrations: ['url'], - }, - }, - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'toggleTableCaption', - ], - }, -}) - .then((editor) => { - window.editor.jp = editor; - - return editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/internationalization/index.ts b/internationalization/index.ts new file mode 100644 index 0000000..1d74b98 --- /dev/null +++ b/internationalization/index.ts @@ -0,0 +1,312 @@ +/** + * @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 { + ClassicEditor, + Alignment, + Autoformat, + AutoImage, + AutoLink, + BlockQuote, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + FindAndReplace, + Heading, + Highlight, + HorizontalLine, + Image, + ImageCaption, + ImageInsert, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + LinkImage, + List, + MediaEmbed, + Paragraph, + RemoveFormat, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableCaption, + TableProperties, + TableToolbar, + TextTransformation, + Underline, +} from 'ckeditor5'; + +import deTranslations from 'ckeditor5/translations/de.js'; +import arTranslations from 'ckeditor5/translations/ar.js'; +import jaTranslations from 'ckeditor5/translations/ja.js'; + +import 'ckeditor5/index.css'; + +const plugins = [ + Alignment, + Autoformat, + AutoImage, + AutoLink, + BlockQuote, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + FindAndReplace, + Heading, + Highlight, + HorizontalLine, + Image, + ImageCaption, + ImageInsert, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + LinkImage, + List, + MediaEmbed, + Paragraph, + RemoveFormat, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableCaption, + TableProperties, + TableToolbar, + TextTransformation, + Underline, +]; + +/** + * Localized CKEditor 5 demos (in German, Arabic and Japanese). + */ + +ClassicEditor.create( + document.querySelector('#cke5-localized-de-demo') as HTMLElement, + { + language: 'de', + plugins: plugins, + placeholder: 'Tippen Sie Ihren Inhalt hier oder fรผgen Sie ihn ein!', + toolbar: [ + 'undo', + 'redo', + '|', + 'findAndReplace', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'underline', + 'strikethrough', + 'removeFormat', + '|', + 'link', + 'insertImage', + 'insertTable', + 'highlight', + 'specialCharacters', + { + label: 'Einfรผgen', + icon: 'plus', + items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], + }, + '|', + 'alignment', + '|', + 'bulletedList', + 'numberedList', + 'outdent', + 'indent', + ], + image: { + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + 'imageStyle:side', + ], + insert: { + integrations: ['url'], + }, + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'toggleTableCaption', + ], + }, + translations: deTranslations, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); + +ClassicEditor.create( + document.querySelector('#cke5-localized-ar-demo') as HTMLElement, + { + language: 'ar', + plugins: plugins, + placeholder: 'ุงูƒุชุจ ุฃูˆ ุงู„ุตู‚ ุงู„ู…ุญุชูˆู‰ ุงู„ุฎุงุต ุจูƒ ู‡ู†ุง!', + toolbar: [ + 'undo', + 'redo', + '|', + 'findAndReplace', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'underline', + 'strikethrough', + 'removeFormat', + '|', + 'link', + 'insertImage', + 'insertTable', + 'highlight', + 'specialCharacters', + { + label: 'ุฅุฏุฑุงุฌ', + icon: 'plus', + items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], + }, + '|', + 'alignment', + '|', + 'bulletedList', + 'numberedList', + 'outdent', + 'indent', + ], + image: { + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + 'imageStyle:side', + ], + insert: { + integrations: ['url'], + }, + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'toggleTableCaption', + ], + }, + translations: arTranslations, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); + +ClassicEditor.create( + document.querySelector('#cke5-localized-ja-demo') as HTMLElement, + { + language: 'ja', + plugins: plugins, + placeholder: 'ใ“ใกใ‚‰ใซๅ†…ๅฎนใ‚’ๅ…ฅๅŠ›ใ™ใ‚‹ใ‹ๅผตใ‚Šไป˜ใ‘ใฆใใ ใ•ใ„ใ€‚', + toolbar: [ + 'undo', + 'redo', + '|', + 'findAndReplace', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'underline', + 'strikethrough', + 'removeFormat', + '|', + 'link', + 'insertImage', + 'insertTable', + 'highlight', + 'specialCharacters', + { + label: 'ๆŒฟๅ…ฅ', + icon: 'plus', + items: ['blockQuote', 'mediaEmbed', 'horizontalLine'], + }, + '|', + 'alignment', + '|', + 'bulletedList', + 'numberedList', + 'outdent', + 'indent', + ], + image: { + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + 'imageStyle:side', + ], + insert: { + integrations: ['url'], + }, + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'toggleTableCaption', + ], + }, + translations: jaTranslations, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/internationalization/package.json b/internationalization/package.json index 45eb6bd..8f419ca 100644 --- a/internationalization/package.json +++ b/internationalization/package.json @@ -1,60 +1,21 @@ { "name": "internationalization", - "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": { - "@babel/core": "^7.20.7", - "@ckeditor/ckeditor5-adapter-ckfinder": "40.2.0", - "@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-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-find-and-replace": "40.2.0", - "@ckeditor/ckeditor5-heading": "40.2.0", - "@ckeditor/ckeditor5-highlight": "40.2.0", - "@ckeditor/ckeditor5-horizontal-line": "40.2.0", - "@ckeditor/ckeditor5-image": "40.2.0", - "@ckeditor/ckeditor5-indent": "40.2.0", - "@ckeditor/ckeditor5-language": "40.2.0", - "@ckeditor/ckeditor5-link": "40.2.0", - "@ckeditor/ckeditor5-list": "40.2.0", - "@ckeditor/ckeditor5-media-embed": "40.2.0", - "@ckeditor/ckeditor5-paragraph": "40.2.0", - "@ckeditor/ckeditor5-remove-format": "40.2.0", - "@ckeditor/ckeditor5-special-characters": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "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": "nightly", + "vite": "^5.0.0" } } diff --git a/internationalization/webpack.config.js b/internationalization/webpack.config.js deleted file mode 100644 index d1ec070..0000000 --- a/internationalization/webpack.config.js +++ /dev/null @@ -1,115 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const { - CKEditorTranslationsPlugin, -} = require('@ckeditor/ckeditor5-dev-translations'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - output: { - path: path.resolve(__dirname, 'dist'), - }, - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new CKEditorTranslationsPlugin({ - // The main language that will be built into the main bundle. - language: 'en', - - // Additional languages that will be emitted to the `outputDirectory`. - // This option can be set to an array of language codes or `'all'` to build all found languages. - // The bundle is optimized for one language when this option is omitted. - additionalLanguages: 'all', - addMainLanguageTranslationsToAllAssets: true, - - // For more advanced options see https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-translations. - }), - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/markdown/README.md b/markdown/README.md index 0044ccb..dafdcc6 100644 --- a/markdown/README.md +++ b/markdown/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/markdown && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/markdown/index.html b/markdown/index.html index e340afe..66f1c9a 100644 --- a/markdown/index.html +++ b/markdown/index.html @@ -62,6 +62,6 @@

Markdown editor

- + diff --git a/markdown/index.ts b/markdown/index.ts new file mode 100644 index 0000000..87309e7 --- /dev/null +++ b/markdown/index.ts @@ -0,0 +1,298 @@ +/** + * @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 + */ + +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} + +import { + ClassicEditor, + Essentials, + Autoformat, + BlockQuote, + Bold, + CloudServices, + Code, + CodeBlock, + Heading, + HorizontalLine, + Image, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Italic, + Link, + List, + Markdown, + Mention, + Paragraph, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableToolbar, + TextTransformation, + TodoList, +} from 'ckeditor5'; + +import { + SlashCommand +} from 'ckeditor5-premium-features' + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +/** + * Enrich the special characters plugin with emojis. + */ +function SpecialCharactersEmoji(editor) { + if (!editor.plugins.get('SpecialCharacters')) { + return; + } + + // Make sure Emojis are last on the list. + this.afterInit = function () { + editor.plugins.get('SpecialCharacters').addItems('Emoji', EMOJIS_ARRAY); + }; +} + +const EMOJIS_ARRAY = [ + { character: '๐Ÿ™ˆ', title: 'See-No-Evil Monkey' }, + { character: '๐Ÿ™„', title: 'Face With Rolling Eyes' }, + { character: '๐Ÿ™ƒ', title: 'Upside Down Face' }, + { character: '๐Ÿ™‚', title: 'Slightly Smiling Face' }, + { character: '๐Ÿ˜ด', title: 'Sleeping Face' }, + { character: '๐Ÿ˜ณ', title: 'Flushed Face' }, + { character: '๐Ÿ˜ฑ', title: 'Face Screaming in Fear' }, + { character: '๐Ÿ˜ญ', title: 'Loudly Crying Face' }, + { character: '๐Ÿ˜ฌ', title: 'Grimacing Face' }, + { character: '๐Ÿ˜ฉ', title: 'Weary Face' }, + { character: '๐Ÿ˜ข', title: 'Crying Face' }, + { character: '๐Ÿ˜ก', title: 'Pouting Face' }, + { character: '๐Ÿ˜ž', title: 'Disappointed Face' }, + { character: '๐Ÿ˜œ', title: 'Face with Stuck-Out Tongue and Winking Eye' }, + { character: '๐Ÿ˜š', title: 'Kissing Face With Closed Eyes' }, + { character: '๐Ÿ˜˜', title: 'Face Throwing a Kiss' }, + { character: '๐Ÿ˜”', title: 'Pensive Face' }, + { character: '๐Ÿ˜’', title: 'Unamused Face' }, + { character: '๐Ÿ˜‘', title: 'Expressionless Face' }, + { character: '๐Ÿ˜', title: 'Neutral Face' }, + { character: '๐Ÿ˜', title: 'Smirking Face' }, + { character: '๐Ÿ˜Ž', title: 'Smiling Face with Sunglasses' }, + { character: '๐Ÿ˜', title: 'Smiling Face with Heart-Eyes' }, + { character: '๐Ÿ˜Œ', title: 'Relieved Face' }, + { character: '๐Ÿ˜‹', title: 'Face Savoring Delicious Food' }, + { character: '๐Ÿ˜Š', title: 'Smiling Face with Smiling Eyes' }, + { character: '๐Ÿ˜‰', title: 'Winking Face' }, + { character: '๐Ÿ˜ˆ', title: 'Smiling Face With Horns' }, + { character: '๐Ÿ˜‡', title: 'Smiling Face with Halo' }, + { + character: '๐Ÿ˜†', + title: 'Smiling Face with Open Mouth and Tightly-Closed Eyes', + }, + { character: '๐Ÿ˜…', title: 'Smiling Face with Open Mouth and Cold Sweat' }, + { character: '๐Ÿ˜„', title: 'Smiling Face with Open Mouth and Smiling Eyes' }, + { character: '๐Ÿ˜ƒ', title: 'Smiling Face with Open Mouth' }, + { character: '๐Ÿ˜‚', title: 'Face with Tears of Joy' }, + { character: '๐Ÿ˜', title: 'Grinning Face with Smiling Eyes' }, + { character: '๐Ÿ˜€', title: 'Grinning Face' }, + { character: '๐Ÿฅบ', title: 'Pleading Face' }, + { character: '๐Ÿฅต', title: 'Hot Face' }, + { character: '๐Ÿฅด', title: 'Woozy Face' }, + { character: '๐Ÿฅณ', title: 'Partying Face' }, + { character: '๐Ÿฅฐ', title: 'Smiling Face with Hearts' }, + { character: '๐Ÿคญ', title: 'Face with Hand Over Mouth' }, + { character: '๐Ÿคช', title: 'Zany Face' }, + { character: '๐Ÿคฉ', title: 'Grinning Face with Star Eyes' }, + { character: '๐Ÿคฆ', title: 'Face Palm' }, + { character: '๐Ÿคค', title: 'Drooling Face' }, + { character: '๐Ÿคฃ', title: 'Rolling on the Floor Laughing' }, + { character: '๐Ÿค”', title: 'Thinking Face' }, + { character: '๐Ÿคž', title: 'Crossed Fingers' }, + { character: '๐Ÿ™', title: 'Person with Folded Hands' }, + { character: '๐Ÿ™Œ', title: 'Person Raising Both Hands in Celebration' }, + { character: '๐Ÿ™‹', title: 'Happy Person Raising One Hand' }, + { character: '๐Ÿคท', title: 'Shrug' }, + { character: '๐Ÿค—', title: 'Hugging Face' }, + { character: '๐Ÿ–ค', title: 'Black Heart' }, + { character: '๐Ÿ”ฅ', title: 'Fire' }, + { character: '๐Ÿ’ฐ', title: 'Money Bag' }, + { character: '๐Ÿ’ฏ', title: 'Hundred Points Symbol' }, + { character: '๐Ÿ’ช', title: 'Flexed Biceps' }, + { character: '๐Ÿ’ฉ', title: 'Pile of Poo' }, + { character: '๐Ÿ’ฅ', title: 'Collision' }, + { character: '๐Ÿ’ž', title: 'Revolving Hearts' }, + { character: '๐Ÿ’œ', title: 'Purple Heart' }, + { character: '๐Ÿ’š', title: 'Green Heart' }, + { character: '๐Ÿ’™', title: 'Blue Heart' }, + { character: '๐Ÿ’—', title: 'Growing Heart' }, + { character: '๐Ÿ’–', title: 'Sparkling Heart' }, + { character: '๐Ÿ’•', title: 'Two Hearts' }, + { character: '๐Ÿ’”', title: 'Broken Heart' }, + { character: '๐Ÿ’“', title: 'Beating Heart' }, + { character: '๐Ÿ’', title: 'Bouquet' }, + { character: '๐Ÿ’‹', title: 'Kiss Mark' }, + { character: '๐Ÿ’€', title: 'Skull' }, + { character: '๐Ÿ‘‘', title: 'Crown' }, + { character: '๐Ÿ‘', title: 'Clapping Hands Sign' }, + { character: '๐Ÿ‘', title: 'Thumbs Up Sign' }, + { character: '๐Ÿ‘Œ', title: 'OK Hand Sign' }, + { character: '๐Ÿ‘‰', title: 'Backhand Index Pointing Right' }, + { character: '๐Ÿ‘ˆ', title: 'Backhand Index Pointing Left' }, + { character: '๐Ÿ‘‡', title: 'Backhand Index Pointing Down' }, + { character: '๐Ÿ‘€', title: 'Eyes' }, + { character: '๐ŸŽถ', title: 'Multiple Musical Notes' }, + { character: '๐ŸŽŠ', title: 'Confetti Ball' }, + { character: '๐ŸŽ‰', title: 'Party Popper' }, + { character: '๐ŸŽˆ', title: 'Balloon' }, + { character: '๐ŸŽ‚', title: 'Birthday Cake' }, + { character: '๐ŸŽ', title: 'Wrapped Gift' }, + { character: '๐ŸŒน', title: 'Rose' }, + { character: '๐ŸŒธ', title: 'Cherry Blossom' }, + { character: '๐ŸŒž', title: 'Sun with Face' }, + { character: 'โค๏ธ', title: 'Red Heart' }, + { character: 'โฃ๏ธ', title: 'Heavy Heart Exclamation Mark Ornament' }, + { character: 'โœจ', title: 'Sparkles' }, + { character: 'โœŒ๏ธ', title: 'Victory Hand' }, + { character: 'โœ…', title: 'Check Mark Button' }, + { character: 'โ™ฅ๏ธ', title: 'Heart Suit' }, + { character: 'โ˜บ๏ธ', title: 'Smiling Face' }, + { character: 'โ˜น๏ธ', title: 'Frowning Face' }, + { character: 'โ˜€๏ธ', title: 'Sun' }, +]; + +ClassicEditor.create( + document.querySelector('#cke5-markdown-demo') as HTMLElement, + { + plugins: [ + Autoformat, + BlockQuote, + Bold, + CloudServices, + Code, + CodeBlock, + Essentials, + Heading, + HorizontalLine, + Image, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Italic, + Link, + List, + Markdown, + Mention, + Paragraph, + SourceEditing, + SpecialCharacters, + SpecialCharactersEmoji, + SpecialCharactersEssentials, + Strikethrough, + Table, + TableToolbar, + TextTransformation, + TodoList, + ...(LICENSE_KEY ? [SlashCommand] : []), + ], + licenseKey: LICENSE_KEY, + language: 'en', + toolbar: [ + 'undo', + 'redo', + '|', + 'sourceEditing', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'strikethrough', + 'code', + '|', + 'bulletedList', + 'numberedList', + 'todoList', + '|', + 'link', + 'uploadImage', + 'insertTable', + 'blockQuote', + 'codeBlock', + 'horizontalLine', + 'specialCharacters', + ], + codeBlock: { + languages: [ + { language: 'css', label: 'CSS' }, + { language: 'html', label: 'HTML' }, + { language: 'javascript', label: 'JavaScript' }, + { language: 'php', label: 'PHP' }, + ], + }, + heading: { + options: [ + { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + { + model: 'heading5', + view: 'h5', + title: 'Heading 5', + class: 'ck-heading_heading5', + }, + { + model: 'heading6', + view: 'h6', + title: 'Heading 6', + class: 'ck-heading_heading6', + }, + ], + }, + image: { + toolbar: ['imageTextAlternative'], + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/markdown/package.json b/markdown/package.json index 224d001..ff0dbf2 100644 --- a/markdown/package.json +++ b/markdown/package.json @@ -1,59 +1,22 @@ { "name": "markdown", - "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": "41.2.1", - "@ckeditor/ckeditor5-autoformat": "41.2.1", - "@ckeditor/ckeditor5-basic-styles": "41.2.1", - "@ckeditor/ckeditor5-block-quote": "41.2.1", - "@ckeditor/ckeditor5-build-classic": "41.2.1", - "@ckeditor/ckeditor5-cloud-services": "41.2.1", - "@ckeditor/ckeditor5-code-block": "41.2.1", - "@ckeditor/ckeditor5-core": "41.2.1", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "41.2.1", - "@ckeditor/ckeditor5-engine": "41.2.1", - "@ckeditor/ckeditor5-enter": "41.2.1", - "@ckeditor/ckeditor5-essentials": "41.2.1", - "@ckeditor/ckeditor5-heading": "41.2.1", - "@ckeditor/ckeditor5-horizontal-line": "41.2.1", - "@ckeditor/ckeditor5-image": "41.2.1", - "@ckeditor/ckeditor5-link": "41.2.1", - "@ckeditor/ckeditor5-list": "41.2.1", - "@ckeditor/ckeditor5-markdown-gfm": "41.2.1", - "@ckeditor/ckeditor5-mention": "41.2.1", - "@ckeditor/ckeditor5-paragraph": "41.2.1", - "@ckeditor/ckeditor5-select-all": "41.2.1", - "@ckeditor/ckeditor5-source-editing": "41.2.1", - "@ckeditor/ckeditor5-special-characters": "41.2.1", - "@ckeditor/ckeditor5-table": "41.2.1", - "@ckeditor/ckeditor5-theme-lark": "41.2.1", - "@ckeditor/ckeditor5-typing": "41.2.1", - "@ckeditor/ckeditor5-ui": "41.2.1", - "@ckeditor/ckeditor5-undo": "41.2.1", - "@ckeditor/ckeditor5-upload": "41.2.1", - "@ckeditor/ckeditor5-utils": "41.2.1", - "@ckeditor/ckeditor5-widget": "41.2.1", - "@ckeditor/ckeditor5-slash-command": "41.2.1", - "babel-loader": "^9.1.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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/markdown/webpack.config.js b/markdown/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/markdown/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/mathtype/package.json b/mathtype/package.json index 78bc5b0..fa303db 100644 --- a/mathtype/package.json +++ b/mathtype/package.json @@ -8,35 +8,35 @@ "private": true, "devDependencies": { "@babel/core": "^7.20.7", - "@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-cloud-services": "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-classic": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-font": "40.2.0", - "@ckeditor/ckeditor5-heading": "40.2.0", - "@ckeditor/ckeditor5-highlight": "40.2.0", - "@ckeditor/ckeditor5-indent": "40.2.0", - "@ckeditor/ckeditor5-image": "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-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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", + "@ckeditor/ckeditor5-alignment": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-block-quote": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-code-block": "41.4.2", + "@ckeditor/ckeditor5-core": "41.4.2", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-editor-classic": "41.4.2", + "@ckeditor/ckeditor5-engine": "41.4.2", + "@ckeditor/ckeditor5-enter": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-font": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-highlight": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-remove-format": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-theme-lark": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@ckeditor/ckeditor5-ui": "41.4.2", + "@ckeditor/ckeditor5-undo": "41.4.2", + "@ckeditor/ckeditor5-upload": "41.4.2", + "@ckeditor/ckeditor5-utils": "41.4.2", "css-loader": "^5.2.7", "postcss": "^8.4.19", "postcss-loader": "^4.3.0", diff --git a/mobile/README.md b/mobile/README.md index bdc0b7f..9df3885 100644 --- a/mobile/README.md +++ b/mobile/README.md @@ -21,5 +21,5 @@ cd ckeditor5-demos/mobile && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/mobile/index.js b/mobile/index.js deleted file mode 100644 index 2e289e0..0000000 --- a/mobile/index.js +++ /dev/null @@ -1,139 +0,0 @@ -/** - * @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 ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - -import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; -import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Font from '@ckeditor/ckeditor5-font/src/font'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; -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 TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; -import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; - -ClassicEditor.create(document.querySelector('#cke5-mobile-demo'), { - plugins: [ - Alignment, - BlockQuote, - Bold, - CloudServices, - Code, - CodeBlock, - Essentials, - Font, - Heading, - Image, - ImageStyle, - ImageToolbar, - TableToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - IndentBlock, - Italic, - LinkImage, - List, - ListProperties, - PasteFromOffice, - RemoveFormat, - Strikethrough, - Subscript, - Superscript, - Table, - TodoList, - Underline, - ], - toolbar: [ - 'heading', - '|', - 'bold', - 'italic', - 'link', - 'bulletedList', - 'numberedList', - 'todoList', - 'outdent', - 'indent', - '|', - 'imageUpload', - 'blockQuote', - 'insertTable', - '|', - 'undo', - 'redo', - ], - heading: { - options: [ - { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - ], - }, - image: { - styles: ['alignCenter', 'alignLeft', 'alignRight'], - toolbar: [ - 'imageTextAlternative', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - ], - }, - list: { - properties: { - styles: true, - startIndex: true, - reversed: true, - }, - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, -}) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/mobile/index.ts b/mobile/index.ts new file mode 100644 index 0000000..211b80c --- /dev/null +++ b/mobile/index.ts @@ -0,0 +1,145 @@ +/** + * @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 { + ClassicEditor, + Alignment, + BlockQuote, + Bold, + CloudServices, + Code, + CodeBlock, + Essentials, + Font, + Heading, + Image, + ImageInline, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + LinkImage, + List, + ListProperties, + PasteFromOffice, + RemoveFormat, + Strikethrough, + Subscript, + Superscript, + Table, + TableToolbar, + TodoList, + Underline, +} from 'ckeditor5'; + +import 'ckeditor5/index.css'; + +ClassicEditor.create( + document.querySelector('#cke5-mobile-demo') as HTMLElement, + { + plugins: [ + Alignment, + BlockQuote, + Bold, + CloudServices, + Code, + CodeBlock, + Essentials, + Font, + Heading, + Image, + ImageInline, + ImageStyle, + ImageToolbar, + TableToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + LinkImage, + List, + ListProperties, + PasteFromOffice, + RemoveFormat, + Strikethrough, + Subscript, + Superscript, + Table, + TodoList, + Underline, + ], + toolbar: [ + 'heading', + '|', + 'bold', + 'italic', + 'link', + 'bulletedList', + 'numberedList', + 'todoList', + 'outdent', + 'indent', + '|', + 'imageUpload', + 'blockQuote', + 'insertTable', + '|', + 'undo', + 'redo', + ], + heading: { + options: [ + { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + ], + }, + image: { + toolbar: [ + 'imageTextAlternative', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + ], + }, + list: { + properties: { + styles: true, + startIndex: true, + reversed: true, + }, + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/mobile/mobile-iframe.html b/mobile/mobile-iframe.html index a34a6d8..089d8ca 100644 --- a/mobile/mobile-iframe.html +++ b/mobile/mobile-iframe.html @@ -124,6 +124,6 @@

Directions

- + diff --git a/mobile/package.json b/mobile/package.json index f38762c..d85feb9 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -1,53 +1,22 @@ { "name": "mobile", - "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": { - "@babel/core": "^7.20.7", - "@ckeditor/ckeditor5-alignment": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "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-classic": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-font": "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-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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/mobile/webpack.config.js b/mobile/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/mobile/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/paste-from-office-enhanced/README.md b/paste-from-office-enhanced/README.md index 1be8fe0..7d25788 100644 --- a/paste-from-office-enhanced/README.md +++ b/paste-from-office-enhanced/README.md @@ -21,5 +21,5 @@ cd ckeditor5-demos/paste-from-office-enhanced && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/paste-from-office-enhanced/index.html b/paste-from-office-enhanced/index.html index 5456371..640fc6c 100644 --- a/paste-from-office-enhanced/index.html +++ b/paste-from-office-enhanced/index.html @@ -676,7 +676,6 @@

Paste from Office Enhanced editor

- - + diff --git a/paste-from-office-enhanced/index.js b/paste-from-office-enhanced/index.ts similarity index 73% rename from paste-from-office-enhanced/index.js rename to paste-from-office-enhanced/index.ts index 9a56d10..8f388b5 100644 --- a/paste-from-office-enhanced/index.js +++ b/paste-from-office-enhanced/index.ts @@ -3,47 +3,63 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -// Paste from Office enhanced require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features -const PASTE_FROM_OFFICE_ENHANCED_LICENSE_KEY = ''; +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} // Editor creators -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; +import { + ClassicEditor, + Alignment, + Autoformat, + Bold, + CloudServices, + EasyImage, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + GeneralHtmlSupport, + Heading, + Image, + ImageCaption, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + List, + MediaEmbed, + PasteFromOffice, + Paragraph, + Strikethrough, + Table, + TableCaption, + TableCellProperties, + TableProperties, + TableToolbar, + Underline, +} from 'ckeditor5'; + +import { + PasteFromOfficeEnhanced +} from 'ckeditor5-premium-features'; -// Features -import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -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 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 GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -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 ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import PasteFromOfficeEnhanced from '@ckeditor/ckeditor5-paste-from-office-enhanced/src/pastefromofficeenhanced'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; -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 Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; const REDUCED_MATERIAL_COLORS = [ { label: 'Red 50', color: '#ffebee' }, @@ -169,7 +185,7 @@ const REDUCED_MATERIAL_COLORS = [ ]; ClassicEditor.create( - document.querySelector('#cke5-paste-from-office-enhanced-demo'), + document.querySelector('#cke5-paste-from-office-enhanced-demo') as HTMLElement, { plugins: [ Alignment, @@ -190,6 +206,7 @@ ClassicEditor.create( ImageStyle, ImageToolbar, ImageUpload, + Base64UploadAdapter, Indent, IndentBlock, Italic, @@ -246,7 +263,7 @@ ClassicEditor.create( 'indent', ], }, - licenseKey: PASTE_FROM_OFFICE_ENHANCED_LICENSE_KEY, + licenseKey: LICENSE_KEY, heading: { options: [ { @@ -312,7 +329,6 @@ ClassicEditor.create( ], }, image: { - styles: ['alignCenter', 'alignLeft', 'alignRight'], toolbar: [ 'imageTextAlternative', 'toggleImageCaption', @@ -320,7 +336,6 @@ ClassicEditor.create( 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', - 'imageStyle:side', ], }, link: { @@ -336,9 +351,9 @@ ClassicEditor.create( }, } ) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/paste-from-office-enhanced/package.json b/paste-from-office-enhanced/package.json index c3c12a8..ae7e6d6 100644 --- a/paste-from-office-enhanced/package.json +++ b/paste-from-office-enhanced/package.json @@ -1,47 +1,22 @@ { "name": "paste-from-office-enhanced", - "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-alignment": "^40.2.0", - "@ckeditor/ckeditor5-autoformat": "^40.2.0", - "@ckeditor/ckeditor5-basic-styles": "^40.2.0", - "@ckeditor/ckeditor5-cloud-services": "^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-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-indent": "^40.2.0", - "@ckeditor/ckeditor5-link": "^40.2.0", - "@ckeditor/ckeditor5-list": "^40.2.0", - "@ckeditor/ckeditor5-media-embed": "^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-table": "^40.2.0", - "@ckeditor/ckeditor5-theme-lark": "^40.2.0", - "@ckeditor/ckeditor5-upload": "^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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/paste-from-office-enhanced/webpack.config.js b/paste-from-office-enhanced/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/paste-from-office-enhanced/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/productivity-pack/index.js b/productivity-pack/index.js index a10a138..51dcedd 100644 --- a/productivity-pack/index.js +++ b/productivity-pack/index.js @@ -18,7 +18,7 @@ const WEB_SPELL_CHECKER_LICENSE_KEY = ''; import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; // Features -import AdjacentListsSupport from '@ckeditor/ckeditor5-list/src/documentlist/adjacentlistssupport.js'; +import AdjacentListsSupport from '@ckeditor/ckeditor5-list/src/list/adjacentlistssupport'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; diff --git a/productivity-pack/package.json b/productivity-pack/package.json index 0989959..5a14739 100644 --- a/productivity-pack/package.json +++ b/productivity-pack/package.json @@ -7,41 +7,41 @@ "license": "GPL-2.0-or-later", "private": true, "devDependencies": { - "@ckeditor/ckeditor5-editor-decoupled": "40.2.0", - "@ckeditor/ckeditor5-alignment": "40.2.0", - "@ckeditor/ckeditor5-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-ckbox": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-easy-image": "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-image": "40.2.0", - "@ckeditor/ckeditor5-import-word": "40.2.0", - "@ckeditor/ckeditor5-indent": "40.2.0", - "@ckeditor/ckeditor5-link": "40.2.0", - "@ckeditor/ckeditor5-list": "40.2.0", - "@ckeditor/ckeditor5-media-embed": "40.2.0", - "@ckeditor/ckeditor5-mention": "40.2.0", - "@ckeditor/ckeditor5-page-break": "40.2.0", - "@ckeditor/ckeditor5-paragraph": "40.2.0", - "@ckeditor/ckeditor5-paste-from-office": "40.2.0", - "@ckeditor/ckeditor5-remove-format": "40.2.0", - "@ckeditor/ckeditor5-table": "40.2.0", - "@ckeditor/ckeditor5-typing": "40.2.0", - "@ckeditor/ckeditor5-adapter-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-template": "40.2.0", - "@ckeditor/ckeditor5-document-outline": "40.2.0", - "@ckeditor/ckeditor5-format-painter": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "40.2.0", - "@ckeditor/ckeditor5-pagination": "40.2.0", - "@webspellchecker/wproofreader-ckeditor5": "^2.3.1", + "@ckeditor/ckeditor5-editor-decoupled": "41.4.2", + "@ckeditor/ckeditor5-alignment": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-ckbox": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-dev-translations": "^40.2.0", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-easy-image": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-export-pdf": "41.4.2", + "@ckeditor/ckeditor5-export-word": "41.4.2", + "@ckeditor/ckeditor5-find-and-replace": "41.4.2", + "@ckeditor/ckeditor5-font": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-import-word": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-media-embed": "41.4.2", + "@ckeditor/ckeditor5-mention": "41.4.2", + "@ckeditor/ckeditor5-page-break": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-remove-format": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-template": "41.4.2", + "@ckeditor/ckeditor5-document-outline": "41.4.2", + "@ckeditor/ckeditor5-format-painter": "41.4.2", + "@ckeditor/ckeditor5-slash-command": "41.4.2", + "@ckeditor/ckeditor5-pagination": "41.4.2", + "@webspellchecker/wproofreader-ckeditor5": "2.3.1", "css-loader": "^5.2.7", "postcss": "^8.4.19", "postcss-loader": "^4.3.0", diff --git a/source-code-editing/package.json b/source-code-editing/package.json index 9d93951..ce37e6c 100644 --- a/source-code-editing/package.json +++ b/source-code-editing/package.json @@ -8,55 +8,55 @@ "private": true, "devDependencies": { "@babel/core": "^7.20.7", - "@ckeditor/ckeditor5-adapter-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-alignment": "41.2.1", - "@ckeditor/ckeditor5-autoformat": "41.2.1", - "@ckeditor/ckeditor5-basic-styles": "41.2.1", - "@ckeditor/ckeditor5-block-quote": "41.2.1", - "@ckeditor/ckeditor5-ckbox": "41.2.1", - "@ckeditor/ckeditor5-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-cloud-services": "41.2.1", - "@ckeditor/ckeditor5-code-block": "41.2.1", - "@ckeditor/ckeditor5-core": "41.2.1", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "41.2.1", - "@ckeditor/ckeditor5-engine": "41.2.1", - "@ckeditor/ckeditor5-enter": "41.2.1", - "@ckeditor/ckeditor5-essentials": "41.2.1", - "@ckeditor/ckeditor5-export-pdf": "41.2.1", - "@ckeditor/ckeditor5-export-word": "41.2.1", - "@ckeditor/ckeditor5-find-and-replace": "41.2.1", - "@ckeditor/ckeditor5-font": "41.2.1", - "@ckeditor/ckeditor5-heading": "41.2.1", - "@ckeditor/ckeditor5-horizontal-line": "41.2.1", - "@ckeditor/ckeditor5-html-embed": "41.2.1", - "@ckeditor/ckeditor5-html-support": "41.2.1", - "@ckeditor/ckeditor5-image": "41.2.1", - "@ckeditor/ckeditor5-import-word": "41.2.1", - "@ckeditor/ckeditor5-indent": "41.2.1", - "@ckeditor/ckeditor5-language": "41.2.1", - "@ckeditor/ckeditor5-link": "41.2.1", - "@ckeditor/ckeditor5-list": "41.2.1", - "@ckeditor/ckeditor5-media-embed": "41.2.1", - "@ckeditor/ckeditor5-mention": "41.2.1", - "@ckeditor/ckeditor5-page-break": "41.2.1", - "@ckeditor/ckeditor5-paragraph": "41.2.1", - "@ckeditor/ckeditor5-paste-from-office": "41.2.1", - "@ckeditor/ckeditor5-remove-format": "41.2.1", - "@ckeditor/ckeditor5-restricted-editing": "41.2.1", - "@ckeditor/ckeditor5-source-editing": "41.2.1", - "@ckeditor/ckeditor5-special-characters": "41.2.1", - "@ckeditor/ckeditor5-style": "41.2.1", - "@ckeditor/ckeditor5-show-blocks": "41.2.1", - "@ckeditor/ckeditor5-table": "41.2.1", - "@ckeditor/ckeditor5-theme-lark": "41.2.1", - "@ckeditor/ckeditor5-typing": "41.2.1", - "@ckeditor/ckeditor5-ui": "41.2.1", - "@ckeditor/ckeditor5-undo": "41.2.1", - "@ckeditor/ckeditor5-upload": "41.2.1", - "@ckeditor/ckeditor5-utils": "41.2.1", - "@ckeditor/ckeditor5-template": "41.2.1", - "@ckeditor/ckeditor5-slash-command": "41.2.1", + "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-alignment": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-block-quote": "41.4.2", + "@ckeditor/ckeditor5-ckbox": "41.4.2", + "@ckeditor/ckeditor5-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-code-block": "41.4.2", + "@ckeditor/ckeditor5-core": "41.4.2", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-editor-classic": "41.4.2", + "@ckeditor/ckeditor5-engine": "41.4.2", + "@ckeditor/ckeditor5-enter": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-export-pdf": "41.4.2", + "@ckeditor/ckeditor5-export-word": "41.4.2", + "@ckeditor/ckeditor5-find-and-replace": "41.4.2", + "@ckeditor/ckeditor5-font": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-horizontal-line": "41.4.2", + "@ckeditor/ckeditor5-html-embed": "41.4.2", + "@ckeditor/ckeditor5-html-support": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-import-word": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-language": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-media-embed": "41.4.2", + "@ckeditor/ckeditor5-mention": "41.4.2", + "@ckeditor/ckeditor5-page-break": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-remove-format": "41.4.2", + "@ckeditor/ckeditor5-restricted-editing": "41.4.2", + "@ckeditor/ckeditor5-source-editing": "41.4.2", + "@ckeditor/ckeditor5-special-characters": "41.4.2", + "@ckeditor/ckeditor5-style": "41.4.2", + "@ckeditor/ckeditor5-show-blocks": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-theme-lark": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@ckeditor/ckeditor5-ui": "41.4.2", + "@ckeditor/ckeditor5-undo": "41.4.2", + "@ckeditor/ckeditor5-upload": "41.4.2", + "@ckeditor/ckeditor5-utils": "41.4.2", + "@ckeditor/ckeditor5-template": "41.4.2", + "@ckeditor/ckeditor5-slash-command": "41.4.2", "@webspellchecker/wproofreader-ckeditor5": "2.3.1", "css-loader": "^5.2.7", "postcss": "^8.4.19", diff --git a/tests/cypress/e2e/test_demos.cy.js b/tests/cypress/e2e/test_demos.cy.js index a90b907..a8e4658 100644 --- a/tests/cypress/e2e/test_demos.cy.js +++ b/tests/cypress/e2e/test_demos.cy.js @@ -1,34 +1,33 @@ describe( 'Test CKEditor 5 demo', () => { - const defaultDemos = [ - 'feature-rich', + const demosNIMBuilt = [ + 'ai-assistant', 'headless', 'internationalization', 'markdown', 'mobile', - 'source-code-editing', + 'paste-from-office-enhanced', 'user-interface-balloon', 'user-interface-balloon-block', 'user-interface-bottom-toolbar', 'user-interface-button-grouping', 'user-interface-classic', - 'user-interface-document', 'user-interface-inline' - ] + ]; - defaultDemos.forEach( demo => { - it( `Testing demo: ${ demo }`, () => { - const URL = `http://localhost:9001/${ demo }/`; + demosNIMBuilt.forEach( demo => { + it( `Testing demo: ${ demo } (NIM built)`, () => { + const URL = `http://localhost:9002/${ demo }.html`; cy.visit( URL ); if ( demo == 'mobile' ) { cy.get( 'iframe' ).then( $iframe => { const doc = $iframe.contents(); - + // Check if the editor initialized properly. doc.get( '.ck-editor__editable' ); } ) - + return; } @@ -43,4 +42,31 @@ describe( 'Test CKEditor 5 demo', () => { } } ) } ); + + const demosLegacyBuilt = [ + 'feature-rich', + 'mathtype', + 'source-code-editing', + 'productivity-pack', + 'user-interface-document', + 'wproofreader', + ]; + + demosLegacyBuilt.forEach( demo => { + it( `Testing demo: ${ demo } (webpack legacy built)`, () => { + const URL = `http://localhost:9001/${ demo }/`; + + cy.visit( URL ); + + // Check if the editor initialized properly. + cy.get( '.ck-editor__editable' ); + + // Check if images loaded properly. + if ( Cypress.$( 'img' ).length > 0 ) { + cy.get( 'img' ).each( $img => { + expect( $img[ 0 ].naturalWidth ).to.be.above( 0 ); + } ); + } + } ) + } ); } ) diff --git a/tests/cypress/fixtures/example.json b/tests/cypress/fixtures/example.json deleted file mode 100644 index 02e4254..0000000 --- a/tests/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 66ea16e..119ab03 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -22,4 +22,4 @@ // // // -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) diff --git a/tests/cypress/support/e2e.js b/tests/cypress/support/e2e.js index 0e7290a..d1dd135 100644 --- a/tests/cypress/support/e2e.js +++ b/tests/cypress/support/e2e.js @@ -17,4 +17,4 @@ import './commands' // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/tests/scripts/build-and-test-demos.sh b/tests/scripts/build-and-test-demos.sh index d2363ca..7a915e7 100755 --- a/tests/scripts/build-and-test-demos.sh +++ b/tests/scripts/build-and-test-demos.sh @@ -2,25 +2,42 @@ # Set error variable ERROR=0 +DEMOS_PATH=$(pwd) -DEMOS_PATH=`pwd` +# Prepare tmp dirs +rm -rf builds +mkdir -p builds +mkdir -p builds/assets # Prepare the environment: install dependencies and build samples -for DIR in $DEMOS_PATH/* ; do - if [[ -d "$DIR" && ! "$DIR" = "$DEMOS_PATH/tests" ]]; then - DEMO_NAME=$(echo $DIR | awk -F '/' '{print $NF}') +for DIR in "$DEMOS_PATH"/* ; do + if [[ -d "$DIR" && ! "$DIR" = "$DEMOS_PATH/tests" && ! "$DIR" = "$DEMOS_PATH/builds" ]]; then + DEMO_NAME=$(echo "$DIR" | awk -F '/' '{print $NF}') # Navigate to the demo directory - cd $DIR + cd "$DIR" || exit + # Install packages echo "Installing dependencies for $DEMO_NAME" yarn > /dev/null 2>&1 + # Build demo echo "Building demo: $DEMO_NAME" - npx webpack --mode development > /dev/null - if [ ! $? -eq 0 ]; then - echo "Building failed: $DEMO_NAME" - ERROR=1 + if [[ -f "webpack.config.js" ]]; then + # - Use legacy webpack build if webpack config present + echo "Using webpack build..." + yarn build-dev > /dev/null + else + # - Build with yarn + vite and move files to common dir + echo "Using vite build..." + yarn build > /dev/null + cp "$DIR/dist/index.html" "$DEMOS_PATH/builds/$DEMO_NAME.html" + cp -R "$DIR/dist/assets" "$DEMOS_PATH/builds/" + + # Copy additional file from `mobile` demo + if [[ -f "mobile-iframe.html" ]]; then + cp "$DIR/dist/mobile-iframe.html" "$DEMOS_PATH/builds/mobile-iframe.html" + fi fi fi done @@ -28,16 +45,18 @@ done echo "Samples building completed." # Start the server -echo "Starting up the server." +echo "Starting up the server for legacy-built samples." http-server $DEMOS_PATH -p 9001 -s & +echo "Starting up the server for NIM-built samples." +http-server "$DEMOS_PATH/builds/" -p 9002 -s & # Start tests -cd $DEMOS_PATH/tests +cd "$DEMOS_PATH"/tests || exit yarn run cy:test-demos if [ ! $? -eq 0 ]; then - echo "Some tests failed." - ERROR=1 + echo "Some tests failed." + ERROR=1 fi if [ $ERROR -eq 1 ]; then diff --git a/user-interface-balloon-block/README.md b/user-interface-balloon-block/README.md index 53bac7f..13ca93e 100644 --- a/user-interface-balloon-block/README.md +++ b/user-interface-balloon-block/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-balloon-block && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-balloon-block/index.html b/user-interface-balloon-block/index.html index 6f9bafc..1993c3c 100644 --- a/user-interface-balloon-block/index.html +++ b/user-interface-balloon-block/index.html @@ -91,6 +91,6 @@

Masterpiece of the worldโ€™s heritage

- + diff --git a/user-interface-balloon-block/index.js b/user-interface-balloon-block/index.js deleted file mode 100644 index c78b402..0000000 --- a/user-interface-balloon-block/index.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * @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 - */ - -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; - -import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'; - -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -import BlockToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; - -BalloonEditor.create( - document.querySelector('#cke5-user-interface-balloon-block-demo'), - { - plugins: [ - Autoformat, - BlockQuote, - BlockToolbar, - Bold, - CKFinder, - CloudServices, - Essentials, - Heading, - Image, - ImageCaption, - ImageStyle, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - IndentBlock, - Italic, - Link, - List, - MediaEmbed, - Mention, - Paragraph, - PasteFromOffice, - PictureEditing, - Table, - TableToolbar, - TextTransformation, - UploadAdapter, - // SlashCommand, - ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, - blockToolbar: [ - 'undo', - 'redo', - '|', - 'heading', - '|', - 'uploadImage', - 'insertTable', - 'blockQuote', - 'mediaEmbed', - '|', - 'bulletedList', - 'numberedList', - 'outdent', - 'indent', - ], - toolbar: { - items: ['bold', 'italic', 'link'], - }, - heading: { - options: [ - { - model: 'paragraph', - title: 'Paragraph', - class: 'ck-heading_paragraph', - }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - { - model: 'heading4', - view: 'h4', - title: 'Heading 4', - class: 'ck-heading_heading4', - }, - ], - }, - image: { - toolbar: [ - 'imageStyle:inline', - 'imageStyle:block', - 'imageStyle:side', - '|', - 'toggleImageCaption', - 'imageTextAlternative', - ], - }, - link: { - addTargetToExternalLinks: true, - defaultProtocol: 'https://', - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, - } -) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/user-interface-balloon-block/index.ts b/user-interface-balloon-block/index.ts new file mode 100644 index 0000000..88eb2f9 --- /dev/null +++ b/user-interface-balloon-block/index.ts @@ -0,0 +1,168 @@ +/** + * @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 + */ + +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} + +import { + BalloonEditor, + Autoformat, + Bold, + Italic, + BlockQuote, + Base64UploadAdapter, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + Heading, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + PictureEditing, + Indent, + IndentBlock, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + Table, + TableToolbar, + TextTransformation, + BlockToolbar, +} from 'ckeditor5'; + +import { + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +BalloonEditor.create( + document.querySelector('#cke5-user-interface-balloon-block-demo') as HTMLElement, + { + plugins: [ + Autoformat, + BlockQuote, + BlockToolbar, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + Heading, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + PictureEditing, + Table, + TableToolbar, + TextTransformation, + ...(LICENSE_KEY ? [SlashCommand] : []), + ], + licenseKey: LICENSE_KEY, + blockToolbar: [ + 'undo', + 'redo', + '|', + 'heading', + '|', + 'uploadImage', + 'insertTable', + 'blockQuote', + 'mediaEmbed', + '|', + 'bulletedList', + 'numberedList', + 'outdent', + 'indent', + ], + toolbar: { + items: ['bold', 'italic', 'link'], + }, + heading: { + options: [ + { + model: 'paragraph', + title: 'Paragraph', + class: 'ck-heading_paragraph', + }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + ], + }, + image: { + toolbar: [ + 'imageStyle:inline', + 'imageStyle:block', + 'imageStyle:side', + '|', + 'toggleImageCaption', + 'imageTextAlternative', + ], + }, + link: { + addTargetToExternalLinks: true, + defaultProtocol: 'https://', + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/user-interface-balloon-block/package.json b/user-interface-balloon-block/package.json index 3b9af29..9956075 100644 --- a/user-interface-balloon-block/package.json +++ b/user-interface-balloon-block/package.json @@ -1,59 +1,22 @@ { "name": "user-interface-balloon-block", - "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-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-balloon": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-font": "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-media-embed": "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-select-all": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-balloon-block/webpack.config.js b/user-interface-balloon-block/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/user-interface-balloon-block/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/user-interface-balloon/README.md b/user-interface-balloon/README.md index 9b62744..dcb3ea2 100644 --- a/user-interface-balloon/README.md +++ b/user-interface-balloon/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-balloon && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-balloon/index.html b/user-interface-balloon/index.html index 2d1a63a..ec5b3e2 100644 --- a/user-interface-balloon/index.html +++ b/user-interface-balloon/index.html @@ -78,6 +78,6 @@

Next destination

- + diff --git a/user-interface-balloon/index.js b/user-interface-balloon/index.js deleted file mode 100644 index 1181cba..0000000 --- a/user-interface-balloon/index.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * @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 - */ - -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; - -import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'; - -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; - -BalloonEditor.create( - document.querySelector('#cke5-user-interface-balloon-demo'), - { - plugins: [ - Autoformat, - BlockQuote, - Bold, - CKFinder, - CloudServices, - Essentials, - Heading, - Image, - ImageCaption, - ImageStyle, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - IndentBlock, - Italic, - Link, - List, - MediaEmbed, - Mention, - Paragraph, - PasteFromOffice, - PictureEditing, - Table, - TableToolbar, - TextTransformation, - UploadAdapter, - // SlashCommand, - ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, - toolbar: [ - 'undo', - 'redo', - '|', - 'heading', - '|', - 'bold', - 'italic', - '|', - 'link', - 'uploadImage', - 'insertTable', - 'blockQuote', - 'mediaEmbed', - '|', - 'bulletedList', - 'numberedList', - 'outdent', - 'indent', - ], - heading: { - options: [ - { - model: 'paragraph', - title: 'Paragraph', - class: 'ck-heading_paragraph', - }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - { - model: 'heading4', - view: 'h4', - title: 'Heading 4', - class: 'ck-heading_heading4', - }, - ], - }, - image: { - toolbar: [ - 'imageStyle:inline', - 'imageStyle:block', - 'imageStyle:side', - '|', - 'toggleImageCaption', - 'imageTextAlternative', - ], - }, - link: { - addTargetToExternalLinks: true, - defaultProtocol: 'https://', - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, - } -) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/user-interface-balloon/index.ts b/user-interface-balloon/index.ts new file mode 100644 index 0000000..90528ef --- /dev/null +++ b/user-interface-balloon/index.ts @@ -0,0 +1,167 @@ +/** + * @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 + */ + +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} + +import { + BalloonEditor, + Autoformat, + Bold, + Italic, + BlockQuote, + Base64UploadAdapter, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + Heading, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + PictureEditing, + Indent, + IndentBlock, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + Table, + TableToolbar, + TextTransformation, +} from 'ckeditor5'; + +import { + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +BalloonEditor.create( + document.querySelector('#cke5-user-interface-balloon-demo') as HTMLElement, + { + plugins: [ + Autoformat, + BlockQuote, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + Heading, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + PictureEditing, + Table, + TableToolbar, + TextTransformation, + ...(LICENSE_KEY ? [SlashCommand] : []), + ], + licenseKey: LICENSE_KEY, + toolbar: [ + 'undo', + 'redo', + '|', + 'heading', + '|', + 'bold', + 'italic', + '|', + 'link', + 'uploadImage', + 'insertTable', + 'blockQuote', + 'mediaEmbed', + '|', + 'bulletedList', + 'numberedList', + 'outdent', + 'indent', + ], + heading: { + options: [ + { + model: 'paragraph', + title: 'Paragraph', + class: 'ck-heading_paragraph', + }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + ], + }, + image: { + toolbar: [ + 'imageStyle:inline', + 'imageStyle:block', + 'imageStyle:side', + '|', + 'toggleImageCaption', + 'imageTextAlternative', + ], + }, + link: { + addTargetToExternalLinks: true, + defaultProtocol: 'https://', + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/user-interface-balloon/package.json b/user-interface-balloon/package.json index 0d3c709..8195a44 100644 --- a/user-interface-balloon/package.json +++ b/user-interface-balloon/package.json @@ -1,59 +1,22 @@ { "name": "user-interface-balloon", - "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-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-balloon": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-font": "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-media-embed": "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-select-all": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-balloon/webpack.config.js b/user-interface-balloon/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/user-interface-balloon/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/user-interface-bottom-toolbar/README.md b/user-interface-bottom-toolbar/README.md index dbb459d..43050b6 100644 --- a/user-interface-bottom-toolbar/README.md +++ b/user-interface-bottom-toolbar/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-bottom-toolbar && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-bottom-toolbar/index.html b/user-interface-bottom-toolbar/index.html index 0895a2d..6a2f63a 100644 --- a/user-interface-bottom-toolbar/index.html +++ b/user-interface-bottom-toolbar/index.html @@ -78,6 +78,6 @@

Editor with Bottom Toolbar user interface

- + diff --git a/user-interface-bottom-toolbar/index.js b/user-interface-bottom-toolbar/index.ts similarity index 72% rename from user-interface-bottom-toolbar/index.js rename to user-interface-bottom-toolbar/index.ts index 663b062..0eca0b6 100644 --- a/user-interface-bottom-toolbar/index.js +++ b/user-interface-bottom-toolbar/index.ts @@ -3,61 +3,75 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; - -import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; - -// Framework -import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; -import fontColorIcon from '@ckeditor/ckeditor5-font/theme/icons/font-color.svg'; -import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler'; -import DropdownButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview'; -import DropdownPanelView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelview'; -import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview'; -import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; - -// Features -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -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 Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -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 HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; -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 ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -// Productivity Pack features -import Template from '@ckeditor/ckeditor5-template/src/template'; -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} + +import { + DecoupledEditor, + Plugin, + clickOutsideHandler, + DropdownButtonView, + DropdownPanelView, + DropdownView, + ToolbarView, + Alignment, + Autoformat, + Bold, + Italic, + Strikethrough, + Subscript, + Superscript, + Underline, + BlockQuote, + CloudServices, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + getOptimalPosition, + Heading, + HorizontalLine, + Image, + ImageCaption, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + RemoveFormat, + Table, + TableColumnResize, + TableToolbar, + EditorConfig, +} from 'ckeditor5'; + +import { + Template, + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +type PanelPosition = DropdownPanelView['position']; export const TEMPLATE_DEFINITIONS = [ { @@ -100,6 +114,8 @@ export const TEMPLATE_DEFINITIONS = [ ]; class FormattingOptions extends Plugin { + public toolbarView: ToolbarView; + /** * @inheritDoc */ @@ -128,11 +144,6 @@ class FormattingOptions extends Plugin { ariaLabel: t('Formatting options toolbar'), }); - // Accessibility: Give the dropdown a human-readable ARIA label. - dropdownView.set({ - label: t('Formatting options'), - }); - // Toolbars in dropdowns need specific styling, hence the class. dropdownView.extendTemplate({ attributes: { @@ -185,7 +196,7 @@ class FormattingOptions extends Plugin { // Using the font color icon to visually represent the formatting. buttonView.set({ tooltip: t('Formatting options'), - icon: fontColorIcon, + icon: editor.plugins.get('FontColor').icon, }); dropdownView.panelView.children.add(toolbarView); @@ -212,22 +223,21 @@ class BottomToolbarCustomizations extends Plugin { const editor = this.editor; editor.ui.on('ready', () => { - overrideDropdownPositionsToNorth(editor, editor.ui.view.toolbar); - overrideDropdownPositionsToNorth( - editor, - editor.plugins.get('FormattingOptions').toolbarView - ); + // Even though it's not in typings, toolbar object is there (probably dynamically added at some point). + const editorToolbar = (editor.ui.view as any).toolbar; + const formattingToolbar = (editor.plugins.get('FormattingOptions') as FormattingOptions).toolbarView; - overrideTooltipPositions(editor.ui.view.toolbar); - overrideTooltipPositions( - editor.plugins.get('FormattingOptions').toolbarView - ); + overrideDropdownPositionsToNorth(editor, editorToolbar); + overrideDropdownPositionsToNorth(editor, formattingToolbar); + + overrideTooltipPositions(editorToolbar); + overrideTooltipPositions(formattingToolbar); }); } } DecoupledEditor.create( - document.querySelector('#cke5-user-interface-bottom-toolbar-demo-content'), + document.querySelector('#cke5-user-interface-bottom-toolbar-demo-content') as HTMLElement, { plugins: [ Alignment, @@ -268,11 +278,9 @@ DecoupledEditor.create( TableColumnResize, TableToolbar, Underline, - UploadAdapter, - // SlashCommand, - // Template, + ...(LICENSE_KEY ? [SlashCommand, Template] : []) ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, + licenseKey: LICENSE_KEY, toolbar: [ 'formattingOptions', '|', @@ -360,7 +368,6 @@ DecoupledEditor.create( supportAllValues: true, }, image: { - styles: ['alignCenter', 'alignLeft', 'alignRight'], toolbar: [ 'imageTextAlternative', 'toggleImageCaption', @@ -381,20 +388,20 @@ DecoupledEditor.create( template: { definitions: TEMPLATE_DEFINITIONS, }, - } + } as (EditorConfig & {formattingOptions: string[]}) ) - .then((editor) => { - window.editor = editor; - - document - .querySelector( - '#cke5-user-interface-bottom-toolbar-demo-toolbar-container' - ) - .appendChild(editor.ui.view.toolbar.element); - }) - .catch((error) => { - console.error(error.stack); - }); +.then((editor) => { + (window as any).editor = editor; + + document + .querySelector( + '#cke5-user-interface-bottom-toolbar-demo-toolbar-container' + )! + .appendChild(editor.ui.view.toolbar.element!); +}) +.catch((error) => { + console.error(error.stack); +}); /** * Force all toolbar dropdown panels to use northern positions rather than southern (editor default). @@ -458,12 +465,12 @@ function overrideDropdownPositionsToNorth(editor, toolbarView) { return; } - item.panelView.position = DropdownView._getOptimalPosition({ - element: item.panelView.element, - target: item.buttonView.element, + item.panelView.position = getOptimalPosition({ + element: item.panelView.element!, + target: item.buttonView.element!, fitInViewport: true, positions: panelPositions, - }).name; + })!.name as PanelPosition; }); } } diff --git a/user-interface-bottom-toolbar/package.json b/user-interface-bottom-toolbar/package.json index 95e4e5d..9956075 100644 --- a/user-interface-bottom-toolbar/package.json +++ b/user-interface-bottom-toolbar/package.json @@ -1,63 +1,22 @@ { "name": "user-interface-balloon-block", - "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-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-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.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-font": "40.2.0", - "@ckeditor/ckeditor5-heading": "40.2.0", - "@ckeditor/ckeditor5-horizontal-line": "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-media-embed": "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-remove-format": "40.2.0", - "@ckeditor/ckeditor5-select-all": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "40.2.0", - "@ckeditor/ckeditor5-template": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-bottom-toolbar/webpack.config.js b/user-interface-bottom-toolbar/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/user-interface-bottom-toolbar/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/user-interface-button-grouping/README.md b/user-interface-button-grouping/README.md index bed976a..39bb694 100644 --- a/user-interface-button-grouping/README.md +++ b/user-interface-button-grouping/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-button-grouping && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-button-grouping/index.html b/user-interface-button-grouping/index.html index c317464..8c57af4 100644 --- a/user-interface-button-grouping/index.html +++ b/user-interface-button-grouping/index.html @@ -64,6 +64,6 @@

Outstanding configurability ๐Ÿ‘Œ

- + diff --git a/user-interface-button-grouping/index.js b/user-interface-button-grouping/index.js deleted file mode 100644 index 91ad3b4..0000000 --- a/user-interface-button-grouping/index.js +++ /dev/null @@ -1,453 +0,0 @@ -/** - * @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 - */ - -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; - -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -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 Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -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 HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters'; -import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials'; -import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; - -const REDUCED_MATERIAL_COLORS = [ - { label: 'Red 50', color: '#ffebee' }, - { label: 'Purple 50', color: '#f3e5f5' }, - { label: 'Indigo 50', color: '#e8eaf6' }, - { label: 'Blue 50', color: '#e3f2fd' }, - { label: 'Cyan 50', color: '#e0f7fa' }, - { label: 'Teal 50', color: '#e0f2f1' }, - { label: 'Light green 50', color: '#f1f8e9' }, - { label: 'Lime 50', color: '#f9fbe7' }, - { label: 'Amber 50', color: '#fff8e1' }, - { label: 'Orange 50', color: '#fff3e0' }, - { label: 'Grey 50', color: '#fafafa' }, - { label: 'Blue grey 50', color: '#eceff1' }, - { label: 'Red 100', color: '#ffcdd2' }, - { label: 'Purple 100', color: '#e1bee7' }, - { label: 'Indigo 100', color: '#c5cae9' }, - { label: 'Blue 100', color: '#bbdefb' }, - { label: 'Cyan 100', color: '#b2ebf2' }, - { label: 'Teal 100', color: '#b2dfdb' }, - { label: 'Light green 100', color: '#dcedc8' }, - { label: 'Lime 100', color: '#f0f4c3' }, - { label: 'Amber 100', color: '#ffecb3' }, - { label: 'Orange 100', color: '#ffe0b2' }, - { label: 'Grey 100', color: '#f5f5f5' }, - { label: 'Blue grey 100', color: '#cfd8dc' }, - { label: 'Red 200', color: '#ef9a9a' }, - { label: 'Purple 200', color: '#ce93d8' }, - { label: 'Indigo 200', color: '#9fa8da' }, - { label: 'Blue 200', color: '#90caf9' }, - { label: 'Cyan 200', color: '#80deea' }, - { label: 'Teal 200', color: '#80cbc4' }, - { label: 'Light green 200', color: '#c5e1a5' }, - { label: 'Lime 200', color: '#e6ee9c' }, - { label: 'Amber 200', color: '#ffe082' }, - { label: 'Orange 200', color: '#ffcc80' }, - { label: 'Grey 200', color: '#eeeeee' }, - { label: 'Blue grey 200', color: '#b0bec5' }, - { label: 'Red 300', color: '#e57373' }, - { label: 'Purple 300', color: '#ba68c8' }, - { label: 'Indigo 300', color: '#7986cb' }, - { label: 'Blue 300', color: '#64b5f6' }, - { label: 'Cyan 300', color: '#4dd0e1' }, - { label: 'Teal 300', color: '#4db6ac' }, - { label: 'Light green 300', color: '#aed581' }, - { label: 'Lime 300', color: '#dce775' }, - { label: 'Amber 300', color: '#ffd54f' }, - { label: 'Orange 300', color: '#ffb74d' }, - { label: 'Grey 300', color: '#e0e0e0' }, - { label: 'Blue grey 300', color: '#90a4ae' }, - { label: 'Red 400', color: '#ef5350' }, - { label: 'Purple 400', color: '#ab47bc' }, - { label: 'Indigo 400', color: '#5c6bc0' }, - { label: 'Blue 400', color: '#42a5f5' }, - { label: 'Cyan 400', color: '#26c6da' }, - { label: 'Teal 400', color: '#26a69a' }, - { label: 'Light green 400', color: '#9ccc65' }, - { label: 'Lime 400', color: '#d4e157' }, - { label: 'Amber 400', color: '#ffca28' }, - { label: 'Orange 400', color: '#ffa726' }, - { label: 'Grey 400', color: '#bdbdbd' }, - { label: 'Blue grey 400', color: '#78909c' }, - { label: 'Red 500', color: '#f44336' }, - { label: 'Purple 500', color: '#9c27b0' }, - { label: 'Indigo 500', color: '#3f51b5' }, - { label: 'Blue 500', color: '#2196f3' }, - { label: 'Cyan 500', color: '#00bcd4' }, - { label: 'Teal 500', color: '#009688' }, - { label: 'Light green 500', color: '#8bc34a' }, - { label: 'Lime 500', color: '#cddc39' }, - { label: 'Amber 500', color: '#ffc107' }, - { label: 'Orange 500', color: '#ff9800' }, - { label: 'Grey 500', color: '#9e9e9e' }, - { label: 'Blue grey 500', color: '#607d8b' }, - { label: 'Red 600', color: '#e53935' }, - { label: 'Purple 600', color: '#8e24aa' }, - { label: 'Indigo 600', color: '#3949ab' }, - { label: 'Blue 600', color: '#1e88e5' }, - { label: 'Cyan 600', color: '#00acc1' }, - { label: 'Teal 600', color: '#00897b' }, - { label: 'Light green 600', color: '#7cb342' }, - { label: 'Lime 600', color: '#c0ca33' }, - { label: 'Amber 600', color: '#ffb300' }, - { label: 'Orange 600', color: '#fb8c00' }, - { label: 'Grey 600', color: '#757575' }, - { label: 'Blue grey 600', color: '#546e7a' }, - { label: 'Red 700', color: '#d32f2f' }, - { label: 'Purple 700', color: '#7b1fa2' }, - { label: 'Indigo 700', color: '#303f9f' }, - { label: 'Blue 700', color: '#1976d2' }, - { label: 'Cyan 700', color: '#0097a7' }, - { label: 'Teal 700', color: '#00796b' }, - { label: 'Light green 700', color: '#689f38' }, - { label: 'Lime 700', color: '#afb42b' }, - { label: 'Amber 700', color: '#ffa000' }, - { label: 'Orange 700', color: '#f57c00' }, - { label: 'Grey 700', color: '#616161' }, - { label: 'Blue grey 700', color: '#455a64' }, - { label: 'Red 800', color: '#c62828' }, - { label: 'Purple 800', color: '#6a1b9a' }, - { label: 'Indigo 800', color: '#283593' }, - { label: 'Blue 800', color: '#1565c0' }, - { label: 'Cyan 800', color: '#00838f' }, - { label: 'Teal 800', color: '#00695c' }, - { label: 'Light green 800', color: '#558b2f' }, - { label: 'Lime 800', color: '#9e9d24' }, - { label: 'Amber 800', color: '#ff8f00' }, - { label: 'Orange 800', color: '#ef6c00' }, - { label: 'Grey 800', color: '#424242' }, - { label: 'Blue grey 800', color: '#37474f' }, - { label: 'Red 900', color: '#b71c1c' }, - { label: 'Purple 900', color: '#4a148c' }, - { label: 'Indigo 900', color: '#1a237e' }, - { label: 'Blue 900', color: '#0d47a1' }, - { label: 'Cyan 900', color: '#006064' }, - { label: 'Teal 900', color: '#004d40' }, - { label: 'Light green 900', color: '#33691e' }, - { label: 'Lime 900', color: '#827717' }, - { label: 'Amber 900', color: '#ff6f00' }, - { label: 'Orange 900', color: '#e65100' }, - { label: 'Grey 900', color: '#212121' }, - { label: 'Blue grey 900', color: '#263238' }, -]; - -/** - * Enrich the special characters plugin with emojis. - */ -function SpecialCharactersEmoji(editor) { - if (!editor.plugins.get('SpecialCharacters')) { - return; - } - - // Make sure Emojis are last on the list. - this.afterInit = function () { - editor.plugins.get('SpecialCharacters').addItems('Emoji', EMOJIS_ARRAY); - }; -} - -const EMOJIS_ARRAY = [ - { character: '๐Ÿ™ˆ', title: 'See-No-Evil Monkey' }, - { character: '๐Ÿ™„', title: 'Face With Rolling Eyes' }, - { character: '๐Ÿ™ƒ', title: 'Upside Down Face' }, - { character: '๐Ÿ™‚', title: 'Slightly Smiling Face' }, - { character: '๐Ÿ˜ด', title: 'Sleeping Face' }, - { character: '๐Ÿ˜ณ', title: 'Flushed Face' }, - { character: '๐Ÿ˜ฑ', title: 'Face Screaming in Fear' }, - { character: '๐Ÿ˜ญ', title: 'Loudly Crying Face' }, - { character: '๐Ÿ˜ฌ', title: 'Grimacing Face' }, - { character: '๐Ÿ˜ฉ', title: 'Weary Face' }, - { character: '๐Ÿ˜ข', title: 'Crying Face' }, - { character: '๐Ÿ˜ก', title: 'Pouting Face' }, - { character: '๐Ÿ˜ž', title: 'Disappointed Face' }, - { character: '๐Ÿ˜œ', title: 'Face with Stuck-Out Tongue and Winking Eye' }, - { character: '๐Ÿ˜š', title: 'Kissing Face With Closed Eyes' }, - { character: '๐Ÿ˜˜', title: 'Face Throwing a Kiss' }, - { character: '๐Ÿ˜”', title: 'Pensive Face' }, - { character: '๐Ÿ˜’', title: 'Unamused Face' }, - { character: '๐Ÿ˜‘', title: 'Expressionless Face' }, - { character: '๐Ÿ˜', title: 'Neutral Face' }, - { character: '๐Ÿ˜', title: 'Smirking Face' }, - { character: '๐Ÿ˜Ž', title: 'Smiling Face with Sunglasses' }, - { character: '๐Ÿ˜', title: 'Smiling Face with Heart-Eyes' }, - { character: '๐Ÿ˜Œ', title: 'Relieved Face' }, - { character: '๐Ÿ˜‹', title: 'Face Savoring Delicious Food' }, - { character: '๐Ÿ˜Š', title: 'Smiling Face with Smiling Eyes' }, - { character: '๐Ÿ˜‰', title: 'Winking Face' }, - { character: '๐Ÿ˜ˆ', title: 'Smiling Face With Horns' }, - { character: '๐Ÿ˜‡', title: 'Smiling Face with Halo' }, - { - character: '๐Ÿ˜†', - title: 'Smiling Face with Open Mouth and Tightly-Closed Eyes', - }, - { character: '๐Ÿ˜…', title: 'Smiling Face with Open Mouth and Cold Sweat' }, - { character: '๐Ÿ˜„', title: 'Smiling Face with Open Mouth and Smiling Eyes' }, - { character: '๐Ÿ˜ƒ', title: 'Smiling Face with Open Mouth' }, - { character: '๐Ÿ˜‚', title: 'Face with Tears of Joy' }, - { character: '๐Ÿ˜', title: 'Grinning Face with Smiling Eyes' }, - { character: '๐Ÿ˜€', title: 'Grinning Face' }, - { character: '๐Ÿฅบ', title: 'Pleading Face' }, - { character: '๐Ÿฅต', title: 'Hot Face' }, - { character: '๐Ÿฅด', title: 'Woozy Face' }, - { character: '๐Ÿฅณ', title: 'Partying Face' }, - { character: '๐Ÿฅฐ', title: 'Smiling Face with Hearts' }, - { character: '๐Ÿคญ', title: 'Face with Hand Over Mouth' }, - { character: '๐Ÿคช', title: 'Zany Face' }, - { character: '๐Ÿคฉ', title: 'Grinning Face with Star Eyes' }, - { character: '๐Ÿคฆ', title: 'Face Palm' }, - { character: '๐Ÿคค', title: 'Drooling Face' }, - { character: '๐Ÿคฃ', title: 'Rolling on the Floor Laughing' }, - { character: '๐Ÿค”', title: 'Thinking Face' }, - { character: '๐Ÿคž', title: 'Crossed Fingers' }, - { character: '๐Ÿ™', title: 'Person with Folded Hands' }, - { character: '๐Ÿ™Œ', title: 'Person Raising Both Hands in Celebration' }, - { character: '๐Ÿ™‹', title: 'Happy Person Raising One Hand' }, - { character: '๐Ÿคท', title: 'Shrug' }, - { character: '๐Ÿค—', title: 'Hugging Face' }, - { character: '๐Ÿ–ค', title: 'Black Heart' }, - { character: '๐Ÿ”ฅ', title: 'Fire' }, - { character: '๐Ÿ’ฐ', title: 'Money Bag' }, - { character: '๐Ÿ’ฏ', title: 'Hundred Points Symbol' }, - { character: '๐Ÿ’ช', title: 'Flexed Biceps' }, - { character: '๐Ÿ’ฉ', title: 'Pile of Poo' }, - { character: '๐Ÿ’ฅ', title: 'Collision' }, - { character: '๐Ÿ’ž', title: 'Revolving Hearts' }, - { character: '๐Ÿ’œ', title: 'Purple Heart' }, - { character: '๐Ÿ’š', title: 'Green Heart' }, - { character: '๐Ÿ’™', title: 'Blue Heart' }, - { character: '๐Ÿ’—', title: 'Growing Heart' }, - { character: '๐Ÿ’–', title: 'Sparkling Heart' }, - { character: '๐Ÿ’•', title: 'Two Hearts' }, - { character: '๐Ÿ’”', title: 'Broken Heart' }, - { character: '๐Ÿ’“', title: 'Beating Heart' }, - { character: '๐Ÿ’', title: 'Bouquet' }, - { character: '๐Ÿ’‹', title: 'Kiss Mark' }, - { character: '๐Ÿ’€', title: 'Skull' }, - { character: '๐Ÿ‘‘', title: 'Crown' }, - { character: '๐Ÿ‘', title: 'Clapping Hands Sign' }, - { character: '๐Ÿ‘', title: 'Thumbs Up Sign' }, - { character: '๐Ÿ‘Œ', title: 'OK Hand Sign' }, - { character: '๐Ÿ‘‰', title: 'Backhand Index Pointing Right' }, - { character: '๐Ÿ‘ˆ', title: 'Backhand Index Pointing Left' }, - { character: '๐Ÿ‘‡', title: 'Backhand Index Pointing Down' }, - { character: '๐Ÿ‘€', title: 'Eyes' }, - { character: '๐ŸŽถ', title: 'Multiple Musical Notes' }, - { character: '๐ŸŽŠ', title: 'Confetti Ball' }, - { character: '๐ŸŽ‰', title: 'Party Popper' }, - { character: '๐ŸŽˆ', title: 'Balloon' }, - { character: '๐ŸŽ‚', title: 'Birthday Cake' }, - { character: '๐ŸŽ', title: 'Wrapped Gift' }, - { character: '๐ŸŒน', title: 'Rose' }, - { character: '๐ŸŒธ', title: 'Cherry Blossom' }, - { character: '๐ŸŒž', title: 'Sun with Face' }, - { character: 'โค๏ธ', title: 'Red Heart' }, - { character: 'โฃ๏ธ', title: 'Heavy Heart Exclamation Mark Ornament' }, - { character: 'โœจ', title: 'Sparkles' }, - { character: 'โœŒ๏ธ', title: 'Victory Hand' }, - { character: 'โœ…', title: 'Check Mark Button' }, - { character: 'โ™ฅ๏ธ', title: 'Heart Suit' }, - { character: 'โ˜บ๏ธ', title: 'Smiling Face' }, - { character: 'โ˜น๏ธ', title: 'Frowning Face' }, - { character: 'โ˜€๏ธ', title: 'Sun' }, -]; - -ClassicEditor.create( - document.querySelector('#cke5-user-interface-button-grouping-demo'), - { - plugins: [ - Autoformat, - BlockQuote, - Bold, - CKFinder, - CloudServices, - Code, - Essentials, - FontBackgroundColor, - FontColor, - FontFamily, - FontSize, - Heading, - HorizontalLine, - Image, - ImageUpload, - ImageCaption, - ImageStyle, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - Italic, - Link, - List, - Mention, - Paragraph, - PasteFromOffice, - PictureEditing, - RemoveFormat, - SpecialCharacters, - SpecialCharactersEmoji, - SpecialCharactersEssentials, - Strikethrough, - Subscript, - Superscript, - Table, - TableToolbar, - TextTransformation, - TodoList, - Underline, - UploadAdapter, - // SlashCommand, - ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, - toolbar: [ - 'undo', - 'redo', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'underline', - { - label: 'Basic styles', - icon: 'text', - items: [ - 'fontSize', - 'fontFamily', - 'fontColor', - 'fontBackgroundColor', - 'strikethrough', - 'superscript', - 'subscript', - 'code', - ], - }, - 'removeFormat', - '|', - 'link', - 'insertTable', - { - label: 'Insert', - icon: 'plus', - items: [ - 'uploadImage', - 'blockQuote', - 'specialCharacters', - 'horizontalLine', - ], - }, - '|', - { - label: 'Lists', - icon: false, - items: ['bulletedList', 'numberedList', 'todoList'], - }, - ], - fontFamily: { - supportAllValues: true, - }, - fontSize: { - options: [10, 12, 14, 'default', 18, 20, 22], - supportAllValues: true, - }, - heading: { - options: [ - { - model: 'paragraph', - title: 'Paragraph', - class: 'ck-heading_paragraph', - }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - { - model: 'heading4', - view: 'h4', - title: 'Heading 4', - class: 'ck-heading_heading4', - }, - ], - }, - image: { - styles: ['alignCenter', 'alignLeft', 'alignRight'], - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - ], - }, - link: { - addTargetToExternalLinks: true, - defaultProtocol: 'https://', - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, - } -) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/markdown/index.js b/user-interface-button-grouping/index.ts similarity index 56% rename from markdown/index.js rename to user-interface-button-grouping/index.ts index 9379122..f4a84b2 100644 --- a/markdown/index.js +++ b/user-interface-button-grouping/index.ts @@ -3,40 +3,67 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; +// 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 = ''; -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} + +import { + ClassicEditor, + Autoformat, + Bold, + Code, + Italic, + Strikethrough, + Subscript, + Superscript, + Underline, + BlockQuote, + Base64UploadAdapter, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + Heading, + HorizontalLine, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + Mention, + PictureEditing, + Indent, + Link, + List, + SpecialCharacters, + SpecialCharactersEssentials, + TodoList, + Paragraph, + PasteFromOffice, + RemoveFormat, + Table, + TableToolbar, + TextTransformation, +} from 'ckeditor5'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; -import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'; -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 Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; +import { + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; /** * Enrich the special characters plugin with emojis. @@ -157,124 +184,161 @@ const EMOJIS_ARRAY = [ { character: 'โ˜€๏ธ', title: 'Sun' }, ]; -ClassicEditor.create(document.querySelector('#cke5-markdown-demo'), { - plugins: [ - Autoformat, - BlockQuote, - Bold, - CloudServices, - Code, - CodeBlock, - Essentials, - Heading, - HorizontalLine, - Image, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Italic, - Link, - List, - Markdown, - Mention, - Paragraph, - SourceEditing, - SpecialCharacters, - SpecialCharactersEmoji, - SpecialCharactersEssentials, - Strikethrough, - Table, - TableToolbar, - TextTransformation, - TodoList, - // SlashCommand, - ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, - language: 'en', - toolbar: [ - 'undo', - 'redo', - '|', - 'sourceEditing', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'strikethrough', - 'code', - '|', - 'bulletedList', - 'numberedList', - 'todoList', - '|', - 'link', - 'uploadImage', - 'insertTable', - 'blockQuote', - 'codeBlock', - 'horizontalLine', - 'specialCharacters', - ], - codeBlock: { - languages: [ - { language: 'css', label: 'CSS' }, - { language: 'html', label: 'HTML' }, - { language: 'javascript', label: 'JavaScript' }, - { language: 'php', label: 'PHP' }, +ClassicEditor.create( + document.querySelector('#cke5-user-interface-button-grouping-demo') as HTMLElement, + { + plugins: [ + Autoformat, + BlockQuote, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + Code, + Essentials, + FontBackgroundColor, + FontColor, + FontFamily, + FontSize, + Heading, + HorizontalLine, + Image, + ImageUpload, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + Italic, + Link, + List, + Mention, + Paragraph, + PasteFromOffice, + PictureEditing, + RemoveFormat, + SpecialCharacters, + SpecialCharactersEmoji, + SpecialCharactersEssentials, + Strikethrough, + Subscript, + Superscript, + Table, + TableToolbar, + TextTransformation, + TodoList, + Underline, + ...(LICENSE_KEY ? [SlashCommand] : []), ], - }, - heading: { - options: [ - { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, + licenseKey: LICENSE_KEY, + toolbar: [ + 'undo', + 'redo', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'underline', { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', + label: 'Basic styles', + icon: 'text', + items: [ + 'fontSize', + 'fontFamily', + 'fontColor', + 'fontBackgroundColor', + 'strikethrough', + 'superscript', + 'subscript', + 'code', + ], }, + 'removeFormat', + '|', + 'link', + 'insertTable', { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', + label: 'Insert', + icon: 'plus', + items: [ + 'uploadImage', + 'blockQuote', + 'specialCharacters', + 'horizontalLine', + ], }, + '|', { - model: 'heading4', - view: 'h4', - title: 'Heading 4', - class: 'ck-heading_heading4', - }, - { - model: 'heading5', - view: 'h5', - title: 'Heading 5', - class: 'ck-heading_heading5', - }, - { - model: 'heading6', - view: 'h6', - title: 'Heading 6', - class: 'ck-heading_heading6', + label: 'Lists', + icon: false, + items: ['bulletedList', 'numberedList', 'todoList'], }, ], - }, - image: { - toolbar: ['imageTextAlternative'], - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, + fontFamily: { + supportAllValues: true, + }, + fontSize: { + options: [10, 12, 14, 'default', 18, 20, 22], + supportAllValues: true, + }, + heading: { + options: [ + { + model: 'paragraph', + title: 'Paragraph', + class: 'ck-heading_paragraph', + }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + ], + }, + image: { + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + 'imageStyle:side', + ], + }, + link: { + addTargetToExternalLinks: true, + defaultProtocol: 'https://', + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + } +) +.then((editor) => { + (window as any).editor = editor; }) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); +.catch((error) => { + console.error(error.stack); +}); diff --git a/user-interface-button-grouping/package.json b/user-interface-button-grouping/package.json index f693dde..f0316ae 100644 --- a/user-interface-button-grouping/package.json +++ b/user-interface-button-grouping/package.json @@ -1,63 +1,22 @@ { "name": "user-interface-button-grouping", - "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-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-build-classic": "40.2.0", - "@ckeditor/ckeditor5-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "40.2.0", - "@ckeditor/ckeditor5-engine": "40.2.0", - "@ckeditor/ckeditor5-enter": "40.2.0", - "@ckeditor/ckeditor5-essentials": "40.2.0", - "@ckeditor/ckeditor5-font": "40.2.0", - "@ckeditor/ckeditor5-heading": "40.2.0", - "@ckeditor/ckeditor5-horizontal-line": "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-media-embed": "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-remove-format": "40.2.0", - "@ckeditor/ckeditor5-select-all": "40.2.0", - "@ckeditor/ckeditor5-special-characters": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-button-grouping/webpack.config.js b/user-interface-button-grouping/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/user-interface-button-grouping/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/user-interface-classic/README.md b/user-interface-classic/README.md index bc8583a..30112d1 100644 --- a/user-interface-classic/README.md +++ b/user-interface-classic/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-classic && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-classic/index.html b/user-interface-classic/index.html index edfd3c9..ff36edb 100644 --- a/user-interface-classic/index.html +++ b/user-interface-classic/index.html @@ -103,6 +103,6 @@

Confidence

- + diff --git a/user-interface-classic/index.js b/user-interface-classic/index.js deleted file mode 100644 index 26ebd05..0000000 --- a/user-interface-classic/index.js +++ /dev/null @@ -1,198 +0,0 @@ -/** - * @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 - */ - -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; - -/* 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 */ -const CKBOX_TOKEN_URL = ''; - -import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; - -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -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 ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; - -ClassicEditor.create( - document.querySelector('#cke5-user-interface-classic-demo'), - { - plugins: [ - Autoformat, - BlockQuote, - Bold, - CKFinder, - CloudServices, - /* 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, - Essentials, - Heading, - Image, - ImageCaption, - ImageResize, - ImageStyle, - ImageToolbar, - ImageUpload, - Base64UploadAdapter, - Indent, - IndentBlock, - Italic, - Link, - List, - MediaEmbed, - Mention, - Paragraph, - PasteFromOffice, - PictureEditing, - Table, - TableColumnResize, - TableToolbar, - TextTransformation, - Underline, - UploadAdapter, - // SlashCommand, - ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, - toolbar: [ - 'undo', - 'redo', - '|', - 'heading', - '|', - 'bold', - 'italic', - 'underline', - '|', - 'link', - 'uploadImage', - /* 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', - 'insertTable', - 'blockQuote', - 'mediaEmbed', - '|', - 'bulletedList', - 'numberedList', - '|', - 'outdent', - 'indent', - ], - heading: { - options: [ - { - model: 'paragraph', - title: 'Paragraph', - class: 'ck-heading_paragraph', - }, - { - model: 'heading1', - view: 'h1', - title: 'Heading 1', - class: 'ck-heading_heading1', - }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: 'ck-heading_heading2', - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: 'ck-heading_heading3', - }, - { - model: 'heading4', - view: 'h4', - title: 'Heading 4', - class: 'ck-heading_heading4', - }, - ], - }, - image: { - styles: ['alignCenter', 'alignLeft', 'alignRight'], - resizeOptions: [ - { - name: 'resizeImage:original', - label: 'Default image width', - value: null, - }, - { - name: 'resizeImage:50', - label: '50% page width', - value: '50', - }, - { - name: 'resizeImage:75', - label: '75% page width', - value: '75', - }, - ], - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:wrapText', - 'imageStyle:breakText', - 'imageStyle:side', - '|', - 'resizeImage', - ], - }, - link: { - addTargetToExternalLinks: true, - defaultProtocol: 'https://', - }, - table: { - contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], - }, - ckbox: { - tokenUrl: CKBOX_TOKEN_URL, - }, - } -) - .then((editor) => { - window.editor = editor; - }) - .catch((error) => { - console.error(error.stack); - }); diff --git a/user-interface-classic/index.ts b/user-interface-classic/index.ts new file mode 100644 index 0000000..f5b9ced --- /dev/null +++ b/user-interface-classic/index.ts @@ -0,0 +1,206 @@ +/** + * @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 + */ + +// 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 = ''; + +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\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 = ''; + +import { + ClassicEditor, + Autoformat, + Bold, + Italic, + Underline, + BlockQuote, + Base64UploadAdapter, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + CKBox, + Essentials, + Heading, + Image, + ImageCaption, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + PictureEditing, + Indent, + IndentBlock, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + Table, + TableColumnResize, + TableToolbar, + TextTransformation, +} from 'ckeditor5'; + +import { + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +ClassicEditor.create( + document.querySelector('#cke5-user-interface-classic-demo') as HTMLElement, + { + plugins: [ + Autoformat, + BlockQuote, + Bold, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + ...(CKBOX_TOKEN_URL ? [CKBox] : []), + Essentials, + Heading, + Image, + ImageCaption, + ImageResize, + ImageStyle, + ImageToolbar, + ImageUpload, + Base64UploadAdapter, + Indent, + IndentBlock, + Italic, + Link, + List, + MediaEmbed, + Mention, + Paragraph, + PasteFromOffice, + PictureEditing, + Table, + TableColumnResize, + TableToolbar, + TextTransformation, + Underline, + ...(LICENSE_KEY ? [SlashCommand] : []), + ], + licenseKey: LICENSE_KEY, + toolbar: [ + 'undo', + 'redo', + '|', + 'heading', + '|', + 'bold', + 'italic', + 'underline', + '|', + 'link', + 'uploadImage', + 'ckbox', + 'insertTable', + 'blockQuote', + 'mediaEmbed', + '|', + 'bulletedList', + 'numberedList', + '|', + 'outdent', + 'indent', + ], + heading: { + options: [ + { + model: 'paragraph', + title: 'Paragraph', + class: 'ck-heading_paragraph', + }, + { + model: 'heading1', + view: 'h1', + title: 'Heading 1', + class: 'ck-heading_heading1', + }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: 'ck-heading_heading2', + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: 'ck-heading_heading3', + }, + { + model: 'heading4', + view: 'h4', + title: 'Heading 4', + class: 'ck-heading_heading4', + }, + ], + }, + image: { + resizeOptions: [ + { + name: 'resizeImage:original', + label: 'Default image width', + value: null, + }, + { + name: 'resizeImage:50', + label: '50% page width', + value: '50', + }, + { + name: 'resizeImage:75', + label: '75% page width', + value: '75', + }, + ], + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:wrapText', + 'imageStyle:breakText', + 'imageStyle:side', + '|', + 'resizeImage', + ], + }, + link: { + addTargetToExternalLinks: true, + defaultProtocol: 'https://', + }, + table: { + contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], + }, + ckbox: { + tokenUrl: CKBOX_TOKEN_URL, + }, + } +) +.then((editor) => { + (window as any).editor = editor; +}) +.catch((error) => { + console.error(error.stack); +}); diff --git a/user-interface-classic/package.json b/user-interface-classic/package.json index d1496db..33b9ff8 100644 --- a/user-interface-classic/package.json +++ b/user-interface-classic/package.json @@ -1,59 +1,22 @@ { "name": "user-interface-classic", - "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-autoformat": "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-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "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-media-embed": "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-select-all": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-classic/webpack.config.js b/user-interface-classic/webpack.config.js deleted file mode 100644 index fc7bae6..0000000 --- a/user-interface-classic/webpack.config.js +++ /dev/null @@ -1,96 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/user-interface-document/package.json b/user-interface-document/package.json index 5874623..e0f052f 100644 --- a/user-interface-document/package.json +++ b/user-interface-document/package.json @@ -7,52 +7,52 @@ "license": "GPL-2.0-or-later", "private": true, "devDependencies": { - "@ckeditor/ckeditor5-adapter-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-alignment": "41.2.1", - "@ckeditor/ckeditor5-autoformat": "41.2.1", - "@ckeditor/ckeditor5-basic-styles": "41.2.1", - "@ckeditor/ckeditor5-block-quote": "41.2.1", - "@ckeditor/ckeditor5-ckbox": "41.2.1", - "@ckeditor/ckeditor5-ckfinder": "41.2.1", - "@ckeditor/ckeditor5-clipboard": "41.2.1", - "@ckeditor/ckeditor5-cloud-services": "41.2.1", - "@ckeditor/ckeditor5-core": "41.2.1", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-decoupled": "41.2.1", - "@ckeditor/ckeditor5-engine": "41.2.1", - "@ckeditor/ckeditor5-enter": "41.2.1", - "@ckeditor/ckeditor5-essentials": "41.2.1", - "@ckeditor/ckeditor5-export-pdf": "41.2.1", - "@ckeditor/ckeditor5-export-word": "41.2.1", - "@ckeditor/ckeditor5-find-and-replace": "41.2.1", - "@ckeditor/ckeditor5-font": "41.2.1", - "@ckeditor/ckeditor5-heading": "41.2.1", - "@ckeditor/ckeditor5-image": "41.2.1", - "@ckeditor/ckeditor5-import-word": "41.2.1", - "@ckeditor/ckeditor5-indent": "41.2.1", - "@ckeditor/ckeditor5-link": "41.2.1", - "@ckeditor/ckeditor5-list": "41.2.1", - "@ckeditor/ckeditor5-mention": "41.2.1", - "@ckeditor/ckeditor5-media-embed": "41.2.1", - "@ckeditor/ckeditor5-page-break": "41.2.1", - "@ckeditor/ckeditor5-paragraph": "41.2.1", - "@ckeditor/ckeditor5-paste-from-office": "41.2.1", - "@ckeditor/ckeditor5-remove-format": "41.2.1", - "@ckeditor/ckeditor5-select-all": "41.2.1", - "@ckeditor/ckeditor5-special-characters": "41.2.1", - "@ckeditor/ckeditor5-table": "41.2.1", - "@ckeditor/ckeditor5-theme-lark": "41.2.1", - "@ckeditor/ckeditor5-typing": "41.2.1", - "@ckeditor/ckeditor5-ui": "41.2.1", - "@ckeditor/ckeditor5-undo": "41.2.1", - "@ckeditor/ckeditor5-upload": "41.2.1", - "@ckeditor/ckeditor5-utils": "41.2.1", - "@ckeditor/ckeditor5-widget": "41.2.1", - "@ckeditor/ckeditor5-template": "41.2.1", - "@ckeditor/ckeditor5-document-outline": "41.2.1", - "@ckeditor/ckeditor5-format-painter": "41.2.1", - "@ckeditor/ckeditor5-slash-command": "41.2.1", + "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-alignment": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-block-quote": "41.4.2", + "@ckeditor/ckeditor5-ckbox": "41.4.2", + "@ckeditor/ckeditor5-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-clipboard": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-core": "41.4.2", + "@ckeditor/ckeditor5-dev-translations": "^40.2.0", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-editor-decoupled": "41.4.2", + "@ckeditor/ckeditor5-engine": "41.4.2", + "@ckeditor/ckeditor5-enter": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-export-pdf": "41.4.2", + "@ckeditor/ckeditor5-export-word": "41.4.2", + "@ckeditor/ckeditor5-find-and-replace": "41.4.2", + "@ckeditor/ckeditor5-font": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-import-word": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-mention": "41.4.2", + "@ckeditor/ckeditor5-media-embed": "41.4.2", + "@ckeditor/ckeditor5-page-break": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-remove-format": "41.4.2", + "@ckeditor/ckeditor5-select-all": "41.4.2", + "@ckeditor/ckeditor5-special-characters": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-theme-lark": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@ckeditor/ckeditor5-ui": "41.4.2", + "@ckeditor/ckeditor5-undo": "41.4.2", + "@ckeditor/ckeditor5-upload": "41.4.2", + "@ckeditor/ckeditor5-utils": "41.4.2", + "@ckeditor/ckeditor5-widget": "41.4.2", + "@ckeditor/ckeditor5-template": "41.4.2", + "@ckeditor/ckeditor5-document-outline": "41.4.2", + "@ckeditor/ckeditor5-format-painter": "41.4.2", + "@ckeditor/ckeditor5-slash-command": "41.4.2", "@webspellchecker/wproofreader-ckeditor5": "2.3.1", "css-loader": "^5.2.7", "postcss": "^8.4.19", diff --git a/user-interface-inline/README.md b/user-interface-inline/README.md index c57a3b7..364da82 100644 --- a/user-interface-inline/README.md +++ b/user-interface-inline/README.md @@ -23,5 +23,5 @@ cd ckeditor5-demos/user-interface-inline && yarn 3. Start the demo: ```shell -yarn start +yarn dev ``` diff --git a/user-interface-inline/index.html b/user-interface-inline/index.html index c2a6929..c716ac2 100644 --- a/user-interface-inline/index.html +++ b/user-interface-inline/index.html @@ -74,6 +74,6 @@

Walking the capitals of Europe: Warsaw

- + diff --git a/user-interface-inline/index.js b/user-interface-inline/index.ts similarity index 54% rename from user-interface-inline/index.js rename to user-interface-inline/index.ts index 642df18..d2cac94 100644 --- a/user-interface-inline/index.js +++ b/user-interface-inline/index.ts @@ -3,48 +3,64 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -// Productivity features require license key to work properly, you can get a trial license key: https://orders.ckeditor.com/trial/premium-features?feature=pagination -const PRODUCTIVITY_PACK_LICENSE_KEY = ''; +// 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 = ''; -import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor'; +if (!LICENSE_KEY) { + alert( + 'CKEditor Commercial Features included in this demo require a license key.\n' + + 'Check the index.ts file for more information.' + ); +} -import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; -import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; -import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; -import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; -import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; -import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; -import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'; -import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; -import Heading from '@ckeditor/ckeditor5-heading/src/heading'; -import Image from '@ckeditor/ckeditor5-image/src/image'; -import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; -import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; -import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; -import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; -import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting'; -import Indent from '@ckeditor/ckeditor5-indent/src/indent'; -import Link from '@ckeditor/ckeditor5-link/src/link'; -import List from '@ckeditor/ckeditor5-list/src/list'; -import Mention from '@ckeditor/ckeditor5-mention/src/mention'; -import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; -import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; -import Table from '@ckeditor/ckeditor5-table/src/table'; -import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; -import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; -// Productivity Pack features -import SlashCommand from '@ckeditor/ckeditor5-slash-command/src/slashcommand'; +import { + InlineEditor, + Autoformat, + Bold, + Italic, + BlockQuote, + Base64UploadAdapter, + CKFinder, + CKFinderUploadAdapter, + CloudServices, + EditorConfig, + Essentials, + Heading, + Image, + ImageCaption, + ImageStyle, + ImageToolbar, + ImageUpload, + PictureEditing, + Indent, + Link, + List, + Mention, + Paragraph, + PasteFromOffice, + Table, + TableToolbar, + TextTransformation, +} from 'ckeditor5'; -const defaultConfig = { +import { + SlashCommand +} from 'ckeditor5-premium-features'; + +import 'ckeditor5/index.css'; +import 'ckeditor5-premium-features/index.css'; + +const defaultConfig: EditorConfig = { plugins: [ Essentials, - UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKFinder, + CKFinderUploadAdapter, CloudServices, Heading, Image, @@ -63,9 +79,9 @@ const defaultConfig = { Table, TableToolbar, TextTransformation, - // SlashCommand, + ...(LICENSE_KEY ? [SlashCommand] : []), ], - licenseKey: PRODUCTIVITY_PACK_LICENSE_KEY, + licenseKey: LICENSE_KEY, toolbar: [ 'undo', 'redo', @@ -134,7 +150,7 @@ const defaultConfig = { }, }; -const headerConfig = { +const headerConfig: EditorConfig = { plugins: [Essentials, Autoformat, Bold, Italic, Heading, Link, Paragraph], toolbar: ['heading', '|', 'bold', 'italic', 'link'], heading: { @@ -191,7 +207,7 @@ inlineElementsIds.forEach((id) => { id === 'inline-header' ? headerConfig : defaultConfig ) .then((editor) => { - window.editor = editor; + (window as any).editor = editor; }) .catch((error) => { console.error(error.stack); diff --git a/user-interface-inline/package.json b/user-interface-inline/package.json index 36c38a6..6cb1882 100644 --- a/user-interface-inline/package.json +++ b/user-interface-inline/package.json @@ -1,57 +1,22 @@ { "name": "user-interface-inline", - "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-autoformat": "40.2.0", - "@ckeditor/ckeditor5-basic-styles": "40.2.0", - "@ckeditor/ckeditor5-block-quote": "40.2.0", - "@ckeditor/ckeditor5-ckfinder": "40.2.0", - "@ckeditor/ckeditor5-clipboard": "40.2.0", - "@ckeditor/ckeditor5-cloud-services": "40.2.0", - "@ckeditor/ckeditor5-core": "40.2.0", - "@ckeditor/ckeditor5-dev-translations": "^39.5.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-inline": "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-mention": "40.2.0", - "@ckeditor/ckeditor5-paragraph": "40.2.0", - "@ckeditor/ckeditor5-paste-from-office": "40.2.0", - "@ckeditor/ckeditor5-select-all": "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-upload": "40.2.0", - "@ckeditor/ckeditor5-utils": "40.2.0", - "@ckeditor/ckeditor5-widget": "40.2.0", - "@ckeditor/ckeditor5-slash-command": "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": "nightly", + "ckeditor5-premium-features": "nightly", + "vite": "^5.0.0" } } diff --git a/user-interface-inline/webpack.config.js b/user-interface-inline/webpack.config.js deleted file mode 100644 index 9263aea..0000000 --- a/user-interface-inline/webpack.config.js +++ /dev/null @@ -1,99 +0,0 @@ -/** - * @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 - */ - -'use strict'; - -/* eslint-env node */ - -const path = require('path'); -const webpack = require('webpack'); -const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); - -module.exports = { - devtool: 'source-map', - performance: { hints: false }, - - entry: './index.js', - - optimization: { - minimizer: [ - new TerserWebpackPlugin({ - sourceMap: true, - terserOptions: { - output: { - // Preserve CKEditor 5 license comments. - comments: /^!/, - }, - }, - extractComments: false, - }), - ], - }, - - plugins: [ - new webpack.BannerPlugin({ - banner: bundler.getLicenseBanner(), - raw: true, - }), - ], - - module: { - rules: [ - { - test: /\.svg$/, - use: ['raw-loader'], - }, - { - test: /\.css$/, - use: [ - { - loader: 'style-loader', - options: { - injectType: 'singletonStyleTag', - attributes: { - 'data-cke': true, - }, - }, - }, - { - loader: 'css-loader', - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: styles.getPostCssConfig({ - themeImporter: { - themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), - }, - minify: true, - }), - }, - }, - ], - }, - ], - }, - devServer: { - client: { - overlay: false, - }, - static: { - directory: path.join(__dirname, '/'), - watch: true, - }, - watchFiles: ['./index.js', './index.html'], - compress: true, - hot: false, - port: 9090, - devMiddleware: { - index: true, - mimeTypes: { phtml: 'text/html' }, - publicPath: '/', - serverSideRender: true, - writeToDisk: true, - }, - }, -}; diff --git a/wproofreader/README.md b/wproofreader/README.md index 96fbc26..04e8194 100644 --- a/wproofreader/README.md +++ b/wproofreader/README.md @@ -2,7 +2,7 @@ Use a multilingual spell and grammar checker to eliminate unnecessary typos and mistakes. Customize this tool to respect any relevant proper names. -See this demo live at [ckeditor.com](https://ckeditor.com/spellchecker/#demo-proofreader/) or read more about it in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/40.2.0/features/spelling-and-grammar-checking.html). +See this demo live at [ckeditor.com](https://ckeditor.com/spellchecker/#demo-proofreader/) or read more about it in the [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/features/spelling-and-grammar-checking.html). ## Installation steps diff --git a/wproofreader/index.js b/wproofreader/index.js index 1b82ffa..1d172ad 100644 --- a/wproofreader/index.js +++ b/wproofreader/index.js @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -// Put your Web Spell Checker license key here, for more info how to get the key see https://ckeditor.com/docs/ckeditor5/40.2.0/features/spelling-and-grammar-checking.html. +// Put your Web Spell Checker license key here, for more info how to get the key see https://ckeditor.com/docs/ckeditor5/latest/features/spelling-and-grammar-checking.html. const WEB_SPELL_CHECKER_LICENSE_KEY = ''; import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; diff --git a/wproofreader/package.json b/wproofreader/package.json index 3a13199..24c7e4a 100644 --- a/wproofreader/package.json +++ b/wproofreader/package.json @@ -7,26 +7,26 @@ "license": "GPL-2.0-or-later", "private": true, "devDependencies": { - "@ckeditor/ckeditor5-adapter-ckfinder": "^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-cloud-services": "^40.2.0", - "@ckeditor/ckeditor5-dev-utils": "^39.5.0", - "@ckeditor/ckeditor5-editor-classic": "^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-media-embed": "^40.2.0", - "@ckeditor/ckeditor5-paragraph": "^40.2.0", - "@ckeditor/ckeditor5-paste-from-office": "^40.2.0", - "@ckeditor/ckeditor5-table": "^40.2.0", - "@ckeditor/ckeditor5-theme-lark": "^40.2.0", - "@ckeditor/ckeditor5-typing": "^40.2.0", - "@webspellchecker/wproofreader-ckeditor5": "^2.3.1", + "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", + "@ckeditor/ckeditor5-autoformat": "41.4.2", + "@ckeditor/ckeditor5-basic-styles": "41.4.2", + "@ckeditor/ckeditor5-block-quote": "41.4.2", + "@ckeditor/ckeditor5-cloud-services": "41.4.2", + "@ckeditor/ckeditor5-dev-utils": "^40.2.0", + "@ckeditor/ckeditor5-editor-classic": "41.4.2", + "@ckeditor/ckeditor5-essentials": "41.4.2", + "@ckeditor/ckeditor5-heading": "41.4.2", + "@ckeditor/ckeditor5-image": "41.4.2", + "@ckeditor/ckeditor5-indent": "41.4.2", + "@ckeditor/ckeditor5-link": "41.4.2", + "@ckeditor/ckeditor5-list": "41.4.2", + "@ckeditor/ckeditor5-media-embed": "41.4.2", + "@ckeditor/ckeditor5-paragraph": "41.4.2", + "@ckeditor/ckeditor5-paste-from-office": "41.4.2", + "@ckeditor/ckeditor5-table": "41.4.2", + "@ckeditor/ckeditor5-theme-lark": "41.4.2", + "@ckeditor/ckeditor5-typing": "41.4.2", + "@webspellchecker/wproofreader-ckeditor5": "2.3.1", "css-loader": "^5.2.7", "postcss": "^8.4.19", "postcss-loader": "^4.3.0",