feat(json-crdt-peritext-ui): 🎸 add ability to navigate back on slice edit

Author: streamich

src/json-crdt-peritext-ui/components/ContextPaneHeader.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {ContextHeader} from './ContextHeader';
+import {Space} from 'nice-ui/lib/3-list-item/Space';
 import {BasicButtonBack} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonBack';
 import {BasicButtonClose} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose';
 import {Flex} from 'nice-ui/lib/3-list-item/Flex';
@@ -15,7 +16,13 @@ export interface ContextPaneHeaderProps {
 export const ContextPaneHeader: React.FC<ContextPaneHeaderProps> = ({short, children, onBackClick, onCloseClick}) => {
   let element = (
     <Flex style={{alignItems: 'center'}}>
-      {!!onBackClick && <BasicButtonBack onClick={onBackClick} />}
+      {!!onBackClick && (
+        <>
+          <BasicButtonBack onClick={onBackClick} />
+          <Space horizontal />
+          {/* <Space horizontal size={-1} /> */}
+        </>
+      )}
       {children}
     </Flex>
   );

src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay/FormattingDisplay.tsx

@@ -15,7 +15,7 @@ export const FormattingDisplay: React.FC<FormattingDisplayProps> = ({formatting,
 
   return (
     <ContextPane style={{minWidth: 'calc(max(220px, min(360px, 80vw)))'}}>
-      <ContextPaneHeader short onCloseClick={onClose}>
+      <ContextPaneHeader short onBackClick={onClose}>
         <FormattingTitle formatting={formatting} />
       </ContextPaneHeader>
       <ContextPaneHeaderSep />

src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay/index.tsx

@@ -19,8 +19,8 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
   const selected = useBehaviorSubject(state.selected$);
 
   if (selected) {
-    return (<FormattingDisplay formatting={selected} />);
+    return (<FormattingDisplay formatting={selected} onClose={() => state.select(null)} />);
   }
 
-  return <FormattingList formattings={formattings} onSelect={state.onSelect} />;
+  return <FormattingList formattings={formattings} onSelect={state.select} />;
 };

src/json-crdt-peritext-ui/plugins/toolbar/cursor/caret/CaretBottomOverlay/state.ts

@@ -28,7 +28,7 @@ export class CaretBottomState {
     return res;
   };
 
-  public readonly onSelect = (formatting: SliceFormatting) => {
+  public readonly select = (formatting: SliceFormatting | null) => {
     this.selected$.next(formatting);
   };
 }