Set and read the language programmatically

[MasterEvarior]

Hi

Firstly: great thing you wrote here 😃

For a small side project of mine im trying to save and set the language, which is selected per dropdown, programmatically. Is this in any way possible?

I've seen that there is the mark and languageClass property inside of the component but it doesn't seems accessible.

[justcaliturner]

@MasterEvarior Thanks for your feedback, Do you mean the property - languages? which allows you to set the language list, like this:

<CodeEditor
   :language_selector="true"
   :languages="[['javascript', 'JS'],['python', 'Python']]"
></CodeEditor>

In the example above, javascript is the full name of the language, and JS is the nickname of the language (you can also customize it), so you can pass a 2D array to set the language list.

[MasterEvarior]

How I set the available languages is very clear 😃 My questions is how do I set the currently active language. For example, I pass this to my CodeEditor component

<CodeEditor
   :language_selector="true"
   :languages="[['javascript', 'JS'],['python', 'Python'],['c++', 'C++']]"
></CodeEditor>

Now for switching between JavaScript, C++ and Python I can use the dropdown, like this:

But is there a way I can make this switch with JavaScript? Or read the currently chosen language?

My goal is to save the currently written code and display it later on another device. For that I'd have to also read and set the "active" language, so the code is highlighted correctly.

[justcaliturner]

@MasterEvarior OK, I have understood your question, you'd like to switch the language outside the component through the JS, So you can set a data for the property - languages, and then re-render the component, this is the example:

<button @click="switchToJs">Switch to JS</button>
<button @click="switchToPy">Switch to PY</button>

<CodeEditor
   v-if="isShow"
   :key="timer"
   :languages="lang"
></CodeEditor>

  data() {
    return {
      lang: [['html', 'HTML']],
      isShow: true,
      timer: '',        // setting an index for the component
    };
  },

  methods: {
    switchToJs(){
      this.isShow = false;       //cancel the component
      this.timer = new Date().getTime();      // resetting the index using the timestamp
      this.lang = [['javascript', 'JavaScript']];     // resetting the language
      this.isShow = true     // re-render the component
    },
    switchToPy(){
      this.isShow = false;
      this.timer = new Date().getTime();
      this.lang = [['python', 'Python']];
      this.isShow = true
    }
  },

😄 Hope to solve your problem

[MasterEvarior]

@justcaliturner Thanks for your answer! This seems like it could work, I will confirm as soon as I have implemented a version of this.

Might take a little while, because I currently only have time to work on this during the weekend. Could you keep this issue open until then?

[justcaliturner]

@MasterEvarior OK, it's fine 😃

This is the way to get the current language: https://github.com/justcaliturner/simple-code-editor/issues/11

[MasterEvarior]

@justcaliturner So I had time to implement the feature based on your suggestions and together with #11 it works. Though it is a bit hacky, so I might iterate on the implementation a bit.