Merge pull request #4288 from udecode/md/custom

Support non-standard markdown nodes

Author: felixfeng33

.changeset/new-baboons-push.md

@@ -0,0 +1,9 @@
+---
+'@udecode/plate-markdown': patch
+---
+
+Added support for `subscript`, `superscript`, `date`, `callout`, `font`.
+
+Replaced dependency on `zeed-dom` with `remark-mdx` for more robust MDX tag generation.
+
+Add `splitIncompleteMdx` to separate the complete and the incomplete mdx string.

.changeset/tiny-mangos-pay.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': patch
+---
+
+Fix test case and missing import

apps/www/content/docs/en/components/changelog.mdx

@@ -10,6 +10,12 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## May 2025 #22
 
+### May 6 #22.3
+
+- `ai-chat-editor`: support none-standard markdown nodes.
+- `slash-input-element`: add callout support.
+- `block-selection-plugins.tsx`: fix block selection not working.
+
 ### May 4 #22.2
 
 - `ai/command`: forked smoothStream from `ai` package now uses 30ms delay by default (only code blocks and tables use 100ms delay).

apps/www/content/docs/en/markdown.mdx

@@ -790,6 +790,33 @@ Here's a summary of some key default conversions. See [`defaultRules.ts`](https:
 
 * The conversion target for lists (`ol`/`ul` vs. `p` with indent props) depends on whether `IndentListPlugin` is detected in the editor configuration.
 
+---
+
+The following table summarizes the default MDX conversions supported when using `remark-mdx`.
+
+| Mdx(mdast)       | Plate Type           | Notes                                    |
+| :---------------- | :------------------- | :--------------------------------------- |
+| `<del>...</del>`             | `strikethrough` (mark) | Alternative to `~~strikethrough~~`     |
+| `<sub>...</sub>`             | `subscript` (mark)   | Text like H<sub>2</sub>O                 |
+| `<sup>...</sup>`             | `superscript` (mark) | Text like E=mc<sup>2</sup>               |
+| `<u>...</u>`               | `underline` (mark)   | <u>Underlined text</u>                   |
+| `<mark>...</mark>`            | `highlight` (mark)   | <mark>Highlighted text</mark>            |
+| `<span style="font-family: ...">...</span>` | `fontFamily` (mark) | Changes text font family                |
+| `<span style="font-size: ...">...</span>`   | `fontSize` (mark)   | Changes text size                       |
+| `<span style="font-weight: ...">...</span>` | `fontWeight` (mark) | Changes text weight (bold, etc.)        |
+| `<span style="color: ...">...</span>`       | `color` (mark)      | Changes text color                      |
+| `<span style="background-color: ...">...</span>` | `backgroundColor` (mark) | Changes text background color |
+| `<date>...</date>`                             | `date`              | Date element                          |
+| `@mention`                                     | `mention`           | Mention element                       |
+| `<file name="..." src="..." />`                | `file`              | File attachment/embed                 |
+| `<audio src="..." />`                          | `audio`             | Audio player embed                    |
+| `<video src="..." />`                          | `video`             | Video player embed                    |
+| `<toc />`                                        | `toc`               | table of contents   |
+| `<callout>...</callout>`                     | `callout`          | highlight callout     |
+| `<column_group>...</column_group>`      | `column_group`          | multi-column layout  |
+| `<column>...</column>`                        | `column`             | single column layout  |
+
+
 ## Appendix C: Components
 
 While `rules` customize the *conversion* between Markdown and Slate, Plate uses React components to *render* the Slate nodes in the editor. You can configure these rendering components using the `components` option in `createPlateEditor`.

apps/www/src/registry/default/blocks/editor-ai/components/editor/use-create-editor.ts

@@ -14,6 +14,7 @@ import {
   UnderlinePlugin,
 } from '@udecode/plate-basic-marks/react';
 import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
+import { CalloutPlugin } from '@udecode/plate-callout/react';
 import {
   CodeBlockPlugin,
   CodeLinePlugin,
@@ -68,6 +69,7 @@ import { FixedToolbarPlugin } from '@/registry/default/components/editor/plugins
 import { FloatingToolbarPlugin } from '@/registry/default/components/editor/plugins/floating-toolbar-plugin';
 import { AILeaf } from '@/registry/default/plate-ui/ai-leaf';
 import { BlockquoteElement } from '@/registry/default/plate-ui/blockquote-element';
+import { CalloutElement } from '@/registry/default/plate-ui/callout-element';
 import { CodeBlockElement } from '@/registry/default/plate-ui/code-block-element';
 import { CodeLeaf } from '@/registry/default/plate-ui/code-leaf';
 import { CodeLineElement } from '@/registry/default/plate-ui/code-line-element';
@@ -110,6 +112,7 @@ export const viewComponents = {
   [AudioPlugin.key]: MediaAudioElement,
   [BlockquotePlugin.key]: BlockquoteElement,
   [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),
+  [CalloutPlugin.key]: CalloutElement,
   [CodeBlockPlugin.key]: CodeBlockElement,
   [CodeLinePlugin.key]: CodeLineElement,
   [CodePlugin.key]: CodeLeaf,

apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx

@@ -26,6 +26,7 @@ Rules:
 - Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.
 - For INSTRUCTIONS: Follow the <Reminder> exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.
 - For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.
+- CRITICAL: DO NOT remove or modify the following custom MDX tags: <u>, <callout>, <kbd>, <toc>, <sub>, <sup>, <mark>, <del>, <date>, <span>, <column>, <column_group>, <file>, <audio>, <video> in <Selection> unless the user explicitly requests this change.
 - CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.
 - CRITICAL: when asked to write in markdown, do not start with \`\`\`markdown.
 `;

apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.tsx

@@ -17,7 +17,8 @@ export const blockSelectionPlugins = [
     },
     render: {
       belowRootNodes: (props) => {
-        if (!props.className?.includes('slate-selectable')) return null;
+        if (!props.attributes.className?.includes('slate-selectable'))
+          return null;
 
         return <BlockSelection />;
       },