@gtkx/react 0.15.0 → 0.17.1

package/dist/nodes/text-tag.d.ts

@@ -0,0 +1,136 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type * as Pango from "@gtkx/ffi/pango";
+import type { ReactNode } from "react";
+import type { Node } from "../node.js";
+import type { TextContentChild, TextContentParent } from "./text-content.js";
+import { TextSegmentNode } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the TextTag virtual element.
+ *
+ * Used to declaratively define and apply text formatting to content within a TextBuffer.
+ *
+ * @example
+ * ```tsx
+ * <GtkTextView>
+ *     <x.TextBuffer>
+ *         Hello <x.TextTag id="bold" weight={Pango.Weight.BOLD}>bold</x.TextTag> world
+ *     </x.TextBuffer>
+ * </GtkTextView>
+ * ```
+ */
+export type TextTagProps = {
+    /** Unique identifier for this tag in the tag table */
+    id: string;
+    /** Priority of this tag (higher wins when multiple tags affect same property) */
+    priority?: number;
+    /** Background color as a string (e.g., "red", "#ff0000") */
+    background?: string;
+    /** Whether the background fills the entire line height */
+    backgroundFullHeight?: boolean;
+    /** Foreground (text) color as a string */
+    foreground?: string;
+    /** Font family name (e.g., "Sans", "Monospace") */
+    family?: string;
+    /** Font description string (e.g., "Sans Italic 12") */
+    font?: string;
+    /** Font size in points */
+    sizePoints?: number;
+    /** Font size in Pango units */
+    size?: number;
+    /** Font size scale factor relative to default */
+    scale?: number;
+    /** Font weight (use Pango.Weight constants) */
+    weight?: Pango.Weight | number;
+    /** Font style (use Pango.Style constants) */
+    style?: Pango.Style;
+    /** Font stretch (use Pango.Stretch constants) */
+    stretch?: Pango.Stretch;
+    /** Font variant (use Pango.Variant constants) */
+    variant?: Pango.Variant;
+    /** Whether to strike through the text */
+    strikethrough?: boolean;
+    /** Underline style (use Pango.Underline constants) */
+    underline?: Pango.Underline;
+    /** Overline style (use Pango.Overline constants) */
+    overline?: Pango.Overline;
+    /** Offset of text above baseline in Pango units (negative = below) */
+    rise?: number;
+    /** Extra spacing between characters in Pango units */
+    letterSpacing?: number;
+    /** Factor to scale line height by */
+    lineHeight?: number;
+    /** Left margin in pixels */
+    leftMargin?: number;
+    /** Right margin in pixels */
+    rightMargin?: number;
+    /** Paragraph indent in pixels (negative = hanging) */
+    indent?: number;
+    /** Pixels of blank space above paragraphs */
+    pixelsAboveLines?: number;
+    /** Pixels of blank space below paragraphs */
+    pixelsBelowLines?: number;
+    /** Pixels of blank space between wrapped lines */
+    pixelsInsideWrap?: number;
+    /** Text justification */
+    justification?: Gtk.Justification;
+    /** Text direction */
+    direction?: Gtk.TextDirection;
+    /** Wrap mode for line breaks */
+    wrapMode?: Gtk.WrapMode;
+    /** Whether the text can be modified */
+    editable?: boolean;
+    /** Whether the text is invisible/hidden */
+    invisible?: boolean;
+    /** Whether breaks are allowed */
+    allowBreaks?: boolean;
+    /** Whether to insert hyphens at breaks */
+    insertHyphens?: boolean;
+    /** Whether font fallback is enabled */
+    fallback?: boolean;
+    /** Whether margins accumulate */
+    accumulativeMargin?: boolean;
+    /** Paragraph background color as a string */
+    paragraphBackground?: string;
+    /** How to render invisible characters */
+    showSpaces?: Pango.ShowFlags;
+    /** How to transform text for display */
+    textTransform?: Pango.TextTransform;
+    /** OpenType font features as a string */
+    fontFeatures?: string;
+    /** Language code (e.g., "en-US") */
+    language?: string;
+    /** Text content and nested TextTag children */
+    children?: ReactNode;
+};
+export declare class TextTagNode extends VirtualNode<TextTagProps> implements TextContentParent {
+    static priority: number;
+    private buffer;
+    private tag;
+    private children;
+    private parent;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    setParent(parent: TextContentParent): void;
+    setBuffer(buffer: Gtk.TextBuffer): void;
+    hasBuffer(): boolean;
+    private setupTag;
+    private applyStyleProps;
+    getText(): string;
+    getLength(): number;
+    getChildren(): TextContentChild[];
+    private applyTagToRange;
+    private removeTagFromBuffer;
+    reapplyTag(): void;
+    private updateChildOffsets;
+    onChildInserted(child: TextContentChild): void;
+    onChildRemoved(child: TextContentChild): void;
+    onChildTextChanged(child: TextSegmentNode, oldLength: number, newLength: number): void;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    private isTextContentChild;
+    private setChildParent;
+    updateProps(oldProps: TextTagProps | null, newProps: TextTagProps): void;
+    unmount(): void;
+}

