@quadrats/react 0.7.1 → 0.7.3

package/core/components/Quadrats.js

@@ -8,7 +8,7 @@ import { ConfigsProvider } from '@quadrats/react/configs';
 function Quadrats(props) {
     const { children, editor, locale, onChange, theme, value, } = props;
     return (React.createElement(ConfigsProvider, { theme: theme, locale: locale },
-        React.createElement(Slate, { editor: editor, onChange: onChange, value: value }, children)));
+        React.createElement(Slate, { editor: editor, onChange: onChange, initialValue: value }, children)));
 }
 
 export { Quadrats as default };

package/embed/jsx-serializer/facebook/index.cjs.js

@@ -5,5 +5,5 @@ var facebook = require('@quadrats/react/embed/renderers/facebook');
 
 
 Object.keys(facebook).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = facebook[k];
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = facebook[k];
 });

package/embed/jsx-serializer/instagram/index.cjs.js

@@ -5,5 +5,5 @@ var instagram = require('@quadrats/react/embed/renderers/instagram');
 
 
 Object.keys(instagram).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = instagram[k];
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = instagram[k];
 });

package/embed/jsx-serializer/twitter/index.cjs.js

@@ -5,5 +5,5 @@ var twitter = require('@quadrats/react/embed/renderers/twitter');
 
 
 Object.keys(twitter).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = twitter[k];
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = twitter[k];
 });

package/embed/jsx-serializer/vimeo/index.cjs.js

@@ -5,5 +5,5 @@ var vimeo = require('@quadrats/react/embed/renderers/vimeo');
 
 
 Object.keys(vimeo).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = vimeo[k];
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = vimeo[k];
 });

package/embed/jsx-serializer/youtube/index.cjs.js

@@ -5,5 +5,5 @@ var youtube = require('@quadrats/react/embed/renderers/youtube');
 
 
 Object.keys(youtube).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = youtube[k];
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = youtube[k];
 });

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

@@ -3,8 +3,8 @@ import React from 'react';
 const defaultRenderFootnoteElement = ({ children, element }) => {
     var _a;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { style: { textDecoration: 'underline' } }, children),
-        React.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+        React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children),
+        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 
 export { defaultRenderFootnoteElement };

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

