Treat "div" elements like macros in the WYSIWYG editor

Development
1

Hi everyone,

at the moment we don’t allow any specific editing actions for div elements in the WYSIWYG editor. This makes it almost impossible to deal with them without using the source. For example consider the following editing actions:

  • Mark a paragraph as an “Info Box” from the “Styles” dropdown.
  • Press enter - wow, now we have a second “Info Box”?
    image See XWIKI-22028 for a bug report about this.
  • Make the content of the info box a list item -
    image - yes, the box is simply indented now, no list marker displayed. Clearly not what we wanted. Let’s undo that.
  • Insert a table. This works:
    image
  • Now when pressing enter, we also get new paragraphs inside the info box which wasn’t possible before.
  • Now let’s try getting rid of that strange info box appearance. Let’s click on “Info Box” again as this is how you normally undo styles:
    image
  • we got a nested info box instead.

From all I know from this state, there is no way to get rid of the outer info box in the WYSIWYG editor without deleting its whole content. Basically, the moment you have an inner block container, you cannot modify the styling of the group/div anymore.

To improve this situation I suggest treating group syntax as “widget” in the WYSIWYG editor and thus as its own editing context similar to macros. Further, I suggest introducing a macro editor-like edit view for group syntax that allows applying pre-defined or custom styles through the “class” and “style” attributes. Additionally, there should be an option to remove the group syntax.

The goal of this proposal is to get an agreement that we want a macro-like editing behavior in the WYSIWYG editor for the group syntax. I have not thought about implementation details, and we would also need to find time to actually implement this, I have no plans to work on this in the immediate future.

Thank you very much for your feedback!

1 Like
2

Related: I’ve created Remove box styles from WYSIWYG?

3

Sounds good to me but I don’t master the consequences. Leaving it to @mflorea to discuss that :slight_smile:

4

+1

5

Sorry for chiming in so late - Xwiki Jira didn’t send me any notification about the discussion going on in the issues I created, even though I’m configured as “watcher”. I need to debug this…

Nevertheless, this “div” behaviour bugs me a long time already and it frequently requires internal support for my colleagues, even though they are software developers (but don’t know much about Xwiki, but in my opinion also should not need to to “just” use it to write / update documentation.

Would your proposal also help to make embedded documents (((( ... )))) more obvious / transparent, and could it provide a way to get rid of these (or add them) in a simlar way?

Regarding the “how”:

Do I get it right that the info box in its second variant, and also embedded documents, are similar (or technically the same from the WYSIWYG editor’s point of view) to other macros added using the gear icon?

If so, how about showing the macro’s bounding box, maybe / possibly only if the edit cursor is inside it or maybe the mouse cursor hovers it, and adding floating symbols to edit it - there’s already the “handle” for some macros you can use to move it around (if I’m not mistaken).
Another icon could be a trash can to remove it including content, and there a pair of functions which

  1. remove an existing macro, replacing it with its pure content
  2. and the opposite function to “embed” selected text within a newly added macro. (This e.g. works with the Code macro, which is no inline macro, though.)

I’ve no idea about the editor’s internals, so this might not make much sense from a technical point of view. Also, it’s not really as easy because if you have some complex contents in a macro / div in a complex setting, e.g. inside a list item, just removing the macro would probably result in a huge mess…

Still, if it could be made to work, I’d consider it to be very convenient for Xwiki users.

One additional example where the info box block macro and the info box style behave very differently is if you apply it to selected text as I described in my example above.

The info box style will wrap each selected paragraph into a separate info box, while the info box macro will replace the selected text, effectively deleting it.
What’s missing seems to be a way to easily wrap some complex content in e.g. an info box (or probably similar inline box macros).

I hope these thoughts made some sense… :wink: