@quadrats/react 0.7.5 → 0.7.7

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElement, ImageFigureTypeKey, ImageTypeKey } from '@quadrats/common/image';
 import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
 export interface JsxSerializeImageFigureElementProps extends JsxSerializeElementProps<ImageFigureElement> {

package/image/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Image, ImageCaptionElement, ImageCaptionTypeKey, ImageElement, ImageFigureElement, ImageFigureTypeKey, ImageTypeKey } from '@quadrats/common/image';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable, Editor } from '@quadrats/react';
 export interface RenderImageFigureElementProps extends RenderElementProps<ImageFigureElement> {

package/index.cjs.js

@@ -146,6 +146,13 @@ exports.createReactEditor = createReactEditor;
 exports.createRenderElement = createRenderElement;
 exports.createRenderElements = createRenderElements;
 exports.createRenderMark = createRenderMark;
+Object.prototype.hasOwnProperty.call(configs, '__proto__') &&
+  !Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+  Object.defineProperty(exports, '__proto__', {
+    enumerable: true,
+    value: configs['__proto__']
+  });
+
 Object.keys(configs).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = configs[k];
 });

package/input-block/createReactInputBlock.js

@@ -10,7 +10,7 @@ function createReactInputBlock(options = {}) {
     return Object.assign(Object.assign({}, core), { remove,
         confirm, createRenderElement: ({ render = defaultRenderInputBlockElement, } = {}) => createRenderElement({
             type,
-            render: (props) => render(Object.assign(Object.assign({}, props), { remove, confirm })),
+            render: props => render(Object.assign(Object.assign({}, props), { remove, confirm })),
         }) });
 }
 

package/input-block/hooks/useInputBlock.d.ts

