@quadrats/react 0.1.0 → 0.4.5

package/footnote/useFootnotes.js

@@ -0,0 +1,21 @@
+import { getNodes } from '@quadrats/core';
+import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
+
+function useFootnotes(editor) {
+    const footnoteNodes = Array.from(getNodes(editor, {
+        at: [],
+        match: (node) => node.type === FOOTNOTE_TYPE,
+    }));
+    const footnotes = footnoteNodes.map((node) => {
+        var _a;
+        const nodeData = node === null || node === void 0 ? void 0 : node[0];
+        return {
+            wrapperText: (_a = (nodeData === null || nodeData === void 0 ? void 0 : nodeData.children)) === null || _a === void 0 ? void 0 : _a.map((childNode) => childNode.text).join(''),
+            footnote: nodeData === null || nodeData === void 0 ? void 0 : nodeData.footnote,
+            index: nodeData === null || nodeData === void 0 ? void 0 : nodeData.index,
+        };
+    });
+    return footnotes;
+}
+
+export { useFootnotes as default, useFootnotes };

package/footnote/useFootnotesFromNodes.d.ts

@@ -0,0 +1,4 @@
+import { Node } from '@quadrats/core';
+import { FootnoteData } from '@quadrats/common/footnote';
+export declare function useFootnotesFromNodes(nodes: Node[]): FootnoteData[];
+export default useFootnotesFromNodes;

package/footnote/useFootnotesFromNodes.js

@@ -0,0 +1,26 @@
+import { Node } from '@quadrats/core';
+import { FOOTNOTE_TYPE } from '@quadrats/common/footnote';
+
+function deepSearchFootnoteFromNodes(nodes) {
+    const result = nodes.flatMap((element) => {
+        var _a;
+        const curNode = Node.isNode(element)
+            && element.type === FOOTNOTE_TYPE ? element : null;
+        const child = Node.isNodeList(element === null || element === void 0 ? void 0 : element.children) ? deepSearchFootnoteFromNodes(element === null || element === void 0 ? void 0 : element.children) : null;
+        return (_a = curNode !== null && curNode !== void 0 ? curNode : child) !== null && _a !== void 0 ? _a : [];
+    });
+    return result;
+}
+function useFootnotesFromNodes(nodes) {
+    const filter = deepSearchFootnoteFromNodes(nodes);
+    return filter.map((element) => {
+        var _a;
+        return ({
+            wrapperText: (_a = (element === null || element === void 0 ? void 0 : element.children)) === null || _a === void 0 ? void 0 : _a.map((childNode) => childNode.text).join(''),
+            footnote: element.footnote,
+            index: element.index,
+        });
+    });
+}
+
+export { useFootnotesFromNodes as default, useFootnotesFromNodes };

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,
-});
+})();
 
 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: ({ children, leaf }: RenderMarkPropsBase<boolean>) => JSX.Element;

package/highlight/defaultRenderHighlight.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
 
-const defaultRenderHighlight = ({ children }) => React.createElement("mark", null, children);
+const defaultRenderHighlight = ({ children, leaf }) => (React.createElement("mark", { className: leaf.highlightVariant
+        ? `${HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${HIGHLIGHT_TYPE}` }, 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,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const HIGHLIGHT_HOTKEY = 'mod+h';
 
-const defaultRenderHighlight = ({ children }) => React__default.createElement("mark", null, children);
+const defaultRenderHighlight = ({ children, leaf }) => (React__default.createElement("mark", { className: leaf.highlightVariant
+        ? `${highlight.HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${highlight.HIGHLIGHT_TYPE}` }, children));
 
-const createReactHighlight = toggleMark.createReactToggleMarkCreator(highlight.createHighlight, {
+const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
     render: defaultRenderHighlight,
-});
+})();
 
 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,6 +1,6 @@
-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,

package/highlight/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface HighlightLeaf extends Text {
+    highlight: boolean;
+    highlightVariant?: string;
+}

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);
 

package/index.cjs.js

@@ -10,7 +10,7 @@ var clsx = require('clsx');
 var core = require('@quadrats/core');
 var _internal = require('@quadrats/react/_internal');
 
