fix: export html by add static math component

udecode · Dec 28, 2024 · c32d3d6 · c32d3d6
1 parent 5c82edb
commit c32d3d6
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
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>
+  );
+}