feat(docs): improve external links documentation

docs/Release Notes/Release Notes/v0.92.8-beta.md

@@ -1,4 +1,4 @@
-# v0.92.8-beta
+# v0.92.8-beta
 ## 💡 Key highlights
 
 *   …
@@ -8,7 +8,7 @@
 *   Calendar does not hide when clicking on a note by @JYC333
 *   Mobile improvements:
     *   [Unable to add internal link on mobile version](https://github.com/TriliumNext/Notes/issues/1677)
-    *   Note tree not closing when selecting some of the menu actions.    
+    *   Note tree not closing when selecting some of the menu actions.
     *   [Most tree context menu on mobile are broken](https://github.com/TriliumNext/Notes/issues/671)
 *   [Quick search launch bar item does nothing in vertical layout](https://github.com/TriliumNext/Notes/issues/1680)
 
@@ -34,6 +34,7 @@
 ## 📖 Documentation
 
 *   Described almost all of the features of text notes, including a reference of keyboard shortcuts.
+*   Improve external links documentation.
 
 ## 🛠️ Technical updates
 

docs/User Guide/!!!meta.json

@@ -6093,11 +6093,26 @@
                                             "value": "bx bx-link-alt",
                                             "isInheritable": false,
                                             "position": 40
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "nRhnJkTT8cPs",
+                                            "isInheritable": false,
+                                            "position": 50
                                         }
                                     ],
                                     "format": "markdown",
                                     "dataFileName": "Links.md",
                                     "attachments": [
+                                        {
+                                            "attachmentId": "4LuLbS0gxlkC",
+                                            "title": "image.png",
+                                            "role": "image",
+                                            "mime": "image/png",
+                                            "position": 10,
+                                            "dataFileName": "Links_image.png"
+                                        },
                                         {
                                             "attachmentId": "74XnfiCk2y9N",
                                             "title": "create-link-to-note.gif",
@@ -6107,12 +6122,20 @@
                                             "dataFileName": "Links_create-link-to-note.gif"
                                         },
                                         {
-                                            "attachmentId": "TGdayl3Caj0R",
+                                            "attachmentId": "GH0rUFn6UUDY",
-                                            "title": "create-external-link.gif",
+                                            "title": "image.png",
                                             "role": "image",
-                                            "mime": "image/gif",
+                                            "mime": "image/png",
                                             "position": 10,
-                                            "dataFileName": "Links_create-external-link.gif"
+                                            "dataFileName": "1_Links_image.png"
+                                        },
+                                        {
+                                            "attachmentId": "w1jpXjdAuL2B",
+                                            "title": "image.png",
+                                            "role": "image",
+                                            "mime": "image/png",
+                                            "position": 10,
+                                            "dataFileName": "2_Links_image.png"
                                         }
                                     ]
                                 },

docs/User Guide/User Guide/Note Types/Text/Links.md

@@ -1,11 +1,27 @@
 # Links
 ## External links
 
-External link is general web link targeting some external web resource - e.g. [https://en.wikipedia.org/wiki/South\_China\_Sea](https://en.wikipedia.org/wiki/South_China_Sea) is an external link to one Wikipedia page.
+An external link is a standard web link targeting for example a website. For example, [https://en.wikipedia.org/wiki/South\_China\_Sea](https://en.wikipedia.org/wiki/South_China_Sea) is an external link to a Wikipedia page.
 
-External links are done through CKEditor native links. To create an external link, select text and press <kbd>Ctrl</kbd> + <kbd>K</kbd> or wait for the "balloon" to appear and click link icon there.
+To create a link without a custom text:
 
-![](Links_create-external-link.gif)
+*   Press <img src="1_Links_image.png" width="15" height="16"> in the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>:
+    *   A popup will appear, type or paste the URL in the box.
+    *   Press <kbd>Enter</kbd> or the check mark icon to confirm.
+*   Alternatively, press <kbd>Ctrl</kbd>+<kbd>K</kbd> to trigger the aforementioned popup.
+*   A simpler way is to paste the raw link and press space to turn it automatically into a link.
+
+To create a link with a custom text:
+
+*   First, type and select the text which will be turned into a link.
+*   Follow the previous steps to open the link interface (via the formatting toolbar, or <kbd>Ctrl</kbd>+<kbd>K</kbd>).
+*   Alternatively, simply paste (<kbd>Ctrl</kbd>+<kbd>V</kbd>) over the selected text to turn it into a link.
+
+Once a link is inserted:
+
+*   The text inside the link can be changed if needed but the link itself will remain.
+*   To modify the link, click on the link to display the popup and press the <img src="Links_image.png" width="18" height="18"> _Edit link_ button.
+*   To remove a link, click on it and press the <img src="2_Links_image.png" width="18" height="18"> _Unlink_ button.
 
 You can follow external link by either double clicking (will open new tab/window) it or right clicking on them and choosing "Open in new tab".
 

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Links.html

@@ -1,13 +1,40 @@
 <h2>External links</h2>
-<p>External link is general web link targeting some external web resource
+<p>An external link is a standard web link targeting for example a website.
-  - e.g. <a href="https://en.wikipedia.org/wiki/South_China_Sea">https://en.wikipedia.org/wiki/South_China_Sea</a> is
+  For example, <a href="https://en.wikipedia.org/wiki/South_China_Sea">https://en.wikipedia.org/wiki/South_China_Sea</a> is
-  an external link to one Wikipedia page.</p>
+  an external link to a Wikipedia page.</p>
-<p>External links are done through CKEditor native links. To create an external
+<p>To create a link without a custom text:</p>
-  link, select text and press <kbd>Ctrl</kbd> + <kbd>K</kbd> or wait for the
+<ul>
-  "balloon" to appear and click link icon there.</p>
+  <li>Press
-<p>
+    <img src="1_Links_image.png" width="15" height="16">in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_nRhnJkTT8cPs">Formatting toolbar</a>:
-  <img src="Links_create-external-link.gif">
+    <ul>
-</p>
+      <li>A popup will appear, type or paste the URL in the box.</li>
+      <li>Press <kbd>Enter</kbd> or the check mark icon to confirm.</li>
+    </ul>
+  </li>
+  <li>Alternatively, press <kbd>Ctrl</kbd>+<kbd>K</kbd> to trigger the aforementioned
+    popup.</li>
+  <li>A simpler way is to paste the raw link and press space to turn it automatically
+    into a link.</li>
+</ul>
+<p>To create a link with a custom text:</p>
+<ul>
+  <li>First, type and select the text which will be turned into a link.</li>
+  <li>Follow the previous steps to open the link interface (via the formatting
+    toolbar, or <kbd>Ctrl</kbd>+<kbd>K</kbd>).</li>
+  <li>Alternatively, simply paste (<kbd>Ctrl</kbd>+<kbd>V</kbd>) over the selected
+    text to turn it into a link.</li>
+</ul>
+<p>Once a link is inserted:</p>
+<ul>
+  <li>The text inside the link can be changed if needed but the link itself
+    will remain.</li>
+  <li>To modify the link, click on the link to display the popup and press the
+    <img
+    src="Links_image.png" width="18" height="18"> <em>Edit link</em> button.</li>
+  <li>To remove a link, click on it and press the
+    <img src="2_Links_image.png"
+    width="18" height="18"> <em>Unlink</em> button.</li>
+</ul>
 <p>You can follow external link by either double clicking (will open new
   tab/window) it or right clicking on them and choosing "Open in new tab".</p>
 <h2>Internal links to notes</h2>