@quadrats/react 0.5.5 → 0.5.9

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/line-break/defaultRenderLineBreakElement.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderLineBreakElementProps } from './typings';
-export declare const defaultRenderLineBreakElement: ({ attributes }: RenderLineBreakElementProps) => JSX.Element;
+export declare const defaultRenderLineBreakElement: ({ attributes, children }: RenderLineBreakElementProps) => JSX.Element;

package/line-break/defaultRenderLineBreakElement.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-const defaultRenderLineBreakElement = ({ attributes }) => (React.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
-    React.createElement("br", null)));
+const defaultRenderLineBreakElement = ({ attributes, children }) => (React.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break" }), children));
 
 export { defaultRenderLineBreakElement };

package/line-break/index.cjs.js

@@ -84,8 +84,7 @@ const COMMON_ON_KEY_DOWN_BREAK = createOnKeyDownBreak({
     },
 });
 
-const defaultRenderLineBreakElement = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
-    React__default.createElement("br", null)));
+const defaultRenderLineBreakElement = ({ attributes, children }) => (React__default.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break" }), children));
 
 function createReactLineBreak(options = {}) {
     const core$1 = core.createLineBreak(options);
@@ -95,8 +94,7 @@ function createReactLineBreak(options = {}) {
         }), createRenderElement: ({ render = defaultRenderLineBreakElement } = {}) => react.createRenderElement({ type, render }) });
 }
 
-const renderLineBreakElementWithSymbol = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, className: "qdr-line-break__with-symbol", contentEditable: false }),
-    React__default.createElement("br", null)));
+const renderLineBreakElementWithSymbol = ({ attributes, children }) => (React__default.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break qdr-line-break__with-symbol" }), children));
 
 exports.COMMON_EXIT_BREAK_ON_AFTER_HOTKEY = COMMON_EXIT_BREAK_ON_AFTER_HOTKEY;
 exports.COMMON_EXIT_BREAK_ON_AFTER_RULE = COMMON_EXIT_BREAK_ON_AFTER_RULE;

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/line-break/renderLineBreakElementWithSymbol.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderLineBreakElementProps } from './typings';
-export declare const renderLineBreakElementWithSymbol: ({ attributes }: RenderLineBreakElementProps) => JSX.Element;
+export declare const renderLineBreakElementWithSymbol: ({ attributes, children }: RenderLineBreakElementProps) => JSX.Element;

package/line-break/renderLineBreakElementWithSymbol.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-const renderLineBreakElementWithSymbol = ({ attributes }) => (React.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, className: "qdr-line-break__with-symbol", contentEditable: false }),
-    React.createElement("br", null)));
+const renderLineBreakElementWithSymbol = ({ attributes, children }) => (React.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break qdr-line-break__with-symbol" }), children));
 
 export { renderLineBreakElementWithSymbol };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.5",
+  "version": "0.5.9",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,8 +20,8 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.5.3",
-    "@quadrats/core": "^0.5.2",
+    "@quadrats/common": "^0.5.9",
+    "@quadrats/core": "^0.5.9",
     "@quadrats/icons": "^0.5.0",
     "@quadrats/locales": "^0.5.0",
     "@quadrats/theme": "^0.5.0",

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" },