✨ Rich text input

[brunobuddy]

Description

This PR implements a Rich Text property type that shows a WYSIWYG editor on admin panel. It uses Quill through ngx-quill package.

The related doc PR has to be reviewed also.

How can it be tested?

1. Read the doc

Get the doc for rich text from the website repository and change the docs/fetch-content.sh content by this one:

#!/bin/bash
# Remove the existing directory if it exists
rm -rf content

# Clone the repository into the 'content' directory
git clone --depth 1 --branch feature/rich-text https://github.com/mnfst/docs.git content

then run the docs from the website repository as explained in the readme file.

2. Follow the doc

Play around by adding a richText property and checking the list/detail/create/edit views.

Styling to be done

There is some styling to be done on this component:

General

• Codefacor finds a issue with the "@import" code. See how to remove that - ngx-quill install guide

Input

• Bold style is not showing on the editor
• The min height of the editor is too small
• The width of the editor is narrow for a rich text. Can we update all of them ? See what other admin panels do
• Style error state: add "required" validation and submit leaving blank to see it

Yield

• Style yield in detail page

Impacted packages

Check the NPM packages that require a new publication or release:

• manifest
• add-manifest
• @mnfst/sdk

Check list before submitting

• I have performed a self-review of my code (no debugs, no commented code, good naming, etc.)
• I wrote the relative tests
• I created a PR for the documentation if necessary and attached the link to this PR
• This PR is wrote in a clear language and correctly labeled

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
manifest-schema	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 2, 2024 3:37pm

[SebConejo]

@brunobuddy
In the detail page, if teh rich text is null, we should display a small dash "-" instead of an empty block.

In rich text yield component, We can add an ngIf to the "wrapper" div. And create the span to display the dash .