Question: how to edit stored design/html? about nova-unlayer-field

[alies-dev]

The fix is released as v2.0.2

Other changes will be released as a new minor or major release soon

[daanadriaan]

I have the same issue. When I reopen page (edit), the template gets loaded instead of design. In the db, the right design is saved, but not loaded on edit.

[Jon78]

I'm confirming we have the same issue on Nova v4. Next few weeks I going to find a time to fix it. I'll keep you updated here

Great!

Do you have the same issue on Nova 4 only?

Hard to say, downgrading from Nova 4 is not really an option

[alies-dev]

A bit more good news: I found a reason why it's broken on Nova 4: Vue3 uses Proxy objects for props (I didn't know that). Proxy objects usually behave at the same fashion as underlying objects, but not in our case: Unlayer uses postMessage() to communicate with iframe and doesn't work with Proxy. The fix will be ready pretty soon 🚀 (and probably some goodies on the top 🍒, stay tuned :) )

[daanadriaan]

Ah! I have a workaround that works for me!

I do
if($this->id){ $fields += *Unlayer field WITHOUT templateId* }else{ $fields += *Unlayer field WITH template }

[sineld]

@daanadriaan can you write down the whole field code with if statemant?

[daanadriaan]

        public function fields(Request $request): array
        {
            if ($this->id) {
                $fields = [
                    Unlayer::make('Content', 'design')
                        ->config([
                            'projectId'   => config('unlayer.project_id'),
                            'displayMode' => 'email', // "email" or "web". Default value: "email"
                            'locale'      => 'en', // Locale for Unlayer UI. Default value: application’s locale.
                        ])->savingCallback(function (NovaRequest $request, $attribute, Model $newsletterModel, $outputHtmlFieldName) {
                            $newsletterModel->body = $request->input($outputHtmlFieldName);
                        }),
                ];
            } else {
                $fields = [
                    Unlayer::make('Content', 'design')
                        ->config([
                            'projectId'   => config('unlayer.project_id'),
                            'templateId'  => config('unlayer.template_id'),
                            'displayMode' => 'email', // "email" or "web". Default value: "email"
                            'locale'      => 'en', // Locale for Unlayer UI. Default value: application’s locale.
                        ])->savingCallback(function (NovaRequest $request, $attribute, Model $newsletterModel, $outputHtmlFieldName) {
                            $newsletterModel->body = $request->input($outputHtmlFieldName);
                        }),
                ];
            }
            return $fields;
        }`

[alies-dev]

example config without big if-else:

Unlayer::make('Content', 'design')->config(function () {
    $newsletter = $this->getModel();

    return [
        'projectId' => config('unlayer.project_id'),
        'templateId' => $newsletter->design ? null : config('unlayer.newsletter_template_id'),
        'displayMode' => 'email',
    ];
})->savingCallback(static function (NovaRequest $request, $attribute, NewsletterModel $newsletter, $outputHtmlFieldName): void {
    $newsletter->html = $request->input($outputHtmlFieldName);
})->html(function (): string {
    return $this->getModel()->html;
})->plugins([
    asset(mix('js/admin/modules/newsletter-editor-plugins/utm.js')->toHtml()),
    asset(mix('js/admin/modules/newsletter-editor-plugins/fontsize.js')->toHtml()),
]);

[sineld]

I get:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<Object> could not be cloned.

error in console and contents not get loaded.

Here is my snippet:

  Unlayer::make('Content', 'content')->config(function () {
      $model = $this->getModel();
      return [
          'projectId' => config('unlayer.project_id'),
          'templateId' => $model->content ? null : config('unlayer.newsletter_template_id'),
          'displayMode' => 'email',
      ];
  })->savingCallback(function (NovaRequest $request, $attribute, Model $model, $outputHtmlFieldName) {
      $model->html = $request->input($outputHtmlFieldName);
  })->html(function () {
      return $this->getModel()->html;
  }),

Model:

class EmailTemplate extends Model
{
    use Actionable, HasFactory, ListTrait, StatusTrait, SimpleEloquent;

    protected $table = 'email_templates';

    protected $fillable = [
        'name',
        'status',
        'content',
        'html',
    ];

    protected $casts = [
      'content' => 'array',
    ];
}

[clavinniu]

@sineld Were you able to resolve your issue? I'm experiencing the same problem when editing an existing design.

[daanadriaan]

Yeah, after new nova upgrade I get this error as well. Any solutions?

Edit: Doesn't seem to be the Nova upgrade, because downgrading still gives me the same error. It's possible Unlayer changed their embed.js ?

[daanadriaan]

@lptn Any idea if this could be Unlayer's api?

[Jon78]

@lptn Could you look into this?

[ryanhungate]

Getting the same thing here on edit.

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<Object> could not be cloned.

[alies-dev]

I'm confirming we have the same issue on Nova v4. Next few weeks I going to find a time to fix it. I'll keep you updated here

Do you have the same issue on Nova 4 only?

[X4nd3R1984]

Sorry if I reopen an old post, but with version 2.1.0 and Nova 4.26.4, despite having also followed the previous workarounds, I still cannot modify a previously created template.
In console I read the following errors:

• TypeError: Cannot read properties of undefined (reading 'values') at editor.js:2:939906
• Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rows') at h (editor.js:2:1476257)

I think I didn't do anything wrong

[alies-dev]

Hey @X4nd3R1984

I just checked how it works on our integration - we don't have any issues. Do you use any plugins? If not, can you please create a new issue and with a minimal code to reproduce this exception? Thanks!