Error when saving the JSON...

[micilini]

I'm using editor.umd.js (Editor.js 2.31.0-rc.0) in my HTML project, and I'm trying to create a new plugin, for this I create the following code:

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        // AMD
        define([], factory);
    } else if (typeof exports === "object") {
        // CommonJS
        module.exports = factory();
    } else {
        // Global
        global.CodeWithLanguage = factory();
    }
}(this, function () {
    class CodeWithLanguage {
        constructor({ data, config, api }) {
            this.api = api;
            this.config = config || {};
            this.data = data || {
                code: '', // Inicializa como string vazia
                language: 'javascript' // Linguagem padrão
            };

            this.wrapper = null;
            this._addStyles();
        }

        _addStyles() {
            const style = document.createElement('style');
            style.innerHTML = `
                .code-with-language-tool {
                    display: flex;
                    flex-direction: column;
                }
                .code-with-language-tool textarea {
                    width: 100%;
                    height: 100px;
                    font-size: 16px;
                    padding: 10px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    resize: vertical;
                    box-sizing: border-box;
                }
                .code-with-language-tool select {
                    margin-bottom: 10px;
                    padding: 10px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    font-size: 16px;
                }
            `;
            document.head.appendChild(style);
        }

        render() {
            this.wrapper = document.createElement('div');
            this.wrapper.classList.add('code-with-language-tool');

            const select = document.createElement('select');
            const languages = ['JavaScript', 'TypeScript', 'HTML', 'CSS', 'Python', 'Java', 'C#'];

            languages.forEach((lang) => {
                const option = document.createElement('option');
                option.value = lang.toLowerCase();
                option.textContent = lang;
                select.appendChild(option);
            });

            select.value = this.data.language; // Define a linguagem selecionada

            select.addEventListener('change', (event) => {
                this.data.language = event.target.value;
            });

            const textarea = document.createElement('textarea');
            textarea.placeholder = 'Digite seu código...';
            textarea.value = this.data.code || ''; // Garante que seja uma string vazia

            textarea.addEventListener('input', (event) => {
                this.data.code = event.target.value;
            });

            this.wrapper.appendChild(select);
            this.wrapper.appendChild(textarea);
            return this.wrapper;
        }

        save(blockContent) {
            const textarea = blockContent.querySelector('textarea');
            const select = blockContent.querySelector('select');
        
            const codeData = {
                code: textarea ? textarea.value : '',
                language: select ? select.value : 'javascript'
            };
        
            // Log do que está sendo salvo
            console.log('Saving data:', codeData);
        
            return codeData; // Certifique-se de retornar o objeto correto
        }

        static get isReadOnlySupported() {
            return true;
        }

        static get toolbox() {
            return {
                title: 'Código com Linguagem',
                icon: '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M0 10h20M10 0l10 10-10 10"/></svg>'
            };
        }
    }

    return CodeWithLanguage;
}));

With that code, I can see a textarea and a select with options, but when I call save methods from Editor.js, I receive this error message:

What I'm doing wrong?

[micilini]

SOLUTION FOUND: I can't change the Data (from constructor) to receive code or language keys... But i can pass a stringfy JSON inside text key, and decode later like this:

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
      // AMD
      define([], factory);
    } else if (typeof exports === "object") {
      // CommonJS
      module.exports = factory();
    } else {
      // Global
      global.CodeWithLanguage = factory();
    }
  }(this, function () {
    class CodeWithLanguage {
      constructor({ data, config, api }) {
        this.api = api;
        this.config = config || {};
        console.log('Data:', data);
        this.data = data && data.text ? JSON.parse(data.text) : { // Carrega os dados do JSON
          code: '', // Inicializa como string vazia
          language: '' // Linguagem padrão
        };
  
        this.wrapper = null;
        this._addStyles();
      }
  
      _addStyles() {
        const style = document.createElement('style');
        style.innerHTML = `
          .code-with-language-tool {
            display: flex;
            flex-direction: column;
          }
          .code-with-language-tool textarea {
            width: 100%;
            height: 100px;
            font-size: 16px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            resize: vertical;
            box-sizing: border-box;
          }
          .code-with-language-tool select {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
          }
        `;
        document.head.appendChild(style);
      }
  
      render() {
        this.wrapper = document.createElement('div');
        this.wrapper.classList.add('code-with-language-tool');
  
        const select = document.createElement('select');
        const languages = ['JavaScript', 'TypeScript', 'HTML', 'CSS', 'Python', 'Java', 'C#'];
  
        languages.forEach((lang) => {
          const option = document.createElement('option');
          option.value = lang.toLowerCase();
          option.textContent = lang;
          select.appendChild(option);
        });
  
        select.value = this.data.language || 'javascript'; // Define a linguagem selecionada
  
        select.addEventListener('change', (event) => {
          this.data.language = event.target.value;
        });
  
        const textarea = document.createElement('textarea');
        textarea.placeholder = 'Digite seu código...';
        textarea.value = this.data.code || ''; // Garante que seja uma string vazia
  
        textarea.addEventListener('input', (event) => {
          this.data.code = event.target.value;
        });
  
        this.wrapper.appendChild(select);
        this.wrapper.appendChild(textarea);
        return this.wrapper;
      }
  
      save(blockContent) {
        const textarea = blockContent.querySelector('textarea');
        const select = blockContent.querySelector('select');
  
        const codeData = {
          code: textarea ? textarea.value : '',
          language: select ? select.value : 'javascript'
        };
  
        // Log do que está sendo salvo
        console.log('Saving data:', codeData);
  
        return {
          text: JSON.stringify(codeData)
        };
      }
  
      static get isReadOnlySupported() {
        return true;
      }
  
      static get toolbox() {
        return {
          title: 'Código com Linguagem',
          icon: '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M0 10h20M10 0l10 10-10 10"/></svg>'
        };
      }
    }
  
    return CodeWithLanguage;
  }));

Problem Solved!