useEditorContext composable in n8n codebase.

In this article, we review useEditorContext in n8n codebase. You will learn: Composables in Vue useEditorContext as composable in n8n. Composables in Vue In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic. When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates stateless logic: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example lodash and date-fns , which you may have heard of. By contrast, stateful logic involves managing state that changes over time. A simple example would be tracking the current position of the mouse on a page. In real-world scenarios, it could also be more complex logic such as touch gestures or connection status to a database. This is just like React Hooks. Learn more about Composables . useEditorContext as composable in n8n. Now that we understand what a composable is in Vue.js, btw, n8n editor-ui is written in Vue, let's understand how useEditorContext is used. Below is a comment I picked from useEditorContext.ts file. /** * Per - editor host overrides for the current editor context . * * Editor hosts ( e . g . the Instance AI artifact preview ) scope their embedded * editor by providing ` EditorEnabledFeaturesKey ` - the capabilities the host * supersedes . AI features can only be restricted: an explicit ` false ` turns one * off , while omitted ( or ` true `) features fall back to their store values . * ` readOnly ` is a direct flag - ` true ` forces the canvas read - only . When no host * provides the key , AI features fall back to their store values and the canvas * is editable (` readOnly ` is ` false `) . * ` executionSuccessToasts ` / ` executionErrorToasts ` are direct flags too - each * ` true `