From 9cc75a03f73e915c8961d0eea9e7df18b1d82194 Mon Sep 17 00:00:00 2001
From: Arno Gourdol <arno@arno.org>
Date: Wed, 9 Oct 2024 16:19:26 +0200
Subject: [PATCH] fix: fixed #2533

---
 CHANGELOG.md                              | 296 +++++++++++-----------
 css/virtual-keyboard.less                 | 245 ++++++++++--------
 src/api.md                                |  26 +-
 src/atoms/macro.ts                        |  11 +
 src/core/atom-class.ts                    |   7 +-
 src/editor-mathfield/keyboard-input.ts    |   3 +
 src/editor-mathfield/mathfield-private.ts |  18 +-
 src/editor-mathfield/render.ts            |   1 +
 src/editor-model/styling.ts               |   9 +-
 src/virtual-keyboard/variants.ts          |  10 +
 test/smoke/index.html                     |   4 +-
 11 files changed, 355 insertions(+), 275 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f62923622..2cbd87935 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,27 +1,33 @@
 ## [Unreleased]
 
-
 ### Issues Resolved
 
 - In some cases, the `placeholder` attribute would not be displayed when the
   mathfield was empty.
 - When using static math, the font-familly for text content was not correctly
   inherited from the parent element.
+- **#2533** When using the virtual keyboard to insert a character with a
+  blackboard style followed by a non-alphabetic symbol without a blackboard
+  style, the second symbol would incorrectly be serialized with a blackboard
+  style.
+- In some cases, the inherent style of a macro could get overriden. For example
+  typing the "RR" inline shortcut resulted in an unstyled R instead of the
+  expected blackboard R.
 
 ## 0.101.0 _2024-07-17_
 
 ### Breaking Changes
 
-- The properties `mathVirtualKeyboard.actionKeycap`, 
- `mathVirtualKeyboard.shiftKeycap`, `mathVirtualKeyboard.backspaceKeycap`,
- and `mathVirtualKeyboard.tabKeycap` have been removed. Use the more general
-  `mathVirtualKeyboard.setKeycap()` method to customize these keycaps, that
-  is `mathVirtualKeyboard.setKeycap('[action]', {...})` etc...
+- The properties `mathVirtualKeyboard.actionKeycap`,
+  `mathVirtualKeyboard.shiftKeycap`, `mathVirtualKeyboard.backspaceKeycap`, and
+  `mathVirtualKeyboard.tabKeycap` have been removed. Use the more general
+  `mathVirtualKeyboard.setKeycap()` method to customize these keycaps, that is
+  `mathVirtualKeyboard.setKeycap('[action]', {...})` etc...
 
 ### Improvements and New Features
 
