rt-native 1.0.107 → 1.0.108

package/package.json

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

@@ -619,7 +619,7 @@ class RTBlazorfied {
         if (this.preview && previewWindow) {
             this.loadPreviewWindow(previewWindow);
             this.addPreviewEventListeners(this.preview);
-            this.preview.show();
+            this.preview.showModal();
             previewWindow.scrollTop = 0;
             previewWindow.scrollLeft = 0;
         }
@@ -728,10 +728,44 @@ class RTBlazorfied {
     }
     closePreview = () => {
         this.disablePreview();
+        this._resetPreviewMaximize();
         this.preview.close();
         this.source.focus();
         this.content.focus();
     }
+    togglePreviewMaximize = () => {
+        const dialog = this.shadowRoot.getElementById(`${this.id}_Preview`);
+        const btn = this.shadowRoot.getElementById(`${this.id}_PreviewMaxBtn`);
+        if (!dialog || !btn) return;
+        const isMax = !dialog.hasAttribute('data-maximized');
+        const maximize_props = [
+            ['width', '100vw'], ['height', '100vh'],
+            ['max-width', '100vw'], ['max-height', '100vh'],
+            ['top', '0'], ['left', '0'],
+            ['transform', 'none'], ['border-radius', '0'], ['resize', 'none']
+        ];
+        if (isMax) {
+            dialog.setAttribute('data-maximized', '');
+            maximize_props.forEach(([p, v]) => dialog.style.setProperty(p, v));
+        } else {
+            dialog.removeAttribute('data-maximized');
+            maximize_props.forEach(([p]) => dialog.style.removeProperty(p));
+        }
+        btn.setAttribute('aria-label', isMax ? 'Restore preview' : 'Maximize preview');
+        btn.querySelector('svg').innerHTML = isMax
+            ? '<path d="M4.5 1.5V4.5H1.5M7.5 10.5V7.5H10.5M4.5 4.5L1.5 1.5M7.5 7.5L10.5 10.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>'
+            : '<path d="M1.5 4.5V1.5H4.5M10.5 7.5V10.5H7.5M1.5 1.5L4.5 4.5M10.5 10.5L7.5 7.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>';
+    }
+    _resetPreviewMaximize = () => {
+        const dialog = this.shadowRoot.getElementById(`${this.id}_Preview`);
+        const btn = this.shadowRoot.getElementById(`${this.id}_PreviewMaxBtn`);
+        if (!dialog || !btn) return;
+        dialog.removeAttribute('data-maximized');
+        ['width','height','max-width','max-height','top','left','transform','border-radius','resize']
+            .forEach(p => dialog.style.removeProperty(p));
+        btn.setAttribute('aria-label', 'Maximize preview');
+        btn.querySelector('svg').innerHTML = '<path d="M1.5 4.5V1.5H4.5M10.5 7.5V10.5H7.5M1.5 1.5L4.5 4.5M10.5 10.5L7.5 7.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>';
+    }
     // ---- Horizontal Rule -------------------------------------------------------
 
     insertHorizontalRule = () => {
@@ -5606,6 +5640,9 @@ const _RTB_SHADOW_CSS = `
 .rtb-preview-dialog[open] {
     display: flex;
 }
+.rtb-preview-dialog::backdrop {
+    background: transparent;
+}
 .rtb-preview-dialog-body {
     display: flex;
     flex-direction: column;
@@ -6803,7 +6840,10 @@ rt-native {
 <dialog id="${id}_Preview" class="rich-text-box-modal rich-text-box-scroll rtb-preview-dialog" aria-modal="true" aria-labelledby="${id}_Preview-title">
   <div class="rtb-modal-header">
     <div id="${id}_Preview-title" class="rich-text-box-modal-title">Preview</div>
-    <button class="rich-text-box-modal-close" aria-label="Close preview" onclick="RTBlazorfied_Method('closePreview','${id}')"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false" width="8" height="8" style="display:block"><path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg></button>
+    <div style="display:flex;gap:2px;align-items:center;">
+      <button id="${id}_PreviewMaxBtn" class="rich-text-box-modal-close" aria-label="Maximize preview" onclick="RTBlazorfied_Method('togglePreviewMaximize','${id}')"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false" width="11" height="11" style="display:block"><path d="M1.5 4.5V1.5H4.5M10.5 7.5V10.5H7.5M1.5 1.5L4.5 4.5M10.5 10.5L7.5 7.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></button>
+      <button class="rich-text-box-modal-close" aria-label="Close preview" onclick="RTBlazorfied_Method('closePreview','${id}')"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false" width="8" height="8" style="display:block"><path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg></button>
+    </div>
   </div>
   <div class="rtb-preview-dialog-body">
     <div id="rich-text-box-preview" class="rtb-preview-window"></div>