@quadrats/react 0.4.0 → 0.4.3

package/blockquote/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default hotkey for toggling blockquote.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export declare const BLOCKQUOTE_HOTKEY = "ctrl+opt+q";

package/blockquote/constants.js

@@ -0,0 +1,8 @@
+/**
+ * Default hotkey for toggling blockquote.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const BLOCKQUOTE_HOTKEY = 'ctrl+opt+q';
+
+export { BLOCKQUOTE_HOTKEY };

package/blockquote/createReactBlockquote.d.ts

@@ -0,0 +1,4 @@
+import { CreateBlockquoteOptions } from '@quadrats/common/blockquote';
+import { ReactBlockquote } from './typings';
+export declare type CreateReactBlockquoteOptions = CreateBlockquoteOptions;
+export declare function createReactBlockquote(options?: CreateReactBlockquoteOptions): ReactBlockquote;

package/blockquote/createReactBlockquote.js

@@ -0,0 +1,35 @@
+import isHotkey from 'is-hotkey';
+import { createBlockquote } from '@quadrats/common/blockquote';
+import { createRenderElement } from '@quadrats/react';
+import { createOnKeyDownBreak } from '@quadrats/react/line-break';
+import { BLOCKQUOTE_HOTKEY } from './constants.js';
+import { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement.js';
+
+function createReactBlockquote(options = {}) {
+    const core = createBlockquote(options);
+    const { type } = core;
+    const onKeyDownBreak = createOnKeyDownBreak({
+        softBreak: {
+            rules: [
+                {
+                    hotkey: 'enter',
+                    match: {
+                        includeTypes: [type],
+                    },
+                },
+            ],
+        },
+    });
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = BLOCKQUOTE_HOTKEY } = {}) => ({
+            onKeyDown: (event, editor, next) => {
+                if (isHotkey(hotkey, event)) {
+                    core.toggleBlockquote(editor);
+                }
+                else {
+                    onKeyDownBreak(event, editor, next);
+                }
+            },
+        }), createRenderElement: ({ render = defaultRenderBlockquoteElement } = {}) => createRenderElement({ type, render }) });
+}
+
+export { createReactBlockquote };

package/blockquote/defaultRenderBlockquoteElement.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RenderElementProps } from '@quadrats/react';
+export declare const defaultRenderBlockquoteElement: ({ attributes, children, }: {
+    attributes?: {
+        'data-slate-node': "element";
+        'data-slate-inline'?: true | undefined;
+        'data-slate-void'?: true | undefined;
+        dir?: "rtl" | undefined;
+        ref: any;
+    } | undefined;
+    children: RenderElementProps['children'];
+}) => JSX.Element;

package/blockquote/defaultRenderBlockquoteElement.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const defaultRenderBlockquoteElement = ({ attributes, children, }) => React.createElement("blockquote", Object.assign({}, attributes), children);
+
+export { defaultRenderBlockquoteElement };

package/blockquote/index.cjs.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var isHotkey = require('is-hotkey');
+var blockquote = require('@quadrats/common/blockquote');
+var react = require('@quadrats/react');
+var lineBreak = require('@quadrats/react/line-break');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
+
+/**
+ * Default hotkey for toggling blockquote.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const BLOCKQUOTE_HOTKEY = 'ctrl+opt+q';
+
+const defaultRenderBlockquoteElement = ({ attributes, children, }) => React__default.createElement("blockquote", Object.assign({}, attributes), children);
+
+function createReactBlockquote(options = {}) {
+    const core = blockquote.createBlockquote(options);
+    const { type } = core;
+    const onKeyDownBreak = lineBreak.createOnKeyDownBreak({
+        softBreak: {
+            rules: [
+                {
+                    hotkey: 'enter',
+                    match: {
+                        includeTypes: [type],
+                    },
+                },
+            ],
+        },
+    });
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = BLOCKQUOTE_HOTKEY } = {}) => ({
+            onKeyDown: (event, editor, next) => {
+                if (isHotkey__default(hotkey, event)) {
+                    core.toggleBlockquote(editor);
+                }
+                else {
+                    onKeyDownBreak(event, editor, next);
+                }
+            },
+        }), createRenderElement: ({ render = defaultRenderBlockquoteElement } = {}) => react.createRenderElement({ type, render }) });
+}
+
+exports.BLOCKQUOTE_HOTKEY = BLOCKQUOTE_HOTKEY;
+exports.createReactBlockquote = createReactBlockquote;
+exports.defaultRenderBlockquoteElement = defaultRenderBlockquoteElement;

package/blockquote/index.d.ts

@@ -0,0 +1,4 @@
+export * from './typings';
+export { BLOCKQUOTE_HOTKEY } from './constants';
+export { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement';
+export { CreateReactBlockquoteOptions, createReactBlockquote } from './createReactBlockquote';

package/blockquote/index.js

@@ -0,0 +1,3 @@
+export { BLOCKQUOTE_HOTKEY } from './constants.js';
+export { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement.js';
+export { createReactBlockquote } from './createReactBlockquote.js';

package/blockquote/jsx-serializer/createJsxSerializeBlockquote.d.ts

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

package/blockquote/jsx-serializer/createJsxSerializeBlockquote.js

@@ -0,0 +1,10 @@
+import { BLOCKQUOTE_TYPE } from '@quadrats/common/blockquote';
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderBlockquoteElement } from '@quadrats/react/blockquote';
+
+function createJsxSerializeBlockquote(options = {}) {
+    const { type = BLOCKQUOTE_TYPE, render = defaultRenderBlockquoteElement } = options;
+    return createJsxSerializeElement({ type, render });
+}
+
+export { createJsxSerializeBlockquote };

package/blockquote/jsx-serializer/defaultRenderBlockquoteElement.d.ts

@@ -0,0 +1 @@
+export { defaultRenderBlockquoteElement } from '@quadrats/react/blockquote';

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blockquote = require('@quadrats/react/blockquote');
+var blockquote$1 = require('@quadrats/common/blockquote');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+function createJsxSerializeBlockquote(options = {}) {
+    const { type = blockquote$1.BLOCKQUOTE_TYPE, render = blockquote.defaultRenderBlockquoteElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.defaultRenderBlockquoteElement = blockquote.defaultRenderBlockquoteElement;
+exports.createJsxSerializeBlockquote = createJsxSerializeBlockquote;

package/blockquote/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement';
+export * from './typings';
+export { CreateJsxSerializeBlockquoteOptions, createJsxSerializeBlockquote } from './createJsxSerializeBlockquote';

package/blockquote/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderBlockquoteElement } from '@quadrats/react/blockquote';
+export { createJsxSerializeBlockquote } from './createJsxSerializeBlockquote.js';

package/blockquote/jsx-serializer/package.json

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

package/blockquote/jsx-serializer/typings.d.ts

@@ -0,0 +1,3 @@
+import { BlockquoteElement } from '@quadrats/common/blockquote';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare type JsxSerializeBlockquoteElementProps = JsxSerializeElementProps<BlockquoteElement>;

package/blockquote/package.json

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

package/blockquote/toolbar/BlockquoteToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactBlockquote } from '@quadrats/react/blockquote';
+export interface BlockquoteToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactBlockquote;
+}
+declare function BlockquoteToolbarIcon(props: BlockquoteToolbarIconProps): JSX.Element;
+export default BlockquoteToolbarIcon;

package/blockquote/toolbar/BlockquoteToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useBlockquoteTool } from './useBlockquoteTool.js';
+
+function BlockquoteToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { active, onClick } = useBlockquoteTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { BlockquoteToolbarIcon as default };

package/blockquote/toolbar/index.cjs.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function useBlockquoteTool(controller) {
+    const editor = react.useQuadrats();
+    return {
+        active: controller.isSelectionInBlockquote(editor),
+        onClick: () => controller.toggleBlockquote(editor),
+    };
+}
+
+function BlockquoteToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { active, onClick } = useBlockquoteTool(controller);
+    return React__default.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.BlockquoteToolbarIcon = BlockquoteToolbarIcon;
+exports.useBlockquoteTool = useBlockquoteTool;

package/blockquote/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { useBlockquoteTool } from './useBlockquoteTool';
+export { BlockquoteToolbarIconProps, default as BlockquoteToolbarIcon } from './BlockquoteToolbarIcon';

package/blockquote/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useBlockquoteTool } from './useBlockquoteTool.js';
+export { default as BlockquoteToolbarIcon } from './BlockquoteToolbarIcon.js';

package/blockquote/toolbar/package.json

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

package/blockquote/toolbar/useBlockquoteTool.d.ts

@@ -0,0 +1,5 @@
+import { ReactBlockquote } from '@quadrats/react/blockquote';
+export declare function useBlockquoteTool(controller: ReactBlockquote): {
+    active: boolean;
+    onClick: () => void;
+};

package/blockquote/toolbar/useBlockquoteTool.js

@@ -0,0 +1,11 @@
+import { useQuadrats } from '@quadrats/react';
+
+function useBlockquoteTool(controller) {
+    const editor = useQuadrats();
+    return {
+        active: controller.isSelectionInBlockquote(editor),
+        onClick: () => controller.toggleBlockquote(editor),
+    };
+}
+
+export { useBlockquoteTool };

package/blockquote/typings.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BlockquoteElement, Blockquote } from '@quadrats/common/blockquote';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
+export declare type RenderBlockquoteElementProps = RenderElementProps<BlockquoteElement>;
+export interface ReactBlockquoteCreateHandlersOptions {
+    /**
+     * The hotkey to toggle blockquote.
+     */
+    hotkey?: string;
+}
+export interface ReactBlockquoteCreateRenderElementOptions {
+    render?: (props: RenderBlockquoteElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactBlockquote extends Blockquote, WithCreateHandlers<[ReactBlockquoteCreateHandlersOptions?]>, WithCreateRenderElement<[ReactBlockquoteCreateRenderElementOptions?]> {
+}

package/footnote/toolbar/FootnoteToolbarIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactFootnote } from '@quadrats/react/footnote';
+import { UseFootnoteToolOptions } from './useFootnoteTool';
+export interface FootnoteToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactFootnote;
+    options?: UseFootnoteToolOptions;
+}
+declare function FootnoteToolbarIcon(props: FootnoteToolbarIconProps): JSX.Element;
+export default FootnoteToolbarIcon;