-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);
@@ -133,9 +133,6 @@ function createRenderMark(options) {
     return _internal.createRenderMarkBase(options);
 }
 
-Object.keys(configs).forEach(function (k) {
-  if (k !== 'default') exports[k] = configs[k];
-});
 exports.ReactEditor = slateReact.ReactEditor;
 exports.useEditor = slateReact.useEditor;
 exports.useFocused = slateReact.useFocused;
@@ -153,3 +150,6 @@ exports.createReactEditor = createReactEditor;
 exports.createRenderElement = createRenderElement;
 exports.createRenderElements = createRenderElements;
 exports.createRenderMark = createRenderMark;
+for (var k in configs) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = configs[k];
+}

package/index.js

@@ -1,8 +1,8 @@
 export * from '@quadrats/react/configs';
 export { ReactEditor, useEditor, useFocused, useSlate as useQuadrats, useReadOnly, useSelected } from 'slate-react';
-export { default as DefaultLeaf } from './core/components/DefaultLeaf.js';
 export { default as Editable } from './core/components/Editable.js';
 export { default as DefaultElement } from './core/components/DefaultElement.js';
+export { default as DefaultLeaf } from './core/components/DefaultLeaf.js';
 export { default as Quadrats } from './core/components/Quadrats.js';
 export { composeHandlers } from './core/composeHandlers.js';
 export { composeRenderElements } from './core/composeRenderElements.js';

package/input-block/components/InputBlock.js

@@ -22,4 +22,4 @@ function InputBlock(props) {
         children));
 }
 
-export default InputBlock;
+export { InputBlock as default };

package/input-block/createReactInputBlock.js

@@ -1,6 +1,6 @@
+import { createInputBlock } from '@quadrats/common/input-block';
 import { createRenderElement, ReactEditor } from '@quadrats/react';
 import { defaultRenderInputBlockElement } from './defaultRenderInputBlockElement.js';
