Skip to content

Commit 2d8f223

Browse files
Apply suggestions from code review
Co-authored-by: Richard Jackson <jacksorjacksor@pm.me>
1 parent aefe2e8 commit 2d8f223

File tree

2 files changed

+23
-16
lines changed

2 files changed

+23
-16
lines changed

16/umbraco-cms/customizing/foundation/context-api/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
description: >-
3-
Learn about the Context API for sharing data and functionality between
3+
Learn about using the Context API for sharing data and functionality between
44
backoffice extensions through the component hierarchy.
55
---
66

@@ -19,7 +19,7 @@ The Context API is built on a few core principles:
1919
* **Hierarchical**: Contexts flow down through the DOM tree
2020
* **Type-Safe**: Context Tokens ensure you get the right context
2121

22-
Whether you're building property editors, workspace extensions, dashboards, or any other backoffice UI, the Context API provides a structured way to access and share functionality.
22+
The Context API provides a structured way to access and share functionality when building property editors, workspace extensions, dashboards, or any other backoffice UI.
2323

2424
## [Context API Fundamentals](context-api-fundamentals.md)
2525

16/umbraco-cms/customizing/foundation/context-api/context-api-fundamentals.md

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ The Context API is a powerful communication system in Umbraco's backoffice. It e
1010
Whether you're building custom property editors, workspace extensions, or complex UI components, understanding the Context API is essential. It provides a structured way to access shared state, services, and functionality throughout the element hierarchy.
1111

1212
## What is the Context API?
13-
The Umbraco backoffice is a collection of DOM elements, just like any web application. Elements can be anything: a button, a property editor, a section, a menu option, or a tree. These elements have a hierarchy and form the entire DOM tree that makes up the Umbraco application.
13+
The Umbraco backoffice is a collection of DOM elements like any web application. Elements can be anything: a button, a property editor, a section, a menu option, or a tree. These elements have a hierarchy and form the entire DOM tree that makes up the Umbraco application.
1414

1515
The Context API in Umbraco is a communication system. It allows elements to share data and functionality through their hierarchy in a `context`. Parent elements can provide contexts that their descendant elements can request and use.
1616

17-
When an element needs access to some data or functionality, it requests the appropriate context. It does this by using the context's identifier. The system finds the nearest provider up the element hierarchy. This creates loose coupling between elements. Descendants don't need direct references to their dependencies. They just declare what type of context they need and the system handles the connection.
17+
When an element needs access to some data or functionality, it requests the appropriate context. It does this by using the context's identifier. The system finds the nearest provider up the element hierarchy. This creates loose coupling between elements. Descendants don't need direct references to their dependencies as they can declare what type of context they need and the system handles the connection.
1818

19-
The approach is similar to dependency injection in managing dependencies automatically. However, it works specifically through the element structure rather than a central container. For example, a custom property editor can request the `workspace context` to access information about the current document. This includes the document's name, content type, or publication status.
19+
This approach is similar to dependency injection in managing dependencies automatically. However, the Context API works specifically through the element structure rather than a central container. For example, a custom property editor can request the `workspace context` to access information about the current document. Information that can be accessed includes the document's name, content type, or publication status.
2020

2121
The Context API exists to solve common problems in complex user interfaces:
2222

@@ -28,40 +28,47 @@ The Context API exists to solve common problems in complex user interfaces:
2828
To understand the Context API, it's important to understand the terminology that is used in the rest of the documentation.
2929

3030
### Context
31-
An object that encapsulates both data and methods to interact with that data. This object can be provided to descending DOM elements. A context represents a specific capability or state that multiple elements might need to access. Examples include workspace context, content data, user permissions, or specialized services. Contexts encapsulate both data and methods, making them more than simple data containers. Unlike repositories, a context is always only available within the scope of a certain element and its descendants.
31+
An object that encapsulates both data and methods to interact with that data. This object can be provided to descending DOM elements. A context represents a specific capability or state that multiple elements might need to access. Examples include workspace context, content data, user permissions, or specialized services. Contexts encapsulate both data and methods, making them more than just data containers. Unlike repositories, a context is always only available within the scope of a certain element and its descendants.
3232

3333
### Context provider
3434
An element that creates and makes a context available to its descending elements. The provider is responsible for the context's lifecycle. One element can provide multiple different contexts if needed.
3535

