@intlayer/docs 8.9.0 → 8.9.2

package/docs/zh/intlayer_with_vite+preact.md

@@ -348,10 +348,10 @@ export default App;
 
 > 如果您想在字符串属性中使用您的内容，例如 `alt`、`title`、`href`、`aria-label` 等，您必须调用该函数的值，例如：
 
-> ```jsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> <img src={content.image.src.toString()} alt={content.image.toString()} />
-> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
 > 注意：在 Preact 中，`className` 通常写作 `class`。

package/docs/zh/intlayer_with_vite+react.md

@@ -342,10 +342,10 @@ export default App;
 
 > 如果您想在字符串属性中使用内容，例如 `alt`、`title`、`href`、`aria-label` 等，必须调用函数的值，如下所示：
 
-> ```jsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> <img src={content.image.src.toString()} alt={content.image.toString()} />
-> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
 > 要了解有关 `useIntlayer` 钩子的更多信息，请参阅[文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/packages/react-intlayer/useIntlayer.md)。

package/docs/zh/intlayer_with_vite+solid.md

@@ -234,10 +234,10 @@ export default App;
 
 > 如果您想在 `string` 属性（如 `alt`、`title`、`href`、`aria-label` 等）中使用您的内容，可以使用函数的值，例如：
 >
-> ```jsx
-> <img src={content.image.src.value} alt={content.image.value} />
-> <img src={content.image.src.toString()} alt={content.image.toString()} />
-> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
 ### （可选）第6步：更改内容语言

package/frequent_questions/ar/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: نوع IntlayerNode. ما هو؟
+description: ما هو نوع IntlayerNode؟ لماذا يتم تحويل سلسلتي النصية إلى IntlayerNode<string>؟
+keywords:
+  - مقدمة
+  - ابدأ الآن
+  - Intlayer
+  - تطبيق
+  - حزم
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "بدء التوثيق"
+---
+
+# ما هو نوع IntlayerNode؟
+
+نوع `IntlayerNode<T>` هو نوع خاص توفره حزم intlayer مثل `next-intlayer` و `react-intlayer` و `vue-intlayer` و `preact-intlayer` و `solid-intlayer` و `angular-intlayer` و `svelte-intlayer` و `lit-intlayer` و `vanilla-intlayer`.
+
+## مثال على الاستخدام
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // يرجع النوع: IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo إضافة أطر عمل أخرى كعلامات تبويب كما في docs/docs/ar/dictionary/markdown.md
+</Tabs>
+
+### لماذا يقوم Intlayer بإدراج IntlayerNode؟
+
+يقوم Intlayer بإدراج IntlayerNode ليتمكن من عرض محددات المحرر المرئي في سياق نظام إدارة المحتوى (CMS) / المحرر المرئي.
+
+![عرض تجريبي للمحرر المرئي](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+إن IntlayerNode عبارة عن عقدة React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla غنية، ولكنها تتيح أيضاً الوصول إلى خصائص العقدة البدائية الأساسية.
+
+على سبيل المثال:
+
+```js
+const content = useIntlayer("app");
+
+// حالة السلسلة النصية (String)
+content.title; // يرجع IntlayerNode<string>
+content.title.value; // يرجع المحتوى الأساسي، هنا سلسلة نصية
+
+content.title.toString(); // يرجع سلسلة نصية
+content.title.toLowerCase(); // يرجع سلسلة نصية
+String(content.title); // يرجع سلسلة نصية
+content.title.toUpperCase(); // يرجع سلسلة نصية بأحرف كبيرة
+content.title.replace("a", "b"); // يرجع سلسلة نصية معدلة
+// ...
+```
+
+> الوصول إلى خصائص IntlayerNode سيعمل، ولكنه سيعطل القدرة على عرض المحددات في المحرر المرئي.
+
+> يمكن لـ IntlayerNode أيضاً تغليف الأرقام، أو أنواع أخرى مثل `IntlayerNode<number>`

package/frequent_questions/de/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: IntlayerNode Typ. Was ist das?
+description: Was ist der IntlayerNode-Typ? Warum wird mein String in einen IntlayerNode<string> umgewandelt?
+keywords:
+  - Einführung
+  - Erste Schritte
+  - Intlayer
+  - Anwendung
+  - Pakete
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "Initialisierung der Dokumentation"
+---
+
+# Was ist der IntlayerNode-Typ?
+
+Der Typ `IntlayerNode<T>` ist ein spezieller Typ, der von intlayers Paketen wie `next-intlayer`, `react-intlayer`, `vue-intlayer`, `preact-intlayer`, `solid-intlayer`, `angular-intlayer`, `svelte-intlayer`, `lit-intlayer` und `vanilla-intlayer` bereitgestellt wird.
+
+## Anwendungsbeispiel
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // gibt Typ zurück: IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo weitere Frameworks als Tabs hinzufügen, wie in docs/docs/de/dictionary/markdown.md
+</Tabs>
+
+### Warum fügt Intlayer einen IntlayerNode ein?
+
+Intlayer fügt einen IntlayerNode ein, um die Selektoren des visuellen Editors im Kontext des CMS / visuellen Editors rendern zu können.
+
+![Visueller Editor Demo](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+Ein IntlayerNode ist ein angereicherter React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla-Node, der aber auch den Zugriff auf die Eigenschaften des Basis-Primitiv-Nodes ermöglicht.
+
+Zum Beispiel:
+
+```js
+const content = useIntlayer("app");
+
+// Fall von String
+content.title; // Gibt IntlayerNode<string> zurück
+content.title.value; // Gibt den Basisinhalt zurück, hier ein String
+
+content.title.toString(); // Gibt String zurück
+content.title.toLowerCase(); // Gibt String zurück
+String(content.title); // Gibt String zurück
+content.title.toUpperCase(); // Gibt String in Großbuchstaben zurück
+content.title.replace("a", "b"); // Gibt geänderten String zurück
+// ...
+```
+
+> Der Zugriff auf die Eigenschaften eines IntlayerNode funktioniert zwar, macht aber die Anzeige der Selektoren im visuellen Editor unmöglich.
+
+> Der IntlayerNode kann auch Zahlen oder andere Typen wie `IntlayerNode<number>` umschließen.

package/frequent_questions/en/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: IntlayerNode type. What is it?
+description: What is it the IntlayerNode type? Why my string is transformed as an IntlayerNode<string>?
+keywords:
+  - Introduction
+  - Get started
+  - Intlayer
+  - Application
+  - Packages
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "Init doc"
+---
+
+# What is the IntlayerNode type?
+
+The `IntlayerNode<T>` type is a special type provided by intlayer's packages such as `next-intlayer`, `react-intlayer`, `vue-intlayer`, `preact-intlayer`, `solid-intlayer`, `angular-intlayer`, `svelte-intlayer`, `lit-intlayer` and `vanilla-intlayer`.
+
+## Example of usage
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // returns type: IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo add other framworks as tabs as for docs/docs/en/dictionary/markdown.md
+</Tabs>
+
+### Why Intlayer insert an IntlayerNode?
+
+Intlayer insert an IntlayerNode to be able to render the visual editor Selectors in the context of the CMS / Visual Editor.
+
+![Visual Editor demo](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+An IntlayerNode is an enriched React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla Node, but also to access the properties of the base primitive node.
+
+For instance:
+
+```js
+const content = useIntlayer("app");
+
+// Case of String
+content.title; // Returns IntlayerNode<string>
+content.title.value; // Returns the base content, here a string
+
+content.title.toString(); // Returns string
+content.title.toLowerCase(); // Returns string
+String(content.title); // Returns string
+content.title.toUpperCase(); // Returns uppercased string
+content.title.replace("a", "b"); // Returns modified string
+// ...
+```
+
+> Accessing the properties of an IntlayerNode will work, but will break the ability to display the selectors in the Visual Editor.
+
+> The IntlayerNode can also wrap and number, or other types such as `IntlayerNode<number>`

package/frequent_questions/en-GB/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: IntlayerNode type. What is it?
+description: What is it the IntlayerNode type? Why my string is transformed as an IntlayerNode<string>?
+keywords:
+  - Introduction
+  - Get started
+  - Intlayer
+  - Application
+  - Packages
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "Init doc"
+---
+
+# What is the IntlayerNode type?
+
+The `IntlayerNode<T>` type is a special type provided by intlayer's packages such as `next-intlayer`, `react-intlayer`, `vue-intlayer`, `preact-intlayer`, `solid-intlayer`, `angular-intlayer`, `svelte-intlayer`, `lit-intlayer` and `vanilla-intlayer`.
+
+## Example of usage
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // returns type: IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo add other frameworks as tabs as for docs/docs/en-GB/dictionary/markdown.md
+</Tabs>
+
+### Why Intlayer insert an IntlayerNode?
+
+Intlayer insert an IntlayerNode to be able to render the visual editor Selectors in the context of the CMS / Visual Editor.
+
+![Visual Editor demo](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+An IntlayerNode is an enriched React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla Node, but also to access the properties of the base primitive node.
+
+For instance:
+
+```js
+const content = useIntlayer("app");
+
+// Case of String
+content.title; // Returns IntlayerNode<string>
+content.title.value; // Returns the base content, here a string
+
+content.title.toString(); // Returns string
+content.title.toLowerCase(); // Returns string
+String(content.title); // Returns string
+content.title.toUpperCase(); // Returns uppercased string
+content.title.replace("a", "b"); // Returns modified string
+// ...
+```
+
+> Accessing the properties of an IntlayerNode will work, but will break the ability to display the selectors in the Visual Editor.
+
+> The IntlayerNode can also wrap and number, or other types such as `IntlayerNode<number>`

package/frequent_questions/es/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: Tipo IntlayerNode. ¿Qué es?
+description: ¿Qué es el tipo IntlayerNode? ¿Por qué mi cadena se transforma en un IntlayerNode<string>?
+keywords:
+  - Introducción
+  - Empezar
+  - Intlayer
+  - Aplicación
+  - Paquetes
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "Doc de inicio"
+---
+
+# ¿Qué es el tipo IntlayerNode?
+
+El tipo `IntlayerNode<T>` es un tipo especial proporcionado por los paquetes de intlayer como `next-intlayer`, `react-intlayer`, `vue-intlayer`, `preact-intlayer`, `solid-intlayer`, `angular-intlayer`, `svelte-intlayer`, `lit-intlayer` y `vanilla-intlayer`.
+
+## Ejemplo de uso
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // devuelve tipo: IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo agregar otros frameworks como pestañas como en docs/docs/es/dictionary/markdown.md
+</Tabs>
+
+### ¿Por qué Intlayer inserta un IntlayerNode?
+
+Intlayer inserta un IntlayerNode para poder renderizar los Selectores del editor visual en el contexto del CMS / Editor Visual.
+
+![Demostración del Editor Visual](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+Un IntlayerNode es un nodo enriquecido de React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla, pero también permite acceder a las propiedades del nodo primitivo base.
+
+Por ejemplo:
+
+```js
+const content = useIntlayer("app");
+
+// Caso de cadena (String)
+content.title; // Devuelve IntlayerNode<string>
+content.title.value; // Devuelve el contenido base, aquí una cadena
+
+content.title.toString(); // Devuelve cadena
+content.title.toLowerCase(); // Devuelve cadena
+String(content.title); // Devuelve cadena
+content.title.toUpperCase(); // Devuelve cadena en mayúsculas
+content.title.replace("a", "b"); // Devuelve cadena modificada
+// ...
+```
+
+> Acceder a las propiedades de un IntlayerNode funcionará, pero romperá la capacidad de mostrar los selectores en el Editor Visual.
+
+> El IntlayerNode también puede envolver un número u otros tipos como `IntlayerNode<number>`

package/frequent_questions/fr/intlayerNode.md

@@ -0,0 +1,96 @@
+---
+createdAt: 2026-05-07
+updatedAt: 2026-05-07
+title: Type IntlayerNode. Qu'est-ce que c'est ?
+description: Qu'est-ce que le type IntlayerNode ? Pourquoi ma chaîne est-elle transformée en IntlayerNode<string> ?
+keywords:
+  - Introduction
+  - Commencer
+  - Intlayer
+  - Application
+  - Packages
+slugs:
+  - frequent-questions
+  - intlayer-node
+history:
+  - version: 8.9.0
+    date: 2026-05-07
+    changes: "Initialisation de la documentation"
+---
+
+# Qu'est-ce que le type IntlayerNode ?
+
+Le type `IntlayerNode<T>` est un type spécial fourni par les packages d'intlayer tels que `next-intlayer`, `react-intlayer`, `vue-intlayer`, `preact-intlayer`, `solid-intlayer`, `angular-intlayer`, `svelte-intlayer`, `lit-intlayer` et `vanilla-intlayer`.
+
+## Exemple d'utilisation
+
+```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+import type { ComponentChildren } from "preact";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Preact",
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Preact"
+  }
+}
+```
+
+<Tabs group="framework">
+  <Tab label="React / Next.js" value="react">
+
+```tsx fileName="src/App.tsx"
+import { useIntlayer } from "react-intlayer";
+
+const AppContent = () => {
+  const { title } = useIntlayer("app");
+
+  return title; // retourne le type : IntlayerNode<string>
+};
+```
+
+  </Tab>
+
+// Todo ajouter d'autres frameworks comme onglets comme pour docs/docs/fr/dictionary/markdown.md
+</Tabs>
+
+### Pourquoi Intlayer insère-t-il un IntlayerNode ?
+
+Intlayer insère un IntlayerNode pour pouvoir afficher les sélecteurs de l'éditeur visuel dans le contexte du CMS / Éditeur Visuel.
+
+![Démo de l'éditeur visuel](https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/visual_editor.gif?raw=true)
+
+Un IntlayerNode est un nœud React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla enrichi, mais il permet aussi d'accéder aux propriétés du nœud primitif de base.
+
+Par exemple :
+
+```js
+const content = useIntlayer("app");
+
+// Cas d'une chaîne (String)
+content.title; // Retourne IntlayerNode<string>
+content.title.value; // Retourne le contenu de base, ici une chaîne
+
+content.title.toString(); // Retourne une chaîne
+content.title.toLowerCase(); // Retourne une chaîne
+String(content.title); // Retourne une chaîne
+content.title.toUpperCase(); // Retourne une chaîne en majuscules
+content.title.replace("a", "b"); // Retourne une chaîne modifiée
+// ...
+```
+
+> Accéder aux propriétés d'un IntlayerNode fonctionnera, mais cassera la possibilité d'afficher les sélecteurs dans l'Éditeur Visuel.
+
+> L'IntlayerNode peut également envelopper un nombre, ou d'autres types tels que `IntlayerNode<number>`