Flat rendering of inline style ranges with complex inline styles about redraft

[lokiuz]

Just pushed a new beta version to npm with a new api for a flatter render. If you don't mind some testing and feedback would be awesome! A simple how-to is included in the updated readme. You can install using the next tag ie. npm install redraft@next

[lokiuz]

Hey, I'm very glad you like it.

When I was building redraft, I was aiming to be able to render semantically correct output from draft raw. That means that rather than <span style={ { fontStyle: 'italic' } }> it would render <em> and that also includes nesting those tags.

I might look into allowing redraft to support an api which is more similar to what draft.js uses as per #20 so I'll keep this in mind as well. Not sure when though so any PRs are also welcome. 😄

It also might be possible to hack a flatter render using react children API, but it will probably only work if the style ranges align.
Check the child type and if its same type and the only child merge those styles and only render the child's children to remove the nested wrapper. Finally use the same component in redraft to render different inline styles passing props for each style. (Did that make any sense?)

[acusti]

Thanks for the suggestion! I 100% understand not getting to PRs promptly, as I’m only responding 3 weeks after your comment. I’m going to explore hacking together a flatter render for cases where style ranges align, because in practical terms, that seems to be the case quite often for our users, so should help clean up the markup considerably in a lot of cases. I’ll post a code snippet here when I have something that works well.

[acusti]

Wasn’t too tricky after all. This code snippet assumes you have a customStyleMap (API reference) object.

const renderInlineStyle = (style, children, { key }) => {
    let elementChild;
    const hasSingleElementChild = children.every((child) => {
        if (React.isValidElement(child) && !elementChild) {
            elementChild = child;
            return true;
        }
        return false;
    });

    if (hasSingleElementChild && elementChild) {
        return React.cloneElement(elementChild, {
            style: { ...elementChild.props.style, ...style },
        });
    }

    return (
        <span key={ key } style={ style }>
            { children }
        </span>
    );
};

const renderers = {
    /**
     * These callbacks will be called recursively to render a nested structure
     */
    inline: _.map(customStyleMap, (style, key) => renderInlineStyle.bind(null, style)),
    ...
};

const Renderer = (props) => (
    <div>{ redraft(props.raw, renderers) }</div>
);

[acusti]

I’ll definitely try it out! It’ll take a bit of time before I can get to it, but shouldn’t be too long.

If you want to see our app to see where we are redraft + draft, sign up at https://app.brandcast.io/signup, then go through the first part of the get started flow (the 2nd lesson introduces text editing).

[lokiuz]

Closing this, as I went ahead and published 0.8.0

[acusti]

Sorry I didn’t follow up back in March and April. Thought I’d mention now that we’ve been using the new flatter rendering in 0.8.0 for a couple months now without issue, and it has helped us greatly with the issues I described in the top of this issue. Thanks again!