This is blocked by projectfluent/fluent.js#166 as we're using span.start as key of the react components.

Also need to dig in into the actual AST layout for this.

edit mode should allow to add Attributes to Terms, and sync that to the MessageList.state AST.

Right now, the AST components and the review/preview/edit modes are in pretty randomly named files.

Wouldn't hurt to put them into local packages, if only

• I knew how to do that and have both local npm start and npm run build still work
• had any good idea of how to name these

Things to throw into the mix might be fluent, react, components, edit.

@stasm, w/out trying to get you into yak shaving down in a rabbit hole, any ideas?

Right now, edit mode only works on TextElement's state, it should actually modify the AST in MessageList so that the edits persist on mode changes.

So far I've only skimmed through the code. I don't claim to have the full picture. I wonder about the purpose of ast-gen.js, though. Looking at the code it generates, it would seem that the similar effect could be achieved with a single component which can be dynamically used with any AST nodes. Something like the following:

function printableFields(ast) {
    // Remove span and type, rename key, etc.
    return Object.entries(ast).map().filter();
}

function ASTNode({factory, ast}) {
    return (
        <span className={ast.type}>
            {printableFields(ast).map(
                ([fieldName, fieldValue]) =>
                    factory.createComponent(fieldValue, fieldName)
            )}
        </span>
    );
}

Right now, edit mode only creates inputs where the current AST has TextElements. It should also allow to create leading and trailing content for Placeables.