feat: pass markdown for hint message on field (#5584)

packages/netlify-cms-core/package.json

@@ -49,6 +49,7 @@
     "react-hot-loader": "^4.8.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-is": "16.13.1",
+    "react-markdown": "^6.0.2",
     "react-modal": "^3.8.1",
     "react-polyglot": "^0.7.0",
     "react-redux": "^7.2.0",

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
 import { partial, uniqueId } from 'lodash';
 import { connect } from 'react-redux';
 import { FieldLabel, colors, transitions, lengths, borders } from 'netlify-cms-ui-default';
+import ReactMarkdown from 'react-markdown';
 
 import { resolveWidget, getEditorComponents } from '../../../lib/registry';
 import { clearFieldErrors, tryLoadEntry, validateMetaField } from '../../../actions/entries';
@@ -328,7 +329,23 @@ class EditorControl extends React.Component {
             />
             {fieldHint && (
               <ControlHint active={isSelected || this.state.styleActive} error={hasErrors}>
-                {fieldHint}
+                <ReactMarkdown
+                  allowedElements={['a', 'strong', 'em']}
+                  unwrapDisallowed={true}
+                  components={{
+                    // eslint-disable-next-line no-unused-vars
+                    a: ({ node, ...props }) => (
+                      <a
+                        {...props}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: 'inherit' }}
+                      />
+                    ),
+                  }}
+                >
+                  {fieldHint}
+                </ReactMarkdown>
               </ControlHint>
             )}
           </ControlContainer>