feat(json-crdt-peritext-ui): 🎸 remove new formatting state class

Author: streamich

src/json-crdt-peritext-ui/plugins/toolbar/config/NewLinkConfig.tsx

@@ -50,11 +50,10 @@ const iconClass = rule({
   },
 });
 
-export const NewLinkConfig: React.FC<NewProps> = ({state}) => {
+export const NewLinkConfig: React.FC<NewProps> = ({formatting}) => {
   const styles = useStyles();
   const {toolbar} = useToolbarPlugin();
   const inpRef = React.useRef<HTMLInputElement | null>(null);
-  const {formatting} = state;
   const api = formatting.conf();
   const href = React.useMemo(() => () => formatting.conf()?.str(['href']), [formatting]);
   const hrefView = useSyncStoreOpt(href()?.events) || '';
@@ -67,7 +66,7 @@ export const NewLinkConfig: React.FC<NewProps> = ({state}) => {
   return (
     <form className={blockClass} onSubmit={(e) => {
       e.preventDefault();
-      state.save();
+      formatting.save();
     }}>
       <ContextPaneHeader short onCloseClick={() => toolbar.newSlice.next(void 0)}>
         <FormattingTitle formatting={formatting} />
@@ -87,7 +86,7 @@ export const NewLinkConfig: React.FC<NewProps> = ({state}) => {
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
-                state.save();
+                formatting.save();
               }
             }}
             right={(

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type {NewProps} from '../../types';
 
 export const FormattingNew: React.FC<NewProps> = (props) => {
-  const New = props.state.formatting.behavior.data().New;
+  const New = props.formatting.behavior.data().New;
 
   return (
     New ? <New {...props} /> : <div>new renderer not provided</div>

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {ContextPane} from 'nice-ui/lib/4-card/ContextMenu/ContextPane';
 import {useToolbarPlugin} from '../../context';
 import {FormattingNew} from './FormattingNew';
-import {FormattingNewState} from './FormattingNewState';
 import type {NewFormatting} from '../../state/formattings';
 
 export interface FormattingNewCardProps {
@@ -11,7 +10,6 @@ export interface FormattingNewCardProps {
 
 export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}) => {
   const {toolbar} = useToolbarPlugin();
-  const state = React.useMemo(() => new FormattingNewState(formatting), [formatting]);
 
   return (
     <div onKeyDown={(e) => {
@@ -22,7 +20,7 @@ export const FormattingNewCard: React.FC<FormattingNewCardProps> = ({formatting}
       }
     }}>
       <ContextPane style={{display: 'block', minWidth: 'calc(min(600px, max(50vw, 260px)))'}}>
-        <FormattingNew state={state} />
+        <FormattingNew formatting={formatting} />
       </ContextPane>
     </div>
   );

src/json-crdt-peritext-ui/plugins/toolbar/formatting/new/FormattingNewState.ts

@@ -4,8 +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 {SliceFormatting, ToolbarFormatting} from './state/formattings';
-import type {FormattingNewState} from './formatting/new/FormattingNewState';
+import type {NewFormatting, SliceFormatting, ToolbarFormatting} from './state/formattings';
 
 export type {MenuItem};
 
@@ -55,7 +54,7 @@ export interface SliceRegistryEntryData extends Record<string, unknown> {
 }
 
 export interface NewProps {
-  state: FormattingNewState;
+  formatting: NewFormatting;
 }
 
 /**