@kubex/zinc 1.1.80 → 1.1.81

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

@@ -4,9 +4,12 @@ import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {property, query, state} from 'lit/decorators.js';
 import {parse as remarkdParse} from "remarkd-js";
+import {SlashMenuController} from "../slash-menu/slash-menu-controller";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
+import ZnSlashMenu from "../slash-menu";
+import type {SlashMenuItem} from "../slash-menu/slash-menu-items";
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnFile from "../file";
 
@@ -22,6 +25,8 @@ interface BlockType {
   label: string;
   icon: string;
   prefix?: string;
+  /** Where the caret lands within `prefix`. Defaults to the end. */
+  caretOffset?: number;
   image?: boolean;
 }
 
@@ -42,10 +47,15 @@ const BLOCK_TYPES: BlockType[] = [
   {label: 'Note', icon: 'info@lu', prefix: 'NOTE: '},
   {label: 'Tip', icon: 'lightbulb@lu', prefix: 'TIP: '},
   {label: 'Warning', icon: 'triangle-alert@lu', prefix: 'WARNING: '},
-  {label: 'Code', icon: 'code@lu', prefix: '```\n\n```'},
+  {label: 'Code', icon: 'code@lu', prefix: '```\n\n```', caretOffset: 4},
   {label: 'Image', icon: 'image@lu', image: true},
 ];
 
+/** The block types as slash menu insertions. Image opens the picker, so it inserts nothing. */
+const SLASH_ITEMS: SlashMenuItem[] = BLOCK_TYPES.map(item => item.image
+  ? {label: item.label, icon: item.icon, action: 'image'}
+  : {label: item.label, icon: item.icon, value: item.prefix ?? '', caretOffset: item.caretOffset});
+
 /**
  * @summary A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.
  * @documentation https://zinc.style/components/remarkd-editor
@@ -56,41 +66,57 @@ const BLOCK_TYPES: BlockType[] = [
  * @dependency zn-button-group
  * @dependency zn-icon
  * @dependency zn-file
+ * @dependency zn-slash-menu
  *
  * @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.
  *
  * @csspart base - The component's base wrapper.
  * @csspart toolbar - The always-visible block-insert toolbar.
+ * @csspart raw-toggle - The button that switches between the block view and the raw source view.
  * @csspart block - A rendered block wrapper.
  * @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 raw - The full-document textarea shown in raw source mode.
+ * @csspart slash-menu - The `zn-slash-menu` opened by typing "/" in an empty 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);
+  static dependencies = {
+    'zn-slash-menu': ZnSlashMenu
+  };
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-input', 'zn-change'],
   });
 
+  private readonly slashController = new SlashMenuController(this, {
+    menu: () => this.mountSlashMenu(),
+    // The menu only belongs in a block that is nothing but the slash command — a
+    // block prefix like "## " is not valid remarkd part-way through a line.
+    items: () => this.isSlashBlock() ? SLASH_ITEMS : [],
+    onSelect: item => this.handleSlashSelect(item)
+  });
+
   private editingDraft = '';
+  private rawEntryValue = '';
   private suppressValueSync = false;
   private suppressBlurCommit = false;
 
   @query('.remarkd-editor__validation') private validationInput: HTMLTextAreaElement;
+  @query('zn-slash-menu') private slashMenuElement: ZnSlashMenu | null;
 
   @state() private blocks: string[] = [];
   @state() private editingIndex: number | null = null;
-  @state() private slashMenuOpen = false;
-  @state() private slashQuery = '';
-  @state() private slashActiveIndex = 0;
+  /** Renders the slash menu only once it has been needed. */
+  @state() private hasSlashMenu = 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 = '';
+  @state() private rawMode = false;
 
   private pendingDragHandle: HTMLElement | null = null;
   private dragStartX = 0;
@@ -116,6 +142,9 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
    */
   @property({attribute: 'attachment-url'}) attachmentUrl = '';
 
+  /** Adds a toolbar toggle that swaps the block view for the full remarkd source. */
+  @property({type: Boolean, attribute: 'allow-raw', reflect: true}) allowRaw = false;
+
   /** Makes the editor required for form submission. */
   @property({type: Boolean, reflect: true}) required = false;
 
