New WYSIWYG Editor: Share feedback & issues here

[ssddanbrown]

This is a thread specifically to collect feedback regarding issues and limitations of the new WYSIWYG editor, introduced in BookStack v24.10.

This below list will be continuously updated from feedback to form a full listing to be worked on. Please only report issues where not already in this list. Generally our goal is to match the existing TinyMCE based editor as close as possible.

Known Issues

• [ ] UI does not adapt for mobile.
• [ ] No dark mode support.
• [ ] No color picker for color controls or color form fields.
• [ ] No table caption text support.
• [ ] "About" button/view not implemented.
• [ ] No URL autolinking ref
• [ ] Lacking media src conversions.
• Lists:
  • [ ] Tab on empty list item does not change level ref
  • [ ] Enter on empty nested list item creates new items instead of jumping out of nesting ref
  • [ ] Outdenting item moves it to end of parent instead of remaining in-place ref.
  • [ ] Selection is moved/expanded on indent/outdent ref.

[AvrumFeldman]

@ssddanbrown I would love to test it out, but I don't see yet any v24.10 release.

[ssddanbrown]

@AvrumFeldman I'm just preparing its release now, for later this week (Created this so I could link to it from the update blogpost)

[koen-divtag]

Bookstack v24.10 released a few hours age and i unfortunately found a bug. Not sure if i had to post it here so ill post the link: https://github.com/BookStackApp/BookStack/issues/5249.

[thegatesdev]

I found a few differences in the way lists are handled:

1. Pressing TAB (or SHIFT TAB) on an empty list item does not change the list level. Reproduce by creating a bullet or numbered list and pressing TAB. Old behaviour was that TAB and SHIFT TAB increased or decreased the level for the item respectively.
2. Pressing ENTER on an empty list item if the level is higher than one will not decease the level, but create a new item on the same level. Reproduce by creating a list, insert 1 item and increase the level with TAB, then keep pressing enter. Old behaviour was that ENTER on an empty item would decrease the level.
3. Decreasing the level of an item in the middle of a list puts it after the current list. Reproduce by creating a list with 3 items, selecting the middle item and decreasing the level. Old and new behaviour in the images:
4. Pressing ENTER on an item that is not empty, but only has spaces, deletes the item (except for levels higher than one, because of issue 2.) Reproduce by creating a list, insert 1 item, enter a couple spaces and press ENTER. Old behaviour was that items with spaces are kept.
5. Increasing the list level of an item directly after an empty (or only spaces) item deletes the previous item (but keeps any space content). Reproduce by creating a list with 3 items, empty the middle item, then increase the level of the last item. Old behaviour allowed empty list items if they were emptied afterwards, and didn't delete them. Also see images:
6. Whole text gets selected when increasing / decreasing level. Old behaviour kept the cursor or selection placement in the list item contents.

This wasn't supposed to be only about lists, but here we are.

[miracuruzrh]

Hi @ssddanbrown First of all, thank you very much for your work. I started watching the release video but haven't managed to finish it yet. It is possible that it has already been mentioned there.

1. When entering a link in the new editor and hit return or shift return, the link stays as it is. The old editor with tinymce had automatically changed urls into clickable links.
2. The editor together with the dark theme is still on the light mode and kind of hard readable.

I have also a question. I was able to customize the buttons with the old tinymce version. For this, I had added this line into the customization: <script src="/js/custom.js"></script> and added in the corresponding directory my code to add a "clear format" button on the top level menu and also to add a shortcut ctrl+shift+u for clear format. Hopefully, this feature will also be implemented to customize the new editor buttons, if needed? It would be very nice, to have this feature also in the future to customize the editor.

Here's my code which I have used to modify the buttons:

window.addEventListener("editor-tinymce::pre-init", (event) => {
  const mceConfig = event.detail.config;
  mceConfig.toolbar += " clearformat";
});

