@quadrats/react 0.4.4 → 0.4.5

package/bold/createReactBold.js

@@ -5,7 +5,7 @@ import { defaultRenderBold } from './defaultRenderBold.js';
 
 const createReactBold = (variant) => createReactToggleMarkCreator(createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold(variant),
+    render: defaultRenderBold,
 })();
 
 export { createReactBold };

package/bold/defaultRenderBold.d.ts

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

package/bold/defaultRenderBold.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { BOLD_TYPE } from '@quadrats/common/bold';
 
-const defaultRenderBold = (variant) => (({ children }) => (React.createElement("strong", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderBold = ({ children, leaf }) => (React.createElement("strong", { className: leaf.boldVariant
+        ? `${BOLD_TYPE}.${leaf.boldVariant}` : `${BOLD_TYPE}` }, children));
 
 export { defaultRenderBold };

package/bold/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const BOLD_HOTKEY = 'mod+b';
 
-const defaultRenderBold = (variant) => (({ children }) => (React__default.createElement("strong", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderBold = ({ children, leaf }) => (React__default.createElement("strong", { className: leaf.boldVariant
+        ? `${bold.BOLD_TYPE}.${leaf.boldVariant}` : `${bold.BOLD_TYPE}` }, children));
 
 const createReactBold = (variant) => toggleMark.createReactToggleMarkCreator(bold.createBold(variant), {
     hotkey: BOLD_HOTKEY,
-    render: defaultRenderBold(variant),
+    render: defaultRenderBold,
 })();
 
 exports.BOLD_HOTKEY = BOLD_HOTKEY;

package/bold/jsx-serializer/createJsxSerializeBold.js

@@ -4,7 +4,7 @@ import { defaultRenderBold } from '@quadrats/react/bold';
 
 const createJsxSerializeBold = createJsxSerializeToggleMarkCreator({
     type: BOLD_TYPE,
-    render: defaultRenderBold(),
+    render: defaultRenderBold,
 });
 
 export { createJsxSerializeBold };

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

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

package/bold/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface BoldLeaf extends Text {
+    bold: boolean;
+    boldVariant?: string;
+}

package/footnote/createReactFootnote.js

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

package/footnote/defaultRenderFootnoteElement.js

@@ -8,7 +8,7 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     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("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
         React.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 

package/footnote/index.cjs.js

@@ -6,6 +6,7 @@ var React = require('react');
 var components = require('@quadrats/react/components');
 var react = require('@quadrats/react');
 var footnote = require('@quadrats/common/footnote');
+var core = require('@quadrats/core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -18,7 +19,7 @@ const defaultRenderFootnoteElement = ({ attributes, children, element, placement
     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("span", Object.assign({ style: { textDecoration: 'underline' } }, attributes), children)),
         React__default.createElement("sup", Object.assign({}, attributes, { style: { color: 'var(--qdr-sup)', userSelect: 'none' }, contentEditable: false }), `[${index !== null && index !== void 0 ? index : 1}]`)));
 };
 
@@ -26,20 +27,50 @@ 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);
         } });
 }
 
+function useFootnotes(editor) {
+    const footnoteNodes = Array.from(core.getNodes(editor, {
+        at: [],
+        match: (node) => node.type === footnote.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;
+}
+
+function deepSearchFootnoteFromNodes(nodes) {
+    const result = nodes.flatMap((element) => {
+        var _a;
+        const curNode = core.Node.isNode(element)
+            && element.type === footnote.FOOTNOTE_TYPE ? element : null;
+        const child = core.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,
+        });
+    });
+}
+
 exports.createReactFootnote = createReactFootnote;
 exports.defaultRenderFootnoteElement = defaultRenderFootnoteElement;
+exports.useFootnotes = useFootnotes;
+exports.useFootnotesFromNodes = useFootnotesFromNodes;

package/footnote/index.d.ts

@@ -1,3 +1,5 @@
 export * from './typings';
 export { defaultRenderFootnoteElement } from './defaultRenderFootnoteElement';
 export { CreateReactFootnoteOptions, createReactFootnote } from './createReactFootnote';
+export { default as useFootnotes } from './useFootnotes';
+export { default as useFootnotesFromNodes } from './useFootnotesFromNodes';

package/footnote/index.js

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

package/footnote/jsx-serializer/defaultRenderFootnoteElement.js

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

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

@@ -13,7 +13,7 @@ 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("span", { style: { textDecoration: 'underline' } }, children),
         React__default.createElement("sup", { style: { color: 'var(--qdr-sup)' } }, `[${(_a = element.index) !== null && _a !== void 0 ? _a : 1}]`)));
 };
 

package/footnote/useFootnotes.d.ts

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

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/highlight/createReactHighlight.js

