fix(react-tinacms-editor): seevral UX issues addressed for tables, he…

…adings, and the link modal (#1393)
tinacms · Aug 12, 2020 · 28cfaec · 28cfaec
1 parent a5ea2a6
commit 28cfaec
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/react-tinacms-editor/src/plugins/Block/Menu/ProsemirrorMenu.tsx b/packages/react-tinacms-editor/src/plugins/Block/Menu/ProsemirrorMenu.tsx
@@ -44,6 +44,7 @@ export const ProsemirrorMenu: FunctionComponent = () => {
       <MenuButton
         ref={menuButtonRef}
         data-tooltip="Heading"
+        title="Heading"
         onClick={toggle}
         active={active}
       >

diff --git a/packages/react-tinacms-editor/src/plugins/Link/Popups/InnerForm.tsx b/packages/react-tinacms-editor/src/plugins/Link/Popups/InnerForm.tsx
@@ -43,8 +43,11 @@ export class InnerForm extends React.Component<Props, State> {
     // title: this.props.title || '',
   }
 
+  inputRef = React.createRef<HTMLInputElement>()
+
   componentDidMount() {
     document.addEventListener('keydown', this.onEscapeCancel)
+    if (this.inputRef.current) this.inputRef.current.focus()
   }
 
   componentWillUnmount() {
@@ -56,6 +59,13 @@ export class InnerForm extends React.Component<Props, State> {
     if (href !== prevProps.href) this.setState(() => ({ href }))
   }
 
+  closeModal() {
+    const { href } = this.state
+    const { cancel, removeLink, href: originalHref } = this.props
+    if (!href && !originalHref) removeLink()
+    cancel()
+  }
+
   setHref = ({ target: { value } }: E) => this.setState(() => ({ href: value }))
   // setTitle = ({ target: { value } }: E) =>
   //   this.setState(() => ({ title: value }))
@@ -70,7 +80,7 @@ export class InnerForm extends React.Component<Props, State> {
 
   onEscapeCancel = (e: KeyboardEvent) => {
     if (e.keyCode === 27) {
-      this.props.cancel()
+      this.closeModal()
     }
   }
 
@@ -93,6 +103,7 @@ export class InnerForm extends React.Component<Props, State> {
         /> */}
         <LinkLabel>URL</LinkLabel>
         <LinkInput
+          ref={this.inputRef}
           placeholder="Enter URL"
           type={'text'}
           value={href}
@@ -101,7 +112,9 @@ export class InnerForm extends React.Component<Props, State> {
         />
         <LinkActions>
           <DeleteLink onClick={removeLink}>Delete</DeleteLink>
-          <SaveLink onClick={this.save}>Save</SaveLink>
+          <SaveLink onClick={this.save} disabled={!href}>
+            Save
+          </SaveLink>
         </LinkActions>
       </LinkPopup>
     )
@@ -194,6 +207,10 @@ const SaveLink = styled.button`
   &:active {
     background-color: #0574e4;
   }
+  &:disabled {
+    background-color: #d1d1d1;
+    box-shadow: none;
+  }
 `
 
 const DeleteLink = styled.button`

diff --git a/packages/react-tinacms-editor/src/plugins/Table/commands/index.ts b/packages/react-tinacms-editor/src/plugins/Table/commands/index.ts
@@ -58,8 +58,8 @@ export const insertTable = (
   const newTable = table.createChecked(null, rows)
   const { selection, tr } = state
   const { $from, $to } = selection
-  dispatch(
-    tr.replaceWith($from.pos - 1, $to.pos + 1, newTable).scrollIntoView()
-  )
+  const start = $from.pos - 1
+  const end = $to.pos < state.doc.content.size ? $to.pos + 1 : $to.pos
+  dispatch(tr.replaceWith(start, end, newTable).scrollIntoView())
   return true
 }