window.addEventListener("editor-tinymce::setup", (event) => {
  const editor = event.detail.editor;

  // Registriere das Icon mit validiertem SVG-Code
  editor.ui.registry.addIcon(
    "clearformaticon",
    `<svg xmlns="http://www.w3.org/2000/svg"
      width="24" height="24"
      viewBox="0 0 496 496" xml:space="preserve">
      fill="currentColor">
    
      <path style="fill:#DD3E95;" d="M363.6,224V37.6C363.6,15.2,348.4,0,326,0H169.2c-22.4,0-37.6,15.2-37.6,37.6V224H363.6z"/>
      <path style="fill:#BC086B;" d="M131.6,224h232V37.6C363.6,15.2,348.4,0,326,0H179.6"/>
      <path style="fill:#2F96C9;" d="M131.6,272v186.4c0,22.4,23.2,37.6,45.6,37.6h149.6c22.4,0,37.6-15.2,37.6-37.6V272H131.6z"/>
      <path style="fill:#207EB7;" d="M181.2,272l-49.6,186.4c0,22.4,23.2,37.6,45.6,37.6h149.6c22.4,0,37.6-15.2,37.6-37.6V272H181.2z"/>
      <rect x="131.6" y="224" style="fill:#FFFFFF;" width="232" height="48"/>
      <rect x="179.6" y="224" style="fill:#EFE6D8;" width="184" height="48"/>
      <rect x="275.6" y="224" style="fill:#DDD3C5;" width="88" height="48"/>
      <path style="fill:#095A91;" d="M179.6,272v224H326c22.4,0,37.6-15.2,37.6-37.6V272H179.6z"/>
      <path style="fill:#044D7F;" d="M179.6,496H326c22.4,0,37.6-15.2,37.6-37.6V272"/>
      <path style="fill:#911743;" d="M326,0H179.6v224h184V37.6C363.6,15.2,348.4,0,326,0z"/>
      <polyline style="fill:#7F113E;" points="179.6,224 363.6,224 363.6,40 "/>

      </svg>`
  );

  // Füge den Button hinzu
  editor.ui.registry.addButton("clearformat", {
    tooltip: "Formatierung entfernen (Ctrl/Cmd+Alt+U)",
    icon: "clearformaticon",
    onAction() {
      editor.execCommand("RemoveFormat");
    },
  });

  // Shortcuts hinzufügen
  editor.addShortcut("ctrl+alt+u", "Formatierung entfernen", () => {
    editor.execCommand("RemoveFormat");
  });

  // macOS
  editor.addShortcut("meta+alt+u", "Formatierung entfernen", () => {
    editor.execCommand("RemoveFormat");
  });
});

[ssddanbrown]

@thegatesdev Thanks, lists are deceivingly complex :sweat_smile:

Do you have a use-case/need for empty (space only) lists? Just thinking on the balance of matching the new editor, vs potential convenience in treating whitespace only items as empty.

---

@miracuruzrh Thanks! Had meant to note the lack of dark mode support but had forgotten by release!

In regard to customizations/hacking, that's not something I'm considering right now in the earlier alpha/beta stages, but maybe it's something that can be discussed in the later stages toward when it's becoming the default, when internals/development has stabilised a bit.

[thegatesdev]

Do you have a use-case/need for empty (space only) lists?

One use-case I can think of is when using numbered lists, when writing content from elsewhere that is already numbered, you can skip one entry (for later) by leaving it empty and preserving the numbering for the next. Since it's basically the standard behaviour (both in Office 365 and Google Docs) I feel like keeping this would be nicer for the user.

lists are deceivingly complex

I realized that while testing, best of luck with the implementation 🙏🏼 🥲

[miracuruzrh]

@thegatesdev Thanks, lists are deceivingly complex 😅

Do you have a use-case/need for empty (space only) lists? Just thinking on the balance of matching the new editor, vs potential convenience in treating whitespace only items as empty.

@miracuruzrh Thanks! Had meant to note the lack of dark mode support but had forgotten by release!

In regard to customizations/hacking, that's not something I'm considering right now in the earlier alpha/beta stages, but maybe it's something that can be discussed in the later stages toward when it's becoming the default, when internals/development has stabilised a bit.

Hi @ssddanbrown Many thanks for your reply. Sure, I fully understand. Important things first. If needed, we can always go back to the earlier editor.

[beanaroo]

Hi Dan, you may already be aware of this regarding collapsible blocks:

• Unable to insert new content after/outside of the block.
• It's not clear how to change the label
• Header background is a different colour

Migrated Page

New Page

---

Additionally (These may be better suited as a dedicated feature requests),

I've really been enjoying Confluence's latest editor whereby you can use Markdown shortcuts as you type.