-import { createInputBlock } from '@quadrats/common/input-block';
 
 function createReactInputBlock(options = {}) {
     const core = createInputBlock(options);

package/input-block/hooks/useInputBlock.js

@@ -2,10 +2,11 @@ import { useRef, useLayoutEffect } from 'react';
 import { useQuadrats, useLocale } from '@quadrats/react';
 
 function useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
     const inputRef = useRef(null);
     const editor = useQuadrats();
     const locale = useLocale();
-    const placeholder = element.getPlaceholder(locale);
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
     /**
      * Since keying `Enter` or `Escape` will also cause input blurred
      * Add a `removeable` flag to avoid.

package/input-block/index.cjs.js

@@ -6,15 +6,16 @@ var React = require('react');
 var react = require('@quadrats/react');
 var inputBlock = require('@quadrats/common/input-block');
 
-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 useInputBlock({ confirm, element, remove }) {
+    var _a, _b;
     const inputRef = React.useRef(null);
     const editor = react.useQuadrats();
     const locale = react.useLocale();
-    const placeholder = element.getPlaceholder(locale);
+    const placeholder = (_b = (_a = element.getPlaceholder) === null || _a === void 0 ? void 0 : _a.call(element, locale)) !== null && _b !== void 0 ? _b : '';
     /**
      * Since keying `Enter` or `Escape` will also cause input blurred
      * Add a `removeable` flag to avoid.

package/italic/createReactItalic.d.ts

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

package/italic/createReactItalic.js

@@ -1,11 +1,11 @@
-import { ITALIC_HOTKEY } from './constants.js';
-import { defaultRenderItalic } from './defaultRenderItalic.js';
 import { createItalic } from '@quadrats/common/italic';
 import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderItalic } from './defaultRenderItalic.js';
+import { ITALIC_HOTKEY } from './constants.js';
 
-const createReactItalic = createReactToggleMarkCreator(createItalic, {
+const createReactItalic = (variant) => createReactToggleMarkCreator(createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
     render: defaultRenderItalic,
-});
+})();
 
 export { createReactItalic };

package/italic/defaultRenderItalic.d.ts

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

package/italic/defaultRenderItalic.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { ITALIC_TYPE } from '@quadrats/common/italic';
 
-const defaultRenderItalic = ({ children }) => React.createElement("i", null, children);
+const defaultRenderItalic = ({ children, leaf }) => (React.createElement("i", { className: leaf.italicVariant
+        ? `${ITALIC_TYPE}.${leaf.italicVariant}` : `${ITALIC_TYPE}` }, children));
 
 export { defaultRenderItalic };

package/italic/index.cjs.js

@@ -6,7 +6,7 @@ var React = require('react');
 var italic = require('@quadrats/common/italic');
 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 ITALIC_HOTKEY = 'mod+i';
 
-const defaultRenderItalic = ({ children }) => React__default.createElement("i", null, children);
+const defaultRenderItalic = ({ children, leaf }) => (React__default.createElement("i", { className: leaf.italicVariant
+        ? `${italic.ITALIC_TYPE}.${leaf.italicVariant}` : `${italic.ITALIC_TYPE}` }, children));
 
-const createReactItalic = toggleMark.createReactToggleMarkCreator(italic.createItalic, {
+const createReactItalic = (variant) => toggleMark.createReactToggleMarkCreator(italic.createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
     render: defaultRenderItalic,
-});
+})();
 
 exports.ITALIC_HOTKEY = ITALIC_HOTKEY;
 exports.createReactItalic = createReactItalic;

package/italic/jsx-serializer/createJsxSerializeItalic.d.ts

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

package/italic/jsx-serializer/createJsxSerializeItalic.js

@@ -1,6 +1,6 @@
-import { defaultRenderItalic } from '@quadrats/react/italic';
 import { ITALIC_TYPE } from '@quadrats/common/italic';
 import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderItalic } from '@quadrats/react/italic';
 
 const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
     type: ITALIC_TYPE,

package/italic/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface ItalicLeaf extends Text {
+    italic: boolean;
+    italicVariant?: string;
+}

package/jsx-serializer/createJsxSerializeMark.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CreateJsxSerializeMarkOptions } from './typings';
-export declare function createJsxSerializeMark<M>(options: CreateJsxSerializeMarkOptions<M>): (props: Pick<import("./typings").JsxSerializeMarkProps<M>, "children" | "leaf">) => JSX.Element;
+export declare function createJsxSerializeMark<M>(options: CreateJsxSerializeMarkOptions<M>): (props: Omit<import("./typings").JsxSerializeMarkProps<M>, "mark">) => JSX.Element;

package/jsx-serializer/createJsxSerializer.js

@@ -1,6 +1,6 @@
-import { composeRenderElementsBase, composeRenderLeafsBase } from '@quadrats/react/_internal';
 import React, { cloneElement } from 'react';
 import { isText } from '@quadrats/core/serializers';
+import { composeRenderElementsBase, composeRenderLeafsBase } from '@quadrats/react/_internal';
 
 let key = 0;
 function addKey(element) {

package/jsx-serializer/index.cjs.js

@@ -6,7 +6,7 @@ var _internal = require('@quadrats/react/_internal');
 var React = require('react');
 var serializers = require('@quadrats/core/serializers');
 
-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/line-break/createReactLineBreak.d.ts

@@ -0,0 +1,4 @@
+import { CreateLineBreakOptions } from '@quadrats/core';
+import { ReactBreak } from './typings';
+export declare type CreateReactLineBreakOptions = CreateLineBreakOptions;
+export declare function createReactLineBreak(options?: CreateReactLineBreakOptions): ReactBreak;

package/line-break/createReactLineBreak.js

@@ -0,0 +1,14 @@
+import { createLineBreak } from '@quadrats/core';
+import { createRenderElement } from '@quadrats/react';
+import { COMMON_ON_KEY_DOWN_BREAK } from './commonBreak.js';
+import { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement.js';
+
+function createReactLineBreak(options = {}) {
+    const core = createLineBreak(options);
+    const { type } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
+            onKeyDown: COMMON_ON_KEY_DOWN_BREAK,
+        }), createRenderElement: ({ render = defaultRenderLineBreakElement } = {}) => createRenderElement({ type, render }) });
+}
+
+export { createReactLineBreak };

package/line-break/defaultRenderLineBreakElement.d.ts

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

package/line-break/defaultRenderLineBreakElement.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const defaultRenderLineBreakElement = ({ attributes }) => (React.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
+    React.createElement("br", null)));
+
+export { defaultRenderLineBreakElement };

package/{break → line-break}/index.cjs.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var isHotkey = require('is-hotkey');
 var core = require('@quadrats/core');
+var react = require('@quadrats/react');
+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 isHotkey__default = /*#__PURE__*/_interopDefaultLegacy(isHotkey);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function createOnKeyDownBreak({ exitBreak, softBreak }) {
     return (event, editor, next) => {
@@ -81,6 +84,20 @@ const COMMON_ON_KEY_DOWN_BREAK = createOnKeyDownBreak({
     },
 });
 
+const defaultRenderLineBreakElement = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, contentEditable: false }),
+    React__default.createElement("br", null)));
+
+function createReactLineBreak(options = {}) {
+    const core$1 = core.createLineBreak(options);
+    const { type } = core$1;
+    return Object.assign(Object.assign({}, core$1), { createHandlers: () => ({
+            onKeyDown: COMMON_ON_KEY_DOWN_BREAK,
+        }), createRenderElement: ({ render = defaultRenderLineBreakElement } = {}) => react.createRenderElement({ type, render }) });
+}
+
+const renderLineBreakElementWithSymbol = ({ attributes }) => (React__default.createElement("span", Object.assign({}, attributes, { style: { userSelect: 'none' }, className: "qdr-line-break__with-symbol", contentEditable: false }),
+    React__default.createElement("br", null)));
+
 exports.COMMON_EXIT_BREAK_ON_AFTER_HOTKEY = COMMON_EXIT_BREAK_ON_AFTER_HOTKEY;
 exports.COMMON_EXIT_BREAK_ON_AFTER_RULE = COMMON_EXIT_BREAK_ON_AFTER_RULE;
 exports.COMMON_EXIT_BREAK_ON_BEFORE_HOTKEY = COMMON_EXIT_BREAK_ON_BEFORE_HOTKEY;
