Docs: text visualization refactor (#102939)

* Added Config options section, bumped heading levels, added missing options, and restructured Text options section

* Moved variables content

* Replaced screenshot

* Moved sentence

* Used previous wording

* test commit

* Revert test commit

* Ran prettier

docs/sources/panels-visualizations/visualizations/text/index.md

@@ -32,11 +32,12 @@ refs:
 
 # Text
 
-Text visualizations enable you to directly include text or HTML in your dashboards. This can be used to add contextual information and descriptions or embed complex HTML.
+Text visualizations let you include text or HTML in your dashboards.
+This can be used to add contextual information and descriptions or embed complex HTML.
 
-For example, if you want to display important links to your dashboard, you can use a text visualization to add these links:
+For example, if you want to display important links on your dashboard, you can use a text visualization to add these links:
 
-{{< figure src="/static/img/docs/text-panel/text-panel.png" max-width="1025px" alt="A text panel showing important links" >}}
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-text-visualization-v11.6.png" max-width="750px" alt="A text panel showing important links" >}}
 
 {{< docs/play title="Text Panel" url="https://play.grafana.org/d/adl33bxy1ih34b/" >}}
 
@@ -46,36 +47,25 @@ Use a text visualization when you need to:
 - Provide instructions or guidance on how to interpret different panels, configure settings, or take specific actions based on the displayed data.
 - Announce any scheduled maintenance or downtime that might impact your dashboards.
 
-## Panel options
+## Configuration options
 
-{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
-
-## Text options
-
-Use the following options to refine your text visualization.
-
-### Mode
+{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-**Mode** determines how embedded content appears.
+### Panel options
 
-{{< admonition type="note" >}}
-To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).
-{{< /admonition >}}
-
-### Markdown
-
-This option formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).
-
-### HTML
+{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-This setting renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the
-[disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML.
+### Text options
 
-### Code
+Use the following options to refine your text visualization.
 
-This setting renders content inside a read-only code editor. Select an appropriate language to apply syntax highlighting
-to the embedded text.
+<!-- prettier-ignore-start -->
 
-## Variables
+| Option | Description |
+| ------ | ----------- |
+| Mode | Determines how embedded content appears. Choose from:<ul><li>**Markdown** - Formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).</li><li>**HTML** - Renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the [disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML.</li><li>**Code** - Renders content inside a read-only code editor. [Variables](ref:variables) in the content are expanded for display.</li></ul><p>To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).</p> |
+| Language | When you choose **Code** as your text mode, select an appropriate language to apply syntax highlighting to the embedded text. |
+| Show line numbers | Displays line numbers in the panel preview when you choose **Code** as your text mode. |
+| Show mini map | Displays a small outline of the embedded text in the panel preview when you choose **Code** as your text mode. |
 
-[Variables](ref:variables) in the content will be expanded for display.
+<!-- prettier-ignore-end -->