Layouts for prose (headings+paragraphs+???)

[michael]

Trying to work out the right approach for allowing different orientations/layouts for prose. E.g. for my website I might want a group of headings and paragraphs be left-aligned, centered, or right-oriented, to make things a bit more interesting visually.

My first attempt was to just encode all that layout information in a text node's layout property. E.g. I'd have 9 layouts for headings: left-aligned h1,h2,3 centered h1,h2,h3 and right-oriented h1,h2,h3.

While this works in principle, and keeps the content structure flat, it has downsides:

• if i want to change the orientation of multiple text nodes i'd need to change them one by one, or have some badge command (but then it's hard and error-prone to match the right layouts together, e.g. paragraph I have layout: 1,2,3 (you can only choose the orientation) while for headings you haver 1,2,...9.
• Also when splitting nodes or copy and paste you'd need to look for predecessors/successor text nodes and inspect them in order to determine which layout the pasted elements should get.

After some consideration I think a better approach is to group sections of prose together to single units, which then get a layout property (the orientation). For that I'd introduce a new node type prose at top level, that can take headings and paragraphs.

Pros:

• I'd have a dedicated entity to set stuff for a body of text. e.g. orientation, but also background
• You can optimize spacing because you know which body of text belongs together.
• Copy and paste: Easy to move text nodes from one prose node to another, while it automatically inherits the right layout

Cons:

• Copy and paste special cases: Say you select a bunch of paragraphs from a prose node, and then paste them at a top-level position. In this case Svedit would need to somehow determine the right parent component (in this case a prose node) so we have a valid structure again. Definitely possible, but needs significant changes to Svedit.
• Say the node cursor is after a Hero element, and you press ENTER. Currently you would expect a new paragraph to be created and a blinking cursor. But now to be consistent with the rest of the system, it would create a prose element with a heading and two paragraphs. The good thing is that you then understand implicitly how prose nodes work, and how a finished prose section roughly looks like. However the bad side is that it may be surprising, because it doesn't behave like your traditional text editor.
• Another edge case: What should happen when you want to delete the last text block inside a prose node. Should the prose node be removed alltogether, or should just EW just reject that (current behavior)
• You might accidentally create new prose elements, instead of adding new text blocks to an existing one. This could be a source of confusion/complexity. You'd only want to create a new prose node, when you want to change the layout e.g. start with left aligned and then continue with centered text. However, typically you'd never have two prose nodes after another. Or would you? Needs testing I guess.
• Added complexity to "just add a heading": A common use case might be that you just want to add a heading, e.g. before a gallery node. To do that you press ENTER at a node cursor position, then by default a prose with placeholders for one heading + 2 paragraphs is inserted. Now you need to delete the paragraph, and the heading (level 1) remains.

Generally I think adding a prose wrapper adds a lot of flexibility, and is definitely a pattern that can be utilized in custom nodes. On the downside it's definitely getting more complex, and breaks a bit with the expectations of a rich text-editor. Maybe that's not a bad thing, but it definitely hurts a bit simplicity, and might overwhelm some people that "just want to write a blog post".

Some ideas to mitigate the problems of the prose-container-approach:

• Maybe separate nodes for Section Headlines (much spacing etc., separator lines) and Headings (inside a Prose element, that are part of a body of text).

[michael]

Related Questions:

• If a Prose wrapper was introduced, should it only hold headings and paragraphs, or lists as well?
• A related question is: Should there be some entity in EW that behaves like a traditional Word document (e.g. a prose element with everything you'd expect including paragraphs, headings, lists, tables etc)? Or is it better to make different coarse-grained units: E.g. a Prose Block with headings and paragraphs that align as a group, followed by a List block, that kind of takes it's own space, i.e. is not necessarily aligned with the content from the Prose block. Tables would be separate first-level units as well, etc.
• How can a user easily manage layout information that occurs on multiple levels. E.g. orientation (left,center,right) on a Prose block vs heading level (expressed as a layout) on a heading child node.
  • there basically is an answer already, which is is: select the wrapper element to change it's layout and select a child block (e.g. heading) to change their layout (e.g. heading level aka display size)
  • question is: will this lead to confusion for users? like you might have your cursor in a heading block, but still want to change the orientation of the whole wrapper (including the other paragraphs).
  • I just would like to keep the constraint that you can only ctrl+alt+up/down/left/right, and nothing on top of that, which requires the context to be set to either the parent or the child.

[michael]

User story: "I want to add heading on top of an image gallery/grid."

Solution options:

• Use Prose: Press ENTER at gap before image gallery. H1 + paragraph gets inserted. Enter text into H1, remove the additional paragraph
• Use a dedicated SectionHeading: ENTER followed by ctrl+alt+down until SectionHeading is displayed. Fill out the blanks

Flexibility:

	With Prose	With SectionHeading
Add intro paragraph	✅	❌
Add Preamble	❌	✅ (preamble prop via additional layout/type)