Merge pull request #3930 from udecode/fix/export-html

Export html support equation plugin
udecode · Dec 28, 2024 · c1c2f48 · c1c2f48
2 parents 9af34e7 + 6fbf37a
commit c1c2f48
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 3 deletions.
diff --git a/apps/www/content/docs/cn/components/changelog.mdx b/apps/www/content/docs/cn/components/changelog.mdx
@@ -10,6 +10,10 @@ toc: true
 
 ## 2024年12月 #17
 
+### 12月28日 #17.8
+
+- `export-toolbar-button`: 添加 `katex` 支持
+
 ### 12月27日 #17.7
 
 - `fixed-toolbar-buttons`: 添加 `font-size-toolbar-button`

diff --git a/apps/www/content/docs/en/components/changelog.mdx b/apps/www/content/docs/en/components/changelog.mdx
@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2024 #17
 
+### December 28 #17.8
+
+- `export-toolbar-button`: add `katex` support
+
 ### December 27 #17.7
 
 - `fixed-toolbar-buttons`: add `font-size-toolbar-button`

diff --git a/apps/www/public/r/styles/default/export-toolbar-button.json b/apps/www/public/r/styles/default/export-toolbar-button.json
diff --git a/apps/www/public/r/styles/default/slate-to-html.json b/apps/www/public/r/styles/default/slate-to-html.json
diff --git a/apps/www/src/__registry__/default/block/slate-to-html/page.tsx b/apps/www/src/__registry__/default/block/slate-to-html/page.tsx
@@ -45,6 +45,10 @@ import { BaseKbdPlugin } from '@udecode/plate-kbd';
 import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';
 import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseEquationPlugin,
+  BaseInlineEquationPlugin,
+} from '@udecode/plate-math';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
@@ -100,6 +104,7 @@ import { ColumnGroupElementStatic } from '@/registry/default/plate-ui/column-gro
 import { CommentLeafStatic } from '@/registry/default/plate-ui/comment-leaf-static';
 import { DateElementStatic } from '@/registry/default/plate-ui/date-element-static';
 import { EditorStatic } from '@/registry/default/plate-ui/editor-static';
+import { EquationElementStatic } from '@/registry/default/plate-ui/equation-element-static';
 import { HeadingElementStatic } from '@/registry/default/plate-ui/heading-element-static';
 import { HighlightLeafStatic } from '@/registry/default/plate-ui/highlight-leaf-static';
 import { HrElementStatic } from '@/registry/default/plate-ui/hr-element-static';
@@ -112,6 +117,7 @@ import {
   TodoLiStatic,
   TodoMarkerStatic,
 } from '@/registry/default/plate-ui/indent-todo-marker-static';
+import { InlineEquationElementStatic } from '@/registry/default/plate-ui/inline-equation-element-static';
 import { KbdLeafStatic } from '@/registry/default/plate-ui/kbd-leaf-static';
 import { LinkElementStatic } from '@/registry/default/plate-ui/link-element-static';
 import { MediaAudioElementStatic } from '@/registry/default/plate-ui/media-audio-element-static';