-- Macros can now be specified with `renderMathInElement()` and `renderMathInDocument()`
-  using the `macros` option. For example:
+- Macros can now be specified with `renderMathInElement()` and
+  `renderMathInDocument()` using the `macros` option. For example:
 
   ```js
   renderMathInElement(element, {macros: {RR: '\\mathbb{R}'}})
@@ -29,27 +35,28 @@
 
 - Performance improvements for pages with many mathfields. The initial rendering
   can be up to 2x as fast.
-- Some keycaps in the virtual keyboard can be customized without having
-  to define an entire virtual keyboard layout.
+- Some keycaps in the virtual keyboard can be customized without having to
+  define an entire virtual keyboard layout.
 
-  The `mathVirtualKeyboard.getKeycap()` give access to the definition of 
-  special keycaps and `mathVirtualKeyboard.setKeycap()` can be used to 
-  change that definition.
+  The `mathVirtualKeyboard.getKeycap()` give access to the definition of special
+  keycaps and `mathVirtualKeyboard.setKeycap()` can be used to change that
+  definition.
 
   The keycaps are one of these special shortcuts:
-   * `[left]`, `[right]`, `[up]`, `[down]`, `[return]`, `[action]`,
-   * `[space]`, `[tab]`, `[backspace]`, `[shift]`,
-   * `[undo]`, `[redo]`, `[foreground-color]`, `[background-color]`,
-   * `[hide-keyboard]`,
-   * `[.]`, `[,]`,
-   * `[0]`, `[1]`, `[2]`, `[3]`, `[4]`,
-   * `[5]`, `[6]`, `[7]`, `[8]`, `[9]`,
-   * `[+]`, `[-]`, `[*]`, `[/]`, `[^]`, `[_]`, `[=]`, `[.]`,
-   * `[(]`, `[)]`
-
-  For example, to change the LaTeX inserted when the multiplication key is 
+
+  - `[left]`, `[right]`, `[up]`, `[down]`, `[return]`, `[action]`,
+  - `[space]`, `[tab]`, `[backspace]`, `[shift]`,
+  - `[undo]`, `[redo]`, `[foreground-color]`, `[background-color]`,
+  - `[hide-keyboard]`,
+  - `[.]`, `[,]`,
+  - `[0]`, `[1]`, `[2]`, `[3]`, `[4]`,
+  - `[5]`, `[6]`, `[7]`, `[8]`, `[9]`,
+  - `[+]`, `[-]`, `[*]`, `[/]`, `[^]`, `[_]`, `[=]`, `[.]`,
+  - `[(]`, `[)]`
+
+  For example, to change the LaTeX inserted when the multiplication key is
   pressed use:
-  
+
   ```js
   mathVirtualKeyboard.setKeycap('[*]', {latex: '\\times'});
   ```
@@ -59,34 +66,33 @@
 - **#2455** Serialization to ASCII Math of brackets and braces is now correct.
 - When using Chrome in some locale (such as `es-419`), the context menu would
   not be displayed.
-- When the `MathfieldElement.isFunction` handler is updated, re-render all
-  the mathfields on the page to take it into account.
+- When the `MathfieldElement.isFunction` handler is updated, re-render all the
+  mathfields on the page to take it into account.
 - **#2415** A content change event is now dispatched when the value of the
-  mathfield is changed as a result of switch from LaTeX mode to math mode
-  by changing the selection.
+  mathfield is changed as a result of switch from LaTeX mode to math mode by
+  changing the selection.
 - Dispatch a `contextmenu` event any time the context menu is about to be
   displayed. This allows the event to be canceled.
 - **#2413** When setting the `alphabeticLayout`, the current keyboard would not
   be updated in some cases.
-- **#2412** The serialization of some expressions to LaTeX could result in some spaces
-  being omitted. For example, `\lnot p` would serialize as `\lnotp`.
-- **#2403** The virtual keyboard Keycap Variants panel was positioned incorrectly
-  when the page used a RTL layout direction.
+- **#2412** The serialization of some expressions to LaTeX could result in some
+  spaces being omitted. For example, `\lnot p` would serialize as `\lnotp`.
+- **#2403** The virtual keyboard Keycap Variants panel was positioned
+  incorrectly when the page used a RTL layout direction.
 - In the virtual keyboard, the background of the variant panel was sometimes
   displayed transparently.
 - **#2402** Characters inserted after a `\mathbb{}` command were not styled
   correctly.
-- The `math-virtual-keyboard-command` event was not dispatched when a 
-  mathfield was focused and a keycap was pressed.
-- There are now CSS selectors to customize the size of glyphs in the
-  virtual keyboard (shift, enter, etc...): 
-  - `--keycap-glyph-size` 
-  - `--keycap-glyph-size-lg` 
-  - `--keycap-glyph-size-xl` 
-  
-- **#2397** When a `beforeinput` event was canceled, the text would still 
-  be inserted when using the physical keyboard.
-- **#2398** When a placeholder was the only element in a group, i.e. 
+- The `math-virtual-keyboard-command` event was not dispatched when a mathfield
+  was focused and a keycap was pressed.
+- There are now CSS selectors to customize the size of glyphs in the virtual
+  keyboard (shift, enter, etc...):
+  - `--keycap-glyph-size`
+  - `--keycap-glyph-size-lg`
+  - `--keycap-glyph-size-xl`
+- **#2397** When a `beforeinput` event was canceled, the text would still be
+  inserted when using the physical keyboard.
+- **#2398** When a placeholder was the only element in a group, i.e.
   `{\placeholder{}}`, the placeholder was not automatically selected.
 
 ## 0.100.0 _2024-06-12_
@@ -95,17 +101,18 @@
 
 - **#2396** Pressing the arrow keys in the virtual keyboard would not move the
   selection in the mathfield and display a runtime error in the console.
-- **#2395** Added a `dispatchEvent` command which can be attached to a 
-  custom keycap. 
-- **#2392** Pressing the backspace key after typing several digits would 
-    delete all the digits.
+- **#2392** Pressing the backspace key after typing several digits would delete
+  all the digits.
+
+- **#2395** Added a `dispatchEvent` command which can be attached to a custom
+  keycap.
 
   Its first argument is the name of the dispatched event, and the second
-  argument is an object with the `detail` property, which is the data
-  associated with the event.
+  argument is an object with the `detail` property, which is the data associated
+  with the event.
 
   ```ts
-    { 
+    {
       label: "✨",
       command: "dispatchEvent('customEvent', {detail: 'some data'})"
     }
@@ -119,21 +126,21 @@
   });
   ```
 
-
 ## 0.99.0 _2024-06-10_
 
 ### Breaking Changes
 
 - The `mf.offsetFromPoint()` method has been renamed `mf.getOffsetFromPoint()`
 
-- The `mf.setCaretPoint()` method has been replaced with `mf.position = mf.getOffsetFromPoint()`
+- The `mf.setCaretPoint()` method has been replaced with
+  `mf.position = mf.getOffsetFromPoint()`
+
+- The `mf.scriptDepth()` and `mf.hitboxFromOffset()` methodds have been replaced
+  with `mf.getElementInfo()`.
+
+  The `getElementInfo()` method provides more information including any id that
+  may have been applied with `\htmlId{}`.
 
-- The `mf.scriptDepth()` and `mf.hitboxFromOffset()` methodds have been 
-  replaced with `mf.getElementInfo()`.
-  
-  The `getElementInfo()` method provides more information including any id 
-  that may have been applied with `\htmlId{}`. 
-  
   It is useful from within a `click` handler to get more information about the
   element that was clicked, e.g.
 
@@ -151,8 +158,8 @@
     /** The bounding box of the element */
     bounds?: DOMRect;
 
-    /** id associated with this element or its ancestor, set with `\htmlId` or 
-       `\cssId`   
+    /** id associated with this element or its ancestor, set with `\htmlId` or
+       `\cssId`
     */
     id?: string;
 
@@ -172,94 +179,96 @@
   };
   ```
 
-
 ### Bold
 
-The way bold is handled in LaTeX is particularly confusing, reflecting 
+The way bold is handled in LaTeX is particularly confusing, reflecting
 limitations of the text rendering technology of the time.
 
