fix(editor): editor behavior and styles (#14498)

fix #14269 
fix #13920
fix #13977
fix #13953
fix #13895
fix #13905
fix #14136
fix #14357
fix #14491

#### PR Dependency Tree


* **PR #14498** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
  * Callout and toolbar defaults now reliably show grey backgrounds
  * Keyboard shortcuts behave better across layouts and non-ASCII input
  * Deleted workspaces no longer appear in local listings

* **New Features**
  * Cell editing now respects pre-entry validation hooks
* Scrollbars use themeable variables and include Chromium compatibility
fixes

* **Style**
  * Minor UI color adjustment for hidden properties

* **Tests**
  * Added unit tests for table column handling and keymap behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/callout/src/callout-block.ts

@@ -216,9 +216,13 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
   override renderBlock() {
     const icon = this.model.props.icon$.value;
     const backgroundColorName = this.model.props.backgroundColorName$.value;
+    const normalizedBackgroundName =
+      backgroundColorName === 'default' || backgroundColorName === ''
+        ? 'grey'
+        : backgroundColorName;
     const backgroundColor = (
       cssVarV2.block.callout.background as Record<string, string>
-    )[backgroundColorName ?? ''];
+    )[normalizedBackgroundName ?? 'grey'];
 
     const iconContent = getIcon(icon);
 

blocksuite/affine/blocks/callout/src/configs/toolbar.ts

@@ -68,14 +68,14 @@ const backgroundColorAction = {
           ${repeat(colors, color => {
             const isDefault = color === 'default';
             const value = isDefault
-              ? null
+              ? cssVarV2.block.callout.background.grey
               : `var(--affine-text-highlight-${color})`;
             const displayName = `${color} Background`;
 
             return html`
               <editor-menu-action
                 data-testid="background-${color}"
-                @click=${() => updateBackground(color)}
+                @click=${() => updateBackground(isDefault ? 'grey' : color)}
               >
                 <affine-text-duotone-icon
                   style=${styleMap({

blocksuite/affine/blocks/code/src/styles.ts

@@ -27,6 +27,16 @@ export const codeBlockStyles = css`
 
   ${scrollbarStyle('.affine-code-block-container rich-text')}
 
+  /* In Chromium 121+, non-auto scrollbar-width/color override ::-webkit-scrollbar styles. */
+  @supports not selector(::-webkit-scrollbar) {
+    .affine-code-block-container rich-text {
+      scrollbar-width: thin;
+      scrollbar-color: ${unsafeCSSVarV2('icon/secondary', '#b1b1b1')}
+        transparent;
+      scrollbar-gutter: stable both-edges;
+    }
+  }
+
   .affine-code-block-container .inline-editor {
     font-family: var(--affine-font-code-family);
     font-variant-ligatures: none;