From 31b025d94788b50c227b3c8f889a7528e56fb963 Mon Sep 17 00:00:00 2001 From: Liboul Date: Wed, 31 Jan 2024 15:45:28 +0100 Subject: [PATCH] Toggle > Remove indent-list dependency, finalize documentation, add test to autoformat toggle, fix typing of plugin --- apps/www/content/docs/toggle.mdx | 108 +++++++++++++++--- .../default/plate-ui/toggle-element.tsx | 23 +--- .../withAutoformat/block/list.spec.tsx | 48 +++++++- .../plate/src/__tests__/all-plugins.spec.tsx | 1 - packages/serializer-html/src/serializeHtml.ts | 1 - packages/toggle/CHANGELOG.md | 4 +- packages/toggle/README.md | 9 ++ packages/toggle/package.json | 1 - .../toggle/src/createTogglePlugin.spec.tsx | 1 - packages/toggle/src/createTogglePlugin.ts | 6 +- packages/toggle/src/store.ts | 4 +- packages/toggle/src/withToggle.spec.tsx | 1 - yarn.lock | 1 - 13 files changed, 157 insertions(+), 51 deletions(-) delete mode 100644 packages/toggle/src/createTogglePlugin.spec.tsx delete mode 100644 packages/toggle/src/withToggle.spec.tsx diff --git a/apps/www/content/docs/toggle.mdx b/apps/www/content/docs/toggle.mdx index f6840e7ec9..4201b8bdbf 100644 --- a/apps/www/content/docs/toggle.mdx +++ b/apps/www/content/docs/toggle.mdx @@ -19,7 +19,6 @@ docs: ## Plugin dependencies - [Indent](/docs/indent) -- [Indent List](/docs/indent-list) - [Node id](/docs/node-id) @@ -27,7 +26,7 @@ docs: ## Installation ```bash -npm install @udecode/plate-indent @udecode/plate-indent-list @udecode/plate-node-id @udecode/plate-toggle +npm install @udecode/plate-indent @udecode/plate-node-id @udecode/plate-toggle ``` ## Usage @@ -35,9 +34,8 @@ npm install @udecode/plate-indent @udecode/plate-indent-list @udecode/plate-node ```tsx // ... import { createIndentPlugin } from '@udecode/plate-indent'; -import { createIndentListPlugin } from '@udecode/plate-indent-list'; import { createNodeIdPlugin } from '@udecode/plate-node-id'; -import { createTogglePlugin } from '@udecode/plate-toggle'; +import { createTogglePlugin, ELEMENT_TOGGLE } from '@udecode/plate-toggle'; const plugins = [ // ...otherPlugins, @@ -46,14 +44,7 @@ const plugins = [ createIndentPlugin({ inject: { props: { - validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1], - }, - }, - }), - createIndentListPlugin({ - inject: { - props: { - validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1], + validTypes: [ELEMENT_TOGGLE, ELEMENT_PARAGRAPH, ELEMENT_H1], }, }, }), @@ -66,22 +57,45 @@ const plugins = [ ### createTogglePlugin - - {/* TODO */} - - ### 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. + The editor instance. -{/* TODO Add API DOC */} +### toggleIds + +Toggles the open state of toggles. + + + + The editor instance. + + + An array of element ids. + + + 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. + + ## API Components +### useToggleToolbarButtonState + + + + A boolean indicating whether the button is pressed or not. + + + ### useToggleToolbarButton A behavior hook for the toggle toolbar button. @@ -103,8 +117,66 @@ A behavior hook for the toggle toolbar button. the toggle of the specified node type in the editor and focuses the editor. + + 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. + -{/* TODO Add components DOC */} \ No newline at end of file +### useToggleButtonState + + + + The id of the toggle element. + + + + + + The id of the toggle element. + + + A boolean indicating whether the toggle is open (expanded) or not + (collapsed). + + + +### useToggleButton + +A behavior hook for the toggle button that expands or collapses a toggle element. + + + + The id of the toggle element. + + + A boolean indicating whether the toggle is open (expanded) or not + (collapsed). + + + + + + The id of the toggle element. + + + A boolean indicating whether the toggle is open (expanded) or not + (collapsed). + + + + + A callback function to handle the click event of the button. It toggles + the open state of the toggle. + + + 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. + + + + diff --git a/apps/www/src/registry/default/plate-ui/toggle-element.tsx b/apps/www/src/registry/default/plate-ui/toggle-element.tsx index 1031222bad..e621e6336d 100644 --- a/apps/www/src/registry/default/plate-ui/toggle-element.tsx +++ b/apps/www/src/registry/default/plate-ui/toggle-element.tsx @@ -7,30 +7,17 @@ import { Icons } from '@/components/icons'; export const ToggleElement = withRef( ({ children, ...props }, ref) => { const element = useElement(); - const state = useToggleButtonState(element.id); + const state = useToggleButtonState(element.id as string); const { open, buttonProps } = useToggleButton(state); - // TODO use tailwind instead of inline styles return ( -
+
{open ? : } diff --git a/packages/autoformat/src/__tests__/withAutoformat/block/list.spec.tsx b/packages/autoformat/src/__tests__/withAutoformat/block/list.spec.tsx index 008fb9f2d2..e2154f11a2 100644 --- a/packages/autoformat/src/__tests__/withAutoformat/block/list.spec.tsx +++ b/packages/autoformat/src/__tests__/withAutoformat/block/list.spec.tsx @@ -5,6 +5,7 @@ import { jsx } from '@udecode/plate-test-utils'; import { withReact } from 'slate-react'; import { autoformatPlugin } from 'www/src/lib/plate/demo/plugins/autoformatPlugin'; +import { AutoformatBlockRule } from '../../../types'; import { withAutoformat } from '../../../withAutoformat'; jsx; @@ -133,4 +134,49 @@ describe('when [x].space', () => { }); }); -// TODO Add toggle test +describe('when |>space', () => { + it('should format to a toggle', () => { + const input = ( + + + {'|>'} + + hello + + + ) as any; + + const output = ( + + hello + + ) as any; + + // See useHooksToggle.ts, we overload the plugin with a `setOpenIds` function until there's a JOTAI layer in plate-core, + // so here we need to remove the `preformat` property of the autoformat rule that uses this overload. + + const autoformatPluginRulesWitoutTogglePreformat = + autoformatPlugin.options!.rules!.map((rule) => { + const { preFormat, ...rest } = rule as AutoformatBlockRule; + if (rule.match === '|> ') return rest; + return rule; + }); + + const autoformatPluginWitoutTogglePreformat: typeof autoformatPlugin = { + ...autoformatPlugin, + options: { + ...autoformatPlugin.options, + rules: autoformatPluginRulesWitoutTogglePreformat as any, + }, + }; + + let editor = withAutoformat( + withReact(input), + mockPlugin(autoformatPluginWitoutTogglePreformat) + ); + + editor.insertText(' '); + + expect(input.children).toEqual(output.children); + }); +}); diff --git a/packages/plate/src/__tests__/all-plugins.spec.tsx b/packages/plate/src/__tests__/all-plugins.spec.tsx index 8aae31e11e..a2cf2af332 100644 --- a/packages/plate/src/__tests__/all-plugins.spec.tsx +++ b/packages/plate/src/__tests__/all-plugins.spec.tsx @@ -1,4 +1,3 @@ -// TODO add toggle import React from 'react'; import { render } from '@testing-library/react'; import { createAlignPlugin } from '@udecode/plate-alignment'; diff --git a/packages/serializer-html/src/serializeHtml.ts b/packages/serializer-html/src/serializeHtml.ts index aaf0377f08..ed733db3a7 100644 --- a/packages/serializer-html/src/serializeHtml.ts +++ b/packages/serializer-html/src/serializeHtml.ts @@ -1,4 +1,3 @@ -// TODO serialize toggle? import React from 'react'; import { EDescendant, diff --git a/packages/toggle/CHANGELOG.md b/packages/toggle/CHANGELOG.md index 8599d1d5e6..e4b0e44359 100644 --- a/packages/toggle/CHANGELOG.md +++ b/packages/toggle/CHANGELOG.md @@ -1,5 +1,5 @@ -# @udecode/plate-indent-list +# @udecode/plate-toggle ## 30.1.2 -TODO ANNOUNCEMENT \ No newline at end of file +TODO release \ No newline at end of file diff --git a/packages/toggle/README.md b/packages/toggle/README.md index 63ec597be5..af5ac56887 100644 --- a/packages/toggle/README.md +++ b/packages/toggle/README.md @@ -7,6 +7,15 @@ It's similar to the indent list plugin, in that it relies on the indent of sibli Check out [Toggle](https://platejs.org/docs/toggle). +## Ideas to improve this plugin + +1. Adding an option `initialValue` of open `toggleIds` and a callback `onChange`, for instance to store the state of open toggles in local storage and remember the state upon browser refresh. +2. Adding an option `defaultOpen`. Currently, toggles are closed on initial rendering. +3. Adding an option to specify how to get the indent value of elements, right now we are relying on this being the default `KEY_ELEMENT` from the `indent` plugin +4. An option to specify how to get the id of elements, right now we are using the default id attribute from the `node-id` plugin. +5. Adding a placeholder below the toggle, like Notion does, when the toggle is expanded without any elements below. +6. Make toggle button more accessible + ## License [MIT](../../LICENSE) diff --git a/packages/toggle/package.json b/packages/toggle/package.json index 0b31b49f5a..e090e40955 100644 --- a/packages/toggle/package.json +++ b/packages/toggle/package.json @@ -41,7 +41,6 @@ "dependencies": { "@udecode/plate-common": "30.1.2", "@udecode/plate-indent": "30.1.2", - "@udecode/plate-indent-list": "30.1.2", "@udecode/plate-node-id": "30.1.2" }, "peerDependencies": { diff --git a/packages/toggle/src/createTogglePlugin.spec.tsx b/packages/toggle/src/createTogglePlugin.spec.tsx deleted file mode 100644 index 1cf23ab59a..0000000000 --- a/packages/toggle/src/createTogglePlugin.spec.tsx +++ /dev/null @@ -1 +0,0 @@ -// TODO TEST diff --git a/packages/toggle/src/createTogglePlugin.ts b/packages/toggle/src/createTogglePlugin.ts index 149e332b57..6a22641c71 100644 --- a/packages/toggle/src/createTogglePlugin.ts +++ b/packages/toggle/src/createTogglePlugin.ts @@ -6,11 +6,7 @@ import { ToggleControllerProvider } from './store'; import { ELEMENT_TOGGLE, TogglePlugin } from './types'; import { withToggle } from './withToggle'; -export const createTogglePlugin = createPluginFactory< - TogglePlugin, - Value, - PlateEditor ->({ +export const createTogglePlugin = createPluginFactory({ key: ELEMENT_TOGGLE, isElement: true, inject: { aboveComponent: injectToggle }, diff --git a/packages/toggle/src/store.ts b/packages/toggle/src/store.ts index ff746d421f..91270b8878 100644 --- a/packages/toggle/src/store.ts +++ b/packages/toggle/src/store.ts @@ -9,10 +9,12 @@ import { Value, } from '@udecode/plate-common'; import { KEY_INDENT, TIndentElement } from '@udecode/plate-indent'; -import { KEY_LIST_STYLE_TYPE } from '@udecode/plate-indent-list'; import { ELEMENT_TOGGLE, TogglePlugin } from './types'; +// Duplicate constant instead of importing from "plate-indent-list" to avoid a dependency. +const KEY_LIST_STYLE_TYPE = 'listStyleType'; + export const { toggleControllerStore, ToggleControllerProvider, diff --git a/packages/toggle/src/withToggle.spec.tsx b/packages/toggle/src/withToggle.spec.tsx deleted file mode 100644 index 1cf23ab59a..0000000000 --- a/packages/toggle/src/withToggle.spec.tsx +++ /dev/null @@ -1 +0,0 @@ -// TODO TEST diff --git a/yarn.lock b/yarn.lock index d0dae47e86..0253b090ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6946,7 +6946,6 @@ __metadata: dependencies: "@udecode/plate-common": "npm:30.1.2" "@udecode/plate-indent": "npm:30.1.2" - "@udecode/plate-indent-list": "npm:30.1.2" "@udecode/plate-node-id": "npm:30.1.2" peerDependencies: react: ">=16.8.0"