Fixed a few issues with the Markdown field UI (#2759)

keystonejs · Apr 17, 2020 · 3917509 · 3917509
1 parent d317bea
commit 3917509
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/.changeset/rare-pets-deliver.md b/.changeset/rare-pets-deliver.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/fields-markdown': patch
+---
+
+Fixed a few issues with the Markdown field UI.
diff --git a/packages/fields-markdown/src/views/Field.js b/packages/fields-markdown/src/views/Field.js
@@ -6,14 +6,16 @@ import { styles } from './styles';
 import { A11yText } from '@arch-ui/typography';
 import Tooltip from '@arch-ui/tooltip';
 import { gridSize, colors, borderRadius } from '@arch-ui/theme';
-import { FieldContainer, FieldLabel } from '@arch-ui/fields';
+import { FieldContainer, FieldLabel, FieldDescription } from '@arch-ui/fields';
+
 import 'codemirror';
 import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/gfm/gfm';
+
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import { getTools } from './get-tools';
 
-let ToolbarButton = forwardRef((props, ref) => {
+const ToolbarButton = forwardRef((props, ref) => {
   return (
     <button
       type="button"
@@ -33,7 +35,7 @@ let ToolbarButton = forwardRef((props, ref) => {
   );
 });
 
-let IconToolbarButton = ({ isActive, label, icon, tooltipPlacement = 'top', ...props }) => {
+const IconToolbarButton = ({ isActive, label, icon, tooltipPlacement = 'top', ...props }) => {
   return (
     <Tooltip placement={tooltipPlacement} css={{ margin: gridSize * 2 }} content={label}>
       {ref => (
@@ -66,23 +68,20 @@ export default function MarkdownField({ field, errors, value, onChange }) {
     error => error instanceof Error && error.name === 'AccessDeniedError'
   );
 
-  let [tools, setTools] = useState([]);
+  const [tools, setTools] = useState([]);
 
-  let toolbar = useMemo(() => {
+  const toolbar = useMemo(() => {
     return (
-      <div css={{ display: 'flex', paddingTop: gridSize }}>
-        {tools.map(tool => {
-          let onClick = () => {
-            tool.action();
-          };
-          return (
-            <IconToolbarButton
-              key={tool.label}
-              icon={<tool.icon />}
-              onClick={onClick}
-              label={tool.label}
-            />
-          );
+      <div
+        css={{
+          display: 'flex',
+          padding: `${gridSize}px 0`,
+          borderBottom: `1px solid ${colors.N10}`,
+          marginBottom: `${gridSize}px`,
+        }}
+      >
+        {tools.map(({ action, label, icon: Icon }) => {
+          return <IconToolbarButton key={label} icon={<Icon />} onClick={action} label={label} />;
         })}
       </div>
     );
@@ -96,18 +95,19 @@ export default function MarkdownField({ field, errors, value, onChange }) {
         styles,
         {
           '.cm-s-mirrormark .CodeMirror-scroll': {
-            paddingTop: gridSize,
-            paddingLeft: gridSize,
+            padding: 0,
+            marginBottom: '1em',
           },
         },
       ]}
     >
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
+      {field.config.adminDoc && <FieldDescription>{field.config.adminDoc}</FieldDescription>}
       <div
         css={{
           border: `1px ${colors.N20} solid`,
           borderRadius,
-          paddingBottom: gridSize,
+          padding: `${gridSize}px`,
         }}
       >
         {toolbar}