Socket
Socket
Sign inDemoInstall

@udecode/plate-utils

Package Overview
Dependencies
Maintainers
2
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@udecode/plate-utils - npm Package Compare versions

Comparing version 28.0.0 to 29.0.0

230

dist/index.d.ts

@@ -1,17 +0,12 @@

import * as React$1 from 'react';
import React__default, { ComponentPropsWithRef, ReactElement, ReactNode, ReactPortal, Ref, RefObject, DependencyList, FunctionComponent } from 'react';
import * as slate_react from 'slate-react';
import * as _udecode_plate_core from '@udecode/plate-core';
import { PlateRenderElementProps, PlateRenderLeafProps, PlateEditor, WithPlatePlugin, HotkeyPlugin, KeyboardHandlerReturnType, ToggleMarkPlugin, ApplyDeepToNodesOptions } from '@udecode/plate-core';
import { Value, TElement, EElement, TText, EText, QueryNodeOptions, TNode } from '@udecode/slate';
import { PlateRenderElementProps, PlateRenderLeafProps, ApplyDeepToNodesOptions, PlateEditor, WithPlatePlugin, HotkeyPlugin, KeyboardHandlerReturnType, ToggleMarkPlugin } from '@udecode/plate-core';
import * as React$1 from 'react';
import React__default from 'react';
import { BoxProps, TextProps } from '@udecode/react-utils';
import { Value, TElement, EElement, TText, EText, TNode, QueryNodeOptions } from '@udecode/slate';
import { AnyObject } from '@udecode/utils';
import { TReactEditor } from '@udecode/slate-react';
import { Location } from 'slate';
import { AnyObject } from '@udecode/utils';
declare const Box: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
as?: React$1.ElementType<any> | undefined;
asChild?: boolean | undefined;
} & React$1.RefAttributes<any>>;
type BoxProps = ComponentPropsWithRef<typeof Box>;
type PlateElementProps<V extends Value = Value, N extends TElement = EElement<V>> = PlateRenderElementProps<V, N> & BoxProps & {

@@ -40,3 +35,3 @@ /**

elementToAttributes?: ((element: N) => any) | undefined;
} & React__default.RefAttributes<HTMLDivElement>) => ReactElement) & {
} & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement) & {
displayName?: string | undefined;

@@ -58,3 +53,3 @@ };

*/
declare const PlateLeaf: (<V extends Value = Value, N extends TText = EText<V>>({ className, ...props }: _udecode_plate_core.PlateRenderNodeProps<V, _udecode_plate_core.PlateEditor<V>> & Omit<slate_react.RenderLeafProps, "text" | "leaf"> & {
declare const PlateLeaf: (<V extends Value = Value, N extends TText = EText<V>>({ className, ...props }: _udecode_plate_core.PlateRenderNodeProps<V, _udecode_plate_core.PlateEditor<V>> & Omit<slate_react.RenderLeafProps, "leaf" | "text"> & {
leaf: N;

@@ -70,29 +65,59 @@ text: N;

leafToAttributes?: ((leaf: N) => any) | undefined;
} & React__default.RefAttributes<HTMLSpanElement>) => ReactElement) & {
} & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement) & {
displayName?: string | undefined;
};
type PortalBodyProps = {
children: ReactNode;
element?: Element;
declare const createNodeHOC: <V extends Value, T>(HOC: React__default.FC<T>) => (Component: any, props: T) => (childrenProps: PlateRenderElementProps<V>) => React__default.JSX.Element;
type CreateHOCOptions<T> = Partial<T> & AnyObject & {
/**
* Set HOC by key.
*/
key?: string;
/**
* Set HOC by key.
*/
keys?: string[];
};
declare const PortalBody: ({ children, element, }: PortalBodyProps) => ReactPortal;
/**
* Create components HOC by plugin key.
*/
declare const createNodesHOC: <T>(HOC: React$1.FC<T>) => (components: any, options: CreateHOCOptions<T> | CreateHOCOptions<T>[]) => any;
/**
* Create components HOC by plugin key with a custom HOC.
*/
declare const createNodesWithHOC: <T>(withHOC: (component: any, props: T) => any) => (components: any, options: CreateHOCOptions<T> | CreateHOCOptions<T>[]) => any;
declare const Text: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
as?: React$1.ElementType<any> | undefined;
asChild?: boolean | undefined;
} & React$1.RefAttributes<any>>;
type TextProps = ComponentPropsWithRef<typeof Text>;
/**
* Recursively merge a source object to children nodes with a query.
*/
declare const defaultsDeepToNodes: <N extends TNode>(options: Omit<ApplyDeepToNodesOptions<N>, "apply">) => void;
type PossibleRef<T> = Ref<T> | undefined;
/**
* A utility to compose multiple refs together
* Accepts callback refs and RefObject(s)
* Does the node match the type provided.
*/
declare const composeRefs: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
declare const isType: <V extends Value>(editor: PlateEditor<V>, node: any, key?: string | string[]) => boolean;
declare const onKeyDownToggleElement: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E, { type, options: { hotkey } }: WithPlatePlugin<HotkeyPlugin, V, E>) => KeyboardHandlerReturnType;
declare const onKeyDownToggleMark: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E, { type, options: { hotkey, clear }, }: WithPlatePlugin<ToggleMarkPlugin, V, E>) => KeyboardHandlerReturnType;
interface SelectEditorOptions {
/**
* Specific location if edge is not defined.
*/
at?: Location;
/**
* Start or end of the editor.
*/
edge?: 'start' | 'end';
/**
* If true, focus the React editor before selecting.
*/
focus?: boolean;
}
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
* Select an editor at a target or an edge (start, end).
*/
declare const useComposedRef: <T>(...refs: PossibleRef<T>[]) => (node: T) => void;
declare const selectEditor: <V extends Value>(editor: TReactEditor<V>, { at, edge, focus }: SelectEditorOptions) => void;

@@ -115,21 +140,2 @@ declare const useMarkToolbarButtonState: ({ nodeType, clear, }: {

declare const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
interface UseOnClickOutsideCallback<T extends Event = Event> {
(event: T): void;
}
type El = HTMLElement;
type Refs = RefObject<El>[];
interface UseOnClickOutsideOptions {
refs?: Refs;
disabled?: boolean;
eventTypes?: string[];
excludeScrollbar?: boolean;
ignoreClass?: string | string[];
detectIFrame?: boolean;
}
interface UseOnClickOutsideReturn {
(element: El | null): void;
}
declare const useOnClickOutside: (callback: UseOnClickOutsideCallback, { refs: refsOpt, disabled, eventTypes, excludeScrollbar, ignoreClass, detectIFrame, }?: UseOnClickOutsideOptions) => UseOnClickOutsideReturn;
interface PlaceholderProps extends PlateElementProps {

@@ -153,32 +159,2 @@ placeholder: string;

declare const useStableMemo: <T>(producer: () => T, deps?: DependencyList) => T;
declare const onKeyDownToggleElement: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E, { type, options: { hotkey } }: WithPlatePlugin<HotkeyPlugin, V, E>) => KeyboardHandlerReturnType;
declare const onKeyDownToggleMark: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E, { type, options: { hotkey, clear }, }: WithPlatePlugin<ToggleMarkPlugin, V, E>) => KeyboardHandlerReturnType;
/**
* Does the node match the type provided.
*/
declare const isType: <V extends Value>(editor: PlateEditor<V>, node: any, key?: string | string[]) => boolean;
interface SelectEditorOptions {
/**
* Specific location if edge is not defined.
*/
at?: Location;
/**
* Start or end of the editor.
*/
edge?: 'start' | 'end';
/**
* If true, focus the React editor before selecting.
*/
focus?: boolean;
}
/**
* Select an editor at a target or an edge (start, end).
*/
declare const selectEditor: <V extends Value>(editor: TReactEditor<V>, { at, edge, focus }: SelectEditorOptions) => void;
type ClassNames<T> = {

@@ -193,96 +169,2 @@ classNames?: Partial<T>;

/**
* @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1
*/
declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined, { checkForDefaultPrevented }?: {
checkForDefaultPrevented?: boolean | undefined;
}) => (event: E) => void;
declare const createNodeHOC: <V extends Value, T>(HOC: React__default.FunctionComponent<T>) => (Component: any, props: T) => (childrenProps: PlateRenderElementProps<V>) => React__default.JSX.Element;
type CreateHOCOptions<T> = Partial<T> & AnyObject & {
/**
* Set HOC by key.
*/
key?: string;
/**
* Set HOC by key.
*/
keys?: string[];
};
/**
* Create components HOC by plugin key.
*/
declare const createNodesHOC: <T>(HOC: FunctionComponent<T>) => (components: any, options: CreateHOCOptions<T> | CreateHOCOptions<T>[]) => any;
/**
* Create components HOC by plugin key with a custom HOC.
*/
declare const createNodesWithHOC: <T>(withHOC: (component: any, props: T) => any) => (components: any, options: CreateHOCOptions<T> | CreateHOCOptions<T>[]) => any;
/**
* Primitive component factory. It uses hooks for managing
* state and props, and forwards references to child components.
* Component props:
* - `asChild`: If true, the component will be rendered as a `Slot` {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
* - `options`: Options passed to the state hook.
* - `state`: Provide your state instead of using the state hook.
* - `className`: Class name to be merged to the component.
* - `style`: Style object to be merged to the component.
* - `setProps`: Function to set props from the props hook.
* - `...props`: Props to be passed to the component.
* Props hook return value:
* - `ref`: Reference to be forwarded to the component.
* - `props`: Props to be passed to the component.
* - `hidden`: If true, the component will not be rendered.
*
* @param {React.ElementType} element The base component or native HTML element.
* @returns {function} A primitive component.
*
* @example
*
* const MyButton = createPrimitiveComponent(Button)({
* stateHook: useButtonState,
* propsHook: useButton
* });
*/
declare const createPrimitiveComponent: <T extends React__default.ElementType<any>, P extends React__default.PropsWithoutRef<React__default.ComponentProps<T>>>(element: T) => <SH extends (options: any) => any, PH extends (state: any) => any>({ propsHook, stateHook, }?: {
stateHook?: SH | undefined;
propsHook?: PH | undefined;
}) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<{
as?: React__default.ElementType<any> | undefined;
asChild?: boolean | undefined;
className?: string | undefined;
style?: React__default.CSSProperties | undefined;
options?: Parameters<SH>[0] | undefined;
state?: Parameters<PH>[0] | undefined;
setProps?: ((hookProps: NonNullable<ReturnType<PH>["props"]>) => P) | undefined;
} & P> & React__default.RefAttributes<any>>;
declare const createSlotComponent: <T extends React__default.ElementType<any>, P extends React__default.PropsWithoutRef<React__default.ComponentProps<T>>>(element: T) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<P & {
as?: React__default.ElementType<any> | undefined;
asChild?: boolean | undefined;
}> & React__default.RefAttributes<any>>;
/**
* Recursively merge a source object to children nodes with a query.
*/
declare const defaultsDeepToNodes: <N extends TNode>(options: Omit<ApplyDeepToNodesOptions<N>, "apply">) => void;
/**
* Get Plate component root props.
*/
declare const getRootProps: <T>(props: T) => Omit<T, "text" | "children" | "leaf" | "element" | "attributes" | "editor" | "nodeProps">;
/**
* HOC adding props.
*/
declare const withProps: <T>(Component: FunctionComponent<T>, props: Partial<T>) => FunctionComponent<any>;
/**
* Wrap a component into multiple providers.
* If there are any props that you want a provider to receive,
* you can simply pass an array.
*/
declare const withProviders: (...providers: any[]) => <T>(WrappedComponent: React__default.FunctionComponent<T>) => (props: T) => any;
export { Box, BoxProps, ClassNames, CreateHOCOptions, DEFAULT_IGNORE_CLASS, ErrorHandler, OnError, PlaceholderProps, PlateElement, PlateElementProps, PlateLeaf, PlateLeafProps, PortalBody, PortalBodyProps, SelectEditorOptions, Text, TextProps, UseOnClickOutsideCallback, UseOnClickOutsideOptions, UseOnClickOutsideReturn, composeEventHandlers, composeRefs, createNodeHOC, createNodesHOC, createNodesWithHOC, createPrimitiveComponent, createSlotComponent, defaultsDeepToNodes, getRootProps, isType, onKeyDownToggleElement, onKeyDownToggleMark, selectEditor, useComposedRef, useMarkToolbarButton, useMarkToolbarButtonState, useOnClickOutside, usePlaceholderState, usePlateElement, usePlateLeaf, useRemoveNodeButton, useStableMemo, withProps, withProviders };
export { ClassNames, CreateHOCOptions, ErrorHandler, OnError, PlaceholderProps, PlateElement, PlateElementProps, PlateLeaf, PlateLeafProps, SelectEditorOptions, createNodeHOC, createNodesHOC, createNodesWithHOC, defaultsDeepToNodes, isType, onKeyDownToggleElement, onKeyDownToggleMark, selectEditor, useMarkToolbarButton, useMarkToolbarButtonState, usePlaceholderState, usePlateElement, usePlateLeaf, useRemoveNodeButton };

517

dist/index.js

@@ -62,17 +62,8 @@ "use strict";

__export(src_exports, {
Box: () => Box,
DEFAULT_IGNORE_CLASS: () => DEFAULT_IGNORE_CLASS,
PlateElement: () => PlateElement,
PlateLeaf: () => PlateLeaf,
PortalBody: () => PortalBody,
Text: () => Text,
composeEventHandlers: () => composeEventHandlers,
composeRefs: () => composeRefs,
createNodeHOC: () => createNodeHOC,
createNodesHOC: () => createNodesHOC,
createNodesWithHOC: () => createNodesWithHOC,
createPrimitiveComponent: () => createPrimitiveComponent,
createSlotComponent: () => createSlotComponent,
defaultsDeepToNodes: () => defaultsDeepToNodes,
getRootProps: () => getRootProps,
isType: () => isType,

@@ -82,33 +73,14 @@ onKeyDownToggleElement: () => onKeyDownToggleElement,

selectEditor: () => selectEditor,
useComposedRef: () => useComposedRef,
useMarkToolbarButton: () => useMarkToolbarButton,
useMarkToolbarButtonState: () => useMarkToolbarButtonState,
useOnClickOutside: () => useOnClickOutside,
usePlaceholderState: () => usePlaceholderState,
usePlateElement: () => usePlateElement,
usePlateLeaf: () => usePlateLeaf,
useRemoveNodeButton: () => useRemoveNodeButton,
useStableMemo: () => useStableMemo,
withProps: () => withProps,
withProviders: () => withProviders
useRemoveNodeButton: () => useRemoveNodeButton
});
module.exports = __toCommonJS(src_exports);
// src/utils/createSlotComponent.tsx
// src/PlateElement.tsx
var import_react = __toESM(require("react"));
var import_react_slot = require("@radix-ui/react-slot");
var createSlotComponent = (element) => (
// eslint-disable-next-line react/display-name
import_react.default.forwardRef((_a, ref) => {
var _b = _a, { as, asChild = false } = _b, props = __objRest(_b, ["as", "asChild"]);
const Comp = asChild ? import_react_slot.Slot : as || element;
return /* @__PURE__ */ import_react.default.createElement(Comp, __spreadValues({ ref }, props));
})
);
// src/components/Box.tsx
var Box = createSlotComponent("div");
// src/components/PlateElement.tsx
var import_react2 = __toESM(require("react"));
var import_react_utils = require("@udecode/react-utils");
var import_clsx = require("clsx");

@@ -130,3 +102,3 @@ var usePlateElement = (props) => {

return {
ref: useComposedRef(props.ref, attributes.ref),
ref: (0, import_react_utils.useComposedRef)(props.ref, attributes.ref),
props: __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, attributes), rootProps), nodeProps), elementToAttributes == null ? void 0 : elementToAttributes(element)), {

@@ -137,3 +109,3 @@ className: (0, import_clsx.clsx)(props.className, nodeProps == null ? void 0 : nodeProps.className)

};
var PlateElement = import_react2.default.forwardRef(
var PlateElement = import_react.default.forwardRef(
(props, ref) => {

@@ -143,3 +115,3 @@ const { ref: rootRef, props: rootProps } = usePlateElement(__spreadProps(__spreadValues({}, props), {

}));
return /* @__PURE__ */ import_react2.default.createElement(Box, __spreadProps(__spreadValues({}, rootProps), { ref: rootRef }));
return /* @__PURE__ */ import_react.default.createElement(import_react_utils.Box, __spreadProps(__spreadValues({}, rootProps), { ref: rootRef }));
}

@@ -149,4 +121,5 @@ );

// src/components/PlateLeaf.tsx
var import_react3 = __toESM(require("react"));
// src/PlateLeaf.tsx
var import_react2 = __toESM(require("react"));
var import_react_utils2 = require("@udecode/react-utils");
var import_clsx2 = require("clsx");

@@ -170,3 +143,3 @@ var usePlateLeaf = (props) => {

return {
ref: useComposedRef(props.ref, attributes.ref),
ref: (0, import_react_utils2.useComposedRef)(props.ref, attributes.ref),
props: __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, attributes), rootProps), nodeProps), leafToAttributes == null ? void 0 : leafToAttributes(leaf)), {

@@ -177,6 +150,6 @@ className: (0, import_clsx2.clsx)(props.className, nodeProps == null ? void 0 : nodeProps.className)

};
var PlateLeaf = import_react3.default.forwardRef(
var PlateLeaf = import_react2.default.forwardRef(
(props, ref) => {
const { ref: rootRef, props: rootProps } = usePlateLeaf(__spreadProps(__spreadValues({}, props), { ref }));
return /* @__PURE__ */ import_react3.default.createElement(Text, __spreadProps(__spreadValues({}, rootProps), { ref: rootRef }));
return /* @__PURE__ */ import_react2.default.createElement(import_react_utils2.Text, __spreadProps(__spreadValues({}, rootProps), { ref: rootRef }));
}

@@ -186,30 +159,9 @@ );

// src/components/PortalBody.tsx
var import_react4 = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var PortalBody = ({
children,
element
}) => {
const container = element || typeof window !== "undefined" ? document.body : void 0;
if (!container)
return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children);
return import_react_dom.default.createPortal(children, element || document.body);
};
// src/utils/composeEventHandlers.ts
var composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
originalEventHandler == null ? void 0 : originalEventHandler(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
return ourEventHandler == null ? void 0 : ourEventHandler(event);
}
};
// src/utils/createNodeHOC.tsx
var import_react5 = __toESM(require("react"));
// src/createNodeHOC.tsx
var import_react3 = __toESM(require("react"));
var createNodeHOC = (HOC) => (Component, props) => function hoc(childrenProps) {
return /* @__PURE__ */ import_react5.default.createElement(HOC, __spreadValues(__spreadValues({}, childrenProps), props), /* @__PURE__ */ import_react5.default.createElement(Component, __spreadValues({}, childrenProps)));
return /* @__PURE__ */ import_react3.default.createElement(HOC, __spreadValues(__spreadValues({}, childrenProps), props), /* @__PURE__ */ import_react3.default.createElement(Component, __spreadValues({}, childrenProps)));
};
// src/utils/createNodesHOC.tsx
// src/createNodesHOC.tsx
var import_castArray = __toESM(require("lodash/castArray.js"));

