@textbus/xnote 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/bundles/index.esm.js +43 -21
- package/bundles/index.js +43 -21
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -108,7 +108,7 @@ const editor = new Editor({
|
|
|
108
108
|
export abstract class Organization {
|
|
109
109
|
abstract getMembers(name?: string): Promise<Member[]>
|
|
110
110
|
|
|
111
|
-
abstract
|
|
111
|
+
abstract atMember(member: Member): void
|
|
112
112
|
}
|
|
113
113
|
```
|
|
114
114
|
然后在编辑器初始化时传入你的实现
|
package/bundles/index.esm.js
CHANGED
|
@@ -691,7 +691,13 @@ const DropdownMenuPortal = withAnnotation({
|
|
|
691
691
|
const documentClientHeight = document.documentElement.clientHeight;
|
|
692
692
|
const bottomDistance = documentClientHeight - triggerRect.bottom;
|
|
693
693
|
const isToTop = bottomDistance < 200 && triggerRect.top > bottomDistance;
|
|
694
|
-
|
|
694
|
+
let left = triggerRect.left - containerRect.left;
|
|
695
|
+
const clientWidth = document.documentElement.clientWidth;
|
|
696
|
+
const menuWidth = menuElement.offsetWidth;
|
|
697
|
+
const maxLeft = clientWidth - menuWidth - 20;
|
|
698
|
+
left = Math.min(maxLeft, left);
|
|
699
|
+
// left = Math.max(left, 20)
|
|
700
|
+
menuElement.style.left = left + 'px';
|
|
695
701
|
if (isToTop) {
|
|
696
702
|
const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
|
|
697
703
|
const height = Math.min(triggerRect.top - 20, maxHeight, 400);
|
|
@@ -5641,30 +5647,41 @@ const InlineToolbar = withAnnotation({
|
|
|
5641
5647
|
const toolbarRef = createRef();
|
|
5642
5648
|
function getTop() {
|
|
5643
5649
|
const docRect = viewDocument.getBoundingClientRect();
|
|
5650
|
+
// const toolbarRect = toolbarRef.current!.getBoundingClientRect()
|
|
5644
5651
|
const toolbarHeight = 36;
|
|
5645
5652
|
// const documentHeight = document.documentElement.clientHeight
|
|
5646
5653
|
let selectionFocusRect = null;
|
|
5647
5654
|
const commonAncestorComponent = selection.commonAncestorComponent;
|
|
5648
5655
|
if (commonAncestorComponent instanceof TableComponent) {
|
|
5649
|
-
const
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5653
|
-
|
|
5656
|
+
const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlots();
|
|
5657
|
+
if (normalizedSlots) {
|
|
5658
|
+
const slots = normalizedSlots.map(item => {
|
|
5659
|
+
return item.cells.filter(i => {
|
|
5660
|
+
return i.visible;
|
|
5661
|
+
}).map(cell => {
|
|
5662
|
+
return cell.raw.slot;
|
|
5663
|
+
});
|
|
5664
|
+
}).flat();
|
|
5665
|
+
const startSlot = slots.at(0);
|
|
5666
|
+
const endSlot = slots.at(-1);
|
|
5667
|
+
const rect = commonAncestorComponent.getSelectedRect();
|
|
5668
|
+
const startRect = adapter.getNativeNodeBySlot(startSlot).getBoundingClientRect();
|
|
5669
|
+
const endEle = adapter.getNativeNodeBySlot(endSlot).getBoundingClientRect();
|
|
5670
|
+
const width = sum(commonAncestorComponent.state.columnsConfig.slice(rect.x1, rect.x2));
|
|
5671
|
+
selectionFocusRect = {
|
|
5672
|
+
left: startRect.left + width / 2,
|
|
5673
|
+
// left: Math.max(startRect.left + width / 2, toolbarRect.width / 2 + 10 - docRect.left),
|
|
5674
|
+
top: startRect.top,
|
|
5675
|
+
height: endEle.bottom - startRect.top,
|
|
5676
|
+
width
|
|
5677
|
+
};
|
|
5678
|
+
}
|
|
5679
|
+
else {
|
|
5680
|
+
selectionFocusRect = bridge.getRect({
|
|
5681
|
+
slot: selection.focusSlot,
|
|
5682
|
+
offset: selection.focusOffset
|
|
5654
5683
|
});
|
|
5655
|
-
}
|
|
5656
|
-
const startSlot = slots.at(0);
|
|
5657
|
-
const endSlot = slots.at(-1);
|
|
5658
|
-
const rect = commonAncestorComponent.getSelectedRect();
|
|
5659
|
-
const startRect = adapter.getNativeNodeBySlot(startSlot).getBoundingClientRect();
|
|
5660
|
-
const endEle = adapter.getNativeNodeBySlot(endSlot).getBoundingClientRect();
|
|
5661
|
-
const width = sum(commonAncestorComponent.state.columnsConfig.slice(rect.x1, rect.x2));
|
|
5662
|
-
selectionFocusRect = {
|
|
5663
|
-
left: startRect.left + width / 2,
|
|
5664
|
-
top: startRect.top,
|
|
5665
|
-
height: endEle.bottom - startRect.top,
|
|
5666
|
-
width
|
|
5667
|
-
};
|
|
5684
|
+
}
|
|
5668
5685
|
}
|
|
5669
5686
|
else {
|
|
5670
5687
|
selectionFocusRect = bridge.getRect({
|
|
@@ -5683,6 +5700,7 @@ const InlineToolbar = withAnnotation({
|
|
|
5683
5700
|
updateViewPosition(draft => {
|
|
5684
5701
|
draft.transitionDuration = .15;
|
|
5685
5702
|
draft.left = centerLeft - docRect.left;
|
|
5703
|
+
// draft.left = Math.max(centerLeft - docRect.left, toolbarRect.width / 2 + 10 - docRect.left)
|
|
5686
5704
|
draft.top = top + 10;
|
|
5687
5705
|
});
|
|
5688
5706
|
return top;
|
|
@@ -6765,8 +6783,10 @@ function SelectionMask(props) {
|
|
|
6765
6783
|
watch(props.component.tableSelection, update);
|
|
6766
6784
|
function update() {
|
|
6767
6785
|
const selection = props.component.tableSelection();
|
|
6786
|
+
const selectedSlots = props.component.getSelectedNormalizedSlots();
|
|
6787
|
+
const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
|
|
6768
6788
|
const state = props.component.state;
|
|
6769
|
-
if (selection) {
|
|
6789
|
+
if (selection && slotCount > 1) {
|
|
6770
6790
|
let topCompensation = 0.5;
|
|
6771
6791
|
let heightCompensation = -1;
|
|
6772
6792
|
if (selection.startRow === 0) {
|
|
@@ -6966,10 +6986,12 @@ const TableComponentView = withAnnotation({
|
|
|
6966
6986
|
}) }, rowMapping.get(row.row)));
|
|
6967
6987
|
}) })] }) }) }) }));
|
|
6968
6988
|
}
|
|
6989
|
+
const selectedSlots = props.component.getSelectedNormalizedSlots();
|
|
6990
|
+
const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
|
|
6969
6991
|
return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
|
|
6970
6992
|
'xnote-table-content',
|
|
6971
6993
|
{
|
|
6972
|
-
'hide-selection': props.component.tableSelection()
|
|
6994
|
+
'hide-selection': props.component.tableSelection() && slotCount > 1
|
|
6973
6995
|
}
|
|
6974
6996
|
], children: [jsx("colgroup", { children: layoutWidth().map(w => {
|
|
6975
6997
|
return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
|
package/bundles/index.js
CHANGED
|
@@ -693,7 +693,13 @@ const DropdownMenuPortal = core.withAnnotation({
|
|
|
693
693
|
const documentClientHeight = document.documentElement.clientHeight;
|
|
694
694
|
const bottomDistance = documentClientHeight - triggerRect.bottom;
|
|
695
695
|
const isToTop = bottomDistance < 200 && triggerRect.top > bottomDistance;
|
|
696
|
-
|
|
696
|
+
let left = triggerRect.left - containerRect.left;
|
|
697
|
+
const clientWidth = document.documentElement.clientWidth;
|
|
698
|
+
const menuWidth = menuElement.offsetWidth;
|
|
699
|
+
const maxLeft = clientWidth - menuWidth - 20;
|
|
700
|
+
left = Math.min(maxLeft, left);
|
|
701
|
+
// left = Math.max(left, 20)
|
|
702
|
+
menuElement.style.left = left + 'px';
|
|
697
703
|
if (isToTop) {
|
|
698
704
|
const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
|
|
699
705
|
const height = Math.min(triggerRect.top - 20, maxHeight, 400);
|
|
@@ -5643,30 +5649,41 @@ const InlineToolbar = core.withAnnotation({
|
|
|
5643
5649
|
const toolbarRef = core.createRef();
|
|
5644
5650
|
function getTop() {
|
|
5645
5651
|
const docRect = viewDocument.getBoundingClientRect();
|
|
5652
|
+
// const toolbarRect = toolbarRef.current!.getBoundingClientRect()
|
|
5646
5653
|
const toolbarHeight = 36;
|
|
5647
5654
|
// const documentHeight = document.documentElement.clientHeight
|
|
5648
5655
|
let selectionFocusRect = null;
|
|
5649
5656
|
const commonAncestorComponent = selection.commonAncestorComponent;
|
|
5650
5657
|
if (commonAncestorComponent instanceof TableComponent) {
|
|
5651
|
-
const
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5658
|
+
const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlots();
|
|
5659
|
+
if (normalizedSlots) {
|
|
5660
|
+
const slots = normalizedSlots.map(item => {
|
|
5661
|
+
return item.cells.filter(i => {
|
|
5662
|
+
return i.visible;
|
|
5663
|
+
}).map(cell => {
|
|
5664
|
+
return cell.raw.slot;
|
|
5665
|
+
});
|
|
5666
|
+
}).flat();
|
|
5667
|
+
const startSlot = slots.at(0);
|
|
5668
|
+
const endSlot = slots.at(-1);
|
|
5669
|
+
const rect = commonAncestorComponent.getSelectedRect();
|
|
5670
|
+
const startRect = adapter.getNativeNodeBySlot(startSlot).getBoundingClientRect();
|
|
5671
|
+
const endEle = adapter.getNativeNodeBySlot(endSlot).getBoundingClientRect();
|
|
5672
|
+
const width = sum(commonAncestorComponent.state.columnsConfig.slice(rect.x1, rect.x2));
|
|
5673
|
+
selectionFocusRect = {
|
|
5674
|
+
left: startRect.left + width / 2,
|
|
5675
|
+
// left: Math.max(startRect.left + width / 2, toolbarRect.width / 2 + 10 - docRect.left),
|
|
5676
|
+
top: startRect.top,
|
|
5677
|
+
height: endEle.bottom - startRect.top,
|
|
5678
|
+
width
|
|
5679
|
+
};
|
|
5680
|
+
}
|
|
5681
|
+
else {
|
|
5682
|
+
selectionFocusRect = bridge.getRect({
|
|
5683
|
+
slot: selection.focusSlot,
|
|
5684
|
+
offset: selection.focusOffset
|
|
5656
5685
|
});
|
|
5657
|
-
}
|
|
5658
|
-
const startSlot = slots.at(0);
|
|
5659
|
-
const endSlot = slots.at(-1);
|
|
5660
|
-
const rect = commonAncestorComponent.getSelectedRect();
|
|
5661
|
-
const startRect = adapter.getNativeNodeBySlot(startSlot).getBoundingClientRect();
|
|
5662
|
-
const endEle = adapter.getNativeNodeBySlot(endSlot).getBoundingClientRect();
|
|
5663
|
-
const width = sum(commonAncestorComponent.state.columnsConfig.slice(rect.x1, rect.x2));
|
|
5664
|
-
selectionFocusRect = {
|
|
5665
|
-
left: startRect.left + width / 2,
|
|
5666
|
-
top: startRect.top,
|
|
5667
|
-
height: endEle.bottom - startRect.top,
|
|
5668
|
-
width
|
|
5669
|
-
};
|
|
5686
|
+
}
|
|
5670
5687
|
}
|
|
5671
5688
|
else {
|
|
5672
5689
|
selectionFocusRect = bridge.getRect({
|
|
@@ -5685,6 +5702,7 @@ const InlineToolbar = core.withAnnotation({
|
|
|
5685
5702
|
updateViewPosition(draft => {
|
|
5686
5703
|
draft.transitionDuration = .15;
|
|
5687
5704
|
draft.left = centerLeft - docRect.left;
|
|
5705
|
+
// draft.left = Math.max(centerLeft - docRect.left, toolbarRect.width / 2 + 10 - docRect.left)
|
|
5688
5706
|
draft.top = top + 10;
|
|
5689
5707
|
});
|
|
5690
5708
|
return top;
|
|
@@ -6767,8 +6785,10 @@ function SelectionMask(props) {
|
|
|
6767
6785
|
core.watch(props.component.tableSelection, update);
|
|
6768
6786
|
function update() {
|
|
6769
6787
|
const selection = props.component.tableSelection();
|
|
6788
|
+
const selectedSlots = props.component.getSelectedNormalizedSlots();
|
|
6789
|
+
const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
|
|
6770
6790
|
const state = props.component.state;
|
|
6771
|
-
if (selection) {
|
|
6791
|
+
if (selection && slotCount > 1) {
|
|
6772
6792
|
let topCompensation = 0.5;
|
|
6773
6793
|
let heightCompensation = -1;
|
|
6774
6794
|
if (selection.startRow === 0) {
|
|
@@ -6968,10 +6988,12 @@ const TableComponentView = core.withAnnotation({
|
|
|
6968
6988
|
}) }, rowMapping.get(row.row)));
|
|
6969
6989
|
}) })] }) }) }) }));
|
|
6970
6990
|
}
|
|
6991
|
+
const selectedSlots = props.component.getSelectedNormalizedSlots();
|
|
6992
|
+
const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
|
|
6971
6993
|
return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
|
|
6972
6994
|
'xnote-table-content',
|
|
6973
6995
|
{
|
|
6974
|
-
'hide-selection': props.component.tableSelection()
|
|
6996
|
+
'hide-selection': props.component.tableSelection() && slotCount > 1
|
|
6975
6997
|
}
|
|
6976
6998
|
], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
|
|
6977
6999
|
return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@textbus/xnote",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "A high-performance rich text editor that supports multiplayer online collaboration.",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"@textbus/collaborate": "^4.2.4",
|
|
32
32
|
"@textbus/core": "^4.2.4",
|
|
33
33
|
"@textbus/platform-browser": "^4.2.5",
|
|
34
|
-
"@viewfly/core": "^1.1.
|
|
35
|
-
"@viewfly/hooks": "^1.1.
|
|
36
|
-
"@viewfly/platform-browser": "^1.1.
|
|
37
|
-
"@viewfly/scoped-css": "^1.1.
|
|
34
|
+
"@viewfly/core": "^1.1.1",
|
|
35
|
+
"@viewfly/hooks": "^1.1.1",
|
|
36
|
+
"@viewfly/platform-browser": "^1.1.1",
|
|
37
|
+
"@viewfly/scoped-css": "^1.1.1",
|
|
38
38
|
"highlight.js": "^11.9.0",
|
|
39
39
|
"katex": "^0.16.10",
|
|
40
40
|
"uuid": "^10.0.0"
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@types/uuid": "^10.0.0",
|
|
48
48
|
"@typescript-eslint/eslint-plugin": "^5.8.0",
|
|
49
49
|
"@typescript-eslint/parser": "^5.8.0",
|
|
50
|
-
"@viewfly/devtools": "^1.
|
|
50
|
+
"@viewfly/devtools": "^1.1.1",
|
|
51
51
|
"autoprefixer": "^10.4.0",
|
|
52
52
|
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
|
|
53
53
|
"core-js": "^3.20.1",
|