fix: adding and removing css classes that contained spaces

core/block_svg.ts

@@ -778,10 +778,10 @@ export class BlockSvg extends Block implements IASTNodeLocationSvg,
       (group as AnyDuringMigration).translate_ = '';
       (group as AnyDuringMigration).skew_ = '';
       common.draggingConnections.push(...this.getConnections_(true));
-      this.svgGroup_.classList.add('blocklyDragging');
+      dom.addClass(this.svgGroup_, 'blocklyDragging');
     } else {
       common.draggingConnections.length = 0;
-      this.svgGroup_.classList.remove('blocklyDragging');
+      dom.removeClass(this.svgGroup_, 'blocklyDragging');
     }
     // Recurse through all blocks attached under this one.
     for (let i = 0; i < this.childBlocks_.length; i++) {

core/contextmenu.ts

@@ -17,6 +17,7 @@ import type {BlockSvg} from './block_svg.js';
 import * as browserEvents from './browser_events.js';
 import * as clipboard from './clipboard.js';
 import {config} from './config.js';
+import * as dom from './utils/dom.js';
 import type {ContextMenuOption, LegacyContextMenuOption} from './contextmenu_registry.js';
 import * as eventUtils from './events/utils.js';
 import {Menu} from './menu.js';
@@ -179,7 +180,7 @@ function createWidget_(menu: Menu) {
     throw Error('Attempting to create a context menu when widget div is null');
   }
   const menuDom = menu.render(div);
-  menuDom.classList.add('blocklyContextMenu');
+  dom.addClass(menuDom, 'blocklyContextMenu');
   // Prevent system context menu when right-clicking a Blockly context menu.
   browserEvents.conditionalBind(
       (menuDom as EventTarget), 'contextmenu', null, haltPropagation);

core/dropdowndiv.ts

@@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.dropDownDiv');
 
 import type {BlockSvg} from './block_svg.js';
 import * as common from './common.js';
+import * as dom from './utils/dom.js';
 import type {Field} from './field.js';
 import * as math from './utils/math.js';
 import {Rect} from './utils/rect.js';
@@ -138,10 +139,10 @@ export function createDom() {
   // Handle focusin/out events to add a visual indicator when
   // a child is focused or blurred.
   div.addEventListener('focusin', function() {
-    div.classList.add('blocklyFocused');
+    dom.addClass(div, 'blocklyFocused');
   });
   div.addEventListener('focusout', function() {
-    div.classList.remove('blocklyFocused');
+    dom.removeClass(div, 'blocklyFocused');
   });
 }
 
@@ -311,10 +312,10 @@ export function show(
   renderedClassName = mainWorkspace.getRenderer().getClassName();
   themeClassName = mainWorkspace.getTheme().getClassName();
   if (renderedClassName) {
-    div.classList.add(renderedClassName);
+    dom.addClass(div, renderedClassName);
   }
   if (themeClassName) {
-    div.classList.add(themeClassName);
+    dom.addClass(div, themeClassName);
   }
 
   // When we change `translate` multiple times in close succession,
@@ -595,11 +596,11 @@ export function hideWithoutAnimation() {
   owner = null;
 
   if (renderedClassName) {
-    div.classList.remove(renderedClassName);
+    dom.removeClass(div, renderedClassName);
     renderedClassName = '';
   }
   if (themeClassName) {
-    div.classList.remove(themeClassName);
+    dom.removeClass(div, themeClassName);
     themeClassName = '';
   }
   (common.getMainWorkspace() as WorkspaceSvg).markFocused();

core/field.ts

@@ -492,12 +492,12 @@ export abstract class Field implements IASTNodeLocationSvg,
       return;
     }
     if (this.enabled_ && this.sourceBlock_.isEditable()) {
-      group.classList.add('blocklyEditableText');
-      group.classList.remove('blocklyNonEditableText');
+      dom.addClass(group, 'blocklyEditableText');
+      dom.removeClass(group, 'blocklyNonEditableText');
       group.style.cursor = this.CURSOR;
     } else {
-      group.classList.add('blocklyNonEditableText');
-      group.classList.remove('blocklyEditableText');
+      dom.addClass(group, 'blocklyNonEditableText');
+      dom.removeClass(group, 'blocklyEditableText');
       group.style.cursor = '';
     }
   }

core/field_checkbox.ts

@@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.FieldCheckbox');
 // Unused import preserved for side-effects. Remove if unneeded.
 import './events/events_block_change.js';
 
+import * as dom from './utils/dom.js';
 import {FieldConfig, Field} from './field.js';
 import * as fieldRegistry from './field_registry.js';
 import type {Sentinel} from './utils/sentinel.js';
@@ -111,7 +112,7 @@ export class FieldCheckbox extends Field {
   override initView() {
     super.initView();
 
-    this.textElement_.classList.add('blocklyCheckbox');
+    dom.addClass(this.textElement_, 'blocklyCheckbox');
     this.textElement_.style.display = this.value_ ? 'block' : 'none';
   }
 

core/field_colour.ts

@@ -18,6 +18,7 @@ import './events/events_block_change.js';
 import {BlockSvg} from './block_svg.js';
 import * as browserEvents from './browser_events.js';
 import * as Css from './css.js';
+import * as dom from './utils/dom.js';
 import * as dropDownDiv from './dropdowndiv.js';
 import {FieldConfig, Field} from './field.js';
 import * as fieldRegistry from './field_registry.js';
@@ -438,7 +439,7 @@ export class FieldColour extends Field {
     (this.picker_ as AnyDuringMigration)!.blur();
     const highlighted = this.getHighlighted_();
     if (highlighted) {
-      highlighted.classList.remove('blocklyColourHighlighted');
+      dom.removeClass(highlighted, 'blocklyColourHighlighted');
     }
   }
 
@@ -473,10 +474,10 @@ export class FieldColour extends Field {
     // Unhighlight the current item.
     const highlighted = this.getHighlighted_();
     if (highlighted) {
-      highlighted.classList.remove('blocklyColourHighlighted');
+      dom.removeClass(highlighted, 'blocklyColourHighlighted');
     }
     // Highlight new item.
-    cell.classList.add('blocklyColourHighlighted');
+    dom.addClass(cell, 'blocklyColourHighlighted');
     // Set new highlighted index.
     this.highlightedIndex_ = index;
 

core/field_dropdown.ts

@@ -205,7 +205,7 @@ export class FieldDropdown extends Field {
     }
 
     if (this.borderRect_) {
-      this.borderRect_.classList.add('blocklyDropdownRect');
+      dom.addClass(this.borderRect_, 'blocklyDropdownRect');
     }
   }
 
@@ -276,7 +276,7 @@ export class FieldDropdown extends Field {
     dropDownDiv.clearContent();
     // Element gets created in render.
     const menuElement = this.menu_!.render(dropDownDiv.getContentDiv());
-    menuElement.classList.add('blocklyDropdownMenu');
+    dom.addClass(menuElement, 'blocklyDropdownMenu');
 
     if (this.getConstants()!.FIELD_DROPDOWN_COLOURED_DIV) {
       const primaryColour = this.sourceBlock_.isShadow() ?
@@ -608,7 +608,7 @@ export class FieldDropdown extends Field {
   private renderSelectedText_() {
     // Retrieves the selected option to display through getText_.
     this.textContent_.nodeValue = this.getDisplayText_();
-    this.textElement_.classList.add('blocklyDropdownText');
+    dom.addClass(this.textElement_, 'blocklyDropdownText');
     this.textElement_.setAttribute('text-anchor', 'start');
 
     // Height and width include the border rect.

core/field_label.ts

@@ -13,6 +13,7 @@
 import * as goog from '../closure/goog/goog.js';
 goog.declareModuleId('Blockly.FieldLabel');
 
+import * as dom from './utils/dom.js';
 import {FieldConfig, Field} from './field.js';
 import * as fieldRegistry from './field_registry.js';
 import * as parsing from './utils/parsing.js';
@@ -75,7 +76,7 @@ export class FieldLabel extends Field {
   override initView() {
     this.createTextElement_();
     if (this.class_) {
-      this.textElement_.classList.add(this.class_);
+      dom.addClass(this.textElement_, this.class_);
     }
   }
 
@@ -101,10 +102,10 @@ export class FieldLabel extends Field {
   setClass(cssClass: string|null) {
     if (this.textElement_) {
       if (this.class_) {
-        this.textElement_.classList.remove(this.class_);
+        dom.removeClass(this.textElement_, this.class_);
       }
       if (cssClass) {
-        this.textElement_.classList.add(cssClass);
+        dom.addClass(this.textElement_, cssClass);
       }
     }
     this.class_ = cssClass;

core/field_multilineinput.ts

@@ -239,9 +239,9 @@ export class FieldMultilineInput extends FieldTextInput {
     if (this.isBeingEdited_) {
       const htmlInput = this.htmlInput_ as HTMLElement;
       if (this.isOverflowedY_) {
-        htmlInput.classList.add('blocklyHtmlTextAreaInputOverflowedY');
+        dom.addClass(htmlInput, 'blocklyHtmlTextAreaInputOverflowedY');
       } else {
-        htmlInput.classList.remove('blocklyHtmlTextAreaInputOverflowedY');
+        dom.removeClass(htmlInput, 'blocklyHtmlTextAreaInputOverflowedY');
       }
     }
 
@@ -258,10 +258,10 @@ export class FieldMultilineInput extends FieldTextInput {
       }
       const htmlInput = this.htmlInput_ as HTMLElement;
       if (!this.isTextValid_) {
-        htmlInput.classList.add('blocklyInvalidInput');
+        dom.addClass(htmlInput, 'blocklyInvalidInput');
         aria.setState(htmlInput, aria.State.INVALID, true);
       } else {
-        htmlInput.classList.remove('blocklyInvalidInput');
+        dom.removeClass(htmlInput, 'blocklyInvalidInput');
         aria.setState(htmlInput, aria.State.INVALID, false);
       }
     }

core/field_textinput.ts

@@ -18,6 +18,7 @@ import './events/events_block_change.js';
 import type {BlockSvg} from './block_svg.js';
 import * as browserEvents from './browser_events.js';
 import * as dialog from './dialog.js';
+import * as dom from './utils/dom.js';
 import * as dropDownDiv from './dropdowndiv.js';
 import * as eventUtils from './events/utils.js';
 import {FieldConfig, Field} from './field.js';
@@ -244,10 +245,10 @@ export class FieldTextInput extends Field {
       this.resizeEditor_();
       const htmlInput = this.htmlInput_ as HTMLElement;
       if (!this.isTextValid_) {
-        htmlInput.classList.add('blocklyInvalidInput');
+        dom.addClass(htmlInput, 'blocklyInvalidInput');
         aria.setState(htmlInput, aria.State.INVALID, true);
       } else {
-        htmlInput.classList.remove('blocklyInvalidInput');
+        dom.removeClass(htmlInput, 'blocklyInvalidInput');
         aria.setState(htmlInput, aria.State.INVALID, false);
       }
     }
@@ -331,7 +332,7 @@ export class FieldTextInput extends Field {
     eventUtils.setGroup(true);
     const div = WidgetDiv.getDiv();
 
-    this.getClickTarget_().classList.add('editing');
+    dom.addClass(this.getClickTarget_(), 'editing');
 
     const htmlInput = (document.createElement('input'));
     htmlInput.className = 'blocklyHtmlInput';
@@ -400,7 +401,7 @@ export class FieldTextInput extends Field {
     style.boxShadow = '';
     this.htmlInput_ = null;
 
-    this.getClickTarget_().classList.remove('editing');
+    dom.removeClass(this.getClickTarget_(), 'editing');
   }
 
   /**

core/icon.ts

@@ -69,7 +69,7 @@ export abstract class Icon {
     this.iconGroup_ =
         dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'});
     if (this.getBlock().isInFlyout) {
-      this.iconGroup_.classList.add('blocklyIconGroupReadonly');
+      dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
     }
     this.drawIcon_(this.iconGroup_);
 

core/inject.ts

@@ -172,11 +172,11 @@ function createMainWorkspace(
   const injectionDiv = mainWorkspace.getInjectionDiv();
   const rendererClassName = mainWorkspace.getRenderer().getClassName();
   if (rendererClassName) {
-    injectionDiv.classList.add(rendererClassName);
+    dom.addClass(injectionDiv, rendererClassName);
   }
   const themeClassName = mainWorkspace.getTheme().getClassName();
   if (themeClassName) {
-    injectionDiv.classList.add(themeClassName);
+    dom.addClass(injectionDiv, themeClassName);
   }
 
   if (!wsOptions.hasCategories && wsOptions.languageTree) {

core/menu.ts

@@ -16,6 +16,7 @@ import * as browserEvents from './browser_events.js';
 import type {MenuItem} from './menuitem.js';
 import * as aria from './utils/aria.js';
 import {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
 import {KeyCodes} from './utils/keycodes.js';
 import type {Size} from './utils/size.js';
 import * as style from './utils/style.js';
@@ -137,7 +138,7 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.focus({preventScroll: true});
-      el.classList.add('blocklyFocused');
+      dom.addClass(el, 'blocklyFocused');
     }
   }
 
@@ -146,7 +147,7 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.blur();
-      el.classList.remove('blocklyFocused');
+      dom.removeClass(el, 'blocklyFocused');
     }
   }
 

core/menuitem.ts

@@ -13,6 +13,7 @@ import * as goog from '../closure/goog/goog.js';
 goog.declareModuleId('Blockly.MenuItem');
 
 import * as aria from './utils/aria.js';
+import * as dom from './utils/dom.js';
 import * as idGenerator from './utils/idgenerator.js';
 
 
@@ -195,11 +196,11 @@ export class MenuItem {
       const name = 'blocklyMenuItemHighlight';
       const nameDep = 'goog-menuitem-highlight';
       if (highlight) {
-        el.classList.add(name);
-        el.classList.add(nameDep);
+        dom.addClass(el, name);
+        dom.addClass(el, nameDep);
       } else {
-        el.classList.remove(name);
-        el.classList.remove(nameDep);
+        dom.removeClass(el, name);
+        dom.removeClass(el, nameDep);
       }
     }
   }

core/mutator.ts

@@ -238,13 +238,13 @@ export class Mutator extends Icon {
     if (!this.getBlock().isInFlyout) {
       if (this.getBlock().isEditable()) {
         if (this.iconGroup_) {
-          this.iconGroup_.classList.remove('blocklyIconGroupReadonly');
+          dom.removeClass(this.iconGroup_, 'blocklyIconGroupReadonly');
         }
       } else {
         // Close any mutator bubble.  Icon is not clickable.
         this.setVisible(false);
         if (this.iconGroup_) {
-          this.iconGroup_.classList.add('blocklyIconGroupReadonly');
+          dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
         }
       }
     }

core/renderers/common/path_object.ts

@@ -170,9 +170,9 @@ export class PathObject implements IPathObject {
       return;
     }
     if (add) {
-      this.svgRoot.classList.add(className);
+      dom.addClass(this.svgRoot, className);
     } else {
-      this.svgRoot.classList.remove(className);
+      dom.removeClass(this.svgRoot, className);
     }
   }
 

core/theme_manager.ts

@@ -15,6 +15,7 @@ goog.declareModuleId('Blockly.ThemeManager');
 
 import type {Theme} from './theme.js';
 import * as arrayUtils from './utils/array.js';
+import * as dom from './utils/dom.js';
 import type {Workspace} from './workspace.js';
 import type {WorkspaceSvg} from './workspace_svg.js';
 
@@ -62,12 +63,12 @@ export class ThemeManager {
       if (prevTheme) {
         const oldClassName = prevTheme.getClassName();
         if (oldClassName) {
-          injectionDiv.classList.remove(oldClassName);
+          dom.removeClass(injectionDiv, oldClassName);
         }
       }
       const newClassName = this.theme.getClassName();
       if (newClassName) {
-        injectionDiv.classList.add(newClassName);
+        dom.addClass(injectionDiv, newClassName);
       }
     }