@react-email/editor 0.0.0-experimental.12 → 0.0.0-experimental.14
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/dist/{index.js → index.cjs} +156 -110
- package/dist/{index.d.ts → index.d.cts} +102 -42
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +101 -41
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +61 -13
- package/dist/index.mjs.map +1 -1
- package/dist/ui/themes/default.css +540 -0
- package/package.json +10 -4
- package/dist/index.d.ts.map +0 -1
|
@@ -6,12 +6,16 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
8
|
var __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) {
|
|
13
|
+
__defProp(to, key, {
|
|
14
|
+
get: ((k) => from[k]).bind(null, key),
|
|
15
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
return to;
|
|
17
21
|
};
|
|
@@ -21,39 +25,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
21
25
|
}) : target, mod));
|
|
22
26
|
|
|
23
27
|
//#endregion
|
|
24
|
-
let
|
|
25
|
-
|
|
26
|
-
let __tiptap_starter_kit = require("@tiptap/starter-kit");
|
|
27
|
-
__tiptap_starter_kit = __toESM(__tiptap_starter_kit);
|
|
28
|
+
let _tiptap_core = require("@tiptap/core");
|
|
29
|
+
let _tiptap_starter_kit = require("@tiptap/starter-kit");
|
|
28
30
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
let
|
|
35
|
-
__tiptap_pm_state = __toESM(__tiptap_pm_state);
|
|
36
|
-
let __tiptap_pm_view = require("@tiptap/pm/view");
|
|
37
|
-
__tiptap_pm_view = __toESM(__tiptap_pm_view);
|
|
31
|
+
let _react_email_components = require("@react-email/components");
|
|
32
|
+
_react_email_components = __toESM(_react_email_components);
|
|
33
|
+
let _tiptap_extension_code_block = require("@tiptap/extension-code-block");
|
|
34
|
+
_tiptap_extension_code_block = __toESM(_tiptap_extension_code_block);
|
|
35
|
+
let _tiptap_pm_state = require("@tiptap/pm/state");
|
|
36
|
+
let _tiptap_pm_view = require("@tiptap/pm/view");
|
|
38
37
|
let hast_util_from_html = require("hast-util-from-html");
|
|
39
|
-
hast_util_from_html = __toESM(hast_util_from_html);
|
|
40
38
|
let prismjs = require("prismjs");
|
|
41
39
|
prismjs = __toESM(prismjs);
|
|
42
|
-
let
|
|
43
|
-
|
|
44
|
-
let
|
|
45
|
-
__tiptap_react = __toESM(__tiptap_react);
|
|
40
|
+
let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
|
|
41
|
+
_tiptap_extension_placeholder = __toESM(_tiptap_extension_placeholder);
|
|
42
|
+
let _tiptap_react = require("@tiptap/react");
|
|
46
43
|
let lucide_react = require("lucide-react");
|
|
47
|
-
lucide_react = __toESM(lucide_react);
|
|
48
44
|
let react = require("react");
|
|
49
45
|
react = __toESM(react);
|
|
50
|
-
let
|
|
51
|
-
|
|
52
|
-
let
|
|
53
|
-
__tiptap_react_menus = __toESM(__tiptap_react_menus);
|
|
46
|
+
let _radix_ui_react_popover = require("@radix-ui/react-popover");
|
|
47
|
+
_radix_ui_react_popover = __toESM(_radix_ui_react_popover);
|
|
48
|
+
let _tiptap_react_menus = require("@tiptap/react/menus");
|
|
54
49
|
|
|
55
50
|
//#region src/core/email-node.ts
|
|
56
|
-
var EmailNode = class EmailNode extends
|
|
51
|
+
var EmailNode = class EmailNode extends _tiptap_core.Node {
|
|
57
52
|
constructor(config) {
|
|
58
53
|
super(config);
|
|
59
54
|
}
|
|
@@ -126,7 +121,7 @@ const editorEventBus = new EditorEventBus();
|
|
|
126
121
|
|
|
127
122
|
//#endregion
|
|
128
123
|
//#region src/extensions/alignment-attribute.tsx
|
|
129
|
-
const AlignmentAttribute =
|
|
124
|
+
const AlignmentAttribute = _tiptap_core.Extension.create({
|
|
130
125
|
name: "alignmentAttribute",
|
|
131
126
|
addOptions() {
|
|
132
127
|
return {
|
|
@@ -454,7 +449,7 @@ const Body = EmailNode.create({
|
|
|
454
449
|
renderHTML({ HTMLAttributes }) {
|
|
455
450
|
return [
|
|
456
451
|
"div",
|
|
457
|
-
(0,
|
|
452
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
|
|
458
453
|
0
|
|
459
454
|
];
|
|
460
455
|
},
|
|
@@ -493,7 +488,7 @@ const underscorePasteRegex = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
|
|
|
493
488
|
* This extension allows you to mark text as bold.
|
|
494
489
|
* @see https://tiptap.dev/api/marks/bold
|
|
495
490
|
*/
|
|
496
|
-
const Bold =
|
|
491
|
+
const Bold = _tiptap_core.Mark.create({
|
|
497
492
|
name: "bold",
|
|
498
493
|
addOptions() {
|
|
499
494
|
return { HTMLAttributes: {} };
|
|
@@ -514,7 +509,7 @@ const Bold = __tiptap_core.Mark.create({
|
|
|
514
509
|
renderHTML({ HTMLAttributes }) {
|
|
515
510
|
return [
|
|
516
511
|
"strong",
|
|
517
|
-
(0,
|
|
512
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
|
|
518
513
|
0
|
|
519
514
|
];
|
|
520
515
|
},
|
|
@@ -538,19 +533,19 @@ const Bold = __tiptap_core.Mark.create({
|
|
|
538
533
|
};
|
|
539
534
|
},
|
|
540
535
|
addInputRules() {
|
|
541
|
-
return [(0,
|
|
536
|
+
return [(0, _tiptap_core.markInputRule)({
|
|
542
537
|
find: starInputRegex,
|
|
543
538
|
type: this.type
|
|
544
|
-
}), (0,
|
|
539
|
+
}), (0, _tiptap_core.markInputRule)({
|
|
545
540
|
find: underscoreInputRegex,
|
|
546
541
|
type: this.type
|
|
547
542
|
})];
|
|
548
543
|
},
|
|
549
544
|
addPasteRules() {
|
|
550
|
-
return [(0,
|
|
545
|
+
return [(0, _tiptap_core.markPasteRule)({
|
|
551
546
|
find: starPasteRegex,
|
|
552
547
|
type: this.type
|
|
553
|
-
}), (0,
|
|
548
|
+
}), (0, _tiptap_core.markPasteRule)({
|
|
554
549
|
find: underscorePasteRegex,
|
|
555
550
|
type: this.type
|
|
556
551
|
})];
|
|
@@ -590,10 +585,10 @@ const Button = EmailNode.create({
|
|
|
590
585
|
renderHTML({ HTMLAttributes }) {
|
|
591
586
|
return [
|
|
592
587
|
"div",
|
|
593
|
-
(0,
|
|
588
|
+
(0, _tiptap_core.mergeAttributes)({ class: `align-${HTMLAttributes?.alignment}` }),
|
|
594
589
|
[
|
|
595
590
|
"a",
|
|
596
|
-
(0,
|
|
591
|
+
(0, _tiptap_core.mergeAttributes)({
|
|
597
592
|
class: `node-button ${HTMLAttributes?.class}`,
|
|
598
593
|
style: HTMLAttributes?.style,
|
|
599
594
|
"data-id": "react-email-button",
|
|
@@ -621,9 +616,9 @@ const Button = EmailNode.create({
|
|
|
621
616
|
},
|
|
622
617
|
renderToReactEmail({ children, node, style }) {
|
|
623
618
|
const inlineStyles = inlineCssToJs(node.attrs?.style);
|
|
624
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
619
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Row, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
|
|
625
620
|
align: node.attrs?.align || node.attrs?.alignment,
|
|
626
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
621
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Button, {
|
|
627
622
|
className: node.attrs?.class || void 0,
|
|
628
623
|
href: node.attrs?.href,
|
|
629
624
|
style: {
|
|
@@ -638,7 +633,7 @@ const Button = EmailNode.create({
|
|
|
638
633
|
|
|
639
634
|
//#endregion
|
|
640
635
|
//#region src/extensions/class-attribute.tsx
|
|
641
|
-
const ClassAttribute =
|
|
636
|
+
const ClassAttribute = _tiptap_core.Extension.create({
|
|
642
637
|
name: "classAttribute",
|
|
643
638
|
addOptions() {
|
|
644
639
|
return {
|
|
@@ -720,7 +715,7 @@ function registeredLang(aliasOrLanguage) {
|
|
|
720
715
|
}
|
|
721
716
|
function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLanguages, onLanguageLoaded }) {
|
|
722
717
|
const decorations = [];
|
|
723
|
-
(0,
|
|
718
|
+
(0, _tiptap_core.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
|
|
724
719
|
let from = block.pos + 1;
|
|
725
720
|
const language = block.node.attrs.language || defaultLanguage;
|
|
726
721
|
const theme = block.node.attrs.theme || defaultTheme;
|
|
@@ -743,13 +738,13 @@ function getDecorations({ doc, name, defaultLanguage, defaultTheme, loadingLangu
|
|
|
743
738
|
parseNodes(getHighlightNodes(html)).forEach((node) => {
|
|
744
739
|
const to = from + node.text.length;
|
|
745
740
|
if (node.classes.length) {
|
|
746
|
-
const decoration =
|
|
741
|
+
const decoration = _tiptap_pm_view.Decoration.inline(from, to, { class: node.classes.join(" ") });
|
|
747
742
|
decorations.push(decoration);
|
|
748
743
|
}
|
|
749
744
|
from = to;
|
|
750
745
|
});
|
|
751
746
|
});
|
|
752
|
-
return
|
|
747
|
+
return _tiptap_pm_view.DecorationSet.create(doc, decorations);
|
|
753
748
|
}
|
|
754
749
|
function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
|
|
755
750
|
if (!defaultLanguage) throw Error("You must specify the defaultLanguage parameter");
|
|
@@ -758,8 +753,8 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
|
|
|
758
753
|
const onLanguageLoaded = (language) => {
|
|
759
754
|
if (pluginView) pluginView.dispatch(pluginView.state.tr.setMeta(PRISM_LANGUAGE_LOADED_META, language));
|
|
760
755
|
};
|
|
761
|
-
const prismjsPlugin = new
|
|
762
|
-
key: new
|
|
756
|
+
const prismjsPlugin = new _tiptap_pm_state.Plugin({
|
|
757
|
+
key: new _tiptap_pm_state.PluginKey("prism"),
|
|
763
758
|
view(view) {
|
|
764
759
|
pluginView = view;
|
|
765
760
|
return { destroy() {
|
|
@@ -780,8 +775,8 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
|
|
|
780
775
|
apply: (transaction, decorationSet, oldState, newState) => {
|
|
781
776
|
const oldNodeName = oldState.selection.$head.parent.type.name;
|
|
782
777
|
const newNodeName = newState.selection.$head.parent.type.name;
|
|
783
|
-
const oldNodes = (0,
|
|
784
|
-
const newNodes = (0,
|
|
778
|
+
const oldNodes = (0, _tiptap_core.findChildren)(oldState.doc, (node) => node.type.name === name);
|
|
779
|
+
const newNodes = (0, _tiptap_core.findChildren)(newState.doc, (node) => node.type.name === name);
|
|
785
780
|
if (transaction.getMeta(PRISM_LANGUAGE_LOADED_META) || transaction.docChanged && ([oldNodeName, newNodeName].includes(name) || newNodes.length !== oldNodes.length || transaction.steps.some((step) => {
|
|
786
781
|
const rangeStep = step;
|
|
787
782
|
return rangeStep.from !== void 0 && rangeStep.to !== void 0 && oldNodes.some((node) => {
|
|
@@ -811,7 +806,7 @@ function PrismPlugin({ name, defaultLanguage, defaultTheme }) {
|
|
|
811
806
|
|
|
812
807
|
//#endregion
|
|
813
808
|
//#region src/extensions/code-block.tsx
|
|
814
|
-
const CodeBlockPrism = EmailNode.from(
|
|
809
|
+
const CodeBlockPrism = EmailNode.from(_tiptap_extension_code_block.default.extend({
|
|
815
810
|
addOptions() {
|
|
816
811
|
return {
|
|
817
812
|
languageClassPrefix: "language-",
|
|
@@ -848,7 +843,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
|
|
|
848
843
|
renderHTML({ node, HTMLAttributes }) {
|
|
849
844
|
return [
|
|
850
845
|
"pre",
|
|
851
|
-
(0,
|
|
846
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null }, { "data-theme": node.attrs.theme }),
|
|
852
847
|
[
|
|
853
848
|
"code",
|
|
854
849
|
{ class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language} node-codeTag` : "node-codeTag" },
|
|
@@ -867,7 +862,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
|
|
|
867
862
|
const blockStart = $from.start(depth);
|
|
868
863
|
const blockEnd = $from.end(depth);
|
|
869
864
|
if (selection.from === blockStart && selection.to === blockEnd) return false;
|
|
870
|
-
const tr = state.tr.setSelection(
|
|
865
|
+
const tr = state.tr.setSelection(_tiptap_pm_state.TextSelection.create(state.doc, blockStart, blockEnd));
|
|
871
866
|
editor.view.dispatch(tr);
|
|
872
867
|
return true;
|
|
873
868
|
}
|
|
@@ -884,7 +879,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
|
|
|
884
879
|
}
|
|
885
880
|
}), ({ node, style }) => {
|
|
886
881
|
const language = node.attrs?.language ? `${node.attrs.language}` : "javascript";
|
|
887
|
-
const userTheme =
|
|
882
|
+
const userTheme = _react_email_components[node.attrs?.theme];
|
|
888
883
|
const theme = userTheme ? {
|
|
889
884
|
...userTheme,
|
|
890
885
|
base: {
|
|
@@ -900,7 +895,7 @@ const CodeBlockPrism = EmailNode.from(__tiptap_extension_code_block.default.exte
|
|
|
900
895
|
padding: "0.75rem 1rem",
|
|
901
896
|
borderRadius: "0.125rem"
|
|
902
897
|
} };
|
|
903
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
898
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.CodeBlock, {
|
|
904
899
|
code: node.content?.[0]?.text ?? "",
|
|
905
900
|
language,
|
|
906
901
|
theme,
|
|
@@ -936,7 +931,7 @@ const Div = EmailNode.create({
|
|
|
936
931
|
renderHTML({ HTMLAttributes }) {
|
|
937
932
|
return [
|
|
938
933
|
"div",
|
|
939
|
-
(0,
|
|
934
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
|
|
940
935
|
0
|
|
941
936
|
];
|
|
942
937
|
},
|
|
@@ -958,7 +953,7 @@ const Div = EmailNode.create({
|
|
|
958
953
|
|
|
959
954
|
//#endregion
|
|
960
955
|
//#region src/extensions/max-nesting.ts
|
|
961
|
-
const MaxNesting =
|
|
956
|
+
const MaxNesting = _tiptap_core.Extension.create({
|
|
962
957
|
name: "maxNesting",
|
|
963
958
|
addOptions() {
|
|
964
959
|
return {
|
|
@@ -969,8 +964,8 @@ const MaxNesting = __tiptap_core.Extension.create({
|
|
|
969
964
|
addProseMirrorPlugins() {
|
|
970
965
|
const { maxDepth, nodeTypes } = this.options;
|
|
971
966
|
if (typeof maxDepth !== "number" || maxDepth < 1) throw new Error("maxDepth must be a positive number");
|
|
972
|
-
return [new
|
|
973
|
-
key: new
|
|
967
|
+
return [new _tiptap_pm_state.Plugin({
|
|
968
|
+
key: new _tiptap_pm_state.PluginKey("maxNesting"),
|
|
974
969
|
appendTransaction(transactions, _oldState, newState) {
|
|
975
970
|
if (!transactions.some((tr$1) => tr$1.docChanged)) return null;
|
|
976
971
|
const rangesToLift = [];
|
|
@@ -1033,7 +1028,7 @@ const MaxNesting = __tiptap_core.Extension.create({
|
|
|
1033
1028
|
|
|
1034
1029
|
//#endregion
|
|
1035
1030
|
//#region src/extensions/placeholder.ts
|
|
1036
|
-
const Placeholder =
|
|
1031
|
+
const Placeholder = _tiptap_extension_placeholder.default.configure({
|
|
1037
1032
|
placeholder: ({ node }) => {
|
|
1038
1033
|
if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
|
|
1039
1034
|
return "Press '/' for commands";
|
|
@@ -1043,7 +1038,7 @@ const Placeholder = __tiptap_extension_placeholder.default.configure({
|
|
|
1043
1038
|
|
|
1044
1039
|
//#endregion
|
|
1045
1040
|
//#region src/extensions/preserved-style.ts
|
|
1046
|
-
const PreservedStyle =
|
|
1041
|
+
const PreservedStyle = _tiptap_core.Mark.create({
|
|
1047
1042
|
name: "preservedStyle",
|
|
1048
1043
|
addAttributes() {
|
|
1049
1044
|
return { style: {
|
|
@@ -1069,7 +1064,7 @@ const PreservedStyle = __tiptap_core.Mark.create({
|
|
|
1069
1064
|
renderHTML({ HTMLAttributes }) {
|
|
1070
1065
|
return [
|
|
1071
1066
|
"span",
|
|
1072
|
-
(0,
|
|
1067
|
+
(0, _tiptap_core.mergeAttributes)(HTMLAttributes),
|
|
1073
1068
|
0
|
|
1074
1069
|
];
|
|
1075
1070
|
}
|
|
@@ -1117,7 +1112,7 @@ function processStylesForUnlink(styleString) {
|
|
|
1117
1112
|
|
|
1118
1113
|
//#endregion
|
|
1119
1114
|
//#region src/extensions/preview-text.ts
|
|
1120
|
-
const PreviewText =
|
|
1115
|
+
const PreviewText = _tiptap_core.Node.create({
|
|
1121
1116
|
name: "previewText",
|
|
1122
1117
|
group: "block",
|
|
1123
1118
|
selectable: false,
|
|
@@ -1181,7 +1176,7 @@ const Section = EmailNode.create({
|
|
|
1181
1176
|
renderHTML({ HTMLAttributes }) {
|
|
1182
1177
|
return [
|
|
1183
1178
|
"section",
|
|
1184
|
-
(0,
|
|
1179
|
+
(0, _tiptap_core.mergeAttributes)({
|
|
1185
1180
|
"data-type": "section",
|
|
1186
1181
|
class: "node-section"
|
|
1187
1182
|
}, HTMLAttributes),
|
|
@@ -1202,7 +1197,7 @@ const Section = EmailNode.create({
|
|
|
1202
1197
|
renderToReactEmail({ children, node, style }) {
|
|
1203
1198
|
const inlineStyles = inlineCssToJs(node.attrs?.style);
|
|
1204
1199
|
const textAlign = node.attrs?.align || node.attrs?.alignment;
|
|
1205
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
1200
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
|
|
1206
1201
|
className: node.attrs?.class || void 0,
|
|
1207
1202
|
align: textAlign,
|
|
1208
1203
|
style: {
|
|
@@ -1217,7 +1212,7 @@ const Section = EmailNode.create({
|
|
|
1217
1212
|
|
|
1218
1213
|
//#endregion
|
|
1219
1214
|
//#region src/extensions/style-attribute.tsx
|
|
1220
|
-
const StyleAttribute =
|
|
1215
|
+
const StyleAttribute = _tiptap_core.Extension.create({
|
|
1221
1216
|
name: "styleAttribute",
|
|
1222
1217
|
priority: 101,
|
|
1223
1218
|
addOptions() {
|
|
@@ -1269,7 +1264,7 @@ const StyleAttribute = __tiptap_core.Extension.create({
|
|
|
1269
1264
|
* This extension allows you to mark text as superscript.
|
|
1270
1265
|
* @see https://tiptap.dev/api/marks/superscript
|
|
1271
1266
|
*/
|
|
1272
|
-
const Sup =
|
|
1267
|
+
const Sup = _tiptap_core.Mark.create({
|
|
1273
1268
|
name: "sup",
|
|
1274
1269
|
addOptions() {
|
|
1275
1270
|
return { HTMLAttributes: {} };
|
|
@@ -1280,7 +1275,7 @@ const Sup = __tiptap_core.Mark.create({
|
|
|
1280
1275
|
renderHTML({ HTMLAttributes }) {
|
|
1281
1276
|
return [
|
|
1282
1277
|
"sup",
|
|
1283
|
-
(0,
|
|
1278
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
|
|
1284
1279
|
0
|
|
1285
1280
|
];
|
|
1286
1281
|
},
|
|
@@ -1331,7 +1326,7 @@ const Table = EmailNode.create({
|
|
|
1331
1326
|
renderHTML({ HTMLAttributes }) {
|
|
1332
1327
|
return [
|
|
1333
1328
|
"table",
|
|
1334
|
-
(0,
|
|
1329
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes),
|
|
1335
1330
|
[
|
|
1336
1331
|
"tbody",
|
|
1337
1332
|
{},
|
|
@@ -1347,7 +1342,7 @@ const Table = EmailNode.create({
|
|
|
1347
1342
|
marginLeft: "auto",
|
|
1348
1343
|
marginRight: "auto"
|
|
1349
1344
|
} : {};
|
|
1350
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
1345
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Section, {
|
|
1351
1346
|
className: node.attrs?.class || void 0,
|
|
1352
1347
|
align: alignment,
|
|
1353
1348
|
style: resolveConflictingStyles(style, {
|
|
@@ -1438,7 +1433,7 @@ const TableCell = EmailNode.create({
|
|
|
1438
1433
|
},
|
|
1439
1434
|
renderToReactEmail({ children, node, style }) {
|
|
1440
1435
|
const inlineStyles = inlineCssToJs(node.attrs?.style);
|
|
1441
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
1436
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
|
|
1442
1437
|
className: node.attrs?.class || void 0,
|
|
1443
1438
|
align: node.attrs?.align || node.attrs?.alignment,
|
|
1444
1439
|
style: {
|
|
@@ -1449,7 +1444,7 @@ const TableCell = EmailNode.create({
|
|
|
1449
1444
|
});
|
|
1450
1445
|
}
|
|
1451
1446
|
});
|
|
1452
|
-
const TableHeader =
|
|
1447
|
+
const TableHeader = _tiptap_core.Node.create({
|
|
1453
1448
|
name: "tableHeader",
|
|
1454
1449
|
group: "tableCell",
|
|
1455
1450
|
content: "block+",
|
|
@@ -1487,7 +1482,7 @@ const TableHeader = __tiptap_core.Node.create({
|
|
|
1487
1482
|
|
|
1488
1483
|
//#endregion
|
|
1489
1484
|
//#region src/extensions/uppercase.ts
|
|
1490
|
-
const Uppercase =
|
|
1485
|
+
const Uppercase = _tiptap_core.Mark.create({
|
|
1491
1486
|
name: "uppercase",
|
|
1492
1487
|
addOptions() {
|
|
1493
1488
|
return { HTMLAttributes: {} };
|
|
@@ -1504,7 +1499,7 @@ const Uppercase = __tiptap_core.Mark.create({
|
|
|
1504
1499
|
renderHTML({ HTMLAttributes }) {
|
|
1505
1500
|
return [
|
|
1506
1501
|
"span",
|
|
1507
|
-
(0,
|
|
1502
|
+
(0, _tiptap_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, { style: "text-transform: uppercase" }),
|
|
1508
1503
|
0
|
|
1509
1504
|
];
|
|
1510
1505
|
},
|
|
@@ -1579,7 +1574,7 @@ function createColumnsNode(config, includeCommands) {
|
|
|
1579
1574
|
renderHTML({ HTMLAttributes }) {
|
|
1580
1575
|
return [
|
|
1581
1576
|
"div",
|
|
1582
|
-
(0,
|
|
1577
|
+
(0, _tiptap_core.mergeAttributes)({
|
|
1583
1578
|
"data-type": config.dataType,
|
|
1584
1579
|
class: "node-columns"
|
|
1585
1580
|
}, HTMLAttributes),
|
|
@@ -1605,7 +1600,7 @@ function createColumnsNode(config, includeCommands) {
|
|
|
1605
1600
|
} },
|
|
1606
1601
|
renderToReactEmail({ children, node, style }) {
|
|
1607
1602
|
const inlineStyles = inlineCssToJs(node.attrs?.style);
|
|
1608
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
1603
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Row, {
|
|
1609
1604
|
className: node.attrs?.class || void 0,
|
|
1610
1605
|
style: {
|
|
1611
1606
|
...style,
|
|
@@ -1633,7 +1628,7 @@ const ColumnsColumn = EmailNode.create({
|
|
|
1633
1628
|
renderHTML({ HTMLAttributes }) {
|
|
1634
1629
|
return [
|
|
1635
1630
|
"div",
|
|
1636
|
-
(0,
|
|
1631
|
+
(0, _tiptap_core.mergeAttributes)({
|
|
1637
1632
|
"data-type": "column",
|
|
1638
1633
|
class: "node-column"
|
|
1639
1634
|
}, HTMLAttributes),
|
|
@@ -1671,7 +1666,7 @@ const ColumnsColumn = EmailNode.create({
|
|
|
1671
1666
|
const columnEnd = $from.end(d);
|
|
1672
1667
|
const { from, to } = state.selection;
|
|
1673
1668
|
if (from === columnStart && to === columnEnd) return false;
|
|
1674
|
-
editor.view.dispatch(state.tr.setSelection(
|
|
1669
|
+
editor.view.dispatch(state.tr.setSelection(_tiptap_pm_state.TextSelection.create(state.doc, columnStart, columnEnd)));
|
|
1675
1670
|
return true;
|
|
1676
1671
|
}
|
|
1677
1672
|
return false;
|
|
@@ -1681,7 +1676,7 @@ const ColumnsColumn = EmailNode.create({
|
|
|
1681
1676
|
renderToReactEmail({ children, node, style }) {
|
|
1682
1677
|
const inlineStyles = inlineCssToJs(node.attrs?.style);
|
|
1683
1678
|
const width = node.attrs?.width;
|
|
1684
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
1679
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_email_components.Column, {
|
|
1685
1680
|
className: node.attrs?.class || void 0,
|
|
1686
1681
|
style: {
|
|
1687
1682
|
...style,
|
|
@@ -1696,7 +1691,7 @@ const ColumnsColumn = EmailNode.create({
|
|
|
1696
1691
|
//#endregion
|
|
1697
1692
|
//#region src/extensions/index.ts
|
|
1698
1693
|
const coreExtensions = [
|
|
1699
|
-
|
|
1694
|
+
_tiptap_starter_kit.StarterKit.configure({
|
|
1700
1695
|
undoRedo: false,
|
|
1701
1696
|
heading: false,
|
|
1702
1697
|
link: false,
|
|
@@ -1842,7 +1837,7 @@ function useBubbleMenuContext() {
|
|
|
1842
1837
|
|
|
1843
1838
|
//#endregion
|
|
1844
1839
|
//#region src/ui/bubble-menu/item.tsx
|
|
1845
|
-
function BubbleMenuItem({ name, isActive, onCommand, className, children
|
|
1840
|
+
function BubbleMenuItem({ name, isActive, onCommand, className, children, ...rest }) {
|
|
1846
1841
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
1847
1842
|
type: "button",
|
|
1848
1843
|
"aria-label": name,
|
|
@@ -1864,7 +1859,7 @@ function BubbleMenuAlignCenter({ className, children }) {
|
|
|
1864
1859
|
const { editor } = useBubbleMenuContext();
|
|
1865
1860
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
|
|
1866
1861
|
name: "align-center",
|
|
1867
|
-
isActive: (0,
|
|
1862
|
+
isActive: (0, _tiptap_react.useEditorState)({
|
|
1868
1863
|
editor,
|
|
1869
1864
|
selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "center" }) ?? false
|
|
1870
1865
|
}),
|
|
@@ -1880,7 +1875,7 @@ function BubbleMenuAlignLeft({ className, children }) {
|
|
|
1880
1875
|
const { editor } = useBubbleMenuContext();
|
|
1881
1876
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
|
|
1882
1877
|
name: "align-left",
|
|
1883
|
-
isActive: (0,
|
|
1878
|
+
isActive: (0, _tiptap_react.useEditorState)({
|
|
1884
1879
|
editor,
|
|
1885
1880
|
selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "left" }) ?? false
|
|
1886
1881
|
}),
|
|
@@ -1896,7 +1891,7 @@ function BubbleMenuAlignRight({ className, children }) {
|
|
|
1896
1891
|
const { editor } = useBubbleMenuContext();
|
|
1897
1892
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleMenuItem, {
|
|
1898
1893
|
name: "align-right",
|
|
1899
|
-
isActive: (0,
|
|
1894
|
+
isActive: (0, _tiptap_react.useEditorState)({
|
|
1900
1895
|
editor,
|
|
1901
1896
|
selector: ({ editor: editor$1 }) => editor$1?.isActive({ alignment: "right" }) ?? false
|
|
1902
1897
|
}),
|
|
@@ -1911,7 +1906,7 @@ function BubbleMenuAlignRight({ className, children }) {
|
|
|
1911
1906
|
function createMarkBubbleItem(config) {
|
|
1912
1907
|
function MarkBubbleItem({ className, children }) {
|
|
1913
1908
|
const { editor } = useBubbleMenuContext();
|
|
1914
|
-
const isActive = (0,
|
|
1909
|
+
const isActive = (0, _tiptap_react.useEditorState)({
|
|
1915
1910
|
editor,
|
|
1916
1911
|
selector: ({ editor: editor$1 }) => {
|
|
1917
1912
|
if (config.activeParams) return editor$1?.isActive(config.activeName, config.activeParams) ?? false;
|
|
@@ -2029,7 +2024,7 @@ function BubbleMenuLinkSelector({ className, showToggle = true, validateUrl, onL
|
|
|
2029
2024
|
if (!isControlled) setUncontrolledOpen(value);
|
|
2030
2025
|
onOpenChange?.(value);
|
|
2031
2026
|
}, [isControlled, onOpenChange]);
|
|
2032
|
-
const editorState = (0,
|
|
2027
|
+
const editorState = (0, _tiptap_react.useEditorState)({
|
|
2033
2028
|
editor,
|
|
2034
2029
|
selector: ({ editor: editor$1 }) => ({
|
|
2035
2030
|
isLinkActive: editor$1?.isActive("link") ?? false,
|
|
@@ -2195,7 +2190,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
|
|
|
2195
2190
|
if (!isControlled) setUncontrolledOpen(value);
|
|
2196
2191
|
onOpenChange?.(value);
|
|
2197
2192
|
}, [isControlled, onOpenChange]);
|
|
2198
|
-
const editorState = (0,
|
|
2193
|
+
const editorState = (0, _tiptap_react.useEditorState)({
|
|
2199
2194
|
editor,
|
|
2200
2195
|
selector: ({ editor: editor$1 }) => ({
|
|
2201
2196
|
isParagraphActive: (editor$1?.isActive("paragraph") ?? false) && !editor$1?.isActive("bulletList") && !editor$1?.isActive("orderedList"),
|
|
@@ -2274,7 +2269,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
|
|
|
2274
2269
|
if (!editorState || items.length === 0) return null;
|
|
2275
2270
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorContext.Provider, {
|
|
2276
2271
|
value: contextValue,
|
|
2277
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2272
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
|
|
2278
2273
|
open: isOpen,
|
|
2279
2274
|
onOpenChange: setIsOpen,
|
|
2280
2275
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
@@ -2288,7 +2283,7 @@ function NodeSelectorRoot({ omit = [], open: controlledOpen, onOpenChange, class
|
|
|
2288
2283
|
}
|
|
2289
2284
|
function NodeSelectorTrigger({ className, children }) {
|
|
2290
2285
|
const { activeItem, isOpen, setIsOpen } = useNodeSelectorContext();
|
|
2291
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2286
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
|
|
2292
2287
|
"data-re-node-selector-trigger": "",
|
|
2293
2288
|
className,
|
|
2294
2289
|
onClick: () => setIsOpen(!isOpen),
|
|
@@ -2297,7 +2292,7 @@ function NodeSelectorTrigger({ className, children }) {
|
|
|
2297
2292
|
}
|
|
2298
2293
|
function NodeSelectorContent({ className, align = "start", children }) {
|
|
2299
2294
|
const { items, setIsOpen } = useNodeSelectorContext();
|
|
2300
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2295
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
|
|
2301
2296
|
align,
|
|
2302
2297
|
"data-re-node-selector-content": "",
|
|
2303
2298
|
className,
|
|
@@ -2333,9 +2328,9 @@ function BubbleMenuNodeSelector({ omit = [], className, triggerContent, open, on
|
|
|
2333
2328
|
//#endregion
|
|
2334
2329
|
//#region src/ui/bubble-menu/root.tsx
|
|
2335
2330
|
function BubbleMenuRoot({ excludeNodes = [], placement = "bottom", offset = 8, onHide, className, children }) {
|
|
2336
|
-
const { editor } = (0,
|
|
2331
|
+
const { editor } = (0, _tiptap_react.useCurrentEditor)();
|
|
2337
2332
|
if (!editor) return null;
|
|
2338
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2333
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
|
|
2339
2334
|
editor,
|
|
2340
2335
|
"data-re-bubble-menu": "",
|
|
2341
2336
|
shouldShow: ({ editor: editor$1, view }) => {
|
|
@@ -2481,7 +2476,7 @@ function useButtonBubbleMenuContext() {
|
|
|
2481
2476
|
|
|
2482
2477
|
//#endregion
|
|
2483
2478
|
//#region src/ui/button-bubble-menu/edit-link.tsx
|
|
2484
|
-
function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown
|
|
2479
|
+
function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
|
|
2485
2480
|
const { setIsEditing } = useButtonBubbleMenuContext();
|
|
2486
2481
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
2487
2482
|
...rest,
|
|
@@ -2505,10 +2500,10 @@ function ButtonBubbleMenuEditLink({ className, children, onClick, onMouseDown,..
|
|
|
2505
2500
|
//#endregion
|
|
2506
2501
|
//#region src/ui/button-bubble-menu/root.tsx
|
|
2507
2502
|
function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
|
|
2508
|
-
const { editor } = (0,
|
|
2503
|
+
const { editor } = (0, _tiptap_react.useCurrentEditor)();
|
|
2509
2504
|
const [isEditing, setIsEditing] = react.useState(false);
|
|
2510
2505
|
if (!editor) return null;
|
|
2511
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2506
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
|
|
2512
2507
|
editor,
|
|
2513
2508
|
"data-re-btn-bm": "",
|
|
2514
2509
|
shouldShow: ({ editor: e, view }) => e.isActive("button") && !view.dom.classList.contains("dragging"),
|
|
@@ -2534,7 +2529,7 @@ function ButtonBubbleMenuRoot({ onHide, placement = "top", offset = 8, className
|
|
|
2534
2529
|
|
|
2535
2530
|
//#endregion
|
|
2536
2531
|
//#region src/ui/button-bubble-menu/toolbar.tsx
|
|
2537
|
-
function ButtonBubbleMenuToolbar({ children
|
|
2532
|
+
function ButtonBubbleMenuToolbar({ children, ...rest }) {
|
|
2538
2533
|
const { isEditing } = useButtonBubbleMenuContext();
|
|
2539
2534
|
if (isEditing) return null;
|
|
2540
2535
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
@@ -2544,12 +2539,25 @@ function ButtonBubbleMenuToolbar({ children,...rest }) {
|
|
|
2544
2539
|
});
|
|
2545
2540
|
}
|
|
2546
2541
|
|
|
2542
|
+
//#endregion
|
|
2543
|
+
//#region src/ui/button-bubble-menu/default.tsx
|
|
2544
|
+
function ButtonBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
|
|
2545
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuRoot, {
|
|
2546
|
+
placement,
|
|
2547
|
+
offset,
|
|
2548
|
+
onHide,
|
|
2549
|
+
className,
|
|
2550
|
+
children: !excludeItems.includes("edit-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuToolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonBubbleMenuEditLink, {}) })
|
|
2551
|
+
});
|
|
2552
|
+
}
|
|
2553
|
+
|
|
2547
2554
|
//#endregion
|
|
2548
2555
|
//#region src/ui/button-bubble-menu/index.ts
|
|
2549
2556
|
const ButtonBubbleMenu = {
|
|
2550
2557
|
Root: ButtonBubbleMenuRoot,
|
|
2551
2558
|
Toolbar: ButtonBubbleMenuToolbar,
|
|
2552
|
-
EditLink: ButtonBubbleMenuEditLink
|
|
2559
|
+
EditLink: ButtonBubbleMenuEditLink,
|
|
2560
|
+
Default: ButtonBubbleMenuDefault
|
|
2553
2561
|
};
|
|
2554
2562
|
|
|
2555
2563
|
//#endregion
|
|
@@ -2563,7 +2571,7 @@ function useImageBubbleMenuContext() {
|
|
|
2563
2571
|
|
|
2564
2572
|
//#endregion
|
|
2565
2573
|
//#region src/ui/image-bubble-menu/edit-link.tsx
|
|
2566
|
-
function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown
|
|
2574
|
+
function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
|
|
2567
2575
|
const { setIsEditing } = useImageBubbleMenuContext();
|
|
2568
2576
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
2569
2577
|
...rest,
|
|
@@ -2587,10 +2595,10 @@ function ImageBubbleMenuEditLink({ className, children, onClick, onMouseDown,...
|
|
|
2587
2595
|
//#endregion
|
|
2588
2596
|
//#region src/ui/image-bubble-menu/root.tsx
|
|
2589
2597
|
function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
|
|
2590
|
-
const { editor } = (0,
|
|
2598
|
+
const { editor } = (0, _tiptap_react.useCurrentEditor)();
|
|
2591
2599
|
const [isEditing, setIsEditing] = react.useState(false);
|
|
2592
2600
|
if (!editor) return null;
|
|
2593
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2601
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
|
|
2594
2602
|
editor,
|
|
2595
2603
|
"data-re-img-bm": "",
|
|
2596
2604
|
shouldShow: ({ editor: e, view }) => e.isActive("image") && !view.dom.classList.contains("dragging"),
|
|
@@ -2616,7 +2624,7 @@ function ImageBubbleMenuRoot({ onHide, placement = "top", offset = 8, className,
|
|
|
2616
2624
|
|
|
2617
2625
|
//#endregion
|
|
2618
2626
|
//#region src/ui/image-bubble-menu/toolbar.tsx
|
|
2619
|
-
function ImageBubbleMenuToolbar({ children
|
|
2627
|
+
function ImageBubbleMenuToolbar({ children, ...rest }) {
|
|
2620
2628
|
const { isEditing } = useImageBubbleMenuContext();
|
|
2621
2629
|
if (isEditing) return null;
|
|
2622
2630
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
@@ -2626,12 +2634,25 @@ function ImageBubbleMenuToolbar({ children,...rest }) {
|
|
|
2626
2634
|
});
|
|
2627
2635
|
}
|
|
2628
2636
|
|
|
2637
|
+
//#endregion
|
|
2638
|
+
//#region src/ui/image-bubble-menu/default.tsx
|
|
2639
|
+
function ImageBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className }) {
|
|
2640
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuRoot, {
|
|
2641
|
+
placement,
|
|
2642
|
+
offset,
|
|
2643
|
+
onHide,
|
|
2644
|
+
className,
|
|
2645
|
+
children: !excludeItems.includes("edit-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuToolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageBubbleMenuEditLink, {}) })
|
|
2646
|
+
});
|
|
2647
|
+
}
|
|
2648
|
+
|
|
2629
2649
|
//#endregion
|
|
2630
2650
|
//#region src/ui/image-bubble-menu/index.ts
|
|
2631
2651
|
const ImageBubbleMenu = {
|
|
2632
2652
|
Root: ImageBubbleMenuRoot,
|
|
2633
2653
|
Toolbar: ImageBubbleMenuToolbar,
|
|
2634
|
-
EditLink: ImageBubbleMenuEditLink
|
|
2654
|
+
EditLink: ImageBubbleMenuEditLink,
|
|
2655
|
+
Default: ImageBubbleMenuDefault
|
|
2635
2656
|
};
|
|
2636
2657
|
|
|
2637
2658
|
//#endregion
|
|
@@ -2645,7 +2666,7 @@ function useLinkBubbleMenuContext() {
|
|
|
2645
2666
|
|
|
2646
2667
|
//#endregion
|
|
2647
2668
|
//#region src/ui/link-bubble-menu/edit-link.tsx
|
|
2648
|
-
function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown
|
|
2669
|
+
function LinkBubbleMenuEditLink({ className, children, onClick, onMouseDown, ...rest }) {
|
|
2649
2670
|
const { setIsEditing } = useLinkBubbleMenuContext();
|
|
2650
2671
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
2651
2672
|
type: "button",
|
|
@@ -2773,7 +2794,7 @@ function LinkBubbleMenuForm({ className, validateUrl, onLinkApply, onLinkRemove,
|
|
|
2773
2794
|
|
|
2774
2795
|
//#endregion
|
|
2775
2796
|
//#region src/ui/link-bubble-menu/open-link.tsx
|
|
2776
|
-
function LinkBubbleMenuOpenLink({ className, children
|
|
2797
|
+
function LinkBubbleMenuOpenLink({ className, children, ...rest }) {
|
|
2777
2798
|
const { linkHref } = useLinkBubbleMenuContext();
|
|
2778
2799
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
2779
2800
|
...rest,
|
|
@@ -2791,14 +2812,14 @@ function LinkBubbleMenuOpenLink({ className, children,...rest }) {
|
|
|
2791
2812
|
//#endregion
|
|
2792
2813
|
//#region src/ui/link-bubble-menu/root.tsx
|
|
2793
2814
|
function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className, children }) {
|
|
2794
|
-
const { editor } = (0,
|
|
2815
|
+
const { editor } = (0, _tiptap_react.useCurrentEditor)();
|
|
2795
2816
|
const [isEditing, setIsEditing] = react.useState(false);
|
|
2796
|
-
const linkHref = (0,
|
|
2817
|
+
const linkHref = (0, _tiptap_react.useEditorState)({
|
|
2797
2818
|
editor,
|
|
2798
2819
|
selector: ({ editor: e }) => e?.getAttributes("link").href ?? ""
|
|
2799
2820
|
});
|
|
2800
2821
|
if (!editor) return null;
|
|
2801
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
2822
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react_menus.BubbleMenu, {
|
|
2802
2823
|
editor,
|
|
2803
2824
|
"data-re-link-bm": "",
|
|
2804
2825
|
shouldShow: ({ editor: e }) => e.isActive("link") && e.view.state.selection.content().size === 0,
|
|
@@ -2825,7 +2846,7 @@ function LinkBubbleMenuRoot({ onHide, placement = "top", offset = 8, className,
|
|
|
2825
2846
|
|
|
2826
2847
|
//#endregion
|
|
2827
2848
|
//#region src/ui/link-bubble-menu/toolbar.tsx
|
|
2828
|
-
function LinkBubbleMenuToolbar({ children
|
|
2849
|
+
function LinkBubbleMenuToolbar({ children, ...rest }) {
|
|
2829
2850
|
const { isEditing } = useLinkBubbleMenuContext();
|
|
2830
2851
|
if (isEditing) return null;
|
|
2831
2852
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
@@ -2837,7 +2858,7 @@ function LinkBubbleMenuToolbar({ children,...rest }) {
|
|
|
2837
2858
|
|
|
2838
2859
|
//#endregion
|
|
2839
2860
|
//#region src/ui/link-bubble-menu/unlink.tsx
|
|
2840
|
-
function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown
|
|
2861
|
+
function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown, ...rest }) {
|
|
2841
2862
|
const { editor } = useLinkBubbleMenuContext();
|
|
2842
2863
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
2843
2864
|
type: "button",
|
|
@@ -2858,6 +2879,27 @@ function LinkBubbleMenuUnlink({ className, children, onClick, onMouseDown,...res
|
|
|
2858
2879
|
});
|
|
2859
2880
|
}
|
|
2860
2881
|
|
|
2882
|
+
//#endregion
|
|
2883
|
+
//#region src/ui/link-bubble-menu/default.tsx
|
|
2884
|
+
function LinkBubbleMenuDefault({ excludeItems = [], placement, offset, onHide, className, validateUrl, onLinkApply, onLinkRemove }) {
|
|
2885
|
+
const has = (item) => !excludeItems.includes(item);
|
|
2886
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkBubbleMenuRoot, {
|
|
2887
|
+
placement,
|
|
2888
|
+
offset,
|
|
2889
|
+
onHide,
|
|
2890
|
+
className,
|
|
2891
|
+
children: [(has("edit-link") || has("open-link") || has("unlink")) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinkBubbleMenuToolbar, { children: [
|
|
2892
|
+
has("edit-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBubbleMenuEditLink, {}),
|
|
2893
|
+
has("open-link") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBubbleMenuOpenLink, {}),
|
|
2894
|
+
has("unlink") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBubbleMenuUnlink, {})
|
|
2895
|
+
] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBubbleMenuForm, {
|
|
2896
|
+
validateUrl,
|
|
2897
|
+
onLinkApply,
|
|
2898
|
+
onLinkRemove
|
|
2899
|
+
})]
|
|
2900
|
+
});
|
|
2901
|
+
}
|
|
2902
|
+
|
|
2861
2903
|
//#endregion
|
|
2862
2904
|
//#region src/ui/link-bubble-menu/index.ts
|
|
2863
2905
|
const LinkBubbleMenu = {
|
|
@@ -2866,7 +2908,8 @@ const LinkBubbleMenu = {
|
|
|
2866
2908
|
Form: LinkBubbleMenuForm,
|
|
2867
2909
|
EditLink: LinkBubbleMenuEditLink,
|
|
2868
2910
|
Unlink: LinkBubbleMenuUnlink,
|
|
2869
|
-
OpenLink: LinkBubbleMenuOpenLink
|
|
2911
|
+
OpenLink: LinkBubbleMenuOpenLink,
|
|
2912
|
+
Default: LinkBubbleMenuDefault
|
|
2870
2913
|
};
|
|
2871
2914
|
|
|
2872
2915
|
//#endregion
|
|
@@ -2892,6 +2935,7 @@ exports.BubbleMenuUnderline = BubbleMenuUnderline;
|
|
|
2892
2935
|
exports.BubbleMenuUppercase = BubbleMenuUppercase;
|
|
2893
2936
|
exports.Button = Button;
|
|
2894
2937
|
exports.ButtonBubbleMenu = ButtonBubbleMenu;
|
|
2938
|
+
exports.ButtonBubbleMenuDefault = ButtonBubbleMenuDefault;
|
|
2895
2939
|
exports.ButtonBubbleMenuEditLink = ButtonBubbleMenuEditLink;
|
|
2896
2940
|
exports.ButtonBubbleMenuRoot = ButtonBubbleMenuRoot;
|
|
2897
2941
|
exports.ButtonBubbleMenuToolbar = ButtonBubbleMenuToolbar;
|
|
@@ -2903,10 +2947,12 @@ exports.Div = Div;
|
|
|
2903
2947
|
exports.EmailNode = EmailNode;
|
|
2904
2948
|
exports.FourColumns = FourColumns;
|
|
2905
2949
|
exports.ImageBubbleMenu = ImageBubbleMenu;
|
|
2950
|
+
exports.ImageBubbleMenuDefault = ImageBubbleMenuDefault;
|
|
2906
2951
|
exports.ImageBubbleMenuEditLink = ImageBubbleMenuEditLink;
|
|
2907
2952
|
exports.ImageBubbleMenuRoot = ImageBubbleMenuRoot;
|
|
2908
2953
|
exports.ImageBubbleMenuToolbar = ImageBubbleMenuToolbar;
|
|
2909
2954
|
exports.LinkBubbleMenu = LinkBubbleMenu;
|
|
2955
|
+
exports.LinkBubbleMenuDefault = LinkBubbleMenuDefault;
|
|
2910
2956
|
exports.LinkBubbleMenuEditLink = LinkBubbleMenuEditLink;
|
|
2911
2957
|
exports.LinkBubbleMenuForm = LinkBubbleMenuForm;
|
|
2912
2958
|
exports.LinkBubbleMenuOpenLink = LinkBubbleMenuOpenLink;
|