Add tooltip for edit button on doc preview

Author: kazup01

src/cloud/components/DocPreview/index.tsx

@@ -30,6 +30,8 @@ import {
   modalEventEmitter,
   togglePreviewModeEventEmitter,
 } from '../../lib/utils/events'
+import WithTooltip from '../../../design/components/atoms/WithTooltip'
+import { osName } from '../../../design/lib/platform'
 import { getDocTitle } from '../../lib/utils/patterns'
 import DocProperties from '../DocProperties'
 import { getDocLinkHref } from '../Link/DocLink'
@@ -168,15 +170,20 @@ const DocPreviewModal = ({ doc, team, fallbackUrl }: DocPreviewModalProps) => {
         <Flexbox className='doc-preview__actions'>
           {renderHeader}
           {currentUserIsCoreMember && (
-            <Button
-              variant='icon'
-              iconPath={mode === 'preview' ? mdiPencil : mdiEyeOutline}
-              onClick={() =>
-                setMode((prev) => (prev === 'preview' ? 'editor' : 'preview'))
-              }
-              id='doc-preview__edit'
-              size='sm'
-            />
+            <WithTooltip
+              tooltip={osName == 'macos' ? 'Cmd+E' : 'Ctrl+E'}
+              side='bottom'
+            >
+              <Button
+                variant='icon'
+                iconPath={mode === 'preview' ? mdiPencil : mdiEyeOutline}
+                onClick={() =>
+                  setMode((prev) => (prev === 'preview' ? 'editor' : 'preview'))
+                }
+                id='doc-preview__edit'
+                size='sm'
+              />
+            </WithTooltip>
           )}
           <Button
             variant='icon'
@@ -281,7 +288,8 @@ const Container = styled.div`
 
   .doc-preview__content {
     padding: ${({ theme }) => theme.sizes.spaces.df}px
-      ${({ theme }) => theme.sizes.spaces.xl}px 0 ${({ theme }) => theme.sizes.spaces.xl}px;
+      ${({ theme }) => theme.sizes.spaces.xl}px 0
+      ${({ theme }) => theme.sizes.spaces.xl}px;
   }
 
   .doc-preview__title__wrapper {