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

README-ru.md

@@ -84,6 +84,32 @@ 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      | 2000          |
+| tooltip             | 2100          |
+
+### Использование
+
+Для применения z-index в компонентах используйте миксин z-index, передавая соответствующий ключ в качестве аргумента:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('tooltip');
+}
+```
 
 ### Участие в разработке
 

README.md

@@ -83,6 +83,33 @@ 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      | 2000          |
+| tooltip             | 2100          |
+
+### 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('tooltip');
+}
+```
+
 ### Contributing
 
 - [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)

src/bundle/settings/index.scss

@@ -1,3 +1,5 @@
+@use '../../styles/mixins.scss';
+
 @import '~@gravity-ui/uikit/styles/mixins';
 
 .g-md-editor-settings {
@@ -13,11 +15,11 @@
     }
 
     &__separator {
-        z-index: 0;
-
         margin: 6px 4px;
 
         border-left: 1px solid var(--g-color-line-generic);
+
+        @include mixins.z-index('default');
     }
 }
 
@@ -28,6 +30,10 @@
         float: right;
     }
 
+    &__tooltip {
+        @include mixins.z-index('tooltip');
+    }
+
     &__separator {
         border-bottom: 1px solid var(--g-color-line-generic);
     }

src/bundle/settings/index.tsx

@@ -158,6 +158,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                                 <MarkdownHints />
                             </div>
                         }
+                        tooltipClassName={bContent('tooltip')}
                         placement={mdHelpPlacement}
                         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 'node_modules/@gravity-ui/uikit/styles/mixins.scss' 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');
         }
     }