@quadrats/react 0.1.0 → 0.4.5

package/embed/renderers/podcast-apple/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function PodcastApple({ attributes, children, data: src }) {
+    const containerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
+        attributes ? children : undefined));
+}
+
+const defaultRenderPodcastAppleEmbedElement = (props) => React__default.createElement(PodcastApple, Object.assign({}, props));
+
+exports.PodcastApple = PodcastApple;
+exports.defaultRenderPodcastAppleEmbedElement = defaultRenderPodcastAppleEmbedElement;

package/embed/renderers/podcast-apple/index.d.ts

@@ -0,0 +1,2 @@
+export { PodcastAppleProps, default as PodcastApple } from './components/PodcastApple';
+export { defaultRenderPodcastAppleEmbedElement } from './defaultRenderPodcastAppleEmbedElement';

package/embed/renderers/podcast-apple/index.js

@@ -0,0 +1,2 @@
+export { default as PodcastApple } from './components/PodcastApple.js';
+export { defaultRenderPodcastAppleEmbedElement } from './defaultRenderPodcastAppleEmbedElement.js';

package/embed/renderers/podcast-apple/package.json

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

package/embed/renderers/spotify/components/Spotify.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SpotifyEmbedElement } from '@quadrats/common/embed/strategies/spotify';
+import { RenderElementProps } from '@quadrats/react';
+export interface SpotifyProps {
+    attributes?: RenderElementProps['attributes'];
+    children?: any;
+    data: string;
+    element: SpotifyEmbedElement;
+}
+declare function Spotify({ attributes, children, data: src }: SpotifyProps): JSX.Element;
+export default Spotify;

package/embed/renderers/spotify/components/Spotify.js

@@ -0,0 +1,16 @@
+import React, { useRef, useMemo } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = useRef(null);
+    const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+export { Spotify as default };

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SpotifyProps } from './components/Spotify';
+export declare const defaultRenderSpotifyEmbedElement: (props: SpotifyProps) => JSX.Element;

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Spotify from './components/Spotify.js';
+
+const defaultRenderSpotifyEmbedElement = (props) => React.createElement(Spotify, Object.assign({}, props));
+
+export { defaultRenderSpotifyEmbedElement };

package/embed/renderers/spotify/index.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = React.useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+const defaultRenderSpotifyEmbedElement = (props) => React__default.createElement(Spotify, Object.assign({}, props));
+
+exports.Spotify = Spotify;
+exports.defaultRenderSpotifyEmbedElement = defaultRenderSpotifyEmbedElement;

package/embed/renderers/spotify/index.d.ts

@@ -0,0 +1,2 @@
+export { SpotifyProps, default as Spotify } from './components/Spotify';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement';

package/embed/renderers/spotify/index.js

@@ -0,0 +1,2 @@
+export { default as Spotify } from './components/Spotify.js';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement.js';

package/embed/renderers/spotify/package.json

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

package/embed/renderers/twitter/components/Twitter.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
-import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
 import { composeRefs } from '@quadrats/react/utils';
+import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
 
 function Twitter({ attributes, children, data: tweetId }) {
     const tweetContainerRef = useRef(null);
@@ -9,4 +9,4 @@ function Twitter({ attributes, children, data: tweetId }) {
     return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
 }
 
-export default Twitter;
+export { Twitter as default };

package/embed/renderers/twitter/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utils = require('@quadrats/react/utils');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/renderers/vimeo/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/renderers/youtube/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/embed/toolbar/EmbedToolbarIcon.js

@@ -1,7 +1,7 @@
-import { ToolbarIcon } from '@quadrats/react/toolbar';
-import { useEmbedTool } from './useEmbedTool.js';
 import { __rest } from 'tslib';
 import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useEmbedTool } from './useEmbedTool.js';
 
 function EmbedToolbarIcon(props) {
     const { controller, providers, getPlaceholder, startToolInput } = props, rest = __rest(props, ["controller", "providers", "getPlaceholder", "startToolInput"]);
@@ -9,4 +9,4 @@ function EmbedToolbarIcon(props) {
     return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
 }
 
-export default EmbedToolbarIcon;
+export { EmbedToolbarIcon as default };

package/embed/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ 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; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/file-uploader/components/FileUploader.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Progress } from '@quadrats/react/components';
+import { useFileUploader } from '../hooks/useFileUploader.js';
 
 function FileUploader(props) {
     const { attributes, children, element } = props;
@@ -11,4 +11,4 @@ function FileUploader(props) {
         children));
 }
 
