@react-fluent-edit/core - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0-next.0

Chip/index.d.ts

@@ -1,2 +0,2 @@
-export { default } from "./Chip";
 export * from "./ChipProps";
+export { default } from "./DefaultChip";

Chip/index.js

@@ -1,2 +0,2 @@
-export { default } from "./Chip";
 export * from "./ChipProps";
+export { default } from "./DefaultChip";

cjs/Chip/index.d.ts

@@ -1,2 +0,2 @@
-export { default } from "./Chip";
 export * from "./ChipProps";
+export { default } from "./DefaultChip";

cjs/Chip/index.js

@@ -18,4 +18,4 @@ "use strict";
 exports.default = void 0;
-var Chip_1 = require("./Chip");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Chip_1.default; } });
 __exportStar(require("./ChipProps"), exports);
+var DefaultChip_1 = require("./DefaultChip");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return DefaultChip_1.default; } });

cjs/Combobox/ComboboxProps.d.ts

@@ -1,2 +0,2 @@
-import { HTMLAttributes } from "react";
+import { ElementType, HTMLAttributes } from "react";
 import { BaseRange } from "slate";
@@ -6,3 +6,3 @@ import { WithChildrenProp } from "../types";
 type ComboboxCloseEvents = KeyboardEvent | FocusEvent | MouseEvent | TouchEvent;
-interface ComboboxProps extends WithChildrenProp {
+interface ComboboxRootProps extends WithChildrenProp {
     /**
@@ -27,2 +27,9 @@ * If true, the combobox is shown.
 }
+interface ComboboxProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Becomes `true` as soon as the combobox is opened. Useful for animations.
+     * @default false
+     */
+    in?: boolean;
+}
 interface ComboboxItemProps extends WithChildrenProp, Pick<HTMLAttributes<HTMLLIElement>, "onClick"> {
@@ -36,10 +43,4 @@ /**
 }
-interface ComboboxComponent extends WithChildrenProp {
-    /**
-     * Becomes `true` as soon as the combobox is opened. Useful for animations.
-     * @default false
-     */
-    in?: boolean;
-}
-type ComboboxItemComponent = ComboboxItemProps;
-export type { ComboboxProps, ComboboxItemProps, ComboboxComponent, ComboboxItemComponent, ComboboxCloseEvents, ComboboxCloseReason, };
+type ComboboxComponent = ElementType<ComboboxProps>;
+type ComboboxItemComponent = ElementType<ComboboxItemProps>;
+export type { ComboboxRootProps, ComboboxProps, ComboboxItemProps, ComboboxComponent, ComboboxItemComponent, ComboboxCloseEvents, ComboboxCloseReason, };

cjs/Combobox/DefaultCombobox.d.ts

 /// <reference types="react" />
-import { ComboboxComponent } from "./ComboboxProps";
-declare const DefaultCombobox: import("react").ForwardRefExoticComponent<ComboboxComponent & import("react").RefAttributes<HTMLUListElement>>;
-declare const DefaultComboboxItem: import("react").ForwardRefExoticComponent<import("./ComboboxProps").ComboboxItemProps & import("react").RefAttributes<HTMLLIElement>>;
+import { ComboboxItemProps, ComboboxProps } from "./ComboboxProps";
+declare const DefaultCombobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLUListElement>>;
+declare const DefaultComboboxItem: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLLIElement>>;
 export { DefaultCombobox, DefaultComboboxItem };

cjs/Combobox/DefaultCombobox.js

@@ -17,11 +17,14 @@ "use strict";
 const react_1 = require("react");
-const DefaultCombobox = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, props, { ref: ref, style: {
-        cursor: "pointer",
-        borderRadius: 4,
-        backgroundColor: "rgb(255, 255, 255)",
-        boxShadow: "rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px",
-        listStyle: "none",
-        padding: "4px 0",
-        margin: 0,
-    } }))));
+const DefaultCombobox = (0, react_1.forwardRef)((_a, ref) => {
+    var { in: _in } = _a, props = __rest(_a, ["in"]);
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, props, { ref: ref, style: {
+            cursor: "pointer",
+            borderRadius: 4,
+            backgroundColor: "rgb(255, 255, 255)",
+            boxShadow: "rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px",
+            listStyle: "none",
+            padding: "4px 0",
+            margin: 0,
+        } })));
+});
 exports.DefaultCombobox = DefaultCombobox;
