@pzeta/utils
Getting Started

Installazione

Installazione, peer dependencies, traduzioni e registrazione del plugin di @pzeta/vue-wiki.

Installazione

npm install @pzeta/vue-wiki

Requisiti: Node.js >= 22, npm >= 10. Il pacchetto è pubblicato sul registry PZeta (@pzeta:registry=https://gitea.pzetatouch.it/api/packages/PZeta_Touch/npm/).

Peer dependencies

PacchettoRange
vue^3.5.0
vue-router^4.0.0 || ^5.0.0
@pzeta/vue-components^1.17.0
@pzeta/vue-i18n^1.2.0
@tiptap/core, @tiptap/pm, @tiptap/vue-3, @tiptap/starter-kit^3.32.0
@tiptap/extension-image, @tiptap/extension-table, @tiptap/extension-code-block-lowlight, @tiptap/suggestion^3.32.0
lowlight^3.3.0
@googlemaps/js-api-loader^2.0.2

npm (dalla 7) installa da solo le peer mancanti; highlight.js, peer di @tiptap/extension-code-block-lowlight, arriva insieme a lei.

Tiptap e lowlight sono peer, non dipendenze: il bundle della libreria li lascia esterni, perché due copie di ProseMirror nella stessa applicazione rompono l'editor (RangeError: Adding different instances of a keyed plugin). Se il modulo usa anche il TiptapEditor di @pzeta/vue-form, entrambe le librerie condividono la stessa copia di Tiptap.

Traduzioni

Le etichette dell'editor (barre, menu /, dialoghi) arrivano da @pzeta/vue-i18n, nello spazio wiki.editor.*. La libreria esporta il dizionario italiano it, precaricato, e loadEn() per l'inglese: vanno uniti a quelli dell'applicazione in configureI18n, come per le altre librerie @pzeta/vue-*.

// src/locales/index.ts
import { configureI18n, isI18nConfigured, type TranslationDictionary } from '@pzeta/vue-i18n'
import { it as itComponenti, loadEn as loadEnComponenti } from '@pzeta/vue-components'
import { it as itWiki, loadEn as loadEnWiki } from '@pzeta/vue-wiki'

const dizionarioIt = {
  ...itComponenti,
  ...itWiki,
} as unknown as TranslationDictionary

if (!isI18nConfigured()) {
  configureI18n({
    defaultLocale: 'it',
    fallbackLocale: 'it',
    locales: {
      it: { preloaded: dizionarioIt, loader: () => Promise.resolve({ default: dizionarioIt }) },
      en: {
        loader: async () => {
          const [componenti, wiki] = await Promise.all([loadEnComponenti(), loadEnWiki()])
          return { default: { ...componenti.default, ...wiki.default } as TranslationDictionary }
        },
      },
    },
  })
}
useI18n() lancia un errore se configureI18n non è stato chiamato: la configurazione va fatta prima di montare un componente che usa WikiEditor. In un microfrontend il singleton i18n è impacchettato nel MFE, quindi la configurazione della shell non lo raggiunge.

Registrazione

WikiEditor si può importare direttamente:

import { WikiEditor } from '@pzeta/vue-wiki'

oppure registrare globalmente con il plugin:

import { createApp } from 'vue'
import { VueWikiPlugin } from '@pzeta/vue-wiki'

const app = createApp(App)

// `prefix` antepone un prefisso al nome del componente (es. <WikiWikiEditor>),
// `components` limita la registrazione ai nomi indicati.
app.use(VueWikiPlugin)
OpzioneTipoDescrizione
prefixstringPrefisso del nome registrato
componentsComponentName[]Componenti da registrare; oggi l'unico è 'WikiEditor'

getAvailableComponents() restituisce i nomi registrabili.

CSS

Non serve importare nessun foglio di stile. La shell del portale non carica @pzeta/vue-wiki/style.css, e l'editor non ne ha bisogno: lo stile del contenuto sta in classi Tailwind standard scritte sui nodi, e l'interfaccia (barre, menu, dialoghi) usa le stesse utility e i componenti di @pzeta/vue-components. Tutte le classi sono presenti nella safelist della shell. I dettagli sono in Contenuto HTML.

Servono invece le icone PrimeIcons 8 (pi-bold, pi-heading-1…), che la shell carica già.

Import disponibili

import {
  // Componente
  WikiEditor,

  // Plugin
  VueWikiPlugin,
  getAvailableComponents,

  // Traduzioni
  it,
  loadEn,

  // Tipi
  type WikiEditorProps,
  type ComandoPowerbox,
  type ContestoComando,
  type BloccoPersonalizzatoProps,
  type CommentoAncorato,
  type SelezioneCommento,
  type ImmagineCaricata,
  type LinkRisolto,
  type TipoCallout,
  type VueWikiPluginOptions,
  type ComponentName,
  type TranslationDictionary,
} from '@pzeta/vue-wiki'

Il pacchetto ha un entry ESM (import) e uno CommonJS (require), ciascuno con le proprie dichiarazioni (.d.ts e .d.cts).

Vue Wiki

Editor delle pagine wiki per l'ERP — titoli H1–H6, link, immagini, tabelle, codice evidenziato, callout, sezioni richiudibili, menu dei comandi / e commenti ancorati al testo.

WikiEditor

Editor delle pagine wiki basato su Tiptap 3, con barre degli strumenti, menu dei comandi /, blocchi del modulo, immagini, link risolti e commenti ancorati al testo.