Learn how to exchange data between Universal Editor and your extension

As we develop extensions for the Universal Editor, it's essential to facilitate data exchange between the editor and the extension. There are two main categories of data involved:

• User-specific information, like IMS organization.
• Editor-specific information, such as the current editor location.

Below you can find the details on how to access these data categories.

Shared Context

The shared context is a dataset that Universal Editor shares with UI Extensions. It's used to understand the context of the user who is running Universal Editor. You can access the shared context through the sharedContext property of the connection object.

Copy
import { attach } from "@adobe/uix-guest";

  useEffect(() => {
    (async () => {
      const guestConnection = await attach({ id: extensionId });

      setGuestConnection(guestConnection);
    })();
  }, []);
  
 ...
 
const context = guestConnection.sharedContext;
const hostAppLocale = context.get("locale");
Copied to your clipboard
import { attach } from "@adobe/uix-guest";

  useEffect(() => {
    (async () => {
      const guestConnection = await attach({ id: extensionId });

      setGuestConnection(guestConnection);
    })();
  }, []);
  
 ...
 
const context = guestConnection.sharedContext;
const hostAppLocale = context.get("locale");

Available data in the shared context:

Editor State

The editor state is a dataset that Universal Editor shares with UI Extensions. It's used to understand the current state of the editor. You can access the editor state through the editorState property of the host object.

Below is an example of how you can access editor state properties, e.g., connections.

Copy
import { attach } from "@adobe/uix-guest";

...

  useEffect(() => {
    (async () => {
      const guestConnection = await attach({ id: extensionId });

      setGuestConnection(guestConnection);
    })();
  }, []);
 ...

const editorState = await guestConnection.host.editorState.get();
const {connections} = editorState;

...
    
Copied to your clipboard
import { attach } from "@adobe/uix-guest";

...

  useEffect(() => {
    (async () => {
      const guestConnection = await attach({ id: extensionId });

      setGuestConnection(guestConnection);
    })();
  }, []);
 ...

const editorState = await guestConnection.host.editorState.get();
const {connections} = editorState;

...
    

Available data in the editor state:

Last updated 4/26/2024

Was this helpful?

Yes

No