Edit with GitHub dev (github#28597)

* update edit-file-edit-button and add dropdown

Updated images for repository/edit-file

* Update repo-edit with dropdown

* update dev with dropdown

* Optimize images

* add line break

* Restoring the beta message

* Docs team edits

* Optimize images

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Lucas Costi <[email protected]>
Co-authored-by: hubwriter <[email protected]>

Author: 4 people

Diff for: assets/images/help/repository/edit-file-edit-button.png

@@ -2,8 +2,7 @@
 title: The github.dev web-based editor
 intro: 'Use the github.dev {% data variables.product.prodname_serverless %} from your repository or pull request to create and commit changes.'
 versions:
-  fpt: '*'
-  ghec: '*'
+  feature: 'githubdev-editor'
 type: how_to
 miniTocMaxHeadingLevel: 3
 topics:
@@ -37,7 +36,10 @@ You can open any {% data variables.product.prodname_dotcom %} repository in the
 
 - Press `.` while browsing any repository or pull request on {% data variables.product.prodname_dotcom %}.
 - Change the URL from "github.com" to "github.dev".
-  
+- When viewing a file, use the dropdown menu next to {% octicon "pencil" aria-label="The edit icon" %} and select **Open in github.dev**.
+
+  ![Edit file button dropdown menu](/assets/images/help/repository/edit-file-edit-dropdown.png)
+
 ## {% data variables.product.prodname_codespaces %} and the {% data variables.product.prodname_serverless %}
 
 Both the {% data variables.product.prodname_serverless %} and {% data variables.product.prodname_codespaces %} allow you to edit your code straight from your repository. However, both have slightly different benefits, depending on your use case.

Diff for: assets/images/help/repository/edit-file-edit-dropdown.png

@@ -0,0 +1,5 @@
+# Reference: #4918, #7438.
+# Documentation for the github.dev web-based editor
+versions:
+  fpt: '*'
+  ghec: '*'

Diff for: content/codespaces/the-githubdev-web-based-editor.md

@@ -1,2 +1,13 @@
 1. In the upper right corner of the file view, click {% octicon "pencil" aria-label="The edit icon" %} to open the file editor.
-![Edit file button](/assets/images/help/repository/edit-file-edit-button.png)
+
+   ![Edit file button](/assets/images/help/repository/edit-file-edit-button.png)
+
+   {% ifversion githubdev-editor -%}
+   {% note %}
+
+   **Note:** Instead of editing and committing the file using the default file editor, you can optionally choose to use the [github.dev code editor](/codespaces/the-githubdev-web-based-editor) by clicking the dropdown menu next to {% octicon "pencil" aria-label="The edit icon" %} and selecting **Open in github.dev**.
+
+   ![Edit file button dropdown](/assets/images/help/repository/edit-file-edit-dropdown.png)
+
+   {% endnote %}
+   {%- endif %}