js-draw 0.16.0 → 0.17.0

package/dist/src/Editor.js

@@ -503,11 +503,12 @@ export class Editor {
      * ```
      */
     dispatchNoAnnounce(command, addToHistory = false) {
+        const result = command.apply(this);
         if (addToHistory) {
             const apply = false; // Don't double-apply
             this.history.push(command, apply);
         }
-        return command.apply(this);
+        return result;
     }
     /**
      * Apply a large transformation in chunks.

package/dist/src/EditorImage.js

@@ -172,9 +172,13 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             super('add-element');
             this.element = element;
             this.applyByFlattening = applyByFlattening;
-            // Store the element's serialization --- .serializeToJSON may be called on this
-            // even when this is not at the top of the undo/redo stack.
-            this.serializedElem = element.serialize();
+            this.serializedElem = null;
+            // FIXME: The serialized version of this command may be inaccurate if this is
+            //        serialized when this command is not on the top of the undo stack.
+            //
+            // Caching the element's serialized data leads to additional memory usage *and*
+            // sometimes incorrect behavior in collaborative editing.
+            this.serializedElem = null;
             if (isNaN(element.getBBox().area)) {
                 throw new Error('Elements in the image cannot have NaN bounding boxes');
             }
@@ -197,8 +201,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             return localization.addElementAction(this.element.description(localization));
         }
         serializeToJSON() {
+            var _a;
             return {
-                elemData: this.serializedElem,
+                elemData: (_a = this.serializedElem) !== null && _a !== void 0 ? _a : this.element.serialize(),
             };
         }
     },
@@ -207,7 +212,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             const id = json.elemData.id;
             const foundElem = editor.image.lookupElement(id);
             const elem = foundElem !== null && foundElem !== void 0 ? foundElem : AbstractComponent.deserialize(json.elemData);
-            return new EditorImage.AddElementCommand(elem);
+            const result = new EditorImage.AddElementCommand(elem);
+            result.serializedElem = json.elemData;
+            return result;
         });
     })(),
     _a);

package/dist/src/SVGLoader.js

@@ -215,6 +215,12 @@ export default class SVGLoader {
         // In some environments, computedStyles.fontSize can be increased by the system.
         // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
         let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+        if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
+            // Try to inherit the font size of the parent text element.
+            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
+        }
+        // If we still couldn't find a font size, try to use computedStyles (which can be
+        // wrong).
         if (!fontSizeMatch) {
             fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
         }

package/dist/src/UndoRedoHistory.d.ts

@@ -3,12 +3,11 @@ import Command from './commands/Command';
 type AnnounceRedoCallback = (command: Command) => void;
 type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
+    #private;
     private readonly editor;
     private announceRedoCallback;
     private announceUndoCallback;
-    private undoStack;
-    private redoStack;
-    private maxUndoRedoStackSize;
+    private readonly maxUndoRedoStackSize;
     constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
     private fireUpdateEvent;
     push(command: Command, apply?: boolean): void;

package/dist/src/UndoRedoHistory.js

@@ -1,19 +1,35 @@
-import { EditorEventType } from './types';
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UndoRedoHistory_undoStack, _UndoRedoHistory_redoStack;
+import { EditorEventType, UndoEventType } from './types';
 class UndoRedoHistory {
     // @internal
     constructor(editor, announceRedoCallback, announceUndoCallback) {
         this.editor = editor;
         this.announceRedoCallback = announceRedoCallback;
         this.announceUndoCallback = announceUndoCallback;
+        _UndoRedoHistory_undoStack.set(this, void 0);
+        _UndoRedoHistory_redoStack.set(this, void 0);
         this.maxUndoRedoStackSize = 700;
-        this.undoStack = [];
-        this.redoStack = [];
+        __classPrivateFieldSet(this, _UndoRedoHistory_undoStack, [], "f");
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
     }
-    fireUpdateEvent() {
+    fireUpdateEvent(stackUpdateType, triggeringCommand) {
         this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
             kind: EditorEventType.UndoRedoStackUpdated,
-            undoStackSize: this.undoStack.length,
-            redoStackSize: this.redoStack.length,
+            undoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length,
+            redoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length,
+            command: triggeringCommand,
+            stackUpdateType,
         });
     }
     // Adds the given command to this and applies it to the editor.
@@ -21,17 +37,17 @@ class UndoRedoHistory {
         if (apply) {
             command.apply(this.editor);
         }
-        this.undoStack.push(command);
-        for (const elem of this.redoStack) {
+        __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
+        for (const elem of __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f")) {
             elem.onDrop(this.editor);
         }
-        this.redoStack = [];
-        if (this.undoStack.length > this.maxUndoRedoStackSize) {
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
+        if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
             const removeAtOnceCount = 10;
-            const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+            const removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
             removedElements.forEach(elem => elem.onDrop(this.editor));
         }
-        this.fireUpdateEvent();
+        this.fireUpdateEvent(UndoEventType.CommandDone, command);
         this.editor.notifier.dispatch(EditorEventType.CommandDone, {
             kind: EditorEventType.CommandDone,
             command,
@@ -39,12 +55,12 @@ class UndoRedoHistory {
     }
     // Remove the last command from this' undo stack and apply it.
     undo() {
-        const command = this.undoStack.pop();
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
         if (command) {
-            this.redoStack.push(command);
+            __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").push(command);
             command.unapply(this.editor);
             this.announceUndoCallback(command);
-            this.fireUpdateEvent();
+            this.fireUpdateEvent(UndoEventType.CommandUndone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
                 kind: EditorEventType.CommandUndone,
                 command,
@@ -52,12 +68,12 @@ class UndoRedoHistory {
         }
     }
     redo() {
-        const command = this.redoStack.pop();
+        const command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
         if (command) {
-            this.undoStack.push(command);
+            __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
             command.apply(this.editor);
             this.announceRedoCallback(command);
-            this.fireUpdateEvent();
+            this.fireUpdateEvent(UndoEventType.CommandRedone, command);
             this.editor.notifier.dispatch(EditorEventType.CommandDone, {
                 kind: EditorEventType.CommandDone,
                 command,
@@ -65,10 +81,11 @@ class UndoRedoHistory {
         }
     }
     get undoStackSize() {
-        return this.undoStack.length;
+        return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
     }
     get redoStackSize() {
-        return this.redoStack.length;
+        return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
     }
 }
+_UndoRedoHistory_undoStack = new WeakMap(), _UndoRedoHistory_redoStack = new WeakMap();
 export default UndoRedoHistory;

package/dist/src/components/RestylableComponent.js

@@ -56,8 +56,8 @@ class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
     unapply(editor) {
         this.getComponent(editor).forceStyle(this.originalStyle, editor);
     }
-    description(_editor, localizationTable) {
-        return localizationTable.restyledElements;
+    description(editor, localizationTable) {
+        return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
     }
     serializeToJSON() {
         return {

package/dist/src/components/localization.d.ts

@@ -6,6 +6,6 @@ export interface ImageComponentLocalization {
     svgObject: string;
     emptyBackground: string;
     filledBackgroundWithColor: (color: string) => string;
-    restyledElements: string;
+    restyledElement: (elementDescription: string) => string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -2,9 +2,9 @@ export const defaultComponentLocalization = {
     unlabeledImageNode: 'Unlabeled image node',
     stroke: 'Stroke',
     svgObject: 'SVG Object',
-    restyledElements: 'Restyled elements',
     emptyBackground: 'Empty background',
     filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
 };

package/dist/src/lib.d.ts

@@ -28,5 +28,6 @@ export * from './toolbar/lib';
 export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
 export { Editor, EditorSettings };
 export default Editor;

package/dist/src/lib.js

@@ -28,5 +28,6 @@ export * from './toolbar/lib';
 export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
 export { Editor };
 export default Editor;

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -14,6 +14,7 @@ export default class HTMLToolbar {
     private container;
     private resizeObserver;
     private listeners;
+    private widgetOrderCounter;
     private widgetsById;
     private widgetList;
     private overflowWidget;

package/dist/src/toolbar/HTMLToolbar.js

@@ -23,6 +23,8 @@ export default class HTMLToolbar {
         this.editor = editor;
         this.localizationTable = localizationTable;
         this.listeners = [];
+        // Flex-order of the next widget to be added.
+        this.widgetOrderCounter = 0;
         this.widgetsById = {};
         this.widgetList = [];
         // Widget to toggle overflow menu.
@@ -197,7 +199,7 @@ export default class HTMLToolbar {
         this.setupColorPickers();
         // Ensure that the widget gets displayed in the correct
         // place in the toolbar, even if it's removed and re-added.
-        container.style.order = `${this.widgetList.length}`;
+        container.style.order = `${this.widgetOrderCounter++}`;
         this.queueReLayout();
     }
     /**
@@ -233,6 +235,7 @@ export default class HTMLToolbar {
         if (options.maxSize) {
             spacer.style.maxWidth = options.maxSize;
         }
+        spacer.style.order = `${this.widgetOrderCounter++}`;
         this.container.appendChild(spacer);
     }
     serializeState() {

package/dist/src/toolbar/widgets/OverflowWidget.js

@@ -4,6 +4,7 @@ export default class OverflowWidget extends BaseWidget {
         var _a;
         super(editor, 'overflow-widget', localizationTable);
         this.overflowChildren = [];
+        this.container.classList.add('toolbar-overflow-widget');
         // Make the dropdown openable
         this.container.classList.add('dropdownShowable');
         (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
@@ -32,6 +33,7 @@ export default class OverflowWidget extends BaseWidget {
      */
     clearChildren() {
         this.overflowContainer.replaceChildren();
+        this.container.classList.remove('horizontal');
         const overflowChildren = this.overflowChildren;
         this.overflowChildren = [];
         return overflowChildren;
@@ -56,6 +58,10 @@ export default class OverflowWidget extends BaseWidget {
         this.overflowChildren.push(widget);
         widget.addTo(this.overflowContainer);
         widget.setIsToplevel(false);
+        // Switch to a horizontal layout if enough children
+        if (this.overflowChildren.length > 2) {
+            this.container.classList.add('horizontal');
+        }
     }
     // This always returns false.
     // Don't try to move the overflow menu to itself.

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -284,7 +284,7 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
-            if (evt.key === 'a') {
+            if (evt.key === 'a' || evt.key === 'r') {
                 // Selected all in onKeyDown. Don't finalizeTransform.
                 return true;
             }

package/dist/src/types.d.ts

@@ -85,6 +85,11 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
+export declare enum UndoEventType {
+    CommandDone = 0,
+    CommandUndone = 1,
+    CommandRedone = 2
+}
 type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
@@ -107,6 +112,8 @@ export interface EditorUndoStackUpdated {
     readonly kind: EditorEventType.UndoRedoStackUpdated;
     readonly undoStackSize: number;
     readonly redoStackSize: number;
+    readonly command?: Command;
+    readonly stackUpdateType: UndoEventType;
 }
 export interface CommandDoneEvent {
     readonly kind: EditorEventType.CommandDone;

package/dist/src/types.js

@@ -26,3 +26,10 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
     EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));
+// Types of `EditorUndoStackUpdated` events.
+export var UndoEventType;
+(function (UndoEventType) {
+    UndoEventType[UndoEventType["CommandDone"] = 0] = "CommandDone";
+    UndoEventType[UndoEventType["CommandUndone"] = 1] = "CommandUndone";
+    UndoEventType[UndoEventType["CommandRedone"] = 2] = "CommandRedone";
+})(UndoEventType || (UndoEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.16.0",
+	"version": "0.17.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.css

@@ -51,6 +51,10 @@
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
+
+	/* Allow the canvas to shrink (needed in Chrome) */
+	min-height: 0px;
+	max-height: inherit;
 }
 
 .imageEditorContainer .loadingMessage {

package/src/Editor.ts

@@ -663,12 +663,14 @@ export class Editor {
 	 * ```
 	 */
 	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
+		const result = command.apply(this);
+
 		if (addToHistory) {
 			const apply = false; // Don't double-apply
 			this.history.push(command, apply);
 		}
 
-		return command.apply(this);
+		return result;
 	}
 
 	/**

package/src/EditorImage.ts

@@ -211,7 +211,7 @@ export default class EditorImage {
 
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
-		private serializedElem: any;
+		private serializedElem: any|null = null;
 
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
@@ -222,9 +222,12 @@ export default class EditorImage {
 		) {
 			super('add-element');
 
-			// Store the element's serialization --- .serializeToJSON may be called on this
-			// even when this is not at the top of the undo/redo stack.
-			this.serializedElem = element.serialize();
+			// FIXME: The serialized version of this command may be inaccurate if this is
+			//        serialized when this command is not on the top of the undo stack.
+			//
+			// Caching the element's serialized data leads to additional memory usage *and*
+			// sometimes incorrect behavior in collaborative editing.
+			this.serializedElem = null;
 
 			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
@@ -253,7 +256,7 @@ export default class EditorImage {
 
 		protected serializeToJSON() {
 			return {
-				elemData: this.serializedElem,
+				elemData: this.serializedElem ?? this.element.serialize(),
 			};
 		}
 
@@ -262,7 +265,9 @@ export default class EditorImage {
 				const id = json.elemData.id;
 				const foundElem = editor.image.lookupElement(id);
 				const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
-				return new EditorImage.AddElementCommand(elem);
+				const result = new EditorImage.AddElementCommand(elem);
+				result.serializedElem = json.elemData;
+				return result;
 			});
 		}
 	};

package/src/SVGLoader.test.ts

@@ -54,4 +54,61 @@ describe('SVGLoader', () => {
 		expect(elem.getBBox().topLeft.x).toBe(0);
 		expect(elem.getBBox().h).toBeGreaterThan(200);
 	});
+
+	it('tspans without specified font-sizes should inherit their font size from their parent element', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text style='font-size: 22px;'>
+					Testing...
+					<tspan>Test 2...</tspan>
+					<tspan>Test 3...</tspan>
+					<tspan style='font-size: 3px;'>Test 4...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getAllElements()
+			.filter(elem => elem instanceof TextComponent)[0] as TextComponent;
+		expect(elem).not.toBeNull();
+
+		// Ensure each child object has the correct size
+		expect(elem.serialize().data).toMatchObject({
+			'textObjects': [
+				{ },
+				{
+					'json':
+					{
+						'textObjects': [{ 'text': 'Test 2...' }],
+						'style': {
+							'size': 22,
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 3...' }],
+						'style': {
+							'size': 22
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 4...' }],
+						'style': {
+							'size': 3,
+						}
+					}
+				},
+				{ }
+			],
+
+			'style': {
+				'size': 22,
+			}
+		});
+	});
 });

package/src/SVGLoader.ts

@@ -257,6 +257,13 @@ export default class SVGLoader implements ImageLoader {
 		// In some environments, computedStyles.fontSize can be increased by the system.
 		// Thus, to prevent text from growing on load/save, prefer .style.fontSize.
 		let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+		if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
+			// Try to inherit the font size of the parent text element.
+			fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
+		}
+
+		// If we still couldn't find a font size, try to use computedStyles (which can be
+		// wrong).
 		if (!fontSizeMatch) {
 			fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
 		}

package/src/UndoRedoHistory.ts

@@ -1,15 +1,15 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-import { EditorEventType } from './types';
+import { EditorEventType, UndoEventType } from './types';
 
 type AnnounceRedoCallback = (command: Command)=>void;
 type AnnounceUndoCallback = (command: Command)=>void;
 
 class UndoRedoHistory {
-	private undoStack: Command[];
-	private redoStack: Command[];
+	#undoStack: Command[];
+	#redoStack: Command[];
 
-	private maxUndoRedoStackSize: number = 700;
+	private readonly maxUndoRedoStackSize: number = 700;
 
 	// @internal
 	public constructor(
@@ -17,15 +17,20 @@ class UndoRedoHistory {
 		private announceRedoCallback: AnnounceRedoCallback,
 		private announceUndoCallback: AnnounceUndoCallback,
 	) {
-		this.undoStack = [];
-		this.redoStack = [];
+		this.#undoStack = [];
+		this.#redoStack = [];
 	}
 
-	private fireUpdateEvent() {
+	private fireUpdateEvent(
+		stackUpdateType: UndoEventType, triggeringCommand: Command
+	) {
 		this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
 			kind: EditorEventType.UndoRedoStackUpdated,
-			undoStackSize: this.undoStack.length,
-			redoStackSize: this.redoStack.length,
+			undoStackSize: this.#undoStack.length,
+			redoStackSize: this.#redoStack.length,
+
+			command: triggeringCommand,
+			stackUpdateType,
 		});
 	}
 
@@ -34,20 +39,20 @@ class UndoRedoHistory {
 		if (apply) {
 			command.apply(this.editor);
 		}
-		this.undoStack.push(command);
+		this.#undoStack.push(command);
 
-		for (const elem of this.redoStack) {
+		for (const elem of this.#redoStack) {
 			elem.onDrop(this.editor);
 		}
-		this.redoStack = [];
+		this.#redoStack = [];
 
-		if (this.undoStack.length > this.maxUndoRedoStackSize) {
+		if (this.#undoStack.length > this.maxUndoRedoStackSize) {
 			const removeAtOnceCount = 10;
-			const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+			const removedElements = this.#undoStack.splice(0, removeAtOnceCount);
 			removedElements.forEach(elem => elem.onDrop(this.editor));
 		}
 
-		this.fireUpdateEvent();
+		this.fireUpdateEvent(UndoEventType.CommandDone, command);
 		this.editor.notifier.dispatch(EditorEventType.CommandDone, {
 			kind: EditorEventType.CommandDone,
 			command,
@@ -56,13 +61,13 @@ class UndoRedoHistory {
 
 	// Remove the last command from this' undo stack and apply it.
 	public undo() {
-		const command = this.undoStack.pop();
+		const command = this.#undoStack.pop();
 		if (command) {
-			this.redoStack.push(command);
+			this.#redoStack.push(command);
 			command.unapply(this.editor);
 			this.announceUndoCallback(command);
 
-			this.fireUpdateEvent();
+			this.fireUpdateEvent(UndoEventType.CommandUndone, command);
 			this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
 				kind: EditorEventType.CommandUndone,
 				command,
@@ -71,13 +76,13 @@ class UndoRedoHistory {
 	}
 
 	public redo() {
-		const command = this.redoStack.pop();
+		const command = this.#redoStack.pop();
 		if (command) {
-			this.undoStack.push(command);
+			this.#undoStack.push(command);
 			command.apply(this.editor);
 			this.announceRedoCallback(command);
 
-			this.fireUpdateEvent();
+			this.fireUpdateEvent(UndoEventType.CommandRedone, command);
 			this.editor.notifier.dispatch(EditorEventType.CommandDone, {
 				kind: EditorEventType.CommandDone,
 				command,
@@ -86,11 +91,11 @@ class UndoRedoHistory {
 	}
 
 	public get undoStackSize(): number {
-		return this.undoStack.length;
+		return this.#undoStack.length;
 	}
 
 	public get redoStackSize(): number {
-		return this.redoStack.length;
+		return this.#redoStack.length;
 	}
 }
 

package/src/components/RestylableComponent.ts

@@ -111,8 +111,8 @@ class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
 		this.getComponent(editor).forceStyle(this.originalStyle, editor);
 	}
 
-	public description(_editor: Editor, localizationTable: EditorLocalization): string {
-		return localizationTable.restyledElements;
+	public description(editor: Editor, localizationTable: EditorLocalization): string {
+		return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
 	}
 
 	protected serializeToJSON() {