@kubex/zinc 1.1.64 → 1.1.65

package/src/components/remarkd-editor/remarkd-editor.component.ts

@@ -8,9 +8,7 @@ import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
 import type {ZincFormControl} from '../../internal/zinc-element';
-import type ZnDialog from "../dialog";
 import type ZnFile from "../file";
-import type ZnInput from "../input";
 
 import styles from './remarkd-editor.scss';
 
@@ -27,6 +25,15 @@ interface BlockType {
   image?: boolean;
 }
 
+interface ImageBlockData {
+  caption: string;
+  align: '' | 'center' | 'right';
+  src: string;
+  alt: string;
+  width: string;
+  height: string;
+}
+
 const BLOCK_TYPES: BlockType[] = [
   {label: 'Text', icon: 'text@lu', prefix: ''},
   {label: 'Heading 1', icon: 'heading-1@lu', prefix: '# '},
@@ -48,9 +55,7 @@ const BLOCK_TYPES: BlockType[] = [
  * @dependency zn-button
  * @dependency zn-button-group
  * @dependency zn-icon
- * @dependency zn-dialog
  * @dependency zn-file
- * @dependency zn-input
  *
  * @event zn-input - Emitted on each keystroke while editing a block.
  * @event zn-change - Emitted when a block edit is committed and the value changes.
@@ -61,6 +66,7 @@ const BLOCK_TYPES: BlockType[] = [
  * @csspart rendered - The rendered remarkd output of a block.
  * @csspart input - The textarea shown while editing a block.
  * @csspart slash-menu - The context menu opened by typing "/" in a block.
+ * @csspart image-controls - The caption / alignment / size panel shown when an image block is clicked.
  */
 export default class ZnRemarkdEditor extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -80,12 +86,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   @state() private slashMenuOpen = false;
   @state() private slashQuery = '';
   @state() private slashActiveIndex = 0;
-  @state() private imageDialogOpen = false;
+  @state() private imagePickerIndex: number | null = null;
+  @state() private imageEdit: ImageBlockData | null = null;
   @state() private dropIndicator: number | null = null;
   @state() private dragIndex: number | null = null;
   @state() private editShell = '';
 
-  private imageInsertIndex = 0;
   private pendingDragHandle: HTMLElement | null = null;
   private dragStartX = 0;
   private dragStartY = 0;
@@ -104,10 +110,9 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   @property() placeholder = 'Type something…';
 
   /**
-   * Endpoint for image uploads. Posting the file metadata here must return
-   * `{uploadPath, uploadUrl}`; the file is then PUT to `uploadUrl` and
-   * `uploadPath` is inserted into the document. When unset, adding an image
-   * prompts for a URL instead.
+   * Endpoint for image uploads — required for image support. Posting the file
+   * metadata here must return `{uploadPath, uploadUrl}`; the file is then PUT
+   * to `uploadUrl` and the returned `uploadPath` is embedded as the image URL.
    */
   @property({attribute: 'attachment-url'}) attachmentUrl = '';
 
@@ -252,9 +257,62 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       return;
     }
 
+    // Image blocks get a controls panel instead of source editing.
+    const image = this.parseImageBlock(this.blocks[index]);
+    if (image) {
+      this.editingIndex = index;
+      this.imageEdit = image;
+      this.slashMenuOpen = false;
+      return;
+    }
+
     this.startEdit(index);
   }
 
+  /** Parses a block that is purely an image (with optional caption/align lines). */
+  private parseImageBlock(block: string): ImageBlockData | null {
+    const data: ImageBlockData = {caption: '', align: '', src: '', alt: '', width: '', height: ''};
+    let found = false;
+    for (const raw of (block ?? '').split('\n')) {
+      const line = raw.trim();
+      if (!line) continue;
+      const macro = /^image::([^[]+)\[([^\]]*)]$/.exec(line);
+      const markdown = /^!\[([^\]]*)]\(([^)\s]+)\s*(?:"[^"]*")?\)$/.exec(line);
+      const align = /^\[\.align-(center|right)]$/.exec(line);
+      if (macro || markdown) {
+        if (found) return null;
+        found = true;
+        if (macro) {
+          data.src = macro[1].trim();
+          const parts = macro[2].split(',').map(part => part.trim());
+          data.alt = parts[0] ?? '';
+          data.width = parts[1] ?? '';
+          data.height = parts[2] ?? '';
+        } else if (markdown) {
+          data.alt = markdown[1];
+          data.src = markdown[2];
+        }
+      } else if (align) {
+        data.align = align[1] as ImageBlockData['align'];
+      } else if (line.startsWith('.') && !line.startsWith('..')) {
+        data.caption = line.slice(1);
+      } else {
+        return null;
+      }
+    }
+    return found ? data : null;
+  }
+
+  private serializeImageBlock(data: ImageBlockData): string {
+    const lines: string[] = [];
+    if (data.caption.trim()) lines.push(`.${data.caption.trim()}`);
+    if (data.align) lines.push(`[.align-${data.align}]`);
+    const attrs = [data.alt, data.width, data.height].map(attr => attr.trim());
+    while (attrs.length && !attrs[attrs.length - 1]) attrs.pop();
+    lines.push(`image::${data.src}[${attrs.join(',')}]`);
+    return lines.join('\n');
+  }
+
   private toggleCheckbox(index: number, checkbox: HTMLInputElement) {
     const rendered = checkbox.closest('.remarkd-editor__rendered');
     const ordinal = Array.from(rendered?.querySelectorAll('input[type="checkbox"]') ?? []).indexOf(checkbox);
@@ -279,11 +337,54 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     if (this.disabled || this.readonly) return;
     this.editingDraft = draft ?? this.blocks[index] ?? '';
     this.editingIndex = index;
+    this.imageEdit = null;
     this.editShell = this.computeEditShell(this.editingDraft);
     this.slashMenuOpen = false;
     void this.focusInput();
   }
 
