@aquera/nile-elements 1.8.5 → 1.8.7

package/src/nile-markdown-editor/nile-markdown-editor.css.ts

@@ -0,0 +1,267 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Markdown editor CSS
+ */
+export const styles = css`
+  :host {
+    position: relative;
+    display: block;
+    font-family: inherit;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var( --nile-moz-osx-font-smoothing,var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .editor {
+    width: 100%;
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor--disabled {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    flex-wrap: wrap;
+    padding: 8px;
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .editor--disabled .header {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  }
+
+  .tabs {
+    display: flex;
+  }
+
+  /* Slimmer segmented control inside the editor header. */
+  .tabs nile-button-toggle::part(base) {
+    height: 28px;
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xs))
+      var(--nile-spacing-md, var(--ng-spacing-md));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+  }
+
+  .tab__content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+ 
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .toolbar__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: inherit;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    transition: background 0.15s ease;
+  }
+
+  .toolbar__button:hover {
+    background: var(--nile-colors-dark-100, var(--ng-colors-bg-primary-hover));
+  }
+
+  .toolbar__menu {
+    display: inline-flex;
+  }
+
+  .toolbar__menu .toolbar__button {
+    width: auto;
+    gap: 2px;
+  }
+
+  .toolbar__button nile-icon {
+    pointer-events: none;
+  }
+
+  .toolbar__divider {
+    margin: 0 4px;
+    display: inline-block;
+    height: 24px;
+    width: 1px;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+  }
+
+  .toolbar__glyph--heading {
+    font-weight: bold;
+  }
+
+  .toolbar__glyph--strikethrough {
+    text-decoration: line-through;
+  }
+
+  .toolbar__glyph--code {
+    font-family: var(--nile-font-family-mono, monospace);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+  }
+
+  .body {
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    min-height: 160px;
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .pane {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Draggable divider between the write and preview panes in split mode. */
+  .gutter {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1px;
+    align-self: stretch;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  /* Widen the hit area without shifting the 1px visual line. */
+  .gutter::before {
+    content: '';
+    position: absolute;
+    inset: 0 -4px;
+  }
+
+  .gutter:hover,
+  .body--dragging .gutter {
+    background: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+  }
+
+  /* Keep the drag smooth: no text selection or pointer capture by the panes. */
+  .body--dragging {
+    cursor: col-resize;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .body--dragging .pane {
+    pointer-events: none;
+  }
+
+  .pane--write {
+    display: flex;
+  }
+
+  textarea {
+    flex: 1;
+    /* The body owns the resize/height now; the textarea fills it and scrolls
+       its own overflow. min-height:0 lets it shrink when the body shrinks. */
+    min-height: 0;
+    width: 100%;
+    padding: 12px;
+    border: none;
+    outline: none;
+    resize: none;
+    box-sizing: border-box;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    word-break: break-word;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  textarea::placeholder {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    opacity: 0.7;
+  }
+
+  .editor--disabled textarea {
+    background: var(
+      --nile-colors-dark-200,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .pane--preview {
+    min-height: 0;
+    padding: 12px;
+    overflow: auto;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md))
+      var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .editor--disabled .pane--preview {
+    background: var(
+      --nile-colors-dark-200,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+  }
+
+  .editor--split .pane--preview {
+    border-radius: 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md)) 0;
+  }
+
+  .editor--split textarea {
+    border-radius: 0 0 0 var(--nile-radius-radius-xl, var(--ng-radius-md));
+  }
+
+  .preview-empty {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    opacity: 0.7;
+  }
+`;

package/src/nile-markdown-editor/nile-markdown-editor.test.ts

