@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,169 @@
+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";
+import { Ellipsis, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+
+export function PageViewer({
+  pageViewContext,
+  showFormEditor,
+  compareView,
+  name,
+  followEditsDefault,
+}: {
+  pageViewContext?: PageViewContext;
+  showFormEditor: boolean;
+  compareView?: boolean;
+  name: string;
+  followEditsDefault?: boolean;
+}) {
+  const panels = [];
+
+  const editContext = useEditContext();
+
+  const [followEdits, setFollowEdits] = useState(followEditsDefault);
+
+  const allotmentRef = useRef<AllotmentHandle>(null);
+  const [formEditorWidth, setFormEditorWidth] = useState(0);
+  const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
+
+  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
+    ) {
+      if (editContext.inlineEditingFieldElement) return;
+
+      const lastEdit =
+        editContext.lastEditedFields[editContext.lastEditedFields.length - 1];
+
+      if (!lastEdit) return;
+
+      if (!lastEdit.user.ai && lastEdit.user.name == editContext.user?.name)
+        return;
+
+      if (editContext.selection.indexOf(lastEdit.item.id) === -1) {
+        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) {
+    if (!formEditorCollapsed) {
+      panels.push(
+        <div key="form" className="flex h-full w-full flex-col">
+          <div className="flex-1">
+            <EditorForm
+              pageViewContext={pageViewContext}
+              readonly={editContext?.mode !== "edit"}
+              compareView={compareView || false}
+            />
+          </div>
+          <div className="flex items-center justify-between gap-1 bg-gray-50 p-1">
+            <div className="p-1 text-xs text-gray-500">
+              {editContext?.statusMessage}
+            </div>
+            <div className="flex gap-1">
+              <SimpleIconButton
+                icon=<Ellipsis size={12} />
+                selected={editContext?.enableCompletions}
+                label="Enable Completions"
+                onClick={() => editContext?.setEnableCompletions((c) => !c)}
+              />
+              <SimpleIconButton
+                icon="pi pi-step-forward"
+                selected={followEdits}
+                label="Follow"
+                onClick={() => setFollowEdits((f) => !f)}
+              />
+              <SimpleIconButton
+                icon={<PanelLeftClose size={12} />}
+                label="Collapse"
+                onClick={() => setFormEditorCollapsed(true)}
+              />
+            </div>
+          </div>
+        </div>,
+      );
+    }
+  }
+
+  panels.push(
+    <PageViewerFrame
+      compareView={compareView || false}
+      pageViewContext={pageViewContext}
+      key="frame"
+    />,
+  );
+
+  if (editContext?.isMobile) {
+    panels.reverse();
+  }
+
+  return (
+    <>
+      <Allotment
+        proportionalLayout={false}
+        ref={allotmentRef}
+        vertical={editContext?.isMobile}
+        onChange={(newSizes) => {
+          if (!newSizes || newSizes.length === 0) return;
+          if (showFormEditor && newSizes[0]) {
+            setFormEditorWidth(newSizes[0]);
+          }
+        }}
+        children={panels}
+      ></Allotment>
+      {formEditorCollapsed && (
+        <div className="absolute bottom-0 left-0 z-10 flex items-center justify-center">
+          <SimpleIconButton
+            icon={<PanelLeftOpen size={12} />}
+            label="Open Form"
+            onClick={() => setFormEditorCollapsed(false)}
+          />
+        </div>
+      )}
+    </>
+  );
+}