Setting "line-separator" is displayed as an exception

[User-Clb]

let codeVal = ref({ "name": "maybaby", "year": 25, "weight": 45, "height": 165 });

<code-mirror
ref="editorRef"
v-model="codeVal"
:basic="true"
:dark="getTheme() == 'dark' ? true : false"
:lang="lang"
:placeholder="placeholder"
:phrases="phrases"
style="height: 400px;"
:extensions="extensions"
:tab="true"
:tab-size="2"
:wrap="true"
:allow-multiple-selections="true"
:readonly="false"
:disabled="false"
line-separator="\r\n"
@contextmenu="handleContextMenu"
@change="handleChange"
/>

Remove line-separator="\r\n" and it will be displayed normally

[logue]

It looks like codeVal contains a Json object, not text.
Due to the design of the component, it is assumed that the v-model value will be of type string.

let codeVal = ref(JSON.stringify({ "name": "maybaby", "year": 25, "weight": 45, "height": 165 }));
const json = computed(() => JSON.parse(codeVal.value));

I think the usage you are expecting will probably look something like the above.

[User-Clb]

It looks like codeVal contains a Json object, not text. Due to the design of the component, it is assumed that the v-model value will be of type string.

let codeVal = ref(JSON.stringify({ "name": "maybaby", "year": 25, "weight": 45, "height": 165 }));
const json = computed(() => JSON.parse(codeVal.value));
I think the usage you are expecting will probably look something like the above.

‘let codeVal = ref({ "name": "maybaby", "year": 25, "weight": 45, "height": 165 });’
the "``" symbol has been removed

It's a template string, not a JSON object.

[User-Clb]

Another question, why is it not triggered when the shortcut key is pressed? Nor did it prevent the incident from bubbling

const customKeymap = keymap.of([
  { key: 'Ctrl-Enter', run: (view) => {
      console.log('Ctrl+Enter');
      return true;
    }
  },
  { key: 'Alt-F', run: (view) => {
      console.log('Alt+F');
      return true;
    }
  }
]);
const extensions = [
  vsCodeDarkPlus,
  customKeymap
]; 

[logue]

codemirror/dev#1429

[logue]

According to the author of CodeMirror, the display of "NL" is an expected behavior.

[logue]

Add keymap prop feature in 1.3.18.

   <code-mirror
      v-model="temp"
      tab
      basic
      :keymap="[
        {
          key: 'Shift-Ctrl-Enter',
          run: view => {
            console.log('Shift+Ctrl+Enter');
            return true;
          },
        },
      ]"
    />