feat(json-crdt-peritext-ui): 🎸 add caret bottom state management and ability to select

Author: streamich

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {ContextPane, ContextItem, ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
+import {SYMBOL} from 'nano-theme';
+import {FormattingGenericIcon} from '../../../components/FormattingGenericIcon';
+import {Formatting} from '../../../state/Formatting';
+
+export interface FormattingListProps {
+  formattings: Formatting[];
+  onSelect: (formatting: Formatting) => void;
+}
+
+export const FormattingList: React.FC<FormattingListProps> = ({formattings, onSelect}) => {
+  if (!formattings.length) return;
+
+  return (
+    <ContextPane style={{minWidth: 'calc(max(220px, min(360px, 80vw)))'}}>
+      <ContextSep />
+      {formattings.map((formatting) => {
+        const {behavior} = formatting;
+        const data = behavior.data();
+        const menu = data.menu;
+        const previewText = data.previewText?.(formatting) || '';
+        const previewTextFormatted = previewText.length < 20 ? previewText : `${previewText.slice(0, 20)}${SYMBOL.ELLIPSIS}`;
+        return (
+          <ContextItem inset
+            key={formatting.key()}
+            icon={menu?.icon?.()}
+            right={data.renderIcon?.(formatting) || <FormattingGenericIcon formatting={formatting} />}
+            onClick={() => onSelect(formatting)}
+          >
+            {menu?.name ?? behavior.name}
+            {!!previewTextFormatted && (
+              <span style={{opacity: 0.5}}>
+                {previewTextFormatted}
+              </span>
+            )}
+          </ContextItem>
+        );
+      })}
+      <ContextSep />
+    </ContextPane>
+  );
+};

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import {ContextPane, ContextItem, ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
 import {useToolbarPlugin} from '../../../context';
-import {SYMBOL} from 'nano-theme';
-import {FormattingGenericIcon} from '../../../components/FormattingGenericIcon';
 import {CaretBottomState} from './state';
+import {FormattingList} from './FormattingList';
+import {useBehaviorSubject} from 'nice-ui/lib/hooks/useBehaviorSubject';
 import type {CaretViewProps} from '../../../../../web/react/cursor/CaretView';
 
 export interface CaretBottomOverlayProps extends CaretViewProps {
@@ -14,36 +13,13 @@ export const CaretBottomOverlay: React.FC<CaretBottomOverlayProps> = (props) =>
   const {fwd, bwd} = props;
   const inline = fwd || bwd;
   const {toolbar} = useToolbarPlugin();
-  const state = React.useMemo(() => new CaretBottomState(toolbar), [toolbar]);
-  const formattings = React.useMemo(() => state.getFormatting(inline), [inline?.key()]);
+  const state = React.useMemo(() => new CaretBottomState(toolbar, inline), [toolbar, inline?.key()]);
+  const formattings = React.useMemo(() => state.getFormatting(), [state]);
+  const selected = useBehaviorSubject(state.selected$);
 
-  if (!formattings.length) return;
+  if (selected) {
+    return (<div>selected: {selected.slice.toString()}</div>);
+  }
 
-  return (
-    <ContextPane style={{minWidth: 'calc(max(220px, min(360px, 80vw)))'}}>
-      <ContextSep />
-      {formattings.map((formatting) => {
-        const {behavior} = formatting;
-        const data = behavior.data();
-        const menu = data.menu;
-        const previewText = data.previewText?.(formatting) || '';
-        const previewTextFormatted = previewText.length < 20 ? previewText : `${previewText.slice(0, 20)}${SYMBOL.ELLIPSIS}`;
-        return (
-          <ContextItem inset
-            icon={menu?.icon?.()}
-            right={data.renderIcon?.(formatting) || <FormattingGenericIcon formatting={formatting} />}
-            onClick={() => {}}
-          >
-            {menu?.name ?? behavior.name}
-            {!!previewTextFormatted && (
-              <span style={{opacity: 0.5}}>
-                {previewTextFormatted}
-              </span>
-            )}
-          </ContextItem>
-        );
-      })}
-      <ContextSep />
-    </ContextPane>
-  );
+  return <FormattingList formattings={formattings} onSelect={state.onSelect} />;
 };

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

@@ -1,13 +1,17 @@
+import {BehaviorSubject} from 'rxjs';
 import {Formatting} from '../../../state/Formatting';
 import type {Inline} from '../../../../../../json-crdt-extensions';
 import type {ToolbarState} from '../../../state';
 
 export class CaretBottomState {
+  public readonly selected$ = new BehaviorSubject<Formatting | null>(null);
+
   public constructor(
     public readonly state: ToolbarState,
+    public readonly inline: Inline | undefined,
   ) {}
 
-  public getFormatting(inline?: Inline): Formatting[] {
+  public getFormatting(inline: Inline | undefined = this.inline): Formatting[] {
     const slices = inline?.p1.layers;
     const res: Formatting[] = [];
     if (!slices) return res;
@@ -23,4 +27,8 @@ export class CaretBottomState {
     }
     return res;
   };
+
+  public readonly onSelect = (formatting: Formatting) => {
+    this.selected$.next(formatting);
+  };
 }

src/json-crdt-peritext-ui/plugins/toolbar/state/Formatting.ts

@@ -12,4 +12,8 @@ export class Formatting {
     public readonly slice: Slice<string>,
     public readonly behavior: ToolbarSliceBehavior,
   ) {}
+
+  public key(): number {
+    return this.slice.hash;
+  }
 }