@quadrats/react 0.6.7 → 0.7.0

package/input-block/hooks/useInputBlock.js

@@ -1,49 +1,49 @@
 import { useRef, useLayoutEffect } from 'react';
 import { useQuadrats, useLocale } from '@quadrats/react';
 
-function useInputBlock({ confirm, element, remove }) {
-    var _a, _b;
-    const inputRef = useRef(null);
-    const editor = useQuadrats();
-    const locale = useLocale();
-    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
-    /**
-     * Since keying `Enter` or `Escape` will also cause input blurred
-     * Add a `removeable` flag to avoid.
-     */
-    const removeable = useRef(true);
-    const removeIfRemovable = () => {
-        if (removeable.current) {
-            removeable.current = false;
-            remove(editor, element);
-        }
-    };
-    useLayoutEffect(() => {
-        /**
-         * To avoid from selection of quadrats broken, delay autoFocus.
-         */
-        window.requestAnimationFrame(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-    }, [inputRef]);
-    return {
-        inputRef,
-        onBlur: removeIfRemovable,
-        onKeyDown: (event) => {
-            var _a;
-            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                if (value) {
-                    removeable.current = false;
-                    confirm(editor, element, value);
-                }
-            }
-            else if (event.key === 'Escape') {
-                event.preventDefault();
-                removeIfRemovable();
-            }
-        },
-        placeholder,
-    };
+function useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
+    const inputRef = useRef(null);
+    const editor = useQuadrats();
+    const locale = useLocale();
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
+    /**
+     * Since keying `Enter` or `Escape` will also cause input blurred
+     * Add a `removeable` flag to avoid.
+     */
+    const removeable = useRef(true);
+    const removeIfRemovable = () => {
+        if (removeable.current) {
+            removeable.current = false;
+            remove(editor, element);
+        }
+    };
+    useLayoutEffect(() => {
+        /**
+         * To avoid from selection of quadrats broken, delay autoFocus.
+         */
+        window.requestAnimationFrame(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }, [inputRef]);
+    return {
+        inputRef,
+        onBlur: removeIfRemovable,
+        onKeyDown: (event) => {
+            var _a;
+            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (value) {
+                    removeable.current = false;
+                    confirm(editor, element, value);
+                }
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                removeIfRemovable();
+            }
+        },
+        placeholder,
+    };
 }
 
 export { useInputBlock };

package/input-block/index.cjs.js

@@ -1,93 +1,87 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var react = require('@quadrats/react');
 var inputBlock = require('@quadrats/common/input-block');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function useInputBlock({ confirm, element, remove }) {
-    var _a, _b;
-    const inputRef = React.useRef(null);
-    const editor = react.useQuadrats();
-    const locale = react.useLocale();
-    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
-    /**
-     * Since keying `Enter` or `Escape` will also cause input blurred
-     * Add a `removeable` flag to avoid.
-     */
-    const removeable = React.useRef(true);
-    const removeIfRemovable = () => {
-        if (removeable.current) {
-            removeable.current = false;
-            remove(editor, element);
-        }
-    };
-    React.useLayoutEffect(() => {
-        /**
-         * To avoid from selection of quadrats broken, delay autoFocus.
-         */
-        window.requestAnimationFrame(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-    }, [inputRef]);
-    return {
-        inputRef,
-        onBlur: removeIfRemovable,
-        onKeyDown: (event) => {
-            var _a;
-            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                if (value) {
-                    removeable.current = false;
-                    confirm(editor, element, value);
-                }
-            }
-            else if (event.key === 'Escape') {
-                event.preventDefault();
-                removeIfRemovable();
-            }
-        },
-        placeholder,
-    };
+function useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
+    const inputRef = React.useRef(null);
+    const editor = react.useQuadrats();
+    const locale = react.useLocale();
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
+    /**
+     * Since keying `Enter` or `Escape` will also cause input blurred
+     * Add a `removeable` flag to avoid.
+     */
+    const removeable = React.useRef(true);
+    const removeIfRemovable = () => {
+        if (removeable.current) {
+            removeable.current = false;
+            remove(editor, element);
+        }
+    };
+    React.useLayoutEffect(() => {
+        /**
+         * To avoid from selection of quadrats broken, delay autoFocus.
+         */
+        window.requestAnimationFrame(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }, [inputRef]);
+    return {
+        inputRef,
+        onBlur: removeIfRemovable,
+        onKeyDown: (event) => {
+            var _a;
+            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (value) {
+                    removeable.current = false;
+                    confirm(editor, element, value);
+                }
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                removeIfRemovable();
+            }
+        },
+        placeholder,
+    };
 }
 