-export default FileUploader;
+export { FileUploader as default };

package/file-uploader/createReactFileUploader.js

@@ -1,6 +1,6 @@
+import { createFileUploader } from '@quadrats/common/file-uploader';
 import { createRenderElement } from '@quadrats/react';
 import { defaultRenderFileUploaderElement } from './defaultRenderFileUploaderElement.js';
-import { createFileUploader } from '@quadrats/common/file-uploader';
 
 function createReactFileUploader(options = {}) {
     const core = createFileUploader(options);

package/file-uploader/index.cjs.js

@@ -7,7 +7,7 @@ var react = require('@quadrats/react');
 var components = require('@quadrats/react/components');
 var fileUploader = require('@quadrats/common/file-uploader');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/file-uploader/toolbar/FileUploaderToolbarIcon.js

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

package/file-uploader/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ 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; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/footnote/createReactFootnote.d.ts

@@ -0,0 +1,4 @@
+import { WithElementType } from '@quadrats/core';
+import { ReactFootnote } from './typings';
+export declare type CreateReactFootnoteOptions = Partial<WithElementType>;
+export declare function createReactFootnote(options?: CreateReactFootnoteOptions): ReactFootnote;

package/footnote/createReactFootnote.js

@@ -0,0 +1,13 @@
+import { createRenderElement } from '@quadrats/react';
+import { createFootnote } from '@quadrats/common/footnote';
+import { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+
+function createReactFootnote(options = {}) {
+    const core = createFootnote(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFootnoteElement } = {}) => createRenderElement({ type, render }), with(editor) {
+            return core.with(editor);
+        } });
+}
+
+export { createReactFootnote };

package/footnote/defaultRenderFootnoteElement.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RenderFootnoteElementProps } from './typings';
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+export declare const defaultRenderFootnoteElement: ({ attributes, children, element, placement, }: import("@quadrats/react/_internal").RenderElementPropsBase<import("@quadrats/common/footnote").FootnoteElement> & Pick<import("slate-react").RenderElementProps, "attributes"> & {
+    placement?: "top" | "bottom" | undefined;
+    target?: string | undefined;
+}) => JSX.Element;

package/footnote/defaultRenderFootnoteElement.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tooltip } from '@quadrats/react/components';
+
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+const defaultRenderFootnoteElement = ({ attributes, children, element, placement = 'bottom', }) => {
+    const { footnote, index } = element;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { placement: placement, popup: footnote },
+            React.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
+        React.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+};
+
+export { defaultRenderFootnoteElement };

package/footnote/index.cjs.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var components = require('@quadrats/react/components');
+var react = require('@quadrats/react');
+var footnote = require('@quadrats/common/footnote');
+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);
+
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+const defaultRenderFootnoteElement = ({ attributes, children, element, placement = 'bottom', }) => {
+    const { footnote, index } = element;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(components.Tooltip, { placement: placement, popup: footnote },
+            React__default.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
+        React__default.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+};
+
+function createReactFootnote(options = {}) {
+    const core = footnote.createFootnote(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFootnoteElement } = {}) => react.createRenderElement({ type, render }), with(editor) {
+            return core.with(editor);
+        } });
+}
+
+function useFootnotes(editor) {
+    const footnoteNodes = Array.from(core.getNodes(editor, {
+        at: [],
+        match: (node) => node.type === footnote.FOOTNOTE_TYPE,
+    }));
+    const footnotes = footnoteNodes.map((node) => {
+        var _a;
+        const nodeData = node === null || node === void 0 ? void 0 : node[0];
+        return {
+            wrapperText: (_a = (nodeData === null || nodeData === void 0 ? void 0 : nodeData.children)) === null || _a === void 0 ? void 0 : _a.map((childNode) => childNode.text).join(''),
+            footnote: nodeData === null || nodeData === void 0 ? void 0 : nodeData.footnote,
+            index: nodeData === null || nodeData === void 0 ? void 0 : nodeData.index,
+        };
+    });
+    return footnotes;
+}
+
+function deepSearchFootnoteFromNodes(nodes) {
+    const result = nodes.flatMap((element) => {
+        var _a;
+        const curNode = core.Node.isNode(element)
+            && element.type === footnote.FOOTNOTE_TYPE ? element : null;
+        const child = core.Node.isNodeList(element === null || element === void 0 ? void 0 : element.children) ? deepSearchFootnoteFromNodes(element === null || element === void 0 ? void 0 : element.children) : null;
+        return (_a = curNode !== null && curNode !== void 0 ? curNode : child) !== null && _a !== void 0 ? _a : [];
+    });
+    return result;
+}
+function useFootnotesFromNodes(nodes) {
+    const filter = deepSearchFootnoteFromNodes(nodes);
+    return filter.map((element) => {
+        var _a;
+        return ({
+            wrapperText: (_a = (element === null || element === void 0 ? void 0 : element.children)) === null || _a === void 0 ? void 0 : _a.map((childNode) => childNode.text).join(''),
+            footnote: element.footnote,
+            index: element.index,
+        });
+    });
+}
+
+exports.createReactFootnote = createReactFootnote;
+exports.defaultRenderFootnoteElement = defaultRenderFootnoteElement;
+exports.useFootnotes = useFootnotes;
+exports.useFootnotesFromNodes = useFootnotesFromNodes;

