(Bug report) Hide right-panel while all widgets Hidden

[ysslang]

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.

/*
 * This defines a custom widget which render current mardown 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.
 */
typeof marked === 'undefined' && $("head").append($("<script></script>").attr("src", "https://cdn.jsdelivr.net/npm/marked/marked.min.js"));
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() {
        debugger;
        this.$widget = $(TPL);
        this.$preview = this.$widget.find('#markdown-preview');
        return this.$widget;
    }

    async refreshWithNote(note) {
        if (note.type !== 'code' || note.mime !== "text/x-markdown" || !note.hasLabel('markdownPreview')) { 
            // show widget only on text notes and when marked with 'markdownPreview' label
            this.toggleInt(false); // hide
            if(this.parent.children.filter(w => !w.componentId.includes('MarkdownPreviewWidget')).length == 0) 
                this.parent.toggleInt(false);  // if right-panel only has MarkdownPreviewWidget, hide right-panel too;
            return;
        }
        this.toggleInt(true); // display
        const {content} = await note.getNoteComplement();
        const result = marked.parse(content);
        this.$preview.html(result);
        }

    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new MarkdownPreviewWidget();

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.

[ysslang]

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.

[ysslang]

some screenshots edit anything

[zadam]

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()) {
...
}

[rebron1900]

这是一个MD插件吗。

[ysslang]

@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();

[rebron1900]

@ysslang 有兴趣完善下我那个TOC吗，我技术水平不太行