feat(json-crdt-peritext-ui): 🎸 close config popup on Esc press

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/cards/InlineConfigCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {ContextPane} from 'nice-ui/lib/4-card/ContextMenu/ContextPane';
 import {NewLinkConfig} from '../config/NewLinkConfig';
+import {useToolbarPlugin} from '../context';
 import type {SliceConfigState} from '../state/types';
 
 export interface InlineConfigCardProps {
@@ -9,9 +10,19 @@ export interface InlineConfigCardProps {
 }
 
 export const InlineConfigCard: React.FC<InlineConfigCardProps> = ({config, onSave}) => {
+  const {toolbar} = useToolbarPlugin();
+
   return (
-    <ContextPane style={{display: 'block', minWidth: 'calc(min(600px, max(50vw, 260px)))'}}>
-      <NewLinkConfig config={config} onSave={onSave} />
-    </ContextPane>
+    <div onKeyDown={(e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        toolbar.newSliceConfig.next(void 0);
+      }
+    }}>
+      <ContextPane style={{display: 'block', minWidth: 'calc(min(600px, max(50vw, 260px)))'}}>
+        <NewLinkConfig config={config} onSave={onSave} />
+      </ContextPane>
+    </div>
   );
 };

src/json-crdt-peritext-ui/plugins/toolbar/config/NewLinkConfig.tsx

@@ -16,6 +16,10 @@ import {parseUrl} from '../../../web/util';
 import {ContextPaneHeaderSep} from '../../../components/ContextPaneHeaderSep';
 import type {SliceConfigState} from '../state/types';
 
+const blockClass = rule({
+  maxW: '600px',
+});
+
 const headerClass = rule({
   d: 'flex',
   ai: 'center',
@@ -62,7 +66,7 @@ export const NewLinkConfig: React.FC<NewLinkConfigProps> = ({config, onSave}) =>
   const name = config.menu?.name ?? config.def.name;
 
   return (
-    <form onSubmit={(e) => {
+    <form className={blockClass} onSubmit={(e) => {
       e.preventDefault();
       onSave();
     }}>

src/json-crdt-peritext-ui/plugins/toolbar/state/ToolbarState.tsx

@@ -47,7 +47,7 @@ export class ToolbarState implements UiLifeCycles {
     const {dom, events} = surface;
     const {et} = events;
     const mouseDown = dom!.cursor.mouseDown;
-    const source = dom.el;
+    const el = dom.el;
 
     const changeUnsubscribe = et.subscribe('change', (ev) => {
       const lastEvent = ev.detail.ev;
@@ -67,14 +67,27 @@ export class ToolbarState implements UiLifeCycles {
     const mouseUpListener = (event: MouseEvent) => {
       if (!showInlineToolbar.value[0]) showInlineToolbar.next([true, Date.now()]);
     };
+    const onKeyDown = (event: KeyboardEvent) => {
+      const newSliceConfig = this.newSliceConfig;
+      if (event.key === 'Escape') {
+        if (newSliceConfig.value) {
+          event.stopPropagation();
+          event.preventDefault
+          newSliceConfig.next(void 0);
+          return;
+        }
+      }
+    };
 
-    source?.addEventListener('mousedown', mouseDownListener);
-    source?.addEventListener('mouseup', mouseUpListener);
+    el.addEventListener('mousedown', mouseDownListener);
+    el.addEventListener('mouseup', mouseUpListener);
+    el.addEventListener('keydown', onKeyDown);
     return () => {
       changeUnsubscribe();
       unsubscribeMouseDown?.();
-      source?.removeEventListener('mousedown', mouseDownListener);
-      source?.removeEventListener('mouseup', mouseUpListener);
+      el.removeEventListener('mousedown', mouseDownListener);
+      el.removeEventListener('mouseup', mouseUpListener);
+      el.removeEventListener('keydown', onKeyDown);
     };
   }