Add project description to settings editor and share dialog

localtypings/pxtarget.d.ts

@@ -540,6 +540,7 @@ declare namespace pxt {
         enabledFeatures?: pxt.Map<FeatureFlag>;
         forceEnableAiErrorHelp?: boolean; // Enables the AI Error Help feature, regardless of geo setting.
         shareHomepageContent?: boolean; // Show buttons to share links to homepage content more easily
+        showProjectDescription?: boolean; // Show project description in pxtjson editor and share dialog
     }
 
     interface DownloadDialogTheme {

localtypings/pxteditor.d.ts

@@ -989,7 +989,7 @@ declare namespace pxt.editor {
 
         anonymousPublishHeaderByIdAsync(headerId: string, projectName?: string): Promise<ShareData>;
         publishCurrentHeaderAsync(persistent: boolean, screenshotUri?: string): Promise<string>;
-        publishAsync (name: string, screenshotUri?: string, forceAnonymous?: boolean): Promise<ShareData>;
+        publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean): Promise<ShareData>;
 
         startStopSimulator(opts?: SimulatorStartOptions): void;
         stopSimulator(unload?: boolean, opts?: SimulatorStartOptions): void;

react-common/components/share/Share.tsx

@@ -18,6 +18,7 @@ export interface ShareData {
 
 export interface ShareProps {
     projectName: string;
+    projectDescription?: string;
     screenshotUri?: string;
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
@@ -26,13 +27,14 @@ export interface ShareProps {
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
     onClose: () => void;
 }
 
 export const Share = (props: ShareProps) => {
     const {
         projectName,
+        projectDescription,
         screenshotUri,
         isLoggedIn,
         simRecorder,
@@ -47,6 +49,7 @@ export const Share = (props: ShareProps) => {
 
     return <div className="project-share">
         <ShareInfo projectName={projectName}
+            projectDescription={projectDescription}
             isLoggedIn={isLoggedIn}
             screenshotUri={screenshotUri}
             simRecorder={simRecorder}

react-common/components/share/ShareInfo.tsx

@@ -20,12 +20,12 @@ const vscodeDevUrl = "https://vscode.dev/edu/makecode/"
 
 export interface ShareInfoProps {
     projectName: string;
-    description?: string;
+    projectDescription?: string;
     screenshotUri?: string;
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
     isMultiplayerGame?: boolean; // Arcade: Does the game being shared have multiplayer enabled?
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     anonymousShareByDefault?: boolean;
@@ -37,7 +37,7 @@ export interface ShareInfoProps {
 export const ShareInfo = (props: ShareInfoProps) => {
     const {
         projectName,
-        description,
+        projectDescription,
         screenshotUri,
         isLoggedIn,
         simRecorder,
@@ -50,6 +50,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
         onClose,
     } = props;
     const [ name, setName ] = React.useState(projectName);
+    const [ description, setDescription ] = React.useState(projectDescription);
     const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
     const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish" | "publish-vscode" | "publishing">("share");
     const [ shareData, setShareData ] = React.useState<ShareData>();
@@ -95,7 +96,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) setShareState("publish");
         else setShareState("share")
@@ -104,7 +105,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishInVscodeClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) {
             setShareState("publish-vscode");
@@ -238,9 +239,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handleMultiplayerShareConfirmClick = async () => {
         setShareState("publishing");
         setIsShowingMultiConfirmation(false);
-    setLastShareWasAnonymous(isAnonymous);
+        setLastShareWasAnonymous(isAnonymous);
 
-        const publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        const publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
 
         // TODO multiplayer: This won't work on staging (parseScriptId domains check doesn't include staging urls)
         // but those wouldn't load anyways (as staging multiplayer is currently fetching games from prod links)
@@ -322,7 +323,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
         if (setAnonymousSharePreference) setAnonymousSharePreference(!newValue);
     }
 
-    const inputTitle = prePublish ? lf("Project Title") :
+    const inputTitle = prePublish ? lf("Project Name") :
         (shareState === "publish-vscode" ? lf("Share Successful") : lf("Project Link"));
 
     const shareAttemptWasAnonymous = lastShareWasAnonymous === undefined ? isAnonymous : lastShareWasAnonymous;
@@ -378,6 +379,19 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             onBlur={setName}
                             onEnterKey={setName}
                             preserveValueOnBlur={true} />
+                        {pxt.appTarget.appTheme.showProjectDescription && <>
+                            <div className="project-share-title project-share-label" id="share-description-title">
+                                {lf("Project Description")}
+                            </div>
+                            <Textarea
+                                ariaDescribedBy="share-description-title"
+                                ariaLabel={lf("Type a description for your project")}
+                                initialValue={projectDescription || ''}
+                                onChange={setDescription}
+                                id="projectDescriptionTextareaShare"
+                                resize="vertical"
+                            />
+                        </>}
                         {isLoggedIn && hasProjectBeenPersistentShared && <Checkbox
                             id="persistent-share-checkbox"
                             label={lf("Update existing share link for this project")}

react-common/styles/controls/Textarea.less

@@ -21,6 +21,12 @@
     pointer-events: none;
 }
 
+.common-textarea-wrapper {
+    &.resize-both .common-textarea { resize: both; }
+    &.resize-horizontal .common-textarea { resize: horizontal; }
+    &.resize-vertical .common-textarea { resize: vertical; }
+}
+
 .common-textarea {
     width: 100%;
     min-width: 0;
@@ -32,10 +38,7 @@
     background: none transparent;
     text-overflow: ellipsis;
     resize: none;
-
-    &.resize-both { resize: both; }
-    &.resize-horizontal { resize: horizontal; }
-    &.resize-vertical { resize: vertical; }
+    min-height: 5rem;
 }
 
 

react-common/styles/share/share.less

@@ -55,6 +55,14 @@
         .common-editor-toggle-outer {
             z-index: 1;
         }
+
+        .common-textarea {
+            max-height: 12rem;
+        }
+
+        .common-textarea-wrapper {
+            margin-bottom: 1rem;
+        }
     }
 }
 

theme/pxt.less

@@ -29,6 +29,7 @@
 @import 'asset-editor';
 @import 'semantic-ui-overrides';
 @import 'ai-error-explanation-text';
+@import 'pxtjson';
 
 @import 'light';
 @import 'accessibility';

theme/pxtjson.less

@@ -0,0 +1,5 @@
+.pxt-json-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}

webapp/src/app.tsx

@@ -4445,10 +4445,10 @@ export class ProjectView
         return this.getShareUrl(script.shortid || script.id, false);
     }
 
-    async publishAsync (name: string, screenshotUri?: string, forceAnonymous?: boolean): Promise<pxt.editor.ShareData> {
+    async publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean): Promise<pxt.editor.ShareData> {
         pxt.tickEvent("menu.embed.publish", undefined, { interactiveConsent: true });
-        if (name && this.state.projectName != name) {
-            await this.updateHeaderNameAsync(name);
+        if ((name && this.state.projectName != name) || description) {
+            await this.updateHeaderNameAsync(name, description);
         }
 
         const hasIdentity = auth.hasIdentity() && this.isLoggedIn();
@@ -4595,13 +4595,14 @@ export class ProjectView
         }
     }
 
-    updateHeaderNameAsync(name: string): Promise<void> {
+    updateHeaderNameAsync(name: string, description?: string): Promise<void> {
         // nothing to do?
-        if (pkg.mainPkg.config.name == name)
+        if (pkg.mainPkg.config.name == name && (!description || pkg.mainPkg.config.description == description))
             return Promise.resolve();
 
         //Save the name in the target MainPackage as well
         pkg.mainPkg.config.name = name;
+        pkg.mainPkg.config.description = description || pkg.mainPkg.config.description;
 
         pxt.debug('saving project name to ' + name);
         let f = pkg.mainEditorPkg().lookupFile("this/" + pxt.CONFIG_NAME);