From 1d544bd8683ea4abb5f4f71556c6c2001958c1b2 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 26 Oct 2024 11:09:43 +0800
Subject: [PATCH] docs

---
 .../docs/components/block-context-menu.mdx    |  1 +
 .../content/docs/components/context-menu.mdx  | 69 +++++++++++++++++++
 .../docs/components/slash-input-element.mdx   |  7 +-
 apps/www/src/config/customizer-components.ts  |  4 ++
 apps/www/src/config/docs.ts                   |  1 +
 5 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/content/docs/components/context-menu.mdx

diff --git a/apps/www/content/docs/components/block-context-menu.mdx b/apps/www/content/docs/components/block-context-menu.mdx
index 9fc747a270..34acb7b461 100644
--- a/apps/www/content/docs/components/block-context-menu.mdx
+++ b/apps/www/content/docs/components/block-context-menu.mdx
@@ -37,6 +37,7 @@ Install the following dependencies:
 ```bash
 npm install @radix-ui/react-context-menu
 ```
+- [ContextMenu](/docs/components/context-menu)
 - [BlockSelection](/docs/block-selection)
 - [BlockMenu](/docs/block-menu)
 
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
new file mode 100644
index 0000000000..ebcb89cde2
--- /dev/null
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -0,0 +1,69 @@
+---
+title: Context Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
+  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add context-menu -r plate-ui
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/context-menu.tsx" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+```
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger>Right click</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
diff --git a/apps/www/content/docs/components/slash-input-element.mdx b/apps/www/content/docs/components/slash-input-element.mdx
index 6ace49c5eb..643782ceef 100644
--- a/apps/www/content/docs/components/slash-input-element.mdx
+++ b/apps/www/content/docs/components/slash-input-element.mdx
@@ -33,7 +33,9 @@ npx @udecode/plate-ui@latest add slash-input-element -r plate-ui
 
 Install the following dependencies:
 
-- [SlashCommand](/docs/slash-command)
+- [Combobox](/docs/combobox)
+- [Slash Command](/docs/slash-command)
+- [InlineCombobox](/docs/components/inline-combobox)
 
 </Step>
 
@@ -44,6 +46,7 @@ Copy and paste the following code into your project.
 </Step>
 
 <ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx" />
 
 <Step>
 
@@ -62,6 +65,8 @@ Update the import paths to match your project setup.
 <ComponentPreview name="playground-demo" id="slashCommand" />
 
 <ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/slash-input-element.tsx" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx" />
+
 
 ## Plate Plus
 
diff --git a/apps/www/src/config/customizer-components.ts b/apps/www/src/config/customizer-components.ts
index 7a5e5a9479..d2ba187c47 100644
--- a/apps/www/src/config/customizer-components.ts
+++ b/apps/www/src/config/customizer-components.ts
@@ -83,6 +83,10 @@ export const customizerComponents = {
     href: '/docs/components/comments-popover',
     title: 'Comments Popover',
   },
+  contextMenu: {
+    href: '/docs/components/context-menu',
+    title: 'Context Menu',
+  },
   cursorOverlay: {
     href: '/docs/components/cursor-overlay',
     title: 'Cursor Overlay',
diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts
index 1cebeb26c2..d7ad8f897e 100644
--- a/apps/www/src/config/docs.ts
+++ b/apps/www/src/config/docs.ts
@@ -65,6 +65,7 @@ export const docsConfig: DocsConfig = {
         customizerComponents.codeLineElement,
         customizerComponents.codeSyntaxLeaf,
         customizerComponents.colorDropdownMenu,
+        customizerComponents.contextMenu,
         customizerComponents.command,
         customizerComponents.commentLeaf,
         customizerComponents.commentToolbarButton,