fix(widget-markdown): fix quote block and list highlighting (#5422)

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

@@ -108,6 +108,8 @@ export default class Toolbar extends React.Component {
       hasMark = () => {},
       hasInline = () => {},
       hasBlock = () => {},
+      hasQuote = () => {},
+      hasListItems = () => {},
       editorComponents,
       t,
     } = this.props;
@@ -211,7 +213,7 @@ export default class Toolbar extends React.Component {
               label={t('editor.editorWidgets.markdown.quote')}
               icon="quote"
               onClick={this.handleBlockClick}
-              isActive={hasBlock('quote')}
+              isActive={hasQuote('quote')}
               disabled={disabled}
             />
           )}
@@ -221,7 +223,7 @@ export default class Toolbar extends React.Component {
               label={t('editor.editorWidgets.markdown.bulletedList')}
               icon="list-bulleted"
               onClick={this.handleBlockClick}
-              isActive={hasBlock('bulleted-list')}
+              isActive={hasListItems('bulleted-list')}
               disabled={disabled}
             />
           )}
@@ -231,7 +233,7 @@ export default class Toolbar extends React.Component {
               label={t('editor.editorWidgets.markdown.numberedList')}
               icon="list-numbered"
               onClick={this.handleBlockClick}
-              isActive={hasBlock('numbered-list')}
+              isActive={hasListItems('numbered-list')}
               disabled={disabled}
             />
           )}

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

@@ -164,6 +164,8 @@ export default class Editor extends React.Component {
   hasMark = type => this.editor && this.editor.hasMark(type);
   hasInline = type => this.editor && this.editor.hasInline(type);
   hasBlock = type => this.editor && this.editor.hasBlock(type);
+  hasQuote = type => this.editor && this.editor.hasQuote(type);
+  hasListItems = type => this.editor && this.editor.hasListItems(type);
 
   handleToggleMode = () => {
     this.props.onMode('raw');
@@ -218,6 +220,8 @@ export default class Editor extends React.Component {
             hasMark={this.hasMark}
             hasInline={this.hasInline}
             hasBlock={this.hasBlock}
+            hasQuote={this.hasQuote}
+            hasListItems={this.hasListItems}
             isShowModeToggle={isShowModeToggle}
             t={t}
             disabled={isDisabled}

packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/CommandsAndQueries.js

@@ -71,6 +71,39 @@ function CommandsAndQueries({ defaultType }) {
       hasInline(editor, type) {
         return editor.value.inlines.some(node => node.type === type);
       },
+      hasQuote(editor, quoteLabel) {
+        const { value } = editor;
+        const { document, blocks } = value;
+        return blocks.some(node => {
+          const { key: descendantNodeKey } = node;
+          /* When focusing a quote block, the actual block that gets the focus is the paragraph block whose parent is a `quote` block.
+          Hence, we need to get its parent and check if its type is `quote`. This parent will always be defined because every block in the editor
+          has a Document object as parent by default.
+          */
+          const parent = document.getParent(descendantNodeKey);
+          return parent.type === quoteLabel;
+        });
+      },
+      hasListItems(editor, listType) {
+        const { value } = editor;
+        const { document, blocks } = value;
+        return blocks.some(node => {
+          const { key: lowestNodeKey } = node;
+          /* A list block has the following structure:
+          <ol>
+            <li>
+              <p>Coffee</p>
+            </li>
+            <li>
+              <p>Tea</p>
+            </li>
+          </ol>
+          */
+          const parent = document.getParent(lowestNodeKey);
+          const grandparent = document.getParent(parent.key);
+          return parent.type === 'list-item' && grandparent?.type === listType;
+        });
+      },
     },
     commands: {
       toggleBlock(editor, type) {