@alpaca-editor/core 1.0.0

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useRef, useState } from "react";
+
+import { EditButton, useEditContext } from "../client/editContext";
+import { Rect, findComponentRect } from "../utils";
+import { useThrottledCallback } from "use-debounce";
+import { Component } from "../pageModel";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+
+export function FrameMenu({
+  component,
+  mode,
+  pageViewContext,
+}: {
+  component: Component;
+  mode: "edit" | "compare" | "view";
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const mutationObserverRef = useRef<MutationObserver | null>(null);
+
+  const [componentRect, setComponentRect] = useState<Rect>();
+
+  const updatePosition = () => {
+    if (!component || !editContext || !pageViewContext) return;
+
+    const iframe = pageViewContext.editorIframeRef.current;
+
+    if (!iframe) return;
+
+    const resetSelection = () => {
+      setComponentRect(undefined);
+    };
+
+    const componentRect = findComponentRect(iframe, component.id)?.rect;
+
+    if (!componentRect) {
+      resetSelection();
+      return;
+    }
+
+    setComponentRect(componentRect);
+  };
+
+  const updatePositionThrottled = useThrottledCallback(updatePosition, 30);
+
+  // Effect to handle changes in the observed element
+  useEffect(() => {
+    if (component) {
+      const iframe = pageViewContext!.editorIframeRef.current;
+      if (!iframe) return;
+
+      mutationObserverRef.current = new MutationObserver(() => {
+        updatePosition();
+      });
+
+      if (!iframe.contentDocument) return;
+
+      mutationObserverRef.current.observe(iframe.contentDocument, {
+        childList: true, // observe direct children changes
+        subtree: true, // observe all descendants changes
+        characterData: true, // observe text changes
+        //attributes: true, // observe attribute changes (like style or class)
+      });
+      // Create a new ResizeObserver instance
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updatePosition();
+      });
+
+      const scrollContainer =
+        iframe.contentWindow?.document.scrollingElement ||
+        iframe.contentWindow?.document.body;
+
+      scrollContainer?.addEventListener("scroll", updatePositionThrottled);
+      iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
+
+      const componentRect = findComponentRect(iframe, component.id);
+
+      if (!componentRect) {
+        updatePosition();
+        return;
+      }
+
+      componentRect.elements.forEach((componentElement) => {
+        resizeObserverRef.current!.observe(componentElement);
+      });
+    }
+
+    return () => {
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+        mutationObserverRef.current = null;
+      }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [component]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      updatePosition();
+    }, 100);
+  }, [
+    pageViewContext?.scroll,
+    pageViewContext?.viewport,
+    pageViewContext?.device,
+    pageViewContext?.fullscreen,
+    pageViewContext?.zoom,
+  ]);
+
+  if (!component || !editContext) return null;
+
+  const commands = editContext.getComponentCommands([component]);
+  const isDraggable =
+    mode === "edit" &&
+    !component.layoutId &&
+    pageViewContext.page?.item.canWriteItem;
+  false;
+
+  const commandButtons = commands
+    .filter(
+      (x) =>
+        !editContext.isCommandDisabled({ command: x }) &&
+        x.visibilityScopes.indexOf("editFrame") >= 0,
+    )
+    .map((x) => ({
+      id: x.id + "_button",
+      icon: x.icon,
+      label: x.label,
+      onClick: (ev: any) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        editContext.executeCommand({
+          command: x,
+          event: ev,
+        });
+      },
+    }));
+
+  const customButtons: EditButton[] = []; // TODO
+  let buttons = [...customButtons];
+
+  buttons = [...buttons, ...commandButtons];
+
+  function handleDragStart(event: React.DragEvent<HTMLDivElement>): void {
+    if (!component?.datasourceItem) return;
+    event.dataTransfer.setData("componentId", component.id);
+    setTimeout(() => {
+      if (!component?.datasourceItem) return;
+      editContext!.dragStart({
+        type: "component",
+        typeId: component.typeId,
+        templateId: component.datasourceItem?.templateId,
+        name: component.name,
+        component: {
+          id: component.id,
+          language: pageViewContext.page!.item.language,
+          version: pageViewContext.page!.item.version,
+        },
+      });
+    }, 50);
+
+    event.stopPropagation();
+  }
+
+  function handleDragEnd(): void {
+    editContext!.dragEnd();
+  }
+
+  const isShared = component.datasourceItem?.id !== component.id;
+  const isReadonly = mode === "compare" || mode === "view";
+  const isLayout = component.layoutId;
+
+  const color = isReadonly
+    ? "readonly"
+    : isShared
+      ? "shared"
+      : isLayout
+        ? "layout"
+        : "default";
+
+  const colorVariants = {
+    shared: "border-orange-400",
+    readonly: "border-purple-400",
+    layout: "border-purple-400",
+    default: "border-sky-400",
+  };
+
+  const bgColorVariants = {
+    shared: "bg-orange-400",
+    readonly: "bg-purple-400",
+    layout: "bg-purple-400",
+    default: "bg-sky-400",
+  };
+  if (!componentRect) return null;
+
+  const isMultiSelected = editContext.selection.length > 1;
+
+  return (
+    <>
+      <div
+        className={`pointer-events-none absolute inset-0 border-2 ${colorVariants[color]} tour-frame-menu opacity-50 hover:opacity-100`}
+        style={{
+          left: componentRect.x,
+          top: componentRect.y,
+          width: componentRect.width,
+          height: componentRect.height,
+          zIndex: 8,
+        }}
+        data-testid="frame-menu"
+      >
+        {!isMultiSelected && (
+          <div
+            className={
+              `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
+              (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg")
+            }
+            style={{
+              right: "-2px",
+              top: componentRect.y - 36 < 0 ? "0" : undefined,
+              bottom:
+                componentRect.y - 36 >= 0
+                  ? componentRect.height - 2
+                  : undefined,
+              zIndex: 800,
+              height: "36px",
+            }}
+          >
+            <div
+              draggable={isDraggable}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              className={`px-4 ${
+                isDraggable ? "cursor-move" : "cursor-default"
+              } `}
+            >
+              {component.name}
+            </div>
+            {mode === "edit" && (
+              <div className="flex items-center gap-2">
+                {buttons.map((b, i) => (
+                  <div className="cursor-pointer p-1" key={i}>
+                    {typeof b.icon === "string" ? (
+                      <i
+                        className={b.icon + " cursor-pointer"}
+                        onClick={b.onClick}
+                        title={b.label}
+                      />
+                    ) : (
+                      b.icon
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/editor/page-editor-chrome/FrameMenus.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { findComponent } from "../componentTreeHelper";
+import { useEditContext } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FrameMenu } from "./FrameMenu";
+import { Component } from "../pageModel";
+export function FrameMenus({
+  mode,
+  pageViewContext,
+}: {
+  mode: "edit" | "compare" | "view";
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const selection = editContext?.selection;
+
+  const [components, setComponents] = useState<Component[]>([]);
+
+  useEffect(() => {
+    if (!pageViewContext.page) return;
+
+    const comps: Component[] = selection
+      ? selection
+          .map((id) =>
+            findComponent(
+              id,
+              pageViewContext.page?.rootComponent.placeholders || []
+            )
+          )
+          .filter((c): c is NonNullable<typeof c> => c !== undefined)
+      : [];
+
+    setComponents(comps);
+  }, [selection, pageViewContext.page]);
+
+  return (
+    <>
+      {components.map((c) => (
+        <FrameMenu
+          key={c.id}
+          component={c}
+          mode={mode}
+          pageViewContext={pageViewContext}
+        />
+      ))}{" "}
+    </>
+  );
+}

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useRef } from "react";
+import {
+  useEditContext,
+  useModifiedFieldsContext,
+} from "../client/editContext";
+import { useThrottledCallback } from "use-debounce";
+import { getFieldDescriptorFromElement, hasFieldLock } from "../utils";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+
+export function InlineEditor({
+  pageViewContext,
+  mode,
+}: {
+  pageViewContext: PageViewContext;
+  mode: "edit" | "view";
+}) {
+  const context = useEditContext();
+  const modifiedFieldsContext = useModifiedFieldsContext();
+
+  if (!context) return;
+
+  const mutationObserverRef = useRef<MutationObserver | null>(null);
+
+  const debouncedSetFieldvalue = useThrottledCallback(
+    (value, fieldId, fieldName, itemId, language, version) => {
+      var modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find(
+        (x) =>
+          x.fieldId === fieldId &&
+          x.item.id === itemId &&
+          x.item.language === language &&
+          x.item.version === version
+      )?.value;
+
+      if (modifiedFieldValue === value) return;
+
+      context.operations.editField({
+        field: {
+          fieldId,
+          fieldName: fieldName ?? undefined,
+          item: {
+            id: itemId,
+            language,
+            version,
+          },
+        },
+        refresh: "none",
+        value: value,
+      });
+    },
+    context.configuration.debounceFieldEditsInterval
+  );
+
+  useEffect(() => {
+    if (!context || mode === "view") return;
+    const element = context.inlineEditingFieldElement;
+
+    const editableElements =
+      pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
+        '[contenteditable="true"]'
+      );
+
+    editableElements?.forEach((element) => {
+      if (element !== context.inlineEditingFieldElement)
+        element.setAttribute("contenteditable", "false");
+    });
+
+    if (element) {
+      const fieldId = element.getAttribute("data-fieldid");
+      const fieldName = element.getAttribute("data-fieldname");
+      const itemId = element.getAttribute("data-itemid");
+      const language = element.getAttribute("data-language");
+      const versionText = element.getAttribute("data-version");
+      const version = versionText ? parseInt(versionText) : undefined;
+      const isRichText = element.getAttribute("data-is-richtext") === "true";
+
+      if (!fieldId || !itemId || !language || !version) return;
+
+      const fieldDescriptor = getFieldDescriptorFromElement(element);
+
+      const hasFielLock = hasFieldLock(fieldDescriptor, context);
+
+      if (!hasFielLock) return;
+
+      element.setAttribute("contenteditable", "true");
+
+      mutationObserverRef.current = new MutationObserver(() => {
+        debouncedSetFieldvalue(
+          isRichText ? element.innerHTML : element.innerText,
+          fieldId,
+          fieldName,
+          itemId,
+          language,
+          version
+        );
+      });
+
+      element.focus();
+
+      mutationObserverRef.current.observe(element, {
+        childList: true, // observe direct children changes
+        subtree: true, // observe all descendants changes
+        characterData: true, // observe text changes
+        //attributes: true, // observe attribute changes (like style or class)
+      });
+    }
+    return () => {
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+        mutationObserverRef.current = null;
+      }
+    };
+  }, [context?.inlineEditingFieldElement]);
+
+  useEffect(() => {
+    const updateFields = async () => {
+      modifiedFieldsContext?.modifiedFields.forEach((field) => {
+        const elements =
+          pageViewContext.editorIframeRef.current!.contentWindow?.document.querySelectorAll(
+            `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"`
+          );
+
+        elements?.forEach(async (element) => {
+          if (element && element !== context?.inlineEditingFieldElement) {
+            const realField = await context.itemsRepository.getField(field);
+            const fieldType = realField?.type;
+
+            if (
+              fieldType === "rich text" ||
+              fieldType === "single-line text" ||
+              fieldType === "multi-line text"
+            ) {
+              element.innerHTML = field?.value ? (field.value as string) : "";
+            }
+          }
+        });
+      });
+    };
+
+    updateFields();
+  }, [
+    modifiedFieldsContext?.modifiedFields,
+    context?.itemsRepository.revision,
+    context?.inlineEditingFieldElement,
+  ]);
+
+  return null;
+}