package/footnote/toolbar/FootnoteToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useFootnoteTool } from './useFootnoteTool.js';
+
+function FootnoteToolbarIcon(props) {
+    const { controller, options = {} } = props, rest = __rest(props, ["controller", "options"]);
+    const { active, onClick } = useFootnoteTool(controller, options);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { FootnoteToolbarIcon as default };

package/footnote/toolbar/index.cjs.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@quadrats/react');
+var toolbar = require('@quadrats/react/toolbar');
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function useFootnoteTool(controller, options = {}) {
+    const editor = react.useQuadrats();
+    const startToolInput = toolbar.useStartToolInput();
+    return {
+        active: controller.isSelectionInFootnote(editor),
+        onClick: () => startToolInput({
+            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            confirm: (footnoteText) => {
+                controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
+            },
+            defaultValue: controller.getFootnoteText(editor),
+        }),
+    };
+}
+
+function FootnoteToolbarIcon(props) {
+    const { controller, options = {} } = props, rest = tslib.__rest(props, ["controller", "options"]);
+    const { active, onClick } = useFootnoteTool(controller, options);
+    return React__default.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.FootnoteToolbarIcon = FootnoteToolbarIcon;
+exports.useFootnoteTool = useFootnoteTool;

package/footnote/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFootnoteTool';
+export { FootnoteToolbarIconProps, default as FootnoteToolbarIcon } from './FootnoteToolbarIcon';

package/footnote/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useFootnoteTool } from './useFootnoteTool.js';
+export { default as FootnoteToolbarIcon } from './FootnoteToolbarIcon.js';

package/footnote/toolbar/package.json

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

package/footnote/toolbar/useFootnoteTool.d.ts

@@ -0,0 +1,7 @@
+import { FootnoteUpsertFootnoteOptions } from '@quadrats/common/footnote';
+import { ReactFootnote } from '@quadrats/react/footnote';
+export declare type UseFootnoteToolOptions = FootnoteUpsertFootnoteOptions;
+export declare function useFootnoteTool(controller: ReactFootnote, options?: UseFootnoteToolOptions): {
+    active: boolean;
+    onClick: () => void;
+};

package/footnote/toolbar/useFootnoteTool.js

@@ -0,0 +1,19 @@
+import { useQuadrats } from '@quadrats/react';
+import { useStartToolInput } from '@quadrats/react/toolbar';
+
+function useFootnoteTool(controller, options = {}) {
+    const editor = useQuadrats();
+    const startToolInput = useStartToolInput();
+    return {
+        active: controller.isSelectionInFootnote(editor),
+        onClick: () => startToolInput({
+            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            confirm: (footnoteText) => {
+                controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
+            },
+            defaultValue: controller.getFootnoteText(editor),
+        }),
+    };
+}
+
+export { useFootnoteTool };

package/heading/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Default hotkey for toggling heading.
+ *
+ * @remarks
+ * If the hotkey is `ctrl+opt`, the level 1 hotkey will be `ctrl+opt+1`, and so on.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export declare const HEADING_HOTKEY = "ctrl+opt";

package/heading/constants.js

@@ -0,0 +1,11 @@
+/**
+ * Default hotkey for toggling heading.
+ *
+ * @remarks
+ * If the hotkey is `ctrl+opt`, the level 1 hotkey will be `ctrl+opt+1`, and so on.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const HEADING_HOTKEY = 'ctrl+opt';
+
+export { HEADING_HOTKEY };

package/heading/createReactHeading.d.ts

@@ -0,0 +1,4 @@
+import { CreateHeadingOptions, HeadingLevel } from '@quadrats/common/heading';
+import { ReactHeading } from './typings';
+export declare type CreateReactHeadingOptions<L extends HeadingLevel> = CreateHeadingOptions<L>;
+export declare function createReactHeading<L extends HeadingLevel = HeadingLevel>(options?: CreateReactHeadingOptions<L>): ReactHeading<L>;

package/heading/createReactHeading.js

@@ -0,0 +1,47 @@
+import isHotkey from 'is-hotkey';
+import { createHeading } from '@quadrats/common/heading';
+import { createRenderElement } from '@quadrats/react';
+import { createOnKeyDownBreak } from '@quadrats/react/line-break';
+import { HEADING_HOTKEY } from './constants.js';
+import { defaultRenderHeadingElement } from './defaultRenderHeadingElement.js';
+
+function createReactHeading(options = {}) {
+    const core = createHeading(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = HEADING_HOTKEY } = {}) => {
+            const onKeyDownBreak = createOnKeyDownBreak({
+                exitBreak: {
+                    rules: [
+                        {
+                            hotkey: 'enter',
+                            match: {
+                                onlyAtEdge: true,
+                                includeTypes: [type],
+                            },
+                        },
+                    ],
+                },
+            });
+            return {
+                onKeyDown(event, editor, next) {
+                    /**
+                     * Only toggle if the hotkey is fired and the key is the same as level.
+                     */
+                    const keyAsNumber = +event.key;
+                    if (!Number.isNaN(keyAsNumber) && isHotkey(hotkey, event)) {
+                        try {
+                            core.toggleHeadingNodes(editor, keyAsNumber);
+                            event.preventDefault();
+                            // eslint-disable-next-line no-empty
+                        }
+                        catch (_a) { }
+                    }
+                    else {
+                        onKeyDownBreak(event, editor, next);
+                    }
+                },
+            };
+        }, createRenderElement: ({ render = defaultRenderHeadingElement } = {}) => createRenderElement({ type, render }) });
+}
+
+export { createReactHeading };

