How to use the @ephox/alloy.Representing.config function in @ephox/alloy

value: itemValue
      });
    }))
  ];

  const pField = AlloyFormField.parts().field({
    dom: {
      tag: 'div',
      // FIX: Read from columns
      classes: [ 'tox-collection' ].concat(spec.columns !== 1 ? [ 'tox-collection--grid' ] : [ 'tox-collection--list' ])
    },
    components: [ ],
    factory: { sketch: Fun.identity },
    behaviours: Behaviour.derive([
      Replacing.config({ }),
      Representing.config({
        store: {
          mode: 'memory',
          initialValue: [ ]
        },
        onSetValue: (comp, items) => {
          setContents(comp, items);
          if (spec.columns === 'auto') {
            detectSize(comp, 5, 'tox-collection__item').each(({ numRows, numColumns }) => {
              Keying.setGridSize(comp, numRows, numColumns);
            });
          }

          AlloyTriggers.emit(comp, formResizeEvent);
        }
      }),
      Tabstopping.config({ }),

},
      onValidHex,
      onInvalidHex
    })
  );

  return {
    dom: {
      tag: 'div'
    },
    components: [
      memPicker.asSpec()
    ],
    behaviours: Behaviour.derive([
      // We'll allow invalid values
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (comp) => {
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);
            const optHex = optRgbForm.bind((rgbForm) => {
              const formValues = Representing.getValue(rgbForm);
              return formValues.hex as Option;
            }) ;
            return optHex.map((hex) => '#' + hex).getOr('');
          },
          setValue: (comp, newValue) => {
            const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
            const m = pattern.exec(newValue);
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);

],

    selectFirst: tabMode.selectFirst,

    tabSectionBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('tabpanel', tabMode.extraEvents),
      Keying.config({
        mode: 'acyclic'
      }),

      // INVESTIGATE: Is this necessary? Probably used by getCompByName.
      Composing.config({
        // TODO: Think about this
        find: (comp) => Arr.head(AlloyTabSection.getViewItems(comp))
      }),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (tsection: AlloyComponent) => {
            // NOTE: Assumes synchronous updating of store.
            tsection.getSystem().broadcastOn([ SendDataToSectionChannel ], { });
            return storedValue.get();
          },
          setValue: (tsection: AlloyComponent, value: TabData) => {
            storedValue.set(value);
            tsection.getSystem().broadcastOn([ SendDataToViewChannel ], { });
          }
        }
      })
    ])
  });
};

],

    selectFirst: tabMode.selectFirst,

    tabSectionBehaviours: Behaviour.derive([
      AddEventsBehaviour.config('tabpanel', tabMode.extraEvents),
      Keying.config({
        mode: 'acyclic'
      }),

      // INVESTIGATE: Is this necessary? Probably used by getCompByName.
      Composing.config({
        // TODO: Think about this
        find: (comp) => Arr.head(AlloyTabSection.getViewItems(comp))
      }),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (tsection: AlloyComponent) => {
            // NOTE: Assumes synchronous updating of store.
            tsection.getSystem().broadcastOn([ SendDataToSectionChannel ], { });
            return storedValue.get();
          },
          setValue: (tsection: AlloyComponent, value: TabData) => {
            storedValue.set(value);
            tsection.getSystem().broadcastOn([ SendDataToViewChannel ], { });
          }
        }
      })
    ])
  });
};

? spec.init(ta.element().dom())
            : Resource.load(spec.scriptId, spec.scriptUrl).then(
                (init: CustomEditorInitFn) => init(ta.element().dom(), spec.settings)
              )
            ).then((ea) => {
              initialValue.get().each((cvalue) => {
                ea.setValue(cvalue);
              });

              initialValue.set(Option.none());
              editorApi.set(Option.some(ea));
            });
          });
        })
      ]),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: () => editorApi.get().fold(
            () => initialValue.get().getOr(''),
            (ed) => ed.getValue()
          ),
          setValue: (component, value) => {
            editorApi.get().fold(
              () => {
                initialValue.set(Option.some(value));
              },
              (ed) => ed.setValue(value)
            );
          }
        }
      }),

};

  return {
    dom: {
      tag: 'div',
      attributes: {
        role: 'presentation'
      }
    },
    components: [
      editPanel.memContainer.asSpec(),
      imagePanel.memContainer.asSpec(),
      sideBar.container
    ],
    behaviours: Behaviour.derive([
      Representing.config({
        store: {
          mode: 'manual',
          getValue: () => {
            return state.getBlobState();
          }
        }
      }),
      AddEventsBehaviour.config('image-tools-events', [
        AlloyEvents.run(ImageToolsEvents.internal.undo(), undo),
        AlloyEvents.run(ImageToolsEvents.internal.redo(), redo),
        AlloyEvents.run(ImageToolsEvents.internal.zoom(), zoom),

        AlloyEvents.run(ImageToolsEvents.internal.back(), back),
        AlloyEvents.run(ImageToolsEvents.internal.apply(), apply),

        AlloyEvents.run(ImageToolsEvents.internal.transform(), transform),

export const renderCheckbox = (spec: CheckboxSpec, providerBackstage: UiFactoryBackstageProviders): SimpleSpec => {
  const repBehaviour = Representing.config({
    store: {
      mode: 'manual',
      getValue: (comp: AlloyComponent): boolean => {
        const el = comp.element().dom() as HTMLInputElement;
        return el.checked;
      },
      setValue: (comp: AlloyComponent, value: boolean) => {
        const el = comp.element().dom() as HTMLInputElement;
        el.checked = value;
      }
    }
  });

  const toggleCheckboxHandler = (comp) => {
    comp.element().dom().click();
    return Option.some(true);