@@ -90,3 +107,5 @@ exports.COMMON_ON_KEY_DOWN_BREAK = COMMON_ON_KEY_DOWN_BREAK;
 exports.COMMON_SOFT_BREAK_HOTKEY = COMMON_SOFT_BREAK_HOTKEY;
 exports.COMMON_SOFT_BREAK_RULE = COMMON_SOFT_BREAK_RULE;
 exports.createOnKeyDownBreak = createOnKeyDownBreak;
+exports.createReactLineBreak = createReactLineBreak;
+exports.renderLineBreakElementWithSymbol = renderLineBreakElementWithSymbol;

package/line-break/index.d.ts

@@ -0,0 +1,5 @@
+export * from './typings';
+export { CreateOnKeyDownBreakOptions, createOnKeyDownBreak } from './createOnKeyDownBreak';
+export * from './commonBreak';
+export { CreateReactLineBreakOptions, createReactLineBreak } from './createReactLineBreak';
+export { renderLineBreakElementWithSymbol } from './renderLineBreakElementWithSymbol';

package/{break → line-break}/index.js

@@ -1,2 +1,4 @@
 export { createOnKeyDownBreak } from './createOnKeyDownBreak.js';
 export { COMMON_EXIT_BREAK_ON_AFTER_HOTKEY, COMMON_EXIT_BREAK_ON_AFTER_RULE, COMMON_EXIT_BREAK_ON_BEFORE_HOTKEY, COMMON_EXIT_BREAK_ON_BEFORE_RULE, COMMON_EXIT_BREAK_RULES, COMMON_ON_KEY_DOWN_BREAK, COMMON_SOFT_BREAK_HOTKEY, COMMON_SOFT_BREAK_RULE } from './commonBreak.js';
+export { createReactLineBreak } from './createReactLineBreak.js';
+export { renderLineBreakElementWithSymbol } from './renderLineBreakElementWithSymbol.js';

package/line-break/line-break.css

@@ -0,0 +1 @@
+.qdr-line-break__with-symbol{position:relative}.qdr-line-break__with-symbol::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:.5}