Merge pull request #3526 from udecode/refactor/base-plugin

Base plugin

.changeset/famous-queens-compare.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': patch
+---
+
+Upgrade `clsx`

.changeset/honest-shrimps-invent.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-juice': patch
+---
+
+Upgrade `juice`

.changeset/hot-socks-rhyme.md

@@ -0,0 +1,47 @@
+---
+'@udecode/plate-horizontal-rule': patch
+'@udecode/plate-basic-elements': patch
+'@udecode/plate-trailing-block': patch
+'@udecode/plate-slash-command': patch
+'@udecode/plate-basic-marks': patch
+'@udecode/plate-block-quote': patch
+'@udecode/plate-indent-list': patch
+'@udecode/plate-line-height': patch
+'@udecode/plate-normalizers': patch
+'@udecode/plate-autoformat': patch
+'@udecode/plate-code-block': patch
+'@udecode/plate-excalidraw': patch
+'@udecode/plate-reset-node': patch
+'@udecode/plate-suggestion': patch
+'@udecode/plate-alignment': patch
+'@udecode/plate-highlight': patch
+'@udecode/plate-combobox': patch
+'@udecode/plate-comments': patch
+'@udecode/plate-tabbable': patch
+'@udecode/plate-callout': patch
+'@udecode/plate-caption': patch
+'@udecode/plate-heading': patch
+'@udecode/plate-mention': patch
+'@udecode/plate-node-id': patch
+'@udecode/plate-indent': patch
+'@udecode/plate-layout': patch
+'@udecode/plate-select': patch
+'@udecode/plate-toggle': patch
+'@udecode/plate-break': patch
+'@udecode/plate-cloud': patch
+'@udecode/plate-emoji': patch
+'@udecode/plate-media': patch
+'@udecode/plate-table': patch
+'@udecode/plate-date': patch
+'@udecode/plate-docx': patch
+'@udecode/plate-font': patch
+'@udecode/plate-html': patch
+'@udecode/plate-link': patch
+'@udecode/plate-list': patch
+'@udecode/plate-math': patch
+'@udecode/plate-csv': patch
+'@udecode/plate-kbd': patch
+'@udecode/plate-yjs': patch
+---
+
+Prefix base plugin with `Base`

.changeset/new-carrots-happen.md

@@ -0,0 +1,6 @@
+---
+'@udecode/react-utils': patch
+---
+
+- `withRef` support `typescript@5.6.x`
+- Upgrade dependencies

.changeset/nice-mayflies-clean.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-markdown': patch
+---
+
+Upgrade `unified`

.changeset/quiet-masks-beg.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Upgrade `@floating-ui/core` and` @floating-ui/react`

.changeset/seven-phones-doubt.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-yjs': patch
+---
+
+Upgrade `yjs`, `@hocuspocus/provider`

.changeset/weak-humans-buy.md

@@ -0,0 +1,7 @@
+---
+'@udecode/plate-core': patch
+---
+
+- Rename all base plugins that have a React plugin counterpart to be prefixed with `Base`. This change improves clarity and distinguishes base implementations from potential React extensions. Use base plugins only for server-side environments or to extend your own DOM layer.
+- Import the following plugins from `/react` entry: `AlignPlugin`, `CalloutPlugin`, `EquationPlugin`, `FontBackgroundColorPlugin`, `FontColorPlugin`, `FontFamilyPlugin`, `FontSizePlugin`, `FontWeightPlugin`, `InlineEquationPlugin`, `LineHeightPlugin`, `TextIndentPlugin`, `TocPlugin`
+- Upgrade dependencies

.yarnrc.yml

@@ -18,4 +18,4 @@ supportedArchitectures:
  os:
  - current
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.4.1.cjs

BREAKING_CHANGES.md

@@ -1,8 +1,8 @@
 For older changelogs, see https://github.com/udecode/plate/blob/main/docs
 
-# 38.0.0
+# 38.0.1
 
-## @udecode/plate-core@38.0.0
+## @udecode/plate-core@38.0.1
 
 ### Major Changes
 