@@ -152,6 +181,10 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   /** Starts editing the first block, or a new block if the document is empty. */
   focus() {
+    if (this.rawMode) {
+      this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__raw')?.focus();
+      return;
+    }
     if (this.blocks.length) {
       this.startEdit(0);
     } else {
@@ -159,9 +192,10 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   }
 
-  /** Commits any in-progress block edit. */
+  /** Commits any in-progress block or raw edit. */
   blur() {
-    this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')?.blur();
+    const selector = this.rawMode ? '.remarkd-editor__raw' : '.remarkd-editor__input';
+    this.shadowRoot?.querySelector<HTMLTextAreaElement>(selector)?.blur();
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
@@ -262,7 +296,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     if (image) {
       this.editingIndex = index;
       this.imageEdit = image;
-      this.slashMenuOpen = false;
+      this.slashController.close();
       return;
     }
 
@@ -339,7 +373,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     this.editingIndex = index;
     this.imageEdit = null;
     this.editShell = this.computeEditShell(this.editingDraft);
-    this.slashMenuOpen = false;
+    this.slashController.close();
     void this.focusInput();
   }
 
@@ -404,6 +438,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     await this.updateComplete;
     const input = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input');
     if (input) {
+      // Each edit renders its own textarea, so the slash menu is re-pointed at it.
+      this.slashController.attach(input);
       this.autosize(input);
       input.focus();
       input.setSelectionRange(input.value.length, input.value.length);
@@ -452,7 +488,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       this.closeImageEdit();
       return index + 1;
     }
-    this.slashMenuOpen = false;
+    this.slashController.close();
     if (this.editingIndex === null) return this.blocks.length;
     const index = this.editingIndex;
     const parts = this.splitBlocks(this.editingDraft);
@@ -463,11 +499,6 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     return index + parts.length;
   };
 
-  private get filteredSlashItems(): BlockType[] {
-    const filter = this.slashQuery.toLowerCase();
-    return BLOCK_TYPES.filter(item => item.label.toLowerCase().includes(filter));
-  }
-
   private handleDraftInput = (e: Event) => {
     const input = e.target as HTMLTextAreaElement;
     this.editingDraft = input.value;
@@ -479,46 +510,14 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       void this.updateComplete.then(() => this.autosize(input));
     }
 
-    // A leading "/" in an otherwise fresh block opens the slash menu; the rest
-    // of the line filters it.
-    if (input.value === '/') {
-      this.slashMenuOpen = true;
-      this.slashQuery = '';
-      this.slashActiveIndex = 0;
-    } else if (this.slashMenuOpen) {
-      if (input.value.startsWith('/') && !input.value.includes('\n')) {
-        this.slashQuery = input.value.slice(1);
-        this.slashActiveIndex = 0;
-      } else {
-        this.slashMenuOpen = false;
-      }
-    }
-
     this.emit('zn-input');
   };
 
   private handleEditKeydown = (e: KeyboardEvent) => {
     const input = e.target as HTMLTextAreaElement;
 
-    if (this.slashMenuOpen) {
-      const items = this.filteredSlashItems;
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        e.preventDefault();
-        const step = e.key === 'ArrowDown' ? 1 : -1;
-        this.slashActiveIndex = (this.slashActiveIndex + step + items.length) % Math.max(items.length, 1);
-        return;
-      }
-      if (e.key === 'Enter' && items.length) {
-        e.preventDefault();
-        this.applySlashItem(items[this.slashActiveIndex] ?? items[0]);
-        return;
-      }
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.slashMenuOpen = false;
-        return;
-      }
-    }
+    // The slash menu claims navigation, Enter and Escape in the capture phase.
+    if (this.slashController.open) return;
 
     if (e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
@@ -534,27 +533,32 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   };
 
