update

test/test.wysiwyg-selection-simple.browser.ts

@@ -0,0 +1,62 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+
+tap.test('Selection highlighting basic test', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'head-1', type: 'heading-1', content: 'First heading' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 500));
+  
+  // Get paragraph element
+  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
+  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const paraBlock = paraComponent?.shadowRoot?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Get heading element
+  const headWrapper = editor.shadowRoot?.querySelector('[data-block-id="head-1"]');
+  const headComponent = headWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const headBlock = headComponent?.shadowRoot?.querySelector('.block.heading-1') as HTMLElement;
+  
+  console.log('Found elements:', {
+    paraBlock: !!paraBlock,
+    headBlock: !!headBlock
+  });
+  
+  // Focus paragraph
+  paraBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  
+  // Check isSelected property
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Focus heading
+  headBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes again
+  console.log('\nAfter focusing heading:');
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Check that heading is selected
+  expect(headBlock.classList.contains('selected')).toBeTrue();
+  expect(paraBlock.classList.contains('selected')).toBeFalse();
+});
+
+export default tap.start();