Closed ysslang closed 2 years ago
Oh, I forgot to say. Most of recent release are awesome.
I really really love the new UX. And the sharing ability is a milestone. I can finally move or my notes workflow to Trilium.
Thanks for your awesome work.
some screenshots edit anything
Hi, the missing link is implemented method isEnabled
:
isEnabled() {
return super.isEnabled() && [your custom logic];
}
If this returns false and there's no other widget then the right panel will hide.
BTW, Is there any api or official way to check note isEditable? Didn't find any clue after an hour searching.
This is not documented, but you can check easily (within the widget) with:
if (await this.noteContext.isReadOnly()) {
...
}
这是一个MD插件吗。
@zadam Thanks. It works totally fine right now.
@QingShui23 是的, 自己写的一个MD预览插件. 目前正常可用了. 分享的页面还不支持预览md, 因为限制了不允许执行js.
/*
* This defines a custom widget which render current markdown note.
* To be activated for a given note, add label 'markdownPreview' to the note, you can also make it inheritable and thus activate it for the whole subtree.
*/
if(!$('#markdown-preview-marked-js').length) $('head').append($('<script id="markdown-preview-marked-js" ></script>').attr('src', 'https://cdn.jsdelivr.net/npm/marked/marked.min.js'));
if(!$('#markdown-preview-dark-css').length) $("head").append($('<link id="markdown-preview-dark-css" rel="stylesheet" type="text/css"></link>').attr('href', 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-dark.min.css'));
const cssBlock = `
#right-pane > #markdown-preview-widget {
padding: 0 10px;
}
`
const TPL = `<div><div id="markdown-preview"></div></div>`;
class MarkdownPreviewWidget extends api.NoteContextAwareWidget {
get position() { return 500; } // higher value means position towards the bottom/right
get parentWidget() { return 'right-pane'; }
doRender() {
this.$widget = $(TPL);
this.$preview = this.$widget.find('#markdown-preview');
this.id('markdown-preview-widget');
this.class('markdown-body');
this.cssBlock(cssBlock);
return this.$widget;
}
isEnabled() {
return super.isEnabled() && this.noteContext.note.type === 'code' && this.noteContext.note.mime === "text/x-markdown" && this.noteContext.note.hasLabel('markdownPreview')
}
async refreshWithNote(note) {
const { content } = await note.getNoteComplement();
const result = marked.parse(content, {breaks: true});
this.$preview.html(result);
}
async entitiesReloadedEvent({ loadResults }) {
if (loadResults.isNoteContentReloaded(this.noteId)) {
this.refresh();
}
}
}
module.exports = new MarkdownPreviewWidget();
@ysslang 有兴趣完善下我那个TOC吗,我技术水平不太行
Trilium Version
0.49.1-beta
What operating system are you using?
Other (specify below)
What is your setup?
Server access only
Operating System Version
Official docker image 0.49.1-beta
Description
Recently I implement a markdown preview widget. It will render current note which has a
markdownPreview
attribute in the right panel. And hide widget while notes don't have such attribute or are not markdown type. However, while all widgets go hidden, The right-panel area still shows.This is my widget Code.
In the hide rule block, I add a snippet to hide right-panel. But it only works After I edit the content of current note.
So, Is there Any better way to hide the right-panel? Or maybe you could check whether right-panel need to be hide any time toggleInt method got triggered on the main release?
BTW, Is there any api or official way to check note isEditable? Didn't find any clue after an hour searching. For better looking, while note is Read-only, I want to render widget result on center-panel area, replace origin note content, instead of right-panel.