-  private applySlashItem(item: BlockType) {
-    this.slashMenuOpen = false;
-    const index = this.editingIndex ?? this.blocks.length;
-    const input = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input');
+  /** Whether the block being edited is nothing but the slash command. */
+  private isSlashBlock(): boolean {
+    const value = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')?.value ?? '';
+    return value.startsWith('/') && !value.includes('\n');
+  }
 
-    if (item.image) {
-      // Drop the "/..." draft block, then run the image flow in its place.
-      this.editingDraft = '';
-      if (input) input.value = '';
-      input?.blur();
-      this.pickImage(index);
-      return;
+  private async mountSlashMenu(): Promise<ZnSlashMenu | null> {
+    if (!this.hasSlashMenu) {
+      this.hasSlashMenu = true;
+      await this.updateComplete;
     }
+    return this.slashMenuElement;
+  }
 
-    this.editingDraft = item.prefix ?? '';
-    if (input) {
-      input.value = this.editingDraft;
-      this.autosize(input);
-      input.focus();
-      input.setSelectionRange(input.value.length, input.value.length);
-    }
+  /** Returns false for items the controller should not insert text for. */
+  private handleSlashSelect(item: SlashMenuItem): boolean {
+    if (item.action !== 'image') return true;
+
+    const index = this.editingIndex ?? this.blocks.length;
+    // Let the controller strip the "/…" text first, then drop the empty draft
+    // block and run the image flow in its place.
+    void this.updateComplete.then(() => {
+      this.blur();
+      this.pickImage(index);
+    });
+    return false;
   }
 
   private handleEditPaste = (e: ClipboardEvent) => {
@@ -566,10 +570,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   };
 
   private handleDragOver = (e: DragEvent) => {
+    if (this.rawMode) return;
     if (e.dataTransfer?.types.includes('Files')) e.preventDefault();
   };
 
   private handleDrop = (e: DragEvent) => {
+    if (this.rawMode) return;
     const file = Array.from(e.dataTransfer?.files ?? []).find(f => f.type.startsWith('image/'));
     if (!file) return;
     e.preventDefault();
@@ -730,6 +736,61 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     input.style.height = `${input.scrollHeight}px`;
   }
 
+  private toggleRawMode = () => {
+    if (this.rawMode) {
+      this.commitRaw();
+      this.rawMode = false;
+      return;
+    }
+    if (this.editingIndex !== null) this.commitEdit();
+    // The per-block textarea the menu watches is about to be replaced.
+    this.slashController.detach();
+    this.rawEntryValue = this.value;
+    this.rawMode = true;
+    void this.focusRaw();
+  };
+
+  private async focusRaw() {
+    await this.updateComplete;
+    const raw = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__raw');
+    if (!raw) return;
+    raw.focus();
+    raw.setSelectionRange(raw.value.length, raw.value.length);
+  }
+
+  /**
+   * Raw mode keeps the whole document in one textarea, so the textarea — not
+   * the block list — is authoritative while it is open: re-splitting on every
+   * keystroke would normalise blank lines out from under the cursor.
+   */
+  private handleRawInput = (e: Event) => {
+    const input = e.target as HTMLTextAreaElement;
+    if (input.value === this.value) return;
+    this.suppressValueSync = true;
+    this.value = input.value;
+    this.formControlController.updateValidity();
+    this.emit('zn-input');
+  };
+
+  /**
+   * Re-splits the raw source into blocks. Not `updateBlocks` — that only
+   * reports a change when the re-join differs from the value, and raw edits
+   * have already written straight to the value.
+   */
+  private commitRaw = () => {
+    const blocks = this.splitBlocks(this.value || '');
+    const joined = blocks.join('\n\n');
+    this.blocks = blocks;
+    if (joined !== this.value) {
+      this.suppressValueSync = true;
+      this.value = joined;
+    }
+    if (this.value === this.rawEntryValue) return;
+    this.rawEntryValue = this.value;
+    this.formControlController.updateValidity();
+    this.emit('zn-change');
+  };
+
   private handleToolbarInsert(item: BlockType) {
     if (this.editingIndex !== null) this.suppressBlurCommit = true;
     const index = this.editingIndex !== null ? this.commitEdit() : this.blocks.length;
@@ -740,27 +801,6 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   }
 
-  private renderSlashMenu() {
-    const items = this.filteredSlashItems;
-    if (!items.length) return '';
-    return html`
-      <div part="slash-menu" class="remarkd-editor__slash-menu">
-        ${items.map((item, i) => html`
-          <button type="button"
-                  class=${classMap({
-                    'remarkd-editor__slash-item': true,
-                    'remarkd-editor__slash-item--active': i === this.slashActiveIndex,
-                  })}
-                  @mousedown=${(e: Event) => {
-                    e.preventDefault();
-                    this.applySlashItem(item);
-                  }}>
-            <zn-icon src=${item.icon} size="16"></zn-icon>
-            <span>${item.label}</span>
-          </button>`)}
-      </div>`;
-  }
-
   private renderImageControls() {
     const data = this.imageEdit;
     if (!data) return '';
@@ -847,7 +887,6 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                       @paste=${this.handleEditPaste}
                       @blur=${this.handleEditBlur}></textarea>
           </div>
-          ${this.slashMenuOpen ? this.renderSlashMenu() : ''}
         </div>`;
     }
 
@@ -893,17 +932,29 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
            @drop=${this.handleDrop}>
         ${editable ? html`
           <div part="toolbar" class="remarkd-editor__toolbar">
-            ${BLOCK_TYPES.map(item => html`
+            ${this.rawMode ? '' : BLOCK_TYPES.map(item => html`
               <zn-button type="button" icon-button plain icon=${item.icon} icon-size="18"
                          tooltip=${item.label}
                          @click=${() => this.handleToolbarInsert(item)}></zn-button>`)}
+            ${this.allowRaw ? html`
+              <zn-button part="raw-toggle" class="remarkd-editor__raw-toggle"
+                         type="button" icon-button icon="code-xml@lu" icon-size="18"
+                         ?plain=${!this.rawMode}
+                         tooltip=${this.rawMode ? 'Show blocks' : 'Show raw source'}
+                         @click=${this.toggleRawMode}></zn-button>` : ''}
           </div>` : ''}
-        <div class="remarkd-editor__body">
-          ${this.renderBody()}
-          <div class="remarkd-editor__add" @click=${() => this.insertDraftBlock(this.blocks.length)}>
-            ${this.blocks.length === 0 && this.editingIndex === null ? this.placeholder : ''}
-          </div>
+        <div class=${classMap({
+          'remarkd-editor__body': true,
+          'remarkd-editor__body--raw': this.rawMode,
+        })}>
+          ${this.rawMode ? this.renderRaw() : html`
+            ${this.renderBody()}
+            <div class="remarkd-editor__add" @click=${() => this.insertDraftBlock(this.blocks.length)}>
+              ${this.blocks.length === 0 && this.editingIndex === null ? this.placeholder : ''}
+            </div>`}
         </div>
+        ${this.hasSlashMenu ? html`
+          <zn-slash-menu part="slash-menu" heading="Insert block"></zn-slash-menu>` : ''}
         <textarea class="remarkd-editor__validation"
                   .value=${this.value}
                   ?required=${this.required}
@@ -912,6 +963,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       </div>`;
   }
 
+  private renderRaw() {
+    return html`
+      <textarea part="raw"
+                class="remarkd-editor__raw"
+                placeholder=${this.placeholder}
+                spellcheck="false"
+                .value=${this.value}
+                @input=${this.handleRawInput}
+                @blur=${this.commitRaw}></textarea>`;
+  }
+
   /** 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));

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

@@ -26,6 +26,30 @@
   min-height: 10rem;
 }
 
+// Raw mode has no gutter handles, so it reclaims the left padding.
+.remarkd-editor__body--raw {
+  display: flex;
+  padding-left: var(--zn-spacing-large);
+}
+
+.remarkd-editor__raw-toggle {
+  margin-left: auto;
+}
+
+.remarkd-editor__raw {
+  flex: 1;
+  min-height: 10rem;
+  resize: vertical;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0;
+  outline: none;
+}
+
 .remarkd-editor--disabled {
   opacity: 0.6;
   pointer-events: none;
@@ -297,42 +321,6 @@
   position: relative;
 }
 
-.remarkd-editor__slash-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 10;
-  min-width: 12rem;
-  margin-top: 4px;
-  padding: 4px;
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius);
-  background: var(--zn-color-neutral-0, white);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  display: flex;
-  flex-direction: column;
-}
-
-.remarkd-editor__slash-item {
-  display: flex;
-  align-items: center;
-  gap: var(--zn-spacing-x-small);
-  padding: 6px 8px;
-  border: 0;
-  border-radius: var(--zn-border-radius);
-  background: none;
-  color: var(--zn-color-text, #222);
-  font: inherit;
-  font-size: 0.875rem;
-  text-align: left;
-  cursor: pointer;
-
-  &:hover,
-  &--active {
-    background: var(--zn-color-neutral-100);
-  }
-}
-
 .remarkd-editor__validation {
   position: absolute;
   width: 1px;

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

@@ -1,6 +1,16 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnRemarkdEditor from './remarkd-editor.component';
+import type ZnSlashMenu from '../slash-menu';
+
+/** Types into the block being edited, moving the caret to the end as a keystroke would. */
+function typeInBlock(el: ZnRemarkdEditor, value: string): HTMLTextAreaElement {
+  const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+  input.value = value;
+  input.setSelectionRange(value.length, value.length);
+  input.dispatchEvent(new Event('input', {bubbles: true}));
+  return input;
+}
 
 describe('<zn-remarkd-editor>', () => {
   it('should render a component', async () => {
@@ -69,18 +79,50 @@ Second"></zn-remarkd-editor>`);
     expect(el.shadowRoot!.querySelector('.remarkd-editor__toolbar')).to.exist;
   });
 
-  it('should open the slash menu when "/" starts an empty block', async () => {
+  it('should open zn-slash-menu with the block types when "/" starts an empty block', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
 
-    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
-    input.value = '/';
-    input.dispatchEvent(new Event('input', {bubbles: true}));
+    typeInBlock(el, '/');
+    await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
+
+    const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
+    expect(menu.items.map(item => item.label)).to.contain('Heading 1');
+    expect(menu.activeItem?.label).to.equal('Text');
+  });
+
+  it('should not open the slash menu part-way through a block', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    typeInBlock(el, 'Hello /');
+    await el.updateComplete;
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(el.shadowRoot!.querySelector('zn-slash-menu[open]')).to.not.exist;
+  });
+
+  it('should insert the chosen block prefix over the slash command', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
 
-    expect(el.shadowRoot!.querySelector('.remarkd-editor__slash-menu')).to.exist;
+    const input = typeInBlock(el, '/note');
+    await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
+
+    const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
+    expect(menu.activeItem?.label).to.equal('Note');
+
+    input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(input.value).to.equal('NOTE: ');
+    expect(el.shadowRoot!.querySelector('zn-slash-menu[open]')).to.not.exist;
   });
 
   it('should start a new block on shift+enter', async () => {
@@ -100,6 +142,24 @@ Second"></zn-remarkd-editor>`);
     expect(draft.value).to.equal('');
   });
 
