Fixed nested CompositeViews by passing correct context to children

src/views/CompositeView.ts

@@ -41,6 +41,10 @@ export interface ICompositeViewPluginDesc extends IViewPluginDesc {
   linkedSelections: ILinkedSelection[];
 }
 
+export function isCompositeViewPluginDesc(desc: any): desc is ICompositeViewPluginDesc {
+  return Array.isArray(desc.elements);
+}
+
 export interface IACompositeViewOptions {
   showHeaders: boolean;
 }
@@ -49,6 +53,8 @@ export interface IACompositeViewOptions {
 export interface ICompositeInfo {
   key: string;
 
+  desc: IElementDesc;
+
   create(context: IViewContext, selection: ISelection, parent: HTMLElement, options?: any): IView;
 
   options?: any;
@@ -246,7 +252,15 @@ export class CompositeView extends EventHandler implements IView {
         if (links.length > 0 && !links.some((l) => l.fromKey === '_input' && l.toKey === d.key)) {
           s = {idtype: this.selection.idtype, range: Range.none()};
         }
-        const instance = d.create(this.context, s, helper, d.options);
+        // Fix for nested CompositeViews:
+        // Previously, nested CompositeViews were not possible, i.e. when using a CompositeView as element of a CompositeView.
+        // This is due to the fact that the context given to the children of a CompositeView is the context of the CompositeView.
+        // This of course breaks when a child is a CompositeView, as it expects its "own" desc. When you give it the parent desc, it extracts
+        // the children from the parent causing an infinite loop as it receives itself as child.
+        // I have to admit that I do not know why we give it the desc of the CompositeView parent, and not its own.
+        // The fix is to override the desc with the child desc if it is a CompositeViewDesc, such that it receives the "correct" children.
+        const patchedContext = isCompositeViewPluginDesc(d.desc) ? {...this.context, desc: d.desc} : this.context;
+        const instance = d.create(patchedContext, s, helper, d.options);
         if (links.length === 0 || links.some((l) => l.fromKey === d.key && l.toKey === '_item')) {
           instance.on(AView.EVENT_ITEM_SELECT, debounceItemSelection);
         }
@@ -461,6 +475,7 @@ export class CompositeView extends EventHandler implements IView {
       const descOptions = desc.options || {};
       return Promise.resolve(desc.loader()).then((instance) => (<ICompositeInfo>{
         key: desc.key,
+        desc,
         options: Object.assign({}, descOptions, this.options), // also pass the view options from the ViewWrapper to all views
         create: PluginRegistry.getInstance().getFactoryMethod(instance, desc.factory || 'create')
       }));