Tutoriel pour apprendre comment créer un plugin pour ONLYOFFICE DocSpace

• ONLYOFFICE DocSpace sur site. Les versions Enterprise et Community sont disponibles.
• Paquet npm @onlyoffice/docspace-plugin-sdk

Pour l’installer, utilisez la commande suivante :

npm i -g @onlyoffice/docspace-plugin-sdk

Choisissez le service qui vous permet d'ajouter les fonctionnalités nécessaires à votre DocSpace.

Assurez-vous que la documentation du service est disponible, vérifiez sa licence, la disponibilité des méthodes API, etc. Pour certains services, l'utilisateur doit obtenir une clé API pour commencer à utiliser le plugin.

Réfléchissez à l'endroit où implémenter le plugin, à sa structure, à la manière dont l'utilisateur interagira avec les composants du plugin, etc. En fonction de ces informations, dressez une liste des types de plugins et des éléments requis. Pour plus d'informations, lisez les sections Types de plugins et Éléments de plugins de la documentation du SDK des plugins.

Définissez la structure du plugin. Tous les fichiers nécessaires sont décrits ici. Tout le reste peut être organisé comme vous le souhaitez. Par exemple, dans le plugin draw.io, nous avons placé le code pour chaque type de plugin dans des dossiers séparés, alors que dans le plugin Saisie vocale, ce code est placé dans le dossier src.

Choisissez un nom pour votre plugin et écrivez-en une description.

Créez un modèle de plugin et configurez ses paramètres qui seront affichés dans les paramètres du plugin DocSpace :

Pour créer un modèle de plugin, ouvrez le terminal et exécutez la commande npx suivante :

npx create-docspace-plugin

Configurez le plugin dans le terminal en spécifiant les paramètres dans la boîte de dialogue. Tous les paramètres sont décrits ici.

Par exemple, les valeurs suivantes peuvent être utilisées pour le plugin de Saisie vocale :

Nom du plugin : speech-to-text

Version du plugin : 1.0.0

Auteur du plugin : ONLYOFFICE

Logo du plugin : logo.png

Description du plugin : Saisie vocale est un logiciel de reconnaissance vocale qui vous permet de reconnaître et de traduire la parole en texte.

Licence du plugin : Apache-2.0

Page d'accueil du plugin : https://github.com/ONLYOFFICE/docspace-plugin

Sélectionner les champs d'application (Appuyer sur <space> pour sélectionner, Entrer quand c'est fini) : API, Paramètres, Menu contextuel.

Un dossier contenant le modèle de plugin sera placé à l'endroit où vous avez exécuté la commande.

Vous pouvez modifier tous les paramètres spécifiés ultérieurement dans le fichier package.json.

Il est aussi possible de créer un plugin dans n'importe quel projet en ajoutant le package npm @onlyoffice/docspace-plugin-sdk comme dépendance et en spécifiant tous les champs nécessaires dans le fichier package.json.

Le point d'entrée du plugin index.ts sera créé automatiquement dans le dossier src lors de l'étape de création du modèle. Ce fichier est obligatoire.

Ce fichier contient toutes les méthodes de base des types de plugins que vous avez sélectionnés à l'étape précédente. Vous pouvez modifier ce fichier à tout moment.

Si vous créez vous-même un plugin, sans modèle, pour le point d'entrée du plugin, vous pouvez utiliser le code de nos exemples de plugins prêts à l'emploi. Il fonctionnera parfaitement.

Créez le dossier assets dans le dossier racine du plugin et ajoutez-y toutes les icônes du plugin. Le nombre d'icônes et leur taille dépendent des types de plugins que vous mettez en œuvre. Pour le plugin Saisie vocale, nous avons besoin des icônes suivantes :

• Le type de plugin par défaut nécessite une image de logo. Il est égal au paramètre logo du fichier package.json. Le logo sera affiché dans les paramètres du plugin DocSpace. La taille de l'icône requise est de 48x48 px. Sinon, elle sera compressée à cette taille.

• Le plugin du menu contextuel utilise une icône sur le bouton Convertir en texte. La taille requise de l'icône est de 16x16 px. Sinon, elle sera compressée à cette taille.

Si nécessaire, définissez les éléments de l'interface utilisateur du plugin. Consultez notre Storybook pour développer l'interface utilisateur de votre plugin.

Par exemple, le plugin draw.io contient deux éléments principaux d'interface utilisateur : la fenêtre modale et l'éditeur de diagramme. Créez les fichiers pour configurer chaque élément. Pour plus de commodité, vous pouvez placer ces fichiers dans un dossier séparé.

Maintenant que le plugin par défaut est prêt, vous pouvez commencer à coder d'autres types de plugins.

Chaque type de plugin possède des éléments de plugin spécifiques. Définissez l'élément du menu contextuel qui s'affichera lorsque vous ferez un clic droit sur les fichiers audio ou vidéo :

export const contextMenuItem: IContextMenuItem = {     key: "speech-to-text-context-menu-item",     label: "Convert to text",     icon: "speech-to-text-16.png",     onClick: assemblyAI.speechToText,     fileType: [FilesType.video],     withActiveItem: true, };

Configurez le type de plugin des paramètres pour fournir aux utilisateurs les paramètres de l'administrateur.

Créez un conteneur dans lequel les paramètres du plugin seront placés :

const descriptionText: TextGroup = {
    component: Components.text,
    props: {
        text: "To generate API token visit https://www.assemblyai.com",
        color: "#A3A9AE",
        fontSize: "12px",
        fontWeight: 400,
        lineHeight: "16px",
    },
};
 
const descGroup: BoxGroup = {
    component: Components.box,
    props: { children: [descriptionText] },
};
 
const parentBox: IBox = {
    displayProp: "flex",
    flexDirection: "column",
    // marginProp: "16px 0 0 0",
    children: [tokenGroup, descGroup],
};

Dans la description des paramètres, indiquez qu'il est nécessaire de générer un jeton API pour pouvoir travailler avec le plugin.

Configurez les paramètres de l'administrateur avec l'objet ISettings :

const adminSettings: ISettings = {
    settings: parentBox,
    saveButton: userButtonComponent,
    onLoad: async () => {
        assemblyAI.fetchAPIToken();
 
        tokenInput.value = assemblyAI.apiToken;
 
        if (!assemblyAI.apiToken) return { settings: parentBox };
 
        plugin.setAdminPluginSettings(adminSettings);
 
        return { settings: parentBox };
    },
};

Spécifiez l'événement onLoad qui définit les paramètres du plugin qui seront affichés lorsque le bloc de paramètres est chargé.

Chaque élément de réglage est déterminé dans des fichiers séparés (boutons, jetons).

Créez un fichier dans le dossier src avec le code principal du plugin. Ce fichier est obligatoire.

Reportez-vous à la documentation d'un service tiers pour écrire ce code.