@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,169 +0,0 @@
-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>
-      )}
-    </>
-  );
-}