@udecode/plate-utils - npm Package Compare versions

Comparing version 48.0.5 to 49.0.0

dist/index.d.ts

@@ -1,3 +0,518 @@
-declare const __plateUtils__ = true;
+import { TElement, TText, Descendant, Path, QueryNodeOptions } from '@udecode/slate';
+import { UnknownObject } from '@udecode/utils';
+import * as _udecode_plate_core from '@udecode/plate-core';
+import { InsertExitBreakOptions, PluginConfig, OverrideEditor } from '@udecode/plate-core';
 
-export { __plateUtils__ };
+declare const NODES: {
+    readonly a: "a";
+    readonly ai: "ai";
+    readonly aiChat: "aiChat";
+    readonly audio: "audio";
+    readonly blockquote: "blockquote";
+    readonly bold: "bold";
+    readonly callout: "callout";
+    readonly code: "code";
+    readonly codeBlock: "code_block";
+    readonly codeLine: "code_line";
+    readonly codeSyntax: "code_syntax";
+    readonly column: "column";
+    readonly columnGroup: "column_group";
+    readonly comment: "comment";
+    readonly date: "date";
+    readonly emojiInput: "emoji_input";
+    readonly equation: "equation";
+    readonly excalidraw: "excalidraw";
+    readonly file: "file";
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
+    readonly highlight: "highlight";
+    readonly hr: "hr";
+    readonly img: "img";
+    readonly inlineEquation: "inline_equation";
+    readonly italic: "italic";
+    readonly kbd: "kbd";
+    readonly li: "li";
+    readonly lic: "lic";
+    readonly link: "a";
+    readonly listTodoClassic: "action_item";
+    readonly mediaEmbed: "media_embed";
+    readonly mention: "mention";
+    readonly mentionInput: "mention_input";
+    readonly olClassic: "ol";
+    readonly p: "p";
+    readonly searchHighlight: "search_highlight";
+    readonly slashInput: "slash_input";
+    readonly strikethrough: "strikethrough";
+    readonly sub: "subscript";
+    readonly suggestion: "suggestion";
+    readonly sup: "superscript";
+    readonly table: "table";
+    readonly tag: "tag";
+    readonly td: "td";
+    readonly th: "th";
+    readonly toc: "toc";
+    readonly toggle: "toggle";
+    readonly tr: "tr";
+    readonly ulClassic: "ul";
+    readonly underline: "underline";
+    readonly video: "video";
+};
+declare const STYLE_KEYS: {
+    readonly backgroundColor: "backgroundColor";
+    readonly color: "color";
+    readonly fontFamily: "fontFamily";
+    readonly fontSize: "fontSize";
+    readonly fontWeight: "fontWeight";
+    readonly indent: "indent";
+    readonly lineHeight: "lineHeight";
+    readonly listType: "listStyleType";
+    readonly textAlign: "textAlign";
+    readonly textIndent: "textIndent";
+};
+declare const KEYS: {
+    readonly autoformat: "autoformat";
+    readonly blockMenu: "blockMenu";
+    readonly blockPlaceholder: "blockPlaceholder";
+    readonly blockSelection: "blockSelection";
+    readonly caption: "caption";
+    readonly copilot: "copilot";
+    readonly csv: "csv";
+    readonly cursorOverlay: "cursorOverlay";
+    readonly delete: "delete";
+    readonly dnd: "dnd";
+    readonly docx: "docx";
+    readonly emoji: "emoji";
+    readonly exitBreak: "exitBreak";
+    readonly heading: string[];
+    readonly html: "html";
+    readonly juice: "juice";
+    readonly list: "list";
+    readonly listChecked: "checked";
+    readonly listClassic: "listClassic";
+    readonly listRestart: "listRestart";
+    readonly listRestartPolite: "listRestartPolite";
+    readonly listStart: "listStart";
+    readonly listTodo: "todo";
+    readonly markdown: "markdown";
+    readonly nodeId: "nodeId";
+    readonly normalizeTypes: "normalizeTypes";
+    readonly ol: "decimal";
+    readonly placeholder: "placeholder";
+    readonly playwright: "playwright";
+    readonly removeEmptyNodes: "removeEmptyNodes";
+    readonly resetNode: "resetNode";
+    readonly singleBlock: "singleBlock";
+    readonly singleLine: "singleLine";
+    readonly slashCommand: "slash_command";
+    readonly softBreak: "softBreak";
+    readonly tabbable: "tabbable";
+    readonly trailingBlock: "trailingBlock";
+    readonly ul: "disc";
+    readonly yjs: "yjs";
+    readonly backgroundColor: "backgroundColor";
+    readonly color: "color";
+    readonly fontFamily: "fontFamily";
+    readonly fontSize: "fontSize";
+    readonly fontWeight: "fontWeight";
+    readonly indent: "indent";
+    readonly lineHeight: "lineHeight";
+    readonly listType: "listStyleType";
+    readonly textAlign: "textAlign";
+    readonly textIndent: "textIndent";
+    readonly a: "a";
+    readonly ai: "ai";
+    readonly aiChat: "aiChat";
+    readonly audio: "audio";
+    readonly blockquote: "blockquote";
+    readonly bold: "bold";
+    readonly callout: "callout";
+    readonly code: "code";
+    readonly codeBlock: "code_block";
+    readonly codeLine: "code_line";
+    readonly codeSyntax: "code_syntax";
+    readonly column: "column";
+    readonly columnGroup: "column_group";
+    readonly comment: "comment";
+    readonly date: "date";
+    readonly emojiInput: "emoji_input";
+    readonly equation: "equation";
+    readonly excalidraw: "excalidraw";
+    readonly file: "file";
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
+    readonly highlight: "highlight";
+    readonly hr: "hr";
+    readonly img: "img";
+    readonly inlineEquation: "inline_equation";
+    readonly italic: "italic";
+    readonly kbd: "kbd";
+    readonly li: "li";
+    readonly lic: "lic";
+    readonly link: "a";
+    readonly listTodoClassic: "action_item";
+    readonly mediaEmbed: "media_embed";
+    readonly mention: "mention";
+    readonly mentionInput: "mention_input";
+    readonly olClassic: "ol";
+    readonly p: "p";
+    readonly searchHighlight: "search_highlight";
+    readonly slashInput: "slash_input";
+    readonly strikethrough: "strikethrough";
+    readonly sub: "subscript";
+    readonly suggestion: "suggestion";
+    readonly sup: "superscript";
+    readonly table: "table";
+    readonly tag: "tag";
+    readonly td: "td";
+    readonly th: "th";
+    readonly toc: "toc";
+    readonly toggle: "toggle";
+    readonly tr: "tr";
+    readonly ulClassic: "ul";
+    readonly underline: "underline";
+    readonly video: "video";
+};
+type NodeKey = (typeof NODES)[keyof typeof NODES];
+type StyleKey = (typeof STYLE_KEYS)[keyof typeof STYLE_KEYS];
+type PlateKey = (typeof KEYS)[keyof typeof KEYS];
+
+interface TCalloutElement extends TElement {
+    backgroundColor?: string;
+    icon?: string;
+    variant?: (string & {}) | 'error' | 'info' | 'note' | 'success' | 'tip' | 'warning';
+}
+type TTagProps = {
+    value: string;
+} & UnknownObject;
+type TTagElement = TElement & TTagProps;
+interface TCodeBlockElement extends TElement {
+    lang?: string;
+}
+interface TCodeSyntaxLeaf extends TText {
+    className?: string;
+}
+interface TColumnElement extends TElement {
+    type: 'column';
+    width: string;
+    id?: string;
+}
+interface TColumnGroupElement extends TElement {
+    children: TColumnElement[];
+    type: 'column_group';
+    id?: string;
+    layout?: number[];
+}
+interface TDateElement extends TElement {
+    date?: string;
+}
+interface TEquationElement extends TElement {
+    texExpression: string;
+}
+interface TImageElement extends TMediaElement {
+    initialHeight?: number;
+    initialWidth?: number;
+}
+interface TPlaceholderElement extends TElement {
+    mediaType: string;
+}
+interface TAudioElement extends TMediaElement {
+}
+interface TFileElement extends TMediaElement {
+}
+interface TVideoElement extends TMediaElement {
+}
+interface TMediaEmbedElement extends TMediaElement {
+}
+interface TLinkElement extends TElement {
+    url: string;
+    target?: string;
+}
+interface TMentionElement extends TElement {
+    value: string;
+}
+interface TComboboxInputElement extends TElement {
+    value: string;
+}
+interface TTableElement extends TElement {
+    colSizes?: number[];
+    marginLeft?: number;
+}
+interface TTableRowElement extends TElement {
+    size?: number;
+}
+interface TTableCellElement extends TElement {
+    id?: string;
+    attributes?: {
+        colspan?: string;
+        rowspan?: string;
+    };
+    background?: string;
+    borders?: {
+        /** Only the last row cells have a bottom border. */
+        bottom?: TTableCellBorder;
+        left?: TTableCellBorder;
+        /** Only the last column cells have a right border. */
+        right?: TTableCellBorder;
+        top?: TTableCellBorder;
+    };
+    colSpan?: number;
+    rowSpan?: number;
+    size?: number;
+}
+interface TTableCellBorder {
+    color?: string;
+    size?: number;
+    style?: string;
+}
+type TIdProps = {
+    id: string;
+};
+type TIdElement = TElement & TIdProps;
+type TTextAlignProps = {
+    align?: React.CSSProperties['textAlign'];
+};
+type TResizableProps = {
+    align?: 'center' | 'left' | 'right';
+    width?: number;
+};
+type TResizableElement = TElement & TResizableProps;
+type TMediaProps = {
+    url: string;
+    id?: string;
+    isUpload?: boolean;
+    name?: string;
+    placeholderId?: string;
+};
+type TMediaElement = TElement & TMediaProps;
+type TCaptionProps = {
+    caption?: Descendant[];
+};
+type TCaptionElement = TElement & TCaptionProps;
+type TIndentProps = {
+    indent: number;
+};
+type TIndentElement = TElement & TIndentProps;
+type TListProps = TIndentProps & {
+    listStyleType: string;
+    checked?: boolean;
+    listRestart?: number;
+    listRestartPolite?: number;
+    listStart?: number;
+};
+type TListElement = TElement & TListProps;
+type TSuggestionProps = {
+    suggestion: TSuggestionData;
+};
+type TSuggestionElement = TElement & TSuggestionProps;
+type TLineHeightProps = {
+    lineHeight?: React.CSSProperties['lineHeight'];
+};
+type TBasicMarks = {
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    strikethrough?: boolean;
+    subscript?: boolean;
+    underline?: boolean;
+};
+type TFontMarks = {
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+    color?: React.CSSProperties['color'];
+    fontFamily?: React.CSSProperties['fontFamily'];
+    fontSize?: React.CSSProperties['fontSize'];
+    fontWeight?: React.CSSProperties['fontWeight'];
+};
+interface TCommentText extends TText {
+    comment?: boolean;
+}
+type TSuggestionData = {
+    id: string;
+    createdAt: number;
+    type: 'insert' | 'remove';
+    userId: string;
+    isLineBreak?: boolean;
+};
+type TSuggestionText = TText & {
+    [key: string]: TInlineSuggestionData | boolean | string;
+    suggestion: true;
+    text: string;
+};
+type TInlineSuggestionData = TInsertSuggestionData | TRemoveSuggestionData | TUpdateSuggestionData;
+type TInsertSuggestionData = {
+    id: string;
+    createdAt: number;
+    type: 'insert';
+    userId: string;
+};
+type TRemoveSuggestionData = {
+    id: string;
+    createdAt: number;
+    type: 'remove';
+    userId: string;
+};
+type TUpdateSuggestionData = {
+    id: string;
+    createdAt: number;
+    type: 'update';
+    userId: string;
+    newProperties?: any;
+    properties?: any;
+};
+type EmptyText = {
+    text: '';
+};
+type PlainText = {
+    text: string;
+};
+type TNodeMap = {
+    a: TLinkElement;
+    action_item: TListElement;
+    ai: TText & {
+        ai: true;
+    };
+    aiChat: TElement;
+    audio: TAudioElement;
+    blockquote: TElement;
+    bold: TText & {
+        bold: true;
+    };
+    callout: TCalloutElement;
+    code: TText & {
+        code: true;
+    };
+    code_block: TCodeBlockElement;
+    code_line: TElement;
+    code_syntax: TCodeSyntaxLeaf;
+    column: TColumnElement;
+    column_group: TColumnGroupElement;
+    comment: TText & {
+        comment: true;
+    };
+    date: TDateElement;
+    emoji_input: TComboboxInputElement;
+    equation: TEquationElement;
+    excalidraw: TElement;
+    file: TFileElement;
+    h1: TElement;
+    h2: TElement;
+    h3: TElement;
+    h4: TElement;
+    h5: TElement;
+    h6: TElement;
+    highlight: TText & {
+        highlight: true;
+    };
+    hr: TElement;
+    img: TImageElement & TCaptionProps;
+    inline_equation: TEquationElement;
+    italic: TText & {
+        italic: true;
+    };
+    kbd: TText & {
+        kbd: true;
+    };
+    li: TElement;
+    lic: TElement;
+    media_embed: TMediaEmbedElement & TCaptionProps;
+    mention: TMentionElement;
+    mention_input: TComboboxInputElement;
+    ol: TListElement;
+    p: TElement;
+    search_highlight: TText & {
+        search_highlight: true;
+    };
+    slash_input: TComboboxInputElement;
+    strikethrough: TText & {
+        strikethrough: true;
+    };
+    subscript: TText & {
+        subscript: true;
+    };
+    suggestion: TSuggestionText;
+    superscript: TText & {
+        superscript: true;
+    };
+    table: TTableElement;
+    tag: TTagElement;
+    td: TTableCellElement;
+    th: TTableCellElement;
+    toc: TElement;
+    toggle: TElement;
+    tr: TTableRowElement;
+    ul: TListElement;
+    underline: TText & {
+        underline: true;
+    };
+    video: TVideoElement & TCaptionProps;
+};
+
+/**
+ * Insert soft break following configurable rules. Each rule specifies a hotkey
+ * and query options.
+ */
+declare const ExitBreakPlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"exitBreak", {}, {}, Record<"exitBreak", {
+    insert: (options: Omit<InsertExitBreakOptions, "reverse">) => true | undefined;
+    insertBefore: (options: Omit<InsertExitBreakOptions, "reverse">) => true | undefined;
+}>, {}>>;
+
+type NormalizeTypesConfig = PluginConfig<'normalizeTypes', {
+    /**
+     * Set of rules for the types. For each rule, provide a `path` and either
+     * `strictType` or `type`. If there is no node existing at `path`: insert a
+     * node with `strictType`. If there is a node existing at `path` but its
+     * type is not `strictType` or `type`: set the node type to `strictType` or
+     * `type`.
+     */
+    rules?: Rule[];
+    onError?: (err: any) => void;
+}>;
+interface Rule {
+    /** Path where the rule applies */
+    path: Path;
+    /** Force the type of the node at the given path */
+    strictType?: string;
+    /** Type of the inserted node at the given path if `strictType` is not provided */
+    type?: string;
+}
+/** @see {@link withNormalizeTypes} */
+declare const NormalizeTypesPlugin: _udecode_plate_core.SlatePlugin<NormalizeTypesConfig>;
+
+declare const withNormalizeTypes: OverrideEditor<NormalizeTypesConfig>;
+
+/** Forces editor to only have one block. */
+declare const SingleBlockPlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"singleBlock", {}, {}, {}, {}>>;
+
+/** Forces editor to only have one line. */
+declare const SingleLinePlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"singleLine", {}, {}, {}, {}>>;
+
+type TrailingBlockConfig = PluginConfig<'trailingBlock', {
+    /** Level where the trailing node should be, the first level being 0. */
+    level?: number;
+    /** Type of the trailing block */
+    type?: string;
+} & QueryNodeOptions>;
+/** @see {@link withTrailingBlock} */
+declare const TrailingBlockPlugin: _udecode_plate_core.SlatePlugin<PluginConfig<"trailingBlock", {
+    type: string;
+} & {
+    /** Level where the trailing node should be, the first level being 0. */
+    level?: number;
+    /** Type of the trailing block */
+    type?: string;
+} & QueryNodeOptions, {}, {}, {}>>;
+
+/**
+ * Add a trailing block when the last node type is not `type` and when the
+ * editor has .
+ */
+declare const withTrailingBlock: OverrideEditor<TrailingBlockConfig>;
+
+export { type EmptyText, ExitBreakPlugin, KEYS, NODES, type NodeKey, type NormalizeTypesConfig, NormalizeTypesPlugin, type PlainText, type PlateKey, STYLE_KEYS, SingleBlockPlugin, SingleLinePlugin, type StyleKey, type TAudioElement, type TBasicMarks, type TCalloutElement, type TCaptionElement, type TCaptionProps, type TCodeBlockElement, type TCodeSyntaxLeaf, type TColumnElement, type TColumnGroupElement, type TComboboxInputElement, type TCommentText, type TDateElement, type TEquationElement, type TFileElement, type TFontMarks, type TIdElement, type TIdProps, type TImageElement, type TIndentElement, type TIndentProps, type TInlineSuggestionData, type TInsertSuggestionData, type TLineHeightProps, type TLinkElement, type TListElement, type TListProps, type TMediaElement, type TMediaEmbedElement, type TMediaProps, type TMentionElement, type TNodeMap, type TPlaceholderElement, type TRemoveSuggestionData, type TResizableElement, type TResizableProps, type TSuggestionData, type TSuggestionElement, type TSuggestionProps, type TSuggestionText, type TTableCellBorder, type TTableCellElement, type TTableElement, type TTableRowElement, type TTagElement, type TTagProps, type TTextAlignProps, type TUpdateSuggestionData, type TVideoElement, type TrailingBlockConfig, TrailingBlockPlugin, withNormalizeTypes, withTrailingBlock };

