Function planReplacePlaceholder

packages/core/src/editing/edit-ops.ts:1133–1163

(
  ast: t.File,
  element: t.JSXElement,
  assetPath: string,
)

};

function planReplacePlaceholder(
  ast: t.File,
  element: t.JSXElement,
  assetPath: string,
): PlaceholderEditPlan | { error: string } {
  const opening = element.openingElement;
  if (!t.isJSXIdentifier(opening.name) || opening.name.name !== 'ImagePlaceholder') {
    return { error: 'not a placeholder' };
  }
  if (!assetPath.startsWith('./assets/') && !assetPath.startsWith('@assets/')) {
    return { error: 'asset path must start with ./assets/ or @assets/' };
  }

  const hint = readJsxStringAttr(opening, 'hint') ?? '';
  const width = readJsxNumberAttr(opening, 'width');
  const height = readJsxNumberAttr(opening, 'height');

  const { identifier, importSplice } = planAssetImport(ast, assetPath);

  const styleParts: string[] = [];
  if (width != null) styleParts.push(`width: ${width}`);
  else if (height != null) styleParts.push(`width: '100%'`);
  if (height != null) styleParts.push(`height: ${height}`);
  else if (width != null) styleParts.push(`height: '100%'`);
  styleParts.push(`objectFit: 'cover'`);
  styleParts.push(`objectPosition: '50% 50%'`);
  const replacement =
    `<img src={${identifier}} alt=${jsString(hint)} ` + `style={{ ${styleParts.join(', ')} }} />`;

  return { importSplice, elementSplice: spliceRange(element, replacement) };
}

export function applyEdit(
  source: string,