@quadrats/react 0.7.6 → 0.7.7

package/_internal/renderer/composeRenderElementsBase.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { RenderElementPropsBase } from './typings';
 export declare function composeRenderElementsBase<P extends RenderElementPropsBase>(renderDefault: (props: P) => JSX.Element, renderElements: ((props: P) => JSX.Element | null | undefined)[]): (props: P) => JSX.Element;

package/_internal/renderer/composeRenderLeafsBase.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { RenderLeafPropsBase } from './typings';
 export declare function composeRenderLeafsBase<P extends RenderLeafPropsBase>(renderDefault: (props: P) => JSX.Element, renderLeafs: ((props: P) => JSX.Element)[]): (props: P) => JSX.Element;

package/_internal/renderer/createRenderElementBase.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
 export declare function createRenderElementBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>({ type, render, }: CreateRenderElementOptionsBase<P>): (props: RP) => JSX.Element | null | undefined;

package/_internal/renderer/createRenderElementsBase.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
 export declare function createRenderElementsBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>(options: CreateRenderElementOptionsBase<P>[]): (props: RP) => JSX.Element | null | undefined;

package/_internal/renderer/createRenderMarkBase.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { CreateRenderMarkOptionsBase, RenderLeafPropsBase, RenderMarkPropsBase } from './typings';
 export declare function createRenderMarkBase<M, P extends RenderMarkPropsBase<M>>(options: CreateRenderMarkOptionsBase<M, P>): (props: Omit<P, Exclude<keyof RenderMarkPropsBase<M>, keyof RenderLeafPropsBase>>) => JSX.Element;

package/_internal/renderer/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { QuadratsElement, Text, WithElementType, WithMarkType } from '@quadrats/core';
 export interface RenderLeafPropsBase {
     children: any;

package/blockquote/defaultRenderBlockquoteElement.d.ts

@@ -1,12 +1,6 @@
 import React from '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'];
+    attributes?: RenderElementProps["attributes"];
+    children: RenderElementProps["children"];
 }) => React.JSX.Element;

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

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

package/blockquote/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { BlockquoteElement, Blockquote } from '@quadrats/common/blockquote';
 import { Editor } from '@quadrats/core';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';

