BookStackApp/BookStack · error · Error

Could not find expected color bar in the icon for this ${thi

Error message

Could not find expected color bar in the icon for this ${this.definition.label} button

What it means

EditorColorButton.getColorBar looks up the SVG color-bar element inside the button's icon via the selector 'svg .editor-icon-color-bar'. If the button's rendered DOM does not contain that element (missing class on the inner SVG rect/path), the method throws. It is called by updateState on every selection change, so an icon template missing the class breaks the whole toolbar update.

Source

Thrown at resources/js/wysiwyg/ui/framework/blocks/color-button.ts:19

import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
import {EditorUiStateUpdate} from "../core";
import {$isRangeSelection} from "lexical";
import {$getSelectionStyleValueForProperty} from "@lexical/selection";

export class EditorColorButton extends EditorButton {
    protected style: string;

    constructor(definition: EditorBasicButtonDefinition, style: string) {
        super(definition);

        this.style = style;
    }

    getColorBar(): HTMLElement {
        const colorBar = this.getDOMElement().querySelector('svg .editor-icon-color-bar');

        if (!colorBar) {
            throw new Error(`Could not find expected color bar in the icon for this ${this.definition.label} button`);
        }

        return (colorBar as HTMLElement);
    }

    updateState(state: EditorUiStateUpdate): void {
        super.updateState(state);

        if ($isRangeSelection(state.selection)) {
            const value = $getSelectionStyleValueForProperty(state.selection, this.style);
            const colorBar = this.getColorBar();
            colorBar.setAttribute('fill', value);
        }
    }

}

View on GitHub (pinned to 18f8469a1c)

Solutions

1. Ensure the button's icon SVG includes an element with class 'editor-icon-color-bar' (e.g. <rect class="editor-icon-color-bar" .../>).
2. Only call getColorBar after the button is mounted (getDOMElement() returns rendered content); guard updateState until DOM is ready.
3. If icons are customized, copy the stock color-well icon markup and keep the editor-icon-color-bar class intact.
4. Defensively check the selector result and no-op instead of throwing when the icon intentionally has no color bar.
5. Check changelogs after upgrading the editor UI framework for icon markup changes.

Example fix

// before
getColorBar(): HTMLElement {
    const colorBar = this.getDOMElement().querySelector('svg .editor-icon-color-bar');
    if (!colorBar) {
        throw new Error(`Could not find expected color bar in the icon for this ${this.definition.label} button`);
    }
    return (colorBar as HTMLElement);
}
// after
getColorBar(): HTMLElement | null {
    return this.getDOMElement().querySelector<HTMLElement>('svg .editor-icon-color-bar');
}
// and in updateState:
const colorBar = this.getColorBar();
if (colorBar) colorBar.setAttribute('fill', value);

function hasColorBar(button) {
  return button.getDOMElement()?.querySelector('svg .editor-icon-color-bar') != null;
}

function isColorBar(el: Element | null | undefined): el is HTMLElement {
  return el instanceof HTMLElement;
}

try {
  const colorBar = this.getColorBar();
  colorBar.setAttribute('fill', value);
} catch (e) {
  if (String(e.message).startsWith('Could not find expected color bar')) {
    // icon template lacks the color bar; skip fill sync
  } else throw e;
}

When it happens

Trigger: The button definition's icon HTML lacks an element with class 'editor-icon-color-bar' (e.g. custom icon SVG replaced without the color-bar element), getColorBar is called before the button's DOMElement is mounted/rendered, or the icon markup was changed in a template update so the querySelector returns null.

Common situations: Customizing toolbar icons in a CMS/template and dropping the editor-icon-color-bar class; a theme or icon pack swap; calling getColorBar (or updateState) before the button is attached to the DOM; version upgrade renaming the icon markup while custom overrides still use old markup.

Related errors

• ${method} is not supported in headless mode
• To use $generateHtmlFromNodes in headless mode please initia
• Table Element Not Found
• Expected to find TableElement in DOM

AI-assisted analysis of BookStackApp/BookStack@18f8469a1c (2026-09-02). Data as JSON: /api/errors/93dfad800202900f. Report an issue: GitHub.