neo.mjs 10.0.0-beta.1 → 10.0.0-beta.2

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.0.0-beta.1'
+         * @member {String} version='10.0.0-beta.2'
          */
-        version: '10.0.0-beta.1'
+        version: '10.0.0-beta.2'
     }
 
     /**

package/apps/colors/view/GridContainer.mjs

@@ -81,7 +81,7 @@ class GridContainer extends BaseGridContainer {
      * @returns {Object}
      */
     colorRenderer({value}) {
-        return {cls: ['color-' + value], html: ' '}
+        return {cls: ['color-' + value], text: ' '}
     }
 }
 

package/apps/covid/view/AttributionComponent.mjs

@@ -21,7 +21,7 @@ class AttributionComponent extends Component {
          */
         vdom:
         {style: {margin: '20px'}, cn: [
-            {tag: 'h2', html: 'Attribution'},
+            {tag: 'h2', text: 'Attribution'},
             {tag: 'ul', cn: [
                 {tag: 'li', html: 'The logos were created by <a target="_blank" href="https://www.driefmeier.com/">Sebastian Driefmeier</a>. Thank you!'},
                 {tag: 'li', html: ['The logos are based on the image from <a target="_blank" href="https://phil.cdc.gov/Details.aspx?pid=23312">CDC Public Health Image Library (PHIL)</a>,</br>',

package/apps/covid/view/HeaderContainer.mjs

@@ -55,25 +55,25 @@ class HeaderContainer extends Container {
                 items: [{
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'cases'],  html:'Cases'},
+                        {cls: ['covid-numberbox-title',  'cases'],  text:'Cases'},
                         {cls: ['covid-numberbox-number', 'cases']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'active'], html:'Active'},
+                        {cls: ['covid-numberbox-title',  'active'], text:'Active'},
                         {cls: ['covid-numberbox-number', 'active']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'recovered'], html:'Recovered'},
+                        {cls: ['covid-numberbox-title',  'recovered'], text:'Recovered'},
                         {cls: ['covid-numberbox-number', 'recovered']}
                     ]}
                 }, {
                     cls : ['covid-numberbox'],
                     vdom: {cn: [
-                        {cls: ['covid-numberbox-title',  'deaths'], html:'Deaths'},
+                        {cls: ['covid-numberbox-title',  'deaths'], text:'Deaths'},
                         {cls: ['covid-numberbox-number', 'deaths']}
                     ]}
                 }, {
@@ -89,7 +89,7 @@ class HeaderContainer extends Container {
                             'data-show-count': 'true',
                             'data-size'      : 'large',
                             href             : 'https://github.com/neomjs/neo',
-                            html             : 'Star'
+                            text             : 'Star'
                         }]
                     }
                 }, {
@@ -103,7 +103,7 @@ class HeaderContainer extends Container {
                             'data-icon'      : 'octicon-heart',
                             'data-size'      : 'large',
                             href             : 'https://github.com/sponsors/tobiu',
-                            html             : 'Sponsor'
+                            text             : 'Sponsor'
                         }]
                     }
                 }]

package/apps/covid/view/MainContainerController.mjs

