Baton Passing Basic Edition

editor/src/components/canvas/design-panel-root.tsx

@@ -36,8 +36,8 @@ import { useRoom, useStatus } from '../../../liveblocks.config'
 import { MultiplayerWrapper } from '../../utils/multiplayer-wrapper'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { CommentsPane } from '../inspector/comments-pane'
-import { useIsViewer } from '../editor/store/project-server-state-hooks'
 import { EditorModes, isCommentMode } from '../editor/editor-modes'
+import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 
 function isCodeEditorEnabled(): boolean {
   if (typeof window !== 'undefined') {
@@ -169,7 +169,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     onClickTab(RightMenuTab.Settings)
   }, [onClickTab])
 
-  const isViewer = useIsViewer()
+  const allowedToEdit = useAllowedToEditProject()
 
   if (!isRightMenuExpanded) {
     return null
@@ -195,8 +195,8 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           selected={selectedTab === RightMenuTab.Inspector}
           onClick={onClickInspectorTab}
         />
-        {unless(
-          isViewer,
+        {when(
+          allowedToEdit,
           <>
             <MenuTab
               label={'Insert'}

editor/src/components/editor/canvas-toolbar.tsx

@@ -69,8 +69,8 @@ import {
 } from '../canvas/ui/floating-insert-menu'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { RightMenuTab, floatingInsertMenuStateSwap } from './store/editor-state'
-import { useIsViewer } from './store/project-server-state-hooks'
 import { useStatus } from '../../../liveblocks.config'
+import { useAllowedToEditProject } from './store/collaborative-editing'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
@@ -425,7 +425,7 @@ export const CanvasToolbar = React.memo(() => {
     ? 'Not connected to room'
     : 'Comment Mode'
 
-  const isViewer = useIsViewer()
+  const allowedToEdit = useAllowedToEditProject()
 
   return (
     <FlexColumn
@@ -459,8 +459,8 @@ export const CanvasToolbar = React.memo(() => {
             style={{ width: 36 }}
           />
         </Tooltip>
-        {unless(
-          isViewer,
+        {when(
+          allowedToEdit,
           <>
             <Tooltip title='Insert or Edit Text' placement='bottom'>
               <InsertModeButton
@@ -544,7 +544,7 @@ export const CanvasToolbar = React.memo(() => {
       {when(
         canvasToolbarMode.primary === 'edit' &&
           canvasToolbarMode.secondary === 'selected' &&
-          !isViewer,
+          allowedToEdit,
         <>
           {when(
             insertMenuMode === 'closed',
@@ -673,7 +673,7 @@ export const CanvasToolbar = React.memo(() => {
       {when(
         canvasToolbarMode.primary === 'edit' &&
           canvasToolbarMode.secondary === 'strategy-active' &&
-          !isViewer,
+          allowedToEdit,
         <StrategyIndicator />,
       )}
       {/* Insert Mode */}

editor/src/components/editor/editor-component.tsx

@@ -59,11 +59,7 @@ import { useDispatch } from './store/dispatch-context'
 import type { EditorAction } from './action-types'
 import { EditorCommon } from './editor-component-common'
 import { notice } from '../common/notice'
-import {
-  ProjectServerStateUpdater,
-  isProjectViewer,
-  isProjectViewerFromState,
-} from './store/project-server-state'
+import { ProjectServerStateUpdater } from './store/project-server-state'
 import { RoomProvider, initialPresence, useRoom, initialStorage } from '../../../liveblocks.config'
 import { generateUUID } from '../../utils/utils'
 import { isLiveblocksEnabled } from './liveblocks-utils'
@@ -72,6 +68,7 @@ import LiveblocksProvider from '@liveblocks/yjs'
 import { isRoomId, projectIdToRoomId } from '../../core/shared/multiplayer'
 import { useDisplayOwnershipWarning } from './project-owner-hooks'
 import { EditorModes } from './editor-modes'
+import { allowedToEditProject } from './store/collaborative-editing'
 
 const liveModeToastId = 'play-mode-toast'
 
@@ -359,9 +356,9 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
 
   useSelectorWithCallback(
     Substores.projectServerState,
-    (store) => store.projectServerState.isMyProject,
+    (store) => store.projectServerState,
     (isMyProject) => {
-      if (isProjectViewer(isMyProject)) {
+      if (!allowedToEditProject(isMyProject)) {
         dispatch([
           EditorActions.switchEditorMode(EditorModes.commentMode(null, 'not-dragging')),
           EditorActions.setRightMenuTab(RightMenuTab.Comments),

editor/src/components/editor/global-shortcuts.tsx

@@ -146,7 +146,8 @@ import type { ElementPathTrees } from '../../core/shared/element-path-tree'
 import { createPasteToReplacePostActionActions } from '../canvas/canvas-strategies/post-action-options/post-action-options'
 import { wrapInDivStrategy } from './wrap-in-callbacks'
 import { isFeatureEnabled } from '../../utils/feature-switches'
-import { isProjectViewerFromState, type ProjectServerState } from './store/project-server-state'
+import { type ProjectServerState } from './store/project-server-state'
+import { allowedToEditProject } from './store/collaborative-editing'
 
 function updateKeysPressed(
   keysPressed: KeysPressed,
@@ -364,7 +365,7 @@ export function handleKeyDown(
   // Stop the browser from firing things like save dialogs.
   preventBrowserShortcuts(editor, event)
 
-  const isViewer = isProjectViewerFromState(projectServerState)
+  const allowedToEdit = allowedToEditProject(projectServerState)
 
   // Ensure that any key presses are appropriately recorded.
   const key = Keyboard.keyCharacterForCode(event.keyCode)
@@ -612,12 +613,11 @@ export function handleKeyDown(
         return [EditorActions.toggleHidden()]
       },
       [INSERT_IMAGE_SHORTCUT]: () => {
-        if (isViewer) {
-          return []
-        }
-        if (isSelectMode(editor.mode) || isInsertMode(editor.mode)) {
-          // FIXME: Side effects.
-          insertImage(dispatch)
+        if (allowedToEdit) {
+          if (isSelectMode(editor.mode) || isInsertMode(editor.mode)) {
+            // Side effects.
+            insertImage(dispatch)
+          }
         }
         return []
       },
@@ -752,20 +752,18 @@ export function handleKeyDown(
         }
       },
       [ADD_ELEMENT_SHORTCUT]: () => {
-        if (isViewer) {
-          return []
-        }
-        if (isSelectMode(editor.mode)) {
-          return [
-            EditorActions.openFloatingInsertMenu({
-              insertMenuMode: 'insert',
-              parentPath: null,
-              indexPosition: null,
-            }),
-          ]
-        } else {
-          return []
+        if (allowedToEdit) {
+          if (isSelectMode(editor.mode)) {
+            return [
+              EditorActions.openFloatingInsertMenu({
+                insertMenuMode: 'insert',
+                parentPath: null,
+                indexPosition: null,
+              }),
+            ]
+          }
         }
+        return []
       },
       [OPEN_EYEDROPPER]: () => {
         const selectedViews = editor.selectedViews
@@ -788,30 +786,29 @@ export function handleKeyDown(
         return []
       },
       [TEXT_EDIT_MODE]: () => {
-        if (isViewer) {
-          return []
-        }
-        const newUID = generateUidWithExistingComponents(editor.projectContents)
+        if (allowedToEdit) {
+          const newUID = generateUidWithExistingComponents(editor.projectContents)
 
-        actions.push(
-          EditorActions.enableInsertModeForJSXElement(
-            defaultSpanElement(newUID),
-            newUID,
-            {},
-            null,
-            {
-              textEdit: true,
-            },
-          ),
-          CanvasActions.createInteractionSession(
-            createHoverInteractionViaMouse(
-              CanvasMousePositionRaw!,
-              modifiers,
-              boundingArea(),
-              'zero-drag-permitted',
+          actions.push(
+            EditorActions.enableInsertModeForJSXElement(
+              defaultSpanElement(newUID),
+              newUID,
+              {},
+              null,
+              {
+                textEdit: true,
+              },
             ),
-          ),
-        )
+            CanvasActions.createInteractionSession(
+              createHoverInteractionViaMouse(
+                CanvasMousePositionRaw!,
+                modifiers,
+                boundingArea(),
+                'zero-drag-permitted',
+              ),
+            ),
+          )
+        }
         return actions
       },
       [TOGGLE_TEXT_BOLD]: () => {
@@ -965,13 +962,14 @@ export function handleKeyDown(
         return [EditorActions.applyCommandsAction(commands)]
       },
       [OPEN_INSERT_MENU]: () => {
-        if (isViewer) {
+        if (allowedToEdit) {
+          return [
+            EditorActions.setPanelVisibility('rightmenu', true),
+            EditorActions.setRightMenuTab(RightMenuTab.Insert),
+          ]
+        } else {
           return []
         }
-        return [
-          EditorActions.setPanelVisibility('rightmenu', true),
-          EditorActions.setRightMenuTab(RightMenuTab.Insert),
-        ]
       },
       [WRAP_IN_DIV]: () => {
         if (!isSelectMode(editor.mode)) {

editor/src/components/editor/persistence/persistence.ts

@@ -27,6 +27,7 @@ import {
   userLogOutEvent,
 } from './generic/persistence-machine'
 import type { PersistenceBackendAPI, PersistenceContext } from './generic/persistence-types'
+import { releaseControl } from '../store/collaborative-editing'
 
 export class PersistenceMachine {
   private interpreter: Interpreter<
@@ -133,7 +134,8 @@ export class PersistenceMachine {
 
     this.interpreter.start()
 
-    window.addEventListener('beforeunload', (e) => {
+    window.addEventListener('beforeunload', async (e) => {
+      await releaseControl()
       if (!this.isSafeToClose()) {
         this.sendThrottledSave()
         e.preventDefault()

editor/src/components/editor/project-owner-hooks.ts

@@ -1,15 +1,14 @@
 import * as React from 'react'
 import { useDispatch } from './store/dispatch-context'
 import { Substores, useSelectorWithCallback } from './store/store-hook'
-import type { ProjectServerState } from './store/project-server-state'
 import { removeToast, showToast } from './actions/action-creators'
 import { notice } from '../common/notice'
-import { assertNever } from '../../core/shared/utils'
+import { allowedToEditProject } from './store/collaborative-editing'
 
 const OwnershipToastID = 'project-ownership-toast'
 
 interface OwnershipValues {
-  projectOwnership: ProjectServerState['isMyProject']
+  allowedToEdit: boolean
   projectID: string | null
 }
 
@@ -21,33 +20,25 @@ export function useDisplayOwnershipWarning(): void {
       // Without this check this hook will only fire before the LOAD action
       // and then the toasts will be cleared before they ever really existed.
       if (ownershipValues.projectID != null) {
-        switch (ownershipValues.projectOwnership) {
-          case 'yes':
-            // Remove the toast if we switch to a project that the user owns.
-            globalThis.requestAnimationFrame(() => {
-              dispatch([removeToast(OwnershipToastID)])
-            })
-            break
-          case 'no':
-            // Add the toast if we switch to a project that the user does not own.
-            globalThis.requestAnimationFrame(() => {
-              dispatch([
-                showToast(
-                  notice(
-                    'Viewer Mode: As you are not the owner of this project, it is read-only.',
-                    'NOTICE',
-                    true,
-                    OwnershipToastID,
-                  ),
+        if (ownershipValues.allowedToEdit) {
+          // Remove the toast if we switch to a project that the user owns.
+          globalThis.requestAnimationFrame(() => {
+            dispatch([removeToast(OwnershipToastID)])
+          })
+        } else {
+          // Add the toast if we switch to a project that the user does not own.
+          globalThis.requestAnimationFrame(() => {
+            dispatch([
+              showToast(
+                notice(
+                  'Viewer Mode: As you are not the owner of this project, it is read-only.',
+                  'NOTICE',
+                  true,
+                  OwnershipToastID,
                 ),
-              ])
-            })
-            break
-          case 'unknown':
-            // Do nothing.
-            break
-          default:
-            assertNever(ownershipValues.projectOwnership)
+              ),
+            ])
+          })
         }
       }
     },
@@ -57,7 +48,7 @@ export function useDisplayOwnershipWarning(): void {
     Substores.fullStore,
     (store) => {
       return {
-        projectOwnership: store.projectServerState.isMyProject,
+        allowedToEdit: allowedToEditProject(store.projectServerState),
         projectID: store.editor.id,
       }
     },