@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/__tests__/editorShellProps.test.tsx

@@ -13,8 +13,10 @@
  * the props it receives so we can assert `monacoTheme` reaches it.
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import type { RawEditorProps } from '../RawEditor';
+import type { MediaEntry, MediaProvider } from '@bendyline/squisq/schemas';
+import { useMediaProvider } from '@bendyline/squisq-react';
 
 // Records the props the shell passes to RawEditor on each render.
 const rawEditorProps: RawEditorProps[] = [];
@@ -33,6 +35,101 @@ vi.mock('../PreviewPanel', () => ({
 }));
 
 import { EditorShell } from '../EditorShell';
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { Toolbar } from '../Toolbar';
+
+function MarkdownSourceProbe() {
+  const { markdownSource } = useEditorContext();
+  return <pre data-testid="markdown-source">{markdownSource}</pre>;
+}
+
+function MediaProviderProbe({ expected }: { expected: MediaProvider }) {
+  const provider = useMediaProvider();
+  return (
+    <span data-testid="media-context-probe">{provider === expected ? 'same' : 'missing'}</span>
+  );
+}
+
+function mediaProviderWith(count: number): MediaProvider {
+  const entries: MediaEntry[] = Array.from({ length: count }, (_, i) => ({
+    name: `file-${i + 1}.png`,
+    mimeType: 'image/png',
+    size: i + 1,
+  }));
+  return {
+    async addMedia(name: string) {
+      return name;
+    },
+    async resolveUrl(relPath: string) {
+      return relPath;
+    },
+    async listMedia() {
+      return entries;
+    },
+    async removeMedia() {
+      /* no-op */
+    },
+    dispose() {
+      /* no-op */
+    },
+  };
+}
+
+function mediaProviderWithCounts(counts: number[]): MediaProvider {
+  let callCount = 0;
+  return {
+    async addMedia(name: string) {
+      return name;
+    },
+    async resolveUrl(relPath: string) {
+      return relPath;
+    },
+    async listMedia() {
+      const count = counts[Math.min(callCount, counts.length - 1)] ?? 0;
+      callCount += 1;
+      return Array.from({ length: count }, (_, i) => ({
+        name: `file-${i + 1}.png`,
+        mimeType: 'image/png',
+        size: i + 1,
+      }));
+    },
+    async removeMedia() {
+      /* no-op */
+    },
+    dispose() {
+      /* no-op */
+    },
+  };
+}
+
+function mutableMediaProviderWith(entries: MediaEntry[]): {
+  provider: MediaProvider;
+  removed: string[];
+} {
+  let current = [...entries];
+  const removed: string[] = [];
+  return {
+    removed,
+    provider: {
+      async addMedia(name: string) {
+        return name;
+      },
+      async resolveUrl(relPath: string) {
+        return relPath;
+      },
+      async listMedia() {
+        return current;
+      },
+      async removeMedia(relPath: string) {
+        removed.push(relPath);
+        current = current.filter((entry) => entry.name !== relPath);
+      },
+      dispose() {
+        /* no-op */
+      },
+    },
+  };
+}
 
 beforeEach(() => {
   rawEditorProps.length = 0;
@@ -94,3 +191,295 @@ describe('RawEditor monacoTheme prop', () => {
     expect(last?.monacoTheme).toBe('vs');
   });
 });