@@ -131,10 +131,10 @@ class MainContainerController extends ComponentController {
 
         me.summaryData = data;
 
-        container.items[0].vdom.cn[1].html = Util.formatNumber({value: data.cases});
-        container.items[1].vdom.cn[1].html = Util.formatNumber({value: data.active});
-        container.items[2].vdom.cn[1].html = Util.formatNumber({value: data.recovered});
-        container.items[3].vdom.cn[1].html = Util.formatNumber({value: data.deaths});
+        container.items[0].vdom.cn[1].text = Util.formatNumber({value: data.cases});
+        container.items[1].vdom.cn[1].text = Util.formatNumber({value: data.active});
+        container.items[2].vdom.cn[1].text = Util.formatNumber({value: data.recovered});
+        container.items[3].vdom.cn[1].text = Util.formatNumber({value: data.deaths});
 
         container.updateDepth = 2;
         container.update();
@@ -142,7 +142,7 @@ class MainContainerController extends ComponentController {
         container = me.getReference('last-update');
         vdom      = container.vdom;
 
-        vdom.html = 'Last Update: ' + new Intl.DateTimeFormat('default', {
+        vdom.text = 'Last Update: ' + new Intl.DateTimeFormat('default', {
             hour  : 'numeric',
             minute: 'numeric',
             second: 'numeric'

package/apps/covid/view/TableContainerController.mjs

@@ -224,7 +224,7 @@ class TableContainerController extends ComponentController {
 
         me.loadHistoricalData(record?.countryInfo?.iso2 || 'all');
 
-        me.getReference('historical-data-label').html = 'Historical Data (' + (record?.country || 'World') + ')';
+        me.getReference('historical-data-label').text = 'Historical Data (' + (record?.country || 'World') + ')';
     }
 
     /**

package/apps/covid/view/country/Gallery.mjs

@@ -45,24 +45,24 @@ class CountryGallery extends Gallery {
                     ]},
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', text: 'Cases'},
                             {tag: 'td', cls: ['neo-align-right']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', text: 'Cases today'},
                             {tag: 'td', cls: ['neo-align-right']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', text: 'Deaths'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', text: 'Deaths today'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', text: 'Recovered'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', text: 'Critical'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                         ]}
                     ]}
@@ -127,15 +127,15 @@ class CountryGallery extends Gallery {
         firstChild.style.width  = me.itemWidth  + 'px';
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
+        firstChild.cn[0].cn[1].text = record.country;
 
-        table.cn[0].cn[1].html = fN({value: record.cases});
-        table.cn[1].cn[1].html = fN({value: record.deaths});
-        table.cn[2].cn[1].html = fN({value: record.recovered});
+        table.cn[0].cn[1].text = fN({value: record.cases});
+        table.cn[1].cn[1].text = fN({value: record.deaths});
+        table.cn[2].cn[1].text = fN({value: record.recovered});
 
-        table.cn[0].cn[4].html = fN({value: record.todayCases});
-        table.cn[1].cn[4].html = fN({value: record.todayDeaths});
-        table.cn[2].cn[4].html = fN({value: record.critical});
+        table.cn[0].cn[4].text = fN({value: record.todayCases});
+        table.cn[1].cn[4].text = fN({value: record.todayDeaths});
+        table.cn[2].cn[4].text = fN({value: record.critical});
 
         return vdomItem;
     }

package/apps/covid/view/country/Helix.mjs

@@ -45,24 +45,24 @@ class CountryHelix extends Helix {
                     ]},
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Cases'},
+                            {tag: 'td', text: 'Cases'},
                             {tag: 'td', cls: ['neo-align-right']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Cases today'},
+                            {tag: 'td', text: 'Cases today'},
                             {tag: 'td', cls: ['neo-align-right']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Deaths'},
+                            {tag: 'td', text: 'Deaths'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Deaths today'},
+                            {tag: 'td', text: 'Deaths today'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths']}
                         ]},
                         {tag: 'tr', cn: [
-                            {tag: 'td', html: 'Recovered'},
+                            {tag: 'td', text: 'Recovered'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered']},
                             {tag: 'td', style: {width: '100%'}},
-                            {tag: 'td', html: 'Critical'},
+                            {tag: 'td', text: 'Critical'},
                             {tag: 'td', cls: ['neo-align-right', 'neo-content-critical']}
                         ]}
                     ]}
@@ -138,15 +138,15 @@ class CountryHelix extends Helix {
         vdomItem.id = me.getItemVnodeId(record[me.keyProperty]);
 
         firstChild.cn[0].cn[0].src  = Util.getCountryFlagUrl(record.country);
-        firstChild.cn[0].cn[1].html = record.country;
+        firstChild.cn[0].cn[1].text = record.country;
 
-        table.cn[0].cn[1].html = fN({value: record.cases});
-        table.cn[1].cn[1].html = fN({value: record.deaths});
-        table.cn[2].cn[1].html = fN({value: record.recovered});
+        table.cn[0].cn[1].text = fN({value: record.cases});
+        table.cn[1].cn[1].text = fN({value: record.deaths});
+        table.cn[2].cn[1].text = fN({value: record.recovered});
 
-        table.cn[0].cn[4].html = fN({value: record.todayCases});
-        table.cn[1].cn[4].html = fN({value: record.todayDeaths});
-        table.cn[2].cn[4].html = fN({value: record.critical});
+        table.cn[0].cn[4].text = fN({value: record.todayCases});
+        table.cn[1].cn[4].text = fN({value: record.todayDeaths});
+        table.cn[2].cn[4].text = fN({value: record.critical});
 
         return vdomItem;
     }

package/apps/covid/view/country/HistoricalDataTable.mjs

@@ -38,7 +38,7 @@ class HistoricalDataTable extends Container {
             renderer : function(data) {
                 return {
                     cls : ['neo-date-column', 'neo-table-cell'],
-                    html: new Intl.DateTimeFormat('default', {
+                    text: new Intl.DateTimeFormat('default', {
                         day  : 'numeric',
                         month: 'numeric',
                         year : 'numeric'

package/apps/email/view/Viewport.mjs

@@ -42,13 +42,13 @@ class Viewport extends BaseViewport {
                     iconCls: 'fa fa-home',
                     text   : 'Tab 1'
                 },
-                vdom: {html: 'Welcome to your new Neo App.'}
+                text: 'Welcome to your new Neo App.'
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text   : 'Tab 2'
                 },
-                vdom: {html: 'Have fun creating something awesome!'}
+                text: 'Have fun creating something awesome!'
             }]
         }]
     }

package/apps/form/view/SideNavList.mjs

@@ -36,7 +36,7 @@ class SideNavList extends List {
 
         return record.isHeader ? itemText : [
             {tag: 'i', cls: this.getIconCls(record)},
-            {html: itemText}
+            {text: itemText}
         ];
     }
 

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-26",
+      "datePublished": "2025-06-30",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -131,7 +131,7 @@
     "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/esm/apps/myapp/index.html"
-}, , {
+}, {
     "hidden"   : true,
     "id"       : 2,
     "image"    : "devmode/realworldApp.png",

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

@@ -132,13 +132,13 @@
     "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/HeaderToolbar.mjs

@@ -58,7 +58,7 @@ class HeaderToolbar extends Base {
                 iconCls: 'fa-brands fa-github',
                 url    : 'https://github.com/neomjs/neo',
                 tooltip: {
-                    html     : 'GitHub',
+                    text     : 'GitHub',
                     showDelay: 0,
                     hideDelay: 0
                 }
@@ -66,7 +66,7 @@ class HeaderToolbar extends Base {
                 iconCls: 'fa-brands fa-slack',
                 url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
                 tooltip: {
-                    html     : 'Join Slack',
+                    text     : 'Join Slack',
                     showDelay: 0,
                     hideDelay: 0
                 }
@@ -74,7 +74,7 @@ class HeaderToolbar extends Base {
                 iconCls: 'fa-brands fa-discord',
                 url    : 'https://discord.gg/6p8paPq',
                 tooltip: {
-                    html     : 'Join Discord',
+                    text     : 'Join Discord',
                     showDelay: 0,
                     hideDelay: 0
                 }

package/apps/portal/view/about/Container.mjs

@@ -20,8 +20,8 @@ class Container extends Base {
          * @member {Object[]} items
          */
         items: [{
-            html: 'Meet the Team',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'Meet the Team'
         }, {
             module         : MemberContainer,
             location       : 'Germany',

package/apps/portal/view/about/MemberContainer.mjs

@@ -80,7 +80,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[2].cn[1].html = value;
+            item.vdom.cn[1].cn[2].cn[1].text = value;
             item.update?.()
         }
     }
@@ -95,7 +95,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[0].html = value;
+            item.vdom.cn[1].cn[0].text = value;
             item.update?.()
         }
     }
@@ -145,7 +145,7 @@ class MemberContainer extends Container {
         if (value) {
             let item = this.items[1];
 
-            item.vdom.cn[1].cn[1].html = value;
+            item.vdom.cn[1].cn[1].text = value;
             item.update?.()
         }
     }

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

@@ -122,15 +122,15 @@ class List extends BaseList {
                     {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
                     {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
                         {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
-                            {flag: 'name', html: record.name.replace(List.nameRegEx, "$1")}
+                            {flag: 'name', html: record.name.replace(List.nameRegEx, '$1')}
                         ]},
                         {cls: ['neo-top-20'], cn: [
                             {tag: 'img', cls: ['neo-user-image'], src: `${imageBasePath}/blogAuthor/${record.authorImage}`},
                             {cls: ['neo-inner-content'], cn: [
                                 {cls: ['neo-inner-details'], flag: 'author', cn: [
-                                    {tag: 'span', cls: ['neo-bold'], html: record.author}
+                                    {tag: 'span', cls: ['neo-bold'], text: record.author}
                                 ]},
-                                {cls: ['neo-inner-details'], html: record.date}
+                                {cls: ['neo-inner-details'], text: record.date}
                             ]}
                         ]}
                     ]}
@@ -140,16 +140,16 @@ class List extends BaseList {
 
         if (record.publisher.length > 0) {
             VDomUtil.getByFlag(vdomCn[0], 'author').cn.push(
-                {vtype: 'text', html : ' in '},
-                {tag: 'span', cls: ['neo-bold'], html: record.publisher}
+                {vtype: 'text', text : ' in '},
+                {tag: 'span', cls: ['neo-bold'], text: record.publisher}
             )
         }
 
         if (record.selectedInto.length > 0) {
             vdomCn[0].cn[0].cn.splice(1, 0,
                 {cls: ['neo-absolute', 'neo-item-top-position'], cn: [
-                    {html: `Officially selected by ${record.provider} into`},
-                    {cls: ['neo-bold'], html: record.selectedInto.join('</br>')}
+                    {text: `Officially selected by ${record.provider} into`},
+                    {cls: ['neo-bold'], text: record.selectedInto.join('</br>')}
                 ]}
             )
         }

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

@@ -117,8 +117,8 @@ class List extends BaseList {
                     {cls: ['neo-top-20'], cn: [
                         {...me.createSourceLink(record)},
                         {cls: ['neo-inner-content'], cn: [
-                            {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
-                            {cls: ['neo-inner-details'], html: record.environments.join(', ')}
+                            {cls: ['neo-inner-details'], text: record.browsers.join(', ')},
+                            {cls: ['neo-inner-details'], text: record.environments.join(', ')}
                         ]}
                     ]}
                 ]}
@@ -137,8 +137,8 @@ class List extends BaseList {
         vdom = {
             tag : 'a',
             cls : ['neo-title'],
-            cn  : [{html: record.name.replace(List.nameRegEx, "$1")}],
-            href: record.url
+            href: record.url,
+            text: record.name.replace(List.nameRegEx, '$1')
         };
 
         // We can use a shorter syntax for pointing examples to neomjs.com, but not all examples have to be there.

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

@@ -46,7 +46,7 @@ class ContentBox extends Base {
      */
     afterSetContent(value, oldValue) {
         value?.forEach(item => {
-            this.vdom.cn[1].cn.push({tag: 'li', html: item})
+            this.vdom.cn[1].cn.push({tag: 'li', text: item})
         })
 
         this.update()
@@ -59,7 +59,7 @@ class ContentBox extends Base {
      * @protected
      */
     afterSetHeader(value, oldValue) {
-        this.vdom.cn[0].html = value;
+        this.vdom.cn[0].text = value;
         this.update()
     }
 

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

@@ -148,7 +148,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetHeadline(value, oldValue) {
-        this.getItem('headline').html = value
+        this.getItem('headline').text = value
     }
 
     /**
@@ -171,7 +171,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetParagraph(value, oldValue) {
-        this.getItem('paragraph').html = value
+        this.getItem('paragraph').text = value
     }
 
     /**
@@ -181,7 +181,7 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetSubHeadline(value, oldValue) {
-        this.getItem('sub-headline').html = value
+        this.getItem('sub-headline').text = value
     }
 
     /**

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

@@ -37,8 +37,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Content',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Content'
             }, {
                 iconCls: 'fas fa-people-group',
                 route  : '/about-us',
@@ -64,8 +64,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Community',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Community'
             }, {
                 iconCls: 'fa-brands fa-github',
                 text   : 'Contribute',
@@ -91,8 +91,8 @@ class FooterContainer extends Container {
             items: [{
                 module: Component,
                 cls   : ['neo-h2'],
-                html  : 'Social Media',
-                tag   : 'h2'
+                tag   : 'h2',
+                text  : 'Social Media'
             }, {
                 iconCls: 'fa-brands fa-linkedin',
                 text   : 'LinkedIn',
@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v10.0.0-beta.1'
+                text  : 'v10.0.0-beta.2'
             }]
         }],
         /**

package/apps/portal/view/home/parts/AfterMath.mjs

@@ -28,8 +28,8 @@ class AfterMath extends BaseContainer {
         }, {
             cls : ['neo-h1'],
             flex: 'none',
-            html: 'Next Steps',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'Next Steps'
         }, {
             cls : ['neo-content'],
             flex: 'none',
@@ -37,7 +37,7 @@ class AfterMath extends BaseContainer {
 
             html: `
                 <li>To learn more about Neo.mjs please dive into the <a href="#/learn">Learning Section</a> or browse the <a href="#/blog">Blog</a></li>
-                <li>To arrange a demo or to talk to an engineer email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
+                <li>To arrange a demo or to talk to an engineer, email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
                 <li>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a></li>
                 <li>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a></li>
             `

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -30,8 +30,8 @@ class MainNeo extends BaseContainer {
                 cls  : ['vector']
             }, {
                 cls : ['neo-h1'],
-                html: 'Neo.mjs',
-                tag : 'h1'
+                tag : 'h1',
+                text: 'Neo.mjs'
             }]
         }, {
             module   : MagicMoveText,
@@ -59,7 +59,7 @@ class MainNeo extends BaseContainer {
             flex: 'none',
             tag : 'h3',
 
-            html: [
+            text: [
                 'Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging ',
                 'a vast component library and harness the power of multi-threading for extreme real-time performance.'
             ].join('')

package/apps/portal/view/home/parts/References.mjs

@@ -29,13 +29,13 @@ class References extends BaseContainer {
         }, {
             cls : 'neo-h1',
             flex: 'none',
-            html: 'References',
-            tag : 'h1'
+            tag : 'h1',
+            text: 'References'
         }, {
             cls : 'neo-h2',
             flex: 'none',
-            html: 'What people think about Neo',
-            tag : 'h2'
+            tag : 'h2',
+            text: 'What people think about Neo'
         }, {
             module: Carousel,
             // will automatically change to the next extry every 5500 ms
@@ -74,10 +74,10 @@ class References extends BaseContainer {
             // each item will be created like the itemTpl structure
             itemTpl: data => [{
                 cls : 'neo-quote',
-                html: data.quote
+                text: data.quote
             }, {
                 cls : 'neo-details',
-                html: `${data.publisher} - ${data.date}`
+                text: `${data.publisher} - ${data.date}`
             }]
         }]
     }

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,
-    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;
+    regexLivePreview     = /```(javascript|html|css|json)\s+live-preview\s*\n([\s\S]*?)\n\s*```/g,
+    regexNeoComponent    = /```json\s+neo-component\s*\n([\s\S]*?)\n\s*```/g,
+    regexReadonly        = /```(javascript|html|css|json)\s+readonly\s*\n([\s\S]*?)\n\s*```/g;
 
 /**
  * @class Portal.view.learn.ContentComponent

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

@@ -33,7 +33,7 @@ class PageSectionsContainer extends Container {
         }, {
             vdom:
             {cn: [
-                {tag: 'h3', html: 'On this page'}
+                {tag: 'h3', text: 'On this page'}
             ]}
         }, {
             module   : PageSectionsList,

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

@@ -32,12 +32,12 @@ class PageSectionsList extends List {
     /**
      * @param {Object} record
      * @param {Number} index
-     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a string.
      */
     createItemContent(record, index) {
         return {
             cls : `neo-${record.tag}`,
-            html: record[this.displayField]
+            text: record[this.displayField]
         }
     }