dbm 1.1.1 → 1.1.3

package/react/admin/EditPage.js

@@ -7,42 +7,51 @@ export default class EditPage extends Dbm.react.BaseObject {
 
         let page = this.context.page;
 
-        this.item.setValue("title", page.title);
-        this.item.setValue("navigationName", page.navigationName);
-        this.item.setValue("content", page.content);
-        this.item.setValue("description", page["meta/description"]);
-        this.item.setValue("url", page.url);
+        let editorGroup = new Dbm.graphapi.webclient.admin.EditorGroup();
+        this.item.setValue("editorGroup", editorGroup);
+        this.item.requireProperty("changed", false).connectInput(editorGroup.item.properties.changed);
 
-        let descriptionLength = Dbm.flow.updatefunctions.basic.length(this.item.properties.description);
+        let id = page.id;
+        let itemEditor = editorGroup.getItemEditor(id);
 
-        this.item.requireProperty("descriptionLength", 0).connectInput(descriptionLength.output.properties.length);
+        itemEditor.addFieldEditor("title", page.title, "title");
+        itemEditor.addFieldEditor("navigationName", page.navigationName); //METODO: add update encoding
+        itemEditor.addFieldEditor("content", page.content, "content");
+        itemEditor.addEditor("url", page.url, Dbm.graphapi.webclient.admin.SaveFunctions.setUrl, "url");
 
-        //METODO: add editors
+        let descriptionEditor = itemEditor.addFieldEditor("meta/description", page["meta/description"], "meta/description");
+        let descriptionLength = Dbm.flow.updatefunctions.basic.length(descriptionEditor.item.editValue.value);
+        this.item.requireProperty("descriptionLength", 0).connectInput(descriptionLength.output.properties.length);
     }
 
     _save() {
         console.log("_save");
 
         let page = this.context.page;
-        let id = page.id;
-        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
-        //console.log(this.item.content);
-        //console.log(this.item.content.blocks[1].data.text);
-
-        graphApi.editItem(id, [
-            {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
-            {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
-            {"type": "setField", "data": {"value": this.item.navigationName, "field": "navigationName"}},
-            {"type": "setField", "data": {"value": this.item.description, "field": "meta/description"}},
-			{"type": "setField", "data": {"value": (new Date()).toISOString(), "field": "lastModified"}},
-            {"type": "setUrl", "data": {"value": this.item.url}}
-        ], ["content", "title", "url", "meta/description"]);
+
+        let editorGroup = this.item.editorGroup;
+
+        let saveData = editorGroup.getSaveData();
+        let itemSaveData = saveData.getItemSaveData(page.id);
+
+        itemSaveData.setField("lastModified", (new Date()).toISOString());
+        itemSaveData.createChange("clearCache", {});
+
+        console.log(editorGroup, saveData);
+
+        saveData.save();
     }
 
     _generateSeoSummary() {
+
+        let page = this.context.page;
+
+        let editorGroup = this.item.editorGroup;
+        let itemEditor = editorGroup.getItemEditor(page.id);
+
         let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
 
-        let request = graphApi.requestData("admin/seoSummary", {"value": {"title": this.item.title, "content": this.item.content}});
+        let request = graphApi.requestData("admin/seoSummary", {"value": {"title": itemEditor.getEditor("title").item.editValue.getValue(), "content": itemEditor.getEditor("content").item.editValue.getValue()}});
         Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._dataLoaded.bind(this), [request]));
 
     }
@@ -50,66 +59,78 @@ export default class EditPage extends Dbm.react.BaseObject {
     _dataLoaded(aRequest) {
         let summary = Dbm.objectPath(aRequest, "data.seoSummary");
 
-        this.item.description = summary;
+        let page = this.context.page;
+
+        let editorGroup = this.item.editorGroup;
+        let itemEditor = editorGroup.getItemEditor(page.id);
+
+        itemEditor.getEditor("meta/description").item.editValue.item.value = summary;
     }
 
     _renderMainElement() {
 
+        let page = this.context.page;
+        
+        let editorGroup = this.item.editorGroup;
+        let itemEditor = editorGroup.getItemEditor(page.id);
+
         return React.createElement("div", {},
-            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
-                React.createElement("div", {},
-                    React.createElement("label", {className: "standard-field-label"},
-                        "Page title"
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": editorGroup, "itemEditor": itemEditor}},
+                React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
+                    React.createElement("div", {},
+                        React.createElement("label", {className: "standard-field-label"},
+                            "Page title"
+                        ),
+                        React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("title").item.editValue.value, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"}),
+                    ),
+                    React.createElement("div", {className: "spacing standard"}),
+                    React.createElement("div", {},
+                        React.createElement("label", {className: "standard-field-label"},
+                            "Navigation name"
+                        ),
+                        React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("navigationName").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Name showed in menues and breadcrumbs"}),
+                    ),
+                    React.createElement("div", {className: "spacing standard"}),
+                    React.createElement("div", {},
+                        React.createElement("label", {className: "standard-field-label"},
+                            "Url"
+                        ),
+                        React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("url").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Url"}),
                     ),
-                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.title, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"}),
                 ),
                 React.createElement("div", {className: "spacing standard"}),
-                React.createElement("div", {},
+                React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
                     React.createElement("label", {className: "standard-field-label"},
-                        "Navigation name"
+                        "Seo description"
                     ),
-                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.navigationName, className: "standard-field standard-field-padding full-width", placeholder: "Name showed in menues and breadcrumbs"}),
+                    React.createElement(Dbm.react.form.FormField, {"value": itemEditor.getEditor("meta/description").item.editValue.value, className: "standard-field standard-field-padding full-width", placeholder: "Description"}),
+                    React.createElement("div", {className: "spacing micro"}),
+                    React.createElement("div", {className: "flex-row justify-between"},
+                        React.createElement("div", {className: "flex-row-item"},
+                            React.createElement("div", {onClick: () => {this._generateSeoSummary()}, className: "action-button action-button-padding"}, "Generate"),
+                        ),
+                        React.createElement("div", {className: "flex-row-item"},
+                            Dbm.react.text.text(this.item.properties.descriptionLength),
+                            " / ",
+                            "155"
+                        )
+                    )
                 ),
                 React.createElement("div", {className: "spacing standard"}),
-                React.createElement("div", {},
+                React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
                     React.createElement("label", {className: "standard-field-label"},
-                        "Url"
-                    ),
-                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.url, className: "standard-field standard-field-padding full-width", placeholder: "Url"}),
-                ),
-            ),
-            React.createElement("div", {className: "spacing standard"}),
-            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
-                React.createElement("label", {className: "standard-field-label"},
-                    "Seo description"
-                ),
-                React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.description, className: "standard-field standard-field-padding full-width", placeholder: "Description"}),
-                React.createElement("div", {className: "spacing micro"}),
-                React.createElement("div", {className: "flex-row justify-between"},
-                    React.createElement("div", {className: "flex-row-item"},
-                        React.createElement("div", {onClick: () => {this._generateSeoSummary()}}, "Generate"),
+                        "Content"
                     ),
-                    React.createElement("div", {className: "flex-row-item"},
-                        Dbm.react.text.text(this.item.properties.descriptionLength),
-                        " / ",
-                        "155"
+                    React.createElement("div", {},
+                        React.createElement(Dbm.react.admin.editor.Editor, {"value": itemEditor.getEditor("content").item.editValue.value}),
                     )
-                )
-            ),
-            React.createElement("div", {className: "spacing standard"}),
-            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
-                React.createElement("label", {className: "standard-field-label"},
-                    "Content"
                 ),
-                React.createElement("div", {},
-                    React.createElement(Dbm.react.admin.editor.Editor, {"value": this.item.properties.content}),
-                )
-            ),
-            React.createElement("div", {className: "spacing standard"}),
-            React.createElement("div", {className: "flex-row justify-center"},
-                React.createElement("div", {className: "flex-row-item"},
-                    React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._save()}},
-                        "Save"
+                React.createElement("div", {className: "spacing standard"}),
+                React.createElement("div", {className: "save-all-position"},
+                    React.createElement(Dbm.react.area.OpenCloseExpandableArea, {open: this.item.properties.changed},
+                        React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._save()}},
+                            "Save all changes"
+                        )
                     )
                 )
             )

