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

fix(widget-markdown): improve UX in Markdown editor - link editing and selected heading underline (#5104)

Browse Source
This commit is contained in:
Arpad Gabor 2021-04-01 17:32:10 +03:00 committed by GitHub
parent fb543bd929
commit dde1a9db54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/netlify-cms-ui-default/src/Dropdown.js
View File

@ -65,6 +65,9 @@ function StyledMenuItem({ isActive, isCheckedItem = false, ...props }) {
color: ${colors.active};
background-color: ${colors.activeBackground};
}
&.active {
text-decoration: underline;
}
`}
{...props}
/>

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

@ -156,8 +156,8 @@ export default class Editor extends React.Component {
};
handleLinkClick = () => {
this.editor.toggleLink(() =>
window.prompt(this.props.t('editor.editorWidgets.markdown.linkPrompt')),
this.editor.toggleLink(oldUrl =>
window.prompt(this.props.t('editor.editorWidgets.markdown.linkPrompt'), oldUrl),
);
};

39
packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/Link.js
View File

@ -2,24 +2,35 @@ function Link({ type }) {
return {
commands: {
toggleLink(editor, getUrl) {
const selection = editor.value.selection;
const isCollapsed = selection && selection.isCollapsed;
if (editor.hasInline(type)) {
editor.unwrapInline(type);
const inlines = editor.value.inlines.toJSON();
const link = inlines.find(item => item.type === type);
const url = getUrl(link.data.url);
if (url) {
// replace the old link
return editor.setInlines({ data: { url } });
} else {
// remove url if it was removed by the user
return editor.unwrapInline(type);
}
} else {
const url = getUrl();
if (!url) return;
const selection = editor.value.selection;
const isCollapsed = selection && selection.isCollapsed;
if (isCollapsed) {
// If no text is selected, use the entered URL as text.
return editor.insertInline({
type,
data: { url },
nodes: [{ object: 'text', text: url }],
});
} else {
return editor.wrapInline({ type, data: { url } }).moveToEnd();
if (!url) {
return;
}
return isCollapsed
? editor.insertInline({
type,
data: { url },
nodes: [{ object: 'text', text: url }],
})
: editor.wrapInline({ type, data: { url } }).moveToEnd();
}
},
},

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

@ -97,6 +97,7 @@ const StyledLi = styled.li`
const StyledA = styled.a`
text-decoration: underline;
font-size: inherit;
`;
const StyledHr = styled.hr`
@ -237,7 +238,8 @@ function NumberedList(props) {
function Link(props) {
const data = props.node.get('data');
const url = data.get('url');
const title = data.get('title');
const title = data.get('title') || url;
return (
<StyledA href={url} title={title} {...props.attributes}>
{props.children}