@@ -28,0 +31,0 @@ const DefaultComboboxItem = (0, react_1.forwardRef)((_a, ref) => {

cjs/Combobox/index.d.ts

@@ -1,2 +0,2 @@
-export { ComboboxItem, default } from "./Combobox";
-export type { ComboboxCloseEvents, ComboboxCloseReason, ComboboxComponent, ComboboxItemComponent, ComboboxItemProps, ComboboxProps, } from "./ComboboxProps";
+export type { ComboboxCloseEvents, ComboboxCloseReason, ComboboxComponent, ComboboxItemComponent, ComboboxItemProps, ComboboxProps, ComboboxRootProps, } from "./ComboboxProps";
+export { ComboboxItem, default } from "./ComboboxRoot";

cjs/Combobox/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = exports.ComboboxItem = void 0;
-var Combobox_1 = require("./Combobox");
-Object.defineProperty(exports, "ComboboxItem", { enumerable: true, get: function () { return Combobox_1.ComboboxItem; } });
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Combobox_1.default; } });
+var ComboboxRoot_1 = require("./ComboboxRoot");
+Object.defineProperty(exports, "ComboboxItem", { enumerable: true, get: function () { return ComboboxRoot_1.ComboboxItem; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ComboboxRoot_1.default; } });

cjs/ComponentProvider/ComponentProviderProps.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { CSSProperties } from "react";
 import { ChipComponent } from "../Chip";
@@ -7,7 +7,7 @@ import { ComboboxComponent, ComboboxItemComponent } from "../Combobox";
     chipComponent: ChipComponent;
-    comboboxComponent: ElementType<ComboboxComponent & HTMLAttributes<HTMLUListElement>>;
+    comboboxComponent: ComboboxComponent;
     comboboxRootStyle: CSSProperties;
-    comboboxItemComponent: ElementType<ComboboxItemComponent & HTMLAttributes<HTMLLIElement>>;
+    comboboxItemComponent: ComboboxItemComponent;
 }
 type ComponentProviderProps = Partial<Components> & WithChildrenProp;
 export type { ComponentProviderProps, Components };

cjs/FluentEdit/FluentEdit.js

@@ -60,3 +60,3 @@ "use strict";
     }, []);
-    const pluginOptions = (0, react_1.useMemo)(() => (0, plugin_utils_1.getPluginOptions)(plugins), [plugins]);
+    const pluginOptions = (0, react_1.useMemo)(() => (0, plugin_utils_1.getPluginOptions)(plugins, children), [plugins, children]);
     const initialValue = (0, react_1.useMemo)(() => (0, utils_1.addRoot)(deserializer(initialTextValue, multiline, pluginOptions)), [deserializer, initialTextValue, multiline, pluginOptions]);
@@ -89,5 +89,4 @@ const handleEnterPress = (0, react_1.useCallback)((event) => {
         slate_1.Transforms.move(editor);
-        const editorRef = slate_react_1.ReactEditor.toDOMNode(editor, editor);
-        const pasteEvent = new Event("fePaste");
-        editorRef.dispatchEvent(pasteEvent);
+        const editorElem = (0, utils_1.editorToDomNode)(editor);
+        editorElem === null || editorElem === void 0 ? void 0 : editorElem.dispatchEvent(new Event("fePaste"));
         onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
@@ -94,0 +93,0 @@ },

cjs/FluentEdit/FluentEditProps.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ElementType, HTMLAttributes, TextareaHTMLAttributes } from "react";
+import { CSSProperties, TextareaHTMLAttributes } from "react";
 import { ChipComponent } from "../Chip";
@@ -43,3 +43,3 @@ import { ComboboxComponent, ComboboxItemComponent } from "../Combobox";
      */
-    comboboxComponent?: ElementType<ComboboxComponent & HTMLAttributes<HTMLUListElement>>;
+    comboboxComponent?: ComboboxComponent;
     /**
@@ -54,3 +54,3 @@ * Extends the styling of the combobox root element.
      */
-    comboboxItemComponent?: ElementType<ComboboxItemComponent & HTMLAttributes<HTMLLIElement>>;
+    comboboxItemComponent?: ComboboxItemComponent;
 }
@@ -57,0 +57,0 @@ interface FluentEditInternalProps extends FluentEditProps {

cjs/FluentEditProvider/FluentEditProvider.js

@@ -30,3 +30,3 @@ "use strict";
                 });
-                const nodes = deserializer(text, multiline, (0, plugin_utils_1.getPluginOptions)(plugins));
+                const nodes = deserializer(text, multiline, (0, plugin_utils_1.getPluginOptions)(plugins, children));
                 slate_1.Transforms.insertNodes(editor, nodes);
