search

paramander / contentful-rich-text-vue-renderer

Render Contentful Rich Text field using Vue
https://www.npmjs.com/package/contentful-rich-text-vue-renderer
MIT License
38 stars 12 forks source link

Break support #29

Closed michalpaukert closed 3 years ago

michalpaukert commented 3 years ago

Regarding new post on contetnful I would like to support <br /> https://www.contentful.com/blog/2021/05/27/rich-text-field-tips-and-tricks/

tolgap commented 3 years ago

See this spec as an example on how to do it: https://github.com/paramander/contentful-rich-text-vue-renderer/blob/master/src/index.test.js#L451

NWRichmond commented 3 years ago

Hi @michalpaukert, I made a Code Sandbox to demonstrate @tolgap's example of using nodeRenderers to render a <br />.

I hope you find it helpful!

Screen Shot 2021-07-09 at 7 06 06 PM

One thing that I had trouble with at first...as demonstrated in the Code Sandbox, in addition to the [BLOCKS.SOMETHING]s, be sure to include:

break: (_node, key, h) => h("br", key, {}),

in the object passed to the node-renderers prop.

NWRichmond commented 3 years ago

One issue with the <br />-supporting nodeRenderers from /src/index.test.js that are demonstrated in the Code Sandbox is that they cause Vue to warn:

[Vue warn]: You may have an infinite update loop in a component render function.

I tested this outside of Code Sandbox (in a Nuxt project) and got the same warning.

@tolgap if you have any suggestions about how to resolve that warning , please share them! And thank you for your work on this project 🙏

UPDATE: I created #33 after demonstrating issues during SSG w/Nuxt - it's more than a superficial console warning, and probably warrants being its own issue.