-Various attempts have been made over the years to improve the rendering of
-bold, but this has resulted in inconsistent behavior. Furthermore, various
+Various attempts have been made over the years to improve the rendering of bold,
+but this has resulted in inconsistent behavior. Furthermore, various
 implementations of LaTeX and LaTeX-like systems have implemented bold in
 different ways.
 
-This release introduces a more consistent and intuitive handling of bold, 
-although it may result in different rendering of some formulas compared to 
-some implementations of LaTeX.
+This release introduces a more consistent and intuitive handling of bold,
+although it may result in different rendering of some formulas compared to some
+implementations of LaTeX.
 
-The original bold command in LaTeX is `\mathbf`. This command renders its 
-argument using a bold variant of the current font. However, only letters and 
-numbers can be rendered by this command. It does not affect symbols, operators, 
-or greek characters. 
+The original bold command in LaTeX is `\mathbf`. This command renders its
+argument using a bold variant of the current font. However, only letters and
+numbers can be rendered by this command. It does not affect symbols, operators,
+or greek characters.
 
 For example, `\mathbf{a+b}` will render as `𝐚+𝐛`, with the `a` and `b` in bold,
-but the `+` in normal weight. Characters rendered by `\mathbf` are rendered 
+but the `+` in normal weight. Characters rendered by `\mathbf` are rendered
 upright, even if they would have been rendered as italic otherwise.
 
 The `\boldsymbol` command is an alternative to `\mathbf` that affects more
-characters, including Greek letters and symbols. It does not affect
-the style of the characters, so they remain italic if they were italic before.
-However, the inter-character spacing and italic correction may not be rendered correctly.
+characters, including Greek letters and symbols. It does not affect the style of
+the characters, so they remain italic if they were italic before. However, the
+inter-character spacing and italic correction may not be rendered correctly.
 
 The `\bm` command from the `bm` package is a more modern alternative that
-affects even more characters. It also preserves the style of the characters, 
-so they remain italic if they were italic before. The inter-character spacing 
-and italic correction are handled correctly.
+affects even more characters. It also preserves the style of the characters, so
+they remain italic if they were italic before. The inter-character spacing and
+italic correction are handled correctly.
 
-The `\bm` command is recommended over `\boldsymbol` and `\mathbf`. However, 
-it is not part of the standard LaTeX distribution, so it may not always be available.
+The `\bm` command is recommended over `\boldsymbol` and `\mathbf`. However, it
+is not part of the standard LaTeX distribution, so it may not always be
+available.
 
-When serializing to LaTeX, MathLive will now use `\mathbf` when possible, and 
-fall back to `\bm` when not. This should result in more consistent rendering 
-of bold text.
+When serializing to LaTeX, MathLive will now use `\mathbf` when possible, and
+fall back to `\bm` when not. This should result in more consistent rendering of
+bold text.
 
 When parsing, MathLive will interpret both `\mathbf`, `\boldsymbol` and `\bm` as
 bold.
 
 The bold style is now consistently inherited by sub-expressions.
 
-Similarly, when applying a bold style using `mf.applyStyle({weight: "bold"})`, 
-the bold attribute is applied to the entire selection, not just the letters 
-and numbers.
-
+Similarly, when applying a bold style using `mf.applyStyle({weight: "bold"})`,
+the bold attribute is applied to the entire selection, not just the letters and
+numbers.
 
 ### Mode Switching
 
-- **#2375** The `switch-mode` command has two optionals arguments, a prefix 
-  and suffix. The prefix is inserted before the mode switch, and the suffix 
-  after. The command was behaving incorrectly. It now behaves as expected.
-- It is now possible to roundtrip between math and text mode. For example, 
-  selecting a fraction `\frac{a}{b}` and pressing `alt+shift+T` will convert the 
-  selection to `(a)/(b)`. Pressing `alt+shift+T` again will convert it back to 
+- **#2375** The `switch-mode` command has two optionals arguments, a prefix and
+  suffix. The prefix is inserted before the mode switch, and the suffix after.
+  The command was behaving incorrectly. It now behaves as expected.
+- It is now possible to roundtrip between math and text mode. For example,
+  selecting a fraction `\frac{a}{b}` and pressing `alt+shift+T` will convert the
+  selection to `(a)/(b)`. Pressing `alt+shift+T` again will convert it back to
   `\frac{a}{b}`.
-- When in LaTeX mode, changing the selection would sometimes unexpectedly exit 
+- When in LaTeX mode, changing the selection would sometimes unexpectedly exit
   LaTeX mode, for example after the Select All command. This has been fixed.
 
 ### New Features
 
-- **`\href`** 
-  
-  The `\href{url}{content}` command, a MathJax extension that allows a link 
-  to be associated with some content, is now supported.
-  
-  Clicking on the content will open the link. By default, the link is opened 
-  in a new window, and only links with a HTTP, HTTPS or FILE protocol are 
-  allowed. This can be controlled by the new `MathfieldElement.openUrl` 
-  property. This property is a function with a single argument, the URL to 
-  be opened, that is called when the content of the `\href` command is clicked on.
-- **Tooltip appearance** 
-  
-  Added CSS variables to control the appearance of the toolip displayed with 
-  `\mathtip` and `\texttip`: 
-    - `--tooltip-border`
-    - `--tooltip-color`
-    - `--tooltip-background-color`
-    - `--tooltip-box-shadow`
-    - `--tooltip-border-radius`.
+- **`\href`**
+
+  The `\href{url}{content}` command, a MathJax extension that allows a link to
+  be associated with some content, is now supported.
+
+  Clicking on the content will open the link. By default, the link is opened in
+  a new window, and only links with a HTTP, HTTPS or FILE protocol are allowed.
+  This can be controlled by the new `MathfieldElement.openUrl` property. This
+  property is a function with a single argument, the URL to be opened, that is
+  called when the content of the `\href` command is clicked on.
+
+- **Tooltip appearance**
+
+  Added CSS variables to control the appearance of the toolip displayed with
+  `\mathtip` and `\texttip`:
+
+  - `--tooltip-border`
+  - `--tooltip-color`
+  - `--tooltip-background-color`
+  - `--tooltip-box-shadow`
+  - `--tooltip-border-radius`.
+
 - The `maxMatrixCols` property has been added that specifies the maximum number
   of columns that a matrix may have. The default value is 10, which follows the
