[GH-315] Enable spell checking in inputs and markdown editor (#372)

* [GH-315] Enable spell checking in inputs and markdown editor

Relates to: #315

* Update snapshots

webapp/src/components/cardDetail/cardDetail.tsx

@@ -93,6 +93,7 @@ const CardDetail = (props: Props): JSX.Element|null => {
                     }}
                     onCancel={() => setTitle(props.cardTree.card.title)}
                     readonly={props.readonly}
+                    spellCheck={true}
                 />
 
                 {/* Property list */}

webapp/src/components/content/__snapshots__/checkboxElement.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`components/content/CheckboxElement should match snapshot 1`] = `
     <input
       class="Editable undefined"
       placeholder="Edit text..."
+      spellcheck="true"
       title="test-title"
       value="test-title"
     />
@@ -33,6 +34,7 @@ exports[`components/content/CheckboxElement should match snapshot on change titl
     <input
       class="Editable undefined"
       placeholder="Edit text..."
+      spellcheck="true"
       title="test-title"
       value="test-title"
     >
@@ -57,6 +59,7 @@ exports[`components/content/CheckboxElement should match snapshot on read only 1
       class="Editable undefined"
       placeholder="Edit text..."
       readonly=""
+      spellcheck="true"
       title="test-title"
       value="test-title"
     />
@@ -77,6 +80,7 @@ exports[`components/content/CheckboxElement should match snapshot on toggle 1`]
     <input
       class="Editable undefined"
       placeholder="Edit text..."
+      spellcheck="true"
       title="test-title"
       value="test-title"
     />

webapp/src/components/content/checkboxElement.tsx

@@ -52,6 +52,7 @@ const CheckboxElement = React.memo((props: Props) => {
                     mutator.updateBlock(newBlock, block, intl.formatMessage({id: 'ContentBlock.editCardCheckboxText', defaultMessage: 'edit card text'}))
                 }}
                 readonly={readonly}
+                spellCheck={true}
             />
         </div>
     )

webapp/src/components/kanban/kanbanColumnHeader.tsx

@@ -104,6 +104,7 @@ export default function KanbanColumnHeader(props: Props): JSX.Element {
                             setGroupTitle(group.option.value)
                         }}
                         readonly={props.readonly}
+                        spellCheck={true}
                     />
                 </Label>}
             <Button>{`${group.cards.length}`}</Button>

webapp/src/components/markdownEditor.tsx

@@ -145,6 +145,8 @@ const MarkdownEditor = (props: Props): JSX. Element => {
                     toolbar: false,
                     status: false,
                     spellChecker: false,
+                    inputStyle: 'contenteditable',
+                    nativeSpellcheck: true,
                     minHeight: '10px',
                     shortcuts: {
                         toggleStrikethrough: 'Cmd-.',

webapp/src/components/propertyValueElement.tsx

@@ -130,6 +130,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
                     onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, value)}
                     onCancel={() => setValue(propertyValue)}
                     validator={(newValue) => validateProp(propertyTemplate.type, newValue)}
+                    spellCheck={propertyTemplate.type === 'text'}
                 />
             )
         }

webapp/src/components/table/tableRow.tsx

@@ -92,6 +92,7 @@ const TableRow = React.memo((props: Props) => {
                         }}
                         onCancel={() => setTitle(card.title)}
                         readonly={props.readonly}
+                        spellCheck={true}
                     />
                 </div>
 

webapp/src/components/viewHeader/viewHeader.tsx

@@ -65,6 +65,7 @@ const ViewHeader = React.memo((props: Props) => {
                 onChange={setViewTitle}
                 saveOnEsc={true}
                 readonly={props.readonly}
+                spellCheck={true}
             />
             <MenuWrapper>
                 <IconButton icon={<DropdownIcon/>}/>

webapp/src/components/viewTitle.tsx

@@ -83,6 +83,7 @@ const ViewTitle = React.memo((props: Props) => {
                     onSave={() => mutator.changeTitle(board, title)}
                     onCancel={() => setTitle(props.board.title)}
                     readonly={props.readonly}
+                    spellCheck={true}
                 />
             </div>
 

webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
       >
         <input
           class="PropertyMenu menu-textbox"
+          spellcheck="true"
           type="text"
           value="test-property"
         />

webapp/src/widgets/editable.tsx

@@ -11,6 +11,7 @@ type Props = {
     className?: string
     saveOnEsc?: boolean
     readonly?: boolean
+    spellCheck?: boolean
 
     validator?: (value: string) => boolean
     onCancel?: () => void
@@ -90,6 +91,7 @@ const Editable = (props: Props, ref: React.Ref<{focus: (selectAll?: boolean) =>
                 }
             }}
             readOnly={props.readonly}
+            spellCheck={props.spellCheck}
         />
     )
 }

webapp/src/widgets/propertyMenu.tsx

@@ -75,6 +75,7 @@ const PropertyMenu = React.memo((props: Props) => {
                         e.stopPropagation()
                     }
                 }}
+                spellCheck={true}
             />
             <Menu.SubMenu
                 id='type'