feat: add focus ring to inline wysiwyg

packages/demo-next/pages/blog/[slug].tsx

@@ -27,11 +27,10 @@ import {
 } from 'react-tinacms-inline'
 import grayMatter from 'gray-matter'
 import { useCMS } from 'tinacms'
-import { Wysiwyg } from 'react-tinacms-editor'
+import { InlineWysiwyg } from 'react-tinacms-editor'
 import Link from 'next/link'
 
 const Post: NextPage<{ post: MarkdownFile }> = props => {
-  console.log(props)
   const [post, form] = useLocalMarkdownForm(props.post, {
     fields: [
       { name: 'frontmatter.title', component: 'text' },
@@ -44,7 +43,7 @@ const Post: NextPage<{ post: MarkdownFile }> = props => {
 
   return (
     <InlineForm form={form}>
-      <nav>
+      <nav style={{ padding: '2rem' }}>
         <Link as="/blog/apple" href="/blog/[slug]">
           <a>Apple</a>
         </Link>
@@ -55,23 +54,17 @@ const Post: NextPage<{ post: MarkdownFile }> = props => {
           <a>Cake</a>
         </Link>
       </nav>
-      <article>
+      <article style={{ padding: '2rem' }}>
         <header>
           <SaveButton />
           <ResetButton />
           <h1>
             <InlineText name="frontmatter.title" />
           </h1>
         </header>
-        <InlineField name="markdownBody">
-          {({ input }) => {
-            if (cms.enabled) {
-              return <Wysiwyg input={input} />
-            }
-
-            return <ReactMarkdown>{input.value}</ReactMarkdown>
-          }}
-        </InlineField>
+        <InlineWysiwyg name="markdownBody">
+          <ReactMarkdown source={post.markdownBody} />
+        </InlineWysiwyg>
       </article>
     </InlineForm>
   )

packages/react-tinacms-editor/src/tinacms-inline/inline-wysiwyg.tsx

@@ -18,28 +18,63 @@ limitations under the License.
 
 import * as React from 'react'
 import { useCMS } from 'tinacms'
-import { InlineField } from 'react-tinacms-inline'
+import { InlineField, FocusRing, useInlineForm } from 'react-tinacms-inline'
+import { FocusRingStyleProps } from 'react-tinacms-inline/src/styles'
 import { Wysiwyg } from '../components/Wysiwyg'
 import { EditorProps } from '../types'
 
 export interface InlineWysiwygFieldProps extends Omit<EditorProps, 'input'> {
   name: string
   children: any
+  focusRing?: false | FocusRingStyleProps
 }
 
 export function InlineWysiwyg({
   name,
   children,
+  focusRing = false,
   ...wysiwygProps
 }: InlineWysiwygFieldProps) {
   const cms = useCMS()
+  const [active, setActive] = React.useState(false)
+  const { focussedField, setFocussedField } = useInlineForm()
+  const focusRingRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    setActive(name === focussedField)
+  }, [active, focussedField])
+
+  if (cms.disabled) {
+    return children
+  }
+
+  const handleSetActive = (event: any) => {
+    if (active) return
+    setFocussedField(name)
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  const offset = typeof focusRing === 'object' ? focusRing.offset : undefined
+
   return (
     <InlineField name={name}>
       {({ input }: any) => {
-        if (cms.enabled) {
-          return <Wysiwyg input={input} {...wysiwygProps} />
-        }
-        return <>{children}</>
+        return (
+          <FocusRing
+            ref={focusRingRef}
+            active={active}
+            onClick={handleSetActive}
+            offset={offset}
+            borderRadius={
+              typeof focusRing === 'object' ? focusRing.borderRadius : undefined
+            }
+            disableHover={!focusRing}
+            disableChildren={false}
+          >
+            <Wysiwyg input={input} {...wysiwygProps} />
+          </FocusRing>
+        )
       }}
     </InlineField>
   )

packages/react-tinacms-inline/src/styles/focus-ring.tsx

@@ -19,7 +19,7 @@ import styled, { css } from 'styled-components'
 import { BlocksEmptyState } from '../blocks/inline-field-blocks'
 
 export interface FocusRingStyleProps {
-  offset?: number | { x: number; y: number }
+  offset?: number | { x: number; y: number } | undefined
   borderRadius?: number
 }