chore(ckeditor5-keyboard-marker): port source code

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

@@ -31,7 +31,7 @@ import {
 
 import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
 
-import KeyboardMarker from '../src/keyboardmarker.js';
+import Kbd from '../src/keyboardmarker.js';
 
 import 'ckeditor5/ckeditor5.css';
 
@@ -39,7 +39,7 @@ ClassicEditor
 	.create( document.getElementById( 'editor' )!, {
 		licenseKey: 'GPL',
 		plugins: [
-			KeyboardMarker,
+			Kbd,
 			Essentials,
 			Autoformat,
 			BlockQuote,

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

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

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

@@ -1,8 +1,10 @@
-import ckeditor from './../theme/icons/ckeditor.svg';
+import kbdIcon from '../theme/icons/kbd.svg';
 import './augmentation.js';
 
-export { default as KeyboardMarker } from './keyboardmarker.js';
+export { default as Kbd } from './kbd.js';
+export { default as KbdEditing } from "./kbdediting.js";
+export { default as KbdUI } from "./kbdui.js";
 
 export const icons = {
-	ckeditor
+	kbdIcon
 };

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

@@ -1,7 +1,6 @@
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import KbdEditing from './KbdEditing';
-import KbdUI from './KbdUI';
+import { Plugin } from 'ckeditor5';
+import KbdEditing from './kbdediting.js';
+import KbdUI from './kbdui.js';
 
 /**
  * The keyboard shortcut feature.
@@ -9,21 +8,15 @@ import KbdUI from './KbdUI';
  * Provides a way to semantically mark keyboard shortcuts/hotkeys in the content.
  *
  * This is a "glue" plugin which loads the `KbdEditing` and `KbdUI` plugins.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class Kbd extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
+
 	static get requires() {
 		return [ KbdEditing, KbdUI ];
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'Kbd';
+	public static get pluginName() {
+		return 'Kbd' as const;
 	}
+
 }

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

@@ -1,6 +1,4 @@
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
+import { AttributeCommand, Plugin } from "ckeditor5";
 
 const KBD = 'kbd';
 
@@ -9,15 +7,11 @@ const KBD = 'kbd';
  *
  * It registers the `'kbd'` command, associated keystroke and introduces the
  * `kbd` attribute in the model which renders to the view as a `<kbd>` element.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class KbdEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'KbdEditing';
+
+	public static get pluginName() {
+		return 'KbdEditing' as const;
 	}
 
 	/**

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

@@ -1,17 +1,17 @@
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-
-import kbdIcon from '../icons/kbd.svg';
+import { AttributeCommand, ButtonView, Plugin } from 'ckeditor5';
+import kbdIcon from '../theme/icons/kbd.svg';
 
 const KBD = 'kbd';
 
 /**
  * The keyboard shortcut UI feature. It brings a proper button.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class KbdUI extends Plugin {
+
+	public static get pluginName() {
+		return 'KbdUI' as const;
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -20,7 +20,7 @@ export default class KbdUI extends Plugin {
 		const t = editor.t;
 
 		editor.ui.componentFactory.add( KBD, locale => {
-			const command = editor.commands.get( KBD );
+			const command = editor.commands.get( KBD ) as AttributeCommand;
 			const view = new ButtonView( locale );
 
 			view.set( {

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

@@ -1,39 +0,0 @@
-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/theme/icons/ckeditor.svg

@@ -1 +0,0 @@
-<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>