@quadrats/react 0.5.4 → 0.5.8

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/line-break/jsx-serializer/createJsxSerializeLineBreak.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeLineBreakElementProps } from './typings';
+export declare type CreateJsxSerializeLineBreakOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeLineBreakElementProps>>;
+export declare function createJsxSerializeLineBreak(options?: CreateJsxSerializeLineBreakOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/line-break/jsx-serializer/createJsxSerializeLineBreak.js

@@ -0,0 +1,11 @@
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement.js';
+import { LINE_BREAK_TYPE } from '@quadrats/core';
+
+/* eslint-disable max-len */
+function createJsxSerializeLineBreak(options = {}) {
+    const { type = LINE_BREAK_TYPE, render = defaultRenderLineBreakElement } = options;
+    return createJsxSerializeElement({ type, render });
+}
+
+export { createJsxSerializeLineBreak };

package/line-break/jsx-serializer/defaultRenderLineBreakElement.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const defaultRenderLineBreakElement: () => JSX.Element;

package/line-break/jsx-serializer/defaultRenderLineBreakElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const defaultRenderLineBreakElement = () => (React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
+    React.createElement("br", null)));
+
+export { defaultRenderLineBreakElement };

package/line-break/jsx-serializer/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+var core = require('@quadrats/core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultRenderLineBreakElement = () => (React__default.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
+    React__default.createElement("br", null)));
+
+/* eslint-disable max-len */
+function createJsxSerializeLineBreak(options = {}) {
+    const { type = core.LINE_BREAK_TYPE, render = defaultRenderLineBreakElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.createJsxSerializeLineBreak = createJsxSerializeLineBreak;
+exports.defaultRenderLineBreakElement = defaultRenderLineBreakElement;

package/line-break/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement';
+export { CreateJsxSerializeLineBreakOptions, createJsxSerializeLineBreak } from './createJsxSerializeLineBreak';

package/line-break/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement.js';
+export { createJsxSerializeLineBreak } from './createJsxSerializeLineBreak.js';

package/line-break/jsx-serializer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/line-break/jsx-serializer",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/line-break/jsx-serializer/typings.d.ts

@@ -0,0 +1,3 @@
+import { LineBreakElement } from '@quadrats/core';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare type JsxSerializeLineBreakElementProps = JsxSerializeElementProps<LineBreakElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.4",
+  "version": "0.5.8",
   "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" },