Merge pull request #3697 from udecode/refactor/remove-icons

Styling

Author: zbeyens

.changeset/lovely-weeks-act.md

@@ -0,0 +1,5 @@
+---
+'@udecode/slate-utils': patch
+---
+
+Fix `getSelectionFragment` to support collapsed selection

.changeset/tiny-bees-return.md

@@ -0,0 +1,5 @@
+---
+'shadcx': patch
+---
+
+shadcn sync

apps/www/content/docs/collaboration.mdx

@@ -34,14 +34,14 @@ const editor = createPlateEditor({
   plugins: [
     // ...otherPlugins,
     YjsPlugin.configure({
-        options: {
-          hocuspocusProviderOptions: {
+      options: {
+        hocuspocusProviderOptions: {
           url: "https://hocuspocus.test/hocuspocus",
           name: "test",
-        }
+        },
       },
     }),
-  ]
+  ],
 });
 ```
 

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

@@ -13,8 +13,45 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ### October 31 #15.6
 
-- Fixed and modified some styles in emoji and color picker
-- Remove `Icons` file dependency. All icons are now imported from `lucide-react`.
+- Added `lib/transforms.ts`. Contains useful transforms for common operations.
+- Removed `Icons` file dependency. All icons are now imported from `lucide-react`.
+- Fixed and modified some styles in emoji and color picker.
+- Group styling: 
+  - `dropdown-menu`
+  - `context-menu`
+  - `inline-combobox`
+- Added groups and items to `slash-input-element`
+- Spacing and sizing update:
+  - `ai-menu-items.tsx`
+  - `align-dropdown-menu.tsx`
+  - `block-context-menu.tsx`
+  - `button.tsx`
+  - `code-block-combobox.tsx`
+  - `color-dropdown-menu-items.tsx`
+  - `color-picker.tsx`
+  - `column-group-element.tsx`
+  - `command.tsx`
+  - `comment-more-dropdown.tsx`
+  - `context-menu.tsx`
+  - `dropdown-menu.tsx`
+  - `emoji-dropdown-menu.tsx`
+  - `emoji-input-element.tsx`
+  - `image-preview.tsx`
+  - `inline-combobox.tsx`
+  - `input.tsx`
+  - `insert-dropdown-menu.tsx`
+  - `line-height-dropdown-menu.tsx`
+  - `link-floating-toolbar.tsx`
+  - `media-popover.tsx`
+  - `mention-input-element.tsx`
+  - `mode-dropdown-menu.tsx`
+  - `more-dropdown-menu.tsx`
+  - `popover.tsx`
+  - `slash-input-element.tsx`
+  - `table-dropdown-menu.tsx`
+  - `table-element.tsx`
+  - `toggle-element.tsx`
+  - `toggle-toolbar-button.tsx`
 
 ### October 26 #15.5
 

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

@@ -40,7 +40,9 @@ Options:
   -y, --yes         skip confirmation prompt. (default: false)
   -c, --cwd <cwd>   the working directory. defaults to the current directory.
   -u, --url <url>   custom registry URL. (default: https://platejs.org/r)
-  -n, --name <name> registry name. (default: plate-ui)
+  -n, --name <name> registry name. (default: plate)
+  -s, --silent      mute output (default: false)
+  --src-dir         use the src directory when creating a new project (default: false)
   -h, --help        display help for command
 ```
 
@@ -49,7 +51,7 @@ Options:
 Use the `add` command to add Plate UI components and dependencies to your project.
 
 ```bash
-npx shadcx@latest add [component]
+npx shadcx@latest add [component] -r plate
 ```
 
 You will be presented with a list of components to choose from:
@@ -84,6 +86,11 @@ Options:
   -o, --overwrite   overwrite existing files. (default: false)
   -c, --cwd <cwd>   the working directory. defaults to the current directory.
   -p, --path <path> the path to add the component to.
