@quadrats/react 0.7.8 → 1.0.0

package/input-block/components/InputBlock.js

@@ -1,16 +1,22 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Edit, Trash } from '@quadrats/icons';
+import { useClickAway } from '@quadrats/react/utils';
 import { useInputBlock } from '../hooks/useInputBlock.js';
 
 function InputBlock(props) {
-    const { attributes, children } = 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: {
+    const { attributes } = props;
+    const blockRef = useRef(null);
+    const { inputRef, onConfirm, onRemove, onKeyDown, placeholder, } = useInputBlock(props);
+    useClickAway(() => {
+        return () => {
+            onRemove();
+        };
+    }, blockRef, [blockRef]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: blockRef, contentEditable: false, className: "qdr-input-block" }),
+        React.createElement("input", { ref: inputRef, onKeyDown: onKeyDown, placeholder: placeholder, className: "qdr-input-block__input", style: {
                 display: 'block',
                 color: 'currentColor',
-                font: 'inherit',
                 width: '100%',
                 margin: 0,
                 border: 0,
@@ -19,7 +25,11 @@ function InputBlock(props) {
                 outline: 0,
                 boxSizing: 'border-box',
             } }),
-        children));
+        React.createElement("div", { className: "qdr-input-block__icons" },
+            React.createElement("div", { className: "qdr-input-block__icon", onClick: onConfirm },
+                React.createElement(Icon, { icon: Edit, width: 24, height: 24 })),
+            React.createElement("div", { className: "qdr-input-block__icon", onClick: onRemove },
+                React.createElement(Icon, { icon: Trash, width: 24, height: 24 })))));
 }
 
 export { InputBlock as default };

package/input-block/defaultRenderInputBlockElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import InputBlock from './components/InputBlock.js';
 
-const defaultRenderInputBlockElement = (props) => React.createElement(InputBlock, Object.assign({}, props));
+const defaultRenderInputBlockElement = props => React.createElement(InputBlock, Object.assign({}, props));
 
 export { defaultRenderInputBlockElement };

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

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

package/input-block/hooks/useInputBlock.js