package/src/editor/page-editor-chrome/LockedFieldIndicator.tsx

@@ -0,0 +1,61 @@
+import { useEditContext } from "../client/editContext";
+import { findFieldElement } from "../utils";
+import { EditSession } from "../../types";
+
+export function LockedFieldIndicator() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const sessionsWithFieldLock = editContext.activeSessions.filter(
+    (x) => x.fieldLock && x.sessionId !== editContext.sessionId
+  );
+
+  return (
+    <>
+      {sessionsWithFieldLock.map((session) => {
+        if (!session.fieldLock) return;
+        const iframe = editContext.pageView.editorIframeRef.current;
+        if (!iframe) return;
+        const element = findFieldElement(iframe, session.fieldLock);
+        if (!element) return;
+
+        return (
+          <FieldLock
+            key={session.sessionId}
+            element={element}
+            iframe={iframe}
+            session={session}
+          />
+        );
+      })}
+    </>
+  );
+}
+function FieldLock({
+  element,
+  iframe,
+  session,
+}: {
+  session: EditSession;
+  element: Element;
+  iframe: HTMLIFrameElement;
+}) {
+  const rect = element.getBoundingClientRect();
+  const editorRect = iframe.getBoundingClientRect();
+
+  if (rect && editorRect) {
+    return (
+      <div
+        className="absolute  text-xs text-white p-0.5 rounded hover:opacity-100 opacity-90"
+        style={{
+          left: rect.left + "px",
+          top: rect.top + "px",
+          background: session.color,
+        }}
+      >
+        {session.user.name}
+      </div>
+    );
+  }
+  return null;
+}