+  -a, --all         add all available components (default: false)
+  -s, --silent      mute output (default: false)
+  --src-dir         use the src directory when creating a new project (default: false)
+  -r, --registry    registry name or url
+  -l, --list        list all available registries (default: false)
   -h, --help        display help for command
 ```
 
@@ -98,7 +105,7 @@ npx shadcx@latest init -u https://platejs.org/r -n plate -c ./apps/www
 or
 
 ```bash
-npx shadcx@latest add align-dropdown-menu -c ./apps/www
+npx shadcx@latest add align-dropdown-menu -r plate -c ./apps/www
 ```
 
 ## Example components.json
@@ -119,7 +126,7 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s
     "utils": "@/lib/utils"
   },
   "registries": {
-    "plate-ui": {
+    "plate": {
       "url": "https://platejs.org/r",
       "style": "default",
       "aliases": {

apps/www/content/docs/components/components-json.mdx

@@ -196,7 +196,7 @@ The `registries` section allows you to configure multiple component registries f
 ```json title="components.json"
 {
   "registries": {
-    "plate-ui": {
+    "plate": {
       "url": "https://platejs.org/r",
       "style": "default",
       "aliases": {

apps/www/content/docs/components/installation/next.mdx

@@ -7,6 +7,10 @@ description: Install and configure Next.js.
 
 A [template](https://github.com/udecode/plate/tree/main/templates/plate-template) is available to help you get started quickly.
 
+<Callout>
+**If you're using Next.js 15, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/installation/react-19) guide.**
+</Callout>
+
 </Callout>
 
 <Steps>

apps/www/content/docs/components/installation/vite.mdx

@@ -23,6 +23,28 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
+Add this import header in your main css file, `src/index.css` in our case:
+
+```css {1-3} showLineNumbers
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* ... */
+```
+
+Configure the tailwind template paths in `tailwind.config.js`:
+
+```js {3}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
 ### Edit tsconfig.json file
 
 The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.

apps/www/public/r/index.json

@@ -701,30 +701,18 @@
   },
   {
     "dependencies": [
-      "@udecode/plate-heading",
       "@udecode/plate-ai",
+      "@udecode/plate-block-quote",
+      "@udecode/plate-code-block",
       "@udecode/plate-date",
-      "@udecode/plate-indent-list"
+      "@udecode/plate-heading",
+      "@udecode/plate-indent-list",
+      "@udecode/plate-table",
+      "@udecode/plate-toggle"
     ],
     "doc": {
       "description": "A command input component for inserting various elements.",
       "docs": [
-        {
-          "route": "/docs/ai",
-          "title": "AI"
-        },
-        {
-          "route": "/docs/basic-elements",
-          "title": "Basic Elements"
-        },
-        {
-          "route": "/docs/date",
-          "title": "Date"
-        },
-        {
-          "route": "/docs/indent-list",
-          "title": "Indent List"
-        },
         {
           "route": "https://pro.platejs.org/docs/components/slash-input-element"
         }
@@ -744,7 +732,8 @@
     "name": "slash-input-element",
     "registryDependencies": [
       "inline-combobox",
-      "plate-element"
+      "plate-element",
+      "transforms"
     ],
     "type": "registry:ui"
   },
@@ -896,6 +885,7 @@
     ],
     "name": "toggle-element",
     "registryDependencies": [
+      "button",
       "plate-element"
     ],
     "type": "registry:ui"
@@ -1641,16 +1631,14 @@
   },
   {
     "dependencies": [
-      "@udecode/plate-basic-marks"
+      "@udecode/plate-basic-marks",
+      "@udecode/plate-font",
+      "@udecode/plate-indent-list",
+      "@udecode/plate-list",
+      "@udecode/plate-media"
     ],
     "doc": {
       "description": "A set of commonly used formatting buttons.",
-      "docs": [
-        {
-          "route": "/docs/basic-marks",
-          "title": "Basic Marks"
-        }
-      ],
       "examples": [
         "toolbar-demo"
       ]
@@ -1664,9 +1652,25 @@
     "name": "fixed-toolbar-buttons",
     "registryDependencies": [
       "toolbar",
+      "ai-toolbar-button",
+      "align-dropdown-menu",
+      "color-dropdown-menu",
+      "comment-toolbar-button",
+      "emoji-dropdown-menu",
+      "indent-list-toolbar-button",
+      "indent-todo-toolbar-button",
+      "indent-toolbar-button",
       "insert-dropdown-menu",
+      "line-height-dropdown-menu",
+      "link-toolbar-button",
+      "list-toolbar-button",
       "mark-toolbar-button",
+      "media-toolbar-button",
       "mode-dropdown-menu",
+      "more-dropdown-menu",
+      "outdent-toolbar-button",
+      "table-dropdown-menu",
+      "toggle-toolbar-button",
       "turn-into-dropdown-menu"
     ],
     "type": "registry:ui"
@@ -1715,6 +1719,10 @@
     ],
     "name": "floating-toolbar-buttons",
     "registryDependencies": [
+      "toolbar",
+      "ai-toolbar-button",
+      "comment-toolbar-button",
+      "link-toolbar-button",
       "mark-toolbar-button",
       "more-dropdown-menu",
       "turn-into-dropdown-menu"
@@ -1929,18 +1937,21 @@
   },
   {
     "dependencies": [
+      "@radix-ui/react-dropdown-menu",
       "@udecode/plate-block-quote",
+      "@udecode/plate-code-block",
+      "@udecode/plate-date",
+      "@udecode/plate-excalidraw",
       "@udecode/plate-heading",
-      "@radix-ui/react-dropdown-menu"
+      "@udecode/plate-horizontal-rule",
+      "@udecode/plate-indent-list",
+      "@udecode/plate-link",
+      "@udecode/plate-media",
+      "@udecode/plate-table",
+      "@udecode/plate-toggle"
     ],
     "doc": {
       "description": "A menu for inserting different types of blocks.",
-      "docs": [
-        {
-          "route": "/docs/basic-elements",
-          "title": "Basic Elements"
-        }
-      ],
       "examples": [
         "basic-nodes-demo"
       ]
@@ -1954,7 +1965,8 @@
     "name": "insert-dropdown-menu",
     "registryDependencies": [
       "dropdown-menu",
-      "toolbar"
+      "toolbar",
+      "transforms"
     ],
     "type": "registry:ui"
   },
@@ -2199,8 +2211,10 @@
   },
   {
     "dependencies": [
+      "@radix-ui/react-dropdown-menu",
       "@udecode/plate-basic-marks",
-      "@radix-ui/react-dropdown-menu"
+      "@udecode/plate-highlight",
+      "@udecode/plate-kbd"
     ],
     "doc": {
       "description": "A menu for additional text formatting options.",
@@ -2400,22 +2414,16 @@
   },
   {
     "dependencies": [
+      "@radix-ui/react-dropdown-menu",
       "@udecode/plate-block-quote",
+      "@udecode/plate-code-block",
       "@udecode/plate-heading",
       "@udecode/plate-indent-list",
-      "@radix-ui/react-dropdown-menu"
+      "@udecode/plate-toggle"
     ],
     "doc": {
       "description": "A menu for converting between different block types.",
       "docs": [
-        {
-          "route": "/docs/basic-elements",
-          "title": "Basic Elements"
-        },
-        {
-          "route": "/docs/indent-list",
-          "title": "Indent List"
-        },
         {
           "route": "https://pro.platejs.org/docs/components/turn-into-dropdown-menu"
         }
@@ -2434,7 +2442,8 @@
     "name": "turn-into-dropdown-menu",
     "registryDependencies": [
       "dropdown-menu",
-      "toolbar"
+      "toolbar",
+      "transforms"
     ],
     "type": "registry:ui"
   }