feat: support CodeBlock

[TomasSlama]

FX-4184

Description

The result of merging all separate PRs

How to test

• Temploy
• play with the storybook

Screenshots

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8fdc11f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso-rich-text-editor	Major
@toptal/picasso-forms	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[TomasSlama]

@toptal-anvil ping reviewers

[TomasSlama]

@toptal-anvil ping reviewers

[sashuk]

Do you think the output could be cleaned up a bit so it does not have those extra <span/>? Like in

picasso/packages/picasso-rich-text-editor/src/LexicalEditor/utils/cleanup-html-output.ts

Line 12 in db1887d

const replacementMap: ReplaceCondition[] = [

---

NIT: What do you think about adding a code black example to story (although it is already tracked in visual tests for RichText)?

[sashuk]

Tested locally (temploy returns 500 error):

• copying and pasting from RichText line-by-line and as a whole
• toggling formatting for code blocks
• copying and pasting code blocks into each other, copying between editors, copying and pasting other types of rich text into code blocks and vice-versa

[mkrl]

Tested locally.

When only the empty lines are present in the editor, it lacks the margin that is there otherwise.

deepin-screen-recorder_Select.area_20230810122849.mp4

Also there's one thing that I'm not sure we should fix, but you can't really select existing part of the text and turn it into code block, it creates a block up until the existing node / paragraph boundary

deepin-screen-recorder_Select.area_20230810123256.mp4

[TomasSlama]

@mkrl The second issue is the same as we had with headings, it is still one paragraph as there is just br as space between.

I was actually trying even to convert just selected text, but it is pretty complex with a lot of edge cases. There is no specific requirement for this behaviour and I realized that there is not much benefit and it would be inconsistent with headings

[TomasSlama]

@toptal-anvil ping reviewers

[TomasSlama]

thank you guys for finding these bugs 🙇, I addressed them all

[sashuk]

Comments were addressed, thank you Tomas for such enormous work!

[mkrl]

Tremendous work, thank you!