Title input style change in standalone WYSIWYG mode

Development
1

Hi everyone,

While integrating BlockNote editor, I took the liberty to make a small UI change to the standalone WYSIWYG edit mode: I removed the border around the title input, made the label visible only to screen readers and increased the text font-size so that the title appears as in view mode.

I did this for the following reasons:

  1. the content field already didn’t show a label, so it made sense to hide the label for the title field as well
  2. without the label, the title input looked strange to me though (with border and small font size)
  3. the inplace edit mode was already using the same style for the title input (no label, no border, increased font-size) as in view mode, so this change aligned the standalone WYSIWYG edit mode with the inplace edit mode
    wysiwyg-inplace
    wysiwyg-inplace1092×581 75.3 KB
  4. the standalone WYSIWYG edit mode is currently used only for creating new wiki pages, but we’re planing to drop it and use the inplace edit mode instead, see XWIKI-19299 ; this change makes the future transition from standalone to inplace edit mode smoother; we could also switch the CKEditor style from iframe-based to iframe-less, to match the inplace edit mode, as a next step
  5. make the BlockNote integration nicer; BlockNote doesn’t have (by default) an iframe-mode (border, fixed height, fixed toolbar) so it looks the same in standalone and inplace edit mode; this means that when BlockNote is used the standalone edit mode is already very similar to the inplace edit mode:
  6. Notion and Confluence style the document title similarly in edit mode (not as a text input but as being part of the edited content)

@ilie.andriuta noticed this change and reported it as a regression Loading... . Since @tkrieck seems to agree with him, I thought it would be good to see what others think of this change.

I see the following options:

  • keep the change (my preference)
  • add a border around the title, but only when CKEditor is used (style brought by CKEditor), @tkrieck preference I think
    title-border
    title-border1686×374 14.9 KB
  • revert the change

WDYT?

Thanks,
Marius

2

Thx for asking.

This looks odd because of the way the content to edit is displayed. It’s located inside a textarea with a border. Thus with the change, the users won’t know/guess that the title can be changed and the style is now inconsistent between title and content.

When you mentioned Confluence and Notion, it’s fine for them because they don’t have this inconsistency (they’re inplace editors).

It could be fine if the content was also displayed without borders and without the edition toolbar (that you would get when you click inside the title or inside the content). Right now it looks odd and indeed looks like a discoverability regression.

Thanks