chore(nx/ckeditor): initialize emptyproject for keyboard-marker

packages/ckeditor5-keyboard-marker/.editorconfig

@@ -0,0 +1,19 @@
+# Configurations to normalize the IDE behavior.
+# http://editorconfig.org/
+
+root = true
+
+[*]
+indent_style = tab
+tab_width = 4
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,jsx,ts}]
+quote_type = single
+
+[package.json]
+indent_style = space
+tab_width = 2

packages/ckeditor5-keyboard-marker/.eslintrc.cjs

@@ -0,0 +1,46 @@
+/* eslint-env node */
+
+'use strict';
+
+module.exports = {
+	extends: 'ckeditor5',
+	parser: '@typescript-eslint/parser',
+	plugins: [
+		'@typescript-eslint'
+	],
+	root: true,
+	ignorePatterns: [
+		// Ignore the entire `dist/` (the NIM build).
+		'dist/**',
+		// Ignore compiled JavaScript files, as they are generated automatically.
+		'src/**/*.js',
+		// Also, do not check typing declarations, too.
+		'src/**/*.d.ts'
+	],
+	rules: {
+		//  This rule disallows importing from any path other than the package main entrypoint.
+		'ckeditor5-rules/allow-imports-only-from-main-package-entry-point': 'error',
+		// This rule ensures that all imports from `@ckeditor/*` packages are done through the main package entry points.
+		// This is required for the editor types to work properly and to ease migration to the installation methods
+		// introduced in CKEditor 5 version 42.0.0.
+		'ckeditor5-rules/no-legacy-imports': 'error',
+		// As required by the ECMAScript (ESM) standard, all imports must include a file extension.
+		// If the import does not include it, this rule will try to automatically detect the correct file extension.
+		'ckeditor5-rules/require-file-extensions-in-imports': [
+			'error',
+			{
+				extensions: [ '.ts', '.js', '.json' ]
+			}
+		]
+	},
+	overrides: [
+		{
+			files: [ 'tests/**/*.[jt]s', 'sample/**/*.[jt]s' ],
+			rules: {
+				// To write complex tests, you may need to import files that are not exported in DLL files by default.
+				// Hence, imports CKEditor 5 packages in test files are not checked.
+				'ckeditor5-rules/ckeditor-imports': 'off'
+			}
+		}
+	]
+};

packages/ckeditor5-keyboard-marker/.gitattributes

@@ -0,0 +1,19 @@
+*			text=auto
+
+*.htaccess	eol=lf
+*.cgi		eol=lf
+*.sh		eol=lf
+
+*.css		text
+*.htm		text
+*.html		text
+*.js		text
+*.ts		text
+*.json		text
+*.php		text
+*.txt		text
+*.md		text
+
+*.png		-text
+*.gif		-text
+*.jpg		-text

packages/ckeditor5-keyboard-marker/.gitignore

@@ -0,0 +1,10 @@
+build/
+coverage/
+dist/
+node_modules/
+tmp/
+sample/ckeditor.dist.js
+
+# Ignore compiled TypeScript files.
+src/**/*.js
+src/**/*.d.ts

packages/ckeditor5-keyboard-marker/.stylelintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "stylelint-config-ckeditor5"
+}

packages/ckeditor5-keyboard-marker/LICENSE.md

