Add "selected shadow" to link example (#4609)

Due to standard link CSS, the cursor at the end of the link looks the
same as the cursor immediately after the link, and the cursor at the
start of the link looks the same as the cursor immediately before the
link. However, these are semantically different locations. I've had
several problems with Slate misinterpreting these locations, and had
trouble showing these problems to others using the standard examples,
because the only example of an editable inline element is the link.

To fix this, I've added a box-shadow to the link when it's selected. It
should now be clear to the user whether the cursor is inside or
outside the element.

site/examples/links.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import isUrl from 'is-url'
-import { Slate, Editable, withReact, useSlate } from 'slate-react'
+import { css } from 'emotion'
+import { Slate, Editable, withReact, useSlate, useSelected } from 'slate-react'
 import {
   Transforms,
   Editor,
@@ -105,14 +106,30 @@ const wrapLink = (editor, url) => {
   }
 }
 
-const Element = ({ attributes, children, element }) => {
+const LinkComponent = ({ attributes, children, element }) => {
+  const selected = useSelected()
+  return (
+    <a
+      {...attributes}
+      href={element.url}
+      className={
+        selected
+          ? css`
+              box-shadow: 0 0 0 3px #ddd;
+            `
+          : ''
+      }
+    >
+      {children}
+    </a>
+  )
+}
+
+const Element = props => {
+  const { attributes, children, element } = props
   switch (element.type) {
     case 'link':
-      return (
-        <a {...attributes} href={element.url}>
-          {children}
-        </a>
-      )
+      return <LinkComponent {...props} />
     default:
       return <p {...attributes}>{children}</p>
   }