+  it('should swap the slash command for the image picker when Image is chosen', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor attachment-url="/upload" value="Hello"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = typeInBlock(el, '/image');
+    await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
+
+    input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true}));
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__image-picker'),
+      'the image picker never opened');
+
+    // The "/image" draft is dropped rather than committed as a block.
+    expect(el.value).to.equal('');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__input')).to.not.exist;
+  });
+
   it('should show an inline zn-file picker from the toolbar image button', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor attachment-url="/upload"></zn-remarkd-editor>`);
@@ -160,6 +220,50 @@ Second"></zn-remarkd-editor>`);
     expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
   });
 
+  it('should only show the raw toggle when allow-raw is set', async () => {
+    const plain = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    expect(plain.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')).to.not.exist;
+
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor allow-raw value="Hello"></zn-remarkd-editor>`);
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')).to.exist;
+  });
+
+  it('should swap the blocks for a full-source textarea and commit edits on toggle back', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor allow-raw value="# Title
+
+Second"></zn-remarkd-editor>`);
+    let changes = 0;
+    el.addEventListener('zn-change', () => {
+      changes++;
+    });
+
+    const toggle = el.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')!;
+    toggle.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    const raw = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__raw')!;
+    expect(raw).to.exist;
+    expect(raw.value).to.equal('# Title\n\nSecond');
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(0);
+
+    raw.value = '# Changed\n\nSecond\n\nThird';
+    raw.dispatchEvent(new Event('input', {bubbles: true}));
+    await el.updateComplete;
+    expect(el.value).to.equal('# Changed\n\nSecond\n\nThird');
+
+    el.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')!
+      .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    const blocks = el.shadowRoot!.querySelectorAll('.remarkd-editor__block');
+    expect(blocks.length).to.equal(3);
+    expect(blocks[0].innerHTML).to.contain('Changed');
+    expect(changes).to.be.greaterThan(0);
+  });
+
   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>`);