feat: implement strikethrough functionality to markdown editor (#7625)

Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>

Author: penglezos

cypress/support/commands.js

@@ -271,6 +271,7 @@ Cypress.Commands.add('insertEditorComponent', title => {
   ['clickUnorderedListButton', 'Bulleted List'],
   ['clickCodeButton', 'Code'],
   ['clickItalicButton', 'Italic'],
+  ['clickStrikethroughButton', 'Strikethrough'],
   ['clickQuoteButton', 'Quote'],
   ['clickLinkButton', 'Link'],
 ].forEach(([commandName, toolbarButtonName]) => {

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

@@ -157,6 +157,7 @@ const en = {
       markdown: {
         bold: 'Bold',
         italic: 'Italic',
+        strikethrough: 'Strikethrough',
         code: 'Code',
         link: 'Link',
         linkPrompt: 'Enter the URL of the link',

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

@@ -42,6 +42,7 @@ import iconRefresh from './refresh.svg';
 import iconScroll from './scroll.svg';
 import iconSearch from './search.svg';
 import iconSettings from './settings.svg';
+import iconStrikethrough from './strikethrough.svg';
 import iconUser from './user.svg';
 import iconWorkflow from './workflow.svg';
 import iconWrite from './write.svg';
@@ -94,6 +95,7 @@ const images = {
   scroll: iconScroll,
   search: iconSearch,
   settings: iconSettings,
+  strikethrough: iconStrikethrough,
   user: iconUser,
   workflow: iconWorkflow,
   write: iconWrite,

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

@@ -160,6 +160,16 @@ export default class Toolbar extends React.Component {
               disabled={disabled}
             />
           )}
+          {isVisible('strikethrough') && (
+            <ToolbarButton
+              type="strikethrough"
+              label={t('editor.editorWidgets.markdown.strikethrough')}
+              icon="strikethrough"
+              onClick={this.handleMarkClick}
+              isActive={hasMark('delete')}
+              disabled={disabled}
+            />
+          )}
           {isVisible('code') && (
             <ToolbarButton
               type="code"

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

@@ -141,7 +141,8 @@ function Editor(props) {
 
   function handleMarkClick(format) {
     ReactEditor.focus(editor);
-    toggleMark(editor, format);
+    const markFormat = format === 'strikethrough' ? 'delete' : format;
+    toggleMark(editor, markFormat);
   }
 
   function handleBlockClick(format) {

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

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