fix(ui-markdown-editor): styleblock refresh - #276

packages/ui-markdown-editor/src/FormattingToolbar/StyleFormat/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Node } from 'slate';
 import { useEditor } from 'slate-react';
 import { Dropdown } from 'semantic-ui-react';
 import StyleDropdownItem from './Item';
 import {
-  BLOCK_STYLE,
   DROPDOWN_STYLE,
   DROPDOWN_STYLE_H1,
   DROPDOWN_STYLE_H2,
@@ -15,11 +13,9 @@ import {
   PARAGRAPH, H1, H2, H3
 } from '../../utilities/schema';
 
-const StyleDropdown = ({ canBeFormatted }) => {
+const StyleDropdown = ({ canBeFormatted, currentStyle }) => {
   const editor = useEditor();
-  const currentBlock = (editor && editor.selection)
-    ? BLOCK_STYLE[Node.parent(editor, editor.selection.focus.path).type]
-    : 'Style';
+  const currentBlock = currentStyle;
   return (
     <Dropdown
         simple
@@ -57,7 +53,8 @@ const StyleDropdown = ({ canBeFormatted }) => {
 };
 
 StyleDropdown.propTypes = {
-  canBeFormatted: PropTypes.func
+  canBeFormatted: PropTypes.func,
+  currentStyle: PropTypes.string,
 };
 
 export default StyleDropdown;

packages/ui-markdown-editor/src/FormattingToolbar/index.js

@@ -32,7 +32,8 @@ const FormattingToolbar = ({
   canBeFormatted,
   showLinkModal,
   setShowLinkModal,
-  activeButton
+  activeButton,
+  currentStyle
 }) => {
   const editor = useEditor();
   const linkModalRef = useRef();
@@ -88,7 +89,7 @@ const FormattingToolbar = ({
 
   return (
     <ToolbarMenu id="ap-rich-text-editor-toolbar">
-      <StyleDropdown canBeFormatted={canBeFormatted}/>
+      <StyleDropdown canBeFormatted={canBeFormatted} currentStyle={currentStyle}/>
       <Separator />
       <FormatButton {...mark} {...bold} {...buttonProps} />
       <FormatButton {...mark} {...italic} {...buttonProps} />
@@ -114,6 +115,7 @@ FormattingToolbar.propTypes = {
   showLinkModal: PropTypes.bool,
   setShowLinkModal: PropTypes.func,
   activeButton: PropTypes.object,
+  currentStyle: PropTypes.string,
 };
 
 

packages/ui-markdown-editor/src/index.js

@@ -6,11 +6,11 @@ import { HtmlTransformer } from '@accordproject/markdown-html';
 import { SlateTransformer } from '@accordproject/markdown-slate';
 import isHotkey from 'is-hotkey';
 import { Editable, withReact, Slate, ReactEditor } from 'slate-react';
-import { Editor, Range, Node, createEditor, Transforms } from 'slate';
+import { Editor, Range, createEditor, Transforms, Node } from 'slate';
 import { withHistory } from 'slate-history';
 import PropTypes from 'prop-types';
 import HOTKEYS, { formattingHotKeys } from './utilities/hotkeys';
-import { BUTTON_ACTIVE } from './utilities/constants';
+import { BUTTON_ACTIVE, BLOCK_STYLE } from './utilities/constants';
 import withSchema from './utilities/schema';
 import Element from './components';
 import Leaf from './components/Leaf';
@@ -37,6 +37,7 @@ export const MarkdownEditor = (props) => {
     canBeFormatted
   } = props;
   const [showLinkModal, setShowLinkModal] = useState(false);
+  const [currentStyle, setCurrentStyle] = useState('')
   const editor = useMemo(() => {
     if (augmentEditor) {
       return augmentEditor(
@@ -145,6 +146,8 @@ export const MarkdownEditor = (props) => {
     if (selection && isSelectionLinkBody(editor)) {
       setShowLinkModal(true);
     }
+    const currentStyleCalculated = BLOCK_STYLE[Node.parent(editor, editor.selection.focus.path).type] || 'Style';
+    setCurrentStyle(currentStyleCalculated);
   };
 
   const handleDragStart = (event) => {
@@ -179,6 +182,7 @@ export const MarkdownEditor = (props) => {
     <Slate editor={editor} value={props.value} onChange={onChange} >
       { !props.readOnly
         && <FormatBar
+        currentStyle={currentStyle}
         canBeFormatted={props.canBeFormatted}
         showLinkModal={showLinkModal}
         setShowLinkModal={setShowLinkModal}
@@ -242,6 +246,8 @@ MarkdownEditor.propTypes = {
   onDrop: PropTypes.func,
   /* Optional function to call when onDragOver event fires which will receive editor and event */
   onDragOver: PropTypes.func,
+  /* Tells the current style of text block that the cursor is on and updates onChange */
+  currentStyle: PropTypes.string,
 };
 
 MarkdownEditor.defaultProps = {