feat: implement underline functionality to markdown editor

Author: penglezos

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',

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

@@ -43,6 +43,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';
@@ -96,6 +97,7 @@ const images = {
   search: iconSearch,
   settings: iconSettings,
   strikethrough: iconStrikethrough,
+  underline: iconUnderline,
   user: iconUser,
   workflow: iconWorkflow,
   write: iconWrite,

packages/decap-cms-ui-default/src/Icon/images/underline.svg

@@ -160,6 +160,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"

packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.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/MarkdownControl/renderers.js

@@ -8,6 +8,7 @@ export default {
         enum: [
           'bold',
           'italic',
+          'underline',
           'strikethrough',
           'code',
           'link',

packages/decap-cms-widget-markdown/src/schema.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)));