ritext 1.0.14 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -28
- package/dist/chunk-CU67RXD7.mjs +53 -0
- package/dist/chunk-E4PPKAVK.mjs +37 -0
- package/dist/chunk-LO4RJXQF.mjs +37 -0
- package/dist/chunk-TQTCTY3E.mjs +52 -0
- package/dist/chunk-ZLCVIW2P.mjs +90 -0
- package/dist/extension/bold.d.mts +8 -0
- package/dist/extension/bold.d.ts +8 -0
- package/dist/extension/bold.js +260 -0
- package/dist/extension/bold.mjs +69 -0
- package/dist/extension/italic.d.mts +8 -0
- package/dist/extension/italic.d.ts +8 -0
- package/dist/extension/italic.js +264 -0
- package/dist/extension/italic.mjs +73 -0
- package/dist/extension/strike.d.mts +8 -0
- package/dist/extension/strike.d.ts +8 -0
- package/dist/extension/strike.js +264 -0
- package/dist/extension/strike.mjs +73 -0
- package/dist/extension/subandsuperscript.d.mts +21 -0
- package/dist/extension/subandsuperscript.d.ts +21 -0
- package/dist/extension/subandsuperscript.js +443 -0
- package/dist/extension/subandsuperscript.mjs +243 -0
- package/dist/extension/subscript.d.mts +8 -0
- package/dist/extension/subscript.d.ts +8 -0
- package/dist/extension/subscript.js +264 -0
- package/dist/extension/subscript.mjs +45 -0
- package/dist/extension/superscript.d.mts +8 -0
- package/dist/extension/superscript.d.ts +8 -0
- package/dist/extension/superscript.js +264 -0
- package/dist/extension/superscript.mjs +45 -0
- package/dist/extension/underline.d.mts +8 -0
- package/dist/extension/underline.d.ts +8 -0
- package/dist/extension/underline.js +263 -0
- package/dist/extension/underline.mjs +72 -0
- package/dist/index.css +101 -2
- package/dist/index.d.mts +6 -32
- package/dist/index.d.ts +6 -32
- package/dist/index.js +26 -537
- package/dist/index.mjs +30 -548
- package/dist/tiptap-ext.type-D61hoEX5.d.mts +32 -0
- package/dist/tiptap-ext.type-D61hoEX5.d.ts +32 -0
- package/package.json +29 -6
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ButtonComponent_default
|
|
3
|
+
} from "../chunk-CU67RXD7.mjs";
|
|
4
|
+
import "../chunk-ZLCVIW2P.mjs";
|
|
5
|
+
import {
|
|
6
|
+
__objRest,
|
|
7
|
+
__spreadProps,
|
|
8
|
+
__spreadValues
|
|
9
|
+
} from "../chunk-TQTCTY3E.mjs";
|
|
10
|
+
|
|
11
|
+
// src/extension/Strike.tsx
|
|
12
|
+
import TiptapStrike from "@tiptap/extension-strike";
|
|
13
|
+
|
|
14
|
+
// src/lib/icon/StrikeIcon.tsx
|
|
15
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
+
var StrikeIcon = (_a) => {
|
|
17
|
+
var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
|
|
18
|
+
return /* @__PURE__ */ jsxs(
|
|
19
|
+
"svg",
|
|
20
|
+
__spreadProps(__spreadValues({
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
22
|
+
viewBox: "0 0 24 24",
|
|
23
|
+
fill: "none",
|
|
24
|
+
stroke: "currentColor",
|
|
25
|
+
strokeWidth: 2,
|
|
26
|
+
strokeLinecap: "round",
|
|
27
|
+
strokeLinejoin: "round",
|
|
28
|
+
width: size,
|
|
29
|
+
height: size,
|
|
30
|
+
className
|
|
31
|
+
}, props), {
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
|
|
34
|
+
/* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
|
|
35
|
+
/* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
|
|
36
|
+
]
|
|
37
|
+
})
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
var StrikeIcon_default = StrikeIcon;
|
|
41
|
+
|
|
42
|
+
// src/extension/Strike.tsx
|
|
43
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
44
|
+
var Strike = TiptapStrike.extend({
|
|
45
|
+
addOptions() {
|
|
46
|
+
var _a;
|
|
47
|
+
return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
|
|
48
|
+
component: ({ options, editor, buttonClassName }) => {
|
|
49
|
+
return /* @__PURE__ */ jsx2(
|
|
50
|
+
ButtonComponent_default,
|
|
51
|
+
{
|
|
52
|
+
className: options.className,
|
|
53
|
+
icon: options.icon,
|
|
54
|
+
style: options.style,
|
|
55
|
+
activeClassName: options.activeClassName,
|
|
56
|
+
tooltip: options.tooltip,
|
|
57
|
+
tooltipClassName: options.tooltipClassName,
|
|
58
|
+
tooltipPlacement: options.tooltipPlacement,
|
|
59
|
+
_internalIcon: /* @__PURE__ */ jsx2(StrikeIcon_default, {}),
|
|
60
|
+
_extName: "strike",
|
|
61
|
+
_onToggle: () => editor.chain().focus().toggleStrike().run(),
|
|
62
|
+
_interShortcut: "\u2318 \u21E7 S",
|
|
63
|
+
_tooltipContent: "Strike",
|
|
64
|
+
_buttonClassName: buttonClassName
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
export {
|
|
72
|
+
Strike
|
|
73
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Extension, Editor } from '@tiptap/react';
|
|
3
|
+
import { a as ExtDropdownOptions } from '../tiptap-ext.type-D61hoEX5.mjs';
|
|
4
|
+
import '@floating-ui/react';
|
|
5
|
+
|
|
6
|
+
interface ExtSubAndSupOptions extends ExtDropdownOptions {
|
|
7
|
+
subscript?: string | boolean;
|
|
8
|
+
superscript?: string | boolean;
|
|
9
|
+
subscriptIcon?: ReactNode;
|
|
10
|
+
superscriptIcon?: ReactNode;
|
|
11
|
+
showCommandText?: boolean;
|
|
12
|
+
component: (args: {
|
|
13
|
+
options: ExtSubAndSupOptions;
|
|
14
|
+
editor: Editor;
|
|
15
|
+
dropdownContainerClassName: string;
|
|
16
|
+
dropdownItemClassName: string;
|
|
17
|
+
}) => ReactNode;
|
|
18
|
+
}
|
|
19
|
+
declare const SubAndSuperscript: Extension<ExtSubAndSupOptions, any>;
|
|
20
|
+
|
|
21
|
+
export { SubAndSuperscript };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Extension, Editor } from '@tiptap/react';
|
|
3
|
+
import { a as ExtDropdownOptions } from '../tiptap-ext.type-D61hoEX5.js';
|
|
4
|
+
import '@floating-ui/react';
|
|
5
|
+
|
|
6
|
+
interface ExtSubAndSupOptions extends ExtDropdownOptions {
|
|
7
|
+
subscript?: string | boolean;
|
|
8
|
+
superscript?: string | boolean;
|
|
9
|
+
subscriptIcon?: ReactNode;
|
|
10
|
+
superscriptIcon?: ReactNode;
|
|
11
|
+
showCommandText?: boolean;
|
|
12
|
+
component: (args: {
|
|
13
|
+
options: ExtSubAndSupOptions;
|
|
14
|
+
editor: Editor;
|
|
15
|
+
dropdownContainerClassName: string;
|
|
16
|
+
dropdownItemClassName: string;
|
|
17
|
+
}) => ReactNode;
|
|
18
|
+
}
|
|
19
|
+
declare const SubAndSuperscript: Extension<ExtSubAndSupOptions, any>;
|
|
20
|
+
|
|
21
|
+
export { SubAndSuperscript };
|
|
@@ -0,0 +1,443 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/extension/SubAndSuperscript.tsx
|
|
60
|
+
var SubAndSuperscript_exports = {};
|
|
61
|
+
__export(SubAndSuperscript_exports, {
|
|
62
|
+
SubAndSuperscript: () => SubAndSuperscript
|
|
63
|
+
});
|
|
64
|
+
module.exports = __toCommonJS(SubAndSuperscript_exports);
|
|
65
|
+
var import_react9 = require("@tiptap/react");
|
|
66
|
+
var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
|
|
67
|
+
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
68
|
+
|
|
69
|
+
// src/lib/icon/SubIcon.tsx
|
|
70
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
71
|
+
var SubIcon = (_a) => {
|
|
72
|
+
var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
|
|
73
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
|
+
"svg",
|
|
75
|
+
__spreadProps(__spreadValues({
|
|
76
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
77
|
+
viewBox: "0 0 24 24",
|
|
78
|
+
fill: "none",
|
|
79
|
+
stroke: "currentColor",
|
|
80
|
+
strokeWidth: 2,
|
|
81
|
+
strokeLinecap: "round",
|
|
82
|
+
strokeLinejoin: "round",
|
|
83
|
+
width: size,
|
|
84
|
+
height: size,
|
|
85
|
+
className
|
|
86
|
+
}, props), {
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 5 8 8" }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 5-8 8" }),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
|
|
91
|
+
]
|
|
92
|
+
})
|
|
93
|
+
);
|
|
94
|
+
};
|
|
95
|
+
var SubIcon_default = SubIcon;
|
|
96
|
+
|
|
97
|
+
// src/lib/icon/SupIcon.tsx
|
|
98
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
99
|
+
var SupIcon = (_a) => {
|
|
100
|
+
var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
102
|
+
"svg",
|
|
103
|
+
__spreadProps(__spreadValues({
|
|
104
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
105
|
+
viewBox: "0 0 24 24",
|
|
106
|
+
fill: "none",
|
|
107
|
+
stroke: "currentColor",
|
|
108
|
+
strokeWidth: 2,
|
|
109
|
+
strokeLinecap: "round",
|
|
110
|
+
strokeLinejoin: "round",
|
|
111
|
+
width: size,
|
|
112
|
+
height: size,
|
|
113
|
+
className
|
|
114
|
+
}, props), {
|
|
115
|
+
children: [
|
|
116
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m4 19 8-8" }),
|
|
117
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m12 19-8-8" }),
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" })
|
|
119
|
+
]
|
|
120
|
+
})
|
|
121
|
+
);
|
|
122
|
+
};
|
|
123
|
+
var SupIcon_default = SupIcon;
|
|
124
|
+
|
|
125
|
+
// src/lib/icon/SubAndSupIcon.tsx
|
|
126
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
127
|
+
var SubAndSupIcon = (_a) => {
|
|
128
|
+
var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
130
|
+
"svg",
|
|
131
|
+
__spreadProps(__spreadValues({
|
|
132
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
133
|
+
viewBox: "0 0 24 24",
|
|
134
|
+
fill: "none",
|
|
135
|
+
stroke: "currentColor",
|
|
136
|
+
strokeWidth: 2,
|
|
137
|
+
strokeLinecap: "round",
|
|
138
|
+
strokeLinejoin: "round",
|
|
139
|
+
width: size,
|
|
140
|
+
height: size,
|
|
141
|
+
className
|
|
142
|
+
}, props), {
|
|
143
|
+
children: [
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 4v16" }),
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 20h6" })
|
|
147
|
+
]
|
|
148
|
+
})
|
|
149
|
+
);
|
|
150
|
+
};
|
|
151
|
+
var SubAndSupIcon_default = SubAndSupIcon;
|
|
152
|
+
|
|
153
|
+
// src/lib/components/DropdownComponent.tsx
|
|
154
|
+
var import_react4 = require("react");
|
|
155
|
+
var import_tailwind_merge2 = require("tailwind-merge");
|
|
156
|
+
|
|
157
|
+
// src/lib/components/_com/Tooltip.tsx
|
|
158
|
+
var import_react = require("react");
|
|
159
|
+
var import_react2 = require("@floating-ui/react");
|
|
160
|
+
var import_react3 = require("motion/react");
|
|
161
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
162
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
163
|
+
var Tooltip = ({ placement = "top", children, content, className }) => {
|
|
164
|
+
const [open, setOpen] = (0, import_react.useState)(false);
|
|
165
|
+
const { x, y, refs, strategy, context, placement: resolvedPlacement } = (0, import_react2.useFloating)({
|
|
166
|
+
open,
|
|
167
|
+
onOpenChange: setOpen,
|
|
168
|
+
placement,
|
|
169
|
+
middleware: [(0, import_react2.offset)(8), (0, import_react2.flip)(), (0, import_react2.shift)({ padding: 8 })],
|
|
170
|
+
whileElementsMounted: import_react2.autoUpdate
|
|
171
|
+
});
|
|
172
|
+
const hover = (0, import_react2.useHover)(context);
|
|
173
|
+
const dismiss = (0, import_react2.useDismiss)(context);
|
|
174
|
+
const { getReferenceProps, getFloatingProps } = (0, import_react2.useInteractions)([hover, dismiss]);
|
|
175
|
+
const id = (0, import_react.useId)();
|
|
176
|
+
function mergeRefs(...refsToMerge) {
|
|
177
|
+
return (node) => {
|
|
178
|
+
for (const r of refsToMerge) {
|
|
179
|
+
if (!r) continue;
|
|
180
|
+
if (typeof r === "function") r(node);
|
|
181
|
+
else r.current = node;
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
const side = resolvedPlacement.split("-")[0];
|
|
186
|
+
const enterOffset = 6;
|
|
187
|
+
const getInitial = () => {
|
|
188
|
+
switch (side) {
|
|
189
|
+
case "top":
|
|
190
|
+
return { opacity: 0, y: enterOffset };
|
|
191
|
+
case "bottom":
|
|
192
|
+
return { opacity: 0, y: -enterOffset };
|
|
193
|
+
case "left":
|
|
194
|
+
return { opacity: 0, x: enterOffset };
|
|
195
|
+
case "right":
|
|
196
|
+
return { opacity: 0, x: -enterOffset };
|
|
197
|
+
default:
|
|
198
|
+
return { opacity: 0 };
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
const getExit = () => __spreadProps(__spreadValues({}, getInitial()), { opacity: 0 });
|
|
202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react.Fragment, { children: [
|
|
203
|
+
(0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, __spreadProps(__spreadValues({}, getReferenceProps({
|
|
204
|
+
onFocus: () => setOpen(true),
|
|
205
|
+
onBlur: () => setOpen(false),
|
|
206
|
+
"aria-describedby": open ? id : void 0
|
|
207
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
208
|
+
})), {
|
|
209
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
210
|
+
ref: mergeRefs(children.props.ref, refs.setReference)
|
|
211
|
+
})) : children,
|
|
212
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
213
|
+
import_react3.motion.div,
|
|
214
|
+
__spreadProps(__spreadValues({
|
|
215
|
+
ref: refs.setFloating
|
|
216
|
+
}, getFloatingProps({
|
|
217
|
+
role: "tooltip",
|
|
218
|
+
id,
|
|
219
|
+
style: {
|
|
220
|
+
position: strategy,
|
|
221
|
+
top: y != null ? y : 0,
|
|
222
|
+
left: x != null ? x : 0,
|
|
223
|
+
pointerEvents: "none"
|
|
224
|
+
}
|
|
225
|
+
})), {
|
|
226
|
+
initial: getInitial(),
|
|
227
|
+
animate: { opacity: 1, x: 0, y: 0, scale: 1 },
|
|
228
|
+
exit: getExit(),
|
|
229
|
+
transition: { type: "spring", stiffness: 420, damping: 30, mass: 0.6 },
|
|
230
|
+
className: (0, import_tailwind_merge.twMerge)("bg-white border border-solid border-gray-200/50 py-1 px-3 rounded-lg text-sm shadow-lg shadow-gray-50 text-center", className),
|
|
231
|
+
children: content
|
|
232
|
+
}),
|
|
233
|
+
"tooltip"
|
|
234
|
+
) }) })
|
|
235
|
+
] });
|
|
236
|
+
};
|
|
237
|
+
var Tooltip_default = Tooltip;
|
|
238
|
+
|
|
239
|
+
// src/lib/components/DropdownComponent.tsx
|
|
240
|
+
var import_react5 = require("@floating-ui/react");
|
|
241
|
+
|
|
242
|
+
// src/lib/icon/ArrowIcon.tsx
|
|
243
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
244
|
+
var ArrowIcon = (_a) => {
|
|
245
|
+
var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
|
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
247
|
+
"svg",
|
|
248
|
+
__spreadProps(__spreadValues({
|
|
249
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
250
|
+
viewBox: "0 0 48 48",
|
|
251
|
+
fill: "none",
|
|
252
|
+
stroke: "currentColor",
|
|
253
|
+
strokeWidth: 2,
|
|
254
|
+
strokeLinecap: "round",
|
|
255
|
+
strokeLinejoin: "round",
|
|
256
|
+
width: size,
|
|
257
|
+
height: size,
|
|
258
|
+
className
|
|
259
|
+
}, props), {
|
|
260
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
|
|
261
|
+
})
|
|
262
|
+
);
|
|
263
|
+
};
|
|
264
|
+
var ArrowIcon_default = ArrowIcon;
|
|
265
|
+
|
|
266
|
+
// src/lib/components/DropdownComponent.tsx
|
|
267
|
+
var import_react6 = require("motion/react");
|
|
268
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
269
|
+
var DropdownComponent = ({ children, className, showArrow = true, content, dropdownClassName, style, tooltip, tooltipClassName, tooltipPlacement, _tooltipContent, _internalContent, _dropdownClassName }) => {
|
|
270
|
+
const [open, setOpen] = (0, import_react4.useState)(false);
|
|
271
|
+
const { x, y, refs, strategy, context } = (0, import_react5.useFloating)({
|
|
272
|
+
open,
|
|
273
|
+
onOpenChange: setOpen,
|
|
274
|
+
placement: "bottom",
|
|
275
|
+
middleware: [(0, import_react5.offset)(4), (0, import_react5.flip)(), (0, import_react5.shift)({ padding: 8 })],
|
|
276
|
+
whileElementsMounted: import_react5.autoUpdate
|
|
277
|
+
});
|
|
278
|
+
const click = (0, import_react5.useClick)(context);
|
|
279
|
+
const dismiss = (0, import_react5.useDismiss)(context);
|
|
280
|
+
const { getReferenceProps, getFloatingProps } = (0, import_react5.useInteractions)([click, dismiss]);
|
|
281
|
+
const listId = (0, import_react4.useId)();
|
|
282
|
+
const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
|
|
283
|
+
const initialMotion = { opacity: 0, scale: 0.95 };
|
|
284
|
+
const animateMotion = { opacity: 1, scale: 1 };
|
|
285
|
+
const enhancedChildren = import_react4.Children.map(children, (child) => {
|
|
286
|
+
if (!(0, import_react4.isValidElement)(child)) return child;
|
|
287
|
+
if (!("onSelect" in child.props)) return child;
|
|
288
|
+
const prevOnSelect = child.props.onSelect;
|
|
289
|
+
const combinedOnSelect = () => {
|
|
290
|
+
prevOnSelect == null ? void 0 : prevOnSelect();
|
|
291
|
+
setOpen(false);
|
|
292
|
+
};
|
|
293
|
+
return (0, import_react4.cloneElement)(child, { onSelect: combinedOnSelect });
|
|
294
|
+
});
|
|
295
|
+
const btn = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
296
|
+
"button",
|
|
297
|
+
__spreadProps(__spreadValues({}, getReferenceProps({
|
|
298
|
+
ref: refs.setReference,
|
|
299
|
+
type: "button",
|
|
300
|
+
"aria-controls": open ? listId : void 0
|
|
301
|
+
})), {
|
|
302
|
+
className: (0, import_tailwind_merge2.twMerge)(
|
|
303
|
+
"p-1.5 rounded-md hover:bg-gray-100 flex gap-x-px",
|
|
304
|
+
className
|
|
305
|
+
),
|
|
306
|
+
style,
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: content != null ? content : _internalContent }),
|
|
309
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowIcon_default, { size: 14, className: "text-gray-500 block mt-0.5" })
|
|
310
|
+
]
|
|
311
|
+
})
|
|
312
|
+
);
|
|
313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react4.Fragment, { children: [
|
|
314
|
+
tooltip === false ? btn : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
315
|
+
Tooltip_default,
|
|
316
|
+
{
|
|
317
|
+
content: tooltipContent,
|
|
318
|
+
className: tooltipClassName,
|
|
319
|
+
placement: tooltipPlacement,
|
|
320
|
+
children: btn
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
324
|
+
import_react6.motion.div,
|
|
325
|
+
__spreadProps(__spreadValues({}, getFloatingProps({
|
|
326
|
+
ref: refs.setFloating,
|
|
327
|
+
style: {
|
|
328
|
+
position: strategy,
|
|
329
|
+
top: y != null ? y : 0,
|
|
330
|
+
left: x != null ? x : 0
|
|
331
|
+
},
|
|
332
|
+
role: "listbox",
|
|
333
|
+
id: listId
|
|
334
|
+
})), {
|
|
335
|
+
initial: initialMotion,
|
|
336
|
+
animate: animateMotion,
|
|
337
|
+
exit: initialMotion,
|
|
338
|
+
className: (0, import_tailwind_merge2.twMerge)("bg-white border border-solid border-gray-200 p-2 space-y-1 rounded-lg shadow-sm shadow-gray-200/40", _dropdownClassName, dropdownClassName),
|
|
339
|
+
children: enhancedChildren
|
|
340
|
+
})
|
|
341
|
+
) }) })
|
|
342
|
+
] });
|
|
343
|
+
};
|
|
344
|
+
var DropdownComponent_default = DropdownComponent;
|
|
345
|
+
|
|
346
|
+
// src/lib/components/DropdownItemComponent.tsx
|
|
347
|
+
var import_tailwind_merge3 = require("tailwind-merge");
|
|
348
|
+
|
|
349
|
+
// src/lib/context/editor.context.tsx
|
|
350
|
+
var import_react7 = require("react");
|
|
351
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
352
|
+
var EditorContext = (0, import_react7.createContext)({ editor: null });
|
|
353
|
+
var useEditor = () => {
|
|
354
|
+
const ctx = (0, import_react7.useContext)(EditorContext);
|
|
355
|
+
if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
|
|
356
|
+
return ctx;
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
// src/lib/components/DropdownItemComponent.tsx
|
|
360
|
+
var import_react8 = require("@tiptap/react");
|
|
361
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
362
|
+
var DropdownItemComponent = ({ item, onSelect, activeClassName, itemClassName, _itemClassName }) => {
|
|
363
|
+
const { editor } = useEditor();
|
|
364
|
+
const editorState = (0, import_react8.useEditorState)({
|
|
365
|
+
editor,
|
|
366
|
+
selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(item.id)) || false })
|
|
367
|
+
});
|
|
368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_tailwind_merge3.twMerge)(
|
|
369
|
+
"flex items-center gap-x-2.5 transition-all duration-100 cursor-pointer select-none px-2 py-1.5 rounded-md",
|
|
370
|
+
_itemClassName,
|
|
371
|
+
(editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
|
|
372
|
+
itemClassName,
|
|
373
|
+
(editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
|
|
374
|
+
), onClick: onSelect, children: [
|
|
375
|
+
item.icon,
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1", children: item.text }),
|
|
377
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-6 text-gray-400", children: item.keyBind })
|
|
378
|
+
] });
|
|
379
|
+
};
|
|
380
|
+
var DropdownItemComponent_default = DropdownItemComponent;
|
|
381
|
+
|
|
382
|
+
// src/extension/SubAndSuperscript.tsx
|
|
383
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
384
|
+
var SubAndSuperscript = import_react9.Extension.create({
|
|
385
|
+
name: "subAndSuperScript",
|
|
386
|
+
addOptions() {
|
|
387
|
+
var _a;
|
|
388
|
+
return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
|
|
389
|
+
component: ({ options, editor, dropdownContainerClassName, dropdownItemClassName }) => {
|
|
390
|
+
const list = [{
|
|
391
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubIcon_default, {}),
|
|
392
|
+
text: "Subscript",
|
|
393
|
+
onClick: () => editor.chain().focus().toggleSubscript().run(),
|
|
394
|
+
keyBind: "\u2318 .",
|
|
395
|
+
id: "subscript"
|
|
396
|
+
}, {
|
|
397
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SupIcon_default, {}),
|
|
398
|
+
text: "Superscript",
|
|
399
|
+
onClick: () => editor.chain().focus().toggleSuperscript().run(),
|
|
400
|
+
keyBind: "\u2318 ,",
|
|
401
|
+
id: "superscript"
|
|
402
|
+
}];
|
|
403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
404
|
+
DropdownComponent_default,
|
|
405
|
+
{
|
|
406
|
+
className: options.className,
|
|
407
|
+
showArrow: options.showArrow,
|
|
408
|
+
content: options.content,
|
|
409
|
+
dropdownClassName: options.dropdownClassName,
|
|
410
|
+
style: options.style,
|
|
411
|
+
tooltip: options.tooltip,
|
|
412
|
+
tooltipClassName: options.tooltipClassName,
|
|
413
|
+
tooltipPlacement: options.tooltipPlacement,
|
|
414
|
+
_tooltipContent: "More text styles",
|
|
415
|
+
_internalContent: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubAndSupIcon_default, {}),
|
|
416
|
+
_dropdownClassName: dropdownContainerClassName,
|
|
417
|
+
children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
418
|
+
DropdownItemComponent_default,
|
|
419
|
+
{
|
|
420
|
+
onSelect: item.onClick,
|
|
421
|
+
item,
|
|
422
|
+
activeClassName: options.activeClassName || "",
|
|
423
|
+
itemClassName: options.itemClassName || "",
|
|
424
|
+
_itemClassName: dropdownItemClassName
|
|
425
|
+
},
|
|
426
|
+
item.id
|
|
427
|
+
))
|
|
428
|
+
}
|
|
429
|
+
);
|
|
430
|
+
}
|
|
431
|
+
});
|
|
432
|
+
},
|
|
433
|
+
addExtensions() {
|
|
434
|
+
const extensions = [];
|
|
435
|
+
if (this.options.subscript !== false) extensions.push(import_extension_subscript.default);
|
|
436
|
+
if (this.options.superscript !== false) extensions.push(import_extension_superscript.default);
|
|
437
|
+
return extensions;
|
|
438
|
+
}
|
|
439
|
+
});
|
|
440
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
441
|
+
0 && (module.exports = {
|
|
442
|
+
SubAndSuperscript
|
|
443
|
+
});
|