dist/react/index.d.ts

@@ -1,20 +0,7 @@
-import React$1 from 'react';
-import { PlateElementProps } from '@udecode/plate-core/react';
-import { AnyObject } from '@udecode/utils';
 import * as _udecode_slate from '@udecode/slate';
-import { QueryNodeOptions, TElement, EditorPropOptions } from '@udecode/slate';
+import { TElement, EditorPropOptions, Path } from '@udecode/slate';
+import * as _udecode_plate_core_react from '@udecode/plate-core/react';
+import { PlatePluginContext } from '@udecode/plate-core/react';
+import { PluginConfig } from '@udecode/plate-core';
 
-declare const createNodeHOC: <T>(HOC: React$1.FC<T>) => (Component: any, props: Omit<T, keyof PlateElementProps>) => (childrenProps: PlateElementProps) => React$1.JSX.Element;
-
-type CreateHOCOptions<T> = {
-    /** Set HOC by key. */
-    key?: string;
-    /** Set HOC by key. */
-    keys?: string[];
-} & AnyObject & Partial<T>;
-/** Create components HOC by plugin key. */
-declare const createNodesHOC: <T>(HOC: React.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 useEditorString: () => string;
@@ -63,11 +50,2 @@
 
-interface PlaceholderProps extends PlateElementProps {
-    placeholder: string;
-    hideOnBlur?: boolean;
-    query?: QueryNodeOptions;
-}
-declare const usePlaceholderState: ({ element, hideOnBlur, path, query, }: PlaceholderProps) => {
-    enabled: boolean;
-};
-
 declare const useRemoveNodeButton: ({ element }: {
@@ -87,9 +65,32 @@ element: TElement;
 
-declare const useSelectionFragment: (options?: {
-    structuralTypes?: string[];
-}) => _udecode_slate.ElementOrTextIn<_udecode_slate.Value>[];
-declare const useSelectionFragmentProp: ({ structuralTypes, ...options }?: {
-    structuralTypes?: string[];
-} & Omit<EditorPropOptions, "nodes">) => string | undefined;
+declare const useSelectionFragment: () => _udecode_slate.ElementOrTextIn<_udecode_slate.Value>[];
+declare const useSelectionFragmentProp: (options?: Omit<EditorPropOptions, "nodes">) => string | undefined;
 
-export { type CreateHOCOptions, type PlaceholderProps, createNodeHOC, createNodesHOC, createNodesWithHOC, useEditorString, useFormInputProps, useMarkToolbarButton, useMarkToolbarButtonState, usePlaceholderState, useRemoveNodeButton, useSelectionAcrossBlocks, useSelectionCollapsed, useSelectionExpanded, useSelectionFragment, useSelectionFragmentProp, useSelectionWithinBlock };
+type BlockPlaceholderConfig = PluginConfig<'blockPlaceholder', {
+    _target: {
+        node: TElement;
+        placeholder: string;
+    } | null;
+    placeholders: Record<string, string>;
+    query: (context: PlatePluginContext<BlockPlaceholderConfig> & {
+        node: TElement;
+        path: Path;
+    }) => boolean;
+    className?: string;
+}>;
+declare const BlockPlaceholderPlugin: _udecode_plate_core_react.PlatePlugin<PluginConfig<"blockPlaceholder", {
+    _target: {
+        node: TElement;
+        placeholder: string;
+    } | null;
+    placeholders: Record<string, string>;
+    query: (context: PlatePluginContext<BlockPlaceholderConfig> & {
+        node: TElement;
+        path: Path;
+    }) => boolean;
+    className?: string;
+}, {}, {}, {
+    placeholder: (node: TElement) => string | undefined;
+}>>;
+
+export { type BlockPlaceholderConfig, BlockPlaceholderPlugin, useEditorString, useFormInputProps, useMarkToolbarButton, useMarkToolbarButtonState, useRemoveNodeButton, useSelectionAcrossBlocks, useSelectionCollapsed, useSelectionExpanded, useSelectionFragment, useSelectionFragmentProp, useSelectionWithinBlock };

dist/react/index.js

@@ -33,5 +33,3 @@ "use strict";
 __export(react_exports, {
-  createNodeHOC: () => createNodeHOC,
-  createNodesHOC: () => createNodesHOC,
-  createNodesWithHOC: () => createNodesWithHOC,
+  BlockPlaceholderPlugin: () => BlockPlaceholderPlugin,
   useEditorString: () => useEditorString,
@@ -41,3 +39,2 @@ useFormInputProps: () => useFormInputProps,
   useMarkToolbarButtonState: () => useMarkToolbarButtonState,
-  usePlaceholderState: () => usePlaceholderState,
   useRemoveNodeButton: () => useRemoveNodeButton,
@@ -53,43 +50,9 @@ useSelectionAcrossBlocks: () => useSelectionAcrossBlocks,
 
-// src/react/createNodeHOC.tsx
-var import_react = __toESM(require("react"));
-var createNodeHOC = (HOC) => (Component, props) => function hoc(childrenProps) {
-  return /* @__PURE__ */ import_react.default.createElement(HOC, { ...{ ...childrenProps, ...props } }, /* @__PURE__ */ import_react.default.createElement(Component, { ...childrenProps }));
-};
-
-// src/react/createNodesHOC.tsx
-var import_castArray = __toESM(require("lodash/castArray.js"));
-var import_merge = __toESM(require("lodash/merge.js"));
-var createHOC = (withHOC) => {
-  return (components, options) => {
-    const _components = { ...components };
-    const optionsByKey = {};
-    const optionsList = (0, import_castArray.default)(options);
-    optionsList.forEach(({ key, keys, ...opt }) => {
-      const _keys = key ? [key] : keys ?? Object.keys(_components);
-      _keys.forEach((_key) => {
-        optionsByKey[_key] = (0, import_merge.default)(optionsByKey[_key], opt);
-      });
-    });
-    Object.keys(optionsByKey).forEach((key) => {
-      if (!_components[key]) return;
-      _components[key] = withHOC(_components[key], optionsByKey[key]);
-    });
-    return _components;
-  };
-};
-var createNodesHOC = (HOC) => {
-  return createHOC(createNodeHOC(HOC));
-};
-var createNodesWithHOC = (withHOC) => {
-  return createHOC(withHOC);
-};
-
-// src/react/useEditorString.ts
-var import_react2 = require("@udecode/plate-core/react");
+// src/react/hooks/useEditorString.ts
+var import_react = require("@udecode/plate-core/react");
 var useEditorString = () => {
-  return (0, import_react2.useEditorSelector)((editor) => editor.api.string([]), []);
+  return (0, import_react.useEditorSelector)((editor) => editor.api.string([]), []);
 };
 
-// src/react/useFormInputProps.ts
+// src/react/hooks/useFormInputProps.ts
 var useFormInputProps = (options) => {
@@ -110,4 +73,4 @@ if (!options) return { props: {} };
 
-// src/react/useMarkToolbarButton.ts
-var import_react3 = require("@udecode/plate-core/react");
+// src/react/hooks/useMarkToolbarButton.ts
+var import_react2 = require("@udecode/plate-core/react");
 var useMarkToolbarButtonState = ({
@@ -117,3 +80,3 @@ clear,
 }) => {
-  const pressed = (0, import_react3.useEditorSelector)(
+  const pressed = (0, import_react2.useEditorSelector)(
     (editor) => editor.api.hasMark(nodeType),
@@ -129,3 +92,3 @@ [nodeType]
 var useMarkToolbarButton = (state) => {
-  const editor = (0, import_react3.useEditorRef)();
+  const editor = (0, import_react2.useEditorRef)();
   return {
@@ -145,26 +108,6 @@ props: {
 
-// src/react/usePlaceholder.ts
-var import_react4 = require("@udecode/plate-core/react");
-var import_slate = require("@udecode/slate");
-var usePlaceholderState = ({
-  element,
-  hideOnBlur = true,
-  path,
-  query
-}) => {
-  const focused = (0, import_react4.useFocused)();
-  const selected = (0, import_react4.useSelected)();
-  const composing = (0, import_react4.useComposing)();
-  const editor = (0, import_react4.useEditorRef)();
-  const isEmptyBlock = editor.api.isEmpty(element) && !composing;
-  const enabled = isEmptyBlock && (!query || (0, import_slate.queryNode)([element, path], query)) && (!hideOnBlur || editor.api.isCollapsed() && hideOnBlur && focused && selected);
-  return {
-    enabled
-  };
-};
-
-// src/react/useRemoveNodeButton.ts
-var import_react5 = require("@udecode/plate-core/react");
+// src/react/hooks/useRemoveNodeButton.ts
+var import_react3 = require("@udecode/plate-core/react");
 var useRemoveNodeButton = ({ element }) => {
-  const editor = (0, import_react5.useEditorRef)();
+  const editor = (0, import_react3.useEditorRef)();
   return {
@@ -183,31 +126,31 @@ props: {
 
-// src/react/useSelection.ts
-var import_react6 = require("@udecode/plate-core/react");
+// src/react/hooks/useSelection.ts
+var import_react4 = require("@udecode/plate-core/react");
 function useSelectionCollapsed() {
-  return (0, import_react6.useEditorSelector)((editor) => !editor.api.isExpanded(), []);
+  return (0, import_react4.useEditorSelector)((editor) => !editor.api.isExpanded(), []);
 }
 function useSelectionExpanded() {
-  return (0, import_react6.useEditorSelector)((editor) => editor.api.isExpanded(), []);
+  return (0, import_react4.useEditorSelector)((editor) => editor.api.isExpanded(), []);
 }
 function useSelectionWithinBlock() {
-  return (0, import_react6.useEditorSelector)((editor) => editor.api.isAt({ block: true }), []);
+  return (0, import_react4.useEditorSelector)((editor) => editor.api.isAt({ block: true }), []);
 }
 function useSelectionAcrossBlocks() {
-  return (0, import_react6.useEditorSelector)((editor) => editor.api.isAt({ blocks: true }), []);
+  return (0, import_react4.useEditorSelector)((editor) => editor.api.isAt({ blocks: true }), []);
 }
 
-// src/react/useSelectionFragment.ts
-var import_react7 = require("@udecode/plate-core/react");
-var useSelectionFragment = (options) => {
-  return (0, import_react7.useEditorSelector)((editor) => {
-    return editor.api.fragment(editor.selection, options);
+// src/react/hooks/useSelectionFragment.ts
+var import_plate_core = require("@udecode/plate-core");
+var import_react5 = require("@udecode/plate-core/react");
+var useSelectionFragment = () => {
+  return (0, import_react5.useEditorSelector)((editor) => {
+    return editor.api.fragment(editor.selection, {
+      unwrap: (0, import_plate_core.getContainerTypes)(editor)
+    });
   }, []);
 };
-var useSelectionFragmentProp = ({
-  structuralTypes,
-  ...options
-} = {}) => {
-  return (0, import_react7.useEditorSelector)((editor) => {
+var useSelectionFragmentProp = (options = {}) => {
+  return (0, import_react5.useEditorSelector)((editor) => {
     const fragment = editor.api.fragment(editor.selection, {
-      structuralTypes
+      unwrap: (0, import_plate_core.getContainerTypes)(editor)
     });
@@ -217,7 +160,195 @@ return editor.api.prop({ nodes: fragment, ...options });
 };
+
+// src/react/plugins/BlockPlaceholderPlugin.tsx
+var import_react6 = __toESM(require("react"));
+var import_react7 = require("@udecode/plate-core/react");
+
+// src/lib/plate-keys.ts
+var NODES = {
+  a: "a",
+  ai: "ai",
+  aiChat: "aiChat",
+  audio: "audio",
+  blockquote: "blockquote",
+  bold: "bold",
+  callout: "callout",
+  code: "code",
+  codeBlock: "code_block",
+  codeLine: "code_line",
+  codeSyntax: "code_syntax",
+  column: "column",
+  columnGroup: "column_group",
+  comment: "comment",
+  date: "date",
+  emojiInput: "emoji_input",
+  equation: "equation",
+  excalidraw: "excalidraw",
+  file: "file",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  highlight: "highlight",
+  hr: "hr",
+  img: "img",
+  inlineEquation: "inline_equation",
+  italic: "italic",
+  kbd: "kbd",
+  li: "li",
+  lic: "lic",
+  link: "a",
+  listTodoClassic: "action_item",
+  mediaEmbed: "media_embed",
+  mention: "mention",
+  mentionInput: "mention_input",
+  olClassic: "ol",
+  p: "p",
+  searchHighlight: "search_highlight",
+  slashInput: "slash_input",
+  strikethrough: "strikethrough",
+  sub: "subscript",
+  suggestion: "suggestion",
+  sup: "superscript",
+  table: "table",
+  tag: "tag",
+  td: "td",
+  th: "th",
+  toc: "toc",
+  toggle: "toggle",
+  tr: "tr",
+  ulClassic: "ul",
+  underline: "underline",
+  video: "video"
+};
+var STYLE_KEYS = {
+  backgroundColor: "backgroundColor",
+  color: "color",
+  fontFamily: "fontFamily",
+  fontSize: "fontSize",
+  fontWeight: "fontWeight",
+  indent: "indent",
+  lineHeight: "lineHeight",
+  listType: "listStyleType",
+  textAlign: "textAlign",
+  textIndent: "textIndent"
+};
+var KEYS = {
+  ...NODES,
+  ...STYLE_KEYS,
+  autoformat: "autoformat",
+  blockMenu: "blockMenu",
+  blockPlaceholder: "blockPlaceholder",
+  blockSelection: "blockSelection",
+  caption: "caption",
+  copilot: "copilot",
+  csv: "csv",
+  cursorOverlay: "cursorOverlay",
+  delete: "delete",
+  dnd: "dnd",
+  docx: "docx",
+  emoji: "emoji",
+  exitBreak: "exitBreak",
+  heading: ["h1", "h2", "h3", "h4", "h5", "h6"],
+  html: "html",
+  juice: "juice",
+  list: "list",
+  listChecked: "checked",
+  listClassic: "listClassic",
+  listRestart: "listRestart",
+  listRestartPolite: "listRestartPolite",
+  listStart: "listStart",
+  listTodo: "todo",
+  markdown: "markdown",
+  nodeId: "nodeId",
+  normalizeTypes: "normalizeTypes",
+  ol: "decimal",
+  placeholder: "placeholder",
+  playwright: "playwright",
+  removeEmptyNodes: "removeEmptyNodes",
+  resetNode: "resetNode",
+  singleBlock: "singleBlock",
+  singleLine: "singleLine",
+  slashCommand: "slash_command",
+  softBreak: "softBreak",
+  tabbable: "tabbable",
+  trailingBlock: "trailingBlock",
+  ul: "disc",
+  yjs: "yjs"
+};
+
+// src/react/plugins/BlockPlaceholderPlugin.tsx
+var BlockPlaceholderPlugin = (0, import_react7.createTPlatePlugin)({
+  key: KEYS.blockPlaceholder,
+  editOnly: true,
+  options: {
+    _target: null,
+    placeholders: {
+      [KEYS.p]: "Type something..."
+    },
+    query: ({ path }) => {
+      return path.length === 1;
+    }
+  },
+  useHooks: (ctx) => {
+    const { editor, getOptions, setOption } = ctx;
+    const focused = (0, import_react7.useFocused)();
+    const readOnly = (0, import_react7.useEditorReadOnly)();
+    const composing = (0, import_react7.useEditorComposing)();
+    const entry = (0, import_react7.useEditorSelector)(() => {
+      if (readOnly || composing || !focused || !editor.selection || editor.api.isExpanded())
+        return null;
+      return editor.api.block();
+    }, [readOnly, composing, focused]);
+    import_react6.default.useEffect(() => {
+      if (!entry) {
+        setOption("_target", null);
+        return;
+      }
+      const { placeholders, query } = getOptions();
+      const [element, path] = entry;
+      const placeholder = Object.keys(placeholders).find(
+        (key) => editor.getType(key) === element.type
+      );
+      if (query({ ...ctx, node: element, path }) && placeholder && editor.api.isEmpty(element) && !editor.api.isEmpty()) {
+        setOption("_target", {
+          node: element,
+          placeholder: placeholders[placeholder]
+        });
+      } else {
+        setOption("_target", null);
+      }
+    }, [editor, entry, setOption, getOptions]);
+  }
+}).extendSelectors(({ getOption }) => ({
+  placeholder: (node) => {
+    const target = getOption("_target");
+    if (target?.node === node) {
+      return target.placeholder;
+    }
+  }
+})).extend({
+  inject: {
+    isBlock: true,
+    nodeProps: {
+      transformProps: (props) => {
+        const placeholder = (0, import_react7.usePluginOption)(
+          props.plugin,
+          "placeholder",
+          props.element
+        );
+        if (placeholder) {
+          return {
+            className: props.getOption("className"),
+            placeholder
+          };
+        }
+      }
+    }
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createNodeHOC,
-  createNodesHOC,
-  createNodesWithHOC,
+  BlockPlaceholderPlugin,
   useEditorString,
@@ -227,3 +358,2 @@ useFormInputProps,
   useMarkToolbarButtonState,
-  usePlaceholderState,
   useRemoveNodeButton,
@@ -230,0 +360,0 @@ useSelectionAcrossBlocks,

package.json

 {
   "name": "@udecode/plate-utils",
-  "version": "48.0.5",
+  "version": "49.0.0",
   "description": "Plate utils",
@@ -53,5 +53,5 @@ "keywords": [
   "dependencies": {
-    "@udecode/plate-core": "48.0.5",
+    "@udecode/plate-core": "49.0.0",
     "@udecode/react-utils": "47.3.1",
-    "@udecode/slate": "48.0.1",
+    "@udecode/slate": "49.0.0",
     "@udecode/utils": "47.2.7",
@@ -58,0 +58,0 @@ "clsx": "^2.1.1",

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1032242

2101.69%

Lines of code

7092

1293.32%

Worsened metrics

Number of medium maintenance alerts

1

Infinity%

Number of low supply chain risk alerts

10

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @udecode/plate-core@49.0.0
  (transitive)

• + Added

  @udecode/slate@49.0.0
  (transitive)

• - Removed

  @udecode/plate-core@48.0.5
  (transitive)

• - Removed

  @udecode/slate@48.0.1
  (transitive)

• Updated

  @udecode/plate-core@49.0.0

• Updated

  @udecode/slate@49.0.0