+
+describe('<EditorShell> instance boundaries', () => {
+  it('provides its mediaProvider to React preview/layer consumers', async () => {
+    const provider = mediaProviderWith(0);
+    await act(async () => {
+      render(
+        <EditorShell
+          initialMarkdown="# hi"
+          initialView="raw"
+          mediaProvider={provider}
+          toolbarSlotLeft={<MediaProviderProbe expected={provider} />}
+        />,
+      );
+    });
+    expect(screen.getByTestId('media-context-probe').textContent).toBe('same');
+  });
+
+  it('keeps view shortcuts inside the editor that received the key', async () => {
+    const { container } = render(
+      <>
+        <EditorShell initialMarkdown="# first" initialView="raw" />
+        <EditorShell initialMarkdown="# second" initialView="raw" />
+      </>,
+    );
+    const shells = container.querySelectorAll<HTMLElement>('.squisq-editor-shell');
+    fireEvent.keyDown(within(shells[1]).getByTestId('raw-editor-stub'), {
+      key: '1',
+      ctrlKey: true,
+    });
+    await waitFor(() => expect(within(shells[1]).getByTestId('wysiwyg-editor-stub')).toBeTruthy());
+    expect(within(shells[0]).getByTestId('raw-editor-stub')).toBeTruthy();
+  });
+
+  it('ignores file drops in readOnly mode', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# original"
+        initialView="raw"
+        readOnly
+        toolbarSlotRight={<MarkdownSourceProbe />}
+      />,
+    );
+    const shell = container.querySelector<HTMLElement>('.squisq-editor-shell')!;
+    const file = new File(['# replacement'], 'replacement.md', { type: 'text/markdown' });
+    fireEvent.drop(shell, {
+      dataTransfer: {
+        types: ['Files'],
+        files: [file],
+        items: [{ kind: 'file', type: 'text/markdown', getAsFile: () => file }],
+      },
+    });
+    await act(async () => Promise.resolve());
+    expect(screen.getByTestId('markdown-source').textContent).toBe('# original');
+  });
+});
+
+describe('<EditorShell> Files badge', () => {
+  it('shows the mediaProvider file count on the paperclip button', async () => {
+    const { container } = render(
+      <EditorShell initialMarkdown="# hi" initialView="raw" mediaProvider={mediaProviderWith(3)} />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 3 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('3');
+  });
+
+  it('compacts large visible counts while keeping the full count in the label', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWith(120)}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 120 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('99+');
+  });
+
+  it('uses the MediaBin scan count when the panel discovers files', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWithCounts([0, 1])}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
+  });
+
+  it('hides .gitignore entries from the Files panel and its count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" mediaProvider={provider} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 1 file'));
+
+    expect(await screen.findByText('hero.png')).toBeTruthy();
+    expect(screen.queryByText('.gitignore')).toBeNull();
+    expect(screen.getByText('Files (1)')).toBeTruthy();
+  });
+
+  it('removes a media file and matching markdown refs from the files context menu', async () => {
+    const { provider, removed } = mutableMediaProviderWith([
+      {
+        name: 'attachments/pasted.png',
+        mimeType: 'image/png',
+        size: 1024,
+      },
+    ]);
+    const changes: string[] = [];
+    const initialMarkdown = [
+      'Before',
+      '',
+      '![Screenshot](attachments/pasted.png)',
+      '',
+      'After',
+    ].join('\n');
+
+    render(
+      <EditorShell
+        initialMarkdown={initialMarkdown}
+        initialView="raw"
+        mediaProvider={provider}
+        onChange={(source) => changes.push(source)}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 1 file'));
+    const item = (await screen.findByText('pasted.png')).closest('.squisq-media-bin-item');
+    expect(item).toBeTruthy();
+
+    fireEvent.contextMenu(item as HTMLElement, { clientX: 24, clientY: 32 });
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Remove image' }));
+
+    await waitFor(() => {
+      expect(removed).toEqual(['attachments/pasted.png']);
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('pasted.png')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(changes[changes.length - 1]).toBe(['Before', '', '', 'After'].join('\n'));
+    });
+  });
+
+  it('marks files as unused when the document does not reference them', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown={'![Used](attachments/used.png)\n\n# Notes'}
+        initialView="raw"
+        mediaProvider={
+          mutableMediaProviderWith([
+            {
+              name: 'attachments/used.png',
+              mimeType: 'image/png',
+              size: 100,
+            },
+            {
+              name: 'attachments/unused.png',
+              mimeType: 'image/png',
+              size: 200,
+            },
+          ]).provider
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 2 files')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 2 files'));
+
+    await screen.findByText('used.png');
+    await screen.findByText('unused.png');
+
+    const items = Array.from(container.querySelectorAll('.squisq-media-bin-item'));
+    const itemNamed = (name: string) =>
+      items.find((item) => item.querySelector('.squisq-media-bin-name')?.textContent === name);
+    const usedItem = itemNamed('used.png');
+    const unusedItem = itemNamed('unused.png');
+
+    expect(usedItem?.querySelector('.squisq-media-bin-unused-badge')).toBeNull();
+    expect(unusedItem?.querySelector('.squisq-media-bin-unused-badge')?.textContent).toBe('Unused');
+  });
+});
+
+describe('<Toolbar> Files badge', () => {
+  it('self-scans mediaProvider when fileCount is not controlled by a parent', async () => {
+    const { container } = render(
+      <EditorProvider
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={mediaProviderWith(2)}
+        allowRecording={false}
+      >
+        <Toolbar onToggleFiles={() => {}} />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 2 files')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('2');
+  });
+
+  it('excludes .gitignore from a self-scanned count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+    const { container } = render(
+      <EditorProvider
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={provider}
+        allowRecording={false}
+      >
+        <Toolbar onToggleFiles={() => {}} />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
+  });
+});
+
+describe('<Toolbar> Insert menu', () => {
+  it('adds a default task list from the Insert menu in raw fallback mode', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    const item = await screen.findByRole('menuitem', { name: /Task List/i });
+
+    fireEvent.click(item);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toBe(
+        ['Intro', '- [ ] Task 1', '- [ ] Task 2', '- [ ] Task 3', ''].join('\n'),
+      );
+    });
+  });
+
+  it('adds an explicit authored timeline fence from the Insert menu', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: /Timeline/i }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        '```timeline\nMilestones: ● Start',
+      );
+    });
+  });
+});

package/src/__tests__/emojiPicker.test.tsx

@@ -1,43 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { EmojiPicker } from '../EmojiPicker';
-import {
-  EMOJI_CATEGORIES,
-  ALL_EMOJIS,
-  searchEmojis,
-  PICKER_CATEGORIES,
-  ALL_PICKER_ENTRIES,
-  searchPickerEntries,
-} from '../emojiData';
-
-describe('emojiData — legacy emoji exports', () => {
-  it('exposes the standard CLDR category buckets', () => {
-    const ids = EMOJI_CATEGORIES.map((c) => c.id);
-    expect(ids).toEqual([
-      'smileys',
-      'people',
-      'nature',
-      'food',
-      'travel',
-      'activities',
-      'objects',
-      'symbols',
-      'flags',
-    ]);
-  });
-
-  it('each entry has a non-empty char and name', () => {
-    for (const entry of ALL_EMOJIS) {
-      expect(entry.char.length).toBeGreaterThan(0);
-      expect(entry.name.length).toBeGreaterThan(0);
-    }
-  });
-
-  it('searchEmojis matches by name (case-insensitive)', () => {
-    const results = searchEmojis('HEART');
-    expect(results.some((e) => e.char === '❤️')).toBe(true);
-  });
-});
+import { EmojiPicker, PICKER_CATEGORIES, ALL_PICKER_ENTRIES, searchPickerEntries } from '../index';
 
 describe('emojiData — unified picker entries', () => {
   it('appends FA Brands, Solid, and Regular categories after the emoji buckets', () => {
@@ -78,12 +41,9 @@ describe('EmojiPicker', () => {
 
   it('renders all emoji + FA tabs when open', () => {
     render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
-    for (const cat of EMOJI_CATEGORIES) {
+    for (const cat of PICKER_CATEGORIES) {
       expect(screen.getByRole('tab', { name: cat.label })).toBeTruthy();
     }
-    expect(screen.getByRole('tab', { name: 'Brands' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Solid' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Regular' })).toBeTruthy();
   });
 
   it('fires onSelect with an emoji PickerEntry when an emoji tile is clicked', () => {

package/src/__tests__/headingTransition.test.ts

@@ -3,7 +3,7 @@ import {
   readHeadingLineTransition,
   setHeadingLineTransition,
   readBlockAttrsTransition,
-  setBlockAttrsTransition,
+  setHeadingAttrsTransition,
   EMPTY_TRANSITION,
 } from '../headingTransition';
 
@@ -40,6 +40,14 @@ describe('readHeadingLineTransition', () => {
     });
   });
 
+  it('reads a transition from a param-only {[…]} annotation', () => {
+    expect(readHeadingLineTransition('## Tips {[transition=zoom]}')).toEqual({
+      type: 'zoom',
+      direction: '',
+      duration: '',
+    });
+  });
+
   it('prefers the Pandoc block over the template params when both set it', () => {
     expect(
       readHeadingLineTransition('## Tips {transition=fade} {[title transition=zoom]}'),
@@ -48,32 +56,42 @@ describe('readHeadingLineTransition', () => {
 });
 
 describe('setHeadingLineTransition', () => {
-  it('adds a Pandoc block to a plain heading', () => {
+  it('adds a squiggly annotation to a plain heading', () => {
     expect(setHeadingLineTransition('## Tips', { type: 'fade', direction: '', duration: '' })).toBe(
-      '## Tips {transition=fade}',
+      '## Tips {[transition=fade]}',
     );
   });
 
-  it('writes the Pandoc block before an existing {[…]} template annotation', () => {
+  it('folds into an existing {[…]} template annotation', () => {
     expect(
       setHeadingLineTransition('## Tips {[title]}', { type: 'fade', direction: '', duration: '' }),
-    ).toBe('## Tips {transition=fade} {[title]}');
+    ).toBe('## Tips {[title transition=fade]}');
   });
 
   it('includes direction and duration when present', () => {
     expect(
       setHeadingLineTransition('## Tips', { type: 'push', direction: 'up', duration: '1.2' }),
-    ).toBe('## Tips {transition=push transitionDirection=up transitionDuration=1.2}');
+    ).toBe('## Tips {[transition=push transitionDirection=up transitionDuration=1.2]}');
   });
 
-  it('updates an existing transition in place, preserving other params and the id', () => {
+  it('migrates an existing Pandoc transition, preserving other params and the id', () => {
     expect(
       setHeadingLineTransition('## Tips {#intro transition=fade x=10}', {
         type: 'zoom',
         direction: '',
         duration: '',
       }),
-    ).toBe('## Tips {#intro x=10 transition=zoom}');
+    ).toBe('## Tips {#intro x=10} {[transition=zoom]}');
+  });
+
+  it('migrates into an existing template annotation without duplicating channels', () => {
+    expect(
+      setHeadingLineTransition('## Tips {#intro transition=fade} {[title color=blue]}', {
+        type: 'zoom',
+        direction: '',
+        duration: '',
+      }),
+    ).toBe('## Tips {#intro} {[title color=blue transition=zoom]}');
   });
 
   it('removes the transition (and an empty block) when set to none', () => {
@@ -125,14 +143,34 @@ describe('block-attrs (WYSIWYG) helpers', () => {
     });
   });
 
-  it('writes a fresh inner when none exists', () => {
-    expect(setBlockAttrsTransition(null, { type: 'fade', direction: '', duration: '' })).toBe(
-      'transition=fade',
-    );
+  it('writes transition edits to dataTemplateParams by default', () => {
+    expect(
+      setHeadingAttrsTransition(null, null, { type: 'fade', direction: '', duration: '' }),
+    ).toEqual({
+      blockAttrsInner: null,
+      templateParams: 'transition=fade',
+    });
   });
 
-  it('preserves the id and clears to null when emptied', () => {
-    expect(setBlockAttrsTransition('transition=fade', EMPTY_TRANSITION)).toBeNull();
-    expect(setBlockAttrsTransition('#intro transition=fade', EMPTY_TRANSITION)).toBe('#intro');
+  it('migrates legacy dataBlockAttrs transitions to dataTemplateParams', () => {
+    expect(
+      setHeadingAttrsTransition('#intro transition=fade', 'color=blue', {
+        type: 'zoom',
+        direction: '',
+        duration: '',
+      }),
+    ).toEqual({
+      blockAttrsInner: '#intro',
+      templateParams: 'color=blue transition=zoom',
+    });
+  });
+
+  it('clears transitions from both WYSIWYG channels', () => {
+    expect(
+      setHeadingAttrsTransition('#intro transition=fade', 'transition=zoom', EMPTY_TRANSITION),
+    ).toEqual({
+      blockAttrsInner: '#intro',
+      templateParams: null,
+    });
   });
 });

package/src/__tests__/imageEditAffordance.test.tsx

@@ -182,8 +182,10 @@ describe('<EditorShell> image-edit modal wiring', () => {
 
     expect(screen.queryByTestId('image-edit-modal')).toBeNull();
 
+    const trigger = screen.getByTestId('trigger');
+    trigger.focus();
     await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
+      fireEvent.click(trigger);
     });
 
     await waitFor(() => {
@@ -191,6 +193,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     });
     // Shows the relative path in the header.
     expect(screen.getByText('hero.png')).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByTestId('image-edit-modal-close'));
 
     await act(async () => {
       fireEvent.click(screen.getByTestId('image-edit-modal-close'));
@@ -198,6 +201,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     await waitFor(() => {
       expect(screen.queryByTestId('image-edit-modal')).toBeNull();
     });
+    expect(document.activeElement).toBe(screen.getByTestId('trigger'));
   });
 
   it('opens the modal with a transient sidecar when only a mediaProvider is wired (no host container)', async () => {