-function InputBlock(props) {
-    const { attributes, children } = props;
-    const { inputRef, onBlur, onKeyDown, placeholder, } = useInputBlock(props);
-    return (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
-            display: 'flex',
-        }, className: "qdr-input-block" }),
-        React__default.createElement("input", { ref: inputRef, onBlur: onBlur, onKeyDown: onKeyDown, placeholder: placeholder, style: {
-                display: 'block',
-                color: 'currentColor',
-                font: 'inherit',
-                width: '100%',
-                margin: 0,
-                border: 0,
-                padding: 0,
-                background: 'none',
-                outline: 0,
-                boxSizing: 'border-box',
-            } }),
-        children));
+function InputBlock(props) {
+    const { attributes, children } = props;
+    const { inputRef, onBlur, onKeyDown, placeholder, } = useInputBlock(props);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
+            display: 'flex',
+        }, className: "qdr-input-block" }),
+        React.createElement("input", { ref: inputRef, onBlur: onBlur, onKeyDown: onKeyDown, placeholder: placeholder, style: {
+                display: 'block',
+                color: 'currentColor',
+                font: 'inherit',
+                width: '100%',
+                margin: 0,
+                border: 0,
+                padding: 0,
+                background: 'none',
+                outline: 0,
+                boxSizing: 'border-box',
+            } }),
+        children));
 }
 
-const defaultRenderInputBlockElement = (props) => React__default.createElement(InputBlock, Object.assign({}, props));
+const defaultRenderInputBlockElement = (props) => React.createElement(InputBlock, Object.assign({}, props));
 
