Custom Editor Components - content inside is removed unexpectedly

[AntoineBx]

Hello kyoshino,

i recently tried to implement Custom Editor Components. I first had a hard time getting the exemple on the doc to work correctly. Turn out this, for exemple id="(:<id>.*?) is not valid because of the ":" . For a name capture group i think we need to use "?" instead so this id="(?<id>.*?) with this change the exemples worked.

Now i still have issues with saving the page return undefined when page in not closing automaticaly on saving.

Enregistrement.de.l.ecran.2026-01-06.124448.mp4

Second problem is weirder and less predictable : here is a video

Enregistrement.de.l.ecran.2026-01-06.124844.mp4

as you can see when you put the component in another line in the lexical, it sometimes remove all data inside. And i don't know why.

[kyoshino]

Will check.

[kyoshino]

Sorry, this slipped through the cracks. Just updated the doc to correct the named capture groups. Checking the actual issue.

[kyoshino]

Just fixed the example. 🙇🏼 The fromBlock function take a regex matching array, so it has to be:

-  fromBlock: ({ id, width, height }) => ({
+  fromBlock: ({ groups: { id, width, height } = {} }) => ({

Then the component should work as expected.

[AntoineBx]

Thanks for the update! But i still have the same bug when saving, shown on the video. i copy and paste your youtube exemple. Are you able to reproduce the bug?

Thanks in advance

[kyoshino]

I can reproduce instability when adding text right before the component.

A workaround is adding the m flag to the pattern, which makes the component multiline/block mode.

  pattern: /{{< youtube id="(?<id>.*?)"(?: width="(?<width>.*?)" height="(?<height>.*?)")? >}}/m,

Will continue to find the root cause.

[AntoineBx]

Hello kyoshino, i search in the code of sveltia and i manage to make the save draft maintain the extra value in the custom component! I don't know if that is clean tho :

In save function of the toolbar i added the extravalues in:

// src\lib\components\contents\details\toolbar.svelte
      // Reset the draft
      createDraft({
        collection,
        collectionFile,
        originalEntry: savedEntry,
        expanderStates: $entryDraft?.expanderStates,
        extraValues: $entryDraft?.extraValues,
      });

then in src\lib\services\contents\draft\create\index.js

i added it in if it exist instead of reseting it to {}

//src\lib\services\contents\draft\create\index.js
    entryDraft.set({
    ...
    extraValues: extraValues ?? Object.fromEntries(allLocales.map((locale) => [locale, {}])),
    });

Let me know what you think of this fix, it seems to work rn

for the other bug it seems to be linked with the setTimeout in the setInputValue function in rich-text-editor.svelte

[kyoshino]

i search in the code of sveltia and i manage to make the save draft maintain the extra value in the custom component! I don't know if that is clean tho

Cool! I’ve just added the fix to v0.129.0.