@quadrats/react 0.6.7 → 0.7.1

package/heading/toolbar/useToggleHeadingTool.js

@@ -1,11 +1,11 @@
 import { useQuadrats } from '@quadrats/react';
 
-function useToggleHeadingTool(controller, level) {
-    const editor = useQuadrats();
-    return {
-        active: controller.isSelectionInHeading(editor, level),
-        onClick: () => controller.toggleHeadingNodes(editor, level),
-    };
+function useToggleHeadingTool(controller, level) {
+    const editor = useQuadrats();
+    return {
+        active: controller.isSelectionInHeading(editor, level),
+        onClick: () => controller.toggleHeadingNodes(editor, level),
+    };
 }
 
 export { useToggleHeadingTool };

package/heading/typings.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
-export declare type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
+export type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
 export interface ReactHeadingCreateHandlersOptions {
     /**
      * The hotkey to toggle heading w/ specific level.

package/highlight/constants.js

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

package/highlight/createReactHighlight.d.ts

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

package/highlight/createReactHighlight.js

@@ -3,9 +3,9 @@ import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
 import { defaultRenderHighlight } from './defaultRenderHighlight.js';
 import { HIGHLIGHT_HOTKEY } from './constants.js';
 
-const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
-    hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight,
+const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
+    hotkey: HIGHLIGHT_HOTKEY,
+    render: defaultRenderHighlight(variant),
 })();
 
 export { createReactHighlight };

package/highlight/defaultRenderHighlight.d.ts

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

package/highlight/defaultRenderHighlight.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
 
-const defaultRenderHighlight = ({ children, leaf }) => (React.createElement("mark", { className: leaf.highlightVariant
+const defaultRenderHighlight = (variant) => ({ children, leaf }) => (React.createElement("mark", { "data-type": variant !== null && variant !== void 0 ? variant : undefined, className: leaf.highlightVariant
         ? `${HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${HIGHLIGHT_TYPE}` }, children));
 
 export { defaultRenderHighlight };

package/highlight/index.cjs.js

@@ -1,28 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var highlight = require('@quadrats/common/highlight');
 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 highlight.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
+/**
+ * Default hotkey for toggling highlight.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
 const HIGHLIGHT_HOTKEY = 'mod+h';
 
-const defaultRenderHighlight = ({ children, leaf }) => (React__default.createElement("mark", { className: leaf.highlightVariant
+const defaultRenderHighlight = (variant) => ({ children, leaf }) => (React.createElement("mark", { "data-type": variant !== null && variant !== void 0 ? variant : undefined, className: leaf.highlightVariant
         ? `${highlight.HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${highlight.HIGHLIGHT_TYPE}` }, children));
 
-const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
-    hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight,
+const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
+    hotkey: HIGHLIGHT_HOTKEY,
+    render: defaultRenderHighlight(variant),
 })();
 
 exports.HIGHLIGHT_HOTKEY = HIGHLIGHT_HOTKEY;

package/highlight/jsx-serializer/createJsxSerializeHighlight.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const createJsxSerializeHighlight: (options?: Partial<import("@quadrats/react/toggle-mark/jsx-serializer").CreateJsxSerializeToggleMarkCreatorOptions> | undefined) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;
+export declare const createJsxSerializeHighlight: (variant?: string) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;

package/highlight/jsx-serializer/createJsxSerializeHighlight.js

@@ -2,9 +2,9 @@ import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
 import { defaultRenderHighlight } from '@quadrats/react/highlight';
 
-const createJsxSerializeHighlight = createJsxSerializeToggleMarkCreator({
-    type: HIGHLIGHT_TYPE,
-    render: defaultRenderHighlight,
-});
+const createJsxSerializeHighlight = (variant) => createJsxSerializeToggleMarkCreator({
+    type: HIGHLIGHT_TYPE,
+    render: defaultRenderHighlight(variant),
+})();
 
 export { createJsxSerializeHighlight };

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

@@ -1,15 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var highlight = require('@quadrats/react/highlight');
 var highlight$1 = require('@quadrats/common/highlight');
 var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
-const createJsxSerializeHighlight = jsxSerializer.createJsxSerializeToggleMarkCreator({
-    type: highlight$1.HIGHLIGHT_TYPE,
-    render: highlight.defaultRenderHighlight,
-});
+const createJsxSerializeHighlight = (variant) => jsxSerializer.createJsxSerializeToggleMarkCreator({
+    type: highlight$1.HIGHLIGHT_TYPE,
+    render: highlight.defaultRenderHighlight(variant),
+})();
 
 exports.defaultRenderHighlight = highlight.defaultRenderHighlight;
 exports.createJsxSerializeHighlight = createJsxSerializeHighlight;

package/image/components/Image.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderImageElementProps } from '../typings';
-declare function Image(props: RenderImageElementProps): JSX.Element;
+declare function Image(props: RenderImageElementProps): React.JSX.Element;
 export default Image;

package/image/components/Image.js

@@ -3,17 +3,17 @@ import { Transforms } from '@quadrats/core';
 import { useSlateStatic, ReactEditor } from '@quadrats/react';
 import { useImageResizer } from '../hooks/useImageResizer.js';
 
-function Image(props) {
-    const { attributes, children, element, resizeImage, src, } = props;
-    const editor = useSlateStatic();
-    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
-        React.createElement("div", { className: "qdr-image__spacer" }, children),
-        React.createElement("div", { contentEditable: false },
-            focusedAndSelected && (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "qdr-image__boundary" }),
-                React.createElement("span", { "aria-label": "resize image", className: "qdr-image__resizer", onMouseDown: onResizeStart, onTouchStart: onResizeStart, role: "button", tabIndex: -1 }))),
-            React.createElement("img", { ref: imageRef, src: src, alt: src }))));
+function Image(props) {
+    const { attributes, children, element, resizeImage, src, } = props;
+    const editor = useSlateStatic();
+    const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
+        React.createElement("div", { className: "qdr-image__spacer" }, children),
+        React.createElement("div", { contentEditable: false },
+            focusedAndSelected && (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "qdr-image__boundary" }),
+                React.createElement("span", { "aria-label": "resize image", className: "qdr-image__resizer", onMouseDown: onResizeStart, onTouchStart: onResizeStart, role: "button", tabIndex: -1 }))),
+            React.createElement("img", { ref: imageRef, src: src, alt: src }))));
 }
 
 export { Image as default };

package/image/components/ImageCaption.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderImageCaptionElementProps } from '../typings';
-declare function ImageCaption(props: RenderImageCaptionElementProps): JSX.Element;
+declare function ImageCaption(props: RenderImageCaptionElementProps): React.JSX.Element;
 export default ImageCaption;

package/image/components/ImageCaption.js

@@ -3,19 +3,19 @@ import clsx from 'clsx';
 import { Editor } from '@quadrats/core';
 import { useSlateStatic, ReactEditor, useLocale } from '@quadrats/react';
 
-function ImageCaption(props) {
-    const { attributes, children, element } = props;
-    const editor = useSlateStatic();
-    const path = ReactEditor.findPath(editor, element);
-    const text = Editor.string(editor, path);
-    const isEmpty = !text;
-    const locale = useLocale();
-    const placeholder = locale.editor.image.captionInputPlaceholder;
-    return (React.createElement("figcaption", Object.assign({}, attributes, { className: clsx('qdr-image__caption', {
-            'qdr-image__caption--empty': isEmpty,
-        }) }),
-        isEmpty && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
-        children));
+function ImageCaption(props) {
+    const { attributes, children, element } = props;
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const locale = useLocale();
+    const placeholder = locale.editor.image.captionInputPlaceholder;
+    return (React.createElement("figcaption", Object.assign({}, attributes, { className: clsx('qdr-image__caption', {
+            'qdr-image__caption--empty': isEmpty,
+        }) }),
+        isEmpty && (React.createElement("span", { className: "qdr-image__caption-placeholder", contentEditable: false }, placeholder)),
+        children));
 }
 
 export { ImageCaption as default };

package/image/components/ImageFigure.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderImageFigureElementProps } from '../typings';
-declare function ImageFigure(props: RenderImageFigureElementProps): JSX.Element;
+declare function ImageFigure(props: RenderImageFigureElementProps): React.JSX.Element;
 export default ImageFigure;

package/image/components/ImageFigure.js

@@ -2,14 +2,14 @@ import React from 'react';
 import clsx from 'clsx';
 import { useFocused, useSelected } from '@quadrats/react';
 
-function ImageFigure(props) {
-    const { attributes, children, style } = props;
-    const focused = useFocused();
-    const selected = useSelected();
-    const blurred = !focused || !selected;
-    return (React.createElement("figure", Object.assign({}, attributes, { className: clsx('qdr-image__figure', {
-            'qdr-image__figure--blurred': blurred,
-        }), style: style }), children));
+function ImageFigure(props) {
+    const { attributes, children, style } = props;
+    const focused = useFocused();
+    const selected = useSelected();
+    const blurred = !focused || !selected;
+    return (React.createElement("figure", Object.assign({}, attributes, { className: clsx('qdr-image__figure', {
+            'qdr-image__figure--blurred': blurred,
+        }), style: style }), children));
 }
 
 export { ImageFigure as default };

package/image/createReactImage.d.ts

@@ -1,4 +1,4 @@
 import { CreateImageOptions } from '@quadrats/common/image';
 import { ReactImage } from './typings';
-export declare type CreateReactImageOptions<Hosting extends string> = CreateImageOptions<Hosting>;
+export type CreateReactImageOptions<Hosting extends string> = CreateImageOptions<Hosting>;
 export declare function createReactImage<Hosting extends string>(options?: CreateReactImageOptions<Hosting>): ReactImage<Hosting>;

package/image/createReactImage.js

@@ -6,100 +6,100 @@ import { createImage, getImageFigureElementCommonProps, getImageElementCommonPro
 import { createRenderElements } from '@quadrats/react';
 import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 
-function createReactImage(options = {}) {
-    const core = createImage(options);
-    const { types } = core;
-    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
-            onKeyDown(event, editor, next) {
-                if ((event.key === 'Backspace' || event.key === 'Delete') && core.isCollapsedOnImage(editor)) {
-                    const [, figurePath] = core.getAboveImageFigure(editor) || [];
-                    if (figurePath) {
-                        Transforms.removeNodes(editor, { at: figurePath });
-                        return;
-                    }
-                }
-                const [, captionPath] = core.getAboveImageCaption(editor) || [];
-                if (captionPath) {
-                    /**
-                     * Override original behavior of select all.
-                     * Only select the text in image caption if current selection is in image caption.
-                     */
-                    if (isHotkey('mod+a', event)) {
-                        event.preventDefault();
-                        Transforms.select(editor, captionPath);
-                        return;
-                    }
-                }
-                next();
-            },
-        }), createRenderElement: (options = {}) => {
-            const renderFigure = options.figure || defaultRenderImageElements.figure;
-            const renderImage = options.image || defaultRenderImageElements.image;
-            const renderCaption = options.caption || defaultRenderImageElements.caption;
-            return createRenderElements([
-                {
-                    type: types.figure,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderFigure(Object.assign(Object.assign({}, getImageFigureElementCommonProps(element)), { attributes,
-                            element,
-                            children }));
-                    },
-                },
-                {
-                    type: types.image,
-                    render: (props) => {
-                        const { attributes, children, element } = props;
-                        return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, core.hostingResolvers)), { attributes,
-                            element,
-                            children, resizeImage: core.resizeImage }));
-                    },
-                },
-                {
-                    type: types.caption,
-                    render: renderCaption,
-                },
-            ]);
-        }, with(editor) {
-            const { insertData } = editor;
-            editor.insertData = (data) => {
-                const text = data.getData('text');
-                const { files } = data;
-                /**
-                 * Insert image if inserted text is image url.
-                 */
-                if (text) {
-                    if (core.isImageUrl(text)) {
-                        core.insertImage(editor, text);
-                        return;
-                    }
-                }
-                /**
-                 * Insert each image which is image.
-                 */
-                if (files.length) {
-                    [...files]
-                        .filter((file) => {
-                        const [mime] = file.type.split('/');
-                        return mime === 'image';
-                    })
-                        .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
-                        yield prev;
-                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
-                    }), Promise.resolve());
-                    return;
-                }
-                const inCaption = core.isSelectionInImageCaption(editor);
-                if (inCaption) {
-                    const inlineData = new DataTransfer();
-                    inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
-                    insertData(inlineData);
-                    return;
-                }
-                insertData(data);
-            };
-            return core.with(editor);
-        } });
+function createReactImage(options = {}) {
+    const core = createImage(options);
+    const { types } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if ((event.key === 'Backspace' || event.key === 'Delete') && core.isCollapsedOnImage(editor)) {
+                    const [, figurePath] = core.getAboveImageFigure(editor) || [];
+                    if (figurePath) {
+                        Transforms.removeNodes(editor, { at: figurePath });
+                        return;
+                    }
+                }
+                const [, captionPath] = core.getAboveImageCaption(editor) || [];
+                if (captionPath) {
+                    /**
+                     * Override original behavior of select all.
+                     * Only select the text in image caption if current selection is in image caption.
+                     */
+                    if (isHotkey('mod+a', event)) {
+                        event.preventDefault();
+                        Transforms.select(editor, captionPath);
+                        return;
+                    }
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderFigure = options.figure || defaultRenderImageElements.figure;
+            const renderImage = options.image || defaultRenderImageElements.image;
+            const renderCaption = options.caption || defaultRenderImageElements.caption;
+            return createRenderElements([
+                {
+                    type: types.figure,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderFigure(Object.assign(Object.assign({}, getImageFigureElementCommonProps(element)), { attributes,
+                            element,
+                            children }));
+                    },
+                },
+                {
+                    type: types.image,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, core.hostingResolvers)), { attributes,
+                            element,
+                            children, resizeImage: core.resizeImage }));
+                    },
+                },
+                {
+                    type: types.caption,
+                    render: renderCaption,
+                },
+            ]);
+        }, with(editor) {
+            const { insertData } = editor;
+            editor.insertData = (data) => {
+                const text = data.getData('text');
+                const { files } = data;
+                /**
+                 * Insert image if inserted text is image url.
+                 */
+                if (text) {
+                    if (core.isImageUrl(text)) {
+                        core.insertImage(editor, text);
+                        return;
+                    }
+                }
+                /**
+                 * Insert each image which is image.
+                 */
+                if (files.length) {
+                    [...files]
+                        .filter((file) => {
+                        const [mime] = file.type.split('/');
+                        return mime === 'image';
+                    })
+                        .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
+                        yield prev;
+                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
+                    }), Promise.resolve());
+                    return;
+                }
+                const inCaption = core.isSelectionInImageCaption(editor);
+                if (inCaption) {
+                    const inlineData = new DataTransfer();
+                    inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
+                    insertData(inlineData);
+                    return;
+                }
+                insertData(data);
+            };
+            return core.with(editor);
+        } });
 }
 
 export { createReactImage };

package/image/defaultRenderImageElements.js

@@ -3,10 +3,10 @@ import ImageFigure from './components/ImageFigure.js';
 import Image from './components/Image.js';
 import ImageCaption from './components/ImageCaption.js';
 
-const defaultRenderImageElements = {
-    figure: props => React.createElement(ImageFigure, Object.assign({}, props)),
-    image: props => React.createElement(Image, Object.assign({}, props)),
-    caption: props => React.createElement(ImageCaption, Object.assign({}, props)),
+const defaultRenderImageElements = {
+    figure: props => React.createElement(ImageFigure, Object.assign({}, props)),
+    image: props => React.createElement(Image, Object.assign({}, props)),
+    caption: props => React.createElement(ImageCaption, Object.assign({}, props)),
 };
 
 export { defaultRenderImageElements };