[FIX] demo: make odoo field work again

Author: Goaman

examples/demo-odoo-fields/demo-odoo-fields.ts

@@ -1,43 +1,42 @@
+import { Parser } from './../../packages/plugin-parser/src/Parser';
 import { BasicEditor } from '../../packages/bundle-basic-editor/BasicEditor';
 import { FontAwesome } from '../../packages/plugin-fontawesome/src/FontAwesome';
 import { DevTools } from '../../packages/plugin-devtools/src/DevTools';
 import template from './demo-odoo-fields.xml';
 import './demo-odoo-fields.css';
-import { Toolbar } from '../../packages/plugin-toolbar/src/Toolbar';
 import { DomLayout } from '../../packages/plugin-dom-layout/src/DomLayout';
+import { JWEditorConfig, Loadables } from '../../packages/core/src/JWEditor';
+import { Layout } from '../../packages/plugin-layout/src/Layout';
+import { VNode } from '../../packages/core/src/VNodes/VNode';
+import JWEditor from '../../packages/core/src/JWEditor';
 
+import layout from './layout.xml';
 import '../utils/fontawesomeAssets';
 
 const target = document.getElementById('contentToEdit');
 target.style.paddingTop = '40px';
 target.style.paddingLeft = '8px';
 target.innerHTML = template;
 
-const editor = new BasicEditor();
+const editor = new BasicEditor({ editable: target });
 editor.load(FontAwesome);
 editor.load(DevTools);
 editor.configure(DomLayout, {
     location: [target, 'replace'],
 });
-editor.configure(Toolbar, {
-    layout: [
-        [
-            [
-                'ParagraphButton',
-                'Heading1Button',
-                'Heading2Button',
-                'Heading3Button',
-                'Heading4Button',
-                'Heading5Button',
-                'Heading6Button',
-                'PreButton',
-            ],
+const config: JWEditorConfig & { loadables: Loadables<Layout> } = {
+    loadables: {
+        components: [
+            {
+                id: 'editor',
+                render(editor: JWEditor): Promise<VNode[]> {
+                    return editor.plugins.get(Parser).parse('text/html', layout);
+                },
+            },
         ],
-        ['BoldButton', 'ItalicButton', 'UnderlineButton'],
-        ['AlignLeftButton', 'AlignCenterButton', 'AlignRightButton', 'AlignJustifyButton'],
-        ['OrderedListButton', 'UnorderedListButton'],
-        ['IndentButton', 'OutdentButton'],
-    ],
-});
+        componentZones: [['editor', ['root']]],
+    },
+};
+editor.configure(config);
 
 editor.start();

examples/demo-odoo-fields/layout.xml

@@ -0,0 +1,13 @@
+<jw-editor>
+    <t-range><t t-zone="tools"/></t-range>
+    <jw-header><t t-zone="tools"/></jw-header>
+    <jw-body><t t-zone="main"/></jw-body>
+    <jw-footer>
+        <t t-zone="status"/>
+    </jw-footer>
+    <t-dialog>
+        <t t-zone="dialog"/>
+        <t t-zone="default"/>
+    </t-dialog>
+    <t t-zone="debug"/>
+</jw-editor>