Update react demo app to use ChannelProvider

demo/src/components/Paragraph.tsx

@@ -1,10 +1,13 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
-import { getMemberFirstName, getOutlineClasses } from '../utils';
+import { ChannelProvider } from 'ably/react';
+
+import { generateSpaceName, getMemberFirstName, getOutlineClasses, getParamValueFromUrl } from '../utils';
 import { StickyLabel } from './StickyLabel';
 import { LockFilledSvg } from './svg/LockedFilled.tsx';
 import { EditableText } from './EditableText.tsx';
 import { useTextComponentLock } from '../hooks/useTextComponentLock.ts';
+import { buildLockId } from '../utils/locking.ts';
 
 interface Props extends React.HTMLAttributes<HTMLParagraphElement> {
   id: string;
@@ -14,18 +17,38 @@ interface Props extends React.HTMLAttributes<HTMLParagraphElement> {
   maxlength?: number;
 }
 
-export const Paragraph = ({
+export const Paragraph = (props: Props) => {
+  const spaceName = getParamValueFromUrl('space', generateSpaceName);
+  const lockId = buildLockId(props.slide, props.id);
+  const channelName = `${spaceName}${lockId}`;
+
+  return (
+    <ChannelProvider
+      channelName={channelName}
+      options={{ params: { rewind: '1' } }}
+    >
+      <ParagraphChild
+        {...props}
+        channelName={channelName}
+      ></ParagraphChild>
+    </ChannelProvider>
+  );
+};
+
+const ParagraphChild = ({
   variant = 'regular',
   id,
   slide,
   className,
   children,
   maxlength = 300,
+  channelName,
   ...props
-}: Props) => {
+}: Props & { channelName: string }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { content, activeMember, locked, lockedByYou, editIsNotAllowed, handleSelect, handleContentUpdate } =
     useTextComponentLock({
+      channelName,
       id,
       slide,
       defaultText: children,

demo/src/components/Title.tsx

@@ -1,11 +1,13 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
+import { ChannelProvider } from 'ably/react';
 
-import { getMemberFirstName, getOutlineClasses } from '../utils';
+import { generateSpaceName, getMemberFirstName, getOutlineClasses, getParamValueFromUrl } from '../utils';
 import { LockFilledSvg } from './svg/LockedFilled.tsx';
 import { StickyLabel } from './StickyLabel.tsx';
 import { EditableText } from './EditableText.tsx';
 import { useTextComponentLock } from '../hooks/useTextComponentLock.ts';
+import { buildLockId } from '../utils/locking.ts';
 
 interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
   id: string;
@@ -15,10 +17,38 @@ interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
   maxlength?: number;
 }
 
-export const Title = ({ variant = 'h1', className, id, slide, children, maxlength = 70, ...props }: Props) => {
+export const Title = (props: Props) => {
+  const spaceName = getParamValueFromUrl('space', generateSpaceName);
+  const lockId = buildLockId(props.slide, props.id);
+  const channelName = `${spaceName}${lockId}`;
+
+  return (
+    <ChannelProvider
+      channelName={channelName}
+      options={{ params: { rewind: '1' } }}
+    >
+      <TitleChild
+        {...props}
+        channelName={channelName}
+      ></TitleChild>
+    </ChannelProvider>
+  );
+};
+
+const TitleChild = ({
+  variant = 'h1',
+  className,
+  id,
+  slide,
+  children,
+  maxlength = 70,
+  channelName,
+  ...props
+}: Props & { channelName: string }) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { content, activeMember, locked, lockedByYou, editIsNotAllowed, handleSelect, handleContentUpdate } =
     useTextComponentLock({
+      channelName,
       id,
       slide,
       defaultText: children,

demo/src/hooks/useTextComponentLock.ts

@@ -2,28 +2,33 @@ import { MutableRefObject, useCallback } from 'react';
 import { useChannel } from 'ably/react';
 import { useMembers, useLock } from '@ably/spaces/react';
 import sanitize from 'sanitize-html';
-import { findActiveMember, generateSpaceName, getParamValueFromUrl } from '../utils';
+import { findActiveMember } from '../utils';
 import { buildLockId } from '../utils/locking.ts';
 import { usePreview } from '../components/PreviewContext.tsx';
 import { useClearOnFailedLock, useClickOutside, useElementSelect } from './useElementSelect.ts';
 import { useSlideElementContent } from './useSlideElementContent.ts';
 
 interface UseTextComponentLockArgs {
+  channelName: string;
   id: string;
   slide: string;
   defaultText: string;
   containerRef: MutableRefObject<HTMLElement | null>;
 }
 
-export const useTextComponentLock = ({ id, slide, defaultText, containerRef }: UseTextComponentLockArgs) => {
-  const spaceName = getParamValueFromUrl('space', generateSpaceName);
+export const useTextComponentLock = ({
+  channelName,
+  id,
+  slide,
+  defaultText,
+  containerRef,
+}: UseTextComponentLockArgs) => {
   const { members, self } = useMembers();
   const activeMember = findActiveMember(id, slide, members);
   const lockId = buildLockId(slide, id);
   const { status, member } = useLock(lockId);
   const locked = status === 'locked';
   const lockedByYou = locked && self?.connectionId === member?.connectionId;
-  const channelName = `[?rewind=1]${spaceName}${lockId}`;
   const [content, updateContent] = useSlideElementContent(lockId, defaultText);
   const preview = usePreview();