+  private updateImageEdit(patch: Partial<ImageBlockData>) {
+    if (this.imageEdit) this.imageEdit = {...this.imageEdit, ...patch};
+  }
+
+  private saveImageEdit = () => {
+    if (this.editingIndex === null || !this.imageEdit) return;
+    const blocks = [...this.blocks];
+    blocks[this.editingIndex] = this.serializeImageBlock(this.imageEdit);
+    this.closeImageEdit();
+    this.updateBlocks(blocks);
+  };
+
+  private closeImageEdit = () => {
+    this.editingIndex = null;
+    this.imageEdit = null;
+  };
+
+  private deleteImageBlock = () => {
+    if (this.editingIndex === null) return;
+    const blocks = [...this.blocks];
+    blocks.splice(this.editingIndex, 1);
+    this.closeImageEdit();
+    this.updateBlocks(blocks);
+  };
+
+  private editImageSource = () => {
+    if (this.editingIndex === null) return;
+    const index = this.editingIndex;
+    this.imageEdit = null;
+    this.startEdit(index);
+  };
+
+  private handleImageControlsKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.closeImageEdit();
+    } else if (e.key === 'Enter' && (e.target as HTMLElement).tagName === 'INPUT') {
+      e.preventDefault();
+      this.saveImageEdit();
+    }
+  };
+
   /**
    * The remarkd chrome the editing block should keep, derived from its first
    * line — so a NOTE still looks like a note while its source is edited.
@@ -317,6 +418,13 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     this.updateBlocks(blocks);
   }
 
+  private deleteBlock(index: number) {
+    if (this.disabled || this.readonly) return;
+    const blocks = [...this.blocks];
+    blocks.splice(index, 1);
+    this.updateBlocks(blocks);
+  }
+
   /** Inserts a draft block — committed (or dropped, if left empty) on blur. */
   private insertDraftBlock(index: number, prefill = '') {
     if (this.disabled || this.readonly) return;
@@ -338,6 +446,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   /** Commits the in-progress edit; returns the index after the committed parts. */
   private commitEdit = (): number => {
+    if (this.imageEdit) {
+      // The image panel saves explicitly — just close it.
+      const index = this.editingIndex ?? this.blocks.length;
+      this.closeImageEdit();
+      return index + 1;
+    }
     this.slashMenuOpen = false;
     if (this.editingIndex === null) return this.blocks.length;
     const index = this.editingIndex;
@@ -562,34 +676,26 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   private pickImage(index: number) {
     if (this.disabled || this.readonly) return;
-    this.imageInsertIndex = index;
-    this.imageDialogOpen = true;
+    this.imagePickerIndex = index;
   }
 
-  private handleImageDialogClose = () => {
-    this.imageDialogOpen = false;
+  private closeImagePicker = () => {
+    this.imagePickerIndex = null;
   };
 
-  private handleImageInsert = () => {
-    const index = this.imageInsertIndex;
-    if (this.attachmentUrl) {
-      const fileEl = this.shadowRoot?.querySelector<ZnFile>('.remarkd-editor__image-file');
-      const file = fileEl?.files?.[0];
-      if (!file) return;
-      void this.insertImage(file, index);
-    } else {
-      const input = this.shadowRoot?.querySelector<ZnInput>('.remarkd-editor__image-url');
-      const url = String(input?.value ?? '').trim();
-      if (!url) return;
-      this.addBlockAt(index, `![](${url})`);
-    }
-    this.shadowRoot?.querySelector<ZnDialog>('.remarkd-editor__image-dialog')?.hide();
+  private handleImagePicked = (e: Event) => {
+    const file = (e.target as ZnFile).files?.[0];
+    if (!file) return;
+    const index = this.imagePickerIndex ?? this.blocks.length;
+    this.imagePickerIndex = null;
+    void this.insertImage(file, index);
   };
 
   private async insertImage(file: File, index: number) {
     try {
       const path = await this.uploadImage(file);
-      this.addBlockAt(index, `![${file.name}](${path})`);
+      const alt = file.name.replace(/[[\],]/g, '');
+      this.addBlockAt(index, `image::${path}[${alt}]`);
     } catch (error) {
       console.error('[zn-remarkd-editor] image upload failed', error);
     }
@@ -606,7 +712,11 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     if (!res.ok) throw new Error(`Upload request failed: ${res.status}`);
     const data = await res.json() as UploadResponse;
 
-    const put = await fetch(data.uploadUrl, {
+    // resolve relative upload targets against the attachment url so both keep
+    // the same base path when the host page rewrites attachment-url (e.g. the
+    // kubex console proxying apps under an app base); absolute urls pass through
+    const target = new URL(data.uploadUrl, new URL(this.attachmentUrl, window.location.href)).toString();
+    const put = await fetch(target, {
       method: 'PUT',
       headers: {'Content-Type': file.type},
       body: file,
@@ -651,8 +761,77 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       </div>`;
   }
 
+  private renderImageControls() {
+    const data = this.imageEdit;
+    if (!data) return '';
+    const aligns: {value: ImageBlockData['align']; icon: string; label: string}[] = [
+      {value: '', icon: 'align-left@lu', label: 'Align left'},
+      {value: 'center', icon: 'align-center@lu', label: 'Align center'},
+      {value: 'right', icon: 'align-right@lu', label: 'Align right'},
+    ];
+    return html`
+      <div part="image-controls" class="remarkd-editor__image-controls"
+           @keydown=${this.handleImageControlsKeydown}>
+        ${data.src ? html`
+          <div class=${classMap({
+            'remarkd-editor__image-controls-preview': true,
+            [`remarkd-editor__image-controls-preview--${data.align}`]: !!data.align,
+          })}>
+            <img src=${data.src}
+                 alt=${data.alt}
+                 width=${data.width || ''}
+                 height=${data.height || ''}>
+          </div>` : ''}
+        <label class="remarkd-editor__image-field">
+          <span>Caption</span>
+          <input .value=${data.caption}
+                 placeholder="Optional caption"
+                 @input=${(e: Event) => this.updateImageEdit({caption: (e.target as HTMLInputElement).value})}>
+        </label>
+        <div class="remarkd-editor__image-row">
+          <div class="remarkd-editor__image-field">
+            <span>Alignment</span>
+            <zn-button-group>
+              ${aligns.map(align => html`
+                <zn-button type="button" icon-button="small" icon=${align.icon}
+                           ?plain=${data.align !== align.value}
+                           tooltip=${align.label}
+                           @click=${() => this.updateImageEdit({align: align.value})}></zn-button>`)}
+            </zn-button-group>
+          </div>
+          <label class="remarkd-editor__image-field">
+            <span>Width</span>
+            <input .value=${data.width} placeholder="auto" size="6"
+                   @input=${(e: Event) => this.updateImageEdit({width: (e.target as HTMLInputElement).value})}>
+          </label>
+          <label class="remarkd-editor__image-field">
+            <span>Height</span>
+            <input .value=${data.height} placeholder="auto" size="6"
+                   @input=${(e: Event) => this.updateImageEdit({height: (e.target as HTMLInputElement).value})}>
+          </label>
+          <label class="remarkd-editor__image-field">
+            <span>Alt text</span>
+            <input .value=${data.alt}
+                   @input=${(e: Event) => this.updateImageEdit({alt: (e.target as HTMLInputElement).value})}>
+          </label>
+        </div>
+        <div class="remarkd-editor__image-buttons">
+          <zn-button type="button" color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
+          <zn-button type="button" color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
+          <span class="remarkd-editor__image-buttons-spacer"></span>
+          <zn-button type="button" icon-button="small" plain icon="code@lu"
+                     tooltip="Edit source" @click=${this.editImageSource}></zn-button>
+          <zn-button type="button" icon-button="small" plain icon="trash-2@lu" color="error"
+                     tooltip="Delete image" @click=${this.deleteImageBlock}></zn-button>
+        </div>
+      </div>`;
+  }
+
   private renderBlock(block: string, index: number) {
     if (this.editingIndex === index) {
+      if (this.imageEdit) {
+        return this.renderImageControls();
+      }
       return html`
         <div class="remarkd-editor__edit-wrap remarkd-rendered">
           <div class=${classMap({
@@ -682,15 +861,19 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
            })}>
         ${this.disabled || this.readonly ? '' : html`
           <div class="remarkd-editor__actions">
-            <zn-button type="button" icon-button="small" plain icon="plus@lu"
-                       tooltip="Add block below"
-                       @click=${() => this.insertDraftBlock(index + 1)}></zn-button>
             <span class="remarkd-editor__drag-handle"
                   title="Drag to move"
                   @pointerdown=${this.handleHandlePointerDown}>
-              <zn-icon src="grip-vertical@lu" size="18"></zn-icon>
+              <zn-icon src="grip-vertical@lu" size="16"></zn-icon>
             </span>
-          </div>`}
+            <zn-button type="button" icon-button="small" plain icon="plus@lu" icon-size="16"
+                       tooltip="Add block below"
+                       @click=${() => this.insertDraftBlock(index + 1)}></zn-button>
+          </div>
+          <zn-button class="remarkd-editor__delete"
+                     type="button" icon-button="small" plain icon="x@lu" icon-size="16" color="error"
+                     tooltip="Delete block"
+                     @click=${() => this.deleteBlock(index)}></zn-button>`}
         <div part="rendered" class="remarkd-editor__rendered remarkd-rendered"
              @click=${(e: MouseEvent) => this.handleRenderedClick(e, index)}>${unsafeHTML(remarkdParse(block))}
         </div>
@@ -711,12 +894,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
         ${editable ? html`
           <div part="toolbar" class="remarkd-editor__toolbar">
             ${BLOCK_TYPES.map(item => html`
-              <zn-button type="button" icon-button plain icon=${item.icon}
+              <zn-button type="button" icon-button plain icon=${item.icon} icon-size="18"
                          tooltip=${item.label}
                          @click=${() => this.handleToolbarInsert(item)}></zn-button>`)}
           </div>` : ''}
         <div class="remarkd-editor__body">
-          ${this.blocks.map((block, index) => this.renderBlock(block, index))}
+          ${this.renderBody()}
           <div class="remarkd-editor__add" @click=${() => this.insertDraftBlock(this.blocks.length)}>
             ${this.blocks.length === 0 && this.editingIndex === null ? this.placeholder : ''}
           </div>
@@ -726,27 +909,29 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   ?required=${this.required}
                   tabindex="-1"
                   aria-hidden="true"></textarea>
-        ${this.imageDialogOpen ? this.renderImageDialog() : ''}
       </div>`;
   }
 
-  private renderImageDialog() {
+  /** The block views, with the inline image picker spliced in when active. */
+  private renderBody() {
+    const views = this.blocks.map((block, index) => this.renderBlock(block, index));
+    if (this.imagePickerIndex !== null) {
+      views.splice(this.imagePickerIndex, 0, this.renderImagePicker());
+    }
+    return views;
+  }
+
+  private renderImagePicker() {
     return html`
-      <zn-dialog class="remarkd-editor__image-dialog"
-                 label="Add image"
-                 size="small"
-                 open
-                 @zn-close=${this.handleImageDialogClose}>
-        ${this.attachmentUrl ? html`
-          <zn-file class="remarkd-editor__image-file"
-                   label="Image"
-                   accept="image/*"
-                   droparea></zn-file>` : html`
-          <zn-input class="remarkd-editor__image-url"
-                    label="Image URL"
-                    placeholder="https://example.com/image.png"></zn-input>`}
-        <zn-button slot="footer" color="secondary" @click=${this.handleImageDialogClose}>Cancel</zn-button>
-        <zn-button slot="footer" color="primary" @click=${this.handleImageInsert}>Insert</zn-button>
-      </zn-dialog>`;
+      <div class="remarkd-editor__image-picker">
+        <zn-file class="remarkd-editor__image-file"
+                 label="Image"
+                 accept="image/*"
+                 droparea
+                 @zn-change=${this.handleImagePicked}></zn-file>
+        <zn-button type="button" icon-button="small" plain icon="x@lu"
+                   tooltip="Cancel"
+                   @click=${this.closeImagePicker}></zn-button>
+      </div>`;
   }
 }

package/src/components/remarkd-editor/remarkd-editor.scss

@@ -22,7 +22,7 @@
 }
 
 .remarkd-editor__body {
-  padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 88px;
+  padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 52px;
   min-height: 10rem;
 }
 
@@ -38,9 +38,10 @@
 
 .remarkd-editor__actions {
   position: absolute;
-  left: -80px;
-  top: 0;
+  left: -40px;
+  top: 4px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 2px;
   opacity: 0;
@@ -52,6 +53,22 @@
   opacity: 1;
 }
 
+.remarkd-editor__delete {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  z-index: 5;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.remarkd-editor__block:hover .remarkd-editor__delete,
+.remarkd-editor__delete:focus-within {
+  opacity: 1;
+}
+
+
+
 .remarkd-editor__drag-handle {
   display: inline-flex;
   align-items: center;
@@ -183,6 +200,92 @@
   }
 }
 
+.remarkd-editor__image-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-small);
+  border: 1px solid rgb(var(--zn-primary));
+  border-radius: var(--zn-border-radius);
+  background: var(--zn-color-neutral-0, white);
+  padding: var(--zn-spacing-small);
+}
+
+.remarkd-editor__image-controls-preview {
+  text-align: left;
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 240px;
+  }
+}
+
+.remarkd-editor__image-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--zn-spacing-small);
+  flex-wrap: wrap;
+}
+
+.remarkd-editor__image-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  span {
+    font-size: var(--zn-input-label-font-size-small);
+    color: var(--zn-input-label-color);
+    font-weight: var(--zn-font-weight-semibold);
+  }
+
+  input {
+    border: 1px solid rgb(var(--zn-border-color));
+    border-radius: var(--zn-border-radius);
+    background: var(--zn-color-neutral-0, white);
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    padding: 4px 8px;
+    outline: none;
+
+    &:focus {
+      border-color: rgb(var(--zn-primary));
+    }
+  }
+}
+
+.remarkd-editor__image-field:first-child input {
+  width: 100%;
+}
+
+.remarkd-editor__image-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+}
+
+.remarkd-editor__image-buttons-spacer {
+  margin-left: auto;
+}
+
+.remarkd-editor__image-picker {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zn-spacing-x-small);
+  margin: var(--zn-spacing-x-small) 0;
+
+  zn-file {
+    flex: 1;
+  }
+}
+
 .remarkd-editor__add {
   padding: var(--zn-spacing-x-small);
   min-height: 1.8em;

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -100,18 +100,16 @@ Second"></zn-remarkd-editor>`);
     expect(draft.value).to.equal('');
   });
 
-  it('should open the image dialog from the toolbar', async () => {
+  it('should show an inline zn-file picker from the toolbar image button', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor></zn-remarkd-editor>`);
+      <zn-remarkd-editor attachment-url="/upload"></zn-remarkd-editor>`);
     const buttons = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button');
     const imageButton = buttons[buttons.length - 1];
     imageButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
-    const dialog = el.shadowRoot!.querySelector('.remarkd-editor__image-dialog')!;
-    expect(dialog).to.exist;
-    // No attachment-url configured — the dialog falls back to a URL input.
-    expect(el.shadowRoot!.querySelector('.remarkd-editor__image-url')).to.exist;
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__body .remarkd-editor__image-picker')).to.exist;
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__image-file')).to.exist;
   });
 
   it('should toggle a checkbox in the source instead of opening the editor', async () => {
@@ -126,6 +124,42 @@ Second"></zn-remarkd-editor>`);
     expect(el.shadowRoot!.querySelector('.remarkd-editor__input')).to.not.exist;
   });
 
+  it('should open image controls for an image block and save caption/align/size', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="image::photo.png[Alt,640,480]"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const panel = el.shadowRoot!.querySelector('.remarkd-editor__image-controls')!;
+    expect(panel).to.exist;
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__input')).to.not.exist;
+
+    const caption = panel.querySelector<HTMLInputElement>('.remarkd-editor__image-field input')!;
+    caption.value = 'A caption';
+    caption.dispatchEvent(new Event('input', {bubbles: true}));
+    await el.updateComplete;
+
+    const buttons = el.shadowRoot!.querySelectorAll('.remarkd-editor__image-buttons zn-button');
+    buttons[0].dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('.A caption\nimage::photo.png[Alt,640,480]');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__rendered')!.innerHTML).to.contain('A caption');
+  });
+
+  it('should delete a block from its hover delete button', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title
+
+Second"></zn-remarkd-editor>`);
+    const deleteButton = el.shadowRoot!.querySelectorAll('.remarkd-editor__delete')[0];
+    deleteButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('Second');
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+  });
+
   it('should emit zn-change when a block edit changes the value', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);

package/web-test-runner.config.js

@@ -1,6 +1,6 @@
-import {removeViteLogging, vitePlugin} from '@remcovaes/web-test-runner-vite-plugin';
-import {playwrightLauncher} from '@web/test-runner-playwright';
 import {globbySync} from 'globby';
+import {playwrightLauncher} from '@web/test-runner-playwright';
+import {removeViteLogging, vitePlugin} from '@remcovaes/web-test-runner-vite-plugin';
 
 export default {
   rootDir: './',