feat: implement underline functionality to markdown editor

packages/decap-cms-locales/src/en/index.js

@@ -157,6 +157,7 @@ const en = {
       markdown: {
         bold: 'Bold',
         italic: 'Italic',
+        underline: 'Underline',
         strikethrough: 'Strikethrough',
         code: 'Code',
         link: 'Link',
@@ -165,6 +166,7 @@ const en = {
         quote: 'Quote',
         bulletedList: 'Bulleted List',
         numberedList: 'Numbered List',
+        horizontalRule: 'Horizontal Rule',
         addComponent: 'Add Component',
         richText: 'Rich Text',
         markdown: 'Markdown',

packages/decap-cms-ui-default/src/Icon/images/_index.js

@@ -22,6 +22,7 @@ import iconH1 from './h1.svg';
 import iconH2 from './h2.svg';
 import iconHOptions from './h-options.svg';
 import iconHome from './home.svg';
+import iconHorizontalRule from './horizontal-rule.svg';
 import iconImage from './image.svg';
 import iconInfoCircle from './info-circle.svg';
 import iconItalic from './italic.svg';
@@ -43,6 +44,7 @@ import iconScroll from './scroll.svg';
 import iconSearch from './search.svg';
 import iconSettings from './settings.svg';
 import iconStrikethrough from './strikethrough.svg';
+import iconUnderline from './underline.svg';
 import iconUser from './user.svg';
 import iconWorkflow from './workflow.svg';
 import iconWrite from './write.svg';
@@ -74,6 +76,7 @@ const images = {
   h2: iconH2,
   hOptions: iconHOptions,
   home: iconHome,
+  'horizontal-rule': iconHorizontalRule,
   image: iconImage,
   'info-circle': iconInfoCircle,
   italic: iconItalic,
@@ -96,6 +99,7 @@ const images = {
   search: iconSearch,
   settings: iconSettings,
   strikethrough: iconStrikethrough,
+  underline: iconUnderline,
   user: iconUser,
   workflow: iconWorkflow,
   write: iconWrite,

packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -74,6 +74,7 @@ export default class Toolbar extends React.Component {
     onMarkClick: PropTypes.func,
     onBlockClick: PropTypes.func,
     onLinkClick: PropTypes.func,
+    onInsertHorizontalRule: PropTypes.func,
     hasMark: PropTypes.func,
     hasInline: PropTypes.func,
     hasBlock: PropTypes.func,
@@ -97,6 +98,13 @@ export default class Toolbar extends React.Component {
     this.props.onBlockClick(type);
   };
 
+  handleHorizontalRuleClick = event => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.props.onInsertHorizontalRule();
+  };
+
   handleMarkClick = (event, type) => {
     event.preventDefault();
     this.props.onMarkClick(type);
@@ -160,6 +168,16 @@ export default class Toolbar extends React.Component {
               disabled={disabled}
             />
           )}
+          {isVisible('underline') && (
+            <ToolbarButton
+              type="underline"
+              label={t('editor.editorWidgets.markdown.underline')}
+              icon="underline"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('underline')}
+              disabled={disabled}
+            />
+          )}
           {isVisible('strikethrough') && (
             <ToolbarButton
               type="strikethrough"
@@ -253,6 +271,16 @@ export default class Toolbar extends React.Component {
               disabled={disabled}
             />
           )}
+          {isVisible('horizontal-rule') && (
+            <ToolbarButton
+              type="thematic-break"
+              label={t('editor.editorWidgets.markdown.horizontalRule')}
+              icon="horizontal-rule"
+              onClick={this.handleHorizontalRuleClick}
+              isActive={false}
+              disabled={disabled}
+            />
+          )}
           {showEditorComponents && (
             <ToolbarDropdownWrapper>
               <Dropdown

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

@@ -167,6 +167,14 @@ function Editor(props) {
     insertShortcode(editor, pluginConfig);
   }
 
+  function handleInsertHorizontalRule() {
+    Transforms.insertNodes(editor, {
+      type: 'thematic-break',
+      children: [{ text: '' }],
+    });
+    ReactEditor.focus(editor);
+  }
+
   function handleKeyDown(event) {
     for (const handler of editor.keyDownHandlers || []) {
       if (handler(event, editor) === false) {
@@ -231,6 +239,7 @@ function Editor(props) {
               onMarkClick={handleMarkClick}
               onBlockClick={handleBlockClick}
               onLinkClick={handleLinkClick}
+              onInsertHorizontalRule={handleInsertHorizontalRule}
               onToggleMode={handleToggleMode}
               plugins={editorComponents}
               onSubmit={handleInsertShortcode}

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

@@ -119,6 +119,10 @@ function Italic(props) {
   return <em>{props.children}</em>;
 }
 
+function Underline(props) {
+  return <u>{props.children}</u>;
+}
+
 function Strikethrough(props) {
   return <s>{props.children}</s>;
 }
@@ -267,6 +271,10 @@ export function Leaf({ attributes, children, leaf }) {
     children = <Italic>{children}</Italic>;
   }
 
+  if (leaf.underline) {
+    children = <Underline>{children}</Underline>;
+  }
+
   if (leaf.delete) {
     children = <Strikethrough>{children}</Strikethrough>;
   }

packages/decap-cms-widget-markdown/src/schema.js

@@ -8,6 +8,7 @@ export default {
         enum: [
           'bold',
           'italic',
+          'underline',
           'strikethrough',
           'code',
           'link',
@@ -20,6 +21,7 @@ export default {
           'quote',
           'bulleted-list',
           'numbered-list',
+          'horizontal-rule',
         ],
       },
     },

packages/decap-cms-widget-markdown/src/serializers/slateRemark.js

@@ -40,6 +40,7 @@ const typeMap = {
 const markMap = {
   bold: 'strong',
   italic: 'emphasis',
+  underline: 'underline',
   delete: 'delete',
   code: 'inlineCode',
 };
@@ -275,6 +276,21 @@ export default function slateToRemark(value, { voidCodeBlock }) {
         if (markType === 'code') {
           const node = markNodes[0];
           convertedNodes.push(u(markMap[markType], node.data, node.text));
+        } else if (markType === 'underline') {
+          // Handle underline as HTML since Markdown doesn't have native underline syntax
+          const { leadingWhitespace, trailingWhitespace, centerNodes } =
+            normalizeFlankingWhitespace(markNodes);
+          const children = convertInlineAndTextChildren(centerNodes);
+          const textContent = mdastToString({ type: 'paragraph', children });
+          const htmlNode = u('html', `<u>${textContent}</u>`);
+
+          const normalizedNodes = [
+            leadingWhitespace && createText(leadingWhitespace),
+            htmlNode,
+            trailingWhitespace && createText(trailingWhitespace),
+          ].filter(val => val);
+
+          convertedNodes.push(...normalizedNodes);
         } else if (!markType && markNodes.length === 1 && isNodeInline(nextNode)) {
           const node = markNodes[0];
           convertedNodes.push(convertInlineNode(node, convertInlineAndTextChildren(node.children)));