-  default value from the amsmath package. The property applies to all of
-  the matrix environments (`matrix`, `pmatrix`, `bmatrix`, etc.). This property is
+  default value from the amsmath package. The property applies to all of the
+  matrix environments (`matrix`, `pmatrix`, `bmatrix`, etc.). This property is
   also accessible via the `max-matrix-cols` attribute.
 - The virtual keyboard now supports variants for shifted-keys. This includes
   support for Swedish specific characters such as `å`, `ä`, and `ö` and their
@@ -268,36 +277,35 @@ and numbers.
   `<math-field>` element, for example `<math-field smart-fence="true">`.
 - Added a `target` property (a `MathfieldElement`) to the `onMenuSelect`
   arguments.
-- **#2337** Added an option `MathfieldElement.restoreFocusWhenDocumentFocused` 
-  to control whether a mathfield that was previously focused regains focus 
-  when the tab or window regains focus. This is true by default and matches
-  the previous behavior, and the behavior of the `<textarea>` element.
-- An alternate syntax for selectors with arguments. Selectors are used for 
-  example to associate actions with a keycap, such as `switchKeyboardLayer`.
-  The previous syntax was `command: ["switchKeyboardLayer", "alt-layer"]`, 
-  the new syntax is `command: 'switchKeyboardLayer("alt-layer")'`. This is more
-  concise and easier to read.
-
+- **#2337** Added an option `MathfieldElement.restoreFocusWhenDocumentFocused`
+  to control whether a mathfield that was previously focused regains focus when
+  the tab or window regains focus. This is true by default and matches the
+  previous behavior, and the behavior of the `<textarea>` element.
+- An alternate syntax for selectors with arguments. Selectors are used for
+  example to associate actions with a keycap, such as `switchKeyboardLayer`. The
+  previous syntax was `command: ["switchKeyboardLayer", "alt-layer"]`, the new
+  syntax is `command: 'switchKeyboardLayer("alt-layer")'`. This is more concise
+  and easier to read.
 
 ### Issues Resolved
 
 - **#2387** When using a macro, the spacing around the macro was incorrect in
   some cases.
-- **#2370** The order of the `keydown` and `input` event is now consistent
-  with the `<textarea>` element.
-- **#2369** After typing a shortcut, using the backspace key could result
-  in unexpected behavior. Now, pressing the backspace key after a shortcut 
-  has been typed will undo the conversion of the shortcut.
+- **#2370** The order of the `keydown` and `input` event is now consistent with
+  the `<textarea>` element.
+- **#2369** After typing a shortcut, using the backspace key could result in
+  unexpected behavior. Now, pressing the backspace key after a shortcut has been
+  typed will undo the conversion of the shortcut.
 - **#2380** In some cases, when using the menu, some spurious focus/blur events
   would be dispatched.
-- **#2384** When using repeating decimals after a comma (i.e. `123{,}4(1)`), 
-  do not use a `\left...\right` command in order to get the proper spacing.
+- **#2384** When using repeating decimals after a comma (i.e. `123{,}4(1)`), do
+  not use a `\left...\right` command in order to get the proper spacing.
 - **#2349** The positioning of subscripts for extensible symbols, such as `\int`
   was incorrect.
 - **#2326** The Cut and Copy commands in the context menu are now working
   correctly in Safari.
-- **#2309** When using styled text (e.g. `\textit{}`), the content could 
-  sometimes be serialized with an unnecessary `\text{}` command, i.e. 
+- **#2309** When using styled text (e.g. `\textit{}`), the content could
+  sometimes be serialized with an unnecessary `\text{}` command, i.e.
   `\text{\textit{...}}`.
 - **#2376** When `smart-fence` was off, the `{` and `}` keys would not insert
   braces.
@@ -316,9 +324,10 @@ and numbers.
 - **#2261** When a style was applied to an empty range, the style was ignored.
 - **#2208** When setting a variant style (i.e. blackboard, fraktur, etc...) the
   style is no longer adopted by subsequent characters.
-- **#2104**, **#2260** When replacing the selection by typing, the new content would not
-  always be correctly styled. The content now inherits the style of the
-  selection, or the style of the insertion point if the selection is collapsed.
+- **#2104**, **#2260** When replacing the selection by typing, the new content
+  would not always be correctly styled. The content now inherits the style of
+  the selection, or the style of the insertion point if the selection is
+  collapsed.
 - Better handle the case where the mathlive library gets loaded before the DOM
   is constructed.
 - On Safari, the Insert Matrix submenu was displayed incorrectly.
@@ -326,11 +335,10 @@ and numbers.
   `virtual-keyboard-toggle` events are now dispatched on the
   `window.mathVirtualKeyboard` object of the iframe. This can be used to detect
   a request (and prevent) for the virtual keyboard to be displayed.
