-
-
Notifications
You must be signed in to change notification settings - Fork 757
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2895 from Liboul/feat/toggles
Feat/toggles
- Loading branch information
Showing
59 changed files
with
1,238 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@udecode/plate-toggle": minor | ||
| --- | ||
|
|
||
| New plugin: toggle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| title: Toggle Element | ||
| description: Add toggles to your document. | ||
| component: true | ||
| docs: | ||
| - route: /docs/toggle | ||
| title: Toggle | ||
| --- | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="cli"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx @udecode/plate-ui@latest add toggle-element | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| <Steps> | ||
|
|
||
| <Step> | ||
|
|
||
| Install the following dependencies: | ||
|
|
||
| - [Toggle](/docs/toggle) | ||
| - [Toolbar](/docs/components/toolbar) | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Copy and paste the following code into your project. | ||
|
|
||
| </Step> | ||
|
|
||
| <ComponentSource name="toggle-element" /> | ||
|
|
||
| <Step> | ||
|
|
||
| Update the import paths to match your project setup. | ||
|
|
||
| </Step> | ||
|
|
||
| </Steps> | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Examples | ||
|
|
||
| <ComponentPreview name="playground-demo" id="toggle" /> | ||
|
|
||
| <ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" /> |
86 changes: 86 additions & 0 deletions
86
apps/www/content/docs/components/toggle-toolbar-button.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| --- | ||
| title: Toggle Toolbar Button | ||
| description: Turns blocks into toggles and vice-versa. | ||
| component: true | ||
| docs: | ||
| - route: /docs/toggle | ||
| title: Toggle | ||
| - route: /docs/components/toolbar | ||
| title: Toolbar | ||
| --- | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="cli"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx @udecode/plate-ui@latest add toggle-toolbar-button | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| <Steps> | ||
|
|
||
| <Step> | ||
|
|
||
| Install the following dependencies: | ||
|
|
||
| - [Toggle](/docs/toggle) | ||
| - [Toolbar](/docs/components/toolbar) | ||
|
|
||
| </Step> | ||
|
|
||
| <Step> | ||
|
|
||
| Copy and paste the following code into your project. | ||
|
|
||
| </Step> | ||
|
|
||
| <ComponentSource name="toggle-toolbar-button" /> | ||
|
|
||
| <Step> | ||
|
|
||
| Update the import paths to match your project setup. | ||
|
|
||
| </Step> | ||
|
|
||
| </Steps> | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
|
|
||
| <Accordion type="single" collapsible> | ||
| <AccordionItem value="manual-installation"> | ||
| <AccordionTrigger>Manual Installation</AccordionTrigger> | ||
| <AccordionContent> | ||
|
|
||
| 1. Install the following dependencies: | ||
|
|
||
| - [Toggle](/docs/toggle) | ||
| - [Toolbar](/docs/components/toolbar) | ||
|
|
||
| 2. Copy and paste the following code into your project. | ||
|
|
||
| - `components/plate-ui/toggle-toolbar-button.tsx` | ||
|
|
||
| <ComponentSource name="toggle-toolbar-button" /> | ||
|
|
||
| </AccordionContent> | ||
|
|
||
| </AccordionItem> | ||
| </Accordion> | ||
|
|
||
| ## Examples | ||
|
|
||
| <ComponentPreview name="playground-demo" id="toggle" /> | ||
|
|
||
| <ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| --- | ||
| title: Toggle | ||
| description: Add toggles to your document. | ||
| docs: | ||
| - route: /docs/components/toggle-toolbar-button | ||
| title: Toggle Button | ||
| --- | ||
|
|
||
| <ComponentPreview name="playground-demo" id="toggle" /> | ||
|
|
||
| <PackageInfo> | ||
|
|
||
| ## Features | ||
|
|
||
| - Add toggles to your document. | ||
| - Toggles are closed by default, and can be opened to reveal the content inside. | ||
| - Refer to the [Indent documentation](/docs/indent) for more information. | ||
|
|
||
| ## Plugin dependencies | ||
|
|
||
| - [Indent](/docs/indent) | ||
| - [Node id](/docs/node-id) | ||
|
|
||
| </PackageInfo> | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install @udecode/plate-indent @udecode/plate-node-id @udecode/plate-toggle | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| // ... | ||
| import { createIndentPlugin } from '@udecode/plate-indent'; | ||
| import { createNodeIdPlugin } from '@udecode/plate-node-id'; | ||
| import { createTogglePlugin, ELEMENT_TOGGLE } from '@udecode/plate-toggle'; | ||
|
|
||
| const plugins = [ | ||
| // ...otherPlugins, | ||
| createHeadingPlugin(), | ||
| createParagraphPlugin(), | ||
| createIndentPlugin({ | ||
| inject: { | ||
| props: { | ||
| validTypes: [ELEMENT_TOGGLE, ELEMENT_PARAGRAPH, ELEMENT_H1], | ||
| }, | ||
| }, | ||
| }), | ||
| createNodeIdPlugin(), | ||
| createTogglePlugin(), | ||
| ]; | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### createTogglePlugin | ||
|
|
||
| ### openNextToggles | ||
|
|
||
| Marks the block at the current selection as an open toggle. | ||
| Use this function right before inserting a block so that the toggle is expanded upon insertion. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="editor" type="TEditor"> | ||
| The editor instance. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| ### toggleIds | ||
|
|
||
| Toggles the open state of toggles. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="editor" type="TEditor"> | ||
| The editor instance. | ||
| </APIItem> | ||
| <APIItem name="toggleIds" type="string[]"> | ||
| An array of element ids. | ||
| </APIItem> | ||
| <APIItem name="force" type="boolean" optional> | ||
| Set to true if you want to expand all toggles regardless of their current | ||
| state. Set to false if you want to collapse all toggles regardless of their | ||
| current state. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| ## API Components | ||
|
|
||
| ### useToggleToolbarButtonState | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="pressed" type="boolean"> | ||
| A boolean indicating whether the button is pressed or not. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### useToggleToolbarButton | ||
|
|
||
| A behavior hook for the toggle toolbar button. | ||
|
|
||
| <APIState> | ||
| <APIItem name="pressed" type="boolean"> | ||
| A boolean indicating whether the button is pressed or not. | ||
| </APIItem> | ||
| </APIState> | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="props" type="object"> | ||
| <APISubList> | ||
| <APISubListItem parent="props" name="pressed" type="boolean"> | ||
| A boolean indicating whether the button is pressed or not. | ||
| </APISubListItem> | ||
| <APISubListItem parent="props" name="onClick" type="function"> | ||
| A callback function to handle the click event of the button. It toggles | ||
| the toggle of the specified node type in the editor and focuses the | ||
| editor. | ||
| </APISubListItem> | ||
| <APISubListItem parent="props" name="onMouseDown" type="function"> | ||
| A callback function to handle the mouse down event of the button. It | ||
| just prevents default so that focus is not lost when clicking on the | ||
| button. | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### useToggleButtonState | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="toggleId" type="string"> | ||
| The id of the toggle element. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="toggleId" type="string"> | ||
| The id of the toggle element. | ||
| </APIItem> | ||
| <APIItem name="open" type="boolean"> | ||
| A boolean indicating whether the toggle is open (expanded) or not | ||
| (collapsed). | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### useToggleButton | ||
|
|
||
| A behavior hook for the toggle button that expands or collapses a toggle element. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="toggleId" type="string"> | ||
| The id of the toggle element. | ||
| </APIItem> | ||
| <APIItem name="open" type="boolean"> | ||
| A boolean indicating whether the toggle is open (expanded) or not | ||
| (collapsed). | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="toggleId" type="string"> | ||
| The id of the toggle element. | ||
| </APIItem> | ||
| <APIItem name="open" type="boolean"> | ||
| A boolean indicating whether the toggle is open (expanded) or not | ||
| (collapsed). | ||
| </APIItem> | ||
| <APIItem name="buttonProps" type="object"> | ||
| <APISubList> | ||
| <APISubListItem parent="buttonProps" name="onClick" type="function"> | ||
| A callback function to handle the click event of the button. It toggles | ||
| the open state of the toggle. | ||
| </APISubListItem> | ||
| <APISubListItem parent="buttonProps" name="onMouseDown" type="function"> | ||
| A callback function to handle the mouse down event of the button. It | ||
| just prevents default so that focus is not lost when clicking on the | ||
| button. | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIReturns> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.