@wordpress/editor/build/components/local-autosave-monitor/index.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _i18n = require("@wordpress/i18n");

var _blocks = require("@wordpress/blocks");

var _notices = require("@wordpress/notices");

var _autosaveMonitor = _interopRequireDefault(require("../autosave-monitor"));

var _controls = require("../../store/controls");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const requestIdleCallback = window.requestIdleCallback ? window.requestIdleCallback : window.requestAnimationFrame;
/**
 * Function which returns true if the current environment supports browser
 * sessionStorage, or false otherwise. The result of this function is cached and
 * reused in subsequent invocations.
 */

const hasSessionStorageSupport = (0, _lodash.once)(() => {
  try {
    // Private Browsing in Safari 10 and earlier will throw an error when
    // attempting to set into sessionStorage. The test here is intentional in
    // causing a thrown error as condition bailing from local autosave.
    window.sessionStorage.setItem('__wpEditorTestSessionStorage', '');
    window.sessionStorage.removeItem('__wpEditorTestSessionStorage');
    return true;
  } catch (error) {
    return false;
  }
});
/**
 * Custom hook which manages the creation of a notice prompting the user to
 * restore a local autosave, if one exists.
 */

function useAutosaveNotice() {
  const {
    postId,
    isEditedPostNew,
    hasRemoteAutosave
  } = (0, _data.useSelect)(select => ({
    postId: select('core/editor').getCurrentPostId(),
    isEditedPostNew: select('core/editor').isEditedPostNew(),
    getEditedPostAttribute: select('core/editor').getEditedPostAttribute,
    hasRemoteAutosave: !!select('core/editor').getEditorSettings().autosave
  }), []);
  const {
    getEditedPostAttribute
  } = (0, _data.useSelect)('core/editor');
  const {
    createWarningNotice,
    removeNotice
  } = (0, _data.useDispatch)(_notices.store);
  const {
    editPost,
    resetEditorBlocks
  } = (0, _data.useDispatch)('core/editor');
  (0, _element.useEffect)(() => {
    let localAutosave = (0, _controls.localAutosaveGet)(postId, isEditedPostNew);

    if (!localAutosave) {
      return;
    }

    try {
      localAutosave = JSON.parse(localAutosave);
    } catch (error) {
      // Not usable if it can't be parsed.
      return;
    }

    const {
      post_title: title,
      content,
      excerpt
    } = localAutosave;
    const edits = {
      title,
      content,
      excerpt
    };
    {
      // Only display a notice if there is a difference between what has been
      // saved and that which is stored in sessionStorage.
      const hasDifference = Object.keys(edits).some(key => {
        return edits[key] !== getEditedPostAttribute(key);
      });

      if (!hasDifference) {
        // If there is no difference, it can be safely ejected from storage.
        (0, _controls.localAutosaveClear)(postId, isEditedPostNew);
        return;
      }
    }

    if (hasRemoteAutosave) {
      return;
    }

    const noticeId = (0, _lodash.uniqueId)('wpEditorAutosaveRestore');
    createWarningNotice((0, _i18n.__)('The backup of this post in your browser is different from the version below.'), {
      id: noticeId,
      actions: [{
        label: (0, _i18n.__)('Restore the backup'),

        onClick() {
          editPost((0, _lodash.omit)(edits, ['content']));
          resetEditorBlocks((0, _blocks.parse)(edits.content));
          removeNotice(noticeId);
        }

      }]
    });
  }, [isEditedPostNew, postId]);
}
/**
 * Custom hook which ejects a local autosave after a successful save occurs.
 */


function useAutosavePurge() {
  const {
    postId,
    isEditedPostNew,
    isDirty,
    isAutosaving,
    didError
  } = (0, _data.useSelect)(select => ({
    postId: select('core/editor').getCurrentPostId(),
    isEditedPostNew: select('core/editor').isEditedPostNew(),
    isDirty: select('core/editor').isEditedPostDirty(),
    isAutosaving: select('core/editor').isAutosavingPost(),
    didError: select('core/editor').didPostSaveRequestFail()
  }), []);
  const lastIsDirty = (0, _element.useRef)(isDirty);
  const lastIsAutosaving = (0, _element.useRef)(isAutosaving);
  (0, _element.useEffect)(() => {
    if (!didError && (lastIsAutosaving.current && !isAutosaving || lastIsDirty.current && !isDirty)) {
      (0, _controls.localAutosaveClear)(postId, isEditedPostNew);
    }

    lastIsDirty.current = isDirty;
    lastIsAutosaving.current = isAutosaving;
  }, [isDirty, isAutosaving, didError]); // Once the isEditedPostNew changes from true to false, let's clear the auto-draft autosave.

  const wasEditedPostNew = (0, _compose.usePrevious)(isEditedPostNew);
  const prevPostId = (0, _compose.usePrevious)(postId);
  (0, _element.useEffect)(() => {
    if (prevPostId === postId && wasEditedPostNew && !isEditedPostNew) {
      (0, _controls.localAutosaveClear)(postId, true);
    }
  }, [isEditedPostNew, postId]);
}

function LocalAutosaveMonitor() {
  const {
    autosave
  } = (0, _data.useDispatch)('core/editor');
  const deferedAutosave = (0, _element.useCallback)(() => {
    requestIdleCallback(() => autosave({
      local: true
    }));
  }, []);
  useAutosaveNotice();
  useAutosavePurge();
  const {
    localAutosaveInterval
  } = (0, _data.useSelect)(select => ({
    localAutosaveInterval: select('core/editor').getEditorSettings().__experimentalLocalAutosaveInterval
  }), []);
  return (0, _element.createElement)(_autosaveMonitor.default, {
    interval: localAutosaveInterval,
    autosave: deferedAutosave
  });
}

var _default = (0, _compose.ifCondition)(hasSessionStorageSupport)(LocalAutosaveMonitor);

exports.default = _default;
//# sourceMappingURL=index.js.map