feat(json-crdt-peritext-ui): 🎸 move new slice config state into the toolbar plugin

Author: streamich

src/json-crdt-extensions/peritext/editor/Editor.ts

@@ -12,9 +12,8 @@ import {isLetter, isPunctuation, isWhitespace, stepsEqual} from './util';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
-import {s, tick, Timespan, type ITimespanStruct} from '../../../json-crdt-patch';
+import {tick, Timespan, type ITimespanStruct} from '../../../json-crdt-patch';
 import {CursorAnchor, SliceBehavior, SliceHeaderMask, SliceHeaderShift, SliceTypeCon} from '../slice/constants';
-import {Model, ObjApi} from '../../../json-crdt/model';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
 import type {Printable} from 'tree-dump';
@@ -31,10 +30,7 @@ import type {
   ViewSlice,
   EditorUi,
   EditorSelection,
-  SliceConfigState,
 } from './types';
-import type {ObjNode} from '../../../json-crdt/nodes';
-import type {SliceRegistryEntry} from '../registry/SliceRegistryEntry';
 
 /**
  * For inline boolean ("Overwrite") slices, both range endpoints should be
@@ -54,19 +50,6 @@ const makeRangeExtendable = <T>(range: Range<T>): void => {
   }
 };
 
-class NewSliceConfig<Node extends ObjNode = ObjNode> implements SliceConfigState<Node> {
-  public readonly model: Model<ObjNode<{conf: any}>>;
-
-  constructor(public readonly def: SliceRegistryEntry) {
-    const schema = s.obj({conf: def.schema || s.con(void 0)});
-    this.model = Model.create(schema);
-  }
-
-  public conf(): ObjApi<Node> {
-    return this.model.api.obj(['conf']) as ObjApi<Node>;
-  }
-}
-
 export class Editor<T = string> implements Printable {
   public readonly saved: EditorSlices<T>;
   public readonly extra: EditorSlices<T>;
@@ -86,12 +69,6 @@ export class Editor<T = string> implements Printable {
    */
   public readonly pending = new ValueSyncStore<Map<CommonSliceType | string | number, unknown> | undefined>(void 0);
 
-  /**
-   * New slice configuration. This is used for new slices which are not yet
-   * applied to the text as they need to be configured first.
-   */
-  public readonly newSliceConfig = new ValueSyncStore<NewSliceConfig | undefined>(void 0);
-
   constructor(public readonly txt: Peritext<T>) {
     this.saved = new EditorSlices(txt, txt.savedSlices);
     this.extra = new EditorSlices(txt, txt.extraSlices);
@@ -764,18 +741,6 @@ export class Editor<T = string> implements Printable {
     }
   }
 
-  public startSliceConfig(tag: SliceTypeCon | string | number): NewSliceConfig | undefined {
-    const entry = this.getRegistry().get(tag);
-    const newSliceConfig = this.newSliceConfig;
-    if (!entry) {
-      newSliceConfig.next(void 0);
-      return;
-    }
-    const configState = new NewSliceConfig(entry);
-    newSliceConfig.next(configState);
-    return configState;
-  }
-
   // --------------------------------------------------------- block formatting
 
   /**

src/json-crdt-extensions/peritext/editor/types.ts

@@ -1,7 +1,4 @@
-import type {ObjApi} from '../../../json-crdt/model';
-import type {ObjNode} from '../../../json-crdt/nodes';
 import type {UndefIterator} from '../../../util/iterator';
-import type {SliceRegistryEntry} from '../registry/SliceRegistryEntry';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
 import type {SliceType} from '../slice';
@@ -55,19 +52,3 @@ export interface EditorUi<T = string> {
    */
   vert?(point: Point<T>, steps: number): Point<T> | undefined;
 }
-
-/**
- * Transient UI configuration state of a slice. Used to render to the user
- * slice configuration UI, such as popups, modals, etc.
- */
-export interface SliceConfigState<Node extends ObjNode = ObjNode> {
-  /** Slice definition in the registry. */
-  def: SliceRegistryEntry;
-
-  /**
-   * An object representing the actual configuration of this slice instance.
-   * This object is either already stored in the document, or will be stored
-   * when the user commits the changes.
-   */
-  conf(): ObjApi<Node>;
-}

src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts

@@ -196,13 +196,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     switch (behavior) {
       case 'many': {
         if (tag === undefined) throw new Error('TYPE_REQUIRED');
-        const entry = editor.getRegistry().get(tag);
-        const isConfigurable = !!entry?.schema;
-        if (isConfigurable) {
-          editor.startSliceConfig(tag);
-        } else {
-          slices.insStack(tag, data, selection);
-        }
+        slices.insStack(tag, data, selection);
         break;
       }
       case 'one': {

src/json-crdt-peritext-ui/plugins/toolbar/cursor/RenderFocus.tsx

@@ -16,13 +16,13 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({children, cursor}) => {
   const showInlineToolbar = toolbar.showInlineToolbar;
   const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
   const enableAfterCoolDown = useTimeout(300, [toolbarVisibilityChangeTime]);
-  const isScrubbing = useSyncStoreOpt(toolbar.surface.dom?.cursor.mouseDown) || false;
-  const newSliceConfig = useSyncStore(surface.peritext.editor.newSliceConfig);
-  // const focus = useSyncStoreOpt(toolbar.surface.dom?.cursor.focus) || false;
+  const isScrubbing = useSyncStoreOpt(surface.dom?.cursor.mouseDown) || false;
+  const newSliceConfig = useSyncStore(toolbar.newSliceConfig);
+  // const focus = useSyncStoreOpt(surface.dom?.cursor.focus) || false;
   // const blurTimeout = useTimeout(300, [focus]);
 
   const handleClose = React.useCallback(() => {
-    //   toolbar.surface.dom?.focus();
+    //   surface.dom?.focus();
     //   // if (showInlineToolbar.value) showInlineToolbar.next(false);
   }, []);
 

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

@@ -0,0 +1,18 @@
+import {s} from '../../../../json-crdt-patch';
+import {Model, ObjApi} from '../../../../json-crdt/model';
+import type {SliceRegistryEntry} from '../../../../json-crdt-extensions/peritext/registry/SliceRegistryEntry';
+import type {SliceConfigState} from './types';
+import type {ObjNode} from '../../../../json-crdt/nodes';
+
+export class NewSliceConfig<Node extends ObjNode = ObjNode> implements SliceConfigState<Node> {
+  public readonly model: Model<ObjNode<{conf: any}>>;
+
+  constructor(public readonly def: SliceRegistryEntry) {
+    const schema = s.obj({conf: def.schema || s.con(void 0)});
+    this.model = Model.create(schema);
+  }
+
+  public conf(): ObjApi<Node> {
+    return this.model.api.obj(['conf']) as ObjApi<Node>;
+  }
+}

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

@@ -9,6 +9,7 @@ import {CommonSliceType, type LeafBlock, type Peritext} from '../../../../json-c
 import {BehaviorSubject} from 'rxjs';
 import {compare, type ITimestampStruct} from '../../../../json-crdt-patch';
 import {SliceTypeCon} from '../../../../json-crdt-extensions/peritext/slice/constants';
+import {NewSliceConfig} from './format';
 import type {UiLifeCycles} from '../../../web/types';
 import type {BufferDetail, PeritextEventDetailMap} from '../../../events/types';
 import type {PeritextSurfaceState} from '../../../web';
@@ -21,6 +22,12 @@ export class ToolbarState implements UiLifeCycles {
   public lastEventTs: number = 0;
   public readonly showInlineToolbar = new ValueSyncStore<[show: boolean, time: number]>([false, 0]);
 
+  /**
+   * New slice configuration. This is used for new slices which are not yet
+   * applied to the text as they need to be configured first.
+   */
+  public readonly newSliceConfig = new ValueSyncStore<NewSliceConfig | undefined>(void 0);
+
   /**
    * The ID of the active (where the main cursor or focus is placed) leaf block.
    */
@@ -102,6 +109,18 @@ export class ToolbarState implements UiLifeCycles {
   //   return true;
   // }
 
+  public startSliceConfig(tag: SliceTypeCon | string | number): NewSliceConfig | undefined {
+    const entry = this.txt.editor.getRegistry().get(tag);
+    const newSliceConfig = this.newSliceConfig;
+    if (!entry) {
+      newSliceConfig.next(void 0);
+      return;
+    }
+    const configState = new NewSliceConfig(entry);
+    newSliceConfig.next(configState);
+    return configState;
+  }
+
   // -------------------------------------------------------------------- Menus
 
   public readonly getFormattingMenu = (): MenuItem => {
@@ -275,7 +294,7 @@ export class ToolbarState implements UiLifeCycles {
           // icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
           icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
           onSelect: () => {
-            et.format(CommonSliceType.a, 'many');
+            this.startSliceConfig(CommonSliceType.a);
           },
         },
         // {

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

@@ -0,0 +1,19 @@
+import type {SliceRegistryEntry} from "../../../../json-crdt-extensions/peritext/registry/SliceRegistryEntry";
+import type {ObjApi} from "../../../../json-crdt/model";
+import type {ObjNode} from "../../../../json-crdt/nodes";
+
+/**
+ * Transient UI configuration state of a slice. Used to render to the user
+ * slice configuration UI, such as popups, modals, etc.
+ */
+export interface SliceConfigState<Node extends ObjNode = ObjNode> {
+  /** Slice definition in the registry. */
+  def: SliceRegistryEntry;
+
+  /**
+   * An object representing the actual configuration of this slice instance.
+   * This object is either already stored in the document, or will be stored
+   * when the user commits the changes.
+   */
+  conf(): ObjApi<Node>;
+}