Odoo integration

.gitignore

@@ -12,5 +12,6 @@ ehthumbs.db
 Thumbs.db
 data/
 build/
+!src/build/
 package-lock.json
 coverage/

dev/odoo-integration-dev.js

@@ -0,0 +1,14 @@
+// todo: replace this file with the actual code of the lib.
+odoo.define('web_editor.jabberwock', function(require) {
+    'use strict';
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'http://localhost:8095/odoo-integration.js';
+    document.getElementsByTagName('head')[0].appendChild(script);
+    return new Promise(resolve => {
+        script.onload = () => {
+            resolve(JWEditor);
+        };
+    });
+});

doc/odoo_integration_workflow.md

@@ -0,0 +1,29 @@
+# Odoo integration
+
+To develop Jabberwock in Odoo, follow these steps:
+1) Use the dev mode for the live reloading feature of Webpack. (optional)
+2) Build the source and include it in Odoo.
+
+## 1) Use the dev mode for the live reloading feature of Webpack.
+
+Temporarily replace the library with the following script.
+```bash
+cp dev/odoo-integration-dev.js <your_odoo_path>/addons/web_editor/static/lib/jabberwock/jabberwock.js
+```
+`odoo-integration-dev.js` will load the script `build-full.js`.
+The default loaded script is `http://localhost:8080/odoo-integration.js`.
+
+Launch the development server (the default port is 80):
+```bash
+npm run dev
+```
+
+Once finished developing, rebuild the source and put it back in Odoo.
+
+## 2) Build the source and include it in Odoo.
+
+```bash
+npm run build
+npm run build-odoo
+cp build/webpack/build/odoo-integration.js <your_odoo_path>/addons/web_editor/static/lib/jabberwock/jabberwock.js
+```

examples/demo/demo.css

@@ -29,3 +29,7 @@ jw-editor table.mondrian {
     width: 65vh;
     height: 50vh;
 }
+
+.jw_selected_image {
+    outline: 1px red solid;
+}

examples/demo/demo.ts

@@ -1,4 +1,4 @@
-import { BasicEditor } from '../../bundles/BasicEditor';
+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.xml';

examples/demo/demo.xml

@@ -1,7 +1,12 @@
+<a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto bg-primary" href="#" contenteditable="false" title="Scroll down to next section">
+  <i class="fa fa-angle-down fa-3x">&nbsp;</i>
+</a>
+
 <h1 style="text-align: center;"><i class="fab fa-opera"></i>doo
   Jabberw<i class="fab fa-opera"></i>ck Dem<i class="fab fa-opera"></i></h1>
-
 <p>
+  An image:<img src="/assets/img/s_quotes_carousel_2.jpg" />hehe
+</p>
 "<b>Jabberwocky</b>" is a nonsense poem written by Lewis Carroll about the
 killing of a creature named "the Jabberwock". It was included in his 1871 novel
 <i>Through the Looking-Glass, and What Alice Found There</i>, the sequel to

examples/jabberwockipedia/jabberwockipedia.ts

@@ -1,4 +1,4 @@
-import { BasicEditor } from '../../bundles/BasicEditor';
+import { BasicEditor } from '../../packages/bundle-basic-editor/BasicEditor';
 import { DevTools } from '../../packages/plugin-devtools/src/DevTools';
 import { DomLayout } from '../../packages/plugin-dom-layout/src/DomLayout';
 import { DomEditable } from '../../packages/plugin-dom-editable/src/DomEditable';

examples/jabberwocky/jabberwocky.ts

@@ -1,4 +1,4 @@
-import { BasicEditor } from '../../bundles/BasicEditor';
+import { BasicEditor } from '../../packages/bundle-basic-editor/BasicEditor';
 import { jabberwocky } from '../utils/jabberwocky';
 import { DevTools } from '../../packages/plugin-devtools/src/DevTools';
 import '../utils/jabberwocky.css';

examples/layout/layout.ts

@@ -1,4 +1,4 @@
-import { BasicEditor } from '../../bundles/BasicEditor';
+import { BasicEditor } from '../../packages/bundle-basic-editor/BasicEditor';
 import { jabberwocky } from '../utils/jabberwocky';
 import { DevTools } from '../../packages/plugin-devtools/src/DevTools';
 import { Toolbar } from '../../packages/plugin-toolbar/src/Toolbar';

examples/odoo/odoo.ts

@@ -1,4 +1,4 @@
-import { BasicEditor } from '../../bundles/BasicEditor';
+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 './odoo.xml';

examples/utils/jabberwocky.xml

@@ -33,4 +33,4 @@ He chortled in his joy.<br/>
 ’Twas brillig, and the slithy toves<br/>
 Did gyre and gimble in the wabe:<br/>
 All mimsy were the borogoves,<br/>
