fix(widget-markdown): improve UX in Markdown editor - link editing and selected heading underline (#5104)

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -65,6 +65,9 @@ function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
           color: ${colors.active};
           background-color: ${colors.activeBackground};
         }
+        &.active {
+          text-decoration: underline;
+        }
       `}
       {...props}
     />

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -156,8 +156,8 @@ export default class Editor extends React.Component {
   };
 
   handleLinkClick = () => {
-    this.editor.toggleLink(() =>
+    this.editor.toggleLink(oldUrl =>
-      window.prompt(this.props.t('editor.editorWidgets.markdown.linkPrompt')),
+      window.prompt(this.props.t('editor.editorWidgets.markdown.linkPrompt'), oldUrl),
     );
   };
 

packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/Link.js

@@ -2,24 +2,35 @@ function Link({ type }) {
   return {
     commands: {
       toggleLink(editor, getUrl) {
-        if (editor.hasInline(type)) {
-          editor.unwrapInline(type);
-        } else {
-          const url = getUrl();
-          if (!url) return;
-
         const selection = editor.value.selection;
         const isCollapsed = selection && selection.isCollapsed;
-          if (isCollapsed) {
+
-            // If no text is selected, use the entered URL as text.
+        if (editor.hasInline(type)) {
-            return editor.insertInline({
+          const inlines = editor.value.inlines.toJSON();
+          const link = inlines.find(item => item.type === type);
+
+          const url = getUrl(link.data.url);
+
+          if (url) {
+            // replace the old link
+            return editor.setInlines({ data: { url } });
+          } else {
+            // remove url if it was removed by the user
+            return editor.unwrapInline(type);
+          }
+        } else {
+          const url = getUrl();
+          if (!url) {
+            return;
+          }
+
+          return isCollapsed
+            ? editor.insertInline({
                 type,
                 data: { url },
                 nodes: [{ object: 'text', text: url }],
-            });
+              })
-          } else {
+            : editor.wrapInline({ type, data: { url } }).moveToEnd();
-            return editor.wrapInline({ type, data: { url } }).moveToEnd();
-          }
         }
       },
     },

packages/netlify-cms-widget-markdown/src/MarkdownControl/renderers.js

@@ -97,6 +97,7 @@ const StyledLi = styled.li`
 
 const StyledA = styled.a`
   text-decoration: underline;
+  font-size: inherit;
 `;
 
 const StyledHr = styled.hr`
@@ -237,7 +238,8 @@ function NumberedList(props) {
 function Link(props) {
   const data = props.node.get('data');
   const url = data.get('url');
-  const title = data.get('title');
+  const title = data.get('title') || url;
+
   return (
     <StyledA href={url} title={title} {...props.attributes}>
       {props.children}