@quadrats/react 0.4.4 → 0.5.3

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

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

package/link/toolbar/index.cjs.js

@@ -28,7 +28,7 @@ function useLinkTool(controller, options = {}) {
 }
 
 function useUnlinkTool(controller) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.unwrapLink(editor),
     };

package/link/toolbar/useUnlinkTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useUnlinkTool(controller) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.unwrapLink(editor),
     };

package/link/typings.d.ts

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

package/list/createReactList.js

@@ -4,7 +4,7 @@ import { defaultRenderListElements } from './defaultRenderListElements.js';
 
 function createReactList(options = {}) {
     const core = createList(options);
-    return Object.assign(Object.assign({}, core), { createRenderElement: (options = {}) => createRenderElements(['ol', 'ul', 'li'].map((key) => ({
+    return Object.assign(Object.assign({}, core), { createRenderElement: (options = {}) => createRenderElements(['ol', 'ul', 'li'].map(key => ({
             type: core.types[key],
             render: options[key] || defaultRenderListElements[key],
         }))), createHandlers: () => ({

package/list/index.cjs.js

@@ -18,7 +18,7 @@ const defaultRenderListElements = {
 
 function createReactList(options = {}) {
     const core = list.createList(options);
-    return Object.assign(Object.assign({}, core), { createRenderElement: (options = {}) => react.createRenderElements(['ol', 'ul', 'li'].map((key) => ({
+    return Object.assign(Object.assign({}, core), { createRenderElement: (options = {}) => react.createRenderElements(['ol', 'ul', 'li'].map(key => ({
             type: core.types[key],
             render: options[key] || defaultRenderListElements[key],
         }))), createHandlers: () => ({

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

@@ -5,4 +5,4 @@ import { JsxSerializeListElementProps } from './typings';
 export declare type CreateJsxSerializeListOptions = {
     [key in ListTypeKey]?: CreateJsxSerializeElementOptions<JsxSerializeListElementProps>;
 };
-export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;
+export declare function createJsxSerializeList(options?: CreateJsxSerializeListOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

package/list/typings.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.4.4",
+  "version": "0.5.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.4.4",
-    "@quadrats/core": "^0.4.0",
-    "@quadrats/icons": "^0.4.0",
-    "@quadrats/locales": "^0.4.0",
-    "@quadrats/theme": "^0.4.0",
-    "@quadrats/utils": "^0.4.0",
-    "@types/is-hotkey": "^0.1.2",
-    "@types/react-transition-group": "^4.2.4",
+    "@quadrats/common": "^0.5.3",
+    "@quadrats/core": "^0.5.2",
+    "@quadrats/icons": "^0.5.0",
+    "@quadrats/locales": "^0.5.0",
+    "@quadrats/theme": "^0.5.0",
+    "@quadrats/utils": "^0.5.0",
+    "@types/is-hotkey": "^0.1.7",
+    "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "is-hotkey": "^0.2.0",
-    "react-transition-group": "^4.3.0",
-    "slate-react": "^0.59.0",
-    "tslib": "^2.0.3"
+    "react-transition-group": "^4.4.2",
+    "slate-react": "^0.72.1",
+    "tslib": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.6",

package/paragraph/createRenderParagraphElement.d.ts

@@ -5,4 +5,4 @@ export declare type RenderParagraphElementProps = RenderElementProps<ParagraphEl
 export interface CreateRenderParagraphElementOptions {
     render?: (props: RenderParagraphElementProps) => JSX.Element | null | undefined;
 }
-export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps<import("@quadrats/core").Element>) => JSX.Element | null | undefined;
+export declare function createRenderParagraphElement(options?: CreateRenderParagraphElementOptions): (props: RenderElementProps<import("@quadrats/core").QuadratsElement>) => JSX.Element | null | undefined;

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

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

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

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

package/read-more/toolbar/index.cjs.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function useReadMoreTool(controller) {
-    const editor = react.useEditor();
+    const editor = react.useSlateStatic();
     return {
         onClick: () => controller.insertReadMore(editor),
     };

package/read-more/toolbar/useReadMoreTool.js

@@ -1,7 +1,7 @@
-import { useEditor } from '@quadrats/react';
+import { useSlateStatic } from '@quadrats/react';
 
 function useReadMoreTool(controller) {
-    const editor = useEditor();
+    const editor = useSlateStatic();
     return {
         onClick: () => controller.insertReadMore(editor),
     };

package/read-more/typings.d.ts

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

package/strikethrough/createReactStrikethrough.js

@@ -5,7 +5,7 @@ import { STRIKETHROUGH_HOTKEY } from './constants.js';
 
 const createReactStrikethrough = (variant) => createReactToggleMarkCreator(createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough(variant),
+    render: defaultRenderStrikethrough,
 })();
 
 export { createReactStrikethrough };

package/strikethrough/defaultRenderStrikethrough.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-export declare const defaultRenderStrikethrough: (variant?: string | undefined) => ({ children }: RenderMarkPropsBase<boolean>) => JSX.Element;
+export declare const defaultRenderStrikethrough: ({ children, leaf }: RenderMarkPropsBase<boolean>) => JSX.Element;

package/strikethrough/defaultRenderStrikethrough.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
 
-const defaultRenderStrikethrough = (variant) => (({ children }) => (React.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderStrikethrough = ({ children, leaf }) => (React.createElement("del", { className: leaf.strikethroughVariant
+        ? `${STRIKETHROUGH_TYPE}.${leaf.strikethroughVariant}` : `${STRIKETHROUGH_TYPE}` }, children));
 
 export { defaultRenderStrikethrough };

package/strikethrough/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const STRIKETHROUGH_HOTKEY = 'mod+opt+s';
 
-const defaultRenderStrikethrough = (variant) => (({ children }) => (React__default.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderStrikethrough = ({ children, leaf }) => (React__default.createElement("del", { className: leaf.strikethroughVariant
+        ? `${strikethrough.STRIKETHROUGH_TYPE}.${leaf.strikethroughVariant}` : `${strikethrough.STRIKETHROUGH_TYPE}` }, children));
 
 const createReactStrikethrough = (variant) => toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough(variant),
+    render: defaultRenderStrikethrough,
 })();
 
 exports.STRIKETHROUGH_HOTKEY = STRIKETHROUGH_HOTKEY;

package/strikethrough/jsx-serializer/createJsxSerializeStrikethrough.js

@@ -4,7 +4,7 @@ import { defaultRenderStrikethrough } from '@quadrats/react/strikethrough';
 
 const createJsxSerializeStrikethrough = createJsxSerializeToggleMarkCreator({
     type: STRIKETHROUGH_TYPE,
-    render: defaultRenderStrikethrough(),
+    render: defaultRenderStrikethrough,
 });
 
 export { createJsxSerializeStrikethrough };

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

@@ -8,7 +8,7 @@ var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
 const createJsxSerializeStrikethrough = jsxSerializer.createJsxSerializeToggleMarkCreator({
     type: strikethrough$1.STRIKETHROUGH_TYPE,
-    render: strikethrough.defaultRenderStrikethrough(),
+    render: strikethrough.defaultRenderStrikethrough,
 });
 
 exports.defaultRenderStrikethrough = strikethrough.defaultRenderStrikethrough;

package/strikethrough/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface StrikethroughLeaf extends Text {
+    strikethrough: boolean;
+    strikethroughVariant?: string;
+}

package/toggle-mark/typings.d.ts

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

package/toolbar/components/Toolbar.js

@@ -35,7 +35,7 @@ function Toolbar(props) {
     const focused = ReactEditor.isFocused(editor);
     const { selection } = editor;
     const [toolInput, setToolInput] = useState();
-    const startToolInput = useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    const startToolInput = useCallback(inputConfig => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
     let renderExpandedStatus;
     if (toolInput) {
         const { currentSelection } = toolInput;

package/toolbar/components/ToolbarInput.js

@@ -19,9 +19,7 @@ function ToolbarInput({ exit, toolInput }) {
     const locale = useLocale();
     const placeholder = getPlaceholder(locale);
     return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React.createElement("input", { defaultValue: toolInput.defaultValue, 
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, 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

@@ -39,9 +39,7 @@ function ToolbarInput({ exit, toolInput }) {
     const locale = react.useLocale();
     const placeholder = getPlaceholder(locale);
     return (React__default.createElement("div", { className: "qdr-toolbar__input__wrapper" },
-        React__default.createElement("input", { defaultValue: toolInput.defaultValue, 
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React__default.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
         React__default.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
             React__default.createElement("path", { 
                 // eslint-disable-next-line max-len
@@ -77,7 +75,7 @@ function Toolbar(props) {
     const focused = react.ReactEditor.isFocused(editor);
     const { selection } = editor;
     const [toolInput, setToolInput] = React.useState();
-    const startToolInput = React.useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    const startToolInput = React.useCallback(inputConfig => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
     let renderExpandedStatus;
     if (toolInput) {
         const { currentSelection } = toolInput;

package/underline/createReactUnderline.js

@@ -5,7 +5,7 @@ import { UNDERLINE_HOTKEY } from './constants.js';
 
 const createReactUnderline = (variant) => createReactToggleMarkCreator(createUnderline(variant), {
     hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline(variant),
+    render: defaultRenderUnderline,
 })();
 
 export { createReactUnderline };

package/underline/defaultRenderUnderline.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-export declare const defaultRenderUnderline: (variant?: string | undefined) => ({ children }: RenderMarkPropsBase<boolean>) => JSX.Element;
+export declare const defaultRenderUnderline: ({ children, leaf }: RenderMarkPropsBase<boolean>) => JSX.Element;

package/underline/defaultRenderUnderline.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
 
-const defaultRenderUnderline = (variant) => (({ children }) => (React.createElement("u", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
+        ? `${UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${UNDERLINE_TYPE}` }, children));
 
 export { defaultRenderUnderline };

package/underline/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const UNDERLINE_HOTKEY = 'mod+u';
 
-const defaultRenderUnderline = (variant) => (({ children }) => (React__default.createElement("u", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderUnderline = ({ children, leaf }) => (React__default.createElement("u", { className: leaf.underlineVariant
+        ? `${underline.UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${underline.UNDERLINE_TYPE}` }, children));
 
 const createReactUnderline = (variant) => toggleMark.createReactToggleMarkCreator(underline.createUnderline(variant), {
     hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline(variant),
+    render: defaultRenderUnderline,
 })();
 
 exports.UNDERLINE_HOTKEY = UNDERLINE_HOTKEY;

package/underline/jsx-serializer/createJsxSerializeUnderline.js

@@ -4,7 +4,7 @@ import { defaultRenderUnderline } from '@quadrats/react/underline';
 
 const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
     type: UNDERLINE_TYPE,
-    render: defaultRenderUnderline(),
+    render: defaultRenderUnderline,
 });
 
 export { createJsxSerializeUnderline };

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

@@ -8,7 +8,7 @@ var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
 
 const createJsxSerializeUnderline = jsxSerializer.createJsxSerializeToggleMarkCreator({
     type: underline$1.UNDERLINE_TYPE,
-    render: underline.defaultRenderUnderline(),
+    render: underline.defaultRenderUnderline,
 });
 
 exports.defaultRenderUnderline = underline.defaultRenderUnderline;

package/underline/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface UnderlineLeaf extends Text {
+    underline: boolean;
+    underlineVariant?: string;
+}