data-primals-engine 1.2.0 → 1.2.2

package/README.md

@@ -9,19 +9,27 @@
 
 > Whether you're building a CRM, e-commerce site, CMS, or SaaS platform, **data-primals-engine** provides the strong foundations so you can focus on what makes your application unique.
 
+<p align="center">
+  <a href="https://data.primals.net/prez1.jpg" target="_blank"><img alt="Light" src="https://data.primals.net/prez1.jpg" width="35%"></a>
+  <a href="https://data.primals.net/prez6.jpg" target="_blank"><img alt="Light" src="https://data.primals.net/prez6.jpg" width="35%"></a>
+  <a href="https://data.primals.net/api-docs" target="_blank"><img alt="Dark" src="https://data.primals.net/prez5.jpg" width="25%"></a>
+</p>
 ---
 
 ## 🚀 Key Features
 
-- **Dynamic data modeling**: Define and update schemas using JSON, no migrations required.
-- **Robust REST API**: Advanced CRUD operations, filtering, and querying.
-- **Modular architecture**: Load or extend modules dynamically.
-- **Automation workflows**: Trigger actions on events or schedules.
-- **Authentication & authorization**: Role-based access control, pluggable providers.
-- **📦 Starter Packs**: CRM, e-commerce, showcase websites, etc.
-- **🧠 AI Integration**: Supports OpenAI, Google Gemini via LangChain.
-- **🌐 i18n support**: Multilingual interfaces, translated validations.
-- **📄 Auto Documentation**: Swagger available at `/api-docs`.
+- **Dynamic Data Modeling**: Define and update schemas using JSON, no migrations required.
+- **Custom API Endpoints**: Create server-side logic and new API endpoints directly from the UI in a secure, sandboxed environment.
+- **Automation Workflows**: Trigger complex actions based on data events (create, update, delete) or schedules (cron).
+- **Advanced Querying & Aggregation**: Go beyond simple filters with deep relation expansion, complex lookups, and dynamic calculated fields.
+- **Integrated Backup & Restore**: Secure, encrypted user data backups with rotation policies, supporting both local and AWS S3 storage.
+- **Event-Driven & Extensible**: A core event system allows for deep customization and the easy creation of new modules or plugins.
+- **Authentication & Authorization**: Robust role-based access control (RBAC) and pluggable user providers.
+- **Built-in File Management**: Handle file uploads seamlessly with integrated support for AWS S3 storage.
+- **🧠 AI Integration**: Natively supports OpenAI and Google Gemini models via LangChain for content generation, analysis, and more.
+- **🌐 Internationalization (i18n)**: Fully supports multilingual interfaces and user-specific translated data.
+- **📦 Starter Packs**: Quickly bootstrap applications with pre-built data packs for CRM, e-commerce, and more.
+- **📄Auto-Generated API Documentation**: Interactive API documentation available via the interface or at `/api-docs`.
 
 
 ## 🌟 Why Choose data-primals-engine?
@@ -85,8 +93,8 @@ MONGO_DB_URL=mongodb://127.0.0.1:27017
 | SMTP_USER             | 	Username for SMTP authentication.                                      | 	user@example.com                        |
 | SMTP_PASS             | 	Password for SMTP authentication.                                      | 	password                                |
 | TLS                   | 	Encrypted connection (TLS) mode. Disabled by default                   | 	0/1 false/true                          |
-| CERT                  | 	Path to cert file.                                                     | 	certs/ca.crt                            |
-| CA_CERT               | 	Path to CA cert file.                                                  | 	certs/cert.pem                          |
+| CA_CERT               | 	Path to CA cert file.                                                  | 	certs/ca.crt                            |
+| CERT                  | 	Path to cert file.                                                     | 	certs/cert.pem                          |
 | CERT_KEY              | Path to the key file for your certificate.                              | 	certs/key.pem                           |
 
 ### Start the server
@@ -168,12 +176,11 @@ Activatable features:
 ### 🎫 Support Ticket System
 - Create ticket model with [open, pending, resolved] statuses
 - Configure notification workflows
-- Add custom endpoints for analytics
+- Add custom endpoints or dashboards/kpi for analytics
 
 ### 🤖 AI Chatbot 
 - Define your model
 - Set up workflow: "When new entry → generate AI content"
-- Connect to frontend chat interface
 
 ---
 
@@ -599,11 +606,68 @@ Expected response :
   },
   "publishedPosts": 15
 }
