@quadrats/react 0.5.3 → 0.5.7

package/core/components/Editable.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { EditableProps as SlateEditableProps } from 'slate-react/dist/components/editable';
-export declare type EditableProps = SlateEditableProps;
+import { RenderElementProps, RenderLeafProps } from '../typings/renderer';
+export declare type EditableProps = Omit<SlateEditableProps, 'renderLeaf' | 'renderElement'> & {
+    renderLeaf?: (props: RenderLeafProps) => JSX.Element;
+    renderElement?: (props: RenderElementProps) => JSX.Element;
+};
 declare function Editable(props: EditableProps): JSX.Element;
 export default Editable;

package/core/components/Quadrats.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { Slate } from 'slate-react';
 import { ConfigsProviderProps } from '@quadrats/react/configs';
-export declare type QuadratsProps = Pick<Parameters<typeof Slate>[0], 'children' | 'editor' | 'onChange' | 'value'> & Omit<ConfigsProviderProps, 'children'>;
+import { Descendant } from '..';
+export declare type QuadratsProps = Pick<Parameters<typeof Slate>[0], 'children' | 'editor'> & Omit<ConfigsProviderProps, 'children'> & {
+    onChange: (value: Descendant[]) => void;
+    value: Descendant[];
+};
 /**
  * Provide configs of quadrats and control the value.
  */

package/core/index.d.ts

@@ -1,9 +1,10 @@
-import { BaseEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
+import { QuadratsElement, QuadratsText } from '@quadrats/core';
 import { ReactEditor } from 'slate-react';
 export { useSlateStatic, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
 export * from './typings/handler';
 export * from './typings/renderer';
 export * from './typings/with';
+export * from './typings/descendant';
 export { default as Editable, EditableProps } from './components/Editable';
 export { default as DefaultElement } from './components/DefaultElement';
 export { default as DefaultLeaf } from './components/DefaultLeaf';
@@ -17,7 +18,7 @@ export { createRenderElements } from './createRenderElements';
 export { createRenderMark } from './createRenderMark';
 declare module 'slate' {
     interface CustomTypes {
-        Editor: BaseEditor & ReactEditor;
+        Editor: ReactEditor;
         Element: QuadratsElement;
         Text: QuadratsText;
     }

package/core/typings/descendant.d.ts

@@ -0,0 +1,2 @@
+import { QuadratsElement, QuadratsText } from '@quadrats/core';
+export declare type Descendant = QuadratsElement | QuadratsText;

package/embed/toolbar/EmbedToolbarIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Editor } from '@quadrats/core';
+import { ReactEditor } from '@quadrats/react';
 import { InputWidgetConfig } from '@quadrats/common/input-widget';
 import { ReactEmbed } from '@quadrats/react/embed';
 import { ToolbarIconProps } from '@quadrats/react/toolbar';
@@ -9,7 +9,7 @@ export interface EmbedToolbarIconProps<Provider extends string> extends Omit<Too
      * The providers supported by this icon.
      */
     providers: Provider[];
-    startToolInput?: (editor: Editor, inputConfig: InputWidgetConfig) => void;
+    startToolInput?: (editor: ReactEditor, inputConfig: InputWidgetConfig) => void;
 }
 declare function EmbedToolbarIcon<Provider extends string>(props: EmbedToolbarIconProps<Provider>): JSX.Element;
 export default EmbedToolbarIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.3",
+  "version": "0.5.7",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",

package/toolbar/components/Toolbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ToolbarProps {
     /**
      * If there are any nodes which type match it, toolbar will hide.
@@ -8,6 +8,10 @@ export interface ToolbarProps {
      * A render props which provide a flag `expanded` which useful for rendering different things between collapsed and expanded.
      */
     children: (expanded: boolean) => JSX.Element | null | undefined;
+    /**
+     * Toolbar container
+     */
+    containerRef?: React.MutableRefObject<HTMLElement | undefined>;
 }
 declare function Toolbar(props: ToolbarProps): JSX.Element | null;
 export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -80,6 +80,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -88,7 +95,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React.createElement(Portal, null,
+    return (React.createElement(Portal, { getContainer: getPortalContainer },
         React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
             React.createElement("div", { className: "qdr-toolbar__arrow" }),
             React.createElement("div", { className: "qdr-toolbar" },

package/toolbar/index.cjs.js

@@ -120,6 +120,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = React.useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -128,7 +135,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React__default.createElement(components.Portal, null,
+    return (React__default.createElement(components.Portal, { getContainer: getPortalContainer },
         React__default.createElement("div", { ref: toolbarRef, className: clsx__default('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
             React__default.createElement("div", { className: "qdr-toolbar__arrow" }),
             React__default.createElement("div", { className: "qdr-toolbar" },