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

Base plugin
udecode · Sep 13, 2024 · b2fc349 · b2fc349
2 parents a91c95e + 37c595e
commit b2fc349
Show file tree

Hide file tree

Showing 977 changed files with 7,865 additions and 7,821 deletions.
diff --git a/.changeset/famous-queens-compare.md b/.changeset/famous-queens-compare.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': patch
+---
+
+Upgrade `clsx`
diff --git a/.changeset/honest-shrimps-invent.md b/.changeset/honest-shrimps-invent.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-juice': patch
+---
+
+Upgrade `juice`
diff --git a/.changeset/hot-socks-rhyme.md b/.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`
diff --git a/.changeset/new-carrots-happen.md b/.changeset/new-carrots-happen.md
@@ -0,0 +1,6 @@
+---
+'@udecode/react-utils': patch
+---
+
+- `withRef` support `[email protected]`
+- Upgrade dependencies
diff --git a/.changeset/nice-mayflies-clean.md b/.changeset/nice-mayflies-clean.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-markdown': patch
+---
+
+Upgrade `unified`
diff --git a/.changeset/quiet-masks-beg.md b/.changeset/quiet-masks-beg.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-floating': patch
+---
+
+Upgrade `@floating-ui/core` and` @floating-ui/react`
diff --git a/.changeset/seven-phones-doubt.md b/.changeset/seven-phones-doubt.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-yjs': patch
+---
+
+Upgrade `yjs`, `@hocuspocus/provider`
diff --git a/.changeset/weak-humans-buy.md b/.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
diff --git a/.yarn/releases/yarn-4.1.0.cjs b/.yarn/releases/yarn-4.1.0.cjs
diff --git a/.yarn/releases/yarn-4.4.1.cjs b/.yarn/releases/yarn-4.4.1.cjs
diff --git a/.yarnrc.yml b/.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
diff --git a/BREAKING_CHANGES.md b/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/[email protected]` in one-go.
+
 ## @udecode/plate-alignment@37.0.0
 
 ### Major Changes

diff --git a/apps/www/content/docs/components/changelog.mdx b/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

diff --git a/apps/www/content/docs/html.mdx b/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: {

diff --git a/apps/www/content/docs/toggle.mdx b/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';

diff --git a/apps/www/package.json b/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"
   }
 }
diff --git a/apps/www/public/registry/styles/default/align-dropdown-menu.json b/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"
     }
   ],

diff --git a/apps/www/public/registry/styles/default/blockquote-element.json b/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"
     }
   ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,4 +18,4 @@ supportedArchitectures: @@
       os:
         - current
-    yarnPath: .yarn/releases/yarn-4.1.0.cjs
+    yarnPath: .yarn/releases/yarn-4.4.1.cjs