chore: Combine z-index from editor

app/editor/components/CommandMenu.tsx

@@ -10,6 +10,7 @@ import insertFiles from "@shared/editor/commands/insertFiles";
 import { CommandFactory } from "@shared/editor/lib/Extension";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
+import { depths } from "@shared/styles";
 import { supportedImageMimeTypes } from "@shared/utils/files";
 import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -605,7 +606,7 @@ export const Wrapper = styled.div<{
   color: ${(props) => props.theme.text};
   font-family: ${(props) => props.theme.fontFamily};
   position: absolute;
-  z-index: ${(props) => props.theme.zIndex + 100};
+  z-index: ${depths.editorToolbar};
   ${(props) => props.top !== undefined && `top: ${props.top}px`};
   ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
   left: ${(props) => props.left}px;

app/editor/components/FloatingToolbar.tsx

@@ -4,6 +4,7 @@ import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 import useComponentSize from "~/hooks/useComponentSize";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useViewportHeight from "~/hooks/useViewportHeight";
@@ -208,7 +209,7 @@ const Wrapper = styled.div<{
   will-change: opacity, transform;
   padding: 8px 16px;
   position: absolute;
-  z-index: ${(props) => props.theme.zIndex + 100};
+  z-index: ${depths.editorToolbar};
   opacity: 0;
   background-color: ${(props) => props.theme.toolbarBackground};
   border-radius: 4px;

app/typings/styled-components.d.ts

@@ -25,7 +25,6 @@ declare module "styled-components" {
     fontFamily: string;
     fontFamilyMono: string;
     fontWeight: number;
-    zIndex: number;
     link: string;
     placeholder: string;
     textSecondary: string;

shared/styles/depths.ts

@@ -1,8 +1,8 @@
 const depths = {
   header: 800,
   sidebar: 900,
-  // Note: editor toolbars are 900
-  hoverPreview: 998,
+  editorToolbar: 925,
+  hoverPreview: 950,
   // Note: editor lightbox is z-index 999
   modalOverlay: 2000,
   modal: 3000,

shared/styles/theme.ts

@@ -58,7 +58,6 @@ export const base = {
     "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
   fontWeight: 400,
   backgroundTransition: "background 100ms ease-in-out",
-  zIndex: 800,
   selected: colors.primary,
   buttonBackground: colors.primary,
   buttonText: colors.white,