mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 15:49:00 +02:00
feat(react): port markdown_import partially
This commit is contained in:
Elian Doran
parent
4b1fd5e4a0
commit
77818d5453
@ -1,106 +0,0 @@
|
||||
import { t } from "../../services/i18n.js";
|
||||
import toastService from "../../services/toast.js";
|
||||
import utils from "../../services/utils.js";
|
||||
import appContext from "../../components/app_context.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
import shortcutService from "../../services/shortcuts.js";
|
||||
import server from "../../services/server.js";
|
||||
import { Modal } from "bootstrap";
|
||||
import { openDialog } from "../../services/dialog.js";
|
||||
|
||||
const TPL = /*html*/`
|
||||
<div class="markdown-import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">${t("markdown_import.dialog_title")}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("markdown_import.close")}"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>${t("markdown_import.modal_body_text")}</p>
|
||||
|
||||
<textarea class="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="markdown-import-button btn btn-primary">${t("markdown_import.import_button")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
interface RenderMarkdownResponse {
|
||||
htmlContent: string;
|
||||
}
|
||||
|
||||
export default class MarkdownImportDialog extends BasicWidget {
|
||||
|
||||
private lastOpenedTs: number;
|
||||
private modal!: bootstrap.Modal;
|
||||
private $importTextarea!: JQuery<HTMLElement>;
|
||||
private $importButton!: JQuery<HTMLElement>;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.lastOpenedTs = 0;
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.modal = Modal.getOrCreateInstance(this.$widget[0]);
|
||||
this.$importTextarea = this.$widget.find(".markdown-import-textarea");
|
||||
this.$importButton = this.$widget.find(".markdown-import-button");
|
||||
|
||||
this.$importButton.on("click", () => this.sendForm());
|
||||
|
||||
this.$widget.on("shown.bs.modal", () => this.$importTextarea.trigger("focus"));
|
||||
|
||||
shortcutService.bindElShortcut(this.$widget, "ctrl+return", () => this.sendForm());
|
||||
}
|
||||
|
||||
async convertMarkdownToHtml(markdownContent: string) {
|
||||
const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
|
||||
|
||||
const textEditor = await appContext.tabManager.getActiveContext()?.getTextEditor();
|
||||
if (!textEditor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewFragment = textEditor.data.processor.toView(htmlContent);
|
||||
const modelFragment = textEditor.data.toModel(viewFragment);
|
||||
|
||||
textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
|
||||
textEditor.editing.view.focus();
|
||||
|
||||
toastService.showMessage(t("markdown_import.import_success"));
|
||||
}
|
||||
|
||||
async pasteMarkdownIntoTextEvent() {
|
||||
await this.importMarkdownInlineEvent(); // BC with keyboard shortcuts command
|
||||
}
|
||||
|
||||
async importMarkdownInlineEvent() {
|
||||
if (appContext.tabManager.getActiveContextNoteType() !== "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const { clipboard } = utils.dynamicRequire("electron");
|
||||
const text = clipboard.readText();
|
||||
|
||||
this.convertMarkdownToHtml(text);
|
||||
} else {
|
||||
openDialog(this.$widget);
|
||||
}
|
||||
}
|
||||
|
||||
async sendForm() {
|
||||
const text = String(this.$importTextarea.val());
|
||||
|
||||
this.modal.hide();
|
||||
|
||||
await this.convertMarkdownToHtml(text);
|
||||
|
||||
this.$importTextarea.val("");
|
||||
}
|
||||
}
|
||||
82
apps/client/src/widgets/dialogs/markdown_import.tsx
Normal file
82
apps/client/src/widgets/dialogs/markdown_import.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { useRef, useState } from "preact/compat";
|
||||
import appContext from "../../components/app_context";
|
||||
import { closeActiveDialog, openDialog } from "../../services/dialog";
|
||||
import { t } from "../../services/i18n";
|
||||
import server from "../../services/server";
|
||||
import toast from "../../services/toast";
|
||||
import utils from "../../services/utils";
|
||||
import Modal from "../react/Modal";
|
||||
import ReactBasicWidget from "../react/ReactBasicWidget";
|
||||
|
||||
interface RenderMarkdownResponse {
|
||||
htmlContent: string;
|
||||
}
|
||||
|
||||
function MarkdownImportDialogComponent() {
|
||||
const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
|
||||
let [ text, setText ] = useState("");
|
||||
|
||||
async function sendForm() {
|
||||
await convertMarkdownToHtml(text);
|
||||
setText("");
|
||||
closeActiveDialog();
|
||||
}
|
||||
|
||||
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>}
|
||||
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>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default class MarkdownImportDialog extends ReactBasicWidget {
|
||||
|
||||
get component() {
|
||||
return <MarkdownImportDialogComponent />;
|
||||
}
|
||||
|
||||
async importMarkdownInlineEvent() {
|
||||
if (appContext.tabManager.getActiveContextNoteType() !== "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const { clipboard } = utils.dynamicRequire("electron");
|
||||
const text = clipboard.readText();
|
||||
|
||||
convertMarkdownToHtml(text);
|
||||
} else {
|
||||
openDialog(this.$widget);
|
||||
}
|
||||
}
|
||||
|
||||
async pasteMarkdownIntoTextEvent() {
|
||||
// BC with keyboard shortcuts command
|
||||
await this.importMarkdownInlineEvent();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function convertMarkdownToHtml(markdownContent: string) {
|
||||
const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
|
||||
|
||||
const textEditor = await appContext.tabManager.getActiveContext()?.getTextEditor();
|
||||
if (!textEditor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const viewFragment = textEditor.data.processor.toView(htmlContent);
|
||||
const modelFragment = textEditor.data.toModel(viewFragment);
|
||||
|
||||
textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
|
||||
textEditor.editing.view.focus();
|
||||
|
||||
toast.showMessage(t("markdown_import.import_success"));
|
||||
}
|
||||
@ -7,10 +7,11 @@ interface ModalProps {
|
||||
title: string;
|
||||
size: "lg" | "sm";
|
||||
children: ComponentChildren;
|
||||
footer?: ComponentChildren;
|
||||
onShown?: () => void;
|
||||
}
|
||||
|
||||
export default function Modal({ children, className, size, title, onShown }: ModalProps) {
|
||||
export default function Modal({ children, className, size, title, footer, onShown }: ModalProps) {
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
if (onShown) {
|
||||
@ -34,6 +35,12 @@ export default function Modal({ children, className, size, title, onShown }: Mod
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user