Content List

[nelsonpecora]

Similar to component list, but a special type of field that includes both components and formatted text (via Quill delta operations).

Content lists would allow for multi-paragraph editing (making Clay feel more like other text editors) while also allowing various components to live in the text. Instead of having a bunch of paragraph components, the data would live in the article, with interspersed references to other components (images, subsections, related stories, etc).

On the rendering side, this will require a new partial ({{> content-list }}) and possibly a helper to render the Quill delta operations into html. On the editing side, this will require a new content-list decorator, and some changes to the affordances around selecting, focusing, adding, removing, and rearranging components.

Per Amy:

interesting use-case per Ashley: can you repeatedly add a component with per-instance styling and have that preserved for each component?
For example, will all the clay-paragraph-designed components in a content-list have the same per-instance styling or will the user have to set the per-instance styling for each one?

Per Nelson:

Things to consider (from our discussion):

• would this be "in edit mode" when kiln loads? (as a decorator)
• how do you add a component after some text? (do paragraphs and other block-level Blots get mini-selectors?)
• what components' functionality does this deprecate? (paragraph, blockquote, subhead)
• how does dragdrop work?
• what happens if a component in a content-list contains a content-list?
• when do content-lists save data?
• how do content-lists reload themselves / re-render?
• what format should data be saved in? (stringified html vs. Delta operations)
• what changes from the wysiwyg behavior would be necessary? (paste stuff, navigation, etc)

Quill implementation question on Stack Overflow

Steps to Content List

1. figure out how to render deltas in the template
2. content-list decorator that allows for plaintext blobs
3. add formatting to decorator
4. add non-component blots (blockquote, lists, etc) to decorator
5. figure out sanitization stuff (smart quotes in paragraphs, etc)
6. figure out how to embed and render components as BlockEmbed Blots
7. figure out adding / removing components as BlockEmbeds
8. figure out reordering components as BlockEmbeds
9. verify no weirdness when using content-list fields inside child components of a content-list (e.g. 10. subsection content-list inside article body content-list)

In practice, the data would look like this:

{
  ops: [
    { insert: 'Hello', attributes: { bold: true } },
    { insert: { _ref: 'domain.com/components/image/instances/foo' } },
    { insert: 'World!\n' }
  ]
}