@dile/editor 3.0.18 → 3.0.19

package/editor.js

@@ -1,3 +1,5 @@
 import { DileEditor } from "./src/DileEditor.js";
 
-window.customElements.define("dile-editor", DileEditor);
+if (!customElements.get("dile-editor")) {
+  window.customElements.define("dile-editor", DileEditor);
+}

package/editor.spec.js

@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './editor.js';
+
+describe('dile-editor', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function waitFor(fn, timeout = 5000) {
+    return new Promise((resolve, reject) => {
+      const start = Date.now();
+      const check = () => {
+        const result = fn();
+        if (result) return resolve(result);
+        if (Date.now() - start > timeout) return reject(new Error('waitFor timed out'));
+        setTimeout(check, 20);
+      };
+      check();
+    });
+  }
+
+  async function renderEditor(html = '<dile-editor></dile-editor>') {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-editor');
+    await el.updateComplete;
+    await waitFor(() => el.shadowRoot.querySelector('dile-editor-markdown .ProseMirror'));
+    return el;
+  }
+
+  it('renders the view tabs and the markdown editor with its toolbar', async () => {
+    const el = await renderEditor();
+
+    expect(el.shadowRoot.querySelector('dile-tabs')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-pages')).toBeTruthy();
+
+    const markdownEditor = el.shadowRoot.querySelector('dile-editor-markdown');
+    expect(markdownEditor.querySelector('dile-editor-toolbar')).toBeTruthy();
+
+    const content = markdownEditor.querySelector('.ProseMirror');
+    expect(content.getAttribute('contenteditable')).toBe('true');
+  });
+
+  it('renders a label when the label property is set', async () => {
+    const el = await renderEditor('<dile-editor label="My editor"></dile-editor>');
+    expect(el.shadowRoot.querySelector('label').textContent).toBe('My editor');
+  });
+
+  it('reflects typed content back through the value property', async () => {
+    const el = await renderEditor();
+
+    el.updateValue({ detail: { content: 'Hello world' } });
+    await el.updateComplete;
+
+    expect(el.value).toBe('Hello world');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "description": "Flexible Web Component for rich text editing with WYSIWYG and Markdown support. Easy to integrate, customizable UI, powered by ProseMirror.",
   "keywords": [
     "markdown",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@dile/icons": "^2.5.1",
-    "@dile/ui": "^3.4.5",
+    "@dile/ui": "^3.4.6",
     "lit": "^2.7.0 || ^3.0.0",
     "prosemirror-commands": "^1.6.2",
     "prosemirror-example-setup": "^1.2.3",
@@ -42,5 +42,5 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.37.0"
   },
-  "gitHead": "31136286663cc7482a95a8813d845e73c3f6c57d"
+  "gitHead": "57a54e50de1a24d64dcf478fa6d39624e1f775eb"
 }

package/src/dile-editor-image-dialog.js

@@ -74,4 +74,6 @@ export class DileEditorImageDialog extends DileI18nMixin(LitElement) {
     this.altInput.value = '';
   }
 }
-customElements.define('dile-editor-image-dialog', DileEditorImageDialog);
+if (!customElements.get('dile-editor-image-dialog')) {
+  customElements.define('dile-editor-image-dialog', DileEditorImageDialog);
+}

package/src/dile-editor-image-dialog.spec.js

@@ -0,0 +1,43 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './dile-editor-image-dialog.js';
+
+describe('dile-editor-image-dialog', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDialog() {
+    document.body.innerHTML = '<dile-editor-image-dialog></dile-editor-image-dialog>';
+    const el = document.body.querySelector('dile-editor-image-dialog');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the src and alt inputs', async () => {
+    const el = await renderDialog();
+    expect(el.srcInput).toBeTruthy();
+    expect(el.altInput).toBeTruthy();
+  });
+
+  it('opens the menu overlay', async () => {
+    const el = await renderDialog();
+    let opened = false;
+    el.menu.addEventListener('overlay-opened', () => { opened = true; });
+
+    el.open({ state: { selection: {} } });
+
+    expect(opened).toBe(true);
+  });
+
+  it('dispatches accept-image-dialog with the entered src and alt', async () => {
+    const el = await renderDialog();
+    el.srcInput.value = 'https://example.com/img.png';
+    el.altInput.value = 'An image';
+
+    let detail = null;
+    el.addEventListener('accept-image-dialog', (e) => { detail = e.detail; });
+    el.accept();
+
+    expect(detail).toEqual({ src: 'https://example.com/img.png', alt: 'An image' });
+  });
+});

