Editor image support (#739)

* Editor image support

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: ia3andy

blog/content/posts/2026-02-02-set-it-in-roq-the-editor-that-change-the-game/index.md

@@ -7,7 +7,7 @@ date: 2026-02-02 00:00:00 +0100
 ---
 Roq started as a solid foundation for building modern apps and static sites. But now, it’s leveling up in a big way. With the introduction of a **TipTap-powered Editor with Markdown support**, Roq is no longer just an SSG tool, it’s stepping into **CMS territory**.
 
-![The Editor](the-roq-editor.gif)
+![](the-roq-editor.gif)
 
 ## Why This Is a Big Deal
 

roq-editor/deployment/src/main/resources/dev-ui/assets/placeholder-image.svg

@@ -123,7 +123,7 @@ export class BaseEditor extends LitElement {
     }
 
     /** Subclasses can override to return a different preview URL if needed */
-    _getPreviewUrl() {
+    _getPreviewUrl = () => {
         return this.page?.url;
     }
 
@@ -218,6 +218,7 @@ export class BaseEditor extends LitElement {
                   .activeTab="${this._activeTab}"
                   .showEditorTab=${this.showEditorTab}
                   @tab-changed="${this._onTabChanged}"
+                  .previewUrl="${this._getPreviewUrl()}"
                 ></qwc-toolbar>
 
                 <div class="preview-container" ?hidden="${this._activeTab !== 'preview'}">
@@ -232,10 +233,18 @@ export class BaseEditor extends LitElement {
     }
 
     /** ---- Shared tab handling (subclasses may hook into before/after) ---- */
-    _onTabChanged(e) {
+    async _onTabChanged(e) {
         const newTab = e.detail.tab;
         const previousTab = this._activeTab;
 
+        if (this._isDirty && newTab === 'preview') {
+            const save = await showConfirm('You have unsaved changes which won\'t be visible...', { title: 'Do you want to save for the preview?', cancelText: 'No thanks',  confirmText: 'Save Changes' });
+            if (save) {
+                this._save();
+                return;
+            }
+        }
+
         if (this._beforeTabChange) {
             this._beforeTabChange(previousTab, newTab);
         }
@@ -265,7 +274,7 @@ export class BaseEditor extends LitElement {
     async _close() {
         if (this._isDirty) {
             const confirmed = await showConfirm(
-                'Because you have unsaved changes!',
+                'You have unsaved changes 😅',
                 { title: "Do you really want to close?",  confirmText: 'Discard Changes', theme: 'error' }
             );
             if (!confirmed) return;

roq-editor/deployment/src/main/resources/dev-ui/components/base-editor.js

@@ -40,7 +40,7 @@ export class PromptDialog extends LitElement {
      * - Without customRenderer: resolves to string or null
      * - With customRenderer: resolves to object or null
      */
-    prompt(message, defaultValue = '', customRenderer = null) {
+    prompt(message, defaultValue, customRenderer = null) {
         return new Promise((resolve) => {
             this._message = message;
             this._defaultValue = defaultValue;
@@ -83,7 +83,12 @@ export class PromptDialog extends LitElement {
 
     _handleCancel() {
         if (this._resolve) {
-            this._resolve({});
+            if(this._defaultValue && typeof this._defaultValue === 'object') {
+                this._resolve({});
+            } else {
+                this._resolve(null);
+            }
+
             if (this._customRenderer) {
                 this._formValues = JSON.parse(JSON.stringify(this._defaultFormValues));
             } else {
@@ -166,7 +171,7 @@ customElements.define('qwc-prompt-dialog', PromptDialog);
  */
 let dialogInstance = null;
 
-export function showPrompt(message, defaultValue = '', customRenderer = null) {
+export function showPrompt(message, defaultValue , customRenderer = null) {
     if (!dialogInstance) {
         dialogInstance = document.createElement('qwc-prompt-dialog');
         document.body.appendChild(dialogInstance);

roq-editor/deployment/src/main/resources/dev-ui/components/prompt-dialog.js

@@ -5,6 +5,7 @@ import { editorContext } from './visual-editor/editor-context.js';
 export class Toolbar extends LitElement {
 
   static properties = {
+    previewUrl: { type: String },
     activeTab: { type: String, reflect: true, attribute: 'active-tab' },
     showEditorTab: { type: Boolean }
   };
@@ -130,10 +131,11 @@ export class Toolbar extends LitElement {
             @click="${() => this._onTabClick('preview')}">
             Preview
           </button>
-          
-          <vaadin-button theme="icon" @click="${() => this._onTabClick('previewNewTab')}">
-            <vaadin-icon icon="font-awesome-solid:arrow-up-right-from-square"></vaadin-icon>
-          </vaadin-button>
+          <a href="${this.previewUrl}" target="_blank" rel="noopener noreferrer">
+            <vaadin-button theme="icon">
+              <vaadin-icon icon="font-awesome-solid:arrow-up-right-from-square"></vaadin-icon>
+            </vaadin-button>
+          </a>
           <div class="spacer"></div>
           ${this.activeTab === "preview" ? html`
             <vaadin-button