How to use the @wordpress/editor.withColors function in @wordpress/editor

withColors,
  getColorClassName,
} from '@wordpress/editor'
import { Fragment } from '@wordpress/element'

/**
 * Internal Dependencies
 */
import Inspector from './inspector'

const ALLOWED_BLOCKS = ['tomodomo/column']

/**
 * Block edit component
 */
const Editor = withColors('backgroundColor', 'textColor')((props) => {
  // Variables
  const {
    attributes: {
      columns,
      backgroundColor,
      textColor,
    },
    className,
  } = props

  const classes = classnames(
    className,
    `has-${columns.length}-columns`,
    getColorClassName('background', backgroundColor),
    getColorClassName('text', textColor),
  )

if (attributes.id && attributes.id !== '') {
          res.post = getEntityRecord('postType', 'post', attributes.id);

          if (res.post) {
            attributes.imageId = res.post.featured_media;
          }
        }
        break;
    } */

    return {
      ...res,
      ...withSelectMedia(select, props),
    };
  }),
  withColors({ textColor: 'color' }),
  withFallbackStyles((node, ownProps) => {
    const { fontSize, customFontSize } = ownProps.attributes;
    const editableNode = node.querySelector('[contenteditable="true"]');
    // verify if editableNode is available, before using getComputedStyle.
    const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
    return {
      fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt(computedStyles.fontSize) || undefined,
    };
  }),
  /* withAPIData(props => {
    if (props.attributes.type === 'auto') {
      const postQuery = stringify(pickBy({
        category_id: props.attributes.categoryId,
        order: 'desc',
        orderby: 'date',
        per_page: 1,

/>
        
        <div style="{">
          { this.renderMediaArea() }
          
        </div>
      
    );
  }
}

export default withColors('backgroundColor')(MediaTextEdit);

data-url={ url }
          className={ classes }
          style={ style }
          { ...data }
        >
          <div>
            
          </div>
        
      
    );
  }
}

export default compose(
  withColors('backgroundColor'),
)(SectionBlockEdit);

export function dimRatioToClass (ratio) {
  return (ratio === 0 || ratio === 50) ?
    null :
    'has-background-dim-' + (10 * Math.round(ratio / 10));
}

export function backgroundImageStyles (url) {
  return url ?
    { backgroundImage: `url(${url})` } :
    {};
}

setTextButtonColor( nextColour );
									setAttributes( { customTextButtonColor: nextColour } );
								},
								label: __( 'Text Color' ),
							},
						] }
					/>
					
				
			
		);
	}
}

export default compose( [
	withColors( 'backgroundButtonColor', { textButtonColor: 'color' } ),
	applyFallbackStyles,
] )( SubmitButton );

{
							value: backgroundColor.color,
							onChange: setBackgroundColor,
							label: __( 'Background Color' ),
						},
					] }
				/>
			
			<div style="{">
				
			</div>
		
	);
}

export default withColors( 'backgroundColor' )( ContainerEdit );

content: nextContent,
						} );
					} }
					onSplit={ this.splitBlock }
					onMerge={ mergeBlocks }
					onReplace={ this.onReplace }
					onRemove={ () => onReplace( [] ) }
					placeholder={ placeholder || __( 'Add text or type / to add content' ) }
				/>
			
		);
	}
}

const ParagraphEdit = compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyFallbackStyles,
] )( ParagraphBlock );

export default ParagraphEdit;

merge( attributes, attributesToMerge ) {
		return {
			content: concatChildren( attributes.content, attributesToMerge.content ),
		};
	},

	getEditWrapperProps( attributes ) {
		const { width } = attributes;
		if ( [ 'wide', 'full', 'left', 'right' ].indexOf( width ) !== -1 ) {
			return { 'data-align': width };
		}
	},

	edit: compose(
		withColors( ( getColor, setColor, { attributes } ) => {
			return {
				backgroundColor: getColor( attributes.backgroundColor, attributes.customBackgroundColor, 'background-color' ),
				setBackgroundColor: setColor( 'backgroundColor', 'customBackgroundColor' ),
				textColor: getColor( attributes.textColor, attributes.customTextColor, 'color' ),
				setTextColor: setColor( 'textColor', 'customTextColor' ),
			};
		} ),
		FallbackStyles,
	)( ParagraphBlock ),

	save( { attributes } ) {
		const {
			align,
			content,
			dropCap,
			backgroundColor,