@@ -46,10 +46,15 @@ For older changelogs, see https://github.com/udecode/plate/blob/main/docs
  - If you're using nested options and want to preserve the previous behavior, you need to manually spread both the top-level options and the nested objects.
  - If you're not using nested options, no changes are required.
 
+- Rename all base plugins that have a React plugin counterpart to be prefixed with `Base`. This change improves clarity and distinguishes base implementations from potential React extensions. Use base plugins only for server-side environments or to extend your own DOM layer.
+- Import the following plugins from `/react` entry: `AlignPlugin`, `CalloutPlugin`, `EquationPlugin`, `FontBackgroundColorPlugin`, `FontColorPlugin`, `FontFamilyPlugin`, `FontSizePlugin`, `FontWeightPlugin`, `InlineEquationPlugin`, `LineHeightPlugin`, `TextIndentPlugin`, `TocPlugin`
+
 # 37.0.0
 
 Migration example: https://github.com/udecode/plate/pull/3480
 
+We recommend to upgrade to `@udecode/plate-core@38.1.0` in one-go.
+
 ## @udecode/plate-alignment@37.0.0
 
 ### Major Changes

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

@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## September 2024 #14
 
+### September 13 #14.2
+
+- fix `code-block-combobox`: filter based on label or value
+
 ### September 10 #14.1
 
 - fix `floating-toolbar`: show toolbar when readOnly

apps/www/content/docs/html.mdx

@@ -118,7 +118,7 @@ Plugins can define various properties to control HTML deserialization:
 You can extend or customize the deserialization behavior of any plugin. Here's an example of how you might extend the `CodeBlockPlugin`:
 
 ```typescript
-import { CodeBlockPlugin } from '@udecode/plate-code-block';
+import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
 
 const CustomCodeBlockPlugin = CodeBlockPlugin.extend({
  parsers: {

apps/www/content/docs/toggle.mdx

@@ -35,7 +35,7 @@ npm install @udecode/plate-indent @udecode/plate-node-id @udecode/plate-toggle
 
 ```tsx
 // ...
-import { ParagraphPlugin } from '@udecode/plate-common';
+import { ParagraphPlugin } from '@udecode/plate-common/react';
 import { NodeIdPlugin } from '@udecode/plate-node-id';
 import { IndentPlugin } from '@udecode/plate-indent/react';
 import { TogglePlugin } from '@udecode/plate-toggle/react';

apps/www/package.json