package/src/dile-editor-link-dialog.js

@@ -75,4 +75,6 @@ export class DileEditorLinkDialog extends DileI18nMixin(LitElement) {
     this.titleInput.value = '';
   }
 }
-customElements.define('dile-editor-link-dialog', DileEditorLinkDialog);
+if (!customElements.get('dile-editor-link-dialog')) {
+  customElements.define('dile-editor-link-dialog', DileEditorLinkDialog);
+}

package/src/dile-editor-link-dialog.spec.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './dile-editor-link-dialog.js';
+
+describe('dile-editor-link-dialog', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDialog() {
+    document.body.innerHTML = '<dile-editor-link-dialog></dile-editor-link-dialog>';
+    const el = document.body.querySelector('dile-editor-link-dialog');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the url and title inputs', async () => {
+    const el = await renderDialog();
+    expect(el.urlInput).toBeTruthy();
+    expect(el.titleInput).toBeTruthy();
+  });
+
+  it('opens and closes the menu overlay', async () => {
+    const el = await renderDialog();
+    let opened = false;
+    let closed = false;
+    el.menu.addEventListener('overlay-opened', () => { opened = true; });
+    el.menu.addEventListener('overlay-closed', () => { closed = true; });
+
+    el.open();
+    expect(opened).toBe(true);
+
+    el.close();
+    expect(closed).toBe(true);
+  });
+
+  it('dispatches accept-link-dialog with the entered url and title', async () => {
+    const el = await renderDialog();
+    el.urlInput.value = 'https://example.com';
+    el.titleInput.value = 'Example';
+
+    let detail = null;
+    el.addEventListener('accept-link-dialog', (e) => { detail = e.detail; });
+    el.accept();
+
+    expect(detail).toEqual({ url: 'https://example.com', title: 'Example' });
+  });
+});

package/src/dile-editor-markdown.js

@@ -96,4 +96,6 @@ export class DileEditorMarkdown extends DileI18nMixin(LitElement) {
     this.view.focus();
   }
 }
-customElements.define('dile-editor-markdown', DileEditorMarkdown);
+if (!customElements.get('dile-editor-markdown')) {
+  customElements.define('dile-editor-markdown', DileEditorMarkdown);
+}

package/src/dile-editor-markdown.spec.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './dile-editor-markdown.js';
+import { defaultToolbarConfig } from './defaultToolbarConfig.js';
+
+describe('dile-editor-markdown', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function waitForEvent(el, eventName) {
+    return new Promise((resolve) => {
+      el.addEventListener(eventName, (e) => resolve(e), { once: true });
+    });
+  }
+
+  async function renderMarkdownEditor() {
+    document.body.innerHTML = '<dile-editor-markdown></dile-editor-markdown>';
+    const el = document.body.querySelector('dile-editor-markdown');
+    el._menuConfig = { ...defaultToolbarConfig };
+    el.additionalCommands = {};
+    await waitForEvent(el, 'dile-editor-markdown-initialized');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a contenteditable ProseMirror surface and a toolbar', async () => {
+    const el = await renderMarkdownEditor();
+    const content = el.querySelector('.ProseMirror');
+    expect(content).toBeTruthy();
+    expect(content.getAttribute('contenteditable')).toBe('true');
+    expect(el.querySelector('dile-editor-toolbar')).toBeTruthy();
+  });
+
+  it('serializes empty content as an empty string', async () => {
+    const el = await renderMarkdownEditor();
+    expect(el.editorMarkdown).toBe('');
+  });
+
+  it('updates the ProseMirror document when content is set', async () => {
+    const el = await renderMarkdownEditor();
+    el.updateEditorContent('Hello world');
+    expect(el.editorMarkdown).toBe('Hello world');
+  });
+});

