@quadrats/react 0.0.1 → 0.4.3

package/embed/toolbar/EmbedToolbarIcon.js

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

package/embed/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/file-uploader/components/FileUploader.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import { RenderFileUploaderElementProps } from '../typings';
-import './file-uploader.scss';
 declare function FileUploader(props: RenderFileUploaderElementProps): JSX.Element;
 export default FileUploader;

package/file-uploader/components/FileUploader.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Progress } from '@quadrats/react/components';
-import './file-uploader.scss.js';
+import { useFileUploader } from '../hooks/useFileUploader.js';
 
 function FileUploader(props) {
     const { attributes, children, element } = props;
@@ -12,4 +11,4 @@ function FileUploader(props) {
         children));
 }
 
-export default FileUploader;
+export { FileUploader as default };

package/file-uploader/createReactFileUploader.js

@@ -1,6 +1,6 @@
+import { createFileUploader } from '@quadrats/common/file-uploader';
 import { createRenderElement } from '@quadrats/react';
 import { defaultRenderFileUploaderElement } from './defaultRenderFileUploaderElement.js';
-import { createFileUploader } from '@quadrats/common/file-uploader';
 
 function createReactFileUploader(options = {}) {
     const core = createFileUploader(options);

package/file-uploader/file-uploader.css

@@ -0,0 +1 @@
+.qdr-file-uploader{position:relative}.qdr-file-uploader__backdrop{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--qdr-text);transition:background-color 300ms ease-in-out;will-change:background-color;opacity:.65;z-index:1}.qdr-file-uploader__progress{width:50%}

package/file-uploader/file-uploader.scss

@@ -0,0 +1,23 @@
+.qdr-file-uploader {
+  position: relative;
+
+  &__backdrop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--qdr-text);
+    transition: background-color 300ms ease-in-out;
+    will-change: background-color;
+    opacity: 0.65;
+    z-index: 1;
+  }
+
+  &__progress {
+    width: 50%;
+  }
+}

package/file-uploader/index.cjs.js

@@ -7,7 +7,7 @@ var react = require('@quadrats/react');
 var components = require('@quadrats/react/components');
 var fileUploader = require('@quadrats/common/file-uploader');
 
-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);
 
@@ -20,36 +20,6 @@ function useFileUploader(element) {
     };
 }
 
-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-file-uploader{position:relative}.qdr-file-uploader__backdrop{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--qdr-text);transition:background-color .3s ease-in-out;will-change:background-color;opacity:.65;z-index:1}.qdr-file-uploader__progress{width:50%}";
-styleInject(css_248z);
-
 function FileUploader(props) {
     const { attributes, children, element } = props;
     const { percentage } = useFileUploader(element);

package/file-uploader/package.json

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

package/file-uploader/toolbar/FileUploaderToolbarIcon.js

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

package/file-uploader/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/footnote/createReactFootnote.d.ts

@@ -0,0 +1,4 @@
+import { WithElementType } from '@quadrats/core';
+import { ReactFootnote } from './typings';
+export declare type CreateReactFootnoteOptions = Partial<WithElementType>;
+export declare function createReactFootnote(options?: CreateReactFootnoteOptions): ReactFootnote;

package/footnote/createReactFootnote.js

@@ -0,0 +1,24 @@
+import { createRenderElement } from '@quadrats/react';
+import { createFootnote } from '@quadrats/common/footnote';
+import { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+
+function createReactFootnote(options = {}) {
+    const core = createFootnote(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFootnoteElement } = {}) => createRenderElement({ type, render }), with(editor) {
+            const { insertData, insertText } = editor;
+            editor.insertData = (data) => {
+                const text = data.getData('text/plain');
+                if (text) {
+                    if (core.isSelectionInFootnote(editor)) {
+                        insertText(text);
+                        return;
+                    }
+                }
+                insertData(data);
+            };
+            return core.with(editor);
+        } });
+}
+
+export { createReactFootnote };

package/footnote/defaultRenderFootnoteElement.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RenderFootnoteElementProps } from './typings';
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+export declare const defaultRenderFootnoteElement: ({ attributes, children, element, placement, }: import("@quadrats/react/_internal").RenderElementPropsBase<import("@quadrats/common/footnote").FootnoteElement> & Pick<import("slate-react").RenderElementProps, "attributes"> & {
+    placement?: "top" | "bottom" | undefined;
+    target?: string | undefined;
+}) => JSX.Element;

package/footnote/defaultRenderFootnoteElement.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tooltip } from '@quadrats/react/components';
+
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+const defaultRenderFootnoteElement = ({ attributes, children, element, placement = 'bottom', }) => {
+    const { footnote, index } = element;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { placement: placement, popup: footnote },
+            React.createElement("a", Object.assign({}, attributes, { href: "./#", target: "_blank" }), children)),
+        React.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+};
+
+export { defaultRenderFootnoteElement };

