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

Enhanced block editor for WordPress posts.

// packages/editor/src/components/local-autosave-monitor/index.js
import { useCallback, useEffect, useMemo, useRef } from "@wordpress/element";
import { ifCondition, usePrevious } from "@wordpress/compose";
import { useSelect, useDispatch, useRegistry } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import { parse } from "@wordpress/blocks";
import { store as noticesStore } from "@wordpress/notices";
import AutosaveMonitor from "../autosave-monitor/index.mjs";
import {
  localAutosaveGet,
  localAutosaveGetSnapshot,
  localAutosaveClear
} from "../../store/local-autosave.mjs";
import { store as editorStore } from "../../store/index.mjs";
import useEntityContainsSnapshot from "../provider/use-entity-contains-snapshot.mjs";
import { jsx } from "react/jsx-runtime";
var requestIdleCallback = window.requestIdleCallback ? window.requestIdleCallback : window.requestAnimationFrame;
var hasStorageSupport;
var hasSessionStorageSupport = () => {
  if (hasStorageSupport !== void 0) {
    return hasStorageSupport;
  }
  try {
    window.sessionStorage.setItem("__wpEditorTestSessionStorage", "");
    window.sessionStorage.removeItem("__wpEditorTestSessionStorage");
    hasStorageSupport = true;
  } catch {
    hasStorageSupport = false;
  }
  return hasStorageSupport;
};
function useAutosaveNotice() {
  const registry = useRegistry();
  const { postId, postType, isEditedPostNew } = useSelect(
    (select) => ({
      postId: select(editorStore).getCurrentPostId(),
      postType: select(editorStore).getCurrentPostType(),
      isEditedPostNew: select(editorStore).isEditedPostNew()
    }),
    []
  );
  const localAutosave = useMemo(() => {
    const backup = localAutosaveGet(postId, isEditedPostNew);
    if (!backup) {
      return null;
    }
    try {
      return JSON.parse(backup);
    } catch {
      return null;
    }
  }, [postId, isEditedPostNew]);
  const snapshotStatus = useEntityContainsSnapshot({
    postType,
    postId,
    snapshot: localAutosaveGetSnapshot(localAutosave)
  });
  useEffect(() => {
    if (!localAutosave) {
      return;
    }
    if ("pending" === snapshotStatus) {
      return;
    }
    if ("present" === snapshotStatus) {
      localAutosaveClear(postId, isEditedPostNew);
      return;
    }
    const { post_title: title, content, excerpt } = localAutosave;
    const edits = { title, content, excerpt };
    const { getEditedPostAttribute, getEditorSettings } = registry.select(editorStore);
    const hasDifference = Object.keys(edits).some((key) => {
      return edits[key] !== getEditedPostAttribute(key);
    });
    if (!hasDifference) {
      localAutosaveClear(postId, isEditedPostNew);
      return;
    }
    const hasRemoteAutosave = !!getEditorSettings().autosave;
    if (hasRemoteAutosave) {
      return;
    }
    const { createWarningNotice, removeNotice } = registry.dispatch(noticesStore);
    const { editPost, resetEditorBlocks } = registry.dispatch(editorStore);
    const id = "wpEditorAutosaveRestore";
    createWarningNotice(
      __(
        "The backup of this post in your browser is different from the version below."
      ),
      {
        id,
        actions: [
          {
            label: __("Restore the backup"),
            onClick() {
              const {
                content: editsContent,
                ...editsWithoutContent
              } = edits;
              editPost(editsWithoutContent);
              resetEditorBlocks(parse(edits.content));
              removeNotice(id);
            }
          }
        ]
      }
    );
  }, [registry, postId, isEditedPostNew, localAutosave, snapshotStatus]);
}
function useAutosavePurge() {
  const { postId, isEditedPostNew, isDirty, isAutosaving, didError } = useSelect(
    (select) => ({
      postId: select(editorStore).getCurrentPostId(),
      isEditedPostNew: select(editorStore).isEditedPostNew(),
      isDirty: select(editorStore).isEditedPostDirty(),
      isAutosaving: select(editorStore).isAutosavingPost(),
      didError: select(editorStore).didPostSaveRequestFail()
    }),
    []
  );
  const lastIsDirtyRef = useRef(isDirty);
  const lastIsAutosavingRef = useRef(isAutosaving);
  useEffect(() => {
    if (!didError && (lastIsAutosavingRef.current && !isAutosaving || lastIsDirtyRef.current && !isDirty)) {
      localAutosaveClear(postId, isEditedPostNew);
    }
    lastIsDirtyRef.current = isDirty;
    lastIsAutosavingRef.current = isAutosaving;
  }, [isDirty, isAutosaving, didError]);
  const wasEditedPostNew = usePrevious(isEditedPostNew);
  const prevPostId = usePrevious(postId);
  useEffect(() => {
    if (prevPostId === postId && wasEditedPostNew && !isEditedPostNew) {
      localAutosaveClear(postId, true);
    }
  }, [isEditedPostNew, postId]);
}
function LocalAutosaveMonitor() {
  const { autosave } = useDispatch(editorStore);
  const deferredAutosave = useCallback(() => {
    requestIdleCallback(() => autosave({ local: true }));
  }, []);
  useAutosaveNotice();
  useAutosavePurge();
  const localAutosaveInterval = useSelect(
    (select) => select(editorStore).getEditorSettings().localAutosaveInterval,
    []
  );
  return /* @__PURE__ */ jsx(
    AutosaveMonitor,
    {
      interval: localAutosaveInterval,
      autosave: deferredAutosave
    }
  );
}
var local_autosave_monitor_default = ifCondition(hasSessionStorageSupport)(LocalAutosaveMonitor);
export {
  local_autosave_monitor_default as default
};
//# sourceMappingURL=index.mjs.map