-- If the unknown in an expression was a complex identifier, such as `\mathcal{C}`
-  it would not be displayed correctly in the "Solve for" menu.
+- If the unknown in an expression was a complex identifier, such as
+  `\mathcal{C}` it would not be displayed correctly in the "Solve for" menu.
 - The `\mathrlap` command was incorrectly rendering like `\mathllap`.
 
-
 ## 0.98.6 _2024-01-27_
 
 ### New Features
@@ -4516,9 +4524,9 @@ and velocity of the project.
 ### Breaking Change
 
 - The signature of the `latexToMarkup()` function has changed.\
-  Instead of a style and format, the second argument is an option object. The style
-  can be specified with a `mathstyle` property, the format with a `format` property.
-  A new `letterShapeStyle` property can also be specified.
+  Instead of a style and format, the second argument is an option object. The
+  style can be specified with a `mathstyle` property, the format with a `format`
+  property. A new `letterShapeStyle` property can also be specified.
 
   - Before: `MathLive.latexToMarkup(formula, 'displaystyle')`
   - After: `MathLive.latexToMarkup(formula, { mathstyle: 'displaystyle' });`
diff --git a/css/virtual-keyboard.less b/css/virtual-keyboard.less
index 85b759e3e..ff2528f12 100644
--- a/css/virtual-keyboard.less
+++ b/css/virtual-keyboard.less
@@ -6,14 +6,32 @@
 @md: ~'(max-width: 768px)'; // >= -> phone landscape
 @lg: ~'(max-width: 1024px)'; // <=1024 -> tablet
 
-@system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-  'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+@system:
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  'Roboto',
+  'Oxygen',
+  'Ubuntu',
+  'Cantarell',
+  'Fira Sans',
+  'Droid Sans',
+  'Helvetica Neue',
   sans-serif;
 
-@shadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-@shadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-@shadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-@shadow5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+@shadow2:
+  0 3px 6px rgba(0, 0, 0, 0.16),
+  0 3px 6px rgba(0, 0, 0, 0.23);
+@shadow3:
+  0 10px 20px rgba(0, 0, 0, 0.19),
+  0 6px 6px rgba(0, 0, 0, 0.23);
+@shadow4:
+  0 14px 28px rgba(0, 0, 0, 0.25),
+  0 10px 10px rgba(0, 0, 0, 0.22);
+@shadow5:
+  0 19px 38px rgba(0, 0, 0, 0.3),
+  0 15px 12px rgba(0, 0, 0, 0.22);
 
 //
 // blue-50   #e2f0fd
@@ -136,7 +154,10 @@
   --_keycap-shift-color: var(--keycap-shift-color, var(--_accent-color));
 
   --_box-placeholder-color: var(--box-placeholder-color, var(--_accent-color));
-  --_box-placeholder-pressed-color: var(--box-placeholder-pressed-color, var(--keycap-text-pressed));
+  --_box-placeholder-pressed-color: var(
+    --box-placeholder-pressed-color,
+    var(--keycap-text-pressed)
+  );
 
   --_keycap-glyph-size: var(--keycap-glyph-size, 20px);
   --_keycap-glyph-size-lg: var(--keycap-glyph-size-lg, 24px);
@@ -299,7 +320,9 @@ body > .ML__keyboard.is-visible.animate > .MLK__backdrop {
   width: 8px;
   height: 8px;
   background: #0cbc0c;
-  box-shadow: inset 0 0 4px 0 #13ca13, 0 0 4px 0 #a9ef48;
+  box-shadow:
+    inset 0 0 4px 0 #13ca13,
+    0 0 4px 0 #a9ef48;
   border-radius: 8px;
   right: 8px;
   top: 8px;
@@ -518,118 +541,116 @@ body > .ML__keyboard.is-visible.animate > .MLK__backdrop {
       min-height: var(--_keycap-glyph-size-lg);
     }
   }
-
 }
 
-
 /** A regular keycap
  * Use the :where() pseudo-class to give it a very low specifity, 
  * so that it can be overriden by custom style.
  */
