@alpaca-editor/core 1.0.3812 → 1.0.3815

package/src/editor/page-viewer/pageModelBuilder.ts

@@ -0,0 +1,412 @@
+import { EditContextType } from "../client/editContext";
+import { PageViewContext } from "./pageViewContext";
+import {
+  ComponentSkeleton,
+  PageSkeleton,
+  PlaceholderSkeleton,
+  RenderedItemSkeleton,
+} from "../pageModel";
+
+export function buildPageModel(
+  iframeDocument: Document | undefined,
+  editContextRef: React.MutableRefObject<EditContextType | undefined>,
+  pageViewContextRef: React.MutableRefObject<PageViewContext | undefined>,
+) {
+  if (!iframeDocument || !editContextRef.current || !pageViewContextRef.current)
+    return;
+
+  const extractItemId = (uri: string): string => {
+    const match = uri.match(/\{[A-F0-9-]+\}/i);
+    return match
+      ? match[0].replace(/[{}]/g, "").toLowerCase()
+      : uri.toLowerCase();
+  };
+
+  // Function to ensure IDs are in UUID format
+  const ensureUUIDFormat = (id: string): string => {
+    // If it's already in UUID format (with or without curly braces), return it
+    if (
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
+    ) {
+      return id;
+    }
+
+    // If it's in curly braces format, remove them
+    if (
+      /^\{[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\}$/i.test(
+        id,
+      )
+    ) {
+      return id.replace(/[{}]/g, "");
+    }
+
+    // If it's a GUID without hyphens, add them
+    if (/^[0-9a-f]{32}$/i.test(id)) {
+      return `${id.substring(0, 8)}-${id.substring(8, 12)}-${id.substring(12, 16)}-${id.substring(16, 20)}-${id.substring(20, 32)}`;
+    }
+
+    // If it's a shorter ID, pad it to make it a valid UUID
+    if (id.length < 32) {
+      const paddedId = id.padEnd(32, "0");
+      return `${paddedId.substring(0, 8)}-${paddedId.substring(8, 12)}-${paddedId.substring(12, 16)}-${paddedId.substring(16, 20)}-${paddedId.substring(20, 32)}`;
+    }
+
+    // For any other format, return as is
+    return id;
+  };
+
+  const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor;
+
+  if (!pageItemDescriptor) return;
+
+  const pageItem: RenderedItemSkeleton = {
+    ...pageItemDescriptor,
+    renderedFieldIds: [],
+  };
+
+  const start = performance.now();
+
+  const treeWalker = iframeDocument.createTreeWalker(
+    iframeDocument.documentElement, // Root node to start traversal
+    NodeFilter.SHOW_ELEMENT, // Only show element nodes
+    null, // Optional filter function, can be `null`
+  );
+
+  const root: ComponentSkeleton = {
+    placeholders: [],
+    id: "page",
+    type: "Page",
+    typeId: "",
+    name: "Page",
+    items: [pageItem],
+    datasourceItem: pageItem,
+    renderedDictionaryKeys: [],
+    editorFields: {},
+  };
+
+  let currentComponent: ComponentSkeleton | undefined = root;
+  let currentPlaceholder: undefined | PlaceholderSkeleton;
+
+  const startComponent = (
+    componentStartId: string,
+    element: Element,
+    dataSourceItemId?: string,
+  ) => {
+    if (!currentPlaceholder) {
+      if (!currentComponent) {
+        console.error(
+          "Component start without parent component:",
+          componentStartId,
+        );
+        return;
+      }
+
+      currentPlaceholder = currentComponent.placeholders.find(
+        (x) => x.key === "implicit_" + currentComponent?.datasourceItem?.id,
+      );
+
+      if (!currentPlaceholder) {
+        currentPlaceholder = {
+          key: "implicit_" + currentComponent?.datasourceItem?.id,
+          name: "Implicit placeholder: " + currentComponent?.datasourceItem?.id,
+          description: "",
+          components: [],
+          parentComponent: currentComponent,
+        };
+
+        if (!currentComponent) {
+          console.error(
+            "Component start without placeholder or parent component",
+          );
+        } else {
+          currentComponent.placeholders.push(currentPlaceholder);
+        }
+      }
+    }
+    if (currentPlaceholder) {
+      const language =
+        element.getAttribute("data-language") || pageItem.language;
+      const version = element.hasAttribute("data-version")
+        ? parseInt(element.getAttribute("data-version")!)
+        : pageItem.version;
+
+      const itemId = dataSourceItemId || element.getAttribute("data-itemid");
+
+      const datasourceItem = itemId
+        ? {
+            id: itemId,
+            language,
+            version,
+            renderedFieldIds: [],
+          }
+        : undefined;
+
+      const layoutId = element.getAttribute("data-layoutid");
+
+      currentComponent = currentPlaceholder.components.find(
+        (x) => x.id === componentStartId,
+      );
+
+      if (!currentComponent) {
+        currentComponent = {
+          id: componentStartId,
+          name: "",
+          type: element.getAttribute("data-type") || "",
+          typeId: element.getAttribute("data-typeid") || "",
+          items: datasourceItem ? [datasourceItem] : [],
+          placeholders: [],
+          parentPlaceholder: currentPlaceholder,
+          renderedDictionaryKeys: [],
+          datasourceItem,
+          layoutId: layoutId || undefined,
+          editorFields: {},
+          firstDOMElement:
+            element.tagName === "SCRIPT"
+              ? (element.nextElementSibling ?? element)
+              : element,
+        };
+
+        currentPlaceholder.components.push(currentComponent);
+      }
+      currentPlaceholder = undefined;
+      return currentComponent;
+    }
+  };
+
+  const endComponent = (componentEndId: string) => {
+    if (!currentComponent || currentComponent.id !== componentEndId) {
+      console.error(
+        "Component end does not match start",
+        currentComponent,
+        componentEndId,
+      );
+
+      // Placeholder closed implicitly
+      if (currentPlaceholder?.parentComponent.id === componentEndId) {
+        currentComponent = currentPlaceholder.parentComponent;
+        currentPlaceholder = undefined;
+      }
+    }
+    currentPlaceholder = currentComponent?.parentPlaceholder;
+
+    if (currentPlaceholder?.key.startsWith("implicit_")) {
+      currentComponent = currentPlaceholder.parentComponent;
+    } else currentComponent = undefined;
+  };
+
+  const componentStack: { component: ComponentSkeleton; element: Element }[] =
+    [];
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+
+    const element = node as Element;
+
+    if (componentStack.length > 0) {
+      const component = componentStack[componentStack.length - 1];
+      //if element is not a descendant of the component's firstDOMElement,   the component from the stack
+      if (component && !component.element.contains(element)) {
+        componentStack.pop();
+        endComponent(component.component.id);
+      }
+    }
+
+    if (currentComponent && element.getAttribute("chrometype") === "field") {
+      const id = element.getAttribute("id");
+
+      if (id) {
+        //fld_C866BEE59CE340F18529EF72E1EC34A7_427EC0BD3BF245B9880FBDB0054E7925_en_1_f3327de03c4c4fb39dae57c139e6202d_913_edit
+        const idComponents = id.split("_");
+        if (idComponents.length > 2) {
+          let fieldId = idComponents[2]?.toLocaleLowerCase();
+          if (!fieldId) continue;
+          fieldId = ensureUUIDFormat(fieldId);
+
+          let itemId = idComponents[1]?.toLocaleLowerCase();
+          if (!itemId) continue;
+          itemId = ensureUUIDFormat(itemId);
+
+          let renderedItem =
+            itemId == currentComponent.datasourceItem?.id
+              ? currentComponent.datasourceItem
+              : currentComponent.items.find((x) => x.id === itemId);
+
+          if (!renderedItem) {
+            renderedItem = {
+              id: itemId,
+              language: currentComponent.datasourceItem?.language || "",
+              version: currentComponent.datasourceItem?.version || 0,
+              renderedFieldIds: [],
+            };
+            currentComponent.items.push(renderedItem);
+          }
+
+          if (
+            renderedItem &&
+            renderedItem.renderedFieldIds.indexOf(fieldId) === -1
+          ) {
+            renderedItem.renderedFieldIds.push(fieldId);
+          }
+
+          currentComponent.editorFields;
+        }
+      }
+    }
+
+    if (currentComponent && element.hasAttribute("data-fieldid")) {
+      const fieldId = element.getAttribute("data-fieldid")!;
+      const formattedFieldId = ensureUUIDFormat(fieldId);
+
+      const language =
+        element.getAttribute("data-language") ||
+        currentComponent.datasourceItem?.language ||
+        pageItem.language;
+      const version = element.hasAttribute("data-version")
+        ? parseInt(element.getAttribute("data-version")!)
+        : currentComponent.datasourceItem?.version || pageItem.version;
+      const itemId =
+        element.getAttribute("data-itemid") ||
+        currentComponent.datasourceItem?.id;
+
+      if (!itemId) continue;
+
+      let renderedItem = currentComponent.items.find(
+        (x) =>
+          x.id === itemId && x.language === language && x.version === version,
+      );
+
+      if (!renderedItem) {
+        renderedItem = {
+          id: itemId,
+          language,
+          version,
+          renderedFieldIds: [],
+        };
+        currentComponent.items.push(renderedItem);
+      }
+
+      if (renderedItem.renderedFieldIds.indexOf(formattedFieldId) === -1) {
+        renderedItem.renderedFieldIds.push(formattedFieldId);
+      }
+    }
+
+    if (element.tagName == "DIV" && element.hasAttribute("sc_item")) {
+      const componentId = extractItemId(element.getAttribute("sc_item")!);
+      if (componentId) {
+        const component = startComponent(componentId, element, componentId);
+
+        if (component) {
+          component.lastDOMElement = component.firstDOMElement;
+          componentStack.push({ component, element });
+        }
+      }
+    }
+
+    if (element.tagName === "SCRIPT") {
+      const placeholderStartId = element.getAttribute("data-placeholder-start");
+      const placeholderEndId = element.getAttribute("data-placeholder-end");
+      const componentStartId = element.getAttribute("data-component-start");
+      const componentEndId = element.getAttribute("data-component-end");
+      const dictionaryKeyStart = element.getAttribute(
+        "data-dictionary-key-start",
+      );
+      const editorGroup = element.getAttribute("data-editor-group");
+
+      if (currentComponent && editorGroup) {
+        let group = currentComponent.editorFields[editorGroup];
+        if (!group) {
+          group = {
+            addFields: [],
+            removeFields: [],
+          };
+          currentComponent.editorFields[editorGroup] = group;
+        }
+        const addFields = element.getAttribute("data-add-fields")?.split(",");
+        const removeFields = element
+          .getAttribute("data-remove-fields")
+          ?.split(",");
+
+        group.addFields = [...group.addFields, ...(addFields || [])];
+        group.removeFields = [...group.removeFields, ...(removeFields || [])];
+      }
+
+      if (dictionaryKeyStart) {
+        if (!currentComponent) {
+          console.error(
+            "Dictionary key without component:",
+            dictionaryKeyStart,
+          );
+        } else {
+          currentComponent.renderedDictionaryKeys.push(dictionaryKeyStart);
+        }
+      }
+      if (placeholderStartId) {
+        if (!currentComponent) {
+          console.error(
+            "Placeholder start without component:",
+            placeholderStartId,
+            "Current placeholder",
+            currentPlaceholder,
+          );
+        } else {
+          currentPlaceholder = currentComponent.placeholders.find(
+            (x) => x.key === placeholderStartId,
+          );
+
+          if (!currentPlaceholder) {
+            currentPlaceholder = {
+              key: placeholderStartId,
+              name:
+                placeholderStartId.indexOf(currentComponent.id + "_") === 0
+                  ? placeholderStartId.substring(currentComponent.id.length + 1)
+                  : placeholderStartId,
+              description: "",
+              components: [],
+              parentComponent: currentComponent,
+            };
+
+            currentComponent.placeholders.push(currentPlaceholder);
+          }
+          currentComponent = undefined;
+        }
+      }
+
+      if (placeholderEndId) {
+        currentComponent = currentPlaceholder?.parentComponent;
+        if (currentPlaceholder?.key !== placeholderEndId) {
+          console.error(
+            "Placeholder end does not match start",
+            currentPlaceholder,
+            placeholderEndId,
+          );
+        }
+        currentPlaceholder = undefined;
+      }
+
+      if (componentStartId) {
+        startComponent(componentStartId, element);
+      }
+
+      if (componentEndId) {
+        if (currentComponent) {
+          currentComponent.lastDOMElement =
+            element.previousElementSibling || element;
+          endComponent(componentEndId);
+        }
+      }
+    }
+  }
+
+  const page: PageSkeleton = {
+    rootComponent: root,
+    item: pageItem,
+    editRevision: editContextRef.current?.revision ?? "",
+  };
+
+  const time = performance.now() - start;
+
+  console.log("PAGE MODEL SKELETON", page, time);
+  pageViewContextRef.current?.setPageSkeleton(page);
+}

