2 files changed, 112 insertions, 2 deletions
diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/keyboard.js b/addons/web_editor/static/src/js/wysiwyg/plugin/keyboard.js
index 0cb451c100d..3ab6a5f0317 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/keyboard.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/keyboard.js
@@ -969,13 +969,13 @@ var KeyboardPlugin = AbstractPlugin.extend({
         var pointA = this.context.invoke('HelperPlugin.makePoint', startNode, 0);
         pointA = dom.nextPointUntil(pointA, function (point) {
             return self.context.invoke('HelperPlugin.isVisibleText', point.node);
-        });
+        }) || pointA;
         var endNode = $contents.length ? $contents[$contents.length - 1] : unbreakable;
         var endOffset = $contents.length ? dom.nodeLength($contents[$contents.length - 1]) : 1;
         var pointB = this.context.invoke('HelperPlugin.makePoint', endNode, endOffset);
         pointB = dom.prevPointUntil(pointB, function (point) {
             return self.context.invoke('HelperPlugin.isVisibleText', point.node);
-        });
+        }) || pointB;
         range.sc = pointA.node;
         range.so = pointA.offset;
         range.ec = pointB.node;
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 76f167e0a7d..de51b9d8a37 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -272,3 +272,113 @@ a.o_underline {
         text-decoration: underline;
     }
 }
+
+// ACE EDITOR
+.o_ace_view_editor {
+    background: $o-we-ace-color;
+    color: white;
+    display: flex;
+    flex-flow: column nowrap;
+    opacity: 0.97;
+
+    .o_ace_view_editor_title {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        padding: $grid-gutter-width/4;
+
+        >.o_ace_type_switcher>button::after {
+            @include o-caret-down;
+            margin-left: 4px;
+        }
+
+        >* {
+            flex: 0 0 auto;
+            margin: 0 $grid-gutter-width/4;
+
+            &.o_include_option {
+                display: flex;
+                align-items: center;
+                font-size: 11px;
+
+                >.custom-control {
+                    margin-right: $grid-gutter-width/4;
+                }
+            }
+
+            &.o_res_list {
+                flex: 1 1 auto;
+                min-width: 60px;
+            }
+        }
+    }
+
+    #ace-view-id {
+        flex: 0 0 auto;
+        padding: $grid-gutter-width/4 $grid-gutter-width/2;
+        background-color: lighten($o-we-ace-color, 10%);
+    }
+
+    #ace-view-editor {
+        @mixin ace-line-error-mixin {
+            content: "";
+            z-index: 1000;
+            display: block;
+            background-color: theme-color('danger');
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        height: 70%; // in case flex is not supported
+        flex: 1 1 auto;
+
+        .ace_gutter {
+            display: block !important; // display even with aria-hidden
+            cursor: ew-resize;
+
+            .ace_gutter-cell.o_error {
+                position: relative;
+
+                &::after {
+                    @include o-position-absolute(-100%, 0, -100%, 0);
+                    @include ace-line-error-mixin;
+                }
+            }
+        }
+
+        .ace_resize_bar {
+            @include o-position-absolute($right: 0);
+            width: 25px;
+            height: 100%;
+            cursor: ew-resize;
+        }
+
+        .ace_scroller.o_error::after {
+            @include o-position-absolute(0, auto, 0, 0);
+            width: 3px;
+            @include ace-line-error-mixin;
+        }
+    }
+}
+
+.o_ace_select2_dropdown {
+    width: auto !important;
+    padding-top: 4px;
+    font-family: monospace !important;
+
+    >.select2-results {
+        max-height: none;
+        max-height: 70vh;
+
+        .select2-result-label {
+            padding-top: 1px;
+            padding-bottom: 2px;
+
+            >.o_ace_select2_result {
+                padding: 0;
+                font-size: 12px;
+                white-space: nowrap;
+            }
+        }
+    }
+}