-function createReactInputBlock(options = {}) {
-    const core = inputBlock.createInputBlock(options);
-    const { type } = core;
-    const remove = (editor, element) => core.remove(editor, [element, react.ReactEditor.findPath(editor, element)], () => react.ReactEditor.focus(editor));
-    const confirm = (editor, element, value) => core.confirm(element, value, () => remove(editor, element));
-    return Object.assign(Object.assign({}, core), { remove,
-        confirm, createRenderElement: ({ render = defaultRenderInputBlockElement, } = {}) => react.createRenderElement({
-            type,
-            render: (props) => render(Object.assign(Object.assign({}, props), { remove, confirm })),
-        }) });
+function createReactInputBlock(options = {}) {
+    const core = inputBlock.createInputBlock(options);
+    const { type } = core;
+    const remove = (editor, element) => core.remove(editor, [element, react.ReactEditor.findPath(editor, element)], () => react.ReactEditor.focus(editor));
+    const confirm = (editor, element, value) => core.confirm(element, value, () => remove(editor, element));
+    return Object.assign(Object.assign({}, core), { remove,
+        confirm, createRenderElement: ({ render = defaultRenderInputBlockElement, } = {}) => react.createRenderElement({
+            type,
+            render: (props) => render(Object.assign(Object.assign({}, props), { remove, confirm })),
+        }) });
 }
 
 exports.InputBlock = InputBlock;

package/input-block/typings.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { InputBlock, InputBlockElement } from '@quadrats/common/input-block';
 import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
-export declare type RenderInputBlockElementProps = RenderElementProps<InputBlockElement> & Pick<ReactInputBlock, 'remove' | 'confirm'>;
-export declare type RenderInputBlockElement = (props: RenderInputBlockElementProps) => JSX.Element | null | undefined;
+export type RenderInputBlockElementProps = RenderElementProps<InputBlockElement> & Pick<ReactInputBlock, 'remove' | 'confirm'>;
+export type RenderInputBlockElement = (props: RenderInputBlockElementProps) => JSX.Element | null | undefined;
 export interface ReactInputBlockCreateRenderElementOptions {
     render?: RenderInputBlockElement;
 }

package/italic/constants.js

@@ -1,8 +1,8 @@
-/**
- * Default hotkey for toggling italic.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling italic.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const ITALIC_HOTKEY = 'mod+i';
 
 export { ITALIC_HOTKEY };

package/italic/createReactItalic.d.ts

@@ -1 +1 @@
-export declare const createReactItalic: (variant?: string | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;
+export declare const createReactItalic: (variant?: string) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/italic/createReactItalic.js

@@ -3,9 +3,9 @@ import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
 import { defaultRenderItalic } from './defaultRenderItalic.js';
 import { ITALIC_HOTKEY } from './constants.js';
 
-const createReactItalic = (variant) => createReactToggleMarkCreator(createItalic(variant), {
-    hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic,
+const createReactItalic = (variant) => createReactToggleMarkCreator(createItalic(variant), {
+    hotkey: ITALIC_HOTKEY,
+    render: defaultRenderItalic,
 })();
 
 export { createReactItalic };

package/italic/defaultRenderItalic.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-export declare const defaultRenderItalic: ({ children, leaf }: RenderMarkPropsBase<boolean>) => JSX.Element;
+export declare const defaultRenderItalic: ({ children, leaf }: RenderMarkPropsBase<boolean>) => React.JSX.Element;

package/italic/defaultRenderItalic.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITALIC_TYPE } from '@quadrats/common/italic';
 
-const defaultRenderItalic = ({ children, leaf }) => (React.createElement("i", { className: leaf.italicVariant
+const defaultRenderItalic = ({ children, leaf }) => (React.createElement("i", { className: leaf.italicVariant
         ? `${ITALIC_TYPE}.${leaf.italicVariant}` : `${ITALIC_TYPE}` }, children));
 
 export { defaultRenderItalic };

package/italic/index.cjs.js

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var italic = require('@quadrats/common/italic');
 var toggleMark = require('@quadrats/react/toggle-mark');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Default hotkey for toggling italic.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling italic.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const ITALIC_HOTKEY = 'mod+i';
 
-const defaultRenderItalic = ({ children, leaf }) => (React__default.createElement("i", { className: leaf.italicVariant
+const defaultRenderItalic = ({ children, leaf }) => (React.createElement("i", { className: leaf.italicVariant
         ? `${italic.ITALIC_TYPE}.${leaf.italicVariant}` : `${italic.ITALIC_TYPE}` }, children));
 
-const createReactItalic = (variant) => toggleMark.createReactToggleMarkCreator(italic.createItalic(variant), {
-    hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic,
+const createReactItalic = (variant) => toggleMark.createReactToggleMarkCreator(italic.createItalic(variant), {
+    hotkey: ITALIC_HOTKEY,
+    render: defaultRenderItalic,
 })();
 
 exports.ITALIC_HOTKEY = ITALIC_HOTKEY;

package/italic/jsx-serializer/createJsxSerializeItalic.js

@@ -2,9 +2,9 @@ import { ITALIC_TYPE } from '@quadrats/common/italic';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
 import { defaultRenderItalic } from '@quadrats/react/italic';
 
-const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
-    type: ITALIC_TYPE,
-    render: defaultRenderItalic,
+const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
+    type: ITALIC_TYPE,
+    render: defaultRenderItalic,
 });
 
 export { createJsxSerializeItalic };

package/italic/jsx-serializer/index.cjs.js

@@ -1,14 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var italic = require('@quadrats/react/italic');
 var italic$1 = require('@quadrats/common/italic');
 var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
-const createJsxSerializeItalic = jsxSerializer.createJsxSerializeToggleMarkCreator({
-    type: italic$1.ITALIC_TYPE,
-    render: italic.defaultRenderItalic,
+const createJsxSerializeItalic = jsxSerializer.createJsxSerializeToggleMarkCreator({
+    type: italic$1.ITALIC_TYPE,
+    render: italic.defaultRenderItalic,
 });
 
 exports.defaultRenderItalic = italic.defaultRenderItalic;

package/jsx-serializer/createJsxSerializeElement.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from './typings';
-export declare function createJsxSerializeElement<P extends JsxSerializeElementProps>(options: CreateJsxSerializeElementOptions<P>): (props: JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeElement<P extends JsxSerializeElementProps>(options: CreateJsxSerializeElementOptions<P>): (props: JsxSerializeElementProps) => JSX.Element | null | undefined;

package/jsx-serializer/createJsxSerializeElement.js

@@ -1,7 +1,7 @@
 import { createRenderElementBase } from '@quadrats/react/_internal';
 
-function createJsxSerializeElement(options) {
-    return createRenderElementBase(options);
+function createJsxSerializeElement(options) {
+    return createRenderElementBase(options);
 }
 
 export { createJsxSerializeElement };

package/jsx-serializer/createJsxSerializeElements.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from './typings';
-export declare function createJsxSerializeElements<P extends JsxSerializeElementProps>(options: CreateJsxSerializeElementOptions<P>[]): (props: JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeElements<P extends JsxSerializeElementProps>(options: CreateJsxSerializeElementOptions<P>[]): (props: JsxSerializeElementProps) => JSX.Element | null | undefined;

package/jsx-serializer/createJsxSerializeElements.js

@@ -1,7 +1,7 @@
 import { createRenderElementsBase } from '@quadrats/react/_internal';
 
-function createJsxSerializeElements(options) {
-    return createRenderElementsBase(options);
+function createJsxSerializeElements(options) {
+    return createRenderElementsBase(options);
 }
 
 export { createJsxSerializeElements };

package/jsx-serializer/createJsxSerializeMark.js

@@ -1,7 +1,7 @@
 import { createRenderMarkBase } from '@quadrats/react/_internal';
 
-function createJsxSerializeMark(options) {
-    return createRenderMarkBase(options);
+function createJsxSerializeMark(options) {
+    return createRenderMarkBase(options);
 }
 
 export { createJsxSerializeMark };

package/jsx-serializer/createJsxSerializer.js

@@ -2,48 +2,48 @@ import React, { cloneElement } from 'react';
 import { isText } from '@quadrats/core/serializers';
 import { composeRenderElementsBase, composeRenderLeafsBase } from '@quadrats/react/_internal';
 
-let key = 0;
-function addKey(element) {
-    key += 1;
-    return cloneElement(element, { key });
-}
-function createJsxSerializer(options) {
-    const { defaultElement: defaultSerializeElement = ({ children }) => React.createElement("div", null, children), defaultLeaf: defaultSerializeLeaf = ({ children }) => React.createElement("span", null, children), elements: serializeElements = [], leafs: serializeLeafs = [], } = options;
-    const serializeElement = composeRenderElementsBase(defaultSerializeElement, serializeElements);
-    const serializeLeaf = composeRenderLeafsBase(defaultSerializeLeaf, serializeLeafs);
-    const leafStyle = {
-        whiteSpace: 'pre-wrap',
-    };
-    function serializeNode(node) {
-        const { parent } = node;
-        let result;
-        if (!isText(node)) {
-            result = serializeElement({
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                children: serializeNodes(node.children, node),
-                element: Object.assign(Object.assign({}, node), { parent }),
-            });
-        }
-        else if (node.text) {
-            result = serializeLeaf({
-                leaf: node,
-                children: (React.createElement("span", { style: leafStyle }, node.text
-                    .split('\n')
-                    .map(t => t || ' ')
-                    .join('\n'))),
-            });
-        }
-        else {
-            result = React.createElement("span", null, "\uFEFF");
-        }
-        return addKey(result);
-    }
-    function serializeNodes(nodes, parent) {
-        return React.createElement(React.Fragment, null, nodes.map(node => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
-    }
-    return {
-        serialize: (nodes) => serializeNodes(nodes, undefined),
-    };
+let key = 0;
+function addKey(element) {
+    key += 1;
+    return cloneElement(element, { key });
+}
+function createJsxSerializer(options) {
+    const { defaultElement: defaultSerializeElement = ({ children }) => React.createElement("div", null, children), defaultLeaf: defaultSerializeLeaf = ({ children }) => React.createElement("span", null, children), elements: serializeElements = [], leafs: serializeLeafs = [], } = options;
+    const serializeElement = composeRenderElementsBase(defaultSerializeElement, serializeElements);
+    const serializeLeaf = composeRenderLeafsBase(defaultSerializeLeaf, serializeLeafs);
+    const leafStyle = {
+        whiteSpace: 'pre-wrap',
+    };
+    function serializeNode(node) {
+        const { parent } = node;
+        let result;
+        if (!isText(node)) {
+            result = serializeElement({
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                children: serializeNodes(node.children, node),
+                element: Object.assign(Object.assign({}, node), { parent }),
+            });
+        }
+        else if (node.text) {
+            result = serializeLeaf({
+                leaf: node,
+                children: (React.createElement("span", { style: leafStyle }, node.text
+                    .split('\n')
+                    .map(t => t || ' ')
+                    .join('\n'))),
+            });
+        }
+        else {
+            result = React.createElement("span", null, "\uFEFF");
+        }
+        return addKey(result);
+    }
+    function serializeNodes(nodes, parent) {
+        return React.createElement(React.Fragment, null, nodes.map(node => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
+    }
+    return {
+        serialize: (nodes) => serializeNodes(nodes, undefined),
+    };
 }
 
 export { createJsxSerializer };