The position of the editor shifts with SideToc plugin @v5.6.8-beta2

Issues
1

Bug report

The position of the editor shifts with SideToc plugin.

edit mode

img1
img11427×477 243 KB

preview mode

img2
img21436×477 223 KB

It can be circumvented, though not perfectly, with the following logic

componentDidUpdate() {
      const mdeLayout = document.querySelector(".mde-layout")!;
      const editor = document.querySelector<HTMLDivElement>(".editor")!;
      editor.style.width = mdeLayout.clientWidth - Settings.currentWidth + "px";
}

※ Settings is Sidetoc’s class.

Is there a way to resolve this on the plugin side?

In Japanese

SideToc plugin にて
inkdrop.layouts.insertComponentToLayoutAfter(layoutName, "Editor", componentName);
で差し込んだ領域を使って段落を表示していますが
5.8.2 beta2 になってから editor の位置が左にずれるようになりました。

Environment

  • Platform: macOS/Windows
  • Platform version: macOS Sonoma 14.4/windows11
  • App Version:5.6.8-beta2

How to reproduce

ipm install sidetoc

2

Hi Shimizu-san,

Thanks for the report. I could reproduce this.
I think it can be avoided by setting min-width: 0px instead of having width: 100% on .editor like so:

.editor {
/* width: 100%; */
    min-width: 0px;
}

I’ll fix it in the next release!

1 Like
3

I have confirmed the improvements with the specified style settings.
Thank you.

1 Like