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
  • Autolinking breaks when after another word (Cat https://example.com)
• 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.
  • Selection on multiple list items remains sketchy.
  • Multiple indent/outdent operations in multi item selection can lead to unexpected behaviour (likely related to the above).
• Details (Collapsible blocks):
  • Different summary background color when created new ref
  • Label editing is unclear ref
  • Tricky to escape the details block ref
  • Details with code blocks within causes error on reload ref.
• HTML parsing:
  • Code blocks in list items causes exception ref
• Switching to the new editor (from either MD or old WYSIWYG) converts task lists to bullets. ref
• Page content is not always saved when expected ref
• It's hard to move the cursor above an image ref
• Table column management is unreliable ref
• UI Menu behaviour does not match old editor. Menus should not close on mouse-out. ref ref-b.
• Pasted image links should be inserted as an image using that pasted href ref
• Cannot delete/remove drawings

Related PRs

• Range of fixes/updates for the new Lexical based editor #5365
• Further Lexical Fixes #5415
• Lexical Fixes: Round 3 #5558
• Lexical Editor: Further fixes #5627

[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: #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 😅

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.