@@ -35,39 +35,38 @@
  "react-dom": "^18.2.0"
  },
  "dependencies": {
- "@ariakit/react": "0.4.6",
- "@faker-js/faker": "^8.4.1",
- "@radix-ui/colors": "1.0.1",
- "@radix-ui/react-accessible-icon": "^1.0.3",
- "@radix-ui/react-accordion": "^1.1.2",
- "@radix-ui/react-alert-dialog": "^1.0.5",
- "@radix-ui/react-aspect-ratio": "^1.0.3",
- "@radix-ui/react-avatar": "^1.0.4",
- "@radix-ui/react-checkbox": "^1.0.4",
- "@radix-ui/react-collapsible": "^1.0.3",
- "@radix-ui/react-context-menu": "^2.1.5",
- "@radix-ui/react-dialog": "^1.0.5",
- "@radix-ui/react-dropdown-menu": "^2.0.6",
- "@radix-ui/react-hover-card": "^1.0.7",
+ "@ariakit/react": "0.4.11",
+ "@radix-ui/colors": "3.0.0",
+ "@radix-ui/react-accessible-icon": "^1.1.0",
+ "@radix-ui/react-accordion": "^1.2.0",
+ "@radix-ui/react-alert-dialog": "^1.1.1",
+ "@radix-ui/react-aspect-ratio": "^1.1.0",
+ "@radix-ui/react-avatar": "^1.1.0",
+ "@radix-ui/react-checkbox": "^1.1.1",
+ "@radix-ui/react-collapsible": "^1.1.0",
+ "@radix-ui/react-context-menu": "^2.2.1",
+ "@radix-ui/react-dialog": "^1.1.1",
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
+ "@radix-ui/react-hover-card": "^1.1.1",
  "@radix-ui/react-icons": "^1.3.0",
- "@radix-ui/react-label": "^2.0.2",
- "@radix-ui/react-menubar": "^1.0.4",
- "@radix-ui/react-navigation-menu": "^1.1.4",
- "@radix-ui/react-popover": "^1.0.7",
- "@radix-ui/react-progress": "^1.0.3",
- "@radix-ui/react-radio-group": "^1.1.3",
- "@radix-ui/react-scroll-area": "^1.0.5",
- "@radix-ui/react-select": "^2.0.0",
- "@radix-ui/react-separator": "^1.0.3",
- "@radix-ui/react-slider": "^1.1.2",
- "@radix-ui/react-slot": "^1.0.2",
- "@radix-ui/react-switch": "^1.0.3",
- "@radix-ui/react-tabs": "^1.0.4",
- "@radix-ui/react-toast": "^1.1.5",
- "@radix-ui/react-toggle": "^1.0.3",
- "@radix-ui/react-toggle-group": "^1.0.4",
- "@radix-ui/react-toolbar": "^1.0.4",
- "@radix-ui/react-tooltip": "^1.0.7",
+ "@radix-ui/react-label": "^2.1.0",
+ "@radix-ui/react-menubar": "^1.1.1",
+ "@radix-ui/react-navigation-menu": "^1.2.0",
+ "@radix-ui/react-popover": "^1.1.1",
+ "@radix-ui/react-progress": "^1.1.0",
+ "@radix-ui/react-radio-group": "^1.2.0",
+ "@radix-ui/react-scroll-area": "^1.1.0",
+ "@radix-ui/react-select": "^2.1.1",
+ "@radix-ui/react-separator": "^1.1.0",
+ "@radix-ui/react-slider": "^1.2.0",
+ "@radix-ui/react-slot": "^1.1.0",
+ "@radix-ui/react-switch": "^1.1.0",
+ "@radix-ui/react-tabs": "^1.1.0",
+ "@radix-ui/react-toast": "^1.2.1",
+ "@radix-ui/react-toggle": "^1.1.0",
+ "@radix-ui/react-toggle-group": "^1.1.0",
+ "@radix-ui/react-toolbar": "^1.1.0",
+ "@radix-ui/react-tooltip": "^1.1.2",
  "@udecode/cn": "workspace:^",
  "@udecode/plate": "workspace:^",
  "@udecode/plate-alignment": "workspace:^",
@@ -130,69 +129,67 @@
  "@udecode/slate-react": "workspace:^",
  "@udecode/slate-utils": "workspace:^",
  "@udecode/utils": "workspace:^",
- "@vercel/analytics": "^1.2.2",
  "@vercel/og": "^0.6.2",
  "class-variance-authority": "^0.7.0",
- "cmdk": "^0.2.0",
+ "cmdk": "^1.0.0",
  "contentlayer2": "^0.4.6",
- "date-fns": "^2.30.0",
- "framer-motion": "^10.18.0",
+ "date-fns": "^3.6.0",
+ "framer-motion": "^11.5.4",
  "lodash.template": "^4.5.0",
- "lucide-react": "^0.408.0",
+ "lucide-react": "^0.441.0",
  "next": "14.3.0-canary.43",
  "next-contentlayer2": "^0.4.6",
- "next-themes": "^0.2.1",
- "nuqs": "^1.17.1",
- "prism-react-renderer": "^1.3.5",
+ "next-themes": "^0.3.0",
+ "nuqs": "^1.19.1",
  "prismjs": "^1.29.0",
- "react": "^18.2.0",
- "react-day-picker": "^8.10.1 ",
+ "react": "^18.3.1",
+ "react-day-picker": "^8.10.1",
  "react-dnd": "16.0.1",
  "react-dnd-html5-backend": "^16.0.1",
- "react-dom": "^18.2.0",
+ "react-dom": "^18.3.1",
  "react-lite-youtube-embed": "^2.4.0",
- "react-markdown": "8.0.7",
+ "react-markdown": "9.0.1",
  "react-resizable-panels": "^0.0.55",
  "react-syntax-highlighter": "^15.5.0",
- "react-tweet": "^3.2.0",
- "react-wrap-balancer": "^1.1.0",
- "sass": "^1.72.0",
+ "react-tweet": "^3.2.1",
+ "react-wrap-balancer": "^1.1.1",
+ "sass": "^1.78.0",
  "slate": "0.103.0",
- "slate-history": "0.100.0",
+ "slate-history": "0.109.0",
  "slate-hyperscript": "0.100.0",
- "slate-react": "0.108.0",
+ "slate-react": "0.110.1",
  "slate-test-utils": "1.3.2",
- "sonner": "^1.4.32",
+ "sonner": "^1.5.0",
  "swr": "2.2.6-beta.3",
- "tailwind-merge": "^2.2.2",
+ "tailwind-merge": "^2.5.2",
  "ts-morph": "^22.0.0",
  "unist-builder": "4.0.0",
  "unist-util-visit": "^5.0.0",
- "vaul": "^0.9.1"
+ "vaul": "^0.9.2"
  },
  "devDependencies": {
- "@shikijs/compat": "^1.1.7",
+ "@shikijs/compat": "^1.17.5",
  "@types/lodash.template": "^4.5.3",
  "@types/react-color": "^3.0.12",
- "@types/react-syntax-highlighter": "^15.5.11",
- "autoprefixer": "^10.4.18",
- "concurrently": "^8.2.2",
+ "@types/react-syntax-highlighter": "^15.5.13",
+ "autoprefixer": "^10.4.20",
+ "concurrently": "^9.0.1",
  "glob": "^11.0.0",
- "mdast-util-toc": "^6.1.1",
- "postcss": "^8.4.38",
+ "mdast-util-toc": "^7.1.0",
+ "postcss": "^8.4.45",
  "rehype": "^12.0.1",
  "rehype-autolink-headings": "^6.1.1",
  "rehype-pretty-code": "^0.6.0",
  "rehype-slug": "^5.1.0",
  "remark": "^14.0.3",
  "remark-code-import": "^1.2.0",
  "remark-gfm": "^4.0.0",
- "rimraf": "^5.0.5",
- "shiki": "^1.10.1",
- "tailwindcss": "^3.4.1",
+ "rimraf": "^6.0.1",
+ "shiki": "^1.17.5",
+ "tailwindcss": "^3.4.11",
  "tailwindcss-animate": "^1.0.7",
  "ts-node": "^10.9.2",
- "tsx": "^4.7.1",
- "typescript": "5.4.2"
+ "tsx": "^4.19.1",
+ "typescript": "5.6.2"
  }
 }

