Merge pull request #3923 from wststone/fix/equation-input-undo

fix: equation input undo regession

.changeset/rotten-cobras-yawn.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-math': patch
+---
+
+fix: equation input undo history not working.

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

@@ -10,6 +10,13 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2024 #17
 
+### December 27 #17.7
+
+- `floating-toolbar`: add `inline-equation-toolbar-button`
+- `turn-into-dropdown-menu`: Fix: after turn into other block, the editor should regain focus.
+- `insert-dropdown-menu`: add `inline equation` and `equation` & fix the focus issue
+- `slash-input-element`: add `equation` and `inline equation`
+
 ### December 25 #17.6
 
 - `indent-list-toolbar-button`: Remove `IndentListToolbarButton` use `NumberedIndentListToolbarButton` and `BulletedIndentListToolbarButton` instead.

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

@@ -9,6 +9,8 @@ docs:
     title: Inline Equation Toolbar Button
 ---
 
+<ComponentPreview name="equation-demo" />
+
 <PackageInfo>
 
 ## Features
@@ -63,7 +65,7 @@ const components = {
 
 ### Plate UI
 
-Work in progress.
+Refer to the preview above.
 
 ### Plate Plus
 

apps/www/package.json

@@ -166,6 +166,7 @@
     "react-player": "2.16.0",
     "react-resizable-panels": "^2.0.22",
     "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.5.5",
     "react-tweet": "^3.2.1",
     "react-wrap-balancer": "^1.1.1",
     "remark-emoji": "5.0.1",

apps/www/public/r/index.json

@@ -344,6 +344,67 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-math"
+    ],
+    "doc": {
+      "description": "Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.",
+      "docs": [
+        {
+          "route": "https://platejs.org/docs/equation",
+          "title": "Equation"
+        }
+      ],
+      "examples": [
+        "equation-demo"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/equation-element.tsx",
+        "type": "registry:ui"
+      },
+      {
+        "path": "plate-ui/equation-popover.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "equation-element",
+    "registryDependencies": [
+      "popover"
+    ],
+    "type": "registry:ui"
+  },
+  {
+    "dependencies": [
+      "@udecode/plate-math"
+    ],
+    "doc": {
+      "description": "A toolbar button for inserting and editing inline equations.",
+      "docs": [
+        {
+          "route": "https://platejs.org/docs/equation",
+          "title": "Equation"
+        }
+      ],
+      "examples": [
+        "equation-demo",
+        "floating-toolbar-demo"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/inline-equation-toolbar-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "inline-equation-toolbar-button",
+    "registryDependencies": [
+      "toolbar"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-emoji"

apps/www/public/r/styles/default/color-dropdown-menu.json

@@ -43,7 +43,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup label=\"Custom Colors\">\n          <ColorCustom\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup label=\"Default Colors\">\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem className=\"p-2\" onClick={clearColor}>\n              <EraserIcon />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n  type TColor,\n  ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport {\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n} from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n  'div',\n  {\n    clearColor: () => void;\n    colors: TColor[];\n    customColors: TColor[];\n    updateColor: (color: string) => void;\n    updateCustomColor: (color: string) => void;\n    color?: string;\n  }\n>(\n  (\n    {\n      className,\n      clearColor,\n      color,\n      colors,\n      customColors,\n      updateColor,\n      updateCustomColor,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Custom Colors</DropdownMenuLabel>\n          <ColorCustom\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            customColors={customColors}\n            updateColor={updateColor}\n            updateCustomColor={updateCustomColor}\n          />\n        </DropdownMenuGroup>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Default Colors</DropdownMenuLabel>\n          <ColorDropdownMenuItems\n            color={color}\n            className=\"px-2\"\n            colors={colors}\n            updateColor={updateColor}\n          />\n        </DropdownMenuGroup>\n        {color && (\n          <DropdownMenuGroup>\n            <DropdownMenuItem className=\"p-2\" onClick={clearColor}>\n              <EraserIcon />\n              <span>Clear</span>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const ColorPicker = React.memo(\n  ColorPickerContent,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.customColors === next.customColors\n);\n",
       "path": "plate-ui/color-picker.tsx",
       "target": "components/plate-ui/color-picker.tsx",
       "type": "registry:ui"