package/dist/nodes/text-tag.js

@@ -0,0 +1,202 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { applyStyleChanges } from "./internal/text-tag-styles.js";
+import { hasChanged } from "./internal/utils.js";
+import { TextAnchorNode } from "./text-anchor.js";
+import { TextSegmentNode } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+export class TextTagNode extends VirtualNode {
+    static priority = 1;
+    buffer = null;
+    tag = null;
+    children = [];
+    parent = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextTag";
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    setBuffer(buffer) {
+        this.buffer = buffer;
+        this.updateChildOffsets(0);
+        this.setupTag();
+        for (const child of this.children) {
+            if (child instanceof TextTagNode) {
+                child.setBuffer(buffer);
+            }
+        }
+    }
+    hasBuffer() {
+        return this.buffer !== null;
+    }
+    setupTag() {
+        if (!this.buffer)
+            return;
+        const tagTable = this.buffer.getTagTable();
+        this.tag = new Gtk.TextTag(this.props.id);
+        this.applyStyleProps(null, this.props);
+        tagTable.add(this.tag);
+        if (this.props.priority !== undefined) {
+            this.tag.setPriority(this.props.priority);
+        }
+        this.applyTagToRange();
+    }
+    applyStyleProps(oldProps, newProps) {
+        if (!this.tag)
+            return;
+        applyStyleChanges(this.tag, oldProps, newProps);
+    }
+    getText() {
+        let text = "";
+        for (const child of this.children) {
+            text += child.getText();
+        }
+        return text;
+    }
+    getLength() {
+        let length = 0;
+        for (const child of this.children) {
+            length += child.getLength();
+        }
+        return length;
+    }
+    getChildren() {
+        return this.children;
+    }
+    applyTagToRange() {
+        const buffer = this.buffer;
+        const tag = this.tag;
+        if (!buffer || !tag)
+            return;
+        const length = this.getLength();
+        if (length === 0)
+            return;
+        const startIter = new Gtk.TextIter();
+        const endIter = new Gtk.TextIter();
+        buffer.getIterAtOffset(startIter, this.bufferOffset);
+        buffer.getIterAtOffset(endIter, this.bufferOffset + length);
+        buffer.applyTag(tag, startIter, endIter);
+    }
+    removeTagFromBuffer() {
+        const buffer = this.buffer;
+        const tag = this.tag;
+        if (!buffer || !tag)
+            return;
+        const startIter = new Gtk.TextIter();
+        const endIter = new Gtk.TextIter();
+        buffer.getStartIter(startIter);
+        buffer.getEndIter(endIter);
+        buffer.removeTag(tag, startIter, endIter);
+    }
+    reapplyTag() {
+        if (!this.buffer || !this.tag)
+            return;
+        this.removeTagFromBuffer();
+        this.applyTagToRange();
+    }
+    updateChildOffsets(startIndex) {
+        let offset = this.bufferOffset;
+        for (let i = 0; i < startIndex; i++) {
+            const child = this.children[i];
+            if (child)
+                offset += child.getLength();
+        }
+        for (let i = startIndex; i < this.children.length; i++) {
+            const child = this.children[i];
+            if (child) {
+                child.bufferOffset = offset;
+                offset += child.getLength();
+            }
+        }
+    }
+    onChildInserted(child) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.updateChildOffsets(index);
+        }
+        this.parent?.onChildInserted(child);
+    }
+    onChildRemoved(child) {
+        this.parent?.onChildRemoved(child);
+    }
+    onChildTextChanged(child, oldLength, newLength) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.updateChildOffsets(index + 1);
+        }
+        this.parent?.onChildTextChanged(child, oldLength, newLength);
+    }
+    appendChild(child) {
+        if (this.isTextContentChild(child)) {
+            const index = this.children.length;
+            this.children.push(child);
+            this.setChildParent(child);
+            if (child instanceof TextTagNode && this.buffer) {
+                child.setBuffer(this.buffer);
+            }
+            this.updateChildOffsets(index);
+            this.parent?.onChildInserted(child);
+            return;
+        }
+        super.appendChild(child);
+    }
+    removeChild(child) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+            this.updateChildOffsets(index);
+            this.parent?.onChildRemoved(child);
+            return;
+        }
+        super.removeChild(child);
+    }
+    insertBefore(child, before) {
+        if (this.isTextContentChild(child)) {
+            const beforeIndex = this.children.indexOf(before);
+            const insertIndex = beforeIndex !== -1 ? beforeIndex : this.children.length;
+            this.children.splice(insertIndex, 0, child);
+            this.setChildParent(child);
+            if (child instanceof TextTagNode && this.buffer) {
+                child.setBuffer(this.buffer);
+            }
+            this.updateChildOffsets(insertIndex);
+            this.parent?.onChildInserted(child);
+            return;
+        }
+        super.insertBefore(child, before);
+    }
+    isTextContentChild(child) {
+        return child instanceof TextSegmentNode || child instanceof TextTagNode || child instanceof TextAnchorNode;
+    }
+    setChildParent(child) {
+        if (child instanceof TextSegmentNode || child instanceof TextTagNode) {
+            child.setParent(this);
+        }
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (oldProps && oldProps.id !== newProps.id) {
+            throw new Error("TextTag id cannot be changed after creation");
+        }
+        if (this.tag) {
+            this.applyStyleProps(oldProps, newProps);
+            if (hasChanged(oldProps, newProps, "priority") && newProps.priority !== undefined) {
+                this.tag.setPriority(newProps.priority);
+            }
+        }
+    }
+    unmount() {
+        if (this.buffer && this.tag) {
+            this.removeTagFromBuffer();
+            const tagTable = this.buffer.getTagTable();
+            tagTable.remove(this.tag);
+        }
+        this.tag = null;
+        this.buffer = null;
+        this.children = [];
+        super.unmount();
+    }
+}
+registerNodeClass(TextTagNode);