@@ -5,7 +5,7 @@ import { HIGHLIGHT_HOTKEY } from './constants.js';
 
 const createReactHighlight = (variant) => createReactToggleMarkCreator(createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight(variant),
+    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: (variant?: string | undefined) => ({ 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 = (variant) => (({ children }) => (React.createElement("mark", { className: variant !== null && variant !== void 0 ? variant : '' }, 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

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const HIGHLIGHT_HOTKEY = 'mod+h';
 
-const defaultRenderHighlight = (variant) => (({ children }) => (React__default.createElement("mark", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderHighlight = ({ children, leaf }) => (React__default.createElement("mark", { className: leaf.highlightVariant
+        ? `${highlight.HIGHLIGHT_TYPE}.${leaf.highlightVariant}` : `${highlight.HIGHLIGHT_TYPE}` }, children));
 
 const createReactHighlight = (variant) => toggleMark.createReactToggleMarkCreator(highlight.createHighlight(variant), {
     hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight(variant),
+    render: defaultRenderHighlight,
 })();
 
 exports.HIGHLIGHT_HOTKEY = HIGHLIGHT_HOTKEY;

package/highlight/jsx-serializer/createJsxSerializeHighlight.js

@@ -4,7 +4,7 @@ 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/highlight/typings.d.ts

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

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

@@ -11,10 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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.js

@@ -5,7 +5,7 @@ import { ITALIC_HOTKEY } from './constants.js';
 
 const createReactItalic = (variant) => createReactToggleMarkCreator(createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic(variant),
+    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: (variant?: string | undefined) => ({ 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 = (variant) => (({ children }) => (React.createElement("i", { className: variant !== null && variant !== void 0 ? variant : '' }, 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

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const ITALIC_HOTKEY = 'mod+i';
 
-const defaultRenderItalic = (variant) => (({ children }) => (React__default.createElement("i", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderItalic = ({ children, leaf }) => (React__default.createElement("i", { className: leaf.italicVariant
+        ? `${italic.ITALIC_TYPE}.${leaf.italicVariant}` : `${italic.ITALIC_TYPE}` }, children));
 
 const createReactItalic = (variant) => toggleMark.createReactToggleMarkCreator(italic.createItalic(variant), {
     hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic(variant),
+    render: defaultRenderItalic,
 })();
 
 exports.ITALIC_HOTKEY = ITALIC_HOTKEY;

package/italic/jsx-serializer/createJsxSerializeItalic.js

@@ -4,7 +4,7 @@ import { defaultRenderItalic } from '@quadrats/react/italic';
 
 const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
     type: ITALIC_TYPE,
-    render: defaultRenderItalic(),
+    render: defaultRenderItalic,
 });
 
 export { createJsxSerializeItalic };

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

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

package/italic/typings.d.ts

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

package/package.json

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

package/strikethrough/createReactStrikethrough.js

@@ -5,7 +5,7 @@ import { STRIKETHROUGH_HOTKEY } from './constants.js';
 
 const createReactStrikethrough = (variant) => createReactToggleMarkCreator(createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough(variant),
+    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: (variant?: string | undefined) => ({ 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 = (variant) => (({ children }) => (React.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, 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

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const STRIKETHROUGH_HOTKEY = 'mod+opt+s';
 
-const defaultRenderStrikethrough = (variant) => (({ children }) => (React__default.createElement("del", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderStrikethrough = ({ children, leaf }) => (React__default.createElement("del", { className: leaf.strikethroughVariant
+        ? `${strikethrough.STRIKETHROUGH_TYPE}.${leaf.strikethroughVariant}` : `${strikethrough.STRIKETHROUGH_TYPE}` }, children));
 
 const createReactStrikethrough = (variant) => toggleMark.createReactToggleMarkCreator(strikethrough.createStrikethrough(variant), {
     hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough(variant),
+    render: defaultRenderStrikethrough,
 })();
 
 exports.STRIKETHROUGH_HOTKEY = STRIKETHROUGH_HOTKEY;

package/strikethrough/jsx-serializer/createJsxSerializeStrikethrough.js

@@ -4,7 +4,7 @@ import { defaultRenderStrikethrough } from '@quadrats/react/strikethrough';
 
 const createJsxSerializeStrikethrough = createJsxSerializeToggleMarkCreator({
     type: STRIKETHROUGH_TYPE,
-    render: defaultRenderStrikethrough(),
+    render: defaultRenderStrikethrough,
 });
 
 export { createJsxSerializeStrikethrough };

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

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

package/strikethrough/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface StrikethroughLeaf extends Text {
+    strikethrough: boolean;
+    strikethroughVariant?: string;
+}

package/underline/createReactUnderline.js

@@ -5,7 +5,7 @@ import { UNDERLINE_HOTKEY } from './constants.js';
 
 const createReactUnderline = (variant) => createReactToggleMarkCreator(createUnderline(variant), {
     hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline(variant),
+    render: defaultRenderUnderline,
 })();
 
 export { createReactUnderline };

package/underline/defaultRenderUnderline.d.ts

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

package/underline/defaultRenderUnderline.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
 
-const defaultRenderUnderline = (variant) => (({ children }) => (React.createElement("u", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
+        ? `${UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${UNDERLINE_TYPE}` }, children));
 
 export { defaultRenderUnderline };

package/underline/index.cjs.js

@@ -17,11 +17,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 const UNDERLINE_HOTKEY = 'mod+u';
 
-const defaultRenderUnderline = (variant) => (({ children }) => (React__default.createElement("u", { className: variant !== null && variant !== void 0 ? variant : '' }, children)));
+const defaultRenderUnderline = ({ children, leaf }) => (React__default.createElement("u", { className: leaf.underlineVariant
+        ? `${underline.UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${underline.UNDERLINE_TYPE}` }, children));
 
 const createReactUnderline = (variant) => toggleMark.createReactToggleMarkCreator(underline.createUnderline(variant), {
     hotkey: UNDERLINE_HOTKEY,
-    render: defaultRenderUnderline(variant),
+    render: defaultRenderUnderline,
 })();
 
 exports.UNDERLINE_HOTKEY = UNDERLINE_HOTKEY;

package/underline/jsx-serializer/createJsxSerializeUnderline.js

@@ -4,7 +4,7 @@ import { defaultRenderUnderline } from '@quadrats/react/underline';
 
 const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
     type: UNDERLINE_TYPE,
-    render: defaultRenderUnderline(),
+    render: defaultRenderUnderline,
 });
 
 export { createJsxSerializeUnderline };

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

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

package/underline/typings.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'slate';
+export interface UnderlineLeaf extends Text {
+    underline: boolean;
+    underlineVariant?: string;
+}