package/src/editor/pageModel.ts

@@ -29,6 +29,8 @@ export type ComponentSkeleton = {
   renderedDictionaryKeys: string[];
   layoutId?: string;
   editorFields: EditorFields;
+  firstDOMElement?: Element;
+  lastDOMElement?: Element;
 };
 
 export type RenderedItemSkeleton = ItemDescriptor & {
@@ -168,6 +170,9 @@ export type Component = {
   rendering?: RenderingReference;
   layoutId?: string;
   editorFields: EditorFields;
+  firstDOMElement?: Element;
+  lastDOMElement?: Element;
+  canBeMoved: boolean;
 };
 
 export type Placeholder = {

package/src/editor/sidebar/ComponentPalette.tsx

@@ -25,121 +25,123 @@ export function ComponentPalette({}: {}) {
       acc[group].push(value);
       return acc;
     },
-    {} as { [key: string]: InsertOption[] }
+    {} as { [key: string]: InsertOption[] },
   );
 
   return (
-    <div className="h-full relative tour-component-palette">
-      <div className="overflow-y-auto absolute inset-0">
-        <div className="p-4">
-          <InputText
-            ref={filterRef}
-            className="w-full text-sm"
-            placeholder="Filter components"
-            onChange={(e) => setFilter(e.target.value)}
-          />
-        </div>
-        {Object.keys(insertOptionsByGroup)
-          .sort()
-          .map((group, index) => {
-            const options = insertOptionsByGroup[group]!.filter(
-              (x) => !x.isHidden
-            ).filter(
-              (x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1
-            );
-            if (options.length === 0) return;
-            return (
-              <div
-                className={classNames(
-                  "m-4",
-                  index > 0 ? " border-t border-gray-200" : ""
-                )}
-                key={group}
-              >
-                <div className="text-xs font-bold mt-2 mb-3 flex items-center gap-2">
-                  <ArrowDownIcon /> {group}
-                </div>
-                <div className="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))]">
-                  {options.map((option) => {
-                    function handleDragStart(
-                      event: React.DragEvent<HTMLDivElement>
-                    ): void {
-                      editContext?.dragStart({
-                        type: "template",
-                        typeId: option.typeId,
-                        name: option.name,
-                      });
-                      event.stopPropagation();
-                    }
+    <div className="tour-component-palette relative flex h-full flex-col">
+      <div className="p-4">
+        <InputText
+          ref={filterRef}
+          className="w-full text-sm"
+          placeholder="Filter components"
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      <div className="relative flex-1">
+        <div className="absolute inset-0 overflow-y-auto">
+          {Object.keys(insertOptionsByGroup)
+            .sort()
+            .map((group, index) => {
+              const options = insertOptionsByGroup[group]!.filter(
+                (x) => !x.isHidden,
+              ).filter(
+                (x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1,
+              );
+              if (options.length === 0) return;
+              return (
+                <div
+                  className={classNames(
+                    "m-4",
+                    index > 0 ? "border-t border-gray-200" : "",
+                  )}
+                  key={group}
+                >
+                  <div className="mt-2 mb-3 flex items-center gap-2 text-xs font-bold">
+                    <ArrowDownIcon /> {group}
+                  </div>
+                  <div className="grid grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))] gap-4">
+                    {options.map((option) => {
+                      function handleDragStart(
+                        event: React.DragEvent<HTMLDivElement>,
+                      ): void {
+                        editContext?.dragStart({
+                          type: "template",
+                          typeId: option.typeId,
+                          name: option.name,
+                        });
+                        event.stopPropagation();
+                      }
 
-                    function handleDragEnd(): void {
-                      editContext!.dragEnd();
-                      editContext!.setSelectedForInsertion("");
-                    }
+                      function handleDragEnd(): void {
+                        editContext!.dragEnd();
+                        editContext!.setSelectedForInsertion("");
+                      }
 
-                    const isDraggable = !option.isInvalid;
+                      const isDraggable = !option.isInvalid;
 
-                    return (
-                      <div
-                        id={"insert-component-" + option.typeId}
-                        onClick={() => {
-                          editContext!.setSelectedForInsertion(option.typeId);
-                        }}
-                        draggable={isDraggable}
-                        onDragStart={handleDragStart}
-                        onDragEnd={handleDragEnd}
-                        className={classNames(
-                          "p-2 border border-gray-200 flex items-center flex-col gap-2 text-center text-xs relative rounded break-all ",
-                          isDraggable ? "cursor-grab" : "",
-                          editContext.selectedForInsertion === option.typeId
-                            ? "border-sky-500"
-                            : ""
-                        )}
-                        key={option.typeId}
-                        data-testid="insert-component-option"
-                      >
-                        {option.svg && (
-                          <div
-                            className="w-8 h-8"
-                            dangerouslySetInnerHTML={{ __html: option.svg }}
-                          ></div>
-                        )}
-                        {!option.svg && (
-                          <img
-                            src={getAbsoluteIconUrl(option.icon)}
-                            width="32"
-                            height="32"
-                          ></img>
-                        )}
+                      return (
+                        <div
+                          id={"insert-component-" + option.typeId}
+                          onClick={() => {
+                            editContext!.setSelectedForInsertion(option.typeId);
+                          }}
+                          draggable={isDraggable}
+                          onDragStart={handleDragStart}
+                          onDragEnd={handleDragEnd}
+                          className={classNames(
+                            "relative flex flex-col items-center gap-2 rounded border border-gray-200 p-2 text-center text-xs break-all",
+                            isDraggable ? "cursor-grab" : "",
+                            editContext.selectedForInsertion === option.typeId
+                              ? "border-sky-500"
+                              : "",
+                          )}
+                          key={option.typeId}
+                          data-testid="insert-component-option"
+                        >
+                          {option.svg && (
+                            <div
+                              className="h-8 w-8"
+                              dangerouslySetInnerHTML={{ __html: option.svg }}
+                            ></div>
+                          )}
+                          {!option.svg && (
+                            <img
+                              src={getAbsoluteIconUrl(option.icon)}
+                              width="32"
+                              height="32"
+                            ></img>
+                          )}
 
-                        <div className="text-xs">
-                          {option.name
-                            .split(new RegExp(`(${filter})`, "i"))
-                            .map((part: string, i: number) =>
-                              part.toLowerCase() === filter.toLowerCase() &&
-                              part ? (
-                                <u className="font-bold" key={i}>
-                                  {part}
-                                </u>
-                              ) : (
-                                part && <span key={i}>{part}</span>
-                              )
-                            )}
-                        </div>
+                          <div className="text-xs">
+                            {option.name
+                              .split(new RegExp(`(${filter})`, "i"))
+                              .map((part: string, i: number) =>
+                                part.toLowerCase() === filter.toLowerCase() &&
+                                part ? (
+                                  <u className="font-bold" key={i}>
+                                    {part}
+                                  </u>
+                                ) : (
+                                  part && <span key={i}>{part}</span>
+                                ),
+                              )}
+                          </div>
 
-                        {option.isInvalid && (
-                          <i
-                            className="pi pi-exclamation-triangle text-red-500 absolute top-0 right-0"
-                            title={option.message}
-                          />
-                        )}
-                      </div>
-                    );
-                  })}
+                          {option.isInvalid && (
+                            <i
+                              className="pi pi-exclamation-triangle absolute top-0 right-0 text-red-500"
+                              title={option.message}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+        </div>
       </div>
     </div>
   );