@blocklet/discuss-kit-post 2.1.162 → 2.1.163

package/dist/api.d.ts

@@ -1,5 +1,6 @@
+import { Post } from './types';
 export declare const api: import('axios').AxiosInstance;
-export declare const fetchPost: (postId: string, locale: string) => Promise<any>;
+export declare const fetchPost: (postId: string, locale: string) => Promise<Post | null>;
 export declare const updatePostContent: (id: string, payload: {
     title: string;
     content: string;

package/dist/auto-save.d.ts

@@ -0,0 +1,18 @@
+import { SetState } from 'ahooks/lib/useSetState';
+export type Status = 'idle' | 'saving' | 'saved';
+type SaveAction<S, T> = (s: S) => Promise<T>;
+interface Option<S, T> {
+    save: SaveAction<S, T>;
+    paused?: boolean;
+    wait?: number;
+}
+declare const useAutoSaveState: <S extends Record<string, any>, T>(initialState: S, { save, paused, wait }: Option<S, T>) => {
+    state: S;
+    setState: SetState<S>;
+    status: Status;
+    saved: T | undefined;
+    saveNow: () => Promise<void>;
+    setInitialState: (s: S) => void;
+    error: Error | null;
+};
+export { useAutoSaveState };

package/dist/draft-status.d.ts

@@ -0,0 +1,8 @@
+import { Status } from './auto-save';
+interface Props {
+    status: Status;
+    error?: Error | null;
+    [key: string]: any;
+}
+export default function DraftStatus({ status, error, ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/edit.d.ts

@@ -0,0 +1,9 @@
+import { Post } from './types';
+interface Props {
+    post: Post;
+    onSave: (post: Post) => void;
+    onUpdate: (post: Post) => void;
+    onCancel: () => void;
+}
+export declare function PostEdit(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.es.js

@@ -1,11 +1,11 @@
 var _a, _b;
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, IconButton, Button } from "@mui/material";
-import { useRequest } from "ahooks";
+import { useMediaQuery, Box, CircularProgress, Tooltip, Stack, Button, IconButton } from "@mui/material";
+import { useSetState, useGetState, useDocumentVisibility, useRequest, useThrottleEffect, useTimeout } from "ahooks";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useContext, useState } from "react";
-import { EditorPreview, InternalThemeProvider, UploaderProvider, DefaultEditorConfigProvider, LazyEditor } from "@blocklet/discuss-kit-ux";
+import { useRef, useState, useCallback, useEffect, useContext } from "react";
+import { DirtyPromptContainer, utils, toast, LazyEditor, EditorPreview, InternalThemeProvider, UploaderProvider, DefaultEditorConfigProvider } from "@blocklet/discuss-kit-ux";
 import { Edit } from "@mui/icons-material";
 import { createAxios } from "@blocklet/js-sdk";
 import { joinURL, withQuery } from "ufo";
@@ -32,6 +32,173 @@ const updatePostContent = async (id, payload) => {
   const { data } = await api.put(`/posts/${id}/content`, payload);
   return data;
 };
+const useStatus = (saving) => {
+  const [status, setStatus] = useState("idle");
+  useEffect(() => {
+    if (saving) {
+      setStatus("saving");
+    } else {
+      setStatus((prev) => prev === "saving" ? "saved" : "idle");
+    }
+  }, [saving]);
+  useTimeout(
+    () => {
+      setStatus("idle");
+    },
+    status === "saved" ? 1500 : void 0
+  );
+  return status;
+};
+const useAutoSaveState = (initialState, { save, paused, wait = 3e4 }) => {
+  const [state, setStateInternal] = useSetState(initialState);
+  const [pendingState, setPendingState, getPendingState] = useGetState();
+  const latestState = pendingState || state;
+  const isInitialState = useRef(true);
+  const [error, setError] = useState(null);
+  const documentVisibility = useDocumentVisibility();
+  const { dirty, reset, markDirty } = DirtyPromptContainer.useContainer();
+  const { t } = useLocaleContext();
+  const handleSave = async (s) => {
+    try {
+      const result = await utils.minDelay(save(s), 1500);
+      const pendingState2 = getPendingState();
+      if (pendingState2) {
+        setStateInternal(pendingState2);
+        setPendingState(null);
+      } else {
+        reset();
+        setError(null);
+      }
+      return result;
+    } catch (e) {
+      setError(e);
+      toast.error(t("draftStatus.error"));
+      throw e;
+    }
+  };
+  const { data: saved, loading, run, runAsync } = useRequest(handleSave, { manual: true });
+  const status = useStatus(loading);
+  const canSave = !isInitialState.current && !paused && !loading && dirty;
+  useThrottleEffect(
+    () => {
+      if (paused || loading || !dirty || isInitialState.current) {
+        return;
+      }
+      run(state);
+    },
+    [state, paused],
+    { wait, leading: false }
+  );
+  const setState = (s) => {
+    if (loading) {
+      setPendingState({ ...state, ...s });
+    } else {
+      setStateInternal(s);
+    }
+    if (isInitialState.current) {
+      isInitialState.current = false;
+    }
+    if (!isInitialState.current) {
+      markDirty();
+    }
+  };
+  const setInitialState = useCallback(
+    (s) => {
+      setStateInternal(s);
+      isInitialState.current = true;
+    },
+    [setStateInternal]
+  );
+  const saveNow = useCallback(async () => {
+    if (canSave) {
+      await runAsync(state);
+    }
+  }, [canSave, runAsync, state]);
+  useEffect(() => {
+    if (documentVisibility === "hidden") {
+      saveNow();
+    }
+  }, [documentVisibility, saveNow]);
+  return { state: latestState, setState, setInitialState, status, saved, saveNow, error };
+};
+function DraftStatus({ status, error, ...rest }) {
+  const { t } = useLocaleContext();
+  const downMd = useMediaQuery((theme) => theme.breakpoints.down("md"));
+  if (downMd) {
+    return status !== "idle" ? /* @__PURE__ */ jsx(Box, { sx: { display: { xs: "inline-block", md: "none", lineHeight: 1 } }, component: CircularProgress, size: 16 }) : null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, ...rest, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: error == null ? void 0 : error.message, children: /* @__PURE__ */ jsx(Box, { sx: { width: 8, height: 8, borderRadius: "100%", bgcolor: error ? "error.main" : "success.main" } }) }),
+    /* @__PURE__ */ jsx(Box, { sx: { color: "grey.600", fontSize: 13, lineHeight: 1 }, component: "span", className: "draft-status-text", children: error ? t("draftStatus.error") : t(`draftStatus.${status}`) })
+  ] });
+}
+function InternalPostEdit({ post, onSave, onUpdate, onCancel, ...rest }) {
+  const { reset, check } = DirtyPromptContainer.useContainer();
+  const save = async (state) => {
+    if (!post) {
+      throw new Error("Invalid state");
+    }
+    try {
+      const updated = await updatePostContent(post.id, {
+        title: state.title,
+        content: state.content,
+        locale: post.locale,
+        contentVersion: post.contentVersion
+      });
+      onUpdate(updated);
+      return updated;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  };
+  const {
+    state: autoSaveState,
+    setState,
+    status,
+    error,
+    saveNow
+  } = useAutoSaveState({ title: (post == null ? void 0 : post.title) || "", content: (post == null ? void 0 : post.content) || "" }, { save });
+  const handleContentChange = ({ content }) => {
+    setState({ content });
+  };
+  const handleSave = async () => {
+    const updated = await updatePostContent(post.id, {
+      title: autoSaveState.title,
+      content: autoSaveState.content,
+      locale: post.locale,
+      contentVersion: post.contentVersion
+    });
+    onSave(updated);
+  };
+  const handleCancel = async () => {
+    if (await check()) {
+      onCancel();
+      reset();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => handleSave(), children: "Save" }),
+        /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, children: "Cancel" })
+      ] }),
+      /* @__PURE__ */ jsx(DraftStatus, { status, error })
+    ] }),
+    /* @__PURE__ */ jsx(
+      LazyEditor,
+      {
+        initialContent: post.content || "",
+        onChange: handleContentChange,
+        autoFocus: false,
+        onSave: () => saveNow()
+      }
+    )
+  ] });
+}
+function PostEdit(props) {
+  return /* @__PURE__ */ jsx(DirtyPromptContainer.Provider, { children: /* @__PURE__ */ jsx(InternalPostEdit, { ...props }) });
+}
 function InternalPost({ postId, sx, ...rest }) {
   var _a2, _b2;
   const { locale } = useLocaleContext();
@@ -49,18 +216,15 @@ function InternalPost({ postId, sx, ...rest }) {
   if (!post) {
     return null;
   }
-  const handleSave = async () => {
-    const updated = await updatePostContent(postId, {
-      title: post.title,
-      content: post.content,
-      locale: post.locale,
-      contentVersion: post.contentVersion
-    });
+  const handleUpdate = (saved) => {
     mutate((prev) => ({
       ...prev,
-      content: updated.content,
-      contentVersion: updated.contentVersion
+      content: saved.content,
+      contentVersion: saved.contentVersion
     }));
+  };
+  const handleSave = (saved) => {
+    handleUpdate(saved);
     setEditable(false);
   };
   const mergedSx = [
@@ -83,22 +247,7 @@ function InternalPost({ postId, sx, ...rest }) {
         children: /* @__PURE__ */ jsx(Edit, {})
       }
     ),
-    editable ? /* @__PURE__ */ jsxs(Box, { sx: {}, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, display: "flex", gap: 1 }, children: [
-        /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => handleSave(), children: "Save" }),
-        /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => setEditable(false), children: "Cancel" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        LazyEditor,
-        {
-          initialContent: post.content || "",
-          onChange: ({ content }) => mutate((prev) => ({
-            ...prev,
-            content
-          }))
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(EditorPreview, { content: post.content || "" })
+    editable ? /* @__PURE__ */ jsx(PostEdit, { post, onSave: handleSave, onUpdate: handleUpdate, onCancel: () => setEditable(false) }) : /* @__PURE__ */ jsx(EditorPreview, { content: post.content || "" })
   ] }) }) }) });
 }
 function Post(props) {

package/dist/index.umd.js

@@ -26,6 +26,173 @@
     const { data } = await api.put(`/posts/${id}/content`, payload);
     return data;
   };
