Docs: Move editor documentation into "Guide"

docs/astro/astro.config.mjs

@@ -63,6 +63,20 @@ export default defineConfig({
                                 collapsed: true,
                                 items: [
                                     "guide/tooling/vscode",
+                                    {
+                                        label: "Other Editors",
+                                        collapsed: true,
+                                        items: [
+                                            "guide/tooling/manual-setup",
+                                            "guide/tooling/kate",
+                                            "guide/tooling/qt-creator",
+                                            "guide/tooling/helix",
+                                            "guide/tooling/neo-vim",
+                                            "guide/tooling/sublime-text",
+                                            "guide/tooling/jetbrains-ide",
+                                            "guide/tooling/zed",
+                                        ],
+                                    },
                                     "guide/tooling/figma-inspector",
                                 ],
                             },

docs/astro/src/content/docs/guide/tooling/helix.mdx

@@ -0,0 +1,34 @@
+---
+// cSpell: ignore Textobject
+title: Helix
+description: Helix Configuration for Slint
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+To install the Slint Language server, check the <Link type="SlintLSP" label="LSP Documentation"/>.
+
+[Helix](https://helix-editor.com/) works out of the box without further configuration. To check if Helix detects Slint Language server successfully, run this command:
+
+```sh
+hx --health slint
+```
+
+The output should be like:
+
+```
+Configured language servers:
+  ✓ slint-lsp: /home/user/.local/bin/slint-lsp
+Configured debug adapter: None
+Configured formatter: None
+Highlight queries: ✓
+Textobject queries: ✓
+Indent queries: ✓
+```
+
+### Live Preview
+
+To open the live preview, place the caret over a component name and trigger the code actions (bound to `<space>a` by default).
+Depending on your configuration, this action might be bound to something else, so please check your configuration for the appropriate key binding (`code_action`).
+
+![Opening a live Preview from Helix](../../../../assets/guide/tooling/helix-show-preview.webp)

docs/astro/src/content/docs/guide/tooling/jetbrains-ide.mdx

@@ -0,0 +1,9 @@
+---
+// cSpell: ignore kizeevov
+title: JetBrains IDE
+description: JetBrains IDE Configuration for Slint
+---
+
+[kizeevov/slint-idea-plugin](https://github.com/kizeevov/slint-idea-plugin) has a plugin for the Intellij platform.
+
+_Note: This plugin is developed by [@kizeevov](https://github.com/kizeevov)._

docs/astro/src/content/docs/guide/tooling/kate.mdx

@@ -0,0 +1,54 @@
+---
+// cSpell: ignore ksyntaxhighlighter
+title: Kate
+description: Kate Configuration for Slint
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+Before we start, it's important to note that Kate relies on the presence of syntax highlighting file for the usage of the LSP.
+Therefore, we'll set up the syntax highlighting first.
+
+### Syntax Highlighting
+
+The file [slint.ksyntaxhighlighter.xml][syntax-xml] needs to be copied into a location where Kate can find it.
+See the [kate documentation](https://docs.kde.org/stable5/en/kate/katepart/highlight.html#katehighlight-xml-format)
+
+On Linux, this can be done by running this command
+
+```sh
+mkdir -p ~/.local/share/org.kde.syntax-highlighting/syntax/
+wget https://raw.githubusercontent.com/slint-ui/slint/master/editors/kate/slint.ksyntaxhighlighter.xml -O ~/.local/share/org.kde.syntax-highlighting/syntax/slint.xml
+```
+
+On Windows, download [slint.ksyntaxhighlighter.xml][syntax-xml] into `%USERPROFILE%\AppData\Local\org.kde.syntax-highlighting\syntax`
+
+### LSP
+
+After setting up the syntax highlighting, you can now install the Slint Language server. Check the <Link type="SlintLSP" label="LSP Documentation"/> for instructions.
+
+Once it is installed, go to *Settings > Configure Kate*. In the *Plugins* section, enable the *LSP-Client* plugin. This will add a *LSP Client* section in the settings dialog. In that *LSP Client* section, go to the *User Server Settings*, and  enter the following in the text area:
+
+```json
+{
+  "servers": {
+    "Slint": {
+      "path": ["%{ENV:HOME}/.cargo/bin", "%{ENV:USERPROFILE}/.cargo/bin"],
+      "command": ["slint-lsp"],
+      "highlightingModeRegex": "Slint"
+    }
+  }
+}
+```
+
+![Kate LSP Setup](../../../../assets/guide/tooling/kate-lsp-setup.webp)
+
+### Live Preview
+
+Once the LSP is correctly set up, to preview a component, first, position your cursor on the name definition of the component you want to preview
+(for instance, `MainWindow` in `component MainWindow inherits Window {`).
+Then, activate the *Show Preview* code action.
+You can do this by using the Alt+Enter shortcut to bring up the code action menu,
+or find it in the menu bar at *LSP Client > Code Action > Show Preview*
+
+[syntax-xml]: <https://github.com/slint-ui/slint/blob/master/editors/kate/slint.ksyntaxhighlighter.xml>

docs/astro/src/content/docs/guide/tooling/manual-setup.mdx

@@ -0,0 +1,108 @@
+---
+// cSpell: ignore libx libxcb libxkbcommon libinput libgbm
+title: Manual Setup
+description: Manually set up Slint for your editor
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+We provide extensions or configuration files for different editors to better support .slint files.
+
+### Editors
+
+- <Link type="VSCode" label="Visual Studio Code"/>
+- <Link type="Kate" label="Kate"/>
+- <Link type="QtCreator" label="Qt Creator"/>
+- <Link type="Helix" label="Helix"/>
+- <Link type="NeoVim" label="(Neo-)Vim"/>
+- <Link type="SublimeText" label="Sublime Text"/>
+- <Link type="JetBrains" label="JetBrains IDE"/>
+- <Link type="Zed" label="Zed"/>
+
+If your favorite editor is not in the list of supported editors, it just means we did not test it, not that it doesn't work. We do provide a language server for Slint that should work with most editor that supports the Language Server Protocol (LSP). If you do test your editor with it, we would be happy to accept a pull request that adds instructions here.
+
+## <a name="slint-lsp"/>Slint Language Server (`slint-lsp`)
+
+Most modern editors use the [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) to add support for different programming languages.
+Slint provides an LSP implementation with the `slint-lsp` binary.
+
+### Installation
+
+If you have Rust installed, you can install the binary by running the following command:
+
+```sh
+cargo install slint-lsp
+```
+
+This makes the latest released version available in `$HOME/.cargo/bin`. If you would like to try a development version, you can also point `cargo install` to the git repository:
+for the released version. Or, to install the development version:
+
+```sh
+cargo install slint-lsp --git https://github.com/slint-ui/slint --force
+```
+
+
+Alternatively, you can download one of our pre-built binaries for Linux or Windows:
+
+1. Go to [the latest Slint release](https://github.com/slint-ui/slint/releases/latest)
+2. From "Assets" download either `slint-lsp-linux.tar.gz` for a Linux x86-64 binary
+   or `slint-lsp-windows-x86_64.zip` for a Windows x86-64 binary.
+3. Uncompress the downloaded archive into a location of your choice.
+
+Make sure the required dependencies are found. On Debian-like systems install them with the following command:
+
+```shell
+sudo apt install -y build-essential libx11-xcb1 libx11-dev libxcb1-dev libxkbcommon0 libinput10 libinput-dev libgbm1 libgbm-dev
+```
+
+### Editor configuration
+
+Once you have `slint-lsp` installed, configure your editor to use the binary, no arguments are required.
+See our [list of editor configurations](#editors) for details.
+If your editor is not on this list, please refer to your editors documentation for details on how to set up language servers.
+
+### <a name="fmt"/>Formatting Slint files
+
+Slint files can be auto-formatted with `slint-lsp` in the following ways:
+
+- `slint-lsp format <path>` - reads the file and outputs the formatted version to stdout
+- `slint-lsp format -i <path>` - reads the file and saves the output to the same file
+- `slint-lsp format /dev/stdin` - using /dev/stdin you can achieve the special behavior
+  of reading from stdin and writing to stdout
+
+Note that `.slint` files are formatted, while `.md` and `.rs` files are searched for `.slint` blocks.
+All other files are left untouched.
+
+If you have `slint-lsp` configured in your editor, you should be able to format .slint files via your editor as well.
+
+## Slint Live Preview (`slint-viewer`)
+
+Slint's live preview feature lets you see your code changes in real-time.
+This is a really powerful way to iterate quickly on your UI without having to recompile anything.
+
+If you have slint-lsp configured in your editor, you can launch the live preview directly from your editor.
+
+**Example in Neovim:**
+
+![Opening Live Preview from a Neovim Popup](../../../../assets/guide/tooling/nvim-show-preview.webp)
+
+### Running `slint-viewer` from the terminal
+
+To open the live preview from a terminal, you can use the `slint-viewer` binary.
+
+To install it either:
+
+* [Download the binary](https://github.com/slint-ui/slint/releases/latest)
+* Run `cargo install slint-viewer` if you have a Rust installation
+
+Then run `slint-viewer --auto-reload <path/to/file.slint>`.
+
+**Example on the [Printer Demo](https://github.com/slint-ui/slint/blob/master/demos/printerdemo/ui/printerdemo.slint)**
+
+![Slint Printer Demo](../../../../assets/guide/tooling/slint-viewer.webp)
+
+## Additional resources
+
+* [Slint Plugin for (Neo)vim](https://github.com/slint-ui/vim-slint)
+* [Slint TreeSitter Grammar](https://github.com/slint-ui/tree-sitter-slint)
+* [Editor Configuration Source](https://github.com/slint-ui/slint/tree/master/editors)

docs/astro/src/content/docs/guide/tooling/neo-vim.mdx

@@ -0,0 +1,78 @@
+---
+// cSpell: ignore vimrc nvim lspconfig kosayoda
+title: (Neo-)Vim
+description: Vim and Neovim Configuration for Slint
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+## Vim
+
+To install the Slint Language server, check the <Link type="SlintLSP" label="LSP Documentation"/>.
+
+Vim support the Language Server Protocol via its [Conquer of Completion](https://github.com/neoclide/coc.nvim)
+plugin. Together with the Slint LSP server, this enables inline diagnostics and code completion when
+editing `.slint` files.
+
+After installing the extension, for example via [vim-plug](https://github.com/junegunn/vim-plug),
+two additional configuration changes are needed to integrate the LSP server with vim:
+
+1. Make vim recognize the `.slint` files with the correct file type
+
+Install the [`slint-ui/vim-slint`](https://github.com/slint-ui/vim-slint) plugin.
+
+Alternatively you can add the following to your vim configuration file (e.g. `vimrc`) to
+enable automatic recognition of `.slint` files:
+
+{/* cSpell: disable */}
+```
+autocmd BufEnter *.slint :setlocal filetype=slint
+```
+{/* cSpell: enable */}
+
+2. Make sure the slint language server is installed and can be found in PATH.
+
+3. Configure Conquer of Completion to use the Slint LSP server
+
+Start `vim` and run the `:CocConfig` command to bring up the buffer that allows editing
+the JSON configuration file (`coc-settings.json`), and make sure the following mapping
+exists under the `language` server section:
+
+```json
+{
+  "languageserver": {
+    "slint": {
+      "command": "slint-lsp",
+      "filetypes": ["slint"]
+    }
+  }
+}
+```
+
+## Neovim
+
+Follow step 1. of the Vim section to get support for `.slint` files.
+
+The easiest way to use the language server in Neovim is via the [`neovim/nvim-lspconfig`](https://github.com/neovim/nvim-lspconfig) plugin.
+
+To install the language server you can:
+
+- <Link type="SlintLSP" label="install and configure manually"/>
+- install [Mason](https://github.com/mason-org/mason.nvim) and run `:MasonInstall slint-lsp` (on Windows, Linux and macOS)
+
+### Live Preview
+
+Once the `slint-lsp` language server is installed and running, you can open the live preview
+by placing the caret over a component name and triggering the code actions (bound to `gra` by default).
+Depending on your configuration, this action might be bound to something else, so please check your configuration for the appropriate key binding (`vim.lsp.buf.code_action()`).
+
+You may also want to install a plugin that indicates when code actions are available like [kosayoda/nvim-lightbulb](https://github.com/kosayoda/nvim-lightbulb).
+
+**Example with nvim-lightbulb**:
+
+![Opening Live Preview from Neovim](../../../../assets/guide/tooling/nvim-show-preview.webp)
+
+### Tree-sitter
+
+If you use `nvim-treesitter` you can install the Tree Sitter parser for Slint using `TSInstall slint`
+for syntax highlighting and indentation support.

docs/astro/src/content/docs/guide/tooling/qt-creator.mdx

@@ -0,0 +1,36 @@
+---
+title: Qt Creator
+description: Qt Creator Configuration for Slint
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+### Syntax Highlighting
+
+For the **syntax highlighting**, QtCreator supports the same format as Kate, with
+the [xml file][syntax-xml] at the same location.
+Refer to the instruction from the <Link type="KateSyntaxHighlighting" label="Kate page"/> to enable syntax highlighting.
+
+### LSP
+
+To install the Slint Language server, check the <Link type="SlintLSP" label="LSP Documentation"/>.
+
+To setup the lsp:
+
+ 1. Install the `slint-lsp` binary
+ 2. Then in Qt creator, go to *Tools > Option* and select the *Language Client* section.
+ 3. Click *Add*
+ 4. As a name, use "Slint"
+ 5. use `*.slint` as a file pattern. (don't use MIME types)
+ 6. As executable, select the `slint-lsp` binary (no arguments required)
+ 7. Click *Apply* or *Ok*
+
+![Qt Creator LSP Configuration](../../../../assets/guide/tooling/qt-creator-lsp-setup.webp)
+
+### Live Preview
+
+Once you have set up the LSP, in order to **preview a component**, when you have a .slint file open, place your cursor to
+the name of the component you would like to preview and press *Alt + Enter* to open
+the code action menu. Select *Show Preview* from that menu.
+
+[syntax-xml]: <https://github.com/slint-ui/slint/blob/master/editors/kate/slint.ksyntaxhighlighter.xml>

docs/astro/src/content/docs/guide/tooling/sublime-text.mdx

@@ -0,0 +1,30 @@
+---
+// cSpell: ignore sublimelsp
+title: Sublime Text
+description: Sublime Text Configuration for Slint
+---
+
+import Link from '@slint/common-files/src/components/Link.astro';
+
+To install the Slint Language server, check the <Link type="SlintLSP" label="LSP Documentation"/>.
+
+To setup the LSP:
+
+1. Make sure the slint language server is installed
+2. Using Package Control in Sublime Text, install the LSP package ([sublimelsp/LSP](https://github.com/sublimelsp/LSP))
+3. Download the Slint syntax highlighting files into your User Package folder,
+   e.g. on macOS `~/Library/Application Support/Sublime Text/Packages/User/` :
+   https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/Slint.sublime-syntax
+   https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/Slint.tmPreferences
+4. Download the LSP package settings file into your User Package folder:
+   https://raw.githubusercontent.com/slint-ui/slint/master/editors/sublime/LSP.sublime-settings
+5. Modify the slint-lsp command path in `LSP.sublime-settings` to point to the cargo installation path in your home folder (**Replace YOUR_USER by your username**):
+   `"command": ["/home/YOUR_USER/.cargo/bin/slint-lsp"]`
+6. Run "LSP: Enable Language Server Globally" or "LSP: Enable Language Server in Project" from Sublime's Command Palette to allow the server to start.
+7. Open a .slint file - if the server starts its name will be in the left side of the status bar.
+
+### Live Preview
+
+In order to **preview a component**, when you have a .slint file open, place your cursor to
+the name of the component you would like to preview and select the "Show preview" button that
+will appear on the right of the editor pane.

docs/astro/src/content/docs/guide/tooling/vscode.mdx

@@ -6,6 +6,7 @@ description: Get going VS Code
 
 import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
 import { YouTube } from 'astro-embed';
+import Link from '@slint/common-files/src/components/Link.astro';
 
 <YouTube id="fWwctiowLnY" poster="https://github.com/user-attachments/assets/873f51b3-cb32-44f7-be8b-6e4c03c204ff" />
 
@@ -17,7 +18,7 @@ it's also the easiest to get started with.
 
 
 :::note[Note]
-We support many other tools and editors, see [here](https://github.com/slint-ui/slint/blob/master/editors/README.md#editors).
+We support many other tools and editors, see <Link type="ManualEditorSetup" label="here"/>.
 :::