package/react/admin/SelectImageFromLibrary.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class SelectImageFromLibrary extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("loaded", false);
+        this.item.requireProperty("rows", []);
+
+        this._selectCommand = Dbm.commands.callFunction(this._selected.bind(this), [Dbm.react.source.contextVariable("item")]);
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+        let request = graphApi.requestRange(
+            [
+                {"type": "byObjectType", "objectType": "image"}
+            ],
+            ["name", "image"]
+        );
+
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._dataLoaded.bind(this), [request]));
+    }
+
+    _dataLoaded(aRequest) {
+        console.log("_dataLoaded");
+        console.log(aRequest);
+
+        //METODO: create rows
+        this.item.rows = aRequest.items;
+
+        this.item.loaded = true;
+    }
+
+    _selected(aImage) {
+        console.log("_selected");
+        console.log(aImage);
+
+        Dbm.commands.performCommands(this.getPropValue("selectedCommands"), this, aImage);
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement("div", {className: "flex-row flex-wrap"},
+                    React.createElement(Dbm.react.area.List, {items: this.item.properties.rows},
+                        React.createElement(Dbm.react.interaction.CommandButton, {command: this._selectCommand},
+                            React.createElement(Dbm.react.image.WidthScaledImage, {image: Dbm.react.source.contextVariable("item"), targetWidth: 120, className: "background-contain image-library-preview image-library-margins"})
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/admin/editor/Editor.js

@@ -138,6 +138,8 @@ export default class Editor extends Dbm.react.BaseObject {
             }
 
             tools = {...tools, ...toolsFromConfig};
+
+            console.log(">>>>>>>", content);
 		
 		    const editor = new window.EditorJS({ 
                 minHeight: 0,

package/react/admin/editor/fields/ImageField.js

@@ -2,19 +2,27 @@ import React from "react";
 import Dbm from "../../../../index.js";
 
 export default class ImageField extends Dbm.react.BaseObject {
+
     _construct() {
         super._construct();
 
         this._valueChangedBound = this._valueChanged.bind(this);
         this._objectChangedBound = this._objectChanged.bind(this);
         this._callback_fileChangedBound = this._callback_fileChanged.bind(this);
+        this._altTextChangedBound = this._altTextChanged.bind(this);
 
         let fieldName = this.getPropValue("name");
 
+        
+
         let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
 
         Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
 
+        let altText = Dbm.objectPath(this.item.value, "altText");
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("altText", altText), Dbm.commands.callFunction(this._altTextChangedBound));
+
         Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
 
         let imageElement = React.createElement("div", {className: "flex-row small-item-spacing"},
@@ -22,20 +30,137 @@ export default class ImageField extends Dbm.react.BaseObject {
                 React.createElement(Dbm.react.image.WidthScaledImage, {"image": Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName), targetWidth: 120, className: "editor-preview background-contain"}),
             ),
             React.createElement("div", {className: "flex-row-item flex-resize"},
-                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"))
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url")),
+                React.createElement("div", {className: "spacing small"}),
+                React.createElement("div", {},
+                    React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".id"), checkType: "invert/default"},
+                        React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._addToLibrary.bind(this))},
+                            React.createElement("div", {className: "action-button action-button-padding"},
+                                "Add to library"
+                            )
+                        )
+                            
+                    ),
+                    React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".id")},
+                        React.createElement(Dbm.react.form.FormField, {value: this.item.properties.altText, className: "standard-field standard-field-padding full-width"}),
+                        React.createElement("div", {className: "spacing micro"}),
+                        React.createElement("div", {className: "flex-row small-item-spacing"},
+                            React.createElement("div", {className: "flex-row-item"},
+                                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._generateAltText.bind(this))},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
+                                        "Generate"
+                                    )
+                                )
+                            ),
+                            React.createElement("div", {className: "flex-row-item"},
+                                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._saveAltTextToLibrary.bind(this))},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
+                                        "Save to library"
+                                    )
+                                )
+                            )
+                        )
+                    )
+                ),
             ),
             React.createElement("div", {className: "flex-row-item flex-no-resize"},
                 React.createElement("div", {onClick: () => {this.removeImage()}}, "Remove")
             )
         );
 
-        let uploadElement = React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"});
+        this.item.requireProperty("selectMode", "overview");
+
+        let uploadElement = React.createElement("div", {className: "flex-row small-item-spacing halfs"},
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"})
+            ),
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.setProperty(this.item.properties.selectMode, "library")}, 
+                    React.createElement("div", {className: "flex-row-item"}, "Select from library")
+                )
+            ),
+        );
+
+        let libraryElement = React.createElement("div", {}, 
+            React.createElement(Dbm.react.admin.SelectImageFromLibrary, {selectedCommands: [
+                Dbm.commands.callFunction(this._imageSelected.bind(this), [Dbm.core.source.event()]),
+                Dbm.commands.setProperty(this.item.properties.selectMode, "overview")
+            ]})
+        );
 