+  const useStatus = (saving) => {
+    const [status, setStatus] = react.useState("idle");
+    react.useEffect(() => {
+      if (saving) {
+        setStatus("saving");
+      } else {
+        setStatus((prev) => prev === "saving" ? "saved" : "idle");
+      }
+    }, [saving]);
+    ahooks.useTimeout(
+      () => {
+        setStatus("idle");
+      },
+      status === "saved" ? 1500 : void 0
+    );
+    return status;
+  };
+  const useAutoSaveState = (initialState, { save, paused, wait = 3e4 }) => {
+    const [state, setStateInternal] = ahooks.useSetState(initialState);
+    const [pendingState, setPendingState, getPendingState] = ahooks.useGetState();
+    const latestState = pendingState || state;
+    const isInitialState = react.useRef(true);
+    const [error, setError] = react.useState(null);
+    const documentVisibility = ahooks.useDocumentVisibility();
+    const { dirty, reset, markDirty } = discussKitUx.DirtyPromptContainer.useContainer();
+    const { t } = context.useLocaleContext();
+    const handleSave = async (s) => {
+      try {
+        const result = await discussKitUx.utils.minDelay(save(s), 1500);
+        const pendingState2 = getPendingState();
+        if (pendingState2) {
+          setStateInternal(pendingState2);
+          setPendingState(null);
+        } else {
+          reset();
+          setError(null);
+        }
+        return result;
+      } catch (e) {
+        setError(e);
+        discussKitUx.toast.error(t("draftStatus.error"));
+        throw e;
+      }
+    };
+    const { data: saved, loading, run, runAsync } = ahooks.useRequest(handleSave, { manual: true });
+    const status = useStatus(loading);
+    const canSave = !isInitialState.current && !paused && !loading && dirty;
+    ahooks.useThrottleEffect(
+      () => {
+        if (paused || loading || !dirty || isInitialState.current) {
+          return;
+        }
+        run(state);
+      },
+      [state, paused],
+      { wait, leading: false }
+    );
+    const setState = (s) => {
+      if (loading) {
+        setPendingState({ ...state, ...s });
+      } else {
+        setStateInternal(s);
+      }
+      if (isInitialState.current) {
+        isInitialState.current = false;
+      }
+      if (!isInitialState.current) {
+        markDirty();
+      }
+    };
+    const setInitialState = react.useCallback(
+      (s) => {
+        setStateInternal(s);
+        isInitialState.current = true;
+      },
+      [setStateInternal]
+    );
+    const saveNow = react.useCallback(async () => {
+      if (canSave) {
+        await runAsync(state);
+      }
+    }, [canSave, runAsync, state]);
+    react.useEffect(() => {
+      if (documentVisibility === "hidden") {
+        saveNow();
+      }
+    }, [documentVisibility, saveNow]);
+    return { state: latestState, setState, setInitialState, status, saved, saveNow, error };
+  };
+  function DraftStatus({ status, error, ...rest }) {
+    const { t } = context.useLocaleContext();
+    const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("md"));
+    if (downMd) {
+      return status !== "idle" ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: { xs: "inline-block", md: "none", lineHeight: 1 } }, component: material.CircularProgress, size: 16 }) : null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: error == null ? void 0 : error.message, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { width: 8, height: 8, borderRadius: "100%", bgcolor: error ? "error.main" : "success.main" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { color: "grey.600", fontSize: 13, lineHeight: 1 }, component: "span", className: "draft-status-text", children: error ? t("draftStatus.error") : t(`draftStatus.${status}`) })
+    ] });
+  }
+  function InternalPostEdit({ post, onSave, onUpdate, onCancel, ...rest }) {
+    const { reset, check } = discussKitUx.DirtyPromptContainer.useContainer();
+    const save = async (state) => {
+      if (!post) {
+        throw new Error("Invalid state");
+      }
+      try {
+        const updated = await updatePostContent(post.id, {
+          title: state.title,
+          content: state.content,
+          locale: post.locale,
+          contentVersion: post.contentVersion
+        });
+        onUpdate(updated);
+        return updated;
+      } catch (e) {
+        console.error(e);
+        throw e;
+      }
+    };
+    const {
+      state: autoSaveState,
+      setState,
+      status,
+      error,
+      saveNow
+    } = useAutoSaveState({ title: (post == null ? void 0 : post.title) || "", content: (post == null ? void 0 : post.content) || "" }, { save });
+    const handleContentChange = ({ content }) => {
+      setState({ content });
+    };
+    const handleSave = async () => {
+      const updated = await updatePostContent(post.id, {
+        title: autoSaveState.title,
+        content: autoSaveState.content,
+        locale: post.locale,
+        contentVersion: post.contentVersion
+      });
+      onSave(updated);
+    };
+    const handleCancel = async () => {
+      if (await check()) {
+        onCancel();
+        reset();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1, display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "contained", color: "primary", onClick: () => handleSave(), children: "Save" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "outlined", onClick: handleCancel, children: "Cancel" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DraftStatus, { status, error })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        discussKitUx.LazyEditor,
+        {
+          initialContent: post.content || "",
+          onChange: handleContentChange,
+          autoFocus: false,
+          onSave: () => saveNow()
+        }
+      )
+    ] });
+  }
+  function PostEdit(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.DirtyPromptContainer.Provider, { children: /* @__PURE__ */ jsxRuntime.jsx(InternalPostEdit, { ...props }) });
+  }
   function InternalPost({ postId, sx, ...rest }) {
     var _a2, _b2;
     const { locale } = context.useLocaleContext();
@@ -43,18 +210,15 @@
     if (!post) {
       return null;
     }
-    const handleSave = async () => {
-      const updated = await updatePostContent(postId, {
-        title: post.title,
-        content: post.content,
-        locale: post.locale,
-        contentVersion: post.contentVersion
-      });
+    const handleUpdate = (saved) => {
       mutate((prev) => ({
         ...prev,
-        content: updated.content,
-        contentVersion: updated.contentVersion
+        content: saved.content,
+        contentVersion: saved.contentVersion
       }));
+    };
+    const handleSave = (saved) => {
+      handleUpdate(saved);
       setEditable(false);
     };
     const mergedSx = [
@@ -77,22 +241,7 @@
           children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Edit, {})
         }
       ),
