@quadrats/react 0.1.0 → 0.4.0

package/embed/renderers/spotify/components/Spotify.js

@@ -0,0 +1,16 @@
+import React, { useRef, useMemo } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = useRef(null);
+    const composedRef = composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+export { Spotify as default };

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SpotifyProps } from './components/Spotify';
+export declare const defaultRenderSpotifyEmbedElement: (props: SpotifyProps) => JSX.Element;

package/embed/renderers/spotify/defaultRenderSpotifyEmbedElement.js

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

package/embed/renderers/spotify/index.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@quadrats/react/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Spotify({ attributes, children, data: src }) {
+    const containerRef = React.useRef(null);
+    const composedRef = utils.composeRefs([attributes === null || attributes === void 0 ? void 0 : attributes.ref, containerRef]);
+    const higher = React.useMemo(() => (!!src.match(/\/playlist/)), [src]);
+    return (React__default.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }),
+        React__default.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", allow: "autoplay", "clipboard-write": "true", "encrypted-media": "true", "picture-in-picture": "true", height: higher ? '400px' : '152px', style: {
+                maxHeight: '100%',
+                height: higher ? '400px' : '152px',
+            } }),
+        attributes ? children : undefined));
+}
+
+const defaultRenderSpotifyEmbedElement = (props) => React__default.createElement(Spotify, Object.assign({}, props));
+
+exports.Spotify = Spotify;
+exports.defaultRenderSpotifyEmbedElement = defaultRenderSpotifyEmbedElement;

package/embed/renderers/spotify/index.d.ts

@@ -0,0 +1,2 @@
+export { SpotifyProps, default as Spotify } from './components/Spotify';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement';

package/embed/renderers/spotify/index.js

@@ -0,0 +1,2 @@
+export { default as Spotify } from './components/Spotify.js';
+export { defaultRenderSpotifyEmbedElement } from './defaultRenderSpotifyEmbedElement.js';

package/{heading/jsx-serializer → embed/renderers/spotify}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@quadrats/react/heading/jsx-serializer",
+  "name": "@quadrats/react/embed/renderers/spotify",
   "sideEffects": false,
   "main": "./index.cjs.js",
   "module": "./index.js",

package/embed/renderers/twitter/components/Twitter.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
-import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
 import { composeRefs } from '@quadrats/react/utils';
+import { useLoadTwitterEmbedApi } from '../hooks/useLoadTwitterEmbedApi.js';
 
 function Twitter({ attributes, children, data: tweetId }) {
     const tweetContainerRef = useRef(null);
@@ -9,4 +9,4 @@ function Twitter({ attributes, children, data: tweetId }) {
     return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, contentEditable: false }), attributes ? children : undefined));
 }
 
-export default Twitter;
+export { Twitter as default };

package/embed/renderers/twitter/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utils = require('@quadrats/react/utils');
 
-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/embed/renderers/vimeo/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-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/embed/renderers/youtube/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var embed = require('@quadrats/react/embed');
 
-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/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.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Progress } from '@quadrats/react/components';
+import { useFileUploader } from '../hooks/useFileUploader.js';
 
 function FileUploader(props) {
     const { attributes, children, element } = props;
@@ -11,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/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);
 

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/{blockquote → footnote/jsx-serializer}/package.json

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

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/{heading → footnote}/package.json

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

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/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 };

package/highlight/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var highlight = require('@quadrats/common/highlight');
 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 HIGHLIGHT_HOTKEY = 'mod+h';
 
