gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Trang Le 2021-05-30 22:32:47 +07:00 committed by GitHub
parent 5d288687f6
commit b9624fc673
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
/>
)}

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

@ -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}

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

@ -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) {