@rakun-kit/manager-react 1.5.6 → 1.5.8
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.
- package/README.md +272 -269
- package/dist/cjs/components/editor/plugins/toolbar/image-toolbar-plugin.js +2 -1
- package/dist/cjs/components/editor/plugins/toolbar/image-toolbar-plugin.js.map +1 -1
- package/dist/cjs/components/editor/themes/editor-theme.css +91 -91
- package/dist/cjs/components/media/MediaLibrary.js +7 -4
- package/dist/cjs/components/media/MediaLibrary.js.map +1 -1
- package/dist/cjs/components/media/contexts/MediaLibraryContext.js.map +1 -1
- package/dist/cjs/components/media/folders/FoldersTree.js +1 -1
- package/dist/cjs/components/media/folders/FoldersTree.js.map +1 -1
- package/dist/cjs/components/media/previews/MediaContextMenuContent.js +17 -4
- package/dist/cjs/components/media/previews/MediaContextMenuContent.js.map +1 -1
- package/dist/cjs/components/media/previews/Previews.js +108 -34
- package/dist/cjs/components/media/previews/Previews.js.map +1 -1
- package/dist/cjs/components/media/previews/context/MediaPreviewContext.js.map +1 -1
- package/dist/cjs/components/media/previews/dialogs/ExpandedPreviewDialog.js +17 -1
- package/dist/cjs/components/media/previews/dialogs/ExpandedPreviewDialog.js.map +1 -1
- package/dist/cjs/components/media/previews/hooks/useMediaPreviewRenderer.js +56 -12
- package/dist/cjs/components/media/previews/hooks/useMediaPreviewRenderer.js.map +1 -1
- package/dist/cjs/components/media/previews/toolbar/PreviewsToolbar.js +14 -12
- package/dist/cjs/components/media/previews/toolbar/PreviewsToolbar.js.map +1 -1
- package/dist/cjs/components/media/previews/views/PreviewsGridLargeView.js +2 -1
- package/dist/cjs/components/media/previews/views/PreviewsGridLargeView.js.map +1 -1
- package/dist/cjs/components/media/previews/views/PreviewsGridSmallView.js +2 -1
- package/dist/cjs/components/media/previews/views/PreviewsGridSmallView.js.map +1 -1
- package/dist/cjs/components/media/previews/views/PreviewsListView.js +1 -1
- package/dist/cjs/components/media/previews/views/PreviewsListView.js.map +1 -1
- package/dist/cjs/components/ui/sortable.js +4 -4
- package/dist/cjs/help/manager-help.js +13 -6
- package/dist/cjs/help/manager-help.js.map +1 -1
- package/dist/cjs/i18n/catalog.js +17 -1
- package/dist/cjs/i18n/catalog.js.map +1 -1
- package/dist/cjs/layouts.js +1 -3
- package/dist/cjs/layouts.js.map +1 -1
- package/dist/cjs/lib/media.js +1 -0
- package/dist/cjs/lib/media.js.map +1 -1
- package/dist/cjs/media.js +1 -0
- package/dist/cjs/media.js.map +1 -1
- package/dist/cjs/router/dashboard/[contentType]/[edit]/_fields/FileField/index.js +68 -23
- package/dist/cjs/router/dashboard/[contentType]/[edit]/_fields/FileField/index.js.map +1 -1
- package/dist/cjs/router/dashboard/media/screen.js +1 -1
- package/dist/cjs/router/dashboard/media/screen.js.map +1 -1
- package/dist/cjs/state/theme-script.js +12 -12
- package/dist/docs/index.md +147 -140
- package/dist/esm/components/editor/plugins/toolbar/image-toolbar-plugin.d.ts.map +1 -1
- package/dist/esm/components/editor/plugins/toolbar/image-toolbar-plugin.js +2 -1
- package/dist/esm/components/editor/plugins/toolbar/image-toolbar-plugin.js.map +1 -1
- package/dist/esm/components/editor/themes/editor-theme.css +91 -91
- package/dist/esm/components/media/MediaLibrary.d.ts.map +1 -1
- package/dist/esm/components/media/MediaLibrary.js +7 -4
- package/dist/esm/components/media/MediaLibrary.js.map +1 -1
- package/dist/esm/components/media/contexts/MediaLibraryContext.d.ts +1 -0
- package/dist/esm/components/media/contexts/MediaLibraryContext.d.ts.map +1 -1
- package/dist/esm/components/media/contexts/MediaLibraryContext.js.map +1 -1
- package/dist/esm/components/media/folders/FoldersTree.js +1 -1
- package/dist/esm/components/media/folders/FoldersTree.js.map +1 -1
- package/dist/esm/components/media/previews/MediaContextMenuContent.d.ts.map +1 -1
- package/dist/esm/components/media/previews/MediaContextMenuContent.js +17 -4
- package/dist/esm/components/media/previews/MediaContextMenuContent.js.map +1 -1
- package/dist/esm/components/media/previews/Previews.d.ts.map +1 -1
- package/dist/esm/components/media/previews/Previews.js +108 -34
- package/dist/esm/components/media/previews/Previews.js.map +1 -1
- package/dist/esm/components/media/previews/context/MediaPreviewContext.d.ts +3 -0
- package/dist/esm/components/media/previews/context/MediaPreviewContext.d.ts.map +1 -1
- package/dist/esm/components/media/previews/context/MediaPreviewContext.js.map +1 -1
- package/dist/esm/components/media/previews/dialogs/ExpandedPreviewDialog.d.ts.map +1 -1
- package/dist/esm/components/media/previews/dialogs/ExpandedPreviewDialog.js +17 -1
- package/dist/esm/components/media/previews/dialogs/ExpandedPreviewDialog.js.map +1 -1
- package/dist/esm/components/media/previews/hooks/useMediaPreviewRenderer.d.ts +13 -2
- package/dist/esm/components/media/previews/hooks/useMediaPreviewRenderer.d.ts.map +1 -1
- package/dist/esm/components/media/previews/hooks/useMediaPreviewRenderer.js +54 -12
- package/dist/esm/components/media/previews/hooks/useMediaPreviewRenderer.js.map +1 -1
- package/dist/esm/components/media/previews/toolbar/PreviewsToolbar.d.ts.map +1 -1
- package/dist/esm/components/media/previews/toolbar/PreviewsToolbar.js +15 -13
- package/dist/esm/components/media/previews/toolbar/PreviewsToolbar.js.map +1 -1
- package/dist/esm/components/media/previews/views/PreviewsGridLargeView.d.ts.map +1 -1
- package/dist/esm/components/media/previews/views/PreviewsGridLargeView.js +2 -1
- package/dist/esm/components/media/previews/views/PreviewsGridLargeView.js.map +1 -1
- package/dist/esm/components/media/previews/views/PreviewsGridSmallView.d.ts.map +1 -1
- package/dist/esm/components/media/previews/views/PreviewsGridSmallView.js +2 -1
- package/dist/esm/components/media/previews/views/PreviewsGridSmallView.js.map +1 -1
- package/dist/esm/components/media/previews/views/PreviewsListView.js +1 -1
- package/dist/esm/components/media/previews/views/PreviewsListView.js.map +1 -1
- package/dist/esm/components/ui/sortable.js +4 -4
- package/dist/esm/help/manager-help.d.ts.map +1 -1
- package/dist/esm/help/manager-help.js +13 -6
- package/dist/esm/help/manager-help.js.map +1 -1
- package/dist/esm/i18n/catalog.d.ts +25 -1
- package/dist/esm/i18n/catalog.d.ts.map +1 -1
- package/dist/esm/i18n/catalog.js +17 -1
- package/dist/esm/i18n/catalog.js.map +1 -1
- package/dist/esm/i18n/useTranslations.d.ts.map +1 -1
- package/dist/esm/layouts.d.ts.map +1 -1
- package/dist/esm/layouts.js +1 -3
- package/dist/esm/layouts.js.map +1 -1
- package/dist/esm/lib/media.d.ts +1 -0
- package/dist/esm/lib/media.d.ts.map +1 -1
- package/dist/esm/lib/media.js +1 -0
- package/dist/esm/lib/media.js.map +1 -1
- package/dist/esm/media.d.ts +1 -0
- package/dist/esm/media.d.ts.map +1 -1
- package/dist/esm/media.js +1 -0
- package/dist/esm/media.js.map +1 -1
- package/dist/esm/router/dashboard/[contentType]/[edit]/_fields/FileField/index.d.ts.map +1 -1
- package/dist/esm/router/dashboard/[contentType]/[edit]/_fields/FileField/index.js +68 -23
- package/dist/esm/router/dashboard/[contentType]/[edit]/_fields/FileField/index.js.map +1 -1
- package/dist/esm/router/dashboard/[contentType]/[edit]/_hooks/useRouteLayoutData.d.ts.map +1 -1
- package/dist/esm/router/dashboard/media/screen.js +1 -1
- package/dist/esm/router/dashboard/media/screen.js.map +1 -1
- package/dist/esm/state/theme-script.js +12 -12
- package/dist/styles.css +101 -9
- package/dist/styles.css.d.ts +3 -3
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +217 -216
package/README.md
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
# @rakun-kit/manager-react
|
|
2
|
-
|
|
3
|
-
React manager UI and client utilities for Rakun.
|
|
4
|
-
|
|
5
|
-
Most apps use this package through framework adapters such as
|
|
6
|
-
`@rakun-kit/next/manager`, but the runtime components and clients are also
|
|
7
|
-
published for custom integrations.
|
|
8
|
-
|
|
9
|
-
## Browser App
|
|
10
|
-
|
|
11
|
-
Render the manager with a manager client and navigation implementation:
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
import {
|
|
15
|
-
ManagerBrowserApp,
|
|
16
|
-
createHttpManagerClient,
|
|
17
|
-
} from "@rakun-kit/manager-react";
|
|
18
|
-
import "@rakun-kit/manager-react/styles.css";
|
|
19
|
-
|
|
20
|
-
const client = createHttpManagerClient({
|
|
21
|
-
baseUrl: "/api/rakun",
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
export function ManagerPage() {
|
|
25
|
-
return (
|
|
26
|
-
<ManagerBrowserApp
|
|
27
|
-
client={client}
|
|
28
|
-
pathname={window.location.pathname}
|
|
29
|
-
basePath="/backend"
|
|
30
|
-
/>
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
`ManagerBrowserApp` creates browser path navigation by default. Use
|
|
36
|
-
`ManagerRuntimeApp` when you need to provide custom navigation.
|
|
37
|
-
|
|
38
|
-
## Clients
|
|
39
|
-
|
|
40
|
-
HTTP client:
|
|
41
|
-
|
|
42
|
-
```ts
|
|
43
|
-
import { createHttpManagerClient } from "@rakun-kit/manager-react/client/http";
|
|
44
|
-
|
|
45
|
-
const client = createHttpManagerClient({
|
|
46
|
-
baseUrl: "/api/rakun",
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
const contentTypes = await client.request("manager.contentTypes");
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
tRPC client adapter:
|
|
53
|
-
|
|
54
|
-
```ts
|
|
55
|
-
import { createTrpcManagerClient } from "@rakun-kit/manager-react/client/trpc";
|
|
56
|
-
|
|
57
|
-
const managerClient = createTrpcManagerClient(trpcProxyClient);
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Custom client:
|
|
61
|
-
|
|
62
|
-
```ts
|
|
63
|
-
import { createManagerClient } from "@rakun-kit/manager-react/client/request";
|
|
64
|
-
|
|
65
|
-
const client = createManagerClient(async (name, input, options) => {
|
|
66
|
-
// call your transport here
|
|
67
|
-
});
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## Navigation
|
|
71
|
-
|
|
72
|
-
Use `createPathManagerNavigation` for router integrations:
|
|
73
|
-
|
|
74
|
-
```ts
|
|
75
|
-
import { createPathManagerNavigation } from "@rakun-kit/manager-react/state/navigation";
|
|
76
|
-
|
|
77
|
-
const navigation = createPathManagerNavigation({
|
|
78
|
-
basePath: "/backend",
|
|
79
|
-
push: (href) => router.push(href),
|
|
80
|
-
replace: (href) => router.replace(href),
|
|
81
|
-
});
|
|
82
|
-
```
|
|
83
|
-
|
|
1
|
+
# @rakun-kit/manager-react
|
|
2
|
+
|
|
3
|
+
React manager UI and client utilities for Rakun.
|
|
4
|
+
|
|
5
|
+
Most apps use this package through framework adapters such as
|
|
6
|
+
`@rakun-kit/next/manager`, but the runtime components and clients are also
|
|
7
|
+
published for custom integrations.
|
|
8
|
+
|
|
9
|
+
## Browser App
|
|
10
|
+
|
|
11
|
+
Render the manager with a manager client and navigation implementation:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
ManagerBrowserApp,
|
|
16
|
+
createHttpManagerClient,
|
|
17
|
+
} from "@rakun-kit/manager-react";
|
|
18
|
+
import "@rakun-kit/manager-react/styles.css";
|
|
19
|
+
|
|
20
|
+
const client = createHttpManagerClient({
|
|
21
|
+
baseUrl: "/api/rakun",
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export function ManagerPage() {
|
|
25
|
+
return (
|
|
26
|
+
<ManagerBrowserApp
|
|
27
|
+
client={client}
|
|
28
|
+
pathname={window.location.pathname}
|
|
29
|
+
basePath="/backend"
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
`ManagerBrowserApp` creates browser path navigation by default. Use
|
|
36
|
+
`ManagerRuntimeApp` when you need to provide custom navigation.
|
|
37
|
+
|
|
38
|
+
## Clients
|
|
39
|
+
|
|
40
|
+
HTTP client:
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import { createHttpManagerClient } from "@rakun-kit/manager-react/client/http";
|
|
44
|
+
|
|
45
|
+
const client = createHttpManagerClient({
|
|
46
|
+
baseUrl: "/api/rakun",
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
const contentTypes = await client.request("manager.contentTypes");
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
tRPC client adapter:
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import { createTrpcManagerClient } from "@rakun-kit/manager-react/client/trpc";
|
|
56
|
+
|
|
57
|
+
const managerClient = createTrpcManagerClient(trpcProxyClient);
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Custom client:
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
import { createManagerClient } from "@rakun-kit/manager-react/client/request";
|
|
64
|
+
|
|
65
|
+
const client = createManagerClient(async (name, input, options) => {
|
|
66
|
+
// call your transport here
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Navigation
|
|
71
|
+
|
|
72
|
+
Use `createPathManagerNavigation` for router integrations:
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
import { createPathManagerNavigation } from "@rakun-kit/manager-react/state/navigation";
|
|
76
|
+
|
|
77
|
+
const navigation = createPathManagerNavigation({
|
|
78
|
+
basePath: "/backend",
|
|
79
|
+
push: (href) => router.push(href),
|
|
80
|
+
replace: (href) => router.replace(href),
|
|
81
|
+
});
|
|
82
|
+
```
|
|
83
|
+
|
|
84
84
|
## Link fields
|
|
85
|
-
|
|
85
|
+
|
|
86
86
|
The `f.link()` editor shows a title alongside its destination. Users can paste
|
|
87
87
|
or type a direct URL, choose the home page, or browse configured page-route
|
|
88
88
|
types and select one of their entries. Internal selections automatically use
|
|
@@ -101,7 +101,10 @@ restores them before saving media metadata.
|
|
|
101
101
|
|
|
102
102
|
With optimization enabled in the media toolbar, an image's context menu offers
|
|
103
103
|
`Reimport with current optimization`. It regenerates the configured variants
|
|
104
|
-
while retaining the existing media record and all relations to it.
|
|
104
|
+
while retaining the existing media record and all relations to it. Multi-select
|
|
105
|
+
supports the same reimport action from the selection toolbar. Optimization is
|
|
106
|
+
on by default, and generated previews are stored as inline `data:image/...`
|
|
107
|
+
LQIP values on the media record.
|
|
105
108
|
|
|
106
109
|
## Dynamic data mappings
|
|
107
110
|
|
|
@@ -109,187 +112,187 @@ The list mapping editor supports recursive `blocks` targets. Select
|
|
|
109
112
|
`Nested list` for a mapped list property to configure its own source, query,
|
|
110
113
|
filters, item type, and field mapping. `Current document` query values inside
|
|
111
114
|
that nested editor resolve against the parent source item.
|
|
112
|
-
|
|
113
|
-
## Styles
|
|
114
|
-
|
|
115
|
-
Import the package stylesheet once:
|
|
116
|
-
|
|
117
|
-
```ts
|
|
118
|
-
import "@rakun-kit/manager-react/styles.css";
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
## Manager languages
|
|
122
|
-
|
|
123
|
-
English and the locale runtime are built into this package. Extra translations
|
|
124
|
-
ship from a separate package:
|
|
125
|
-
|
|
126
|
-
```sh
|
|
127
|
-
bun add @rakun-kit/manager-locales
|
|
128
|
-
# or: npm install @rakun-kit/manager-locales
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
Import only the locale needed by the server bootstrap:
|
|
132
|
-
|
|
133
|
-
```ts
|
|
134
|
-
import { esManagerLocalePack } from '@rakun-kit/manager-locales/es'
|
|
135
|
-
|
|
136
|
-
rakunBootstrap({
|
|
137
|
-
// ...
|
|
138
|
-
managerLanguages: [esManagerLocalePack],
|
|
139
|
-
})
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Each language has an independent subpath, so application bundlers only include
|
|
143
|
-
the locales explicitly imported by the host.
|
|
144
|
-
|
|
145
|
-
Content-type titles and categories can use project-defined message keys without
|
|
146
|
-
adding them to the built-in `ManagerMessageKey` union. Add an English partial
|
|
147
|
-
pack and extend installed locales through `managerLanguages`:
|
|
148
|
-
|
|
149
|
-
```ts
|
|
150
|
-
import { extendManagerLanguagePack } from '@rakun-kit/core/contracts'
|
|
151
|
-
import { esManagerLocalePack } from '@rakun-kit/manager-locales/es'
|
|
152
|
-
|
|
153
|
-
const managerLanguages = [
|
|
154
|
-
{
|
|
155
|
-
code: 'en',
|
|
156
|
-
name: 'English',
|
|
157
|
-
messages: {
|
|
158
|
-
'field.title': 'Title',
|
|
159
|
-
'layoutModule.header': 'Header',
|
|
160
|
-
'project.contentTypes.article.menu': 'Articles',
|
|
161
|
-
},
|
|
162
|
-
},
|
|
163
|
-
extendManagerLanguagePack(esManagerLocalePack, {
|
|
164
|
-
'field.title': 'Título',
|
|
165
|
-
'layoutModule.header': 'Cabecera',
|
|
166
|
-
'project.contentTypes.article.menu': 'Artículos',
|
|
167
|
-
}),
|
|
168
|
-
]
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
Then set `menu.title` or `menu.category` to that arbitrary key. Project keys are
|
|
172
|
-
resolved at runtime but remain outside the static manager catalog.
|
|
173
|
-
|
|
174
|
-
Field labels use the dynamic `field.<fieldName>` namespace. A content-type field
|
|
175
|
-
named `title`, for example, automatically resolves `field.title` in edit forms
|
|
176
|
-
and list columns without adding it to `ManagerMessageKey`.
|
|
177
|
-
|
|
178
|
-
Layout module labels follow `layoutModule.<layoutKey>`. For example, the
|
|
179
|
-
`header` slot automatically resolves `layoutModule.header` in its tab and
|
|
180
|
-
configuration panel.
|
|
181
|
-
|
|
182
|
-
## Event Logs
|
|
183
|
-
|
|
184
|
-
Settings → Logs displays the persistent Rakun event stream through the native
|
|
185
|
-
`manager.logs.list` operation. The screen supports filters, cursor pagination,
|
|
186
|
-
and structured event details. Both the settings card and the operation require
|
|
187
|
-
the `system.eventLog.read` permission, which can be assigned from Settings →
|
|
188
|
-
User Roles.
|
|
189
|
-
|
|
190
|
-
## Manager Plugins
|
|
191
|
-
|
|
192
|
-
Manager plugins run inside the normal providers and can add dashboard routes,
|
|
193
|
-
sidebar items, and custom field editors:
|
|
194
|
-
|
|
195
|
-
```tsx
|
|
196
|
-
import {
|
|
197
|
-
defineRakunManagerPlugin,
|
|
198
|
-
ManagerBrowserApp,
|
|
199
|
-
} from '@rakun-kit/manager-react'
|
|
200
|
-
|
|
201
|
-
const analyticsManagerPlugin = defineRakunManagerPlugin({
|
|
202
|
-
id: '@acme/rakun-analytics',
|
|
203
|
-
routes: [{
|
|
204
|
-
id: 'dashboard',
|
|
205
|
-
path: '/analytics',
|
|
206
|
-
component: AnalyticsScreen,
|
|
207
|
-
permissions: ['plugin.analytics.view'],
|
|
208
|
-
}],
|
|
209
|
-
sidebar: [{
|
|
210
|
-
id: 'analytics',
|
|
211
|
-
title: 'Analytics',
|
|
212
|
-
routeId: 'dashboard',
|
|
213
|
-
position: 'primary',
|
|
214
|
-
group: 'Plugins',
|
|
215
|
-
}],
|
|
216
|
-
fieldEditors: {
|
|
217
|
-
'@acme/rakun-analytics.query': QueryEditor,
|
|
218
|
-
},
|
|
219
|
-
})
|
|
220
|
-
|
|
221
|
-
<ManagerBrowserApp plugins={[analyticsManagerPlugin]} {...props} />
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
Use `ManagerFieldEditorProps`, `ManagerFieldEditorRef`, and
|
|
225
|
-
`useManagerFieldValue` from `@rakun-kit/manager-react/plugins` when implementing
|
|
226
|
-
field editors. Next.js applications should import plugin objects inside a
|
|
227
|
-
`'use client'` wrapper around `RakunManagerClientPage`; `RakunManagerPage` accepts
|
|
228
|
-
that wrapper through `managerComponent`.
|
|
229
|
-
|
|
230
|
-
### Extending the RichText editor
|
|
231
|
-
|
|
232
|
-
Manager plugins can register Lexical nodes and React plugins for every
|
|
233
|
-
`RichText` field, including fields rendered inside relations, blocks, and
|
|
234
|
-
modules:
|
|
235
|
-
|
|
236
|
-
```tsx
|
|
237
|
-
'use client'
|
|
238
|
-
|
|
239
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
|
240
|
-
import {
|
|
241
|
-
defineRakunManagerPlugin,
|
|
242
|
-
type ManagerRichTextPluginProps,
|
|
243
|
-
} from '@rakun-kit/manager-react/plugins'
|
|
244
|
-
import { MentionNode } from './MentionNode'
|
|
245
|
-
|
|
246
|
-
const MentionsPlugin = ({ id }: ManagerRichTextPluginProps) => {
|
|
247
|
-
const [editor] = useLexicalComposerContext()
|
|
248
|
-
|
|
249
|
-
// Register commands and listeners on `editor` here.
|
|
250
|
-
return null
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
export const mentionsManagerPlugin = defineRakunManagerPlugin({
|
|
254
|
-
id: '@acme/rakun-mentions',
|
|
255
|
-
richText: {
|
|
256
|
-
nodes: [MentionNode],
|
|
257
|
-
plugins: [
|
|
258
|
-
{
|
|
259
|
-
id: '@acme/rakun-mentions.plugin',
|
|
260
|
-
component: MentionsPlugin,
|
|
261
|
-
placement: 'editor',
|
|
262
|
-
},
|
|
263
|
-
],
|
|
264
|
-
},
|
|
265
|
-
})
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
Lexical plugin components receive `ManagerRichTextPluginProps` (the field id,
|
|
269
|
-
configuration, current content type, and related field metadata) and render
|
|
270
|
-
inside `LexicalComposer`, so they can use the normal Lexical React hooks.
|
|
271
|
-
Supported placements are `toolbar`, `block-format`, `editor` (the default),
|
|
272
|
-
`actions-start`, and `actions-end`. `block-format` components render inside the
|
|
273
|
-
manager's block selector and can use `ManagerRichTextBlockFormatItem` from
|
|
274
|
-
`@rakun-kit/manager-react/rich-text`. Contributions keep declaration order
|
|
275
|
-
unless an explicit `order` is provided. Node types and plugin ids must be unique;
|
|
276
|
-
conflicts report both plugin owners. Node replacements use Lexical's standard
|
|
277
|
-
`LexicalNodeReplacement` configuration.
|
|
278
|
-
|
|
279
|
-
## Exports
|
|
280
|
-
|
|
281
|
-
- `@rakun-kit/manager-react`: manager app, providers, clients, navigation, router, layout, media, and state helpers.
|
|
282
|
-
- `@rakun-kit/manager-react/client/http`: HTTP manager client.
|
|
283
|
-
- `@rakun-kit/manager-react/client/request`: transport-agnostic manager client.
|
|
284
|
-
- `@rakun-kit/manager-react/client/trpc`: tRPC proxy client adapter.
|
|
285
|
-
- `@rakun-kit/manager-react/app/runtime-app`: `ManagerRuntimeApp`, `ManagerBrowserApp`.
|
|
286
|
-
- `@rakun-kit/manager-react/state/navigation`: navigation helpers and provider.
|
|
287
|
-
- `@rakun-kit/manager-react/link`: link component provider.
|
|
288
|
-
- `@rakun-kit/manager-react/i18n`: locale runtime, catalog, and locale types.
|
|
289
|
-
- `@rakun-kit/manager-react/styles.css`: bundled manager styles.
|
|
290
|
-
|
|
291
|
-
## Build
|
|
292
|
-
|
|
293
|
-
```sh
|
|
294
|
-
bun run build --workspace @rakun-kit/manager-react
|
|
295
|
-
```
|
|
115
|
+
|
|
116
|
+
## Styles
|
|
117
|
+
|
|
118
|
+
Import the package stylesheet once:
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
import "@rakun-kit/manager-react/styles.css";
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Manager languages
|
|
125
|
+
|
|
126
|
+
English and the locale runtime are built into this package. Extra translations
|
|
127
|
+
ship from a separate package:
|
|
128
|
+
|
|
129
|
+
```sh
|
|
130
|
+
bun add @rakun-kit/manager-locales
|
|
131
|
+
# or: npm install @rakun-kit/manager-locales
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Import only the locale needed by the server bootstrap:
|
|
135
|
+
|
|
136
|
+
```ts
|
|
137
|
+
import { esManagerLocalePack } from '@rakun-kit/manager-locales/es'
|
|
138
|
+
|
|
139
|
+
rakunBootstrap({
|
|
140
|
+
// ...
|
|
141
|
+
managerLanguages: [esManagerLocalePack],
|
|
142
|
+
})
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Each language has an independent subpath, so application bundlers only include
|
|
146
|
+
the locales explicitly imported by the host.
|
|
147
|
+
|
|
148
|
+
Content-type titles and categories can use project-defined message keys without
|
|
149
|
+
adding them to the built-in `ManagerMessageKey` union. Add an English partial
|
|
150
|
+
pack and extend installed locales through `managerLanguages`:
|
|
151
|
+
|
|
152
|
+
```ts
|
|
153
|
+
import { extendManagerLanguagePack } from '@rakun-kit/core/contracts'
|
|
154
|
+
import { esManagerLocalePack } from '@rakun-kit/manager-locales/es'
|
|
155
|
+
|
|
156
|
+
const managerLanguages = [
|
|
157
|
+
{
|
|
158
|
+
code: 'en',
|
|
159
|
+
name: 'English',
|
|
160
|
+
messages: {
|
|
161
|
+
'field.title': 'Title',
|
|
162
|
+
'layoutModule.header': 'Header',
|
|
163
|
+
'project.contentTypes.article.menu': 'Articles',
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
extendManagerLanguagePack(esManagerLocalePack, {
|
|
167
|
+
'field.title': 'Título',
|
|
168
|
+
'layoutModule.header': 'Cabecera',
|
|
169
|
+
'project.contentTypes.article.menu': 'Artículos',
|
|
170
|
+
}),
|
|
171
|
+
]
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
Then set `menu.title` or `menu.category` to that arbitrary key. Project keys are
|
|
175
|
+
resolved at runtime but remain outside the static manager catalog.
|
|
176
|
+
|
|
177
|
+
Field labels use the dynamic `field.<fieldName>` namespace. A content-type field
|
|
178
|
+
named `title`, for example, automatically resolves `field.title` in edit forms
|
|
179
|
+
and list columns without adding it to `ManagerMessageKey`.
|
|
180
|
+
|
|
181
|
+
Layout module labels follow `layoutModule.<layoutKey>`. For example, the
|
|
182
|
+
`header` slot automatically resolves `layoutModule.header` in its tab and
|
|
183
|
+
configuration panel.
|
|
184
|
+
|
|
185
|
+
## Event Logs
|
|
186
|
+
|
|
187
|
+
Settings → Logs displays the persistent Rakun event stream through the native
|
|
188
|
+
`manager.logs.list` operation. The screen supports filters, cursor pagination,
|
|
189
|
+
and structured event details. Both the settings card and the operation require
|
|
190
|
+
the `system.eventLog.read` permission, which can be assigned from Settings →
|
|
191
|
+
User Roles.
|
|
192
|
+
|
|
193
|
+
## Manager Plugins
|
|
194
|
+
|
|
195
|
+
Manager plugins run inside the normal providers and can add dashboard routes,
|
|
196
|
+
sidebar items, and custom field editors:
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
import {
|
|
200
|
+
defineRakunManagerPlugin,
|
|
201
|
+
ManagerBrowserApp,
|
|
202
|
+
} from '@rakun-kit/manager-react'
|
|
203
|
+
|
|
204
|
+
const analyticsManagerPlugin = defineRakunManagerPlugin({
|
|
205
|
+
id: '@acme/rakun-analytics',
|
|
206
|
+
routes: [{
|
|
207
|
+
id: 'dashboard',
|
|
208
|
+
path: '/analytics',
|
|
209
|
+
component: AnalyticsScreen,
|
|
210
|
+
permissions: ['plugin.analytics.view'],
|
|
211
|
+
}],
|
|
212
|
+
sidebar: [{
|
|
213
|
+
id: 'analytics',
|
|
214
|
+
title: 'Analytics',
|
|
215
|
+
routeId: 'dashboard',
|
|
216
|
+
position: 'primary',
|
|
217
|
+
group: 'Plugins',
|
|
218
|
+
}],
|
|
219
|
+
fieldEditors: {
|
|
220
|
+
'@acme/rakun-analytics.query': QueryEditor,
|
|
221
|
+
},
|
|
222
|
+
})
|
|
223
|
+
|
|
224
|
+
<ManagerBrowserApp plugins={[analyticsManagerPlugin]} {...props} />
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
Use `ManagerFieldEditorProps`, `ManagerFieldEditorRef`, and
|
|
228
|
+
`useManagerFieldValue` from `@rakun-kit/manager-react/plugins` when implementing
|
|
229
|
+
field editors. Next.js applications should import plugin objects inside a
|
|
230
|
+
`'use client'` wrapper around `RakunManagerClientPage`; `RakunManagerPage` accepts
|
|
231
|
+
that wrapper through `managerComponent`.
|
|
232
|
+
|
|
233
|
+
### Extending the RichText editor
|
|
234
|
+
|
|
235
|
+
Manager plugins can register Lexical nodes and React plugins for every
|
|
236
|
+
`RichText` field, including fields rendered inside relations, blocks, and
|
|
237
|
+
modules:
|
|
238
|
+
|
|
239
|
+
```tsx
|
|
240
|
+
'use client'
|
|
241
|
+
|
|
242
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
|
243
|
+
import {
|
|
244
|
+
defineRakunManagerPlugin,
|
|
245
|
+
type ManagerRichTextPluginProps,
|
|
246
|
+
} from '@rakun-kit/manager-react/plugins'
|
|
247
|
+
import { MentionNode } from './MentionNode'
|
|
248
|
+
|
|
249
|
+
const MentionsPlugin = ({ id }: ManagerRichTextPluginProps) => {
|
|
250
|
+
const [editor] = useLexicalComposerContext()
|
|
251
|
+
|
|
252
|
+
// Register commands and listeners on `editor` here.
|
|
253
|
+
return null
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
export const mentionsManagerPlugin = defineRakunManagerPlugin({
|
|
257
|
+
id: '@acme/rakun-mentions',
|
|
258
|
+
richText: {
|
|
259
|
+
nodes: [MentionNode],
|
|
260
|
+
plugins: [
|
|
261
|
+
{
|
|
262
|
+
id: '@acme/rakun-mentions.plugin',
|
|
263
|
+
component: MentionsPlugin,
|
|
264
|
+
placement: 'editor',
|
|
265
|
+
},
|
|
266
|
+
],
|
|
267
|
+
},
|
|
268
|
+
})
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
Lexical plugin components receive `ManagerRichTextPluginProps` (the field id,
|
|
272
|
+
configuration, current content type, and related field metadata) and render
|
|
273
|
+
inside `LexicalComposer`, so they can use the normal Lexical React hooks.
|
|
274
|
+
Supported placements are `toolbar`, `block-format`, `editor` (the default),
|
|
275
|
+
`actions-start`, and `actions-end`. `block-format` components render inside the
|
|
276
|
+
manager's block selector and can use `ManagerRichTextBlockFormatItem` from
|
|
277
|
+
`@rakun-kit/manager-react/rich-text`. Contributions keep declaration order
|
|
278
|
+
unless an explicit `order` is provided. Node types and plugin ids must be unique;
|
|
279
|
+
conflicts report both plugin owners. Node replacements use Lexical's standard
|
|
280
|
+
`LexicalNodeReplacement` configuration.
|
|
281
|
+
|
|
282
|
+
## Exports
|
|
283
|
+
|
|
284
|
+
- `@rakun-kit/manager-react`: manager app, providers, clients, navigation, router, layout, media, and state helpers.
|
|
285
|
+
- `@rakun-kit/manager-react/client/http`: HTTP manager client.
|
|
286
|
+
- `@rakun-kit/manager-react/client/request`: transport-agnostic manager client.
|
|
287
|
+
- `@rakun-kit/manager-react/client/trpc`: tRPC proxy client adapter.
|
|
288
|
+
- `@rakun-kit/manager-react/app/runtime-app`: `ManagerRuntimeApp`, `ManagerBrowserApp`.
|
|
289
|
+
- `@rakun-kit/manager-react/state/navigation`: navigation helpers and provider.
|
|
290
|
+
- `@rakun-kit/manager-react/link`: link component provider.
|
|
291
|
+
- `@rakun-kit/manager-react/i18n`: locale runtime, catalog, and locale types.
|
|
292
|
+
- `@rakun-kit/manager-react/styles.css`: bundled manager styles.
|
|
293
|
+
|
|
294
|
+
## Build
|
|
295
|
+
|
|
296
|
+
```sh
|
|
297
|
+
bun run build --workspace @rakun-kit/manager-react
|
|
298
|
+
```
|
|
@@ -19,8 +19,9 @@ const i18n_1 = require("../../../../i18n/index.js");
|
|
|
19
19
|
const media_1 = require("../../../../media.js");
|
|
20
20
|
exports.INSERT_IMAGE_COMMAND = (0, lexical_1.createCommand)('INSERT_IMAGE_COMMAND');
|
|
21
21
|
const resolveImageSrc = async (media, request) => {
|
|
22
|
-
if (media.previewUrl)
|
|
22
|
+
if (media.previewUrl && !media.previewUrl.startsWith('data:')) {
|
|
23
23
|
return media.previewUrl;
|
|
24
|
+
}
|
|
24
25
|
if (media.url)
|
|
25
26
|
return media.url;
|
|
26
27
|
const key = media.previewKey || media.key;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-toolbar-plugin.js","sourceRoot":"","sources":["../../../../../../src/components/editor/plugins/toolbar/image-toolbar-plugin.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;
|
|
1
|
+
{"version":3,"file":"image-toolbar-plugin.js","sourceRoot":"","sources":["../../../../../../src/components/editor/plugins/toolbar/image-toolbar-plugin.tsx"],"names":[],"mappings":"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"}
|