Version 0.2

ZackMurry · Jul 9, 2022 · 36b1616 · 36b1616
1 parent 6ce0672
commit 36b1616
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ The `highlight` action has a configuration option for the color of the highlight
 
 ![Highlight configuration screenshot](docs/highlight_configuration.png)
 
-Docs Hotkey is able to highlight in all of the colors in the Google Docs color palette. To find the name of a color you wish to highlight in, open the highlight menu in Google Docs and hover over the color. This will show a tooltip with the name of the color, which can be entered into the `highlight` configuration. Note that the highlight color should be entered exactly as shown by Google Docs, including case.
+Docs Hotkey is able to highlight in all of the colors in the Google Docs color palette. To find the name of a color you wish to highlight in, open the highlight menu in Google Docs and hover over the color. This will show a tooltip with the name of the color, which can be entered into the `highlight` configuration.
 
 ![Highlight color palette](docs/highlight_palette.png)
 
@@ -87,13 +87,13 @@ The `heading` action changes the type of text in Docs (e.g., Normal text, Headin
 
 ![Heading configuration](docs/heading.png)
 
-This action will accept any value in the following drop-down (note that this is also case-sensitive):
+This action will accept any value in the following drop-down:
 
 ![Heading dropdown screenshot](docs/heading_dropdown.png)
 
 ### Align configuration
 
-The `align` action accepts any of the following values in its configuration field: `left`, `center`, `right`, or `justify` (case-sensitive).
+The `align` action accepts any of the following values in its configuration field: `left`, `center`, `right`, or `justify`.
 
 ## Set a keyboard shortcut
 

diff --git a/index.md b/index.md
@@ -84,7 +84,7 @@ The `highlight` action has a configuration option for the color of the highlight
 
 ![Highlight configuration screenshot](docs/highlight_configuration.png)
 
-Docs Hotkey is able to highlight in all of the colors in the Google Docs color palette. To find the name of a color you wish to highlight in, open the highlight menu in Google Docs and hover over the color. This will show a tooltip with the name of the color, which can be entered into the `highlight` configuration. Note that the highlight color should be entered exactly as shown by Google Docs, including case.
+Docs Hotkey is able to highlight in all of the colors in the Google Docs color palette. To find the name of a color you wish to highlight in, open the highlight menu in Google Docs and hover over the color. This will show a tooltip with the name of the color, which can be entered into the `highlight` configuration.
 
 ![Highlight color palette](docs/highlight_palette.png)
 
@@ -100,13 +100,13 @@ The `heading` action changes the type of text in Docs (e.g., Normal text, Headin
 
 ![Heading configuration](docs/heading.png)
 
-This action will accept any value in the following drop-down (note that this is also case-sensitive):
+This action will accept any value in the following drop-down:
 
 ![Heading dropdown screenshot](docs/heading_dropdown.png)
 
 ### Align configuration
 
-The `align` action accepts any of the following values in its configuration field: `left`, `center`, `right`, or `justify` (case-sensitive).
+The `align` action accepts any of the following values in its configuration field: `left`, `center`, `right`, or `justify`.
 
 ## Set a keyboard shortcut
 

diff --git a/public/icons/128.png b/public/icons/128.png
diff --git a/public/icons/16.png b/public/icons/16.png
diff --git a/public/icons/32.png b/public/icons/32.png
diff --git a/public/icons/64.png b/public/icons/64.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,14 +1,14 @@
 {
   "name": "Docs Hotkey",
-  "version": "0.1",
+  "version": "0.2",
   "description": "Create hotkeys for Google Docs",
   "permissions": ["activeTab", "storage"],
   "background": {
     "service_worker": "static/js/background.js"
   },
   "content_scripts": [
     {
-      "matches": ["*://docs.google.com/*"],
+      "matches": ["*://docs.google.com/document/d/*"],
       "js": ["static/js/content.js"],
       "run_at": "document_start",
       "all_frames": false

diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import {
   Heading,
   IconButton,
   Input,
+  Link,
   Text
 } from '@chakra-ui/react'
 import { DeleteIcon } from '@chakra-ui/icons'
@@ -69,7 +70,7 @@ const App: FC = () => {
     Object.entries(commands).forEach(([internalName, { alias, actions }]) => {
       actions.forEach((action, index) => {
         const type = getActionType(action)
-        const config = getActionConfig(action)
+        const config = getActionConfig(action).toLowerCase()
         if (type === 'al' && config !== 'left' && config !== 'center' && config !== 'right' && config !== 'justify') {
           addActionError(alias, index, 'the configuration for align must be one of `left`, `center`, `right`, or `justify`')
           hasErrors = true
@@ -130,115 +131,123 @@ const App: FC = () => {
   }, [])
 
   return (
-    <Box w={325} h={400}>
-      <Box bg='docsBlue' p='5px'>
-        <Heading color='white' ml='5px'>
-          Docs Hotkey
-        </Heading>
-      </Box>
-      {commands && (
-        <>
-          <Accordion allowMultiple>
-            {Object.entries(commands).map(([internalName, { actions, alias }]) => (
-              <AccordionItem key={internalName}>
-                <AccordionButton>
-                  <Heading as='h6' fontSize='14px'>
-                    {alias}
-                  </Heading>
-                  <AccordionIcon />
-                </AccordionButton>
-                <AccordionPanel>
-                  <Flex alignItems='center'>
-                    <FormLabel pt='8px' fontSize='14px'>
-                      Name:
-                    </FormLabel>
-                    <Input
-                      size='sm'
-                      value={alias}
-                      onChange={e => setCommands({ ...commands, [internalName]: { actions, alias: e.target.value } })}
-                      my='5px'
-                    />
-                    <IconButton
-                      ml='3px'
-                      bg='transparent'
+    <Flex flexDir='column' justifyContent='space-between' w={325} h={400}>
+      <Box>
+        <Box bg='docsBlue' p='5px'>
+          <Heading color='white' ml='5px'>
+            Docs Hotkey
+          </Heading>
+        </Box>
+        {commands && (
+          <>
+            <Accordion allowMultiple>
+              {Object.entries(commands).map(([internalName, { actions, alias }]) => (
+                <AccordionItem key={internalName}>
+                  <AccordionButton>
+                    <Heading as='h6' fontSize='14px'>
+                      {alias}
+                    </Heading>
+                    <AccordionIcon />
+                  </AccordionButton>
+                  <AccordionPanel>
+                    <Flex alignItems='center'>
+                      <FormLabel pt='8px' fontSize='14px'>
+                        Name:
+                      </FormLabel>
+                      <Input
+                        size='sm'
+                        value={alias}
+                        onChange={e => setCommands({ ...commands, [internalName]: { actions, alias: e.target.value } })}
+                        my='5px'
+                      />
+                      <IconButton
+                        ml='3px'
+                        bg='transparent'
+                        size='sm'
+                        icon={<DeleteIcon fontSize='sm' color='red.400' />}
+                        aria-label='Delete command'
+                        onClick={() => onDeleteCommand(internalName)}
+                      />
+                    </Flex>
+                    <Heading as='h6' fontSize='14px' mt='5px'>
+                      Actions
+                    </Heading>
+                    <Box>
+                      {actions.map((action, index) => (
+                        // I'm using the index as a key, fight me (bc the order won't change and adding an id would increase complexity)
+                        <Box key={`action-${index}`}>
+                          <ActionDisplay
+                            value={action}
+                            onChange={v => onActionChange(v, internalName, alias, actions, index)}
+                            onDelete={() => onDeleteAction(internalName, index)}
+                          />
+                        </Box>
+                      ))}
+                    </Box>
+                    <Button
+                      fontWeight='normal'
+                      textDecor='underline'
+                      m='3px'
+                      color='#777'
                       size='sm'
-                      icon={<DeleteIcon fontSize='sm' color='red.400' />}
-                      aria-label='Delete command'
-                      onClick={() => onDeleteCommand(internalName)}
-                    />
-                  </Flex>
-                  <Heading as='h6' fontSize='14px' mt='5px'>
-                    Actions
-                  </Heading>
-                  <Box>
-                    {actions.map((action, index) => (
-                      // I'm using the index as a key, fight me (bc the order won't change and adding an id would increase complexity)
-                      <Box key={`action-${index}`}>
-                        <ActionDisplay
-                          value={action}
-                          onChange={v => onActionChange(v, internalName, alias, actions, index)}
-                          onDelete={() => onDeleteAction(internalName, index)}
-                        />
-                      </Box>
-                    ))}
-                  </Box>
-                  <Button
-                    fontWeight='normal'
-                    textDecor='underline'
-                    m='3px'
-                    color='#777'
-                    size='sm'
-                    variant='link'
-                    onClick={() => setCommands({ ...commands, [internalName]: { actions: [...actions, ''], alias } })}
-                  >
-                    Add action
-                  </Button>
-                  <Text m='3px' color='#777' fontSize='sm'>
-                    This command is in shortcut slot {internalName.substring(4)}
-                  </Text>
-                </AccordionPanel>
-              </AccordionItem>
-            ))}
-          </Accordion>
+                      variant='link'
+                      onClick={() => setCommands({ ...commands, [internalName]: { actions: [...actions, ''], alias } })}
+                    >
+                      Add action
+                    </Button>
+                    <Text m='3px' color='#777' fontSize='sm'>
+                      This command is in shortcut slot {internalName.substring(4)}
+                    </Text>
+                  </AccordionPanel>
+                </AccordionItem>
+              ))}
+            </Accordion>
+            <Button
+              fontWeight='normal'
+              textDecor='underline'
+              m='5px'
+              ml='15px'
+              mt='10px'
+              color='#777'
+              size='sm'
+              variant='link'
+              onClick={onAddCommand}
+            >
+              Add command
+            </Button>
+          </>
+        )}
+        <Box>
           <Button
-            fontWeight='normal'
-            textDecor='underline'
-            m='5px'
-            ml='15px'
+            color='#fff'
             mt='10px'
-            color='#777'
+            ml='15px'
+            mb='10px'
+            borderRadius='3px'
             size='sm'
-            variant='link'
-            onClick={onAddCommand}
+            variant='filled'
+            bg='docsBlue'
+            _hover={{ bg: 'docsBlueHover' }}
+            _active={{ bg: 'docsBlueClick' }}
+            onClick={onSave}
           >
-            Add command
+            Save All
           </Button>
-        </>
-      )}
-      <Box>
-        <Button
-          color='#fff'
-          mt='10px'
-          ml='15px'
-          mb='10px'
-          borderRadius='3px'
-          size='sm'
-          variant='filled'
-          bg='docsBlue'
-          _hover={{ bg: 'docsBlueHover' }}
-          onClick={onSave}
-        >
-          Save All
-        </Button>
-      </Box>
-      <Box pb='20px' ml='15px' mr='20px'>
-        {errors.map(e => (
-          <Text fontWeight='bold' color='red.400' size='sm' mt='5px'>
-            {e}
-          </Text>
-        ))}
+        </Box>
+        <Box pb='20px' ml='15px' mr='20px'>
+          {errors.map(e => (
+            <Text fontWeight='bold' color='red.400' size='sm' mt='5px'>
+              {e}
+            </Text>
+          ))}
+        </Box>
       </Box>
-    </Box>
+      <Flex w='100%' justifyContent='center' mb='10px'>
+        <Link ml='15px' fontSize='14px' color='#777' isExternal href='https://zackmurry.github.io/docs-hotkey'>
+          Help
+        </Link>
+      </Flex>
+    </Flex>
   )
 }
 

diff --git a/src/content.ts b/src/content.ts
@@ -100,7 +100,7 @@ const fontFamily = (val: string) => {
   for (let i = 0; i < allFontContainer.children.length; i++) {
     const fontElement = allFontContainer.children[i] as HTMLElement
     const fontText = fontElement.children[0].children[1].innerHTML
-    if (fontText === val) {
+    if (fontText.toLowerCase() === val.toLowerCase()) {
       clickEl(fontElement)
       break
     }
@@ -211,15 +211,15 @@ const highlight = (color: string, toggle: boolean = false) => {
     throw new Error('unable to highlight')
   }
   clickEl(dropdownElement)
-  if (color === 'none') {
+  if (color.toLowerCase() === 'none') {
     unhighlight()
     return
   }
-  if (!colorMap.has(color)) {
+  if (!colorMap.has(color.toLowerCase())) {
     throw new Error('unknown color!')
   }
 
-  const highlightEl = document.getElementById(`docs-material-colorpalette-cell-${colorMap.get(color)}`)
+  const highlightEl = document.getElementById(`docs-material-colorpalette-cell-${colorMap.get(color.toLowerCase())}`)
   if (!highlightEl) {
     throw new Error('unable to highlight')
   }
@@ -275,7 +275,7 @@ const heading = (val: string) => {
       throw new Error('unable to set heading type')
     }
     console.log(headingText)
-    if (headingText === val) {
+    if (headingText.toLowerCase() === val.toLowerCase()) {
       clickEl(headingItemContainer)
       console.log('clicked')
       break
@@ -285,13 +285,14 @@ const heading = (val: string) => {
 
 const align = (val: string) => {
   let element: HTMLElement | null
-  if (val === 'left') {
+  const alignment = val.toLowerCase()
+  if (alignment === 'left') {
     element = document.getElementById('alignLeftButton')
-  } else if (val === 'center') {
+  } else if (alignment === 'center') {
     element = document.getElementById('alignCenterButton')
-  } else if (val === 'right') {
+  } else if (alignment === 'right') {
     element = document.getElementById('alignRightButton')
-  } else if (val === 'justify') {
+  } else if (alignment === 'justify') {
     element = document.getElementById('alignJustifyButton')
   } else {
     throw new Error('unknown alignment option: ' + val)

diff --git a/src/theme.ts b/src/theme.ts
@@ -3,7 +3,8 @@ import { extendTheme } from '@chakra-ui/react'
 const theme = extendTheme({
   colors: {
     docsBlue: '#1a73e8',
-    docsBlueHover: '#63a0ef'
+    docsBlueHover: '#63a0ef',
+    docsBlueClick: '#6ea9f5'
   },
   fonts: {
     heading: "Roboto, 'Noto Sans', Sans-Serif",