@quadrats/react 0.4.5 → 0.5.1

package/_internal/renderer/typings.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Element, Text, WithElementType, WithMarkType } from '@quadrats/core';
+import { QuadratsElement, Text, WithElementType, WithMarkType } from '@quadrats/core';
 export interface RenderLeafPropsBase {
     children: any;
     leaf: Text;
@@ -7,13 +7,13 @@ export interface RenderLeafPropsBase {
 export interface RenderMarkPropsBase<M> extends RenderLeafPropsBase {
     mark: M;
 }
-export interface RenderElementPropsBase<E extends Element = Element> {
+export interface RenderElementPropsBase<E extends QuadratsElement = QuadratsElement> {
     children: any;
     element: E;
 }
 export interface CreateRenderMarkOptionsBase<M, P extends RenderMarkPropsBase<M>> extends WithMarkType {
     render: (props: P) => JSX.Element;
 }
-export interface CreateRenderElementOptionsBase<P extends RenderElementPropsBase<Element>> extends WithElementType {
+export interface CreateRenderElementOptionsBase<P extends RenderElementPropsBase<QuadratsElement>> extends WithElementType {
     render: (props: P) => JSX.Element | null | undefined;
 }

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

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

package/core/components/Editable.js

@@ -39,7 +39,8 @@ function Editable(props) {
     }, [onCompositionStartProp, isEditorEmpty]);
     const renderLeaf = useCallback((props) => {
         const children = renderLeafProp ? renderLeafProp(props) : React.createElement(DefaultLeaf, Object.assign({}, props));
-        if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
+        const { leaf } = props;
+        if (placeholderShowable && leaf[PLACEHOLDER_KEY]) {
             return (React.createElement(React.Fragment, null,
                 React.createElement("span", { className: "qdr-editable__placeholder", contentEditable: false }, placeholder),
                 children));

package/core/composeHandlers.d.ts

@@ -1,9 +1,8 @@
 import { ReactEditor } from 'slate-react';
-import { HistoryEditor } from '@quadrats/core';
 import { EventHandlerName, EventHandlers, Handler } from './typings/handler';
 /**
  * To compose sequential `event handlers` to single for each event types.
  */
 export declare function composeHandlers<H extends EventHandlerName>(handlersList: {
     [HH in H]?: Handler<HH>;
-}[]): (editor: ReactEditor & HistoryEditor) => EventHandlers;
+}[]): (editor: ReactEditor) => EventHandlers;

package/core/composeRenderElements.d.ts

@@ -3,4 +3,4 @@ import { RenderElementProps } from './typings/renderer';
 /**
  * To compose sequential `renderElement`s to single.
  */
-export declare function composeRenderElements(renderElements: ((props: RenderElementProps) => JSX.Element | null | undefined)[]): (props: RenderElementProps<import("slate").Element>) => JSX.Element;
+export declare function composeRenderElements(renderElements: ((props: RenderElementProps) => JSX.Element | null | undefined)[]): (props: RenderElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element;

package/core/createReactEditor.d.ts

@@ -1 +1,2 @@
-export declare function createReactEditor(): import("@quadrats/core").Editor & import("@quadrats/core").HistoryEditor & import("slate-react").ReactEditor;
+import { ReactEditor } from 'slate-react';
+export declare function createReactEditor(): ReactEditor;

package/core/createRenderElement.d.ts

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

package/core/createRenderElements.d.ts

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

package/core/index.d.ts

@@ -1,4 +1,6 @@
-export { useEditor, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
+import { BaseEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
+import { ReactEditor } from 'slate-react';
+export { useSlateStatic, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
 export * from './typings/handler';
 export * from './typings/renderer';
 export * from './typings/with';
@@ -13,3 +15,10 @@ export { createReactEditor } from './createReactEditor';
 export { createRenderElement } from './createRenderElement';
 export { createRenderElements } from './createRenderElements';
 export { createRenderMark } from './createRenderMark';
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor;
+        Element: QuadratsElement;
+        Text: QuadratsText;
+    }
+}

package/core/typings/handler.d.ts

@@ -1,13 +1,12 @@
 import { DOMAttributes, EventHandler } from 'react';
 import { ReactEditor } from 'slate-react';
-import { HistoryEditor } from '@quadrats/core';
 export declare type EventHandlerName = {
     [K in keyof Required<DOMAttributes<HTMLElement>>]: NonNullable<DOMAttributes<HTMLElement>[K]> extends EventHandler<any> ? K : never;
 }[keyof DOMAttributes<HTMLElement>];
 export declare type EventHandlers = Pick<DOMAttributes<HTMLElement>, EventHandlerName>;
 export declare type GetEventHandlerByName<H extends EventHandlerName> = NonNullable<EventHandlers[H]>;
 export declare type GetEventByName<H extends EventHandlerName> = GetEventHandlerByName<H> extends (event: infer E) => void ? E : never;
-export declare type Handler<H extends EventHandlerName> = (event: GetEventByName<H>, editor: ReactEditor & HistoryEditor, next: VoidFunction) => void;
+export declare type Handler<H extends EventHandlerName> = (event: GetEventByName<H>, editor: ReactEditor, next: VoidFunction) => void;
 export declare type Handlers = {
     [H in EventHandlerName]?: Handler<H>;
 };

package/core/typings/renderer.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { RenderElementProps as SlateReactRenderElementProps, RenderLeafProps as SlateRenderLeafProps } from 'slate-react';
-import { Element } from '@quadrats/core';
+import { QuadratsElement } from '@quadrats/core';
 import { CreateRenderElementOptionsBase, CreateRenderMarkOptionsBase, RenderElementPropsBase, RenderLeafPropsBase, RenderMarkPropsBase } from '@quadrats/react/_internal';
 export declare type RenderLeafProps = RenderLeafPropsBase & Pick<SlateRenderLeafProps, 'attributes'>;
 export declare type RenderMarkProps<M> = RenderMarkPropsBase<M>;
-export declare type RenderElementProps<E extends Element = Element> = RenderElementPropsBase<E> & Pick<SlateReactRenderElementProps, 'attributes'>;
+export declare type RenderElementProps<E extends QuadratsElement = QuadratsElement> = RenderElementPropsBase<E> & Pick<SlateReactRenderElementProps, 'attributes'>;
 export declare type CreateRenderMarkOptions<M> = CreateRenderMarkOptionsBase<M, RenderMarkProps<M>>;
-export declare type CreateRenderElementOptions<P extends RenderElementProps<Element>> = CreateRenderElementOptionsBase<P>;
+export declare type CreateRenderElementOptions<P extends RenderElementProps<QuadratsElement>> = CreateRenderElementOptionsBase<P>;
 export interface WithCreateRenderLeaf<P extends any[] = []> {
     createRenderLeaf: (...params: P) => (props: RenderLeafProps) => JSX.Element;
 }

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

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

package/divider/toolbar/index.cjs.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useDividerTool(controller) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.insertDivider(editor),
     };

package/divider/toolbar/useDividerTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useDividerTool(controller) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.insertDivider(editor),
     };

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

@@ -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<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeEmbed<Provider extends string>(options: CreateJsxSerializeEmbedOptions<Provider>): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/embed/toolbar/index.cjs.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useEmbedTool(controller, providers, getPlaceholder, startToolInput) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     const defaultStartToolInput = toolbar.useStartToolInput();
     const start = startToolInput
         ? (inputConfig) => startToolInput(editor, inputConfig)

package/embed/toolbar/useEmbedTool.js

@@ -1,8 +1,8 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 import { useStartToolInput } from '@quadrats/react/toolbar';
 
 function useEmbedTool(controller, providers, getPlaceholder, startToolInput) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     const defaultStartToolInput = useStartToolInput();
     const start = startToolInput
         ? (inputConfig) => startToolInput(editor, inputConfig)

package/file-uploader/hooks/useFileUploader.js

@@ -1,9 +1,9 @@
 import { useState, useLayoutEffect } from 'react';
-import { useEditor, ReactEditor } from '@quadrats/react';
+import { useSlateStatic, ReactEditor } from '@quadrats/react';
 
 function useFileUploader(element) {
     const [percentage, setPercentage] = useState(0);
-    const editor = useEditor();
+    const editor = useSlateStatic();
     useLayoutEffect(() => element.register(() => ReactEditor.findPath(editor, element), setPercentage), [element]);
     return {
         percentage,

package/file-uploader/index.cjs.js

@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useFileUploader(element) {
     const [percentage, setPercentage] = React.useState(0);
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     React.useLayoutEffect(() => element.register(() => react.ReactEditor.findPath(editor, element), setPercentage), [element]);
     return {
         percentage,

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

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useFileUploaderTool(controller, options) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.upload(editor, options),
     };

package/file-uploader/toolbar/useFileUploaderTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useFileUploaderTool(controller, options) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.upload(editor, options),
     };

package/footnote/index.cjs.js

@@ -37,10 +37,10 @@ function useFootnotes(editor) {
         match: (node) => node.type === footnote.FOOTNOTE_TYPE,
     }));
     const footnotes = footnoteNodes.map((node) => {
-        var _a;
+        var _a, _b;
         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(''),
+            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,
         };
@@ -50,11 +50,12 @@ function useFootnotes(editor) {
 
 function deepSearchFootnoteFromNodes(nodes) {
     const result = nodes.flatMap((element) => {
-        var _a;
+        var _a, _b, _c, _d;
         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 : [];
+        const child = core.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;
 }

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

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

package/footnote/useFootnotes.js

@@ -7,10 +7,10 @@ function useFootnotes(editor) {
         match: (node) => node.type === FOOTNOTE_TYPE,
     }));
     const footnotes = footnoteNodes.map((node) => {
-        var _a;
+        var _a, _b;
         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(''),
+            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,
         };

package/footnote/useFootnotesFromNodes.d.ts

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

package/footnote/useFootnotesFromNodes.js

@@ -3,11 +3,12 @@ import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
 
 function deepSearchFootnoteFromNodes(nodes) {
     const result = nodes.flatMap((element) => {
-        var _a;
+        var _a, _b, _c, _d;
         const curNode = Node.isNode(element)
             && element.type === FOOTNOTE_TYPE ? element : null;
-        const child = 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 : [];
+        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;
 }

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/image/components/Image.js

@@ -1,11 +1,11 @@
 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

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/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;

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;
@@ -120,7 +120,7 @@ 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
@@ -135,7 +135,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;

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/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));
@@ -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/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>;

package/link/jsx-serializer/createJsxSerializeLink.d.ts

@@ -2,4 +2,4 @@
 import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
 import { JsxSerializeLinkElementProps } from './typings';
 export declare type CreateJsxSerializeLinkOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeLinkElementProps>>;
-export declare function createJsxSerializeLink(options?: CreateJsxSerializeLinkOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeLink(options?: CreateJsxSerializeLinkOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/link/toolbar/index.cjs.js

@@ -28,7 +28,7 @@ function useLinkTool(controller, options = {}) {
 }
 
 function useUnlinkTool(controller) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.unwrapLink(editor),
     };

package/link/toolbar/useUnlinkTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useUnlinkTool(controller) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.unwrapLink(editor),
     };

package/list/jsx-serializer/createJsxSerializeList.d.ts

@@ -5,4 +5,4 @@ import { JsxSerializeListElementProps } from './typings';
 export declare type CreateJsxSerializeListOptions = {
     [key in ListTypeKey]?: CreateJsxSerializeElementOptions<JsxSerializeListElementProps>;
 };
-export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,19 +20,19 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.4.5",
-    "@quadrats/core": "^0.4.5",
-    "@quadrats/icons": "^0.4.0",
-    "@quadrats/locales": "^0.4.0",
-    "@quadrats/theme": "^0.4.0",
-    "@quadrats/utils": "^0.4.0",
-    "@types/is-hotkey": "^0.1.2",
-    "@types/react-transition-group": "^4.2.4",
+    "@quadrats/common": "^0.5.1",
+    "@quadrats/core": "^0.5.1",
+    "@quadrats/icons": "^0.5.0",
+    "@quadrats/locales": "^0.5.0",
+    "@quadrats/theme": "^0.5.0",
+    "@quadrats/utils": "^0.5.0",
+    "@types/is-hotkey": "^0.1.7",
+    "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "is-hotkey": "^0.2.0",
-    "react-transition-group": "^4.3.0",
-    "slate-react": "^0.59.0",
-    "tslib": "^2.0.3"
+    "react-transition-group": "^4.4.2",
+    "slate-react": "^0.72.1",
+    "tslib": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.6",

package/paragraph/createRenderParagraphElement.d.ts

@@ -5,4 +5,4 @@ export declare type RenderParagraphElementProps = RenderElementProps<ParagraphEl
 export interface CreateRenderParagraphElementOptions {
     render?: (props: RenderParagraphElementProps) => JSX.Element | null | undefined;
 }
-export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps<import("@quadrats/core").Element>) => JSX.Element | null | undefined;
+export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/paragraph/jsx-serializer/createJsxSerializeParagraph.d.ts

@@ -2,4 +2,4 @@
 import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
 import { JsxSerializeParagraphProps } from './typings';
 export declare type CreateJsxSerializeParagraphOptions = Partial<Omit<CreateJsxSerializeElementOptions<JsxSerializeParagraphProps>, 'type'>>;
-export declare function createJsxSerializeParagraph(options?: CreateJsxSerializeParagraphOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeParagraph(options?: CreateJsxSerializeParagraphOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/read-more/jsx-serializer/createJsxSerializeReadMore.d.ts

@@ -2,4 +2,4 @@
 import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
 import { JsxSerializeReadMoreProps } from './typings';
 export declare type CreateJsxSerializeReadMoreOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeReadMoreProps>>;
-export declare function createJsxSerializeReadMore(options?: CreateJsxSerializeReadMoreOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeReadMore(options?: CreateJsxSerializeReadMoreOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/read-more/toolbar/index.cjs.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useReadMoreTool(controller) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.insertReadMore(editor),
     };

package/read-more/toolbar/useReadMoreTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useReadMoreTool(controller) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.insertReadMore(editor),
     };