@@ -7,8 +7,8 @@ var footnote = require('@quadrats/common/footnote');
 const defaultRenderFootnoteElement = ({ children, element }) => {
     var _a;
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { style: { textDecoration: 'underline' } }, children),
-        React.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+        React.createElement("span", { className: "qdr-footnote-text", style: { textDecoration: 'underline' } }, children),
+        React.createElement("sup", { className: "qdr-footnote-sup", style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 
 /* eslint-disable max-len */

package/image/jsx-serializer/defaultRenderImageElements.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const defaultRenderImageElements = {
-    figure: ({ children, style }) => React.createElement("figure", { style: style }, children),
+    figure: ({ children, style }) => (React.createElement("figure", { className: "qdr-image__figure", style: style }, children)),
     image: ({ caption, src }) => React.createElement("img", { src: src, alt: caption, style: { width: '100%' } }),
-    caption: ({ children, isEmpty }) => (isEmpty ? React.createElement("span", null) : React.createElement("figcaption", null, children)),
+    caption: ({ children, isEmpty }) => isEmpty ? (React.createElement("span", { className: "qdr-image__caption-placeholder" })) : (React.createElement("figcaption", { className: "qdr-image__caption" }, children)),
 };
 
 export { defaultRenderImageElements };

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

@@ -6,9 +6,9 @@ var image = require('@quadrats/common/image');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
 const defaultRenderImageElements = {
-    figure: ({ children, style }) => React.createElement("figure", { style: style }, children),
+    figure: ({ children, style }) => (React.createElement("figure", { className: "qdr-image__figure", style: style }, children)),
     image: ({ caption, src }) => React.createElement("img", { src: src, alt: caption, style: { width: '100%' } }),
-    caption: ({ children, isEmpty }) => (isEmpty ? React.createElement("span", null) : React.createElement("figcaption", null, children)),
+    caption: ({ children, isEmpty }) => isEmpty ? (React.createElement("span", { className: "qdr-image__caption-placeholder" })) : (React.createElement("figcaption", { className: "qdr-image__caption" }, children)),
 };
 
 function createJsxSerializeImage(options = {}) {

package/index.cjs.js

@@ -60,7 +60,7 @@ const DefaultElement = ({ attributes, children }) => React.createElement("div",
 function Quadrats(props) {
     const { children, editor, locale, onChange, theme, value, } = props;
     return (React.createElement(configs.ConfigsProvider, { theme: theme, locale: locale },
-        React.createElement(slateReact.Slate, { editor: editor, onChange: onChange, value: value }, children)));
+        React.createElement(slateReact.Slate, { editor: editor, onChange: onChange, initialValue: value }, children)));
 }
 
 function createEventHandler(editor, handlers) {
@@ -147,5 +147,5 @@ exports.createRenderElement = createRenderElement;
 exports.createRenderElements = createRenderElements;
 exports.createRenderMark = createRenderMark;
 Object.keys(configs).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = configs[k];
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = configs[k];
 });

package/link/jsx-serializer/defaultRenderLinkElement.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const defaultRenderLinkElement = ({ children, element }) => (React.createElement("a", { target: "_blank", href: element.url }, children));
+const defaultRenderLinkElement = ({ children, element }) => (React.createElement("a", { target: "_blank", className: "qdr-link", href: element.url }, children));
 
 export { defaultRenderLinkElement };

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

@@ -4,7 +4,7 @@ var React = require('react');
 var link = require('@quadrats/common/link');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
-const defaultRenderLinkElement = ({ children, element }) => (React.createElement("a", { target: "_blank", href: element.url }, children));
+const defaultRenderLinkElement = ({ children, element }) => (React.createElement("a", { target: "_blank", className: "qdr-link", href: element.url }, children));
 
 function createJsxSerializeLink(options = {}) {
     const { type = link.LINK_TYPE, render = defaultRenderLinkElement } = options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,19 +20,19 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.7.1",
-    "@quadrats/core": "^0.7.0",
+    "@quadrats/common": "^0.7.3",
+    "@quadrats/core": "^0.7.2",
     "@quadrats/icons": "^0.7.0",
     "@quadrats/locales": "^0.7.0",
     "@quadrats/theme": "^0.7.0",
-    "@quadrats/utils": "^0.7.1",
-    "@types/is-hotkey": "^0.1.7",
-    "@types/react-transition-group": "^4.4.4",
-    "clsx": "^1.1.1",
+    "@quadrats/utils": "^0.7.2",
+    "@types/is-hotkey": "^0.1.9",
+    "@types/react-transition-group": "^4.4.9",
+    "clsx": "^2.0.0",
     "is-hotkey": "^0.2.0",
-    "react-transition-group": "^4.4.2",
-    "slate-react": "^0.94.2",
-    "tslib": "^2.3.1"
+    "react-transition-group": "^4.4.5",
+    "slate-react": "^0.101.0",
+    "tslib": "^2.6.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/toolbar/components/ToolbarInput.js

@@ -7,7 +7,10 @@ function ToolbarInput({ exit, toolInput }) {
         event.preventDefault();
         exit();
     };
+    let composing = false;
     const onKeyDown = (event) => {
+        if (composing)
+            return;
         const isEnter = event.key === 'Enter';
         if (isEnter || event.key === 'Escape') {
             onExit(event);
@@ -18,8 +21,14 @@ function ToolbarInput({ exit, toolInput }) {
     };
     const locale = useLocale();
     const placeholder = getPlaceholder(locale);
+    const onCompositionStart = () => {
+        composing = true;
+    };
+    const onCompositionEnd = () => {
+        composing = false;
+    };
     return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
         React.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
             React.createElement("path", { 
                 // eslint-disable-next-line max-len

package/toolbar/index.cjs.js

@@ -20,7 +20,10 @@ function ToolbarInput({ exit, toolInput }) {
         event.preventDefault();
         exit();
     };
+    let composing = false;
     const onKeyDown = (event) => {
+        if (composing)
+            return;
         const isEnter = event.key === 'Enter';
         if (isEnter || event.key === 'Escape') {
             onExit(event);
@@ -31,8 +34,14 @@ function ToolbarInput({ exit, toolInput }) {
     };
     const locale = react.useLocale();
     const placeholder = getPlaceholder(locale);
+    const onCompositionStart = () => {
+        composing = true;
+    };
+    const onCompositionEnd = () => {
+        composing = false;
+    };
     return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
         React.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
             React.createElement("path", { 
                 // eslint-disable-next-line max-len