mirror of
https://github.com/zadam/trilium.git
synced 2025-02-25 07:25:32 +08:00
converted markdown import dialog to new pattern
This commit is contained in:
zadam
parent
36c210d0dd
commit
3255607b09
7 changed files with 97 additions and 90 deletions
|
|
@ -1,62 +0,0 @@
|
|||
import libraryLoader from "../services/library_loader.js";
|
||||
import toastService from "../services/toast.js";
|
||||
import utils from "../services/utils.js";
|
||||
import appContext from "../services/app_context.js";
|
||||
|
||||
const $dialog = $('#markdown-import-dialog');
|
||||
const $importTextarea = $('#markdown-import-textarea');
|
||||
const $importButton = $('#markdown-import-button');
|
||||
|
||||
async function convertMarkdownToHtml(text) {
|
||||
await libraryLoader.requireLibrary(libraryLoader.COMMONMARK);
|
||||
|
||||
const reader = new commonmark.Parser();
|
||||
const writer = new commonmark.HtmlRenderer();
|
||||
const parsed = reader.parse(text);
|
||||
|
||||
const result = writer.render(parsed);
|
||||
|
||||
appContext.triggerCommand('executeWithTextEditor', {
|
||||
callback: textEditor => {
|
||||
const viewFragment = textEditor.data.processor.toView(result);
|
||||
const modelFragment = textEditor.data.toModel(viewFragment);
|
||||
|
||||
textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
|
||||
|
||||
toastService.showMessage("Markdown content has been imported into the document.");
|
||||
},
|
||||
ntxId: this.ntxId
|
||||
});
|
||||
}
|
||||
|
||||
export async function importMarkdownInline() {
|
||||
if (appContext.tabManager.getActiveContextNoteType() !== 'text') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const {clipboard} = utils.dynamicRequire('electron');
|
||||
const text = clipboard.readText();
|
||||
|
||||
convertMarkdownToHtml(text);
|
||||
}
|
||||
else {
|
||||
utils.openDialog($dialog);
|
||||
}
|
||||
}
|
||||
|
||||
async function sendForm() {
|
||||
const text = $importTextarea.val();
|
||||
|
||||
$dialog.modal('hide');
|
||||
|
||||
await convertMarkdownToHtml(text);
|
||||
|
||||
$importTextarea.val('');
|
||||
}
|
||||
|
||||
$importButton.on('click', sendForm);
|
||||
|
||||
$dialog.on('shown.bs.modal', () => $importTextarea.trigger('focus'));
|
||||
|
||||
utils.bindElShortcut($dialog, 'ctrl+return', sendForm);
|
||||
|
|
@ -67,6 +67,7 @@ import CloneToDialog from "../widgets/dialogs/clone_to.js";
|
|||
import MoveToDialog from "../widgets/dialogs/move_to.js";
|
||||
import ImportDialog from "../widgets/dialogs/import.js";
|
||||
import ExportDialog from "../widgets/dialogs/export.js";
|
||||
import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
|
||||
|
||||
export default class DesktopLayout {
|
||||
constructor(customWidgets) {
|
||||
|
|
@ -208,6 +209,7 @@ export default class DesktopLayout {
|
|||
.child(new CloneToDialog())
|
||||
.child(new MoveToDialog())
|
||||
.child(new ImportDialog())
|
||||
.child(new ExportDialog());
|
||||
.child(new ExportDialog())
|
||||
.child(new MarkdownImportDialog());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,11 +23,7 @@ function setupGlobs() {
|
|||
window.glob.treeCache = froca; // compatibility for CKEditor builds for a while
|
||||
|
||||
// for CKEditor integration (button on block toolbar)
|
||||
window.glob.importMarkdownInline = async () => {
|
||||
const dialog = await import("../dialogs/markdown_import.js");
|
||||
|
||||
dialog.importMarkdownInline();
|
||||
};
|
||||
window.glob.importMarkdownInline = async () => appContext.triggerCommand("importMarkdownInline");
|
||||
|
||||
window.glob.SEARCH_HELP_TEXT = `
|
||||
<strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default class RootCommandExecutor extends Component {
|
|||
}
|
||||
|
||||
pasteMarkdownIntoTextCommand() {
|
||||
import("../dialogs/markdown_import.js").then(d => d.importMarkdownInline());
|
||||
import("../widgets/dialogs/markdown_import.js").then(d => d.importMarkdownInline());
|
||||
}
|
||||
|
||||
editReadOnlyNoteCommand() {
|
||||
|
|
|
|||
92
src/public/app/widgets/dialogs/markdown_import.js
Normal file
92
src/public/app/widgets/dialogs/markdown_import.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import libraryLoader from "../../services/library_loader.js";
|
||||
import toastService from "../../services/toast.js";
|
||||
import utils from "../../services/utils.js";
|
||||
import appContext from "../../services/app_context.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<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">Markdown import</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>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</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">Import <kbd>Ctrl+Enter</kbd></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class MarkdownImportDialog extends BasicWidget {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.lastOpenedTs = 0;
|
||||
}
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
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'));
|
||||
|
||||
utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.sendForm());
|
||||
}
|
||||
|
||||
async convertMarkdownToHtml(text) {
|
||||
await libraryLoader.requireLibrary(libraryLoader.COMMONMARK);
|
||||
|
||||
const reader = new commonmark.Parser();
|
||||
const writer = new commonmark.HtmlRenderer();
|
||||
const parsed = reader.parse(text);
|
||||
|
||||
const result = writer.render(parsed);
|
||||
|
||||
const textEditor = await appContext.tabManager.getActiveContext().getTextEditor();
|
||||
|
||||
const viewFragment = textEditor.data.processor.toView(result);
|
||||
const modelFragment = textEditor.data.toModel(viewFragment);
|
||||
|
||||
textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
|
||||
|
||||
toastService.showMessage("Markdown content has been imported into the document.");
|
||||
}
|
||||
|
||||
async importMarkdownInlineEvent() {
|
||||
if (appContext.tabManager.getActiveContextNoteType() !== 'text') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.isElectron()) {
|
||||
const {clipboard} = utils.dynamicRequire('electron');
|
||||
const text = clipboard.readText();
|
||||
|
||||
this.convertMarkdownToHtml(text);
|
||||
}
|
||||
else {
|
||||
utils.openDialog(this.$widget);
|
||||
}
|
||||
}
|
||||
|
||||
async sendForm() {
|
||||
const text = this.$importTextarea.val();
|
||||
|
||||
this.$widget.modal('hide');
|
||||
|
||||
await this.convertMarkdownToHtml(text);
|
||||
|
||||
this.$importTextarea.val('');
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
|
||||
<%- include('dialogs/markdown_import.ejs') %>
|
||||
<%- include('dialogs/note_revisions.ejs') %>
|
||||
<%- include('dialogs/options.ejs') %>
|
||||
<%- include('dialogs/protected_session_password.ejs') %>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<div id="markdown-import-dialog" class="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">Markdown import</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>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</p>
|
||||
|
||||
<textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="markdown-import-button" class="btn btn-primary">Import <kbd>Ctrl+Enter</kbd></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue