Wysiwyg Field doesn't retain source code edits

[kerkness]

Description

When using a Wysiwyg field with the source code editing view turned on the source code edits are not maintained.

Steps to reproduce

I added Wysiwyg fields to both modules and blocks using the different ways to define them as shown below.

The form field displays 'Source Code' button which toggles between source code and editor view. You can change the source code and these changes remain in the editSource view when toggling back and fourth but the changes are not visible in the editor and do not presist when the module is previewed or saved.

There is a @change="updateSourcecode" change handler on the textarea defined in WysiwygTiptap.vue but it would appear that this does not fire.

Form Fields tested

@formField('wysiwyg', [
    'name' => 'case_study',
    'label' => 'Case study text',
    'toolbarOptions' => [ [ 'header' => [1, 2, false] ]],
    'placeholder' => 'Case study text',
    'maxlength' => 200,
    'editSource' => true,
    'note' => 'Hint message',
])

<x-twill::wysiwyg
    name="case_study_2"
    :label="twillTrans('Case study text 2')"
    :toolbar-options="[ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ]"
    :placeholder="twillTrans('Case study placeholder')"
    :edit-source="true"
    :translated="true"
    :maxlength="200"
    :note="twillTrans('Help text')"
/> 

// And in a Module Controller with
public function getForm(TwillModelContract $model): Form
{
    $form = parent::getForm($model);

    $form->add(Wysiwyg::make()->name('description')->allowSource()->label('Description')->translatable());
    $form->add(Wysiwyg::make()->name('test_wysiwyg')->allowSource()->label('Test not translatable'));

    return $form;
}

Expected result

Changes in the editSource template would presist and the updateSourcecode change handler would capture changes.

Actual result

Changes

Versions

Twill 3.x-dev Laravel ^10

I use react and don't have much experience with vue so not really sure how to debug more in the vue template unfortunately.

[ifox]

Thanks for reporting. This PR was meant to fix it. One thing I'm wondering about: are you clicking outside of the field before using the update button?

[kerkness]

Yeah. I've tried clicking around and various ways to trigger an update. I do not see an update button tho so that could be the problem. I just have a source code toggle

[ifox]

Ok. I meant the whole form update button.

[Tom-revere]

I had a similar issue, where I could add <small> tags using the 'Source code' editor, and it will save fine when saving using the update button. But if I then made a change to the WYSIWYG field through the normal editor (not 'Source code'), the <small> tags will be removed. I would imagine this is because there is no way to add these tags through the editor normally.

[kerkness]

Just thought to check the console during the process (should have done that initially) and I get this error when toggling the "source code" button.

TypeError: this.editor.setContent is not a function

Which would indicate that I don't have the PR fix. But I'm installing "area17/twill": "^3.x-dev", on a fresh ec2 when testing this so should have that PR no?

I have other work to do today but will test this again later and verify if that PR is in place or not.

[ifox]

Make sure to use php artisan twill:update to update Twill's published compiled frontend assets.

[kerkness]

derp. not the first time I failed to do this. my bad.