feat(json-crdt-peritext-ui): 🎸 update formatting behavior registration

Author: streamich

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

@@ -14,11 +14,12 @@ export class CaretBottomState {
   ) {}
 
   public getFormattings$(inline: Inline | undefined = this.inline): BehaviorSubject<SavedFormatting[]> {
-    return subject(this.state.surface.render$, () => {
+    const state = this.state;
+    return subject(state.surface.render$, () => {
       const slices = inline?.p1.layers;
       const res: SavedFormatting[] = [];
       if (!slices) return res;
-      const registry = this.state.txt.editor.getRegistry();
+      const registry = state.txt.editor.getRegistry();
       for (const slice of slices) {
         const tag = slice.type;
         if (typeof tag !== 'number' && typeof tag !== 'string') continue;
@@ -27,7 +28,7 @@ export class CaretBottomState {
         const isConfigurable = !!behavior.schema;
         if (!isConfigurable) continue;
         if (!(slice instanceof PersistedSlice)) continue;
-        res.push(new SavedFormatting(behavior, slice));
+        res.push(new SavedFormatting(behavior, slice, state));
       }
       return res;
     });

src/json-crdt-peritext-ui/plugins/toolbar/formatting/new/FormattingNew.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type {EditProps} from '../../types';
+
+export interface FormattingNewProps extends EditProps {}
+
+export const FormattingNew: React.FC<FormattingNewProps> = (props) => {
+  const New = props.formatting.behavior.data().Edit;
+
+  return (
+    New ? <New {...props} /> : <div>new renderer not provided</div>
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/New.tsx renamed to src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/Edit.tsx

@@ -7,10 +7,14 @@ import {useSyncStoreOpt} from '../../../../../web/react/hooks';
 import {ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
 import {BasicButtonClose} from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose';
 import {UrlDisplayCard} from '../../../cards/UrlDisplayCard';
-import {NewProps} from '../../../types';
+import {EditableFormatting} from '../../../state/formattings';
 import type {CollaborativeStr} from 'collaborative-editor';
 
-export const New: React.FC<NewProps> = ({formatting}) => {
+export interface EditProps {
+  formatting: EditableFormatting;
+}
+
+export const Edit: React.FC<EditProps> = ({formatting}) => {
   const inpRef = React.useRef<HTMLInputElement | null>(null);
   const href = React.useMemo(() => () => formatting.conf()?.str(['href']), [formatting]);
   const hrefView = useSyncStoreOpt(href()?.events) || '';

src/json-crdt-peritext-ui/plugins/toolbar/formatting/tags/a/behavior.tsx

@@ -2,12 +2,19 @@ import * as React from 'react';
 import {Iconista} from 'nice-ui/lib/icons/Iconista';
 import {Sidetip} from 'nice-ui/lib/1-inline/Sidetip';
 import {renderIcon} from './renderIcon';
-import {New} from './New';
 import {View} from './View';
+import {Edit} from './Edit';
 import {ToolbarSliceBehaviorData} from '../../../types';
 import {getDomain} from '../../../../../web/util';
 
 export const behavior = {
+  menu: {
+    name: 'Link',
+    icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
+    // icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
+    right: () => <Sidetip small>⌘ K</Sidetip>,
+    keys: ['⌘', 'k'],
+  },
   validate: (formatting) => {
     const obj = formatting.conf()?.view() as {href: string};
     if (!obj || typeof obj !== 'object') return [{code: 'INVALID_CONFIG'}];
@@ -17,19 +24,12 @@ export const behavior = {
     const domain = getDomain(href);
     return domain ? 'good' : 'fine';
   },
-  menu: {
-    name: 'Link',
-    icon: () => <Iconista width={15} height={15} set="lucide" icon="link" />,
-    // icon: () => <Iconista width={15} height={15} set="radix" icon="link-2" />,
-    right: () => <Sidetip small>⌘ K</Sidetip>,
-    keys: ['⌘', 'k'],
-  },
   previewText: (formatting) => {
     const data = formatting.conf()?.view() as {href: string};
     if (!data || typeof data !== 'object') return '';
     return (data.href || '').replace(/^(https?:\/\/)?(www\.)?/, '');
   },
   renderIcon,
-  New,
+  Edit,
   View,
 } satisfies ToolbarSliceBehaviorData;

src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/new/FormattingNew.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import type {NewProps} from '../../../types';
+import type {EditProps} from '../../../types';
 
-export interface FormattingNewProps extends NewProps {}
+export interface FormattingNewProps extends EditProps {}
 
 export const FormattingNew: React.FC<FormattingNewProps> = (props) => {
-  const New = props.formatting.behavior.data().New;
+  const Edit = props.formatting.behavior.data().Edit;
 
   return (
-    New ? <New {...props} /> : <div>new renderer not provided</div>
+    Edit ? <Edit isNew {...props} /> : <div>new renderer not provided</div>
   );
 };

src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/new/FormattingNewCard.tsx

@@ -1,3 +1,4 @@
+import {useT} from 'use-t';
 import * as React from 'react';
 import {ContextPane} from 'nice-ui/lib/4-card/ContextMenu/ContextPane';
 import {useToolbarPlugin} from '../../../context';
@@ -20,6 +21,7 @@ export interface FormattingNewCardProps {
 }
 
 export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}) => {
+  const [t] = useT();
   const {toolbar} = useToolbarPlugin();
   useSyncStoreOpt(formatting.conf()?.api);
   const validation = formatting.validate();
@@ -51,7 +53,15 @@ export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}
           <ContextSep line />
 
           <div style={{padding: '16px'}}>
-            <Button small lite={!valid} positive={validation === 'good'} block disabled={!valid} submit>Save</Button>
+            <Button
+              small
+              lite={!valid}
+              positive={validation === 'good'}
+              block
+              disabled={!valid}
+              submit
+              onClick={formatting.save}
+            >{t('Save')}</Button>
           </div>
         </form>
       </ContextPane>

src/json-crdt-peritext-ui/plugins/toolbar/formatting/views/view/FormattingView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type {EditProps} from '../../../types';
+import type {ViewProps} from '../../../types';
 
-export interface FormattingViewProps extends EditProps {}
+export interface FormattingViewProps extends ViewProps {}
 
 export const FormattingView: React.FC<FormattingViewProps> = (props) => {
   const View = props.formatting.behavior.data().View;

src/json-crdt-peritext-ui/plugins/toolbar/inline/Link.tsx

@@ -2,17 +2,19 @@
 import * as React from 'react';
 import {rule} from 'nano-theme';
 
+const col = '#05f';
+
 const blockClass = rule({
-  col: '#05f',
+  col,
   td: 'underline',
-  textDecorationColor: '#05f',
+  textDecorationColor: col,
   textDecorationThickness: '1px',
   textDecorationStyle: 'wavy',
   textUnderlineOffset: '.25em',
   // textDecorationSkipInk: 'all',
 
   '&:hover': {
-    col: '#05f',
+    col: col,
   },
   pd: 0,
   mr: 0,

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

@@ -19,10 +19,11 @@ export interface FormattingWithConfig<Node extends ObjNode = ObjNode> {
 
 export interface ToolbarFormatting<R extends Range<string> = Range<string>, Node extends ObjNode = ObjNode> extends FormattingBase<ToolbarSliceBehavior, R>, FormattingWithConfig<Node> {}
 
-export class RangeFormatting<R extends Range<string> = Range<string>, Node extends ObjNode = ObjNode> implements ToolbarFormatting<R, Node> {
+export abstract class EditableFormatting<R extends Range<string> = Range<string>, Node extends ObjNode = ObjNode> implements ToolbarFormatting<R, Node> {
   public constructor(
     public readonly behavior: ToolbarSliceBehavior,
     public readonly range: R,
+    public readonly state: ToolbarState,
   ) {}
 
   public conf(): ObjApi<Node> | undefined {
@@ -32,6 +33,8 @@ export class RangeFormatting<R extends Range<string> = Range<string>, Node exten
   public validate(): ValidationResult {
     return this.behavior.data()?.validate?.(this) ?? 'fine';
   }
+
+  public abstract readonly save: () => void;
 }
 
 /**
@@ -40,14 +43,7 @@ export class RangeFormatting<R extends Range<string> = Range<string>, Node exten
  * state (location, data) of the formatting and a {@link ToolbarSliceBehavior}
  * which defines the formatting behavior.
  */
-export class SavedFormatting<Node extends ObjNode = ObjNode> extends RangeFormatting<PersistedSlice<string>, Node> {
-  public constructor(
-    public readonly behavior: ToolbarSliceBehavior,
-    public readonly range: PersistedSlice<string>,
-  ) {
-    super(behavior, range);
-  }
-
+export class SavedFormatting<Node extends ObjNode = ObjNode> extends EditableFormatting<PersistedSlice<string>, Node> {
   /**
    * @returns Unique key for this formatting. This is the hash of the slice.
    *     This is used to identify the formatting in the UI.
@@ -60,21 +56,25 @@ export class SavedFormatting<Node extends ObjNode = ObjNode> extends RangeFormat
     const node = this.range.dataNode();
     return node instanceof ObjApi ? node : undefined;
   }
+
+  public readonly save = () => {
+    throw new Error('save() not implemented');
+  };
 }
 
 /**
  * New formatting which is being created. Once created, it will be promoted to
  * a {@link SavedFormatting} instance.
  */
-export class NewFormatting<Node extends ObjNode = ObjNode> extends RangeFormatting<Range<string>, Node> {
+export class NewFormatting<Node extends ObjNode = ObjNode> extends EditableFormatting<Range<string>, Node> {
   public readonly model: Model<ObjNode<{conf: any}>>;
 
   constructor(
     public readonly behavior: ToolbarSliceBehavior,
     public readonly range: Range<string>,
     public readonly state: ToolbarState,
   ) {
-    super(behavior, range);
+    super(behavior, range, state);
     const schema = s.obj({conf: behavior.schema || s.con(void 0)});
     this.model = Model.create(schema);
   }
@@ -86,12 +86,11 @@ export class NewFormatting<Node extends ObjNode = ObjNode> extends RangeFormatti
   public readonly save = () => {
     const state = this.state;
     state.newSlice.next(void 0);
-    const view = this.model.view();
-    const data = view.conf as Record<string, unknown>;
-    if (!data || typeof data !== 'object') return;
-    if (!data.title) delete data.title;
+    const view = this.conf()?.view() as Record<string, unknown>;
+    if (!view || typeof view !== 'object') return;
+    if (!view.title) delete view.title;
     const et = state.surface.events.et;
-    et.format('tog', this.behavior.tag, 'many', data);
+    et.format('tog', this.behavior.tag, 'many', view);
     et.cursor({move: [['focus', 'char', 0, true]]});
   };
 }

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

@@ -4,7 +4,7 @@ import type {SliceBehavior} from '../../../json-crdt-extensions/peritext/registr
 import type {SliceStacking} from '../../../json-crdt-extensions/peritext/slice/constants';
 import type {TypeTag} from '../../../json-crdt-extensions';
 import type {NodeBuilder} from '../../../json-crdt-patch';
-import type {NewFormatting, SavedFormatting, ToolbarFormatting} from './state/formattings';
+import type {EditableFormatting, SavedFormatting, ToolbarFormatting} from './state/formattings';
 
 export type {MenuItem};
 
@@ -35,20 +35,15 @@ export interface ToolbarSliceBehaviorData extends Record<string, unknown> {
    */
   renderIcon?: (props: IconProps) => React.ReactNode;
 
-  /**
-   * Render a small card-sized form which configures the initial state of the
-   * formatting, for it to be created.
-   */
-  New?: React.FC<NewProps>;
-
   /**
    * Render a small card-sized view, which can be placed in a popup, to
    * preview the formatting.
    */
   View?: React.FC<ViewProps>;
 
   /**
-   * Render a small card-sized form to edit the formatting.
+   * Render a small card-sized form which configures the state of the
+   * formatting.
    */
   Edit?: React.FC<EditProps>;
 }
@@ -67,16 +62,20 @@ export interface IconProps {
   formatting: ToolbarFormatting;
 }
 
-export interface NewProps {
-  formatting: NewFormatting;
-}
-
 export interface ViewProps {
   formatting: SavedFormatting;
 }
 
 export interface EditProps {
-  formatting: SavedFormatting;
+  /**
+   * The formatting slice to be edited.
+   */
+  formatting: EditableFormatting;
+
+  /**
+   * Set to `true` if the formatting is new and not yet saved.
+   */
+  isNew?: boolean;
 }
 
 /**