@quadrats/react 0.5.6 → 0.5.10

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

@@ -20,7 +20,7 @@ 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);
 
 function createReactBlockquote(options = {}) {
     const core = blockquote.createBlockquote(options);

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/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/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/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/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/line-break/defaultRenderLineBreakElement.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderLineBreakElementProps } from './typings';
-export declare const defaultRenderLineBreakElement: ({ attributes }: RenderLineBreakElementProps) => JSX.Element;
+export declare const defaultRenderLineBreakElement: ({ attributes, children }: RenderLineBreakElementProps) => JSX.Element;

package/line-break/defaultRenderLineBreakElement.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-const defaultRenderLineBreakElement = ({ attributes }) => (React.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
-    React.createElement("br", null)));
+const defaultRenderLineBreakElement = ({ attributes, children }) => (React.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break" }), children));
 
 export { defaultRenderLineBreakElement };

package/line-break/index.cjs.js

@@ -84,8 +84,7 @@ const COMMON_ON_KEY_DOWN_BREAK = createOnKeyDownBreak({
     },
 });
 
-const defaultRenderLineBreakElement = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
-    React__default.createElement("br", null)));
+const defaultRenderLineBreakElement = ({ attributes, children }) => (React__default.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break" }), children));
 
 function createReactLineBreak(options = {}) {
     const core$1 = core.createLineBreak(options);
@@ -95,8 +94,7 @@ function createReactLineBreak(options = {}) {
         }), createRenderElement: ({ render = defaultRenderLineBreakElement } = {}) => react.createRenderElement({ type, render }) });
 }
 
-const renderLineBreakElementWithSymbol = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, className: "qdr-line-break__with-symbol", contentEditable: false }),
-    React__default.createElement("br", null)));
+const renderLineBreakElementWithSymbol = ({ attributes, children }) => (React__default.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break qdr-line-break__with-symbol" }), children));
 
 exports.COMMON_EXIT_BREAK_ON_AFTER_HOTKEY = COMMON_EXIT_BREAK_ON_AFTER_HOTKEY;
 exports.COMMON_EXIT_BREAK_ON_AFTER_RULE = COMMON_EXIT_BREAK_ON_AFTER_RULE;

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

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

package/line-break/jsx-serializer/createJsxSerializeLineBreak.js

@@ -0,0 +1,11 @@
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement.js';
+import { LINE_BREAK_TYPE } from '@quadrats/core';
+
+/* eslint-disable max-len */
+function createJsxSerializeLineBreak(options = {}) {
+    const { type = LINE_BREAK_TYPE, render = defaultRenderLineBreakElement } = options;
+    return createJsxSerializeElement({ type, render });
+}
+
+export { createJsxSerializeLineBreak };

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const defaultRenderLineBreakElement: () => JSX.Element;

package/line-break/jsx-serializer/defaultRenderLineBreakElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const defaultRenderLineBreakElement = () => (React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
+    React.createElement("br", null)));
+
+export { defaultRenderLineBreakElement };

package/line-break/jsx-serializer/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+var core = require('@quadrats/core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultRenderLineBreakElement = () => (React__default.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
+    React__default.createElement("br", null)));
+
+/* eslint-disable max-len */
+function createJsxSerializeLineBreak(options = {}) {
+    const { type = core.LINE_BREAK_TYPE, render = defaultRenderLineBreakElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.createJsxSerializeLineBreak = createJsxSerializeLineBreak;
+exports.defaultRenderLineBreakElement = defaultRenderLineBreakElement;

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

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement';
+export { CreateJsxSerializeLineBreakOptions, createJsxSerializeLineBreak } from './createJsxSerializeLineBreak';

package/line-break/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement.js';
+export { createJsxSerializeLineBreak } from './createJsxSerializeLineBreak.js';

package/line-break/jsx-serializer/package.json

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

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

@@ -0,0 +1,3 @@
+import { LineBreakElement } from '@quadrats/core';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare type JsxSerializeLineBreakElementProps = JsxSerializeElementProps<LineBreakElement>;

package/line-break/renderLineBreakElementWithSymbol.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderLineBreakElementProps } from './typings';
-export declare const renderLineBreakElementWithSymbol: ({ attributes }: RenderLineBreakElementProps) => JSX.Element;
+export declare const renderLineBreakElementWithSymbol: ({ attributes, children }: RenderLineBreakElementProps) => JSX.Element;

package/line-break/renderLineBreakElementWithSymbol.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-const renderLineBreakElementWithSymbol = ({ attributes }) => (React.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, className: "qdr-line-break__with-symbol", contentEditable: false }),
-    React.createElement("br", null)));
+const renderLineBreakElementWithSymbol = ({ attributes, children }) => (React.createElement("span", Object.assign({}, attributes, { className: "qdr-line-break qdr-line-break__with-symbol" }), children));
 
 export { renderLineBreakElementWithSymbol };

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.5.6",
+  "version": "0.5.10",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,8 +20,8 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.5.3",
-    "@quadrats/core": "^0.5.2",
+    "@quadrats/common": "^0.5.10",
+    "@quadrats/core": "^0.5.9",
     "@quadrats/icons": "^0.5.0",
     "@quadrats/locales": "^0.5.0",
     "@quadrats/theme": "^0.5.0",

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/toolbar/components/Toolbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ToolbarProps {
     /**
      * If there are any nodes which type match it, toolbar will hide.
@@ -8,6 +8,10 @@ export interface ToolbarProps {
      * A render props which provide a flag `expanded` which useful for rendering different things between collapsed and expanded.
      */
     children: (expanded: boolean) => JSX.Element | null | undefined;
+    /**
+     * Toolbar container
+     */
+    containerRef?: React.MutableRefObject<HTMLElement | undefined>;
 }
 declare function Toolbar(props: ToolbarProps): JSX.Element | null;
 export default Toolbar;

package/toolbar/components/Toolbar.js

@@ -80,6 +80,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -88,7 +95,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React.createElement(Portal, 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" },

package/toolbar/index.cjs.js

@@ -120,6 +120,13 @@ function Toolbar(props) {
             }
         });
     });
+    const getPortalContainer = React.useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
     if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
         return null;
     }
@@ -128,7 +135,7 @@ function Toolbar(props) {
     if (!tools) {
         return null;
     }
-    return (React__default.createElement(components.Portal, null,
+    return (React__default.createElement(components.Portal, { getContainer: getPortalContainer },
         React__default.createElement("div", { ref: toolbarRef, className: clsx__default('qdr-toolbar__wrapper', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
             React__default.createElement("div", { className: "qdr-toolbar__arrow" }),
             React__default.createElement("div", { className: "qdr-toolbar" },