{children}
diff --git a/demo/src/components/SlidesStateContext.tsx b/demo/src/components/SlidesStateContext.tsx
new file mode 100644
index 00000000..1680223a
--- /dev/null
+++ b/demo/src/components/SlidesStateContext.tsx
@@ -0,0 +1,24 @@
+import React, { useMemo, useState } from 'react';
+
+interface SlidesStateContextProps {
+ slidesState: Record
+ {children}
+
+ );
+};
diff --git a/demo/src/components/Title.tsx b/demo/src/components/Title.tsx
index 21c79b9c..2c24d714 100644
--- a/demo/src/components/Title.tsx
+++ b/demo/src/components/Title.tsx
@@ -1,39 +1,68 @@
+import React, { useRef } from 'react';
import cn from 'classnames';
-import { useElementSelect, useMembers } from '../hooks';
-import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils';
+
+import { getMemberFirstName, getOutlineClasses } from '../utils';
+import { LockFilledSvg } from './svg/LockedFilled.tsx';
+import { StickyLabel } from './StickyLabel.tsx';
+import { EditableText } from './EditableText.tsx';
+import { useTextComponentLock } from '../hooks/useTextComponentLock.ts';
interface Props extends React.HTMLAttributes
+
<div className="absolute w-[176px] left-[20px] top-[86px] md:top-20 md:left-6 md:right-6 md:mx-auto">
<Title
variant="h2"
id="4"
slide="0"
+ maxlength={15}
>
Contrast
@@ -40,6 +45,7 @@ export const slides = [
variant="aside"
id="5"
slide="0"
+ maxlength={105}
>
When a design uses several elements, the goal is to make each one distinct.
@@ -49,12 +55,14 @@ export const slides = [
src="/repetition.svg"
id="6"
slide="0"
+ locatable={false}
>
Repetition
@@ -62,6 +70,7 @@ export const slides = [
variant="aside"
id="8"
slide="0"
+ maxlength={105}
>
Repetition helps designers establish relationships, develop organization and strengthen unity.
@@ -71,6 +80,7 @@ export const slides = [
src="/alignment.svg"
id="9"
slide="0"
+ locatable={false}
>
Alignment
@@ -87,6 +98,7 @@ export const slides = [
variant="aside"
id="11"
slide="0"
+ maxlength={105}
>
Alignment creates a clean, sophisticated look. All elements should relate to all others in some way.
@@ -96,6 +108,7 @@ export const slides = [
src="/proximity.svg"
id="12"
slide="0"
+ locatable={false}
>
Proximity
@@ -112,6 +126,7 @@ export const slides = [
variant="aside"
id="14"
slide="0"
+ maxlength={105}
>
When items are grouped, they become a single visual unit, rather than several separate entities.
@@ -123,7 +138,10 @@ export const slides = [
},
{
children: (
-
+
- No one likes boring text blocks on a website. And{' '}
- <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">images and icons</span>{' '}
- are the fastest way to get information.
+ No one likes boring text blocks on a website. And images and icons are the fastest way to get information.
</Paragraph>
<Paragraph
id="4"
slide="1"
>
- But <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">don't overdo it</span>
- . If you can't explain for what purpose you put this line or icon, it's better to abandon it.
+ But don't overdo it. If you can't explain for what purpose you put this line or icon, it's better to abandon
+ it.
</Paragraph>
</div>
<Image
@@ -168,7 +184,10 @@ export const slides = [
},
{
children: (
- <div className="grid grid-cols-1 md:grid-cols-2 gap-8 h-full items-center p-8">
+ <div
+ key={2}
+ className="grid grid-cols-1 md:grid-cols-2 gap-8 h-full items-center p-8"
+ >
<div>
<Title
variant="h1"
diff --git a/demo/src/components/svg/LockedFilled.tsx b/demo/src/components/svg/LockedFilled.tsx
new file mode 100644
index 00000000..68762802
--- /dev/null
+++ b/demo/src/components/svg/LockedFilled.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+
+export const LockFilledSvg = (props: SVGProps<SVGSVGElement>) => {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M12.0003 5.8334H11.3337V4.50007C11.3337 2.66008 9.84032 1.16675 8.00033 1.16675C6.16033 1.16675 4.66699 2.66008 4.66699 4.50007V5.8334H4.00033C3.26699 5.8334 2.66699 6.43339 2.66699 7.16672V13.8334C2.66699 14.5667 3.26699 15.1667 4.00033 15.1667H12.0003C12.7337 15.1667 13.3337 14.5667 13.3337 13.8334V7.16672C13.3337 6.43339 12.7337 5.8334 12.0003 5.8334ZM8.00033 11.8334C7.26699 11.8334 6.66699 11.2334 6.66699 10.5C6.66699 9.76671 7.26699 9.16671 8.00033 9.16671C8.73366 9.16671 9.33366 9.76671 9.33366 10.5C9.33366 11.2334 8.73366 11.8334 8.00033 11.8334ZM6.00033 5.8334V4.50007C6.00033 3.39341 6.89366 2.50008 8.00033 2.50008C9.10699 2.50008 10.0003 3.39341 10.0003 4.50007V5.8334H6.00033Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+};
diff --git a/demo/src/hooks/index.ts b/demo/src/hooks/index.ts
index e39c8f68..b2ab5dab 100644
--- a/demo/src/hooks/index.ts
+++ b/demo/src/hooks/index.ts
@@ -1,3 +1,4 @@
export * from './useMembers';
export * from './useElementSelect';
export * from './useTrackCursor';
+export * from './useLock';
diff --git a/demo/src/hooks/useElementSelect.ts b/demo/src/hooks/useElementSelect.ts
index ff6c7ac4..be873b66 100644
--- a/demo/src/hooks/useElementSelect.ts
+++ b/demo/src/hooks/useElementSelect.ts
@@ -1,15 +1,67 @@
-import { useContext } from 'react';
+import { MutableRefObject, useContext, useEffect } from 'react';
import { SpacesContext } from '../components';
import { useMembers } from './useMembers';
-export const useElementSelect = (element?: string) => {
+import { buildLockId, releaseMyLocks } from '../utils/locking';
+import { Member } from '../utils/types';
+
+export const useElementSelect = (element?: string, lockable: boolean = true) => {
const space = useContext(SpacesContext);
const { self } = useMembers();
- const handleSelect = () => {
+ const handleSelect = async () => {
if (!space || !self) return;
- space.locations.set({ slide: self.location?.slide, element });
+
+ if (lockable) {
+ const lockId = buildLockId(self.location?.slide, element);
+ const lock = space.locks.get(lockId);
+
+ if (!lock) {
+ // The lock is not set but we enter the location optimistically
+ await space.locations.set({ slide: self.location?.slide, element });
+ // TODO delete this workaround when spaces API is ready
+ await delay(60);
+ await space.locks.acquire(lockId);
+ }
+ } else {
+ space.locations.set({ slide: self.location?.slide, element });
+ }
};
return { handleSelect };
};
+
+export const useClickOutside = (ref: MutableRefObject<HTMLElement | null>, self?: Member, enabled?: boolean) => {
+ const space = useContext(SpacesContext);
+
+ useEffect(() => {
+ if (!enabled) return;
+ const handleClick = async (e: DocumentEventMap['click']) => {
+ const clickedOutside = !ref.current?.contains(e.target as Node);
+ if (clickedOutside && space && self) {
+ await space.locations.set({ slide: self.location?.slide, element: undefined });
+ // TODO delete this workaround when spaces API is ready
+ await delay(60);
+ await releaseMyLocks(space, self);
+ }
+ };
+
+ document.addEventListener('click', handleClick, true);
+
+ return () => {
+ document.removeEventListener('click', handleClick, true);
+ };
+ }, [space, self, enabled]);
+};
+
+export const useClearOnFailedLock = (lockConflict: boolean, self?: Member) => {
+ const space = useContext(SpacesContext);
+
+ useEffect(() => {
+ if (lockConflict) {
+ space?.locations.set({ slide: self?.location?.slide, element: undefined });
+ }
+ }, [lockConflict]);
+};
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/demo/src/hooks/useLock.ts b/demo/src/hooks/useLock.ts
new file mode 100644
index 00000000..356ca349
--- /dev/null
+++ b/demo/src/hooks/useLock.ts
@@ -0,0 +1,56 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { type Lock, LockStatus } from '@ably-labs/spaces';
+
+import { SpacesContext } from '../components';
+import { buildLockId } from '../utils/locking';
+import { isMember } from '../hooks';
+
+import { type Member } from '../utils/types';
+
+export const useLock = (slide: string, id: string): { status?: string; member?: Member } => {
+ const space = useContext(SpacesContext);
+ const locationLockId = buildLockId(slide, id);
+ const [status, setStatus] = useState<LockStatus | undefined>(undefined);
+ const [member, setMember] = useState<Member | undefined>(undefined);
+
+ useEffect(() => {
+ if (!space) return;
+
+ const handler = (lock: Lock) => {
+ if (lock.request.id !== locationLockId) return;
+
+ setStatus(lock.request.status);
+
+ if (isMember(lock.member)) {
+ setMember(lock.member);
+ }
+ };
+
+ space.locks.subscribe('update', handler);
+
+ return () => {
+ space?.locks.unsubscribe('update', handler);
+ };
+ }, [space, slide, id]);
+
+ useEffect(() => {
+ if (status !== undefined) return;
+ const lock = space?.locks.get(locationLockId);
+ if (lock) {
+ setMember(lock.member as any);
+ setStatus(lock.request.status);
+ }
+ }, [status]);
+
+ return { status, member };
+};
+
+export const useLockStatus = (slide: string, id: string, selfConnectionId?: string) => {
+ const { member, status } = useLock(slide, id);
+
+ const locked = status === 'locked';
+ const lockedByYou = locked && member?.connectionId === selfConnectionId;
+
+ return { locked, lockedByYou };
+};
diff --git a/demo/src/hooks/useMembers.ts b/demo/src/hooks/useMembers.ts
index 31442505..f7d5f717 100644
--- a/demo/src/hooks/useMembers.ts
+++ b/demo/src/hooks/useMembers.ts
@@ -1,10 +1,10 @@
import { useEffect, useState, useContext } from 'react';
-import { type SpaceMember } from '../../../src/types';
+import { type SpaceMember } from '@ably-labs/spaces';
import { SpacesContext } from '../components';
import { type Member } from '../utils/types';
-const isMember = (obj: unknown): obj is Member => {
+export const isMember = (obj: unknown): obj is Member => {
return !!(obj as Member)?.profileData?.name && !!(obj as Member)?.profileData?.color;
};
@@ -24,6 +24,20 @@ export const useMembers: () => Partial<{ self?: Member; others: Member[]; member
useEffect(() => {
if (!space) return;
+ const handler = ({ members }: { members: SpaceMember[] }) =>
+ (async () => {
+ const self = await space.members.getSelf();
+
+ if (isMember(self)) {
+ setSelf(self);
+ }
+
+ if (areMembers(members)) {
+ setMembers([...members]);
+ setOthers(membersToOthers([...members], self));
+ }
+ })();
+
const init = async () => {
const initSelf = await space.members.getSelf();
const initMembers = await space.members.getAll();
@@ -37,19 +51,6 @@ export const useMembers: () => Partial<{ self?: Member; others: Member[]; member
setOthers(membersToOthers(initMembers, initSelf));
}
- const handler = async ({ members }: { members: SpaceMember[] }) => {
- const self = await space.members.getSelf();
-
- if (isMember(self)) {
- setSelf(self);
- }
-
- if (areMembers(members)) {
- setMembers([...members]);
- setOthers(membersToOthers([...members], self));
- }
- };
-
space.subscribe('update', handler);
};
diff --git a/demo/src/hooks/useSlideElementContent.ts b/demo/src/hooks/useSlideElementContent.ts
new file mode 100644
index 00000000..5ef97f84
--- /dev/null
+++ b/demo/src/hooks/useSlideElementContent.ts
@@ -0,0 +1,13 @@
+import { useCallback, useContext } from 'react';
+import { SlidesStateContext } from '../components/SlidesStateContext.tsx';
+
+export const useSlideElementContent = (id: string, defaultContent: string) => {
+ const { slidesState, setContent } = useContext(SlidesStateContext);
+ const updateContent = useCallback(
+ (nextContent: string) => {
+ setContent(id, nextContent);
+ },
+ [id],
+ );
+ return [slidesState[id] ?? defaultContent, updateContent] as const;
+};
diff --git a/demo/src/hooks/useTextComponentLock.ts b/demo/src/hooks/useTextComponentLock.ts
new file mode 100644
index 00000000..e67c5490
--- /dev/null
+++ b/demo/src/hooks/useTextComponentLock.ts
@@ -0,0 +1,55 @@
+import { MutableRefObject, useCallback } from 'react';
+import { useChannel } from '@ably-labs/react-hooks';
+import { findActiveMember, getSpaceNameFromUrl } from '../utils';
+import { buildLockId } from '../utils/locking.ts';
+import { usePreview } from '../components/PreviewContext.tsx';
+import { useMembers } from './useMembers.ts';
+import { useClearOnFailedLock, useClickOutside, useElementSelect } from './useElementSelect.ts';
+import { useLockStatus } from './useLock.ts';
+import { useSlideElementContent } from './useSlideElementContent.ts';
+
+interface UseTextComponentLockArgs {
+ id: string;
+ slide: string;
+ defaultText: string;
+ containerRef: MutableRefObject<HTMLElement | null>;
+}
+export const useTextComponentLock = ({ id, slide, defaultText, containerRef }: UseTextComponentLockArgs) => {
+ const spaceName = getSpaceNameFromUrl();
+ const { members, self } = useMembers();
+ const activeMember = findActiveMember(id, slide, members);
+ const { locked, lockedByYou } = useLockStatus(slide, id, self?.connectionId);
+ const lockId = buildLockId(slide, id);
+ const channelName = `[?rewind=1]${spaceName}${lockId}`;
+ const [content, updateContent] = useSlideElementContent(lockId, defaultText);
+ const preview = usePreview();
+
+ const { handleSelect } = useElementSelect(id);
+ const handleContentUpdate = useCallback((content: string) => {
+ updateContent(content);
+ channel.publish('update', content);
+ }, []);
+
+ const { channel } = useChannel(channelName, (message) => {
+ if (message.connectionId === self?.connectionId) return;
+ updateContent(message.data);
+ });
+
+ const optimisticallyLocked = !!activeMember;
+ const optimisticallyLockedByYou = optimisticallyLocked && activeMember?.connectionId === self?.connectionId;
+ const editIsNotAllowed = !optimisticallyLockedByYou && optimisticallyLocked;
+ const lockConflict = optimisticallyLockedByYou && locked && !lockedByYou && !preview;
+
+ useClickOutside(containerRef, self, optimisticallyLockedByYou && !preview);
+ useClearOnFailedLock(lockConflict, self);
+
+ return {
+ content,
+ activeMember,
+ locked: optimisticallyLocked,
+ lockedByYou: optimisticallyLockedByYou,
+ editIsNotAllowed,
+ handleSelect,
+ handleContentUpdate,
+ };
+};
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index c3187cb1..cf155827 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -1,16 +1,22 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
+import { AblyProvider } from '@ably-labs/react-hooks';
import App from './App';
import './index.css';
-import { SpaceContextProvider } from './components';
+import { ably, SpaceContextProvider } from './components';
+import { SlidesStateContextProvider } from './components/SlidesStateContext.tsx';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<SpaceContextProvider>
- <App />
+ <AblyProvider client={ably}>
+ <SlidesStateContextProvider>
+ <App />
+ </SlidesStateContextProvider>
+ </AblyProvider>
</SpaceContextProvider>
</React.StrictMode>,
);
diff --git a/demo/src/utils/active-member.ts b/demo/src/utils/active-member.ts
index d4ea5670..e636d4b8 100644
--- a/demo/src/utils/active-member.ts
+++ b/demo/src/utils/active-member.ts
@@ -11,9 +11,16 @@ export const getMemberFirstName = (member?: Member) => {
};
export const getOutlineClasses = (member?: Member) => {
- if (!member) return '';
+ if (!member)
+ return {
+ outlineClasses: '',
+ stickyLabelClasses: '',
+ };
const { color } = member.profileData;
const { name } = color;
const { intensity } = color.gradientStart;
- return `outline-${name}-${intensity} before:bg-${name}-${intensity}`;
+ return {
+ outlineClasses: `outline-${name}-${intensity}`,
+ stickyLabelClasses: `bg-${name}-${intensity}`,
+ };
};
diff --git a/demo/src/utils/locking.ts b/demo/src/utils/locking.ts
new file mode 100644
index 00000000..35a56b25
--- /dev/null
+++ b/demo/src/utils/locking.ts
@@ -0,0 +1,9 @@
+import { Space } from '@ably-labs/spaces';
+import { Member } from './types';
+
+export const releaseMyLocks = async (space: Space, self: Member) => {
+ await Promise.all([...space.locks.getLockRequests(self.connectionId).map((lock) => space.locks.release(lock.id))]);
+};
+
+export const buildLockId = (slide: string | undefined, element: string | undefined) =>
+ `/slide/${slide}/element/${element}`;
diff --git a/demo/src/utils/types.d.ts b/demo/src/utils/types.d.ts
index a986fc55..f9b9d106 100644
--- a/demo/src/utils/types.d.ts
+++ b/demo/src/utils/types.d.ts
@@ -1,4 +1,4 @@
-import { type SpaceMember } from '../../../src';
+import { type SpaceMember } from '@ably-labs/spaces';
interface ProfileData {
name: string;