@dotcms/uve 0.0.1-beta.9 → 1.0.0

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 CHANGED
@@ -1,7 +1,589 @@
1
- # sdk-uve
1
+ # dotCMS UVE SDK
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ The `@dotcms/uve` SDK adds live editing to your JavaScript app using the dotCMS Universal Visual Editor (UVE). It provides low-level tools that power our framework-specific SDKs, such as [`@dotcms/react`](https://github.com/dotCMS/core/blob/main/core-web/libs/sdk/react/README.md) and [`@dotcms/angular`](https://github.com/dotCMS/core/blob/main/core-web/libs/sdk/angular/README.md).
4
4
 
5
- ## Running unit tests
5
+ > ⚠️ We **do not recommend using this SDK directly** for most use cases, you should use a [framework SDK that handles setup](#Getting Started: Recommended Examples), rendering, and event wiring for you.
6
6
 
7
- Run `nx test sdk-uve` to execute the unit tests via [Jest](https://jestjs.io).
7
+ With `@dotcms/uve`, framework SDKs are able to:
8
+ - Make pages and contentlets editable
9
+ - Respond to editor events (content updates, mode changes)
10
+ - Trigger modal or inline editing experiences
11
+ - Sync app routing with the dotCMS editor
12
+
13
+ ## Table of Contents
14
+
15
+ - [Before You Use @dotcms/uve](#before-you-use-dotcmsuve)
16
+ - [Getting Started: Recommended Examples](#getting-started-recommended-examples)
17
+ - [🚩 Custom Setup: Manual Rendering (Not Recommended)](#-custom-setup-manual-rendering-not-recommended)
18
+ - [Prerequisites & Setup](#prerequisites--setup)
19
+ - [Get a dotCMS Environment](#get-a-dotcms-environment)
20
+ - [Create a dotCMS API Key](#create-a-dotcms-api-key)
21
+ - [Installation](#installation)
22
+ - [Using the SDK with TypeScript](#using-the-sdk-with-typescript)
23
+ - [SDK Reference](#sdk-reference)
24
+ - [`initUVE()`](#inituveconfig-dotcmsuveconfig)
25
+ - [`getUVEState()`](#getuvestate)
26
+ - [`createUVESubscription()`](#createuvesubscriptioneventtype-callback)
27
+ - [`editContentlet()`](#editcontentletcontentlet)
28
+ - [`initInlineEditing()`](#initinlineeditingtype-data)
29
+ - [`enableBlockEditorInline()`](#enableblockeditorinlinecontentlet-fieldname)
30
+ - [`updateNavigation()`](#updatenavigationpathname)
31
+ - [`reorderMenu()`](#reordermenuconfig)
32
+ - [`sendMessageToUVE()`](#sendmessagetouvemessage)
33
+ - [Troubleshooting](#troubleshooting)
34
+ - [Common Issues & Solutions](#common-issues--solutions)
35
+ - [Debugging Tips](#debugging-tips)
36
+ - [Still Having Issues?](#still-having-issues)
37
+ - [dotCMS Support](#dotcms-support)
38
+ - [How To Contribute](#how-to-contribute)
39
+ - [Licensing Information](#licensing-information)
40
+ - [Troubleshooting](#troubleshooting)
41
+
42
+ ## Before You Use @dotcms/uve
43
+
44
+ ### Getting Started: Recommended Examples
45
+
46
+ We strongly recommend using one of our official framework SDKs, which are designed to handle UVE integration, routing, rendering, and more—out of the box. These examples are the best way to get started:
47
+
48
+ - [dotCMS Angular SDK: Angular Example](https://github.com/dotCMS/core/tree/main/examples/angular) – Ideal for Angular apps 🅰️
49
+ - [dotCMS React SDK: NextJS Example](https://github.com/dotCMS/core/tree/main/examples/react) – Ideal for NextJS projects ⚛️
50
+ - [dotCMS React SDK: Astro Example](https://github.com/dotCMS/core/tree/main/examples/astro) – Ideal for Astro projects 🌌
51
+
52
+ These examples handle UVE integration, routing, rendering, and more—out of the box. **If you're building a headless dotCMS front-end, start there.**
53
+
54
+ ### 🚩 Custom Setup: Manual Rendering (Not Recommended)
55
+
56
+ > 💡 We recommend using one of our official framework SDKs, which are designed to handle UVE integration, routing, rendering, and more—out of the box.
57
+
58
+ You can use `@dotcms/uve` directly, but **it’s not recommended or supported** unless you’re building a highly custom integration. Here’s how the pieces fit together:
59
+
60
+ 1. **You must use `@dotcms/client` to fetch content and page data.**
61
+ 2. **You must render pages based on dotCMS’s layout schema.**
62
+ 3. **You must apply the correct `data-dot-*` attributes to containers and contentlets.**
63
+
64
+ Here's a minimal setup using `@dotcms/client` and `@dotcms/uve`:
65
+
66
+ 1. Initializa the Client and get the page response:
67
+
68
+ ```ts
69
+ // getPage.ts
70
+ import { createDotCMSClient } from '@dotcms/client';
71
+ import { initUVE, createUVESubscription } from '@dotcms/uve';
72
+
73
+ const dotCMSClient = createDotCMSClient({
74
+ dotcmsUrl: 'https://your-dotcms-instance.com',
75
+ authToken: 'your-api-key',
76
+ siteId: 'your-site-id'
77
+ });
78
+
79
+ const getPage = async () => {
80
+ const pageResponse = await dotCMSClient.page.get('/', {
81
+ languageId: '1'
82
+ });
83
+
84
+ return pageResponse;
85
+ };
86
+ ```
87
+
88
+ 2. Initialize the UVE and subscribe to changes:
89
+
90
+ > ⚠️ The `initUVE()` function only works with a `PageResponse` returned by `@dotcms/client`. If you try to pass in data from another source or build your own structure, it won't initialize properly.
91
+
92
+ ```ts
93
+ import { initUVE, createUVESubscription } from '@dotcms/uve';
94
+ import { getPage } from './getPage';
95
+
96
+ const pageResponse = await getPage();
97
+
98
+ initUVE(pageResponse);
99
+ createUVESubscription('changes', (newPageResponse) => {
100
+ // Handle page updates (e.g. re-render)
101
+ });
102
+ ```
103
+
104
+ > ⚠️ This only sets up the editor connection. You are responsible for rendering the page structure (rows, columns, containers, contentlets) using your own UI components.
105
+
106
+ 3. Create a custom render for the page:
107
+
108
+ ```tsx
109
+ // 🔧 Render the page layout (you must implement this component)
110
+ <MyDotCMSPage pageAsset={pageResponse.pageAsset} />
111
+ ```
112
+
113
+ > ⚠️ Below is a simplified breakdown of how dotCMS layouts are structured and how you might render them manually.
114
+
115
+ #### 🔄 How to Render a dotCMS Page
116
+
117
+ > 📚 For a complete guide, here is a full tutorial:
118
+ > 👉 [dotCMS Page Rendering Architecture]( https://dev.dotcms.com/docs/dotcms-page-rendering-architecture)
119
+
120
+ dotCMS pages are structured as nested layout objects:
121
+
122
+ - A `PageAsset` contains a `layout` object
123
+ - The `layout` includes rows, columns, containers, and contentlets
124
+
125
+ Here’s a basic pseudocode outline:
126
+
127
+ ```jsx
128
+ <Page>
129
+ {layout.body.rows.map(row => (
130
+ <Row>
131
+ {row.columns.map(column => (
132
+ <Column>
133
+ {column.containers.map(container => (
134
+ <Container data-dot-object="container" ...>
135
+ {container.contentlets.map(contentlet => (
136
+ <Contentlet data-dot-object="contentlet" ...>
137
+ {renderContentletByType(contentlet)}
138
+ </Contentlet>
139
+ ))}
140
+ </Container>
141
+ ))}
142
+ </Column>
143
+ ))}
144
+ </Row>
145
+ ))}
146
+ </Page>
147
+ ```
148
+
149
+ Each contentlet is rendered according to its content type:
150
+
151
+ ```ts
152
+ function renderContentletByType(contentlet) {
153
+ switch(contentlet.contentType) {
154
+ case 'text': return <TextBlock contentlet={contentlet} />;
155
+ case 'image': return <ImageBlock contentlet={contentlet} />;
156
+ case 'video': return <VideoBlock contentlet={contentlet} />;
157
+ default: return null;
158
+ }
159
+ }
160
+ ```
161
+
162
+ To make the layout editable, be sure to apply all required `data-dot-*` attributes on containers and contentlets.
163
+
164
+ ## Prerequisites & Setup
165
+
166
+ ### Get a dotCMS Environment
167
+
168
+ #### Version Compatibility
169
+
170
+ - **Recommended**: dotCMS Evergreen
171
+ - **Minimum**: dotCMS v25.05
172
+ - **Best Experience**: Latest Evergreen release
173
+
174
+ #### Environment Setup
175
+
176
+ **For Production Use:**
177
+
178
+ - ☁️ [Cloud hosting options](https://www.dotcms.com/pricing) - managed solutions with SLA
179
+ - 🛠️ [Self-hosted options](https://dev.dotcms.com/docs/current-releases) - deploy on your infrastructure
180
+
181
+ **For Testing & Development:**
182
+
183
+ - 🧑🏻‍💻 [dotCMS demo site](https://demo.dotcms.com/dotAdmin/#/public/login) - perfect for trying out the SDK
184
+ - 📘 [Learn how to use the demo site](https://dev.dotcms.com/docs/demo-site)
185
+ - 📝 Read-only access, ideal for building proof-of-concepts
186
+
187
+ **For Local Development:**
188
+
189
+ - 🐳 [Docker setup guide](https://github.com/dotCMS/core/tree/main/docker/docker-compose-examples/single-node-demo-site)
190
+ - 💻 [Local installation guide](https://dev.dotcms.com/docs/quick-start-guide)
191
+
192
+ ### Configure The Universal Visual Editor App
193
+
194
+ For a step-by-step guide on setting up the Universal Visual Editor, check out our [easy-to-follow instructions](https://dev.dotcms.com/docs/uve-headless-config) and get started in no time!
195
+
196
+ ### Installation
197
+
198
+ ```bash
199
+ npm install @dotcms/uve@latest
200
+ ```
201
+
202
+ ### Using the SDK with TypeScript
203
+
204
+ All interfaces and types are available through the `@dotcms/types` package:
205
+
206
+ ```bash
207
+ npm install @dotcms/types@latest --save-dev
208
+ ```
209
+
210
+ #### Common Types
211
+
212
+ The SDK uses several key types from `@dotcms/types`:
213
+
214
+ ```typescript
215
+ import {
216
+ DotCMSContentlet,
217
+ DotCMSPageResponse,
218
+ DotCMSUVEConfig,
219
+ DotCMSInlineEditingType,
220
+ UVEEventType,
221
+ UVEState
222
+ } from '@dotcms/types';
223
+ ```
224
+
225
+ For a complete reference of all available types and interfaces, please refer to the [@dotcms/types documentation](https://www.npmjs.com/package/@dotcms/types).
226
+
227
+ ## SDK Reference
228
+
229
+ ### `initUVE(config?: DotCMSUVEConfig)`
230
+
231
+ `initUVE` is a function that initializes the Universal Visual Editor (UVE). It sets up the necessary communication between your app and the editor, enabling seamless integration and interaction.
232
+
233
+ | Input | Type | Required | Description |
234
+ | -------- | -------------------- | -------- | ------------------------------------------- |
235
+ | `config` | `DotCMSPageResponse` | ✅ | The page Response from the `@dotcms/client` |
236
+
237
+ #### Usage
238
+
239
+ ```ts
240
+ const { destroyUVESubscriptions } = initUVE(pageResponse);
241
+ ```
242
+
243
+ > ⚠️ If you don't provide a `pageResponse`, we can't assure that the UVE will be initialized correctly.
244
+
245
+ ### `getUVEState()`
246
+
247
+ `getUVEState` is a function that returns the [UVE state](#uve-state) if UVE is active.
248
+
249
+ #### Usage
250
+
251
+ ```tsx
252
+ import { getUVEState } from '@dotcms/uve';
253
+ import { UVE_MODE } from '@dotcms/types';
254
+
255
+ const myEditButton = () => {
256
+ const uveState = getUVEState();
257
+
258
+ if (uveState?.mode === UVE_MODE.EDIT) {
259
+ return <button>Edit</button>;
260
+ }
261
+
262
+ return null;
263
+ };
264
+ ```
265
+
266
+ #### UVE State
267
+
268
+ - `dotCMSHost`: The host URL of the DotCMS instance
269
+ - `experimentId`: The ID of the current experiment
270
+ - `languageId`: The language ID of the current page set on the UVE
271
+ - `mode`: The current editor mode (`'preview'`, `'edit'`, `'live'`)
272
+ - `persona`: The persona of the current page set on the UVE
273
+ - `publishDate`: The publish date of the current page set on the UVE
274
+ - `variantName`: The name of the current variant
275
+
276
+ ### `createUVESubscription(eventType, callback)`
277
+
278
+ `createUVESubscription` is a function that allows your application to dynamically interact with UVE by subscribing to events such as content changes or navigation updates. This enables your app to respond in real-time to user actions and editor events, enhancing the interactive experience.
279
+
280
+ | Input | Type | Required | Description |
281
+ | ----------- | -------------- | -------- | ----------------------------------------- |
282
+ | `eventType` | `UVEEventType` | ✅ | [The event to subscribe to](#event-types) |
283
+ | `callback` | `Function` | ✅ | Called when the event is triggered |
284
+
285
+ #### Usage
286
+
287
+ ```ts
288
+ import { createUVESubscription } from '@dotcms/uve';
289
+ import { UVEEventType } from '@dotcms/types';
290
+
291
+ const sub = createUVESubscription(UVEEventType.CONTENT_CHANGES, (newPageResponse) => {
292
+ // do something when the content changes
293
+ });
294
+
295
+ // Later, when you want to unsubscribe
296
+ sub.unsubscribe();
297
+ ```
298
+
299
+ #### Event Types
300
+
301
+ - `UVEEventType.CONTENT_CHANGES`: Triggered when the content of the page changes.
302
+ - `UVEEventType.PAGE_RELOAD`: Triggered when the page is reloaded.
303
+ - `UVEEventType.REQUEST_BOUNDS`: Triggered when the editor requests the bounds of the page.
304
+ - `UVEEventType.IFRAME_SCROLL`: Triggered when the iframe is scrolled.
305
+ - `UVEEventType.IFRAME_SCROLL_END`: Triggered when the iframe has stopped scrolling.
306
+ - `UVEEventType.CONTENTLET_HOVERED`: Triggered when a contentlet is hovered.
307
+
308
+ ### `editContentlet(contentlet)`
309
+
310
+ `editContentlet` is a function that opens the dotCMS modal editor for any contentlet in or out of page area.
311
+
312
+ | Input | Type | Required | Description |
313
+ | ------------ | ------------------ | -------- | -------------------------------- |
314
+ | `contentlet` | `Contentlet<T>` | ✅ | The contentlet you want to edit. |
315
+
316
+ #### Usage
317
+
318
+ ```tsx
319
+ import { editContentlet, getUVEState } from '@dotcms/uve';
320
+ import { UVE_MODE } from '@dotcms/types';
321
+
322
+ const myEditButton = ({ contentlet }) => {
323
+ const uveState = getUVEState();
324
+
325
+ if (uveState?.mode === UVE_MODE.EDIT) {
326
+ return <button onClick={() => editContentlet(contentlet)}>Edit</button>;
327
+ }
328
+
329
+ return null;
330
+ };
331
+ ```
332
+
333
+ ### `initInlineEditing(type, data)`
334
+
335
+ `initInlineEditing` is a function that triggers inline editing for supported field types (WYSIWYG or Block Editor).
336
+
337
+ | Input | Type | Required | Description |
338
+ | ----------- | ---------------------------- | -------- | ------------------------------------------------------------------------------ |
339
+ | `type` | `DotCMSInlineEditingType` | ✅ | `'BLOCK_EDITOR'` or `'WYSIWYG'` |
340
+ | `fieldData` | `DotCMSInlineEditingPayload` | ✅ | [Field content required to enable inline editing](#dotcmsinlineeditingpayload) |
341
+
342
+ #### Usage
343
+
344
+ ```ts
345
+ import { initInlineEditing, getUVEState } from "@dotcms/uve";
346
+ import { UVE_MODE } from "@dotcms/types";
347
+
348
+ const MyBanner = ({ contentlet }) => {
349
+ const uveState = getUVEState();
350
+
351
+ const handleClick = () => {
352
+ if (uveState?.mode === UVE_MODE.EDIT) {
353
+ const { inode, contentType, title } = contentlet;
354
+ initInlineEditing("BLOCK_EDITOR", {
355
+ inode,
356
+ contentType,
357
+ content: title,
358
+ fieldName: "title",
359
+ });
360
+ }
361
+ };
362
+ return (
363
+ <div>
364
+ <h1 onClick={handleClick}>{contentlet.title}</h1>
365
+ <p>{contentlet.description}</p>
366
+ </div>
367
+ );
368
+ };
369
+ ```
370
+
371
+ #### DotCMSInlineEditingPayload
372
+
373
+ - `inode` (string): The inode of the contentlet to edit.
374
+ - `contentType` (string): The content type of the contentlet to edit.
375
+ - `fieldName` (string): The name of the field to edit.
376
+ - `content` (string): The content of the field to edit.
377
+
378
+ ### `enableBlockEditorInline(contentlet, fieldName)`
379
+
380
+ `enableBlockEditorInline` is a shortcut to [enable inline block editing](https://dev.dotcms.com/docs/block-editor#BlockInlineEditor) for a field.
381
+
382
+ | Input | Type | Required | Description |
383
+ | ------------ | ----------------------- | -------- | -------------------------------------------------------------- |
384
+ | `contentlet` | `DotCMSBasicContentlet` | ✅ | The target contentlet |
385
+ | `fieldName` | `string` | ✅ | [Name of the block field to edit](#dotcmsinlineeditingpayload) |
386
+
387
+ #### Usage
388
+
389
+ ```tsx
390
+ import { enableBlockEditorInline, getUVEState } from '@dotcms/uve';
391
+ import { UVE_MODE } from '@dotcms/types';
392
+
393
+ const MyBanner = ({ contentlet }) => {
394
+ const uveState = getUVEState();
395
+
396
+ const handleClick = () => {
397
+ if (uveState?.mode === UVE_MODE.EDIT) {
398
+ enableBlockEditorInline(contentlet, 'blockContent');
399
+ }
400
+ };
401
+
402
+ return <MyBlockEditorRender onClick={handleClick} />;
403
+ };
404
+ ```
405
+
406
+ ### `updateNavigation(pathname)`
407
+
408
+ `updateNavigation` is a function that notifies UVE that navigation has changed (e.g., in SPAs).
409
+
410
+ | Input | Type | Required | Description |
411
+ | ---------- | -------- | -------- | -------------------------- |
412
+ | `pathname` | `string` | ✅ | The new pathname to update |
413
+
414
+ #### Usage
415
+
416
+ ```tsx
417
+ import { updateNavigation } from '@dotcms/uve';
418
+
419
+ updateNavigation('/navigate-to-this-new-page');
420
+ ```
421
+
422
+ ### `reorderMenu(config?)`
423
+
424
+ `reorderMenu` is a function that opens the UVE menu editor to reorder navigation links.
425
+
426
+ | Input | Type | Required | Description |
427
+ | --------- | ------------------------- | -------- | ---------------------------------------------------------- |
428
+ | `config?` | `DotCMSReorderMenuConfig` | ❌ | [Optional config for reordering](#dotcmsreordermenuconfig) |
429
+
430
+ #### Usage
431
+
432
+ ```ts
433
+ import { reorderMenu } from '@dotcms/uve';
434
+
435
+ reorderMenu({ startLevel: 2, depth: 3 });
436
+ ```
437
+
438
+ #### DotCMSReorderMenuConfig
439
+
440
+ - `startLevel` (number): The level to start reordering from
441
+ - `depth` (number): The depth of the menu to reorder
442
+
443
+ ### `sendMessageToUVE(message)`
444
+
445
+ `sendMessageToUVE` is a low-level function to send custom messages to UVE.
446
+
447
+ | Input | Type | Required | Description |
448
+ | --------- | ------------------------------------------ | -------- | ---------------------------- |
449
+ | `message` | [`DotCMSUVEMessage<T>`](#dotcmsuvemessage) | ✅ | Object with action + payload |
450
+
451
+ #### Usage
452
+
453
+ ```ts
454
+ sendMessageToUVE({
455
+ action: DotCMSUVEAction.CUSTOM_EVENT,
456
+ payload: { type: 'MyEvent', data: {...} }
457
+ });
458
+ ```
459
+
460
+ #### DotCMSUVEMessage<T>
461
+
462
+ | Event (DotCMSUVEAction) | Payload (T) |
463
+ | ---------------------------------- | ------------------------------------------------------------- | ------- |
464
+ | `NAVIGATION_UPDATE` | `{ url: string }` |
465
+ | `SET_BOUNDS` | `DotCMSContainerBound[]` |
466
+ | `SET_CONTENTLET` | `DotCMSBasicContentlet` |
467
+ | `IFRAME_SCROLL` | `'up' | 'down'` |
468
+ | `IFRAME_SCROLL_END` | --- |
469
+ | `REORDER_MENU` | `DotCMSReorderMenuConfig` |
470
+ | `INIT_INLINE_EDITING` | `DotCMSInlineEditingPayload` |
471
+ | `COPY_CONTENTLET_INLINE_EDITING` | `{ dataset: { inode, language, fieldName: this.fieldName } }` |
472
+ | `UPDATE_CONTENTLET_INLINE_EDITING` | `{ content: string, dataset: { inode, langId, fieldName } }` |
473
+ | `GET_PAGE_DATA` | --- |
474
+ | `CLIENT_READY` | --- |
475
+ | `EDIT_CONTENTLET` | `DotCMSBasicContentlet` |
476
+
477
+ ## Troubleshooting
478
+
479
+ ### Common Issues & Solutions
480
+
481
+ #### Memory Management
482
+
483
+ 1. **Memory Leaks**: Application experiences memory leaks
484
+ - **Possible Causes**:
485
+ - Failing to call `destroyUVESubscriptions()` on unmount
486
+ - **Solutions**:
487
+ - Always call `destroyUVESubscriptions()` when your component unmounts to clean up subscriptions
488
+
489
+ #### Editor State
490
+
491
+ 1. **Undefined State**: `getUVEState()` returns undefined
492
+ - **Possible Causes**:
493
+ - Application not running inside the dotCMS editor
494
+ - **Solutions**:
495
+ - Ensure your application is running within the dotCMS environment when calling `getUVEState()`
496
+
497
+ #### Event Handling
498
+
499
+ 1. **Unsubscribed Events**: Events not unsubscribed leading to unexpected behavior
500
+ - **Possible Causes**:
501
+ - Not unsubscribing from events
502
+ - **Solutions**:
503
+ - Always unsubscribe from events using the `unsubscribe()` method to prevent memory leaks
504
+
505
+ #### Inline Editing
506
+
507
+ 1. **Invalid Contentlet or Field**: `initInlineEditing()` requires valid contentlet and field name
508
+ - **Possible Causes**:
509
+ - Incorrect contentlet or field name
510
+ - **Solutions**:
511
+ - Verify that the contentlet and field name are correct and exist in the dotCMS instance
512
+
513
+ #### Non-existent Page Navigation
514
+
515
+ 1. **Navigation to a non-existent page**: May break content sync in UVE and make the editor redirect to the home page
516
+ - **Possible Causes**:
517
+ - Navigation to a non-existent page
518
+ - **Solutions**:
519
+ - Ensure the page exists in the dotCMS instance
520
+
521
+ #### Menu Reordering
522
+
523
+ 1. **UI Action Requirement**: `reorderMenu()` must be called from a UI action
524
+ - **Possible Causes**:
525
+ - Attempting to auto-trigger `reorderMenu()`
526
+ - **Solutions**:
527
+ - Ensure `reorderMenu()` is triggered by a user action within the UI
528
+
529
+ ### Debugging Tips
530
+
531
+ 1. **Ensure you are in the UVE Context**
532
+ - Check if you are in the UVE context by calling `getUVEState()`
533
+ - If you are not in the UVE context, you will not be able to use the UVE SDK correctly
534
+ 2. **Check Browser Console**
535
+ - Check for errors in the browser console
536
+ - Check for errors in the browser network tab
537
+ 3. **Network Monitoring**
538
+ - Use browser dev tools to monitor API calls
539
+ - Check for 401/403 errors (auth issues)
540
+ - Verify asset loading paths
541
+
542
+ ### Still Having Issues?
543
+
544
+ If you're still experiencing problems after trying these solutions:
545
+
546
+ 1. Search existing [GitHub issues](https://github.com/dotCMS/core/issues)
547
+ 2. Check our [community forum](https://community.dotcms.com/)
548
+ 3. Create a new issue with:
549
+ - Detailed reproduction steps
550
+ - Environment information
551
+ - Error messages
552
+ - Code samples
553
+
554
+ ## dotCMS Support
555
+
556
+ We offer multiple channels to get help with the dotCMS UVE SDK:
557
+
558
+ - **GitHub Issues**: For bug reports and feature requests, please [open an issue](https://github.com/dotCMS/core/issues/new/choose) in the GitHub repository.
559
+ - **Community Forum**: Join our [community discussions](https://community.dotcms.com/) to ask questions and share solutions.
560
+ - **Stack Overflow**: Use the tag `dotcms-uve` when posting questions.
561
+
562
+ When reporting issues, please include:
563
+
564
+ - SDK version you're using
565
+ - dotCMS version
566
+ - Minimal reproduction steps
567
+ - Expected vs. actual behavior
568
+
569
+ Enterprise customers can access premium support through the [dotCMS Support Portal](https://dev.dotcms.com/docs/help).
570
+
571
+ ## How To Contribute
572
+
573
+ GitHub pull requests are the preferred method to contribute code to dotCMS. We welcome contributions to the DotCMS UVE SDK! If you'd like to contribute, please follow these steps:
574
+
575
+ 1. Fork the repository [dotCMS/core](https://github.com/dotCMS/core)
576
+ 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
577
+ 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
578
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
579
+ 5. Open a Pull Request
580
+
581
+ Please ensure your code follows the existing style and includes appropriate tests.
582
+
583
+ ## Licensing Information
584
+
585
+ dotCMS comes in multiple editions and as such is dual-licensed. The dotCMS Community Edition is licensed under the GPL 3.0 and is freely available for download, customization, and deployment for use within organizations of all stripes. dotCMS Enterprise Editions (EE) adds several enterprise features and is available via a supported, indemnified commercial license from dotCMS. For the differences between the editions, see [the feature page](http://www.dotcms.com/cms-platform/features).
586
+
587
+ This SDK is part of dotCMS's dual-licensed platform (GPL 3.0 for Community, commercial license for Enterprise).
588
+
589
+ [Learn more ](https://www.dotcms.com)at [dotcms.com](https://www.dotcms.com).
package/index.cjs.js CHANGED
@@ -1,86 +1,17 @@
1
1
  'use strict';
2
2
 
3
- var types = require('./types.cjs.js');
4
- var internal = require('./internal.cjs.js');
3
+ var _public = require('./public.cjs.js');
4
+ require('@dotcms/types');
5
+ require('@dotcms/types/internal');
5
6
 
6
- /**
7
- * Gets the current state of the Universal Visual Editor (UVE).
8
- *
9
- * This function checks if the code is running inside the DotCMS Universal Visual Editor
10
- * and returns information about its current state, including the editor mode.
11
- *
12
- * @export
13
- * @return {UVEState | undefined} Returns the UVE state object if running inside the editor,
14
- * undefined otherwise.
15
- *
16
- * The state includes:
17
- * - mode: The current editor mode (preview, edit, live)
18
- * - languageId: The language ID of the current page setted on the UVE
19
- * - persona: The persona of the current page setted on the UVE
20
- * - variantName: The name of the current variant
21
- * - experimentId: The ID of the current experiment
22
- * - publishDate: The publish date of the current page setted on the UVE
23
- *
24
- * @note The absence of any of these properties means that the value is the default one.
25
- *
26
- * @example
27
- * ```ts
28
- * const editorState = getUVEState();
29
- * if (editorState?.mode === 'edit') {
30
- * // Enable editing features
31
- * }
32
- * ```
33
- */
34
- function getUVEState() {
35
- if (typeof window === 'undefined' || window.parent === window || !window.location) {
36
- return;
37
- }
38
- const url = new URL(window.location.href);
39
- const possibleModes = Object.values(types.UVE_MODE);
40
- let mode = url.searchParams.get('mode') ?? types.UVE_MODE.EDIT;
41
- const languageId = url.searchParams.get('language_id');
42
- const persona = url.searchParams.get('personaId');
43
- const variantName = url.searchParams.get('variantName');
44
- const experimentId = url.searchParams.get('experimentId');
45
- const publishDate = url.searchParams.get('publishDate');
46
- if (!possibleModes.includes(mode)) {
47
- mode = types.UVE_MODE.EDIT;
48
- }
49
- return {
50
- mode,
51
- languageId,
52
- persona,
53
- variantName,
54
- experimentId,
55
- publishDate
56
- };
57
- }
58
- /**
59
- * Creates a subscription to a UVE event.
60
- *
61
- * @param {string} event - The event to subscribe to.
62
- * @param {UVECallback} callback - The callback to call when the event is triggered.
63
- * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
64
- *
65
- * @example
66
- * ```ts
67
- * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
68
- * console.log(payload);
69
- * });
70
- * ```
71
- */
72
- function createUVESubscription(event, callback) {
73
- if (!getUVEState()) {
74
- console.warn('UVE Subscription: Not running inside UVE');
75
- return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
76
- }
77
- const eventCallback = internal.__UVE_EVENTS__[event];
78
- if (!eventCallback) {
79
- console.error(`UVE Subscription: Event ${event} not found`);
80
- return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
81
- }
82
- return eventCallback(callback);
83
- }
84
7
 
85
- exports.createUVESubscription = createUVESubscription;
86
- exports.getUVEState = getUVEState;
8
+
9
+ exports.createUVESubscription = _public.createUVESubscription;
10
+ exports.editContentlet = _public.editContentlet;
11
+ exports.enableBlockEditorInline = _public.enableBlockEditorInline;
12
+ exports.getUVEState = _public.getUVEState;
13
+ exports.initInlineEditing = _public.initInlineEditing;
14
+ exports.initUVE = _public.initUVE;
15
+ exports.reorderMenu = _public.reorderMenu;
16
+ exports.sendMessageToUVE = _public.sendMessageToUVE;
17
+ exports.updateNavigation = _public.updateNavigation;