rt-native 1.0.104 → 1.0.106

package/README.md

@@ -1,9 +1,9 @@
-# `<rt-native>` — Native Web Component Rich Text Editor
+# rt-native — Native Web Component Rich Text Editor
 
 **Author:** Ryan Kueter  
 **Updated:** April, 2026
 
-`rt-native.js` HTML Editor is a free native web component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, so see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. No frameworks, no build step, no dependencies — drop **one script tag** into any HTML page and you're done.
+**rt-native.js** HTML Editor is a free native web component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, so see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. No frameworks, no build step, no dependencies — drop **one script tag** into any HTML page and you're done.
 
 ---
 
@@ -56,7 +56,7 @@
 
 | File | Purpose |
 |---|---|
-| `rt-native.js` | **The only required file.** Contains the complete editor engine, web component wrapper, all CSS defaults, and all dialog styles — everything is self-contained. |
+| rt-native.js | **The only required file.** Contains the complete editor engine, web component wrapper, all CSS defaults, and all dialog styles — everything is self-contained. |
 
 ---
 
@@ -136,14 +136,14 @@ npm install rt-native
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `value` | `string` | `''` | Initial HTML content of the editor. |
-| `width` | `string` | `100%` | Editor width. Any valid CSS value (`px`, `%`, `vw`, etc.). |
-| `height` | `string` | `300px` | Editor height. Any valid CSS value. |
-| `placeholder` | `string` | — | Placeholder text shown when the editor is empty. |
-| `readonly` | boolean (presence) | — | Puts the editor in read-only mode. Hides the toolbar. |
-| `aria-label` | `string` | `'Rich text editor'` | Accessible name for the editor region. |
-| `label` | `string` | — | Alternative to `aria-label` for the accessible name. |
-| `config` | JSON string | — | Declarative configuration. Parsed and passed to `configure()` on connect. |
+| value | string | '' | Initial HTML content of the editor. |
+| width | string | 100% | Editor width. Any valid CSS value (px, %, vw, etc.). |
+| height | string | 300px | Editor height. Any valid CSS value. |
+| placeholder | string | — | Placeholder text shown when the editor is empty. |
+| readonly | boolean (presence) | — | Puts the editor in read-only mode. Hides the toolbar. |
+| aria-label | string | 'Rich text editor' | Accessible name for the editor region. |
+| label | string | — | Alternative to **aria-label** for the accessible name. |
+| config | JSON string | — | Declarative configuration. Parsed and passed to **configure()** on connect. |
 
 ### Example
 
@@ -162,7 +162,7 @@ npm install rt-native
 <rt-native config='{"editor":{"height":"500px"},"visibility":{"embedMedia":false}}'></rt-native>
 ```
 
-> **Note:** `width` and `height` are shorthand for `--rtb-editor-width` and `--rtb-editor-height`. They can also be set via CSS variables or `configure({ editor: { width, height } })`.
+> **Note:** **width** and **height** are shorthand for --rtb-editor-width and --rtb-editor-height. They can also be set via CSS variables or **configure({ editor: { width, height } })**.
 
 ---
 
@@ -188,7 +188,7 @@ const text = editor.getPlainText();
 
 ### setValue()
 
-Replaces the editor content with the supplied HTML string. Passing an empty string or `null` clears the editor.
+Replaces the editor content with the supplied HTML string. Passing an empty string or null clears the editor.
 
 ```js
 editor.setValue('<h2>New content</h2><p>Paragraph text.</p>');
