Elements can integrate deeply into HAX state management using what we call "hax hooks". By supplying a method on your web component like haxHooks() you are magically able to tap into different life-cycle steps within the HAX editor.
Because of the simplicity and power of haxHooks this may not be an exhaustive list and the internal code documentation on this should be consulted (or open an issue to ensure we document a missing hook!). You can search the webcomponents monorepo for usage of haxHooks in order to discover additional implementations beyond what is pointed to below.
This is a basic example in which each of the strings you'd then implement as their own async callbacks. async / await allows HAX to safely defer to your element to do whatever it wants to the DOM / internal structure of that callback, without disrupting element activation or conversion of DOM structure to HAX Element Schema, what it uses to virtualize the body for sanitation purposes at the time of save / adding new things to the page.
The most powerful hook in haxHooks. This fires whenever an element is read in via the appStore and it's definition loaded for use. This hook supplies an instance of the HAXStore which is the internal state management of HAX (written in MobX). You can use this object to do whatever you want to HAX. While seemingly too powerful, here are some examples of past things to leverage this super power for good
This runs whenever a user activates / selects an element to modify in HAX. This supplies an instance of the element / DOM node that is active as well as if we are active (true) or inactive (false). This hook can be used to modify state / functional aspects of your elements just prior to it receiving activation by hax. An example use-case for this could be preventing default behavior for an element that is a clickable link (see: ebook-button ). Another possible usage is making pieces of the internal shadowRoot contenteditable , only while activated (see: meme-maker ).
This runs on all active nodes in the hax-body tag when the editing state of the HAX editor itself changes. If we are now editing, value is true , when we go to save / are no longer editing, it is false .
This hook runs after element activation in order to allow elements to supply custom editing buttons and operations to the in-context menu that hovers above active elements. You have access to the instance of the custom elements hax menu element (hax-ce-context) and can add whatever buttons you want at this time with custom callbacks. See multiple-choice for an example of how you can leverage this. multiple-choice uses this to add quick buttons for adding and removing potential answers quickly.
This runs right before nodes are converted to content in the entire hax-body. This happens when the user has triggered a save event and we are converting the DOM from real nodes into the HTML text that is to be saved / returned to a backend. This hook allows you to do any known data clean up to the element prior to it being converted to HTML. See multiple-choice for an example of taking a complex data property and converting it to innerHTML children at the time of save for progressive enhancement purposes.
This hook runs WHILE the node is being converted to text and should return a string that will be appended into the innerHTML area of the element. This is an alternative to what you could accomplish during preProcessNodeToContent but want to work with a string based response. See meme-maker for an example of using this to inject innerHTML which only is for SEO purposes.
This hook runs after preProcessNodeToContent and progressiveEnhancement and before the element is returned in the hax-save event. This runs AFTER the node has been converted to content. This is useful for forcible content clean up like regex'ing output for specific words to not leak into output. See video-player for ensuring there are no internal empty arrays for data is not a required field.
This is a hax schema element, our virtual dom node, that is about to be inserted into the hax-body. This allows for custom modification to the data that's about to be converted to a DOM node. See multiple-choice for an example of ensuring that answer data doesn't bleed through to the page. This hook runs on duplication as well as inserting a node by the user selecting the block.