diff --git a/packages/ckeditor5-keyboard-marker/sample/ckeditor.ts b/packages/ckeditor5-keyboard-marker/sample/ckeditor.ts index ca5baaa3a..02554e703 100644 --- a/packages/ckeditor5-keyboard-marker/sample/ckeditor.ts +++ b/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, diff --git a/packages/ckeditor5-keyboard-marker/src/augmentation.ts b/packages/ckeditor5-keyboard-marker/src/augmentation.ts index 6d435734e..99f615c84 100644 --- a/packages/ckeditor5-keyboard-marker/src/augmentation.ts +++ b/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; } } diff --git a/packages/ckeditor5-keyboard-marker/src/index.ts b/packages/ckeditor5-keyboard-marker/src/index.ts index d68a7cb3d..eecb33f8d 100644 --- a/packages/ckeditor5-keyboard-marker/src/index.ts +++ b/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 }; diff --git a/_regroup/ckeditor5-keyboard-marker/src/Kbd.js b/packages/ckeditor5-keyboard-marker/src/kbd.ts similarity index 54% rename from _regroup/ckeditor5-keyboard-marker/src/Kbd.js rename to packages/ckeditor5-keyboard-marker/src/kbd.ts index d0a0a1f4b..6e25d4dd0 100644 --- a/_regroup/ckeditor5-keyboard-marker/src/Kbd.js +++ b/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; } + } diff --git a/_regroup/ckeditor5-keyboard-marker/src/KbdEditing.js b/packages/ckeditor5-keyboard-marker/src/kbdediting.ts similarity index 74% rename from _regroup/ckeditor5-keyboard-marker/src/KbdEditing.js rename to packages/ckeditor5-keyboard-marker/src/kbdediting.ts index 369b5be21..44db8299c 100644 --- a/_regroup/ckeditor5-keyboard-marker/src/KbdEditing.js +++ b/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 `` 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; } /** diff --git a/_regroup/ckeditor5-keyboard-marker/src/KbdUI.js b/packages/ckeditor5-keyboard-marker/src/kbdui.ts similarity index 73% rename from _regroup/ckeditor5-keyboard-marker/src/KbdUI.js rename to packages/ckeditor5-keyboard-marker/src/kbdui.ts index 74d776a8a..828157d66 100644 --- a/_regroup/ckeditor5-keyboard-marker/src/KbdUI.js +++ b/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( { diff --git a/packages/ckeditor5-keyboard-marker/src/keyboardmarker.ts b/packages/ckeditor5-keyboard-marker/src/keyboardmarker.ts deleted file mode 100644 index 6b335a793..000000000 --- a/packages/ckeditor5-keyboard-marker/src/keyboardmarker.ts +++ /dev/null @@ -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; - } ); - } -} diff --git a/packages/ckeditor5-keyboard-marker/theme/icons/ckeditor.svg b/packages/ckeditor5-keyboard-marker/theme/icons/ckeditor.svg deleted file mode 100644 index 25436f4b8..000000000 --- a/packages/ckeditor5-keyboard-marker/theme/icons/ckeditor.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/_regroup/ckeditor5-keyboard-marker/icons/kbd.svg b/packages/ckeditor5-keyboard-marker/theme/icons/kbd.svg similarity index 100% rename from _regroup/ckeditor5-keyboard-marker/icons/kbd.svg rename to packages/ckeditor5-keyboard-marker/theme/icons/kbd.svg