Problem

Canvas makes use of annotations via component-overlays to provide UI for components. Since rc1 the overlays for child components are lost.

Proposed resolution

Todo

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

fago created an issue. See original summary.

fago’s picture

Debugging this a bit, the canvas-start/end markers are correctly rendered by the wrapping component, example:

<div id="nuxt-preview-humanifyheader" class="nuxt-preview-container" data-component-name="HumanifyHeader" data-component-props="{&quot;darkVariant&quot;:true,&quot;backgroundColor&quot;:&quot;crust&quot;}" data-component-slots="{&quot;branding&quot;:&quot;&lt;!-- canvas-start-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --&gt;&lt;div id=\&quot;nuxt-preview-humanifylogo\&quot; class=\&quot;nuxt-preview-container\&quot; data-component-name=\&quot;HumanifyLogo\&quot; data-component-props=\&quot;{&amp;quot;linkToFrontPage&amp;quot;:true}\&quot; data-component-slots=\&quot;[]\&quot;&gt;&lt;\/div&gt;\n&lt;!-- canvas-end-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --&gt;&quot;,&quot;navigation&quot;:&quot;&lt;!-- canvas-start-95805f3a-b32e-4d58-b08e-f506579ab18f --&gt;&lt;div id=\&quot;nuxt-preview-humanifynavigation\&quot; class=\&quot;nuxt-preview-container\&quot; data-component-name=\&quot;HumanifyNavigation\&quot; data-component-props=\&quot;[]\&quot; data-component-slots=\&quot;[]\&quot;&gt;&lt;\/div&gt;\n&lt;!-- canvas-end-95805f3a-b32e-4d58-b08e-f506579ab18f --&gt;&quot;}" data-once="nuxt-preview"><header class="dark bg-crust"><div class="min-w-sm mx-auto flex h-24 max-w-screen-xl items-center justify-between gap-x-12 px-4 sm:px-12 md:h-32 lg:gap-x-16 lg:px-16"><div class="h-12 flex-shrink-0 items-center justify-start md:h-16"><div style="display: contents;"><!-- canvas-start-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --><div id="nuxt-preview-humanifylogo" class="nuxt-preview-container" data-component-name="HumanifyLogo" data-component-props="{&quot;linkToFrontPage&quot;:true}" data-component-slots="[]" data-once="nuxt-preview"><a class="inline-flex h-12 max-h-16 items-center gap-2 md:h-16" href="/"><span class="sr-only">Home</span><svg class="mt-2 h-full w-auto shrink-0" viewBox="0 0 489.142 489.142" xmlns="http://www.w3.org/2000/svg">...</svg><span class="text-flamingo shrink-0 text-lg uppercase tracking-widest"> Humanify </span></a></div>
<!-- canvas-end-aaef79ba-f04f-42bc-b888-e0229d46c9b5 --></div></div><div class="flex h-12 flex-grow items-center justify-end md:h-16"><div style="display: contents;"><!-- canvas-start-95805f3a-b32e-4d58-b08e-f506579ab18f --><div id="nuxt-preview-humanifynavigation" class="nuxt-preview-container" data-component-name="HumanifyNavigation" data-component-props="[]" data-component-slots="[]" data-once="nuxt-preview"><div class="md:flex md:items-center md:gap-12"><nav aria-label="Global" class="hidden md:!block"><ul class="flex items-center gap-6 text-sm"><li><a href="#" class="text-text hover:text-text/75 transition-colors">Services</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">Blog</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">About</a></li><li><a href="#" class="text-text hover:text-text/75 transition-colors">Careers</a></li></ul></nav><div class="flex items-center gap-4"><div class="sm:flex sm:gap-4"><a class="bg-teal text-inverted-text hover:bg-teal/90 rounded-md px-5 py-2.5 text-sm font-medium shadow-sm transition-colors" href="#"> Login </a><div class="hidden sm:!flex"><a class="bg-surface-0/75 text-text hover:text-text/75 rounded-md px-5 py-2.5 text-sm font-medium transition-colors" href="#"> Register </a></div></div><div class="block md:hidden"><button class="bg-surface-2 text-text rounded-sm p-2"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></div></div></div>
<!-- canvas-end-95805f3a-b32e-4d58-b08e-f506579ab18f --></div></div></div></header></div>

so that part is working correctly

fago’s picture

oh, I just figured that the canvas-start/stop comments are there but NOT the canvas-slot-start-UUID/SLOTNAME comments!

So we need to fix this first.

fago’s picture

Status: Active » Needs review

it turns out, this fixes the issue! So it seems the missing slot-comments were really the main problem

  • fago committed 23aa92b3 on 1.x
    [#3552862] fix: Annotations for child components within slots are lost...
fago’s picture

Status: Needs review » Fixed

Merged!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.