test(e2e): add delay to positioner keypress

support/e2e/src/helpers/index.ts

@@ -105,7 +105,6 @@ export const type = async ({ text, delay = 10 }: TypeParameter) =>
   page.keyboard.type(text, { delay });
 
 export * from './modifier-keys';
-
 export * from './images';
 
 interface HTMLObject {

support/e2e/src/positioner.e2e.test.ts

@@ -19,7 +19,7 @@ describe('Positioner', () => {
   describe('Bubble menu', () => {
     it('should show the bubble menu', async () => {
       await $editor.focus();
-      await $editor.type('This is text');
+      await $editor.type('This is text', { delay: 10 });
       await expect($editor.innerHTML()).resolves.toMatchSnapshot();
       const $bubbleMenu = await getByTestId($document, 'bubble-menu');
       await expect($bubbleMenu.getAttribute('style')).resolves.toBe(

support/examples/with-next/src/pages/editor/positioner.tsx

@@ -17,43 +17,31 @@ const EXTENSIONS = [
 ];
 
 function Menu() {
-  const [activeCommands, setActiveCommands] = useState({
-    bold: false,
-    italic: false,
-    underline: false,
+  const { commands, active } = useRemirror<BoldExtension | ItalicExtension | UnderlineExtension>({
+    autoUpdate: true,
   });
 
-  const { commands, active } = useRemirror<BoldExtension | ItalicExtension | UnderlineExtension>(
-    () => {
-      setActiveCommands({
-        bold: active.bold(),
-        italic: active.italic(),
-        underline: active.underline(),
-      });
-    },
-  );
-
   // The use positioner hook allows for tracking the current selection in the editor.
   const { bottom, left, ref } = usePositioner('bubble');
 
   return (
     <div ref={ref} style={{ bottom, left, position: 'absolute' }} data-testid='bubble-menu'>
       <button
         onClick={() => commands.toggleBold()}
-        style={{ fontWeight: activeCommands.bold ? 'bold' : undefined }}
+        style={{ fontWeight: active.bold() ? 'bold' : undefined }}
         data-testid='bubble-menu-bold'
       >
         Bold
       </button>
       <button
         onClick={() => commands.toggleItalic()}
-        style={{ fontWeight: activeCommands.italic ? 'bold' : undefined }}
+        style={{ fontWeight: active.italic() ? 'bold' : undefined }}
       >
         Italic
       </button>
       <button
         onClick={() => commands.toggleUnderline()}
-        style={{ fontWeight: activeCommands.underline ? 'bold' : undefined }}
+        style={{ fontWeight: active.underline() ? 'bold' : undefined }}
       >
         Underline
       </button>