fix(studio): format inserted block HTML with proper indentation

insertTimelineAssetIntoSource now detects the parent indent level and
adds the new element with matching child indentation. Block attributes
are written one-per-line for readability.
This commit is contained in:
Miguel Ángel
2026-05-21 18:28:17 -04:00
parent 997e3948e4
commit 6f9b655fff
2 changed files with 20 additions and 10 deletions
+12 -9
View File
@@ -150,15 +150,18 @@ export async function addBlockToProject(
const left = visualPosition ? Math.round(visualPosition.left) : 0;
const top = visualPosition ? Math.round(visualPosition.top) : 0;
const subCompHtml =
`<div data-composition-id="${compId}" ` +
`data-composition-src="${compositionFile}" ` +
`data-start="${formatTimelineAttributeNumber(start)}" ` +
`data-duration="${formatTimelineAttributeNumber(duration)}" ` +
`data-track-index="${track}" ` +
`data-width="${width}" data-height="${height}" ` +
`style="position: absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; z-index: ${zIndex}">` +
`</div>`;
const subCompHtml = [
`<div`,
` data-composition-id="${compId}"`,
` data-composition-src="${compositionFile}"`,
` data-start="${formatTimelineAttributeNumber(start)}"`,
` data-duration="${formatTimelineAttributeNumber(duration)}"`,
` data-track-index="${track}"`,
` data-width="${width}"`,
` data-height="${height}"`,
` style="position: absolute; left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px; z-index: ${zIndex}"`,
`></div>`,
].join("\n");
const patchedContent = insertTimelineAssetIntoSource(originalContent, subCompHtml);
@@ -126,5 +126,12 @@ export function insertTimelineAssetIntoSource(source: string, assetHtml: string)
throw new Error("No composition root found in target source");
}
const insertAt = match.index + match[0].length;
return `${source.slice(0, insertAt)}${assetHtml}${source.slice(insertAt)}`;
const lineStart = source.lastIndexOf("\n", match.index);
const leadingWhitespace = source.slice(lineStart + 1, match.index).match(/^(\s*)/)?.[1] ?? "";
const childIndent = leadingWhitespace + " ";
const indented = assetHtml
.split("\n")
.map((line, i) => (i === 0 ? line : childIndent + line))
.join("\n");
return `${source.slice(0, insertAt)}\n${childIndent}${indented}${source.slice(insertAt)}`;
}