{"size": 685, "ext": "js", "max_stars_repo_path": "src/components/MediaWrapper.js", "max_stars_repo_name": "charescape/megadraft", "max_stars_repo_stars_event_min_datetime": "2016-03-24T20:50:58.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-27T13:06:05.000Z", "max_issues_repo_path": "src/components/MediaWrapper.js", "max_issues_repo_name": "charescape/megadraft", "max_issues_repo_issues_event_min_datetime": "2016-03-30T13:40:32.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-20T02:04:59.000Z", "max_forks_repo_path": "src/components/MediaWrapper.js", "max_forks_repo_name": "charescape/megadraft", "max_forks_repo_forks_event_min_datetime": "2016-04-18T15:32:27.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-20T01:21:05.000Z"}
{"max_stars_count": 1149, "max_issues_count": 257, "max_forks_count": 246, "avg_line_length": 21.40625, "max_line_length": 93, "alphanum_fraction": 0.6905109489}
/*
 * Copyright (c) 2016, Globo.com (https://github.com/globocom)
 *
 * License: MIT
 */

import React from "react";

/*
 * MediaWrapper component avoids Draft JS bugs when a custom block component
 * is being updated by setting the editor's readOnly flag to true
 *
 * https://draftjs.org/docs/advanced-topics-block-components/#recommendations-and-other-notes
 */
export default function MediaWrapper(props) {
  const { setReadOnly, setInitialReadOnly, children } = props;

  function handleFocus() {
    setReadOnly(true);
  }

  function handleBlur() {
    setInitialReadOnly();
  }

  return (
    <div onBlur={handleBlur} onFocus={handleFocus}>
      {children}
    </div>
  );
}
