Skip to content

Commit

Permalink
Improve helper text for SVG picker
Browse files Browse the repository at this point in the history
  • Loading branch information
csebianlander committed Jul 3, 2024
1 parent 6b6a368 commit e21af63
Showing 1 changed file with 17 additions and 18 deletions.
35 changes: 17 additions & 18 deletions cfgov/draftail_icons/static/draftail_icons/js/draftail_icons.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,37 @@
class EntityIconSource extends window.React.Component {
componentDidMount() {
const { editorState, entityType, onComplete } = this.props;
const icon_name = window.prompt("Icon identifier:");
const icon_name = window.prompt(
'Canonical icon name (refer to the Iconography page in the CFPB Design System):',
);

if (icon_name) {
const content = editorState.getCurrentContent();
const selection = editorState.getSelection();

const contentWithEntity = content.createEntity(
entityType.type,
"SEGMENTED",
'SEGMENTED',
{
"icon-name": icon_name,
}
'icon-name': icon_name,
},
);
const entityKey = contentWithEntity.getLastCreatedEntityKey()
const entityKey = contentWithEntity.getLastCreatedEntityKey();

// Attach the new entity to a space, since it has to have a range of
// some length > 0. This will get rendered out in the decorator below
// and in the frontend after storage in the database.
const newContent = window.DraftJS.Modifier.replaceText(
content,
selection,
" ",
' ',
null,
entityKey
entityKey,
);
const nextState = window.DraftJS.EditorState.push(
editorState,
newContent,
"insert-characters"
'insert-characters',
);

onComplete(nextState);
Expand All @@ -50,19 +52,16 @@ const Icon = (props) => {
// Get the icon name, then add an img tag that loads the icon from our
// static files path. This will render the ICON "entity" with the svg in
// the editor.
var icon_name = data["icon-name"];
var icon_name = data['icon-name'];
var icon_url = `/static/icons/${icon_name}.svg`;
return window.React.createElement(
'img',
{
"src": icon_url,
"data-icon-name": icon_name,
},
);
return window.React.createElement('img', {
src: icon_url,
'data-icon-name': icon_name,
});
};

window.draftail.registerPlugin({
type: "ICON",
type: 'ICON',
source: EntityIconSource,
decorator: Icon
decorator: Icon,
});

0 comments on commit e21af63

Please sign in to comment.