@@ -0,0 +1,6 @@
+Software License Agreement
+==========================
+
+Copyright (c) 2025. All rights reserved.
+
+Licensed under the terms of [MIT license](https://opensource.org/licenses/MIT).

packages/ckeditor5-keyboard-marker/README.md

@@ -0,0 +1,141 @@
+@triliumnext/ckeditor5-keyboard-marker
+======================================
+
+This package was created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package.
+
+## Table of contents
+
+* [Developing the package](#developing-the-package)
+* [Available scripts](#available-scripts)
+  * [`start`](#start)
+  * [`test`](#test)
+  * [`lint`](#lint)
+  * [`stylelint`](#stylelint)
+  * [`build:dist`](#builddist)
+  * [`translations:synchronize`](#translationssynchronize)
+  * [`translations:validate`](#translationsvalidate)
+  * [`ts:build` and `ts:clear`](#tsbuild-and-tsclear)
+* [License](#license)
+
+## Developing the package
+
+To read about the CKEditor 5 Framework, visit the [CKEditor 5 Framework documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html).
+
+## Available scripts
+
+NPM scripts are a convenient way to provide commands in a project. They are defined in the `package.json` file and shared with people contributing to the project. It ensures developers use the same command with the same options (flags).
+
+All the scripts can be executed by running `npm run <script>`. Pre and post commands with matching names will be run for those as well.
+
+The following scripts are available in the package.
+
+### `start`
+
+Starts an HTTP server with the live-reload mechanism that allows previewing and testing of plugins available in the package.
+
+When the server starts, the default browser will open the developer sample. This can be disabled by passing the `--no-open` option to that command.
+
+You can also define the language that will translate the created editor by specifying the `--language [LANG]` option. It defaults to `'en'`.
+
+Examples:
+
+```bash
+# Starts the server and open the browser.
+npm run start
+
+# Disable auto-opening the browser.
+npm run start -- --no-open
+
+# Create the editor with the interface in German.
+npm run start -- --language=de
+```
+
+### `test`
+
+Allows executing unit tests for the package specified in the `tests/` directory. To check the code coverage, add the `--coverage` modifier. See other [CLI flags](https://vitest.dev/guide/cli.html) in Vitest.
+
+Examples:
+
+```bash
+# Execute tests.
+npm run test
+
+# Generate code coverage report after each change in the sources.
+npm run test -- --coverage
+```
+
+### `lint`
+
+Runs ESLint, which analyzes the code (all `*.ts` files) to quickly find problems.
+
+Examples:
+
+```bash
+# Execute eslint.
+npm run lint
+```
+
+### `stylelint`
+
+Similar to the `lint` task, stylelint analyzes the CSS code (`*.css` files in the `theme/` directory) in the package.
+
+Examples:
+
+```bash
+# Execute stylelint.
+npm run stylelint
+```
+
+### `build:dist`
+
+Creates npm and browser builds of your plugin. These builds can be added to the editor by following the [Configuring CKEditor 5 features](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html) guide.
+
+Examples:
+
+```bash
+# Builds the `npm` and browser files thats are ready to publish.
+npm run build:dist
+```
+
+### `translations:synchronize`
+
+Synchronizes translation messages (arguments of the `t()` function) by performing the following steps:
+
+ * Collect all translation messages from the package by finding `t()` calls in source files.
+ * Detect if translation context is valid, i.e. whether the provided values do not interfere with the values specified in the `@ckeditor/ckeditor5-core` package.
+ * If there are no validation errors, update all translation files (`*.po` files) to be in sync with the context file:
+   * unused translation entries are removed,
+   * missing translation entries are added with empty string as the message translation,
+   * missing translation files are created for languages that do not have own `*.po` file yet.
+
+The task may end with an error if one of the following conditions is met:
+
+* Found the `Unused context` error &ndash; entries specified in the `lang/contexts.json` file are not used in source files. They should be removed.
+* Found the `Duplicated contex` error &ndash; some of the entries are duplicated. Consider removing them from the `lang/contexts.json` file, or rewriting them.
+* Found the `Missing context` error &ndash; entries specified in source files are not described in the `lang/contexts.json` file. They should be added.
+
+Examples:
+
+```bash
+npm run translations:synchronize
+```
+
+### `translations:validate`
+
+Peforms only validation steps as described in [`translations:synchronize`](#translationssynchronize) script, but without modifying any files. It only checks the correctness of the context file against the `t()` function calls.
+
+Examples:
+
+```bash
+npm run translations:validate
+```
+
+### `ts:build` and `ts:clear`
+
+These scripts compile TypeScript and remove the compiled files. They are used in the aforementioned life cycle scripts, and there is no need to call them manually.
+
+## License
+
+The `@triliumnext/ckeditor5-keyboard-marker` package is available under [MIT license](https://opensource.org/licenses/MIT).
+
+However, it is the default license of packages created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package and can be changed.

packages/ckeditor5-keyboard-marker/ckeditor5-metadata.json

@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    {
+      "name": "Keyboard marker",
+      "className": "KeyboardMarker",
+      "description": "Adds text to the editor.",
+      "path": "src/keyboardmarker.ts",
+      "uiComponents": [
+        {
+          "name": "keyboardMarker",
+          "type": "Button",
+          "iconPath": "theme/icons/ckeditor.svg"
+        }
+      ]
+    }
+  ]
+}

packages/ckeditor5-keyboard-marker/lang/contexts.json

@@ -0,0 +1,3 @@
+{
+  "Keyboard marker": "Content for a tooltip is displayed when a user hovers the CKEditor 5 icon."
+}

packages/ckeditor5-keyboard-marker/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@triliumnext/ckeditor5-keyboard-marker",
+  "version": "0.0.1",
+  "description": "A plugin for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-package-generator"
+  ],
+  "type": "module",
+  "main": "dist/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": "./dist/*",
+    "./browser/*": null,
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=5.7.1"
+  },
+  "files": [
+    "dist",
+    "ckeditor5-metadata.json"
+  ],
+  "devDependencies": {
+    "@ckeditor/ckeditor5-dev-build-tools": "43.0.1",
+    "@ckeditor/ckeditor5-inspector": ">=4.1.0",
+    "@ckeditor/ckeditor5-package-tools": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "~5.43.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@vitest/browser": "^2.0.5",
+    "@vitest/coverage-istanbul": "^2.0.5",
+    "chalk": "5.4.1",
+    "ckeditor5": "latest",
+    "eslint": "^7.32.0",
+    "eslint-config-ckeditor5": ">=9.1.0",
+    "http-server": "^14.1.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "stylelint": "^13.13.1",
+    "stylelint-config-ckeditor5": ">=9.1.0",
+    "ts-node": "^10.9.1",
+    "typescript": "5.0.4",
+    "upath": "2.0.1",
+    "vite-plugin-svgo": "~1.4.0",
+    "vitest": "^2.0.5",
+    "webdriverio": "^9.0.7"
+  },
+  "peerDependencies": {
+    "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
+  },
+  "scripts": {
+    "build:dist": "node ./scripts/build-dist.mjs",
+    "ts:build": "tsc -p ./tsconfig.release.json",
+    "ts:clear": "npx rimraf --glob \"src/**/*.@(js|d.ts)\"",
+    "lint": "eslint \"**/*.{js,ts}\" --quiet",
+    "start": "ckeditor5-package-tools start",
+    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
+    "test": "vitest",
+    "test:debug": "vitest --inspect-brk --no-file-parallelism --browser.headless=false",
+    "prepublishOnly": "npm run ts:build && ckeditor5-package-tools export-package-as-javascript",
+    "postpublish": "npm run ts:clear && ckeditor5-package-tools export-package-as-typescript",
+    "translations:synchronize": "ckeditor5-package-tools translations:synchronize",
+    "translations:validate": "ckeditor5-package-tools translations:synchronize --validate-only"
+  },
+  "lint-staged": {
+    "**/*.{js,ts}": [
+      "eslint --quiet"
+    ],
+    "**/*.css": [
+      "stylelint --quiet --allow-empty-input"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

packages/ckeditor5-keyboard-marker/sample/ckeditor.ts

@@ -0,0 +1,113 @@
+declare global {
+	interface Window {
+		editor: ClassicEditor;
+	}
+}
+
+import {
+	ClassicEditor,
+	Autoformat,
+	Base64UploadAdapter,
+	BlockQuote,
+	Bold,
+	Code,
+	CodeBlock,
+	Essentials,
+	Heading,
+	Image,
+	ImageCaption,
+	ImageStyle,
+	ImageToolbar,
+	ImageUpload,
+	Indent,
+	Italic,
+	Link,
+	List,
+	MediaEmbed,
+	Paragraph,
+	Table,
+	TableToolbar
+} from 'ckeditor5';
+
+import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
+
+import KeyboardMarker from '../src/keyboardmarker.js';
+
+import 'ckeditor5/ckeditor5.css';
+
+ClassicEditor
+	.create( document.getElementById( 'editor' )!, {
+		licenseKey: 'GPL',
+		plugins: [
+			KeyboardMarker,
+			Essentials,
+			Autoformat,
+			BlockQuote,
+			Bold,
+			Heading,
+			Image,
+			ImageCaption,
+			ImageStyle,
+			ImageToolbar,
+			ImageUpload,
+			Indent,
+			Italic,
+			Link,
+			List,
+			MediaEmbed,
+			Paragraph,
+			Table,
+			TableToolbar,
+			CodeBlock,
+			Code,
+			Base64UploadAdapter
+		],
+		toolbar: [
+			'undo',
+			'redo',
+			'|',
+			'keyboardMarker',
+			'|',
+			'heading',
+			'|',
+			'bold',
+			'italic',
+			'link',
+			'code',
+			'bulletedList',
+			'numberedList',
+			'|',
+			'outdent',
+			'indent',
+			'|',
+			'uploadImage',
+			'blockQuote',
+			'insertTable',
+			'mediaEmbed',
+			'codeBlock'
+		],
+		image: {
+			toolbar: [
+				'imageStyle:inline',
+				'imageStyle:block',
+				'imageStyle:side',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+		CKEditorInspector.attach( editor );
+		window.console.log( 'CKEditor 5 is ready.', editor );
+	} )
+	.catch( err => {
+		window.console.error( err.stack );
+	} );

packages/ckeditor5-keyboard-marker/sample/dll.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes="32x32">
+    <meta charset="utf-8">
+    <title>CKEditor 5 – DLL Sample</title>
+    <style>
+        body {
+            max-width: 800px;
+            margin: 20px auto;
+        }
+    </style>
+</head>
+<body>
+
+<h1>CKEditor 5 – DLL Sample</h1>
+
+<div id="editor">
+    <h2>Production sample</h2>
+    <p>
+        This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
+        build</a>, initialized using the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">DLL builds</a>.
+    </p>
+    <p>
+        Your plugin (KeyboardMarker) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
+    </p>
+
+    <h3>Uncaught TypeError</h3>
+    <p>If the editor is not initialized correctly and the browser console displays an error such as the following:</p>
+    <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'KeyboardMarker') at dll.html:85</code></pre>
+    <p>it means that the DLL build of the <code>@triliumnext/ckeditor5-keyboard-marker</code> package has not been created.</p>
+    <p>Please call the <code>npm run dll:build</code> command in the CLI, and after it finishes, refresh the page.</p>
+
+    <h3>Anatomy of the DLL build</h3>
+    <p>The source of the DLL build is located in the <code>src/index.ts</code> file. It may export as many things as the package offers.</p>
+
+    <h4>Maintaining the sample</h4>
+    <p>Whenever you change objects exported by the DLL build, please review the content of the sample. Things to keep in mind:</p>
+    <ul>
+        <li>Review the list of loaded plugins in the configuration.</li>
+        <li>Review names of items registered in toolbars.</li>
+    </ul>
+
+    <h3>The goal</h3>
+    <p>The primary purpose of the sample is to verify whether the plugins in the package will work together with CKEditor 5 created with the DLL approach.</p>
+
+    <h3>Publishing the package</h3>
+	<p>
+		While releasing TypeScript package on npm, few things have to be taken care of:
+	</p>
+    <ul>
+        <li>Building DLL</li>
+        <li>Building TypeScript</li>
+		<li>Changing the <code>main</code> filed in <code>package.json</code> to <code>.js</code> extension</li>
+    </ul>
+	<p>
+		Likewise, after the release, there are few steps:
+	</p>
+	<ul>
+        <li>Deleting compiled TypeScript files (they are generated in the <code>src</code> directory, and create needless clutter)</li>
+		<li>Changing the <code>main</code> filed in <code>package.json</code> back to <code>.ts</code> extension</li>
+    </ul>
+    <p>
+        When calling <code>npm publish</code>, those steps are handled automatically by predefined <code>prepublishOnly</code> and <code>postpublish</code> scripts. To learn more, see <a href="https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts">NPM docs</a>.
+    </p>
+
+    <h3>Reporting issues</h3>
+    <p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
+    <ul>
+        <li><a href="https://github.com/ckeditor/ckeditor5/issues/new/choose">CKEditor 5</a></li>
+        <li><a href="https://github.com/ckeditor/create-ckeditor5-plugin/issues/new">The package generator</a></li>
+    </ul>
+</div>
+
+<!-- DLL builds are served from the `node_modules/` directory -->
+<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-code-block/build/code-block.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
+
+<!-- The "@triliumnext/ckeditor5-keyboard-marker" package DLL build is served from the `build/` directory -->
+<script src="../build/keyboard-marker.js"></script>
+
+<script>
+	console.log( 'Objects exported by the DLL build:', CKEditor5[ 'keyboardMarker' ] );
+
+	CKEditor5.editorClassic.ClassicEditor
+		.create( document.querySelector( '#editor' ), {
+			plugins: [
+				CKEditor5[ 'keyboardMarker' ].KeyboardMarker,
+				CKEditor5.essentials.Essentials,
+				CKEditor5.autoformat.Autoformat,
+				CKEditor5.blockQuote.BlockQuote,
+				CKEditor5.basicStyles.Bold,
+				CKEditor5.heading.Heading,
+				CKEditor5.image.Image,
+				CKEditor5.image.ImageCaption,
+				CKEditor5.image.ImageStyle,
+				CKEditor5.image.ImageToolbar,
+				CKEditor5.image.ImageUpload,
+				CKEditor5.indent.Indent,
+				CKEditor5.basicStyles.Italic,
+				CKEditor5.link.Link,
+				CKEditor5.list.List,
+				CKEditor5.mediaEmbed.MediaEmbed,
+				CKEditor5.paragraph.Paragraph,
+				CKEditor5.table.Table,
+				CKEditor5.table.TableToolbar,
+				CKEditor5.codeBlock.CodeBlock,
+				CKEditor5.basicStyles.Code,
+				CKEditor5.upload.Base64UploadAdapter
+			],
+			toolbar: [
+				'keyboardMarker',
+				'|',
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'link',
+				'code',
+				'bulletedList',
+				'numberedList',
+				'|',
+				'outdent',
+				'indent',
+				'|',
+				'uploadImage',
+				'blockQuote',
+				'insertTable',
+				'mediaEmbed',
+				'codeBlock',
+				'|',
+				'undo',
+				'redo'
+			],
+			image: {
+				toolbar: [
+					'imageStyle:inline',
+					'imageStyle:block',
+					'imageStyle:side',
+					'|',
+					'imageTextAlternative'
+				]
+			},
+			table: {
+				contentToolbar: [
+					'tableColumn',
+					'tableRow',
+					'mergeTableCells'
+				]
+			}
+		} )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( error => {
+			console.error( 'There was a problem initializing the editor.', error );
+		} );
+</script>
+</body>
+</html>

packages/ckeditor5-keyboard-marker/sample/index.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png"
+		sizes="32x32">
+	<meta charset="utf-8">
+	<title>CKEditor 5 – Development Sample</title>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+	</style>
+</head>
+
+<body>
+
+	<h1>CKEditor 5 – Development Sample</h1>
+
+	<div id="editor">
+		<h2>Development environment</h2>
+		<p>
+			This is a demo of the <a
+				href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic
+				editor
+				build</a> that loads your plugin (<code>KeyboardMarker</code>) generated by the
+			tool. You can modify this
+			sample and use it to validate whether a plugin or a set of plugins work fine.
+		</p>
+		<p>
+			<code>KeyboardMarker</code> inserts text into the editor. You can click the
+			CKEditor 5 icon in the toolbar and see the results.
+		</p>
+
+		<h3>Helpful resources</h3>
+		<ul>
+			<li>Architecture
+				<ul>
+					<li>
+						<a
+							href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/core-editor-architecture.html">Core
+							editor architecture</a>
+					</li>
+				</ul>
+				<ul>
+					<li>
+						<a
+							href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html">The
+							editing engine</a>
+					</li>
+				</ul>
+				<ul>
+					<li>
+						<a
+							href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/ui-library.html">The
+							UI library</a>
+					</li>
+				</ul>
+			</li>
+
+			<li>
+				<a
+					href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/browser-compatibility.html">Browser
+					compatibility</a>
+			</li>
+
+			<li>
+				<a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html">The error
+					codes</a>
+			</li>
+
+			<li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">The DLL
+					builds</a></li>
+		</ul>
+
+		<h3>The directory structure</h3>
+
+		<p>
+			The code snippet below presents the directory structure.
+		</p>
+
+		<pre><code class="language-plaintext">.
+├─ lang
+│  └─ contexts.json    # Entries used for creating translations.
+├─ sample
+│  ├─ dll.html         # The editor initialized using the DLL builds. Check README for details.
+│  ├─ index.html       # The currently displayed file.
+│  └─ ckeditor.ts      # The editor initialization script.
+├─ src
+│  ├─ keyboardmarker.ts
+│  ├─ augmentation.ts  # Type augmentations for the `@ckeditor/ckeditor5-core` module. Read more in <a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_core_plugincollection-PluginsMap.html">PluginsMap</a> and <a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_core_commandcollection-CommandsMap.html">CommandsMap</a>.
+│  ├─ index.ts         # The modules exported by the package when using the DLL builds.
+│  └─ **/*.ts          # All TypeScript source files should be saved here.
+├─ tests
+│  ├─ keyboardmarker.ts
+│  ├─ index.ts         # Tests for the plugin.
+│  └─ **/*.ts          # All tests should be saved here.
+├─ theme
+│  ├─ icons
+│  │  ├─ ckeditor.svg  # The CKEditor 5 icon displayed in the toolbar.
+│  │  └─ **/*.svg      # All icon files should be saved here.
+│  └─ **/*.css         # All CSS files should be saved here.
+├─ typings
+│  └─ **/*.d.ts        # Files containing type definitions.
+├─ .editorconfig
+├─ ...
+├─ README.md
+└─ tsconfig.json       # TypeScript configuration file.</code></pre>
+
+		<h3>Reporting issues</h3>
+		<p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
+		<ul>
+			<li><a href="https://github.com/ckeditor/ckeditor5/issues/new/choose">CKEditor 5</a></li>
+			<li><a href="https://github.com/ckeditor/ckeditor5-package-generator/issues/new">The package generator</a>
+			</li>
+		</ul>
+	</div>
+
+	<script src="./ckeditor.dist.js"></script>
+</body>
+
+</html>

packages/ckeditor5-keyboard-marker/scripts/build-dist.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+/**
+ * @license Copyright (c) 2020-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* eslint-env node */
+
+import { createRequire } from 'module';
+import upath from 'upath';
+import chalk from 'chalk';
+import { build } from '@ckeditor/ckeditor5-dev-build-tools';
+
+function dist( path ) {
+	return upath.join( 'dist', path );
+}
+
+( async () => {
+	const tsconfig = 'tsconfig.dist.ckeditor5.json';
+
+	/**
+	 * Step 1
+	 */
+	console.log( chalk.cyan( '1/2: Generating NPM build...' ) );
+
+	const require = createRequire( import.meta.url );
+	const pkg = require( upath.resolve( process.cwd(), './package.json' ) );
+
+	await build( {
+		input: 'src/index.ts',
+		output: dist( './index.js' ),
+		tsconfig: 'tsconfig.dist.json',
+		external: [
+			'ckeditor5',
+			'ckeditor5-premium-features',
+			...Object.keys( {
+				...pkg.dependencies,
+				...pkg.peerDependencies
+			} )
+		],
+		clean: true,
+		sourceMap: true,
+		declarations: true,
+		translations: '**/*.po'
+	} );
+
+	/**
+	 * Step 2
+	 */
+	console.log( chalk.cyan( '2/2: Generating browser build...' ) );
+
+	await build( {
+		output: dist( 'browser/index.js' ),
+		tsconfig,
+		sourceMap: true,
+		minify: true,
+		browser: true,
+		name: 'CKKeyboardMarker',
+		external: [
+			'ckeditor5',
+			'ckeditor5-premium-features'
+		]
+	} );
+} )();

packages/ckeditor5-keyboard-marker/src/augmentation.ts

@@ -0,0 +1,7 @@
+import type { KeyboardMarker } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ KeyboardMarker.pluginName ]: KeyboardMarker;
+	}
+}

packages/ckeditor5-keyboard-marker/src/index.ts

@@ -0,0 +1,8 @@
+import ckeditor from './../theme/icons/ckeditor.svg';
+import './augmentation.js';
+
+export { default as KeyboardMarker } from './keyboardmarker.js';
+
+export const icons = {
+	ckeditor
+};

packages/ckeditor5-keyboard-marker/src/keyboardmarker.ts

@@ -0,0 +1,39 @@
+import { Plugin, ButtonView } from 'ckeditor5';
+
+import ckeditor5Icon from '../theme/icons/ckeditor.svg';
+
+export default class KeyboardMarker extends Plugin {
+	public static get pluginName() {
+		return 'KeyboardMarker' as const;
+	}
+
+	public init(): void {
+		const editor = this.editor;
+		const t = editor.t;
+		const model = editor.model;
+
+		// Register the "keyboardMarker" button, so it can be displayed in the toolbar.
+		editor.ui.componentFactory.add( 'keyboardMarker', locale => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Keyboard marker' ),
+				icon: ckeditor5Icon,
+				tooltip: true
+			} );
+
+			// Insert a text into the editor after clicking the button.
+			this.listenTo( view, 'execute', () => {
+				model.change( writer => {
+					const textNode = writer.createText( 'Hello CKEditor 5!' );
+
+					model.insertContent( textNode );
+				} );
+
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

packages/ckeditor5-keyboard-marker/tests/index.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { KeyboardMarker as KeyboardMarkerDll, icons } from '../src/index.js';
+import KeyboardMarker from '../src/keyboardmarker.js';
+
+import ckeditor from './../theme/icons/ckeditor.svg';
+
+describe( 'CKEditor5 KeyboardMarker DLL', () => {
+	it( 'exports KeyboardMarker', () => {
+		expect( KeyboardMarkerDll ).to.equal( KeyboardMarker );
+	} );
+
+	describe( 'icons', () => {
+		it( 'exports the "ckeditor" icon', () => {
+			expect( icons.ckeditor ).to.equal( ckeditor );
+		} );
+	} );
+} );

packages/ckeditor5-keyboard-marker/tests/keyboardmarker.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { ClassicEditor, Essentials, Paragraph, Heading } from 'ckeditor5';
+import KeyboardMarker from '../src/keyboardmarker.js';
+
+describe( 'KeyboardMarker', () => {
+	it( 'should be named', () => {
+		expect( KeyboardMarker.pluginName ).to.equal( 'KeyboardMarker' );
+	} );
+
+	describe( 'init()', () => {
+		let domElement: HTMLElement, editor: ClassicEditor;
+
+		beforeEach( async () => {
+			domElement = document.createElement( 'div' );
+			document.body.appendChild( domElement );
+
+			editor = await ClassicEditor.create( domElement, {
+				licenseKey: 'GPL',
+				plugins: [
+					Paragraph,
+					Heading,
+					Essentials,
+					KeyboardMarker
+				],
+				toolbar: [
+					'keyboardMarker'
+				]
+			} );
+		} );
+
+		afterEach( () => {
+			domElement.remove();
+			return editor.destroy();
+		} );
+
+		it( 'should load KeyboardMarker', () => {
+			const myPlugin = editor.plugins.get( 'KeyboardMarker' );
+
+			expect( myPlugin ).to.be.an.instanceof( KeyboardMarker );
+		} );
+
+		it( 'should add an icon to the toolbar', () => {
+			expect( editor.ui.componentFactory.has( 'keyboardMarker' ) ).to.equal( true );
+		} );
+
+		it( 'should add a text into the editor after clicking the icon', () => {
+			const icon = editor.ui.componentFactory.create( 'keyboardMarker' );
+
+			expect( editor.getData() ).to.equal( '' );
+
+			icon.fire( 'execute' );
+
+			expect( editor.getData() ).to.equal( '<p>Hello CKEditor 5!</p>' );
+		} );
+	} );
+} );

packages/ckeditor5-keyboard-marker/theme/icons/ckeditor.svg

@@ -0,0 +1 @@
+<svg width='68' height='64' viewBox='0 0 68 64' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd'><path d='M43.71 11.025a11.508 11.508 0 0 0-1.213 5.159c0 6.42 5.244 11.625 11.713 11.625.083 0 .167 0 .25-.002v16.282a5.464 5.464 0 0 1-2.756 4.739L30.986 60.7a5.548 5.548 0 0 1-5.512 0L4.756 48.828A5.464 5.464 0 0 1 2 44.089V20.344c0-1.955 1.05-3.76 2.756-4.738L25.474 3.733a5.548 5.548 0 0 1 5.512 0l12.724 7.292z' fill='#FFF'/><path d='M45.684 8.79a12.604 12.604 0 0 0-1.329 5.65c0 7.032 5.744 12.733 12.829 12.733.091 0 .183-.001.274-.003v17.834a5.987 5.987 0 0 1-3.019 5.19L31.747 63.196a6.076 6.076 0 0 1-6.037 0L3.02 50.193A5.984 5.984 0 0 1 0 45.003V18.997c0-2.14 1.15-4.119 3.019-5.19L25.71.804a6.076 6.076 0 0 1 6.037 0L45.684 8.79zm-29.44 11.89c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h18.479c.833 0 1.509-.67 1.509-1.498v-.715c0-.827-.676-1.498-1.51-1.498H16.244zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm41.191-14.459c-5.835 0-10.565-4.695-10.565-10.486 0-5.792 4.73-10.487 10.565-10.487C63.27 3.703 68 8.398 68 14.19c0 5.791-4.73 10.486-10.565 10.486v-.001z' fill='#1EBC61' fill-rule='nonzero'/><path d='M60.857 15.995c0-.467-.084-.875-.251-1.225a2.547 2.547 0 0 0-.686-.88 2.888 2.888 0 0 0-1.026-.531 4.418 4.418 0 0 0-1.259-.175c-.134 0-.283.006-.447.018-.15.01-.3.034-.446.07l.075-1.4h3.587v-1.8h-5.462l-.214 5.06c.319-.116.682-.21 1.089-.28.406-.071.77-.107 1.088-.107.218 0 .437.021.655.063.218.041.413.114.585.218s.313.244.422.419c.109.175.163.391.163.65 0 .424-.132.745-.396.961a1.434 1.434 0 0 1-.938.325c-.352 0-.656-.1-.912-.3-.256-.2-.43-.453-.523-.762l-1.925.588c.1.35.258.664.472.943.214.279.47.514.767.706.298.191.63.339.995.443.365.104.749.156 1.151.156.437 0 .86-.064 1.272-.193.41-.13.778-.323 1.1-.581a2.8 2.8 0 0 0 .775-.981c.193-.396.29-.864.29-1.405h-.001z' fill='#FFF' fill-rule='nonzero'/></g></svg>

packages/ckeditor5-keyboard-marker/tsconfig.dist.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "rootDir": "./src",
+    "types": [
+      "./typings/types"
+    ]
+  }
+}

packages/ckeditor5-keyboard-marker/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    /**
+     * TypeScript automagically loads typings from all "@types/*" packages if the "compilerOptions.types" array is not defined in
+     * this file. However, if some dependencies have "@types/*" packages as their dependencies, they'll also be loaded as well.
+     * As a result, TypeScript loaded "@types/node" which we don't want to use, because it allows using Node.js specific APIs that
+     * are not available in the browsers.
+     *
+     * To avoid such issues, we defined this empty "types" to disable automatic inclusion of the "@types/*" packages.
+     */
+    "types": [],
+    "lib": [
+      "ES2019", // Must match the "target".
+      "ES2020.String",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "noImplicitAny": true,
+    "noImplicitOverride": true,
+    "strict": true,
+    "target": "es2019",
+    "sourceMap": true,
+    "allowJs": true,
+	"moduleDetection": "force",
+	"moduleResolution": "NodeNext",
+	"module": "NodeNext",
+	"skipLibCheck": true,
+    "typeRoots": [
+      "typings",
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "./sample",
+    "./src",
+    "./typings"
+  ]
+}

packages/ckeditor5-keyboard-marker/tsconfig.release.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "declaration": true
+  },
+  "exclude": [
+    "./tests/",
+	"./src",
+    "./sample/"
+  ]
+}

packages/ckeditor5-keyboard-marker/tsconfig.test.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "@types/mocha"
+    ],
+    "sourceMap": true
+  },
+  "include": [
+    "./sample",
+    "./src",
+    "./tests",
+    "./typings"
+  ]
+}

packages/ckeditor5-keyboard-marker/typings/ckeditor5-inspector.d.ts

@@ -0,0 +1,7 @@
+declare module '@ckeditor/ckeditor5-inspector' {
+	const inspector: {
+		attach( editor: any ): void;
+	};
+
+	export default inspector;
+}

packages/ckeditor5-keyboard-marker/typings/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: string;
+	export default content;
+}

packages/ckeditor5-keyboard-marker/vitest.config.ts

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2023-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { defineConfig } from 'vitest/config';
+import svg from 'vite-plugin-svgo';
+
+export default defineConfig( {
+	plugins: [
+		svg()
+	],
+	test: {
+		browser: {
+			enabled: true,
+			name: 'chrome',
+			provider: 'webdriverio',
+			providerOptions: {},
+			headless: true,
+			ui: false
+		},
+		include: [
+			'tests/**/*.[jt]s'
+		],
+		globals: true,
+		watch: false,
+		coverage: {
+			thresholds: {
+				lines: 100,
+				functions: 100,
+				branches: 100,
+				statements: 100
+			},
+			provider: 'istanbul',
+			include: [
+				'src'
+			]
+		}
+	}
+} );