Customize the block editor
H
Hadi
I have a collection type called pages which present my website pages
i need to add a links between this pages in editor block https://github.com/strapi/strapi/blob/develop/packages/core/admin/admin/src/content-manager/components/BlocksInput/BlocksEditor.tsx
I want to be able to inject a component to add this link
T
Thor Galle
I also think this would be a nice feature. The structured JSON Blocks editor makes it at least imaginable (with Markdown it would be messier).
## Reference
As a reference, headless CMS alternative Contentful already supports this feature in two ways: https://www.contentful.com/developers/docs/concepts/rich-text/#embedded-and-linked-entries-in-rich-text
- Normal inline hyperlinks to entries around text, which can then be rendered as desired by populating & rendering the resulting JSON.
- Entries or assets embedded inline.
Case 1) is for example useful for linking to other pages (like the OP describes), and keeping consistent/auto-synced links when the slugs of those pages change.
Case 2) is for example useful for a richer blog experience, to embed (galleries of) artworks inline (with artist name, date painted & other fields displayed directly on the side)
## Workaround
But there should be a workaround Kim Simmons Hadi Farnoud : since the Blocks editor data structure is already JSON, I also think it fairly straightforward to implement this feature yourself like this:
- Writing something like "For example, looking at [[artwork:12]], we see that ..." in your rich text.
- In your blocks-react-rendered(or other) renderer, customize the paragraph renderer, splitting the paragraph text with a regular expression, into["For example, looking at", "[[artworks:12]]", "we see that ..."]
- Further parse the 2nd item into {collection: "artworks", id: 12}
- Fetch data from the Strapi API for /api/artworks/12
- Render the three items, with the 2nd item now having all data you need to link out to a slug, or render something else inline.
The main drawback of this approach would be that you need 1 + n fetch requests: one to get the block editor content, and n for all the referenced entries. This might be acceptable when generating a static site page, but it's something to be aware of. Alternatively, adding middleware that modifies a response as mentioned above with the entity service API, while still acting on one request, would be a quicker workaround.
An official solution could work with immediate population similar to Dynamic Zones & 1 request. I can imagine this is a serious engineering challenge.
Kim Simmons
My case is similar. I have content types for blog posts and artworks, and would like to be able to embed artworks into a blog post so that the user can quickly navigate to it. I can't even put a link on images in the current editor :(
Would be nice if the
blocks-react-renderer
would allow a simple injection for the custom blocks too.