Composing decorators

Hey there. big fan 🙌

I’m writing a small that implements a markup language that resembles to Markdown using decorators:

• *text* => <Em>{ text }</Em>
• ~text~ => <Strike>{ text }</Em>

It was all fine and worked great, until I tried to compose them one inside of the other:

I can’t really declare if its a bug or a feature, but it leads me to my question:

Is there a way of making decorators components composable? Or - is there another way of solving this problem? Decorators keep the code declarative and awesome, the only real struggle will be to handle char arrays or to get children instead of text… but I don’t really care in my specific use case.

Thank you!

Technical stuff:

• Chrome Canary 54.0.2791.0 on OS X El Capitan
• Draft.js 0.7.0

[paulyoung]

This technique I recently devised may be of some help: https://jsfiddle.net/paulyoung85/2unzgt68/

[joncursi]

@paulyoung thanks, your solution works great! There is one issue, however, getting the CompoundDecorator to work with either SimpleDecorator or DraftJS Plugins.

Both of these libraries support a 3rd argument, contentState, in the strategy function signature:

strategy(contentBlock, callback, contentState) => { ... }

When we replace the stock CompositeDecorator with the new CompoundDecorator, this third argument is “lost”, and you’ll get a JavaScript exception if the strategy depends on the presence of the contentState argument.

Any ideas on how to overcome this?

Solved by making a small modification to the getDecorations method, to pass contentState through. Here’s my full CompoundDecorator now:

/**
 * @prettier
 */

import { CompositeDecorator } from 'draft-js';
import { List } from 'immutable';

const Span = props => <span>{props.children}</span>;

export default class CompoundDecorator {
  constructor(decorators = []) {
    this.decorators = decorators.map(decorator => {
      return decorator.strategy && decorator.component
        ? new CompositeDecorator([decorator])
        : decorator;
    });
  }

  getDecorations(block, contentState) {
    const emptyTuples = Array(block.getText().length).fill(
      Array(this.decorators.length).fill(null),
    );

    const decorations = this.decorators.reduce((tuples, decorator, index) => {
      const blockDecorations = decorator.getDecorations(block, contentState);

      return tuples.map((tuple, tupleIndex) => {
        return [
          ...tuple.slice(0, index),
          blockDecorations.get(tupleIndex),
          ...tuple.slice(index + 1),
        ];
      });
    }, emptyTuples);

    return List(decorations.map(JSON.stringify));
  }

  getComponentForKey(key) {
    const tuple = JSON.parse(key);
    return props => {
      const { decoratorProps, ...compositionProps } = props;
      const Composed = tuple.reduce((Composition, decoration, index) => {
        if (decoration !== null) {
          const decorator = this.decorators[index];
          const Component = decorator.getComponentForKey(decoration);
          const componentProps = {
            ...compositionProps,
            ...decoratorProps[index],
          };
          return () => (
            <Component {...componentProps}>
              <Composition {...compositionProps} />
            </Component>
          );
        }
        return Composition;
      }, Span);
      return <Composed>{props.children}</Composed>;
    };
  }

  getPropsForKey(key) {
    const tuple = JSON.parse(key);
    return {
      decoratorProps: tuple.map((decoration, index) => {
        const decorator = this.decorators[index];
        return decoration !== null ? decorator.getPropsForKey(decoration) : {};
      }),
    };
  }
}