Link - Floating (#1677)

* feat

* feat

* feat

* feat

* feat

* feat

* feat

* feat

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

.changeset/button-minor.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ui-button': minor
+---
+
+- `PlateButton`

.changeset/button.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-ui-button': major
+---
+
+- moved `Button` to `@udecode/plate-button`
+- `Button` is now unstyled

.changeset/combobox.md

@@ -0,0 +1,9 @@
+---
+'@udecode/plate-combobox': major
+---
+
+- deps:
+  - replaced `@udecode/plate-ui-popper` by `@udecode/plate-floating`
+- `comboboxStore`:
+  - removed `popperContainer`, use `floatingOptions` instead
+  - removed `popperOptions`, use `floatingOptions` instead

.changeset/core-minor.md

@@ -0,0 +1,23 @@
+---
+'@udecode/plate-core': minor
+---
+
+- new dep + re-exports `"react-hotkeys-hook": "^3.4.6"`
+- new core plugin `createSelectionPlugin`
+  - stores the previous selection in `editor.prevSelection` (default is `null`)
+  - enabled by default, can be disabled using `selection` key
+- new `PlatePlugin` props:
+  - `renderAboveEditable`: Render a component above `Editable`.
+  - `renderAfterEditable`: Render a component after `Editable`.
+  - `renderBeforeEditable`: Render a component before `Editable`.
+- `Plate`:
+  - pipes plugins `renderAboveEditable` and render the result above `Editable`
+  - pipes plugins `renderAfterEditable` and render the result after `Editable`, before `children`
+  - pipes plugins `renderBeforeEditable` and render the result before `Editable`, after `firstChildren`
+- new queries
+  - `getNextNodeStartPoint`
+  - `getPreviousNodeEndPoint`
+- new hooks
+  - `useOnClickOutside`
+- `PlateEditor` new prop:
+  - `prevSelection: TRange | null;`

.changeset/floating.md

@@ -0,0 +1,12 @@
+---
+'@udecode/plate-floating': minor
+---
+
+- new package replacing `plate-popper`
+- dep:
+  - `"@floating-ui/react-dom-interactions": "^0.6.6"`
+- re-exports `@floating-ui/react-dom-interactions`
+- utils:
+  - `createVirtualElement`
+  - `useVirtualFloating`
+  - `getSelectionBoundingClientRect`

.changeset/headless.md

@@ -0,0 +1,7 @@
+---
+'@udecode/plate-headless': minor
+---
+
+- new deps + re-exports:
+  - `@udecode/plate-button`
+  - `@udecode/plate-floating`

.changeset/link-major.md

@@ -0,0 +1,12 @@
+---
+'@udecode/plate-link': major
+---
+
+- `createLinkPlugin`
+  - removed `onKeyDownLink` for floating link
+  - removed `hotkey` for `triggerFloatingLinkHotkeys`
+- removed:
+  - `getAndUpsertLink` for `upsertLink`
+  - `upsertLinkAtSelection` for `upsertLink`
+- `LinkToolbarButton`:
+  - `onClick` now calls `triggerFloatingLink`

.changeset/link-minor.md

@@ -0,0 +1,65 @@
+---
+'@udecode/plate-link': minor
+---
+
+- new dep:
+  - `@udecode/plate-button`
+- new unstyled components + props hooks:
+  - `PlateFloatingLink`
+  - `LinkRoot`
+  - `FloatingLink`
+  - `FloatingLinkEditRoot`
+  - `FloatingLinkInsertRoot`
+  - `FloatingLinkUrlInput`
+  - `FloatingLinkTextInput`
+  - `FloatingLinkEditButton`
+  - `UnlinkButton`
+  - `OpenLinkButton`
+- new store: `floatingLinkStore`
+- `LinkPlugin` new props:
+  - `triggerFloatingLinkHotkeys`: Hotkeys to trigger floating link. Default is 'command+k, ctrl+k'
+- new utils:
+  - `insertLink`
+  - `submitFloatingLink`
+  - `unwrapLink`
+  - `upsertLink`
+  - `createLinkNode`
+  - `triggerFloatingLink`
+  - `triggerFloatingLinkEdit`
+  - `triggerFloatingLinkInsert`
+
+Specs:
+- Insert data:
+  - https://github.com/udecode/editor-protocol/issues/34 
+  - https://github.com/udecode/editor-protocol/issues/35 
+  - https://github.com/udecode/editor-protocol/issues/36
+  - https://github.com/udecode/editor-protocol/issues/37
+  - https://github.com/udecode/editor-protocol/issues/38
+  - https://github.com/udecode/editor-protocol/issues/43
+- Insert space:
+  - https://github.com/udecode/editor-protocol/issues/39
+  - https://github.com/udecode/editor-protocol/issues/40
+  - https://github.com/udecode/editor-protocol/issues/41
+  - https://github.com/udecode/editor-protocol/issues/42
+- Floating link:
+  - https://github.com/udecode/editor-protocol/issues/45
+  - https://github.com/udecode/editor-protocol/issues/48
+  - https://github.com/udecode/editor-protocol/issues/51
+  - https://github.com/udecode/editor-protocol/issues/60
+- Floating link insert:
+  - https://github.com/udecode/editor-protocol/issues/44
+  - https://github.com/udecode/editor-protocol/issues/46
+  - https://github.com/udecode/editor-protocol/issues/47
+  - https://github.com/udecode/editor-protocol/issues/49
+  - https://github.com/udecode/editor-protocol/issues/50
+- Floating link edit:
+  - https://github.com/udecode/editor-protocol/issues/54
+  - https://github.com/udecode/editor-protocol/issues/55
+  - https://github.com/udecode/editor-protocol/issues/56
+  - https://github.com/udecode/editor-protocol/issues/57
+  - https://github.com/udecode/editor-protocol/issues/58
+  - https://github.com/udecode/editor-protocol/issues/59
+  - https://github.com/udecode/editor-protocol/issues/61
+- Selection:
+  - https://github.com/udecode/editor-protocol/issues/52
+  - https://github.com/udecode/editor-protocol/issues/53

.changeset/link-patch.md

@@ -0,0 +1,8 @@
+---
+'@udecode/plate-link': patch
+---
+
+- Fixes #1580
+- Fixes #1542
+- Fixes #1194
+- Fixes #712 

.changeset/plate.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate': major
+---
+
+- remove `@udecode/plate-ui-popper` dep for `@udecode/plate-floating`

.changeset/popper.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ui-popper': major
+---
+
+- deprecated, use instead `@udecode/plate-floating`

.changeset/table.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-table': major
+---
+
+- remove `addRow` for `insertTableRow`
+- remove `addColumn` for `insertTableColumn`

.changeset/toolbar-fix.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ui-toolbar': patch
+---
+
+- Fixes #1434

.changeset/toolbar.md

@@ -0,0 +1,8 @@
+---
+'@udecode/plate-ui-toolbar': major
+---
+
+- remove `@udecode/plate-ui-popper` and `react-popper` deps for `@udecode/plate-floating`
+- `BalloonToolbarProps`:
+  - removed `popperOptions` for `floatingOptions`
+- remove `useBalloonToolbarPopper` for `useFloatingToolbar`

.eslintrc.js

@@ -36,7 +36,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        moduleDirectory: ['node_modules', 'src'],
+        moduleDirectory: ['node_modules'],
         typescript: {
           alwaysTryTypes: true,
         },

CONTRIBUTING.md

@@ -76,8 +76,8 @@ Build:
 #### How to: Create an example
 
 - Did you create a new package?
-    - edit `/examples/apps/next/next.config.js`
-        - add `'@udecode/plate-x': x/src'` to `alias` object to watch file changes
+    - edit `/config/aliases.js`
+        - add `'@udecode/plate-x': <package path from /packages>'` to watch file changes
 - Run the example app: 
   - run `yarn g:dev`
 - Create an example app in `/examples/src`

config/aliases-plate.js

@@ -0,0 +1,40 @@
+module.exports = {
+  '@udecode/plate-alignment': 'nodes/alignment',
+  '@udecode/plate-autoformat': 'editor/autoformat',
+  '@udecode/plate-basic-elements': 'nodes/basic-elements',
+  '@udecode/plate-basic-marks': 'nodes/basic-marks',
+  '@udecode/plate-block-quote': 'nodes/block-quote',
+  '@udecode/plate-break': 'editor/break',
+  '@udecode/plate-button': 'button',
+  '@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-find-replace': 'decorators/find-replace',
+  '@udecode/plate-floating': 'floating',
+  '@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',
+  '@udecode/plate-image': 'nodes/image',
+  '@udecode/plate-indent': 'nodes/indent',
+  '@udecode/plate-indent-list': 'nodes/indent-list',
+  '@udecode/plate-juice': 'serializers/juice',
+  '@udecode/plate-kbd': 'nodes/kbd',
+  '@udecode/plate-line-height': 'nodes/line-height',
+  '@udecode/plate-link': 'nodes/link',
+  '@udecode/plate-list': 'nodes/list',
+  '@udecode/plate-serializer-md': 'serializers/md',
+  '@udecode/plate-media-embed': 'nodes/media-embed',
+  '@udecode/plate-mention': 'nodes/mention',
+  '@udecode/plate-node-id': 'editor/node-id',
+  '@udecode/plate-normalizers': 'editor/normalizers',
+  '@udecode/plate-paragraph': 'nodes/paragraph',
+  '@udecode/plate-reset-node': 'editor/reset-node',
+  '@udecode/plate-select': 'editor/select',
+  '@udecode/plate-table': 'nodes/table',
+  '@udecode/plate-test-utils': 'test-utils',
+  '@udecode/plate-trailing-block': 'editor/trailing-block',
+};

config/aliases.js

@@ -0,0 +1,27 @@
+module.exports = {
+  ...require('./aliases-plate'),
+  '@udecode/plate': 'plate',
+  '@udecode/plate-excalidraw': 'ui/nodes/excalidraw',
+  '@udecode/plate-styled-components': 'ui/styled-components',
+  '@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',
+  '@udecode/plate-ui-code-block': 'ui/nodes/code-block',
+  '@udecode/plate-ui-combobox': 'ui/combobox',
+  '@udecode/plate-ui-cursor': 'ui/cursor',
+  '@udecode/plate-ui-dnd': 'ui/dnd',
+  '@udecode/plate-ui-find-replace': 'ui/find-replace',
+  '@udecode/plate-ui-font': 'ui/nodes/font',
+  '@udecode/plate-ui-horizontal-rule': 'ui/nodes/horizontal-rule',
+  '@udecode/plate-ui-image': 'ui/nodes/image',
+  '@udecode/plate-ui-line-height': 'ui/nodes/line-height',
+  '@udecode/plate-ui-link': 'ui/nodes/link',
+  '@udecode/plate-ui-list': 'ui/nodes/list',
+  '@udecode/plate-ui-media-embed': 'ui/nodes/media-embed',
+  '@udecode/plate-ui-mention': 'ui/nodes/mention',
+  '@udecode/plate-ui-placeholder': 'ui/placeholder',
+  '@udecode/plate-ui-popover': 'ui/popover',
+  '@udecode/plate-ui-table': 'ui/nodes/table',
+  '@udecode/plate-ui-toolbar': 'ui/toolbar',
+};

docs/docs/guides/plugins.mdx

@@ -501,6 +501,18 @@ createIndentPlugin({
 - If function, its returning value will be shallow merged to the old props, with the old props as parameter.
 - If object, its value will be shallow merged to the old props.
 
+### `renderAboveEditable`
+
+- Render a component above `Editable`.
+
+### `renderAfterEditable`
+
+- Render a component after `Editable`.
+
+### `renderBeforeEditable`
+
+- Render a component before `Editable`.
+
 ### `serializeHtml`
 
 - Property used by `serializeHtml` util to replace `renderElement` and `renderLeaf` when serializing a node of this `type`.

docs/docs/plugins/combobox.mdx

@@ -22,8 +22,7 @@ The combobox state is stored in a [zustood store](https://github.com/udecode/zus
 - `items` – Unfiltered items
 - `filteredItems` – Filtered items
 - `highlightedIndex` – Highlighted index
-- `popperContainer` – Parent element of the popper element (the one that has the scroll)
-- `popperOptions` – Overrides `usePopper` options
+- `floatingOptions` – Overrides `useFloating` options
 - `targetRange` – Range from the trigger to the cursor
 - `text` – Text after the trigger
 

docs/docs/plugins/link.mdx

@@ -3,6 +3,8 @@ slug: /plugins/link
 title: Link
 ---
 
+Specs in [editor-protocol](https://github.com/udecode/editor-protocol/issues/33)
+
 ### Installation
 
 ```bash npm2yarn
@@ -18,20 +20,45 @@ import { LinkSandpack } from './LinkSandpack'
 
 <LinkSandpack />
 
+Enable floating link using:
+
+```tsx
+renderAfterEditable: PlateFloatingLink
+```
+
 ### Options
 
 ```tsx
-interface LinkPlugin extends HotkeyPlugin {
+interface LinkPlugin {
   /**
    * Allow custom config for rangeBeforeOptions.
+   * @example default
+   * {
+   *   matchString: ' ',
+   *   skipInvalid: true,
+   *   afterMatch: true,
+   * }
    */
   rangeBeforeOptions?: RangeBeforeOptions;
 
+  /**
+   * Hotkeys to trigger floating link.
+   * @default 'command+k, ctrl+k'
+   */
+  triggerFloatingLinkHotkeys?: string;
+
   /**
    * Callback to validate an url.
+   * @default isUrl
    */
   isUrl?: (text: string) => boolean;
 
+  /**
+   * Callback to optionally get the href for a url
+   * @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)
+   */
+  getUrlHref?: (url: string) => string | undefined;
+
   /**
    * On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The
    * default behavior is to use the browser's native `prompt`.

docs/docs/sandpack/files/common/code-components.ts

@@ -1,5 +1,5 @@
-export const componentsCode = `import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block/src/index';
-import { createPlateUI } from '@udecode/plate-ui/src/index';
+export const componentsCode = `import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
+import { createPlateUI } from '@udecode/plate-ui';
 
 export const plateUI = createPlateUI({
   // disabled for the sandbox as prismjs is throwing an error sometimes