Function parseHtml

packages/parsers/src/htmlParser.ts:176–450

(html: string)

}

export function parseHtml(html: string): ParsedHtml {
  const withIds = ensureHfIds(html);
  const parser = new DOMParser();
  const doc = parser.parseFromString(withIds, "text/html");

  const elements: TimelineElement[] = [];
  const keyframes: Record<string, Keyframe[]> = {};
  let idCounter = 0;

  const htmlEl = doc.documentElement;
  if (!htmlEl) {
    throw new CompositionHtmlParseError("parseHtml: input HTML is empty or could not be parsed");
  }
  const customStylesAttr = htmlEl.getAttribute("data-custom-styles");
  let customStyles: string | null = null;
  if (customStylesAttr) {
    try {
      customStyles = JSON.parse(customStylesAttr);
    } catch {
      customStyles = customStylesAttr;
    }
  }

  const timedElements = doc.querySelectorAll("[data-start]");

  timedElements.forEach((el) => {
    const type = getElementType(el);
    if (!type) return;

    const start = parseFloat(el.getAttribute("data-start") || "0");
    const dataEnd = el.getAttribute("data-end");

    let duration: number;
    if (dataEnd) {
      duration = Math.max(0, parseFloat(dataEnd) - start);
    } else {
      duration = 5;
    }

    // R1: stable hf- id minted by ensureHfIds above; clips just read it.
    // Legacy/migration note: ensureHfIds pins a pre-existing `data-hf-id`, and
    // the generator emits `data-hf-id="${element.id}"`. So a clip authored
    // before R1 with `id="my-title"` round-trips as `data-hf-id="my-title"` —
    // a non-`hf-`-shaped but still stable, exact-match handle. This is safe
    // indefinitely: targeting uses exact `[data-hf-id="…"]` match (it does not
    // require the hf- prefix). ensureHfIds skips elements that already carry
    // data-hf-id, so legacy values are NOT re-minted automatically — they
    // persist until the user re-saves the composition through Studio. Not a bug.
    const id = el.getAttribute("data-hf-id") || el.id || `element-${++idCounter}`;
    const name = getElementName(el);
    const zIndex = getZIndex(el);

    // Parse data-keyframes attribute if present
    const keyframesAttr = el.getAttribute("data-keyframes");
    if (keyframesAttr) {
      try {
        const parsedKeyframes = JSON.parse(keyframesAttr);
        if (Array.isArray(parsedKeyframes) && parsedKeyframes.length > 0) {