@quadrats/react 0.5.9 → 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/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.9",
+  "version": "0.5.10",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,7 +20,7 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.5.9",
+    "@quadrats/common": "^0.5.10",
     "@quadrats/core": "^0.5.9",
     "@quadrats/icons": "^0.5.0",
     "@quadrats/locales": "^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 };