@@ -0,0 +1,402 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-markdown-editor';
+import NileMarkdownEditor from './nile-markdown-editor';
+
+const getTextarea = (el: NileMarkdownEditor) =>
+  el.shadowRoot!.querySelector('textarea')!;
+
+describe('NileMarkdownEditor', () => {
+  // === RENDERING ===
+  it('1. should render without errors', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el).to.exist;
+  });
+
+  it('2. should have a shadow root', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot).to.not.be.null;
+  });
+
+  it('3. should render a textarea in write mode', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(getTextarea(el)).to.exist;
+  });
+
+  it('4. should have base, header, toolbar, textarea parts', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot!.querySelector('[part~="base"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="header"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="toolbar"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="textarea"]')).to.exist;
+  });
+
+  it('5. should be instance of NileMarkdownEditor', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el).to.be.instanceOf(NileMarkdownEditor);
+  });
+
+  // === DEFAULT PROPERTIES ===
+  it('6. should default to write mode', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.mode).to.equal('write');
+  });
+
+  it('7. should default value to empty string', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.value).to.equal('');
+  });
+
+  it('8. should default rows to 8', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.rows).to.equal(8);
+  });
+
+  // === VALUE ===
+  it('9. should pass value to the textarea', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="# Hi"></nile-markdown-editor>`
+    );
+    expect(getTextarea(el).value).to.equal('# Hi');
+  });
+
+  it('10. should update value on textarea input', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.value = 'typed';
+    ta.dispatchEvent(new InputEvent('input', { bubbles: true }));
+    expect(el.value).to.equal('typed');
+  });
+
+  // === MODES ===
+  it('11. should show preview pane in preview mode', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        mode="preview"
+        value="# Title"
+      ></nile-markdown-editor>`
+    );
+    const preview = el.shadowRoot!.querySelector('[part~="preview"]');
+    expect(preview).to.exist;
+    expect(el.shadowRoot!.querySelector('textarea')).to.not.exist;
+  });
+
+  it('12. should render markdown in the preview', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        mode="preview"
+        value="# Title"
+      ></nile-markdown-editor>`
+    );
+    const md = el.shadowRoot!.querySelector('nile-markdown')!;
+    await md.updateComplete;
+    expect(md.shadowRoot!.querySelector('h1')!.textContent).to.equal('Title');
+  });
+
+  it('13. should show both panes in split mode', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        mode="split"
+        value="text"
+      ></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot!.querySelector('textarea')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="preview"]')).to.exist;
+  });
+
+  it('14. should switch mode via tab click and emit nile-mode-change', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    const tabs = el.shadowRoot!.querySelectorAll('nile-button-toggle');
+    setTimeout(() => (tabs[1] as HTMLElement).click());
+    const event = await oneEvent(el, 'nile-mode-change');
+    expect(event.detail.mode).to.equal('preview');
+    expect(el.mode).to.equal('preview');
+  });
+
+  it('15. should show empty preview placeholder', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor mode="preview"></nile-markdown-editor>`
+    );
+    const empty = el.shadowRoot!.querySelector('.preview-empty');
+    expect(empty).to.exist;
+  });
+
+  // === TOOLBAR ===
+  it('16. should render toolbar buttons', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    const buttons = el.shadowRoot!.querySelectorAll('.toolbar__button');
+    expect(buttons.length).to.equal(9);
+  });
+
+  it('17. should hide toolbar with hide-toolbar', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor hide-toolbar></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot!.querySelector('[part~="toolbar"]')).to.not.exist;
+  });
+
+  it('18. bold button should wrap the selection', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="hello world"></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, 5);
+    const bold =
+      el.shadowRoot!.querySelector<HTMLButtonElement>('[title^="Bold"]')!;
+    bold.click();
+    expect(el.value).to.equal('**hello** world');
+  });
+
+  it('19. bold button should unwrap an already-bold selection', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        value="**hello** world"
+      ></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(2, 7); // "hello"
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[title^="Bold"]')!.click();
+    expect(el.value).to.equal('hello world');
+  });
+
+  it('20. bold button should insert placeholder without selection', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    getTextarea(el).setSelectionRange(0, 0);
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[title^="Bold"]')!.click();
+    expect(el.value).to.equal('**bold text**');
+  });
+
+  it('21. heading button should prefix the line', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="Title"></nile-markdown-editor>`
+    );
+    getTextarea(el).setSelectionRange(0, 0);
+    el.shadowRoot!.querySelector<HTMLButtonElement>(
+      '[title="Heading"]'
+    )!.click();
+    expect(el.value).to.equal('### Title');
+  });
+
+  it('22. heading button should toggle the prefix off', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="### Title"></nile-markdown-editor>`
+    );
+    getTextarea(el).setSelectionRange(0, 0);
+    el.shadowRoot!.querySelector<HTMLButtonElement>(
+      '[title="Heading"]'
+    )!.click();
+    expect(el.value).to.equal('Title');
+  });
+
+  it('23. bulleted list should prefix every selected line', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        value=${'one\ntwo\nthree'}
+      ></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, ta.value.length);
+    el.shadowRoot!.querySelector<HTMLButtonElement>(
+      '[title="Bulleted list"]'
+    )!.click();
+    expect(el.value).to.equal('- one\n- two\n- three');
+  });
+
+  it('24. numbered list should number every selected line', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value=${'one\ntwo'}></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, ta.value.length);
+    el.shadowRoot!.querySelector<HTMLButtonElement>(
+      '[title="Numbered list"]'
+    )!.click();
+    expect(el.value).to.equal('1. one\n2. two');
+  });
+
+  it('25. link button should insert a markdown link', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="docs"></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, 4);
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[title^="Link"]')!.click();
+    expect(el.value).to.equal('[docs](url)');
+  });
+
+  // === EVENTS ===
+  it('26. should emit nile-input on typing', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    setTimeout(() => {
+      ta.value = 'abc';
+      ta.dispatchEvent(new InputEvent('input', { bubbles: true }));
+    });
+    const event = await oneEvent(el, 'nile-input');
+    expect(event.detail.value).to.equal('abc');
+  });
+
+  it('27. should emit nile-input on toolbar action', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    setTimeout(() =>
+      el
+        .shadowRoot!.querySelector<HTMLButtonElement>('[title^="Bold"]')!
+        .click()
+    );
+    const event = await oneEvent(el, 'nile-input');
+    expect(event.detail.value).to.equal('**bold text**');
+  });
+
+  it('28. should emit nile-change on textarea change', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    setTimeout(() => {
+      ta.value = 'done';
+      ta.dispatchEvent(new InputEvent('input', { bubbles: true }));
+      ta.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    const event = await oneEvent(el, 'nile-change');
+    expect(event.detail.value).to.equal('done');
+  });
+
+  // === KEYBOARD SHORTCUTS ===
+  it('29. Ctrl+B should bold the selection', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor value="hi"></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, 2);
+    ta.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'b', ctrlKey: true, bubbles: true })
+    );
+    expect(el.value).to.equal('**hi**');
+  });
+
+  // === DISABLED / READONLY ===
+  it('30. should disable the textarea when disabled', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor disabled></nile-markdown-editor>`
+    );
+    expect(getTextarea(el).disabled).to.be.true;
+  });
+
+  it('31. should make the textarea readonly when readonly', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor readonly></nile-markdown-editor>`
+    );
+    expect(getTextarea(el).readOnly).to.be.true;
+  });
+
+  it('32. toolbar actions should not modify a readonly editor', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor readonly value="text"></nile-markdown-editor>`
+    );
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[title^="Bold"]')!.click();
+    expect(el.value).to.equal('text');
+  });
+
+  // === MISC ===
+  it('33. should reflect mode attribute', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor mode="split"></nile-markdown-editor>`
+    );
+    expect(el.getAttribute('mode')).to.equal('split');
+  });
+
+  it('34. should apply placeholder to the textarea', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        placeholder="Type here"
+      ></nile-markdown-editor>`
+    );
+    expect(getTextarea(el).placeholder).to.equal('Type here');
+  });
+
+  it('35. should have static styles', () => {
+    expect(NileMarkdownEditor.styles).to.exist;
+  });
+
+  // === TOOLS ALLOWLIST ===
+  it('36. should show all tools by default', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot!.querySelectorAll('.toolbar__button').length).to.equal(9);
+  });
+
+  it('37. should only show allowlisted tools', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        tools='["bold","italic","link"]'
+      ></nile-markdown-editor>`
+    );
+    const buttons = el.shadowRoot!.querySelectorAll('.toolbar__button');
+    expect(buttons.length).to.equal(3);
+    expect(el.shadowRoot!.querySelector('[title^="Bold"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[title^="Italic"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[title^="Link"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[title^="Heading"]')).to.not.exist;
+  });
+
+  it('38. should drop empty groups (no dangling dividers)', async () => {
+    // "link" is alone in the last group; "bold" is in the first group.
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor tools='["bold","link"]'></nile-markdown-editor>`
+    );
+    const dividers = el.shadowRoot!.querySelectorAll('.toolbar__divider');
+    // Two non-empty groups => exactly one divider between them.
+    expect(dividers.length).to.equal(1);
+  });
+
+  it('39. should hide the whole toolbar when no allowlisted tool matches', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor tools='["nonexistent"]'></nile-markdown-editor>`
+    );
+    expect(el.shadowRoot!.querySelector('[part~="toolbar"]')).to.not.exist;
+  });
+
+  it('40. should disable a tool keyboard shortcut when it is not allowlisted', async () => {
+    const el = await fixture<NileMarkdownEditor>(
+      html`<nile-markdown-editor
+        tools='["italic"]'
+        value="hello world"
+      ></nile-markdown-editor>`
+    );
+    const ta = getTextarea(el);
+    ta.setSelectionRange(0, 5);
+    // Ctrl+B is bold, which is NOT allowlisted -> no change.
+    ta.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'b', ctrlKey: true, bubbles: true })
+    );
+    expect(el.value).to.equal('hello world');
+  });
+});