Use a clearer description/textarea formatting hint text

translations/src/de.rs

@@ -186,7 +186,6 @@ impl Translations {
         local_editor_note: "Öffne diese Adresse in deinem Browser um mit dem Editieren zu beginnen - sie ist nur für dich und von diesem Gerät zugänglich.",
         local_path: "Lokaler Pfad",
         loud_volume: "Hohe Lautstärke",
-        markdown_inline_links_are_supported_standalone_urls_are_automatically_linked: r#"Markdown Inline-Links werden unterstützt: [Beispiel](https://example.com)<br>Alleinstehende URLs werden automatisch verlinkt."#,
         maximize: "Maximieren",
         media_rss_description: "Ein RSS-Feed der Video und Audio-Inhalte in allen verfügbaren Formaten direkt über den Feed verbreitet.",
         medium_volume: "Mittlere Lautstärke",
@@ -306,6 +305,7 @@ impl Translations {
 
             Fehlerdetails: {error}
         "),
+        textarea_formatting_hint_text: r#"URLs werden automatisch verlinkt - <code>https://example.com</code> wird zu <a href="https://example.com" target="_blank">example.com</a><br>Für Linktexte verwende <code>[Beispiel](https://example.com)</code> - dies wird zu <a href="https://example.com" target="_blank">Beispiel</a>"#,
         the_editor_is_available_at_xxx: r#"Der Editor ist unter <a href="{url}" target="_blank">{url}</a> verfügbar"#,
         the_file_requested_for_deletion_was_not_found: "Die zu löschende Datei wurde nicht gefunden",
         the_link_requested_for_deletion_was_not_found: "Der zu löschende Link wurde nicht gefunden",

translations/src/en.rs

@@ -186,7 +186,6 @@ impl Translations {
         local_editor_note: "Open this address in your browser to start editing - it is only accessible to you, on this device.",
         local_path: "Local Path",
         loud_volume: "Loud Volume",
-        markdown_inline_links_are_supported_standalone_urls_are_automatically_linked: r#"Markdown inline links are supported: [Example](https://example.com)<br>Stand-alone URLs are automatically linked."#,
         maximize: "Maximize",
         media_rss_description: "An RSS feed that distributes video and audio content in all available formats directly over the feed.",
         medium_volume: "Medium Volume",
@@ -307,6 +306,7 @@ impl Translations {
 
             Error details: {error}
         "),
+        textarea_formatting_hint_text: r#"URLs are automatically linked - <code>https://example.com</code> is rendered as <a href="https://example.com" target="_blank">example.com</a><br>To set the link label use <code>[Example](https://example.com)</code> - this is rendered as <a href="https://example.com" target="_blank">Example</a>"#,
         the_editor_is_available_at_xxx: r#"The editor is available at <a href="{url}" target="_blank">{url}</a>"#,
         the_file_requested_for_deletion_was_not_found: "The file requested for deletion was not found",
         the_link_requested_for_deletion_was_not_found: "The link requested for deletion was not found",

translations/src/lib.rs

@@ -183,7 +183,6 @@ pub struct Translations {
     pub local_editor_note: &'static str,
     pub local_path: &'static str,
     pub loud_volume: &'static str,
-    pub markdown_inline_links_are_supported_standalone_urls_are_automatically_linked: &'static str,
     pub maximize: &'static str,
     pub media_rss_description: &'static str,
     pub medium_volume: &'static str,
@@ -298,6 +297,7 @@ pub struct Translations {
     pub subtitles: &'static str,
     pub synopsis: &'static str,
     test_file_successfully_uploaded_but_remote_verification_failed_message: &'static str,
+    pub textarea_formatting_hint_text: &'static str,
     the_editor_is_available_at_xxx: &'static str,
     pub the_file_requested_for_deletion_was_not_found: &'static str,
     pub the_link_requested_for_deletion_was_not_found: &'static str,

web/src/assets/editor.css

@@ -814,8 +814,23 @@ svg { fill: currentColor; }
     align-self: flex-end;
     color: var(--fg-3);
     font-size: .8rem;
+    line-height: 1.4;
     text-align: right;
 }
+.textarea_with_hint span a {
+    color: var(--fg-2);
+    text-decoration: underline;
+}
+.textarea_with_hint span a:focus-visible,
+.textarea_with_hint span a:hover {
+    color: var(--fg-3);
+    text-decoration: underline;
+}
+.textarea_with_hint span code {
+    background: var(--bg-2);
+    border-radius: .1rem;
+    padding-inline: .2em;
+}
 #toggle-splash svg { pointer-events: none; }
 .tree_view_options {
     align-items: center;

web/src/components/textarea.rs

@@ -56,9 +56,7 @@ impl<'a> Textarea<'a> {
         key: &'a str,
         label: &'a str
     ) -> Textarea<'a> {
-        let hint = Some(
-            translations.markdown_inline_links_are_supported_standalone_urls_are_automatically_linked.to_string()
-        );
+        let hint = Some(translations.textarea_formatting_hint_text.to_string());
         Textarea::new(
             hint,
             key,