fix: locking demo bugs

demo/src/components/Avatar.tsx

@@ -40,8 +40,11 @@ export const Avatar = ({
       <div
         className={cn(
           'rounded-full flex items-center justify-center h-[32px] w-[32px] md:h-[40px] md:w-[40px] bg-gradient-to-tr',
-          profileData.color.gradientStart.tw,
-          profileData.color.gradientEnd.tw,
+          {
+            [profileData.color.gradientStart.tw]: isConnected,
+            [profileData.color.gradientEnd.tw]: isConnected,
+            'bg-[#D9D9DA]': !isConnected,
+          },
         )}
         data-id="avatar-inner-wrapper"
       >

demo/src/components/Image.tsx

@@ -1,6 +1,8 @@
 import cn from 'classnames';
-import { useElementSelect, useMembers } from '../hooks';
-import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils';
+import { useClickOutside, useElementSelect, useMembers } from '../hooks';
+import { findActiveMembers, getMemberFirstName, getOutlineClasses } from '../utils';
+import { useRef } from 'react';
+import { usePreview } from './PreviewContext.tsx';
 
 interface Props extends React.HTMLAttributes<HTMLImageElement> {
   src: string;
@@ -12,19 +14,26 @@ interface Props extends React.HTMLAttributes<HTMLImageElement> {
 }
 
 export const Image = ({ src, children, className, id, slide, locatable = true }: Props) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const preview = usePreview();
   const { members, self } = useMembers();
   const { handleSelect } = useElementSelect(id, false);
-  const activeMember = findActiveMember(id, slide, members);
-  const { outlineClasses, stickyLabelClasses } = getOutlineClasses(activeMember);
-  const memberName = getMemberFirstName(activeMember);
-  const label = self?.connectionId === activeMember?.connectionId ? 'You' : memberName;
+  const activeMembers = findActiveMembers(id, slide, members);
+  const occupiedByMe = activeMembers.some((member) => member.connectionId === self?.connectionId);
+  const [firstMember] = activeMembers;
+  const { outlineClasses, stickyLabelClasses } = getOutlineClasses(firstMember);
+  const memberName = getMemberFirstName(firstMember);
+  const name = occupiedByMe ? 'You' : memberName;
+  const label = activeMembers.length > 1 ? `${name} +${activeMembers.length - 1}` : name;
+
+  useClickOutside(containerRef, self, occupiedByMe && !preview);
 
   return (
     <div
       data-before={label}
       className={cn('relative xs:my-4 md:my-0', className, {
         [`outline-2 outline before:content-[attr(data-before)] before:absolute before:-top-[22px] before:-left-[2px] before:px-[10px] before:text-sm before:text-white before:rounded-t-lg before:normal-case ${outlineClasses} before:${stickyLabelClasses}`]:
-          activeMember,
+          firstMember,
       })}
     >
       <img

demo/src/hooks/useTextComponentLock.ts

@@ -7,13 +7,15 @@ import { useMembers } from './useMembers.ts';
 import { useClearOnFailedLock, useClickOutside, useElementSelect } from './useElementSelect.ts';
 import { useLockStatus } from './useLock.ts';
 import { useSlideElementContent } from './useSlideElementContent.ts';
+import sanitize from 'sanitize-html';
 
 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();
@@ -32,7 +34,8 @@ export const useTextComponentLock = ({ id, slide, defaultText, containerRef }: U
 
   const { channel } = useChannel(channelName, (message) => {
     if (message.connectionId === self?.connectionId) return;
-    updateContent(message.data);
+    const sanitizedValue = sanitize(message.data, { allowedTags: [] });
+    updateContent(sanitizedValue);
   });
 
   const optimisticallyLocked = !!activeMember;

demo/src/utils/active-member.ts

@@ -5,6 +5,10 @@ export const findActiveMember = (id: string, slide: string, members?: Member[])
   return members.find((member) => member.location?.element === id && member.location?.slide === slide);
 };
 
+export const findActiveMembers = (id: string, slide: string, members?: Member[]) => {
+  return (members ?? []).filter((member) => member.location?.element === id && member.location?.slide === slide);
+};
+
 export const getMemberFirstName = (member?: Member) => {
   if (!member) return '';
   return member.profileData.name.split(' ')[0];