chore(react): add back Ctrl+Enter for markdown import

apps/client/src/translations/cn/translation.json

@@ -217,7 +217,7 @@
     "dialog_title": "Markdown 导入",
     "close": "关闭",
     "modal_body_text": "由于浏览器沙箱的限制，无法直接从 JavaScript 读取剪贴板内容。请将要导入的 Markdown 文本粘贴到下面的文本框中，然后点击导入按钮",
-        "import_button": "导入 Ctrl+回车",
+    "import_button": "导入",
     "import_success": "Markdown 内容已成功导入文档。"
   },
   "move_to": {

apps/client/src/translations/de/translation.json

@@ -217,7 +217,7 @@
     "dialog_title": "Markdown-Import",
     "close": "Schließen",
     "modal_body_text": "Aufgrund der Browser-Sandbox ist es nicht möglich, die Zwischenablage direkt aus JavaScript zu lesen. Bitte füge den zu importierenden Markdown in den Textbereich unten ein und klicke auf die Schaltfläche „Importieren“.",
-        "import_button": "Importieren Strg+Eingabe",
+    "import_button": "Importieren",
     "import_success": "Markdown-Inhalt wurde in das Dokument importiert."
   },
   "move_to": {

apps/client/src/translations/en/translation.json

@@ -219,7 +219,7 @@
     "dialog_title": "Markdown import",
     "close": "Close",
     "modal_body_text": "Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button",
-    "import_button": "Import Ctrl+Enter",
+    "import_button": "Import",
     "import_success": "Markdown content has been imported into the document."
   },
   "move_to": {

apps/client/src/translations/es/translation.json

@@ -218,7 +218,7 @@
     "dialog_title": "Importación de Markdown",
     "close": "Cerrar",
     "modal_body_text": "Debido al entorno limitado del navegador, no es posible leer directamente el portapapeles desde JavaScript. Por favor, pegue el código Markdown para importar en el área de texto a continuación y haga clic en el botón Importar",
-        "import_button": "Importar Ctrl+Enter",
+    "import_button": "Importar",
     "import_success": "El contenido de Markdown se ha importado al documento."
   },
   "move_to": {

apps/client/src/translations/fr/translation.json

@@ -217,7 +217,7 @@
     "dialog_title": "Importation Markdown",
     "close": "Fermer",
     "modal_body_text": "En raison du bac à sable du navigateur, il n'est pas possible de lire directement le presse-papiers à partir de JavaScript. Veuillez coller le Markdown à importer dans la zone de texte ci-dessous et cliquez sur le bouton Importer",
-        "import_button": "Importer Ctrl+Entrée",
+    "import_button": "Importer",
     "import_success": "Le contenu Markdown a été importé dans le document."
   },
   "move_to": {

apps/client/src/translations/ro/translation.json

@@ -781,7 +781,7 @@
   },
   "markdown_import": {
     "dialog_title": "Importă Markdown",
-        "import_button": "Importă Ctrl+Enter",
+    "import_button": "Importă",
     "import_success": "Conținutul Markdown a fost importat în document.",
     "modal_body_text": "Din cauza limitărilor la nivel de navigator, nu este posibilă citirea clipboard-ului din JavaScript. Inserați Markdown-ul pentru a-l importa în caseta de mai jos și dați clic pe butonul Import",
     "close": "Închide"

apps/client/src/translations/sr/translation.json

@@ -219,7 +219,7 @@
     "dialog_title": "Uvoz za Markdown",
     "close": "Zatvori",
     "modal_body_text": "Zbog Sandbox-a pretraživača nije moguće direktno učitati privremenu memoriju iz JavaScript-a. Molimo vas da nalepite Markdown za uvoz u tekstualno polje ispod i kliknete na dugme za uvoz",
-        "import_button": "Uvoz Ctrl+Enter",
+    "import_button": "Uvoz",
     "import_success": "Markdown sadržaj je učitan u dokument."
   },
   "move_to": {

apps/client/src/translations/tw/translation.json

@@ -199,7 +199,7 @@
   "markdown_import": {
     "dialog_title": "Markdown 匯入",
     "modal_body_text": "由於瀏覽器沙盒的限制，無法直接從 JavaScript 讀取剪貼簿內容。請將要匯入的 Markdown 文字貼上到下面的文字框中，然後點擊匯入按鈕",
-        "import_button": "匯入 Ctrl+Enter",
+    "import_button": "匯入",
     "import_success": "已成功匯入 Markdown 內容文檔。"
   },
   "move_to": {

apps/client/src/widgets/dialogs/markdown_import.tsx

@@ -7,6 +7,7 @@ import toast from "../../services/toast";
 import utils from "../../services/utils";
 import Modal from "../react/Modal";
 import ReactBasicWidget from "../react/ReactBasicWidget";
+import Button from "../react/Button";
 
 interface RenderMarkdownResponse {
     htmlContent: string;
@@ -25,13 +26,19 @@ function MarkdownImportDialogComponent() {
     return (
         <Modal
             className="markdown-import-dialog" title={t("markdown_import.dialog_title")} size="lg"
-            footer={<button className="markdown-import-button btn btn-primary" onClick={sendForm}>{t("markdown_import.import_button")}</button>}
+            footer={<Button className="markdown-import-button" text={t("markdown_import.import_button")} onClick={sendForm} keyboardShortcut="Ctrl+Space" />}
             onShown={() => markdownImportTextArea.current?.focus()}
         >
             <p>{t("markdown_import.modal_body_text")}</p>
             <textarea ref={markdownImportTextArea} value={text}
                 onInput={(e) => setText(e.currentTarget.value)}
-                style={{ height: 340, width: "100%" }}></textarea>
+                style={{ height: 340, width: "100%" }}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter" && e.ctrlKey) {
+                        e.preventDefault();
+                        sendForm();
+                    }
+                }}></textarea>
         </Modal>
     )
 }

apps/client/src/widgets/react/Button.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "preact/hooks";
+import shortcuts from "../../services/shortcuts";
+
+interface ButtonProps {
+    text: string;
+    className?: string;
+    keyboardShortcut?: string;
+    onClick: () => void;
+}
+
+export default function Button({ className, text, onClick, keyboardShortcut }: ButtonProps) {
+    const classes: string[] = ["btn"];
+    classes.push("btn-primary");
+    if (className) {
+        classes.push(className);
+    }
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const splitShortcut = (keyboardShortcut ?? "").split("+");
+
+    return (
+        <button
+            className={classes.join(" ")}
+            type="button"
+            onClick={onClick}
+            ref={buttonRef}
+        >
+            {text} {keyboardShortcut && (
+                splitShortcut.map((key, index) => (
+                    <>
+                        <kbd key={index}>{key.toUpperCase()}</kbd>{ index < splitShortcut.length - 1 ? "+" : "" }
+                    </>
+                ))
+            )}
+        </button>
+    );
+}