Experiment/new rte features

[andrewleith]

Summary | Résumé

This pull request introduces several new features and improvements to the Tiptap editor's custom components, focusing on enhanced markdown support, new node types, and better user experience for tables, callouts, links, and emoji suggestions. The most significant changes include the addition of a callout block node, improved table markdown serialization with column width support, enhanced link handling with CTA attributes, and an interactive emoji picker with suggestion popups.

Callout node

• Added a new CalloutBlock node with full markdown serialization and parsing, ProseMirror plugin integration, and commands for inserting, wrapping, toggling, and unsetting callout blocks. This node also prevents nesting with language blocks and itself.

Table support

• Introduced a custom TableNode extension that serializes table column widths to markdown using a special marker, and parses them back into the DOM, preserving table layout fidelity between markdown and the editor. (app/assets/javascripts/tiptap/CustomComponents/TableNode.js)

CTA link enhancement

• Extended the MarkdownLink to support a cta attribute, with custom markdown serialization and parsing for CTA links using [[cta]]...[[/cta]] markers. Also ensures CTA links are correctly rendered and parsed from HTML and markdown.
• Updated the link modal to support toggling the CTA attribute, ensuring the modal correctly reads and sets the CTA state from the editor.

Emoji picker

• Added a new EmojiPicker extension with a React-based suggestion popup, keyboard navigation, and markdown serialization for emojis. The picker provides up to six suggestions based on user input and supports both emoji glyphs and shortcode fallback.

Test instructions | Instructions pour tester la modification

Sequential steps (1., 2., 3., ...) that describe how to test this change. This
will help a developer test things out without too much detective work. Also,
include any environmental setup steps that aren't in the normal README steps
and/or any time-based elements that this requires.

---

Étapes consécutives (1., 2., 3., …) qui décrivent la façon de tester la
modification. Elles aideront les développeurs à faire des tests sans avoir à
jouer au détective. Veuillez aussi inclure toutes les étapes de configuration
de l’environnement qui ne font pas partie des étapes normales dans le fichier
README et tout élément temporel requis.

[github-actions]

🧪 Review environment

https://26rsnitybnlo2j3lvh3fjjsla40kxsqb.lambda-url.ca-central-1.on.aws/