Actions

ElementActions registers commands that move, duplicate and delete a whole element:

Command	Does
moveElementUp	Swaps the element with the one before it. Disabled for the first one.
moveElementDown	Swaps the element with the one after it. Disabled for the last one.
duplicateElement	Inserts the same element, empty, after it, and puts the cursor in it.
deleteElement	Deletes the element.

import { ElementActions } from 'ckeditor5-elements';

They are ElementOrPositionCommands: the target is an element, the parent element of a position, or the element at the selection. They have titles and icons, so they work as buttons and as context menu items.

• Moving happens within the parent: the first block of a note cannot move up, and the last one cannot move down. The cursor stays in the moved element.
• Duplicating keeps the name and the attributes of the element: a note of a type gives a note of the same type, with an empty paragraph. A list item gives a new list item. Objects, such as images and tables, are copied with their content, as they cannot be empty.
• Deleting the only block of a note leaves the note with an empty paragraph, so it can still be written in.

The parts of a structure, such as table cells, table rows and captions, cannot be moved, duplicated or deleted on their own, so the commands are disabled for them: use the table commands for those.

Toolbar buttons and the context menu

ElementOrPositionButtonView turns the commands into toolbar buttons that act on the element with the cursor. Here, the same commands are in the context menu too.

Source

import { Essentials, List, Paragraph, Plugin, SourceEditing } from 'ckeditor5';
import { ElementActions, ElementContextMenu, ElementOrPositionButtonView } from 'ckeditor5-elements';
import { Note } from 'ckeditor5-elements-example';
import type { Demo } from './shared/demo';

const ACTIONS = ['moveElementUp', 'moveElementDown', 'duplicateElement', 'deleteElement'] as const;

/**
 * Toolbar buttons for the element actions. Without a target, they act on the element with the cursor.
 */
class ActionButtons extends Plugin {
	public static get requires(): readonly [typeof ElementActions] {
		return [ElementActions] as const;
	}

	public init(): void {
		const editor = this.editor;

		for (const name of ACTIONS) {
			const command = editor.commands.get(name);

			if (command) {
				editor.ui.componentFactory.add(name, locale => new ElementOrPositionButtonView(locale, command));
			}
		}
	}
}

export default {
	config: {
		plugins: [Essentials, SourceEditing, Paragraph, List, Note, ActionButtons, ElementContextMenu],
		toolbar: ['undo', 'redo', 'sourceEditing', '|', 'note', 'bulletedList', '|', ...ACTIONS],
		// The same commands in the context menu of the right-clicked element.
		elementContextMenu: (element, editor) => [
			editor.commands.get('moveElementUp'),
			editor.commands.get('moveElementDown'),
			'|',
			editor.commands.get('duplicateElement'),
			editor.commands.get('deleteElement')
		]
	},
	data:
		'<p>Put the cursor here and move this paragraph down, or right-click it.</p>' +
		'<aside class="note"><p>The first block of a note cannot move up.</p><p>Duplicate this one: you get an empty paragraph below.</p></aside>' +
		'<ul><li>Duplicate a list item: you get a new one.</li><li>Delete this one.</li></ul>' +
		'<p>The last block cannot move down.</p>'
} satisfies Demo;

From code

Without a target, the commands act on the element at the selection. executeFor() acts on a given element, even when the command is disabled at the selection:

editor.execute('duplicateElement');
editor.commands.get('moveElementUp').executeFor(element);

The icons are exported too, e.g. for submenus: moveUpIcon, moveDownIcon, duplicateIcon and deleteIcon.