feat: implement horizontal line functionality to markdown editor

Author: penglezos

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

@@ -166,6 +166,7 @@ const en = {
         quote: 'Quote',
         bulletedList: 'Bulleted List',
         numberedList: 'Numbered List',
+        horizontalLine: 'Horizontal Line',
         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 iconHorizontalLine from './horizontal-line.svg';
 import iconImage from './image.svg';
 import iconInfoCircle from './info-circle.svg';
 import iconItalic from './italic.svg';
@@ -75,6 +76,7 @@ const images = {
   h2: iconH2,
   hOptions: iconHOptions,
   home: iconHome,
+  'horizontal-line': iconHorizontalLine,
   image: iconImage,
   'info-circle': iconInfoCircle,
   italic: iconItalic,

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

@@ -74,6 +74,7 @@ export default class Toolbar extends React.Component {
     onMarkClick: PropTypes.func,
     onBlockClick: PropTypes.func,
     onLinkClick: PropTypes.func,
+    onInsertHorizontalLine: 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);
   };
 
+  handleHorizontalLineClick = event => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.props.onInsertHorizontalLine();
+  };
+
   handleMarkClick = (event, type) => {
     event.preventDefault();
     this.props.onMarkClick(type);
@@ -263,6 +271,16 @@ export default class Toolbar extends React.Component {
               disabled={disabled}
             />
           )}
+          {isVisible('horizontal-line') && (
+            <ToolbarButton
+              type="thematic-break"
+              label={t('editor.editorWidgets.markdown.horizontalLine')}
+              icon="horizontal-line"
+              onClick={this.handleHorizontalLineClick}
+              isActive={false}
+              disabled={disabled}
+            />
+          )}
           {showEditorComponents && (
             <ToolbarDropdownWrapper>
               <Dropdown

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

@@ -167,6 +167,14 @@ function Editor(props) {
     insertShortcode(editor, pluginConfig);
   }
 
+  function handleInsertHorizontalLine() {
+    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}
+              onInsertHorizontalLine={handleInsertHorizontalLine}
               onToggleMode={handleToggleMode}
               plugins={editorComponents}
               onSubmit={handleInsertShortcode}

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

@@ -21,6 +21,7 @@ export default {
           'quote',
           'bulleted-list',
           'numbered-list',
+          'horizontal-line',
         ],
       },
     },