feat(json-crdt-peritext-ui): 🎸 implement various formatting renderers

Author: streamich

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {ContextPane, ContextSep} from 'nice-ui/lib/4-card/ContextMenu';
-import {SliceFormatting} from '../../../state/formattings';
+import {SavedFormatting} from '../../../state/formattings';
 import {ContextPaneHeader} from '../../../../../components/ContextPaneHeader';
 import {ContextPaneHeaderSep} from '../../../../../components/ContextPaneHeaderSep';
 import {FormattingTitle} from '../../../components/FormattingTitle';
-import {FormattingEdit} from '../../../formatting/FormattingEdit';
+import {FormattingEdit} from '../../../formatting/edit/FormattingEdit';
 
 export interface FormattingDisplayProps {
-  formatting: SliceFormatting;
+  formatting: SavedFormatting;
   onClose?: () => void;
 }
 

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

@@ -1,12 +1,12 @@
 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 {SliceFormatting} from '../../../state/formattings';
+import {SavedFormatting} from '../../../state/formattings';
+import {FormattingIcon} from '../../../formatting/icon/FormattingIcon';
 
 export interface FormattingListProps {
-  formattings: SliceFormatting[];
-  onSelect: (formatting: SliceFormatting) => void;
+  formattings: SavedFormatting[];
+  onSelect: (formatting: SavedFormatting) => void;
 }
 
 export const FormattingList: React.FC<FormattingListProps> = ({formattings, onSelect}) => {
@@ -25,7 +25,7 @@ export const FormattingList: React.FC<FormattingListProps> = ({formattings, onSe
           <ContextItem inset
             key={formatting.key()}
             icon={menu?.icon?.()}
-            right={data.renderIcon?.(formatting) || <FormattingGenericIcon formatting={formatting} />}
+            right={<FormattingIcon formatting={formatting} />}
             onClick={() => onSelect(formatting)}
           >
             {menu?.name ?? behavior.name}

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

@@ -1,20 +1,20 @@
 import {BehaviorSubject} from 'rxjs';
-import {SliceFormatting} from '../../../state/formattings';
+import {SavedFormatting} from '../../../state/formattings';
 import {PersistedSlice} from '../../../../../../json-crdt-extensions/peritext/slice/PersistedSlice';
 import type {Inline} from '../../../../../../json-crdt-extensions';
 import type {ToolbarState} from '../../../state';
 
 export class CaretBottomState {
-  public readonly selected$ = new BehaviorSubject<SliceFormatting | null>(null);
+  public readonly selected$ = new BehaviorSubject<SavedFormatting | null>(null);
 
   public constructor(
     public readonly state: ToolbarState,
     public readonly inline: Inline | undefined,
   ) {}
 
-  public getFormatting(inline: Inline | undefined = this.inline): SliceFormatting[] {
+  public getFormatting(inline: Inline | undefined = this.inline): SavedFormatting[] {
     const slices = inline?.p1.layers;
-    const res: SliceFormatting[] = [];
+    const res: SavedFormatting[] = [];
     if (!slices) return res;
     const registry = this.state.txt.editor.getRegistry();
     for (const slice of slices) {
@@ -25,12 +25,12 @@ export class CaretBottomState {
       const isConfigurable = !!behavior.schema;
       if (!isConfigurable) continue;
       if (!(slice instanceof PersistedSlice)) continue;
-      res.push(new SliceFormatting(behavior, slice));
+      res.push(new SavedFormatting(behavior, slice));
     }
     return res;
   };
 
-  public readonly select = (formatting: SliceFormatting | null) => {
+  public readonly select = (formatting: SavedFormatting | null) => {
     this.selected$.next(formatting);
   };
 }

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type {EditProps} from '../../types';
+
+export interface FormattingEditProps extends EditProps {}
+
+export const FormattingEdit: React.FC<FormattingEditProps> = (props) => {
+  const Edit = props.formatting.behavior.data().Edit;
+
+  return (
+    Edit ? <Edit {...props} /> : <div>no editor</div>
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/formatting/edit/FormattingEdit.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import {GenericIcon} from './GenericIcon';
+import type {IconProps} from '../../types';
+
+export interface FormattingIconProps extends IconProps {}
+
+export const FormattingIcon: React.FC<FormattingIconProps> = (props) => {
+  const Icon = props.formatting.behavior.data().Icon;
+
+  return (
+    Icon ? <Icon {...props} /> : <GenericIcon {...props} />
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/formatting/icon/FormattingIcon.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {Avatar} from 'nice-ui/lib/1-inline/Avatar';
-import type {SliceFormatting} from '../state/formattings';
+import type {FormattingIconProps} from './FormattingIcon';
 
-export interface FormattingGenericIconProps {
-  formatting: SliceFormatting;
-}
+export interface GenericIconProps extends FormattingIconProps {}
 
-export const FormattingGenericIcon: React.FC<FormattingGenericIconProps> = ({formatting}) => {
+export const GenericIcon: React.FC<GenericIconProps> = ({formatting}) => {
   const data = formatting.behavior.data();
-  const id = formatting.range.id;
+  const id = formatting.range.start.id;
   const time = id.time + '';
   const name = data?.previewText?.(formatting) || (time[time.length - 1] + time[time.length - 2] + time + '.' + id.sid);
 

src/json-crdt-peritext-ui/plugins/toolbar/components/FormattingGenericIcon.tsx renamed to src/json-crdt-peritext-ui/plugins/toolbar/formatting/icon/GenericIcon.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import type {NewProps} from '../../types';
 
-export const FormattingNew: React.FC<NewProps> = (props) => {
+export interface FormattingNewProps extends NewProps {}
+
+export const FormattingNew: React.FC<FormattingNewProps> = (props) => {
   const New = props.formatting.behavior.data().New;
 
   return (

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 FormattingViewProps extends EditProps {}
+
+export const FormattingView: React.FC<FormattingViewProps> = (props) => {
+  const View = props.formatting.behavior.data().View;
+
+  return (
+    View ? <View {...props} /> : <div>no editor</div>
+  );
+};

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

@@ -108,18 +108,18 @@ export class ToolbarState implements UiLifeCycles {
     if (linkEntry) {
       const data = linkEntry.data() as SliceRegistryEntryData;
       data.menu = this.linkMenuItem();
-      data.previewText = ({range: slice}) => {
-        const data = slice.data() as {href: string};
+      data.previewText = (formatting) => {
+        const data = formatting.conf()?.view() as {href: string};
         if (!data || typeof data !== 'object') return '';
         return (data.href || '').replace(/^(https?:\/\/)?(www\.)?/, '');
       };
-      data.renderIcon = ({range}) => {
-        const data = range.data() as {href: string};
+      data.Icon = ({formatting}) => {
+        const data = formatting.conf()?.view() as {href: string};
         if (!data || typeof data !== 'object') return;
         return <Favicon url={data.href} />;
       };
       data.New = NewLinkConfig;
-      data.renderPreview = (formatting) => {
+      data.View = ({formatting}) => {
         const data = formatting.range.data() as {href: string};
         if (!data || typeof data !== 'object') return;
         return <UrlDisplayLayout url={data.href} />;