3636
### Context consumer
37-
Any element that requests and consumes a context provided by one of its ancestor elements. An element becomes a consumer simply by requesting a context. It doesn't need to know which specific ancestor provides the context or implement special interfaces. The consuming element receives callbacks when the requested context becomes available or unavailable. This allows it to react appropriately to changes in the element hierarchy.
37+
Any element that requests and consumes a context provided by one of its ancestor elements. An element becomes a consumer by requesting a context. The element doesn't need to know which specific ancestor provides the context or implement any special interfaces. The consuming element receives callbacks when the requested context becomes available or unavailable. This allows the element to react appropriately to changes in the element hierarchy.
3838

3939
### Context Token
40-
A unique identifier used to request specific contexts. Context tokens serve as contracts between providers and consumers. They define exactly which context is being requested and ensure that the right provider responds. This prevents conflicts when multiple contexts might have similar names. It also makes clear what functionality is being shared.
40+
A unique identifier used to request specific contexts. Context tokens serve as contracts between providers and consumers. They define exactly which context is being requested and ensure that the right provider responds. Using a context token prevents conflicts when multiple contexts might have similar names and makes clear what functionality is being shared.
4141

4242
## Context consume flow
4343
Each DOM element can be a context provider. Each descendant in the DOM hierarchy can consume that context if desired. When an element wants to consume a context, the following happens:
4444

4545
1. An element requests a context by a given Context Token.
46-
2. The Context API dispatches an event that starts at the element that requested the context. The event bubbles up the DOM tree to each parent element. This continues until an element is found that responds to the event.
46+
2. The Context API dispatches an event that starts at the element that requested the context. The event bubbles up the DOM tree to each parent element until an element is found that responds to the event.
4747
3. An instance of the context is provided back to the element that requested the context.
4848

4949
![Context API Flow](images/umbraco_context_api_flow.png)
5050

51-
If no context could be found and the event reaches the top level element (the document), no context is consumed.
51+
If no context could be found and the event reaches the top-level element (the document), no context is consumed.
5252

5353
## Common contexts
54-
Although every element can be a Context Provider, the most important contexts are registered at specific hierarchy levels. These levels are also explicit extension points in the Umbraco manifest. These levels are global, section, workspace, and property.
54+
Although every element can be a context provider, the most important contexts are registered at specific hierarchy levels. These levels are also explicit extension points in the Umbraco manifest.
55+
56+
The hierarchy levels to which contexts can be registered are:
57+
58+
* Global
59+
* Section
60+
* Workspace
61+
* Property
5562

5663
**Global contexts** are registered at the highest level and are always available anywhere in the backoffice. Examples of global contexts:
57-
* The `Notification context` is used for displaying notifications in the backoffice. This context is consumable in elements anywhere in the DOM tree.
58-
* The `Current user context` has information about the currently logged in user. This context is consumable anywhere in the DOM tree.
64+
* `Notification context`: used for displaying notifications in the backoffice. This context is consumable in elements anywhere in the DOM tree.
65+
* `Current user context`: has information about the currently logged in user. This context is consumable anywhere in the DOM tree.
5966

6067
**Section contexts** are available in the context of a section. That's everything in the backoffice except the menubar. Examples of section contexts:
61-
* The `Section context` provides information about the section, like path, alias, and label.
62-
* The `Sidebar menu section context` holds information about the sidebar menu, like which menu is currently selected.
68+
* `Section context`: provides information about the section, like path, alias, and label.
69+
* `Sidebar menu section context`: holds information about the sidebar menu, like which menu is currently selected.
6370

6471
**Workspace contexts** work on a workspace; the part of Umbraco that's next to the tree. Example of this level:
65-
* The `Workspace context` holds information about the current entity being edited in the workspace. This holds minimal information about an entity and the entity type. There are specific workspace contexts per entity type. For instance, the `Document workspace context` for documents and `Media workspace context` for media.
72+
* `Workspace context`: holds information about the current entity being edited in the workspace. This holds minimal information about an entity and the entity type. There are specific workspace contexts per entity type. For instance, the `Document workspace context` for documents and `Media workspace context` for media.
6673

6774
**Property contexts** are contexts that work at the property level. They can work on one or more property editors. An example is the clipboard functionality where blocks can be copied and pasted between block grids and block lists. Because these contexts are scoped at the property level, they are typically not consumed directly.

0 commit comments

Comments
 (0)