-And the mome raths outgrabe.<br/></i></p>
+And the mome raths outgrabe.<br/></i></p>

package.json

@@ -4,8 +4,9 @@
   "description": "The best editor in the world",
   "main": "src/index.ts",
   "scripts": {
-    "dev": "webpack-dev-server",
-    "build": "rm -rf build/examples; mkdir -p build/examples/; cp -r ./examples ./build; webpack",
+    "dev": "webpack-dev-server --config webpack-examples.config.js",
+    "build": "rm -rf build/examples; mkdir -p build/examples/; cp -r ./examples ./build; webpack --config webpack-examples.config.js",
+    "build-odoo": "rm -rf build/examples; mkdir -p build/examples/; cp -r ./examples ./build; webpack --config webpack-odoo.config.js",
     "perf": "karma start --include-files test/**/*.perf.ts",
     "coverage": "karma start --coverage",
     "debug": "karma start --no-browsers --debug",

packages/bundle-basic-editor/BasicEditor.ts

@@ -0,0 +1,99 @@
+import JWEditor from '../core/src/JWEditor';
+import { Parser } from '../plugin-parser/src/Parser';
+import { Html } from '../plugin-html/src/Html';
+import { Char } from '../plugin-char/src/Char';
+import { LineBreak } from '../plugin-linebreak/src/LineBreak';
+import { Heading } from '../plugin-heading/src/Heading';
+import { Paragraph } from '../plugin-paragraph/src/Paragraph';
+import { List } from '../plugin-list/src/List';
+import { Indent } from '../plugin-indent/src/Indent';
+import { ParagraphNode } from '../plugin-paragraph/src/ParagraphNode';
+import { LineBreakNode } from '../plugin-linebreak/src/LineBreakNode';
+import { Span } from '../plugin-span/src/Span';
+import { Bold } from '../plugin-bold/src/Bold';
+import { Italic } from '../plugin-italic/src/Italic';
+import { Underline } from '../plugin-underline/src/Underline';
+import { Inline } from '../plugin-inline/src/Inline';
+import { Link } from '../plugin-link/src/Link';
+import { Divider } from '../plugin-divider/src/Divider';
+import { Image } from '../plugin-image/src/Image';
+import { Subscript } from '../plugin-subscript/src/Subscript';
+import { Superscript } from '../plugin-superscript/src/Superscript';
+import { Blockquote } from '../plugin-blockquote/src/Blockquote';
+import { Youtube } from '../plugin-youtube/src/Youtube';
+import { Table } from '../plugin-table/src/Table';
+import { Metadata } from '../plugin-metadata/src/Metadata';
+import { Renderer } from '../plugin-renderer/src/Renderer';
+import { Keymap } from '../plugin-keymap/src/Keymap';
+import { Align } from '../plugin-align/src/Align';
+import { Pre } from '../plugin-pre/src/Pre';
+import { TextColor } from '../plugin-textcolor/src/TextColor';
+import { BackgroundColor } from '../plugin-backgroundcolor/src/BackgroundColor';
+import { Layout } from '../plugin-layout/src/Layout';
+import { DomLayout } from '../plugin-dom-layout/src/DomLayout';
+import { DomEditable } from '../plugin-dom-editable/src/DomEditable';
+import { VNode } from '../core/src/VNodes/VNode';
+import { Input } from '../plugin-input/src/Input';
+import { Dialog } from '../plugin-dialog/src/Dialog';
+
+import template from './basicLayout.xml';
+import './basicLayout.css';
+
+export class BasicEditor extends JWEditor {
+    constructor() {
+        super();
+
+        this.configure({
+            defaults: {
+                Container: ParagraphNode,
+                Separator: LineBreakNode,
+            },
+            plugins: [
+                [Parser],
+                [Renderer],
+                [Layout],
+                [Keymap],
+                [Html],
+                [DomLayout],
+                [DomEditable],
+                [Inline],
+                [Char],
+                [LineBreak],
+                [Heading],
+                [Paragraph],
+                [List],
+                [Indent],
+                [Span],
+                [Bold],
+                [Italic],
+                [Underline],
+                [Link],
+                [Divider],
+                [Image],
+                [Subscript],
+                [Superscript],
+                [Blockquote],
+                [Youtube],
+                [Table],
+                [Metadata],
+                [Align],
+                [Pre],
+                [TextColor],
+                [BackgroundColor],
+                [Input],
+                [Dialog],
+            ],
+        });
+        this.configure(DomLayout, {
+            components: [
+                {
+                    id: 'editor',
+                    render(editor: JWEditor): Promise<VNode[]> {
+                        return editor.plugins.get(Parser).parse('text/html', template);
+                    },
+                },
+            ],
+            componentZones: [['editor', 'root']],
+        });
+    }
+}