apps/www/public/registry/styles/default/align-dropdown-menu.json

@@ -4,7 +4,7 @@
  ],
  "files": [
  {
- "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton isDropdown pressed={openState.open} tooltip=\"Align\">\n <IconValue />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent align=\"start\" className=\"min-w-0\">\n <DropdownMenuRadioGroup\n className=\"flex flex-col gap-0.5\"\n {...radioGroupProps}\n >\n {items.map(({ icon: Icon, value: itemValue }) => (\n <DropdownMenuRadioItem hideIcon key={itemValue} value={itemValue}>\n <Icon className={iconVariants({ variant: 'toolbar' })} />\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
+ "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n <IconValue />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n <DropdownMenuRadioGroup\n className=\"flex flex-col gap-0.5\"\n {...radioGroupProps}\n >\n {items.map(({ icon: Icon, value: itemValue }) => (\n <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n <Icon className={iconVariants({ variant: 'toolbar' })} />\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
  "name": "align-dropdown-menu.tsx"
  }
  ],

apps/www/public/registry/styles/default/blockquote-element.json

@@ -4,7 +4,7 @@
  ],
  "files": [
  {
- "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement\n asChild\n className={cn('my-1 border-l-2 pl-6 italic', className)}\n ref={ref}\n {...props}\n >\n <blockquote>{children}</blockquote>\n </PlateElement>\n );\n }\n);\n",
+ "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement\n ref={ref}\n asChild\n className={cn('my-1 border-l-2 pl-6 italic', className)}\n {...props}\n >\n <blockquote>{children}</blockquote>\n </PlateElement>\n );\n }\n);\n",
  "name": "blockquote-element.tsx"
  }
  ],