New WYSIWYG Editor: Beta Testing Feedback

[ssddanbrown]

This is a thread specifically to collect feedback regarding issues and limitations of the new WYSIWYG editor, introduced in BookStack v24.10, during its beta phase which starts as of BookStack v25.05. This follows on from thread #5245.

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

• Switching editor to new editor with bold text can lead to double-bold. ref.
• Text formats can carry across to below non-formatted existing lines. ref
• Videos/Embeds
  • Can't re-edit embed code. ref
  • Can't control dimensions after insert. ref

Related PRs

• Lexical Fixes for v25.05.1 #5653

[joshhcd]

1. One thing that I recently added to our instance was the PDF embedding script - I haven't tried to modify the script to function on the new editor, but there is currently no way to embed a PDF into the page. Maybe their file import/export feature? though I haven't tried this.

2. Another thing that we like to use (though I will note, it's not officially supported, but with a small code tweak, you can add the functionality to the original wysiwyg editor) is the alphabet bullet list. While I understand it's not officially supported, the sheer capabilities of tinymce allow extended customization that BookStack does not include out of the box.

Lexical does not currently support more than 3 out of the box solutions as sited in this issue.
facebook/lexical#6327

3. Lastly, assuming that the choice to add lexical is inevitable regardless of issues, can we look into including more out of the box functions through their addons and plugins? Such as dragon naturally speaking,

[ssddanbrown]

@joshhcd

1. PDFs could technically be embedded via iframe/embed/object elements, which we do support in the new editor. This is something we could make easier (like we do for adding video attachments), but official support for that is outside the scope of this thread. I have not yet exposed any internals for customization/extensibility, that is probably something I start to plan out later in this beta stage, to emulate some of the common abilities of the TinyMCE editor.

2. As above in regards to extensibility, although some of this may be achievable via css and external customization (especially as this is just a visual/style difference to ordered lists, which we do support). I wouldn't consider too much about what Lexical supports for the reasons stated in the next point.

3. I would not look to add more for the sake of it showing in lexical examples or the list of available modules. If there's reason to add something that can be raised via it's own worth/need, otherwise the scope will remain limited. With lexical, what you might see in their example is not things we have, or can directly, use. I have forked some core parts of the editor. All of the UI, many of the format types and much of the behaviour has been written custom from scratch by me, to emulate our existing editor as best as possible while not having to rely on the same frameworks/libraries (like React) which they use within their ready-provided implementations. I've also made customizations to the core elements as part of our fork. This is quite a different and extensive approach compared to what we had with TinyMCE, giving us more control (at the cost of maintenance and effort), but it does mean that much of what you may see elsewhere with lexical is irrelevant, at least relative to how you might have previously referred to TinyMCE guidance for prior options/customization/extension since we worked upon a standard provided library as-is there.

[svennd]

Since this is still in "beta", are feature requests possible ?

• inline code (perhaps its already possible)
• de code button as one of the default buttons ? (or make this a setting?)

Our use case includes allot of system paths, code snippets and configuration examples, therefor we use it way more then for example aligning center/right/justify.

[ssddanbrown]

@svennd Inline code is already possible via a button in the overflow of the inline formats menu (or alternatively via shortcut):

The purpose of the current phase is to match the existing editor, I'm not looking to move things around or add features but we can think about that in the future after the default editor switch has occurred.

[PancakeZik]

Hey Dan, I just found a styling bug (at least to my eyes it's a bug):
If you make a regular paragraph bold, in the old editor, the font-weight is "bold".
But if you switch to the new WYSIWYG beta, if you save the page marked as bold, the font-weight is "bolder", which IMO doesn't look as nice.

Details

New editor:

Old editor:

[virtadpt]

A thing that has now gotten in my way more times than not using the new editor:

• I type some text. Call it line 1.
• I hit enter to force a new line to type on. Call it line 2.
• I go back and highlight the text on line 1 and format it somehow (code, bold, italic).
• I cursor back down to line 2 and type something.
• The formatting that I thought I isolated to line 1 still applies to line 2.

The fix has been to go back to the old editor because it keeps tripping me up taking notes in class.

[AGARES2101]

Issue with Video Editing in BookStack (New WYSIWYG vs Old WYSIWYG)

Details

Problem Description

When adding a video in BookStack using the New WYSIWYG editor, I encounter the following limitations:

1. Inability to edit the video's HTML code after insertion
2. Lack of control over video dimensions (width/height)
3. Need to completely delete and reinsert the video script to change width/height

In contrast, the Old WYSIWYG editor allows:

• Freely editing the video's HTML code
• Easily modifying dimensions (width/height)
• Supporting more insertion parameters

Steps to Reproduce the Issue

1. Enable the New WYSIWYG editor (Settings → Features)

2. Add a video using the "Insert/Edit Media" button

3. Attempt to modify the video parameters after insertion

Expected Behavior

The editor should allow:

• Editing video parameters after insertion
• Modifying dimensions (width/height)
• Directly modifying the HTML code

Current Behavior (New WYSIWYG)

1. Video parameters cannot be changed after insertion
2. No access to the video's HTML code
3. To make changes, the video must be deleted and reinserted

[annie-things]

I understand the issue of font editing has been addressed, and while I personally don't have an issue with custom css, the omission of a font and font size selector in the editing toolbar/ribbon threw me at first and I don't doubt has put a lot of potential users off. Surely more important to be easily accessible than bold, italic, and underline buttons, the keyboard shortcuts of which are much more widely known than how to import a custom font or change its size in CSS. If compatibility is the issue, im sure a selection of standard websafe fonts would be adequate.

[ssddanbrown]

Thanks @PancakeZik @virtadpt @AGARES2101, Have added these to be tested and addressed.

@annie-things Thanks for the input but that's outside the scope of this thread. There a prior related issues in #3330 and #1148.

[ssddanbrown]

@PancakeZik Just as a warning, the double/extra bold will be addressed for the next patch release, but existing saved content may stay double-bold until re-edited & saved in the editor (should fix itself when content is opened in editor).