feat(Rich Text Editor): add sticky offset property (#1782)

contentful · Oct 17, 2024 · 0a395e2 · 0a395e2
1 parent eb3a6f6
commit 0a395e2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/rich-text/src/RichTextEditor.tsx b/packages/rich-text/src/RichTextEditor.tsx
@@ -49,6 +49,7 @@ type ConnectedRichTextProps = {
   isDisabled?: boolean;
   isToolbarHidden?: boolean;
   actionsDisabled?: boolean;
+  stickyToolbarOffset?: number;
 };
 
 export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
@@ -94,7 +95,10 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
               disableCorePlugins={disableCorePlugins}
             >
               {!props.isToolbarHidden && (
-                <StickyToolbarWrapper isDisabled={props.isDisabled}>
+                <StickyToolbarWrapper
+                  isDisabled={props.isDisabled}
+                  offset={props.stickyToolbarOffset}
+                >
                   <Toolbar isDisabled={props.isDisabled} />
                 </StickyToolbarWrapper>
               )}

diff --git a/packages/rich-text/src/Toolbar/components/StickyToolbarWrapper.tsx b/packages/rich-text/src/Toolbar/components/StickyToolbarWrapper.tsx
@@ -3,21 +3,22 @@ import React, { ReactNode } from 'react';
 import { css } from 'emotion';
 
 const styles = {
-  nativeSticky: css`
+  nativeSticky: (offset?: number) => css`
     position: -webkit-sticky;
     position: sticky;
-    top: -1px;
+    top: ${offset ? offset : -1}px;
     z-index: 2;
   `,
 };
 
 type StickyToolbarProps = {
   isDisabled?: boolean;
+  offset?: number;
   children: ReactNode;
 };
 
-const StickyToolbarWrapper = ({ isDisabled, children }: StickyToolbarProps) => (
-  <div className={isDisabled ? '' : styles.nativeSticky}>{children}</div>
+const StickyToolbarWrapper = ({ isDisabled, offset, children }: StickyToolbarProps) => (
+  <div className={isDisabled ? '' : styles.nativeSticky(offset)}>{children}</div>
 );
 
 export default StickyToolbarWrapper;