rt-native 1.0.110 → 1.0.112

package/README.md

@@ -342,6 +342,10 @@ 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.
 
+### 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.
+
 ---
 
 ## Events
@@ -708,10 +712,6 @@ When you load preview CSS with **setPreviewCssFiles()** or **setPreviewCss()**,
 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.
-
 ---
 
 ## Toolbar Buttons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rt-native",
-  "version": "1.0.110",
+  "version": "1.0.112",
   "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

@@ -528,6 +528,30 @@ class RTBlazorfied {
             event.preventDefault();
             this.toggleStatusBar();
         }
+        if (event.key === 'Backspace') {
+            const selection = this.Utilities.getSelection();
+            if (selection && selection.isCollapsed) {
+                const range = selection.getRangeAt(0);
+                const blockLevelElements = ['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'OL', 'UL', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER'];
+                let block = selection.anchorNode;
+                while (block && block !== this.content) {
+                    if (block.nodeType === Node.ELEMENT_NODE && blockLevelElements.includes(block.nodeName)) break;
+                    block = block.parentNode;
+                }
+                if (block && block !== this.content) {
+                    const marginLeft = parseFloat(window.getComputedStyle(block).marginLeft) || 0;
+                    if (marginLeft > 0) {
+                        const testRange = document.createRange();
+                        testRange.setStart(block, 0);
+                        testRange.setEnd(range.startContainer, range.startOffset);
+                        if (testRange.toString().length === 0) {
+                            event.preventDefault();
+                            this.decreaseIndent();
+                        }
+                    }
+                }
+            }
+        }
         if (event.shiftKey && event.key === 'Tab') {
             event.preventDefault();
             this.decreaseIndent();