Netlify-cms: Collection items shows "UNSAVED CHANGES" while nothing is changed (when custom editor components are used inside a markdown field))

[bert-bruggeman]

Describe the bug
Collection items shows "UNSAVED CHANGES" while nothing is changed (when custom editor components are used inside a markdown field))

To Reproduce
Create a collection with a body field and add content with a custom editor widget like "button", publish, go back to the overview and open the item again, while nothing is changed the top left "back button" message says "UNSAVED CHANGES".

Editor component

CMS.registerEditorComponent({
    id: "button",
    label: "Button",
    pattern: '^{% button(.*)',
    fields: [
      {
        name: 'text',
        label: 'Text',
        widget: 'string',
        required: true,
      },
      {
        name: 'href',
        label: 'href',
        widget: 'string',
        required: true,
      },
      {
        name: 'icon',
        label: 'Icon',
        widget: 'select',
        default: 'none',
        options: [
          'none',
          'more',
          'info',
        ],
      }
    ],

    fromBlock: function(match) {

      function getAttribute(attribute, defaultValue) {
        var val = match[1].match(attribute + '="(.*?)"');
        return val ? val[1] : defaultValue;
      }

      return {
        text: getAttribute("text",""),
        href: getAttribute("href",""),
        icon: getAttribute("icon","none"),
      };
    },

    toBlock: function(obj) {
      return '{% button text="' + obj.text + '" href="' + obj.href + '" icon="' + obj.icon + '" %}';
    },

    toPreview: function(obj) {
      if (obj.icon && obj.icon != "none") {
        obj.text = '<span>' +  obj.text + '</span>';
        var icon = '<svg width="16" height="16" class="sym icon-' + obj.icon + '"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/symbols.svg#' + obj.icon + '"></use></svg>';
      }
      else icon = "";

      if (obj.text) {
        return (
          '<div class="button-container"><a href="' + obj.href + '" class="btn">' + icon + obj.text + '</a></div>'
        );
      }
    }

});

Content - markdown file (see content type below)

---
title: Lorem ipsum
order: 1
image: /media/image.jpg
---

Lorem ipsum **dolor sit amet**, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque **penatibus** et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

{% button text="Read more" href="/about-us" icon="more" %}

Config (cards content type)

  - name: "cards"
    label: "Frontpage"
    label_singular: "Card"
    folder: "_content/_cards"
    create: true
    fields:

      - label: Title
        name: title
        widget: string
        hint: Een herkenbare titel met enkele kernwoorden.

      - label: Order
        name: order
        widget: number
        default: 1
        valueType: "int"
        min: 1
        max: 99
        hint: De plaats van dit item op de frontpage.

      - label: Image
        name: image
        widget: image

      - label: Body
        name: body
        widget: markdown

Browsers: Firefox, Chrome (current versions)
CMS: current 2.8.0

[erquhart]

@bert-bruggeman not an issue?

_{Sent with GitHawk}

[bert-bruggeman]

After checking pages using some other custom editor components I noticed I only have the issue with this specific component (button, see the js code above)... I thought something was wrong in my code in the "toBlock" function, maybe an extra space or character but I can't seem to solve this...

[bert-bruggeman]

Update: when I set the editor to markdown mode, edit and save the content, closing it and open it again I don't have this issue... After toggling the editor to "rich text" and back to markdown the "UNSAVED CHANGES" message reappears while nothing is changed...

[bert-bruggeman]

Update 2: After searching what could cause this issue I have found the problem.
The issue has nothing to do with the specific editor component but occurs when the editor component is at the end of the content;

For example:

Content - shows "Unsaved Changes" while nothing is changed - issue!

---
title: Lorem ipsum
order: 1
image: /media/image.jpg
---

Lorem ipsum **dolor sit amet**, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque **penatibus** et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

{% button text="Read more" href="/about-us" icon="more" %}

Content - shows "Changes saved" - no issue!

---
title: Lorem ipsum
order: 1
image: /media/image.jpg
---

Lorem ipsum **dolor sit amet**, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque **penatibus** et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

{% button text="Read more" href="/about-us" icon="more" %}

Lorem ipsum

[erquhart]

Hmm yeah I see that now, thanks for narrowing it down!

[hunterbecton]

I'm having the same issue with my Netlify CMS, specifically with my blog post collection type. Any time I go into the blog the status changes from Save Changes to Unsaved Changes. I don't have special components in my editor, just a line of text. My other collections, which don't have a markdown editor do not throw this error.

[erquhart]

We have the same issue with other widgets, has to do with how default values are set and also syncing issues between stateful widgets and widgets that are entirely controlled by the CMS. Most widgets are the latter, but the Markdown widget actually maintains its own state and selectively updates the CMS state for performance reasons.

[hunterbecton]

Is there any way to avoid it until there's a fix? @erquhart

[erquhart]

Not really. Beside the editor showing "unsaved changes", specifically what user experience are you wanting to avoid?

_{Sent with GitHawk}

[bert-bruggeman]

It is just very confusing, especially for non-technical users, who quickly think that they have done something wrong.

[erquhart]

Gotcha, and totally agree. No workaround at the moment, but it's now on our radar 👍

[HMilbradt]

Getting the same issue and tracked it down to the relation component:

      - label: "Post Author"
        name: "author"
        widget: "relation"
        collection: "authors"
        searchFields: ["name"]
        valueField: "name"
        displayFields: ["name"]

It seems that there's about a half second delay in this field being populated, at which point the "Changes saved" message switches to "unsaved changes". Switching this component to a list fixed this for us, but we'd still like to use a collection at some point in the future.

