diff --git a/.gitignore b/.gitignore index 87096ce0..dc69e03b 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,6 @@ phoenix npm-debug.log* yarn-debug.log* yarn-error.log* + +# Working notes for in-progress docs overhaul (local scratchpad) +DOCS_NOTES.md diff --git a/api/01-getting-started.md b/api/01-getting-started.md index c3199fab..306cb805 100644 --- a/api/01-getting-started.md +++ b/api/01-getting-started.md @@ -11,33 +11,21 @@ The Phoenix Code API documentation is organized into sections for easy navigatio ### [Creating Themes](./creating-themes) This page provides guidelines on how to create custom Themes for **Phoenix Code**. ---- - ### [Creating Extensions](./creating-extensions) This page provides guidelines on how to write Extensions for **Phoenix Code**. ---- - ### [Use Node.js from extension](./creating-node-extensions) This page explains how to use Node.js inside **Phoenix Code** extensions. ---- - ### [Debugging Extensions](./debugging-extensions) This page provides a detailed guide on efficiently debugging your **Phoenix Code** extensions. ---- - ### [Publishing Themes & Extensions](./publishing-extensions) This page provides guidelines on how to publish Themes/Extensions to **Phoenix Code**. ---- - ### [Available Standard Libraries](./available-standard-libs) This page lists all the standard libraries that are available for use inside **Phoenix Code**. ---- - ## API Reference The API-Reference directory contains detailed reference documentation for each part of the Phoenix Code API. Each page here corresponds to different components, functions, or modules of the API, providing explanations, usage examples, and detailed parameter descriptions. diff --git a/api/08-How-To/Dialogs.md b/api/08-How-To/Dialogs.md index 556f74ee..ff31a975 100644 --- a/api/08-How-To/Dialogs.md +++ b/api/08-How-To/Dialogs.md @@ -8,8 +8,6 @@ This document outlines the basic features of working with Dialogs, including: * [How to create custom Dialog Box](#creating-custom-dialog-boxes) * [How to handle the button clicks](#handle-button-clicks) ---- - ## Adding a Dialog Box and Buttons To add a dialog box, follow these steps: diff --git a/api/08-How-To/Menus.md b/api/08-How-To/Menus.md index e9dcfa0c..4ba1a595 100644 --- a/api/08-How-To/Menus.md +++ b/api/08-How-To/Menus.md @@ -10,8 +10,6 @@ This document outlines the basic features of working with Menus, including: * [How to position a Menu item](#position-the-menu-item) * [How to add a keyboard shortcut to a Menu item](#attach-a-keyboard-shortcut-to-a-menu-item) ---- - ## Adding a Menu diff --git a/api/08-How-To/Panels.md b/api/08-How-To/Panels.md index 552a1cca..7901d706 100644 --- a/api/08-How-To/Panels.md +++ b/api/08-How-To/Panels.md @@ -22,8 +22,6 @@ This document outlines the basic features of working with Panels. * [How to manage Bottom Panel state](#managing-bottom-panel-state) * [Best Practices for Panels](#best-practices) ---- - ## Creating a Plugin Panel To create a plugin panel, follow these steps: diff --git a/api/08-How-To/StatusBar.md b/api/08-How-To/StatusBar.md index ca05eb0e..e5440c6a 100644 --- a/api/08-How-To/StatusBar.md +++ b/api/08-How-To/StatusBar.md @@ -6,8 +6,6 @@ This document outlines the basic features of working with Status Bar, including: * [How to add a button on Status Bar](#adding-a-button-on-status-bar) ---- - ## Adding a button on Status Bar 1. Import the `StatusBar` module. diff --git a/app-links.js b/app-links.js index e3cae9fd..e23cf1f5 100644 --- a/app-links.js +++ b/app-links.js @@ -106,7 +106,7 @@ export const appLinks = [ }, { from: '/app-links/editor-rulers', - to: '/docs/Features/editor-rulers', + to: '/docs/customizing-editor#editor-rulers', }, { from: '/app-links/find-in-files', @@ -150,7 +150,7 @@ export const appLinks = [ }, { from: '/app-links/resize-ruler', - to: '/docs/file-management', + to: '/docs/Pro Features/device-preview', }, { from: '/app-links//terminal', diff --git a/blog/2026-03-04-phoenix-code-vs-brackets/index.md b/blog/2026-03-04-phoenix-code-vs-brackets/index.md index 4f4c9b3f..1acacd90 100644 --- a/blog/2026-03-04-phoenix-code-vs-brackets/index.md +++ b/blog/2026-03-04-phoenix-code-vs-brackets/index.md @@ -139,6 +139,6 @@ If you've been waiting for the update Brackets deserved, this is it. - **[Open Phoenix Code in your browser](https://phcode.dev)** — no install, start immediately - [Download the desktop app](https://phcode.dev/download) -- [Live Preview documentation](/docs/Features/Live%20Preview/live-preview) +- [Live Preview documentation](/docs/Features/Live%20Preview/) - [Edit Mode (Pro)](/docs/Pro%20Features/live-preview-edit) - [Read more about the Brackets legacy](/blog/Blog-Legacy) diff --git a/docs/02-phoenix-pro-school.md b/docs/02-phoenix-pro-school.md index d7cf35a2..e2d5fe31 100644 --- a/docs/02-phoenix-pro-school.md +++ b/docs/02-phoenix-pro-school.md @@ -14,8 +14,6 @@ Schools can deploy Phoenix Pro in two ways: This page explains how schools and universities can obtain free Phoenix Pro access and deploy it across **any devices used within the institution**. ---- - ## Who Is Eligible? Phoenix Pro is free for: @@ -31,8 +29,6 @@ Volume licenses may be applied to: * Shared classroom devices * **Student/teacher-owned laptops/home computers** (per administrator distribution) ---- - # Option 1: Email-Based Student & Teacher Activation (Instant) Phoenix Pro is automatically activated for users who log in with: @@ -48,8 +44,6 @@ Phoenix Pro is automatically activated for users who log in with: 3. Phoenix Pro activates instantly 4. No approval or license key required ---- - ## Schools Without a `.edu` or `.ac.*` Domain Some schools, especially K-12 institutions, use custom domains. @@ -66,8 +60,6 @@ Email **[support@core.ai](mailto:support@core.ai)** with: Once your domain is approved, all users with that email domain automatically receive Phoenix Pro upon login. ---- - # Option 2: Educational Volume License (For Labs + Student/Teacher Devices) Educational Volume Licenses allow schools to activate Phoenix Pro on devices **without requiring login**. @@ -82,8 +74,6 @@ This is suitable for: **Free** for all educational usage. ---- - ## Requesting a Volume License Key Email **[support@core.ai](mailto:support@core.ai)** with: @@ -107,8 +97,6 @@ From there, you can obtain the license key. ![Alt text](images/edu/vol-license.png) ---- - ## How Volume License Keys Work * Each license key is **valid for 2 weeks** @@ -128,8 +116,6 @@ This model ensures: * The device now has Phoenix Pro permanently * School admin may rotate(reissue) keys as needed ---- - ## Activating Phoenix Pro Using a Volume License Key (Desktop App) On any device—lab or student-owned: @@ -142,8 +128,6 @@ On any device—lab or student-owned: ![Alt text](images/edu/activate-edu-license.png) ---- - # Limitations ### Students without school email and no school onboarding @@ -154,8 +138,6 @@ If a student does not have a school-provided email **and the school is not onboa Students cannot request volume licenses directly without school/teacher approval. ---- - # Summary of Support Email Subjects | Purpose | Subject Format | @@ -167,8 +149,6 @@ Students cannot request volume licenses directly without school/teacher approval Use correct subjects for faster handling. ---- - # FAQ ### **Can students use the volume license on their personal laptops?** @@ -191,8 +171,6 @@ Yes — as long as they use their school email. Yes. Students and teachers may use Phoenix Pro for any purpose. ---- - # Need Help? Support options: diff --git a/docs/03-customizing-editor.md b/docs/03-customizing-editor.md new file mode 100644 index 00000000..19f6f237 --- /dev/null +++ b/docs/03-customizing-editor.md @@ -0,0 +1,182 @@ +--- +title: Customizing the Editor +--- + +import React from 'react'; +import VideoPlayer from '@site/src/components/Video/player'; + +This section provides an overview of the editor appearance and display settings in **Phoenix Code**. + +## Themes + +Phoenix Code ships with two built-in themes: + +- **Phoenix Dark Neo**: default dark theme +- **Phoenix Light Neo**: default light theme + +You can install more themes, create your own, or remove themes you have installed, see [Extensions](./extensions). + +### Switching the Theme + +Open `View > Themes...` and pick a theme from the **Current Theme** dropdown. The change applies immediately. + +![Current Theme and Use Theme Scrollbars in the Themes Settings dialog](./images/editingText/themes-settings-theme.png "View > Themes...: pick a theme and toggle theme scrollbars") + +Click **Get More...** to browse community themes. See [Extensions](./extensions) for installation steps. + +### Use Theme Scrollbars + +The **Use Theme Scrollbars** checkbox controls scrollbar styling. + +- **On** (default): scrollbars use colors from the active theme. +- **Off**: scrollbars use your operating system's default style. + +## Font + +Phoenix Code uses **SourceCodePro** as the default editor font. Change the size and family from `View > Themes...`. + +![Font Size and Font Family in the Themes Settings dialog](./images/editingText/themes-settings-font.png "Font Size and Font Family fields in View > Themes...") + +### Font Size + +Type a value into the **Font Size** field. Accepted units: `px` (1 to 72) or `em` (0.1 to 7.2). Decimals work, e.g. `12.5px`. The default is `12px`. + +Keyboard shortcuts to resize the editor text: + +| Action | Windows / Linux | macOS | +| --- | --- | --- | +| Increase font size | `Ctrl + Shift + +` | `Cmd + Shift + +` | +| Decrease font size | `Ctrl + Shift + -` | `Cmd + Shift + -` | +| Restore default | `Ctrl + Shift + (` | `Cmd + Shift + (` | + +:::note +The shortcuts above change only the editor text size. To zoom the entire interface at once, use these: + +| Action | Windows / Linux | macOS | +| --- | --- | --- | +| Zoom in | `Ctrl + +` | `Cmd + +` | +| Zoom out | `Ctrl + -` | `Cmd + -` | + +The current zoom level is shown next to **Zoom In** under `View > Zoom UI and Fonts`. +::: + +### Font Family + +Type a CSS `font-family` string into the **Font Family** field. The first available font in the list is used: + +``` +'Fira Code', 'JetBrains Mono', monospace +``` + +Wrap names containing spaces in single quotes. +> The font must be installed on your system. Phoenix Code only bundles `SourceCodePro` (the default). + +## Line Height + +The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor. + +### Adjusting Line Height + +To adjust line height: +1. Click on `View` in the menu bar. +2. Navigate to the `Themes...` option. +3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5. + +![Line Height slider in Themes Settings](./images/editingText/themes-settings-line-height.png "Go to View > Themes... to adjust line height") + +Adjustments apply instantly, updating the editor dynamically. + +### Modifying Line Height via Preferences + +You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences. + +## Scroll Sensitivity + +**Scroll Sensitivity** sets a multiplier for mouse-wheel scroll speed in the editor. Increase it if scrolling feels too slow, decrease it if scrolling feels too fast. + +### Adjusting Scroll Sensitivity + +1. Click `View` in the menu bar. +2. Select `Themes...`. +3. Use the **Scroll Sensitivity** slider to set a value between `0.1` and `10`. The default is `1` (normal speed). + +![Scroll Sensitivity slider in Themes Settings](./images/editingText/themes-settings-scroll-sensitivity.png "Go to View > Themes... to adjust scroll sensitivity") + +The new value applies immediately. + +### Modifying Scroll Sensitivity via Preferences + +Set the `mouseWheelScrollSensitivity` property in the preferences file. Accepts any number from `0.1` to `10`. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences. + +## Indent Guide Lines + +![Indent Guide Lines Image](images/editingText/indent-display.png "The vertical lines are Indent Guide Lines") +**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability. + +### Enabling/Disabling Indent Guide Lines +![Indent Guide Lines Enable Image](images/editingText/indent-lines.png "Click on View menu and toggle Indent Guide Lines option") + +To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`. + +### Editor Preferences for Indent Guides +You can customize indent guide behavior in the editor preferences with the following options: + +[Click here](./editing-text#editing-preferences) to read on how to edit the preferences. + +**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them. +**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it. + +## Editor Rulers + +Add vertical column rulers to the editor to keep track of line lengths. By +default, a single ruler is set at the 120-character position. + +### Enabling and Disabling Rulers + +Toggle the visibility of rulers through the `View > Rulers` menu option. + +![Screenshot from 2024-04-27 12-42-50](https://github.com/phcode-dev/phoenix/assets/5336369/bb68fafa-395c-4da6-8aa2-a617918286ce) + +### Adding Multiple Rulers + +To add multiple rulers, edit the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences. + +Add the following entries to the JSON configuration: + +```js +{ + // existing json items + "editor.rulers": [40, 80], + "editor.rulerColors": ["green", "#f34d5a"], +} +``` + +These settings introduce two rulers at the 40th and 80th character positions, +colored green and red respectively. + +![image](https://github.com/phcode-dev/phoenix/assets/5336369/71b8b04c-d2ca-47b8-84bb-53cd0fb4593c) + +#### Configuration Options + +1. `editor.rulers` : Specifies an array of column numbers where vertical rulers + will appear. +1. `editor.rulerColors` : An optional array to set colors for each ruler, + corresponding to the positions listed in `editor.rulers`. + +#### Q: How do I add different rulers for each project? + +To set up different rulers for individual projects, create a `.phcode.json` file +in the root directory of each project. Include the same ruler configurations as +shown in the example above. + +## No-Distractions Mode +**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment. + +### Activating No-Distractions Mode +#### **Using Editor Interface** : +Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option. + +![No Distractions Mode Image](images/editingText/no-distractions.png "Click on View tab in menu bar and select No Distractions") + +#### **Using Keyboard** : +Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode. diff --git a/docs/03-editing-text.md b/docs/03-editing-text.md index 6f72ac52..491df949 100644 --- a/docs/03-editing-text.md +++ b/docs/03-editing-text.md @@ -7,8 +7,6 @@ import VideoPlayer from '@site/src/components/Video/player'; This section provides an overview of the core text and code editing features in **Phoenix Code**. ---- - ## Multi Cursor Using **Multi-Cursor**, you can place multiple cursors in different locations, allowing you to edit text simultaneously. This feature is especially useful for making quick, consistent changes across multiple lines or sections of a file. @@ -28,22 +26,6 @@ If you want the cursor to be placed in the line below, use `Alt + Shift + Down A ### Switching back to single cursor To revert back to a single cursor, just press the `Esc` key. ---- - -## Custom Snippets -With **Custom Snippets**, you can define your own custom code hints. You can write short abbreviations that, when typed in the editor, expand into complete code blocks upon selection. - -[Read More](./Features/custom-snippets) - ---- - -## Quick Edit -With **Quick Edit**, you can edit your CSS file directly within HTML files. - -[Read More](./Features/quick-edit) - ---- - ## Quick Docs **Quick Docs** provides immediate access to documentation for code elements directly within the editor. @@ -53,15 +35,6 @@ With **Quick Edit**, you can edit your CSS file directly within HTML files. ![Quick Docs Image](images/editingText/quick-docs.png "Right click on the element and select Quick Docs option") ---- - -## Find in Files -With **Find in Files**, you can search for specific text across multiple files within a project. - -[Read More](./Features/find-in-files) - ---- - ## Auto Rename Tag The **Auto Rename Tag** feature updates matching tags automatically when you rename one. It works with HTML, XHTML, HTM, XML, SVG, PHP, and JSP files. @@ -91,133 +64,6 @@ Move your cursor out of the tag and then back into the tag. src="https://docs-images.phcode.dev/videos/editing-text/auto-rename-temp-disable.mp4" /> ---- - -## Emmet -With **Emmet**, you can write HTML and CSS faster using shorthand abbreviations. If an abbreviation is Emmet-compatible, Phoenix Code Editor shows code hints and expands it into complete code structures when selected. - -[Read More](./Features/emmet) - ---- - -## Zoom and Font Size Adjustments -The **Zoom UI and Fonts** options allow you to adjust the overall interface scale and font size. - -### Zoom UI -**Zoom In** :- Enlarges the overall UI, making all elements larger. - -**Zoom Out** :- Reduces the overall UI, making all elements smaller. - -### Font Size Adjustment -**Increase Font Size** :- Enlarges the text in the editor without affecting other UI elements. - -**Decrease Font Size** :- Reduces the text size in the editor without affecting other UI elements. - -**Restore Font Size** :- Resets the editor text to its default size. - - -### Using Zoom UI and Fonts Options -#### Using Menu -![Zoom Image](images/editingText/zoom.png "Click on View & hover over Zoom UI and Fonts") - -1. Click on "View" in the menu bar. -2. Hover over "Zoom UI and Fonts". -3. Select the desired option from the submenu. - -#### Using Keyboard Shortcuts -* **Zoom In**: `Ctrl + +` (`Cmd + +` on MacOs) -* **Zoom Out**: `Ctrl + -` (`Cmd + -` on MacOs) -* **Increase Font Size**: `Ctrl + Shift + +` (`Cmd + Shift + +` on MacOs) -* **Decrease Font Size**: `Ctrl + Shift + -` (`Cmd + Shift + -` on MacOs) -* **Restore Font Size**: `Ctrl + Shift + (` (`Cmd + Shift + (` on MacOs) - -*Note :- The current zoom level is displayed next to the **Zoom In** option.* - ---- - -## Line Height - -The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor. - -### Adjusting Line Height - -To adjust line height: -1. Click on `View` in the menu bar. -2. Navigate to the `Themes...` option. -3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5. -![Line Height](./images/editingText/line-height.png "Go to View > Themes... to adjust line height") - -Adjustments apply instantly, updating the editor dynamically. - -### Modifying Line Height via Preferences - -You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences. - ---- - -## Indent Guide Lines - -![Indent Guide Lines Image](images/editingText/indent-display.png "The vertical lines are Indent Guide Lines") -**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability. - -### Enabling/Disabling Indent Guide Lines -![Indent Guide Lines Enable Image](images/editingText/indent-lines.png "Click on View menu and toggle Indent Guide Lines option") - -To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`. - -### Editor Preferences for Indent Guides -You can customize indent guide behavior in the editor preferences with the following options: - -[Click here](#editing-preferences) to read on how to edit the preferences. - -**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them. -**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it. - ---- - -## File Encoding -**File encoding** is the method used to represent text in a file by converting characters into bytes. We need it to ensure that text is displayed correctly across different platforms and to handle special characters or symbols. Phoenix Code Editor supports multiple file encoding formats. - -*`UTF-8`* is the default encoding format in Phoenix. - -### Set Encoding of a file -1. Click on the `utf8` button on the status bar. (UTF-8 represents the default encoding format). -2. A list of available encoding formats will appear. Select your desired format, or start typing to filter and find matching options in the drop-down menu. - -![File Encoding Image](images/editingText/file-encoding.png "Click on utf8 button on status bar and select the encoding format") - ---- - -## File Type Associations -**File Type Associations** *(Associating a file type with a language)* allows Phoenix Code Editor to provide language-specific features, such as syntax highlighting, code completion, and error checking, based on the file extension. This ensures that your files are treated according to their intended programming or markup language. - -*When you create a new file, if the file extension is recognized, it is associated with the default language. If the extension is unknown, a generic text file is opened.* - -### Associate a new file type with a language -To associate a new file type with a specific language in Phoenix Code Editor, use the Language dropdown button in the status bar. For example, if you want files with `.myjs` extension to be treated as JavaScript files, follow these steps: -1. Create a new file with the desired extension. For our example, we create (newfile.myjs). By default, it will be associated with a Text file. -2. Click on `Text` button on the status bar. -3. A list of all the supported languages will appear. Select the language you want to associate with the file type. For our example, we select `JavaScript`. - -![File Association Image](images/editingText/file-association.png "Click on Text button on status bar and select the language") - -4. At the top of the popup box, you’ll find an option labeled `Set as default for .myjs files`. Click on it. - -Now, files with `.myjs` extension will be treated as JavaScript files. - - - ---- - -## Beautify Code -With **Beautify Code**, you can format your code to follow consistent styling rules, improving readability and making it easier to maintain. - -[Read More](./Features/beautify-code) - ---- - ## Insert and Overwrite Mode Users can toggle between **Insert Mode** and **Overwrite Mode** for different text input behaviors. @@ -248,8 +94,6 @@ Click on the `INS(OVR)` button on the status bar to toggle between Insert Mode a #### **Using Keyboard** Press the `Ins` or the Insert key to toggle between Insert Mode and Overwrite Mode. ---- - ## Auto Space Detection The **Auto Space Detection** feature in Phoenix Code Editor is designed to automatically detect and adapt to the indentation style used in your files, whether it’s tabs or spaces. @@ -280,22 +124,6 @@ You can adjust the tab size width or number of spaces by clicking the value in t macTitle="Beautify Code: Cmd + B" /> ---- - -## No-Distractions Mode -**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment. - -### Activating No-Distractions Mode -#### **Using Editor Interface** : -Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option. - -![No Distractions Mode Image](images/editingText/no-distractions.png "Click on View tab in menu bar and select No Distractions") - -#### **Using Keyboard** : -Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode. - ---- - ## Editing Preferences You can personalize Phoenix to suit your workflow by adjusting the preferences. @@ -312,4 +140,3 @@ Once selected, two files will appear side by side: ![Modify Preferences Image](images/editingText/modify-preferences.png "Modify phcode.json file to update the preferences settings") To change a preference, simply write the desired configuration and values in the **phcode.json** and save the file. These custom settings will automatically override the corresponding values in the default preferences. ---- diff --git a/docs/04-editing-colors.md b/docs/04-editing-colors.md index 99effed0..475d1de8 100644 --- a/docs/04-editing-colors.md +++ b/docs/04-editing-colors.md @@ -7,8 +7,6 @@ import VideoPlayer from '@site/src/components/Video/player'; This section provides an overview of the core color editing features in **Phoenix Code**. ---- - ## Inline Color Editor **Inline Color Editor** lets you edit colors directly inside **Phoenix Code** using a color picker. @@ -70,8 +68,6 @@ Clicking a color in the gutter moves the cursor to its position in the editor an You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./03-editing-text.md#editing-preferences) to read on how to edit the preferences. ---- - ## Color Hints After typing a color related property, **Phoenix Code** displays a list of color suggestions. ![Color Hints](./images/editingColors/colorHints.png "Color Hints") diff --git a/docs/05-file-management.md b/docs/05-file-management.md index 088876b8..b9dfa932 100644 --- a/docs/05-file-management.md +++ b/docs/05-file-management.md @@ -7,8 +7,6 @@ import VideoPlayer from '@site/src/components/Video/player'; This section covers how **Phoenix Code** lets you manage, organize, and navigate files and folders within your projects. ---- - ## File Tree The **File Tree** appears in the sidebar and shows the complete folder structure of the open project. @@ -63,8 +61,6 @@ To collapse all folders: src="https://docs-images.phcode.dev/videos/file-management/collapse-folders.mp4" /> ---- - ## Tab Bar The **Tab Bar** appears at the top of the editor and displays all open files. @@ -205,8 +201,6 @@ You can also toggle the Tab Bar by updating the `showTabBar` option in the prefe Set the value to `true` to enable it. See [Editing Preferences](./editing-text#editing-preferences) if you need help in editing the preferences. ---- - ## Working Files **Working Files** (also called **Working Tree**) provides another way to view and manage open files. It appears in the sidebar, above the **File Tree**. @@ -263,8 +257,6 @@ You can also toggle Working Files by updating the `showWorkingSet` property in t Set the value to `false` to hide Working Files. See [Editing Preferences](./editing-text#editing-preferences) if you need help editing the preferences. ---- - ## Recent Files The **Recent Files** dialog provides quick access to files you've recently worked on. @@ -283,8 +275,6 @@ The dialog shows your recently opened files. Closed files appear in gray. Hover To view a file's full path, hover over it or check the bottom-left corner of the dialog when a file is selected. ---- - ## File Recovery **Phoenix Code** has a built-in **File Recovery** feature to help you retrieve unsaved changes after unexpected events like crashes or accidental closures. @@ -298,3 +288,38 @@ When you reopen the editor, if there are any unsaved changes from the previous s * **Discard**: Removes the unsaved changes. *This will permanently delete the data.* +## Language and Encoding + +Each file has two settings that control how **Phoenix Code** interprets its contents: the **language** it should be treated as, and the **character encoding** used to read and write it. Both are controlled from buttons in the editor's status bar. + +### File Encoding +**File encoding** is the method used to represent text in a file by converting characters into bytes. We need it to ensure that text is displayed correctly across different platforms and to handle special characters or symbols. Phoenix Code Editor supports multiple file encoding formats. + +*`UTF-8`* is the default encoding format in Phoenix. + +#### Set Encoding of a file +1. Click on the `utf8` button on the status bar. (UTF-8 represents the default encoding format). +2. A list of available encoding formats will appear. Select your desired format, or start typing to filter and find matching options in the drop-down menu. + +![File Encoding Image](./images/editingText/file-encoding.png "Click on utf8 button on status bar and select the encoding format") + +### File Type Associations +**File Type Associations** *(Associating a file type with a language)* allows Phoenix Code Editor to provide language-specific features, such as syntax highlighting, code completion, and error checking, based on the file extension. This ensures that your files are treated according to their intended programming or markup language. + +*When you create a new file, if the file extension is recognized, it is associated with the default language. If the extension is unknown, a generic text file is opened.* + +#### Associate a new file type with a language +To associate a new file type with a specific language in Phoenix Code Editor, use the Language dropdown button in the status bar. For example, if you want files with `.myjs` extension to be treated as JavaScript files, follow these steps: +1. Create a new file with the desired extension. For our example, we create (newfile.myjs). By default, it will be associated with a Text file. +2. Click on `Text` button on the status bar. +3. A list of all the supported languages will appear. Select the language you want to associate with the file type. For our example, we select `JavaScript`. + +![File Association Image](./images/editingText/file-association.png "Click on Text button on status bar and select the language") + +4. At the top of the popup box, you'll find an option labeled `Set as default for .myjs files`. Click on it. + +Now, files with `.myjs` extension will be treated as JavaScript files. + + diff --git a/docs/06-popular-extensions.md b/docs/06-extensions.md similarity index 52% rename from docs/06-popular-extensions.md rename to docs/06-extensions.md index 1aa7b8b5..0f049ea6 100644 --- a/docs/06-popular-extensions.md +++ b/docs/06-extensions.md @@ -1,14 +1,56 @@ --- -title: Popular Extensions +title: Extensions --- import React from 'react'; import VideoPlayer from '@site/src/components/Video/player'; -This document provides an overview of the most popular extensions available for Phoenix Code. +Phoenix Code supports extensions for adding features, themes, and language support. Everything is managed through the built-in **Extension Manager**. +To open the Extension Manager, click the extension icon on the right-hand toolbar, as shown below. -## Minimap +![Extension Manager icon location on the right toolbar](./images/extensions/extension-manager-button.png "Click the Extension Manager icon on the right toolbar") + +The dialog has four tabs: + +| Tab | Contents | +| --- | --- | +| **Available** | Marketplace extensions. A search box at the top filters the list. | +| **Themes** | Marketplace themes. | +| **Installed** | Everything you've installed. Apply, update, or remove from here. | +| **Default** | Built-in extensions that ship with Phoenix Code. | + +A **Sort** dropdown at the top of the dialog orders the list by **Last Updated** (most recently published first), **Downloads** (most-installed first), **Star Rating** (highest GitHub stars), or **Verified** (Phoenix-verified extensions first). + + + +- **Install**: pick an item from **Available** or **Themes** and click **Install**. +- **Update**: when a newer version is available, an **Update** button appears on the extension's card in **Installed**. +- **Remove**: click **Remove** on the card in **Installed**, then confirm with **Remove Extensions and Reload**. + +## Themes + +Themes use the same flow under the **Themes** tab. + +![Themes tab in the Extension Manager](./images/extensions/themes-tab.png "Themes tab in the Extension Manager") + +To switch to an installed theme, either pick it from `View > Themes...` (see [Customizing the Editor → Themes](./customizing-editor#themes)) or click **Apply** next to the theme in **Installed**. + +## Create your own + +For authoring extensions and themes, see the API section: + +- [Creating Themes](/api/creating-themes) +- [Creating Extensions](/api/creating-extensions) +- [Creating Node Extensions](/api/creating-node-extensions) +- [Debugging Extensions](/api/debugging-extensions) +- [Publishing Extensions](/api/publishing-extensions) + +## Popular extensions + +A curated list of community extensions worth checking out. + +### Minimap Created by: [Zorgzerg](https://github.com/zorgzerg) This extension adds a minimap preview of your code on the side of your editor, making it easier to navigate and get an overview of your code structure. @@ -16,11 +58,10 @@ This extension adds a minimap preview of your code on the side of your editor, m For more details, visit the [GitHub repository](https://github.com/zorgzerg/brackets-minimap) of the extension. `Minimap` in action :- -![Minimap](./images/popular-extensions/minimap.png) ---- +![Minimap](./images/popular-extensions/minimap.png) -## Show Whitespace +### Show Whitespace Created by: [Dennis Kehrig](https://github.com/DennisKehrig) This extension allows users to visualize spaces and tabs, making code more readable and helping maintain formatting consistency. @@ -28,11 +69,10 @@ This extension allows users to visualize spaces and tabs, making code more reada For more details, visit the [GitHub repository](https://github.com/DennisKehrig/brackets-show-whitespace) of the extension. `Show Whitespace` in action :- -![Show Whitespace](./images/popular-extensions/Show-Whitespace.png) ---- +![Show Whitespace](./images/popular-extensions/Show-Whitespace.png) -## 1-2-3 +### 1-2-3 Created by: [Michal Jeřábek](https://github.com/michaljerabek) This extension generates number sequences directly in your editor, making it easy to create ordered lists or numbered markers with minimal effort. @@ -40,11 +80,10 @@ This extension generates number sequences directly in your editor, making it eas For more details, visit the [GitHub repository](https://github.com/michaljerabek/1-2-3) of the extension. `1-2-3` in action :- -![1-2-3](./images/popular-extensions/1-2-3.gif) ---- +![1-2-3](./images/popular-extensions/1-2-3.gif) -## FuncDocr +### FuncDocr Created by: [Ole Kröger](https://github.com/Wikunia) This extension generates JS/PHPDocs for your functions, keeping your code documented and organized. @@ -52,11 +91,10 @@ This extension generates JS/PHPDocs for your functions, keeping your code docume For more details, visit the [GitHub repository](https://github.com/wikunia/brackets-funcdocr) of the extension. `FuncDocr` in action :- -![FuncDocr](./images/popular-extensions/Func-Docr.gif) ---- +![FuncDocr](./images/popular-extensions/Func-Docr.gif) -## Remove Comments +### Remove Comments Created by: [Pluto](https://github.com/devvaannsh) This extension allows you to remove unwanted comments from your code. You can delete all comments at once or only those within a selected section. @@ -64,11 +102,10 @@ This extension allows you to remove unwanted comments from your code. You can de For more details, visit the [GitHub repository](https://github.com/devvaannsh/Remove-Comments) of the extension. `Remove Comments` in action :- - ---- + -## Autosave Files on Window Blur +### Autosave Files on Window Blur Created by: [Marty Penner](https://github.com/martypenner) This extension automatically saves all unsaved files whenever Phoenix Code loses focus (for example, when you switch to another application). @@ -76,4 +113,5 @@ This extension automatically saves all unsaved files whenever Phoenix Code loses For more details, visit the [GitHub repository](https://github.com/martypenner/brackets-autosave-files-on-window-blur) of the extension. `Autosave Files on Window Blur` in action :- + diff --git a/docs/07-Pro Features/02-edit-mode-live-preview.md b/docs/07-Pro Features/02-edit-mode-live-preview.md index f9e8b549..919a42b3 100644 --- a/docs/07-Pro Features/02-edit-mode-live-preview.md +++ b/docs/07-Pro Features/02-edit-mode-live-preview.md @@ -1,5 +1,5 @@ --- -title: Edit Mode - Live Preview +title: Live Preview Edit --- import React from 'react'; @@ -9,30 +9,27 @@ import VideoPlayer from '@site/src/components/Video/player'; [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. ::: -**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, change element tags, update classes and IDs, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more. +**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more. **Phoenix Code** updates your source code automatically as you make changes. ---- - ## Enabling Edit Mode -To switch to Edit Mode, click the **chevron icon** next to the **Preview Mode** button *(pen icon)* in the Live Preview toolbar, then select **Edit Mode**. +To switch to Edit Mode, click the **pen icon** in the Live Preview toolbar. This enables full interactivity in the Live Preview. +> When enabled, the **pen icon** is highlighted in orange color. ![Live Preview Edit mode](./images/lp-mode.png "Live Preview edit mode") Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` setting in the preferences file. See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file. ---- - ## Control Box When you click an element in the Live Preview, a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it. - +![Control Box](./images/control-box.png "Control Box") > The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript. @@ -44,7 +41,7 @@ The left side of the Control Box displays information about the selected element - **Dimensions**: The element’s size in pixels (width × height) - **CSS classes**: The element’s classes, shown with a `.` prefix. If the element has more than three classes, only the first three are shown, followed by a “+N more” indicator - +![Element Properties panel](./images/element-properties.png "Element Properties panel") Clicking on the info section opens the [Element Properties](#edit-element-properties) editor, where you can edit the element’s tag name, classes, and ID. @@ -52,13 +49,15 @@ Clicking on the info section opens the [Element Properties](#edit-element-proper The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element. +![Select Parent button](./images/select-parent.png "Select Parent button") + > This button appears only when a valid parent exists. It is not shown when the parent is `body`, `html`, or a JavaScript-rendered element. ### Tools The right side of the Control Box displays a set of tools you can use to modify the selected element. The available tools depend on the element type. Some buttons are shown for all elements, while others appear only for specific element types. - +![Tools section](./images/tools.png "Tools section") - **Insert Element** *(plus icon)*: Opens a panel where you can insert a new HTML element before, after, or inside the selected element. *This option is available for all elements.* @@ -86,48 +85,34 @@ The right side of the Control Box displays a set of tools you can use to modify *This option is available for all elements.* See [Cut, Copy, and Paste](#cut-copy-and-paste) for more details. ---- - ## Hover Box The **Hover Box** is a small tooltip that appears when you hover over an element in Edit Mode. It shows an icon and a label that describe the element type (for example, “Image”, “Button”, “Container”, “Paragraph”). - +![Hover Box](./images/hover-box.png "Hover Box") The Hover Box helps you quickly identify elements as you move your cursor over the page, without needing to click on them. > The Hover Box uses a different color for editable and non-editable elements. Standard HTML elements appear in blue, while dynamically created (JavaScript-rendered) elements appear in gray. ---- - ## Inspect Element on Hover By default, in Edit Mode, hovering over elements in the Live Preview highlights them and displays the [Hover Box](#hover-box). You can change this behavior to show highlights only when you click elements instead. -To toggle this setting, click the **chevron icon** next to the **Preview Mode** button *(pen icon)* in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked. - - +To toggle this setting, click the **chevron icon** next to the **pen icon** in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked. -When **Inspect Element on Hover** is checked (default): -- Hovering over elements shows highlights and the Hover Box -- Clicking an element selects it and displays the Control Box +![Inspect Element on Hover](./images/inspect-element-hover.png "Inspect Element on Hover option") -When **Inspect Element on Hover** is unchecked: -- Hovering over elements has no effect -- Clicking an element shows highlights and the Control Box - -Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `”hover”` (default) or `”click”`. +Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `"hover"` (default) or `"click"`. See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file. ---- - ## Edit Element Properties The **Element Properties** panel lets you edit an element's tag name, ID, classes, and other HTML attributes directly from the Live Preview. All changes are synced to your source code in real-time, and code hints appear as you type to help you pick the right values. To open the panel, click on the **info section** (the left side showing the tag name, ID, and dimensions) of the [Control Box](#control-box). - +![Element Properties panel](./images/element-properties.png "Element Properties panel") The panel has four sections: @@ -136,19 +121,15 @@ The panel has four sections: - **Classes**: Existing classes are shown as chips with a **×** button to remove them. Click **+** to add new classes. You can type multiple class names separated by spaces. - **Attributes**: All other HTML attributes are shown as editable name-value pairs. Click **+** to add a new attribute, or **×** to remove one. - - To undo all changes made in the panel, click the **Reset** button in the panel header. This reverts the element to the state it was in when you first opened the panel. ---- - ## Insert Element The **Insert Element** panel lets you add new HTML elements to your page directly from the Live Preview. To open the panel, click the **Insert Element** button *(plus icon)* in the [Control Box](#control-box). - +![Insert Element panel](./images/insert-element.png "Insert Element panel") ### Choosing a Position @@ -167,12 +148,10 @@ The panel shows a grid of commonly used HTML elements like Paragraph, Heading, L Use the **search bar** at the top to filter elements by name or tag. If no matching element exists, you can type any valid HTML tag name and click **Create <tag>** to insert a custom element. - +![Create custom element](./images/insert-element-custom.png "Create custom element") After inserting an element, Phoenix Code automatically selects it in the Live Preview so you can continue editing it. ---- - ## Inline Text Editing The **Inline Text Editing** feature lets you modify text content directly in the Live Preview, with all changes automatically synced to the source code. @@ -181,13 +160,17 @@ To start editing, **double-click** an element in the Live Preview or click the * Edit the text as needed, then press `Enter` to save or `Esc` to cancel. To insert a line break, press `Shift + Enter`. + + > Text editing is available only for elements that can contain text. It is not supported for elements such as ``, `