Merge branch 'main' into add-new-files-in-paths

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx

@@ -192,6 +192,39 @@ const removed = 'This line was removed';
 const highlighted = 'This line is highlighted';
 ```
 
+#### Useful Expressive Code Attributes
+
+- **`title`** - Sets the title of the code block.
+- **`frame`** - Defines the frame of the code block. Options: `"code"`, `"terminal"`, `"none"`, `"auto"`.
+- **`showLineNumbers`** - Displays line numbers. You can combine this with `startLineNumber=#` to begin numbering from a specific line.
+- **`wrap`** - Controls word wrapping. Use `preserveIndent` and `preserveIndent=false` to adjust indentation handling.
+
+##### Marking Lines
+
+- **`{x}`** - Marks specific lines. For example, `{6,10-18}` will mark lines 6 and 10 through 18.
+- **`ins`** - Marks inserted lines. Example: `ins={6,10-18}`.
+- **`del`** - Marks deleted lines. Example: `del={6,10-18}`.
+- **`{"Label":x}`** - Assigns a label to a line or range of lines. Works with `mark`, `ins`, and `del`. Example: `{"Label1":5} del={"Label2":7-8} ins={"Label3":10-12}`. If the label is long, consider placing an empty line in the code for better readability.
+- **`collapse={X-Y}`** - Collapses the specified lines. Example: `collapse={1-5,12-14}`.
+
+##### Marking Text
+
+You can highlight text using strings or regular expressions. For example:
+
+````md
+```jsx "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+````
+
+```jsx "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+
 #### Importing files
 
 In addition to Expressive Code features, you can import files from your code template `_files` and `_solution` folders using the file or solution shortcodes. These shortcodes insert the content of the specified file directly into your lesson content.

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -221,8 +221,8 @@ editor: # Editor is visible
 
 ##### `previews`
 Configure which ports should be used for the previews allowing you to align the behavior with your demo application's dev server setup. If not specified, the lowest port will be used.
-
-<PropertyTable inherited type={'Preview[]'} />
+Optionally you can hide the preview by providing `previews: false`.
+<PropertyTable inherited type={'Preview[] | false'} />
 
 The `Preview` type has the following shape:
 
@@ -246,6 +246,9 @@ previews:
   - [3003, "Dev Server", "/docs"] # Preview is on :3003/docs/. Displayed title is "Dev Server".
   - { port: 3004, title: "Dev Server" } # Preview is on :3004/. Displayed title is "Dev Server".
   - { port: 3005, title: "Dev Server", pathname: "/docs" } # Preview is on :3005/docs/. Displayed title is "Dev Server".
+
+previews: false # Do not show preview panel
+
 ```
 
 ##### `mainCommand`

packages/react/src/Panels/EditorPanel.tsx

@@ -79,7 +79,7 @@ export function EditorPanel({
           </div>
         </div>
         <FileTree
-          className="flex-grow py-2 border-r border-tk-elements-app-borderColor text-sm"
+          className="flex flex-col flex-grow py-2 border-r border-tk-elements-app-borderColor text-sm overflow-y-auto overflow-x-hidden"
           i18n={i18n}
           selectedFile={selectedFile}
           hideRoot={hideRoot ?? true}

packages/react/src/core/FileTree.tsx

@@ -125,7 +125,7 @@ export function FileTree({
         directory=""
         onFileChange={onFileChange}
         allowEditPatterns={allowEditPatterns}
-        triggerProps={{ className: 'h-full', 'data-testid': 'file-tree-root-context-menu' }}
+        triggerProps={{ className: 'h-full min-h-4', 'data-testid': 'file-tree-root-context-menu' }}
       />
     </div>
   );