Resolve "Add an option to enter Markdown for the paragraph element"
What is in this MR
Add Markdown support to TextElement
(formerly known as ParagraphElement
).
It uses markdown-it-attrs and the MarkdownIt
element for parsing and rendering the markdown content.
To provide styling variables to all elements it includes a new component, ThemeProvider
that injects the CSS variables from the theme.
How to test this MR
General
- Create a new
TextElement
. - Add some markdown samples (for example: https://gist.github.com/rt2zz/e0a1d6ab2682d2c47746950b84c0b6ee)
- Switch between
Plain Text
andMarkdown
and confirm that the changes are applied in the preview panel.
Styling
- Add multiple headings to the markdown content
- Update the theme colors
- Check that the colors of the headings were updated
Links
- Add multiple links to the markdown element - e.g, external ones,
https://baserow.io
, internal ones/page/2
- Preview and/or publish the page and confirm the links work
Quirks
- I noticed that when pasting a multiline text into the input it skips the lines. I checked and it works with copy and pasted content whose line breaks are
CRLF
(Windows) instead ofLF
(unix). Probably a platform thing, or a bug inApplicationBuilderFormulaInputGroup
?
Merge Request Checklist
-
changelog.md has been updated if required. -
New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder -
The latest Chrome and Firefox have been used to test any new frontend features -
Documentation has been updated -
Quality Standards are met -
Performance: tables are still fast with 100k+ rows, 100+ field tables -
The redoc API pages have been updated for any REST API changes -
Our custom API docs are updated for changes to endpoints accessed via api tokens -
The UI/UX has been updated following UI Style Guide
Closes #2257 (closed)
Edited by Afonso Silva