@@ -1,7 +1,7 @@
 import { KeyboardEvent } from 'react';
 import { RenderInputBlockElementProps } from '../typings';
 export declare function useInputBlock({ confirm, element, remove }: RenderInputBlockElementProps): {
-    inputRef: import("react").RefObject<HTMLInputElement>;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
     onBlur: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
     placeholder: string;

package/input-block/index.cjs.js

@@ -80,7 +80,7 @@ function createReactInputBlock(options = {}) {
     return Object.assign(Object.assign({}, core), { remove,
         confirm, createRenderElement: ({ render = defaultRenderInputBlockElement, } = {}) => react.createRenderElement({
             type,
-            render: (props) => render(Object.assign(Object.assign({}, props), { remove, confirm })),
+            render: props => render(Object.assign(Object.assign({}, props), { remove, confirm })),
         }) });
 }
 

package/input-block/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { InputBlock, InputBlockElement } from '@quadrats/common/input-block';
 import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
 export type RenderInputBlockElementProps = RenderElementProps<InputBlockElement> & Pick<ReactInputBlock, 'remove' | 'confirm'>;

package/italic/jsx-serializer/createJsxSerializeItalic.d.ts

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

package/jsx-serializer/createJsxSerializeElement.d.ts

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

package/jsx-serializer/createJsxSerializeElements.d.ts

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

package/jsx-serializer/createJsxSerializeMark.d.ts

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

package/jsx-serializer/createJsxSerializer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Descendant } from '@quadrats/core';
 import { JsxSerializeElementProps, JsxSerializeLeafProps } from './typings';
 export interface CreateJsxSerializerOptioons {

package/line-break/createOnKeyDownBreak.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import isHotkey from 'is-hotkey';
-import { getAboveBlock, isNodeMatch, isSelectionAtBlockEdge, Path, Transforms, insertSoftBreak, PARAGRAPH_TYPE } from '@quadrats/core';
+import { getAboveBlock, PARAGRAPH_TYPE, isNodeMatch, isSelectionAtBlockEdge, Path, Transforms } from '@quadrats/core';
 
 function createOnKeyDownBreak({ exitBreak, softBreak }) {
     return (event, editor, next) => {
@@ -35,7 +35,7 @@ function createOnKeyDownBreak({ exitBreak, softBreak }) {
                 for (const { hotkey, match } of rules) {
                     if (isHotkey(hotkey, event) && (!match || isNodeMatch(entry, match))) {
                         event.preventDefault();
-                        insertSoftBreak(editor);
+                        editor.insertText('\n');
                         return;
                     }
                 }

package/line-break/index.cjs.js

@@ -39,7 +39,7 @@ function createOnKeyDownBreak({ exitBreak, softBreak }) {
                 for (const { hotkey, match } of rules) {
                     if (isHotkey(hotkey, event) && (!match || core.isNodeMatch(entry, match))) {
                         event.preventDefault();
-                        core.insertSoftBreak(editor);
+                        editor.insertText('\n');
                         return;
                     }
                 }

package/line-break/jsx-serializer/createJsxSerializeLineBreak.d.ts

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

package/line-break/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { IsNodeMatchOptions, LineBreak, LineBreakElement } from '@quadrats/core';
 import { WithCreateRenderElement, RenderElementProps, WithCreateHandlers } from '@quadrats/react';
 export interface ExitBreakRule {

package/link/defaultRenderLinkElement.d.ts

@@ -3,7 +3,7 @@ import { RenderLinkElementProps } from './typings';
 /**
  * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
  */
-export declare const defaultRenderLinkElement: ({ attributes, children, element, placement, target, }: import("@quadrats/react/_internal").RenderElementPropsBase<import("@quadrats/common/link").LinkElement> & Pick<import("slate-react").RenderElementProps, "attributes"> & {
-    placement?: "top" | "bottom" | undefined;
-    target?: string | undefined;
+export declare const defaultRenderLinkElement: ({ attributes, children, element, placement, target, }: RenderLinkElementProps & {
+    placement?: "top" | "bottom";
+    target?: string;
 }) => React.JSX.Element;

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

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

package/link/toolbar/index.cjs.js

@@ -11,8 +11,13 @@ function useLinkTool(controller, options = {}) {
     return {
         active: controller.isSelectionInLink(editor),
         onClick: () => startToolInput({
-            getPlaceholder: (locale) => locale.editor.link.inputPlaceholder,
+            getPlaceholder: locale => locale.editor.link.inputPlaceholder,
             confirm: (url) => {
+                const urlValidation = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+                if (!urlValidation.test(url)) {
+                    window.alert('請輸入正確的網址格式');
+                    return;
+                }
                 if (controller.isUrl(url)) {
                     controller.upsertLink(editor, url, options);
                 }

package/link/toolbar/useLinkTool.js

@@ -7,8 +7,13 @@ function useLinkTool(controller, options = {}) {
     return {
         active: controller.isSelectionInLink(editor),
         onClick: () => startToolInput({
-            getPlaceholder: (locale) => locale.editor.link.inputPlaceholder,
+            getPlaceholder: locale => locale.editor.link.inputPlaceholder,
             confirm: (url) => {
+                const urlValidation = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+                if (!urlValidation.test(url)) {
+                    window.alert('請輸入正確的網址格式');
+                    return;
+                }
                 if (controller.isUrl(url)) {
                     controller.upsertLink(editor, url, options);
                 }

package/link/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { Link, LinkElement } from '@quadrats/common/link';
 import { RenderElementProps, ReactWithable, WithCreateRenderElement, Editor } from '@quadrats/react';
 export type RenderLinkElementProps = RenderElementProps<LinkElement>;

package/list/defaultRenderListElements.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { ListTypeKey } from '@quadrats/common/list';
 import { RenderElementProps } from '@quadrats/react';
 export declare const defaultRenderListElements: Record<ListTypeKey, (props: {

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { ListTypeKey } from '@quadrats/common/list';
 import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
 import { JsxSerializeListElementProps } from './typings';
 export type CreateJsxSerializeListOptions = {
     [key in ListTypeKey]?: CreateJsxSerializeElementOptions<JsxSerializeListElementProps>;
 };
-export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => JSX.Element | null | undefined;
+export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/list/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { List, ListElement, ListTypeKey } from '@quadrats/common/list';
 import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export type RenderListElementProps = RenderElementProps<ListElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,23 +20,24 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.7.3",
-    "@quadrats/core": "^0.7.2",
+    "@quadrats/common": "^0.7.7",
+    "@quadrats/core": "^0.7.7",
     "@quadrats/icons": "^0.7.0",
-    "@quadrats/locales": "^0.7.0",
+    "@quadrats/locales": "^0.7.7",
     "@quadrats/theme": "^0.7.4",
     "@quadrats/utils": "^0.7.2",
     "@types/is-hotkey": "^0.1.9",
     "@types/react-transition-group": "^4.4.9",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "is-hotkey": "^0.2.0",
     "react-transition-group": "^4.4.5",
-    "slate-react": "^0.101.0",
+    "slate-dom": "^0.112.2",
+    "slate-react": "^0.112.1",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "main": "./index.cjs.js",
   "module": "./index.js",

package/paragraph/createRenderParagraphElement.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { ParagraphElement } from '@quadrats/core';
 import { RenderElementProps } from '@quadrats/react';
 export type RenderParagraphElementProps = RenderElementProps<ParagraphElement>;
 export interface CreateRenderParagraphElementOptions {
     render?: (props: RenderParagraphElementProps) => JSX.Element | null | undefined;
 }
-export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps) => JSX.Element | null | undefined;
+export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps) => import("react").JSX.Element | null | undefined;

package/paragraph/defaultRenderParagraphElement.d.ts

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

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

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

package/paragraph/renderParagraphElementWithSymbol.d.ts

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

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

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

package/read-more/typings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { JSX } from 'react';
 import { ReadMore, ReadMoreElement } from '@quadrats/common/read-more';
 import { WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
 export type RenderReadMoreElementProps = RenderElementProps<ReadMoreElement>;

package/strikethrough/jsx-serializer/createJsxSerializeStrikethrough.d.ts

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

package/toggle-mark/jsx-serializer/createJsxSerializeToggleMarkCreator.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { CreateJsxSerializeMarkOptions } from '@quadrats/react/jsx-serializer';
 export type CreateJsxSerializeToggleMarkCreatorOptions = CreateJsxSerializeMarkOptions<boolean>;
 export type CreateJsxSerializeToggleMarkOptions = Partial<CreateJsxSerializeToggleMarkCreatorOptions>;
-export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: CreateJsxSerializeToggleMarkOptions) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;
+export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: CreateJsxSerializeToggleMarkOptions) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => import("react").JSX.Element;

package/toolbar/components/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 export interface ToolbarProps {
     /**
      * If there are any nodes which type match it, toolbar will hide.
@@ -12,6 +12,14 @@ export interface ToolbarProps {
      * Toolbar container
      */
     containerRef?: React.MutableRefObject<HTMLElement | undefined>;
+    /**
+     * only render expanded case toolbar or not.
+     */
+    onlyRenderExpanded?: boolean;
+    /**
+     * fix main toolbar or not.
+     */
+    fixed?: boolean;
 }
-declare function Toolbar(props: ToolbarProps): React.JSX.Element | null;
+declare function Toolbar(props: ToolbarProps): JSX.Element | null;
 export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import clsx from 'clsx';
-import { Range, getSelectionText, isNodesTypeIn, Transforms } from '@quadrats/core';
+import { Range, getSelectionText, Transforms, isNodesTypeIn } from '@quadrats/core';
 import { ThemeContext, useQuadrats, ReactEditor } from '@quadrats/react';
 import { Portal } from '@quadrats/react/components';
 import { StartToolInputContext } from '../contexts/StartToolInputContext.js';
@@ -27,11 +27,11 @@ function setPosition(el, range) {
     el.style.left = `${left}px`;
 }
 function Toolbar(props) {
-    const { children, disabledElementTypes } = props;
+    const { children, disabledElementTypes, onlyRenderExpanded = false, fixed = false } = props;
     const { props: themeProps } = useContext(ThemeContext);
     const editor = useQuadrats();
     const toolbarRef = useRef(null);
-    const lastNativeRangeRef = useRef();
+    const lastNativeRangeRef = useRef(undefined);
     const focused = ReactEditor.isFocused(editor);
     const { selection } = editor;
     const [toolInput, setToolInput] = useState();
@@ -87,27 +87,34 @@ function Toolbar(props) {
         }
         return document.body;
     }, [props.containerRef]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tools = children(renderExpandedStatus && !fixed);
+    const toolbarBody = (React.createElement(React.Fragment, null,
+        React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
+        toolInput && (React.createElement(ToolbarInput, { exit: () => {
+                const { currentSelection } = toolInput;
+                if (currentSelection) {
+                    Transforms.select(editor, currentSelection);
+                }
+                ReactEditor.focus(editor);
+                setToolInput(undefined);
+            }, toolInput: toolInput }))));
+    if (fixed) {
+        return (React.createElement("div", { className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--fixed', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+            React.createElement("div", { className: "qdr-toolbar" }, toolbarBody)));
+    }
     if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const tools = children(renderExpandedStatus);
+    if (onlyRenderExpanded && !renderExpandedStatus) {
+        return null;
+    }
     if (!tools) {
         return null;
     }
     return (React.createElement(Portal, { getContainer: getPortalContainer },
-        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React.createElement("div", { className: "qdr-toolbar__arrow" }),
-            React.createElement("div", { className: "qdr-toolbar" },
-                React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
-                toolInput && (React.createElement(ToolbarInput, { exit: () => {
-                        const { currentSelection } = toolInput;
-                        if (currentSelection) {
-                            Transforms.select(editor, currentSelection);
-                        }
-                        ReactEditor.focus(editor);
-                        setToolInput(undefined);
-                    }, toolInput: toolInput }))))));
+        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--float', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+            React.createElement("div", { className: "qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow" }, toolbarBody))));
 }
 
 export { Toolbar as default };

package/toolbar/contexts/StartToolInputContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { StartToolInput } from '../typings';
 export declare const StartToolInputContext: import("react").Context<StartToolInput>;

package/toolbar/index.cjs.js

@@ -69,11 +69,11 @@ function setPosition(el, range) {
     el.style.left = `${left}px`;
 }
 function Toolbar(props) {
-    const { children, disabledElementTypes } = props;
+    const { children, disabledElementTypes, onlyRenderExpanded = false, fixed = false } = props;
     const { props: themeProps } = React.useContext(react.ThemeContext);
     const editor = react.useQuadrats();
     const toolbarRef = React.useRef(null);
-    const lastNativeRangeRef = React.useRef();
+    const lastNativeRangeRef = React.useRef(undefined);
     const focused = react.ReactEditor.isFocused(editor);
     const { selection } = editor;
     const [toolInput, setToolInput] = React.useState();
@@ -129,27 +129,34 @@ function Toolbar(props) {
         }
         return document.body;
     }, [props.containerRef]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tools = children(renderExpandedStatus && !fixed);
+    const toolbarBody = (React.createElement(React.Fragment, null,
+        React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
+        toolInput && (React.createElement(ToolbarInput, { exit: () => {
+                const { currentSelection } = toolInput;
+                if (currentSelection) {
+                    core.Transforms.select(editor, currentSelection);
+                }
+                react.ReactEditor.focus(editor);
+                setToolInput(undefined);
+            }, toolInput: toolInput }))));
+    if (fixed) {
+        return (React.createElement("div", { className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--fixed', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+            React.createElement("div", { className: "qdr-toolbar" }, toolbarBody)));
+    }
     if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const tools = children(renderExpandedStatus);
+    if (onlyRenderExpanded && !renderExpandedStatus) {
+        return null;
+    }
     if (!tools) {
         return null;
     }
     return (React.createElement(components.Portal, { getContainer: getPortalContainer },
-        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
-            React.createElement("div", { className: "qdr-toolbar__arrow" }),
-            React.createElement("div", { className: "qdr-toolbar" },
-                React.createElement(StartToolInputContext.Provider, { value: startToolInput }, tools),
-                toolInput && (React.createElement(ToolbarInput, { exit: () => {
-                        const { currentSelection } = toolInput;
-                        if (currentSelection) {
-                            core.Transforms.select(editor, currentSelection);
-                        }
-                        react.ReactEditor.focus(editor);
-                        setToolInput(undefined);
-                    }, toolInput: toolInput }))))));
+        React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--float', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+            React.createElement("div", { className: "qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow" }, toolbarBody))));
 }
 
 function ToolbarIcon(props) {

package/toolbar/toolbar.css

@@ -1 +1 @@
-.qdr-toolbar{display:flex;align-items:center;font-size:24px;height:40px;padding:8px 10px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);border-radius:4px;box-sizing:border-box}.qdr-toolbar__wrapper{position:absolute;z-index:1;padding-bottom:10px;height:40px;box-sizing:content-box}.qdr-toolbar__wrapper--inputting{min-width:250px;max-width:350px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - 10px);left:50%;content:"";width:10px;height:10px;background:var(--qdr-surface);border:1px solid var(--qdr-border);border-top:none;border-left:none;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-toolbar__divider{width:1px;height:20px;background-color:var(--qdr-divider);margin:0 8px}.qdr-toolbar__icon{position:relative;color:var(--qdr-icon);font-size:24px;display:inline-flex;justify-content:center;align-items:center;margin:0 9px;border:0;background-color:rgba(0,0,0,0);padding:0;outline:none;box-shadow:none;border-radius:0;transition:color .2s ease-out;cursor:pointer}.qdr-toolbar__icon:hover,.qdr-toolbar__icon--active{color:var(--qdr-primary)}.qdr-toolbar__input{font-size:13px;background:var(--qdr-surface);color:var(--qdr-placeholder);width:calc(100% - 14px);height:100%;border:none;padding:0;outline:none}.qdr-toolbar__input__wrapper{display:flex;align-items:center;position:absolute;top:8px;left:10px;width:calc(100% - 20px);height:calc(100% - 26px);background:var(--qdr-surface);box-sizing:border-box}.qdr-toolbar__input__cross{fill:var(--qdr-placeholder);font-size:14px;width:1em;height:1em;cursor:pointer}
+.qdr-toolbar{display:flex;align-items:center;gap:8px;font-size:24px;height:48px;padding:8px 8px;background-color:var(--qdr-surface);border:1px solid var(--qdr-border);box-sizing:border-box}.qdr-toolbar--radius{border-radius:8px}.qdr-toolbar--shadow{box-shadow:0 4px 8px -2px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.04)}.qdr-toolbar__wrapper{box-sizing:content-box;height:48px}.qdr-toolbar__wrapper--fixed{position:sticky;top:0;z-index:1}.qdr-toolbar__wrapper--float{position:absolute;z-index:1;padding-bottom:8px}.qdr-toolbar__wrapper--inputting{min-width:250px;max-width:350px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - 8px);left:50%;content:"";width:8px;height:8px;background:var(--qdr-surface);border:1px solid var(--qdr-border);border-top:none;border-left:none;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-toolbar__divider{width:1px;height:20px;background-color:var(--qdr-divider)}.qdr-toolbar__icon{position:relative;color:var(--qdr-icon);font-size:24px;display:inline-flex;justify-content:center;align-items:center;border:0;background-color:rgba(0,0,0,0);padding:4px;outline:none;box-shadow:none;border-radius:0;transition:color .2s ease-out;cursor:pointer}.qdr-toolbar__icon:hover,.qdr-toolbar__icon--active{color:var(--qdr-primary)}.qdr-toolbar__input{font-size:13px;background:var(--qdr-surface);color:var(--qdr-placeholder);width:calc(100% - 14px);height:100%;border:none;padding:0;outline:none}.qdr-toolbar__input__wrapper{display:flex;align-items:center;position:absolute;top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 24px);background:var(--qdr-surface);box-sizing:border-box}.qdr-toolbar__input__cross{fill:var(--qdr-placeholder);font-size:14px;width:1em;height:1em;cursor:pointer}

package/toolbar/toolbar.scss

@@ -1,27 +1,44 @@
-$qdr-toolbar-popup-gap: 10px;
+$qdr-toolbar-popup-gap: 8px;
 $qdr-toolbar-arrow-size: $qdr-toolbar-popup-gap;
-$qdr-toolbar-height: 40px;
+$qdr-toolbar-height: 48px;
 $qdr-toolbar-padding-vertical: 8px;
-$qdr-toolbar-padding-horizontal: 10px;
+$qdr-toolbar-padding-horizontal: 8px;
 $qdr-toolbar-input-cross-size: 14px;
 
 .qdr-toolbar {
   display: flex;
   align-items: center;
+  gap: 8px;
   font-size: 24px;
   height: $qdr-toolbar-height;
   padding: $qdr-toolbar-padding-vertical $qdr-toolbar-padding-horizontal;
   background-color: var(--qdr-surface);
   border: 1px solid var(--qdr-border);
-  border-radius: 4px;
   box-sizing: border-box;
 
+  &--radius {
+    border-radius: 8px;
+  }
+
+  &--shadow {
+    box-shadow: 0 4px 8px -2px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 4%);
+  }
+
   &__wrapper {
-    position: absolute;
-    z-index: 1;
-    padding-bottom: $qdr-toolbar-popup-gap;
-    height: $qdr-toolbar-height;
     box-sizing: content-box;
+    height: $qdr-toolbar-height;
+
+    &--fixed {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    &--float {
+      position: absolute;
+      z-index: 1;
+      padding-bottom: $qdr-toolbar-popup-gap;
+    }
 
     &--inputting {
       min-width: 250px;
@@ -47,7 +64,6 @@ $qdr-toolbar-input-cross-size: 14px;
     width: 1px;
     height: 20px;
     background-color: var(--qdr-divider);
-    margin: 0 8px;
   }
 
   &__icon {
@@ -57,10 +73,9 @@ $qdr-toolbar-input-cross-size: 14px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    margin: 0 9px;
     border: 0;
     background-color: transparent;
-    padding: 0;
+    padding: 4px;
     outline: none;
     box-shadow: none;
     border-radius: 0;

package/underline/jsx-serializer/createJsxSerializeUnderline.d.ts

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