package/dist/nodes/text-view.d.ts

@@ -1 +1,31 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../node.js";
+import type { Container, ContainerClass, Props } from "../types.js";
+import { TextBufferController } from "./internal/text-buffer-controller.js";
+import type { TextContentChild, TextContentParent } from "./text-content.js";
+import type { TextSegmentNode } from "./text-segment.js";
+import { WidgetNode } from "./widget.js";
+type TextViewProps = Props & {
+    enableUndo?: boolean;
+    onBufferChanged?: ((buffer: Gtk.TextBuffer) => void) | null;
+    onTextInserted?: ((buffer: Gtk.TextBuffer, offset: number, text: string) => void) | null;
+    onTextDeleted?: ((buffer: Gtk.TextBuffer, startOffset: number, endOffset: number) => void) | null;
+    onCanUndoChanged?: ((canUndo: boolean) => void) | null;
+    onCanRedoChanged?: ((canRedo: boolean) => void) | null;
+};
+export declare class TextViewNode extends WidgetNode<Gtk.TextView, TextViewProps> implements TextContentParent {
+    static priority: number;
+    protected bufferController: TextBufferController | null;
+    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
+    protected ensureBufferController(): TextBufferController;
+    protected createBufferController(): TextBufferController;
+    updateProps(oldProps: TextViewProps | null, newProps: TextViewProps): void;
+    protected applyOwnProps(oldProps: TextViewProps | null, newProps: TextViewProps): void;
+    appendChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    removeChild(child: Node): void;
+    onChildInserted(child: TextContentChild): void;
+    onChildRemoved(child: TextContentChild): void;
+    onChildTextChanged(child: TextSegmentNode, oldLength: number, newLength: number): void;
+}
 export {};