-      editable ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {}, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1, display: "flex", gap: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "contained", color: "primary", onClick: () => handleSave(), children: "Save" }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "outlined", onClick: () => setEditable(false), children: "Cancel" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          discussKitUx.LazyEditor,
-          {
-            initialContent: post.content || "",
-            onChange: ({ content }) => mutate((prev) => ({
-              ...prev,
-              content
-            }))
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.EditorPreview, { content: post.content || "" })
+      editable ? /* @__PURE__ */ jsxRuntime.jsx(PostEdit, { post, onSave: handleSave, onUpdate: handleUpdate, onCancel: () => setEditable(false) }) : /* @__PURE__ */ jsxRuntime.jsx(discussKitUx.EditorPreview, { content: post.content || "" })
     ] }) }) }) });
   }
   function Post(props) {

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+export interface Post {
+    id: string;
+    type: 'blog' | 'post' | 'doc' | 'bookmark';
+    title: string;
+    content: string;
+    locale?: string;
+    contentVersion: number;
+    createdAt: Date;
+    updatedAt: Date;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-post",
-  "version": "2.1.162",
+  "version": "2.1.163",
   "files": [
     "dist"
   ],
@@ -22,7 +22,7 @@
     "@mui/icons-material": "^5.16.7",
     "ahooks": "^3.8.1",
     "ufo": "1.3.1",
-    "@blocklet/discuss-kit-ux": "^2.1.162"
+    "@blocklet/discuss-kit-ux": "^2.1.163"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",