package/heading/defaultRenderHeadingElement.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { HeadingElement } from '@quadrats/common/heading';
+import { RenderElementProps } from '@quadrats/react';
+export declare const HEADING_COMPONENTS: {
+    readonly 1: "h1";
+    readonly 2: "h2";
+    readonly 3: "h3";
+    readonly 4: "h4";
+    readonly 5: "h5";
+    readonly 6: "h6";
+};
+export declare const defaultRenderHeadingElement: ({ attributes, children, element, }: {
+    attributes?: {
+        'data-slate-node': "element";
+        'data-slate-inline'?: true | undefined;
+        'data-slate-void'?: true | undefined;
+        dir?: "rtl" | undefined;
+        ref: any;
+    } | undefined;
+    children: RenderElementProps['children'];
+    element: HeadingElement;
+}) => JSX.Element | null;

package/heading/defaultRenderHeadingElement.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const HEADING_COMPONENTS = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+    5: 'h5',
+    6: 'h6',
+};
+const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
+    const Component = HEADING_COMPONENTS[element.level];
+    if (!Component) {
+        return null;
+    }
+    return React.createElement(Component, Object.assign({}, attributes), children);
+};
+
+export { HEADING_COMPONENTS, defaultRenderHeadingElement };

package/heading/index.cjs.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var isHotkey = require('is-hotkey');
+var heading = require('@quadrats/common/heading');
+var react = require('@quadrats/react');
+var lineBreak = require('@quadrats/react/line-break');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
+
+/**
+ * Default hotkey for toggling heading.
+ *
+ * @remarks
+ * If the hotkey is `ctrl+opt`, the level 1 hotkey will be `ctrl+opt+1`, and so on.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const HEADING_HOTKEY = 'ctrl+opt';
+
+const HEADING_COMPONENTS = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+    5: 'h5',
+    6: 'h6',
+};
+const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
+    const Component = HEADING_COMPONENTS[element.level];
+    if (!Component) {
+        return null;
+    }
+    return React__default.createElement(Component, Object.assign({}, attributes), children);
+};
+
+function createReactHeading(options = {}) {
+    const core = heading.createHeading(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = HEADING_HOTKEY } = {}) => {
+            const onKeyDownBreak = lineBreak.createOnKeyDownBreak({
+                exitBreak: {
+                    rules: [
+                        {
+                            hotkey: 'enter',
+                            match: {
+                                onlyAtEdge: true,
+                                includeTypes: [type],
+                            },
+                        },
+                    ],
+                },
+            });
+            return {
+                onKeyDown(event, editor, next) {
+                    /**
+                     * Only toggle if the hotkey is fired and the key is the same as level.
+                     */
+                    const keyAsNumber = +event.key;
+                    if (!Number.isNaN(keyAsNumber) && isHotkey__default(hotkey, event)) {
+                        try {
+                            core.toggleHeadingNodes(editor, keyAsNumber);
+                            event.preventDefault();
+                            // eslint-disable-next-line no-empty
+                        }
+                        catch (_a) { }
+                    }
+                    else {
+                        onKeyDownBreak(event, editor, next);
+                    }
+                },
+            };
+        }, createRenderElement: ({ render = defaultRenderHeadingElement } = {}) => react.createRenderElement({ type, render }) });
+}
+
+exports.HEADING_HOTKEY = HEADING_HOTKEY;
+exports.createReactHeading = createReactHeading;
+exports.defaultRenderHeadingElement = defaultRenderHeadingElement;