package/footnote/index.cjs.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var components = require('@quadrats/react/components');
+var react = require('@quadrats/react');
+var footnote = require('@quadrats/common/footnote');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
+ */
+const defaultRenderFootnoteElement = ({ attributes, children, element, placement = 'bottom', }) => {
+    const { footnote, index } = element;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(components.Tooltip, { placement: placement, popup: footnote },
+            React__default.createElement("a", Object.assign({}, attributes, { href: "./#", target: "_blank" }), children)),
+        React__default.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
+};
+
+function createReactFootnote(options = {}) {
+    const core = footnote.createFootnote(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createRenderElement: ({ render = defaultRenderFootnoteElement } = {}) => react.createRenderElement({ type, render }), with(editor) {
+            const { insertData, insertText } = editor;
+            editor.insertData = (data) => {
+                const text = data.getData('text/plain');
+                if (text) {
+                    if (core.isSelectionInFootnote(editor)) {
+                        insertText(text);
+                        return;
+                    }
+                }
+                insertData(data);
+            };
+            return core.with(editor);
+        } });
+}
+
+exports.createReactFootnote = createReactFootnote;
+exports.defaultRenderFootnoteElement = defaultRenderFootnoteElement;

package/footnote/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement';
+export { CreateReactFootnoteOptions, createReactFootnote } from './createReactFootnote';

package/footnote/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+export { createReactFootnote } from './createReactFootnote.js';

package/footnote/jsx-serializer/createJsxSerializeFootnote.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeFootnoteElementProps } from './typings';
+export declare type CreateJsxSerializeFootnoteOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeFootnoteElementProps>>;
+export declare function createJsxSerializeFootnote(options?: CreateJsxSerializeFootnoteOptions): (props: import("@quadrats/react/jsx-serializer").JsxSerializeElementProps<import("slate").Element>) => JSX.Element | null | undefined;

package/footnote/jsx-serializer/createJsxSerializeFootnote.js

@@ -0,0 +1,11 @@
+import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
+import { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+
+/* eslint-disable max-len */
+function createJsxSerializeFootnote(options = {}) {
+    const { type = FOOTNOTE_TYPE, render = defaultRenderFootnoteElement } = options;
+    return createJsxSerializeElement({ type, render });
+}
+
+export { createJsxSerializeFootnote };

package/footnote/jsx-serializer/defaultRenderFootnoteElement.d.ts

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

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const defaultRenderFootnoteElement = ({ children, element }) => {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { href: "./#" }, children),
+        React.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+};
+
+export { defaultRenderFootnoteElement };

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+var footnote = require('@quadrats/common/footnote');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultRenderFootnoteElement = ({ children, element }) => {
+    var _a;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("a", { href: "./#" }, children),
+        React__default.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
+};
+
+/* eslint-disable max-len */
+function createJsxSerializeFootnote(options = {}) {
+    const { type = footnote.FOOTNOTE_TYPE, render = defaultRenderFootnoteElement } = options;
+    return jsxSerializer.createJsxSerializeElement({ type, render });
+}
+
+exports.createJsxSerializeFootnote = createJsxSerializeFootnote;
+exports.defaultRenderFootnoteElement = defaultRenderFootnoteElement;

package/footnote/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement';
+export { CreateJsxSerializeFootnoteOptions, createJsxSerializeFootnote } from './createJsxSerializeFootnote';

package/footnote/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement.js';
+export { createJsxSerializeFootnote } from './createJsxSerializeFootnote.js';

package/footnote/jsx-serializer/package.json

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

package/footnote/jsx-serializer/typings.d.ts

@@ -0,0 +1,3 @@
+import { FootnoteElement } from '@quadrats/common/footnote';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare type JsxSerializeFootnoteElementProps = JsxSerializeElementProps<FootnoteElement>;

package/{break → footnote}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@quadrats/react/break",
+  "name": "@quadrats/react/footnote",
   "sideEffects": false,
   "main": "./index.cjs.js",
   "module": "./index.js",

package/footnote/toolbar/FootnoteToolbarIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactFootnote } from '@quadrats/react/footnote';
+import { UseFootnoteToolOptions } from './useFootnoteTool';
+export interface FootnoteToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactFootnote;
+    options?: UseFootnoteToolOptions;
+}
+declare function FootnoteToolbarIcon(props: FootnoteToolbarIconProps): JSX.Element;
+export default FootnoteToolbarIcon;

package/footnote/toolbar/FootnoteToolbarIcon.js

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

package/footnote/toolbar/index.cjs.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@quadrats/react');
+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; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function useFootnoteTool(controller, options = {}) {
+    const editor = react.useQuadrats();
+    const startToolInput = toolbar.useStartToolInput();
+    return {
+        active: controller.isSelectionInFootnote(editor),
+        onClick: () => startToolInput({
+            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            confirm: (footnoteText) => {
+                controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
+            },
+            defaultValue: controller.getFootnoteText(editor),
+        }),
+    };
+}
+
+function FootnoteToolbarIcon(props) {
+    const { controller, options = {} } = props, rest = tslib.__rest(props, ["controller", "options"]);
+    const { active, onClick } = useFootnoteTool(controller, options);
+    return React__default.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { active: active, onClick: onClick }));
+}
+
+exports.FootnoteToolbarIcon = FootnoteToolbarIcon;
+exports.useFootnoteTool = useFootnoteTool;

