@quadrats/react 0.5.9 → 0.6.2

package/blockquote/createReactBlockquote.d.ts

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

package/blockquote/createReactBlockquote.js

@@ -1,18 +1,30 @@
 import isHotkey from 'is-hotkey';
 import { createBlockquote } from '@quadrats/common/blockquote';
 import { createRenderElement } from '@quadrats/react';
-import { createOnKeyDownBreak } from '@quadrats/react/line-break';
+import { createOnKeyDownBreak, COMMON_SOFT_BREAK_HOTKEY } from '@quadrats/react/line-break';
 import { BLOCKQUOTE_HOTKEY } from './constants.js';
 import { defaultRenderBlockquoteElement } from './defaultRenderBlockquoteElement.js';
+import { getNodesByTypes, PARAGRAPH_TYPE, Editor, Transforms } from '@quadrats/core';
 
+const BLOCKQUOTE_EXIT_BREAK_HOTKEY = 'enter';
 function createReactBlockquote(options = {}) {
     const core = createBlockquote(options);
     const { type } = core;
     const onKeyDownBreak = createOnKeyDownBreak({
+        exitBreak: {
+            rules: [
+                {
+                    hotkey: BLOCKQUOTE_EXIT_BREAK_HOTKEY,
+                    match: {
+                        includeTypes: [type],
+                    },
+                },
+            ],
+        },
         softBreak: {
             rules: [
                 {
-                    hotkey: 'enter',
+                    hotkey: COMMON_SOFT_BREAK_HOTKEY,
                     match: {
                         includeTypes: [type],
                     },
@@ -26,10 +38,32 @@ function createReactBlockquote(options = {}) {
                     core.toggleBlockquote(editor);
                 }
                 else {
+                    if (editor.selection && isHotkey(BLOCKQUOTE_EXIT_BREAK_HOTKEY, event)) {
+                        const [highestIsQuote] = getNodesByTypes(editor, [type], { mode: 'highest' });
+                        const [selectInParagraph] = getNodesByTypes(editor, [PARAGRAPH_TYPE], { at: editor.selection });
+                        if (highestIsQuote && selectInParagraph) {
+                            const [, quotePath] = highestIsQuote;
+                            const isEnd = Editor.isEnd(editor, Editor.point(editor, editor.selection), quotePath);
+                            const [paragraphNode] = selectInParagraph;
+                            const text = paragraphNode.children[0].text;
+                            const isEmptyParagraph = text.length === 0;
+                            // move out the empty paragraph if end of the quote
+                            if (isEnd && isEmptyParagraph) {
+                                event.preventDefault();
+                                const moveto = quotePath.slice();
+                                moveto[(quotePath.length - 1)] += 1;
+                                Transforms.moveNodes(editor, {
+                                    at: editor.selection,
+                                    to: moveto,
+                                });
+                                return;
+                            }
+                        }
+                    }
                     onKeyDownBreak(event, editor, next);
                 }
             },
         }), createRenderElement: ({ render = defaultRenderBlockquoteElement } = {}) => createRenderElement({ type, render }) });
 }
 
-export { createReactBlockquote };
+export { BLOCKQUOTE_EXIT_BREAK_HOTKEY, createReactBlockquote };

package/blockquote/defaultRenderBlockquoteElement.js

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

package/blockquote/index.cjs.js

@@ -7,6 +7,7 @@ var isHotkey = require('is-hotkey');
 var blockquote = require('@quadrats/common/blockquote');
 var react = require('@quadrats/react');
 var lineBreak = require('@quadrats/react/line-break');