-:where(.MLK__rows > .MLK__row  div) {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    justify-content: space-evenly;
-
-    width: calc(var(--_keycap-width) - var(--_keycap-gap));
-    height: var(--_keycap-height);
-    box-sizing: border-box;
-    padding: 0;
-    vertical-align: top;
-    text-align: center;
-    float: left;
+:where(.MLK__rows > .MLK__row div) {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: space-evenly;
 
-    color: var(--_keycap-text);
-    fill: currentColor;
-    font-size: var(--_keycap-font-size);
-    background: var(--_keycap-background);
-    border: 1px solid var(--_keycap-border);
-    border-bottom-color: var(--_keycap-border-bottom);
-    border-radius: 6px;
+  width: calc(var(--_keycap-width) - var(--_keycap-gap));
+  height: var(--_keycap-height);
+  box-sizing: border-box;
+  padding: 0;
+  vertical-align: top;
+  text-align: center;
+  float: left;
+
+  color: var(--_keycap-text);
+  fill: currentColor;
+  font-size: var(--_keycap-font-size);
+  background: var(--_keycap-background);
+  border: 1px solid var(--_keycap-border);
+  border-bottom-color: var(--_keycap-border-bottom);
+  border-radius: 6px;
 
-    cursor: pointer;
-    touch-action: none;
+  cursor: pointer;
+  touch-action: none;
 
-    &:hover {
-      overflow: visible;
-      background: var(--_keycap-background-hover);
-    }
+  &:hover {
+    overflow: visible;
+    background: var(--_keycap-background-hover);
+  }
 
-    .ML__latex {
-      pointer-events: none;
-      touch-action: none;
-    }
+  .ML__latex {
+    pointer-events: none;
+    touch-action: none;
+  }
 
-    /* Keys with a variants panel */
-    // &[data-variants] {
-    // }
+  /* Keys with a variants panel */
+  // &[data-variants] {
+  // }
 
-    svg.svg-glyph {
-      margin: 8px 0;
-      width: var(--_keycap-glyph-size);
-      height: var(--_keycap-glyph-size);
-      min-height: var(--_keycap-glyph-size);
-    }
-    svg.svg-glyph-lg {
-      margin: 8px 0;
-      width: var(--_keycap-glyph-size-lg);
-      height: var(--_keycap-glyph-size-lg);
-      min-height: var(--_keycap-glyph-size-lg);
-    }
+  svg.svg-glyph {
+    margin: 8px 0;
+    width: var(--_keycap-glyph-size);
+    height: var(--_keycap-glyph-size);
+    min-height: var(--_keycap-glyph-size);
+  }
+  svg.svg-glyph-lg {
+    margin: 8px 0;
+    width: var(--_keycap-glyph-size-lg);
+    height: var(--_keycap-glyph-size-lg);
+    min-height: var(--_keycap-glyph-size-lg);
+  }
 
-    &.MLK__tex-math {
-      font-size: 25px;
-    }
-    // &.tt {font-size: 30px;}
-    &.is-pressed {
-      // box-shadow: inset 0 0 1px 1px #8d8f92;
-      background: var(--_keycap-background-pressed);
-      color: var(--_keycap-text-pressed);
-      --_box-placeholder-color: var(--_box-placeholder-pressed-color);
-    }
-    &.MLK__keycap.is-active,
-    &.action.is-active,
-    &.MLK__keycap.is-pressed,
-    &.action.is-pressed {
-      z-index: calc(var(--_keyboard-zindex) - 5);
-      aside {
-        display: none;
-      }
-      .MLK__shift {
-        display: none;
-      }
+  &.MLK__tex-math {
+    font-size: 25px;
+  }
+  // &.tt {font-size: 30px;}
+  &.is-pressed {
+    // box-shadow: inset 0 0 1px 1px #8d8f92;
+    background: var(--_keycap-background-pressed);
+    color: var(--_keycap-text-pressed);
+    --_box-placeholder-color: var(--_box-placeholder-pressed-color);
+  }
+  &.MLK__keycap.is-active,
+  &.action.is-active,
+  &.MLK__keycap.is-pressed,
+  &.action.is-pressed {
+    z-index: calc(var(--_keyboard-zindex) - 5);
+    aside {
+      display: none;
     }
-    &.shift.is-pressed,
-    &.MLK__keycap.is-pressed,
-    &.action.is-pressed {
-      background: var(--_keycap-background-pressed);
-      color: var(--_keycap-text-pressed);
+    .MLK__shift {
+      display: none;
     }
+  }
+  &.shift.is-pressed,
+  &.MLK__keycap.is-pressed,
+  &.action.is-pressed {
+    background: var(--_keycap-background-pressed);
+    color: var(--_keycap-text-pressed);
+  }
 
-    &.shift.is-active,
-    &.MLK__keycap.is-active,
-    &.action.is-active {
-      background: var(--_keycap-background-active);
-      color: var(--_keycap-text-active);
-      --_box-placeholder-color: var(--_box-placeholder-pressed-color);
-    }
+  &.shift.is-active,
+  &.MLK__keycap.is-active,
+  &.action.is-active {
+    background: var(--_keycap-background-active);
+    color: var(--_keycap-text-active);
+    --_box-placeholder-color: var(--_box-placeholder-pressed-color);
+  }
 
-    position: relative;
-    overflow: hidden;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    small {
-      color: var(--_keycap-secondary-text);
-    }
-    aside {
-      font-family: @system;
-      font-size: 10px;
-      line-height: 10px;
-      color: var(--_keycap-secondary-text);
-    }
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  small {
+    color: var(--_keycap-secondary-text);
+  }
+  aside {
+    font-family: @system;
+    font-size: 10px;
+    line-height: 10px;
+    color: var(--_keycap-secondary-text);
   }
+}
 
 /* Add an attribute 'data-tooltip' to display a tooltip on hover.
 Note there are a different set of tooltip rules for the keyboard toggle
@@ -651,7 +672,9 @@ Note there are a different set of tooltip rules for the keyboard toggle
     text-align: center;
     z-index: 2;
 
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+    box-shadow:
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12),
       0 3px 1px -2px rgba(0, 0, 0, 0.2);
     border-radius: 2px;
 
@@ -896,6 +919,9 @@ Note there are a different set of tooltip rules for the keyboard toggle
       line-height: 12px;
       opacity: 0.78;
       padding-top: 2px;
+      width: 100%;
+      text-align: center;
+      text-wrap: wrap;
     }
   }
 }
@@ -934,7 +960,10 @@ Note there are a different set of tooltip rules for the keyboard toggle
   .MLK__rows {
     --_keycap-gap: ~'max(var(--_keycap-gap, 2px), 2px)';
     --_keycap-height: ~'max(var(--_keycap-height), 42px)';
-    --_keycap-width: var(--keycap-width, ~'min(min(var(--_keycap-max-width)), 10cqw), 62px)');
+    --_keycap-width: var(
+      --keycap-width,
+      ~'min(min(var(--_keycap-max-width)), 10cqw), 62px)'
+    );
   }
 
   // Smaller toolbar switcher labels
@@ -960,7 +989,10 @@ Note there are a different set of tooltip rules for the keyboard toggle
   .MLK__rows {
     --_keycap-gap: ~'max(var(--keycap-gap, 2px), 2px)';
     --_keycap-height: ~'max(var(--keycap-height, 52px), 52px)';
-    --_keycap-width: var(--keycap-width, ~'min(min(var(--_keycap-max-width), 10cqw), 62px)');
+    --_keycap-width: var(
+      --keycap-width,
+      ~'min(min(var(--_keycap-max-width), 10cqw), 62px)'
+    );
   }
 
   .MLK__toolbar > div > div {
@@ -1004,14 +1036,13 @@ Note there are a different set of tooltip rules for the keyboard toggle
   }
 }
 
-@media ( max-height: 768px ) {
+@media (max-height: 768px) {
   .MLK__rows {
     --_keycap-height: ~'max(var(--keycap-height, 42px), 42px)';
   }
   .MLK__rows > .MLK__row > div > small {
     font-size: 14px;
   }
-
 }
 
 @container (max-width: 1444px) {
diff --git a/src/api.md b/src/api.md
index 91ecbe5ec..d1fdb88df 100644
--- a/src/api.md
+++ b/src/api.md
@@ -5769,7 +5769,7 @@ readonly `MenuItem`[]
 ##### MathfieldElement.registers
 
 ```ts
-get registers(): Readonly<Registers>
+get registers(): Registers
 ```
 
 TeX registers represent "variables" and "constants".
@@ -5802,7 +5802,7 @@ set registers(value): void
 
 • **value**: [`Registers`](#registers-2)
 
-`Readonly`\<[`Registers`](#registers-2)\>
+[`Registers`](#registers-2)
 
 </MemberCard>
 
@@ -6556,6 +6556,26 @@ get name(): string
 
 </MemberCard>
 
+<a id="placeholder" name="placeholder"></a>
+
+<MemberCard>
+
+##### MathfieldElement.placeholder
+
+```ts
+get placeholder(): string
+```
+
+```ts
+set placeholder(value): void
+```
+
+• **value**: `string`
+
+`string`
+
+</MemberCard>
+
 <a id="placeholdersymbol" name="placeholdersymbol"></a>
 
 <MemberCard>
@@ -7793,7 +7813,7 @@ min-font-scale: number;
 
 </MemberCard>
 
-<a id="placeholder" name="placeholder"></a>
+<a id="placeholder-1" name="placeholder-1"></a>
 
 <MemberCard>
 
diff --git a/src/atoms/macro.ts b/src/atoms/macro.ts
index feba14ddf..714ea0267 100644
--- a/src/atoms/macro.ts
+++ b/src/atoms/macro.ts
@@ -54,6 +54,17 @@ export class MacroAtom extends Atom {
       : this.command + (this.macroArgs ?? '');
   }
 
+  applyStyle(style: Style, options?: { unstyledOnly: boolean }): void {
+    // For macros, we only allow color styling. The macro itself has control
+    // over the other style attributes
+    const allowedStyle: Style = {};
+    if (style.color) allowedStyle.color = style.color;
+    if (style.backgroundColor)
+      allowedStyle.backgroundColor = style.backgroundColor;
+
+    super.applyStyle(allowedStyle, options);
+  }
+
   render(context: Context): Box | null {
     const result = Atom.createBox(context, this.body, { type: 'lift' });
     if (!result) return null;
diff --git a/src/core/atom-class.ts b/src/core/atom-class.ts
index c4b24d382..f12bb81a5 100644
--- a/src/core/atom-class.ts
+++ b/src/core/atom-class.ts
@@ -531,8 +531,11 @@ export class Atom<T extends (Argument | null)[] = (Argument | null)[]> {
     this.setChildren(atoms, 'below');
   }
 
-  applyStyle(style: Style): void {
+  applyStyle(style: Style, options?: { unstyledOnly: boolean }): void {
     this.isDirty = true;
+
+    if (options?.unstyledOnly && Object.keys(this.style).length === 0) return;
+
     this.style = { ...this.style, ...style };
 
     if (this.style.fontFamily === 'none') delete this.style.fontFamily;
@@ -553,7 +556,7 @@ export class Atom<T extends (Argument | null)[] = (Argument | null)[]> {
 
     if (this.style.fontSize === 'auto') delete this.style.fontSize;
 
-    for (const child of this.children) child.applyStyle(style);
+    for (const child of this.children) child.applyStyle(style, options);
   }
 
   getInitialBaseElement(): Atom {
diff --git a/src/editor-mathfield/keyboard-input.ts b/src/editor-mathfield/keyboard-input.ts
index d2b7dbe8f..7427e7367 100644
--- a/src/editor-mathfield/keyboard-input.ts
+++ b/src/editor-mathfield/keyboard-input.ts
@@ -444,6 +444,8 @@ export function onKeystroke(
         // the substitution inserted a place holder. Reset the buffer.
         if (!model.selectionIsCollapsed) mathfield.flushInlineShortcutBuffer();
 
+        // requestUpdate(mathfield);
+
         return true; // Content changed
       }
     );
@@ -618,6 +620,7 @@ function insertMathModeChar(mathfield: _Mathfield, c: string): void {
 
   // If we're inserting a non-alphanumeric character, reset the variant
   if (!/[a-zA-Z0-9]/.test(c) && mathfield.styleBias !== 'none') {
+    console.log('resetting to normal');
     style.variant = 'normal';
     style.variantStyle = undefined;
   }
diff --git a/src/editor-mathfield/mathfield-private.ts b/src/editor-mathfield/mathfield-private.ts
index 88d874263..59fbec7ed 100644
--- a/src/editor-mathfield/mathfield-private.ts
+++ b/src/editor-mathfield/mathfield-private.ts
@@ -91,11 +91,7 @@ import {
   validateOrigin,
 } from './utils';
 
-import {
-  onPointerDown,
-  offsetFromPoint,
-  PointerTracker,
-} from './pointer-input';
+import { onPointerDown, PointerTracker } from './pointer-input';
 
 import { ModeEditor } from './mode-editor';
 import './mode-editor-math';
@@ -1129,10 +1125,14 @@ If you are using Vue, this may be because you are using the runtime-only build o
     } else if (s === '&') addColumnAfter(this.model);
     else {
       if (this.model.selectionIsCollapsed) {
-        ModeEditor.insert(this.model, s, {
-          style: this.model.at(this.model.position).style,
-          ...options,
-        });
+        let style = { ...computeInsertStyle(this) };
+        // If we're inserting a non-alphanumeric character, reset the variant
+        if (!/[a-zA-Z0-9]/.test(s) && this.styleBias !== 'none') {
+          style.variant = 'normal';
+          style.variantStyle = undefined;
+        }
+
+        ModeEditor.insert(this.model, s, { style, ...options });
       } else ModeEditor.insert(this.model, s, options);
     }
 
diff --git a/src/editor-mathfield/render.ts b/src/editor-mathfield/render.ts
index 998dbe856..02e4f4134 100644
--- a/src/editor-mathfield/render.ts
+++ b/src/editor-mathfield/render.ts
@@ -151,6 +151,7 @@ export function render(
   mathfield: _Mathfield,
   renderOptions?: { forHighlighting?: boolean; interactive?: boolean }
 ): void {
+  console.log('rendering');
   if (!isValidMathfield(mathfield)) return;
   renderOptions ??= {};
 
diff --git a/src/editor-model/styling.ts b/src/editor-model/styling.ts
index 90352ae70..f100529b5 100644
--- a/src/editor-model/styling.ts
+++ b/src/editor-model/styling.ts
@@ -7,7 +7,7 @@ import type { Style, VariantStyle } from '../public/core-types';
 import { PrivateStyle } from '../core/types';
 
 export function applyStyleToUnstyledAtoms(
-  atom: Atom | Readonly<Atom[]> | undefined,
+  atom: Atom | ReadonlyArray<Atom> | undefined,
   style?: Style
 ): void {
   if (!atom || !style) return;
@@ -25,12 +25,7 @@ export function applyStyleToUnstyledAtoms(
       !atom.style.variant &&
       !atom.style.variantStyle
     ) {
-      atom.applyStyle(style);
-      applyStyleToUnstyledAtoms(atom.body, style);
-      applyStyleToUnstyledAtoms(atom.above, style);
-      applyStyleToUnstyledAtoms(atom.below, style);
-      applyStyleToUnstyledAtoms(atom.subscript, style);
-      applyStyleToUnstyledAtoms(atom.superscript, style);
+      atom.applyStyle(style, { unstyledOnly: true });
     }
   }
 }
diff --git a/src/virtual-keyboard/variants.ts b/src/virtual-keyboard/variants.ts
index 8e4901665..b7e87c5e6 100644
--- a/src/virtual-keyboard/variants.ts
+++ b/src/virtual-keyboard/variants.ts
@@ -265,8 +265,11 @@ export function showVariantsPanel(
         'pointerenter',
         (ev) => {
           const target = parentKeycap(ev.target);
+          console.log('enter', ev.target);
           if (!target?.id || !variants[target.id]) return;
 
+          console.log('adding is-active', target);
+
           target.classList.add('is-active');
         },
         { capture: true, signal }
@@ -276,6 +279,13 @@ export function showVariantsPanel(
         'pointerleave',
         (ev) => {
           const target = parentKeycap(ev.target);
+          if (
+            ev.target &&
+            'tagName' in ev.target &&
+            typeof ev.target.tagName === 'string' &&
+            ev.target.tagName.toUpperCase() === 'ASIDE'
+          )
+            return;
           if (!target?.id || !variants[target.id]) return;
 
           target.classList.remove('is-active');
diff --git a/test/smoke/index.html b/test/smoke/index.html
index 64fd77f0e..ac22a47cf 100644
--- a/test/smoke/index.html
+++ b/test/smoke/index.html
@@ -51,7 +51,7 @@ <h1>Smoke Test</h1>
     </ul>
   </header>
   <main>
-    <math-field id="mf" placeholder="\text{Type here}"></math-field>
+    <math-field id="mf"></math-field>
     <!-- <math-field id="mf">\mathrm{Hypot}\left(\textcolor{red}{#?},{#?}\right)</math-field> -->
     <!-- <math-field id="mf"
         >\left(r+s+\right)+\sqrt{x+1}=\frac{ab+cd}{1243+def}</math-field
@@ -812,8 +812,6 @@ <h2>Latex to Speakable Text</h2>
 
     // setupMathfield(mf);
 
-    mf.setAttribute('placeholder', '\\textcolor{red}{\\text{Type your math here}}');
-
     mf.addEventListener('mount', () => {
       // mf.menu = [
       //   {