fix component text corruption in duplicate dialog

[maxy-shpfy]

Description

Closes #1403

Refactored component duplication and library management to use hydrated component references. This PR eliminates the need to repeatedly serialize/deserialize components with js-yaml.

Key changes:

• Added a replaceComponentName helper function to modify component names directly in the text
• Updated ComponentDuplicateDialog to work with hydrated components
• Modified FavoriteComponentToggle to hydrate components before adding them to the library
• Updated the component library provider to handle hydrated components throughout

Type of Change

• Improvement
• Cleanup/Refactor

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

Screen Recording 2025-12-01 at 8.29.44 PM.mov (uploaded via Graphite)

1. Follow video to test the functionality.
2. Open any component for edit in YAML editor (not Python).
3. Add multiple lines of strings (e.g. #1​ like comments)
4. Save. Observe the Duplicate dialog. Test that dialog works exactly same as in staging/production
5. Ensure, that after subsequent edits of the same component does not alterate the content of component (adding new lines, or collapsing lines into one line).
6. Follow examples from the ticket Component Editor - Editing component deletes/adds newlines, breaking the component every time you save it #1403
7. Ensure that remaining functionality has no regressions (e.g. adding components via Canvas drops, adding removing components from favorites).

Notes

• This PR does not address round-trip issues with "Component Details" e.g. download YAML or Implementation Code (which comes from Spec, not Text).

[maxy-shpfy]

• refactoring: consolidate componentspec yaml parse load utils #1466
• refactoring: introduce componentSpecFromYaml #1460
• fix component text corruption in duplicate dialog #1448 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

This looks like a smart and comprehensive solution. Nice!

For clarity: which GitHub issues is this specifically trying to fix?

Also: I notice I can overwrite any component in the library by entering an identical name into the duplicate dialog and using "import as new"

[Mbeaulne]

NIT:

  const digest = await generateDigest(text);

  return {
    text,
    digest,
    name: newName,
  };

[maxy-shpfy]

^ @camielvs the ticket to solve is #1403 - missed to add to description

[camielvs]

I am still unable to reproduce the original issue on master or production. But nonetheless, on this branch I see things are a little more stable for edited components. LGTM

[maxy-shpfy]

Merge activity

• Dec 3, 3:52 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Dec 3, 3:53 PM UTC: Graphite rebased this pull request as part of a merge.
• Dec 3, 3:54 PM UTC: @maxy-shpfy merged this pull request with Graphite.