From 43dbffa11a5a0e0d154d7385e72b9e944d1ab925 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 25 Jan 2024 10:57:50 +0100 Subject: [PATCH 1/3] use `SceneCommentIdPropName` when referring to the comment id prop --- .../canvas/controls/comment-mode/comment-mode-hooks.tsx | 6 +++++- editor/src/components/canvas/controls/comment-popup.tsx | 3 ++- editor/src/core/model/scene-id-utils.ts | 6 +++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx b/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx index 9842236c25bd..2aac7b8dad41 100644 --- a/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx +++ b/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 diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx index c452f67846a5..11eac6d304d0 100644 --- a/editor/src/components/canvas/controls/comment-popup.tsx +++ b/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), ), ] diff --git a/editor/src/core/model/scene-id-utils.ts b/editor/src/core/model/scene-id-utils.ts index 9797725b45b1..e9430e74be9c 100644 --- a/editor/src/core/model/scene-id-utils.ts +++ b/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 = '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), ) From 83f0bfbe50f46b0b3c58a096ab1ec4f0a5d4b44f Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 25 Jan 2024 11:27:24 +0100 Subject: [PATCH 2/3] `data-comment-id` --- editor/src/core/model/scene-id-utils.ts | 2 +- editor/src/core/third-party/utopia-api-components.ts | 6 +++++- editor/src/sample-projects/sample-project-utils.ts | 2 +- utopia-api/src/primitives/scene.tsx | 1 + 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/editor/src/core/model/scene-id-utils.ts b/editor/src/core/model/scene-id-utils.ts index e9430e74be9c..ce27e438a103 100644 --- a/editor/src/core/model/scene-id-utils.ts +++ b/editor/src/core/model/scene-id-utils.ts @@ -11,7 +11,7 @@ import * as PP from '../shared/property-path' import { assertNever } from '../shared/utils' import { isSceneAgainstImports, isRemixSceneAgainstImports } from './project-file-utils' -export const SceneCommentIdPropName = 'id' +export const SceneCommentIdPropName = 'data-comment-id' function getIdPropFromJSXElement(element: JSXElement): string | null { const maybeIdProp = getJSXAttribute(element.props, SceneCommentIdPropName) diff --git a/editor/src/core/third-party/utopia-api-components.ts b/editor/src/core/third-party/utopia-api-components.ts index a73a2f39fa72..403c47150912 100644 --- a/editor/src/core/third-party/utopia-api-components.ts +++ b/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), ], [], diff --git a/editor/src/sample-projects/sample-project-utils.ts b/editor/src/sample-projects/sample-project-utils.ts index 65fab6cbdd87..8071479cfa2a 100644 --- a/editor/src/sample-projects/sample-project-utils.ts +++ b/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 \n \n \n \n \n \n \n \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 \n \n \n \n \n \n \n \n)\n", parsed: { type: 'UNPARSED', }, diff --git a/utopia-api/src/primitives/scene.tsx b/utopia-api/src/primitives/scene.tsx index b0a9247a9fbe..a99a2b7ba960 100644 --- a/utopia-api/src/primitives/scene.tsx +++ b/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 } From 7ebe371b3241a3cb295dc4d1d53d79b422cbbee3 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Thu, 25 Jan 2024 11:49:25 +0100 Subject: [PATCH 3/3] use `commentId` --- editor/pnpm-lock.yaml | 2 +- editor/src/core/model/scene-id-utils.ts | 2 +- editor/src/core/third-party/utopia-api-components.ts | 2 +- editor/src/sample-projects/sample-project-utils.ts | 2 +- utopia-api/src/primitives/scene.tsx | 4 +++- 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml index 39d57312aff5..482826f78d83 100644 --- a/editor/pnpm-lock.yaml +++ b/editor/pnpm-lock.yaml @@ -7831,7 +7831,7 @@ packages: dev: true /component-indexof/0.0.3: - resolution: {integrity: sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=} + resolution: {integrity: sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==} dev: false /compressible/2.0.18: diff --git a/editor/src/core/model/scene-id-utils.ts b/editor/src/core/model/scene-id-utils.ts index ce27e438a103..07fea4778969 100644 --- a/editor/src/core/model/scene-id-utils.ts +++ b/editor/src/core/model/scene-id-utils.ts @@ -11,7 +11,7 @@ import * as PP from '../shared/property-path' import { assertNever } from '../shared/utils' import { isSceneAgainstImports, isRemixSceneAgainstImports } from './project-file-utils' -export const SceneCommentIdPropName = 'data-comment-id' +export const SceneCommentIdPropName = 'commentId' function getIdPropFromJSXElement(element: JSXElement): string | null { const maybeIdProp = getJSXAttribute(element.props, SceneCommentIdPropName) diff --git a/editor/src/core/third-party/utopia-api-components.ts b/editor/src/core/third-party/utopia-api-components.ts index 403c47150912..66849a877486 100644 --- a/editor/src/core/third-party/utopia-api-components.ts +++ b/editor/src/core/third-party/utopia-api-components.ts @@ -82,7 +82,7 @@ const BasicUtopiaSceneDescriptor = ( name, [ jsxAttributesEntry( - 'data-comment-id', + 'commentId', jsExpressionValue('scene', emptyComments), emptyComments, ), diff --git a/editor/src/sample-projects/sample-project-utils.ts b/editor/src/sample-projects/sample-project-utils.ts index 8071479cfa2a..a4e2ba2097b7 100644 --- a/editor/src/sample-projects/sample-project-utils.ts +++ b/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 \n \n \n \n \n \n \n \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 \n \n \n \n \n \n \n \n)\n", parsed: { type: 'UNPARSED', }, diff --git a/utopia-api/src/primitives/scene.tsx b/utopia-api/src/primitives/scene.tsx index a99a2b7ba960..2a7b9be3c32b 100644 --- a/utopia-api/src/primitives/scene.tsx +++ b/utopia-api/src/primitives/scene.tsx @@ -3,8 +3,8 @@ import { View } from './view' export interface SceneProps { id?: string + commentId?: string style?: React.CSSProperties - 'data-comment-id'?: string 'data-label'?: string 'data-uid'?: string } @@ -23,5 +23,7 @@ export const Scene = React.memo((props: React.PropsWithChildren) => ...props, style: style, } + delete adjustedProps['commentId'] + return {props.children} })