From fda147c492f2ed2e4767790babbedc4897ce0226 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Tue, 22 Mar 2022 13:52:29 +0800 Subject: [PATCH] fix: fix zIndex --- .../src/components/document/editor/index.module.scss | 7 ++++++- .../src/components/template/editor/index.module.scss | 7 ++++++- .../client/src/components/tiptap/extensions/tableCell.tsx | 2 +- .../src/components/tiptap/extensions/tableHeader.tsx | 2 +- .../menus/components/bubbleMenu/bubbleMenuPlugin.tsx | 4 ++-- .../client/src/components/tiptap/views/floatMenuView.tsx | 4 ++-- packages/client/src/styles/prosemirror.scss | 6 +++--- 7 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/client/src/components/document/editor/index.module.scss b/packages/client/src/components/document/editor/index.module.scss index f14a0061..8f5530f5 100644 --- a/packages/client/src/components/document/editor/index.module.scss +++ b/packages/client/src/components/document/editor/index.module.scss @@ -5,7 +5,11 @@ flex-direction: column; > header { + position: relative; + z-index: 110; + background-color: var(--semi-color-nav-bg); height: 60px; + > div { overflow: auto; } @@ -27,12 +31,13 @@ > header { position: relative; - z-index: 10001; + z-index: 110; height: 50px; padding: 0 24px; display: flex; align-items: center; overflow: hidden; + background-color: var(--semi-color-nav-bg); border-bottom: 1px solid var(--semi-color-border); &.isStandardWidth { diff --git a/packages/client/src/components/template/editor/index.module.scss b/packages/client/src/components/template/editor/index.module.scss index e06e7376..afd3800f 100644 --- a/packages/client/src/components/template/editor/index.module.scss +++ b/packages/client/src/components/template/editor/index.module.scss @@ -5,7 +5,11 @@ flex-direction: column; > header { + position: relative; + z-index: 110; + background-color: var(--semi-color-nav-bg); height: 60px; + > div { overflow: auto; } @@ -27,12 +31,13 @@ > header { position: relative; - z-index: 10001; + z-index: 110; height: 50px; padding: 0 24px; display: flex; align-items: center; overflow: hidden; + background-color: var(--semi-color-nav-bg); border-bottom: 1px solid var(--semi-color-border); &.isStandardWidth { diff --git a/packages/client/src/components/tiptap/extensions/tableCell.tsx b/packages/client/src/components/tiptap/extensions/tableCell.tsx index b4a8affc..03ba72f0 100644 --- a/packages/client/src/components/tiptap/extensions/tableCell.tsx +++ b/packages/client/src/components/tiptap/extensions/tableCell.tsx @@ -27,7 +27,7 @@ export const TableCell = BuiltInTableCell.extend({ new FloatMenuView({ editor: this.editor, tippyOptions: { - zIndex: 10000, + zIndex: 100, offset: [-28, 0], }, shouldShow: ({ editor }, floatMenuView) => { diff --git a/packages/client/src/components/tiptap/extensions/tableHeader.tsx b/packages/client/src/components/tiptap/extensions/tableHeader.tsx index f9b4a356..c891b2be 100644 --- a/packages/client/src/components/tiptap/extensions/tableHeader.tsx +++ b/packages/client/src/components/tiptap/extensions/tableHeader.tsx @@ -19,7 +19,7 @@ export const TableHeader = BuiltInTableHeader.extend({ new FloatMenuView({ editor: this.editor, tippyOptions: { - zIndex: 10000, + zIndex: 100, }, shouldShow: ({ editor }) => { if (!editor.isEditable) { diff --git a/packages/client/src/components/tiptap/menus/components/bubbleMenu/bubbleMenuPlugin.tsx b/packages/client/src/components/tiptap/menus/components/bubbleMenu/bubbleMenuPlugin.tsx index 914483dd..6007fdc9 100644 --- a/packages/client/src/components/tiptap/menus/components/bubbleMenu/bubbleMenuPlugin.tsx +++ b/packages/client/src/components/tiptap/menus/components/bubbleMenu/bubbleMenuPlugin.tsx @@ -84,7 +84,7 @@ export class BubbleMenuView { this.view.dom.addEventListener('dragstart', this.dragstartHandler); this.editor.on('focus', this.focusHandler); this.editor.on('blur', this.blurHandler); - this.tippyOptions = tippyOptions; + this.tippyOptions = tippyOptions || {}; // Detaches menu content from its current parent this.element.remove(); this.element.style.visibility = 'visible'; @@ -133,7 +133,7 @@ export class BubbleMenuView { trigger: 'manual', placement: 'top', hideOnClick: 'toggle', - ...this.tippyOptions, + ...Object.assign({ zIndex: 99 }, this.tippyOptions), }); // maybe we have to hide tippy on its own blur event as well diff --git a/packages/client/src/components/tiptap/views/floatMenuView.tsx b/packages/client/src/components/tiptap/views/floatMenuView.tsx index 0b17d510..87546494 100644 --- a/packages/client/src/components/tiptap/views/floatMenuView.tsx +++ b/packages/client/src/components/tiptap/views/floatMenuView.tsx @@ -47,7 +47,7 @@ export class FloatMenuView { constructor(props: FloatMenuViewOptions) { this.editor = props.editor; this.shouldShow = props.shouldShow; - this.tippyOptions = props.tippyOptions; + this.tippyOptions = props.tippyOptions || {}; if (props.getReferenceClientRect) { this.getReferenceClientRect = props.getReferenceClientRect; } @@ -76,7 +76,7 @@ export class FloatMenuView { trigger: 'manual', placement: 'top', hideOnClick: 'toggle', - ...(this.tippyOptions ?? {}), + ...Object.assign({ zIndex: 99 }, this.tippyOptions), }); } diff --git a/packages/client/src/styles/prosemirror.scss b/packages/client/src/styles/prosemirror.scss index 83e4a11e..2e66a23f 100644 --- a/packages/client/src/styles/prosemirror.scss +++ b/packages/client/src/styles/prosemirror.scss @@ -284,7 +284,7 @@ .grip-column { position: absolute; - z-index: 10000; + z-index: 10; display: block; width: 100%; height: 0.7em; @@ -302,7 +302,7 @@ .grip-row { position: absolute; - z-index: 10000; + z-index: 10; display: block; height: 100%; width: 0.7em; @@ -320,7 +320,7 @@ .grip-table { position: absolute; - z-index: 10000; + z-index: 10; display: block; width: 0.8em; height: 0.8em;