@quadrats/react 0.0.1 → 0.4.3

package/line-break/line-break.scss

@@ -0,0 +1,22 @@
+$qdr-image-resizer-size: 6px;
+
+.qdr-line-break {
+  &__with-symbol {
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 16px;
+      height: 16px;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAxElEQVRoge2ZwQlCMRBEZ2xAS7ADLeGXklJSiiVpB5agFax8iCAfxMsuY2Ae7CWEzD42p4QRgZnZTd29Bf4AC6ixgBoLqLGAmjIBkp1kjOpVOZ6AGguosYAaC6ixgBoLqLGAGguomV4g9XWa5BXA6ce2W0Sc0zKTBQ4A7gD2X7Y8ARwj4pGVmXqFRmPLaHTLurZkNv8OTS8AbT16U60kq+LQIdE/BHpVTukXE8nLmHIry/AfmRgLqLGAGguosYAaC0gB8ALxmTRWAs9XmwAAAABJRU5ErkJggg==');
+      background-size: 16px;
+      background-position: center;
+      background-repeat: no-repeat;
+      position: absolute;
+      right: -16px;
+      top: 0;
+      opacity: 0.5;
+    }
+  }
+}

package/line-break/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@quadrats/react/line-break",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/line-break/renderLineBreakElementWithSymbol.d.ts

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

package/line-break/renderLineBreakElementWithSymbol.js

@@ -0,0 +1,6 @@
+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)));
+
+export { renderLineBreakElementWithSymbol };

