feat(json-crdt-peritext-ui): 🎸 use the new surface context state value

streamich · Dec 11, 2024 · a14f2aa · a14f2aa
1 parent 710db39
commit a14f2aa
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 29 deletions.
diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderPeritext.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import {context, type CursorPluginContextValue} from './context';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import type {ChangeDetail} from '../../events/types';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 import type {CursorPlugin} from './CursorPlugin';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
   plugin: CursorPlugin;
   children?: React.ReactNode;
 }

diff --git a/src/json-crdt-peritext-ui/plugins/cursor/context.ts b/src/json-crdt-peritext-ui/plugins/cursor/context.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
 import type {CursorPlugin} from './CursorPlugin';
 
 export interface CursorPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 
   plugin: CursorPlugin;
 

diff --git a/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
@@ -3,8 +3,8 @@ import {drule, rule, useTheme} from 'nano-theme';
 import {context} from './context';
 import {Button} from '../../components/Button';
 import {Console} from './Console';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
 import {ValueSyncStore} from '../../../util/events/sync-store';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 const blockClass = rule({
   pos: 'relative',
@@ -29,7 +29,7 @@ const childrenDebugClass = rule({
 export interface RenderPeritextProps extends PeritextViewProps {
   enabled?: boolean;
   children?: React.ReactNode;
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 }
 
 export const RenderPeritext: React.FC<RenderPeritextProps> = ({enabled: enabledProp = true, ctx, children}) => {

diff --git a/src/json-crdt-peritext-ui/plugins/debug/context.ts b/src/json-crdt-peritext-ui/plugins/debug/context.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react/state';
 
 export interface DebugRenderersContextValue {
   enabled: boolean;
@@ -10,7 +10,7 @@ export interface DebugRenderersContextValue {
     peritext: ValueSyncStore<boolean>;
     model: ValueSyncStore<boolean>;
   };
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 }
 
 export const context = React.createContext<DebugRenderersContextValue>(null!);

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
@@ -3,10 +3,10 @@ import {Chrome} from './Chrome';
 import {context, type MinimalPluginContextValue} from './context';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import type {ChangeDetail} from '../../events/types';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
   children?: React.ReactNode;
 }
 

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -4,11 +4,11 @@ import {Button} from '../../../components/Button';
 import {CommonSliceType} from '../../../../json-crdt-extensions';
 import {ButtonGroup} from '../../../components/ButtonGroup';
 import {useSyncStore} from '../../../react/hooks';
-import type {PeritextSurfaceContextValue} from '../../../react';
 import {ButtonSeparator} from '../../../components/ButtonSeparator';
+import type {PeritextSurfaceState} from '../../../react';
 
 export interface TopToolbarProps {
-  ctx: PeritextSurfaceContextValue;
+  ctx: PeritextSurfaceState;
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/context.ts b/src/json-crdt-peritext-ui/plugins/minimal/context.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {PeritextSurfaceState} from '../../react';
 import type {ValueSyncStore} from '../../../util/events/sync-store';
 
 export interface MinimalPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+  ctx?: PeritextSurfaceState;
 
   /** Current score. */
   score: ValueSyncStore<number>;

diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/Chrome/index.tsx
@@ -20,11 +20,11 @@ export interface ChromeProps {
 }
 
 export const Chrome: React.FC<ChromeProps> = ({children}) => {
-  const {ctx} = useDefaultPlugin();
+  const ctx = useDefaultPlugin();
 
   return (
     <div className={blockClass}>
-      {!!ctx && <TopToolbar ctx={ctx} />}
+      {!!ctx && <TopToolbar ctx={ctx.surface} />}
       {children}
     </div>
   );

diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/InlineToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/InlineToolbar/index.tsx
@@ -0,0 +1,39 @@
+// biome-ignore lint: React is used for JSX
+import * as React from 'react';
+import {Paper} from 'nice-ui/lib/4-card/Paper';
+import {Flex} from 'nice-ui/lib/3-list-item/Flex';
+import {BasicButton} from '../../../components/BasicButton';
+import {keyframes, rule} from 'nano-theme';
+
+const introAnimation = keyframes({
+  from: {
+    tr: 'scale(.9)',
+  },
+  to: {
+    tr: 'scale(1)',
+  },
+});
+
+const blockClass = rule({
+  an: introAnimation + ' .1s forwards',
+});
+
+// biome-ignore lint: empty interface
+export type InlineToolbarProps = {};
+
+export const InlineToolbar: React.FC<InlineToolbarProps> = () => {
+  return (
+    <Paper hoverElevate level={3} className={blockClass}>
+      <Flex style={{alignItems: 'center', columnGap: 4, rowGap: 4, padding: 4, color: 'black'}}>
+        <BasicButton size={32} width={30} radius={5} onClick={() => {}}>
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.10505 12C4.70805 12 4.4236 11.912 4.25171 11.736C4.0839 11.5559 4 11.2715 4 10.8827V4.11733C4 3.72033 4.08595 3.43588 4.25784 3.26398C4.43383 3.08799 4.71623 3 5.10505 3C6.42741 3 8.25591 3 9.02852 3C10.1373 3 11.0539 3.98153 11.0539 5.1846C11.0539 6.08501 10.6037 6.81855 9.70327 7.23602C10.8657 7.44851 11.5176 8.62787 11.5176 9.48128C11.5176 10.5125 10.9902 12 9.27734 12C8.77742 12 6.42626 12 5.10505 12ZM8.37891 8.00341H5.8V10.631H8.37891C8.9 10.631 9.6296 10.1211 9.6296 9.29877C9.6296 8.47643 8.9 8.00341 8.37891 8.00341ZM5.8 4.36903V6.69577H8.17969C8.53906 6.69577 9.27734 6.35939 9.27734 5.50002C9.27734 4.64064 8.48047 4.36903 8.17969 4.36903H5.8Z"
+              fill="currentColor"
+            />
+          </svg>
+        </BasicButton>
+      </Flex>
+    </Paper>
+  );
+};
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderPeritext.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
 import {Chrome} from './Chrome';
-import {context, type DefaultPluginContextValue} from './context';
-import type {PeritextSurfaceContextValue, PeritextViewProps} from '../../react';
+import {context, type ToolbarPluginContextValue} from './context';
+import {ToolbarState} from './state';
+import type {PeritextSurfaceState, PeritextViewProps} from '../../react';
 
 export interface RenderPeritextProps extends PeritextViewProps {
-  ctx?: PeritextSurfaceContextValue;
+  surface?: PeritextSurfaceState;
   children?: React.ReactNode;
 }
 
-export const RenderPeritext: React.FC<RenderPeritextProps> = ({ctx, children}) => {
-  const value: DefaultPluginContextValue = React.useMemo(() => ({ctx}), [ctx]);
+export const RenderPeritext: React.FC<RenderPeritextProps> = ({surface, children}) => {
+  const value: null | ToolbarPluginContextValue = React.useMemo(() => !surface ? null : ({surface, toolbar: new ToolbarState()}), [surface]);
 
   return (
     <context.Provider value={value}>

diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts b/src/json-crdt-peritext-ui/plugins/toolbar/ToolbarPlugin.ts
@@ -15,8 +15,8 @@ export class ToolbarPlugin implements PeritextPlugin {
 
   public readonly block: PeritextPlugin['block'] = (props, children) => h(RenderBlock, props as any, children);
 
-  public readonly peritext: PeritextPlugin['peritext'] = (props, children, ctx) =>
-    h(RenderPeritext, {...props, children, ctx});
+  public readonly peritext: PeritextPlugin['peritext'] = (props, children, surface) =>
+    h(RenderPeritext, {...props, children, surface});
 
   public readonly caret: PeritextPlugin['caret'] = (props, children) => h(RenderCaret, <any>props, children);
 }
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
@@ -5,10 +5,10 @@ import {CommonSliceType} from '../../../../json-crdt-extensions';
 import {ButtonGroup} from '../../../components/ButtonGroup';
 import {useSyncStore} from '../../../react/hooks';
 import {ButtonSeparator} from '../../../components/ButtonSeparator';
-import type {PeritextSurfaceContextValue} from '../../../react';
+import type {PeritextSurfaceState} from '../../../react';
 
 export interface TopToolbarProps {
-  ctx: PeritextSurfaceContextValue;
+  ctx: PeritextSurfaceState;
 }
 
 export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {

diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/context.ts b/src/json-crdt-peritext-ui/plugins/toolbar/context.ts
@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type {PeritextSurfaceContextValue} from '../../react';
+import type {ToolbarState} from './state';
+import type {PeritextSurfaceState} from '../../react';
 
-export interface DefaultPluginContextValue {
-  ctx?: PeritextSurfaceContextValue;
+export interface ToolbarPluginContextValue {
+  surface: PeritextSurfaceState;
+  toolbar: ToolbarState;
 }
 
-export const context = React.createContext<DefaultPluginContextValue>(null!);
+export const context = React.createContext<ToolbarPluginContextValue | null>(null);
 
 export const useDefaultPlugin = () => React.useContext(context);
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state.ts b/src/json-crdt-peritext-ui/plugins/toolbar/state.ts
@@ -0,0 +1,3 @@
+export class ToolbarState {
+
+}