Dynamically added CodeMirror: Change Language Mode

Question

I am trying to change the language mode on dynamically created CodeMirrors, but when I try to change one, it changes every single instance.

How can I change only the selected CodeMirror, the one that is in the same widget as the changed Selection element?

I don't want to use ID's, I want the jQuery to be able to handle knowing which widget editor I'm changing, but I don't know how to reinitialize the editor when changing in the select. I have tried resetting the variable var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]); inside of the change event, but that just appends another CodeMirror element...

$(function() {

  $(document).on('click', '.add-editor', function() {
    var widget = $('<div class="widget" data-widget="code" style="">' +
      '<div class="widget-settings">' +
      '<select class="form-control form-control-sm code-mode">' +
      '<option data-lang="JavaScript">JavaScript</option>' +
      '<option data-lang="HTML mixed-mode">HTML</option>' +
      '<option data-lang="CSS">CSS</option>' +
      '</select>' +
      '</div>' +
      '<div class="new-inner" data-language="js">' +
      '<textarea class="demotext" style="display: none;"></textarea>' +
      '</div>' +
      '</div>');
    $('body').append(widget);
    var theme = 'pastel-on-dark';
    var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
    editor.setOption('mode', 'JavaScript');
    editor.setOption('theme', theme);
    editor.setOption('lineNumbers', true);
    editor.setOption('smartIndent', true);
    editor.setOption('indentWithTabs', true);
    editor.setOption('matchBrackets', true);
    location.hash = "#" + theme;
    editor.save();
    mirrorSettings(editor);
  });


  function mirrorSettings(editor) {
    $(document).on('change', '.code-mode', function() {
      var widget = $(this).closest('.widget');
      var language = $(this).find(':selected').attr('data-lang');
      console.log(language);
      editor.setOption("mode", language);
      console.log(editor); // shows the mode in options
      switch (language) {
        case 'HTML mixed-mode':
          widget.find('.CodeMirror').attr('data-language', 'html');
          console.log('true');
          break;
        case 'JavaScript':
          widget.find('.CodeMirror').attr('data-language', 'js');
          break;
        case 'CSS':
          widget.find('.CodeMirror').attr('data-language', 'css');
          break;
      }
    });
  }

});

.widget {
  width: 500px;
  /* 	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%); */
}


/* Lang: JavaScript */

[data-language='js'] .cm-keyword {
  color: #ffcc99 !important;
}

[data-language='js'] .cm-def {
  color: white !important;
}

[data-language='js'] .cm-variable-2,
[data-language='js'] .cm-variable {
  color: #6a51e6 !important;
}

[data-language='js'] .cm-property {
  color: #9b87fd !important;
}

[data-language='js'] .cm-string {
  color: #ffba76 !important;
}

[data-language='js'] .cm-operator {
  color: #ffba76 !important;
}


/* Lang: HTML */

[data-language='html'] .cm-keyword {
  color: #ffcc99 !important;
}

[data-language='html'] .cm-def {
  color: white !important;
}

[data-language='html'] .cm-variable-2,
[data-language='js'] .cm-variable {
  color: #6a51e6 !important;
}

[data-language='html'] .cm-property {
  color: #9b87fd !important;
}

[data-language='html'] .cm-string {
  color: #ffba76 !important;
}

[data-language='html'] .cm-operator {
  color: #ffba76 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
<link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
<button class="add-editor">add</button>

Answer 1

One thing you can do is save a reference to the editor as a prop on the widget element. You also don't need the mirrorSettings function. I don't think it's functioning as you had intended. Instead you can just have your onChange handler.

    $(function() {

      $(document).on('click', '.add-editor', function() {
        var widget = $('<div class="widget" data-widget="code" style="">' +
          '<div class="widget-settings">' +
          '<select class="form-control form-control-sm code-mode">' +
          '<option data-lang="JavaScript">JavaScript</option>' +
          '<option data-lang="HTML mixed-mode">HTML</option>' +
          '<option data-lang="CSS">CSS</option>' +
          '</select>' +
          '</div>' +
          '<div class="new-inner" data-language="js">' +
          '<textarea class="demotext" style="display: none;"></textarea>' +
          '</div>' +
          '</div>');
        $('body').append(widget);
        var theme = 'pastel-on-dark';
        var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
        var textArea = widget.find('textarea')
        widget[0].editor = editor
        editor.setOption('mode', 'JavaScript');
        editor.setOption('theme', theme);
        editor.setOption('lineNumbers', true);
        editor.setOption('smartIndent', true);
        editor.setOption('indentWithTabs', true);
        editor.setOption('matchBrackets', true);
        location.hash = "#" + theme;
        editor.save();
      });


      $(document).on('change', '.code-mode', function() {
          var widget = $(this).closest('.widget');
          var language = $(this).find(':selected').attr('data-lang');
          var editor = widget[0].editor
          console.log(language);
          editor.setOption("mode", language);
          
          switch (language) {
            case 'HTML mixed-mode':
              widget.find('.CodeMirror').attr('data-language', 'html');
              console.log('true');
              break;
            case 'JavaScript':
              widget.find('.CodeMirror').attr('data-language', 'js');
              break;
            case 'CSS':
              widget.find('.CodeMirror').attr('data-language', 'css');
              break;
          }
        });

    });

    .widget {
      width: 500px;
      /* 	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%); */
    }


    /* Lang: JavaScript */

    [data-language='js'] .cm-keyword {
      color: #ffcc99 !important;
    }

    [data-language='js'] .cm-def {
      color: white !important;
    }

    [data-language='js'] .cm-variable-2,
    [data-language='js'] .cm-variable {
      color: #6a51e6 !important;
    }

    [data-language='js'] .cm-property {
      color: #9b87fd !important;
    }

    [data-language='js'] .cm-string {
      color: #ffba76 !important;
    }

    [data-language='js'] .cm-operator {
      color: #ffba76 !important;
    }


    /* Lang: HTML */

    [data-language='html'] .cm-keyword {
      color: #ffcc99 !important;
    }

    [data-language='html'] .cm-def {
      color: white !important;
    }

    [data-language='html'] .cm-variable-2,
    [data-language='js'] .cm-variable {
      color: #6a51e6 !important;
    }

    [data-language='html'] .cm-property {
      color: #9b87fd !important;
    }

    [data-language='html'] .cm-string {
      color: #ffba76 !important;
    }

    [data-language='html'] .cm-operator {
      color: #ffba76 !important;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://codemirror.net/lib/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
    <link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
    <button class="add-editor">add</button>