package/line-break/typings.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { IsNodeMatchOptions, LineBreak, LineBreakElement } from '@quadrats/core';
+import { WithCreateRenderElement, RenderElementProps, WithCreateHandlers } from '@quadrats/react';
+export interface ExitBreakRule {
+    hotkey: string;
+    /**
+     * @default ParagraphType
+     */
+    defaultType?: string;
+    match?: IsNodeMatchOptions & {
+        /**
+         * Only match at if selection on edge of block.
+         * @default false
+         */
+        onlyAtEdge?: boolean;
+    };
+    /**
+     * Exit before the selected block if true.
+     * @default false
+     */
+    before?: boolean;
+}
+export interface SoftBreakRule {
+    hotkey: string;
+    match?: IsNodeMatchOptions;
+}
+export declare type RenderLineBreakElementProps = RenderElementProps<LineBreakElement>;
+export interface ReactLineBreakCreateRenderElementOptions {
+    render?: (props: RenderLineBreakElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactBreak extends LineBreak, WithCreateHandlers, WithCreateRenderElement<[ReactLineBreakCreateRenderElementOptions?]> {
+}

package/link/createReactLink.js

@@ -1,6 +1,6 @@
-import { defaultRenderLinkElement } from './defaultRenderLinkElement.js';
 import { createLink } from '@quadrats/common/link';
 import { createRenderElement } from '@quadrats/react';
+import { defaultRenderLinkElement } from './defaultRenderLinkElement.js';
 
 function createReactLink(options = {}) {
     const { pastedUrlToLink = true } = options;

package/link/defaultRenderLinkElement.d.ts

@@ -4,6 +4,6 @@ import { RenderLinkElementProps } from './typings';
  * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
  */
 export declare const defaultRenderLinkElement: ({ attributes, children, element, placement, target, }: import("@quadrats/react/_internal").RenderElementPropsBase<import("@quadrats/common/link").LinkElement> & Pick<import("slate-react").RenderElementProps, "attributes"> & {
-    placement?: "bottom" | "top" | undefined;
+    placement?: "top" | "bottom" | undefined;
     target?: string | undefined;
 }) => JSX.Element;

package/link/index.cjs.js

@@ -7,7 +7,7 @@ var components = require('@quadrats/react/components');
 var link = require('@quadrats/common/link');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/link/jsx-serializer/createJsxSerializeLink.js

@@ -1,6 +1,6 @@
-import { defaultRenderLinkElement } from './defaultRenderLinkElement.js';
 import { LINK_TYPE } from '@quadrats/common/link';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderLinkElement } from './defaultRenderLinkElement.js';
 
 function createJsxSerializeLink(options = {}) {
     const { type = LINK_TYPE, render = defaultRenderLinkElement } = options;

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

@@ -6,7 +6,7 @@ var React = require('react');
 var link = require('@quadrats/common/link');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/link/toolbar/LinkToolbarIcon.js

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

package/link/toolbar/UnlinkToolbarIcon.js

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

package/link/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ var toolbar = require('@quadrats/react/toolbar');
 var tslib = require('tslib');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/list/createReactList.js

@@ -1,6 +1,6 @@
-import { defaultRenderListElements } from './defaultRenderListElements.js';
 import { createList } from '@quadrats/common/list';
 import { createRenderElements } from '@quadrats/react';
+import { defaultRenderListElements } from './defaultRenderListElements.js';
 
 function createReactList(options = {}) {
     const core = createList(options);

package/list/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var list = require('@quadrats/common/list');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/list/jsx-serializer/createJsxSerializeList.js

@@ -1,6 +1,6 @@
-import { defaultRenderListElements } from '@quadrats/react/list';
 import { LIST_TYPES } from '@quadrats/common/list';
 import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderListElements } from '@quadrats/react/list';
 
 function createJsxSerializeList(options = {}) {
     return createJsxSerializeElements(['ol', 'ul', 'li'].map((key) => {

package/list/toolbar/ListToolbarIcon.js

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

package/list/toolbar/index.cjs.js

@@ -7,7 +7,7 @@ var tslib = require('tslib');
 var React = require('react');
 var toolbar = require('@quadrats/react/toolbar');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@quadrats/react",
-  "version": "0.0.1",
+  "version": "0.4.3",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -17,12 +20,12 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.0.1",
-    "@quadrats/core": "^0.0.1",
-    "@quadrats/icons": "^0.0.1",
-    "@quadrats/locales": "^0.0.1",
-    "@quadrats/theme": "^0.0.1",
-    "@quadrats/utils": "^0.0.1",
+    "@quadrats/common": "^0.4.0",
+    "@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",
     "clsx": "^1.1.1",

package/paragraph/createRenderParagraphElement.js

@@ -1,6 +1,6 @@
-import { defaultRenderParagraphElement } from './defaultRenderParagraphElement.js';
 import { PARAGRAPH_TYPE } from '@quadrats/core';
 import { createRenderElement } from '@quadrats/react';
+import { defaultRenderParagraphElement } from './defaultRenderParagraphElement.js';
 
 function createRenderParagraphElement(options = {}) {
     const { render = defaultRenderParagraphElement } = options;

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), children));
 
 export { defaultRenderParagraphElement };

package/paragraph/index.cjs.js

@@ -6,16 +6,19 @@ var React = require('react');
 var core = require('@quadrats/core');
 var react = require('@quadrats/react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 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), 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));
+
 exports.createRenderParagraphElement = createRenderParagraphElement;
 exports.defaultRenderParagraphElement = defaultRenderParagraphElement;
+exports.renderParagraphElementWithSymbol = renderParagraphElementWithSymbol;

package/paragraph/index.d.ts

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

package/paragraph/index.js

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

package/paragraph/jsx-serializer/createJsxSerializeParagraph.js

@@ -1,6 +1,6 @@
-import { defaultRenderParagraphElement } from '@quadrats/react/paragraph';
 import { PARAGRAPH_TYPE } from '@quadrats/core';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderParagraphElement } from '@quadrats/react/paragraph';
 
 function createJsxSerializeParagraph(options = {}) {
     const { render = defaultRenderParagraphElement } = options;

package/paragraph/package.json

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

package/paragraph/paragraph.css

@@ -0,0 +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}

package/paragraph/paragraph.scss

@@ -0,0 +1,24 @@
+$qdr-image-resizer-size: 6px;
+
+.qdr-paragraph {
+  &__with-line-break-symbol {
+    > *:last-child {
+      position: relative;
+
+      &::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: 0.5;
+      }
+    }
+  }
+}

package/paragraph/renderParagraphElementWithSymbol.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RenderElementProps } from '@quadrats/react';
+export declare const renderParagraphElementWithSymbol: ({ attributes, children, }: {
+    attributes?: {
+        'data-slate-node': "element";
+        'data-slate-inline'?: true | undefined;
+        'data-slate-void'?: true | undefined;
+        dir?: "rtl" | undefined;
+        ref: any;
+    } | undefined;
+    children: any;
+}) => JSX.Element;

package/paragraph/renderParagraphElementWithSymbol.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const renderParagraphElementWithSymbol = ({ attributes, children, }) => (React.createElement("p", Object.assign({}, attributes, { className: "qdr-paragraph__with-line-break-symbol" }), children));
+
+export { renderParagraphElementWithSymbol };

package/read-more/components/ReadMore.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { RenderElementProps } from '@quadrats/react';
-import './read-more.scss';
 export interface ReadMoreProps {
     attributes?: RenderElementProps['attributes'];
     children: any;

package/read-more/components/ReadMore.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useLocale } from '@quadrats/react';
-import './read-more.scss.js';
 
 function ReadMore(props) {
     const { attributes, children } = props;
@@ -10,4 +9,4 @@ function ReadMore(props) {
         attributes ? children : undefined));
 }
 
-export default ReadMore;
+export { ReadMore as default };

package/read-more/createReactReadMore.js

@@ -1,6 +1,6 @@
+import { createReadMore } from '@quadrats/common/read-more';
 import { createRenderElement } from '@quadrats/react';
 import { defaultRenderReadMoreElement } from './defaultRenderReadMoreElement.js';
-import { createReadMore } from '@quadrats/common/read-more';
 
 function createReactReadMore(options = {}) {
     const core = createReadMore(options);

package/read-more/index.cjs.js

@@ -6,40 +6,10 @@ var React = require('react');
 var react = require('@quadrats/react');
 var readMore = require('@quadrats/common/read-more');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".qdr-read-more{position:relative;margin:18px 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;background-image:linear-gradient(90deg,var(--qdr-divider) 50%,hsla(0,0%,100%,0) 0);background-position:50%;background-size:1em 1px;background-repeat:repeat-x}.qdr-read-more__description{position:relative;z-index:1;padding:0 1em;background:var(--qdr-background);transition:background-color .3s ease-in-out,color .3s ease-in-out;will-change:background-color,color}";
-styleInject(css_248z);
-
 function ReadMore(props) {
     const { attributes, children } = props;
     const { readMore } = react.useLocale().editor;

package/read-more/jsx-serializer/createJsxSerializeReadMore.js

@@ -1,6 +1,6 @@
-import { defaultRenderReadMoreElement } from '@quadrats/react/read-more';
 import { READ_MORE_TYPE } from '@quadrats/common/read-more';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderReadMoreElement } from '@quadrats/react/read-more';
 
 function createJsxSerializeReadMore(options = {}) {
     const { type = READ_MORE_TYPE, render = defaultRenderReadMoreElement } = options;

package/read-more/package.json

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

package/read-more/read-more.css

@@ -0,0 +1 @@
+.qdr-read-more{position:relative;margin:18px 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);background-position:center;background-size:1em 1px;background-repeat:repeat-x}.qdr-read-more__description{position:relative;z-index:1;padding:0 1em;background:var(--qdr-background);transition:background-color 300ms ease-in-out,color 300ms ease-in-out;will-change:background-color,color}

package/read-more/read-more.scss

@@ -0,0 +1,29 @@
+.qdr-read-more {
+  position: relative;
+  margin: 18px 0;
+  width: 100%;
+  color: var(--qdr-divider);
+  text-align: center;
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);
+    background-position: center;
+    background-size: 1em 1px;
+    background-repeat: repeat-x;
+  }
+
+  &__description {
+    position: relative;
+    z-index: 1;
+    padding: 0 1em;
+    background: var(--qdr-background);
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+    will-change: background-color, color;
+  }
+}

package/read-more/toolbar/ReadMoreToolbarIcon.js

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

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

@@ -7,7 +7,7 @@ var tslib = require('tslib');
 var React = require('react');
 var toolbar = require('@quadrats/react/toolbar');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 

package/strikethrough/createReactStrikethrough.d.ts

@@ -1 +1 @@
-export declare const createReactStrikethrough: ({ type }?: Partial<import("@quadrats/core").WithMarkType> | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;
+export declare const createReactStrikethrough: (variant?: string | undefined) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/strikethrough/createReactStrikethrough.js

@@ -1,11 +1,11 @@
-import { STRIKETHROUGH_HOTKEY } from './constants.js';
-import { defaultRenderStrikethrough } from './defaultRenderStrikethrough.js';
 import { createStrikethrough } from '@quadrats/common/strikethrough';
 import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderStrikethrough } from './defaultRenderStrikethrough.js';
+import { STRIKETHROUGH_HOTKEY } from './constants.js';
 
-const createReactStrikethrough = createReactToggleMarkCreator(createStrikethrough, {
+const createReactStrikethrough = (variant) => createReactToggleMarkCreator(createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough,
-});
+    render: defaultRenderStrikethrough(variant),
+})();
 
 export { createReactStrikethrough };

