trilium/public/javascripts/note_editor.js

295 lines
8.2 KiB
JavaScript
Raw Normal View History

"use strict";
2017-11-05 05:54:27 +08:00
const noteEditor = (function() {
const noteTitleEl = $("#note-title");
const noteDetailEl = $('#note-detail');
2018-01-21 10:56:03 +08:00
const noteDetailCodeEl = $('#note-detail-code');
2018-01-24 12:41:22 +08:00
const noteDetailRenderEl = $('#note-detail-render');
const protectButton = $("#protect-button");
const unprotectButton = $("#unprotect-button");
2017-11-05 05:54:27 +08:00
const noteDetailWrapperEl = $("#note-detail-wrapper");
const noteIdDisplayEl = $("#note-id-display");
2017-12-02 23:37:12 +08:00
let editor = null;
2018-01-21 10:56:03 +08:00
let codeEditor = null;
2017-11-05 05:54:27 +08:00
let currentNote = null;
let noteChangeDisabled = false;
let isNoteChanged = false;
function getCurrentNote() {
return currentNote;
}
function getCurrentNoteId() {
2018-01-29 08:30:14 +08:00
return currentNote ? currentNote.detail.noteId : null;
2017-11-05 05:54:27 +08:00
}
function noteChanged() {
if (noteChangeDisabled) {
return;
}
isNoteChanged = true;
}
async function reload() {
// no saving here
await loadNoteToEditor(getCurrentNoteId());
}
async function switchToNote(noteId) {
if (getCurrentNoteId() !== noteId) {
await saveNoteIfChanged();
await loadNoteToEditor(noteId);
}
}
2017-11-05 05:54:27 +08:00
async function saveNoteIfChanged() {
if (!isNoteChanged) {
return;
}
const note = noteEditor.getCurrentNote();
updateNoteFromInputs(note);
await saveNoteToServer(note);
2018-01-29 08:30:14 +08:00
if (note.detail.isProtected) {
protected_session.touchProtectedSession();
}
2017-11-05 05:54:27 +08:00
}
function updateNoteFromInputs(note) {
if (note.detail.type === 'text') {
2018-01-29 08:30:14 +08:00
note.detail.content = editor.getData();
// if content is only tags/whitespace (typically <p>&nbsp;</p>), then just make it empty
// this is important when setting new note to code
2018-01-29 08:30:14 +08:00
if (jQuery(note.detail.content).text().trim() === '') {
note.detail.content = ''
}
}
else if (note.detail.type === 'code') {
2018-01-29 08:30:14 +08:00
note.detail.content = codeEditor.getValue();
}
2018-01-24 12:41:22 +08:00
else if (note.detail.type === 'render') {
// nothing
}
else {
throwError("Unrecognized type: " + note.detail.type);
}
2017-11-05 05:54:27 +08:00
const title = noteTitleEl.val();
2018-01-29 08:30:14 +08:00
note.detail.title = title;
2018-01-29 08:30:14 +08:00
noteTree.setNoteTitle(note.detail.noteId, title);
2017-11-05 05:54:27 +08:00
}
async function saveNoteToServer(note) {
2018-01-29 08:30:14 +08:00
await server.put('notes/' + note.detail.noteId, note);
2017-11-05 05:54:27 +08:00
isNoteChanged = false;
2017-11-09 11:33:08 +08:00
showMessage("Saved!");
2017-11-05 05:54:27 +08:00
}
function setNoteBackgroundIfProtected(note) {
2018-01-29 08:30:14 +08:00
const isProtected = !!note.detail.isProtected;
2017-11-05 05:54:27 +08:00
noteDetailWrapperEl.toggleClass("protected", isProtected);
protectButton.toggle(!isProtected);
unprotectButton.toggle(isProtected);
2017-11-05 05:54:27 +08:00
}
let isNewNoteCreated = false;
function newNoteCreated() {
isNewNoteCreated = true;
}
2017-11-05 05:54:27 +08:00
async function loadNoteToEditor(noteId) {
currentNote = await loadNote(noteId);
2017-11-05 05:54:27 +08:00
if (isNewNoteCreated) {
isNewNoteCreated = false;
2017-11-05 05:54:27 +08:00
noteTitleEl.focus().select();
}
noteIdDisplayEl.html(noteId);
2018-01-29 08:30:14 +08:00
await protected_session.ensureProtectedSession(currentNote.detail.isProtected, false);
2017-11-05 05:54:27 +08:00
2018-01-29 08:30:14 +08:00
if (currentNote.detail.isProtected) {
protected_session.touchProtectedSession();
}
// this might be important if we focused on protected note when not in protected note and we got a dialog
// to login, but we chose instead to come to another node - at that point the dialog is still visible and this will close it.
protected_session.ensureDialogIsClosed();
2017-11-05 05:54:27 +08:00
noteDetailWrapperEl.show();
noteChangeDisabled = true;
2018-01-29 08:30:14 +08:00
noteTitleEl.val(currentNote.detail.title);
noteType.setNoteType(currentNote.detail.type);
noteType.setNoteMime(currentNote.detail.mime);
2018-01-21 10:56:03 +08:00
if (currentNote.detail.type === 'text') {
// temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49
2018-01-29 08:30:14 +08:00
editor.setData(currentNote.detail.content ? currentNote.detail.content : "<p></p>");
2018-01-21 10:56:03 +08:00
noteDetailEl.show();
noteDetailCodeEl.hide();
noteDetailRenderEl.html('').hide();
2018-01-21 10:56:03 +08:00
}
else if (currentNote.detail.type === 'code') {
noteDetailEl.hide();
noteDetailCodeEl.show();
noteDetailRenderEl.html('').hide();
// this needs to happen after the element is shown, otherwise the editor won't be refresheds
2018-01-29 08:30:14 +08:00
codeEditor.setValue(currentNote.detail.content);
2018-01-23 12:07:04 +08:00
const info = CodeMirror.findModeByMIME(currentNote.detail.mime);
2018-01-24 08:51:16 +08:00
2018-01-23 12:07:04 +08:00
if (info) {
2018-01-24 08:51:16 +08:00
codeEditor.setOption("mode", info.mime);
CodeMirror.autoLoadMode(codeEditor, info.mode);
2018-01-23 12:07:04 +08:00
}
2018-01-21 10:56:03 +08:00
}
2018-01-24 12:41:22 +08:00
else if (currentNote.detail.type === 'render') {
noteDetailEl.hide();
noteDetailCodeEl.hide();
noteDetailRenderEl.html('').show();
2018-01-24 12:41:22 +08:00
const subTree = await server.get('script/subtree/' + getCurrentNoteId());
noteDetailRenderEl.html(subTree);
}
2018-01-21 10:56:03 +08:00
else {
throwError("Unrecognized type " + currentNote.detail.type);
}
2017-11-05 05:54:27 +08:00
noteChangeDisabled = false;
setNoteBackgroundIfProtected(currentNote);
noteTree.setNoteTreeBackgroundBasedOnProtectedStatus(noteId);
// after loading new note make sure editor is scrolled to the top
noteDetailWrapperEl.scrollTop(0);
2017-11-05 05:54:27 +08:00
}
async function loadNote(noteId) {
return await server.get('notes/' + noteId);
2017-11-05 05:54:27 +08:00
}
2017-12-03 02:54:16 +08:00
function getEditor() {
return editor;
}
function focus() {
const note = getCurrentNote();
if (note.detail.type === 'text') {
noteDetailEl.focus();
}
else if (note.detail.type === 'code') {
codeEditor.focus();
}
2018-01-24 12:41:22 +08:00
else if (note.detail.type === 'render') {
// do nothing
}
else {
throwError('Unrecognized type: ' + note.detail.type);
}
}
function getCurrentNoteType() {
const currentNote = getCurrentNote();
return currentNote ? currentNote.detail.type : null;
}
async function executeCurrentNote() {
if (getCurrentNoteType() === 'code') {
// make sure note is saved so we load latest changes
await saveNoteIfChanged();
const script = await server.get('script/subtree/' + getCurrentNoteId());
executeScript(script);
}
}
2017-11-05 05:54:27 +08:00
$(document).ready(() => {
noteTitleEl.on('input', () => {
noteChanged();
const title = noteTitleEl.val();
noteTree.setNoteTitle(getCurrentNoteId(), title);
});
2017-11-05 05:54:27 +08:00
2017-12-02 23:37:12 +08:00
BalloonEditor
.create(document.querySelector('#note-detail'), {
})
.then(edit => {
editor = edit;
editor.document.on('change', noteChanged);
2017-12-02 23:37:12 +08:00
})
.catch(error => {
console.error(error);
});
2017-11-05 05:54:27 +08:00
CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
CodeMirror.keyMap.default["Tab"] = "indentMore";
2018-01-23 12:07:04 +08:00
CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
2018-01-21 10:56:03 +08:00
codeEditor = CodeMirror($("#note-detail-code")[0], {
value: "",
viewportMargin: Infinity,
indentUnit: 4,
matchBrackets: true,
matchTags: { bothTags: true },
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false }
2018-01-21 10:56:03 +08:00
});
codeEditor.on('change', noteChanged);
2017-11-05 05:54:27 +08:00
// so that tab jumps from note title (which has tabindex 1)
2017-12-02 23:37:12 +08:00
noteDetailEl.attr("tabindex", 2);
2017-11-05 05:54:27 +08:00
});
$(document).bind('keydown', "ctrl+return", executeCurrentNote);
2017-11-05 05:54:27 +08:00
setInterval(saveNoteIfChanged, 5000);
return {
reload,
switchToNote,
2017-11-05 05:54:27 +08:00
saveNoteIfChanged,
updateNoteFromInputs,
saveNoteToServer,
setNoteBackgroundIfProtected,
2017-11-05 05:54:27 +08:00
loadNote,
getCurrentNote,
getCurrentNoteType,
2017-11-05 05:54:27 +08:00
getCurrentNoteId,
2017-12-03 02:54:16 +08:00
newNoteCreated,
getEditor,
focus,
executeCurrentNote
2017-11-05 05:54:27 +08:00
};
})();