package/footnote/index.d.ts

@@ -0,0 +1,5 @@
+export * from './typings';
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement';
+export { CreateReactFootnoteOptions, createReactFootnote } from './createReactFootnote';
+export { default as useFootnotes } from './useFootnotes';
+export { default as useFootnotesFromNodes } from './useFootnotesFromNodes';

package/footnote/index.js

@@ -0,0 +1,4 @@
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+export { createReactFootnote } from './createReactFootnote.js';
+export { useFootnotes } from './useFootnotes.js';
+export { useFootnotesFromNodes } from './useFootnotesFromNodes.js';

package/footnote/jsx-serializer/createJsxSerializeFootnote.d.ts

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

package/footnote/jsx-serializer/createJsxSerializeFootnote.js

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

package/footnote/jsx-serializer/defaultRenderFootnoteElement.d.ts

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

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const defaultRenderFootnoteElement = ({ children, element }) => {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { style: { textDecoration: 'underline' } }, children),
+        React.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+};
+
+export { defaultRenderFootnoteElement };

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+var footnote = require('@quadrats/common/footnote');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultRenderFootnoteElement = ({ children, element }) => {
+    var _a;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("span", { style: { textDecoration: 'underline' } }, children),
+        React__default.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+};
+
+/* eslint-disable max-len */
+function createJsxSerializeFootnote(options = {}) {
+    const { type = footnote.FOOTNOTE_TYPE, render = defaultRenderFootnoteElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.createJsxSerializeFootnote = createJsxSerializeFootnote;
+exports.defaultRenderFootnoteElement = defaultRenderFootnoteElement;

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

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement';
+export { CreateJsxSerializeFootnoteOptions, createJsxSerializeFootnote } from './createJsxSerializeFootnote';

package/footnote/jsx-serializer/index.js

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

package/footnote/jsx-serializer/package.json

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

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

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

package/{break → footnote}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@quadrats/react/break",
+  "name": "@quadrats/react/footnote",
   "sideEffects": false,
   "main": "./index.cjs.js",
   "module": "./index.js",

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/footnote/typings.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footnote, FootnoteElement } from '@quadrats/common/footnote';
+import { RenderElementProps, ReactWithable, WithCreateRenderElement } from '@quadrats/react';
+export declare type RenderFootnoteElementProps = RenderElementProps<FootnoteElement>;
+export interface ReactFootnoteCreateRenderElementOptions {
+    render?: (props: RenderFootnoteElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactFootnote extends Omit<Footnote, 'with'>, WithCreateRenderElement<[ReactFootnoteCreateRenderElementOptions?]>, ReactWithable {
+}

package/footnote/useFootnotes.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '@quadrats/core';
+import { FootnoteData } from '@quadrats/common/footnote';
+export declare function useFootnotes(editor: Editor): FootnoteData[];
+export default useFootnotes;