Image URLs

docs/en/manuals/editor-scripts-ui.md

@@ -45,7 +45,7 @@ return M
 ```
 
 This code snippet defines a **View → Do with confirmation** command. When you execute it, you will see the following dialog:
-<div align="center"><img src="images/editor_scripts/perform_action_dialog.png" width="652"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/perform_action_dialog.png" width="652"></div>
 
 
 
@@ -76,7 +76,7 @@ editor.ui.label({
 })
 ```
 The visible part is the `Hello` text, and it's aligned within the assigned component bounds:
-<div align="center"><img src="images/editor_scripts/alignment.png" width="141"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/alignment.png" width="141"></div>
 
 ## Built-in components
 
@@ -85,7 +85,7 @@ The editor defines various built-in components that can be used together to buil
 ### Layout components
 
 Layout components are used for placing other components next to each other. Main layout components are **`horizontal`**, **`vertical`** and **`grid`**. These components also define props such as **padding** and **spacing**, where padding is an empty space from the edge of the assigned bounds to the content, and spacing is an empty space between children:
-<div align="center"><img src="images/editor_scripts/padding_and_spacing.png" width="151"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/padding_and_spacing.png" width="151"></div>
 
 Editor defines `small`, `medium` and `large` padding and spacing constants. When it comes to spacing, `small` is intended for spacing between different sub-elements of an individual UI element, `medium` is for spacing between individual UI elements, and `large` is a spacing between groups of elements. Default spacing is `medium`. With paddings, `large` means padding from the edges of the window to content, `medium` is padding from the edges of a significant UI element, and `small` is a padding from the edges of small UI elements like context menus and tooltips (not implemented yet).
 
@@ -117,7 +117,7 @@ editor.ui.grid({
 })
 ```
 The code above will produce the following dialog form:
-<div align="center"><img src="images/editor_scripts/new_level_dialog.png" width="652"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/new_level_dialog.png" width="652"></div>
 
 ### Data presentation components
 
@@ -181,7 +181,7 @@ issue = {severity = editor.ui.ISSUE_SEVERITY.WARNING, message = "This value is d
 When issue is specified, it changes how the input component looks, and adds a tooltip with the issue message.
 
 Here is a demo of all inputs with their issue variants:
-<div align="center"><img src="images/editor_scripts/inputs_demo.png" width="652"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/inputs_demo.png" width="652"></div>
 
 ### Dialog-related components
 
@@ -254,7 +254,7 @@ end
 ```
 
 When you execute a menu command that runs this code, the editor will show a dialog with disabled `"Create File"` dialog at the start, but as soon as you start typing, it will become enabled:
-<div align="center"><img src="images/editor_scripts/reactive_new_file_dialog.png" width="652"></div>
+<div align="center"><img src="/manuals/images/editor_scripts/reactive_new_file_dialog.png" width="652"></div>
 
 So, how does it work? On the very first render, `use_state` hook creates a local state associated with the component and returns it with a setter for the state. When the setter function is invoked, it schedules a component re-render. On subsequent re-renders, the component function is invoked again, and `use_state` returns the updated state. New view component returned by the component function is then diffed against the old one, and the UI is updated where the changes were detected.