-        let elementSwitch =Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.value).setDefaultValue(imageElement).addCase(null, uploadElement);
+        let selectSwitch = Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.selectMode).setDefaultValue(uploadElement).addCase("library", libraryElement);
+
+        let selectElement = React.createElement("div", {},
+            React.createElement(Dbm.react.area.InsertElement, {element: selectSwitch.output.properties.value})
+        );
+
+        let elementSwitch = Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.value).setDefaultValue(imageElement).addCase(null, selectElement);
 
         this.item.requireProperty("element", null).connectInput(elementSwitch.output.properties.value);
     }
 
+    _addToLibrary() {
+        let imageData = this.item.value;
+
+        let objectType = "image";
+
+        let parsedUrl = URL.parse(imageData.url);
+        
+        let fileName = parsedUrl.pathname.substring(parsedUrl.pathname.lastIndexOf("/")+1);
+
+        let changes = [
+            {"type": "setIdentifier", "data": {"value": imageData.identifier, "field": "name"}},
+            {"type": "setField", "data": {"value": fileName, "field": "name"}},
+            {"type": "setField", "data": {"value": fileName, "field": "originalFileName"}},
+            {"type": "setField", "data": {"value": parsedUrl.pathname, "field": "path"}},
+            {"type": "setField", "data": {"value": imageData.url, "field": "url"}},
+            {"type": "setField", "data": {"value": imageData.resizeUrl, "field": "resizeUrl"}},
+        ];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem([objectType], "public", changes);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._libraryImageCreated.bind(this), [request]));
+    }
+
+    _libraryImageCreated(aRequest) {
+        //console.log("_libraryImageCreated");
+        //console.log(aRequest);
+
+        let imageData = {...this.item.value};
+
+        imageData.id = aRequest.item.id;
+        this.item.value = imageData;
+    }
+
+    _generateAltText() {
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        let request = graphApi.requestData("admin/altText", {"id": this.item.value.id});
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._altTextLoaded.bind(this), [request]));
+
+    }
+
+    _altTextLoaded(aRequest) {
+        this.item.altText = Dbm.objectPath(aRequest, "data.altText");
+    }
+
+    _saveAltTextToLibrary() {
+        let changes = [
+            {"type": "setField", "data": {"value": this.item.altText, "field": "altText"}},
+        ];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.editItem(this.item.value.id, changes);
+    }
+
+    _imageSelected(aImage) {
+        //console.log("_imageSelected");
+        //console.log(aImage);
+
+        let imageData = {id: aImage.id, url: aImage.url, resizeUrl: aImage.resizeUrl, identifier: aImage.identifier, altText: aImage.altText};
+        this.item.value = imageData;
+    }
+
     _getObjectData() {
         let fieldName = this.getPropValue("name");
 
@@ -61,6 +186,20 @@ export default class ImageField extends Dbm.react.BaseObject {
 
         editorData.data = newData;
         this.context.moduleData.editorData.editorBlock.dataUpdated();
+
+        if(newValue) {
+            this.item.altText = newValue.altText;
+        }
+        
+    }
+
+    _altTextChanged() {
+
+        if(this.item.value && this.item.value.altText !== this.item.altText) {
+            let newValue = {...this.item.value};
+            newValue.altText = this.item.altText;
+            this.item.value = newValue;
+        }
     }
 
     _objectChanged() {
@@ -121,7 +260,7 @@ export default class ImageField extends Dbm.react.BaseObject {
                     headers: new Headers(headers),
                     body: aFile
                  }).then(() => {
-                    this.item.value = {url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier};
+                    this.item.value = {id: aPreSign.data.id, url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier};
                     console.log("Uploaded", this.item.value);
                     //METODO: send update to editor
                  })

package/react/admin/index.js

@@ -1,4 +1,5 @@
 export {default as CreatePage} from "./CreatePage.js";
 export {default as EditPage} from "./EditPage.js";
+export {default as SelectImageFromLibrary} from "./SelectImageFromLibrary.js";
 
 export * as editor from "./editor/index.js";

package/react/area/OpenCloseExpandableArea.js

@@ -25,7 +25,7 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 		//console.log(aEnvelope, this, this.item.element);
 		
 		if(aEnvelope === 0) {
-			return {"height": "0px", "overflow": "hidden"};
+			return {"height": "0px", "overflow": "hidden", "display": "none", "visibility": "hidden"};
 		}
 		else if(aEnvelope === 1 || !this.item.element) {
 			return {};

package/react/image/CoverScaledImage.js

@@ -21,6 +21,11 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
 
         let newProps = this._copyProps({src: url});
 
+        let altText = Dbm.objectPath(image, "altText");
+        if(altText) {
+            newProps["alt"] = altText;
+        }
+
         let elementType = this.getPropValue("elementType");
         if(elementType) {
             newProps["elementType"] = elementType;

package/react/image/Image.js

@@ -11,6 +11,7 @@ export default class Image extends Dbm.react.BaseObject {
         let isDiv = (elementType !== "img");
         if(isDiv) {
             delete aProps["src"];
+            delete aProps["alt"];
         }
     }
 
@@ -26,7 +27,15 @@ export default class Image extends Dbm.react.BaseObject {
             };
             let className = "image";
 
-            return this._createMainElement("div", {style: imageStyle, className: className}, this.getPropValue("children"));
+            let props = {style: imageStyle, className: className};
+
+            let altText = this.getPropValue("alt");
+            if(altText) {
+                props["role"] = "img";
+                props["aria-label"] = altText;
+            }
+
+            return this._createMainElement("div", props, this.getPropValue("children"));
         }
         else {
             let className = "image";

package/react/image/WidthScaledImage.js

@@ -19,6 +19,11 @@ export default class WidthScaledImage extends Dbm.react.BaseObject {
 
         let newProps = this._copyProps({src: url});
 
+        let altText = Dbm.objectPath(image, "altText");
+        if(altText) {
+            newProps["alt"] = altText;
+        }
+
         let elementType = this.getPropValue("elementType");
         if(elementType) {
             newProps["elementType"] = elementType;

package/react/modules/index.js

@@ -1 +1,11 @@
-export {default as ModuleCreator} from "./ModuleCreator.js";
+import Dbm from "../../index.js";
+
+export {default as ModuleCreator} from "./ModuleCreator.js";
+
+export const addModuleCreator = function(aName, aElement) {
+    let module = new Dbm.react.modules.ModuleCreator();
+    module.setMainElement(aElement);
+    module.item.register("moduleCreators/" + aName);
+
+    return module;
+}

package/react/text/index.js

@@ -12,9 +12,9 @@ export let text = function(aText) {
     return createElement(Dbm.react.text.Text, {text: aText});
 }
 
-export let htmlText = function(aText, aElementType = "span") {
+export let htmlText = function(aText, aElementType = "span", aAdditionalProps = {}) {
     if(typeof(aText) === "string") {
         //return createElement(aElementType, {"dangerouslySetInnerHTML": {__html: aText}});
     }
-    return createElement(Dbm.react.text.HtmlText, {text: aText, elementType: aElementType});
+    return createElement(Dbm.react.text.HtmlText, {text: aText, elementType: aElementType, ...aAdditionalProps});
 }

package/site/BrowserUpdater.js

@@ -0,0 +1,64 @@
+import Dbm from "../index.js";
+
+export default class BrowserUpdater extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.setValue("titleSuffix", "");
+        this.item.setValue("pageData", null);
+
+		Dbm.flow.addUpdateCommand(this.item.properties.pageData, Dbm.commands.callFunction(this._pageDataUpdated.bind(this)));
+    }
+
+	setTitleSuffix(aSuffix, aDelimiter = " - ") {
+		this.item.titleSuffix = aDelimiter + aSuffix;
+
+		return this;
+	}
+
+	_trackPage(aUrl) {
+		//console.log("_trackPage");
+		
+		let trackingController = Dbm.getInstance().repository.getItem("trackingController").controller;
+		if(trackingController) {
+			trackingController.trackPage(aUrl);
+		}
+	}
+
+	_pageDataUpdated() {
+
+		let title = Dbm.objectPath(this.item.pageData, "page.title") + this.item.titleSuffix;
+		document.title = title;
+		{
+			let element = document.querySelector('meta[property="og:title"]');
+			if(element) {
+				element.setAttribute("content", title);
+			}
+		}
+		
+
+		let description = Dbm.objectPath(this.item.pageData, "page.meta/description");
+		{
+			let element = document.querySelector('meta[name="description"]');
+			if(element) {
+				element.setAttribute("content", description);
+			}
+		}
+		
+		{
+			let element = document.querySelector('meta[property="og:description"]');
+			if(element) {
+				element.setAttribute("content", description);
+			}
+		}
+		
+
+		//METODO: set canonical
+
+		//METODO: set structured data
+
+		window.scrollTo(0, 0);
+
+		this._trackPage(document.location.href);
+	}
+}