@@ -12,10 +12,21 @@ function useInputBlock({ confirm, element, remove }) {
      * Add a `removeable` flag to avoid.
      */
     const removeable = useRef(true);
+    const onRemove = () => {
+        removeable.current = false;
+        remove(editor, element);
+    };
+    const onConfirm = () => {
+        var _a;
+        const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (value) {
+            removeable.current = false;
+            confirm(editor, element, value);
+        }
+    };
     const removeIfRemovable = () => {
         if (removeable.current) {
-            removeable.current = false;
-            remove(editor, element);
+            onRemove();
         }
     };
     useLayoutEffect(() => {
@@ -26,16 +37,13 @@ function useInputBlock({ confirm, element, remove }) {
     }, [inputRef]);
     return {
         inputRef,
+        onRemove,
+        onConfirm,
         onBlur: removeIfRemovable,
         onKeyDown: (event) => {
-            var _a;
-            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
             if (event.key === 'Enter') {
                 event.preventDefault();
-                if (value) {
-                    removeable.current = false;
-                    confirm(editor, element, value);
-                }
+                onConfirm();
             }
             else if (event.key === 'Escape') {
                 event.preventDefault();

package/input-block/index.cjs.js

@@ -2,6 +2,9 @@
 
 var React = require('react');
 var react = require('@quadrats/react');
+var components = require('@quadrats/react/components');
+var icons = require('@quadrats/icons');
+var utils = require('@quadrats/react/utils');
 var inputBlock = require('@quadrats/common/input-block');
 
 function useInputBlock({ confirm, element, remove }) {
@@ -15,10 +18,21 @@ function useInputBlock({ confirm, element, remove }) {
      * Add a `removeable` flag to avoid.
      */
     const removeable = React.useRef(true);
+    const onRemove = () => {
+        removeable.current = false;
+        remove(editor, element);
+    };
+    const onConfirm = () => {
+        var _a;
+        const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        if (value) {
+            removeable.current = false;
+            confirm(editor, element, value);
+        }
+    };
     const removeIfRemovable = () => {
         if (removeable.current) {
-            removeable.current = false;
-            remove(editor, element);
+            onRemove();
         }
     };
     React.useLayoutEffect(() => {
@@ -29,16 +43,13 @@ function useInputBlock({ confirm, element, remove }) {
     }, [inputRef]);
     return {
         inputRef,
+        onRemove,
+        onConfirm,
         onBlur: removeIfRemovable,
         onKeyDown: (event) => {
-            var _a;
-            const value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
             if (event.key === 'Enter') {
                 event.preventDefault();
-                if (value) {
-                    removeable.current = false;
-                    confirm(editor, element, value);
-                }
+                onConfirm();
             }
             else if (event.key === 'Escape') {
                 event.preventDefault();
@@ -50,15 +61,18 @@ function useInputBlock({ confirm, element, remove }) {
 }
 
 function InputBlock(props) {
-    const { attributes, children } = 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: {
+    const { attributes } = props;
+    const blockRef = React.useRef(null);
+    const { inputRef, onConfirm, onRemove, onKeyDown, placeholder, } = useInputBlock(props);
+    utils.useClickAway(() => {
+        return () => {
+            onRemove();
+        };
+    }, blockRef, [blockRef]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: blockRef, contentEditable: false, className: "qdr-input-block" }),
+        React.createElement("input", { ref: inputRef, onKeyDown: onKeyDown, placeholder: placeholder, className: "qdr-input-block__input", style: {
                 display: 'block',
                 color: 'currentColor',
-                font: 'inherit',
                 width: '100%',
                 margin: 0,
                 border: 0,
@@ -67,10 +81,14 @@ function InputBlock(props) {
                 outline: 0,
                 boxSizing: 'border-box',
             } }),
-        children));
+        React.createElement("div", { className: "qdr-input-block__icons" },
+            React.createElement("div", { className: "qdr-input-block__icon", onClick: onConfirm },
+                React.createElement(components.Icon, { icon: icons.Edit, width: 24, height: 24 })),
+            React.createElement("div", { className: "qdr-input-block__icon", onClick: onRemove },
+                React.createElement(components.Icon, { icon: icons.Trash, width: 24, height: 24 })))));
 }
 
-const defaultRenderInputBlockElement = (props) => React.createElement(InputBlock, Object.assign({}, props));
+const defaultRenderInputBlockElement = props => React.createElement(InputBlock, Object.assign({}, props));
 
 function createReactInputBlock(options = {}) {
     const core = inputBlock.createInputBlock(options);

package/input-block/input-block.css

@@ -0,0 +1 @@
+.qdr-input-block{display:flex;align-items:center;justify-content:space-between;gap:var(--qdr-spacing-4);background-color:var(--qdr-bg);padding:var(--qdr-spacing-2) var(--qdr-spacing-4);border-radius:var(--qdr-radius-2)}.qdr-input-block__input{font-size:var(--qdr-typography-basic-input2-font-size);line-height:var(--qdr-typography-basic-input2-line-height);letter-spacing:var(--qdr-typography-basic-input2-letter-spacing);font-weight:var(--qdr-typography-basic-input2-font-weight)}.qdr-input-block__icons{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-1)}.qdr-input-block__icon{display:flex;align-items:center;justify-content:center;padding:var(--qdr-spacing-1);border-radius:var(--qdr-radius-2);color:var(--qdr-action-inactive);cursor:pointer}.qdr-input-block__icon:hover{color:var(--qdr-action-active);background:var(--qdr-secondary-hover-bg)}

package/input-block/input-block.scss

@@ -0,0 +1,38 @@
+.qdr-input-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--qdr-spacing-4);
+  background-color: var(--qdr-bg);
+  padding: var(--qdr-spacing-2) var(--qdr-spacing-4);
+  border-radius: var(--qdr-radius-2);
+
+  &__input {
+    font-size: var(--qdr-typography-basic-input2-font-size);
+    line-height: var(--qdr-typography-basic-input2-line-height);
+    letter-spacing: var(--qdr-typography-basic-input2-letter-spacing);
+    font-weight: var(--qdr-typography-basic-input2-font-weight);
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-1);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--qdr-spacing-1);
+    border-radius: var(--qdr-radius-2);
+    color: var(--qdr-action-inactive);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--qdr-action-active);
+      background: var(--qdr-secondary-hover-bg);
+    }
+  }
+}

package/input-block/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/input-block",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.js",
   "typings": "./index.d.ts"

package/line-break/line-break.scss

@@ -1,5 +1,3 @@
-$qdr-image-resizer-size: 6px;
-
 .qdr-line-break {
   &__with-symbol {
     position: relative;

package/list/createReactList.js

@@ -1,10 +1,11 @@
 import { createList } from '@quadrats/common/list';
+import { Node, Element } from '@quadrats/core';
 import { createRenderElements } from '@quadrats/react';
 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: () => ({
@@ -13,6 +14,15 @@ function createReactList(options = {}) {
                     const entries = core.getAboveListAndItem(editor);
                     if (entries) {
                         event.preventDefault();
+                        const [, path] = entries.listItem;
+                        const depth = path.filter((_, i) => {
+                            const ancestorPath = path.slice(0, i + 1);
+                            const ancestor = Node.get(editor, ancestorPath);
+                            return Element.isElement(ancestor) && (ancestor.type === 'ol' || ancestor.type === 'ul');
+                        }).length;
+                        if (depth >= core.labels) {
+                            return;
+                        }
                         (event.shiftKey ? core.decreaseListItemDepth : core.increaseListItemDepth)(editor, entries);
                         return;
                     }

package/list/index.cjs.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var list = require('@quadrats/common/list');
+var core = require('@quadrats/core');
 var react = require('@quadrats/react');
 
 const defaultRenderListElements = {
@@ -11,17 +12,26 @@ 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 => ({
-            type: core.types[key],
+    const core$1 = list.createList(options);
+    return Object.assign(Object.assign({}, core$1), { createRenderElement: (options = {}) => react.createRenderElements(['ol', 'ul', 'li'].map((key) => ({
+            type: core$1.types[key],
             render: options[key] || defaultRenderListElements[key],
         }))), createHandlers: () => ({
             onKeyDown: (event, editor, next) => {
                 if (event.key === 'Tab') {
-                    const entries = core.getAboveListAndItem(editor);
+                    const entries = core$1.getAboveListAndItem(editor);
                     if (entries) {
                         event.preventDefault();
-                        (event.shiftKey ? core.decreaseListItemDepth : core.increaseListItemDepth)(editor, entries);
+                        const [, path] = entries.listItem;
+                        const depth = path.filter((_, i) => {
+                            const ancestorPath = path.slice(0, i + 1);
+                            const ancestor = core.Node.get(editor, ancestorPath);
+                            return core.Element.isElement(ancestor) && (ancestor.type === 'ol' || ancestor.type === 'ul');
+                        }).length;
+                        if (depth >= core$1.labels) {
+                            return;
+                        }
+                        (event.shiftKey ? core$1.decreaseListItemDepth : core$1.increaseListItemDepth)(editor, entries);
                         return;
                     }
                 }

package/list/list.css

@@ -0,0 +1 @@
+.qdr-ol,.qdr-ul{padding-inline-start:var(--qdr-spacing-11);margin:0 0 var(--qdr-spacing-8)}.qdr-ol .qdr-li,.qdr-ul .qdr-li{padding:var(--qdr-spacing-1) 0}.qdr-ol .qdr-li>*,.qdr-ul .qdr-li>*{margin:0}:is(.qdr-ul) :is(.qdr-ul) :is(.qdr-ul) .qdr-ul{list-style-type:none}:is(.qdr-ul) :is(.qdr-ul) :is(.qdr-ul) .qdr-ul .qdr-li{position:relative}:is(.qdr-ul) :is(.qdr-ul) :is(.qdr-ul) .qdr-ul .qdr-li::before{content:"";width:4px;height:4px;border:1px solid var(--qdr-text-primary);position:absolute;top:calc(var(--qdr-typography-article-body1-font-size)*var(--qdr-typography-article-body1-line-height)*.5);left:calc(-1*var(--qdr-spacing-4) - 8px);color:#000}:is(.qdr-ol) .qdr-ol{list-style-type:lower-alpha}:is(.qdr-ol) :is(.qdr-ol) .qdr-ol{list-style-type:upper-roman}:is(.qdr-ol) :is(.qdr-ol) :is(.qdr-ol) .qdr-ol{list-style-type:lower-roman}

package/list/list.scss

@@ -0,0 +1,43 @@
+.qdr-ol, .qdr-ul {
+  padding-inline-start: var(--qdr-spacing-11);
+  margin: 0 0 var(--qdr-spacing-8);
+
+  .qdr-li {
+    padding: var(--qdr-spacing-1) 0;
+
+    > * {
+      margin: 0;
+    }
+  }
+}
+
+:is(.qdr-ul) :is(.qdr-ul) :is(.qdr-ul) .qdr-ul {
+  list-style-type: none;
+
+  .qdr-li {
+    position: relative;
+
+    &::before {
+      content: "";
+      width: 4px;
+      height: 4px;
+      border: 1px solid var(--qdr-text-primary);
+      position: absolute;
+      top: calc(var(--qdr-typography-article-body1-font-size) * var(--qdr-typography-article-body1-line-height) * 0.5);
+      left: calc(-1 * var(--qdr-spacing-4) - 8px);
+      color: black;
+    }
+  }
+}
+
+:is(.qdr-ol) .qdr-ol {
+  list-style-type: lower-alpha;
+}
+
+:is(.qdr-ol) :is(.qdr-ol) .qdr-ol {
+  list-style-type: upper-roman;
+}
+
+:is(.qdr-ol) :is(.qdr-ol) :is(.qdr-ol) .qdr-ol {
+  list-style-type: lower-roman;
+}

package/list/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/list",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.js",
   "typings": "./index.d.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.7.8",
+  "version": "1.0.0",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,16 +20,18 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.7.7",
-    "@quadrats/core": "^0.7.7",
-    "@quadrats/icons": "^0.7.0",
-    "@quadrats/locales": "^0.7.7",
-    "@quadrats/theme": "^0.7.4",
-    "@quadrats/utils": "^0.7.2",
+    "@quadrats/common": "^1.0.0",
+    "@quadrats/core": "^1.0.0",
+    "@quadrats/icons": "^1.0.0",
+    "@quadrats/locales": "^1.0.0",
+    "@quadrats/theme": "^1.0.0",
+    "@quadrats/utils": "^1.0.0",
     "@types/is-hotkey": "^0.1.9",
     "@types/react-transition-group": "^4.4.9",
     "clsx": "^2.1.1",
     "is-hotkey": "^0.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-transition-group": "^4.4.5",
     "slate-dom": "^0.112.2",
     "slate-react": "^0.112.1",
@@ -37,7 +39,8 @@
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "slate": "^0.112.0"
   },
   "main": "./index.cjs.js",
   "module": "./index.js",

package/paragraph/createReactParagraph.d.ts

@@ -0,0 +1,2 @@
+import { Paragraph } from '@quadrats/common/paragraph';
+export declare function createReactParagraph(): Paragraph;

package/paragraph/createReactParagraph.js

@@ -0,0 +1,8 @@
+import { createParagraph } from '@quadrats/common/paragraph';
+
+function createReactParagraph() {
+    const core = createParagraph();
+    return Object.assign({}, core);
+}
+
+export { createReactParagraph };

package/paragraph/createRenderParagraphElement.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
-import { ParagraphElement } from '@quadrats/core';
 import { RenderElementProps } from '@quadrats/react';
+import { ParagraphElement } from '@quadrats/common/paragraph';
 export type RenderParagraphElementProps = RenderElementProps<ParagraphElement>;
 export interface CreateRenderParagraphElementOptions {
     render?: (props: RenderParagraphElementProps) => JSX.Element | null | undefined;

package/paragraph/defaultRenderParagraphElement.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ParagraphElement } from '@quadrats/common/paragraph';
 import { RenderElementProps } from '@quadrats/react';
-export declare const defaultRenderParagraphElement: ({ attributes, children, }: {
+export declare const defaultRenderParagraphElement: ({ attributes, children, element, }: {
     attributes?: RenderElementProps["attributes"];
     children: any;
+    element: ParagraphElement;
 }) => React.JSX.Element;

package/paragraph/defaultRenderParagraphElement.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
-const defaultRenderParagraphElement = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph" }), children));
+const defaultRenderParagraphElement = ({ attributes, children, element, }) => {
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph", style: style }), children));
+};
 
 export { defaultRenderParagraphElement };

package/paragraph/index.cjs.js

@@ -3,16 +3,29 @@
 var React = require('react');
 var core = require('@quadrats/core');
 var react = require('@quadrats/react');
+var paragraph = require('@quadrats/common/paragraph');
 
-const defaultRenderParagraphElement = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph" }), children));
+const defaultRenderParagraphElement = ({ attributes, children, element, }) => {
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph", style: style }), children));
+};
 
 function createRenderParagraphElement(options = {}) {
     const { render = defaultRenderParagraphElement } = options;
     return react.createRenderElement({ type: core.PARAGRAPH_TYPE, render });
 }
 
-const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol" }), children));
+function createReactParagraph() {
+    const core = paragraph.createParagraph();
+    return Object.assign({}, core);
+}
+
+const renderParagraphElementWithSymbol = ({ attributes, children, element, }) => {
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol", style: style }), children));
+};
 
+exports.createReactParagraph = createReactParagraph;
 exports.createRenderParagraphElement = createRenderParagraphElement;
 exports.defaultRenderParagraphElement = defaultRenderParagraphElement;
 exports.renderParagraphElementWithSymbol = renderParagraphElementWithSymbol;

package/paragraph/index.d.ts

@@ -1,3 +1,4 @@
 export * from './defaultRenderParagraphElement';
 export * from './createRenderParagraphElement';
+export * from './createReactParagraph';
 export * from './renderParagraphElementWithSymbol';

package/paragraph/index.js

@@ -1,3 +1,4 @@
 export { defaultRenderParagraphElement } from './defaultRenderParagraphElement.js';
 export { createRenderParagraphElement } from './createRenderParagraphElement.js';
+export { createReactParagraph } from './createReactParagraph.js';
 export { renderParagraphElementWithSymbol } from './renderParagraphElementWithSymbol.js';

package/paragraph/paragraph.css

@@ -1 +1 @@
-.qdr-paragraph__with-line-break-symbol>*:last-child{position:relative}.qdr-paragraph__with-line-break-symbol>*:last-child::after{content:"";display:block;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA60lEQVRoge2ZwQ3CMBAEdxH/0AF0AKVQQkqgA6ACKIFSKAE6oJNDEREPxOccwybSjuRPrEt2JMeJdYwITJnZpNNbYARYQI0F1FhAjQXUzMcQguT7hywimKn1ElJjATUWUGMBNRZQYwE1FiC5IHmrEyfPIAGSGwBd+LUof7kAyS2AK4Bl3Ug5ig40JHcATh/XDv+P/zoBpQaAS1f2q5HNM7Zd6J4tSC+hiGhJPgDsP6aO2Xt94ZwtKG5wkGz7BzYoOIzXYlCHpt9Gu52oUQkMegciovsGrErWbi3cI1NjATUWUGMBNRZQYwEpAJ566ofECQ43YwAAAABJRU5ErkJggg==");background-size:16px;background-position:center;background-repeat:no-repeat;position:absolute;right:-16px;bottom:0;opacity:.5}
+.qdr-paragraph{margin:0 0 var(--qdr-spacing-6);color:var(--qdr-text-primary);font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight)}.qdr-paragraph__with-line-break-symbol>*:last-child{position:relative}.qdr-paragraph__with-line-break-symbol>*:last-child::after{content:"";display:block;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA60lEQVRoge2ZwQ3CMBAEdxH/0AF0AKVQQkqgA6ACKIFSKAE6oJNDEREPxOccwybSjuRPrEt2JMeJdYwITJnZpNNbYARYQI0F1FhAjQXUzMcQguT7hywimKn1ElJjATUWUGMBNRZQYwE1FiC5IHmrEyfPIAGSGwBd+LUof7kAyS2AK4Bl3Ug5ig40JHcATh/XDv+P/zoBpQaAS1f2q5HNM7Zd6J4tSC+hiGhJPgDsP6aO2Xt94ZwtKG5wkGz7BzYoOIzXYlCHpt9Gu52oUQkMegciovsGrErWbi3cI1NjATUWUGMBNRZQYwEpAJ566ofECQ43YwAAAABJRU5ErkJggg==");background-size:16px;background-position:center;background-repeat:no-repeat;position:absolute;right:-16px;bottom:0;opacity:.5}

package/paragraph/paragraph.scss

@@ -1,6 +1,11 @@
-$qdr-image-resizer-size: 6px;
-
 .qdr-paragraph {
+  margin: 0 0 var(--qdr-spacing-6);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-article-body1-font-size);
+  line-height: var(--qdr-typography-article-body1-line-height);
+  letter-spacing: var(--qdr-typography-article-body1-letter-spacing);
+  font-weight: var(--qdr-typography-article-body1-font-weight);
+
   &__with-line-break-symbol {
     > *:last-child {
       position: relative;

package/paragraph/renderParagraphElementWithSymbol.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ParagraphElement } from '@quadrats/common/paragraph';
 import { RenderElementProps } from '@quadrats/react';
-export declare const renderParagraphElementWithSymbol: ({ attributes, children, }: {
+export declare const renderParagraphElementWithSymbol: ({ attributes, children, element, }: {
     attributes?: RenderElementProps["attributes"];
     children: any;
+    element: ParagraphElement;
 }) => React.JSX.Element;

package/paragraph/renderParagraphElementWithSymbol.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
-const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol" }), children));
+const renderParagraphElementWithSymbol = ({ attributes, children, element, }) => {
+    const style = element.align ? { textAlign: element.align } : undefined;
+    return (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph qdr-paragraph__with-line-break-symbol", style: style }), children));
+};
 
 export { renderParagraphElementWithSymbol };

package/paragraph/toolbar/ParagraphToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Paragraph } from '@quadrats/common/paragraph';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+export interface ParagraphToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: Paragraph;
+}
+declare function ParagraphToolbarIcon(props: ParagraphToolbarIconProps): React.JSX.Element;
+export default ParagraphToolbarIcon;

package/paragraph/toolbar/ParagraphToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useToggleParagraphTool } from './useToggleParagraphTool.js';
+
+function ParagraphToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { active, onClick } = useToggleParagraphTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+export { ParagraphToolbarIcon as default };

package/paragraph/toolbar/index.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var React = require('react');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useToggleParagraphTool(controller) {
+    const editor = react.useQuadrats();
+    return {
+        active: controller.isSelectionInParagraph(editor),
+        onClick: () => controller.setParagraphNodes(editor),
+    };
+}
+
+function ParagraphToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { active, onClick } = useToggleParagraphTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.ParagraphToolbarIcon = ParagraphToolbarIcon;
+exports.useToggleParagraphTool = useToggleParagraphTool;

package/paragraph/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToggleParagraphTool';
+export { ParagraphToolbarIconProps, default as ParagraphToolbarIcon } from './ParagraphToolbarIcon';

package/paragraph/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useToggleParagraphTool } from './useToggleParagraphTool.js';
+export { default as ParagraphToolbarIcon } from './ParagraphToolbarIcon.js';

package/paragraph/toolbar/package.json

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