New WYSIWYG Editor: Beta Testing Feedback #5631
Labels
No labels
Focus: A11y
Focus: Admin/Meta
Focus: Authentication
Focus: Back-End
Focus: Database
Focus: Design & UX
Focus: Editor - Markdown
Focus: Editor - WYSIWYG
Focus: Export System
Focus: Front-End
Focus: Translations
Focus: View Customization
Is: Docs Update
Is: Enhancement
Is: Priority
Is: Security
Is: Upstream
Status
Blocked
Status
Open to discussion
Status
Out of scope
Status
Pending Validation
Type
API Request
Type
Bug Report
Type
Feature Request
Type
Happy feedback
Type
Maintenance
Type
Question
Type
Support
No milestone
No assignees
3 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set
Reference
bookstack/bookstack#5631
Loading…
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Please see #6130 for the new place to provide feedback as a follow-up to this thread
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
Solved in Previous Rounds
Cannot have multiple paragraphs inside a formatted block element. refTables cannot be centered(Need to check if this was possible in the old editor). refRelated PRs
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.
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.
https://github.com/facebook/lexical/issues/6327
@joshhcd
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.
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.
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.
Since this is still in "beta", are feature requests possible ?
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.
@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.
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:
A thing that has now gotten in my way more times than not using the new editor:
The fix has been to go back to the old editor because it keeps tripping me up taking notes in class.
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:
In contrast, the Old WYSIWYG editor allows:
Steps to Reproduce the Issue
Expected Behavior
The editor should allow:
Current Behavior (New WYSIWYG)
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.
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.
@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).
What about custom components added to the existing TinyMCE editor? I have some toolbar icons and functions I have added via the "Custom HTML Head Content" and they do not show up in the new Beta editor. Is there information on how I can port?
@quirkiest not yet. There are currently no provided methods of extension exposed but I'll likely open that up as a later part of the beta stage. It will not be directly compatible with existing TinyMCE APIs, as the new editor behaviour/model is quite different.
Hi @ssddanbrown
When using the new editor, CTRL+1-5 at times works as intended, at times has the following issue
Details
Therefore it is not possible to set the text to Tiny Header with the keyboard shortcuts
Some other times, the shortcuts work as intended (CTRL+1 Large Header, 2 Medium Header etc...)
Furthermore, when CTRL+1 sets the text even larger than Large Header, it does not show up as any of the "formats" on the text formatting tab
Switching back to the other stable WYSIWYG editor, the keyboard shortcuts for text formatting work as intended all the time
The new Editor destroys all Links in our documentation upon saving. TinyMCE allowed links with the
ps8://protocol (which is a link handler associated with your Password manager), the new editor removes all links and just replaces them withabout:blank.Is the new Editor somehow forcing only to accept some protocols? Please provide an option to allow everything (maybe even
javascript:) in the URL field.I think this array is the culprit and needs to be able to be changed/disabled. Also, when using the whitelist the Editor should only accept allowed protocols in the first place instead of deleting the links upon saving.
Thanks @ssddanbrown - I have absolutely no problem with re-doing my stuff in the new format, so long as there is capacity to add these JS (etc) snippets in.
Thanks @bughidudi and @FaySmash, Can confirm both of these and have added to be addressed.
[Low Priority] The Sourcecode editor appears way smaller than with TinyMCE and because the new editor seems to store all HTML code in a single line, it's rather confusing to work with. Automatic code formatting and Syntax highlighting would be the optimum.
In addition to this, if not already known. Some other inconsistencies:
I can apply background color to a cell when selecting table > cell properties via the top toolbar, but not via the hovering toolbar. The hovering toolbar then defaults to the entire cell when applying color, not the selection.
When the background color is applied, in the editor when selecting those cells and unselecting the cells, the color disappears (only visually). When saving page and reopening, the color is still there. Untill you select/unselect those cells again.
Minor translation thing, in Dutch the 'Background color' = 'Tekstmarkeringskleur'. Whilst these are not the same, this made it I initially couldnt find the background color option because the translation wasnt correct.
Background color = Achtergrondkleur
Text background/marking color = Tekstmarkeringskleur.
I noticed in English both text marking color(top toolbar) and background color(cell/table properties) are actually both named background color
Thanks again @FaySmash and thanks @xsxavier, Items added.
@xsxavier not all options are available as part of the toolbar so that is expected.
In regards to the translation one, I've logged that as something to change but it might take time after for the translations to then be updated to match what's expected.
In the new editor, I can't add a page break or new line between a table and a following element, like a line separator. Previously, in the old editor, I could click to the right of the table and press Enter to create a new line before the next element. This feature no longer functions in the new editor.
Entity Select
When using the new (beta) WYSIWYG editor, the Entity Select interface used when browsing link targets comes up with "Undefined" pre-filled in the search field, and it has to be deleted before I can start finding entities. In the old editor, that field comes up empty, so I can simply start typing immediately.
Add Attachment Link to Page
When using the "Add Attachment Link to Page" button in the attachments list, it puts the link in the page as this like weird immutable object that you can't interact with normally. It can be fixed by deleting the line break it inserts ahead of the link.
The issue only seems to occur if you use that button when you're on a fresh, empty line in the editor.
The new editor doesn't support some keyboard shortcuts while using Cyrillic layouts. These shortcuts default to browser actions or do nothing in Russian and Ukrainian keyboard layouts:
Ctrl+S(Save Draft)Ctrl+D(Paragraph)Ctrl+Q(Blockquote)Ctrl+E(Insert code block)Ctrl+Shift+E(Inline code)Ctrl+O(Numbered list)Ctrl+P(Bullet list)Ctrl+K(Link)Ctrl+Shift+K(Link to content)The old editor doesn't have this problem.
@TritonB7 There are multiple ways to escape a table (pressing down when in last row, clicking below, tab in last cell).
I'm not sure about adding the same table-adjacent cursor handling as the old editor as I don't think it was intuitive, and was more of a result of the editor model, but maybe we can think up something more intuitive for that scenario (maybe a button/icon to insert new section below).
@shartcarbuncle Thanks! Can confirm the entity select issue and have added it to be addressed.
I can't reproduce the attachment link one, it remains editable like any other normal link. Does it occur from a completely new & blank page? What browser are you experiencing this in?
@akolotilov Thanks, though I'm very much ignorant which it comes to Cyrillic Keyboard handling. Looking at the examples here there does not seem to be these letters, like a standard
Sfor example. Are you expecting the closest Latin equivalents to execute the shortcut? As an example, exactly what kind of keys are you pressing to use the Save Draft shortcut?Physical keyboards in Russia usually have QWERTY and JCUKEN stickers overlapping each other. For example, if you wanted to press
Ctrl+Sin Russian JCUKEN layout, you would pressCtrl+Ы, because the lettersSandЫare on the same physical key. For a visual reference, search for "Russian keyboard stickers."To test this yourself, add the standard Russian or Ukrainian keyboard layout to your OS, switch to it, and press
Ctrl+Sas if you were using English QWERTY layout. Instead ofS, you'll seeЫin Russian andІin Ukrainian. Note that it's not an ASCIII, I believe it'sU+0406in UTF-8.Here's a lookup table
QqЙйЙйЙйWwЦцЦцЦцEeУуУуУуRrКкКкКкTtЕеЕеЕеYyНнНнНнUuГгГгГгIiШшШшШшOoЩщЩщЎўPpЗзЗзЗзAaФфФфФфSsЫыІіЫыDdВвВвВвFfАаАаАаGgПпПпПпHhРрРрРрJjОоОоОоKkЛлЛлЛлLlДдДдДдZzЯяЯяЯяXxЧчЧчЧчCcСсСсСсVvМмМмМмBbИиИиІіNnТтТтТтMmЬьЬьЬьP.S. I forgot to mention the Belarusian keyboard layout in my initial message, the new editor has the same issue with it. There are other languages that use the Cyrillic script, but I don't know much about them.
It's happening for me in both Safari and Edge. It's hard to describe, so I'll record a short video showing what I'm talking about.
Here we go, this should demonstrate what I'm talking about: https://streamable.com/vlvgvd
The new editor doesn't allow to add a table in RTL languages. Hovering over insert should show a table preview but nothing happens.
In the new editor, I can't add a code block inside a numbered list; it always appears outside. In the current editor, I can do this easily by creating a numbered list, then pressing Shift + Enter to insert a new line, followed by adding the Code Block. Is there something I might be missing to make this work in the new editor?
Ctrl+K is a keyboard shortcut built in to most web browsers to focus the search bar (or the address bar if there is not a separate search bar/box). The beta WYSYWIG editor (and to be fair, probably the old editor) commandeer this as Insert Link.
Hitting Ctrl+K a second time activates the default browser behavior, so it's not the end of the world - just obnoxious. Is there any way we could configure keyboard shortcuts in the editor?
In this new editor you can not put two or more paragraphs inside a single
blockquote or any other callout. When you try it ,every paragraph becomes
an independent blockquote or callout.
El vie, 6 feb 2026 a las 19:13, Gortus @.***>)
escribió:
You can't center a table.
There is no way to format first row as title row
In page edit mode, new diagrams made on tool draw.io does not refresh when edited, only refresh after you move another item.
BookStack version: v26.03.2
Editor: New WYSIWYG editor (wysiwyg2024 / Lexical)
Issue:
When writing content in the new WYSIWYG editor and exporting a page as Markdown, the resulting
.mdfile contains<span style="white-space: pre-wrap;">tags wrapping regular paragraph text. These tags are not rendered by any standard Markdown viewer and pollute the exported content.Steps to reproduce:
.mdfile — every paragraph text is wrapped in<span style="white-space: pre-wrap;">...</span>Expected behavior:
Plain Markdown paragraphs with no HTML span tags.
Note:
This appears to be introduced by the Lexical editor storing
white-space: pre-wrapas inline style on text nodes. The old TinyMCE editor did not produce this output.There is an alignment option in this menu. Centering works for me.
@ssddanbrown I think there should be an easier / more accessible way to do that, or even better, make it the default. In my opinion, having a header row is the more common use case for tables, no?
The table pop-up obscures other pop-ups, in particular the link pop-up of links in the last row.
I think content pop-ups should take precedence (z-index) over the table pop-up.
The first edit of a page does not set the format correctly.
Only if you start typing the format "paragraph" is selected.
You also cannot change the format to anything else without typing first. If you set it in the drop-down to let's say a call-out, then this is ignored, and as you start typing, "paragraph" is still set automatically.
It is impossible to break out of ordered and unordered lists unless you are on the last empty item.
Use cases are to split existing lists into two separate ones, which is virtually impossible without manual copy and paste, or reformatting all the list items manually again.
There does not seem to be an intended shortcut to go to the table popup menu(?). However, if you select some text and hit the
tabkey, you're suddenly in that pop-up and cantabthrough the options (see focus border) and also activate one. I have not found any way to abort and move focus away from the popup with the keyboard only.Moving the cursor between cells is awkward in some cases. For example, using up and down arrows to move between cells results in the cursor jumping to the beginning and end of the cell content, respectively.
This is different from the old editor and most other editors I'm used to, which try to keep the "rough" location of the cursor. For example, if you put the cursor in the middle of the two text fragments "ABC ABC", it is expected that it stays there when you move the cursor up and down between cells.
The behavior gets worse once you start adding more formatting to table cells. For example, if you add an unordered list, it is basically impossible to move from the list to the first line of the cell with the up arrow key.
In the same way, it is impossible in this example to move to the last bullet point from the second to last one, using the down arrow. The last item always is skipped and the cursor moved to the next cell below (you can briefly see that in the beginning of the GIF).
Thanks ptrqn bedeberger balta1980 TritonB7 nadegr shartcarbuncle akolotilov
I've added the raised issues to #5631 to be looked at in the next patch of fixes, aimed for the next feature release.
Gortus I feel your concern may be better suited to its own request for the ability to customize editor shortcuts as you suggested. Ctrl+K was used just because it's very common for links (including in this GitHub editor).
@danb wrote in #5631 (comment):
That's fair. I'm reluctant to be the one to create such a request, since I'm currently only driven by that one annoyance. Full customization is a serious enough feature that I'll leave it to someone (if there is anyone) who genuinely cares about the broader feature.
Note, setting
permissions.default.shortcutsto2in Firefox-based browsers prevents "hijacking" of that keyboard shortcut, though it then leaves you without that function on sites that use it (like BookStack's editor).I've now been through all the recent reported issues, with changes in PR #6119 due to be part of the next feature release.
Since this thread has become quite long, I'm closing it out, with this being the new place for feedback:
#6130