LocalizedRichTextInput #1076
LocalizedRichTextInput #1076
Conversation
montezume
force-pushed
the
ml-localized-rich-text-1
branch
7 times, most recently
from
7220b0b to
1f5d823
Compare
montezume
force-pushed
the
ml-localized-rich-text-1
branch
from
1f5d823 to
ef36b83
Compare
montezume
force-pushed
the
ml-localized-rich-text-1
branch
from
bd0ffdd to
0fdf9ef
Compare
|
Would you mind contacting a developer from the respective team (PCM) then to go through the review? |
|
@tdeekens okay, but I don't see why that is necessary. For developers working in the MC the implementation of the component in UI Kit is an implementation detail, is it not? I just tagged you because you reviewed the RichTextInput and this input is very similar in structure and implementation to that one. So basically I bring someone in cold to an area where others are warm because ? |
montezume
force-pushed
the
ml-localized-rich-text-1
branch
2 times, most recently
from
5bb6f5a to
2d9d19a
Compare
| toggleLanguage(props.language); | ||
| }, [toggleLanguage, props.language]); | ||
|
|
||
| const updateRenderToggleButton = React.useCallback(() => { |
There was a problem hiding this comment.
We need to determine whether or not to display the "Collapse" button. We only display it when there is enough "content" in the editor that makes it take up more than 32px.
|
|
||
| React.useEffect(() => { | ||
| updateRenderToggleButton(); | ||
| }, [props.editor.value.document, updateRenderToggleButton]); |
There was a problem hiding this comment.
editor.value.document basically contains the entire value of the text editor, but not changes like focus or what no. So this useEffect runs pretty much whenever a user types / changes the contents of the editor.
| {(() => { | ||
| if (props.error) | ||
| return ( | ||
| <LeftColumn> |
There was a problem hiding this comment.
This is similar to what we do in LocalizedMultilineTextInput. If the content is empty, we don't want to have extra margin from the Spacing.Stack.
| })()} | ||
| {renderToggleButton && isOpen && ( | ||
| <React.Fragment> | ||
| <LeftColumn /> |
There was a problem hiding this comment.
this way the collapse button ends up on the right since leftcolumn is flex: 1
| // eslint-disable-next-line react/display-name | ||
| const renderEditor = (props, editor, next) => { | ||
| const children = React.cloneElement(next(), { | ||
| tagName: 'output', |
There was a problem hiding this comment.
same as in RichTextInput. We use output because it supports labels with htmlFor while "div" (the default) does not.
| import designTokens from '../../../../materials/design-tokens'; | ||
|
|
||
| const getLanguageLabelStyles = (props, theme) => { | ||
| const overwrittenVars = { |
There was a problem hiding this comment.
this is basically copy pasted from LocalizedMultilineTextInput
montezume
force-pushed
the
ml-localized-rich-text-1
branch
from
958b9bc to
5d4df5e
Compare
|
I would like to merge this, make a release, and come back to any bug fixes / improvements as I work on implementing it in the MC. okay with you @jonnybel ? |
Summary
Adds new component
LocalizedRichTextInputwhich is sort of a combination ofLocalizedMultilineTextInputandRichTextInput.