Link comments to scenes based on the commentId prop

editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx

@@ -36,6 +36,7 @@ import { optionalMap } from '../../../../core/shared/optional-utils'
 import { useScenes } from '../../../../core/commenting/comment-hooks'
 import { safeIndex } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { SceneCommentIdPropName } from '../../../../core/model/scene-id-utils'
 
 export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCallbacks {
   const dispatch = useDispatch()
@@ -140,7 +141,10 @@ export function getIdOfScene(scene: ElementInstanceMetadata): string | null {
     return null
   }
 
-  const idProperty = getJSXAttributesAtPath(sceneElement.value.props, create('id'))
+  const idProperty = getJSXAttributesAtPath(
+    sceneElement.value.props,
+    create(SceneCommentIdPropName),
+  )
   const currentValue = optionalMap(jsxSimpleAttributeToValue, idProperty?.attribute)
   if (currentValue == null || isLeft(currentValue) || typeof currentValue.value !== 'string') {
     return null

editor/src/components/canvas/controls/comment-popup.tsx

@@ -46,6 +46,7 @@ import { RemixNavigationAtom } from '../remix/utopia-remix-root-component'
 import { getIdOfScene } from './comment-mode/comment-mode-hooks'
 import { motion, useAnimation } from 'framer-motion'
 import type { EditorDispatch } from '../../editor/action-types'
+import { SceneCommentIdPropName } from '../../../core/model/scene-id-utils'
 
 export const ComposerEditorClassName = 'lb-composer-editor'
 
@@ -175,7 +176,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
                 : [
                     setProp_UNSAFE(
                       scene.elementPath,
-                      create('id'),
+                      create(SceneCommentIdPropName),
                       jsExpressionValue(sceneId, emptyComments),
                     ),
                   ]

editor/src/core/model/scene-id-utils.ts

@@ -11,10 +11,10 @@ import * as PP from '../shared/property-path'
 import { assertNever } from '../shared/utils'
 import { isSceneAgainstImports, isRemixSceneAgainstImports } from './project-file-utils'
 
-const IdPropName = 'id'
+export const SceneCommentIdPropName = 'data-comment-id'
 
 function getIdPropFromJSXElement(element: JSXElement): string | null {
-  const maybeIdProp = getJSXAttribute(element.props, IdPropName)
+  const maybeIdProp = getJSXAttribute(element.props, SceneCommentIdPropName)
   if (
     maybeIdProp == null ||
     maybeIdProp.type !== 'ATTRIBUTE_VALUE' ||
@@ -28,7 +28,7 @@ function getIdPropFromJSXElement(element: JSXElement): string | null {
 function setIdPropOnJSXElement(element: JSXElement, idPropValueToUse: string): JSXElement | null {
   const updatedProps = setJSXValueAtPath(
     element.props,
-    PP.create(IdPropName),
+    PP.create(SceneCommentIdPropName),
     jsExpressionValue(idPropValueToUse, emptyComments),
   )
 

editor/src/core/third-party/utopia-api-components.ts

@@ -81,7 +81,11 @@ const BasicUtopiaSceneDescriptor = (
           jsxElementWithoutUID(
             name,
             [
-              jsxAttributesEntry('id', jsExpressionValue('scene', emptyComments), emptyComments),
+              jsxAttributesEntry(
+                'data-comment-id',
+                jsExpressionValue('scene', emptyComments),
+                emptyComments,
+              ),
               jsxAttributesEntry('style', styleProp(), emptyComments),
             ],
             [],

editor/src/sample-projects/sample-project-utils.ts

@@ -256,7 +256,7 @@ function createBeachesProjectContents(): ProjectContentTreeRoot {
             lastParseSuccess: null,
             lastSavedContents: null,
             fileContents: {
-              code: "import * as React from 'react'\nimport { Scene, Storyboard } from 'utopia-api'\nimport { App } from '/src/app.js'\nimport { Playground } from '/src/playground.js'\n\nexport var storyboard = (\n  <Storyboard>\n    <Scene\n      id='playground-scene'\n      style={{\n        width: 700,\n        height: 759,\n        position: 'absolute',\n        left: 212,\n        top: 128,\n      }}\n      data-label='Playground'\n    >\n      <Playground style={{}} />\n    </Scene>\n    <Scene\n      id='app-scene'\n      style={{\n        width: 744,\n        height: 1133,\n        position: 'absolute',\n        left: 1036,\n        top: 128,\n      }}\n      data-label='My App'\n    >\n      <App style={{}} />\n    </Scene>\n  </Storyboard>\n)\n",
+              code: "import * as React from 'react'\nimport { Scene, Storyboard } from 'utopia-api'\nimport { App } from '/src/app.js'\nimport { Playground } from '/src/playground.js'\n\nexport var storyboard = (\n  <Storyboard>\n    <Scene\n      id='playground-scene'\n      data-comment-id='playground-scene'\n      style={{\n        width: 700,\n        height: 759,\n        position: 'absolute',\n        left: 212,\n        top: 128,\n      }}\n      data-label='Playground'\n    >\n      <Playground style={{}} />\n    </Scene>\n    <Scene\n      id='app-scene'\n      data-comment-id='app-scene'\n      style={{\n        width: 744,\n        height: 1133,\n        position: 'absolute',\n        left: 1036,\n        top: 128,\n      }}\n      data-label='My App'\n    >\n      <App style={{}} />\n    </Scene>\n  </Storyboard>\n)\n",
               parsed: {
                 type: 'UNPARSED',
               },

utopia-api/src/primitives/scene.tsx

@@ -4,6 +4,7 @@ import { View } from './view'
 export interface SceneProps {
   id?: string
   style?: React.CSSProperties
+  'data-comment-id'?: string
   'data-label'?: string
   'data-uid'?: string
 }