package/heading/index.d.ts

@@ -0,0 +1,4 @@
+export * from './typings';
+export { HEADING_HOTKEY } from './constants';
+export { defaultRenderHeadingElement } from './defaultRenderHeadingElement';
+export { CreateReactHeadingOptions, createReactHeading } from './createReactHeading';

package/heading/index.js

@@ -0,0 +1,3 @@
+export { HEADING_HOTKEY } from './constants.js';
+export { defaultRenderHeadingElement } from './defaultRenderHeadingElement.js';
+export { createReactHeading } from './createReactHeading.js';

package/heading/jsx-serializer/createJsxSerializeHeading.d.ts

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

package/heading/jsx-serializer/createJsxSerializeHeading.js

@@ -0,0 +1,10 @@
+import { HEADING_TYPE } from '@quadrats/common/heading';
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderHeadingElement } from '@quadrats/react/heading';
+
+function createJsxSerializeHeading(options = {}) {
+    const { type = HEADING_TYPE, render = defaultRenderHeadingElement } = options;
+    return createJsxSerializeElement({ type, render });
+}
+
+export { createJsxSerializeHeading };

package/heading/jsx-serializer/defaultRenderHeadingElement.d.ts

@@ -0,0 +1 @@
+export { defaultRenderHeadingElement } from '@quadrats/react/heading';

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var heading = require('@quadrats/react/heading');
+var heading$1 = require('@quadrats/common/heading');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+
+function createJsxSerializeHeading(options = {}) {
+    const { type = heading$1.HEADING_TYPE, render = heading.defaultRenderHeadingElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.defaultRenderHeadingElement = heading.defaultRenderHeadingElement;
+exports.createJsxSerializeHeading = createJsxSerializeHeading;

package/heading/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderHeadingElement } from './defaultRenderHeadingElement';
+export { CreateJsxSerializeHeadingOptions, createJsxSerializeHeading } from './createJsxSerializeHeading';

package/heading/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderHeadingElement } from '@quadrats/react/heading';
+export { createJsxSerializeHeading } from './createJsxSerializeHeading.js';

