@alpaca-editor/core 1.0.0

package/src/editor/page-viewer/PageViewer.tsx

@@ -0,0 +1,127 @@
+import { Allotment, AllotmentHandle } from "allotment";
+import { PageViewContext } from "./pageViewContext";
+import { EditorForm } from "./EditorForm";
+import { PageViewerFrame } from "./PageViewerFrame";
+import { useEffect, useState } from "react";
+import { useRef } from "react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { useEditContext } from "../client/editContext";
+import { useDebouncedCallback } from "use-debounce";
+
+export function PageViewer({
+  pageViewContext,
+  showFormEditor,
+  mode,
+  name,
+  followEditsDefault,
+}: {
+  pageViewContext?: PageViewContext;
+  showFormEditor: boolean;
+  mode: "view" | "edit" | "compare";
+  name: string;
+  followEditsDefault?: boolean;
+}) {
+  const panels = [];
+
+  const editContext = useEditContext();
+
+  const [followEdits, setFollowEdits] = useState(followEditsDefault);
+
+  const allotmentRef = useRef<AllotmentHandle>(null);
+  const [formEditorWidth, setFormEditorWidth] = useState(0);
+
+  if (!pageViewContext) return null;
+
+  useEffect(() => {
+    const width = localStorage.getItem("editor.editFormWidth." + name)
+      ? parseInt(localStorage.getItem("editor.editFormWidth." + name)!)
+      : 300;
+
+    setFormEditorWidth(width);
+    resizePanels(width);
+  }, []);
+
+  const resizePanels = useDebouncedCallback((width: number) => {
+    if (!allotmentRef.current) return;
+    const newsizes: number[] = [];
+    if (showFormEditor) newsizes.push(width);
+    allotmentRef.current?.resize(newsizes);
+  }, 140);
+
+  useEffect(() => {
+    if (formEditorWidth > 0)
+      localStorage.setItem(
+        "editor.editFormWidth." + name,
+        formEditorWidth.toString()
+      );
+  }, [formEditorWidth]);
+
+  useEffect(() => {
+    if (
+      followEdits &&
+      editContext?.lastEditedFields &&
+      editContext.lastEditedFields.length > 0
+    ) {
+      const lastEdit =
+        editContext.lastEditedFields[editContext.lastEditedFields.length - 1];
+
+      if (!lastEdit) return;
+
+      editContext.select([lastEdit.item.id]);
+
+      const element =
+        pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelector(
+          `[data-fieldid="${lastEdit.fieldId}"][data-itemid="${lastEdit.item.id}"][data-language="${lastEdit.item.language}"][data-version="${lastEdit.item.version}"]`
+        );
+
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }, [editContext?.lastEditedFields]);
+
+  if (showFormEditor)
+    panels.push(
+      <div key="form" className="h-full w-full flex flex-col">
+        <div className="flex-1">
+          <EditorForm
+            pageViewContext={pageViewContext}
+            readonly={mode !== "edit"}
+          />
+        </div>
+        <div className="flex justify-between gap-1 bg-gray-50 p-1 items-center">
+          <div className="text-xs text-gray-500 p-1">
+            {editContext?.statusMessage}
+          </div>
+          <SimpleIconButton
+            icon="pi pi-step-forward"
+            className={followEdits ? "bg-gray-200" : ""}
+            label="Follow"
+            onClick={() => setFollowEdits((f) => !f)}
+          />
+        </div>
+      </div>
+    );
+
+  panels.push(
+    <PageViewerFrame
+      mode={mode}
+      pageViewContext={pageViewContext}
+      key="frame"
+    />
+  );
+
+  return (
+    <Allotment
+      proportionalLayout={false}
+      ref={allotmentRef}
+      onChange={(newSizes) => {
+        if (!newSizes || newSizes.length === 0) return;
+        if (showFormEditor && newSizes[0]) {
+          setFormEditorWidth(newSizes[0]);
+        }
+      }}
+      children={panels}
+    ></Allotment>
+  );
+}