+var core = require('@quadrats/core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -20,16 +21,27 @@ var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
  */
 const BLOCKQUOTE_HOTKEY = 'ctrl+opt+q';
 
-const defaultRenderBlockquoteElement = ({ attributes, children, }) => React__default.createElement("blockquote", Object.assign({}, attributes), children);
+const defaultRenderBlockquoteElement = ({ attributes, children, }) => React__default.createElement("blockquote", Object.assign({}, attributes, { className: "qdr-blockquote" }), children);
 
+const BLOCKQUOTE_EXIT_BREAK_HOTKEY = 'enter';
 function createReactBlockquote(options = {}) {
-    const core = blockquote.createBlockquote(options);
-    const { type } = core;
+    const core$1 = blockquote.createBlockquote(options);
+    const { type } = core$1;
     const onKeyDownBreak = lineBreak.createOnKeyDownBreak({
+        exitBreak: {
+            rules: [
+                {
+                    hotkey: BLOCKQUOTE_EXIT_BREAK_HOTKEY,
+                    match: {
+                        includeTypes: [type],
+                    },
+                },
+            ],
+        },
         softBreak: {
             rules: [
                 {
-                    hotkey: 'enter',
+                    hotkey: lineBreak.COMMON_SOFT_BREAK_HOTKEY,
                     match: {
                         includeTypes: [type],
                     },
@@ -37,12 +49,34 @@ function createReactBlockquote(options = {}) {
             ],
         },
     });
-    return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = BLOCKQUOTE_HOTKEY } = {}) => ({
+    return Object.assign(Object.assign({}, core$1), { createHandlers: ({ hotkey = BLOCKQUOTE_HOTKEY } = {}) => ({
             onKeyDown: (event, editor, next) => {
                 if (isHotkey__default(hotkey, event)) {
-                    core.toggleBlockquote(editor);
+                    core$1.toggleBlockquote(editor);
                 }
                 else {
+                    if (editor.selection && isHotkey__default(BLOCKQUOTE_EXIT_BREAK_HOTKEY, event)) {
+                        const [highestIsQuote] = core.getNodesByTypes(editor, [type], { mode: 'highest' });
+                        const [selectInParagraph] = core.getNodesByTypes(editor, [core.PARAGRAPH_TYPE], { at: editor.selection });
+                        if (highestIsQuote && selectInParagraph) {
+                            const [, quotePath] = highestIsQuote;
+                            const isEnd = core.Editor.isEnd(editor, core.Editor.point(editor, editor.selection), quotePath);
+                            const [paragraphNode] = selectInParagraph;
+                            const text = paragraphNode.children[0].text;
+                            const isEmptyParagraph = text.length === 0;
+                            // move out the empty paragraph if end of the quote
+                            if (isEnd && isEmptyParagraph) {
+                                event.preventDefault();
+                                const moveto = quotePath.slice();
+                                moveto[(quotePath.length - 1)] += 1;
+                                core.Transforms.moveNodes(editor, {
+                                    at: editor.selection,
+                                    to: moveto,
+                                });
+                                return;
+                            }
+                        }
+                    }
                     onKeyDownBreak(event, editor, next);
                 }
             },

package/blockquote/typings.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { BlockquoteElement, Blockquote } from '@quadrats/common/blockquote';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { Editor } from '@quadrats/core';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
 export declare type RenderBlockquoteElementProps = RenderElementProps<BlockquoteElement>;
 export interface ReactBlockquoteCreateHandlersOptions {
     /**
@@ -11,5 +12,5 @@ export interface ReactBlockquoteCreateHandlersOptions {
 export interface ReactBlockquoteCreateRenderElementOptions {
     render?: (props: RenderBlockquoteElementProps) => JSX.Element | null | undefined;
 }
-export interface ReactBlockquote extends Blockquote<ReactEditor>, WithCreateHandlers<[ReactBlockquoteCreateHandlersOptions?]>, WithCreateRenderElement<[ReactBlockquoteCreateRenderElementOptions?]> {
+export interface ReactBlockquote extends Blockquote<Editor>, WithCreateHandlers<[ReactBlockquoteCreateHandlersOptions?]>, WithCreateRenderElement<[ReactBlockquoteCreateRenderElementOptions?]> {
 }

package/core/composeHandlers.d.ts

@@ -1,8 +1,8 @@
-import { ReactEditor } from 'slate-react';
+import { QuadratsReactEditor } from '..';
 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) => EventHandlers;
+}[]): (editor: QuadratsReactEditor) => EventHandlers;

package/core/createReactEditor.d.ts

@@ -1,2 +1,2 @@
-import { ReactEditor } from 'slate-react';
-export declare function createReactEditor(): ReactEditor;
+import { QuadratsReactEditor } from '..';
+export declare function createReactEditor(): QuadratsReactEditor;

package/core/index.d.ts

@@ -1,6 +1,7 @@
-import { QuadratsElement, QuadratsText } from '@quadrats/core';
+import { QuadratsEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
 import { ReactEditor } from 'slate-react';
 export { useSlateStatic, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
+export { Editor } from '@quadrats/core';
 export * from './typings/handler';
 export * from './typings/renderer';
 export * from './typings/with';
@@ -16,9 +17,11 @@ export { createReactEditor } from './createReactEditor';
 export { createRenderElement } from './createRenderElement';
 export { createRenderElements } from './createRenderElements';
 export { createRenderMark } from './createRenderMark';
+export interface QuadratsReactEditor extends QuadratsEditor, ReactEditor {
+}
 declare module 'slate' {
     interface CustomTypes {
-        Editor: ReactEditor;
+        Editor: QuadratsReactEditor;
         Element: QuadratsElement;
         Text: QuadratsText;
     }

package/core/typings/handler.d.ts

@@ -1,12 +1,12 @@
+import { Editor } from '@quadrats/core';
 import { DOMAttributes, EventHandler } from 'react';
-import { ReactEditor } from 'slate-react';
 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, next: VoidFunction) => void;
+export declare type Handler<H extends EventHandlerName> = (event: GetEventByName<H>, editor: Editor, next: VoidFunction) => void;
 export declare type Handlers = {
     [H in EventHandlerName]?: Handler<H>;
 };

package/core/typings/with.d.ts

@@ -1,4 +1,4 @@
-import { ReactEditor } from 'slate-react';
+import { QuadratsReactEditor } from '..';
 export interface ReactWithable<R = undefined> {
-    with: <T extends ReactEditor>(editor: T) => R extends undefined ? T : T & R;
+    with: <T extends QuadratsReactEditor>(editor: T) => R extends undefined ? T : T & R;
 }

package/divider/defaultRenderDividerElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const defaultRenderDividerElement = ({ attributes, children }) => (React.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
+const defaultRenderDividerElement = ({ attributes, children }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
     React.createElement("hr", null),
     children));
 

package/divider/index.cjs.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const defaultRenderDividerElement = ({ attributes, children }) => (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
+const defaultRenderDividerElement = ({ attributes, children }) => (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
     React__default.createElement("hr", null),
     children));
 

package/divider/typings.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { Divider, DividerElement } from '@quadrats/common/divider';
-import { WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { Editor } from '@quadrats/core';
+import { WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
 export declare type RenderDividerElementProps = RenderElementProps<DividerElement>;
 export interface ReactDividerCreateRenderElementOptions {
     render?: (props: RenderDividerElementProps) => JSX.Element | null | undefined;
 }
-export interface ReactDivider extends Divider<ReactEditor>, WithCreateRenderElement<[ReactDividerCreateRenderElementOptions?]> {
+export interface ReactDivider extends Divider<Editor>, WithCreateRenderElement<[ReactDividerCreateRenderElementOptions?]> {
 }

package/embed/components/VideoIframe.d.ts

@@ -7,5 +7,5 @@ export interface VideoIframeProps<E extends EmbedElement> {
     data: string;
     element: E;
 }
-declare function VideoIframe<E extends EmbedElement>({ attributes, children, data: src }: VideoIframeProps<E>): JSX.Element;
+declare function VideoIframe<E extends EmbedElement>({ attributes, children, data: src, }: VideoIframeProps<E>): JSX.Element;
 export default VideoIframe;

package/embed/components/VideoIframe.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { composeRefs } from '@quadrats/react/utils';
 import { useVideoIframeSize } from '../hooks/useVideoIframeSize.js';
 
-function VideoIframe({ attributes, children, data: src }) {
+function VideoIframe({ attributes, children, data: src, }) {
     const { ref } = attributes || {};
     const { ref: containerRef, size } = useVideoIframeSize();
     const composedRef = ref ? composeRefs([ref, containerRef]) : containerRef;
-    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-video", contentEditable: false }),
         React.createElement("div", { style: size },
             React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "100%" })),
         attributes ? children : undefined));

package/embed/index.cjs.js

@@ -32,11 +32,11 @@ function useVideoIframeSize() {
     };
 }
 
-function VideoIframe({ attributes, children, data: src }) {
+function VideoIframe({ attributes, children, data: src, }) {
     const { ref } = attributes || {};
     const { ref: containerRef, size } = useVideoIframeSize();
     const composedRef = ref ? utils.composeRefs([ref, containerRef]) : containerRef;
-    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-video", contentEditable: false }),
         React__default.createElement("div", { style: size },
             React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "100%" })),
         attributes ? children : undefined));

package/embed/renderers/facebook/components/Facebook.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function Facebook({ attributes, children, data: { url, width, height } }) {
-    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-facebook", contentEditable: false }),
         React.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
                 border: 0,
                 overflow: 'hidden',

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Facebook({ attributes, children, data: { url, width, height } }) {
-    return (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false }),
+    return (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-facebook", contentEditable: false }),
         React__default.createElement("iframe", { title: url, src: url, width: width, height: height, style: {
                 border: 0,
                 overflow: 'hidden',

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

@@ -3,7 +3,7 @@ import { useLoadInstagramEmbedApi } from '../hooks/useLoadInstagramEmbedApi.js';
 
 function Instagram({ attributes, children, data: permalink }) {
     useLoadInstagramEmbedApi(permalink);
-    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,
         } }),

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

@@ -34,7 +34,7 @@ function useLoadInstagramEmbedApi(permalink) {
 
 function Instagram({ attributes, children, data: permalink }) {
     useLoadInstagramEmbedApi(permalink);
-    return (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
+    return (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-instagram", contentEditable: false, style: {
             display: 'flex',
             marginBottom: -12,
         } }),

package/embed/renderers/podcast-apple/components/PodcastApple.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
 import { PodcastAppleEmbedElement } from '@quadrats/common/embed/strategies/podcast-apple';
 import { RenderElementProps } from '@quadrats/react';
 export interface PodcastAppleProps {
     attributes?: RenderElementProps['attributes'];
-    children?: any;
     data: string;
     element: PodcastAppleEmbedElement;
 }
-declare function PodcastApple({ attributes, children, data: src }: PodcastAppleProps): JSX.Element;
+declare function PodcastApple({ attributes, children, data: src }: PropsWithChildren<PodcastAppleProps>): JSX.Element;
 export default PodcastApple;

package/embed/renderers/podcast-apple/components/PodcastApple.js

@@ -4,7 +4,7 @@ import { composeRefs } from '@quadrats/react/utils';
 function PodcastApple({ attributes, children, data: src }) {
     const containerRef = useRef(null);
     const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
-    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-podcast-apple", ref: composedRef, contentEditable: false }),
         React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
         attributes ? children : undefined));
 }

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

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function PodcastApple({ attributes, children, data: src }) {
     const containerRef = React.useRef(null);
     const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
-    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+    return (React__default.createElement("div", Object.assign({}, attributes, { className: "qdr-embed-podcast-apple", ref: composedRef, contentEditable: false }),
         React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "450px" }),
         attributes ? children : undefined));
 }

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

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

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

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

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

@@ -6,7 +6,7 @@ function Twitter({ attributes, children, data: tweetId }) {
     const tweetContainerRef = useRef(null);
     const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, tweetContainerRef]);
     useLoadTwitterEmbedApi(tweetId, tweetContainerRef);
-    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-twitter", contentEditable: false }), attributes ? children : undefined));
 }
 
 export { Twitter as default };

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

@@ -43,7 +43,7 @@ function Twitter({ attributes, children, data: tweetId }) {
     const tweetContainerRef = React.useRef(null);
     const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, tweetContainerRef]);
     useLoadTwitterEmbedApi(tweetId, tweetContainerRef);
-    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-twitter", contentEditable: false }), attributes ? children : undefined));
 }
 
 const defaultRenderTwitterEmbedElement = (props) => React__default.createElement(Twitter, Object.assign({}, props));

package/embed/toolbar/EmbedToolbarIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ReactEditor } from '@quadrats/react';
+import { Editor } from '@quadrats/react';
 import { InputWidgetConfig } from '@quadrats/common/input-widget';
 import { ReactEmbed } from '@quadrats/react/embed';
 import { ToolbarIconProps } from '@quadrats/react/toolbar';
@@ -9,7 +9,7 @@ export interface EmbedToolbarIconProps<Provider extends string> extends Omit<Too
      * The providers supported by this icon.
      */
     providers: Provider[];
-    startToolInput?: (editor: ReactEditor, inputConfig: InputWidgetConfig) => void;
+    startToolInput?: (editor: Editor, inputConfig: InputWidgetConfig) => void;
 }
 declare function EmbedToolbarIcon<Provider extends string>(props: EmbedToolbarIconProps<Provider>): JSX.Element;
 export default EmbedToolbarIcon;

package/embed/toolbar/useEmbedTool.d.ts

@@ -1,6 +1,6 @@
 import { InputWidgetConfig } from '@quadrats/common/input-widget';
-import { ReactEditor } from '@quadrats/react';
+import { Editor } from '@quadrats/react';
 import { ReactEmbed } from '@quadrats/react/embed';
-export declare function useEmbedTool<P extends string>(controller: ReactEmbed<P>, providers: P[], getPlaceholder: InputWidgetConfig['getPlaceholder'], startToolInput?: (editor: ReactEditor, inputConfig: InputWidgetConfig) => void): {
+export declare function useEmbedTool<P extends string>(controller: ReactEmbed<P>, providers: P[], getPlaceholder: InputWidgetConfig['getPlaceholder'], startToolInput?: (editor: Editor, inputConfig: InputWidgetConfig) => void): {
     onClick: () => void;
 };

package/embed/typings.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Embed, EmbedElement } from '@quadrats/common/embed';
-import { WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export interface WithEmbedRenderData<RenderData> {
     /**
      * The data deserialized from element by corresponding strategy.
@@ -10,5 +10,5 @@ export interface WithEmbedRenderData<RenderData> {
 export interface RenderEmbedElementProps<EmbedData extends Record<string, unknown>, RenderData> extends RenderElementProps<EmbedElement & EmbedData>, WithEmbedRenderData<RenderData> {
 }
 export declare type ReactEmbedCreateRenderElementOptions<Provider extends string> = Record<Provider, (props: RenderEmbedElementProps<any, any>) => JSX.Element | null | undefined>;
-export interface ReactEmbed<Provider extends string> extends Embed<Provider, ReactEditor>, WithCreateRenderElement<[ReactEmbedCreateRenderElementOptions<Provider>]> {
+export interface ReactEmbed<Provider extends string> extends Embed<Provider, Editor>, WithCreateRenderElement<[ReactEmbedCreateRenderElementOptions<Provider>]> {
 }

package/file-uploader/typings.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { FileUploader, FileUploaderElement } from '@quadrats/common/file-uploader';
-import { ReactEditor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
+import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
 export declare type RenderFileUploaderElementProps = RenderElementProps<FileUploaderElement>;
 export declare type RenderFileUploaderElement = (props: RenderFileUploaderElementProps) => JSX.Element | null | undefined;
 export interface FileUploaderCreateRenderElementOptions {
     render?: RenderFileUploaderElement;
 }
-export declare type ReactFileUploader = FileUploader<ReactEditor> & WithCreateRenderElement<[FileUploaderCreateRenderElementOptions?]>;
+export declare type ReactFileUploader = FileUploader<Editor> & WithCreateRenderElement<[FileUploaderCreateRenderElementOptions?]>;

package/footnote/defaultRenderFootnoteElement.js

@@ -8,8 +8,8 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     const { footnote, index } = element;
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { placement: placement, popup: footnote },
-            React.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
-        React.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+            React.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes, { className: "qdr-footnote-text" }), children)),
+        React.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 
 export { defaultRenderFootnoteElement };

package/footnote/index.cjs.js

@@ -19,8 +19,8 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     const { footnote, index } = element;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(components.Tooltip, { placement: placement, popup: footnote },
-            React__default.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
-        React__default.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+            React__default.createElement("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes, { className: "qdr-footnote-text" }), children)),
+        React__default.createElement("sup", Object.assign({}, attributes, { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 
 function createReactFootnote(options = {}) {

package/footnote/typings.d.ts

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

package/footnote/useFootnotes.d.ts

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

package/heading/defaultRenderHeadingElement.js

@@ -13,7 +13,7 @@ const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
     if (!Component) {
         return null;
     }
-    return React.createElement(Component, Object.assign({}, attributes), children);
+    return React.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}` }), children);
 };
 
 export { HEADING_COMPONENTS, defaultRenderHeadingElement };

package/heading/index.cjs.js

@@ -36,7 +36,7 @@ const defaultRenderHeadingElement = ({ attributes, children, element, }) => {
     if (!Component) {
         return null;
     }
-    return React__default.createElement(Component, Object.assign({}, attributes), children);
+    return React__default.createElement(Component, Object.assign({}, attributes, { className: `qdr-${Component}` }), children);
 };
 
 function createReactHeading(options = {}) {

package/heading/typings.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } 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, ReactEditor>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
+export interface ReactHeading<Level extends HeadingLevel> extends Heading<Level, Editor>, WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>, WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {
 }

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, ReactEditor } from '@quadrats/react';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable, Editor } 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, ReactEditor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>, ReactWithable {
+export interface ReactImage<Hosting extends string> extends Omit<Image<Hosting, Editor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>, ReactWithable {
 }

package/index.cjs.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var configs = require('@quadrats/react/configs');
 var slateReact = require('slate-react');
+var core = require('@quadrats/core');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
-var core = require('@quadrats/core');
 var _internal = require('@quadrats/react/_internal');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
@@ -140,6 +140,7 @@ exports.useQuadrats = slateReact.useSlate;
 exports.useReadOnly = slateReact.useReadOnly;
 exports.useSelected = slateReact.useSelected;
 exports.useSlateStatic = slateReact.useSlateStatic;
+exports.Editor = core.Editor;
 exports.DefaultElement = DefaultElement;
 exports.DefaultLeaf = DefaultLeaf;
 exports.Editable = Editable;

package/index.js

@@ -1,5 +1,6 @@
 export * from '@quadrats/react/configs';
 export { ReactEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected, useSlateStatic } from 'slate-react';
+export { Editor } from '@quadrats/core';
 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/components/InputBlock.js

@@ -6,7 +6,7 @@ function InputBlock(props) {
     const { inputRef, onBlur, onKeyDown, placeholder, } = useInputBlock(props);
     return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
             display: 'flex',
-        } }),
+        }, className: "qdr-input-block" }),
         React.createElement("input", { ref: inputRef, onBlur: onBlur, onKeyDown: onKeyDown, placeholder: placeholder, style: {
                 display: 'block',
                 color: 'currentColor',

package/input-block/index.cjs.js

@@ -60,7 +60,7 @@ function InputBlock(props) {
     const { inputRef, onBlur, onKeyDown, placeholder, } = useInputBlock(props);
     return (React__default.createElement("div", Object.assign({}, attributes, { contentEditable: false, style: {
             display: 'flex',
-        } }),
+        }, className: "qdr-input-block" }),
         React__default.createElement("input", { ref: inputRef, onBlur: onBlur, onKeyDown: onKeyDown, placeholder: placeholder, style: {
                 display: 'block',
                 color: 'currentColor',

package/input-block/typings.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { InputBlock, InputBlockElement } from '@quadrats/common/input-block';
-import { ReactEditor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
+import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
 export declare type RenderInputBlockElementProps = RenderElementProps<InputBlockElement> & Pick<ReactInputBlock, 'remove' | 'confirm'>;
 export declare type RenderInputBlockElement = (props: RenderInputBlockElementProps) => JSX.Element | null | undefined;
 export interface ReactInputBlockCreateRenderElementOptions {
     render?: RenderInputBlockElement;
 }
-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;
+export interface ReactInputBlock extends Omit<InputBlock<Editor>, 'remove' | 'confirm'>, WithCreateRenderElement<[ReactInputBlockCreateRenderElementOptions?]> {
+    remove(editor: Editor, element: InputBlockElement): void;
+    confirm(editor: Editor, element: InputBlockElement, value: string): void;
 }

package/link/defaultRenderLinkElement.js

@@ -7,7 +7,7 @@ import { Tooltip } from '@quadrats/react/components';
 const defaultRenderLinkElement = ({ attributes, children, element, placement = 'bottom', target = '_blank', }) => {
     const { url } = element;
     return (React.createElement(Tooltip, { placement: placement, popup: url },
-        React.createElement("a", Object.assign({}, attributes, { href: url, target: target }), children)));
+        React.createElement("a", Object.assign({}, attributes, { className: "qdr-link", href: url, target: target }), children)));
 };
 
 export { defaultRenderLinkElement };

package/link/index.cjs.js

@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const defaultRenderLinkElement = ({ attributes, children, element, placement = 'bottom', target = '_blank', }) => {
     const { url } = element;
     return (React__default.createElement(components.Tooltip, { placement: placement, popup: url },
-        React__default.createElement("a", Object.assign({}, attributes, { href: url, target: target }), children)));
+        React__default.createElement("a", Object.assign({}, attributes, { className: "qdr-link", href: url, target: target }), children)));
 };
 
 function createReactLink(options = {}) {

package/link/typings.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Link, LinkElement } from '@quadrats/common/link';
-import { RenderElementProps, ReactWithable, WithCreateRenderElement, ReactEditor } from '@quadrats/react';
+import { RenderElementProps, ReactWithable, WithCreateRenderElement, Editor } from '@quadrats/react';
 export declare type RenderLinkElementProps = RenderElementProps<LinkElement>;
 export interface ReactLinkCreateRenderElementOptions {
     render?: (props: RenderLinkElementProps) => JSX.Element | null | undefined;
 }
-export interface ReactLink extends Omit<Link<ReactEditor>, 'with'>, WithCreateRenderElement<[ReactLinkCreateRenderElementOptions?]>, ReactWithable {
+export interface ReactLink extends Omit<Link<Editor>, 'with'>, WithCreateRenderElement<[ReactLinkCreateRenderElementOptions?]>, ReactWithable {
 }

package/list/defaultRenderListElements.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const defaultRenderListElements = {
-    ol: ({ attributes, children }) => React.createElement("ol", Object.assign({}, attributes), children),
-    ul: ({ attributes, children }) => React.createElement("ul", Object.assign({}, attributes), children),
-    li: ({ attributes, children }) => React.createElement("li", Object.assign({}, attributes), children),
+    ol: ({ attributes, children }) => React.createElement("ol", Object.assign({}, attributes, { className: "qdr-ol" }), children),
+    ul: ({ attributes, children }) => React.createElement("ul", Object.assign({}, attributes, { className: "qdr-ul" }), children),
+    li: ({ attributes, children }) => React.createElement("li", Object.assign({}, attributes, { className: "qdr-li" }), children),
 };
 
 export { defaultRenderListElements };

package/list/index.cjs.js

@@ -11,9 +11,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const defaultRenderListElements = {
-    ol: ({ attributes, children }) => React__default.createElement("ol", Object.assign({}, attributes), children),
-    ul: ({ attributes, children }) => React__default.createElement("ul", Object.assign({}, attributes), children),
-    li: ({ attributes, children }) => React__default.createElement("li", Object.assign({}, attributes), children),
+    ol: ({ attributes, children }) => React__default.createElement("ol", Object.assign({}, attributes, { className: "qdr-ol" }), children),
+    ul: ({ attributes, children }) => React__default.createElement("ul", Object.assign({}, attributes, { className: "qdr-ul" }), children),
+    li: ({ attributes, children }) => React__default.createElement("li", Object.assign({}, attributes, { className: "qdr-li" }), children),
 };
 
 function createReactList(options = {}) {

package/list/typings.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { List, ListElement, ListTypeKey } from '@quadrats/common/list';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export declare type RenderListElementProps = RenderElementProps<ListElement>;
 export declare type ReactListCreateRenderElementOptions = {
     [key in ListTypeKey]?: (props: RenderListElementProps) => JSX.Element | null | undefined;
 };
-export interface ReactList extends List<ReactEditor>, WithCreateHandlers, WithCreateRenderElement<[ReactListCreateRenderElementOptions?]> {
+export interface ReactList extends List<Editor>, WithCreateHandlers, WithCreateRenderElement<[ReactListCreateRenderElementOptions?]> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.9",
+  "version": "0.6.2",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,18 +20,18 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.5.9",
-    "@quadrats/core": "^0.5.9",
-    "@quadrats/icons": "^0.5.0",
-    "@quadrats/locales": "^0.5.0",
-    "@quadrats/theme": "^0.5.0",
-    "@quadrats/utils": "^0.5.0",
+    "@quadrats/common": "^0.6.2",
+    "@quadrats/core": "^0.6.2",
+    "@quadrats/icons": "^0.6.0",
+    "@quadrats/locales": "^0.6.0",
+    "@quadrats/theme": "^0.6.0",
+    "@quadrats/utils": "^0.6.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.4.2",
-    "slate-react": "^0.72.1",
+    "slate-react": "^0.65.3",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {

package/paragraph/defaultRenderParagraphElement.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const defaultRenderParagraphElement = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes), children));
+const defaultRenderParagraphElement = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph" }), children));
 
 export { defaultRenderParagraphElement };

package/paragraph/index.cjs.js

@@ -10,14 +10,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const defaultRenderParagraphElement = ({ attributes, children, }) => (React__default.createElement("p", Object.assign({}, attributes), children));
+const defaultRenderParagraphElement = ({ attributes, children, }) => (React__default.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph" }), children));
 
 function createRenderParagraphElement(options = {}) {
     const { render = defaultRenderParagraphElement } = options;
     return react.createRenderElement({ type: core.PARAGRAPH_TYPE, render });
 }
 
-const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React__default.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph__with-line-break-symbol" }), children));
+const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React__default.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol" }), children));
 
 exports.createRenderParagraphElement = createRenderParagraphElement;
 exports.defaultRenderParagraphElement = defaultRenderParagraphElement;

package/paragraph/renderParagraphElementWithSymbol.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph__with-line-break-symbol" }), children));
+const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol" }), children));
 
 export { renderParagraphElementWithSymbol };

package/read-more/typings.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ReadMore, ReadMoreElement } from '@quadrats/common/read-more';
-import { WithCreateRenderElement, RenderElementProps, ReactEditor } from '@quadrats/react';
+import { WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export declare type RenderReadMoreElementProps = RenderElementProps<ReadMoreElement>;
 export interface ReactReadMoreCreateRenderElementOptions {
     render?: (props: RenderReadMoreElementProps) => JSX.Element | null | undefined;
 }
-export interface ReactReadMore extends ReadMore<ReactEditor>, WithCreateRenderElement<[ReactReadMoreCreateRenderElementOptions?]> {
+export interface ReactReadMore extends ReadMore<Editor>, WithCreateRenderElement<[ReactReadMoreCreateRenderElementOptions?]> {
 }

package/toggle-mark/typings.d.ts

@@ -1,5 +1,5 @@
 import { ToggleMark } from '@quadrats/common/toggle-mark';
-import { CreateRenderMarkOptions, ReactEditor, RenderMarkProps, WithCreateHandlers, WithCreateRenderLeaf } from '@quadrats/react';
+import { CreateRenderMarkOptions, Editor, RenderMarkProps, WithCreateHandlers, WithCreateRenderLeaf } from '@quadrats/react';
 export declare type RenderToggleMarkProps = RenderMarkProps<boolean>;
 export interface ReactToggleMarkCreateHandlersOptions {
     /**
@@ -8,5 +8,5 @@ export interface ReactToggleMarkCreateHandlersOptions {
     hotkey?: string;
 }
 export declare type ReactToggleMarkCreateRenderLeafOptions = Partial<Omit<CreateRenderMarkOptions<boolean>, 'type'>>;
-export interface ReactToggleMark extends ToggleMark<ReactEditor>, WithCreateHandlers<[ReactToggleMarkCreateHandlersOptions?]>, WithCreateRenderLeaf<[ReactToggleMarkCreateRenderLeafOptions?]> {
+export interface ReactToggleMark extends ToggleMark<Editor>, WithCreateHandlers<[ReactToggleMarkCreateHandlersOptions?]>, WithCreateRenderLeaf<[ReactToggleMarkCreateRenderLeafOptions?]> {
 }