@udecode/plate-floating - npm Package Compare versions

Comparing version 32.0.0 to 33.0.0

dist/index.d.ts

@@ -5,4 +5,4 @@ import { ClientRectObject } from '@floating-ui/core';
 import React from 'react';
-import * as _floating_ui_react_src_types from '@floating-ui/react/src/types';
-import { Value, TReactEditor } from '@udecode/plate-common';
+import { TReactEditor } from '@udecode/plate-common';
+import { Value } from '@udecode/plate-common/server';
 import { Location, Range } from 'slate';
@@ -18,12 +18,15 @@
 interface UseVirtualFloatingReturn<RT extends ReferenceType = ReferenceType> extends UseFloatingReturn<RT> {
+    style: React.CSSProperties;
     virtualElementRef: React.MutableRefObject<VirtualElement>;
-    style: React.CSSProperties;
 }
 /**
- * `useFloating` with a controlled virtual element. Used to follow cursor position.
+ * `useFloating` with a controlled virtual element. Used to follow cursor
+ * position.
  *
  * Default options:
+ *
  * - `whileElementsMounted: autoUpdate`
  *
  * Additional options:
+ *
  * - `getBoundingClientRect` to get the bounding client rect.
@@ -33,2 +36,3 @@ * - `hidden` to hide the floating element
  * Additional returns:
+ *
  * - `style` to apply to the floating element
@@ -44,25 +48,25 @@ * - `virtualElementRef`
     floatingOptions?: UseVirtualFloatingOptions;
+    hideToolbar?: boolean;
     ignoreReadOnly?: boolean;
-    hideToolbar?: boolean;
 };
 declare const useFloatingToolbarState: ({ floatingOptions, hideToolbar, ignoreReadOnly, }: FloatingToolbarState) => {
     editorId: string;
+    floating: UseVirtualFloatingReturn<ReferenceType>;
+    focused: boolean;
+    focusedEditorId: string | null;
+    hideToolbar: boolean | undefined;
+    ignoreReadOnly: boolean | undefined;
     open: boolean;
+    selectionExpanded: boolean;
+    selectionText: string;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setWaitForCollapsedSelection: React.Dispatch<React.SetStateAction<boolean>>;
     waitForCollapsedSelection: boolean;
-    setWaitForCollapsedSelection: React.Dispatch<React.SetStateAction<boolean>>;
-    selectionExpanded: boolean;
-    selectionText: string;
-    focused: boolean;
-    focusedEditorId: string | null;
-    ignoreReadOnly: boolean | undefined;
-    hideToolbar: boolean | undefined;
-    floating: UseVirtualFloatingReturn<_floating_ui_react_src_types.ReferenceType>;
 };
-declare const useFloatingToolbar: ({ editorId, selectionExpanded, selectionText, waitForCollapsedSelection, setWaitForCollapsedSelection, open, setOpen, focused, focusedEditorId, floating, ignoreReadOnly, hideToolbar, }: ReturnType<typeof useFloatingToolbarState>) => {
-    ref: (node: HTMLElement | null) => void;
+declare const useFloatingToolbar: ({ editorId, floating, focused, focusedEditorId, hideToolbar, ignoreReadOnly, open, selectionExpanded, selectionText, setOpen, setWaitForCollapsedSelection, waitForCollapsedSelection, }: ReturnType<typeof useFloatingToolbarState>) => {
+    hidden: boolean;
     props: {
         style: React.CSSProperties;
     };
-    hidden: boolean;
+    ref: (node: HTMLElement | null) => void;
 };
@@ -77,17 +81,13 @@
 
-/**
- * Get bounding client rect by slate range
- */
+/** Get bounding client rect by slate range */
 declare const getRangeBoundingClientRect: <V extends Value>(editor: TReactEditor<V>, at: Range | null) => ClientRectObject;
 
-/**
- * Get bounding client rect of the window selection
- */
+/** Get bounding client rect of the window selection */
 declare const getSelectionBoundingClientRect: () => ClientRectObject;
 
