feat: tooltips for menubar options

tinacms · Aug 3, 2020 · bd06f11 · bd06f11
1 parent b27f0a7
commit bd06f11
Show file tree

Hide file tree

Showing 15 changed files with 100 additions and 15 deletions.
diff --git a/packages/react-tinacms-editor/src/components/EditorModeMenu/index.tsx b/packages/react-tinacms-editor/src/components/EditorModeMenu/index.tsx
@@ -33,7 +33,8 @@ export const EditorModeMenu = () => {
   return (
     <MenuButton
       data-testid="markdown-toggle"
-      data-tooltip={'Markdown mode'}
+      data-tooltip="Markdown mode"
+      title="Toggle Markdown mode"
       onClick={toggleMode}
     >
       <MarkdownIcon />

diff --git a/packages/react-tinacms-editor/src/components/MenuHelpers/MenuButton.tsx b/packages/react-tinacms-editor/src/components/MenuHelpers/MenuButton.tsx
@@ -23,6 +23,7 @@ const MenuItem = css`
 `
 
 export const MenuButton = styled.button<{
+  title?: string
   active?: boolean
   disabled?: boolean
   ref?: any

diff --git a/packages/react-tinacms-editor/src/components/MenuHelpers/MenuDropdown.tsx b/packages/react-tinacms-editor/src/components/MenuHelpers/MenuDropdown.tsx
@@ -61,6 +61,7 @@ export const MenuDropdown = styled(
   background-color: white;
   overflow: hidden;
   z-index: 10;
+  white-space: nowrap;
 
   ${props =>
     props.open &&

diff --git a/packages/react-tinacms-editor/src/components/MenuHelpers/MenuOption.tsx b/packages/react-tinacms-editor/src/components/MenuHelpers/MenuOption.tsx
@@ -20,7 +20,7 @@ import styled, { css } from 'styled-components'
 
 export const MenuOption = styled.div<{ disabled: boolean; active: boolean }>`
   display: block;
-  padding: 8px 16px;
+  padding: 8px 12px;
   transition: all 85ms ease-out;
   cursor: pointer;
   &:first-child {

diff --git a/packages/react-tinacms-editor/src/components/MenuHelpers/commandControl.tsx b/packages/react-tinacms-editor/src/components/MenuHelpers/commandControl.tsx
@@ -44,6 +44,7 @@ export const commandControl = (
   return (
     <MenuButton
       data-tooltip={tooltip}
+      title={tooltip}
       onClick={onClick}
       disabled={!canDo()}
       onMouseDown={evt => {

diff --git a/packages/react-tinacms-editor/src/components/MenuHelpers/markControl.tsx b/packages/react-tinacms-editor/src/components/MenuHelpers/markControl.tsx
@@ -112,6 +112,7 @@ export function markControl({
       <MenuButton
         data-tooltip={tooltip}
         data-side="top"
+        title={tooltip}
         onClick={onOptionClick}
         active={!isOptionDisabled() && isActive()}
         disabled={isOptionDisabled()}

diff --git a/packages/react-tinacms-editor/src/plugins/Block/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Block/Menu/ProsemirrorMenu.tsx
@@ -27,6 +27,7 @@ import { HeadingIcon } from '@tinacms/icons'
 
 import { useEditorStateContext } from '../../../context/editorState'
 import { MenuButton, MenuDropdown } from '../../../components/MenuHelpers'
+import { formatKeymap } from '../../../utils'
 import { toggleHeader as th } from '../commands'
 import { blockTool } from './blockTool'
 
@@ -42,7 +43,7 @@ export const ProsemirrorMenu: FunctionComponent = () => {
     <>
       <MenuButton
         ref={menuButtonRef}
-        data-tooltip={'Heading'}
+        data-tooltip="Heading"
         onClick={toggle}
         active={active}
       >
@@ -110,39 +111,45 @@ const H1 = blockTool({
   command: makeToggleHeader(1),
   typeName: 'heading',
   attrs: { level: 1 },
+  title: formatKeymap('Mod-Alt-1'),
 })
 const H2 = blockTool({
   Component: HeadingTwo,
   children: 'Heading 2',
   command: makeToggleHeader(2),
   typeName: 'heading',
   attrs: { level: 2 },
+  title: formatKeymap('Mod-Alt-2'),
 })
 const H3 = blockTool({
   Component: HeadingThree,
   children: 'Heading 3',
   command: makeToggleHeader(3),
   typeName: 'heading',
   attrs: { level: 3 },
+  title: formatKeymap('Mod-Alt-3'),
 })
 const H4 = blockTool({
   Component: HeadingFour,
   children: 'Heading 4',
   command: makeToggleHeader(4),
   typeName: 'heading',
   attrs: { level: 4 },
+  title: formatKeymap('Mod-Alt-4'),
 })
 const H5 = blockTool({
   Component: HeadingFive,
   children: 'Heading 5',
   command: makeToggleHeader(5),
   typeName: 'heading',
   attrs: { level: 5 },
+  title: formatKeymap('Mod-Alt-5'),
 })
 const H6 = blockTool({
   Component: HeadingSix,
   children: 'Heading 6',
   command: makeToggleHeader(6),
   typeName: 'heading',
   attrs: { level: 6 },
+  title: formatKeymap('Mod-Alt-6'),
 })
diff --git a/packages/react-tinacms-editor/src/plugins/Block/Menu/blockTool.tsx b/packages/react-tinacms-editor/src/plugins/Block/Menu/blockTool.tsx
@@ -20,17 +20,19 @@ import * as React from 'react'
 import { EditorView } from 'prosemirror-view'
 
 import { MenuOption } from '../../../components/MenuHelpers'
+import styled from 'styled-components'
 
 interface BlockTool {
   Component: any
   children: any
   command: Function
   typeName?: string
   attrs?: any
+  title?: string
 }
 
 export function blockTool(options: BlockTool) {
-  const { Component, children, command, typeName, attrs } = options
+  const { Component, children, command, typeName, attrs, title } = options
   return class extends React.Component<
     { view: EditorView; onClick(): void },
     any
@@ -59,9 +61,23 @@ export function blockTool(options: BlockTool) {
           disabled={!this.canDo()}
           active={this.active}
         >
-          <Component>{children}</Component>
+          <Content>
+            <Component>{children}</Component>
+            <TitleText>{title}</TitleText>
+          </Content>
         </MenuOption>
       )
     }
   }
 }
+
+const Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const TitleText = styled.span`
+  color: #d1d1d1;
+  font-size: 12px;
+`
diff --git a/packages/react-tinacms-editor/src/plugins/CodeBlock/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/CodeBlock/Menu/ProsemirrorMenu.tsx
@@ -22,6 +22,7 @@ import { EditorState, TextSelection } from 'prosemirror-state'
 import { CodeIcon } from '@tinacms/icons'
 
 import { commandControl } from '../../../components/MenuHelpers'
+import { formatKeymap } from '../../../utils'
 
 function makeCodeBlock(state: EditorState, dispatch: any) {
   const { code_block, paragraph } = state.schema.nodes
@@ -60,6 +61,6 @@ export const ProsemirrorMenu = commandControl(
   makeCodeBlock,
   CodeIcon,
   'Codeblock',
-  'Codeblock',
+  formatKeymap('Codeblock Mod-Alt-0'),
   true
 ) //codeblock focusing messes with scroll
diff --git a/packages/react-tinacms-editor/src/plugins/History/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/History/Menu/ProsemirrorMenu.tsx
@@ -23,6 +23,7 @@ import { RedoIcon, UndoIcon } from '@tinacms/icons'
 
 import { useEditorStateContext } from '../../../context/editorState'
 import { MenuButton } from '../../../components/MenuHelpers'
+import { formatKeymap } from '../../../utils'
 
 export const ProsemirrorMenu = () => (
   <>
@@ -38,9 +39,12 @@ const UndoControl = () => {
     undo(state, dispatch)
   }
 
+  const tooltip = formatKeymap('Undo Mod-Z')
+
   return (
     <MenuButton
-      data-tooltip="Undo"
+      data-tooltip={tooltip}
+      title={tooltip}
       data-side="top"
       onClick={undoChange}
       disabled={undoDepth(editorView!.view.state) < 1}
@@ -58,9 +62,12 @@ const RedoControl = () => {
     redo(state, dispatch)
   }
 
+  const tooltip = formatKeymap('Redo Mod-Shift-Z')
+
   return (
     <MenuButton
-      data-tooltip="Redo"
+      data-tooltip={tooltip}
+      title={tooltip}
       data-side="top"
       onClick={redoChange}
       disabled={redoDepth(editorView!.view.state) < 1}

diff --git a/packages/react-tinacms-editor/src/plugins/Image/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Image/Menu/ProsemirrorMenu.tsx
@@ -103,7 +103,7 @@ export const ProsemirrorMenu = ({ uploadImages }: MenuProps) => {
 
   return (
     <>
-      <MenuButton ref={menuButtonRef} onClick={handleCloseModal}>
+      <MenuButton title="Image" ref={menuButtonRef} onClick={handleCloseModal}>
         <MediaIcon />
       </MenuButton>
       <MenuDropdown

diff --git a/packages/react-tinacms-editor/src/plugins/Inline/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Inline/Menu/ProsemirrorMenu.tsx
@@ -20,6 +20,7 @@ import * as React from 'react'
 import { BoldIcon, ItalicIcon, StrikethroughIcon } from '@tinacms/icons'
 
 import { markControl } from '../../../components/MenuHelpers'
+import { formatKeymap } from '../../../utils'
 
 export const ProsemirrorMenu = () => (
   <>
@@ -32,13 +33,13 @@ export const ProsemirrorMenu = () => (
 const BoldControl = markControl({
   mark: 'strong',
   Icon: BoldIcon,
-  tooltip: 'Bold',
+  tooltip: formatKeymap('Bold Mod-B'),
 })
 
 const ItalicControl = markControl({
   mark: 'em',
   Icon: ItalicIcon,
-  tooltip: 'Italic',
+  tooltip: formatKeymap('Italic Mod-I'),
 })
 
 const StrikeControl = markControl({

diff --git a/packages/react-tinacms-editor/src/plugins/Link/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Link/Menu/ProsemirrorMenu.tsx
@@ -20,13 +20,13 @@ import { EditorView } from 'prosemirror-view'
 import { LinkIcon } from '@tinacms/icons'
 
 import { markControl } from '../../../components/MenuHelpers'
-import { isMarkPresent } from '../../../utils'
+import { isMarkPresent, formatKeymap } from '../../../utils'
 import { imagePluginKey } from '../../Image'
 
 export const ProsemirrorMenu = markControl({
   mark: 'link',
   Icon: LinkIcon,
-  tooltip: 'Link',
+  tooltip: formatKeymap('Link Mod-K'),
   selectionOnly: true,
   defaultAttrs: {
     href: '',

diff --git a/packages/react-tinacms-editor/src/plugins/List/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/List/Menu/ProsemirrorMenu.tsx
@@ -20,6 +20,7 @@ import * as React from 'react'
 import { UnorderedListIcon, OrderedListIcon } from '@tinacms/icons'
 
 import { commandControl } from '../../../components/MenuHelpers'
+import { formatKeymap } from '../../../utils'
 import { toggleBulletList, toggleOrderedList } from '../commands'
 
 export const ProsemirrorMenu = (props: any) => (
@@ -33,12 +34,12 @@ const BulletList = commandControl(
   toggleBulletList,
   UnorderedListIcon,
   'Unordered List',
-  'Unordered List'
+  formatKeymap('Unordered List Mod-Alt-8')
 )
 
 const OrderedList = commandControl(
   toggleOrderedList,
   OrderedListIcon,
   'Ordered List',
-  'Ordered List'
+  formatKeymap('Ordered List Mod-Alt-7')
 )
diff --git a/packages/react-tinacms-editor/src/utils.ts b/packages/react-tinacms-editor/src/utils.ts
@@ -78,3 +78,50 @@ export const getMarkPresent = (state: EditorState, markType: MarkType) => {
 
   return markPresent
 }
+
+const getOS = () => {
+  const nAgt = navigator.userAgent
+  const clientStrings = [
+    { s: 'Windows', r: /Win16/ },
+    { s: 'Windows', r: /(Windows 95|Win95|Windows_95)/ },
+    { s: 'Windows', r: /(Win 9x 4.90|Windows ME)/ },
+    { s: 'Windows', r: /(Windows 98|Win98)/ },
+    { s: 'Windows', r: /Windows CE/ },
+    { s: 'Windows', r: /(Windows NT 5.0|Windows 2000)/ },
+    { s: 'Windows', r: /(Windows NT 5.1|Windows XP)/ },
+    { s: 'Windows', r: /Windows NT 5.2/ },
+    { s: 'Windows', r: /Windows NT 6.0/ },
+    { s: 'Windows', r: /(Windows 7|Windows NT 6.1)/ },
+    { s: 'Windows', r: /(Windows 8.1|Windows NT 6.3)/ },
+    { s: 'Windows', r: /(Windows 8|Windows NT 6.2)/ },
+    { s: 'Windows', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/ },
+    { s: 'Linux', r: /(Linux|X11)/ },
+    { s: 'iOS', r: /(iPhone|iPad|iPod)/ },
+    { s: 'Mac OS X', r: /Mac OS X/ },
+    { s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/ },
+    { s: 'QNX', r: /QNX/ },
+    { s: 'UNIX', r: /UNIX/ },
+    { s: 'BeOS', r: /BeOS/ },
+  ]
+
+  const keys: { [key: number]: any } = Object.keys(clientStrings)
+  for (let i = 0; i < clientStrings.length; i += 1) {
+    const clientObj = clientStrings[keys[i]]
+    if (clientObj.r.test(nAgt)) {
+      return clientObj.s
+    }
+  }
+
+  return ''
+}
+
+export const formatKeymap = (keymapStr: string) => {
+  const os = getOS()
+  const mod = os === 'Windows' ? '^' : '⌘'
+
+  let formattedKeymap = keymapStr
+  formattedKeymap = formattedKeymap.replace('Mod', mod)
+  formattedKeymap = formattedKeymap.replace('Shift', '⇧')
+  formattedKeymap = formattedKeymap.replace('Alt', '⌥')
+  return formattedKeymap
+}