package/dist/nodes/text-view.js

@@ -1,45 +1,73 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import * as GtkSource from "@gtkx/ffi/gtksource";
 import { registerNodeClass } from "../registry.js";
-import { isContainerType } from "./internal/utils.js";
-import { TextBufferNode } from "./text-buffer.js";
+import { TextBufferController } from "./internal/text-buffer-controller.js";
+import { filterProps, matchesAnyClass } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
-class TextViewNode extends WidgetNode {
+const OWN_PROPS = [
+    "enableUndo",
+    "onBufferChanged",
+    "onTextInserted",
+    "onTextDeleted",
+    "onCanUndoChanged",
+    "onCanRedoChanged",
+];
+export class TextViewNode extends WidgetNode {
     static priority = 1;
-    bufferChild;
+    bufferController = null;
     static matches(_type, containerOrClass) {
-        if (isContainerType(GtkSource.View, containerOrClass))
+        if (matchesAnyClass([GtkSource.View], containerOrClass))
             return false;
-        return isContainerType(Gtk.TextView, containerOrClass);
+        return matchesAnyClass([Gtk.TextView], containerOrClass);
+    }
+    ensureBufferController() {
+        if (!this.bufferController) {
+            this.bufferController = this.createBufferController();
+        }
+        return this.bufferController;
+    }
+    createBufferController() {
+        return new TextBufferController(this, this.container, () => new Gtk.TextBuffer());
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        this.ensureBufferController().applyOwnProps(oldProps, newProps);
     }
     appendChild(child) {
-        if (this.tryAttachTextBuffer(child))
+        const controller = this.ensureBufferController();
+        if (controller.isTextContentChild(child)) {
+            controller.appendChild(child);
             return;
+        }
         super.appendChild(child);
     }
     insertBefore(child, before) {
-        if (this.tryAttachTextBuffer(child))
+        const controller = this.ensureBufferController();
+        if (controller.isTextContentChild(child)) {
+            controller.insertBefore(child, before);
             return;
+        }
         super.insertBefore(child, before);
     }
     removeChild(child) {
-        if (child instanceof TextBufferNode) {
-            if (this.bufferChild === child) {
-                this.bufferChild = undefined;
-            }
+        const controller = this.ensureBufferController();
+        if (controller.isTextContentChild(child)) {
+            controller.removeChild(child);
             return;
         }
         super.removeChild(child);
     }
-    tryAttachTextBuffer(child) {
-        if (!(child instanceof TextBufferNode))
-            return false;
-        if (this.bufferChild) {
-            throw new Error("TextView can only have one TextBuffer child");
-        }
-        this.bufferChild = child;
-        child.setTextView(this.container);
-        return true;
+    onChildInserted(child) {
+        this.ensureBufferController().onChildInserted(child);
+    }
+    onChildRemoved(child) {
+        this.ensureBufferController().onChildRemoved(child);
+    }
+    onChildTextChanged(child, oldLength, newLength) {
+        this.ensureBufferController().onChildTextChanged(child, oldLength, newLength);
     }
 }
 registerNodeClass(TextViewNode);

package/dist/nodes/toggle-group.js

@@ -1,48 +1,40 @@
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
-import { isContainerType } from "./internal/utils.js";
-import { SlotNode } from "./slot.js";
-import { ToggleNode } from "./toggle.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
+const OWN_PROPS = ["onActiveChanged"];
 class ToggleGroupNode extends WidgetNode {
     static priority = 1;
+    notifyHandler = null;
     static matches(_type, containerOrClass) {
-        return isContainerType(Adw.ToggleGroup, containerOrClass);
+        return matchesAnyClass([Adw.ToggleGroup], containerOrClass);
     }
-    appendChild(child) {
-        if (child instanceof ToggleNode) {
-            child.setToggleGroup(this.container);
-            child.addToGroup();
-            return;
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        if (hasChanged(oldProps, newProps, "onActiveChanged")) {
+            this.setupNotifyHandler(newProps.onActiveChanged);
         }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.appendChild(child);
-            return;
-        }
-        throw new Error(`Cannot append '${child.typeName}' to 'ToggleGroup': expected x.Toggle or Widget`);
     }
-    insertBefore(child, before) {
-        if (child instanceof ToggleNode) {
-            child.setToggleGroup(this.container);
-            child.addToGroup();
-            return;
+    setupNotifyHandler(callback) {
+        if (this.notifyHandler) {
+            this.signalStore.set(this, this.container, "notify", undefined);
+            this.notifyHandler = null;
         }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.insertBefore(child, before);
-            return;
+        if (callback) {
+            this.notifyHandler = (pspec) => {
+                if (pspec.getName() === "active") {
+                    callback(this.container.getActive(), this.container.getActiveName());
+                }
+            };
+            this.signalStore.set(this, this.container, "notify", this.notifyHandler);
         }
-        throw new Error(`Cannot insert '${child.typeName}' into 'ToggleGroup': expected x.Toggle or Widget`);
     }
-    removeChild(child) {
-        if (child instanceof ToggleNode) {
-            child.removeFromGroup();
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.removeChild(child);
-            return;
+    unmount() {
+        if (this.notifyHandler) {
+            this.signalStore.set(this, this.container, "notify", undefined);
+            this.notifyHandler = null;
         }
-        throw new Error(`Cannot remove '${child.typeName}' from 'ToggleGroup': expected x.Toggle or Widget`);
+        super.unmount();
     }
 }
 registerNodeClass(ToggleGroupNode);

package/dist/nodes/toggle.d.ts

@@ -1,15 +1 @@
-import * as Adw from "@gtkx/ffi/adw";
-import type { ToggleProps } from "../jsx.js";
-import { VirtualNode } from "./virtual.js";
-export declare class ToggleNode extends VirtualNode<ToggleProps> {
-    static priority: number;
-    private toggleGroup?;
-    private toggle?;
-    static matches(type: string): boolean;
-    setToggleGroup(toggleGroup: Adw.ToggleGroup): void;
-    addToGroup(): void;
-    removeFromGroup(): void;
-    updateProps(oldProps: ToggleProps | null, newProps: ToggleProps): void;
-    unmount(): void;
-    private applyProps;
-}
+export {};

package/dist/nodes/toggle.js

@@ -1,70 +1,78 @@
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
 import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { hasChanged } from "./internal/utils.js";
 import { VirtualNode } from "./virtual.js";
-export class ToggleNode extends VirtualNode {
+import { WidgetNode } from "./widget.js";
+class ToggleNode extends VirtualNode {
     static priority = 1;
-    toggleGroup;
-    toggle;
+    toggleGroup = null;
+    toggle = null;
     static matches(type) {
         return type === "Toggle";
     }
-    setToggleGroup(toggleGroup) {
-        this.toggleGroup = toggleGroup;
+    canBeChildOf(parent) {
+        return parent instanceof WidgetNode && parent.container instanceof Adw.ToggleGroup;
     }
-    addToGroup() {
-        if (!this.toggleGroup || this.toggle)
+    attachTo(parent) {
+        if (!(parent instanceof WidgetNode) || !(parent.container instanceof Adw.ToggleGroup)) {
             return;
+        }
+        if (this.toggle)
+            return;
+        this.toggleGroup = parent.container;
         const toggleGroup = this.toggleGroup;
         this.toggle = new Adw.Toggle();
         scheduleAfterCommit(() => {
-            if (this.toggle) {
-                this.applyProps(this.props);
-                toggleGroup.add(this.toggle);
+            const toggle = this.toggle;
+            if (toggle) {
+                this.applyOwnProps(null, this.props);
+                toggleGroup.add(toggle);
             }
-        });
+        }, CommitPriority.NORMAL);
+    }
+    detachFrom(_parent) {
+        this.removeFromGroup();
     }
     removeFromGroup() {
         if (!this.toggleGroup || !this.toggle)
             return;
         const toggleGroup = this.toggleGroup;
         const toggle = this.toggle;
-        this.toggle = undefined;
+        this.toggle = null;
         scheduleAfterCommit(() => {
             toggleGroup.remove(toggle);
         }, CommitPriority.HIGH);
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (oldProps && this.toggle) {
-            this.applyProps(newProps);
-        }
+        this.applyOwnProps(oldProps, newProps);
     }
-    unmount() {
-        this.removeFromGroup();
-        super.unmount();
-    }
-    applyProps(props) {
+    applyOwnProps(oldProps, newProps) {
         if (!this.toggle)
             return;
-        if (props.id !== undefined && props.id !== this.toggle.getName()) {
-            this.toggle.setName(props.id);
+        if (hasChanged(oldProps, newProps, "id") && newProps.id !== undefined) {
+            this.toggle.setName(newProps.id);
         }
-        if (props.label !== undefined && props.label !== this.toggle.getLabel()) {
-            this.toggle.setLabel(props.label);
+        if (hasChanged(oldProps, newProps, "label") && newProps.label !== undefined) {
+            this.toggle.setLabel(newProps.label);
         }
-        if (props.iconName !== undefined && props.iconName !== this.toggle.getIconName()) {
-            this.toggle.setIconName(props.iconName);
+        if (hasChanged(oldProps, newProps, "iconName") && newProps.iconName !== undefined) {
+            this.toggle.setIconName(newProps.iconName);
         }
-        if (props.tooltip !== undefined && props.tooltip !== this.toggle.getTooltip()) {
-            this.toggle.setTooltip(props.tooltip);
+        if (hasChanged(oldProps, newProps, "tooltip") && newProps.tooltip !== undefined) {
+            this.toggle.setTooltip(newProps.tooltip);
         }
-        if (props.enabled !== undefined && props.enabled !== this.toggle.getEnabled()) {
-            this.toggle.setEnabled(props.enabled);
+        if (hasChanged(oldProps, newProps, "enabled") && newProps.enabled !== undefined) {
+            this.toggle.setEnabled(newProps.enabled);
         }
-        if (props.useUnderline !== undefined && props.useUnderline !== this.toggle.getUseUnderline()) {
-            this.toggle.setUseUnderline(props.useUnderline);
+        if (hasChanged(oldProps, newProps, "useUnderline") && newProps.useUnderline !== undefined) {
+            this.toggle.setUseUnderline(newProps.useUnderline);
         }
     }
+    unmount() {
+        this.removeFromGroup();
+        super.unmount();
+    }
 }
 registerNodeClass(ToggleNode);