@parhelia/core 0.1.12881 → 0.1.12882

package/dist/editor/page-viewer/pageModelSkeletonBuilder.js

@@ -0,0 +1,796 @@
+import { extractItemIdFromItemUri, getNextNonChromeMarkerElement, getPreviousNonChromeMarkerElement, isChromeMarkerElement, isSitecoreCodeMarkerElement, } from "../utils";
+const excludedComponentTypes = new Set(["StickyNote"]);
+const zeroGuid = "00000000-0000-0000-0000-000000000000";
+function normalizeSitecoreId(id) {
+    if (!id)
+        return "";
+    return id.replace(/[{}]/g, "").toLowerCase();
+}
+function normalizeSitecoreGuid(id) {
+    const normalized = normalizeSitecoreId(id);
+    if (/^[0-9a-f]{32}$/i.test(normalized)) {
+        return `${normalized.substring(0, 8)}-${normalized.substring(8, 12)}-${normalized.substring(12, 16)}-${normalized.substring(16, 20)}-${normalized.substring(20, 32)}`;
+    }
+    return normalized;
+}
+function normalizeHeadlessPlaceholderKey(id) {
+    const key = id ?? "";
+    const separatorIndex = key.lastIndexOf("_");
+    if (separatorIndex <= 0) {
+        return key;
+    }
+    const suffix = normalizeSitecoreGuid(key.substring(separatorIndex + 1));
+    // Root Content SDK placeholders are emitted as "placeholder_0000...".
+    // Keep nested placeholders intact because the rendering uid suffix tells
+    // Parhelia which component owns the placeholder.
+    return suffix === zeroGuid ? key.substring(0, separatorIndex) : key;
+}
+const codeMarkerDataCache = new WeakMap();
+function readSitecoreCodeMarkerData(element) {
+    if (!isSitecoreCodeMarkerElement(element)) {
+        return undefined;
+    }
+    if (codeMarkerDataCache.has(element)) {
+        return codeMarkerDataCache.get(element) ?? undefined;
+    }
+    const raw = element.textContent;
+    if (!raw) {
+        codeMarkerDataCache.set(element, null);
+        return undefined;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+            const data = parsed;
+            codeMarkerDataCache.set(element, data);
+            return data;
+        }
+    }
+    catch {
+        // Native Sitecore chrome can be malformed or stripped; marker attributes
+        // are still enough for basic start/end matching.
+    }
+    codeMarkerDataCache.set(element, null);
+    return undefined;
+}
+function readRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
+function readString(value) {
+    return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+function readNumber(value) {
+    if (typeof value === "number" && Number.isFinite(value))
+        return value;
+    if (typeof value === "string") {
+        const parsed = parseInt(value, 10);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+}
+function firstString(record, keys) {
+    if (!record)
+        return undefined;
+    for (const key of keys) {
+        const value = readString(record[key]);
+        if (value)
+            return value;
+    }
+    return undefined;
+}
+function firstRecord(record, keys) {
+    if (!record)
+        return undefined;
+    for (const key of keys) {
+        const value = readRecord(record[key]);
+        if (value)
+            return value;
+    }
+    return undefined;
+}
+function isExplicitFalse(value) {
+    return (value === false ||
+        (typeof value === "string" && value.toLowerCase() === "false"));
+}
+function readEditableValue(data) {
+    if (!data)
+        return undefined;
+    const custom = firstRecord(data, ["custom", "customData", "Custom"]);
+    const candidateValues = [
+        data.editable,
+        data.isEditable,
+        data.canEdit,
+        custom?.editable,
+        custom?.isEditable,
+        custom?.canEdit,
+    ];
+    return candidateValues.some(isExplicitFalse) ? "false" : undefined;
+}
+function readDomComponentName(element) {
+    if (!element)
+        return undefined;
+    return (readString(element.getAttribute("data-component")) ||
+        readString(element.getAttribute("data-component-name")));
+}
+function setAttributeIfMissing(element, name, value) {
+    if (value === undefined || value === null || value === "")
+        return;
+    if (!element.hasAttribute(name)) {
+        element.setAttribute(name, String(value));
+    }
+}
+function readMarkerItemData(data, keys) {
+    if (!data)
+        return undefined;
+    const item = firstRecord(data, keys);
+    const rawId = firstString(item, ["id", "itemId", "ID"]) ||
+        firstString(data, [
+            "contextItemId",
+            "contextItem",
+            "datasourceId",
+            "datasource",
+            "dataSourceId",
+            "dataSource",
+            "itemId",
+        ]);
+    const uri = firstString(item, ["uri", "itemUri", "url"]) ||
+        firstString(data, ["contextItemUri", "datasourceUri", "dataSourceUri"]);
+    const idFromUri = uri ? extractItemIdFromItemUri(uri) : undefined;
+    const id = normalizeSitecoreGuid(rawId || idFromUri);
+    const language = firstString(item, ["language", "lang", "languageCode"]) ||
+        readQueryValue(uri, ["lang", "language", "sc_lang"]);
+    const version = readNumber(item?.version) ||
+        readNumber(item?.ver) ||
+        readNumber(readQueryValue(uri, ["ver", "version", "sc_version"]));
+    if (!id && !language && version === undefined) {
+        return undefined;
+    }
+    return { id, language, version };
+}
+function readQueryValue(uri, keys) {
+    if (!uri)
+        return undefined;
+    const queryStart = uri.indexOf("?");
+    if (queryStart < 0)
+        return undefined;
+    const params = new URLSearchParams(uri.substring(queryStart + 1));
+    for (const key of keys) {
+        const value = params.get(key);
+        if (value)
+            return value;
+    }
+    return undefined;
+}
+function readSitecoreFieldMarkerData(element, markerData) {
+    if (!isSitecoreCodeMarkerElement(element) ||
+        element.getAttribute("chrometype") !== "field" ||
+        element.getAttribute("kind") !== "open") {
+        return undefined;
+    }
+    const data = markerData ?? readSitecoreCodeMarkerData(element);
+    if (!data) {
+        return undefined;
+    }
+    const datasource = readMarkerItemData(data, [
+        "datasource",
+        "dataSource",
+        "contextItem",
+    ]);
+    const field = firstRecord(data, ["field", "fieldData"]);
+    const fieldId = normalizeSitecoreGuid(firstString(data, ["fieldId", "fieldID", "field"]) ||
+        firstString(field, ["id", "itemId", "fieldId", "fieldID"]));
+    return {
+        datasource,
+        fieldId: fieldId || undefined,
+    };
+}
+function normalizeSitecoreCodeMarkerAttributes(element, markerData) {
+    if (!isSitecoreCodeMarkerElement(element))
+        return;
+    element.setAttribute("hidden", "");
+    element.setAttribute("aria-hidden", "true");
+    if (element instanceof HTMLElement) {
+        element.style.display = "none";
+    }
+    const chromeType = element.getAttribute("chrometype");
+    const kind = element.getAttribute("kind");
+    const markerId = normalizeSitecoreGuid(element.getAttribute("id") ||
+        firstString(markerData, ["id", "uid", "uniqueId", "uniqueID"]));
+    if (chromeType === "rendering") {
+        normalizeRenderingCodeMarker(element, kind, markerId, markerData);
+    }
+    else if (chromeType === "placeholder") {
+        normalizePlaceholderCodeMarker(element, kind, markerId, markerData);
+    }
+    else if (chromeType === "field") {
+        normalizeFieldCodeMarker(element, markerData);
+    }
+}
+function normalizeRenderingCodeMarker(element, kind, markerId, markerData) {
+    if (!markerId)
+        return;
+    if (kind === "open") {
+        const rendering = firstRecord(markerData, ["rendering", "renderingItem"]);
+        const item = readMarkerItemData(markerData, [
+            "contextItem",
+            "datasource",
+            "dataSource",
+            "dataSourceItem",
+            "item",
+        ]);
+        const typeId = normalizeSitecoreGuid(firstString(markerData, [
+            "renderingId",
+            "renderingID",
+            "renderingItemId",
+            "renderingItemID",
+            "typeId",
+        ]) || firstString(rendering, ["id", "itemId", "renderingId"]));
+        const displayName = firstString(markerData, ["displayName", "name", "renderingName"]) ||
+            firstString(rendering, ["displayName", "name"]);
+        setAttributeIfMissing(element, "data-component-start", markerId);
+        setAttributeIfMissing(element, "data-type", displayName);
+        setAttributeIfMissing(element, "data-typeid", typeId);
+        setAttributeIfMissing(element, "data-itemid", item?.id);
+        setAttributeIfMissing(element, "data-language", item?.language);
+        setAttributeIfMissing(element, "data-version", item?.version);
+        setAttributeIfMissing(element, "data-editable", readEditableValue(markerData));
+        return;
+    }
+    if (kind === "close") {
+        setAttributeIfMissing(element, "data-component-end", markerId);
+    }
+}
+function normalizePlaceholderCodeMarker(element, kind, markerId, markerData) {
+    const placeholderKey = normalizeHeadlessPlaceholderKey(markerId);
+    if (!placeholderKey)
+        return;
+    if (kind === "open") {
+        const displayName = firstString(markerData, [
+            "displayName",
+            "description",
+            "name",
+        ]);
+        setAttributeIfMissing(element, "data-placeholder-start", placeholderKey);
+        setAttributeIfMissing(element, "data-description", displayName);
+        setAttributeIfMissing(element, "data-editable", readEditableValue(markerData));
+        return;
+    }
+    if (kind === "close") {
+        setAttributeIfMissing(element, "data-placeholder-end", placeholderKey);
+    }
+}
+function normalizeFieldCodeMarker(element, markerData) {
+    const fieldData = readSitecoreFieldMarkerData(element, markerData);
+    if (!fieldData?.fieldId)
+        return;
+    // Field code markers identify ownership for the page skeleton, but the hidden
+    // marker itself must not become the editable field element.
+}
+export function buildPageModelSkeleton(iframeDocument, editContextRef, pageViewContextRef) {
+    const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor;
+    if (!iframeDocument || !editContextRef.current || !pageViewContextRef.current)
+        return;
+    // Function to ensure IDs are in UUID format
+    const ensureUUIDFormat = (id) => {
+        // 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;
+    };
+    if (!pageItemDescriptor)
+        return;
+    const pageItem = {
+        ...pageItemDescriptor,
+        renderedFieldIds: [],
+    };
+    const treeWalker = iframeDocument.createTreeWalker(iframeDocument.documentElement, // Root node to start traversal
+    NodeFilter.SHOW_ELEMENT, // Only show element nodes
+    null);
+    const root = {
+        placeholders: [],
+        id: "page",
+        type: "Page",
+        typeId: "",
+        name: "Page",
+        items: [pageItem],
+        datasourceItem: pageItem,
+        renderedDictionaryKeys: [],
+        editorFields: {},
+    };
+    let currentComponent = root;
+    let currentPlaceholder;
+    const resolveComponentFirstElement = (componentStartId, element) => {
+        if (!isChromeMarkerElement(element)) {
+            return element;
+        }
+        const previousElement = getPreviousNonChromeMarkerElement(element);
+        const nextElement = element.nextElementSibling;
+        const nextIsMatchingEndMarker = !!nextElement &&
+            getComponentEndId(nextElement, componentStartId) === componentStartId;
+        // Some Sitecore markers are emitted after the rendered component body, with
+        // the matching end marker immediately after the start marker.
+        if (nextIsMatchingEndMarker && previousElement) {
+            return previousElement;
+        }
+        return getNextNonChromeMarkerElement(element) ?? previousElement ?? element;
+    };
+    const moveContainedComponentsToPlaceholder = (sourcePlaceholder, targetPlaceholder, containerElement, currentComponentId) => {
+        if (!sourcePlaceholder || sourcePlaceholder === targetPlaceholder) {
+            return;
+        }
+        const containedComponents = sourcePlaceholder.components.filter((component) => {
+            if (component.id === currentComponentId) {
+                return false;
+            }
+            return (!!component.firstDOMElement &&
+                containerElement.contains(component.firstDOMElement));
+        });
+        if (containedComponents.length === 0) {
+            return;
+        }
+        sourcePlaceholder.components = sourcePlaceholder.components.filter((component) => !containedComponents.includes(component));
+        for (const component of containedComponents) {
+            component.parentPlaceholder = targetPlaceholder;
+            targetPlaceholder.components.push(component);
+        }
+    };
+    const normalizeExplicitPlaceholderKey = (placeholderKey) => {
+        if (!placeholderKey) {
+            return placeholderKey;
+        }
+        const parts = placeholderKey.split("/").filter(Boolean);
+        return parts.at(-1) ?? placeholderKey;
+    };
+    const ensurePlaceholder = (parentComponent, placeholderKey, element) => {
+        let placeholder = parentComponent.placeholders.find((x) => x.key === placeholderKey);
+        if (!placeholder) {
+            placeholder = {
+                key: placeholderKey,
+                name: placeholderKey.indexOf(parentComponent.id + "_") === 0
+                    ? placeholderKey.substring(parentComponent.id.length + 1)
+                    : placeholderKey,
+                description: element.getAttribute("data-description") || "",
+                components: [],
+                parentComponent,
+                editable: element.getAttribute("data-editable") !== "false",
+            };
+            parentComponent.placeholders.push(placeholder);
+        }
+        return placeholder;
+    };
+    const placeholderKeysMatch = (left, right) => left === right ||
+        normalizeExplicitPlaceholderKey(left) ===
+            normalizeExplicitPlaceholderKey(right);
+    const findPlaceholderByKey = (component, placeholderKey) => {
+        for (const placeholder of component.placeholders) {
+            if (placeholderKeysMatch(placeholder.key, placeholderKey)) {
+                return placeholder;
+            }
+            for (const child of placeholder.components) {
+                const nested = findPlaceholderByKey(child, placeholderKey);
+                if (nested) {
+                    return nested;
+                }
+            }
+        }
+        return undefined;
+    };
+    const closePlaceholder = (placeholderEndId) => {
+        const closingPlaceholder = currentPlaceholder &&
+            placeholderKeysMatch(currentPlaceholder.key, placeholderEndId)
+            ? currentPlaceholder
+            : findPlaceholderByKey(root, placeholderEndId);
+        if (!closingPlaceholder) {
+            return false;
+        }
+        currentComponent = closingPlaceholder.parentComponent;
+        if (currentPlaceholder === closingPlaceholder) {
+            currentPlaceholder = undefined;
+        }
+        return true;
+    };
+    const resolveComponentLastElement = (componentEndId, element, component) => {
+        const previousElement = getPreviousNonChromeMarkerElement(element);
+        if (previousElement &&
+            getComponentStartId(previousElement) === componentEndId &&
+            component.firstDOMElement) {
+            return component.firstDOMElement;
+        }
+        return previousElement ?? element;
+    };
+    const startComponent = (componentStartId, element, dataSourceItemId) => {
+        if (!currentPlaceholder) {
+            if (!currentComponent) {
+                console.error("Component start without parent component:", componentStartId);
+                return;
+            }
+            const explicitPlaceholderKey = element.getAttribute("data-placeholderkey");
+            if (explicitPlaceholderKey) {
+                currentPlaceholder = ensurePlaceholder(currentComponent, normalizeExplicitPlaceholderKey(explicitPlaceholderKey), element);
+            }
+            else {
+                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,
+                        editable: element.getAttribute("data-editable") !== "false",
+                    };
+                    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");
+            const parametersTemplateId = element.getAttribute("data-parameters-template-id");
+            const parameters = element.getAttribute("data-parameters");
+            const isSharedDatasource = element.getAttribute("data-shared-datasource") === "true";
+            const hasPersonalization = element.getAttribute("data-has-personalization") === "true";
+            // Store the parent component before we potentially change currentComponent
+            const parentComponent = currentPlaceholder.parentComponent;
+            const parentPlaceholder = currentPlaceholder;
+            const componentFirstElement = resolveComponentFirstElement(componentStartId, element);
+            const componentType = element.getAttribute("data-type") ||
+                readDomComponentName(componentFirstElement) ||
+                "";
+            setAttributeIfMissing(element, "data-type", componentType);
+            if (excludedComponentTypes.has(componentType)) {
+                element.setAttribute("data-skip-component", "true");
+                return undefined;
+            }
+            if (componentFirstElement instanceof HTMLElement &&
+                !componentFirstElement.hasAttribute("data-component-id")) {
+                componentFirstElement.setAttribute("data-component-id", componentStartId);
+            }
+            currentComponent = currentPlaceholder.components.find((x) => x.id === componentStartId);
+            // Check if we should skip this component because it has the same datasource as the parent
+            if (datasourceItem &&
+                datasourceItem.id === parentComponent?.datasourceItem?.id) {
+                element.setAttribute("data-skip-component", "true");
+                return undefined;
+            }
+            if (!currentComponent) {
+                currentComponent = {
+                    id: componentStartId,
+                    name: "",
+                    type: componentType,
+                    typeId: element.getAttribute("data-typeid") || "",
+                    parametersTemplateId: parametersTemplateId || undefined,
+                    parameters: parameters || undefined,
+                    items: datasourceItem ? [datasourceItem] : [],
+                    placeholders: [],
+                    parentPlaceholder: currentPlaceholder,
+                    renderedDictionaryKeys: [],
+                    datasourceItem,
+                    layoutId: layoutId || undefined,
+                    isShared: isSharedDatasource,
+                    hasPersonalization,
+                    isSharedLayout: element.getAttribute("data-shared-rendering") === "true",
+                    editorFields: {},
+                    firstDOMElement: componentFirstElement,
+                    editable: element.getAttribute("data-editable") !== "false",
+                };
+                if (currentComponent) {
+                    currentPlaceholder.components.push(currentComponent);
+                }
+            }
+            else {
+                currentComponent.isShared = isSharedDatasource;
+                currentComponent.hasPersonalization =
+                    hasPersonalization || currentComponent.hasPersonalization;
+                currentComponent.layoutId = layoutId || currentComponent.layoutId;
+                currentComponent.parametersTemplateId =
+                    parametersTemplateId || currentComponent.parametersTemplateId;
+                currentComponent.parameters = parameters || currentComponent.parameters;
+                currentComponent.isSharedLayout =
+                    element.getAttribute("data-shared-rendering") === "true" ||
+                        currentComponent.isSharedLayout;
+            }
+            // Check if the new component should have an implicit placeholder
+            const hasImplicitPlaceholder = element.getAttribute("data-has-implicit-placeholder") === "true";
+            if (hasImplicitPlaceholder && currentComponent) {
+                // Add an implicit placeholder to the newly created component
+                const implicitPlaceholder = {
+                    key: "implicit_" + currentComponent.datasourceItem?.id,
+                    name: "Implicit placeholder: " + currentComponent.datasourceItem?.id,
+                    description: "",
+                    components: [],
+                    parentComponent: currentComponent,
+                    editable: element.getAttribute("data-editable") !== "false",
+                };
+                currentComponent.placeholders.push(implicitPlaceholder);
+                moveContainedComponentsToPlaceholder(parentPlaceholder, implicitPlaceholder, componentFirstElement, currentComponent.id);
+                currentPlaceholder = implicitPlaceholder;
+            }
+            else {
+                currentPlaceholder = undefined;
+            }
+            return currentComponent;
+        }
+    };
+    const endComponent = (componentEndId) => {
+        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 = [];
+    const getComponentStartId = (element) => {
+        const normalizedId = element.getAttribute("data-component-start");
+        if (normalizedId)
+            return normalizedId;
+        if (isSitecoreCodeMarkerElement(element) &&
+            element.getAttribute("chrometype") === "rendering" &&
+            element.getAttribute("kind") === "open") {
+            return normalizeSitecoreGuid(element.getAttribute("id"));
+        }
+        return null;
+    };
+    const getComponentEndId = (element, fallback) => {
+        const normalizedId = element.getAttribute("data-component-end");
+        if (normalizedId)
+            return normalizedId;
+        if (isSitecoreCodeMarkerElement(element) &&
+            element.getAttribute("chrometype") === "rendering" &&
+            element.getAttribute("kind") === "close") {
+            return normalizeSitecoreGuid(element.getAttribute("id")) || fallback || null;
+        }
+        return null;
+    };
+    const getPlaceholderStartId = (element) => {
+        const normalizedId = element.getAttribute("data-placeholder-start");
+        if (normalizedId)
+            return normalizedId;
+        if (isSitecoreCodeMarkerElement(element) &&
+            element.getAttribute("chrometype") === "placeholder" &&
+            element.getAttribute("kind") === "open") {
+            return normalizeHeadlessPlaceholderKey(normalizeSitecoreGuid(element.getAttribute("id")));
+        }
+        return null;
+    };
+    const getPlaceholderEndId = (element, fallback) => {
+        const normalizedId = element.getAttribute("data-placeholder-end");
+        if (normalizedId)
+            return normalizedId;
+        if (isSitecoreCodeMarkerElement(element) &&
+            element.getAttribute("chrometype") === "placeholder" &&
+            element.getAttribute("kind") === "close") {
+            return (normalizeHeadlessPlaceholderKey(normalizeSitecoreGuid(element.getAttribute("id"))) ||
+                fallback ||
+                null);
+        }
+        return null;
+    };
+    while (treeWalker.nextNode()) {
+        const node = treeWalker.currentNode;
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const element = node;
+        const sitecoreCodeMarkerData = readSitecoreCodeMarkerData(element);
+        normalizeSitecoreCodeMarkerAttributes(element, sitecoreCodeMarkerData);
+        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);
+            }
+        }
+        const sitecoreFieldMarkerData = readSitecoreFieldMarkerData(element, sitecoreCodeMarkerData);
+        if (currentComponent && sitecoreFieldMarkerData?.fieldId) {
+            const fieldId = ensureUUIDFormat(normalizeSitecoreId(sitecoreFieldMarkerData.fieldId));
+            const datasource = sitecoreFieldMarkerData.datasource;
+            const itemId = normalizeSitecoreId(datasource?.id);
+            const language = datasource?.language ||
+                currentComponent.datasourceItem?.language ||
+                pageItem.language;
+            const version = datasource?.version ||
+                currentComponent.datasourceItem?.version ||
+                pageItem.version;
+            if (itemId) {
+                let renderedItem = itemId === currentComponent.datasourceItem?.id
+                    ? currentComponent.datasourceItem
+                    : 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 (!currentComponent.datasourceItem) {
+                    currentComponent.datasourceItem = renderedItem;
+                }
+                if (renderedItem.renderedFieldIds.indexOf(fieldId) === -1) {
+                    renderedItem.renderedFieldIds.push(fieldId);
+                }
+            }
+        }
+        else 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);
+                    }
+                }
+            }
+        }
+        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 = extractItemIdFromItemUri(element.getAttribute("sc_item"));
+            if (componentId && componentId != currentComponent?.datasourceItem?.id) {
+                const component = startComponent(componentId, element, componentId);
+                if (component) {
+                    component.lastDOMElement = component.firstDOMElement;
+                    componentStack.push({ component, element });
+                }
+            }
+        }
+        if (isChromeMarkerElement(element)) {
+            const placeholderStartId = getPlaceholderStartId(element);
+            const placeholderEndId = getPlaceholderEndId(element, currentPlaceholder?.key);
+            const componentStartId = getComponentStartId(element);
+            const componentEndId = getComponentEndId(element, currentComponent?.id);
+            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) {
+                    if (!currentPlaceholder) {
+                        currentPlaceholder = ensurePlaceholder(root, placeholderStartId, element);
+                    }
+                }
+                else {
+                    currentPlaceholder = ensurePlaceholder(currentComponent, placeholderStartId, element);
+                    currentComponent = undefined;
+                }
+            }
+            if (placeholderEndId) {
+                if (!closePlaceholder(placeholderEndId)) {
+                    console.debug("Placeholder end without matching start", placeholderEndId);
+                }
+            }
+            if (componentStartId) {
+                startComponent(componentStartId, element);
+            }
+            if (componentEndId) {
+                if (currentComponent) {
+                    currentComponent.lastDOMElement = resolveComponentLastElement(componentEndId, element, currentComponent);
+                    endComponent(componentEndId);
+                }
+            }
+        }
+    }
+    const page = {
+        rootComponent: root,
+        item: pageItem,
+        editRevision: editContextRef.current?.revision ?? "",
+    };
+    pageViewContextRef.current?.setPageSkeleton(page);
+}
+//# sourceMappingURL=pageModelSkeletonBuilder.js.map