combobox (#1315)

* refactor

* refactor

.changeset/a.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-serializer-docx': minor
+---
+
+- handle `in` unit for indentation

.changeset/kind-ants-dance.md

@@ -0,0 +1,8 @@
+---
+'@udecode/plate-combobox': minor
+---
+
+- move UI to `@udecode/plate-ui-combobox`
+- `comboboxActions` alias of `comboboxStore.set`
+- `useComboboxSelectors` alias of `comboboxStore.use`
+- `comboboxSelectors` alias of `comboboxStore.get`

docs/docs/playground.mdx

@@ -99,7 +99,6 @@ See [Installation](/docs/installation)
       <BallonToolbarMarks />
 
       <MentionCombobox items={CONFIG.mentionItems} />
-      <MentionCombobox items={CONFIG.mentionItems} pluginKey="mention2" />
     </Plate>
   );
 }

docs/docs/plugins/combobox.mdx

@@ -41,7 +41,7 @@ The combobox state is stored in a [zustood store](https://github.com/udecode/zus
 #### Props
 
 - `ComboboxStateById` – the combobox config
-- `items` – Set items to the combobox store. Alternative: `comboboxStore.set.items(items)`.
+- `items` – Set items to the combobox store. Alternative: `comboboxActions.items(items)`.
 - `component` – Render this component when the combobox is open (useful to inject hooks).
 - `onRenderItem` – Render combobox item (default is `text`)
 

docs/docs/plugins/mention.mdx

@@ -21,8 +21,8 @@ npm install @udecode/plate-ui-mention
     ...PLUGINS.basicNodes,
     createComboboxPlugin(),
     createMentionPlugin(),
-    createMentionPlugin({ key: 'mention2', component: MentionElement, options: { trigger: '#' } }),
-    createMentionPlugin({ options: { trigger: '/', id: 'mention3' } }),
+    createMentionPlugin({ key: '#', component: MentionElement, options: { trigger: '#' } }),
+    createMentionPlugin({ key: '/', component: MentionElement, options: { trigger: '/' } }),
   ], {
     components: CONFIG.components,
   });
@@ -35,8 +35,8 @@ npm install @udecode/plate-ui-mention
       plugins={plugins}
     >
       <MentionCombobox items={CONFIG.mentionItems} />
-      <MentionCombobox items={CONFIG.mentionItems} pluginKey="mention2" />
-      <MentionCombobox items={[CONFIG.mentionItems[0], CONFIG.mentionItems[1]]} id="mention3" />
+      <MentionCombobox items={CONFIG.mentionItems} pluginKey="#" />
+      <MentionCombobox items={[CONFIG.mentionItems[0], CONFIG.mentionItems[1]]} pluginKey="/" />
     </Plate>
   );
 }

docs/docusaurus.config.js

@@ -29,12 +29,14 @@ const alias = {
   '@udecode/plate-block-quote': 'nodes/block-quote',
   '@udecode/plate-break': 'editor/break',
   '@udecode/plate-code-block': 'nodes/code-block',
+  '@udecode/plate-combobox': 'editor/combobox',
   '@udecode/plate-core': 'core',
   '@udecode/plate-serializer-csv': 'serializers/csv',
   '@udecode/plate-serializer-docx': 'serializers/docx',
   '@udecode/plate-excalidraw': 'ui/nodes/excalidraw',
   '@udecode/plate-find-replace': 'decorators/find-replace',
   '@udecode/plate-font': 'nodes/font',
+  '@udecode/plate-headless': 'headless',
   '@udecode/plate-heading': 'nodes/heading',
   '@udecode/plate-highlight': 'nodes/highlight',
   '@udecode/plate-horizontal-rule': 'nodes/horizontal-rule',
@@ -58,6 +60,7 @@ const alias = {
   '@udecode/plate-table': 'nodes/table',
   '@udecode/plate-test-utils': 'test-utils',
   '@udecode/plate-trailing-block': 'editor/trailing-block',
+  '@udecode/plate-ui': 'ui/plate',
   '@udecode/plate-ui-alignment': 'ui/nodes/alignment',
   '@udecode/plate-ui-block-quote': 'ui/nodes/block-quote',
   '@udecode/plate-ui-button': 'ui/button',

docs/package.json

@@ -34,6 +34,7 @@
     "@udecode/plate-block-quote": "link:../packages/nodes/block-quote",
     "@udecode/plate-break": "link:../packages/editor/break",
     "@udecode/plate-code-block": "link:../packages/nodes/code-block",
+    "@udecode/plate-combobox": "link:../packages/editor/combobox",
     "@udecode/plate-core": "link:../packages/core",
     "@udecode/plate-find-replace": "link:../packages/decorators/find-replace",
     "@udecode/plate-font": "link:../packages/nodes/font",

docs/src/live/config/config.ts

@@ -29,13 +29,13 @@ import {
   TrailingBlockPlugin,
   withProps,
 } from '@udecode/plate';
-import { Partial } from 'rollup-plugin-typescript2/dist/partial';
-import { EditableProps } from 'slate-react/dist/components/editable';
-import { css } from 'styled-components';
 import {
   ELEMENT_EXCALIDRAW,
   ExcalidrawElement,
-} from '../../../../packages/ui/nodes/excalidraw';
+} from '@udecode/plate-ui-excalidraw';
+import { Partial } from 'rollup-plugin-typescript2/dist/partial';
+import { EditableProps } from 'slate-react/dist/components/editable';
+import { css } from 'styled-components';
 import { autoformatRules } from './autoformat/autoformatRules';
 import { MENTIONABLES } from './mentionables';
 

docs/src/live/config/values/initialDataExcalidraw.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawNodeData } from '../../../../../packages/ui/nodes/excalidraw';
+import { ExcalidrawNodeData } from '@udecode/plate-ui-excalidraw';
 
 export const initialDataExcalidraw: ExcalidrawNodeData = {
   data: {

docs/src/live/live.tsx

@@ -181,18 +181,17 @@ import {
   usePlate,
   usePlateEditorRef,
   usePlateEditorState,
-  usePlateEventId,
   usePlateSelection,
   usePlateSelectors,
   withProps,
   withStyledProps,
 } from '@udecode/plate';
+import { createLineHeightPlugin } from '@udecode/plate-line-height';
 import {
   createExcalidrawPlugin,
   ELEMENT_EXCALIDRAW,
   ExcalidrawElement,
-} from '../../../packages/ui/nodes/excalidraw';
-import { createLineHeightPlugin } from '@udecode/plate-line-height';
+} from '@udecode/plate-ui-excalidraw';
 import { LineHeightToolbarDropdown } from '@udecode/plate-ui-line-height';
 import { createEditor, Editor, Transforms } from 'slate';
 import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
@@ -436,7 +435,6 @@ const ReactLiveScope = {
   Transforms,
   unwrapList,
   useCallback,
-  usePlateEventId,
   createFindReplacePlugin,
   usePlate,
   usePlateEditorRef,