docs

udecode · Dec 28, 2024 · 6fbf37a · 6fbf37a
1 parent c32d3d6
commit 6fbf37a
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 4 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/public/tailwind.css b/apps/www/public/tailwind.css
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