-const defaultRenderHighlight = ({ children }) => React__default.createElement("mark", null, children);
+const defaultRenderHighlight = (variant) => (({ children }) => (React__default.createElement("mark", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
 
-const createReactHighlight = toggleMark.createReactToggleMarkCreator(highlight.createHighlight, {
+const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight,
-});
+    render: defaultRenderHighlight(variant),
+})();
 
 exports.HIGHLIGHT_HOTKEY = HIGHLIGHT_HOTKEY;
 exports.createReactHighlight = createReactHighlight;

package/highlight/jsx-serializer/createJsxSerializeHighlight.d.ts

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

package/highlight/jsx-serializer/createJsxSerializeHighlight.js

@@ -1,10 +1,10 @@
-import { defaultRenderHighlight } from '@quadrats/react/highlight';
 import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderHighlight } from '@quadrats/react/highlight';
 
 const createJsxSerializeHighlight = createJsxSerializeToggleMarkCreator({
     type: HIGHLIGHT_TYPE,
-    render: defaultRenderHighlight,
+    render: defaultRenderHighlight(),
 });
 
 export { createJsxSerializeHighlight };

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

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

package/image/components/Image.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useEditor, ReactEditor } from '@quadrats/react';
 import { Transforms } from '@quadrats/core';
+import { useEditor, ReactEditor } from '@quadrats/react';
 import { useImageResizer } from '../hooks/useImageResizer.js';
 
 function Image(props) {
@@ -18,4 +18,4 @@ function Image(props) {
             React.createElement("img", { ref: imageRef, src: src, alt: src }))));
 }
 
-export default Image;
+export { Image as default };

package/image/components/ImageCaption.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import { useEditor, ReactEditor, useLocale } from '@quadrats/react';
 import { Editor } from '@quadrats/core';
+import { useEditor, ReactEditor, useLocale } from '@quadrats/react';
 
 function ImageCaption(props) {
     const { attributes, children, element } = props;
@@ -18,4 +18,4 @@ function ImageCaption(props) {
         children));
 }
 
-export default ImageCaption;
+export { ImageCaption as default };

package/image/components/ImageFigure.js

@@ -12,4 +12,4 @@ function ImageFigure(props) {
         }), style: style }), children));
 }
 
-export default ImageFigure;
+export { ImageFigure as default };

package/image/createReactImage.js

@@ -1,10 +1,10 @@
-import { createRenderElements } from '@quadrats/react';
-import { Transforms } from '@quadrats/core';
-import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 import { __awaiter } from 'tslib';
 import isHotkey from 'is-hotkey';
 import { readFileAsDataURL } from '@quadrats/utils';
+import { Transforms } from '@quadrats/core';
 import { createImage, getImageFigureElementCommonProps, getImageElementCommonProps } from '@quadrats/common/image';
+import { createRenderElements } from '@quadrats/react';
+import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 
 function createReactImage(options = {}) {
     const core = createImage(options);

package/image/index.cjs.js

@@ -11,7 +11,7 @@ var isHotkey = require('is-hotkey');
 var utils = require('@quadrats/utils');
 var image = require('@quadrats/common/image');
 
-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 clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

package/image/index.js

@@ -1,6 +1,6 @@
-export { default as ImageFigure } from './components/ImageFigure.js';
+export { defaultRenderImageElements } from './defaultRenderImageElements.js';
 export { useImageResizer } from './hooks/useImageResizer.js';
+export { default as ImageFigure } from './components/ImageFigure.js';
 export { default as Image } from './components/Image.js';
 export { default as ImageCaption } from './components/ImageCaption.js';
-export { defaultRenderImageElements } from './defaultRenderImageElements.js';
 export { createReactImage } from './createReactImage.js';

package/image/jsx-serializer/createJsxSerializeImage.js

@@ -1,7 +1,7 @@
-import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 import { getFirstAncestor, getMergedNodeTexts } from '@quadrats/core/serializers';
 import { IMAGE_TYPES, getImageFigureElementCommonProps, getImageElementCommonProps } from '@quadrats/common/image';
 import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderImageElements } from './defaultRenderImageElements.js';
 
 function createJsxSerializeImage(options = {}) {
     const { figure = {}, image = {}, caption = {}, hostingResolvers, } = options;

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

@@ -7,7 +7,7 @@ var serializers = require('@quadrats/core/serializers');
 var image = require('@quadrats/common/image');
 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);