@@ -244,24 +196,80 @@ var import_merge = __toESM(require("lodash/merge.js"));

// src/utils/createPrimitiveComponent.tsx
var import_react9 = __toESM(require("react"));
var import_utils = require("@udecode/utils");
var import_clsx3 = require("clsx");
// src/defaultsDeepToNodes.ts
var import_plate_core = require("@udecode/plate-core");
var import_defaults = __toESM(require("lodash/defaults.js"));
var defaultsDeepToNodes = (options) => {
(0, import_plate_core.applyDeepToNodes)(__spreadProps(__spreadValues({}, options), { apply: import_defaults.default }));
};
// src/hooks/useComposedRef.ts
var import_react6 = require("react");
var setRef = (ref, value) => {
if (typeof ref === "function") {
ref(value);
} else if (ref !== null && ref !== void 0) {
ref.current = value;
// src/isType.ts
var import_plate_core2 = require("@udecode/plate-core");
var import_castArray2 = __toESM(require("lodash/castArray.js"));
var isType = (editor, node, key) => {
const keys = (0, import_castArray2.default)(key);
const types = [];
keys.forEach((_key) => types.push((0, import_plate_core2.getPluginType)(editor, _key)));
return types.includes(node == null ? void 0 : node.type);
};
// src/onKeyDownToggleElement.ts
var import_plate_core3 = require("@udecode/plate-core");
var import_castArray3 = __toESM(require("lodash/castArray.js"));
var onKeyDownToggleElement = (editor, { type, options: { hotkey } }) => (e) => {
if (e.defaultPrevented)
return;
const defaultType = (0, import_plate_core3.getPluginType)(editor, import_plate_core3.ELEMENT_DEFAULT);
if (!hotkey)
return;
const hotkeys = (0, import_castArray3.default)(hotkey);
for (const _hotkey of hotkeys) {
if ((0, import_plate_core3.isHotkey)(_hotkey, e)) {
e.preventDefault();
(0, import_plate_core3.toggleNodeType)(editor, {
activeType: type,
inactiveType: defaultType
});
return;
}
}
};
var composeRefs = (...refs) => (node) => refs.forEach((ref) => setRef(ref, node));
var useComposedRef = (...refs) => {
return (0, import_react6.useCallback)(composeRefs(...refs), refs);
// src/onKeyDownToggleMark.ts
var import_plate_core4 = require("@udecode/plate-core");
var import_slate_utils = require("@udecode/slate-utils");
var onKeyDownToggleMark = (editor, {
type,
options: { hotkey, clear }
}) => (e) => {
if (e.defaultPrevented)
return;
if (!hotkey)
return;
if ((0, import_plate_core4.isHotkey)(hotkey, e)) {
e.preventDefault();
(0, import_slate_utils.toggleMark)(editor, { key: type, clear });
}
};
// src/hooks/useMarkToolbarButton.ts
var import_plate_core = require("@udecode/plate-core");
var import_slate_utils = require("@udecode/slate-utils");
// src/selectEditor.ts
var import_slate = require("@udecode/slate");
var import_slate_react = require("@udecode/slate-react");
var selectEditor = (editor, { at, edge, focus }) => {
if (focus) {
(0, import_slate_react.focusEditor)(editor);
}
let location = at;
if (edge === "start") {
location = (0, import_slate.getStartPoint)(editor, []);
}
if (edge === "end") {
location = (0, import_slate.getEndPoint)(editor, []);
}
if (location) {
(0, import_slate.select)(editor, location);
}
};
// src/useMarkToolbarButton.ts
var import_plate_core5 = require("@udecode/plate-core");
var import_slate_utils2 = require("@udecode/slate-utils");
var useMarkToolbarButtonState = ({

@@ -271,4 +279,4 @@ nodeType,

}) => {
const pressed = (0, import_plate_core.useEditorSelector)(
(editor) => (0, import_slate_utils.isMarkActive)(editor, nodeType),
const pressed = (0, import_plate_core5.useEditorSelector)(
(editor) => (0, import_slate_utils2.isMarkActive)(editor, nodeType),
[nodeType]

@@ -283,3 +291,3 @@ );

var useMarkToolbarButton = (state) => {
const editor = (0, import_plate_core.useEditorRef)();
const editor = (0, import_plate_core5.useEditorRef)();
return {

@@ -292,3 +300,3 @@ props: {

onClick: () => {
(0, import_slate_utils.toggleMark)(editor, { key: state.nodeType, clear: state.clear });
(0, import_slate_utils2.toggleMark)(editor, { key: state.nodeType, clear: state.clear });
}

@@ -299,117 +307,7 @@ }

// src/hooks/useOnClickOutside.ts
var import_react7 = require("react");
var canUsePassiveEvents = () => {
if (typeof window === "undefined" || typeof window.addEventListener !== "function")
return false;
let passive = false;
const options = Object.defineProperty({}, "passive", {
// eslint-disable-next-line getter-return
get() {
passive = true;
}
});
const noop = () => null;
window.addEventListener("test", noop, options);
window.removeEventListener("test", noop, options);
return passive;
};
var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
var checkClass = (el, cl) => {
var _a;
return (_a = el.classList) == null ? void 0 : _a.contains(cl);
};
var hasIgnoreClass = (e, ignoreClass) => {
let el = e.target || e;
while (el) {
if (Array.isArray(ignoreClass)) {
if (ignoreClass.some((c) => checkClass(el, c)))
return true;
} else if (checkClass(el, ignoreClass)) {
return true;
}
el = el.parentElement;
}
return false;
};
var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
var useOnClickOutside = (callback, {
refs: refsOpt,
disabled,
eventTypes = ["mousedown", "touchstart"],
excludeScrollbar,
ignoreClass = DEFAULT_IGNORE_CLASS,
detectIFrame = true
} = {}) => {
const [refsState, setRefsState] = (0, import_react7.useState)([]);
const callbackRef = (0, import_react7.useRef)(callback);
callbackRef.current = callback;
const ref = (0, import_react7.useCallback)(
(el) => setRefsState((prevState) => [...prevState, { current: el }]),
[]
);
(0, import_react7.useEffect)(
() => {
if (!(refsOpt == null ? void 0 : refsOpt.length) && refsState.length === 0)
return;
const getEls = () => {
const els = [];
(refsOpt || refsState).forEach(
({ current }) => current && els.push(current)
);
return els;
};
const handler = (e) => {
if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target)))
callbackRef.current(e);
};
const blurHandler = (e) => (
// On firefox the iframe becomes document.activeElement in the next event loop
setTimeout(() => {
const { activeElement } = document;
if ((activeElement == null ? void 0 : activeElement.tagName) === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement))
callbackRef.current(e);
}, 0)
);
const removeEventListener = () => {
eventTypes.forEach(
(type) => (
// @ts-ignore
document.removeEventListener(type, handler, getEventOptions(type))
)
);
if (detectIFrame)
window.removeEventListener("blur", blurHandler);
};
if (disabled) {
removeEventListener();
return;
}
eventTypes.forEach(
(type) => document.addEventListener(type, handler, getEventOptions(type))
);
if (detectIFrame)
window.addEventListener("blur", blurHandler);
return () => removeEventListener();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[
refsState,
ignoreClass,
excludeScrollbar,
disabled,
detectIFrame,
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(eventTypes)
]
);
return ref;
};
// src/hooks/usePlaceholder.ts
var import_plate_core2 = require("@udecode/plate-core");
var import_slate = require("@udecode/slate");
var import_slate_react = require("@udecode/slate-react");
var import_slate_react2 = require("slate-react");
// src/usePlaceholder.ts
var import_plate_core6 = require("@udecode/plate-core");
var import_slate2 = require("@udecode/slate");
var import_slate_react2 = require("@udecode/slate-react");
var import_slate_react3 = require("slate-react");
var usePlaceholderState = ({

@@ -420,7 +318,7 @@ hideOnBlur = true,

}) => {
const focused = (0, import_slate_react2.useFocused)();
const selected = (0, import_slate_react2.useSelected)();
const editor = (0, import_plate_core2.useEditorRef)();
const isEmptyBlock = (0, import_slate.isElementEmpty)(editor, element);
const enabled = isEmptyBlock && (!query || (0, import_slate.queryNode)([element, (0, import_slate_react.findNodePath)(editor, element)], query)) && (!hideOnBlur || (0, import_slate.isCollapsed)(editor.selection) && hideOnBlur && focused && selected);
const focused = (0, import_slate_react3.useFocused)();
const selected = (0, import_slate_react3.useSelected)();
const editor = (0, import_plate_core6.useEditorRef)();
const isEmptyBlock = (0, import_slate2.isElementEmpty)(editor, element);
const enabled = isEmptyBlock && (!query || (0, import_slate2.queryNode)([element, (0, import_slate_react2.findNodePath)(editor, element)], query)) && (!hideOnBlur || (0, import_slate2.isCollapsed)(editor.selection) && hideOnBlur && focused && selected);
return {

@@ -431,8 +329,8 @@ enabled

// src/hooks/useRemoveNodeButton.ts
var import_plate_core3 = require("@udecode/plate-core");
var import_slate2 = require("@udecode/slate");
var import_slate_react3 = require("@udecode/slate-react");
// src/useRemoveNodeButton.ts
var import_plate_core7 = require("@udecode/plate-core");
var import_slate3 = require("@udecode/slate");
var import_slate_react4 = require("@udecode/slate-react");
var useRemoveNodeButton = ({ element }) => {
const editor = (0, import_plate_core3.useEditorRef)();
const editor = (0, import_plate_core7.useEditorRef)();
return {

@@ -444,4 +342,4 @@ props: {

onClick: () => {
const path = (0, import_slate_react3.findNodePath)(editor, element);
(0, import_slate2.removeNodes)(editor, { at: path });
const path = (0, import_slate_react4.findNodePath)(editor, element);
(0, import_slate3.removeNodes)(editor, { at: path });
}

@@ -451,198 +349,10 @@ }

};
// src/hooks/useStableMemo.ts
var import_react8 = require("react");
var useStableMemo = (producer, deps) => {
const [value, setValue] = (0, import_react8.useState)(producer);
(0, import_react8.useLayoutEffect)(() => {
setValue(producer);
}, deps);
return value;
};
// src/utils/createPrimitiveComponent.tsx
var createPrimitiveComponent = (element) => {
const Comp = createSlotComponent(element);
return ({
propsHook,
stateHook
} = {}) => {
return import_react9.default.forwardRef(
(_a, ref) => {
var _b = _a, {
asChild,
options,
state: stateProp,
className: classNameProp,
getClassName
} = _b, props = __objRest(_b, [
"asChild",
"options",
"state",
"className",
"getClassName"
]);
var _a2, _b2;
const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
const {
ref: hookRef,
props: hookProps,
hidden
} = propsHook ? propsHook(state) : { props: {}, hidden: false, ref: null };
const _ref = useComposedRef(ref, hookRef);
const className = (0, import_utils.isDefined)(hookProps == null ? void 0 : hookProps.className) || (0, import_utils.isDefined)(classNameProp) ? (0, import_clsx3.clsx)(hookProps == null ? void 0 : hookProps.className, classNameProp) : void 0;
const style = (hookProps == null ? void 0 : hookProps.style) || props.style ? __spreadValues(__spreadValues({}, hookProps == null ? void 0 : hookProps.style), props.style) : void 0;
if (!asChild && hidden)
return null;
return /* @__PURE__ */ import_react9.default.createElement(
Comp,
__spreadValues(__spreadValues(__spreadProps(__spreadValues({
ref: _ref,
asChild
}, hookProps), {
className,
style
}), props), (_b2 = (_a2 = props.setProps) == null ? void 0 : _a2.call(props, hookProps != null ? hookProps : {})) != null ? _b2 : {})
);
}
);
};
};
// src/utils/defaultsDeepToNodes.ts
var import_plate_core4 = require("@udecode/plate-core");
var import_defaults = __toESM(require("lodash/defaults.js"));
var defaultsDeepToNodes = (options) => {
(0, import_plate_core4.applyDeepToNodes)(__spreadProps(__spreadValues({}, options), { apply: import_defaults.default }));
};
// src/utils/getRootProps.ts
var getRootProps = (props) => {
const _a = props, {
editor,
attributes,
children,
nodeProps,
element,
leaf,
text
} = _a, rootProps = __objRest(_a, [
"editor",
"attributes",
"children",
"nodeProps",
"element",
"leaf",
"text"
]);
return rootProps;
};
// src/utils/withProps.tsx
var import_react10 = __toESM(require("react"));
var withProps = (Component, props) => function component(_props) {
return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues(__spreadValues({}, _props), props));
};
// src/utils/withProviders.tsx
var import_react11 = __toESM(require("react"));
var withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight(
(acc, prov) => {
let Provider = prov;
if (Array.isArray(prov)) {
[Provider] = prov;
return /* @__PURE__ */ import_react11.default.createElement(Provider, __spreadValues({}, prov[1]), acc);
}
return /* @__PURE__ */ import_react11.default.createElement(Provider, null, acc);
},
/* @__PURE__ */ import_react11.default.createElement(WrappedComponent, __spreadValues({}, props))
);
// src/components/Text.tsx
var Text = createSlotComponent("span");
// src/plate/onKeyDownToggleElement.ts
var import_plate_core5 = require("@udecode/plate-core");
var import_castArray2 = __toESM(require("lodash/castArray.js"));
var onKeyDownToggleElement = (editor, { type, options: { hotkey } }) => (e) => {
if (e.defaultPrevented)
return;
const defaultType = (0, import_plate_core5.getPluginType)(editor, import_plate_core5.ELEMENT_DEFAULT);
if (!hotkey)
return;
const hotkeys = (0, import_castArray2.default)(hotkey);
for (const _hotkey of hotkeys) {
if ((0, import_plate_core5.isHotkey)(_hotkey, e)) {
e.preventDefault();
(0, import_plate_core5.toggleNodeType)(editor, {
activeType: type,
inactiveType: defaultType
});
return;
}
}
};
// src/plate/onKeyDownToggleMark.ts
var import_plate_core6 = require("@udecode/plate-core");
var import_slate_utils2 = require("@udecode/slate-utils");
var onKeyDownToggleMark = (editor, {
type,
options: { hotkey, clear }
}) => (e) => {
if (e.defaultPrevented)
return;
if (!hotkey)
return;
if ((0, import_plate_core6.isHotkey)(hotkey, e)) {
e.preventDefault();
(0, import_slate_utils2.toggleMark)(editor, { key: type, clear });
}
};
// src/queries/isType.ts
var import_plate_core7 = require("@udecode/plate-core");
var import_castArray3 = __toESM(require("lodash/castArray.js"));
var isType = (editor, node, key) => {
const keys = (0, import_castArray3.default)(key);
const types = [];
keys.forEach((_key) => types.push((0, import_plate_core7.getPluginType)(editor, _key)));
return types.includes(node == null ? void 0 : node.type);
};
// src/transforms/selectEditor.ts
var import_slate3 = require("@udecode/slate");
var import_slate_react4 = require("@udecode/slate-react");
var selectEditor = (editor, { at, edge, focus }) => {
if (focus) {
(0, import_slate_react4.focusEditor)(editor);
}
let location = at;
if (edge === "start") {
location = (0, import_slate3.getStartPoint)(editor, []);
}
if (edge === "end") {
location = (0, import_slate3.getEndPoint)(editor, []);
}
if (location) {
(0, import_slate3.select)(editor, location);
}
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Box,
DEFAULT_IGNORE_CLASS,
PlateElement,
PlateLeaf,
PortalBody,
Text,
composeEventHandlers,
composeRefs,
createNodeHOC,
createNodesHOC,
createNodesWithHOC,
createPrimitiveComponent,
createSlotComponent,
defaultsDeepToNodes,
getRootProps,
isType,

@@ -652,14 +362,9 @@ onKeyDownToggleElement,

selectEditor,
useComposedRef,
useMarkToolbarButton,
useMarkToolbarButtonState,
useOnClickOutside,
usePlaceholderState,
usePlateElement,
usePlateLeaf,
useRemoveNodeButton,
useStableMemo,
withProps,
withProviders
useRemoveNodeButton
});
//# sourceMappingURL=index.js.map

8

package.json
{
"name": "@udecode/plate-utils",
"version": "28.0.0",
"version": "29.0.0",
"description": "Plate utils",

@@ -42,6 +42,6 @@ "license": "MIT",

"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
"@udecode/plate-core": "28.0.0",
"@udecode/plate-core": "29.0.0",
"@udecode/react-utils": "29.0.0",
"@udecode/slate": "25.0.0",
"@udecode/slate-react": "25.0.0",
"@udecode/slate-react": "29.0.0",
"@udecode/slate-utils": "25.0.0",

@@ -48,0 +48,0 @@ "@udecode/utils": "24.3.0",

2

README.md

@@ -5,3 +5,3 @@ # Plate utils

WIP
Visit https://platejs.org/docs/api/utils to view the documentation.

@@ -8,0 +8,0 @@ ## License

dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc