Align buttons dont work in Chrome- v0.16.3 - effects functional and class based components

[joelm10]

Installed via npm i

Effected versions: v0.16.3, 0.16.2, 0.16.1

Browser: Chrome: Version 86.0.4240.75 (Official Build) (x86_64)

To replicate:

1. enter text
2. select text, click any align button (left, middle, right, justify)
3. Expect text to be shown as align, but nothing happens.

Sample code:

const ReactRteEditor = (props) => {
    const {
        id: rteId,
        value: rteValue = 'abcd',
        readonly: rteReadOnly = false,
        onBlur,
        onFocus,
        options: { placeholder = '' }
    } = props;

    // Internal state
    // TODO: re-assess if actually needed
    const [currentValue, setCurrentValue] = useState(RichTextEditor.createEmptyValue('abcd'));
   const onChangeInternal = (value) => {
        setCurrentValue(value);

        if (props.onChange) {
            const updatedValue = { target: { value: value.toString('html') } };
            props.onChange(updatedValue);
        }
    };
    const editorProps = {
        value: currentValue,
        onChange: onChangeInternal,
        editorClassName: 'rte_editor'
}
    return (<RichTextEditor
                style={styles}
                {...editorProps}
            />);
}

[mcbroh]

Have you tried adding getTextAlignClassName with getTextAlignStyles to the editor? That worked for me

[joelm10]

@mcbroh as a prop being passed into the Editor or another approach? Can you elaborate on this, as they appeared to be internal methods - https://github.com/sstur/react-rte/blob/master/src/EditorDemo.js#L7- , not props to be passed in?

[mcbroh]

The documentation does not explain so much about props and co, but I had to actually check the node module code to see what is been exposed or not.

import RichTextEditor, {getTextAlignClassName, getTextAlignStyles, getTextAlignBlockMetadata} from 'react-rte'; ......

value.toString('html', {blockStyleFn: getTextAlignStyles}) To get the styles. ......

<RichTextEditor ...... blockStyleFn={getTextAlignClassName} /> To enable the styles

That works for me with no errors. But there is still a bigger problem which is getting styled value from a server or where ever into the text editor.

[joelm10]

thanks, this works great @mcbroh appreciate your help/feedback 👍