fix: added z-index to mode help tooltip and z-index system (issue #298)

README-ru.md

@@ -84,6 +84,31 @@ configure({
 
 Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек.
 
+### Система z-index
+
+В этом проекте используется система z-index для управления слоями элементов. Ниже приведены определенные уровни и их значения:
+
+| level               | z-index value |
+| ------------------- | ------------- |
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 990           |
+
+### Использование
+
+Для применения z-index в компонентах используйте миксин z-index, передавая соответствующий ключ в качестве аргумента:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('forefront');
+}
+```
 
 ### Участие в разработке
 

README.md

@@ -82,6 +82,32 @@ configure({
 
 Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
 
+### Z-index levels
+
+This project uses a z-index map to control the layers of elements. Defined levels:
+
+| level               | z-index value |
+| ------------------- | ------------- |
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 990           |
+
+### Usage
+
+To apply z-index to components, use the z-index mixin, passing the key as an argument:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('forefront');
+}
+```
+
 ### Contributing
 
 - [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)

src/bundle/settings/index.scss

@@ -1,4 +1,5 @@
 @use '~@gravity-ui/uikit/styles/mixins' as uikit;
+@use '../../styles/mixins.scss';
 
 .g-md-editor-settings {
     display: flex;
@@ -13,11 +14,11 @@
     }
 
     &__separator {
-        z-index: 0;
-
         margin: 6px 4px;
 
         border-left: 1px solid var(--g-color-line-generic);
+
+        @include mixins.z-index('default');
     }
 }
 

src/bundle/settings/index.tsx

@@ -26,6 +26,7 @@ import type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';
 import {MarkdownHints} from './MarkdownHints';
 
 import './index.scss';
+import '../../styles/_zindex.scss';
 
 const placement: PopupPlacement = ['bottom-end', 'top-end'];
 
@@ -154,6 +155,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                         popoverProps={{
                             placement: mdHelpPlacement,
                             modal: false,
+                            zIndex: 'var(--md-editor-sticky-toolbar-popup-z-index)',
                         }}
                         className={bContent('mode-help')}
                     >

src/bundle/sticky/sticky.scss

@@ -1,4 +1,4 @@
-@use '../../styles/zindex' as zIndexVars;
+@use '../../styles/mixins.scss';
 
 $block: 'g-md-editor-sticky';
 
@@ -13,10 +13,10 @@ $block: 'g-md-editor-sticky';
     }
 
     &_sticky-active:not(.#{$block}_clear) {
-        z-index: zIndexVars.$sticky-toolbar;
-
         padding: var(--g-md-toolbar-sticky-padding);
 
+        @include mixins.z-index('sticky-toolbar');
+
         &::before {
             position: absolute;
             inset: var(--g-md-toolbar-sticky-inset, -4px);

src/extensions/additional/FoldingHeading/plugins/folding.scss

@@ -1,4 +1,5 @@
 @use '~@gravity-ui/uikit/styles/mixins' as uikit;
+@use '../../../../styles/mixins.scss';
 
 .pm-h-folding-hidden {
     display: none;
@@ -13,7 +14,6 @@
 
     &::before {
         position: absolute;
-        z-index: 1;
         bottom: -4px;
         left: 0;
 
@@ -27,11 +27,12 @@
         mask-size: 12px;
 
         transform: translateY(80%);
+
+        @include mixins.z-index('forefront');
     }
 
     &::after {
         position: absolute;
-        z-index: 1;
         bottom: -8px;
         left: 16px;
 
@@ -42,13 +43,14 @@
         content: '';
 
         border-top: 1px dashed var(--g-color-line-generic);
+
+        @include mixins.z-index('forefront');
     }
 }
 
 .pm-h-folding-label {
     &::after {
         position: absolute;
-        z-index: 1;
         right: 2px;
         bottom: -6px;
 
@@ -65,5 +67,7 @@
         transform: translate(0, 50%);
 
         @include uikit.text-body-1();
+
+        @include mixins.z-index('forefront');
     }
 }

src/extensions/additional/Math/view-and-edit.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .math-block {
     font-family: var(--g-font-family-monospace);
 
@@ -46,7 +48,6 @@
 
     &::before {
         position: absolute;
-        z-index: -1;
         inset: -2px;
 
         content: '';
@@ -55,6 +56,8 @@
         background-color: var(--g-md-math-back-color);
 
         transition: background-color 0.15s linear;
+
+        @include mixins.z-index('background');
     }
 
     &:hover {

src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss

@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-Mermaid {
     display: flex;
     justify-content: space-between;
@@ -32,9 +34,9 @@
     }
 
     &__EditorPopover {
-        z-index: 1;
-
         float: right;
+
+        @include mixins.z-index('forefront');
     }
 
     &__Controls {

src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss

@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-yfm-html-block {
     position: relative;
 
@@ -65,9 +67,9 @@
     }
 
     &__editor-popover {
-        z-index: 1;
-
         float: right;
+
+        @include mixins.z-index('forefront');
     }
 
     &__controls {

src/extensions/behavior/Cursor/gapcursor.scss

@@ -1,3 +1,5 @@
+@use '../../../styles//mixins.scss';
+
 .Prosemirror-hide-cursor {
     caret-color: transparent;
 }
@@ -28,7 +30,6 @@
 
     &::before {
         position: relative;
-        z-index: 1;
 
         display: inline-block;
 
@@ -38,6 +39,8 @@
         caret-color: transparent;
 
         border-right: 1px solid transparent;
+
+        @include mixins.z-index('forefront');
     }
 
     .ProseMirror-focused &::before {

src/extensions/behavior/Placeholder/index.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .ProseMirror .g-md-placeholder {
     display: inline-block;
 
@@ -28,7 +30,6 @@
     .ProseMirror-focused &_focus {
         .g-md-placeholder__cursor {
             position: relative;
-            z-index: 1;
 
             margin-right: -1px;
 
@@ -37,6 +38,8 @@
 
             animation: placeholder_blink 1s;
             animation-iteration-count: infinite;
+
+            @include mixins.z-index('forefront');
         }
     }
 }

src/extensions/behavior/Resizable/Resizable.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 body :has(.g-md-resizable_resizing) {
     cursor: col-resize;
 }
@@ -8,7 +10,6 @@ body :has(.g-md-resizable_resizing) {
     &_resizing &__resizer-wrapper,
     &_hover &__resizer-wrapper {
         position: absolute;
-        z-index: 1;
         top: 0;
 
         display: flex;
@@ -21,6 +22,8 @@ body :has(.g-md-resizable_resizing) {
         cursor: col-resize;
         pointer-events: auto;
 
+        @include mixins.z-index('forefront');
+
         &_left {
             left: 0;
         }

src/extensions/markdown/Code/code.scss

@@ -1,3 +1,4 @@
+@use '../../../styles/mixins.scss';
 // add custom styles for prosemirror-codemark
 // because default styles conflict with the rest of the project styles
 
@@ -19,7 +20,6 @@
 
 .ProseMirror-focused .fake-cursor {
     position: relative;
-    z-index: 1;
 
     margin-right: -1px;
 
@@ -28,4 +28,6 @@
 
     animation: code_fake_blink 1s;
     animation-iteration-count: infinite;
+
+    @include mixins.z-index('forefront');
 }

src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss

@@ -1,6 +1,9 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-img-settings-button {
     position: absolute;
-    z-index: 2;
     top: 3px;
     right: 3px;
+
+    @include mixins.z-index('img-settings-button');
 }

src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/mixins.scss';
+
 $buttons-size: 16px;
 $buttons-offset: 2px;
 
@@ -42,7 +44,6 @@ $buttons-offset: 2px;
 
         &_right {
             position: absolute;
-            z-index: 100;
             top: 0;
             right: -$buttons-size - $buttons-offset;
 
@@ -51,18 +52,21 @@ $buttons-offset: 2px;
 
             width: $buttons-size;
             height: 100%;
+
+            @include mixins.z-index('table-view-button');
         }
 
         &_bottom {
             position: absolute;
-            z-index: 100;
             bottom: -$buttons-size - $buttons-offset;
 
             display: flex;
             justify-content: center;
 
             width: 100%;
             height: $buttons-size;
+
+            @include mixins.z-index('table-view-button');
         }
     }
 

src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss

@@ -1,7 +1,8 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-table-cell-view {
     &__left-button {
         position: absolute;
-        z-index: 110;
         top: calc(50% - 14px);
         left: -13px;
 
@@ -11,6 +12,8 @@
         border-radius: var(--g-border-radius-s);
         background: var(--g-color-base-background);
 
+        @include mixins.z-index('table-cell-button');
+
         &:hover {
             pointer-events: initial;
 
@@ -20,7 +23,6 @@
 
     &__upper-button {
         position: absolute;
-        z-index: 110;
         top: -13px;
         left: calc(50% - 14px);
 
@@ -32,6 +34,8 @@
 
         transform: rotate(90deg);
 
+        @include mixins.z-index('table-cell-button');
+
         &:hover {
             pointer-events: initial;
 

src/styles/_zindex.scss

@@ -1,6 +1,16 @@
-// so that cursor is always cursor:grabbing
-$dnd-cursor-back: 100500;
-// ghost for drag and drop. has to be always above other elements
-$dnd-ghost: 100499;
+// z-index system values
+$z-index-map: (
+    'background': -1,
+    'default': 0,
+    'forefront': 1,
+    'img-settings-button': 2,
+    'table-view-button': 100,
+    'table-cell-button': 110,
+    'sticky-toolbar': 2000,
+    'sticky-toolbar-popup': 2100,
+);
+
+:root {
+    --md-editor-sticky-toolbar-popup-z-index: #{map-get($z-index-map, 'sticky-toolbar-popup')}
+}
 
-$sticky-toolbar: 2000; // more than has popup

src/styles/mixins.scss

@@ -1,3 +1,5 @@
+@use './zindex' as zIndexVariables;
+
 @mixin block-border-hover() {
     border: 1px dashed transparent;
     border-radius: var(--g-border-radius-s);
@@ -6,3 +8,9 @@
         border-color: var(--g-color-line-generic);
     }
 }
+
+// Getting z-index value by key
+
+@mixin z-index($key) {
+    z-index: map-get(zIndexVariables.$z-index-map, $key);
+}