@quadrats/react 0.4.0 → 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/constants.d.ts

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

package/blockquote/constants.js

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

package/blockquote/createReactBlockquote.d.ts

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

package/blockquote/createReactBlockquote.js

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

package/blockquote/defaultRenderBlockquoteElement.d.ts

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

package/blockquote/defaultRenderBlockquoteElement.js

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

package/blockquote/index.cjs.js

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

package/blockquote/index.d.ts

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

package/blockquote/index.js

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

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

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

package/blockquote/jsx-serializer/createJsxSerializeBlockquote.js

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

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

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

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

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

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

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

package/blockquote/jsx-serializer/index.js

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

package/blockquote/jsx-serializer/package.json

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

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

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

package/blockquote/package.json

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

package/blockquote/toolbar/BlockquoteToolbarIcon.d.ts

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

package/blockquote/toolbar/BlockquoteToolbarIcon.js

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

package/blockquote/toolbar/index.cjs.js

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

package/blockquote/toolbar/index.d.ts

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

package/blockquote/toolbar/index.js

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

package/blockquote/toolbar/package.json

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

package/blockquote/toolbar/useBlockquoteTool.d.ts

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

package/blockquote/toolbar/useBlockquoteTool.js

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

package/blockquote/typings.d.ts

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

package/bold/createReactBold.js

@@ -5,7 +5,7 @@ import { defaultRenderBold } from './defaultRenderBold.js';
 
 const createReactBold = (variant) => createReactToggleMarkCreator(createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold(variant),
+    render: defaultRenderBold,
 })();
 
 export { createReactBold };

package/bold/defaultRenderBold.d.ts

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

package/bold/defaultRenderBold.js

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

package/bold/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const BOLD_HOTKEY = 'mod+b';
 
-const defaultRenderBold = (variant) => (({ children }) => (React__default.createElement("strong", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderBold = ({ children, leaf }) => (React__default.createElement("strong", { className: leaf.boldVariant
+        ? `${bold.BOLD_TYPE}.${leaf.boldVariant}` : `${bold.BOLD_TYPE}` }, children));
 
 const createReactBold = (variant) => toggleMark.createReactToggleMarkCreator(bold.createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold(variant),
+    render: defaultRenderBold,
 })();
 
 exports.BOLD_HOTKEY = BOLD_HOTKEY;

package/bold/jsx-serializer/createJsxSerializeBold.js

@@ -4,7 +4,7 @@ import { defaultRenderBold } from '@quadrats/react/bold';
 
 const createJsxSerializeBold = createJsxSerializeToggleMarkCreator({
     type: BOLD_TYPE,
-    render: defaultRenderBold(),
+    render: defaultRenderBold,
 });
 
 export { createJsxSerializeBold };

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

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

package/bold/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface BoldLeaf extends Text {
+    bold: boolean;
+    boldVariant?: string;
+}

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),
     };