Open williamhoos opened 6 years ago
I think it should be possible/easy to add arbitrary configurable attributes to links and other types of elements created by the editor.
For example, we use react-rte
as the basic RTE for our CMS and we want to give users the ability to toggle the link's rel
attribute to "nofollow" for SEO purposes. Would it make sense to make this configurable via the toolbarConfig
prop? E.g.:
render() {
const toolbarConfig = {
display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'LINK_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'HISTORY_BUTTONS'],
LINK_BUTTONS: [
{label: 'Link'},
{label: 'Unlink'},
{label: 'Nofollow', type: 'TOGGLE', onChange: checked => (checked ? { rel: 'nofollow' } : {})}
]
};
return (
<RichTextEditor toolbarConfig={toolbarConfig} />
);
}
Or would it make more sense to use a render prop? Maybe something like:
import RTE, { ButtonGroup, PopoverIconButton, IconButton } from 'react-rte'
const CustomLinkButtons = ({
name,
toolbarConfig,
editorState,
showLinkInput,
toggleShowLinkInput,
isCursorOnLink,
shouldShowLinkButton,
defaultValue,
setLink,
removeLink,
attributes,
setAttribute,
removeAttribute
}) => (
<ButtonGroup key={name}>
<PopoverIconButton
label="Link"
iconName="link"
isDisabled={!shouldShowLinkButton}
showPopover={showLinkInput}
onTogglePopover={toggleShowLinkInput}
defaultValue={defaultValue}
onSubmit={setLink}
/>
<IconButton
{...toolbarConfig.extraProps}
label="Remove Link"
iconName="remove-link"
isDisabled={!isCursorOnLink}
onClick={removeLink}
focusOnClick={false}
/>
<input
type="checkbox"
id="toggleNofollow"
defaultValue={attributes.rel === 'nofollow'}
onChange={event => {
if (event && event.target && event.target.checked) {
setAttribute('rel', 'nofollow')
} else {
removeAttribute('rel')
}
}}
/>
<label for="toggleNofollow">
Nofollow
</label>
</ButtonGroup>
)
const RichTextEditor = props => (
<RTE
{ ...props }
LinkButtons={CustomLinkButtons} // maybe `renderLinkButtons` instead to be more consistent with the existing code?
/>
)
I personally prefer the latter as it allows for a wider range of possibilities, but I would be glad to submit a PR for whichever approach makes the most sense.
Did this get implemented?
I'm glad to do it but I would first like to know what @sstur thinks. Which approach would be better?
@timbur i think this is a great way and would much prefer the first option @sstur what do you think?
any update on this?
--moving this from issue 228 where it was buried in a comment---
What does the community think about creating two options for the target=_blank functionality:
If acceptable to the project, anyone want to code it or I'll try to find a way to get it done. If someone could point to generally where these code changes are needed, it would help in implementing.