intlayer-editor 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +70 -62
  2. package/package.json +13 -13
package/README.md CHANGED
@@ -1,69 +1,51 @@
1
1
  <div align="center">
2
- <a href="https://www.npmjs.com/package/intlayer">
2
+ <a href="https://www.npmjs.com/package/express-intlayer">
3
3
  <img src="https://raw.githubusercontent.com/aymericzip/intlayer/572ae9c9acafb74307b81530c1931a8e98990aef/docs/assets/logo.png" width="500" alt="intlayer" />
4
4
  </a>
5
5
  </div>
6
6
 
7
7
  <div align="center">
8
- <a href="https://www.npmjs.com/package/intlayer">
8
+ <a href="https://www.npmjs.com/package/express-intlayer">
9
9
  <img alt="npm" src="https://img.shields.io/npm/v/intlayer.svg?labelColor=49516F&color=8994BC" />
10
10
  </a>
11
- <a href="https://npmjs.org/package/intlayer">
12
- <img alt="downloads" src="https://badgen.net/npm/dm/intlayer?labelColor=49516F&color=8994BC" />
11
+ <a href="https://npmjs.org/package/express-intlayer">
12
+ <img alt="downloads" src="https://badgen.net/npm/dm/express-intlayer?labelColor=49516F&color=8994BC" />
13
13
  </a>
14
- <a href="https://npmjs.org/package/intlayer">
15
- <img alt="types included" src="https://badgen.net/npm/types/intlayer?labelColor=49516F&color=8994BC"
14
+ <a href="https://npmjs.org/package/express-intlayer">
15
+ <img alt="types included" src="https://badgen.net/npm/types/express-intlayer?labelColor=49516F&color=8994BC"
16
16
  />
17
17
  </a>
18
18
  </div>
19
19
 
20
- # Intlayer Editor Documentation
20
+ # intlayer-editor: NPM Package to use the Intlayer visual editor
21
21
 
22
- The Intlayer Editor is a tool that transforms your application into a visual editor. With Intlayer Editor, your teams can manage your site's content in all configured languages.
22
+ **Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
23
23
 
24
- ![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
25
-
26
- The `intlayer-editor` package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
27
-
28
- For more details on how to install the package, see the relevant section below:
29
-
30
- ### Integrating with Next.js
31
-
32
- For integration with Next.js, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_15.md).
33
-
34
- ### Integrating with Create React App
35
-
36
- For integration with Create React App, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md)
37
-
38
- ### Integrating with Vite + React
39
-
40
- For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md)
24
+ The **`intlayer-editor`** package is a NPM package that integrates the Intlayer visual editor into your React project.
41
25
 
42
26
  ## How Intlayer Editor Works
43
27
 
44
- Each time you make a change using Intlayer Editor, the server automatically inserts your changes into your [Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/docs/en/content_declaration/get_started.md) wherever these files are declared in your project.
28
+ The intlayer editor allows to interact with the Intlayer distant dictionary. It can be installed on the client side and transform your application into a CMS-like editor to manage your site's content in all configured languages.
45
29
 
46
- In this way, you don't have to worry about where the file is declared or about finding your key in your dictionary collection.
30
+ ![Intlayer Editor Interface](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
47
31
 
48
32
  ## Installation
49
33
 
50
- Once Intlayer is configured in your project, simply install `intlayer-editor` as a development dependency:
34
+ Install the necessary package using your preferred package manager:
51
35
 
52
- ```bash
36
+ ```bash packageManager="npm"
53
37
  npm install intlayer-editor
54
38
  ```
55
39
 
56
- ```bash
57
- yarn add intlayer-editor
58
- ```
59
-
60
- ```bash
40
+ ```bash packageManager="pnpm"
61
41
  pnpm add intlayer-editor
62
42
  ```
63
43
 
64
- ## Configuration
44
+ ```bash packageManager="yarn"
45
+ yarn add intlayer-editor
46
+ ```
65
47
 
66
- ### 1. Enable the Editor in your intlayer.config.ts file
48
+ ### Configuration
67
49
 
68
50
  In your Intlayer configuration file, you can customize the editor settings:
69
51
 
@@ -85,43 +67,61 @@ const config: IntlayerConfig = {
85
67
 
86
68
  > To see all available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md)
87
69
 
88
- ### 2. Insert the Intlayer Editor Provider in your application
70
+ The `intlayer-editor` package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
89
71
 
90
- To enable the editor, you need to insert the Intlayer Editor Provider in your application.
72
+ For more details on how to install the package, see the relevant section below:
91
73
 
92
- Example for React JS or Vite + React applications:
74
+ ### Integrating with Next.js
93
75
 
94
- ```tsx
95
- import { IntlayerProvider } from "react-intlayer";
96
- import { IntlayerEditorProvider } from "intlayer-editor";
76
+ For integration with Next.js, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_15.md).
97
77
 
98
- function App() {
99
- return (
100
- <IntlayerProvider>
101
- <IntlayerEditorProvider>{/* Your application */}</IntlayerEditorProvider>
102
- </IntlayerProvider>
103
- );
104
- }
105
- ```
78
+ ### Integrating with Create React App
79
+
80
+ For integration with Create React App, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md)
81
+
82
+ ### Integrating with Vite + React
83
+
84
+ For integration with Vite + React, refer to the [setup guide](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md)
106
85
 