package/footnote/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFootnoteTool';
+export { FootnoteToolbarIconProps, default as FootnoteToolbarIcon } from './FootnoteToolbarIcon';

package/footnote/toolbar/index.js

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

package/footnote/toolbar/package.json

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

package/footnote/toolbar/useFootnoteTool.d.ts

@@ -0,0 +1,7 @@
+import { FootnoteUpsertFootnoteOptions } from '@quadrats/common/footnote';
+import { ReactFootnote } from '@quadrats/react/footnote';
+export declare type UseFootnoteToolOptions = FootnoteUpsertFootnoteOptions;
+export declare function useFootnoteTool(controller: ReactFootnote, options?: UseFootnoteToolOptions): {
+    active: boolean;
+    onClick: () => void;
+};

package/footnote/toolbar/useFootnoteTool.js

@@ -0,0 +1,19 @@
+import { useQuadrats } from '@quadrats/react';
+import { useStartToolInput } from '@quadrats/react/toolbar';
+
+function useFootnoteTool(controller, options = {}) {
+    const editor = useQuadrats();
+    const startToolInput = useStartToolInput();
+    return {
+        active: controller.isSelectionInFootnote(editor),
+        onClick: () => startToolInput({
+            getPlaceholder: (locale) => locale.editor.footnote.inputPlaceholder,
+            confirm: (footnoteText) => {
+                controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
+            },
+            defaultValue: controller.getFootnoteText(editor),
+        }),
+    };
+}
+
+export { useFootnoteTool };

package/footnote/typings.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footnote, FootnoteElement } from '@quadrats/common/footnote';
+import { RenderElementProps, ReactWithable, WithCreateRenderElement } from '@quadrats/react';
+export declare type RenderFootnoteElementProps = RenderElementProps<FootnoteElement>;
+export interface ReactFootnoteCreateRenderElementOptions {
+    render?: (props: RenderFootnoteElementProps) => JSX.Element | null | undefined;
+}
+export interface ReactFootnote extends Omit<Footnote, 'with'>, WithCreateRenderElement<[ReactFootnoteCreateRenderElementOptions?]>, ReactWithable {
+}

package/heading/createReactHeading.js

@@ -1,9 +1,9 @@
-import { HEADING_HOTKEY } from './constants.js';
-import { defaultRenderHeadingElement } from './defaultRenderHeadingElement.js';
 import isHotkey from 'is-hotkey';
 import { createHeading } from '@quadrats/common/heading';
 import { createRenderElement } from '@quadrats/react';
-import { createOnKeyDownBreak } from '@quadrats/react/break';
+import { createOnKeyDownBreak } from '@quadrats/react/line-break';
+import { HEADING_HOTKEY } from './constants.js';
+import { defaultRenderHeadingElement } from './defaultRenderHeadingElement.js';
 
 function createReactHeading(options = {}) {
     const core = createHeading(options);

package/heading/index.cjs.js

@@ -6,9 +6,9 @@ var React = require('react');
 var isHotkey = require('is-hotkey');
 var heading = require('@quadrats/common/heading');
 var react = require('@quadrats/react');
-var _break = require('@quadrats/react/break');
+var lineBreak = require('@quadrats/react/line-break');
 
-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);
 var isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
@@ -43,7 +43,7 @@ function createReactHeading(options = {}) {
     const core = heading.createHeading(options);
     const { type } = core;
     return Object.assign(Object.assign({}, core), { createHandlers: ({ hotkey = HEADING_HOTKEY } = {}) => {
-            const onKeyDownBreak = _break.createOnKeyDownBreak({
+            const onKeyDownBreak = lineBreak.createOnKeyDownBreak({
                 exitBreak: {
                     rules: [
                         {

package/heading/jsx-serializer/createJsxSerializeHeading.js

@@ -1,6 +1,6 @@
-import { defaultRenderHeadingElement } from '@quadrats/react/heading';
 import { HEADING_TYPE } from '@quadrats/common/heading';
 import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
+import { defaultRenderHeadingElement } from '@quadrats/react/heading';
 
 function createJsxSerializeHeading(options = {}) {
     const { type = HEADING_TYPE, render = defaultRenderHeadingElement } = options;

package/heading/toolbar/HeadingToolbarIcon.js

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

package/heading/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/highlight/createReactHighlight.d.ts

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

package/highlight/createReactHighlight.js

@@ -1,11 +1,11 @@
-import { HIGHLIGHT_HOTKEY } from './constants.js';
-import { defaultRenderHighlight } from './defaultRenderHighlight.js';
 import { createHighlight } from '@quadrats/common/highlight';
 import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderHighlight } from './defaultRenderHighlight.js';
+import { HIGHLIGHT_HOTKEY } from './constants.js';
 
-const createReactHighlight = createReactToggleMarkCreator(createHighlight, {
+const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight,
-});
+    render: defaultRenderHighlight(variant),
+})();
 
 export { createReactHighlight };

package/highlight/defaultRenderHighlight.d.ts

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

package/highlight/defaultRenderHighlight.js

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