@quadrats/react 0.4.4 → 0.5.3

package/footnote/useFootnotes.js

@@ -0,0 +1,21 @@
+import { getNodes } from '@quadrats/core';
+import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
+
+function useFootnotes(editor) {
+    const footnoteNodes = Array.from(getNodes(editor, {
+        at: [],
+        match: node => node.type === FOOTNOTE_TYPE,
+    }));
+    const footnotes = footnoteNodes.map((node) => {
+        var _a, _b;
+        const nodeData = node === null || node === void 0 ? void 0 : node[0];
+        return {
+            wrapperText: (_b = (_a = (nodeData === null || nodeData === void 0 ? void 0 : nodeData.children)) === null || _a === void 0 ? void 0 : _a.map(childNode => childNode.text).join('')) !== null && _b !== void 0 ? _b : '',
+            footnote: nodeData === null || nodeData === void 0 ? void 0 : nodeData.footnote,
+            index: nodeData === null || nodeData === void 0 ? void 0 : nodeData.index,
+        };
+    });
+    return footnotes;
+}
+
+export { useFootnotes as default, useFootnotes };

package/footnote/useFootnotesFromNodes.d.ts

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

package/footnote/useFootnotesFromNodes.js

@@ -0,0 +1,27 @@
+import { Node } from '@quadrats/core';
+import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
+
+function deepSearchFootnoteFromNodes(nodes) {
+    const result = nodes.flatMap((element) => {
+        var _a, _b, _c, _d;
+        const curNode = Node.isNode(element)
+            && element.type === FOOTNOTE_TYPE ? element : null;
+        const child = Node.isNodeList((_a = element) === null || _a === void 0 ? void 0 : _a.children)
+            ? deepSearchFootnoteFromNodes((_c = (_b = element) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []) : null;
+        return (_d = curNode !== null && curNode !== void 0 ? curNode : child) !== null && _d !== void 0 ? _d : [];
+    });
+    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,
+        });
+    });
+}
+
+export { useFootnotesFromNodes as default, useFootnotesFromNodes };

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

@@ -2,4 +2,4 @@
 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;
+export declare function createJsxSerializeHeading(options?: CreateJsxSerializeHeadingOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/heading/typings.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
 export declare type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
 export interface ReactHeadingCreateHandlersOptions {
     /**
@@ -11,5 +11,5 @@ export interface ReactHeadingCreateHandlersOptions {
 export interface ReactHeadingCreateRenderElementOptions {
     render?: (props: RenderHeadingElementProps) => JSX.Element | null | undefined;
 }
-export interface ReactHeading<Level extends HeadingLevel> extends Heading<Level>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
+export interface ReactHeading<Level extends HeadingLevel> extends Heading<Level, ReactEditor>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
 }

package/highlight/createReactHighlight.js

@@ -5,7 +5,7 @@ import { HIGHLIGHT_HOTKEY } from './constants.js';
 
 const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight(variant),
+    render: defaultRenderHighlight,
 })();
 
 export { createReactHighlight };

package/highlight/defaultRenderHighlight.d.ts

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

package/highlight/defaultRenderHighlight.js

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

package/highlight/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const HIGHLIGHT_HOTKEY = 'mod+h';
 
-const defaultRenderHighlight = (variant) => (({ children }) => (React__default.createElement("mark", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderHighlight = ({ children, leaf }) => (React__default.createElement("mark", { className: leaf.highlightVariant
+        ? `${highlight.HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${highlight.HIGHLIGHT_TYPE}` }, children));
 
 const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight(variant),
+    render: defaultRenderHighlight,
 })();
 
 exports.HIGHLIGHT_HOTKEY = HIGHLIGHT_HOTKEY;

package/highlight/jsx-serializer/createJsxSerializeHighlight.js

@@ -4,7 +4,7 @@ import { defaultRenderHighlight } from '@quadrats/react/highlight';
 
 const createJsxSerializeHighlight = createJsxSerializeToggleMarkCreator({
     type: HIGHLIGHT_TYPE,
-    render: defaultRenderHighlight(),
+    render: defaultRenderHighlight,
 });
 
 export { createJsxSerializeHighlight };

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

@@ -8,7 +8,7 @@ var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
 const createJsxSerializeHighlight = jsxSerializer.createJsxSerializeToggleMarkCreator({
     type: highlight$1.HIGHLIGHT_TYPE,
-    render: highlight.defaultRenderHighlight(),
+    render: highlight.defaultRenderHighlight,
 });
 
 exports.defaultRenderHighlight = highlight.defaultRenderHighlight;

package/highlight/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface HighlightLeaf extends Text {
+    highlight: boolean;
+    highlightVariant?: string;
+}

package/image/components/Image.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { Transforms } from '@quadrats/core';
-import { useEditor, ReactEditor } from '@quadrats/react';
+import { useSlateStatic, ReactEditor } from '@quadrats/react';
 import { useImageResizer } from '../hooks/useImageResizer.js';
 
 function Image(props) {
     const { attributes, children, element, resizeImage, src, } = props;
-    const editor = useEditor();
+    const editor = useSlateStatic();
     const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
         React.createElement("div", { className: "qdr-image__spacer" }, children),
         React.createElement("div", { contentEditable: false },
             focusedAndSelected && (React.createElement(React.Fragment, null,

package/image/components/ImageCaption.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import { Editor } from '@quadrats/core';
-import { useEditor, ReactEditor, useLocale } from '@quadrats/react';
+import { useSlateStatic, ReactEditor, useLocale } from '@quadrats/react';
 
 function ImageCaption(props) {
     const { attributes, children, element } = props;
-    const editor = useEditor();
+    const editor = useSlateStatic();
     const path = ReactEditor.findPath(editor, element);
     const text = Editor.string(editor, path);
     const isEmpty = !text;

package/image/createReactImage.js

@@ -85,7 +85,7 @@ function createReactImage(options = {}) {
                     })
                         .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
+                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/image/hooks/useImageResizer.js

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from 'react';
-import { useEditor, useFocused, useSelected, ReactEditor } from '@quadrats/react';
+import { useSlateStatic, useFocused, useSelected, ReactEditor } from '@quadrats/react';
 
 function isTouchEvent(event) {
     const { touches } = event;
@@ -15,7 +15,7 @@ function getEditorWidth(editor) {
 const moveEvents = ['mousemove', 'touchmove'];
 const endEvents = ['mouseup', 'touchend'];
 function useImageResizer(element, resizeImage) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     const focused = useFocused();
     const selected = useSelected();
     const focusedAndSelected = focused && selected;
@@ -78,11 +78,11 @@ function useImageResizer(element, resizeImage) {
         function onCancelResize() {
             setStartPoint(undefined);
         }
-        moveEvents.forEach((moveEvent) => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach((endEvent) => document.addEventListener(endEvent, onCancelResize));
+        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
+        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
         return () => {
-            moveEvents.forEach((moveEvent) => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach((endEvent) => document.removeEventListener(endEvent, onCancelResize));
+            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
+            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
         };
     }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
     return {

package/image/index.cjs.js

@@ -41,7 +41,7 @@ function getEditorWidth(editor) {
 const moveEvents = ['mousemove', 'touchmove'];
 const endEvents = ['mouseup', 'touchend'];
 function useImageResizer(element, resizeImage) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     const focused = react.useFocused();
     const selected = react.useSelected();
     const focusedAndSelected = focused && selected;
@@ -104,11 +104,11 @@ function useImageResizer(element, resizeImage) {
         function onCancelResize() {
             setStartPoint(undefined);
         }
-        moveEvents.forEach((moveEvent) => document.addEventListener(moveEvent, onResize));
-        endEvents.forEach((endEvent) => document.addEventListener(endEvent, onCancelResize));
+        moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
+        endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
         return () => {
-            moveEvents.forEach((moveEvent) => document.removeEventListener(moveEvent, onResize));
-            endEvents.forEach((endEvent) => document.removeEventListener(endEvent, onCancelResize));
+            moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
+            endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
         };
     }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
     return {
@@ -120,11 +120,9 @@ function useImageResizer(element, resizeImage) {
 
 function Image(props) {
     const { attributes, children, element, resizeImage, src, } = props;
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-    React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
+    return (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-image", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: event => event.preventDefault(), role: "img" }),
         React__default.createElement("div", { className: "qdr-image__spacer" }, children),
         React__default.createElement("div", { contentEditable: false },
             focusedAndSelected && (React__default.createElement(React__default.Fragment, null,
@@ -135,7 +133,7 @@ function Image(props) {
 
 function ImageCaption(props) {
     const { attributes, children, element } = props;
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     const path = react.ReactEditor.findPath(editor, element);
     const text = core.Editor.string(editor, path);
     const isEmpty = !text;
@@ -233,7 +231,7 @@ function createReactImage(options = {}) {
                     })
                         .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return utils.readFileAsDataURL(imageFile).then((dataURL) => core$1.insertImage(editor, dataURL));
+                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/image/jsx-serializer/createJsxSerializeImage.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { ImageCaptionTypeKey, ImageFigureTypeKey, ImageHostingResolvers, ImageTypeKey } from '@quadrats/common/image';
+import { QuadratsElement } from '@quadrats/core';
 import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
 import { JsxSerializeImageCaptionElementProps, JsxSerializeImageElementProps, JsxSerializeImageFigureElementProps } from './typings';
 export declare type CreateJsxSerializeImageOptions<H extends string> = Partial<Record<ImageFigureTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageFigureElementProps>>> & Record<ImageTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageElementProps>>> & Record<ImageCaptionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageCaptionElementProps>>> & {
     hostingResolvers?: ImageHostingResolvers<H>;
 }>;
-export declare function createJsxSerializeImage<H extends string>(options?: CreateJsxSerializeImageOptions<H>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeImage<H extends string>(options?: CreateJsxSerializeImageOptions<H>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<QuadratsElement>) => JSX.Element | null | undefined;

package/image/jsx-serializer/createJsxSerializeImage.js

@@ -23,17 +23,18 @@ function createJsxSerializeImage(options = {}) {
         {
             type: image.type || IMAGE_TYPES.image,
             render: (props) => {
+                var _a, _b;
                 const { children } = props;
                 const element = props.element;
-                const figure = getFirstAncestor(element, (node) => node.type === figureType);
-                const caption = figure === null || figure === void 0 ? void 0 : figure.children[1];
-                return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, hostingResolvers)), { caption: (caption === null || caption === void 0 ? void 0 : caption.type) === captionType ? getMergedNodeTexts(caption) : '', children,
+                const figure = getFirstAncestor(element, node => node.type === figureType);
+                const caption = (_a = figure === null || figure === void 0 ? void 0 : figure.children) === null || _a === void 0 ? void 0 : _a[1];
+                return renderImage(Object.assign(Object.assign({}, getImageElementCommonProps(element, hostingResolvers)), { caption: ((_b = caption) === null || _b === void 0 ? void 0 : _b.type) === captionType ? getMergedNodeTexts(caption) : '', children,
                     element }));
             },
         },
         {
             type: captionType,
-            render: (props) => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !getMergedNodeTexts(props.element) })),
+            render: props => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !getMergedNodeTexts(props.element) })),
         },
     ]);
 }

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

@@ -37,17 +37,18 @@ function createJsxSerializeImage(options = {}) {
         {
             type: image$1.type || image.IMAGE_TYPES.image,
             render: (props) => {
+                var _a, _b;
                 const { children } = props;
                 const element = props.element;
-                const figure = serializers.getFirstAncestor(element, (node) => node.type === figureType);
-                const caption = figure === null || figure === void 0 ? void 0 : figure.children[1];
-                return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, hostingResolvers)), { caption: (caption === null || caption === void 0 ? void 0 : caption.type) === captionType ? serializers.getMergedNodeTexts(caption) : '', children,
+                const figure = serializers.getFirstAncestor(element, node => node.type === figureType);
+                const caption = (_a = figure === null || figure === void 0 ? void 0 : figure.children) === null || _a === void 0 ? void 0 : _a[1];
+                return renderImage(Object.assign(Object.assign({}, image.getImageElementCommonProps(element, hostingResolvers)), { caption: ((_b = caption) === null || _b === void 0 ? void 0 : _b.type) === captionType ? serializers.getMergedNodeTexts(caption) : '', children,
                     element }));
             },
         },
         {
             type: captionType,
-            render: (props) => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !serializers.getMergedNodeTexts(props.element) })),
+            render: props => renderCaption(Object.assign(Object.assign({}, props), { isEmpty: !serializers.getMergedNodeTexts(props.element) })),
         },
     ]);
 }

package/image/typings.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Image, ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElement, ImageFigureTypeKey, ImageTypeKey } from '@quadrats/common/image';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable } from '@quadrats/react';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable, ReactEditor } from '@quadrats/react';
 export interface RenderImageFigureElementProps extends RenderElementProps<ImageFigureElement> {
     style?: {
         width: string;
@@ -15,5 +15,5 @@ export declare type ImageRenderElements = Record<ImageFigureTypeKey, (props: Ren
 export declare type ReactImageCreateRenderElementOptions = {
     [K in ImageFigureTypeKey | ImageTypeKey | ImageCaptionTypeKey]?: ImageRenderElements[K];
 };
-export interface ReactImage<Hosting extends string> extends Omit<Image<Hosting>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>, ReactWithable {
+export interface ReactImage<Hosting extends string> extends Omit<Image<Hosting, ReactEditor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>, ReactWithable {
 }

package/index.cjs.js

@@ -50,7 +50,8 @@ function Editable(props) {
     }, [onCompositionStartProp, isEditorEmpty]);
     const renderLeaf = React.useCallback((props) => {
         const children = renderLeafProp ? renderLeafProp(props) : React__default.createElement(DefaultLeaf, Object.assign({}, props));
-        if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
+        const { leaf } = props;
+        if (placeholderShowable && leaf[PLACEHOLDER_KEY]) {
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("span", { className: "qdr-editable__placeholder", contentEditable: false }, placeholder),
                 children));
@@ -73,7 +74,7 @@ function Quadrats(props) {
 
 function createEventHandler(editor, handlers) {
     const [handler, ...restHandlers] = handlers;
-    return (event) => handler(event, editor, () => {
+    return event => handler(event, editor, () => {
         const next = restHandlers.length > 0 ? createEventHandler(editor, restHandlers) : () => { };
         next(event);
     });
@@ -97,7 +98,7 @@ function composeHandlers(handlersList) {
         return acc;
     }, {});
     const handlersEntries = Object.entries(handlersListRecord);
-    return (editor) => handlersEntries.reduce((acc, [name, handlers]) => {
+    return editor => handlersEntries.reduce((acc, [name, handlers]) => {
         acc[name] = createEventHandler(editor, handlers);
         return acc;
     }, {});
@@ -107,14 +108,14 @@ function composeHandlers(handlersList) {
  * To compose sequential `renderElement`s to single.
  */
 function composeRenderElements(renderElements) {
-    return _internal.composeRenderElementsBase((props) => React__default.createElement(DefaultElement, Object.assign({}, props)), renderElements);
+    return _internal.composeRenderElementsBase(props => React__default.createElement(DefaultElement, Object.assign({}, props)), renderElements);
 }
 
 /**
  * To compose sequential `renderLeaf`s or `renderMark`s to single.
  */
 function composeRenderLeafs(renderLeafs) {
-    return _internal.composeRenderLeafsBase((props) => React__default.createElement(DefaultLeaf, Object.assign({}, props)), renderLeafs);
+    return _internal.composeRenderLeafsBase(props => React__default.createElement(DefaultLeaf, Object.assign({}, props)), renderLeafs);
 }
 
 function createReactEditor() {
@@ -134,11 +135,11 @@ function createRenderMark(options) {
 }
 
 exports.ReactEditor = slateReact.ReactEditor;
-exports.useEditor = slateReact.useEditor;
 exports.useFocused = slateReact.useFocused;
 exports.useQuadrats = slateReact.useSlate;
 exports.useReadOnly = slateReact.useReadOnly;
 exports.useSelected = slateReact.useSelected;
+exports.useSlateStatic = slateReact.useSlateStatic;
 exports.DefaultElement = DefaultElement;
 exports.DefaultLeaf = DefaultLeaf;
 exports.Editable = Editable;

package/index.js

@@ -1,5 +1,5 @@
 export * from '@quadrats/react/configs';
-export { ReactEditor, useEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected } from 'slate-react';
+export { ReactEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected, useSlateStatic } from 'slate-react';
 export { default as Editable } from './core/components/Editable.js';
 export { default as DefaultElement } from './core/components/DefaultElement.js';
 export { default as DefaultLeaf } from './core/components/DefaultLeaf.js';

package/input-block/hooks/useInputBlock.js

@@ -2,10 +2,11 @@ import { useRef, useLayoutEffect } from 'react';
 import { useQuadrats, useLocale } from '@quadrats/react';
 
 function useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
     const inputRef = useRef(null);
     const editor = useQuadrats();
     const locale = useLocale();
-    const placeholder = element.getPlaceholder(locale);
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
     /**
      * Since keying `Enter` or `Escape` will also cause input blurred
      * Add a `removeable` flag to avoid.

package/input-block/index.cjs.js

@@ -11,10 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
     const inputRef = React.useRef(null);
     const editor = react.useQuadrats();
     const locale = react.useLocale();
-    const placeholder = element.getPlaceholder(locale);
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
     /**
      * Since keying `Enter` or `Escape` will also cause input blurred
      * Add a `removeable` flag to avoid.

package/input-block/typings.d.ts

@@ -6,7 +6,7 @@ export declare type RenderInputBlockElement = (props: RenderInputBlockElementPro
 export interface ReactInputBlockCreateRenderElementOptions {
     render?: RenderInputBlockElement;
 }
-export interface ReactInputBlock extends Omit<InputBlock, 'remove' | 'confirm'>, WithCreateRenderElement<[ReactInputBlockCreateRenderElementOptions?]> {
+export interface ReactInputBlock extends Omit<InputBlock<ReactEditor>, 'remove' | 'confirm'>, WithCreateRenderElement<[ReactInputBlockCreateRenderElementOptions?]> {
     remove(editor: ReactEditor, element: InputBlockElement): void;
     confirm(editor: ReactEditor, element: InputBlockElement, value: string): void;
 }

package/italic/createReactItalic.js

@@ -5,7 +5,7 @@ import { ITALIC_HOTKEY } from './constants.js';
 
 const createReactItalic = (variant) => createReactToggleMarkCreator(createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic(variant),
+    render: defaultRenderItalic,
 })();
 
 export { createReactItalic };

package/italic/defaultRenderItalic.d.ts

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

package/italic/defaultRenderItalic.js

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

package/italic/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const ITALIC_HOTKEY = 'mod+i';
 
-const defaultRenderItalic = (variant) => (({ children }) => (React__default.createElement("i", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderItalic = ({ children, leaf }) => (React__default.createElement("i", { className: leaf.italicVariant
+        ? `${italic.ITALIC_TYPE}.${leaf.italicVariant}` : `${italic.ITALIC_TYPE}` }, children));
 
 const createReactItalic = (variant) => toggleMark.createReactToggleMarkCreator(italic.createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic(variant),
+    render: defaultRenderItalic,
 })();
 
 exports.ITALIC_HOTKEY = ITALIC_HOTKEY;

package/italic/jsx-serializer/createJsxSerializeItalic.js

@@ -4,7 +4,7 @@ import { defaultRenderItalic } from '@quadrats/react/italic';
 
 const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
     type: ITALIC_TYPE,
-    render: defaultRenderItalic(),
+    render: defaultRenderItalic,
 });
 
 export { createJsxSerializeItalic };

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

@@ -8,7 +8,7 @@ var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
 const createJsxSerializeItalic = jsxSerializer.createJsxSerializeToggleMarkCreator({
     type: italic$1.ITALIC_TYPE,
-    render: italic.defaultRenderItalic(),
+    render: italic.defaultRenderItalic,
 });
 
 exports.defaultRenderItalic = italic.defaultRenderItalic;

package/italic/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface ItalicLeaf extends Text {
+    italic: boolean;
+    italicVariant?: string;
+}

package/jsx-serializer/createJsxSerializeElement.d.ts

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

package/jsx-serializer/createJsxSerializeElements.d.ts

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

package/jsx-serializer/createJsxSerializer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Node } from '@quadrats/core';
+import { Descendant } from '@quadrats/core';
 import { JsxSerializeElementProps, JsxSerializeLeafProps } from './typings';
 export interface CreateJsxSerializerOptioons {
     /**
@@ -14,5 +14,5 @@ export interface CreateJsxSerializerOptioons {
     leafs?: ((props: JsxSerializeLeafProps) => JSX.Element)[];
 }
 export declare function createJsxSerializer(options: CreateJsxSerializerOptioons): {
-    serialize: (nodes: Node[]) => JSX.Element;
+    serialize: (nodes: Descendant[]) => JSX.Element;
 };

package/jsx-serializer/createJsxSerializer.js

@@ -29,7 +29,7 @@ function createJsxSerializer(options) {
                 leaf: node,
                 children: (React.createElement("span", { style: leafStyle }, node.text
                     .split('\n')
-                    .map((t) => t || ' ')
+                    .map(t => t || ' ')
                     .join('\n'))),
             });
         }
@@ -39,7 +39,7 @@ function createJsxSerializer(options) {
         return addKey(result);
     }
     function serializeNodes(nodes, parent) {
-        return React.createElement(React.Fragment, null, nodes.map((node) => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
+        return React.createElement(React.Fragment, null, nodes.map(node => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
     }
     return {
         serialize: (nodes) => serializeNodes(nodes, undefined),

package/jsx-serializer/index.cjs.js

@@ -49,7 +49,7 @@ function createJsxSerializer(options) {
                 leaf: node,
                 children: (React__default.createElement("span", { style: leafStyle }, node.text
                     .split('\n')
-                    .map((t) => t || ' ')
+                    .map(t => t || ' ')
                     .join('\n'))),
             });
         }
@@ -59,7 +59,7 @@ function createJsxSerializer(options) {
         return addKey(result);
     }
     function serializeNodes(nodes, parent) {
-        return React__default.createElement(React__default.Fragment, null, nodes.map((node) => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
+        return React__default.createElement(React__default.Fragment, null, nodes.map(node => serializeNode(Object.assign(Object.assign({}, node), { parent }))));
     }
     return {
         serialize: (nodes) => serializeNodes(nodes, undefined),

package/jsx-serializer/typings.d.ts

@@ -1,8 +1,8 @@
-import { Element } from '@quadrats/core';
+import { QuadratsElement } from '@quadrats/core';
 import { WithElementParent } from '@quadrats/core/serializers';
 import { CreateRenderElementOptionsBase, CreateRenderMarkOptionsBase, RenderElementPropsBase, RenderLeafPropsBase, RenderMarkPropsBase } from '@quadrats/react/_internal';
 export declare type JsxSerializeLeafProps = RenderLeafPropsBase;
 export declare type JsxSerializeMarkProps<M> = RenderMarkPropsBase<M>;
-export declare type JsxSerializeElementProps<E extends Element = Element> = RenderElementPropsBase<E & WithElementParent>;
+export declare type JsxSerializeElementProps<E extends QuadratsElement = QuadratsElement> = RenderElementPropsBase<E & WithElementParent>;
 export declare type CreateJsxSerializeMarkOptions<M> = CreateRenderMarkOptionsBase<M, JsxSerializeMarkProps<M>>;
 export declare type CreateJsxSerializeElementOptions<P extends JsxSerializeElementProps> = CreateRenderElementOptionsBase<P>;