{"record":{"id":"93dfad800202900f","repo":"BookStackApp/BookStack","slug":"could-not-find-expected-color-bar-in-the-icon-for","errorCode":null,"errorMessage":"Could not find expected color bar in the icon for this ${this.definition.label} button","messagePattern":"Could not find expected color bar in the icon for this (.+?) button","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"resources/js/wysiwyg/ui/framework/blocks/color-button.ts","lineNumber":19,"sourceCode":"import {EditorBasicButtonDefinition, EditorButton} from \"../buttons\";\nimport {EditorUiStateUpdate} from \"../core\";\nimport {$isRangeSelection} from \"lexical\";\nimport {$getSelectionStyleValueForProperty} from \"@lexical/selection\";\n\nexport class EditorColorButton extends EditorButton {\n    protected style: string;\n\n    constructor(definition: EditorBasicButtonDefinition, style: string) {\n        super(definition);\n\n        this.style = style;\n    }\n\n    getColorBar(): HTMLElement {\n        const colorBar = this.getDOMElement().querySelector('svg .editor-icon-color-bar');\n\n        if (!colorBar) {\n            throw new Error(`Could not find expected color bar in the icon for this ${this.definition.label} button`);\n        }\n\n        return (colorBar as HTMLElement);\n    }\n\n    updateState(state: EditorUiStateUpdate): void {\n        super.updateState(state);\n\n        if ($isRangeSelection(state.selection)) {\n            const value = $getSelectionStyleValueForProperty(state.selection, this.style);\n            const colorBar = this.getColorBar();\n            colorBar.setAttribute('fill', value);\n        }\n    }\n\n}","sourceCodeStart":1,"sourceCodeEnd":35,"githubUrl":"https://github.com/BookStackApp/BookStack/blob/18f8469a1c72f8cc8497e9372635e6dea5028071/resources/js/wysiwyg/ui/framework/blocks/color-button.ts#L1-L35","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Ensure the button's icon SVG includes an element with class 'editor-icon-color-bar' (e.g. <rect class=\"editor-icon-color-bar\" .../>).","Only call getColorBar after the button is mounted (getDOMElement() returns rendered content); guard updateState until DOM is ready.","If icons are customized, copy the stock color-well icon markup and keep the editor-icon-color-bar class intact.","Defensively check the selector result and no-op instead of throwing when the icon intentionally has no color bar.","Check changelogs after upgrading the editor UI framework for icon markup changes."],"exampleFix":"// before\ngetColorBar(): HTMLElement {\n    const colorBar = this.getDOMElement().querySelector('svg .editor-icon-color-bar');\n    if (!colorBar) {\n        throw new Error(`Could not find expected color bar in the icon for this ${this.definition.label} button`);\n    }\n    return (colorBar as HTMLElement);\n}\n// after\ngetColorBar(): HTMLElement | null {\n    return this.getDOMElement().querySelector<HTMLElement>('svg .editor-icon-color-bar');\n}\n// and in updateState:\nconst colorBar = this.getColorBar();\nif (colorBar) colorBar.setAttribute('fill', value);","handlingStrategy":"type-guard","validationCode":"function hasColorBar(button) {\n  return button.getDOMElement()?.querySelector('svg .editor-icon-color-bar') != null;\n}","typeGuard":"function isColorBar(el: Element | null | undefined): el is HTMLElement {\n  return el instanceof HTMLElement;\n}","tryCatchPattern":"try {\n  const colorBar = this.getColorBar();\n  colorBar.setAttribute('fill', value);\n} catch (e) {\n  if (String(e.message).startsWith('Could not find expected color bar')) {\n    // icon template lacks the color bar; skip fill sync\n  } else throw e;\n}","preventionTips":["Keep the editor-icon-color-bar class on an element inside every custom color-button icon SVG.","Only call getColorBar/updateState after the button is mounted in the DOM.","Make getColorBar return null (or no-op) instead of throwing when icons are intentionally bare.","Re-check icon markup when upgrading the editor UI framework or swapping icon packs."],"tags":["dom","ui","icon","selector","editor-toolbar"],"backgroundTag":"dom-element-not-found","analyzedSha":"18f8469a1c72f8cc8497e9372635e6dea5028071","analyzedAt":"2026-09-02T19:49:33.068Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}