feat(json-crdt-peritext-ui): 🎸 add more state to formatting editing

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/FormattingDisplay.tsx

@@ -46,7 +46,7 @@ export const FormattingDisplay: React.FC<FormattingDisplayProps> = ({formatting,
               </div>
               <Space horizontal />
               <BasicTooltip renderTooltip={() => t('Stop editing')}>
-                <BasicButton size={32} rounder onClick={() => state.view$.next('view')}>
+                <BasicButton size={32} rounder onClick={state.switchToViewPanel}>
                   <Iconista set={'lucide'} icon={'pencil-off'} width={16} height={16} />
                 </BasicButton>
               </BasicTooltip>
@@ -66,7 +66,7 @@ export const FormattingDisplay: React.FC<FormattingDisplayProps> = ({formatting,
               <ButtonSeparator />
               <Space horizontal size={-2} />
               <BasicTooltip renderTooltip={() => t('Edit')}>
-                <BasicButton size={32} rounder onClick={() => state.view$.next('edit')}>
+                <BasicButton size={32} rounder onClick={state.switchToEditPanel}>
                   <Iconista set={'lucide'} icon={'pencil'} width={16} height={16} />
                 </BasicButton>
               </BasicTooltip>
@@ -78,7 +78,7 @@ export const FormattingDisplay: React.FC<FormattingDisplayProps> = ({formatting,
       </ContextPaneHeader>
       <ContextPaneHeaderSep />
       {view === 'edit' ? (
-        <FormattingEditForm formatting={formatting} onDone={() => state.view$.next('view')} />
+        <FormattingEditForm formatting={formatting} onDone={state.returnFromEditPanelAndSave} />
       ) : (
         <>
           <ContextSep />

src/json-crdt-peritext-ui/plugins/toolbar/formatting/FormattingsManagePane/index.tsx

@@ -16,6 +16,11 @@ export const FormattingsManagePane: React.FC<FormattingsManagePaneProps> = ({inl
   // biome-ignore lint: too many dependencies
   const state = React.useMemo(() => new FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
   const formattings = useBehaviorSubject(React.useMemo(() => state.getFormattings$(), [state]));
+  React.useLayoutEffect(() => {
+    if (formattings.length === 1) {
+      state.select(formattings[0]);
+    }
+  }, [formattings]);
   const selected = useBehaviorSubject(state.selected$);
 
   if (selected || formattings.length === 1) {

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

@@ -2,12 +2,16 @@ import {BehaviorSubject} from 'rxjs';
 import {SavedFormatting} from '../../state/formattings';
 import {PersistedSlice} from '../../../../../json-crdt-extensions/peritext/slice/PersistedSlice';
 import {subject} from '../../../../util/rx';
+import {toSchema} from '../../../../../json-crdt/schema/toSchema';
+import {Model, ObjApi} from '../../../../../json-crdt/model';
+import {ObjNode} from '../../../../../json-crdt/nodes';
 import type {Inline} from '../../../../../json-crdt-extensions';
 import type {ToolbarState} from '../../state';
 
 export class FormattingManageState {
   public readonly selected$ = new BehaviorSubject<SavedFormatting | null>(null);
   public readonly view$ = new BehaviorSubject<'view' | 'edit'>('view');
+  public readonly editing$ = new BehaviorSubject<SavedShadowFormatting | undefined>(undefined);
 
   public constructor(
     public readonly state: ToolbarState,
@@ -38,4 +42,40 @@ export class FormattingManageState {
   public readonly select = (formatting: SavedFormatting | null) => {
     this.selected$.next(formatting);
   };
+
+  public readonly switchToViewPanel = (): void => {
+    this.view$.next('view');
+    // TODO: Clear the `editing$` state
+  };
+
+  public readonly switchToEditPanel = (): void => {
+    const selected = this.selected$.getValue();
+    if (!selected) return;
+    this.view$.next('edit');
+    const formatting = new SavedShadowFormatting(selected);
+    this.editing$.next(formatting);
+  };
+
+  public readonly returnFromEditPanelAndSave = (): void => {
+    console.log('saveEdits');
+  };
+}
+
+export class SavedShadowFormatting<Node extends ObjNode = ObjNode> extends SavedFormatting<Node> {
+  protected _model: Model<any>;
+
+  constructor(protected readonly saved: SavedFormatting<Node>) {
+    super(saved.behavior, saved.range, saved.state);
+    const nodeApi = saved.conf();
+    const schema = nodeApi ? toSchema(nodeApi.node) : void 0;
+    this._model = Model.create(schema);
+  }
+
+  public conf(): ObjApi<Node> | undefined {
+    return this._model.api.obj([]) as ObjApi<Node>;
+  }
+
+  public readonly save = () => {
+    throw new Error('save() not implemented');
+  };
 }