easy-email-extensions 4.15.0 → 4.17.0
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/lib/AttributePanel/components/blocks/AdvancedTable/Operation/index.d.ts +2 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableMenuConfig.d.ts +38 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableOperationMenu.d.ts +60 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/tableTool.d.ts +45 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/type.d.ts +21 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/Operation/util.d.ts +23 -0
- package/lib/AttributePanel/components/blocks/AdvancedTable/index.d.ts +2 -0
- package/lib/AttributePanel/components/blocks/index.d.ts +2 -0
- package/lib/index2.js +925 -116
- package/lib/index2.js.map +1 -1
- package/package.json +3 -2
- package/readme.md +0 -233
package/lib/index2.js
CHANGED
@@ -56,7 +56,7 @@ var __async = (__this, __arguments, generator) => {
|
|
56
56
|
};
|
57
57
|
import * as React from "react";
|
58
58
|
import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, useImperativeHandle, PureComponent, useCallback, useReducer, createRef, Fragment, createElement, Suspense } from "react";
|
59
|
-
import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot,
|
59
|
+
import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
|
60
60
|
import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
|
61
61
|
import ReactDOM, { findDOMNode, createPortal } from "react-dom";
|
62
62
|
import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
|
@@ -33258,7 +33258,7 @@ function useFontFamily() {
|
|
33258
33258
|
fontList: fontList2
|
33259
33259
|
};
|
33260
33260
|
}
|
33261
|
-
var styleText$
|
33261
|
+
var styleText$2 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
|
33262
33262
|
function FontFamily$1(props) {
|
33263
33263
|
const { fontList: fontList2 } = useFontFamily();
|
33264
33264
|
const { execCommand } = props;
|
@@ -33277,7 +33277,7 @@ function FontFamily$1(props) {
|
|
33277
33277
|
className: "easy-email-extensions-Tools-Popover",
|
33278
33278
|
popupVisible: visible,
|
33279
33279
|
onVisibleChange,
|
33280
|
-
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$
|
33280
|
+
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$2), /* @__PURE__ */ React__default.createElement("div", {
|
33281
33281
|
style: {
|
33282
33282
|
maxWidth: 150,
|
33283
33283
|
maxHeight: 350,
|
@@ -34518,14 +34518,135 @@ function Direction() {
|
|
34518
34518
|
}));
|
34519
34519
|
}, [focusIdx2]);
|
34520
34520
|
}
|
34521
|
+
function getContextMergeTags(mergeTags2, context, idx) {
|
34522
|
+
const loop = (currentIdx, combineMergeTags) => {
|
34523
|
+
var _a, _b;
|
34524
|
+
const parentBlockData = lodash.exports.get(context, currentIdx);
|
34525
|
+
if (!parentBlockData)
|
34526
|
+
return combineMergeTags;
|
34527
|
+
const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
|
34528
|
+
if (!dataSource)
|
34529
|
+
return combineMergeTags;
|
34530
|
+
Object.keys(dataSource).forEach((key) => {
|
34531
|
+
let formatKey = dataSource[key];
|
34532
|
+
const loopFormatKey = (currentLoopKeyIdx) => {
|
34533
|
+
const currentParentIdx = getParentIdx(currentLoopKeyIdx);
|
34534
|
+
if (currentParentIdx) {
|
34535
|
+
const currentBlockData = lodash.exports.get(context, currentParentIdx);
|
34536
|
+
if (!currentBlockData)
|
34537
|
+
return formatKey;
|
34538
|
+
currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
|
34539
|
+
formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
|
34540
|
+
});
|
34541
|
+
loopFormatKey(currentParentIdx);
|
34542
|
+
}
|
34543
|
+
};
|
34544
|
+
loopFormatKey(currentIdx);
|
34545
|
+
const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
|
34546
|
+
combineMergeTags = __spreadValues({
|
34547
|
+
[key]: lodash.exports.get(combineMergeTags, dataSourcePath)
|
34548
|
+
}, combineMergeTags);
|
34549
|
+
});
|
34550
|
+
const parentIdx = getParentIdx(currentIdx);
|
34551
|
+
if (!parentIdx)
|
34552
|
+
return combineMergeTags;
|
34553
|
+
return loop(parentIdx, combineMergeTags);
|
34554
|
+
};
|
34555
|
+
return loop(idx, lodash.exports.cloneDeep(mergeTags2));
|
34556
|
+
}
|
34557
|
+
const MergeTags$1 = React__default.memo((props) => {
|
34558
|
+
const [expandedKeys, setExpandedKeys] = useState([]);
|
34559
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
34560
|
+
const {
|
34561
|
+
mergeTags: mergeTags2 = {},
|
34562
|
+
mergeTagGenerate,
|
34563
|
+
renderMergeTagContent
|
34564
|
+
} = useEditorProps();
|
34565
|
+
const { values: values2 } = useBlock();
|
34566
|
+
const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
|
34567
|
+
const treeOptions = useMemo(() => {
|
34568
|
+
const treeData = [];
|
34569
|
+
const deep = (key, title2, parent2, mapData = []) => {
|
34570
|
+
const currentMapData = {
|
34571
|
+
key,
|
34572
|
+
value: key,
|
34573
|
+
title: title2,
|
34574
|
+
children: []
|
34575
|
+
};
|
34576
|
+
mapData.push(currentMapData);
|
34577
|
+
const current = parent2[title2];
|
34578
|
+
if (current && typeof current === "object") {
|
34579
|
+
Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
|
34580
|
+
}
|
34581
|
+
};
|
34582
|
+
Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
|
34583
|
+
return treeData;
|
34584
|
+
}, [contextMergeTags]);
|
34585
|
+
const onSelect = useCallback((key) => {
|
34586
|
+
const value = lodash.exports.get(contextMergeTags, key);
|
34587
|
+
if (lodash.exports.isObject(value)) {
|
34588
|
+
setExpandedKeys((keys2) => {
|
34589
|
+
if (keys2.includes(key)) {
|
34590
|
+
return keys2.filter((k) => k !== key);
|
34591
|
+
} else {
|
34592
|
+
return [...keys2, key];
|
34593
|
+
}
|
34594
|
+
});
|
34595
|
+
return;
|
34596
|
+
}
|
34597
|
+
return props.onChange(mergeTagGenerate(key));
|
34598
|
+
}, [contextMergeTags, props, mergeTagGenerate]);
|
34599
|
+
const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
|
34600
|
+
onChange: props.onChange,
|
34601
|
+
isSelect: Boolean(props.isSelect),
|
34602
|
+
value: props.value
|
34603
|
+
}) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
|
34604
|
+
if (renderMergeTagContent) {
|
34605
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
|
34606
|
+
}
|
34607
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
34608
|
+
style: { color: "#333" }
|
34609
|
+
}, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
|
34610
|
+
value: props.value,
|
34611
|
+
size: "small",
|
34612
|
+
dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
|
34613
|
+
placeholder: t("Please select"),
|
34614
|
+
treeData: treeOptions,
|
34615
|
+
onChange: (val) => onSelect(val)
|
34616
|
+
}) : /* @__PURE__ */ React__default.createElement(Tree$1, {
|
34617
|
+
expandedKeys,
|
34618
|
+
onExpand: setExpandedKeys,
|
34619
|
+
selectedKeys: [],
|
34620
|
+
treeData: treeOptions,
|
34621
|
+
onSelect: (vals) => onSelect(vals[0]),
|
34622
|
+
style: {
|
34623
|
+
maxHeight: 400,
|
34624
|
+
overflow: "auto"
|
34625
|
+
}
|
34626
|
+
}));
|
34627
|
+
});
|
34521
34628
|
function Link() {
|
34522
34629
|
const { focusIdx: focusIdx2 } = useFocusIdx();
|
34630
|
+
const { input } = useField(`${focusIdx2}.attributes.href`, {
|
34631
|
+
parse: (v) => v
|
34632
|
+
});
|
34523
34633
|
return useMemo(() => {
|
34524
34634
|
return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
|
34525
34635
|
span: 11
|
34526
34636
|
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
34527
34637
|
prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
|
34528
|
-
label: /* @__PURE__ */ React__default.createElement("span", null, t("Href"), "\xA0\xA0\xA0"),
|
34638
|
+
label: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement("span", null, t("Href"), "\xA0\xA0\xA0"), /* @__PURE__ */ React__default.createElement(Popover$1, {
|
34639
|
+
trigger: "click",
|
34640
|
+
content: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
|
34641
|
+
value: input.value,
|
34642
|
+
onChange: input.onChange
|
34643
|
+
})
|
34644
|
+
}, /* @__PURE__ */ React__default.createElement(Button$4, {
|
34645
|
+
type: "text",
|
34646
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
34647
|
+
iconName: "icon-merge-tags"
|
34648
|
+
})
|
34649
|
+
}))),
|
34529
34650
|
name: `${focusIdx2}.attributes.href`
|
34530
34651
|
})), /* @__PURE__ */ React__default.createElement(Grid.Col, {
|
34531
34652
|
offset: 1,
|
@@ -34607,116 +34728,6 @@ function FontSize$1() {
|
|
34607
34728
|
autoComplete: "off"
|
34608
34729
|
});
|
34609
34730
|
}
|
34610
|
-
function getContextMergeTags(mergeTags2, context, idx) {
|
34611
|
-
const loop = (currentIdx, combineMergeTags) => {
|
34612
|
-
var _a, _b;
|
34613
|
-
const parentBlockData = lodash.exports.get(context, currentIdx);
|
34614
|
-
if (!parentBlockData)
|
34615
|
-
return combineMergeTags;
|
34616
|
-
const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
|
34617
|
-
if (parentBlock && parentBlock.render) {
|
34618
|
-
const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
|
34619
|
-
if (!dataSource)
|
34620
|
-
return combineMergeTags;
|
34621
|
-
Object.keys(dataSource).forEach((key) => {
|
34622
|
-
let formatKey = dataSource[key];
|
34623
|
-
const loopFormatKey = (currentLoopKeyIdx) => {
|
34624
|
-
const currentParentIdx = getParentIdx(currentLoopKeyIdx);
|
34625
|
-
if (currentParentIdx) {
|
34626
|
-
const currentBlockData = lodash.exports.get(context, currentParentIdx);
|
34627
|
-
if (!currentBlockData)
|
34628
|
-
return formatKey;
|
34629
|
-
currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
|
34630
|
-
formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
|
34631
|
-
});
|
34632
|
-
loopFormatKey(currentParentIdx);
|
34633
|
-
}
|
34634
|
-
};
|
34635
|
-
loopFormatKey(currentIdx);
|
34636
|
-
const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
|
34637
|
-
combineMergeTags = __spreadValues({
|
34638
|
-
[key]: lodash.exports.get(combineMergeTags, dataSourcePath)
|
34639
|
-
}, combineMergeTags);
|
34640
|
-
});
|
34641
|
-
}
|
34642
|
-
const parentIdx = getParentIdx(currentIdx);
|
34643
|
-
if (!parentIdx)
|
34644
|
-
return combineMergeTags;
|
34645
|
-
return loop(parentIdx, combineMergeTags);
|
34646
|
-
};
|
34647
|
-
return loop(idx, lodash.exports.cloneDeep(mergeTags2));
|
34648
|
-
}
|
34649
|
-
const MergeTags$1 = React__default.memo((props) => {
|
34650
|
-
const [expandedKeys, setExpandedKeys] = useState([]);
|
34651
|
-
const { focusIdx: focusIdx2 } = useFocusIdx();
|
34652
|
-
const {
|
34653
|
-
mergeTags: mergeTags2 = {},
|
34654
|
-
mergeTagGenerate,
|
34655
|
-
renderMergeTagContent
|
34656
|
-
} = useEditorProps();
|
34657
|
-
const { values: values2 } = useBlock();
|
34658
|
-
const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
|
34659
|
-
const treeOptions = useMemo(() => {
|
34660
|
-
const treeData = [];
|
34661
|
-
const deep = (key, title2, parent2, mapData = []) => {
|
34662
|
-
const currentMapData = {
|
34663
|
-
key,
|
34664
|
-
value: key,
|
34665
|
-
title: title2,
|
34666
|
-
children: []
|
34667
|
-
};
|
34668
|
-
mapData.push(currentMapData);
|
34669
|
-
const current = parent2[title2];
|
34670
|
-
if (current && typeof current === "object") {
|
34671
|
-
Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
|
34672
|
-
}
|
34673
|
-
};
|
34674
|
-
Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
|
34675
|
-
return treeData;
|
34676
|
-
}, [contextMergeTags]);
|
34677
|
-
const onSelect = useCallback((key) => {
|
34678
|
-
const value = lodash.exports.get(contextMergeTags, key);
|
34679
|
-
if (lodash.exports.isObject(value)) {
|
34680
|
-
setExpandedKeys((keys2) => {
|
34681
|
-
if (keys2.includes(key)) {
|
34682
|
-
return keys2.filter((k) => k !== key);
|
34683
|
-
} else {
|
34684
|
-
return [...keys2, key];
|
34685
|
-
}
|
34686
|
-
});
|
34687
|
-
return;
|
34688
|
-
}
|
34689
|
-
return props.onChange(mergeTagGenerate(key));
|
34690
|
-
}, [contextMergeTags, props, mergeTagGenerate]);
|
34691
|
-
const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
|
34692
|
-
onChange: props.onChange,
|
34693
|
-
isSelect: Boolean(props.isSelect),
|
34694
|
-
value: props.value
|
34695
|
-
}) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
|
34696
|
-
if (renderMergeTagContent) {
|
34697
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
|
34698
|
-
}
|
34699
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
34700
|
-
style: { color: "#333" }
|
34701
|
-
}, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
|
34702
|
-
value: props.value,
|
34703
|
-
size: "small",
|
34704
|
-
dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
|
34705
|
-
placeholder: t("Please select"),
|
34706
|
-
treeData: treeOptions,
|
34707
|
-
onChange: (val) => onSelect(val)
|
34708
|
-
}) : /* @__PURE__ */ React__default.createElement(Tree$1, {
|
34709
|
-
expandedKeys,
|
34710
|
-
onExpand: setExpandedKeys,
|
34711
|
-
selectedKeys: [],
|
34712
|
-
treeData: treeOptions,
|
34713
|
-
onSelect: (vals) => onSelect(vals[0]),
|
34714
|
-
style: {
|
34715
|
-
maxHeight: 400,
|
34716
|
-
overflow: "auto"
|
34717
|
-
}
|
34718
|
-
}));
|
34719
|
-
});
|
34720
34731
|
const borderStyleOptions = [
|
34721
34732
|
{
|
34722
34733
|
value: "dashed",
|
@@ -36097,6 +36108,40 @@ function Table() {
|
|
36097
36108
|
setVisible
|
36098
36109
|
}));
|
36099
36110
|
}
|
36111
|
+
function AdvancedTable() {
|
36112
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
36113
|
+
return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
|
36114
|
+
defaultActiveKey: ["-1", "0", "1", "2", "3"]
|
36115
|
+
}, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
36116
|
+
name: "1",
|
36117
|
+
header: t("Dimension")
|
36118
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(Width, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null)), /* @__PURE__ */ React__default.createElement(Stack$4, {
|
36119
|
+
vertical: true
|
36120
|
+
}, /* @__PURE__ */ React__default.createElement(Padding, null)), /* @__PURE__ */ React__default.createElement(NumberField, {
|
36121
|
+
label: "Cell padding (px)",
|
36122
|
+
name: `${focusIdx2}.attributes.cellPadding`,
|
36123
|
+
config: pixelAdapter,
|
36124
|
+
max: 20,
|
36125
|
+
min: 0,
|
36126
|
+
step: 1
|
36127
|
+
})), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
36128
|
+
name: "2",
|
36129
|
+
header: t("Decoration")
|
36130
|
+
}, /* @__PURE__ */ React__default.createElement(Color, null), /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, null), /* @__PURE__ */ React__default.createElement(TextField, {
|
36131
|
+
label: "Table border",
|
36132
|
+
name: `${focusIdx2}.attributes.border`
|
36133
|
+
}), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
|
36134
|
+
label: "Cell border color",
|
36135
|
+
name: `${focusIdx2}.attributes.cellBorderColor`
|
36136
|
+
})), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
36137
|
+
name: "2",
|
36138
|
+
header: t("Typography")
|
36139
|
+
}, /* @__PURE__ */ React__default.createElement(FontFamily, null), /* @__PURE__ */ React__default.createElement(FontSize$1, null), /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
|
36140
|
+
label: t("Line height"),
|
36141
|
+
unitOptions: "percent",
|
36142
|
+
name: `${focusIdx2}.attributes.line-height`
|
36143
|
+
}), /* @__PURE__ */ React__default.createElement(FontStyle, null), /* @__PURE__ */ React__default.createElement(TextAlign, null))));
|
36144
|
+
}
|
36100
36145
|
const blocks = {
|
36101
36146
|
[BasicType.PAGE]: Page,
|
36102
36147
|
[BasicType.SECTION]: Section,
|
@@ -36127,6 +36172,7 @@ const blocks = {
|
|
36127
36172
|
[AdvancedType.CAROUSEL]: Carousel,
|
36128
36173
|
[AdvancedType.NAVBAR]: Navbar,
|
36129
36174
|
[AdvancedType.SOCIAL]: Social,
|
36175
|
+
[AdvancedType.TABLE]: AdvancedTable,
|
36130
36176
|
[AdvancedType.HERO]: Hero,
|
36131
36177
|
[AdvancedType.WRAPPER]: Wrapper,
|
36132
36178
|
[AdvancedType.SECTION]: Section,
|
@@ -36185,6 +36231,769 @@ const SelectionRangeProvider = (props) => {
|
|
36185
36231
|
}, props.children);
|
36186
36232
|
}, [props.children, value]);
|
36187
36233
|
};
|
36234
|
+
const getEditorElementClientRect = (target2) => {
|
36235
|
+
let left = target2.offsetLeft;
|
36236
|
+
let top = target2.offsetTop;
|
36237
|
+
const width = target2.clientWidth;
|
36238
|
+
const height = target2.clientHeight;
|
36239
|
+
let parentNode = target2.offsetParent;
|
36240
|
+
while (parentNode && parentNode.offsetParent) {
|
36241
|
+
if (parentNode.classList.contains("shadow-container")) {
|
36242
|
+
return { left, top, height, width };
|
36243
|
+
}
|
36244
|
+
left += parentNode.offsetLeft;
|
36245
|
+
top += parentNode.offsetTop;
|
36246
|
+
parentNode = parentNode.offsetParent;
|
36247
|
+
}
|
36248
|
+
return { left, top, height, width };
|
36249
|
+
};
|
36250
|
+
const getBoundaryFromRects = (startRect, endRect) => {
|
36251
|
+
let left = Math.min(startRect.left, endRect.left, startRect.left + startRect.width, endRect.left + endRect.width);
|
36252
|
+
let right = Math.max(startRect.left, endRect.left, startRect.left + startRect.width, endRect.left + endRect.width);
|
36253
|
+
let top = Math.min(startRect.top, endRect.top, startRect.top + startRect.height, endRect.top + endRect.height);
|
36254
|
+
let bottom = Math.max(startRect.top, endRect.top, startRect.top + startRect.height, endRect.top + endRect.height);
|
36255
|
+
let width = right - left;
|
36256
|
+
let height = bottom - top;
|
36257
|
+
return { top, bottom, left, right, width, height };
|
36258
|
+
};
|
36259
|
+
const ERROR_LIMIT = 2;
|
36260
|
+
const getCorrectBoundary = (el, currentBoundary) => {
|
36261
|
+
var _a, _b;
|
36262
|
+
const tableEl = (_b = (_a = el.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
|
36263
|
+
if (!tableEl) {
|
36264
|
+
return null;
|
36265
|
+
}
|
36266
|
+
let leftTopCell = el;
|
36267
|
+
let bottomRightCell = el;
|
36268
|
+
let leftTopRect = getEditorElementClientRect(el);
|
36269
|
+
let bottomRightRect = leftTopRect;
|
36270
|
+
const tableCells = tableEl.querySelectorAll("td");
|
36271
|
+
const tableCellRects = [];
|
36272
|
+
tableCells.forEach((tableCell) => {
|
36273
|
+
const { left, top, height, width } = getEditorElementClientRect(tableCell);
|
36274
|
+
tableCellRects.push({ left, top, height, width });
|
36275
|
+
let isIntersected = (left + ERROR_LIMIT >= currentBoundary.left && left + ERROR_LIMIT <= currentBoundary.right || left - ERROR_LIMIT + width >= currentBoundary.left && left - ERROR_LIMIT + width <= currentBoundary.right) && (top + ERROR_LIMIT >= currentBoundary.top && top + ERROR_LIMIT <= currentBoundary.bottom || top - ERROR_LIMIT + height >= currentBoundary.top && top - ERROR_LIMIT + height <= currentBoundary.bottom);
|
36276
|
+
if (isIntersected) {
|
36277
|
+
currentBoundary = getBoundaryFromRects(currentBoundary, {
|
36278
|
+
left,
|
36279
|
+
top,
|
36280
|
+
height,
|
36281
|
+
width
|
36282
|
+
});
|
36283
|
+
}
|
36284
|
+
});
|
36285
|
+
tableCells.forEach((tableCell, index2) => {
|
36286
|
+
const { left, top, height, width } = tableCellRects[index2];
|
36287
|
+
let isIntersected = (left + ERROR_LIMIT >= currentBoundary.left && left + ERROR_LIMIT <= currentBoundary.right || left - ERROR_LIMIT + width >= currentBoundary.left && left - ERROR_LIMIT + width <= currentBoundary.right) && (top + ERROR_LIMIT >= currentBoundary.top && top + ERROR_LIMIT <= currentBoundary.bottom || top - ERROR_LIMIT + height >= currentBoundary.top && top - ERROR_LIMIT + height <= currentBoundary.bottom);
|
36288
|
+
if (!isIntersected) {
|
36289
|
+
return;
|
36290
|
+
}
|
36291
|
+
if (top <= leftTopRect.top && left <= leftTopRect.left) {
|
36292
|
+
leftTopRect = tableCellRects[index2];
|
36293
|
+
leftTopCell = tableCell;
|
36294
|
+
}
|
36295
|
+
if (top === leftTopRect.top + ERROR_LIMIT || top === leftTopRect.top && left <= leftTopRect.left) {
|
36296
|
+
leftTopRect = tableCellRects[index2];
|
36297
|
+
leftTopCell = tableCell;
|
36298
|
+
}
|
36299
|
+
if (top + height > bottomRightRect.top + bottomRightRect.height + ERROR_LIMIT || top + height === bottomRightRect.top + bottomRightRect.height && left + width >= bottomRightRect.left + bottomRightRect.width) {
|
36300
|
+
bottomRightRect = tableCellRects[index2];
|
36301
|
+
bottomRightCell = tableCell;
|
36302
|
+
}
|
36303
|
+
});
|
36304
|
+
return { leftTopCell, bottomRightCell, boundary: currentBoundary };
|
36305
|
+
};
|
36306
|
+
const getBoundaryRectAndElement = (el1, el2) => {
|
36307
|
+
const rect1 = getEditorElementClientRect(el1);
|
36308
|
+
const rect2 = getEditorElementClientRect(el2);
|
36309
|
+
const boundary = getBoundaryFromRects(rect1, rect2);
|
36310
|
+
return getCorrectBoundary(el1, boundary);
|
36311
|
+
};
|
36312
|
+
function setStyle(domNode, rules) {
|
36313
|
+
if (typeof rules === "object") {
|
36314
|
+
for (let prop in rules) {
|
36315
|
+
domNode.style[prop] = rules[prop];
|
36316
|
+
}
|
36317
|
+
}
|
36318
|
+
}
|
36319
|
+
const getCurrentTable = (target2) => {
|
36320
|
+
let parentNode = target2.parentNode;
|
36321
|
+
while (parentNode) {
|
36322
|
+
if (parentNode.nodeName === "TABLE") {
|
36323
|
+
return parentNode;
|
36324
|
+
}
|
36325
|
+
parentNode = parentNode.parentNode;
|
36326
|
+
}
|
36327
|
+
return parentNode;
|
36328
|
+
};
|
36329
|
+
const getElementsBoundary = (el1, el2) => {
|
36330
|
+
const rect1 = el1.getBoundingClientRect();
|
36331
|
+
const rect2 = el2.getBoundingClientRect();
|
36332
|
+
const left = Math.min(rect1.left, rect2.left);
|
36333
|
+
const right = Math.max(rect1.right, rect2.right);
|
36334
|
+
const bottom = Math.max(rect1.bottom, rect2.bottom);
|
36335
|
+
const top = Math.min(rect1.top, rect2.top);
|
36336
|
+
return { left, top, right, bottom };
|
36337
|
+
};
|
36338
|
+
const checkEventInBoundingRect = (rect, { x, y }) => {
|
36339
|
+
return x >= rect.left && x <= rect.right && y <= rect.bottom && y >= rect.top;
|
36340
|
+
};
|
36341
|
+
const getCellIndex = (cellElement) => {
|
36342
|
+
let idxName = cellElement.getAttribute(DATA_CONTENT_EDITABLE_IDX);
|
36343
|
+
idxName = idxName.split("data.value.tableSource.")[1].split(".content")[0];
|
36344
|
+
return idxName.split(".").map((e) => Number(e));
|
36345
|
+
};
|
36346
|
+
const getTdBoundaryIndex = (leftTopCell, bottomRightCell) => {
|
36347
|
+
const idx1 = getCellIndex(leftTopCell);
|
36348
|
+
const idx2 = getCellIndex(bottomRightCell);
|
36349
|
+
const top = idx1[0];
|
36350
|
+
const left = idx1[1];
|
36351
|
+
const right = idx2[1];
|
36352
|
+
const bottom = idx2[0];
|
36353
|
+
return { left, top, right, bottom };
|
36354
|
+
};
|
36355
|
+
const getCorrectTableIndexBoundary = (tableIndexBoundary, tableData) => {
|
36356
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
36357
|
+
let { left, right, top, bottom } = tableIndexBoundary;
|
36358
|
+
tableData.forEach((tr, trIndex) => {
|
36359
|
+
tr.forEach((td) => {
|
36360
|
+
td.top = trIndex;
|
36361
|
+
td.bottom = trIndex + (td.rowSpan || 1) - 1;
|
36362
|
+
});
|
36363
|
+
});
|
36364
|
+
const maxTdCount = getMaxTdCount(tableData);
|
36365
|
+
const mergedCells = [];
|
36366
|
+
Array.from({ length: maxTdCount }).forEach((_, tdIndex) => {
|
36367
|
+
tableData.forEach((tr, trIndex) => {
|
36368
|
+
const mergedCell = mergedCells.find((e) => e[0] === trIndex && e[1] === tdIndex);
|
36369
|
+
if (mergedCell) {
|
36370
|
+
return;
|
36371
|
+
}
|
36372
|
+
const mergedTds = mergedCells.filter((e) => e[0] === trIndex && e[1] < tdIndex);
|
36373
|
+
const _tdIndex = tdIndex - mergedTds.length;
|
36374
|
+
const td = tr[_tdIndex];
|
36375
|
+
if (!td) {
|
36376
|
+
console.log("error case, should fix this error.");
|
36377
|
+
return;
|
36378
|
+
}
|
36379
|
+
const rowSpan = td.rowSpan || 1;
|
36380
|
+
const colSpan = td.colSpan || 1;
|
36381
|
+
td.left = tdIndex;
|
36382
|
+
td.right = tdIndex + colSpan - 1;
|
36383
|
+
if (rowSpan > 1 || colSpan > 1) {
|
36384
|
+
Array.from({ length: rowSpan }).forEach((_2, rowSpanIndex) => {
|
36385
|
+
Array.from({ length: colSpan }).forEach((_3, colSpanIndex) => {
|
36386
|
+
if (rowSpanIndex === 0 && colSpanIndex === 0) {
|
36387
|
+
return;
|
36388
|
+
}
|
36389
|
+
mergedCells.push([trIndex + rowSpanIndex, tdIndex + colSpanIndex]);
|
36390
|
+
});
|
36391
|
+
});
|
36392
|
+
}
|
36393
|
+
});
|
36394
|
+
});
|
36395
|
+
tableIndexBoundary.left = ((_b = (_a = tableData == null ? void 0 : tableData[top]) == null ? void 0 : _a[left]) == null ? void 0 : _b.left) || 0;
|
36396
|
+
tableIndexBoundary.right = ((_d = (_c = tableData == null ? void 0 : tableData[bottom]) == null ? void 0 : _c[right]) == null ? void 0 : _d.right) || 0;
|
36397
|
+
tableIndexBoundary.bottom = ((_f = (_e = tableData == null ? void 0 : tableData[bottom]) == null ? void 0 : _e[right]) == null ? void 0 : _f.bottom) || 0;
|
36398
|
+
tableIndexBoundary.top = ((_h = (_g = tableData == null ? void 0 : tableData[top]) == null ? void 0 : _g[left]) == null ? void 0 : _h.top) || 0;
|
36399
|
+
return tableIndexBoundary;
|
36400
|
+
};
|
36401
|
+
const getMaxTdCount = (tableData) => {
|
36402
|
+
let tdCount = 1;
|
36403
|
+
tableData.forEach((tr) => {
|
36404
|
+
let _tdCount = tr.reduce((count, td) => count + (td.colSpan || 1), 0);
|
36405
|
+
if (_tdCount > tdCount) {
|
36406
|
+
tdCount = _tdCount;
|
36407
|
+
}
|
36408
|
+
});
|
36409
|
+
return tdCount;
|
36410
|
+
};
|
36411
|
+
var styleText$1 = ".easy-email-table-operation-menu{background-color:#fff;box-shadow:0 2px 8px #00000026;font-size:14px;z-index:100;overflow:hidden;border-radius:4px;padding:4px 0}.easy-email-table-operation-menu .easy-email-table-operation-menu-dividing{height:1px;background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-color-picker{display:flex;align-items:center;flex-wrap:wrap;padding:0 16px 10px;background-color:#fff;overflow:hidden}.easy-email-table-operation-menu .easy-email-table-operation-color-picker .easy-email-table-operation-color-picker-item{width:20px;height:20px;border:1px solid #595959;margin-right:5px;margin-bottom:5px;cursor:pointer}.easy-email-table-operation-menu .easy-email-table-operation-menu-item{display:flex;align-items:center;padding:10px 16px;line-height:18px;background-color:#fff;cursor:pointer;color:#595959;overflow:hidden;text-overflow:ellipsis}.easy-email-table-operation-menu .easy-email-table-operation-menu-item:hover{background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-menu-item .easy-email-table-operation-menu-icon{margin-right:8px;height:20px;width:20px;font-size:0}\n";
|
36412
|
+
const MENU_CONFIG = {
|
36413
|
+
insertColumnRight: {
|
36414
|
+
text: "Insert column right",
|
36415
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M73.142857 336.64h526.628572v43.885714H73.142857zM73.142857 643.657143h526.628572v43.885714H73.142857zM336.457143 117.028571h43.885714v789.942858h-43.885714zM204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.84 131.84 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.771429 87.771429 0 0 0 87.771429 87.771429h614.4a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM819.2 73.142857h-219.428571v877.714286h219.428571a131.657143 131.657143 0 0 0 131.657143-131.657143V204.8A131.84 131.84 0 0 0 819.2 73.142857z m44.068571 460.982857h-65.828571v65.828572H753.371429v-65.828572h-65.828572V490.057143h65.828572v-65.828572h44.068571v65.828572h65.828571z" /></svg>',
|
36416
|
+
handler() {
|
36417
|
+
var _a;
|
36418
|
+
const _this = this;
|
36419
|
+
const right = _this.tableIndexBoundary.right;
|
36420
|
+
_this.tableData.forEach((tr) => {
|
36421
|
+
if (right === _this.maxTdCount - 1) {
|
36422
|
+
tr.push({ content: "-" });
|
36423
|
+
return;
|
36424
|
+
}
|
36425
|
+
if (tr.length === 0) {
|
36426
|
+
return tr.push({ content: "-" });
|
36427
|
+
}
|
36428
|
+
for (let index2 = 0; index2 < tr.length; index2++) {
|
36429
|
+
const tdLeft = tr[index2].left || 0;
|
36430
|
+
const tdRight = tr[index2].right || 0;
|
36431
|
+
if (tdRight === right) {
|
36432
|
+
tr.splice(index2 + 1, 0, { content: "-" });
|
36433
|
+
break;
|
36434
|
+
}
|
36435
|
+
if (tdLeft <= right && tdRight > right && tr[index2].colSpan) {
|
36436
|
+
tr[index2].colSpan = (tr[index2].colSpan || 1) + 1;
|
36437
|
+
break;
|
36438
|
+
}
|
36439
|
+
if (tdLeft > right && tdLeft - 1 === right) {
|
36440
|
+
tr.splice(index2, 0, { content: "-" });
|
36441
|
+
break;
|
36442
|
+
}
|
36443
|
+
if (tdLeft > right) {
|
36444
|
+
break;
|
36445
|
+
}
|
36446
|
+
}
|
36447
|
+
});
|
36448
|
+
(_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
|
36449
|
+
}
|
36450
|
+
},
|
36451
|
+
insertColumnLeft: {
|
36452
|
+
text: "Insert column left",
|
36453
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M380.342857 336.457143h526.811429v43.885714H380.342857z m0 307.2h526.811429v43.885714H380.342857zM643.657143 117.028571h43.885714v789.942858h-43.885714zM204.8 73.142857h614.582857A131.474286 131.474286 0 0 1 950.857143 204.8v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.657143 131.657143 0 0 1 204.8 73.142857z m0 43.885714a87.588571 87.588571 0 0 0-87.588571 87.771429v614.4a87.588571 87.588571 0 0 0 87.588571 87.771429h614.582857a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM204.8 73.142857A131.657143 131.657143 0 0 0 73.142857 204.8v614.4a131.657143 131.657143 0 0 0 131.657143 131.657143h219.428571V73.142857z m131.84 460.8h-65.828571v65.828572h-43.885715v-65.828572h-65.828571v-43.885714h65.828571v-65.828572h43.885715v65.828572h65.828571z" /></svg>',
|
36454
|
+
handler() {
|
36455
|
+
var _a;
|
36456
|
+
const _this = this;
|
36457
|
+
const left = _this.tableIndexBoundary.left;
|
36458
|
+
_this.tableData.forEach((tr) => {
|
36459
|
+
if (left === 0) {
|
36460
|
+
tr.unshift({ content: "-" });
|
36461
|
+
return;
|
36462
|
+
}
|
36463
|
+
if (tr.length === 0) {
|
36464
|
+
return tr.push({ content: "-" });
|
36465
|
+
}
|
36466
|
+
for (let index2 = 0; index2 < tr.length; index2++) {
|
36467
|
+
const tdLeft = tr[index2].left || 0;
|
36468
|
+
const tdRight = tr[index2].right || 0;
|
36469
|
+
if (tdLeft === left) {
|
36470
|
+
tr.splice(index2, 0, { content: "-" });
|
36471
|
+
break;
|
36472
|
+
}
|
36473
|
+
if (tdLeft < left && tdRight >= left && tr[index2].colSpan) {
|
36474
|
+
tr[index2].colSpan = (tr[index2].colSpan || 1) + 1;
|
36475
|
+
break;
|
36476
|
+
}
|
36477
|
+
if (tdLeft > left && (!tr[index2 - 1] || (tr[index2 - 1].right || 0) + 1 === left)) {
|
36478
|
+
tr.splice(index2, 0, { content: "-" });
|
36479
|
+
break;
|
36480
|
+
}
|
36481
|
+
if (tdLeft > left) {
|
36482
|
+
break;
|
36483
|
+
}
|
36484
|
+
}
|
36485
|
+
});
|
36486
|
+
(_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
|
36487
|
+
}
|
36488
|
+
},
|
36489
|
+
insertRowUp: {
|
36490
|
+
text: "Insert row up",
|
36491
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M73.142857 599.771429h877.714286v43.885714H73.142857zM336.457143 380.342857h43.885714v526.628572h-43.885714z m307.2 0h43.885714v526.628572h-43.885714zM204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.657143 131.657143 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.588571 87.588571 0 0 0 87.771429 87.771429h614.4a87.588571 87.588571 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM819.2 73.142857H204.8A131.657143 131.657143 0 0 0 73.142857 204.8v219.428571h877.714286v-219.428571A131.657143 131.657143 0 0 0 819.2 73.142857z m-219.428571 197.485714h-65.828572v65.828572h-43.885714v-65.828572h-65.828572v-43.885714h65.828572V160.914286h43.885714v65.828571h65.828572z" /></svg>',
|
36492
|
+
handler() {
|
36493
|
+
const _this = this;
|
36494
|
+
const top = _this.tableIndexBoundary.top;
|
36495
|
+
let maxTdCount = _this.maxTdCount;
|
36496
|
+
if (_this.tableData[top].length < maxTdCount) {
|
36497
|
+
for (let index2 = top - 1; index2 > -1; index2--) {
|
36498
|
+
const tr = _this.tableData[index2];
|
36499
|
+
tr.forEach((td, _index) => {
|
36500
|
+
if (td.bottom && td.bottom >= top) {
|
36501
|
+
td.rowSpan = (td.rowSpan || 1) + 1;
|
36502
|
+
maxTdCount -= td.colSpan || 1;
|
36503
|
+
}
|
36504
|
+
});
|
36505
|
+
if (tr.length === maxTdCount) {
|
36506
|
+
break;
|
36507
|
+
}
|
36508
|
+
}
|
36509
|
+
}
|
36510
|
+
_this.addRow(top, maxTdCount);
|
36511
|
+
}
|
36512
|
+
},
|
36513
|
+
insertRowDown: {
|
36514
|
+
text: "Insert row down",
|
36515
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.84 131.84 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.771429 87.771429 0 0 0 87.771429 87.771429h614.4a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM73.142857 336.457143h877.714286v44.068571H73.142857zM336.64 117.028571h43.885714v526.628572h-43.885714z m307.017143 0h44.068571v526.628572H643.657143zM73.142857 599.771429v219.428571a131.657143 131.657143 0 0 0 131.657143 131.657143h614.4a131.657143 131.657143 0 0 0 131.657143-131.657143v-219.428571z m526.628572 197.485714h-65.645715v65.828571H490.057143v-65.828571h-65.828572v-43.885714h65.828572v-65.828572h44.068571v65.828572h65.645715z" /></svg>',
|
36516
|
+
handler() {
|
36517
|
+
const _this = this;
|
36518
|
+
let addCount = _this.maxTdCount;
|
36519
|
+
const bottom = _this.tableIndexBoundary.bottom;
|
36520
|
+
if (_this.tableData[bottom].length < _this.maxTdCount) {
|
36521
|
+
for (let index2 = bottom - 1; index2 > -1; index2--) {
|
36522
|
+
const tr = _this.tableData[index2];
|
36523
|
+
if (tr.length === _this.maxTdCount) {
|
36524
|
+
break;
|
36525
|
+
}
|
36526
|
+
tr.forEach((td, _index) => {
|
36527
|
+
if (td.bottom && td.bottom > bottom) {
|
36528
|
+
td.rowSpan = (td.rowSpan || 1) + 1;
|
36529
|
+
addCount -= td.colSpan || 1;
|
36530
|
+
}
|
36531
|
+
});
|
36532
|
+
}
|
36533
|
+
}
|
36534
|
+
_this.tableData[bottom].forEach((e) => {
|
36535
|
+
if (e.rowSpan && e.rowSpan > 1) {
|
36536
|
+
e.rowSpan += 1;
|
36537
|
+
addCount -= e.colSpan || 1;
|
36538
|
+
}
|
36539
|
+
});
|
36540
|
+
_this.addRow(bottom + 1, addCount);
|
36541
|
+
}
|
36542
|
+
},
|
36543
|
+
mergeCells: {
|
36544
|
+
text: "Merge selected cells",
|
36545
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.99596 99.038384c-25.470707-25.6-60.121212-39.822222-96.323233-39.822222H194.19798c-36.072727 0-70.723232 14.351515-96.323233 39.822222-25.6 25.6-39.822222 60.121212-39.822222 96.323232v635.474748c0 36.072727 14.351515 70.723232 39.822222 96.323232C123.474747 952.759596 158.125253 967.111111 194.19798 967.111111h635.474747c36.072727 0 70.723232-14.351515 96.323233-39.951515 25.6-25.6 39.951515-60.121212 39.951515-96.323232V195.361616c0-36.072727-14.351515-70.723232-39.951515-96.323232z m-277.850505 5.559596v226.909091H375.725253V104.59798h272.420202zM103.434343 195.361616c0-24.048485 9.567677-47.191919 26.634344-64.129293 17.066667-17.066667 40.080808-26.634343 64.129293-26.634343h136.145454v226.909091H103.434343V195.361616z m90.763637 726.367677c-24.048485 0-47.191919-9.567677-64.129293-26.634344-17.066667-17.066667-26.634343-40.080808-26.634344-64.129292V649.309091h226.909091v272.420202H194.19798z m181.527273 0V649.309091h272.290909v272.420202H375.725253z m544.711111-90.892929c0 24.048485-9.567677 47.191919-26.634344 64.129293-17.066667 17.066667-40.080808 26.634343-64.129293 26.634343H693.527273V649.309091h226.909091v181.527273zM693.527273 331.507071V104.59798h136.145454c24.048485 0 47.191919 9.567677 64.129293 26.634343 17.066667 17.066667 26.634343 40.080808 26.634344 64.129293v136.145455H693.527273z" /></svg>',
|
36546
|
+
handler() {
|
36547
|
+
var _a;
|
36548
|
+
const _this = this;
|
36549
|
+
const { top, left, bottom, right } = _this.tableIndexBoundary;
|
36550
|
+
const leftTopItem = _this.tableData[top].find((e) => e.left === left);
|
36551
|
+
leftTopItem.rowSpan = bottom - top + 1;
|
36552
|
+
leftTopItem.colSpan = right - left + 1;
|
36553
|
+
_this.tableData.forEach((tr, trIndex) => {
|
36554
|
+
if (trIndex >= top && trIndex <= bottom) {
|
36555
|
+
if (bottom > top && trIndex > top && trIndex <= bottom) {
|
36556
|
+
leftTopItem.content += "<br />";
|
36557
|
+
}
|
36558
|
+
const deletedIndex = [];
|
36559
|
+
tr.forEach((td, tdIndex) => {
|
36560
|
+
if (top === trIndex && left === td.left) {
|
36561
|
+
return;
|
36562
|
+
}
|
36563
|
+
if (td.left >= left && td.right <= right) {
|
36564
|
+
leftTopItem.content += " " + td.content;
|
36565
|
+
deletedIndex.push(tdIndex);
|
36566
|
+
}
|
36567
|
+
});
|
36568
|
+
if (deletedIndex.length > 0) {
|
36569
|
+
tr.splice(deletedIndex[0], deletedIndex[deletedIndex.length - 1] - deletedIndex[0] + 1);
|
36570
|
+
}
|
36571
|
+
}
|
36572
|
+
});
|
36573
|
+
(_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
|
36574
|
+
}
|
36575
|
+
},
|
36576
|
+
deleteColumn: {
|
36577
|
+
text: "Delete selected columns",
|
36578
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.996 99.038c-25.47-25.6-60.121-39.822-96.323-39.822H194.198c-75.12 0.13-136.016 61.026-136.145 136.146v635.345c0 36.073 14.351 70.723 39.822 96.323 25.6 25.73 60.25 40.081 96.323 40.081h635.475c36.072 0 70.723-14.351 96.323-39.951 25.6-25.6 39.951-60.122 39.951-96.324V195.362c0-36.073-14.351-70.724-39.951-96.324z m-365.77 494.287L512 545.228l-48.226 48.097-32.194-31.935 48.355-48.226-48.226-48.097 32.194-32.194L512 480.97l48.097-48.097 32.194 32.194-48.097 48.097 48.226 48.226-32.194 31.935zM103.434 195.362c0-24.049 9.568-47.192 26.635-64.13 17.066-17.066 40.08-26.634 64.129-26.634h136.145v226.91H103.434V195.361z m0 181.656h226.91V649.31h-226.91V377.02z m90.764 544.84c-24.049 0-47.192-9.567-64.13-26.634-17.066-17.066-26.634-40.08-26.634-64.258V694.69h226.91v227.168H194.197z m726.238-90.763c0 24.048-9.438 47.192-26.505 64.259-17.066 17.066-40.21 26.634-64.258 26.505H693.527V694.69h226.91v136.404z m0-181.786H693.527V377.02h226.91v272.29zM693.527 331.507V104.598h136.146c24.048 0 47.192 9.438 64.258 26.505 17.067 17.067 26.635 40.21 26.505 64.259v136.145H693.527z" /></svg>',
|
36579
|
+
handler() {
|
36580
|
+
var _a;
|
36581
|
+
const _this = this;
|
36582
|
+
const { left, right } = _this.tableIndexBoundary;
|
36583
|
+
_this.tableData.forEach((tr) => {
|
36584
|
+
const deleteIds = [];
|
36585
|
+
for (let index2 = 0; index2 < tr.length; index2++) {
|
36586
|
+
const td = tr[index2];
|
36587
|
+
const tdLeft = tr[index2].left || 0;
|
36588
|
+
const tdRight = tr[index2].right || 0;
|
36589
|
+
const colSpan = td.colSpan || 1;
|
36590
|
+
if (tdLeft > right) {
|
36591
|
+
break;
|
36592
|
+
}
|
36593
|
+
if (tdLeft >= left && tdRight <= right) {
|
36594
|
+
deleteIds.push(index2);
|
36595
|
+
continue;
|
36596
|
+
}
|
36597
|
+
if (tdLeft <= left && tdRight >= right) {
|
36598
|
+
td.colSpan = colSpan - (right - left) - 1;
|
36599
|
+
continue;
|
36600
|
+
}
|
36601
|
+
if (tdLeft > left && tdRight >= right) {
|
36602
|
+
td.colSpan = colSpan - (right - tdLeft) - 1;
|
36603
|
+
continue;
|
36604
|
+
}
|
36605
|
+
if (tdLeft < left && tdRight >= left) {
|
36606
|
+
td.colSpan = colSpan - (tdRight - left) - 1;
|
36607
|
+
continue;
|
36608
|
+
}
|
36609
|
+
}
|
36610
|
+
if (deleteIds.length) {
|
36611
|
+
tr.splice(deleteIds[0], deleteIds[deleteIds.length - 1] - deleteIds[0] + 1);
|
36612
|
+
}
|
36613
|
+
});
|
36614
|
+
(_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
|
36615
|
+
}
|
36616
|
+
},
|
36617
|
+
deleteRow: {
|
36618
|
+
text: "Delete selected rows",
|
36619
|
+
icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.99596 99.038384c-25.470707-25.6-60.121212-39.822222-96.323233-39.822222H194.19798c-36.072727 0-70.723232 14.351515-96.323233 39.822222-25.6 25.6-39.822222 60.121212-39.822222 96.323232v635.474748c0 36.072727 14.351515 70.723232 39.822222 96.323232C123.474747 952.759596 158.125253 967.111111 194.19798 967.111111h635.474747c36.072727 0 70.723232-14.351515 96.323233-39.951515 25.6-25.6 39.951515-60.121212 39.951515-96.323232V195.361616c0-36.072727-14.351515-70.723232-39.951515-96.323232z m-550.270707 5.559596h272.290909v227.167677H375.725253V104.59798z m56.242424 360.468687l31.935353-32.19394 48.09697 48.226263 48.09697-48.226263 32.193939 32.19394-48.09697 48.096969 48.226263 48.226263-32.193939 31.935354-48.226263-48.09697-48.226263 48.09697-31.935353-31.935354 48.226262-48.226263-48.096969-48.096969zM103.434343 195.361616c0-24.048485 9.567677-47.191919 26.634344-64.129293 17.066667-17.066667 40.080808-26.634343 64.129293-26.634343h136.145454v227.167677H103.434343V195.361616z m817.002021 635.733333c0 24.048485-9.567677 47.191919-26.634344 64.258586-17.066667 17.066667-40.080808 26.634343-64.129293 26.634344H194.19798c-24.048485 0-47.191919-9.567677-64.258586-26.634344C112.872727 878.157576 103.434343 855.014141 103.434343 830.836364V694.690909h226.909091v226.909091h45.381819V694.690909h272.290909v226.909091h45.381818V694.690909h226.909091v136.40404z m0-499.329292H693.527273V104.59798h136.145454c24.048485 0 47.191919 9.567677 64.129293 26.634343 17.066667 17.066667 26.634343 40.080808 26.634344 64.129293v136.404041z" /></svg>',
|
36620
|
+
handler() {
|
36621
|
+
var _a;
|
36622
|
+
const _this = this;
|
36623
|
+
const { top, bottom } = _this.tableIndexBoundary;
|
36624
|
+
const deleteCount = bottom - top + 1;
|
36625
|
+
for (let index2 = bottom - 1; index2 > -1; index2--) {
|
36626
|
+
const tr = _this.tableData[index2];
|
36627
|
+
tr.forEach((td, _index) => {
|
36628
|
+
if (td.bottom && td.bottom >= top) {
|
36629
|
+
const deleteRowSpan = td.bottom >= bottom ? deleteCount : td.bottom - top + 1;
|
36630
|
+
td.rowSpan = (td.rowSpan || 1) - deleteRowSpan;
|
36631
|
+
}
|
36632
|
+
});
|
36633
|
+
}
|
36634
|
+
for (let index2 = top; index2 <= bottom; index2++) {
|
36635
|
+
const tr = _this.tableData[index2];
|
36636
|
+
tr.forEach((td, _index) => {
|
36637
|
+
const rowSpan = td.rowSpan || 1;
|
36638
|
+
if (rowSpan - 1 + top > bottom) {
|
36639
|
+
const nextRowCell = __spreadProps(__spreadValues({}, td), { rowSpan: rowSpan - (bottom - top + 1) });
|
36640
|
+
const nextRow = _this.tableData[bottom + 1];
|
36641
|
+
if (nextRow) {
|
36642
|
+
const index22 = Array.from({ length: _this.maxTdCount }).findIndex((_, index3) => index3 === nextRowCell.left);
|
36643
|
+
if (index22 > -1) {
|
36644
|
+
nextRow.splice(index22, 0, nextRowCell);
|
36645
|
+
}
|
36646
|
+
}
|
36647
|
+
}
|
36648
|
+
});
|
36649
|
+
}
|
36650
|
+
_this.tableData.splice(_this.tableIndexBoundary.top, deleteCount);
|
36651
|
+
(_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
|
36652
|
+
}
|
36653
|
+
}
|
36654
|
+
};
|
36655
|
+
const MENU_HEIGHT = 305;
|
36656
|
+
const MENU_WIDTH = 200;
|
36657
|
+
class TableOperationMenu {
|
36658
|
+
constructor() {
|
36659
|
+
__publicField(this, "menuItems", MENU_CONFIG);
|
36660
|
+
__publicField(this, "domNode");
|
36661
|
+
__publicField(this, "styleDom");
|
36662
|
+
__publicField(this, "visible", false);
|
36663
|
+
__publicField(this, "changeTableData");
|
36664
|
+
__publicField(this, "tableData");
|
36665
|
+
__publicField(this, "tableIndexBoundary");
|
36666
|
+
__publicField(this, "maxTdCount", 0);
|
36667
|
+
this.menuInitial();
|
36668
|
+
this.mount();
|
36669
|
+
}
|
36670
|
+
mount() {
|
36671
|
+
if (this.domNode) {
|
36672
|
+
document.body.appendChild(this.domNode);
|
36673
|
+
}
|
36674
|
+
document.body.addEventListener("click", this.hide.bind(this));
|
36675
|
+
}
|
36676
|
+
destroy() {
|
36677
|
+
var _a;
|
36678
|
+
(_a = this.domNode) == null ? void 0 : _a.remove();
|
36679
|
+
if (this.styleDom) {
|
36680
|
+
document.head.removeChild(this.styleDom);
|
36681
|
+
}
|
36682
|
+
document.body.removeEventListener("click", this.hide.bind(this));
|
36683
|
+
}
|
36684
|
+
hide() {
|
36685
|
+
if (!this.visible) {
|
36686
|
+
return;
|
36687
|
+
}
|
36688
|
+
this.visible = false;
|
36689
|
+
setStyle(this.domNode, {
|
36690
|
+
display: "none"
|
36691
|
+
});
|
36692
|
+
}
|
36693
|
+
addRow(insertIndex, colCount) {
|
36694
|
+
var _a;
|
36695
|
+
const newRow = Array.from({ length: colCount }).map(() => ({ content: "-" }));
|
36696
|
+
this.tableData.splice(insertIndex, 0, newRow);
|
36697
|
+
(_a = this.changeTableData) == null ? void 0 : _a.call(this, this.tableData);
|
36698
|
+
}
|
36699
|
+
setTableData(tableData) {
|
36700
|
+
this.tableData = tableData || [];
|
36701
|
+
this.maxTdCount = getMaxTdCount(this.tableData);
|
36702
|
+
}
|
36703
|
+
setTableIndexBoundary(tableIndexBoundary) {
|
36704
|
+
this.tableIndexBoundary = getCorrectTableIndexBoundary(tableIndexBoundary, this.tableData);
|
36705
|
+
}
|
36706
|
+
showMenu({ x, y }) {
|
36707
|
+
this.visible = true;
|
36708
|
+
const maxHeight = window.innerHeight;
|
36709
|
+
const maxWidth = window.innerWidth;
|
36710
|
+
if (maxWidth - MENU_WIDTH < x) {
|
36711
|
+
x -= MENU_WIDTH;
|
36712
|
+
}
|
36713
|
+
if (maxHeight - MENU_HEIGHT < y) {
|
36714
|
+
y -= MENU_HEIGHT;
|
36715
|
+
}
|
36716
|
+
setStyle(this.domNode, {
|
36717
|
+
display: "block",
|
36718
|
+
position: "absolute",
|
36719
|
+
left: `${x}px`,
|
36720
|
+
top: `${y}px`,
|
36721
|
+
"min-height": "150px",
|
36722
|
+
width: `${MENU_WIDTH}px`,
|
36723
|
+
Height: `${MENU_HEIGHT}px`
|
36724
|
+
});
|
36725
|
+
}
|
36726
|
+
menuInitial() {
|
36727
|
+
this.styleDom = document.createElement("style");
|
36728
|
+
this.styleDom.innerText = styleText$1;
|
36729
|
+
document.head.appendChild(this.styleDom);
|
36730
|
+
this.domNode = document.createElement("div");
|
36731
|
+
this.domNode.classList.add("easy-email-table-operation-menu");
|
36732
|
+
setStyle(this.domNode, { display: "none" });
|
36733
|
+
for (let name2 in this.menuItems) {
|
36734
|
+
const itemOption = this.menuItems[name2];
|
36735
|
+
if (itemOption) {
|
36736
|
+
this.domNode.appendChild(this.menuItemCreator(Object.assign({}, itemOption)));
|
36737
|
+
if (["insertRowDown"].indexOf(name2) > -1) {
|
36738
|
+
this.domNode.appendChild(dividingCreator());
|
36739
|
+
}
|
36740
|
+
}
|
36741
|
+
}
|
36742
|
+
function dividingCreator() {
|
36743
|
+
const dividing = document.createElement("div");
|
36744
|
+
dividing.classList.add("easy-email-table-operation-menu-dividing");
|
36745
|
+
return dividing;
|
36746
|
+
}
|
36747
|
+
}
|
36748
|
+
menuItemCreator({ text, icon, handler }) {
|
36749
|
+
const node = document.createElement("div");
|
36750
|
+
node.classList.add("easy-email-table-operation-menu-item");
|
36751
|
+
const iconSpan = document.createElement("span");
|
36752
|
+
iconSpan.classList.add("easy-email-table-operation-menu-icon");
|
36753
|
+
iconSpan.innerHTML = icon;
|
36754
|
+
const textSpan = document.createElement("span");
|
36755
|
+
textSpan.classList.add("easy-email-table-operation-menu-text");
|
36756
|
+
textSpan.innerText = text;
|
36757
|
+
node.appendChild(iconSpan);
|
36758
|
+
node.appendChild(textSpan);
|
36759
|
+
node.addEventListener("click", handler.bind(this), false);
|
36760
|
+
return node;
|
36761
|
+
}
|
36762
|
+
}
|
36763
|
+
class TableColumnTool {
|
36764
|
+
constructor(borderTool, root2) {
|
36765
|
+
__publicField(this, "borderTool", {});
|
36766
|
+
__publicField(this, "dragging", false);
|
36767
|
+
__publicField(this, "showBorderTool", false);
|
36768
|
+
__publicField(this, "startRect", {});
|
36769
|
+
__publicField(this, "startTdTop", 0);
|
36770
|
+
__publicField(this, "startTdLeft", 0);
|
36771
|
+
__publicField(this, "endTdTop", 0);
|
36772
|
+
__publicField(this, "endTdLeft", 0);
|
36773
|
+
__publicField(this, "width", 0);
|
36774
|
+
__publicField(this, "height", 0);
|
36775
|
+
__publicField(this, "selectedLeftTopCell");
|
36776
|
+
__publicField(this, "selectedBottomRightCell");
|
36777
|
+
__publicField(this, "startDom");
|
36778
|
+
__publicField(this, "endDom");
|
36779
|
+
__publicField(this, "hoveringTable", null);
|
36780
|
+
__publicField(this, "root");
|
36781
|
+
__publicField(this, "tableMenu");
|
36782
|
+
__publicField(this, "changeTableData");
|
36783
|
+
__publicField(this, "tableData", []);
|
36784
|
+
__publicField(this, "hideBorder", (e) => {
|
36785
|
+
if (e.target.id === "VisualEditorEditMode") {
|
36786
|
+
return;
|
36787
|
+
}
|
36788
|
+
this.visibleBorder(false);
|
36789
|
+
});
|
36790
|
+
__publicField(this, "hideBorderByKeyDown", () => {
|
36791
|
+
this.visibleBorder(false);
|
36792
|
+
});
|
36793
|
+
__publicField(this, "hideTableMenu", (e) => {
|
36794
|
+
var _a;
|
36795
|
+
if ((e == null ? void 0 : e.target.id) === "VisualEditorEditMode") {
|
36796
|
+
return;
|
36797
|
+
}
|
36798
|
+
(_a = this.tableMenu) == null ? void 0 : _a.hide();
|
36799
|
+
});
|
36800
|
+
__publicField(this, "visibleBorder", (show = true) => {
|
36801
|
+
if (this.showBorderTool === show) {
|
36802
|
+
return;
|
36803
|
+
}
|
36804
|
+
if (show) {
|
36805
|
+
setStyle(this.borderTool.top.parentElement, { display: "block" });
|
36806
|
+
} else {
|
36807
|
+
setStyle(this.borderTool.top.parentElement, { display: "none" });
|
36808
|
+
}
|
36809
|
+
this.showBorderTool = show;
|
36810
|
+
});
|
36811
|
+
__publicField(this, "renderBorder", () => {
|
36812
|
+
this.visibleBorder(true);
|
36813
|
+
const result = getBoundaryRectAndElement(this.startDom, this.endDom);
|
36814
|
+
if (!result) {
|
36815
|
+
return;
|
36816
|
+
}
|
36817
|
+
const { left, top, width, height } = result.boundary;
|
36818
|
+
this.selectedLeftTopCell = result.leftTopCell;
|
36819
|
+
this.selectedBottomRightCell = result.bottomRightCell;
|
36820
|
+
setStyle(this.borderTool.top, {
|
36821
|
+
"background-color": "rgb(65, 68, 77)",
|
36822
|
+
left: `${left}px`,
|
36823
|
+
top: `${top}px`,
|
36824
|
+
width: `${Math.abs(width)}px`,
|
36825
|
+
height: "2px",
|
36826
|
+
position: "absolute",
|
36827
|
+
"z-index": 10
|
36828
|
+
});
|
36829
|
+
setStyle(this.borderTool.bottom, {
|
36830
|
+
"background-color": "rgb(65, 68, 77)",
|
36831
|
+
left: `${left}px`,
|
36832
|
+
top: `${top + height}px`,
|
36833
|
+
width: `${Math.abs(width)}px`,
|
36834
|
+
height: "2px",
|
36835
|
+
position: "absolute",
|
36836
|
+
"z-index": 10
|
36837
|
+
});
|
36838
|
+
setStyle(this.borderTool.left, {
|
36839
|
+
"background-color": "rgb(65, 68, 77)",
|
36840
|
+
left: `${left}px`,
|
36841
|
+
top: `${top}px`,
|
36842
|
+
width: "2px",
|
36843
|
+
height: `${Math.abs(height)}px`,
|
36844
|
+
position: "absolute",
|
36845
|
+
"z-index": 10
|
36846
|
+
});
|
36847
|
+
setStyle(this.borderTool.right, {
|
36848
|
+
"background-color": "rgb(65, 68, 77)",
|
36849
|
+
left: `${left + width}px`,
|
36850
|
+
top: `${top}px`,
|
36851
|
+
width: "2px",
|
36852
|
+
height: `${Math.abs(height)}px`,
|
36853
|
+
position: "absolute",
|
36854
|
+
"z-index": 10
|
36855
|
+
});
|
36856
|
+
});
|
36857
|
+
__publicField(this, "handleContextmenu", (event2) => {
|
36858
|
+
if (this.showBorderTool) {
|
36859
|
+
const selectedBoundary = getElementsBoundary(this.selectedLeftTopCell, this.selectedBottomRightCell);
|
36860
|
+
if (checkEventInBoundingRect(selectedBoundary, event2)) {
|
36861
|
+
event2.preventDefault();
|
36862
|
+
return;
|
36863
|
+
}
|
36864
|
+
}
|
36865
|
+
this.hideTableMenu();
|
36866
|
+
});
|
36867
|
+
__publicField(this, "handleDrag", (e) => {
|
36868
|
+
e.preventDefault();
|
36869
|
+
if (this.dragging) {
|
36870
|
+
let target2 = e.target;
|
36871
|
+
while (target2 && target2.parentNode) {
|
36872
|
+
if (target2.nodeName === "TD" && target2.getAttribute("data-content_editable-type") === "rich_text") {
|
36873
|
+
const hoveringTable = getCurrentTable(target2);
|
36874
|
+
if (this.endDom === target2 || this.hoveringTable !== hoveringTable) {
|
36875
|
+
return;
|
36876
|
+
}
|
36877
|
+
this.endDom = target2;
|
36878
|
+
this.renderBorder();
|
36879
|
+
return;
|
36880
|
+
}
|
36881
|
+
target2 = target2.parentNode;
|
36882
|
+
}
|
36883
|
+
}
|
36884
|
+
});
|
36885
|
+
__publicField(this, "handleMouseup", (e) => {
|
36886
|
+
var _a, _b;
|
36887
|
+
e.preventDefault();
|
36888
|
+
if (this.dragging) {
|
36889
|
+
this.dragging = false;
|
36890
|
+
(_a = this.root) == null ? void 0 : _a.removeEventListener("mousemove", this.handleDrag);
|
36891
|
+
(_b = this.root) == null ? void 0 : _b.removeEventListener("mouseup", this.handleMouseup);
|
36892
|
+
}
|
36893
|
+
});
|
36894
|
+
if (!borderTool || !root2) {
|
36895
|
+
return;
|
36896
|
+
}
|
36897
|
+
this.borderTool = borderTool;
|
36898
|
+
this.root = root2;
|
36899
|
+
this.initTool();
|
36900
|
+
}
|
36901
|
+
initTool() {
|
36902
|
+
var _a, _b;
|
36903
|
+
(_a = this.root) == null ? void 0 : _a.addEventListener("contextmenu", this.handleContextmenu);
|
36904
|
+
(_b = this.root) == null ? void 0 : _b.addEventListener("mousedown", this.handleMousedown.bind(this));
|
36905
|
+
document.body.addEventListener("click", this.hideBorder, false);
|
36906
|
+
document.body.addEventListener("contextmenu", this.hideTableMenu, false);
|
36907
|
+
document.addEventListener("keydown", this.hideBorderByKeyDown);
|
36908
|
+
}
|
36909
|
+
destroy() {
|
36910
|
+
var _a, _b;
|
36911
|
+
(_a = this.root) == null ? void 0 : _a.removeEventListener("mousedown", this.handleMousedown.bind(this));
|
36912
|
+
(_b = this.root) == null ? void 0 : _b.removeEventListener("contextmenu", this.handleContextmenu);
|
36913
|
+
document.body.removeEventListener("click", this.hideBorder, false);
|
36914
|
+
document.body.removeEventListener("contextmenu", this.hideTableMenu, false);
|
36915
|
+
document.removeEventListener("keydown", this.hideBorderByKeyDown);
|
36916
|
+
}
|
36917
|
+
handleMousedown(event2) {
|
36918
|
+
var _a, _b;
|
36919
|
+
let target2 = event2.target;
|
36920
|
+
if (event2.button == 0) {
|
36921
|
+
while (target2 && target2.parentNode) {
|
36922
|
+
if (target2.nodeName === "TD" && target2.getAttribute("data-content_editable-type") === "rich_text") {
|
36923
|
+
(_a = this.root) == null ? void 0 : _a.addEventListener("mousemove", this.handleDrag);
|
36924
|
+
(_b = this.root) == null ? void 0 : _b.addEventListener("mouseup", this.handleMouseup);
|
36925
|
+
this.dragging = true;
|
36926
|
+
this.startDom = target2;
|
36927
|
+
this.endDom = target2;
|
36928
|
+
this.hoveringTable = getCurrentTable(target2);
|
36929
|
+
this.renderBorder();
|
36930
|
+
return;
|
36931
|
+
}
|
36932
|
+
target2 = target2.parentNode;
|
36933
|
+
if (["TR", "TABLE", "BODY"].includes(target2.nodeName)) {
|
36934
|
+
this.visibleBorder(false);
|
36935
|
+
return;
|
36936
|
+
}
|
36937
|
+
}
|
36938
|
+
} else if (event2.button == 2) {
|
36939
|
+
if (this.showBorderTool) {
|
36940
|
+
const selectedBoundary = getElementsBoundary(this.selectedLeftTopCell, this.selectedBottomRightCell);
|
36941
|
+
if (checkEventInBoundingRect(selectedBoundary, event2)) {
|
36942
|
+
if (!this.tableMenu) {
|
36943
|
+
this.tableMenu = new TableOperationMenu();
|
36944
|
+
}
|
36945
|
+
this.tableMenu.setTableData(this.tableData);
|
36946
|
+
this.tableMenu.changeTableData = this.changeTableData;
|
36947
|
+
this.tableMenu.setTableIndexBoundary(getTdBoundaryIndex(this.selectedLeftTopCell, this.selectedBottomRightCell));
|
36948
|
+
this.tableMenu.showMenu(event2);
|
36949
|
+
return;
|
36950
|
+
}
|
36951
|
+
}
|
36952
|
+
}
|
36953
|
+
this.visibleBorder(false);
|
36954
|
+
}
|
36955
|
+
}
|
36956
|
+
function TableOperation() {
|
36957
|
+
const shadowRoot = getShadowRoot();
|
36958
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
36959
|
+
const { focusBlock: focusBlock2, change } = useBlock();
|
36960
|
+
const topRef = useRef(null);
|
36961
|
+
const bottomRef = useRef(null);
|
36962
|
+
const leftRef = useRef(null);
|
36963
|
+
const rightRef = useRef(null);
|
36964
|
+
const tool = useRef();
|
36965
|
+
useEffect(() => {
|
36966
|
+
const borderTool = {
|
36967
|
+
top: topRef.current,
|
36968
|
+
bottom: bottomRef.current,
|
36969
|
+
left: leftRef.current,
|
36970
|
+
right: rightRef.current
|
36971
|
+
};
|
36972
|
+
tool.current = new TableColumnTool(borderTool, shadowRoot.querySelector("body"));
|
36973
|
+
return () => {
|
36974
|
+
var _a;
|
36975
|
+
(_a = tool.current) == null ? void 0 : _a.destroy();
|
36976
|
+
};
|
36977
|
+
}, []);
|
36978
|
+
useEffect(() => {
|
36979
|
+
var _a, _b;
|
36980
|
+
if (tool.current) {
|
36981
|
+
tool.current.changeTableData = (data) => {
|
36982
|
+
change(`${focusIdx2}.data.value.tableSource`, lodash.exports.cloneDeep(data));
|
36983
|
+
};
|
36984
|
+
tool.current.tableData = lodash.exports.cloneDeep(((_b = (_a = focusBlock2 == null ? void 0 : focusBlock2.data) == null ? void 0 : _a.value) == null ? void 0 : _b.tableSource) || []);
|
36985
|
+
}
|
36986
|
+
}, [focusIdx2, focusBlock2]);
|
36987
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
|
36988
|
+
ref: topRef
|
36989
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
36990
|
+
ref: bottomRef
|
36991
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
36992
|
+
ref: leftRef
|
36993
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
36994
|
+
ref: rightRef
|
36995
|
+
}))), shadowRoot.querySelector("body")));
|
36996
|
+
}
|
36188
36997
|
function AttributePanel() {
|
36189
36998
|
const { values: values2, focusBlock: focusBlock2 } = useBlock();
|
36190
36999
|
const { initialized } = useEditorContext();
|
@@ -36203,7 +37012,7 @@ function AttributePanel() {
|
|
36203
37012
|
style: { position: "absolute" }
|
36204
37013
|
}, /* @__PURE__ */ React__default.createElement(RichTextField, {
|
36205
37014
|
idx: focusIdx2
|
36206
|
-
})), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
|
37015
|
+
})), /* @__PURE__ */ React__default.createElement(TableOperation, null), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
|
36207
37016
|
.email-block [contentEditable="true"],
|
36208
37017
|
.email-block [contentEditable="true"] * {
|
36209
37018
|
outline: none;
|
@@ -36620,7 +37429,7 @@ function FontSize(props) {
|
|
36620
37429
|
className: "easy-email-extensions-Tools-Popover",
|
36621
37430
|
popupVisible: visible,
|
36622
37431
|
onVisibleChange,
|
36623
|
-
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$
|
37432
|
+
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$2), /* @__PURE__ */ React__default.createElement("div", {
|
36624
37433
|
style: {
|
36625
37434
|
maxWidth: 150,
|
36626
37435
|
maxHeight: 350,
|