Some improvements to the panel

FelisDiligens · Feb 9, 2023 · b6ab065 · b6ab065
1 parent ef03380
commit b6ab065
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,8 @@
     <tr>
         <td>Inspired by:</td>
         <td>
-            <a href="https://github.com/cqroot/joplin-outline">Joplin Outline Plugin</a>
+            <a href="https://github.com/cqroot/joplin-outline">Joplin Outline Plugin</a>,
+            <a href="https://code.visualstudio.com/docs/editor/codebasics#_find-and-replace">VSCode's Find and Replace</a>
         </td>
     </tr>
     <tr>

diff --git a/src/index.ts b/src/index.ts
@@ -33,7 +33,17 @@ joplin.plugins.register({
             } else if (message.name == "getEditorState") {
                 return getEditorState();
             } else if (message.name == "getPreviewRegex") {
-                return prepareRegex(message.form.searchPattern, message.form.options);
+                try {
+                    return {
+                        "regex": prepareRegex(message.form.searchPattern, message.form.options),
+                        "error": null
+                    }
+                } catch (exp) {
+                    return {
+                        "regex": null,
+                        "error": exp
+                    }
+                }
             } else if (message.name.startsWith("SARPlugin.")) {
                 // Send any "SARPlugin..." messages directly to the CodeMirror editor plugin:
                 return await joplin.commands.execute('editor.execCommand', {

diff --git a/src/panel.ts b/src/panel.ts
@@ -36,18 +36,20 @@ export async function getPanelHTML() {
             </tr>
         </table>
         <table>
-            <!--
-                TODO:
-                - Find in selection
-            -->
             <tr>
-                <td>Regex<sup>4</sup>:</td>
-                <td colspan="2">
+                <td style="vertical-align: top;">Regex:<sup>4</sup></td>
+                <td colspan="2" style="vertical-align: bottom;">
                     <code>
                         <span id="regex-preview"></span>
                     </code>
                 </td>
             </tr>
+        </table>
+        <table>
+            <!--
+                TODO:
+                - Find in selection
+            -->
             <tr>
                 <td>Options:</td>
                 <td>

diff --git a/src/webview_panel.js b/src/webview_panel.js
@@ -26,6 +26,7 @@ let useWildcardsRad = document.querySelector("#usewildcards-rad");
 let useRegexRad = document.querySelector("#useregex-rad");
 
 // Text:
+let helpDetails = document.querySelector("details");
 let warnMdEditorParagraph = document.querySelector("#warning-mdeditor");
 warnMdEditorParagraph.style.display = "none";
 let regexPreviewSpan = document.querySelector("#regex-preview");
@@ -108,7 +109,13 @@ function updatePreviewRegex() {
     webviewApi
         .postMessage({ name: "getPreviewRegex", form: getForm() })
         .then((response) => {
-            regexPreviewSpan.innerText = response.toString();
+            if (response.regex) {
+                regexPreviewSpan.innerText = response.regex.toString();
+                regexPreviewSpan.style.color = "";
+            } else if (response.error) {
+                regexPreviewSpan.innerText = response.error.message;
+                regexPreviewSpan.style.color = "red";
+            }
         });
 }
 
@@ -126,6 +133,17 @@ useLiteralSearchRad.addEventListener("change", updatePreviewRegex);
 useWildcardsRad.addEventListener("change", updatePreviewRegex);
 useRegexRad.addEventListener("change", updatePreviewRegex);
 
+// Hide numbers if the help isn't displayed:
+document.querySelectorAll("sup").forEach((el) => {
+    el.style.visibility = "hidden";
+});
+helpDetails.addEventListener("toggle", () => {
+    let isDetailsOpen = helpDetails.hasAttribute("open");
+    document.querySelectorAll("sup").forEach((el) => {
+        el.style.visibility = isDetailsOpen ? "visible" : "hidden";
+    });
+});
+
 // Get selected text upon opening the panel:
 webviewApi.postMessage({ name: "selectedText" }).then((response) => {
     if (response && response.length > 0) searchTxt.value = response;