@@ -159,10 +165,12 @@ export default async function SlateToHtmlBlock() {
     [BaseColumnPlugin.key]: ColumnGroupElementStatic,
     [BaseCommentsPlugin.key]: CommentLeafStatic,
     [BaseDatePlugin.key]: DateElementStatic,
+    [BaseEquationPlugin.key]: EquationElementStatic,
     [BaseFilePlugin.key]: MediaFileElementStatic,
     [BaseHighlightPlugin.key]: HighlightLeafStatic,
     [BaseHorizontalRulePlugin.key]: HrElementStatic,
     [BaseImagePlugin.key]: ImageElementStatic,
+    [BaseInlineEquationPlugin.key]: InlineEquationElementStatic,
     [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),
     [BaseKbdPlugin.key]: KbdLeafStatic,
     [BaseLinkPlugin.key]: LinkElementStatic,
@@ -212,6 +220,8 @@ export default async function SlateToHtmlBlock() {
 
   const editor = createSlateEditor({
     plugins: [
+      BaseEquationPlugin,
+      BaseInlineEquationPlugin,
       BaseColumnPlugin,
       BaseColumnItemPlugin,
       BaseTocPlugin,
@@ -300,6 +310,8 @@ export default async function SlateToHtmlBlock() {
 
   const tailwindCss = await getCachedTailwindCss();
   const prismCss = await getCachedPrismCss();
+  const katexCDN = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;
+
   // const cookieStore = await cookies();
   // const theme = cookieStore.get('theme')?.value;
   const theme = 'light';
@@ -314,6 +326,7 @@ export default async function SlateToHtmlBlock() {
   // Create the full HTML document
   const html = createHtmlDocument({
     editorHtml,
+    katexCDN,
     prismCss,
     tailwindCss,
     theme,

diff --git a/apps/www/src/registry/default/block/slate-to-html/page.tsx b/apps/www/src/registry/default/block/slate-to-html/page.tsx
@@ -45,6 +45,10 @@ import { BaseKbdPlugin } from '@udecode/plate-kbd';
 import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';
 import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseEquationPlugin,
+  BaseInlineEquationPlugin,
+} from '@udecode/plate-math';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
@@ -100,6 +104,7 @@ import { ColumnGroupElementStatic } from '@/registry/default/plate-ui/column-gro
 import { CommentLeafStatic } from '@/registry/default/plate-ui/comment-leaf-static';
 import { DateElementStatic } from '@/registry/default/plate-ui/date-element-static';
 import { EditorStatic } from '@/registry/default/plate-ui/editor-static';
+import { EquationElementStatic } from '@/registry/default/plate-ui/equation-element-static';
 import { HeadingElementStatic } from '@/registry/default/plate-ui/heading-element-static';
 import { HighlightLeafStatic } from '@/registry/default/plate-ui/highlight-leaf-static';
 import { HrElementStatic } from '@/registry/default/plate-ui/hr-element-static';
@@ -112,6 +117,7 @@ import {
   TodoLiStatic,
   TodoMarkerStatic,
 } from '@/registry/default/plate-ui/indent-todo-marker-static';
+import { InlineEquationElementStatic } from '@/registry/default/plate-ui/inline-equation-element-static';
 import { KbdLeafStatic } from '@/registry/default/plate-ui/kbd-leaf-static';
 import { LinkElementStatic } from '@/registry/default/plate-ui/link-element-static';
 import { MediaAudioElementStatic } from '@/registry/default/plate-ui/media-audio-element-static';
@@ -128,6 +134,8 @@ import { TableRowElementStatic } from '@/registry/default/plate-ui/table-row-ele
 import { TocElementStatic } from '@/registry/default/plate-ui/toc-element-static';
 import { ToggleElementStatic } from '@/registry/default/plate-ui/toggle-element-static';
 
+import { equationValue } from '../../example/values/equation-value';
+
 export const description = 'Slate to HTML';
 
 export const iframeHeight = '800px';
@@ -159,10 +167,12 @@ export default async function SlateToHtmlBlock() {
     [BaseColumnPlugin.key]: ColumnGroupElementStatic,
     [BaseCommentsPlugin.key]: CommentLeafStatic,
     [BaseDatePlugin.key]: DateElementStatic,
+    [BaseEquationPlugin.key]: EquationElementStatic,
     [BaseFilePlugin.key]: MediaFileElementStatic,
     [BaseHighlightPlugin.key]: HighlightLeafStatic,
     [BaseHorizontalRulePlugin.key]: HrElementStatic,
     [BaseImagePlugin.key]: ImageElementStatic,
+    [BaseInlineEquationPlugin.key]: InlineEquationElementStatic,
     [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),
     [BaseKbdPlugin.key]: KbdLeafStatic,
     [BaseLinkPlugin.key]: LinkElementStatic,
@@ -196,7 +206,7 @@ export default async function SlateToHtmlBlock() {
     ...linkValue,
     ...horizontalRuleValue,
     ...tableValue,
-    ...mediaValue,
+    ...equationValue,
     ...columnValue,
     ...mentionValue,
     ...dateValue,
@@ -208,10 +218,13 @@ export default async function SlateToHtmlBlock() {
     ...lineHeightValue,
     ...indentValue,
     ...indentListValue,
+    ...mediaValue,
   ];
 
   const editor = createSlateEditor({
     plugins: [
+      BaseEquationPlugin,
+      BaseInlineEquationPlugin,
       BaseColumnPlugin,
       BaseColumnItemPlugin,
       BaseTocPlugin,
@@ -300,6 +313,8 @@ export default async function SlateToHtmlBlock() {
 
   const tailwindCss = await getCachedTailwindCss();
   const prismCss = await getCachedPrismCss();
+  const katexCDN = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;
+
   // const cookieStore = await cookies();
   // const theme = cookieStore.get('theme')?.value;
   const theme = 'light';
@@ -314,6 +329,7 @@ export default async function SlateToHtmlBlock() {
   // Create the full HTML document
   const html = createHtmlDocument({
     editorHtml,
+    katexCDN,
     prismCss,
     tailwindCss,
     theme,

diff --git a/apps/www/src/registry/default/lib/create-html-document.ts b/apps/www/src/registry/default/lib/create-html-document.ts
@@ -1,12 +1,14 @@
 export function createHtmlDocument({
   editorHtml,
+  katexCDN,
   prismCss,
   tailwindCss,
   theme,
 }: {
   editorHtml: string;
   prismCss: string;
   tailwindCss: string;
+  katexCDN?: string;
   theme?: string;
 }): string {
   return `<!DOCTYPE html>
@@ -17,6 +19,7 @@ export function createHtmlDocument({
     <meta name="color-scheme" content="light dark" />
     <style>${tailwindCss}</style>
     <style>${prismCss}</style>
+    ${katexCDN}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

diff --git a/apps/www/src/registry/default/plate-ui/equation-element-static.tsx b/apps/www/src/registry/default/plate-ui/equation-element-static.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { TEquationElement } from '@udecode/plate-math';
+
+import { cn } from '@udecode/cn';
+import { type SlateElementProps, SlateElement } from '@udecode/plate-common';
+import { getEquationHtml } from '@udecode/plate-math';
+
+export function EquationElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps) {
+  const element = props.element as TEquationElement;
+
+  const html = getEquationHtml({
+    element,
+    options: {
+      displayMode: true,
+      errorColor: '#cc0000',
+      fleqn: false,
+      leqno: false,
+      macros: { '\\f': '#1f(#2)' },
+      output: 'htmlAndMathml',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <SlateElement className={cn('relative my-1', className)} {...props}>
+      <div
+        className={cn(
+          'flex select-none items-center justify-center rounded-sm',
+          element.texExpression.length === 0 ? 'bg-muted p-3' : 'px-2 py-1'
+        )}
+      >
+        <span
+          dangerouslySetInnerHTML={{
+            __html: html,
+          }}
+        />
+      </div>
+      {children}
+    </SlateElement>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/export-toolbar-button.tsx
@@ -49,6 +49,10 @@ import { BaseKbdPlugin } from '@udecode/plate-kbd';
 import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';
 import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseEquationPlugin,
+  BaseInlineEquationPlugin,
+} from '@udecode/plate-math';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
@@ -113,6 +117,8 @@ import {
   useOpenState,
 } from './dropdown-menu';
 import { EditorStatic } from './editor-static';
+import { EquationElementStatic } from './equation-element-static';
+import { InlineEquationElementStatic } from './inline-equation-element-static';
 import { ToolbarButton } from './toolbar';
 
 const siteUrl = 'https://platejs.org';
@@ -197,10 +203,12 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
       [BaseColumnPlugin.key]: ColumnGroupElementStatic,
       [BaseCommentsPlugin.key]: CommentLeafStatic,
       [BaseDatePlugin.key]: DateElementStatic,
+      [BaseEquationPlugin.key]: EquationElementStatic,
       [BaseFilePlugin.key]: MediaFileElementStatic,
       [BaseHighlightPlugin.key]: HighlightLeafStatic,
       [BaseHorizontalRulePlugin.key]: HrElementStatic,
       [BaseImagePlugin.key]: ImageElementStatic,
+      [BaseInlineEquationPlugin.key]: InlineEquationElementStatic,
       [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),
       [BaseKbdPlugin.key]: KbdLeafStatic,
       [BaseLinkPlugin.key]: LinkElementStatic,
@@ -245,6 +253,8 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         BaseUnderlinePlugin,
         BaseBlockquotePlugin,
         BaseDatePlugin,
+        BaseEquationPlugin,
+        BaseInlineEquationPlugin,
         BaseCodeBlockPlugin.configure({
           options: {
             prism: Prism,
@@ -322,6 +332,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
 
     const prismCss = `<link rel="stylesheet" href="${siteUrl}/prism.css">`;
     const tailwindCss = `<link rel="stylesheet" href="${siteUrl}/tailwind.css">`;
+    const katexCss = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;
 
     const html = `<!DOCTYPE html>
     <html lang="en">
@@ -337,6 +348,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         />
         ${tailwindCss}
         ${prismCss}
+        ${katexCss}
         <style>
           :root {
             --font-sans: 'Inter', 'Inter Fallback';

diff --git a/apps/www/src/registry/default/plate-ui/inline-equation-element-static.tsx b/apps/www/src/registry/default/plate-ui/inline-equation-element-static.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { TEquationElement } from '@udecode/plate-math';
+
+import { cn } from '@udecode/cn';
+import { type SlateElementProps, SlateElement } from '@udecode/plate-common';
+import { getEquationHtml } from '@udecode/plate-math';
+
+export function InlineEquationElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps) {
+  const element = props.element as TEquationElement;
+
+  const html = getEquationHtml({
+    element,
+    options: {
+      displayMode: true,
+      errorColor: '#cc0000',
+      fleqn: false,
+      leqno: false,
+      macros: { '\\f': '#1f(#2)' },
+      output: 'htmlAndMathml',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <SlateElement
+      className={cn(
+        'inline-block select-none rounded-sm [&_.katex-display]:my-0',
+        className
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          'after:absolute after:inset-0 after:-left-1 after:-top-0.5 after:z-[1] after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
+          'h-6',
+          element.texExpression.length === 0 &&
+            'text-muted-foreground after:bg-neutral-500/10',
+          className
+        )}
+      >
+        <span
+          className={cn(
+            element.texExpression.length === 0 && 'hidden',
+            'font-mono leading-none'
+          )}
+          dangerouslySetInnerHTML={{
+            __html: html,
+          }}
+        />
+      </div>
+      {children}
+    </SlateElement>
+  );
+}