[ArthurClemens]

I am seeing the same, no custom components, with relations.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mark-making]

Is there any plans for this to be fixed?

It is related to: #1550, and we recently just came across this issue.

[marcfilleul]

Same here with simple files.

I've narrowed it down too and in my case, with no custom component, I have the issue if the last element in my markdown body is an image .

By deleting the last image, the issue disappears.

[nathantbaker]

I'm also seeing this issue

[sleepingkiwi]

This issue seems particularly tricky if you want to use Editorial Workflow because the editor prevents you from changing the status (to Ready, so that you can publish) if it thinks there are unsaved changes.

In my case the issue was caused by the relation widget and we couldn't easily switch to a list as per @HMilbradt fix.

I eventually solved the issue for our specific use case by wrapping the default relation widget in a custom widget that checks if the value has changed before updating anything.

It feels like a bit of a hacky fix but works well for us. Until the API updates mentioned in #725 are implemented I'd be happy to share the code for that custom widget in a gist or something if it would be helpful to anyone.

[carloscabral]

Hi, @sleepingkiwi! Would you mind to share the code? I'm facing this issue right now and we have to deliver this project next week.

Thanks in advance!

[sleepingkiwi]

@carloscabral - no problem. I think this is the mimimum required to get it working: https://gist.github.com/sleepingkiwi/3a657951164da7d552c27a5ef27d18ca

It stops the contents of the relation select visually loading until you interact with it but the values are still stored/saved regardless.

You have to register the custom widget - if you're used to doing that it should all hopefully be straightforward if not I included some simple examples but there's also docs on the netlify cms site

[carloscabral]

Thank you, @sleepingkiwi!

[erezrokah]

I've wasn't able to reproduce the original issue here https://github.com/erezrokah/netlify-cms-reproductions/commits/netlify_cms/issue_2211.
Here is the entry content:
https://github.com/erezrokah/netlify-cms-reproductions/pull/6/files

Since it looks like this issue can be reproduced in several ways, if you're experiencing it, can you share the relevant config.yml and markdown content like @bert-bruggeman did so I can try to create a reproduction?

Note: if it happens with relations comment on this issue https://github.com/netlify/netlify-cms/issues/725

[marcveens]

@erezrokah I faced the same issue at #3039 with a really simple config.yml, could you try that one out?

[erezrokah]

@erezrokah I faced the same issue at #3039 with a really simple config.yml, could you try that one out?

Reproduces on this branch: https://github.com/erezrokah/netlify-cms-reproductions/tree/netlify_cms/issue_3039

[erezrokah]

https://github.com/netlify/netlify-cms/issues/3039 is related to the fact that slate runs default schema validation as a part of the Core plugin https://github.com/ianstormtaylor/slate/blob/a0b7976cb9a2812d8d96361e9993fe8853a2cc64/packages/slate/src/plugins/core.js#L96.

Our remarkToSlate function here https://github.com/netlify/netlify-cms/blob/476f45096efa1723936a73f2e2e04d5c7ccd293f/packages/netlify-cms-widget-markdown/src/serializers/remarkSlate.js#L35

doesn't conform to the schema thus forcing an update.

Possible solutions:

1. Fix remarkToSlate to match slate schema (might break in future updates of slate).
2. Ignore first change event from slate if happens on initial load.
3. Run slate schema validation as a part of remarkToSlate (might require importing specific internal slate functions).
4. All of the above

[erezrokah]

Closing this as I wasn't able to reproduce the original issue, #3039 is fixed by https://github.com/netlify/netlify-cms/pull/3085 and relation widget is covered by #725.
If anyone is experiencing this with a new use case please comment here with the relevant config.yml and preview templates (if relevant) or open a new issue.

[vitorregisrr]

Same here. Collections that have a "relation" widget just dont save. It's always with "Unsaved" status after click on save. (The page just reloads).
The unique way to save is going to workflow and drag-in-drop to other status. But the "save" button dont work. It's really bad for non-technical users :/
I have a lot of collections that should have relations and no one works (but if i remove it, the collection saving works)
I really hope you guys can fix it, because i'm currently using basic string widgets in some places it should be relation because i cant see how to fix it. Thank you!
Here is an example:
````

• name: "clients"
  label: "Clientes"
  folder: "data/clients"
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
  fields:
  
  
  
  • { label: "Nome", name: "title", widget: "string" }
  
  
  • { label: "Logo", name: "image", widget: "image", allow_multiple: false }
  
  
• name: "projects"
  label: "Projetos"
  folder: "data/projects"
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
  fields:
  
  
  
  • { label: "Título", name: "title", widget: "string" }
  
  
  • { label: "Descrição", name: "description", widget: "text" }
  
  
  • { label: "Proposta", name: "proposta", widget: "text" }
  
  
  • { label: "Link Externo", name: "link_ext", widget: "string" }
  
  
  • { label: "Data", name: "date", widget: "datetime", format: 'YYYY-MM-DD hh:mm' }
  
  
  • { label: "Cliente", name: "client", widget: "relation", collection: "clients", searchFields: ["title"], valueField: "title" }
  
  
  • { label: "Imagem principal", name: "image", widget: "image", allow_multiple: false }
  
  
  • label: Outras imagens
    
    name: gallery
    
    required: true
    
    widget: list
    
    field: {label: Image, name: image, widget: image, required: true}
  
  
  • { label: "Categoria", name: "category", widget: "select", options: ["Websites", "Aplicativos", "Sistemas", "Games", "Outros"]}
  
  
  • { label: "Destaque", name: "destaque", widget: "boolean", default: false }`````