package/src/editor/page-editor-chrome/NoLayout.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+import { FullItem } from "../pageModel";
+import { useEditContext } from "../client/editContext";
+
+export function NoLayout() {
+  const [lastPageItem, setLastPageItem] = useState<FullItem | null>(null);
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    const updateLastPage = async () => {
+      if (!editContext?.pageView.pageItemDescriptor) return;
+
+      const lastPage = await editContext.itemsRepository.getItem(
+        editContext.pageView.pageItemDescriptor
+      );
+
+      if (lastPage) setLastPageItem(lastPage);
+    };
+
+    updateLastPage();
+  }, [editContext?.currentItemDescriptor]);
+  return (
+    <div className="h-full w-full flex flex-col items-center justify-center text-sm">
+      Item has no layout.
+      {lastPageItem && (
+        <div
+          className="cursor-pointer hover:underline p-2"
+          onClick={() => editContext?.loadItem(lastPageItem.descriptor)}
+        >
+          Load {lastPageItem?.name}?
+        </div>
+      )}
+    </div>
+  );
+}

package/src/editor/page-editor-chrome/PageEditorChrome.tsx

@@ -0,0 +1,119 @@
+import { useEditContext } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { InlineEditor } from "./InlineEditor";
+import { FieldActionsIndicators } from "./FieldActionIndicators";
+import { PlaceholderDropZones } from "./PlaceholderDropZones";
+import { PictureEditorOverlay } from "./PictureEditorOverlay";
+import { useEffect, useState } from "react";
+import { LockedFieldIndicator } from "./LockedFieldIndicator";
+import { FrameMenus } from "./FrameMenus";
+import { FieldEditedIndicators } from "./FieldEditedIndicators";
+import { CommentHighlightings } from "./CommentHighlightings";
+
+export function PageEditorChrome({
+  iframe,
+  mode,
+  pageViewContext,
+}: {
+  iframe: HTMLIFrameElement;
+  mode: "edit" | "compare" | "view";
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const [insertingStyle, setInsertingStyle] = useState<React.CSSProperties>();
+
+  if (!editContext?.pageView || !iframe?.contentDocument) return null;
+
+  useEffect(() => {
+    if (!editContext.inserting) setInsertingStyle(undefined);
+    let insertingPosition: { y: number; x: number } | undefined;
+    const insertingRect = editContext.inserting
+      ? editContext.inserting.positionElement.getBoundingClientRect()
+      : null;
+
+    if (insertingRect) {
+      if (editContext.inserting?.positionAnchor === "top")
+        insertingPosition = {
+          y: insertingRect.y,
+          x: insertingRect.x + insertingRect.width / 2,
+        };
+      if (editContext.inserting?.positionAnchor === "bottom")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height,
+          x: insertingRect.x + insertingRect.width / 2,
+        };
+      if (editContext.inserting?.positionAnchor === "left")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height / 2,
+          x: insertingRect.x,
+        };
+      if (editContext.inserting?.positionAnchor === "right")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height / 2,
+          x: insertingRect.x + insertingRect.width,
+        };
+    }
+
+    const getInsertingStyle = () => {
+      if (!insertingPosition) return;
+      const scale = pageViewContext.zoom;
+      const x = Math.min(
+        pageViewContext.viewport.width - 20,
+        Math.max(20, insertingPosition.x * (scale || 1))
+      );
+      const y = Math.min(
+        pageViewContext.viewport.height - 20,
+        Math.max(20, insertingPosition.y * (scale || 1))
+      );
+
+      return {
+        top: y - 16 + "px",
+        left: x - 16 + "px",
+        zIndex: 1000,
+      };
+    };
+
+    const insertingStyle = getInsertingStyle();
+    setInsertingStyle(insertingStyle);
+  }, [editContext.inserting, pageViewContext.viewport]);
+
+  return (
+    <>
+      <FrameMenus mode={mode} pageViewContext={pageViewContext} />
+      <InlineEditor
+        mode={mode === "edit" ? "edit" : "view"}
+        pageViewContext={pageViewContext}
+      />
+      <LockedFieldIndicator />
+      <FieldActionsIndicators />
+      {editContext.showComments && (
+        <CommentHighlightings
+          iframe={pageViewContext?.editorIframeRef.current!}
+          scale={1}
+        />
+      )}
+
+      <FieldEditedIndicators pageViewContext={pageViewContext} />
+
+      {mode === "edit" && (
+        <>
+          <PlaceholderDropZones
+            iframe={pageViewContext?.editorIframeRef.current}
+            size="large"
+          />
+          <PictureEditorOverlay />
+
+          {insertingStyle && (
+            <div
+              className="absolute flex h-8 w-8"
+              style={insertingStyle}
+            >
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-8 w-8 bg-sky-500"></span>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}