• Starting a line with #<space> automatically converts it to Heading 1
• --- inserts a horizontal rule
• ``` creates a code block

Separately, the / to list and search for page components is quite useful too.

[ttepatti]

Hello! To echo the comment from @beanaroo above, I would love to see shortcuts that are a hybrid between typing raw markdown and using the WYSIWYG editor, in the same way that typing an asterisk before a line will automatically convert it into a list.

I think having the following markdown-style shortcuts would be extremely helpful:

• Typing backticks around a word to transform it into inline code (the same as TinyMCE's shortcut "meta+8")
  • Example: `hello` becomes hello
  • This is by far my biggest current slowdown when editing in BookStack, as I often document variable names and file paths that I would prefer to be monospaced
• Typing three backticks (```) and pressing enter to create a new code block (the same as TinyMCE's shortcut "meta+7")
• Typing three horizontal dashes (---) and pressing enter to create a horizontal rule
• Typing a hash mark (#) and a space to convert the current line into a heading
  • Additionally, many markdown editors support that # = H1, ## = H2, ### = H3, etc.

[ssddanbrown]

Thanks @beanaroo, have added those notes regarding collapse block issues.

@beanaroo @ttepatti I consider new functionality outside the scope of this issue, and in regard to markdown based auto-conversion/formatting specifically, this has been touched upon previously in #2025 and my feelings are much the same. Would be more open to making that kind of thing possible via an unofficial hack, once the editor is more stable/mature.

[dallyger]

When switching from the old editor or from the markdown editor, task lists are converted to bullet lists. Switching them to a task list is easy (simply click the task list button again and it converts) but this would be a nice improvement. This is something I do regularly. Create new pages in markdown (I find it easier in general) but then switch to the WYSIWYG so others can make edits too.

[dallyger]

• Ctrl+S does not save draft although the toast notification saying otherwise.
• Ctrl+Return does not save page although the toast notification saying otherwise.

[3ma-TSI]

Hi,

I’d like to highlight some ergonomic issues with the new WYSIWYG editor compared to the previous version with the TinyMCE editor.

Details

Difficulty adding content before an image : Actual Editor : New Editor :

Another example with a table and an image : Actual Editor : New Editor :

It is impossible to resize columns of a table: Actual Editor : New Editor :

Browsers tested: Firefox (128.6.0) Chrome (132)

These issues make it challenging to manage layouts effectively.

Thank you for your attention to this matter.

Best regards,

[Hallsie]

When clicking a menu button on the new WYSIWYG editor, if you leave any of either the button or the menu that opens, it all closes out. The old editor, it would stay put until either you clicked off of the menu or you clicked on an item in the menu.

I cannot take a screencap or I would.

[Hallsie]

Yes! That is it. I don't see your comment in the thread though. Not sure how to see it. That is it though.

On Thu, Mar 13, 2025 at 9:47 AM Tim @.***> wrote:

@Hallsie https://github.com/Hallsie I think this is what you mean: (Oops, give me a second, wrong encoding)

https://github.com/user-attachments/assets/e649d075-2758-4714-908d-5f9baabd807d

— Reply to this email directly, view it on GitHub https://github.com/BookStackApp/BookStack/issues/5245#issuecomment-2721321374, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGBRIX3PFBEGJWXJ6F6HNWL2UGD6LAVCNFSM6AAAAABPP2LD3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMRRGMZDCMZXGQ . You are receiving this because you were mentioned.Message ID: @.***> [image: thegatesdev]thegatesdev left a comment (BookStackApp/BookStack#5245) https://github.com/BookStackApp/BookStack/issues/5245#issuecomment-2721321374

@Hallsie https://github.com/Hallsie I think this is what you mean: (Oops, give me a second, wrong encoding)

https://github.com/user-attachments/assets/e649d075-2758-4714-908d-5f9baabd807d

— Reply to this email directly, view it on GitHub https://github.com/BookStackApp/BookStack/issues/5245#issuecomment-2721321374, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGBRIX3PFBEGJWXJ6F6HNWL2UGD6LAVCNFSM6AAAAABPP2LD3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMRRGMZDCMZXGQ . You are receiving this because you were mentioned.Message ID: @.***>

[thegatesdev]

Haha, sorry the first part of the screen recording was broken for me, and I couldn't fix it in time. That is why I deleted the comment. I'll record it again today.

[thegatesdev]

Here we go:

https://github.com/user-attachments/assets/c424b5af-2b40-4818-9a56-20ae948a217d

[imlwhite]

It's great to see auto linking is back - is there any chance we can get automatic insertion of images from links? It used to be a feature of the last editor, and the process now to insert an external hotlinked image is a little convoluted (insert an uploaded image from the gallery first, then change the URL). Being able to paste the link right in would help.

[ssddanbrown]

Sorry, got a bit behind in keeping up with additions.

Thanks @imlwhite, @thegatesdev, @Hallsie, @3ma-TSI, @dallyger for reporting this. All added to the list to address.

@dallyger In regards to saving, I've noticed this too sometimes during testing but never been able to nail down replication. I'll have a full review of the saving mechanics.

@imlwhite I wasn't even aware that was a feature! I've added to to the list, but I may come up with an alternative middle ground, to make using external links easier, but without the auto-convert, just to avoid users being potentially misled thinking that the image is somehow uploaded safely into BookStack (like it would be for pasting actual image data/files).

[LeeWhite187]

Not sure if this is the proper location for asking about editor issues. I'm enjoying BookStack. Got a question about the editor, to see if I'm not using it properly. Is there an intended reason for the numbered list to reset or change to an unintuitive list value?

For example. Is there a way to intersperse an Informational Callout within a numbered list, without resetting the list?

Or, am I missing a command or workaround, to keep the numbered list from skewing into disconnected ranges around Information callouts, like the ones from this page excerpt?:

Any ideas what I'm doing wrong?

[ssddanbrown]

@LeeWhite187 That is not a feature we specifically support. Feel free to request it via a new feature request issue. I'm going to hide your comment though since it's not relevant to this specific thread.

[ssddanbrown]

Thank you everyone for the feedback so far! Your testing has been super useful since otherwise I'm kinda on my own attempting to find issues and have limited insight into how stable folks are finding things.

As of the next feature release I'm moving on the editor to beta status, and also starting a new fresh thread for this phase in #5631. Therefore I'm going to now close this off.

Please provide future feedback via #5631.