package/strikethrough/defaultRenderStrikethrough.d.ts

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

package/strikethrough/defaultRenderStrikethrough.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const defaultRenderStrikethrough = ({ children }) => React.createElement("del", null, children);
+const defaultRenderStrikethrough = (variant) => (({ children }) => (React.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
 
 export { defaultRenderStrikethrough };

package/strikethrough/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var strikethrough = require('@quadrats/common/strikethrough');
 var toggleMark = require('@quadrats/react/toggle-mark');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -17,12 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const STRIKETHROUGH_HOTKEY = 'mod+opt+s';
 
-const defaultRenderStrikethrough = ({ children }) => React__default.createElement("del", null, children);
+const defaultRenderStrikethrough = (variant) => (({ children }) => (React__default.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
 
-const createReactStrikethrough = toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough, {
+const createReactStrikethrough = (variant) => toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough,
-});
+    render: defaultRenderStrikethrough(variant),
+})();
 
 exports.STRIKETHROUGH_HOTKEY = STRIKETHROUGH_HOTKEY;
 exports.createReactStrikethrough = createReactStrikethrough;

package/strikethrough/jsx-serializer/createJsxSerializeStrikethrough.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const createJsxSerializeStrikethrough: (options?: Partial<import("@quadrats/react/jsx-serializer").CreateJsxSerializeMarkOptions<boolean>> | undefined) => (props: Pick<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "leaf" | "children">) => JSX.Element;
+export declare const createJsxSerializeStrikethrough: (options?: Partial<import("@quadrats/react/toggle-mark/jsx-serializer").CreateJsxSerializeToggleMarkCreatorOptions> | undefined) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;

package/strikethrough/jsx-serializer/createJsxSerializeStrikethrough.js

@@ -1,10 +1,10 @@
-import { defaultRenderStrikethrough } from '@quadrats/react/strikethrough';
 import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderStrikethrough } from '@quadrats/react/strikethrough';
 
 const createJsxSerializeStrikethrough = createJsxSerializeToggleMarkCreator({
     type: STRIKETHROUGH_TYPE,
-    render: defaultRenderStrikethrough,
+    render: defaultRenderStrikethrough(),
 });
 
 export { createJsxSerializeStrikethrough };