package/bold/jsx-serializer/createJsxSerializeBold.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const createJsxSerializeBold: (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 createJsxSerializeBold: (options?: import("@quadrats/react/toggle-mark/jsx-serializer").CreateJsxSerializeToggleMarkOptions) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => import("react").JSX.Element;

package/components/Tooltip/index.js

@@ -24,6 +24,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     const { props: themeProps } = useContext(ThemeContext);
     const [visible, setVisible] = useState(false);
     const delayTimer = useRef(NaN);
+    const nodeRef = useRef(null);
     const clearDelayTimer = useCallback(() => {
         if (delayTimer.current) {
             window.clearTimeout(delayTimer.current);
@@ -107,8 +108,8 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     }, [visible]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Portal, { getContainer: getContainer },
-            React.createElement(CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React.createElement("div", { className: `${clsPrefix}__mask` },
+            React.createElement(CSSTransition, { nodeRef: nodeRef, in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
+                React.createElement("div", { ref: nodeRef, className: `${clsPrefix}__mask` },
                     React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
                         React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
                                 [`${clsPrefix}__arrow--${placement}`]: secondPlacement,

package/components/index.cjs.js

@@ -128,6 +128,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     const { props: themeProps } = React.useContext(configs.ThemeContext);
     const [visible, setVisible] = React.useState(false);
     const delayTimer = React.useRef(NaN);
+    const nodeRef = React.useRef(null);
     const clearDelayTimer = React.useCallback(() => {
         if (delayTimer.current) {
             window.clearTimeout(delayTimer.current);
@@ -211,8 +212,8 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     }, [visible]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Portal, { getContainer: getContainer },
-            React.createElement(reactTransitionGroup.CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React.createElement("div", { className: `${clsPrefix}__mask` },
+            React.createElement(reactTransitionGroup.CSSTransition, { nodeRef: nodeRef, in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
+                React.createElement("div", { ref: nodeRef, className: `${clsPrefix}__mask` },
                     React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
                         React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
                                 [`${clsPrefix}__arrow--${placement}`]: secondPlacement,

package/configs/locale.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LocaleDefinition } from '@quadrats/locales';
 export declare const LocaleContext: import("react").Context<LocaleDefinition>;
 export declare function useLocale(): LocaleDefinition;

package/core/components/Editable.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { JSX } from 'react';
 import { EditableProps as SlateEditableProps } from 'slate-react/dist/components/editable';
 import { RenderElementProps, RenderLeafProps } from '../typings/renderer';
 export type EditableProps = Omit<SlateEditableProps, 'renderLeaf' | 'renderElement'> & {
     renderLeaf?: (props: RenderLeafProps) => JSX.Element;
     renderElement?: (props: RenderElementProps) => JSX.Element;
 };
-declare function Editable(props: EditableProps): React.JSX.Element;
+declare function Editable(props: EditableProps): JSX.Element;
 export default Editable;

package/core/composeRenderElements.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { RenderElementProps } from './typings/renderer';
 /**
  * To compose sequential `renderElement`s to single.

package/core/composeRenderLeafs.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { RenderLeafProps } from './typings/renderer';
 /**
  * To compose sequential `renderLeaf`s or `renderMark`s to single.

package/core/createRenderElement.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-export declare function createRenderElement<P extends RenderElementProps>(options: CreateRenderElementOptions<P>): (props: RenderElementProps) => JSX.Element | null | undefined;
+export declare function createRenderElement<P extends RenderElementProps>(options: CreateRenderElementOptions<P>): (props: RenderElementProps) => import("react").JSX.Element | null | undefined;

package/core/createRenderElements.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-export declare function createRenderElements<P extends RenderElementProps>(options: CreateRenderElementOptions<P>[]): (props: RenderElementProps) => JSX.Element | null | undefined;
+export declare function createRenderElements<P extends RenderElementProps>(options: CreateRenderElementOptions<P>[]): (props: RenderElementProps) => import("react").JSX.Element | null | undefined;

package/core/createRenderMark.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CreateRenderMarkOptions } from './typings/renderer';
-export declare function createRenderMark<M>(options: CreateRenderMarkOptions<M>): (props: Omit<import("./typings/renderer").RenderMarkProps<M>, "mark">) => JSX.Element;
+export declare function createRenderMark<M>(options: CreateRenderMarkOptions<M>): (props: Omit<import("./typings/renderer").RenderMarkProps<M>, "mark">) => import("react").JSX.Element;

package/core/typings/renderer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { RenderElementProps as SlateReactRenderElementProps, RenderLeafProps as SlateRenderLeafProps } from 'slate-react';
 import { QuadratsElement } from '@quadrats/core';
 import { CreateRenderElementOptionsBase, CreateRenderMarkOptionsBase, RenderElementPropsBase, RenderLeafPropsBase, RenderMarkPropsBase } from '@quadrats/react/_internal';

package/divider/jsx-serializer/createJsxSerializeDivider.d.ts

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

package/divider/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Divider, DividerElement } from '@quadrats/common/divider';
 import { Editor } from '@quadrats/core';
 import { WithCreateRenderElement, RenderElementProps } from '@quadrats/react';

package/embed/createRenderEmbedElementBase.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { EmbedElement, EmbedStrategies } from '@quadrats/common/embed';
 import { RenderElementPropsBase } from '@quadrats/react/_internal';
 import { WithEmbedRenderData } from './typings';

package/embed/hooks/useVideoIframeSize.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare function useVideoIframeSize<E extends HTMLElement>(): {
-    ref: import("react").RefObject<E>;
+    ref: import("react").RefObject<E | null>;
     size: {
         width: number;
         height: number;

package/embed/jsx-serializer/createJsxSerializeEmbed.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { EmbedStrategies } from '@quadrats/common/embed';
 import { JsxSerializeEmbedElementProps } from './typings';
 export interface CreateJsxSerializeEmbedOptions<Provider extends string> {
@@ -6,4 +6,4 @@ export interface CreateJsxSerializeEmbedOptions<Provider extends string> {
     strategies: EmbedStrategies<Provider>;
     renderers: Record<Provider, (props: JsxSerializeEmbedElementProps<any, any>) => JSX.Element | null | undefined>;
 }
-export declare function createJsxSerializeEmbed<Provider extends string>(options: CreateJsxSerializeEmbedOptions<Provider>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => JSX.Element | null | undefined;
+export declare function createJsxSerializeEmbed<Provider extends string>(options: CreateJsxSerializeEmbedOptions<Provider>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/embed/jsx-serializer/facebook/index.cjs.js

@@ -4,6 +4,13 @@ var facebook = require('@quadrats/react/embed/renderers/facebook');
 
 
 
+Object.prototype.hasOwnProperty.call(facebook, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: facebook['__proto__']
+	});
+
 Object.keys(facebook).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = facebook[k];
 });

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var embed$1 = require('@quadrats/common/embed');
-var embed = require('@quadrats/react/embed');
+var embed = require('@quadrats/common/embed');
+var embed$1 = require('@quadrats/react/embed');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
 function createJsxSerializeEmbed(options) {
-    const { type = embed$1.EMBED_TYPE, strategies, renderers } = options;
+    const { type = embed.EMBED_TYPE, strategies, renderers } = options;
     return jsxSerializer.createJsxSerializeElement({
         type,
-        render: embed.createRenderEmbedElementBase({ strategies, renderers }),
+        render: embed$1.createRenderEmbedElementBase({ strategies, renderers }),
     });
 }
 

package/embed/jsx-serializer/instagram/index.cjs.js

@@ -4,6 +4,13 @@ var instagram = require('@quadrats/react/embed/renderers/instagram');
 
 
 
+Object.prototype.hasOwnProperty.call(instagram, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: instagram['__proto__']
+	});
+
 Object.keys(instagram).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = instagram[k];
 });

package/embed/jsx-serializer/twitter/index.cjs.js

@@ -4,6 +4,13 @@ var twitter = require('@quadrats/react/embed/renderers/twitter');
 
 
 
+Object.prototype.hasOwnProperty.call(twitter, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: twitter['__proto__']
+	});
+
 Object.keys(twitter).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = twitter[k];
 });

package/embed/jsx-serializer/vimeo/index.cjs.js

@@ -4,6 +4,13 @@ var vimeo = require('@quadrats/react/embed/renderers/vimeo');
 
 
 
+Object.prototype.hasOwnProperty.call(vimeo, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: vimeo['__proto__']
+	});
+
 Object.keys(vimeo).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = vimeo[k];
 });

package/embed/jsx-serializer/youtube/index.cjs.js

@@ -4,6 +4,13 @@ var youtube = require('@quadrats/react/embed/renderers/youtube');
 
 
 
+Object.prototype.hasOwnProperty.call(youtube, '__proto__') &&
+	!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+	Object.defineProperty(exports, '__proto__', {
+		enumerable: true,
+		value: youtube['__proto__']
+	});
+
 Object.keys(youtube).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = youtube[k];
 });

package/embed/renderers/instagram/components/Instagram.js

@@ -1,8 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useLoadInstagramEmbedApi } from '../hooks/useLoadInstagramEmbedApi.js';
 
 function Instagram({ attributes, children, data: permalink }) {
     useLoadInstagramEmbedApi(permalink);
+    useEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.tagName === 'IFRAME') {
+                        const iframeNode = node;
+                        if (iframeNode.src.includes('instagram.com')) {
+                            iframeNode.setAttribute('title', 'Instagram 貼文');
+                        }
+                    }
+                });
+            });
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,

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

@@ -28,6 +28,24 @@ function useLoadInstagramEmbedApi(permalink) {
 
 function Instagram({ attributes, children, data: permalink }) {
     useLoadInstagramEmbedApi(permalink);
+    React.useEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.tagName === 'IFRAME') {
+                        const iframeNode = node;
+                        if (iframeNode.src.includes('instagram.com')) {
+                            iframeNode.setAttribute('title', 'Instagram 貼文');
+                        }
+                    }
+                });
+            });
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,

package/embed/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Embed, EmbedElement } from '@quadrats/common/embed';
 import { WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export interface WithEmbedRenderData<RenderData> {

package/file-uploader/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { FileUploader, FileUploaderElement } from '@quadrats/common/file-uploader';
 import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
 export type RenderFileUploaderElementProps = RenderElementProps<FileUploaderElement>;

package/footnote/defaultRenderFootnoteElement.d.ts

@@ -3,7 +3,7 @@ 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;
+export declare const defaultRenderFootnoteElement: ({ attributes, children, element, placement, }: RenderFootnoteElementProps & {
+    placement?: "top" | "bottom";
+    target?: string;
 }) => React.JSX.Element;

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

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

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

@@ -1,3 +1,5 @@
 import React from 'react';
 import { JsxSerializeFootnoteElementProps } from './typings';
-export declare const defaultRenderFootnoteElement: ({ children, element }: JsxSerializeFootnoteElementProps) => React.JSX.Element;
+export declare const defaultRenderFootnoteElement: ({ children, element, placement }: JsxSerializeFootnoteElementProps & {
+    placement?: "top" | "bottom";
+}) => React.JSX.Element;

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Tooltip } from '@quadrats/react/components';
 
-const defaultRenderFootnoteElement = ({ children, element }) => {
+const defaultRenderFootnoteElement = ({ children, element, placement = 'bottom' }) => {
     var _a;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children),
+        React.createElement(Tooltip, { placement: placement, popup: element.footnote },
+            React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children)),
         React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 

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

@@ -1,13 +1,15 @@
 'use strict';
 
 var React = require('react');
+var components = require('@quadrats/react/components');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 var footnote = require('@quadrats/common/footnote');
 
-const defaultRenderFootnoteElement = ({ children, element }) => {
+const defaultRenderFootnoteElement = ({ children, element, placement = 'bottom' }) => {
     var _a;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children),
+        React.createElement(components.Tooltip, { placement: placement, popup: element.footnote },
+            React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children)),
         React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 

package/footnote/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Footnote, FootnoteElement } from '@quadrats/common/footnote';
 import { RenderElementProps, ReactWithable, WithCreateRenderElement, Editor } from '@quadrats/react';
 export type RenderFootnoteElementProps = RenderElementProps<FootnoteElement>;

package/heading/defaultRenderHeadingElement.d.ts

@@ -10,13 +10,7 @@ export declare const HEADING_COMPONENTS: {
     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'];
+    attributes?: RenderElementProps["attributes"];
+    children: RenderElementProps["children"];
     element: HeadingElement;
 }) => React.JSX.Element | null;

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

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

package/heading/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export type RenderHeadingElementProps = RenderElementProps<HeadingElement>;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const createJsxSerializeHighlight: (variant?: string) => (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">) => import("react").JSX.Element;

package/image/createReactImage.d.ts

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

package/image/createReactImage.js

@@ -3,11 +3,13 @@ import isHotkey from 'is-hotkey';
 import { readFileAsDataURL } from '@quadrats/utils';
 import { Transforms } from '@quadrats/core';
 import { createImage, getImageFigureElementCommonProps, getImageElementCommonProps } from '@quadrats/common/image';
+import { createFileUploaderElementByType, FILE_UPLOADER_TYPE, insertFileUploaderElement } from '@quadrats/common/file-uploader';
 import { createRenderElements } from '@quadrats/react';
 import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 
-function createReactImage(options = {}) {
+function createReactImage(options = {}, getUploadOptions) {
     const core = createImage(options);
+    const uploadOptions = getUploadOptions === null || getUploadOptions === void 0 ? void 0 : getUploadOptions(core);
     const { types } = core;
     return Object.assign(Object.assign({}, core), { createHandlers: () => ({
             onKeyDown(event, editor, next) {
@@ -63,8 +65,22 @@ function createReactImage(options = {}) {
         }, with(editor) {
             const { insertData } = editor;
             editor.insertData = (data) => {
+                var _a;
                 const text = data.getData('text');
                 const { files } = data;
+                /**
+                 * Insert each image when upload options are set.
+                 */
+                if (uploadOptions) {
+                    const createFileUploaderElement = createFileUploaderElementByType((_a = uploadOptions.type) !== null && _a !== void 0 ? _a : FILE_UPLOADER_TYPE);
+                    Array.from(files).reduce((prev, file) => __awaiter(this, void 0, void 0, function* () {
+                        yield prev;
+                        return createFileUploaderElement(editor, file, uploadOptions).then((fileUploaderElement) => {
+                            insertFileUploaderElement(editor, fileUploaderElement);
+                        });
+                    }), Promise.resolve());
+                    return;
+                }
                 /**
                  * Insert image if inserted text is image url.
                  */

package/image/hooks/useImageResizer.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ImageElement } from '@quadrats/common/image';
 import { ReactImage } from '../typings';
 export declare function useImageResizer(element: ImageElement, resizeImage: ReactImage<any>['resizeImage']): {
-    imageRef: import("react").RefObject<HTMLImageElement>;
+    imageRef: import("react").RefObject<HTMLImageElement | null>;
     focusedAndSelected: boolean;
     onResizeStart: (event: React.MouseEvent | React.TouchEvent) => void;
 };

package/image/index.cjs.js

@@ -8,6 +8,7 @@ var tslib = require('tslib');
 var isHotkey = require('is-hotkey');
 var utils = require('@quadrats/utils');
 var image = require('@quadrats/common/image');
+var fileUploader = require('@quadrats/common/file-uploader');
 
 function ImageFigure(props) {
     const { attributes, children, style } = props;
@@ -144,8 +145,9 @@ const defaultRenderImageElements = {
     caption: props => React.createElement(ImageCaption, Object.assign({}, props)),
 };
 
-function createReactImage(options = {}) {
+function createReactImage(options = {}, getUploadOptions) {
     const core$1 = image.createImage(options);
+    const uploadOptions = getUploadOptions === null || getUploadOptions === void 0 ? void 0 : getUploadOptions(core$1);
     const { types } = core$1;
     return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
             onKeyDown(event, editor, next) {
@@ -201,8 +203,22 @@ function createReactImage(options = {}) {
         }, with(editor) {
             const { insertData } = editor;
             editor.insertData = (data) => {
+                var _a;
                 const text = data.getData('text');
                 const { files } = data;
+                /**
+                 * Insert each image when upload options are set.
+                 */
+                if (uploadOptions) {
+                    const createFileUploaderElement = fileUploader.createFileUploaderElementByType((_a = uploadOptions.type) !== null && _a !== void 0 ? _a : fileUploader.FILE_UPLOADER_TYPE);
+                    Array.from(files).reduce((prev, file) => tslib.__awaiter(this, void 0, void 0, function* () {
+                        yield prev;
+                        return createFileUploaderElement(editor, file, uploadOptions).then((fileUploaderElement) => {
+                            fileUploader.insertFileUploaderElement(editor, fileUploaderElement);
+                        });
+                    }), Promise.resolve());
+                    return;
+                }
                 /**
                  * Insert image if inserted text is image url.
                  */