fix: avoid scrollIntoView affect the parent page when the editor is inserted as iframe

This commit is contained in:
MrWindlike 2022-07-01 17:05:57 +08:00
parent a1c320f741
commit 41520f9f6b
3 changed files with 22 additions and 7 deletions

View File

@ -55,10 +55,11 @@
"mobx": "^6.3.8",
"mobx-react-lite": "^3.2.2",
"re-resizable": "^6.9.5",
"react-json-tree": "^0.16.1",
"tern": "^0.24.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-json-tree": "^0.16.1",
"scroll-into-view": "^1.16.2",
"tern": "^0.24.3"
},
"devDependencies": {
"@babel/preset-react": "^7.14.5",
@ -68,6 +69,7 @@
"@types/escodegen": "^0.0.7",
"@types/json-schema": "^7.0.7",
"@types/lodash": "^4.14.182",
"@types/scroll-into-view": "^1.16.0",
"@types/tern": "^0.23.4",
"@vitejs/plugin-react": "^1.0.1",
"@vitejs/plugin-react-refresh": "^1.3.6",

View File

@ -16,6 +16,7 @@ import {
} from '@choc-ui/chakra-autocomplete';
import { css } from '@emotion/css';
import { isEqual } from 'lodash-es';
import scrollIntoView from 'scroll-into-view';
export type ChildrenMap = Map<string, SlotsMap>;
type SlotsMap = Map<string, ComponentSchema[]>;
@ -85,10 +86,12 @@ export const StructureTree: React.FC<Props> = props => {
if (selectedId) {
// wait the component tree to be expanded
setTimeout(() => {
wrapperRef.current?.querySelector(`#tree-item-${selectedId}`)?.scrollIntoView({
block: 'nearest',
inline: 'nearest',
});
const selectedElement: HTMLElement | undefined | null =
wrapperRef.current?.querySelector(`#tree-item-${selectedId}`);
if (selectedElement) {
scrollIntoView(selectedElement, { time: 0, align: { lockX: true } });
}
});
}
}, []);

View File

@ -3849,6 +3849,11 @@
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
"@types/scroll-into-view@^1.16.0":
version "1.16.0"
resolved "https://registry.yarnpkg.com/@types/scroll-into-view/-/scroll-into-view-1.16.0.tgz#bd02094307624cc0243c34dca478510a0a8515e8"
integrity sha512-WT0YBP7CLi3XH/gDbWdtBf4mQVyE7zQrpEZ2rNrxz9tVoIPJf97zGlfRqnkECj7P8rPkFxVlo1KbOOMetcchdA==
"@types/stack-utils@^2.0.0":
version "2.0.1"
resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
@ -10629,6 +10634,11 @@ scroll-into-view-if-needed@2.2.20:
dependencies:
compute-scroll-into-view "1.0.11"
scroll-into-view@^1.16.2:
version "1.16.2"
resolved "https://registry.yarnpkg.com/scroll-into-view/-/scroll-into-view-1.16.2.tgz#ea3e810dacc861fb9c115eac7bf603e564f0104a"
integrity sha512-vyTE0i27o6eldt9xinjHec41Dw05y+faoI+s2zNKJAVOdbA5M2XZrYq/obJ8E+QDQulJ2gDjgui9w9m9RZSRng==
semver-compare@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz"