From 0cfe3351bb5835aff48ba7ddb540e1af8c45f3bc Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 5 Aug 2025 20:56:07 +0300 Subject: [PATCH] feat(react/dialogs): port include_note --- .../src/translations/cn/translation.json | 2 +- .../src/translations/de/translation.json | 2 +- .../src/translations/en/translation.json | 2 +- .../src/translations/es/translation.json | 2 +- .../src/translations/fr/translation.json | 2 +- .../src/translations/ro/translation.json | 2 +- .../src/translations/sr/translation.json | 2 +- .../src/translations/tw/translation.json | 2 +- .../src/widgets/dialogs/include_note.ts | 116 ------------------ .../src/widgets/dialogs/include_note.tsx | 99 +++++++++++++++ 10 files changed, 107 insertions(+), 124 deletions(-) delete mode 100644 apps/client/src/widgets/dialogs/include_note.ts create mode 100644 apps/client/src/widgets/dialogs/include_note.tsx diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json index fc7d42fd6..a3a85325b 100644 --- a/apps/client/src/translations/cn/translation.json +++ b/apps/client/src/translations/cn/translation.json @@ -202,7 +202,7 @@ "box_size_small": "小型 (显示大约10行)", "box_size_medium": "中型 (显示大约30行)", "box_size_full": "完整显示（完整文本框）", - "button_include": "包含笔记 回车" + "button_include": "包含笔记" }, "info": { "modalTitle": "信息消息", diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json index 3c569017a..431dd0027 100644 --- a/apps/client/src/translations/de/translation.json +++ b/apps/client/src/translations/de/translation.json @@ -201,7 +201,7 @@ "box_size_small": "klein (~ 10 Zeilen)", "box_size_medium": "mittel (~ 30 Zeilen)", "box_size_full": "vollständig (Feld zeigt vollständigen Text)", - "button_include": "Notiz beifügen Eingabetaste" + "button_include": "Notiz beifügen" }, "info": { "modalTitle": "Infonachricht", diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index c17badf3e..491addf3c 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -203,7 +203,7 @@ "box_size_small": "small (~ 10 lines)", "box_size_medium": "medium (~ 30 lines)", "box_size_full": "full (box shows complete text)", - "button_include": "Include note enter" + "button_include": "Include note" }, "info": { "modalTitle": "Info message", diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json index 1e1119e2f..91095325f 100644 --- a/apps/client/src/translations/es/translation.json +++ b/apps/client/src/translations/es/translation.json @@ -202,7 +202,7 @@ "box_size_small": "pequeño (~ 10 líneas)", "box_size_medium": "medio (~ 30 líneas)", "box_size_full": "completo (el cuadro muestra el texto completo)", - "button_include": "Incluir nota Enter" + "button_include": "Incluir nota" }, "info": { "modalTitle": "Mensaje informativo", diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json index 6921f1cf5..0add71da1 100644 --- a/apps/client/src/translations/fr/translation.json +++ b/apps/client/src/translations/fr/translation.json @@ -201,7 +201,7 @@ "box_size_small": "petit (~ 10 lignes)", "box_size_medium": "moyen (~ 30 lignes)", "box_size_full": "complet (la boîte affiche le texte complet)", - "button_include": "Inclure une note Entrée" + "button_include": "Inclure une note" }, "info": { "modalTitle": "Message d'information", diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json index 8544428c5..2b1ba6db2 100644 --- a/apps/client/src/translations/ro/translation.json +++ b/apps/client/src/translations/ro/translation.json @@ -750,7 +750,7 @@ "box_size_medium": "mediu (~ 30 de rânduri)", "box_size_prompt": "Dimensiunea căsuței notiței incluse:", "box_size_small": "mică (~ 10 rânduri)", - "button_include": "Include notița Enter", + "button_include": "Include notița", "dialog_title": "Includere notița", "label_note": "Notiță", "placeholder_search": "căutați notița după denumirea ei", diff --git a/apps/client/src/translations/sr/translation.json b/apps/client/src/translations/sr/translation.json index 61ab6a8b2..1e5d8741c 100644 --- a/apps/client/src/translations/sr/translation.json +++ b/apps/client/src/translations/sr/translation.json @@ -203,7 +203,7 @@ "box_size_small": "mala (~ 10 redova)", "box_size_medium": "srednja (~ 30 redova)", "box_size_full": "puna (kutija prikazuje ceo tekst)", - "button_include": "Uključi belešku enter" + "button_include": "Uključi belešku" }, "info": { "modalTitle": "Informativna poruka", diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json index 9e43e775a..50daa3905 100644 --- a/apps/client/src/translations/tw/translation.json +++ b/apps/client/src/translations/tw/translation.json @@ -185,7 +185,7 @@ "box_size_small": "小型 (顯示大約10行)", "box_size_medium": "中型 (顯示大約30行)", "box_size_full": "完整顯示（完整文字框）", - "button_include": "包含筆記 Enter" + "button_include": "包含筆記" }, "info": { "modalTitle": "資訊消息", diff --git a/apps/client/src/widgets/dialogs/include_note.ts b/apps/client/src/widgets/dialogs/include_note.ts deleted file mode 100644 index 61b22a35b..000000000 --- a/apps/client/src/widgets/dialogs/include_note.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { t } from "../../services/i18n.js"; -import treeService from "../../services/tree.js"; -import noteAutocompleteService from "../../services/note_autocomplete.js"; -import froca from "../../services/froca.js"; -import BasicWidget from "../basic_widget.js"; -import { Modal } from "bootstrap"; -import type { EventData } from "../../components/app_context.js"; -import type EditableTextTypeWidget from "../type_widgets/editable_text.js"; -import { openDialog } from "../../services/dialog.js"; - -const TPL = /*html*/` -`; - -export default class IncludeNoteDialog extends BasicWidget { - - private modal!: bootstrap.Modal; - private $form!: JQuery; - private $autoComplete!: JQuery; - private textTypeWidget?: EditableTextTypeWidget; - - doRender() { - this.$widget = $(TPL); - this.modal = Modal.getOrCreateInstance(this.$widget[0]); - this.$form = this.$widget.find(".include-note-form"); - this.$autoComplete = this.$widget.find(".include-note-autocomplete"); - this.$form.on("submit", () => { - const notePath = this.$autoComplete.getSelectedNotePath(); - - if (notePath) { - this.modal.hide(); - this.includeNote(notePath); - } else { - logError("No noteId to include."); - } - - return false; - }); - } - - async showIncludeNoteDialogEvent({ textTypeWidget }: EventData<"showIncludeDialog">) { - this.textTypeWidget = textTypeWidget; - await this.refresh(); - openDialog(this.$widget); - - this.$autoComplete.trigger("focus").trigger("select"); // to be able to quickly remove entered text - } - - async refresh() { - this.$autoComplete.val(""); - noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, { - hideGoToSelectedNoteButton: true, - allowCreatingNotes: true - }); - noteAutocompleteService.showRecentNotes(this.$autoComplete); - } - - async includeNote(notePath: string) { - const noteId = treeService.getNoteIdFromUrl(notePath); - if (!noteId) { - return; - } - const note = await froca.getNote(noteId); - const boxSize = $("input[name='include-note-box-size']:checked").val() as string; - - if (["image", "canvas", "mermaid"].includes(note?.type ?? "")) { - // there's no benefit to use insert note functionlity for images, - // so we'll just add an IMG tag - this.textTypeWidget?.addImage(noteId); - } else { - this.textTypeWidget?.addIncludeNote(noteId, boxSize); - } - } -} diff --git a/apps/client/src/widgets/dialogs/include_note.tsx b/apps/client/src/widgets/dialogs/include_note.tsx new file mode 100644 index 000000000..ae78bab31 --- /dev/null +++ b/apps/client/src/widgets/dialogs/include_note.tsx @@ -0,0 +1,99 @@ +import { useRef, useState } from "preact/compat"; +import type { EventData } from "../../components/app_context"; +import { closeActiveDialog, openDialog } from "../../services/dialog"; +import { t } from "../../services/i18n"; +import FormGroup from "../react/FormGroup"; +import FormRadioGroup from "../react/FormRadioGroup"; +import Modal from "../react/Modal"; +import NoteAutocomplete from "../react/NoteAutocomplete"; +import ReactBasicWidget from "../react/ReactBasicWidget"; +import Button from "../react/Button"; +import note_autocomplete, { Suggestion } from "../../services/note_autocomplete"; +import tree from "../../services/tree"; +import froca from "../../services/froca"; +import EditableTextTypeWidget from "../type_widgets/editable_text"; + +interface IncludeNoteDialogProps { + textTypeWidget?: EditableTextTypeWidget; +} + +function IncludeNoteDialogComponent({ textTypeWidget }: IncludeNoteDialogProps) { + const [suggestion, setSuggestion] = useState(null); + const [boxSize, setBoxSize] = useState("medium"); + const inputRef = useRef(null); + + return (textTypeWidget && + { + inputRef.current?.focus(); + note_autocomplete.showRecentNotes($(inputRef.current!)); + }} + onSubmit={() => { + if (!suggestion?.notePath) { + return; + } + + closeActiveDialog(); + includeNote(suggestion.notePath, textTypeWidget); + }} + footer={ +