@@ -222,7 +222,7 @@ editor.setReadOnly(true);   // lock
 editor.setReadOnly(false);  // unlock
 ```
 
-The `readOnly` getter reflects the current state:
+The **readOnly** getter reflects the current state:
 
 ```js
 if (editor.readOnly) {
@@ -230,7 +230,7 @@ if (editor.readOnly) {
 }
 ```
 
-Read-only mode can also be set declaratively via the `readonly` HTML attribute:
+Read-only mode can also be set declaratively via the **readonly** HTML attribute:
 
 ```html
 <rt-native readonly></rt-native>
@@ -251,11 +251,11 @@ editor.setPreviewCssFiles('/styles/my-content.css');
 editor.setPreviewCssFiles();
 ```
 
-> **CORS:** Files are loaded with `fetch()`. They must be served from the same origin or include appropriate `Access-Control-Allow-Origin` headers.
+> **CORS:** Files are loaded with fetch(). They must be served from the same origin or include appropriate Access-Control-Allow-Origin headers.
 
 ### setPreviewCssFile()
 
-Convenience method that sets a **single** CSS file. Equivalent to `setPreviewCssFiles(url)`.
+Convenience method that sets a **single** CSS file. Equivalent to **setPreviewCssFiles(url)**.
 
 ```js
 editor.setPreviewCssFile('/styles/content.css');
@@ -266,7 +266,7 @@ editor.setPreviewCssFile('');
 
 ### setPreviewCss()
 
-Supplies **inline CSS** to apply to both the editor content area and the preview window. Rules are automatically scoped, exactly like `setPreviewCssFiles()`. Call with no argument (or `''`) to clear.
+Supplies **inline CSS** to apply to both the editor content area and the preview window. Rules are automatically scoped, exactly like **setPreviewCssFiles()**. Call with no argument (or '') to clear.
 
 ```js
 editor.setPreviewCss(`
@@ -281,13 +281,13 @@ editor.setPreviewCss(`
 editor.setPreviewCss('');
 ```
 
-`setPreviewCss()` and `setPreviewCssFiles()` are independent — both can be active at the same time. File rules are applied first; inline rules are appended after, so inline CSS always wins when there is a conflict.
+**setPreviewCss()** and **setPreviewCssFiles()** are independent — both can be active at the same time. File rules are applied first; inline rules are appended after, so inline CSS always wins when there is a conflict.
 
 ---
 
 ## Events
 
-### `change`
+### change
 
 Fired on the element whenever the editor content changes. The event **bubbles** and is **composed** (crosses shadow DOM boundaries).
 
@@ -300,15 +300,15 @@ editor.addEventListener('change', (event) => {
 
 | Property | Value |
 |---|---|
-| `event.detail.value` | Current editor HTML as a string |
-| `event.bubbles` | `true` |
-| `event.composed` | `true` |
+| event.detail.value | Current editor HTML as a string |
+| event.bubbles | true |
+| event.composed | true |
 
 ---
 
 ## CSS Variables
 
-All visual aspects of the editor are controlled through CSS custom properties declared on the `rt-native` element. Default values are injected automatically by `rt-native.js` when the first editor mounts — no stylesheet required. Override any variable in your own CSS to theme the editor.
+All visual aspects of the editor are controlled through CSS custom properties declared on the **rt-native** element. Default values are injected automatically by **rt-native.js** when the first editor mounts — no stylesheet required. Override any variable in your own CSS to theme the editor.
 
 ```css
 /* Override globally (all editors on the page) */
@@ -332,15 +332,15 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-toolbar-bg` | `#FFF` | Toolbar background color |
-| `--rtb-toolbar-border-style` | `solid` | Toolbar bottom border style |
-| `--rtb-toolbar-border-width` | `1px` | Toolbar bottom border width |
-| `--rtb-toolbar-border-color` | `#EEE` | Toolbar bottom border color |
-| `--rtb-toolbar-border-radius` | `0px` | Toolbar corner radius (container clips top corners automatically) |
-| `--rtb-dropdown-bg` | `#FFF` | Font / Size / Format dropdown background |
-| `--rtb-dropdown-text` | `#000` | Dropdown item text color |
-| `--rtb-dropdown-bg-hover` | `#e5e5e5` | Dropdown item hover background |
-| `--rtb-dropdown-text-hover` | `#000` | Dropdown item hover text color |
+| --rtb-toolbar-bg | #FFF | Toolbar background color |
+| --rtb-toolbar-border-style | solid | Toolbar bottom border style |
+| --rtb-toolbar-border-width | 1px | Toolbar bottom border width |
+| --rtb-toolbar-border-color | #EEE | Toolbar bottom border color |
+| --rtb-toolbar-border-radius | 0px | Toolbar corner radius (container clips top corners automatically) |
+| --rtb-dropdown-bg | #FFF | Font / Size / Format dropdown background |
+| --rtb-dropdown-text | #000 | Dropdown item text color |
+| --rtb-dropdown-bg-hover | #e5e5e5 | Dropdown item hover background |
+| --rtb-dropdown-text-hover | #000 | Dropdown item hover text color |
 
 ---
 
@@ -348,18 +348,18 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-btn-text` | `#000` | Button icon color |
-| `--rtb-btn-size` | `16px` | Icon size (also drives button `min-height` and divider height) |
-| `--rtb-btn-font` | `Arial, sans-serif` | Font for dropdown buttons |
-| `--rtb-btn-bg` | `inherit` | Button background at rest |
-| `--rtb-btn-bg-hover` | `#DDD` | Button background on hover |
-| `--rtb-btn-bg-selected` | `#CCC` | Button background when active / selected |
-| `--rtb-btn-border-style` | `none` | Button border style |
-| `--rtb-btn-border-width` | `0px` | Button border width |
-| `--rtb-btn-border-color` | `#AAA` | Button border color at rest |
-| `--rtb-btn-border-hover` | `inherit` | Button border color on hover |
-| `--rtb-btn-border-selected` | `inherit` | Button border color when selected |
-| `--rtb-btn-border-radius` | `5px` | Button corner radius |
+| --rtb-btn-text | #000 | Button icon color |
+| --rtb-btn-size | 16px | Icon size (also drives button min-height and divider height) |
+| --rtb-btn-font | Arial, sans-serif | Font for dropdown buttons |
+| --rtb-btn-bg | inherit | Button background at rest |
+| --rtb-btn-bg-hover | #DDD | Button background on hover |
+| --rtb-btn-bg-selected | #CCC | Button background when active / selected |
+| --rtb-btn-border-style | none | Button border style |
+| --rtb-btn-border-width | 0px | Button border width |
+| --rtb-btn-border-color | #AAA | Button border color at rest |
+| --rtb-btn-border-hover | inherit | Button border color on hover |
+| --rtb-btn-border-selected | inherit | Button border color when selected |
+| --rtb-btn-border-radius | 5px | Button corner radius |
 
 ---
 
@@ -367,12 +367,12 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-content-text` | `#000` | Editor text color |
-| `--rtb-content-size` | `16px` | Editor font size |
-| `--rtb-content-font` | `Arial, sans-serif` | Editor font family |
-| `--rtb-content-bg` | `#FFF` | Editor content background color |
-| `--rtb-content-shadow` | `none` | Inner box shadow on the content area |
-| `--rtb-placeholder-color` | `#9ca3af` | Placeholder text color |
+| --rtb-content-text | #000 | Editor text color |
+| --rtb-content-size | 16px | Editor font size |
+| --rtb-content-font | Arial, sans-serif | Editor font family |
+| --rtb-content-bg | #FFF | Editor content background color |
+| --rtb-content-shadow | none | Inner box shadow on the content area |
+| --rtb-placeholder-color | #9ca3af | Placeholder text color |
 
 ---
 
@@ -380,14 +380,15 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-editor-width` | `100%` | Maximum width of the editor |
-| `--rtb-editor-height` | `300px` | Height of the editor |
-| `--rtb-editor-border-style` | `solid` | Outer border style |
-| `--rtb-editor-border-width` | `1px` | Outer border width |
-| `--rtb-editor-border-color` | `#EEE` | Outer border color |
-| `--rtb-editor-border-radius` | `0px` | Outer corner radius |
-| `--rtb-editor-shadow` | `none` | Outer box shadow |
-| `--rtb-editor-resize` | `auto` | `auto` shows the resize handle; `hidden` removes it |
+| --rtb-editor-width | 100% | Maximum width of the editor |
+| --rtb-editor-height | 300px | Height of the editor |
+| --rtb-editor-border-style | solid | Outer border style |
+| --rtb-editor-border-width | 1px | Outer border width |
+| --rtb-editor-border-color | #EEE | Outer border color |
+| --rtb-editor-border-radius | 0px | Outer corner radius |
+| --rtb-editor-shadow | none | Outer box shadow |
+| --rtb-editor-resize | auto | auto shows the resize handle; hidden removes it |
+| --rtb-z-index | 1 | Z-index of the editor container — raise this to stack the editor above surrounding page content |
 
 ---
 
@@ -395,12 +396,12 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-scroll-width` | `10px` | Scrollbar track width |
-| `--rtb-scroll-opacity` | `1` | Scrollbar opacity |
-| `--rtb-scroll-bg` | `transparent` | Scrollbar track background |
-| `--rtb-scroll-thumb-bg` | `#AAA` | Scrollbar thumb color |
-| `--rtb-scroll-thumb-bg-hover` | `#DDD` | Scrollbar thumb color on hover |
-| `--rtb-scroll-thumb-radius` | `0` | Scrollbar thumb corner radius |
+| --rtb-scroll-width | 10px | Scrollbar track width |
+| --rtb-scroll-opacity | 1 | Scrollbar opacity |
+| --rtb-scroll-bg | transparent | Scrollbar track background |
+| --rtb-scroll-thumb-bg | #AAA | Scrollbar thumb color |
+| --rtb-scroll-thumb-bg-hover | #DDD | Scrollbar thumb color on hover |
+| --rtb-scroll-thumb-radius | 0 | Scrollbar thumb corner radius |
 
 ---
 
@@ -408,9 +409,9 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-quote-bg` | `#f9f9f9` | Blockquote background color |
-| `--rtb-quote-border-color` | `#ccc` | Blockquote left-border color |
-| `--rtb-quote-border-width` | `5px` | Blockquote left-border width |
+| --rtb-quote-bg | #f9f9f9 | Blockquote background color |
+| --rtb-quote-border-color | #ccc | Blockquote left-border color |
+| --rtb-quote-border-width | 5px | Blockquote left-border width |
 
 ---
 
@@ -418,8 +419,8 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-code-bg` | `#f9f9f9` | Code block background color |
-| `--rtb-code-border-radius` | `10px` | Code block corner radius |
+| --rtb-code-bg | #f9f9f9 | Code block background color |
+| --rtb-code-border-radius | 10px | Code block corner radius |
 
 ---
 
@@ -427,14 +428,14 @@ rt-native {
 
 | Variable | Default | Description |
 |---|---|---|
-| `--rtb-modal-bg` | `#fefefe` | Dialog background color |
-| `--rtb-modal-text` | `#000` | Dialog text and close-button color |
-| `--rtb-modal-text-size` | `16px` | Dialog font size |
-| `--rtb-modal-text-font` | `Arial, sans-serif` | Dialog font family |
-| `--rtb-modal-input-bg` | `#fff` | Input field background |
-| `--rtb-modal-input-text` | `#000` | Input field text color |
-| `--rtb-modal-input-border` | `#CCC` | Input field border color |
-| `--rtb-modal-checkbox` | `#007bff` | Checkbox accent color |
+| --rtb-modal-bg | #fefefe | Dialog background color |
+| --rtb-modal-text | #000 | Dialog text and close-button color |
+| --rtb-modal-text-size | 16px | Dialog font size |
+| --rtb-modal-text-font | Arial, sans-serif | Dialog font family |
+| --rtb-modal-input-bg | #fff | Input field background |
+| --rtb-modal-input-text | #000 | Input field text color |
+| --rtb-modal-input-border | #CCC | Input field border color |
+| --rtb-modal-checkbox | #007bff | Checkbox accent color |
 
 ---
 
@@ -466,14 +467,21 @@ rt-native.dark {
 
 **Apply via HTML:**
 ```html
-<rt-native class="dark"></rt-native>
+<rt-native class="dark" id="editor" height="400px"></rt-native>
 ```
 
 **Apply via JavaScript:**
 ```js
-editor.classList.add('dark');
-editor.classList.remove('dark');
-editor.classList.replace('dark', 'ocean');
+var editor = document.getElementById("editor");
+if (editor) {
+    if (editor.classList.contains('light')) {
+        editor.classList.remove('light');
+    }
+    if (editor.classList.contains('dark')) {
+        editor.classList.remove('dark');
+    }
+    editor.classList.add(theme);
+}
 ```
 
 **Apply via media query (system dark mode):**
@@ -636,7 +644,7 @@ rt-native.fluent-dark {
 
 ## configure() Reference
 
-`configure()` accepts a single options object. Every property is optional. Calling `configure()` multiple times merges with the previous state.
+**configure()** accepts a single options object. Every property is optional. Calling **configure()** multiple times merges with the previous state.
 
 ### toolbar options
 
@@ -765,7 +773,7 @@ editor.configure({
 
 ### visibility options
 
-Controls which toolbar buttons are rendered. All buttons are visible by default except the **status bar** (`wordCount`), which is hidden by default and revealed with the Toggle Status Bar button.
+Controls which toolbar buttons are rendered. All buttons are visible by default except the **status bar** (wordCount), which is hidden by default and revealed with the Toggle Status Bar button.
 
 Use `clearAll: true` to hide everything first, then opt individual buttons back in.
 
@@ -804,64 +812,64 @@ editor.configure({
 
 | Key | Controls |
 |---|---|
-| `font` | Font family dropdown |
-| `size` | Font size dropdown |
-| `format` | Paragraph / heading format dropdown |
-| `textStylesDivider` | Divider after the three dropdowns |
-| `bold` | Bold button |
-| `italic` | Italic button |
-| `underline` | Underline button |
-| `strikethrough` | Strikethrough button |
-| `subscript` | Subscript button |
-| `superscript` | Superscript button |
-| `formatDivider` | Divider after text-format buttons |
-| `textColor` | Text color, background color, and remove-color buttons |
-| `textColorDivider` | Divider after color buttons |
-| `alignLeft` | Align left button |
-| `alignCenter` | Align center button |
-| `alignRight` | Align right button |
-| `alignJustify` | Justify button |
-| `alignDivider` | Divider after alignment buttons |
-| `cut` | Cut button |
-| `copy` | Copy button |
-| `paste` | Paste button |
-| `delete` | Delete button |
-| `selectAll` | Select all button |
-| `actionDivider` | Divider after clipboard buttons |
-| `orderedList` | Ordered list button |
-| `unorderedList` | Unordered list button |
-| `indent` | Increase / decrease indent buttons |
-| `listDivider` | Divider after list buttons |
-| `link` | Insert link and remove link buttons |
-| `image` | Insert image button |
-| `imageUpload` | Upload / embed image button |
-| `quote` | Block quote button |
-| `codeBlock` | Code block button |
-| `embedMedia` | Embed media (audio / PDF / iframe) button |
-| `video` | Video embed button |
-| `table` | Insert table button |
-| `horizontalRule` | Insert horizontal rule button |
-| `mediaDivider` | Divider after insert buttons |
-| `undo` | Undo button |
-| `redo` | Redo button |
-| `historyDivider` | Divider after undo / redo |
-| `statusBarToggle` | Toggle Status Bar button |
-| `saveHtml` | Save HTML file button |
-| `htmlView` | Toggle HTML source view button |
-| `preview` | Preview button |
-| `wordCount` | Status bar (word / character count) — hidden by default |
-
-> **Divider auto-hiding:** Dividers are only rendered when at least one button in their group is visible *and* the divider's own key is `true`.
+| font | Font family dropdown |
+| size | Font size dropdown |
+| format | Paragraph / heading format dropdown |
+| textStylesDivider | Divider after the three dropdowns |
+| bold | Bold button |
+| italic | Italic button |
+| underline | Underline button |
+| strikethrough | Strikethrough button |
+| subscript | Subscript button |
+| superscript | Superscript button |
+| formatDivider | Divider after text-format buttons |
+| textColor | Text color, background color, and remove-color buttons |
+| textColorDivider | Divider after color buttons |
+| alignLeft | Align left button |
+| alignCenter | Align center button |
+| alignRight | Align right button |
+| alignJustify | Justify button |
+| alignDivider | Divider after alignment buttons |
+| cut | Cut button |
+| copy | Copy button |
+| paste | Paste button |
+| delete | Delete button |
+| selectAll | Select all button |
+| actionDivider | Divider after clipboard buttons |
+| orderedList | Ordered list button |
+| unorderedList | Unordered list button |
+| indent | Increase / decrease indent buttons |
+| listDivider | Divider after list buttons |
+| link | Insert link and remove link buttons |
+| image | Insert image button |
+| imageUpload | Upload / embed image button |
+| quote | Block quote button |
+| codeBlock | Code block button |
+| embedMedia | Embed media (audio / PDF / iframe) button |
+| video | Video embed button |
+| table | Insert table button |
+| horizontalRule | Insert horizontal rule button |
+| mediaDivider | Divider after insert buttons |
+| undo | Undo button |
+| redo | Redo button |
+| historyDivider | Divider after undo / redo |
+| statusBarToggle | Toggle Status Bar button |
+| saveHtml | Save HTML file button |
+| htmlView | Toggle HTML source view button |
+| preview | Preview button |
+| wordCount | Status bar (word / character count) — hidden by default |
+
+> **Divider auto-hiding:** Dividers are only rendered when at least one button in their group is visible *and* the divider's own key is true.
 
 ---
 
 ## Preview Window Styling
 
-When you load preview CSS with `setPreviewCssFiles()` or `setPreviewCss()`, the component applies the styles in two places simultaneously:
+When you load preview CSS with **setPreviewCssFiles()** or **setPreviewCss()**, the component applies the styles in two places simultaneously:
 
-1. **Editor content area** — CSS files are fetched, every selector is automatically prefixed with `.rich-text-box-content`, and the scoped rules are injected into the editor's shadow root. You see your production styles while you type, with no risk of styles escaping to the toolbar, menus, or the surrounding page.
+1. **Editor content area** — CSS files are fetched, every selector is automatically prefixed with .rich-text-box-content, and the scoped rules are injected into the editor's shadow root. You see your production styles while you type, with no risk of styles escaping to the toolbar, menus, or the surrounding page.
 
-2. **Preview window** — Content is rendered inside an `<iframe srcdoc>` with a completely isolated browsing context. The preview shows exactly what a reader would see in production with a clean browser baseline.
+2. **Preview window** — Content is rendered inside an iframe srcdoc with a completely isolated browsing context. The preview shows exactly what a reader would see in production with a clean browser baseline.
 
 ### Writing your own preview CSS
 
@@ -891,7 +899,7 @@ editor.setPreviewCssFiles('my-content.css');
 
 ### At-rules
 
-`@media`, `@supports`, `@layer`, and `@container` blocks are handled correctly — selectors inside them are scoped. Other at-rules (`@keyframes`, `@font-face`, etc.) are passed through unchanged.
+@media, @supports, @layer, and @container blocks are handled correctly — selectors inside them are scoped. Other at-rules (@keyframes, @font-face, etc.) are passed through unchanged.
 
 ---
 
@@ -902,113 +910,113 @@ Buttons appear left-to-right in the order listed. Dividers separate logical grou
 | Button | Action | Shortcut |
 |---|---|---|
 | Font | Set font family | — |
-| Size | Set font size | `Ctrl+Shift+<` / `Ctrl+Shift+>` |
-| Format | Apply block format (paragraph, headings 1–6) | `Ctrl+Shift+D` / `Ctrl+Shift+1`–`6` |
-| Bold | Bold | `Ctrl+B` |
-| Italic | Italic | `Ctrl+I` |
-| Underline | Underline | `Ctrl+U` |
-| Strikethrough | Strikethrough | `Ctrl+D` |
-| Subscript | Subscript | `Ctrl+=` |
-| Superscript | Superscript | `Ctrl+Shift++` |
-| Text Color | Open text color picker | `Ctrl+Shift+C` |
-| Background Color | Open text background color picker | `Ctrl+Shift+B` |
+| Size | Set font size | Ctrl+Shift+< / Ctrl+Shift+> |
+| Format | Apply block format (paragraph, headings 1–6) | Ctrl+Shift+D / Ctrl+Shift+1–6 |
+| Bold | Bold | Ctrl+B |
+| Italic | Italic | Ctrl+I |
+| Underline | Underline | Ctrl+U |
+| Strikethrough | Strikethrough | Ctrl+D |
+| Subscript | Subscript | Ctrl+= |
+| Superscript | Superscript | Ctrl+Shift++ |
+| Text Color | Open text color picker | Ctrl+Shift+C |
+| Background Color | Open text background color picker | Ctrl+Shift+B |
 | Remove Color | Strip text and background color | — |
-| Align Left | Left-align | `Ctrl+L` |
-| Align Center | Center-align | `Ctrl+E` |
-| Align Right | Right-align | `Ctrl+R` |
-| Justify | Justify | `Ctrl+J` |
-| Cut | Cut selection | `Ctrl+X` |
-| Copy | Copy selection | `Ctrl+C` |
-| Paste | Paste from clipboard | `Ctrl+V` |
-| Delete | Delete selection | `Delete` |
-| Select All | Select all content | `Ctrl+A` |
-| Ordered List | Insert numbered list | `Ctrl+Shift+O` |
-| Unordered List | Insert bulleted list | `Ctrl+Shift+U` |
-| Increase Indent | Indent / promote list item | `Tab` |
-| Decrease Indent | Outdent / demote list item | `Shift+Tab` |
-| Insert Link | Open link dialog | `Ctrl+Shift+K` |
+| Align Left | Left-align | Ctrl+L |
+| Align Center | Center-align | Ctrl+E |
+| Align Right | Right-align | Ctrl+R |
+| Justify | Justify | Ctrl+J |
+| Cut | Cut selection | Ctrl+X |
+| Copy | Copy selection | Ctrl+C |
+| Paste | Paste from clipboard | Ctrl+V |
+| Delete | Delete selection | Delete |
+| Select All | Select all content | Ctrl+A |
+| Ordered List | Insert numbered list | Ctrl+Shift+O |
+| Unordered List | Insert bulleted list | Ctrl+Shift+U |
+| Increase Indent | Indent / promote list item | Tab |
+| Decrease Indent | Outdent / demote list item | Shift+Tab |
+| Insert Link | Open link dialog | Ctrl+Shift+K |
 | Remove Link | Remove hyperlink | — |
-| Insert Image | Open image URL dialog | `Ctrl+Shift+I` |
-| Upload Image | Open image upload / embed dialog | `Ctrl+Shift+&` |
-| Block Quote | Open block quote dialog | `Ctrl+Shift+Q` |
-| Embed Media | Open media embed dialog (audio, PDF, iframe) | `Ctrl+Shift+M` |
-| Video | Open video embed dialog | `Ctrl+Shift+V` |
-| Insert Table | Open table dialog | `Ctrl+Shift+L` |
-| Code Block | Open code block dialog | `Ctrl+Shift+*` |
-| Horizontal Rule | Insert `<hr>` at cursor position | `Ctrl+Shift+H` |
-| Undo | Undo last action | `Ctrl+Z` |
-| Redo | Redo last action | `Ctrl+Y` |
-| Toggle Status Bar | Show / hide the word and character count bar | `Ctrl+\` |
-| Save HTML | Download editor content as an `.html` file | `Ctrl+Shift+S` |
-| HTML Source | Toggle raw HTML source view | `Ctrl+Shift+A` |
-| Preview | Open preview dialog | `Ctrl+Shift+P` |
+| Insert Image | Open image URL dialog | Ctrl+Shift+I |
+| Upload Image | Open image upload / embed dialog | Ctrl+Shift+& |
+| Block Quote | Open block quote dialog | Ctrl+Shift+Q |
+| Embed Media | Open media embed dialog (audio, PDF, iframe) | Ctrl+Shift+M |
+| Video | Open video embed dialog | Ctrl+Shift+V |
+| Insert Table | Open table dialog | Ctrl+Shift+L |
+| Code Block | Open code block dialog | Ctrl+Shift+* |
+| Horizontal Rule | Insert \<hr\> at cursor position | Ctrl+Shift+H |
+| Undo | Undo last action | Ctrl+Z |
+| Redo | Redo last action | Ctrl+Y |
+| Toggle Status Bar | Show / hide the word and character count bar | Ctrl+\ |
+| Save HTML | Download editor content as an .html file | Ctrl+Shift+S |
+| HTML Source | Toggle raw HTML source view | Ctrl+Shift+A |
+| Preview | Open preview dialog | Ctrl+Shift+P |
 
 ---
 
 ## Keyboard Shortcuts
 
-All shortcuts are active when the editor content area has focus. The `Ctrl+\` and `Ctrl+Shift+A/P/S` shortcuts also work when the HTML source textarea has focus.
+All shortcuts are active when the editor content area has focus. The Ctrl+\ and Ctrl+Shift+A/P/S shortcuts also work when the HTML source textarea has focus.
 
 | Category | Action | Shortcut |
 |---|---|---|
-| **Formatting** | Bold | `Ctrl+B` |
-| | Italic | `Ctrl+I` |
-| | Underline | `Ctrl+U` |
-| | Strikethrough | `Ctrl+D` |
-| | Subscript | `Ctrl+=` |
-| | Superscript | `Ctrl+Shift++` |
-| **Color** | Text color | `Ctrl+Shift+C` |
-| | Text background color | `Ctrl+Shift+B` |
-| **Alignment** | Align left | `Ctrl+L` |
-| | Align center | `Ctrl+E` |
-| | Align right | `Ctrl+R` |
-| | Justify | `Ctrl+J` |
-| **Editing** | Cut | `Ctrl+X` |
-| | Copy | `Ctrl+C` |
-| | Paste | `Ctrl+V` |
-| | Select all | `Ctrl+A` |
-| | Undo | `Ctrl+Z` |
-| | Redo | `Ctrl+Y` |
-| **Lists** | Ordered list | `Ctrl+Shift+O` |
-| | Unordered list | `Ctrl+Shift+U` |
-| | Increase indent | `Tab` |
-| | Decrease indent | `Shift+Tab` |
-| **Insert** | Insert link | `Ctrl+Shift+K` |
-| | Insert image | `Ctrl+Shift+I` |
-| | Upload image | `Ctrl+Shift+&` |
-| | Block quote | `Ctrl+Shift+Q` |
-| | Video | `Ctrl+Shift+V` |
-| | Embed media | `Ctrl+Shift+M` |
-| | Insert table | `Ctrl+Shift+L` |
-| | Code block | `Ctrl+Shift+*` |
-| | Horizontal rule | `Ctrl+Shift+H` |
-| **Format** | Paragraph | `Ctrl+Shift+D` |
-| | Heading 1–6 | `Ctrl+Shift+1` – `Ctrl+Shift+6` |
-| | Increase font size | `Ctrl+Shift+>` |
-| | Decrease font size | `Ctrl+Shift+<` |
-| **View** | Toggle status bar | `Ctrl+\` |
-| | Toggle HTML source | `Ctrl+Shift+A` |
-| | Preview | `Ctrl+Shift+P` |
-| | Save HTML | `Ctrl+Shift+S` |
+| **Formatting** | Bold | Ctrl+B |
+| | Italic | Ctrl+I |
+| | Underline | Ctrl+U |
+| | Strikethrough | Ctrl+D |
+| | Subscript | Ctrl+= |
+| | Superscript | Ctrl+Shift++ |
+| **Color** | Text color | Ctrl+Shift+C |
+| | Text background color | Ctrl+Shift+B |
+| **Alignment** | Align left | Ctrl+L |
+| | Align center | Ctrl+E |
+| | Align right | Ctrl+R |
+| | Justify | Ctrl+J |
+| **Editing** | Cut | Ctrl+X |
+| | Copy | Ctrl+C |
+| | Paste | Ctrl+V |
+| | Select all | Ctrl+A |
+| | Undo | Ctrl+Z |
+| | Redo | Ctrl+Y |
+| **Lists** | Ordered list | Ctrl+Shift+O |
+| | Unordered list | Ctrl+Shift+U |
+| | Increase indent | Tab |
+| | Decrease indent | Shift+Tab |
+| **Insert** | Insert link | Ctrl+Shift+K |
+| | Insert image | Ctrl+Shift+I |
+| | Upload image | Ctrl+Shift+& |
+| | Block quote | Ctrl+Shift+Q |
+| | Video | Ctrl+Shift+V |
+| | Embed media | Ctrl+Shift+M |
+| | Insert table | Ctrl+Shift+L |
+| | Code block | Ctrl+Shift+* |
+| | Horizontal rule | Ctrl+Shift+H |
+| **Format** | Paragraph | Ctrl+Shift+D |
+| | Heading 1–6 | Ctrl+Shift+1 – Ctrl+Shift+6 |
+| | Increase font size | Ctrl+Shift+> |
+| | Decrease font size | Ctrl+Shift+< |
+| **View** | Toggle status bar | Ctrl+\ |
+| | Toggle HTML source | Ctrl+Shift+A |
+| | Preview | Ctrl+Shift+P |
+| | Save HTML | Ctrl+Shift+S |
 
 ---
 
 ## Accessibility
 
-`rt-native` is built with WCAG 2.1 AA compliance in mind:
+**rt-native** is built with WCAG 2.1 AA compliance in mind:
 
-- **Editor region** — The content area carries `role="textbox"`, `aria-multiline="true"`, and an `aria-label` (defaults to `"Rich text editor"`; override with the `aria-label` or `label` attribute on the host element).
-- **Read-only state** — `aria-readonly` is kept in sync with the `readonly` attribute and `setReadOnly()`.
-- **Toolbar** — The toolbar container has `role="toolbar"` and `aria-label="Formatting toolbar"`. Every button has an `aria-label` derived from its tooltip text (e.g. `"Bold (Ctrl+B)"`) and an `aria-pressed` attribute that is kept in sync with the button's active/selected state.
-- **Status bar** — Carries `role="status"`, `aria-live="polite"`, and `aria-atomic="true"` so word and character count updates are announced non-intrusively by screen readers.
-- **Dialogs** — Every dialog has `aria-modal="true"` and `aria-labelledby` pointing to its title element. Close buttons are native `<button>` elements with descriptive `aria-label` text.
-- **HTML source textarea** — Has `aria-label="HTML source"` to distinguish it from the main editor.
+- **Editor region** — The content area carries role="textbox", aria-multiline="true", and an aria-label (defaults to "Rich text editor"; override with the **aria-label** or **label** attribute on the host element).
+- **Read-only state** — aria-readonly is kept in sync with the **readonly** attribute and **setReadOnly()**.
+- **Toolbar** — The toolbar container has role="toolbar" and aria-label="Formatting toolbar". Every button has an aria-label derived from its tooltip text (e.g. "Bold (Ctrl+B)") and an aria-pressed attribute that is kept in sync with the button's active/selected state.
+- **Status bar** — Carries role="status", aria-live="polite", and aria-atomic="true" so word and character count updates are announced non-intrusively by screen readers.
+- **Dialogs** — Every dialog has aria-modal="true" and aria-labelledby pointing to its title element. Close buttons are native button elements with descriptive aria-label text.
+- **HTML source textarea** — Has aria-label="HTML source" to distinguish it from the main editor.
 
 ---
 
 ## Multiple Instances
 
-Each `<rt-native>` element is fully isolated. You can place as many on a page as needed — each gets its own unique ID, shadow root, and state.
+Each rt-native element is fully isolated. You can place as many on a page as needed — each gets its own unique ID, shadow root, and state.
 
 ```html
 <rt-native id="editor-1" height="200px"></rt-native>
@@ -1033,8 +1041,8 @@ Requires browsers with native support for:
 
 - [Custom Elements v1](https://caniuse.com/custom-elementsv1)
 - [Shadow DOM v1](https://caniuse.com/shadowdomv1)
-- [`<dialog>` element](https://caniuse.com/dialog)
+- [dialog element](https://caniuse.com/dialog)
 - [CSS Custom Properties](https://caniuse.com/css-variables)
-- [`fetch()`](https://caniuse.com/fetch) *(required for `setPreviewCssFiles()` / `setPreviewCssFile()`)*
+- [fetch()](https://caniuse.com/fetch) *(required for **setPreviewCssFiles()** / **setPreviewCssFile()**)*
 
 All modern browsers (Chrome 67+, Firefox 63+, Safari 12.1+, Edge 79+) are supported. Internet Explorer is not supported.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rt-native",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "description": "rt-native HTML Editor is a free native web component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, so see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. No frameworks, no build step, no dependencies — drop one script tag into any HTML page and you're done.",
   "main": "rt-native.js",
   "exports": {

package/rt-native.js

@@ -5338,7 +5338,7 @@ const _RTB_SHADOW_CSS = `
     height: var(--rtb-editor-height, 300px);
     display: flex;
     flex-direction: column;
-    z-index: 1;
+    z-index: var(--rtb-z-index, 1);
 }
 .rich-text-box-content-container {
     width: 100%;
@@ -5596,6 +5596,12 @@ const _RTB_SHADOW_CSS = `
     resize: both;
     overflow: hidden;
     box-sizing: border-box;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    z-index: 9999;
 }
 .rtb-preview-dialog[open] {
     display: flex;
@@ -5892,6 +5898,9 @@ rt-native {
     /* Placeholder */
     --rtb-placeholder-color:     #9ca3af;
 
+    /* Stacking context — raise the entire editor above surrounding content */
+    --rtb-z-index:               1;
+
     /* Modals / dialogs */
     --rtb-modal-bg:              #ffffff;
     --rtb-modal-text:            #242424;