Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: 修复编辑器内联编辑在自由容器里面无效的问题 #11491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
2betop merged 1 commit into from
Jan 11, 2025
Merged

fix: 修复编辑器内联编辑在自由容器里面无效的问题 #11491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/amis-editor-core/src/component/HighlightBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,11 @@ export default observer(function ({
);
if (node) {
const nodeId = node.getAttribute('data-editor-id')!;
store.setActiveId(nodeId);
// 如果已经进入了内联模式
// 不要再切选中了
setTimeout(() => {
store.activeElement || store.setActiveId(nodeId);
}, 350);
}
}, []);

Expand Down
41 changes: 36 additions & 5 deletions packages/amis-editor-core/src/component/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default class Preview extends Component<PreviewProps> {
currentDom.addEventListener('mouseleave', this.handleMouseLeave);
currentDom.addEventListener('mousemove', this.handleMouseMove);
currentDom.addEventListener('click', this.handleClick, true);
currentDom.addEventListener('dblclick', this.handleDBClick);
currentDom.addEventListener('dblclick', this.handleDBClick, true);
currentDom.addEventListener('mouseover', this.handeMouseOver);
currentDom.addEventListener('mousedown', this.handeMouseDown);
this.props.manager.on('after-update', this.handlePanelChange);
Expand All @@ -95,7 +95,7 @@ export default class Preview extends Component<PreviewProps> {
currentDom.removeEventListener('mouseleave', this.handleMouseLeave);
currentDom.removeEventListener('mousemove', this.handleMouseMove);
currentDom.removeEventListener('click', this.handleClick, true);
currentDom.removeEventListener('dblclick', this.handleDBClick);
currentDom.removeEventListener('dblclick', this.handleDBClick, true);
currentDom.removeEventListener('mouseover', this.handeMouseOver);
currentDom.removeEventListener('mousedown', this.handeMouseDown);
this.props.manager.off('after-update', this.handlePanelChange);
Expand Down Expand Up @@ -361,14 +361,45 @@ export default class Preview extends Component<PreviewProps> {
@autobind
handleDBClick(e: MouseEvent) {
const store = this.props.store;
const target = e.target as HTMLElement;
const hostElem = target.closest(`[data-editor-id]`) as HTMLElement;
let target = e.target as HTMLElement;
let hostElem = target.closest(`[data-editor-id]`) as HTMLElement;

if (!hostElem) {
const hlbox = target.closest(`[data-hlbox-id]`) as HTMLElement;
// 自由容器里面的高亮区域是可以点击的
// 当点击来自高亮区域时，需要根据位置计算出组件上点击的元素
if (hlbox) {
let x = e.clientX;
let y = e.clientY;

const layer: HTMLElement = store.getLayer()!;
const layerRect = layer.getBoundingClientRect();
const iframe = store.getIframe();

// 计算鼠标位置在页面中的实际位置，如果iframe存在，需要考虑iframe偏移量以及iframe的缩放比例
let scrollTop = 0;
if (iframe) {
scrollTop = iframe.contentWindow?.scrollY || 0;
x -= layerRect.left;
y -= layerRect.top;
y += scrollTop;
}
const elements = store.getDoc().elementsFromPoint(x, y);
target = elements.find((ele: Element) => {
hostElem = ele.closest(
`[data-editor-id="${hlbox.getAttribute('data-hlbox-id')}"]`
) as HTMLElement;
return hostElem;
}) as HTMLElement;
}
}

if (hostElem) {
const node = store.getNodeById(hostElem.getAttribute('data-editor-id')!);
if (!node) {
return;
}

e.preventDefault();
const rendererInfo = node.info;

// 需要支持 :scope > xxx 语法，所以才这么写
Expand Down
3 changes: 3 additions & 0 deletions packages/amis-editor-core/src/inlineEdit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,9 @@ async function startRichTextEdit({
toolbarInline: true,
charCounterCount: false,
key: richTextToken,
// 不配置这个户自动包裹个 <p> 会出现跳动
// https://wysiwyg-editor.froala.help/hc/en-us/articles/115000461089-Can-I-disable-wrapping-content-with-P-tags
enter: FroalaEditor.ENTER_BR,
// todo 现在这个按钮的位置又问题，先忽略
// quickInsertEnabled: false,
toolbarButtons: [
Expand Down
Loading