+
+```
+
+---
+## Extensibility
+
+### Events (Triggers) Table
+> You can use the events below to access the engine and manipulate API responses.
+> It is useful for custom modules or middlewares for your application.
+
+Just use
+
+```javascript
+Event.Listen("OnDataAdded", (data) => {
+     my_callback()
+}, "event", "user");
+```
+
+or the system version
+```javascript
+Event.Listen("OnDataAdded", (engine, data) => {
+     my_callback()
+}, "event", "system");
+```
+
+| Event | Description                                                             | Scope | Triggered by | Arguments (Payload) | 
+| :--- |:------------------------------------------------------------------------| :--- | :--- | :--- |
+| OnServerStart | Triggered once the HTTP server is started and listening.                | System | engine.start() | engine | 
+| OnServerStop | Triggered right after the HTTP server is stopped.                       | System | engine.stop() | engine |
+| OnModelsLoaded | Triggered after the initial models are loaded and validated at startup. | System | setupInitialModels() | engine, dbModels |
+| OnModelsDeleted | Triggered after all models are deleted via the reset function.          | System | engine.resetModels() | engine | 
+| OnUserDataDumped | Triggered after a user's data has been backed up (dumped).              | System | jobDumpUserData() | engine | 
+| OnDataRestored | Triggered after a user's data has been restored from a backup.          | System | loadFromDump() | (none) |
+| OnPackInstalled | Triggered after a data pack has been successfully installed.            | System | installPack() | pack | 
+| OnModelEdited | Triggered after a model definition has been modified.                   | System & User | editModel() | System: engine, newModel (Pipeline*)<br>User: newModel (or the version modified by the system) | 
+| OnDataAdded | Triggered after new data has been inserted.                             | System & User | insertData() | System: engine, insertedIds (Pipeline*)<br>User: insertedIds (or the version modified by the system) | 
+| OnDataDeleted | Triggered just after data is actually deleted.                          | System & User | deleteData() | System: engine, {model, filter} (Pipeline*)<br>User: {model, filter} | 
+| OnDataSearched | Triggered after a data search.                                          | System & User | searchData() | System: engine, {data, count} (Pipeline*)<br>User: {data, count} (or the version modified by the system) | 
+| OnDataExported | Triggered after a data export.                                          | System & User | exportData() | System: engine, exportResults, modelsToExport (Pipeline*)<br>User: exportResults, modelsToExport (or the version modified by the system) |
+
+### Triggering events
+
+If you want to provide your own hooks, you can call :
+```javascript
+const result = Event.Trigger("OnMyCustomEvent", "event", "user", ...args);
 ```
+Results are merged together if multiple events are triggered.
+- strings are concatenated
+- numbers are added
+- booleans are ANDed
+- arrays are concatenated
+- objects are merged using spread operator
+
+---
+
 ## 🤝 Contributing
 
+Find the issues available for [contributions here](https://github.com/anonympins/data-primals-engine/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22%20no%3Aassignee)
+
 1. Fork the repo
 2. Create your feature branch: `git checkout -b feature/your-feature`
+3. Launch ```npm run dev``` and make your changes with hot-reload on local port 
 3. Commit changes: `git commit -m "Add new feature"`
 4. Push to your branch: `git push origin feature/your-feature`
 5. Open a pull request
@@ -617,4 +681,4 @@ Distributed under the **MIT License**. See `LICENSE` file.
 
 ---
 
-## [🔼](#) Back to Top
+## [🔼](https://github.com/anonympins/data-primals-engine?tab=readme-ov-file#data-primals-engine) Back to Top

package/client/src/App.scss

@@ -1083,11 +1083,15 @@ h2.shadow {
 }
 
 .condition-details {
-  padding-left: 20px; // Indentation
+  padding-left: 4px;
+  margin-left:2px;
+  @media only screen and (min-width: 480px) {
+    padding-left: 20px; // Indentation
+    margin-left: 10px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
   border-left: 2px solid #eee; // Ligne visuelle
-  margin-left: 10px;
-  margin-top: 5px;
-  margin-bottom: 10px;
   gap: 5px; // Espacement entre les éléments de condition
 }
 
@@ -1290,9 +1294,10 @@ select[multiple]{
 }
 
 .datalayout {
-  padding: 0 16px;
+  @media only screen and (min-width: 480px) {
+    padding: 0 16px;
+  }
 }
-
 .main-menu {
   padding: 16px 0;
   @media only screen and (max-width: 479px) {

package/client/src/ConditionBuilder2.jsx

@@ -8,6 +8,30 @@ import {FaRepeat} from "react-icons/fa6";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
 
 
+// Déterminer si le champ doit être une date
+const isDateArg = (operator, argIndex) => {
+    if (!operator) return false;
+
+    const opConfig = MONGO_CALC_OPERATORS[operator];
+    if (!opConfig) {
+        console.warn(`Opérateur non trouvé: ${operator}`);
+        return false;
+    }
+
+    // Cas spécial pour les opérateurs de date
+    if (operator === '$dateAdd' || operator === '$dateSubtract') {
+        return argIndex === 0; // Seul le premier argument est une date
+    }
+
+    // Pour les autres opérateurs marqués isDate (comme $hour, $second, etc.)
+    if (opConfig.isDate) {
+        return true; // Tous les arguments sont des dates pour ces opérateurs
+    }
+
+    return false;
+};
+
+
 const OperatorSelector = ({ onSelect }) => {
     const [search, setSearch] = useState('');
 
@@ -117,10 +141,12 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
         setEditing(false);
     };
 
+    console.log(path);
+    console.log(isDateArg(path[path.length - 1]));
 
     const renderArgument = (arg, index, parentOperator, args) => {
         const isSimpleValue = typeof arg !== 'object' || arg === null || Array.isArray(arg);
-
+        const parentOpConfig = MONGO_CALC_OPERATORS[parentOperator];
         // Fonction pour mettre à jour cet argument spécifique
         const handleArgChange = (newArgValue) => {
             const updatedArgs = [...args];
@@ -148,8 +174,6 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
                 onChange({ [parentOperator]: updatedArgs }, path);
             }
         };
-        const parentOpConfig = MONGO_CALC_OPERATORS[parentOperator];
-
         return (
             <div key={`arg-${index}`} className="expression-arg">
                 <div className="arg-content">
@@ -163,10 +187,11 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
                                     updatedArgs[index] = newValue;
                                     onChange({ [parentOperator]: updatedArgs }, path);
                                 }}
+                                isDate={isDateArg(path[path.length - 1], 0)} // Utilis
                                 fieldNames={fieldNames}
                                 isInFindContext={isInFindContext}
                             />
-                            {!parentOpConfig?.disableAdvancedValue && (<button
+                            {!parentOpConfig?.disableAdvancedValue && !isDateArg(path[path.length -1]) && (<button
                                 type="button"
                                 className="switch-to-expr"
                                 onClick={() => handleArgChange({ $eq: [arg, ""] })}
@@ -281,6 +306,7 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
                                 onChange={handleFieldChange}
                                 fieldNames={fieldNames}
                                 isFieldName={true}
+                                isDate={isDateArg(path[path.length - 1])}
                                 currentModelFields={currentModelFields} // Passer les champs complets
                                 onlyRelations={true}
                             />
@@ -607,12 +633,13 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
                     }}
                     fieldNames={fieldNames}
                     isInFindContext={isInFindContext}
+                    isDate={isDateArg(path[path.length - 1])}
                     currentModelFields={currentModelFields} // On propage le contexte
                 />
 
                 {/* --- MODIFICATION --- */}
                 {/* On affiche le bouton de conversion uniquement si l'opérateur parent le permet */}
-                {parentOpConfig?.disableAdvancedValue !== true && (
+                {parentOpConfig?.disableAdvancedValue !== true && !isDateArg(path[path.length - 1]) && (
                     <button
                         type="button"
                         className="switch-to-expr"
@@ -637,11 +664,13 @@ const FieldInput = ({
                         isFieldName = false,
                         isInFindContext = false,
                         currentModelFields = [],
-                        onlyRelations = false
+                        onlyRelations = false,
+                        isDate = false
                     }) => {
     const [inputValue, setInputValue] = useState(value);
     const [suggestions, setSuggestions] = useState([]);
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const [showDatePicker, setShowDatePicker] = useState(false);
 
     useEffect(() => {
         setInputValue(value);
@@ -685,6 +714,18 @@ const FieldInput = ({
         setShowSuggestions(false);
     };
 
+    // Si c'est un champ date, on affiche le datepicker
+    if (isDate) {
+        return (
+            <div className="date-input-container">
+                <input
+                    type="datetime-local"
+                    value={inputValue ? new Date(inputValue).toISOString().slice(0, 16) : ''}
+                    onChange={(e) => handleDateChange(e.target.value)}
+                />
+            </div>
+        );
+    }
     return (
         <div className="field-input-container">
             <input

package/client/src/DataLayout.jsx

@@ -2,35 +2,19 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useReducer, useRef,
 
 import "./App.scss";
 import {useMutation, useQuery, useQueryClient} from "react-query";
-import {CheckboxField, FileField, NumberField, SelectField, TextField} from "./Field.jsx";
 import ModelCreator from "./ModelCreator.jsx";
 import {useModelContext} from "./contexts/ModelContext.jsx";
-import {FaMagnifyingGlass, FaPencil} from "react-icons/fa6";
 import {Dialog, DialogProvider} from "./Dialog.jsx";
 import {Pagination} from "./Pagination.jsx";
+import {Event} from "../../src/events.js";
+
 import {
-    elementsPerPage, kilobytes,
-    mainFieldsTypes,
-    maxBytesPerSecondThrottleData,
-    maxFileSize,
-    maxRequestData, metaModels
-} from "../../src/constants.js";
-import {
-    FaArrowDown,
-    FaArrowUp, FaBell,
-    FaBook, FaCopy,
-    FaEdit,
-    FaFileExport, FaFileImport,
     FaFilter, FaInfo,
-    FaLanguage,
-    FaLock,
-    FaPlus,
-    FaTrash
 } from "react-icons/fa";
 import {getDefaultForType, getUserId} from "../../src/data.js";
 import {Trans, useTranslation} from "react-i18next";
 
-import {debounce, escapeRegExp, event_trigger, getObjectHash, isGUID} from "../../src/core.js";
+import {getObjectHash} from "../../src/core.js";
 import Button from "./Button.jsx";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
 import APIInfo from "./APIInfo.jsx";
@@ -49,7 +33,6 @@ import CalendarConfigModal from "./CalendarConfigModal.jsx";
 import KanbanView from "./KanbanView.jsx";
 
 
-// --- AJOUT : Composants Placeholders pour la démonstration ---
 const CalendarView = ({ settings, model }) => (
     <div className="p-4 border rounded-md mt-4 bg-gray-50">
         <h3 className="font-bold">Vue Calendrier</h3>
@@ -349,7 +332,7 @@ function DataLayout() {
 
             console.log('Données enregistrées:', data, selectedModel);
 
-            event_trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', {
+            Event.Trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', "custom", "data", {
                 model: selectedModel.name,
             });
 

package/client/src/DataTable.jsx

@@ -6,6 +6,8 @@ import {useAuthContext} from "./contexts/AuthContext.jsx";
 import React, {useEffect, useMemo, useRef, useState} from "react";
 import {getUserId} from "../../src/data.js";
 import cronstrue from 'cronstrue/i18n';
+import {Event} from "../../src/events.js";
+
 import {
     FaBook,
     FaCopy,
@@ -238,7 +240,7 @@ export function DataTable({
                         console.log('Données non trouvées');
                     }
 
-                    event_trigger('API_DELETE_DATA', { model: item._model, id: item._id });
+                    Event.Trigger('API_DELETE_DATA', "custom", "data",{ model: item._model, id: item._id });
                     queryClient.invalidateQueries(['api/data', item._model, 'page', page, elementsPerPage, pagedFilters[item._model], pagedSort[item._model]]);
 
                 } else {

package/client/src/Field.jsx

@@ -493,7 +493,7 @@ const CheckboxField = forwardRef(
     };
     return (
         <>
-            <div className={cn({field: true, "field-checkbox": true})}>
+            <div className={cn({field: true, "field-checkbox": true,"field-bg": true})}>
                 <div className="inline"><input
                     aria-required={required}
                     aria-readonly={readOnly}

package/client/src/ModelCreator.jsx

@@ -526,7 +526,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                                 {/* Colonne de droite: Formulaire du modèle sélectionné */}
                                 <div className="model-form-container">
                                     {/* Le formulaire existant est placé ici */}
-                                    <div className="flex">
+                                    <div className="flex field-bg">
                                         <label htmlFor="modelName"><Trans i18nKey={"modelcreator.name"}>Nom:</Trans></label>
                                     </div>
                                     <TextField
@@ -539,7 +539,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                                         required
                                     />
 
-                                    <div className="flex">
+                                    <div className="flex field-bg">
                                         <label htmlFor="modelDescription"><Trans i18nKey={"modelcreator.description"}>Description:</Trans></label>
                                     </div>
                                     <TextField
@@ -570,7 +570,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                 {/* Affichage du formulaire en mode manuel ou édition */}
                 {(!useAI || initialModel) && (
                     <div className="model-form-container">
-                        <div className="flex">
+                        <div className="flex field-bg">
                             <label htmlFor="modelName"><Trans i18nKey={"modelcreator.name"}>Nom:</Trans></label>
                         </div>
                         <TextField
@@ -583,7 +583,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                             required
                         />
 
-                        <div className="flex">
+                        <div className="flex field-bg">
                             <label htmlFor="modelDescription"><Trans i18nKey={"modelcreator.description"}>Description:</Trans></label>
                         </div>
                         <TextField

package/client/src/ModelCreator.scss

@@ -2,6 +2,7 @@
   flex: 1;
   max-width: 720px;
   form {
+    padding: 0;
     @media only screen and (min-width: 480px){
       padding: 16px;
     }
@@ -151,4 +152,13 @@
       }
     }
   }
+}
+
+.field-bg {
+  background: #fcfcfc;
+  background: linear-gradient(180deg, rgba(252, 252, 252, 1) 0%, rgba(242, 242, 242, 1) 55%, rgba(242, 242, 242, 1) 100%);
+}
+
+.mg-item{
+  margin: 10px 0;
 }

package/client/src/ModelCreatorField.jsx

@@ -61,7 +61,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
             </div>
             <div className="flex flex-row flex-stretch">
 
-                <div className="flex fieldName">{hint('modelcreator.name.hint')}
+                <div className="flex fieldName field-bg">{hint('modelcreator.name.hint')}
                     <div className="flex flex-no-gap flex-no-wrap flex-1">
                         <TextField
                             label={t('modelcreator.fieldName')}
@@ -88,7 +88,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
 
                 <div className="flex">
                     {hint('modelcreator.type.hint')}
-                    <div className="flex flex-1 flex-stretch flex-no-gap">
+                    <div className="flex flex-1 flex-stretch field-bg flex-no-gap">
 
                         <SelectField
                             label={t('modelcreator.type', 'Type de champ')}
@@ -453,16 +453,15 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             </div>
 
                             {!['file', 'relation', 'array', 'calculated'].includes(field.type) && (<div
-                                className="flex flex-no-wrap">
-                                {hint('modelcreator.default.hint')}
+                                className="flex flex-no-wrap field-bg mg-item">
 
                                 {['string_t', 'string', 'richtext', 'password', 'url', 'phone', 'email'].includes(field.type) && (<>
-                                    <label className="flex flex-1">
-                                        <Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>
-                                        <input
-                                            type="text"
+                                    {hint('modelcreator.default.hint')}
+                                    <div className="flex flex-1">
+                                        <TextField
                                             className="flex-1"
                                             value={field.default}
+                                            label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
                                             disabled={modelLocked || (isLocalUser(me) && field.locked)}
                                             onChange={(e) => {
                                                 const newFields = [...fields];
@@ -470,9 +469,10 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                                 setFields(newFields);
                                             }}
                                         />
-                                    </label>
+                                    </div>
                                 </>)}
                                 {['number'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <NumberField
                                         label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
                                         type="number"
@@ -491,6 +491,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     />
                                 </>)}
                                 {['enum'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <SelectField
                                         label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
                                         value={field.default}
@@ -505,6 +506,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     />
                                 </>)}
                                 {['code'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <CodeField
                                         label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
                                         value={field.language === 'json' ? JSON.stringify(field.default, 2, null) : field.default}
@@ -516,6 +518,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     />
                                 </>)}
                                 {['boolean'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <div className="checkbox-label flex flex-1">
                                         <CheckboxField
                                             label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
@@ -530,6 +533,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     </div>
                                 </>)}
                                 {['color'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <ColorField
                                         label={<Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>}
                                         value={field.default || null} name={field.name}
@@ -543,6 +547,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     />
                                 </>)}
                                 {['date', 'datetime'].includes(field.type) && (<>
+                                    {hint('modelcreator.default.hint')}
                                     <label className="flex flex-1">
                                         <Trans i18nKey={"modelcreator.default"}>Valeur par défaut :</Trans>
                                         <input
@@ -562,7 +567,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
 
 
                             {(['number', 'datetime', 'date'].includes(field.itemsType || field.type)) && (
-                                <><label className="flex">
+                                <><label className="flex field-bg mg-item">
                                     {hint('modelcreator.min.hint')}
                                     <span><Trans
                                         i18nKey={"modelcreator.min"}>Valeur minimale :</Trans></span>
@@ -581,7 +586,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         }}
                                     /></div>
                                 </label>
-                                    <label className="flex">
+                                    <label className="flex field-bg mg-item">
                                         {hint('modelcreator.max.hint')}
                                         <span><Trans i18nKey={"modelcreator.max"}>Valeur maximale :</Trans></span>
                                         <div className="flex flex-1"><input
@@ -601,13 +606,12 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     </label>
                                 </>
                             )}
-                            <div className="flex flex-no-wrap">
+                            <div className="flex flex-no-wrap mg-item">
                                 {hint('modelcreator.condition.hint')}
 
-                                <label className="checkbox-label flex flex-1"><Trans
-                                    i18nKey={"modelcreator.condition"}>Condition</Trans> :
-                                    <input
-                                        type="checkbox"
+                                    <CheckboxField
+                                        label={<Trans
+                                            i18nKey={"modelcreator.condition"}>Condition</Trans>}
                                         disabled={modelLocked || (isLocalUser(me) && field.locked)}
                                         checked={field.condition !== undefined}
                                         onChange={(e) => {
@@ -620,7 +624,6 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                             setFields(newFields);
                                         }}
                                     />
-                                </label>
                             </div>
                             {field.condition !== undefined && (
                                 <div className={"condition-details flex flex-start"}>
@@ -691,10 +694,10 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
 
 
                             {mainFieldsTypes.includes(field.itemsType || field.type) && (<div
-                                className="flex flex-no-wrap"
+                                className="flex flex-no-wrap mg-item"
                                 title={t("modelcreator.field.asMain", "Une information principale sera affichée dans le titre de l'enregistrement")}>
                                 {hint('modelcreator.asMain.hint')}
-                                <label className="checkbox-label flex flex-1">
+                                <div className="flex flex-1">
 
                                     <CheckboxField
                                         label={<Trans i18nKey={"modelcreator.asMain"}>Information principale :</Trans>}
@@ -707,7 +710,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         }}
                                         help={field.asMain && t('modelcreator.asMain.hint')}
                                     />
-                                </label>
+                                </div>
                             </div>)}
 
                             <div className="flex flex-row flex-stretch">
@@ -729,7 +732,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             </div>
 
 
-                            <label className="flex">
+                            <label className="flex mg-item ">
                                 {hint('modelcreator.color.hint')}
                                 <Trans i18nKey={"field.color"}>Color :</Trans>
                                 <ColorField
@@ -763,19 +766,16 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
 
                             <div className={"flex flex-no-wrap"}>
                                 {hint('modelcreator.anonymized.hint')}
-                                <label className={"checkbox-label flex flex-1"}>
-                                    <Trans i18nKey={"modelcreator.anonymized"}>Donnée anonymisée :</Trans>
-                                    <input
-                                        type="checkbox"
-                                        disabled={modelLocked || (isLocalUser(me) && field.locked)}
-                                        checked={field.anonymized}
-                                        onChange={(e) => {
-                                            const newFields = [...fields];
-                                            newFields[index].anonymized = e.target.checked;
-                                            setFields(newFields);
-                                        }}
-                                    />
-                                </label>
+                                <CheckboxField
+                                    label={<Trans i18nKey={"modelcreator.anonymized"}>Donnée anonymisée :</Trans>}
+                                    disabled={modelLocked || (isLocalUser(me) && field.locked)}
+                                    checked={field.anonymized}
+                                    onChange={(e) => {
+                                        const newFields = [...fields];
+                                        newFields[index].anonymized = e.target.checked;
+                                        setFields(newFields);
+                                    }}
+                                />
                             </div>
 
 

package/client/src/RTE.jsx

@@ -28,6 +28,7 @@ import css from 'highlight.js/lib/languages/css'
 import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
+import {escapeHtml, escapeRegex} from "data-primals-engine/core";
 // create a lowlight instance
 const lowlight = createLowlight(all)
 
@@ -43,7 +44,7 @@ const code = (c) => {
     const doc = document.createElement('div');
     doc.innerHTML = c;
     doc.querySelectorAll('code').forEach(cc =>{
-        cc.innerHTML = cc.textContent
+        cc.innerHTML = escapeHtml(cc.textContent)
             .replace(/\r\n|\n/g, "<br />")
             .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
     })