fix: fixed #2208, fixed #2261

CHANGELOG.md

@@ -144,6 +144,9 @@ and numbers.
   unnecessary update is avoided.
 - **#2282** Don't display selection when the mathfield is not focused
 - **#2280** Handle better very deeply nested expressions
+- **#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.

css/mathfield.less

@@ -467,12 +467,17 @@ menu .ML__base {
   padding: 8px;
 }
 
-.variant-submenu [part='menu-item'].xl {
+.variant-submenu [part='menu-item'].ML__xl {
   font-size: 2rem;
   text-align: center;
   margin: 0;
 }
 
+.ML__center-menu label {
+  text-align: center;
+}
+
+
 
 .insert-matrix-submenu {
   /* Grid doesn't work on Safari */

src/api.md

@@ -1405,7 +1405,7 @@ with a mode token such as `$$` or `\(`.
 
 • **options.context?**: `unknown`
 
-• **options.letterShapeStyle?**: `"tex"` \| `"iso"` \| `"french"` \| `"upright"`
+• **options.letterShapeStyle?**: `"french"` \| `"tex"` \| `"iso"` \| `"upright"`
 
 • **options.mathstyle?**: `"displaystyle"` \| `"textstyle"`
 
@@ -1732,6 +1732,18 @@ for example `\mathrm{${symbol}}`.
 
 </MemberCard>
 
+<a id="oninsertstyle-1" name="oninsertstyle-1"></a>
+
+<MemberCard>
+
+##### MathfieldHooks.onInsertStyle
+
+```ts
+onInsertStyle: InsertStyleHook;
+```
+
+</MemberCard>
+
 <a id="onscrollintoview-1" name="onscrollintoview-1"></a>
 
 <MemberCard>
@@ -2445,7 +2457,7 @@ type KeyboardOptions: object;
 ##### KeyboardOptions.keybindings
 
 ```ts
-keybindings: readonly Keybinding[];
+keybindings: Readonly<Keybinding[]>;
 ```
 
 </MemberCard>
@@ -3017,6 +3029,21 @@ The mode (math, text or latex)
 
 </MemberCard>
 
+<a id="style-3" name="style-3"></a>
+
+<MemberCard>
+
+##### ElementInfo.style?
+
+```ts
+optional style: Style;
+```
+
+`style` is the style (color, weight, variant, etc...) directly applied
+ to this element.
+
+</MemberCard>
+
 <a id="fontfamily-1" name="fontfamily-1"></a>
 
 ### FontFamily
@@ -3203,7 +3230,7 @@ optional silenceNotifications: boolean;
 
 </MemberCard>
 
-<a id="style-3" name="style-3"></a>
+<a id="style-4" name="style-4"></a>
 
 <MemberCard>
 
@@ -3215,6 +3242,26 @@ optional style: Style;
 
 </MemberCard>
 
+<a id="insertstylehook" name="insertstylehook"></a>
+
+### InsertStyleHook()
+
+```ts
+type InsertStyleHook: (sender, at, info) => Readonly<Style>;
+```
+
+• **sender**: `Mathfield`
+
+• **at**: [`Offset`](#offset)
+
+• **info**
+
+• **info.after**: [`Offset`](#offset)
+
+• **info.before**: [`Offset`](#offset)
+
+`Readonly`\<[`Style`](#style-1)\>
+
 <a id="latexsyntaxerrort" name="latexsyntaxerrort"></a>
 
 ### LatexSyntaxError\<T\>
@@ -5935,6 +5982,28 @@ set onInlineShortcut(value): void
 
 </MemberCard>
 
+<a id="oninsertstyle" name="oninsertstyle"></a>
+
+<MemberCard>
+
+##### MathfieldElement.onInsertStyle
+
+```ts
+get onInsertStyle(): InsertStyleHook
+```
+
+###### Inherit Doc
+
+```ts
+set onInsertStyle(value): void
+```
+
+• **value**: [`InsertStyleHook`](#insertstylehook)
+
+[`InsertStyleHook`](#insertstylehook)
+
+</MemberCard>
+
 <a id="onscrollintoview" name="onscrollintoview"></a>
 
 <MemberCard>
@@ -6380,9 +6449,9 @@ readonly [`Keybinding`](#keybinding)[]
 ```ts
 get letterShapeStyle(): 
   | "auto"
+  | "french"
   | "tex"
   | "iso"
-  | "french"
   | "upright"
 ```
 
@@ -6394,15 +6463,15 @@ set letterShapeStyle(value): void
 
 • **value**: 
   \| `"auto"`
+  \| `"french"`
   \| `"tex"`
   \| `"iso"`
-  \| `"french"`
   \| `"upright"`
 
   \| `"auto"`
+  \| `"french"`
   \| `"tex"`
   \| `"iso"`
-  \| `"french"`
   \| `"upright"`
 
 </MemberCard>
@@ -7325,52 +7394,6 @@ setPromptValue(
 
 #### Selection
 
-<a id="caretpoint" name="caretpoint"></a>
-
-<MemberCard>
-
-##### MathfieldElement.caretPoint
-
-```ts
-get caretPoint(): Readonly<object>
-```
-
-###### Inherit Doc
-
-```ts
-set caretPoint(point): void
-```
-
-• **point**
-
-• **point.x**: `number`
-
-• **point.y**: `number`
-
-`Readonly`\<`object`\>
-
-<MemberCard>
-
-###### caretPoint.x
-
-```ts
-x: number;
-```
-
-</MemberCard>
-
-<MemberCard>
-
-###### caretPoint.y
-
-```ts
-y: number;
-```
-
-</MemberCard>
-
-</MemberCard>
-
 <a id="lastoffset" name="lastoffset"></a>
 
 <MemberCard>
@@ -7495,30 +7518,6 @@ Select the content of the mathfield.
 
 </MemberCard>
 
-<a id="setcaretpoint" name="setcaretpoint"></a>
-
-<MemberCard>
-
-##### MathfieldElement.setCaretPoint()
-
-```ts
-setCaretPoint(x, y): boolean
-```
-
-`x` and `y` are in viewport coordinates.
-
-Return true if the location of the point is a valid caret location.
-
-See also [[`caretPoint`]]
-
-• **x**: `number`
-
-• **y**: `number`
-
-`boolean`
-
-</MemberCard>
-
 #### Undo
 
 <a id="canredo" name="canredo"></a>

src/atoms/accent.ts

@@ -12,7 +12,7 @@ export class AccentAtom extends Atom {
     options: CreateAtomOptions & {
       accentChar?: number;
       svgAccent?: string;
-      body: null | readonly Atom[];
+      body: null | Readonly<Atom[]>;
     }
   ) {
     super({ ...options, type: 'accent', body: options.body ?? undefined });