feat: make markdown toolbar sticky (#713)

packages/core/src/widgets/markdown/plate/components/buttons/FontTypeSelect.tsx

@@ -1,5 +1,6 @@
 import OptionUnstyled from '@mui/base/OptionUnstyled';
 import SelectUnstyled from '@mui/base/SelectUnstyled';
+import { UnfoldMore as UnfoldMoreIcon } from '@styled-icons/material/UnfoldMore';
 import {
   ELEMENT_H1,
   ELEMENT_H2,
@@ -18,6 +19,7 @@ import useDebounce from '@staticcms/core/lib/hooks/useDebounce';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { useMdPlateEditorState } from '@staticcms/markdown/plate/plateTypes';
 
+import type { SelectUnstyledRootSlotProps } from '@mui/base/SelectUnstyled';
 import type { FC, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 
 type Option = {
@@ -56,6 +58,19 @@ const types: Option[] = [
   },
 ];
 
+const Button = React.forwardRef(function Button<TValue extends {}, Multiple extends boolean>(
+  props: SelectUnstyledRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState: _, children, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {children}
+      <UnfoldMoreIcon className="w-4 h-4 absolute right-0" />
+    </button>
+  );
+});
+
 export interface FontTypeSelectProps {
   disabled?: boolean;
 }
@@ -108,12 +123,16 @@ const FontTypeSelect: FC<FontTypeSelectProps> = ({ disabled = false }) => {
         value={value?.value ?? ELEMENT_PARAGRAPH}
         onChange={handleChange}
         disabled={disabled}
+        slots={{
+          root: Button,
+        }}
         slotProps={{
           root: {
             className: classNames(
               `
                 flex
                 items-center
+                justify-between
                 text-sm
                 font-medium
                 relative

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading1.tsx

@@ -15,6 +15,7 @@ const Heading1: FC<PlateRenderElementProps<MdValue, MdH1Element>> = ({
       {...nodeProps}
       className="
         text-[2em]
+        leading-[1.5em]
         font-bold
         my-[0.67em]
       "

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading2.tsx

@@ -15,6 +15,7 @@ const Heading2: FC<PlateRenderElementProps<MdValue, MdH2Element>> = ({
       {...nodeProps}
       className="
         text-[1.5em]
+        leading-[1.25em]
         font-bold
         my-[0.83em]
       "

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading3.tsx

@@ -15,6 +15,7 @@ const Heading3: FC<PlateRenderElementProps<MdValue, MdH3Element>> = ({
       {...nodeProps}
       className="
         text-[1.17em]
+        leading-[1.25em]
         font-bold
         my-[1em]
       "

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading4.tsx

@@ -14,6 +14,7 @@ const Heading4: FC<PlateRenderElementProps<MdValue, MdH4Element>> = ({
       {...attributes}
       {...nodeProps}
       className="
+        leading-[1.25em]
         font-bold
         my-[1.33em]
       "

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading5.tsx

@@ -15,6 +15,7 @@ const Heading5: FC<PlateRenderElementProps<MdValue, MdH5Element>> = ({
       {...nodeProps}
       className="
         text-[0.83em]
+        leading-[1.25em]
         font-bold
         my-[1.67em]
       "

packages/core/src/widgets/markdown/plate/components/nodes/headings/Heading6.tsx

@@ -15,6 +15,7 @@ const Heading6: FC<PlateRenderElementProps<MdValue, MdH6Element>> = ({
       {...nodeProps}
       className="
         text-[0.67em]
+        leading-[1.25em]
         font-bold
         my-[2.33em]
       "

packages/core/src/widgets/markdown/plate/components/toolbar/Toolbar.tsx

@@ -39,7 +39,6 @@ const Toolbar: FC<ToolbarProps> = ({ useMdx, collection, field, disabled }) => {
       className="
         flex
         flex-wrap
-        relative
         items-center
         select-none
         min-h-markdown-toolbar
@@ -53,6 +52,11 @@ const Toolbar: FC<ToolbarProps> = ({ useMdx, collection, field, disabled }) => {
         border-gray-400
         gap-0.5
         shadow-md
+        bg-slate-50
+        dark:bg-slate-900
+        sticky
+        top-0
+        z-10
       "
     >
       {groups}