107
- Example for Next.js applications:
86
+ ### Example of integration
108
87
 
109
- ```tsx
110
- import { IntlayerClientProvider } from "next-intlayer";
111
- import { IntlayerEditorProvider } from "intlayer-editor";
88
+ To integrate the Intlayer visual editor into your React project, follow these steps:
112
89
 
113
- function Page() {
114
- return (
115
- <IntlayerServerProvider locale={locale}>
90
+ - Import the Intlayer editor component into your React application:
91
+
92
+ ```tsx fileName="src/App.jsx"
93
+ import { IntlayerEditorProvider } from "intlayer-editor";
94
+ import { IntlayerProvider } from "react-intlayer";
95
+
96
+ export default function App() {
97
+ return (
98
+ <IntlayerProvider>
99
+ <IntlayerEditorProvider>
100
+ <IntlayerEditor>{/* Your App content here */}</IntlayerEditor>
101
+ </IntlayerEditorProvider>
102
+ </IntlayerProvider>
103
+ );
104
+ }
105
+ ```
106
+
107
+ - Import the Intlayer editor styles into your Next.js application:
108
+
109
+ ```tsx fileName="src/app/[locale]/layout.jsx"
110
+ import { IntlayerEditorStyles } from "intlayer-editor";
111
+
112
+ export default async function RootLayout({ children, params }) {
113
+ const { locale } = await params;
114
+ return (
116
115
  <IntlayerClientProvider locale={locale}>
117
116
  <IntlayerEditorProvider>
118
- {/* Your application */}
117
+ <html lang={locale}>
118
+ <body className={IntlayerEditorStyles}>{children}</body>
119
+ </html>
119
120
  </IntlayerEditorProvider>
120
121
  </IntlayerClientProvider>
121
- </IntlayerServerProvider>
122
- );
123
- }
124
- ```
122
+ );
123
+ }
124
+ ```
125
125
 
126
126
  ## Using the Editor
127
127
 
@@ -130,3 +130,11 @@ When the editor is installed, enabled, and started, you can view each field inde
130
130
  ![Hovering over content](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_hover_content.png)
131
131
 
132
132
  If your content is outlined, you can long-press it to display the edit drawer.
133
+
134
+ ## Read about Intlayer
135
+
136
+ - [Intlayer Website](https://intlayer.org)
137
+ - [Intlayer Documentation](https://intlayer.org/docs)
138
+ - [Intlayer GitHub](https://github.com/aymericzip/intlayer)
139
+
140
+ - [Ask your questions to our smart documentation](https://intlayer.org/docs/chat)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intlayer-editor",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "private": false,
5
5
  "description": "IntLayer Editor is a tool that allow you to edit your IntLayer declaration files using a graphical interface.",
6
6
  "keywords": [
@@ -69,10 +69,10 @@
69
69
  "react": "^18.3.1",
70
70
  "react-dom": "^18.3.1",
71
71
  "zustand": "^5.0.1",
72
- "@intlayer/core": "4.0.0",
73
- "@intlayer/design-system": "4.0.0",
74
- "intlayer": "4.0.0",
75
- "@intlayer/config": "4.0.0"
72
+ "@intlayer/config": "4.0.2",
73
+ "@intlayer/core": "4.0.2",
74
+ "@intlayer/design-system": "4.0.2",
75
+ "intlayer": "4.0.2"
76
76
  },
77
77
  "devDependencies": {
78
78
  "@changesets/changelog-github": "0.5.0",
@@ -88,20 +88,20 @@
88
88
  "tsc-alias": "^1.8.10",
89
89
  "tsup": "^8.3.5",
90
90
  "typescript": "^5.7.3",
91
- "@utils/eslint-config": "1.0.4",
92
91
  "@utils/ts-config": "1.0.4",
93
- "@utils/tsup-config": "1.0.4",
94
- "@utils/ts-config-types": "1.0.4"
92
+ "@utils/ts-config-types": "1.0.4",
93
+ "@utils/eslint-config": "1.0.4",
94
+ "@utils/tsup-config": "1.0.4"
95
95
  },
96
96
  "peerDependencies": {
97
97
  "react": ">=16.0.0",
98
98
  "react-dom": ">=16.0.0",
99
99
  "zustand": ">=4.0.0",
100
- "@intlayer/config": "4.0.0",
101
- "@intlayer/core": "4.0.0",
102
- "intlayer": "4.0.0",
103
- "react-intlayer": "^4.0.0",
104
- "@intlayer/design-system": "4.0.0"
100
+ "@intlayer/config": "4.0.2",
101
+ "@intlayer/design-system": "4.0.2",
102
+ "@intlayer/core": "4.0.2",
103
+ "react-intlayer": "^4.0.2",
104
+ "intlayer": "4.0.2"
105
105
  },
106
106
  "engines": {
107
107
  "node": ">=14.18"