package/src/dile-editor-toolbar-item.js

@@ -56,4 +56,6 @@ export class DileEditorToolbarItem extends DileI18nMixin(LitElement) {
     }
   }
 }
-customElements.define('dile-editor-toolbar-item', DileEditorToolbarItem);
+if (!customElements.get('dile-editor-toolbar-item')) {
+  customElements.define('dile-editor-toolbar-item', DileEditorToolbarItem);
+}

package/src/dile-editor-toolbar-item.spec.js

@@ -0,0 +1,37 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './dile-editor-toolbar-item.js';
+
+describe('dile-editor-toolbar-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderItem(item, active = false) {
+    document.body.innerHTML = '<dile-editor-toolbar-item></dile-editor-toolbar-item>';
+    const el = document.body.querySelector('dile-editor-toolbar-item');
+    el.item = item;
+    el.active = active;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the icon for the given item', async () => {
+    const el = await renderItem({ icon: '<svg></svg>', commandName: 'bold' });
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('applies the active class when active is true', async () => {
+    const el = await renderItem({ icon: '<svg></svg>', commandName: 'bold' }, true);
+    expect(el.shadowRoot.querySelector('dile-icon').classList.contains('active')).toBe(true);
+  });
+
+  it('dispatches dile-toolbar-command when active and clicked', async () => {
+    const el = await renderItem({ icon: '<svg></svg>', commandName: 'bold' }, true);
+    let detail = null;
+    el.addEventListener('dile-toolbar-command', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-icon').click();
+
+    expect(detail.item.commandName).toBe('bold');
+  });
+});

package/src/dile-editor-toolbar.js

@@ -179,4 +179,6 @@ export class DileEditorToolbar extends DileI18nMixin(LitElement) {
     this.editorView.focus();
   }
 }
-customElements.define('dile-editor-toolbar', DileEditorToolbar);
+if (!customElements.get('dile-editor-toolbar')) {
+  customElements.define('dile-editor-toolbar', DileEditorToolbar);
+}

package/src/dile-editor-toolbar.spec.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './dile-editor-toolbar.js';
+import { defaultToolbarConfig } from './defaultToolbarConfig.js';
+
+describe('dile-editor-toolbar', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function fakeEditorView() {
+    return {
+      state: {},
+      dispatch: () => {},
+      focus: () => {},
+    };
+  }
+
+  async function renderToolbar() {
+    document.body.innerHTML = '<dile-editor-toolbar></dile-editor-toolbar>';
+    const el = document.body.querySelector('dile-editor-toolbar');
+    el.menuConfig = { ...defaultToolbarConfig };
+    el.editorView = fakeEditorView();
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a toolbar item for each enabled mark command', async () => {
+    const el = await renderToolbar();
+    expect(el.shadowRoot.querySelectorAll('dile-editor-toolbar-item').length).toBeGreaterThan(0);
+  });
+
+  it('renders the block type select', async () => {
+    const el = await renderToolbar();
+    expect(el.shadowRoot.getElementById('blockselect')).toBeTruthy();
+  });
+
+  it('does not render an item for a command disabled in menuConfig', async () => {
+    document.body.innerHTML = '<dile-editor-toolbar></dile-editor-toolbar>';
+    const el = document.body.querySelector('dile-editor-toolbar');
+    el.menuConfig = { ...defaultToolbarConfig, bold: false };
+    el.editorView = fakeEditorView();
+    await el.updateComplete;
+
+    const items = [...el.shadowRoot.querySelectorAll('dile-editor-toolbar-item')];
+    expect(items.some(item => item.item.commandName === 'bold')).toBe(false);
+  });
+});