Exemple avec le module léger

Le profil léger montre comment désactiver les fonctions dont une application n’a pas besoin. Il est utile pour un champ de rédaction simple ou lorsque vous souhaitez limiter les fonctions proposées aux utilisateurs.

Configuration Nuxt

import { fileURLToPath } from 'node:url'
import nfzNotionMarkdownEditor from '../../src/module'

const fastE2e = process.env.NFZ_E2E_FAST_BOOT === '1'

export default defineNuxtConfig({
  compatibilityDate: '2026-05-01',

  // Les E2E Windows doivent démarrer vite et de façon déterministe.
  // Nuxt DevTools est désactivé explicitement : la variable NUXT_DEVTOOLS seule
  // ne suffit pas à empêcher son initialisation avec les versions actuelles.
  devtools: {
    enabled: !fastE2e
  },

  // @nuxt/icon reste installé comme dépendance requise du produit, mais son
  // scan/server bundle n'est pas utile aux scénarios E2E NFZ et ralentit fortement
  // le premier démarrage sous Windows.
  icon: fastE2e
    ? {
        provider: 'none',
        serverBundle: false,
        fallbackToApi: false,
        clientBundle: {
          scan: false,
          icons: []
        }
      }
    : {},

  modules: [nfzNotionMarkdownEditor],

  nfzNotionMarkdownEditor: {
    features: {
      tables: false,
      media: false,
      uml: false,
      filerobot: false,
      documentImportExport: false,
      markdownPreview: false,
      sourceMode: false
    },
    quasar: {
      lang: 'fr',
      plugins: ['Dialog', 'Notify', 'Loading'],
      dark: 'auto'
    }
  },

  css: ['~/assets/css/main.css'],

  alias: {
    '#nfz-editor-types': fileURLToPath(
      new URL('../../app/types/nfz-notion-markdown-editor.ts', import.meta.url)
    )
  },

  vite: {
    server: fastE2e
      ? {
          warmup: {
            clientFiles: ['./pages/editor.vue']
          }
        }
      : undefined
  },

  typescript: {
    strict: true,
    typeCheck: false
  }
})

Page contenant l’éditeur

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { NfzEditorSavePayload, NfzToolbarItemId } from '#nfz-editor-types'

const requestedToolbar: NfzToolbarItemId[] = [
  'bold',
  'italic',
  'heading-2',
  'bullet-list',
  'table',
  'image',
  'video',
  'image-edit',
  'uml',
  'markdown-preview',
  'source-markdown',
  'import-document',
  'export-document',
  'save'
]

const disabledToolbarIds: NfzToolbarItemId[] = [
  'table',
  'image',
  'video',
  'image-edit',
  'uml',
  'markdown-preview',
  'source-markdown',
  'import-document',
  'export-document'
]

const enabledToolbarIds: NfzToolbarItemId[] = [
  'bold',
  'italic',
  'heading-2',
  'bullet-list',
  'save'
]

const markdown = ref(`# Profil léger module Nuxt

Ce scénario désactive les features lourdes du composant : tables, médias, UML, Filerobot, import/export, preview Markdown et source mode.

- Édition texte
- Mise en forme simple
- Sauvegarde
`)

const lastSave = ref<NfzEditorSavePayload | null>(null)
const saveSummary = computed(() => lastSave.value
  ? {
      markdownLength: lastSave.value.markdown.length,
      htmlLength: lastSave.value.html.length,
      textLength: lastSave.value.text.length,
      containsTableSyntax: lastSave.value.markdown.includes('|'),
      containsDataImage: lastSave.value.markdown.includes('data:image')
    }
  : null
)

function handleSave(payload: NfzEditorSavePayload): void {
  lastSave.value = payload
}
</script>

<template>
  <main class="module-lite-page" data-testid="fresh-module-lite-editor-page">
    <section class="module-lite-card">
      <p class="eyebrow">Nuxt module mode — profil léger</p>
      <h1>Éditeur avec features désactivées</h1>
      <p>
        Ce scénario valide le mode module avec les fonctionnalités lourdes désactivées.
        La toolbar demandée contient volontairement des boutons interdits pour vérifier
        leur filtrage runtime.
      </p>

      <div class="feature-grid" data-testid="fresh-module-lite-feature-summary">
        <span>tables=false</span>
        <span>media=false</span>
        <span>uml=false</span>
        <span>filerobot=false</span>
        <span>documentImportExport=false</span>
        <span>markdownPreview=false</span>
        <span>sourceMode=false</span>
      </div>
    </section>

    <NfzNotionMarkdownEditor
      v-model="markdown"
      :toolbar="requestedToolbar"
      :enable-markdown-preview="true"
      @save="handleSave"
    />

    <section class="module-lite-card module-lite-contract" data-testid="fresh-module-lite-contract">
      <h2>Contrat attendu</h2>
      <p>Les boutons simples restent disponibles, les boutons lourds doivent être absents.</p>
      <pre>{{ {
        enabledToolbarIds,
        disabledToolbarIds
      } }}</pre>
    </section>

    <pre v-if="saveSummary" data-testid="fresh-module-lite-save-summary">{{ saveSummary }}</pre>
  </main>
</template>

Vous pouvez repartir de cet exemple puis réactiver les familles de fonctions une par une.