fix: 7431 - code widget Ignore initial lang change to prevent false unsaved changes state by dlford · Pull Request #7588 · decaporg/decap-cms

dlford · 2025-08-31T16:57:52Z

Summary

The code widget executes the onChange callback anytime lang is changed, including when initializing the value from props. This causes the CMS to act as if there are unsaved changes any time a document is loaded with a saved language in the code widget.

Test plan

Using the below config and index, create a new blog post and add a code component, set the language and save. Reload the page, you should see the "changes saved" message in the top left of the CMS instead of "unsaved changes".

config.yml

local_backend: true
backend:
  name: test-repo
media_folder: static/media
public_folder: /media

collections:
  - name: blog
    label: Blog Posts
    label_singular: Blog Post
    folder: content/blog
    create: true
    preview_path: "{{fields.slug}}"
    identifier_field: slug
    fields:
    - label: Title
      name: title
      hint: The title should ideally be between 5 and 60 characters long for SEO
      widget: string
      required: true
    - label: Post Content
      name: body
      widget: markdown
      required: false
      editor_components:
      - code

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Decap CMS</title>
  </head>
  <body>
    <script src="dist/decap-cms.js"></script>
    <script>
      const CMS = window.CMS;

      const langMap = {
        js: 'javascript',
        ts: 'typescript',
        sh: 'shell',
        'go-html-template': 'go',
        yml: 'yaml',
        cfg: 'ini',
        txt: '',
      };

      CMS.registerEditorComponent({
        id: 'code',
        label: 'Code',
        summary: '{{fields.title}}',
        collapsed: true,
        fields: [
          {
            name: 'title',
            label: 'Title',
            widget: 'string',
            default: '',
            required: false,
          },
          {
            name: 'hl',
            label: 'Highlight Lines',
            hint: 'Use spaces to separate multiple lines and hyphens for ranges, e.g. `1 3-5`',
            widget: 'string',
            default: '',
            required: false,
          },
          {
            name: 'code',
            label: 'Code',
            widget: 'code',
            required: true,
          },
        ],
        pattern:
          /{{<code[ \n]?(lang="([^"]+)?")?[ \n]?(title="([^"]+)?")?[ \n]?(hl="([^"]+)?")?>}}\n+```([a-zA-Z]+)?\n((?!```).*?$)\n```\n+{{<\/code>}}/ms,
        fromBlock: function (match) {
          return {
            title: match[4],
            hl: match[6],
            code: {
              lang: match[2] ? langMap[match[2]] || match[2] : '',
              code: match[8] || '',
            },
          };
        },
        toBlock: function ({ title, hl, code }) {
          let lang = code?.lang ? langMap[code.lang] || code.lang : '';

          let args = '';
          if (lang) args += ` lang="${lang}"`;
          if (title) args += ` title="${title}"`;
          if (hl) args += ` hl="${hl}"`;
          return `{{<code${args}>}}\n\`\`\`\n${code?.code}\n\`\`\`\n{{</code>}}`;
        },
        toPreview: function ({ title, hl, code }) {
          return `<code>Language: ${code?.lang}</code>\n<code>Title: ${
            title || ''
          }</code>\n<code>Highlight Lines: ${hl || ''}</code>\n<pre><code>\n${
            code?.code || ''
          }\n</code></pre>`;
        },
      });
    </script>
  </body>
</html>

Checklist

Please add a x inside each checkbox:

I have read the contribution guidelines.

…nsaved changes state

…nits

Copilot

Pull Request Overview

This PR fixes an issue where the code widget incorrectly triggers the onChange callback when initializing the language value from props, causing the CMS to show "unsaved changes" status when loading a document with a saved language setting.

Added state tracking to identify initial language initialization
Modified the language change handler to ignore the initial language setting
Prevented false positive unsaved changes state on document load

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/decap-cms-widget-code/src/CodeControl.js

Copilot · 2025-10-07T09:45:54Z

packages/decap-cms-widget-code/src/CodeControl.js

+      this.setState({ isLangInitialized: true });
+
+      this.handleChangeCodeMirrorProps(changedProps, shouldIgnoreLangChange);


Setting isLangInitialized to true should be done after the language change is processed, not before. If handleChangeCodeMirrorProps throws an error, the flag will be incorrectly set to true even though initialization didn't complete successfully.

Suggested change

this.setState({ isLangInitialized: true });

this.handleChangeCodeMirrorProps(changedProps, shouldIgnoreLangChange);

this.handleChangeCodeMirrorProps(changedProps, shouldIgnoreLangChange);

this.setState({ isLangInitialized: true });

I disagree with this, the ordering here is intentional for graceful failure; if for some reason handleChangeCodeMirrorProps errors we would rather falsely report changes when there are none than potentially ignore actual changes that have been made.

martinjagodic · 2025-10-07T09:47:26Z

@dlford please check if Copilot makes sense here.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…nsaved changes state (decaporg#7588) * fix: 7431 - code widget Ignore initial lang change to prevent false unsaved changes state * 7588: apply copilot nitpick Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix: 7431 - code widget Ignore initial lang change to prevent false u…

a617264

…nsaved changes state

dlford requested a review from a team as a code owner August 31, 2025 16:57

Merge branch 'main' into 7431_code_widget_unsaved_changes_when_lang_i…

61a853e

…nits

martinjagodic previously approved these changes Oct 7, 2025

View reviewed changes

Merge branch 'main' into 7431_code_widget_unsaved_changes_when_lang_i…

560417f

…nits

martinjagodic requested a review from Copilot October 7, 2025 09:45

Copilot AI reviewed Oct 7, 2025

View reviewed changes

7588: apply copilot nitpick

7c30c68

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

dlford dismissed martinjagodic’s stale review via 7c30c68 October 7, 2025 15:51

dlford requested a review from martinjagodic October 7, 2025 16:00

martinjagodic approved these changes Oct 8, 2025

View reviewed changes

martinjagodic enabled auto-merge (squash) October 8, 2025 07:16

martinjagodic merged commit 7576d1c into decaporg:main Oct 8, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: 7431 - code widget Ignore initial lang change to prevent false unsaved changes state#7588

fix: 7431 - code widget Ignore initial lang change to prevent false unsaved changes state#7588
martinjagodic merged 4 commits intodecaporg:mainfrom
dlford:7431_code_widget_unsaved_changes_when_lang_inits

dlford commented Aug 31, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Oct 7, 2025

Uh oh!

dlford Oct 7, 2025

Uh oh!

martinjagodic commented Oct 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		this.setState({ isLangInitialized: true });

		this.handleChangeCodeMirrorProps(changedProps, shouldIgnoreLangChange);

Uh oh!

Conversation

dlford commented Aug 31, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

dlford Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

martinjagodic commented Oct 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants