@quadrats/react 0.1.0 → 0.4.5

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,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "0.1.0",
+  "version": "0.4.5",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,12 +20,12 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^0.1.0",
-    "@quadrats/core": "^0.1.0",
-    "@quadrats/icons": "^0.1.0",
-    "@quadrats/locales": "^0.1.0",
-    "@quadrats/theme": "^0.1.0",
-    "@quadrats/utils": "^0.1.0",
+    "@quadrats/common": "^0.4.5",
+    "@quadrats/core": "^0.4.5",
+    "@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.js

@@ -9,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,7 +6,7 @@ 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);
 

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/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,
-});
+})();
 
 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: ({ 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 = ({ children }) => React.createElement("del", null, 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

@@ -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,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const STRIKETHROUGH_HOTKEY = 'mod+opt+s';
 
-const defaultRenderStrikethrough = ({ children }) => React__default.createElement("del", null, children);
+const defaultRenderStrikethrough = ({ children, leaf }) => (React__default.createElement("del", { className: leaf.strikethroughVariant
+        ? `${strikethrough.STRIKETHROUGH_TYPE}.${leaf.strikethroughVariant}` : `${strikethrough.STRIKETHROUGH_TYPE}` }, children));
 
-const createReactStrikethrough = toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough, {
+const createReactStrikethrough = (variant) => toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
     render: defaultRenderStrikethrough,
-});
+})();
 
 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,6 +1,6 @@
-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,

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/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var isHotkey = require('is-hotkey');
 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 isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
 

package/toggle-mark/jsx-serializer/createJsxSerializeToggleMarkCreator.d.ts

@@ -2,4 +2,4 @@
 import { CreateJsxSerializeMarkOptions } from '@quadrats/react/jsx-serializer';
 export declare type CreateJsxSerializeToggleMarkCreatorOptions = CreateJsxSerializeMarkOptions<boolean>;
 export declare type CreateJsxSerializeToggleMarkOptions = Partial<CreateJsxSerializeToggleMarkCreatorOptions>;
-export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: Partial<CreateJsxSerializeMarkOptions<boolean>> | undefined) => (props: Pick<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "leaf" | "children">) => JSX.Element;
+export declare function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions): (options?: Partial<CreateJsxSerializeToggleMarkCreatorOptions> | undefined) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => JSX.Element;

package/toggle-mark/toolbar/ToggleMarkToolbarIcon.js

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

package/toggle-mark/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/toolbar/components/Toolbar.js

@@ -103,4 +103,4 @@ function Toolbar(props) {
                     }, toolInput: toolInput }))))));
 }
 
-export default Toolbar;
+export { Toolbar as default };

package/toolbar/components/ToolbarIcon.js

@@ -1,7 +1,7 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import clsx from 'clsx';
 import { Icon } from '@quadrats/react/components';
-import { __rest } from 'tslib';
 
 function ToolbarIcon(props) {
     const { active, className, onMouseDown } = props, rest = __rest(props, ["active", "className", "onMouseDown"]);
@@ -11,4 +11,4 @@ function ToolbarIcon(props) {
         } })));
 }
 
-export default ToolbarIcon;
+export { ToolbarIcon as default };

package/toolbar/components/ToolbarInput.js

@@ -19,7 +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", { 
+        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("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
@@ -28,4 +28,4 @@ function ToolbarInput({ exit, toolInput }) {
                 d: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" }))));
 }
 
-export default ToolbarInput;
+export { ToolbarInput as default };