fix: make hint markdown link clickable (#971)

Author: KaneFreeman

packages/core/dev-test/config.yml

@@ -75,7 +75,7 @@ collections:
       - label: Body
         name: body
         widget: markdown
-        hint: "*Main* __content__ __*goes*__ [here](example.com)."
+        hint: "*Main* __content__ __*goes*__ [here](https://example.com/)."
   - name: faq
     label: FAQ
     folder: _faqs

packages/core/src/components/common/field/Hint.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 
 import useCursor from '@staticcms/core/lib/hooks/useCursor';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 
-import type { FC } from 'react';
+import type { FC, MouseEvent } from 'react';
 
 import './Hint.css';
 
@@ -40,6 +40,10 @@ const Hint: FC<HintProps> = ({
 }) => {
   const finalCursor = useCursor(cursor, disabled);
 
+  const handleOnClick = useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
   return (
     <div
       data-testid="hint"
@@ -53,6 +57,7 @@ const Hint: FC<HintProps> = ({
         variant === 'inline' && classes.inline,
         className,
       )}
+      onClick={handleOnClick}
     >
       <ReactMarkdown
         remarkPlugins={[gfm]}