-declare const makeClientRect: ({ top, bottom, left, right, }: {
-    top: number;
+declare const makeClientRect: ({ bottom, left, right, top, }: {
     bottom: number;
     left: number;
     right: number;
+    top: number;
 }) => DOMRect;
@@ -94,0 +94,0 @@

dist/index.js

@@ -114,10 +114,10 @@ "use strict";
 var getDefaultBoundingClientRect = () => ({
-  width: 0,
+  bottom: 9999,
   height: 0,
-  x: 0,
-  y: 0,
-  top: -9999,
   left: -9999,
   right: 9999,
-  bottom: 9999
+  top: -9999,
+  width: 0,
+  x: 0,
+  y: 0
 });
@@ -131,2 +131,3 @@ var createVirtualElement = () => ({
 var import_plate_common = require("@udecode/plate-common");
+var import_server = require("@udecode/plate-common/server");
 var import_slate_react = require("slate-react");
@@ -139,5 +140,5 @@ var useFloatingToolbarState = ({
   const editorId = (0, import_plate_common.usePlateSelectors)().id();
-  const selectionExpanded = (0, import_plate_common.useEditorSelector)(import_plate_common.isSelectionExpanded, []);
-  const selectionText = (0, import_plate_common.useEditorSelector)(import_plate_common.getSelectionText, []);
-  const focusedEditorId = import_plate_common.useEventEditorSelectors.focus();
+  const selectionExpanded = (0, import_plate_common.useEditorSelector)(import_server.isSelectionExpanded, []);
+  const selectionText = (0, import_plate_common.useEditorSelector)(import_server.getSelectionText, []);
+  const focusedEditorId = import_server.useEventEditorSelectors.focus();
   const focused = (0, import_slate_react.useFocused)();
@@ -147,7 +148,7 @@ const [open, setOpen] = import_react.default.useState(false);
   const floating = useVirtualFloating(
-    (0, import_plate_common.mergeProps)(
+    (0, import_server.mergeProps)(
       {
         getBoundingClientRect: getSelectionBoundingClientRect,
-        open,
-        onOpenChange: setOpen
+        onOpenChange: setOpen,
+        open
       },
@@ -159,13 +160,13 @@ floatingOptions
     editorId,
+    floating,
+    focused,
+    focusedEditorId,
+    hideToolbar,
+    ignoreReadOnly,
     open,
+    selectionExpanded,
+    selectionText,
     setOpen,
-    waitForCollapsedSelection,
     setWaitForCollapsedSelection,
-    selectionExpanded,
-    selectionText,
-    focused,
-    focusedEditorId,
-    ignoreReadOnly,
-    hideToolbar,
-    floating
+    waitForCollapsedSelection
   };
@@ -175,13 +176,13 @@ };
   editorId,
+  floating,
+  focused,
+  focusedEditorId,
+  hideToolbar,
+  ignoreReadOnly,
+  open,
   selectionExpanded,
   selectionText,
-  waitForCollapsedSelection,
+  setOpen,
   setWaitForCollapsedSelection,
-  open,
-  setOpen,
-  focused,
-  focusedEditorId,
-  floating,
-  ignoreReadOnly,
-  hideToolbar
+  waitForCollapsedSelection
 }) => {
@@ -226,7 +227,7 @@ var _a;
   return {
-    ref: floating.refs.setFloating,
+    hidden: !open,
     props: {
       style: floating.style
     },
-    hidden: !open
+    ref: floating.refs.setFloating
   };
@@ -244,2 +245,3 @@ };
 var import_plate_common2 = require("@udecode/plate-common");
+var import_server2 = require("@udecode/plate-common/server");
 var import_slate = require("slate");
@@ -249,6 +251,6 @@
 var makeClientRect = ({
-  top,
   bottom,
   left,
-  right
+  right,
+  top
 }) => {
@@ -258,10 +260,10 @@ const width = right - left;
   const props = {
-    x: left,
-    y: top,
-    top,
     bottom,
+    height,
     left,
     right,
+    top,
     width,
-    height
+    x: left,
+    y: top
   };
@@ -279,6 +281,6 @@ return __spreadProps(__spreadValues({}, props), {
   return makeClientRect({
-    top: Math.min(...clientRects.map((rect) => rect.top)),
     bottom: Math.max(...clientRects.map((rect) => rect.bottom)),
     left: Math.min(...clientRects.map((rect) => rect.left)),
-    right: Math.max(...clientRects.map((rect) => rect.right))
+    right: Math.max(...clientRects.map((rect) => rect.right)),
+    top: Math.min(...clientRects.map((rect) => rect.top))
   });
@@ -293,3 +295,3 @@ };
     const atArray = Array.isArray(at) && !import_slate.Path.isPath(at) ? at : [at];
-    return atArray.map((location) => (0, import_plate_common2.getRange)(editor, location));
+    return atArray.map((location) => (0, import_server2.getRange)(editor, location));
   })();
@@ -356,3 +358,3 @@ const clientRects = atRanges.map((range) => {
   }, floatingOptions));
-  const { refs, middlewareData, strategy, x, y, update } = floatingResult;
+  const { middlewareData, refs, strategy, update, x, y } = floatingResult;
   (0, import_plate_common4.useIsomorphicLayoutEffect)(() => {
@@ -371,10 +373,10 @@ virtualElementRef.current.getBoundingClientRect = getBoundingClientRect2;
   return __spreadProps(__spreadValues({}, floatingResult), {
-    virtualElementRef,
     style: {
+      display: floatingOptions.open === false ? "none" : void 0,
+      left: x != null ? x : 0,
       position: strategy,
       top: y != null ? y : 0,
-      left: x != null ? x : 0,
-      display: floatingOptions.open === false ? "none" : void 0,
       visibility: visible ? void 0 : "hidden"
-    }
+    },
+    virtualElementRef
   });
@@ -381,0 +383,0 @@ };

package.json

 {
   "name": "@udecode/plate-floating",
-  "version": "32.0.0",
+  "version": "33.0.0",
   "description": "Floating UI for Plate",
@@ -49,3 +49,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@udecode/plate-common": ">=32.0.0",
+    "@udecode/plate-common": ">=33.0.0",
     "react": ">=16.8.0",
@@ -52,0 +52,0 @@ "react-dom": ">=16.8.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69915

increased by1.03%

Worsened metrics

Lines of code

862

decreased by-0.12%

No dependency changes