package/heading/jsx-serializer/package.json

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

package/heading/jsx-serializer/typings.d.ts

@@ -0,0 +1,3 @@
+import { HeadingElement } from '@quadrats/common/heading';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare type JsxSerializeHeadingElementProps = JsxSerializeElementProps<HeadingElement>;

package/heading/package.json

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

package/heading/toolbar/HeadingToolbarIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { HeadingLevel } from '@quadrats/common/heading';
+import { ReactHeading } from '@quadrats/react/heading';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+export interface HeadingToolbarIconProps<Level extends HeadingLevel, ValidLevel extends Level> extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactHeading<Level>;
+    level: ValidLevel;
+}
+declare function HeadingToolbarIcon<Level extends HeadingLevel, ValidLevel extends Level>(props: HeadingToolbarIconProps<Level, ValidLevel>): JSX.Element;
+export default HeadingToolbarIcon;

package/heading/toolbar/HeadingToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useToggleHeadingTool } from './useToggleHeadingTool.js';
+
+function HeadingToolbarIcon(props) {
+    const { controller, level } = props, rest = __rest(props, ["controller", "level"]);
+    const { active, onClick } = useToggleHeadingTool(controller, level);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { HeadingToolbarIcon as default };

package/heading/toolbar/index.cjs.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function useToggleHeadingTool(controller, level) {
+    const editor = react.useQuadrats();
+    return {
+        active: controller.isSelectionInHeading(editor, level),
+        onClick: () => controller.toggleHeadingNodes(editor, level),
+    };
+}
+
+function HeadingToolbarIcon(props) {
+    const { controller, level } = props, rest = tslib.__rest(props, ["controller", "level"]);
+    const { active, onClick } = useToggleHeadingTool(controller, level);
+    return React__default.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.HeadingToolbarIcon = HeadingToolbarIcon;
+exports.useToggleHeadingTool = useToggleHeadingTool;

package/heading/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToggleHeadingTool';
+export { HeadingToolbarIconProps, default as HeadingToolbarIcon } from './HeadingToolbarIcon';

package/heading/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useToggleHeadingTool } from './useToggleHeadingTool.js';
+export { default as HeadingToolbarIcon } from './HeadingToolbarIcon.js';

package/heading/toolbar/package.json

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

package/heading/toolbar/useToggleHeadingTool.d.ts

@@ -0,0 +1,6 @@
+import { HeadingLevel } from '@quadrats/common/heading';
+import { ReactHeading } from '@quadrats/react/heading';
+export declare function useToggleHeadingTool<Level extends HeadingLevel, ValidLevel extends Level>(controller: ReactHeading<Level>, level: ValidLevel): {
+    active: boolean;
+    onClick: () => void;
+};

package/heading/toolbar/useToggleHeadingTool.js

@@ -0,0 +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),
+    };
+}
+
+export { useToggleHeadingTool };

package/heading/typings.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
+export declare type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
+export interface ReactHeadingCreateHandlersOptions {
+    /**
+     * The hotkey to toggle heading w/ specific level.
+     */
+    hotkey?: string;
+}
+export interface ReactHeadingCreateRenderElementOptions {
+    render?: (props: RenderHeadingElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactHeading<Level extends HeadingLevel> extends Heading<Level>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
+}

package/package.json

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