How to access document context from custom property editor within Block List element?

Hi all,

I’m building a custom property editor inside a block element that’s used within a block list. I can get the block’s own content type ID easily by consuming UMB_BLOCK_WORKSPACE_CONTEXT like this:

this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (instance) => {
    instance.content.contentTypeId.subscribe((contentTypeId) => {
        console.log(contentTypeId);
    });
});

However, I’m struggling to figure out how to get the ID of the current document into which the blocks are inserted. I want to run some specific logic in the block editor depending on the type of the parent document.

I’ve also tried consuming UMB_DOCUMENT_WORKSPACE_CONTEXT and UMB_CONTENT_WORKSPACE_CONTEXT but the code doesn’t seem to enter those contexts inside the block editor, so I assume those contexts aren’t available there:

this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
    console.log(instance);
});

this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (instance) => {
    console.log(instance);
});

Has anyone figured out the recommended way to get the current document ID from within a block editor? Is there a proper Umbraco API or context I’m missing?

Sorry, not here to help. I am looking for exactly the same thing and all sources of information are failing me. I tried putting the <umb-debug visible dialog></umb-debug> web component inside the render of the property editor, and it revealed that UMB_DOCUMENT_WORKSPACE_CONTEXT and UMB_CONTENT_WORKSPACE_CONTEXT don’t exist on the property editor. I am going to give up and hack the route url to get the node id.

I have this for now. Might work

const guidExtractorRegex =
  /(?:document\/edit\/|parent\/document\/)([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})/;

function extractDocumentGuid(url: string = window.location.href): string | null {
  const match = url.match(guidExtractorRegex);
  if (match && match[1]) {
    // match[0] would be the whole matched string (e.g., "document/edit/GUID")
    // match[1] is the content of the first capturing group, which is our GUID
    return match[1];
  }
  return null; // No GUID found
}

Usage

const nodeKey = extractDocumentGuid();

Thanks for the snippet! This looks like it could be a useful workaround for now

Hi @marcusolrik & @McGern

Excellent question, and great to see that you have this need.

It is possible, but not without your consent, that you actually want to do this.

You can do it in this way:

this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
	...
}).passContextAliasMatches();

(Off-topic, But notice I here only set the requirement of the Workspace Context to be of type Content, just to make sure your code also works on Media and Member)

Here I have pasted the JS Docs for it:

/**
	 * @public
	 * @memberof UmbContextConsumer
	 * @description Pass beyond any context aliases that matches this.
	 * The default behavior is to stop at first Context Alias match, this is to avoid receiving unforeseen descending contexts.
	 * @returns {UmbContextConsumer} - The current instance of the UmbContextConsumer.
	 */

So the default behaviour is to stop at the first Context-Alias match, so you don’t accidently consume contexts outside of your intended scope.
In other words, if you are looking for a specific Workspace Context Implementation, then you only reach it if that is the direct one you are within, and not its parent.

But appending this call ´passContextAliasMatches´, the consumption allows the search to continue through multiple Context-Alias matches. In other words, it keeps looking until it finds a Context that matches what you were looking for.

We need to document this still, it is, though, a bit tricky to describe in a good, easily understood way. I will try to find some time in the coming days to revisit the Context API Docs to incorporate this.

Hope it works for you and makes sense, and please let me know how it goes and if you have any good ways to describe this.

Thanks in advance