Skip to content

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.

image

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

  1. Create a new TextElement.
  2. Add some markdown samples (for example: https://gist.github.com/rt2zz/e0a1d6ab2682d2c47746950b84c0b6ee)
  3. Switch between Plain Text and Markdown and confirm that the changes are applied in the preview panel.

Styling

  1. Add multiple headings to the markdown content
  2. Update the theme colors
  3. Check that the colors of the headings were updated

Links

  1. Add multiple links to the markdown element - e.g, external ones, https://baserow.io, internal ones /page/2
  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 of LF (unix). Probably a platform thing, or a bug in ApplicationBuilderFormulaInputGroup?

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

Merge request reports