neo.mjs 10.0.0-alpha.4 → 10.0.0-beta.1

package/apps/portal/resources/data/examples_dist_prod.json

@@ -1,145 +1,144 @@
 [{
     "id"          : 24,
     "environments": ["Desktop", "Mobile"],
-    "image"       : "devmode/liquid-glass.png",
-    "name"        : "Liquid Glass effect",
-    "sourceUrl"   : "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
-    "url"         : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/production/apps/myapp/index.html"
-}, {
-    "id"          : 23,
-    "environments": ["Desktop", "Mobile"],
     "image"       : "devmode/bigData.png",
     "name"        : "Buffered Data Grid with 5M cells",
     "sourceUrl"   : "examples/grid/bigData",
     "url"         : "dist/production/examples/grid/bigData/index.html"
 }, {
-    "id"           : 22,
+    "id"           : 23,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/production/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 21,
+    "id"       : 22,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/production/examples/calendar/basic/index.html"
 }, {
-    "id"       : 20,
+    "id"       : 21,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/production/examples/component/helix/index.html"
 }, {
-    "id"           : 19,
+    "id"           : 20,
     "image"        : "devmode/mwCoronaGallery.png",
     "name"         : "Multi Window Covid Gallery",
     "sharedWorkers": true,
     "sourceUrl"    : "examples/component/multiWindowCoronaGallery",
     "url"          : "dist/production/examples/component/multiWindowCoronaGallery/index.html"
 }, {
-    "id"       : 18,
+    "id"       : 19,
     "image"    : "devmode/offscreenCanvas.png",
     "name"     : "OffscreenCanvas",
     "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
     "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/production/apps/myapp/index.html"
 }, {
-    "id"           : 17,
+    "id"           : 18,
     "image"        : "devmode/sharedOffscreenCanvas.png",
     "name"         : "Multi-Window OffscreenCanvas",
     "sharedWorkers": true,
     "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
     "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
 }, {
-    "id"           : 16,
+    "id"           : 17,
     "image"        : "devmode/multi_window_dd.png",
     "name"         : "Multi-Window Drag&Drop",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/shareddialog",
     "url"          : "dist/production/apps/shareddialog/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 16,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/production/examples/tab/container/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 15,
     "image"    : "devmode/model-component-example.png",
     "name"     : "State Provider Example",
     "sourceUrl": "examples/stateProvider/advanced",
     "url"      : "dist/production/examples/stateProvider/advanced/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 14,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/production/examples/dialog/"
 }, {
-    "id"           : 12,
+    "id"           : 13,
     "image"        : "dist_prod/colorsApp.png",
     "name"         : "Colors Dashboard",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/colors",
     "url"          : "dist/production/apps/colors/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 12,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/production/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/production/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "dist/production/examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/production/examples/component/gallery/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/production/examples/tableFiltering/"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/production/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/production/examples/form/field/date/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/production/examples/form/field/combobox/index.html"
 }, {
-    "id"           : 3,
+    "id"           : 4,
     "environments" : ["Desktop", "Mobile"],
     "image"        : "dist_prod/portalApp.png",
     "name"         : "Portal App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/portal",
     "url"          : "dist/production/apps/portal/index.html"
-}, {
+},{
+    "id"       : 3,
+    "image"    : "devmode/liquid-glass.png",
+    "name"     : "Liquid Glass effect",
+    "sourceUrl": "https://github.com/neomjs/liquid-glass-demo/blob/main/apps/myapp/view/GlassComponent.mjs",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-liquid-glass-demo/dist/production/apps/myapp/index.html"
+}, , {
     "hidden"   : true,
     "id"       : 2,
     "image"    : "devmode/realworldApp.png",

package/apps/portal/view/blog/List.mjs

@@ -174,7 +174,7 @@ class List extends BaseList {
             record   = store.getAt(index);
             name     = record.name.replace(List.nameRegEx, "$1");
 
-            item.style = item.style || {};
+            item.style ??= {};
 
             if (emptyValue) {
                 itemName.html = name;

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v10.0.0-alpha.4'
+                html  : 'v10.0.0-beta.1'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -5,9 +5,9 @@ import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 const
     labCloseRegex        = /<!--\s*\/lab\s*-->/g,
     labOpenRegex         = /<!--\s*lab\s*-->/g,
-    preLivePreviewRegex  = /<pre\s+data-code-livepreview\s*>([\s\S]*?)<\/pre>/g,
-    preJsRegex           = /<pre\s+data-code-readonly\s*>([\s\S]*?)<\/pre>/g,
-    preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
+    regexLivePreview     = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n```/g,
+    regexNeoComponent    = /```json\s+neo-component\s*\n([\s\S]*?)\n```/g,
+    regexReadonly        = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent
@@ -164,48 +164,48 @@ class ContentComponent extends Component {
             {appName, windowId} = me,
             path                = me.getStateProvider().getData('contentPath'),
             pagesFolder         = path.includes('/learn/') ? '' : 'pages/',
-            baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
+            baseConfigs, content, data, html, instance, neoComponents, neoDivs;
 
         path += `${pagesFolder + record.id.replaceAll('.', '/')}.md`;
 
         if (record.isLeaf && path) {
-            baseConfigs   = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
-            data          = await fetch(path);
-            content       = await data.text();
-            content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
-            content       = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
-            modifiedHtml  = await me.highlightPreContent(content);
+            baseConfigs = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
+            data        = await fetch(path);
+            content     = await data.text();
+            // Update content sections (modifies markdown content with h2/h3 tags and IDs)
+            content = me.updateContentSectionsStore(content);
+            content = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
+            // Initialize maps for custom components and live previews
             neoComponents = {};
             neoDivs       = {};
-
-            // Replace <pre neo-component></pre> with <div id='neo-component-x'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractNeoComponents(modifiedHtml, neoComponents);
-
-            // Replace <pre data-neo></pre> with <div id='neo-preview-1'/>
-            // and create a map keyed by ID, whose value is the javascript
-            // from the <pre>
-            modifiedHtml = me.extractLivePreviewContent(modifiedHtml, neoDivs);
-
-            html = marked.parse(modifiedHtml);
-            html = me.insertLabDivs(html);
-
-            me.toggleCls('lab', record.name?.startsWith('Lab:'));
-
-            me.html = html;
+            // Process custom Neo.mjs component blocks (synchronous)
+            content = me.processNeoComponentsBlocks(content, neoComponents);
+            // Process custom Live Preview blocks (synchronous)
+            content = me.processLivePreviewBlocks(content, neoDivs);
+            // Process custom Readonly Code blocks (asynchronous due to HighlightJS)
+            // This will replace the markdown fenced block with the highlighted HTML <pre> tag.
+            content = await me.processReadonlyCodeBlocks(content, windowId);
+            // Parse the (now modified) markdown content into HTML
+            // This content string now contains standard markdown PLUS the HTML divs/pres we injected.
+            html = marked.parse(content);
+            // Insert lab divs (these are markdown comments, so process on the final HTML)
+            html = me.insertLabDivs(html); // Keep existing method
+
+            me.toggleCls('lab', record.name?.startsWith('Lab:')); // Keep existing method
+
+            me.html = html; // Set the component's HTML
 
             await me.timeout(Neo.config.environment === 'development' ? 100 : 150);
 
+            // Create instances for custom components and live previews (keep existing logic)
             Object.keys(neoComponents).forEach(key => {
                 instance = Neo.create({
                     ...baseConfigs,
-                    className: 'Neo.component.Base',
+                    className: 'Neo.component.Base', // Adjust if specific component classes are implied by JSON
                     parentId : key,
                     ...neoComponents[key]
                 });
-
-                me.customComponents.push(instance)
+                me.customComponents.push(instance);
             });
 
             Object.keys(neoDivs).forEach(key => {
@@ -213,10 +213,9 @@ class ContentComponent extends Component {
                     ...baseConfigs,
                     module  : LivePreview,
                     parentId: key,
-                    value   : neoDivs[key]
+                    value   : neoDivs[key].code // Pass the extracted code content
                 });
-
-                me.livePreviews.push(instance)
+                me.livePreviews.push(instance);
             });
 
             Neo.main.addon.IntersectionObserver.observe({
@@ -224,87 +223,10 @@ class ContentComponent extends Component {
                 id        : me.id,
                 observe   : ['.neo-h2', '.neo-h3'],
                 windowId  : me.windowId
-            })
+            });
         }
     }
 
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractNeoComponents(htmlString, map) {
-        // 1. Replace <pre data-neo-component> with <div id='neo-learn-content-component-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preNeoComponentRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('learn-content-component');
-            map[key] = JSON.parse(preContent);
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param {String} htmlString
-     * @param {Object} map
-     * @returns {String}
-     */
-    extractLivePreviewContent(htmlString, map) {
-        // 1. Replace <pre data-neo> with <div id='neo-pre-live-preview-x'/>
-        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        return htmlString.replace(preLivePreviewRegex, (match, preContent) => {
-            const key = Neo.core.IdGenerator.getId('pre-live-preview');
-            map[key] = preContent;
-            return `<div id="${key}"></div>`
-        })
-    }
-
-    /**
-     * @param preContent
-     * @param token
-     * @param id
-     * @returns {Object}
-     */
-    getHighlightPromise(preContent, token, id) {
-        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
-        return Neo.main.addon.HighlightJS.highlightAuto({html: preContent, windowId: this.windowId})
-            .then(value => ({after: `<pre data-javascript id="${id}">${value}</pre>`, token}))
-    }
-
-    /**
-     * @param {String} htmlString
-     * @returns {Promise<*>}
-     */
-    async highlightPreContent(htmlString) {
-        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
-        // 2. When all promises are resolved, use their values to replace the tokens.
-
-        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
-
-        // Create an array to store promises for each replacement
-        const replacementPromises = [];
-        let count = 0;
-
-        // Replace the content with tokens, and create a promise to update the corresponding content
-        let updatedHtml = htmlString.replace(preJsRegex, (match, preContent) => {
-            const token = `__NEO-PRE-TOKEN-${++count}__`;
-            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
-            return token
-        });
-
-        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
-
-        // Wait for all replacement promises to resolve
-        let replacements = await Promise.all(replacementPromises)
-
-        // Replace each token with the resolved content
-        replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
-
-        // Return the final updated HTML string
-        return updatedHtml
-    }
-
     /**
      * @param {String} inputString
      * @returns {String}
@@ -335,6 +257,75 @@ class ContentComponent extends Component {
         }
     }
 
+    /**
+     * Extracts live preview code blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted code content keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processLivePreviewBlocks(contentString, map) {
+        return contentString.replace(regexLivePreview, (match, language, code) => {
+            const key = Neo.core.IdGenerator.getId('pre-live-preview');
+            map[key] = {code, language};
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Extracts Neo.mjs component config blocks from Markdown content before marked.js parsing.
+     * Replaces them with HTML placeholders.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {Object} map A map to store the extracted JSON config keyed by placeholder ID.
+     * @returns {String} The modified Markdown content string with placeholders.
+     */
+    processNeoComponentsBlocks(contentString, map) {
+        return contentString.replace(regexNeoComponent, (match, code) => {
+            const key = Neo.core.IdGenerator.getId('learn-content-component');
+            map[key] = JSON.parse(code);
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * Highlights readonly code blocks using HighlightJS.
+     * Replaces the Markdown fenced block with the highlighted HTML <pre> tag.
+     * @param {String} contentString The raw Markdown content string.
+     * @param {String} windowId The ID of the current window for HighlightJS.
+     * @returns {Promise<String>} A promise that resolves to the modified Markdown string with highlighted HTML.
+     */
+    async processReadonlyCodeBlocks(contentString, windowId) {
+        let replacementPromises = [],
+            count               = 0,
+            replacements;
+
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        let updatedContent = contentString.replace(regexReadonly, (match, language, code) => {
+            const token = `__NEO-READONLY-TOKEN-${++count}__`;
+            // Call HighlightJS.highlightAuto for each block.
+            // The result will be HTML. We'll wrap it in a <pre data-javascript> later.
+            replacementPromises.push(
+                Neo.main.addon.HighlightJS.highlightAuto({html: code, windowId})
+                    .then(highlightedHtml => ({
+                        after: `<pre data-javascript id="pre-readonly-${Neo.core.IdGenerator.getId()}">${highlightedHtml}</pre>`,
+                        token: token
+                    }))
+            );
+
+            return token; // Replace the original Markdown block with a temporary token
+        });
+
+        // Wait for all highlighting promises to resolve
+        replacements = await Promise.all(replacementPromises);
+
+        // Replace each token with the resolved highlighted HTML content
+        replacements.forEach(replacement => {
+            updatedContent = updatedContent.replace(replacement.token, replacement.after)
+        });
+
+        return updatedContent
+    }
+
     /**
      * Updates the contentSections VM store and replaces ## with h2 tags
      * @param {String} content

package/buildScripts/buildThemes.mjs

@@ -12,7 +12,7 @@ import * as sass    from 'sass';
 const
     __dirname    = path.resolve(),
     cwd          = process.cwd(),
-    requireJson  = path => JSON.parse(fs.readFileSync((path))),
+    requireJson  = path => JSON.parse(fs.readFileSync(path)),
     packageJson  = requireJson(path.resolve(cwd, 'package.json')),
     insideNeo    = packageJson.name.includes('neo.mjs'),
     neoPath      = path.resolve(insideNeo ? './' : './node_modules/neo.mjs/'),

package/examples/grid/animatedRowSorting/Viewport.mjs

@@ -52,12 +52,12 @@ class Viewport extends BaseViewport {
             store       : MainStore,
             wrapperStyle: {maxWidth: '902px'},
 
-            columnDefaults: {
-                width: 200
+            bodyConfig: {
+                animatedRowSorting: true
             },
 
-            viewConfig: {
-                animatedRowSorting: true
+            columnDefaults: {
+                width: 200
             },
 
             columns: [

package/examples/grid/bigData/ControlsContainer.mjs

@@ -207,7 +207,7 @@ class ControlsContainer extends Container {
      */
     onBufferColumnRangeChange(data) {
         if (data.oldValue) {
-            this.grid.view.bufferColumnRange = parseInt(data.value.id)
+            this.grid.body.bufferColumnRange = parseInt(data.value.id)
         }
     }
 
@@ -216,7 +216,7 @@ class ControlsContainer extends Container {
      */
     onBufferRowRangeChange(data) {
         if (data.oldValue) {
-            this.grid.view.bufferRowRange = parseInt(data.value.id)
+            this.grid.body.bufferRowRange = parseInt(data.value.id)
         }
     }
 
@@ -263,7 +263,7 @@ class ControlsContainer extends Container {
      * @param {Object} data
      */
     onSelectionModelChange(data) {
-        this.grid.view.selectionModel = data.component.selectionModel
+        this.grid.body.selectionModel = data.component.selectionModel
     }
 
     /**

package/examples/grid/bigData/GridContainer.mjs

@@ -17,6 +17,13 @@ class GridContainer extends BaseGridContainer {
          * @member {Number} amountColumns_=50
          */
         amountColumns_: 50,
+        /**
+         * @member {Object} bodyConfig
+         */
+        bodyConfig: {
+            bufferColumnRange: 3,
+            bufferRowRange   : 5
+        },
         /**
          * Default configs for each column
          * @member {Object} columnDefaults
@@ -29,14 +36,7 @@ class GridContainer extends BaseGridContainer {
         /**
          * @member {Object[]} store=MainStore
          */
-        store: MainStore,
-        /**
-         * @member {Object} viewConfig
-         */
-        viewConfig: {
-            bufferColumnRange: 3,
-            bufferRowRange   : 5
-        }
+        store: MainStore
     }
 
     /**

package/examples/grid/cellEditing/MainContainer.mjs

@@ -114,6 +114,10 @@ class MainContainer extends ConfigurationViewport {
             store       : MainStore,
             wrapperStyle: {maxWidth: '1002px'},
 
+            bodyConfig: {
+                selectionModel: CellModel
+            },
+
             columnDefaults: {
                 editable: true,
                 width   : 200
@@ -160,11 +164,7 @@ class MainContainer extends ConfigurationViewport {
                 dataField: 'githubId',
                 editable : false,
                 text     : 'Github Id (Non-editable)'
-            }],
-
-            viewConfig: {
-                selectionModel: CellModel
-            }
+            }]
         }
     }
 

package/examples/grid/container/MainContainer.mjs

@@ -88,6 +88,10 @@ class MainContainer extends ConfigurationViewport {
                 width: 200
             },
 
+            bodyConfig: {
+                selectionModel: CellModel
+            },
+
             columns: [
                 {dataField: 'firstname', text: 'Firstname'},
                 {dataField: 'lastname',  text: 'Lastname'},
@@ -95,10 +99,6 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'country',   text: 'Country'}
             ],
 
-            viewConfig: {
-                selectionModel: CellModel
-            },
-
             wrapperStyle: {
                 height: '250px'
             }

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -51,6 +51,10 @@ class Viewport extends BaseViewport {
             bind     : {store: 'stores.mainStore'},
             reference: 'grid',
 
+            bodyConfig: {
+                highlightModifiedCells: true
+            },
+
             columnDefaults: {
                 width: 200
             },
@@ -66,11 +70,7 @@ class Viewport extends BaseViewport {
                     handler: 'editButtonHandler',
                     text   : 'Edit'
                 }}
-            ],
-
-            viewConfig: {
-                highlightModifiedCells: true
-            }
+            ]
         }]
     }
 }

package/examples/table/cellEditing/MainContainer.mjs

@@ -113,7 +113,7 @@ class MainContainer extends ConfigurationViewport {
             parentId   : this.id,
             store      : MainStore,
 
-            viewConfig: {
+            bodyConfig: {
                 selectionModel: CellModel
             },
 

package/examples/table/container/MainContainer.mjs

@@ -115,7 +115,7 @@ class MainContainer extends ConfigurationViewport {
             id   : 'myTableStoreContainer',
             store: MainStore,
 
-            viewConfig: {
+            bodyConfig: {
                 selectionModel: CellModel
             },
 
@@ -139,7 +139,7 @@ class MainContainer extends ConfigurationViewport {
                                 text    : 'Edit'
                             }));
 
-                        me.view.updateDepth = -1;
+                        me.body.updateDepth = -1;
 
                         return button.createVdomReference()
                     }
@@ -168,7 +168,7 @@ class MainContainer extends ConfigurationViewport {
                                 }
                             }));
 
-                        me.view.updateDepth = -1;
+                        me.body.updateDepth = -1;
 
                         return button.createVdomReference()
                     }