diff --git a/packages/ui-markdown-editor/src/FormattingToolbar/StyleFormat/index.js b/packages/ui-markdown-editor/src/FormattingToolbar/StyleFormat/index.js index f79edd62..fb272030 100644 --- a/packages/ui-markdown-editor/src/FormattingToolbar/StyleFormat/index.js +++ b/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 ( { }; StyleDropdown.propTypes = { - canBeFormatted: PropTypes.func + canBeFormatted: PropTypes.func, + currentStyle: PropTypes.string, }; export default StyleDropdown; diff --git a/packages/ui-markdown-editor/src/FormattingToolbar/index.js b/packages/ui-markdown-editor/src/FormattingToolbar/index.js index 47fedeea..df305c3b 100644 --- a/packages/ui-markdown-editor/src/FormattingToolbar/index.js +++ b/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 ( - + @@ -114,6 +115,7 @@ FormattingToolbar.propTypes = { showLinkModal: PropTypes.bool, setShowLinkModal: PropTypes.func, activeButton: PropTypes.object, + currentStyle: PropTypes.string, }; diff --git a/packages/ui-markdown-editor/src/index.js b/packages/ui-markdown-editor/src/index.js index c2f4e3fd..f5e95010 100644 --- a/packages/ui-markdown-editor/src/index.js +++ b/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) => { { !props.readOnly &&