dynamic CSS not working in Nuxt

Hey all,

I made the Nuxt-codemirror module, but I have the weirdest issue I ever encountered and hope someone could help

CodeMirror can be enhanced with extensions. All work except for the syntaxhighlighting

There is a package from codemirror itself which has a basic set of extensions including highlighting. If I import that and use it highlighting works.

this makes highlighting work

<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>

<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>

the minimalSetup variable does this:

export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()

export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()

However, when I don't use the import { minimalSetup } from "codemirror" but use my exact own function then it doesnt work. I don't know how this can happen

dynamic CSS not working in Nuxt

Hey all,

I made the Nuxt-codemirror module, but I have the weirdest issue I ever encountered and hope someone could help

<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>

<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>

the minimalSetup variable does this:

export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()

export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()

However, when I don't use the import { minimalSetup } from "codemirror" but use my exact own function then it doesnt work. I don't know how this can happen

dynamic CSS not working in Nuxt

Similar Threads

dynamic CSS not working in Nuxt

Similar Threads

Similar Threads

Similar Threads