@@ -36,3 +36,3 @@ focusEditor();
         }
-    }, [editor, deserializer, multiline, plugins, focusEditor]);
+    }, [editor, deserializer, multiline, plugins, focusEditor, children]);
     const value = {
@@ -39,0 +39,0 @@ editor,

cjs/types.d.ts

@@ -1,2 +0,2 @@
-import { ClipboardEvent, CSSProperties, DragEvent, FocusEvent, FunctionComponent, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import React, { ClipboardEvent, CSSProperties, DragEvent, FocusEvent, FunctionComponent, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { BaseEditor, BaseRange, Descendant, Editor, NodeEntry } from "slate";
@@ -98,2 +98,3 @@ import { HistoryEditor } from "slate-history";
     options?: T;
+    editorComponents?: React.ElementType[];
 }
@@ -100,0 +101,0 @@ interface WithChildrenProp {

cjs/utils/plugin-utils.d.ts

@@ -0,6 +1,10 @@
+import React from "react";
 import { Plugin } from "../types";
-declare function getPluginOptions(plugins: Plugin[]): {
+declare function getPluginComponentProps(plugin: Plugin, children: React.ReactNode): {
+    [x: number]: any;
+}[] | null | undefined;
+declare function getPluginOptions(plugins: Plugin[], children: React.ReactNode): {
     [key: string]: {} | undefined;
 };
 declare function normalizePlugins(plugins?: Plugin[]): Required<Plugin>[];
-export { getPluginOptions, normalizePlugins };
+export { getPluginOptions, normalizePlugins, getPluginComponentProps };

cjs/utils/plugin-utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizePlugins = exports.getPluginOptions = void 0;
+exports.getPluginComponentProps = exports.normalizePlugins = exports.getPluginOptions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const defaultSerializer = { handler: (node) => node };
@@ -16,5 +17,21 @@ const defaultDecorate = () => [];
 const defaultOverride = (editor) => editor;
-function getPluginOptions(plugins) {
+function getPluginComponentProps(plugin, children) {
+    return react_1.default.Children.map(children, (element, index) => {
+        var _a, _b;
+        if (!react_1.default.isValidElement(element))
+            return {};
+        const displayName = (_a = element.type.displayName) !== null && _a !== void 0 ? _a : index.toString();
+        if ((_b = plugin.editorComponents) === null || _b === void 0 ? void 0 : _b.some((type) => type === element.type)) {
+            return element.props ? { [displayName]: element.props } : {};
+        }
+        else {
+            return {};
+        }
+    });
+}
+exports.getPluginComponentProps = getPluginComponentProps;
+function getPluginOptions(plugins, children) {
     return plugins.reduce((prev, curr) => {
-        prev[curr.name] = curr.options;
+        const props = getPluginComponentProps(curr, children);
+        prev[curr.name] = Object.assign(Object.assign({}, curr.options), { componentProps: props });
         return prev;
@@ -26,3 +43,3 @@ }, {});
     return plugins.map((p) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return ({
@@ -38,2 +55,3 @@ name: p.name,
             options: (_h = p.options) !== null && _h !== void 0 ? _h : {},
+            editorComponents: (_j = p.editorComponents) !== null && _j !== void 0 ? _j : [],
         });
@@ -40,0 +58,0 @@ });

cjs/utils/slate-utils.d.ts

@@ -10,2 +10,3 @@ import { Descendant, Editor } from "slate";
 declare function cloneChildren(children: Descendant[]): Descendant[];
-export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, };
+declare function editorToDomNode(editor?: Editor): HTMLElement | undefined;
+export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, editorToDomNode, };

cjs/utils/slate-utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.nodesToText = exports.hasChildren = exports.cloneChildren = exports.focusEditor = exports.removeRoot = exports.addRoot = exports.isParagraph = void 0;
+exports.editorToDomNode = exports.nodesToText = exports.hasChildren = exports.cloneChildren = exports.focusEditor = exports.removeRoot = exports.addRoot = exports.isParagraph = void 0;
 const slate_1 = require("slate");
@@ -68,1 +68,10 @@ const slate_react_1 = require("slate-react");
 exports.cloneChildren = cloneChildren;
+function editorToDomNode(editor) {
+    try {
+        return editor ? slate_react_1.ReactEditor.toDOMNode(editor, editor) : undefined;
+    }
+    catch (e) {
+        return;
+    }
+}
+exports.editorToDomNode = editorToDomNode;

Combobox/ComboboxProps.d.ts

@@ -1,2 +0,2 @@
-import { HTMLAttributes } from "react";
+import { ElementType, HTMLAttributes } from "react";
 import { BaseRange } from "slate";
@@ -6,3 +6,3 @@ import { WithChildrenProp } from "../types";
 type ComboboxCloseEvents = KeyboardEvent | FocusEvent | MouseEvent | TouchEvent;
-interface ComboboxProps extends WithChildrenProp {
+interface ComboboxRootProps extends WithChildrenProp {
     /**
@@ -27,2 +27,9 @@ * If true, the combobox is shown.
 }
+interface ComboboxProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Becomes `true` as soon as the combobox is opened. Useful for animations.
+     * @default false
+     */
+    in?: boolean;
+}
 interface ComboboxItemProps extends WithChildrenProp, Pick<HTMLAttributes<HTMLLIElement>, "onClick"> {
@@ -36,10 +43,4 @@ /**
 }
-interface ComboboxComponent extends WithChildrenProp {
-    /**
-     * Becomes `true` as soon as the combobox is opened. Useful for animations.
-     * @default false
-     */
-    in?: boolean;
-}
-type ComboboxItemComponent = ComboboxItemProps;
-export type { ComboboxProps, ComboboxItemProps, ComboboxComponent, ComboboxItemComponent, ComboboxCloseEvents, ComboboxCloseReason, };
+type ComboboxComponent = ElementType<ComboboxProps>;
+type ComboboxItemComponent = ElementType<ComboboxItemProps>;
+export type { ComboboxRootProps, ComboboxProps, ComboboxItemProps, ComboboxComponent, ComboboxItemComponent, ComboboxCloseEvents, ComboboxCloseReason, };

Combobox/DefaultCombobox.d.ts

 /// <reference types="react" />
-import { ComboboxComponent } from "./ComboboxProps";
-declare const DefaultCombobox: import("react").ForwardRefExoticComponent<ComboboxComponent & import("react").RefAttributes<HTMLUListElement>>;
-declare const DefaultComboboxItem: import("react").ForwardRefExoticComponent<import("./ComboboxProps").ComboboxItemProps & import("react").RefAttributes<HTMLLIElement>>;
+import { ComboboxItemProps, ComboboxProps } from "./ComboboxProps";
+declare const DefaultCombobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLUListElement>>;
+declare const DefaultComboboxItem: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLLIElement>>;
 export { DefaultCombobox, DefaultComboboxItem };

Combobox/DefaultCombobox.js

@@ -14,11 +14,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { forwardRef } from "react";
-const DefaultCombobox = forwardRef((props, ref) => (_jsx("ul", Object.assign({}, props, { ref: ref, style: {
-        cursor: "pointer",
-        borderRadius: 4,
-        backgroundColor: "rgb(255, 255, 255)",
-        boxShadow: "rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px",
-        listStyle: "none",
-        padding: "4px 0",
-        margin: 0,
-    } }))));
+const DefaultCombobox = forwardRef((_a, ref) => {
+    var { in: _in } = _a, props = __rest(_a, ["in"]);
+    return (_jsx("ul", Object.assign({}, props, { ref: ref, style: {
+            cursor: "pointer",
+            borderRadius: 4,
+            backgroundColor: "rgb(255, 255, 255)",
+            boxShadow: "rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px",
+            listStyle: "none",
+            padding: "4px 0",
+            margin: 0,
+        } })));
+});
 const DefaultComboboxItem = forwardRef((_a, ref) => {
@@ -25,0 +28,0 @@ var { selected } = _a, props = __rest(_a, ["selected"]);

Combobox/index.d.ts

@@ -1,2 +0,2 @@
-export { ComboboxItem, default } from "./Combobox";
-export type { ComboboxCloseEvents, ComboboxCloseReason, ComboboxComponent, ComboboxItemComponent, ComboboxItemProps, ComboboxProps, } from "./ComboboxProps";
+export type { ComboboxCloseEvents, ComboboxCloseReason, ComboboxComponent, ComboboxItemComponent, ComboboxItemProps, ComboboxProps, ComboboxRootProps, } from "./ComboboxProps";
+export { ComboboxItem, default } from "./ComboboxRoot";

Combobox/index.js

@@ -1,1 +0,1 @@
-export { ComboboxItem, default } from "./Combobox";
+export { ComboboxItem, default } from "./ComboboxRoot";

ComponentProvider/ComponentProvider.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from "react";
-import Chip from "../Chip";
+import DefaultChip from "../Chip";
 import { DefaultCombobox, DefaultComboboxItem, } from "../Combobox/DefaultCombobox";
@@ -8,3 +8,3 @@ // @ts-ignore
 const defaultComboboxRootStyle = {};
-const ComponentProvider = ({ children, chipComponent = Chip, comboboxComponent = DefaultCombobox, comboboxRootStyle = defaultComboboxRootStyle, comboboxItemComponent = DefaultComboboxItem, }) => {
+const ComponentProvider = ({ children, chipComponent = DefaultChip, comboboxComponent = DefaultCombobox, comboboxRootStyle = defaultComboboxRootStyle, comboboxItemComponent = DefaultComboboxItem, }) => {
     return (_jsx(ComponentCtx.Provider, Object.assign({ value: {
@@ -11,0 +11,0 @@ chipComponent,

ComponentProvider/ComponentProviderProps.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { CSSProperties } from "react";
 import { ChipComponent } from "../Chip";
@@ -7,7 +7,7 @@ import { ComboboxComponent, ComboboxItemComponent } from "../Combobox";
     chipComponent: ChipComponent;
-    comboboxComponent: ElementType<ComboboxComponent & HTMLAttributes<HTMLUListElement>>;
+    comboboxComponent: ComboboxComponent;
     comboboxRootStyle: CSSProperties;
-    comboboxItemComponent: ElementType<ComboboxItemComponent & HTMLAttributes<HTMLLIElement>>;
+    comboboxItemComponent: ComboboxItemComponent;
 }
 type ComponentProviderProps = Partial<Components> & WithChildrenProp;
 export type { ComponentProviderProps, Components };

FluentEdit/FluentEdit.js

@@ -15,3 +15,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Transforms } from "slate";
-import { Editable, ReactEditor, Slate, } from "slate-react";
+import { Editable, Slate, } from "slate-react";
 import ComponentProvider from "../ComponentProvider";
@@ -27,3 +27,3 @@ import useDecorate from "../decorate";
 import useFluentEditInternal from "../useFluentEditInternal";
-import { addRoot, focusEditor, isParagraph, removeRoot } from "../utils";
+import { addRoot, editorToDomNode, focusEditor, isParagraph, removeRoot, } from "../utils";
 import { getPluginOptions } from "../utils/plugin-utils";
@@ -60,3 +60,3 @@ import createSlateEditor from "./createSlateEditor";
     }, []);
-    const pluginOptions = useMemo(() => getPluginOptions(plugins), [plugins]);
+    const pluginOptions = useMemo(() => getPluginOptions(plugins, children), [plugins, children]);
     const initialValue = useMemo(() => addRoot(deserializer(initialTextValue, multiline, pluginOptions)), [deserializer, initialTextValue, multiline, pluginOptions]);
@@ -89,5 +89,4 @@ const handleEnterPress = useCallback((event) => {
         Transforms.move(editor);
-        const editorRef = ReactEditor.toDOMNode(editor, editor);
-        const pasteEvent = new Event("fePaste");
-        editorRef.dispatchEvent(pasteEvent);
+        const editorElem = editorToDomNode(editor);
+        editorElem === null || editorElem === void 0 ? void 0 : editorElem.dispatchEvent(new Event("fePaste"));
         onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
@@ -94,0 +93,0 @@ },

FluentEdit/FluentEditProps.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, ElementType, HTMLAttributes, TextareaHTMLAttributes } from "react";
+import { CSSProperties, TextareaHTMLAttributes } from "react";
 import { ChipComponent } from "../Chip";
@@ -43,3 +43,3 @@ import { ComboboxComponent, ComboboxItemComponent } from "../Combobox";
      */
-    comboboxComponent?: ElementType<ComboboxComponent & HTMLAttributes<HTMLUListElement>>;
+    comboboxComponent?: ComboboxComponent;
     /**
@@ -54,3 +54,3 @@ * Extends the styling of the combobox root element.
      */
-    comboboxItemComponent?: ElementType<ComboboxItemComponent & HTMLAttributes<HTMLLIElement>>;
+    comboboxItemComponent?: ComboboxItemComponent;
 }
@@ -57,0 +57,0 @@ interface FluentEditInternalProps extends FluentEditProps {

FluentEditProvider/FluentEditProvider.js

@@ -26,3 +26,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
                 });
-                const nodes = deserializer(text, multiline, getPluginOptions(plugins));
+                const nodes = deserializer(text, multiline, getPluginOptions(plugins, children));
                 Transforms.insertNodes(editor, nodes);
@@ -32,3 +32,3 @@ focusEditor();
         }
-    }, [editor, deserializer, multiline, plugins, focusEditor]);
+    }, [editor, deserializer, multiline, plugins, focusEditor, children]);
     const value = {
@@ -35,0 +35,0 @@ editor,

package.json

 {
   "name": "@react-fluent-edit/core",
-  "version": "3.1.0",
+  "version": "3.2.0-next.0",
   "license": "MIT",
@@ -27,4 +27,5 @@ "description": "Slate based editor powered by plugins",
   },
+  "stableVersion": "3.2.0",
   "module": "./index.js",
   "types": "./index.d.ts"
 }

types.d.ts

@@ -1,2 +0,2 @@
-import { ClipboardEvent, CSSProperties, DragEvent, FocusEvent, FunctionComponent, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import React, { ClipboardEvent, CSSProperties, DragEvent, FocusEvent, FunctionComponent, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { BaseEditor, BaseRange, Descendant, Editor, NodeEntry } from "slate";
@@ -98,2 +98,3 @@ import { HistoryEditor } from "slate-history";
     options?: T;
+    editorComponents?: React.ElementType[];
 }
@@ -100,0 +101,0 @@ interface WithChildrenProp {

utils/plugin-utils.d.ts

@@ -0,6 +1,10 @@
+import React from "react";
 import { Plugin } from "../types";
-declare function getPluginOptions(plugins: Plugin[]): {
+declare function getPluginComponentProps(plugin: Plugin, children: React.ReactNode): {
+    [x: number]: any;
+}[] | null | undefined;
+declare function getPluginOptions(plugins: Plugin[], children: React.ReactNode): {
     [key: string]: {} | undefined;
 };
 declare function normalizePlugins(plugins?: Plugin[]): Required<Plugin>[];
-export { getPluginOptions, normalizePlugins };
+export { getPluginOptions, normalizePlugins, getPluginComponentProps };

utils/plugin-utils.js

 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 const defaultSerializer = { handler: (node) => node };
@@ -13,5 +14,20 @@ const defaultDecorate = () => [];
 const defaultOverride = (editor) => editor;
-function getPluginOptions(plugins) {
+function getPluginComponentProps(plugin, children) {
+    return React.Children.map(children, (element, index) => {
+        var _a, _b;
+        if (!React.isValidElement(element))
+            return {};
+        const displayName = (_a = element.type.displayName) !== null && _a !== void 0 ? _a : index.toString();
+        if ((_b = plugin.editorComponents) === null || _b === void 0 ? void 0 : _b.some((type) => type === element.type)) {
+            return element.props ? { [displayName]: element.props } : {};
+        }
+        else {
+            return {};
+        }
+    });
+}
+function getPluginOptions(plugins, children) {
     return plugins.reduce((prev, curr) => {
-        prev[curr.name] = curr.options;
+        const props = getPluginComponentProps(curr, children);
+        prev[curr.name] = Object.assign(Object.assign({}, curr.options), { componentProps: props });
         return prev;
@@ -22,3 +38,3 @@ }, {});
     return plugins.map((p) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return ({
@@ -34,5 +50,6 @@ name: p.name,
             options: (_h = p.options) !== null && _h !== void 0 ? _h : {},
+            editorComponents: (_j = p.editorComponents) !== null && _j !== void 0 ? _j : [],
         });
     });
 }
-export { getPluginOptions, normalizePlugins };
+export { getPluginOptions, normalizePlugins, getPluginComponentProps };

utils/slate-utils.d.ts

@@ -10,2 +10,3 @@ import { Descendant, Editor } from "slate";
 declare function cloneChildren(children: Descendant[]): Descendant[];
-export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, };
+declare function editorToDomNode(editor?: Editor): HTMLElement | undefined;
+export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, editorToDomNode, };

utils/slate-utils.js

@@ -58,2 +58,10 @@ import { Editor, Element, Node, Text, Transforms } from "slate";
 }
-export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, };
+function editorToDomNode(editor) {
+    try {
+        return editor ? ReactEditor.toDOMNode(editor, editor) : undefined;
+    }
+    catch (e) {
+        return;
+    }
+}
+export { isParagraph, addRoot, removeRoot, focusEditor, cloneChildren, hasChildren, nodesToText, editorToDomNode, };

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120968

increased by3.14%

Lines of code

2752

increased by2.69%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes