Commit Graph
3547 Commits
Author SHA1 Message Date
David Monjoie f163958330 [REF] web_editor: merge insertion commands into one
Prior to this commit, we had three insertion commands:
* insertText: takes a string and insert a text node containing it
* insertHtml: takes a string, convert it to elements on the fly and insert them
* insertFragment: takes a fragment element and insert it in the dom

With this commit, we now have a single one polymorphic command `insert` that
accepts two types of arguments:
* string: inserts a text node with the provided string as text
* node:  insert the provided node in the dom

The new `insert` command does **not** support the previous case of `insertHtml`
which used to convert string into html on the fly. No more magically hidden
conversions ! No more need to construct a fragment yourself like was needed for
`insertFragent` either. If you need to convert string into html, notably for
hardcoded fixed html, you can use the `parseHTML` util which returns a frament
containing the parsed nodes which can be given to `insert` directly..

closes odoo/odoo#99536

Related: odoo/enterprise#31081
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-09-06 21:23:49 +02:00
David Monjoie 2220ff36a1 [FIX] web_editor: move table resizing handlers to editable
closes odoo/odoo#99597

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-09-06 10:58:31 +02:00
Sébastien Geelen (sge) ce8076566b [FIX] web_editor: traceback selection null in FF
In Firefox only :
In some case (editor in page but not visible) the
`document.getSelection` sometimes return `null` instead
of an empty selection object. We add some check to ensure
we avoid unnecessary traceback.

task-2971126

closes odoo/odoo#99511

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-09-06 10:58:19 +02:00
Nasreddin Boulif (bon) 533ccf7fb0 [FIX] web[_editor]: Apply RTL position to translate button
Steps to reproduce:

  - Install Inventory
  - Open any product
  - Switch to RTL language
  - Edit the product
  - Try to translate field "Internal Note"

Issue:

  Button is not displayed correctly (nearly hidden).
  Issue also present with wysiwyg or codeview editors.

Cause:

  Applying style `right: 5px` to the button without taking into account
  if layout direction.

Solution:

  On translate button:
  - Apply direction left for side-space if RTL, else right.
  - If wysiwyg is enabled, add it after the buttons in the sidebar.

opw-2962790

closes odoo/odoo#99567

X-original-commit: 56f620ff65ca9c1e5d9a64f5280ea16fd469c87d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-09-05 23:51:09 +02:00
Soukéina Bojabza cc406afcea [IMP] web_editor, website: add a grid layout
This commit adds the possibility to use a grid to move and resize
columns inside some building blocks.

More precisely, for the majority of the building blocks having columns,
it is now possible to toggle between the current layout (= normal mode)
and the grid layout (= grid mode). The grid mode can be triggered in
two ways:
	- by using the "Grid" button in the options (when available),
	- by dragging a column using the move handle.

The toggle places the different columns in the grid as close as
possible as how they were placed in normal mode.

The normal mode is toggled back by clicking on the "Cols" button (when
available).
Since the move handle is now used to trigger the grid mode, the columns
in normal mode are now moved using the arrows.

NB: to avoid any confusion with the word 'column' in the explanation
below, the BS column will be called 'grid item' and the grid column
will be 'column'.

When in grid mode, the building block is a grid with 12 columns and a
number of rows which depends on the height of the grid items.
This mode offers the following functionalities:

- Moving a grid item:
When a grid item is dragged, it can be placed anywhere in the grid. If
it is dragged towards the bottom, new rows are added in the grid to
increase its height and to place the grid item lower. These added rows
are removed when it is dragged towards the top.

A grid item can also be placed over an other item (-> they can overlap)
and their order can be changed using the two new buttons to place an
item in front of/behind all the others.

A grid item can be moved from a grid to another, and also from a grid
to a building block in normal mode.

- Resizing a grid item:
A grid item can be resized vertically, horizontally and diagonally with
the help of the grid. When resized towards the bottom, new rows are
added in the grid and they are removed if it is towards the top (like
with the drag and drop).

- Adding elements:
The "Add Elements" option allows the user to add as many images, text
blocks or buttons as wanted in the grid.

Inner contents can still be dragged and dropped inside a grid item.

- Changing the padding of the grid items:
The padding option allows to change the vertical/horizontal padding of
all the grid items at the same time.

- Mobile view:
When in mobile view, the grid items are not in a grid anymore (the
display is back to flex) but they keep their grid properties. They
cannot be resized, nor dragged and dropped but they can be moved using
the arrows. By moving this way, it does not impact the desktop view.

task-2825241

closes odoo/odoo#93144

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-09-04 19:25:43 +02:00
Soukéina Bojabzaandqsm-odoo ca215a5bdf [IMP] web_editor: update UI when clicking on mobile preview
Now trigger an UI update for all the options when clicking on the mobile
preview button. This is at least important for the next commit in this
PR to update the visibility of the different overlay elements as some
will be shown in desktop and some other on mobile.

task-2825241

Part-of: odoo/odoo#93144
Co-authored-by: qsm-odoo <qsm@odoo.com>
2022-09-04 19:25:43 +02:00
Soukéina Bojabza 815d1f775c [IMP] web_editor: add support for CSS variables to selectStyle
When adding an option, using data-select-style with a CSS variable in
data-css-property does not work. This commit adds the support for the
use of these variables.

task-2825241

Part-of: odoo/odoo#93144
2022-09-04 19:25:42 +02:00
Benjamin Vray 8d49241836 [IMP] website, web_editor: add an "on scroll" option for animations
This commit adds an "on scroll" option for animations. In addition to
being triggered when they appear in the viewport, animations can now
also be triggered based on page scroll.

Animations are also improved in this commit, we add "intensity" option
and the dropdown with the list of animations has been split by adding a
new dropdown to choose the "direction" of the animations.

task-2862761

closes odoo/odoo#94119

Related: odoo/upgrade#3858
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-09-04 12:34:01 +02:00
Benjamin Vray dc8dac57d5 [IMP] web_editor: add a display value option on the we-range widget
This commit adds an option on the we-range widget to display the set
value right next to it.

task-2862761

Part-of: odoo/odoo#94119
2022-09-04 12:34:00 +02:00
shsa-odoo 8c8d283286 [FIX] web_editor: changing header style keep its text alignment
Before this commit:

changing header style, changes the alignment of the selection

After this commit:

Now after applying header on selection it doesnot changes its alignment.

Task-2641462

closes odoo/odoo#99358

X-original-commit: da8d2669b03e1016dc05f031a2a7ac840541962e
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-09-01 09:23:20 +02:00
Younn Olivier edc4a09cef [FIX] web_editor, website: leave edit mode from any website component
This commit reworks the way the edit mode is left, from the client
action. It does 2 things:
1/ It keeps the SnippetsMenu as long as the iframe is reloading. Once
everything is ready, the SnippetsMenu is removed with a transition.
2/ It prompts the "Discard your changes" modal when switching language in
edit mode.

1/ Before this commit, the WysiwygAdapter was dismounted before
reloading the iframe. It was simpler this way, because the OdooEditor
has set some listeners on the editable document, which will crash during
a reload of the iframe.
Now, in a leaveEditMode method, the WysiwygAdapter will make a copy of
the snippet's menu html element, and display that skeleton while the
editor is destroyed.
It will also check if the editable is dirty and prompt a
modal to the user if needed, as it was before.
Some of the code to display that "fake" snippets menu is shared with the
Editor component which uses it to unmount and remount the WysiwygAdapter
while reloading the iframe (in a _getDummySnippetsEl method).

2/ With that, the quit method, passed as a prop to the WysiwygAdapter,
and played in the new leaveEditMode method, is updated with two
parameters: an onLeave function that will be played when the component
is unmounted, and a reloadIframe boolean.
As the WysiwygAdapter listens to a new 'LEAVE-EDIT-MODE' event using
these parameters, it allows for any website component to request leaving
the edit mode, with a reload or not, and execute an action after that.
This fixes [1], which was leaving the edit mode without going through
the WysiwygAdapter, and so, without checking if the editable was dirty
or not (i.e. without prompting the "Discard your changes" modal).

Related to https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

[1]: https://github.com/odoo/odoo/commit/11429329b8dea2dd0b2496dc8c1c8627751cccff

task-2687506

Part-of: odoo/odoo#97408
2022-08-31 22:13:20 +02:00
shsa-odoo e379c62848 [FIX] web_editor: allow to convert a list element into a paragraph block
Before this commit:

Conversion of list element to paragraph block was not possible, as Text from
command-list was only changing the tag of a selected element, not the list tag.

After this commit:

Now list element can be converted to a paragraph block when the Text block is
selected.

Task-2826472

closes odoo/odoo#99325

X-original-commit: 96ac829e0dc512350f5a828702c20d44219cc933
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-31 21:12:15 +02:00
David Monjoie d80f7a3b73 [FIX] web_editor: fix alignment buttons not working
These are buttons that happen to be inside dropdowns so the
preventDefault must be done in that case otherwise the selection of the
user is lost and the edition command cannot work.

Steps to reproduce:
- Select some text
- Try to use the justify buttons that are inside the text alignment
  dropdown in the toolbar

task-id 2964314

closes odoo/odoo#99300

X-original-commit: 8a124a9342fc0f7091b78b45d9b7fe13db472927
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-31 18:53:57 +02:00
Achraf (abz) 31f389b983 [FIX] *: Adapt old custom-control class of Bootstrap
* = hr_holidays, mail, sale, web, web_editor, website, website_forum,
website_payment, website_sale

https://getbootstrap.com/docs/5.1/migration/

replacing `custom-control` by `form-check` because in bs4 this class had
a use which is not the case in bs5.

closes odoo/odoo#98965

Related: odoo/enterprise#30768
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
2022-08-31 16:05:20 +02:00
Benoit Socias ccf8e8906f [FIX] web_editor: force Chrome to display image when it loses it
In some situation, Chrome "loses" an already loaded lazy-loaded image
when it is moved across nodes in the DOM. This typically happens when
wrapping an image inside a link.
Note that the DOM is actually correct: if the page is saved it then
displays it correctly.

This commit detects if this problem happens when adding a link on an
image, and forces Chrome to re-display the image by re-specifying its
`src` attribute. No alternative solution was found.

Steps to reproduce:
- Use a brand new incognito Chrome window. (Make sure you closed any
previously opened incognito Chrome window before)
- Drop a "Text - Image" snippet.
- Save.
- Edit.
- Select image.
- Press "CTRL+K".
=> The image was not displayed anymore.

task-2962619

closes odoo/odoo#98889

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-31 16:05:07 +02:00
Benoit Socias 5c81185dab [FIX] web_editor: differentiate images from text within Chrome iframe
Since [1] when the website UI was moved to the backend, the edited page
is inside an iframe in Chrome. Conditions based on instanceof are not
reliable anymore: the element's type is specific to the document inside
which it was created. Because of this,
`targetEl instanceof HTMLElement` is `true` when the snippet was dragged
from the options menu - because both `targetEl` and `HTMLElement` are
the ones from the main document where the editor options panel is.
But it is `false` if the page was loaded because the `targetEl` is of
a type from the iframe's document.

We cannot use `targetEl.ownerDocument.defaultView.HTMLElement` because
the `ownerDocument` is the current one to which the target belongs - not
the one where it was created. So, a full condition would have to look
like this:
```js
(targetEl instanceof this.odooEditor.document.defaultView.HTMLElement
                || targetEl instanceof HTMLElement)
```
That is pretty verbose, so I check the `nodeType` instead.

Steps to reproduce:
- Use Chrome.
- Drop a "Text - Image" snippet.
- Save.
- Edit.
- Select image.
- Press "CTRL+K".
=> An `<a class="oe_edited_link">` is created instead of triggering the
image link tools - as if it was a text selection (except the text link
tool is not available).

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2962619

Part-of: odoo/odoo#98889
2022-08-31 16:05:07 +02:00
Antoine Guenet c203ddf610 [FIX] web_editor: fix table mousemove edge cases
Prevents calling `querySelector` on `undefined` on mousemove in document
because of failing to check for the existence of an object, makes sure
to restrict to the editable area, and that the table ui always starts
invisible.

closes odoo/odoo#99255

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-31 09:32:01 +02:00
Antoine Guenet e639005a5f [FIX] web_editor: correct TablePicker positioning and events in iframe
The TablePicker didn't take into account the position of its parent
iframe when positioning itself, and failed to bind its events on the
document in which it was attached. This led to wrong positioning and
interaction failures.

closes odoo/odoo#99208

X-original-commit: 3bb0aaaa0833e3d72fbb07e47e42441e293babb7
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-30 21:25:19 +02:00
Younn Olivier a574833055 [FIX] web_editor, website: unlock save/discard buttons on save failure
Before this commit, when saving a page website would fail (for a
validation error, for example), the "Save" and "Discard" buttons of the
SnippetsMenu were not re-enabled, and the edition was lost.

This was visible following this flow:
- Go on a job form view,
- Duplicate it,
- Go to its website page,
- Edit the title to remove "(copy)",
- Click on save,
=> There is a validation error (there cannot be two jobs with the same
title), the page was not saved and the user cannot access the
"Save" and "Discard" buttons to continue the edition anymore.

To fix that, the "after" callback of the SnippetsMenu _buttonClicked
method (which will re-enable the buttons) is added after or as the
onFailure callback of the "request_save" event.

Related to https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2687506

closes odoo/odoo#98352

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-30 00:46:35 +02:00
Younn Olivier e4d7fbfca8 [FIX] web_editor, website: keep the text selection when changing columns
It was decided with [1] to keep the text selection, if there was one,
when changing a snippet's option.
It was not working for the layout_column option:
- Drop a text snippet,
- Click on the first paragraph (the text is selected),
- Change the number of columns,
=> The text selection is lost.

To add some columns on snippets like the s_text_block which has no rows
and columns, the layout_column option will first wrap its content into a
set of row and column, which will remove the selection.
To fix that, the selection is restored after wrapping the snippet's
content.

The same thing is done when removing all columns from a snippet (and
unwrapping its content).

Related to https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

[1]: https://github.com/odoo/odoo/commit/e8112e2865ca449c4df9cd6147e9e24c4c6dcd41

task-2687506

Part-of: odoo/odoo#98352
2022-08-30 00:46:35 +02:00
Romain Derie c5a10d2cd7 [FIX] web_editor: prevent sizing to trigger changes events on focus
Before this commit, when one was clicking/focusing an element which was
receiving the sizing option(s), it would directly trigger some onchanges
internal events, even if no changes were done yet.
One of those events was `change_column_size` directly called on the
steps snippets options.

That event was then listened by the steps options and was making the
connector to be reloaded.

While it was useless as there were no real changes yet (just focused),
it was also leading to a traceback if one was clicking on an outdated
steps snippet, for instance after a migration from v15.
In saas-15.1, the connectors were improved with [1] and became svg
elements instead of pseudo elements.
The internal method reloading the connector thus can't find those
selectors on an outdated snippet.

This commit now splits the code in 2, to extract the firing of the
onchange events when there is actually some changes.

This will allow to click on outdated steps snippet without having a
traceback as the code won't try to reload the connectors anymore.
That outdated block will then be marked as such in the right panel and
the user will be able to delete it to recreate it if needed.

Remember than without this commit, since there would be a traceback, the
whole current page edition / changes would simply be lost.

[1]: https://github.com/odoo/odoo/commit/aba31e9f2d8a44ce1586403f2a621a6caeed57b4

opw-2895569

closes odoo/odoo#99014

X-original-commit: 66213cfb33f4545d4c70af1a72c3db47ca687e92
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2022-08-27 03:34:12 +02:00
Antoine Guenet f35f62599d [REF] web_editor: remove add(Row|Column)(Left|Right|Above|Below)
The commands to add rows and columns in certain positions were
superfluous as commands to add rows and columns suffice if you pass them
a position argument.

Part-of: odoo/odoo#92200
2022-08-26 17:16:33 +02:00
Antoine Guenet aca5aea475 [FIX] web_editor: prevent triggering color_leave after color_picked
When the user picks a color, the colorpicker closes, triggering
color_leave. This is conceptually wrong and can cause issues as it
reverts the current history step.

Part-of: odoo/odoo#92200
2022-08-26 17:16:33 +02:00
Antoine Guenet 7a64a04421 [ADD] web_editor: add UI for tables
This adds a menu to manipulate table rows and columns when hovering
over them. Hovering over the first row shows the menu for the hovered
column.
Hovering over the first column shows the menu for the hovered row.
The buttons in the menu allow the user to add/move/remove rows/columns.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:32 +02:00
Antoine Guenet aaea489f6d [ADD] web_editor: apply colors to whole selected table cells
With this, when whole table cells are selected and the user picks a
color in the toolbar's colorpicker, that color is applied to the whole
cell rather than to the text only.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:32 +02:00
Antoine Guenet f3cff78472 [ADD] web_editor: allow drag and drop table resizing
This allows the user to grab table borders in order to resize its rows
and columns.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:32 +02:00
Antoine Guenet d8ec51f47a [ADD] web_editor: when hovering a table border, use the resize cursors
This adds the feature of showing the appropriate resize cursor depending
on which border (vertical or horizontal) is hovered in a table.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:32 +02:00
Antoine Guenet 3d9be78fbc [ADD] web_editor: support gdocs style selection in table
This adds the possibility to select whole cells, rectangularly rather
than line per line from left to right then top to bottom.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:31 +02:00
Antoine Guenet 7da2b1f2a8 [FIX] web_editor: properly size new rows added with TAB
New rows added with TAB in a table were missing a <br> in each cell,
making them appear less tall.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:31 +02:00
Antoine Guenet 3da301fcb2 [IMP] web_editor: change selection color in editable
Update the blue text selection color to #bad3fc.

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:31 +02:00
Antoine Guenet 68999cd95f [IMP] web_editor: restyle tables in editor
- reduce the default row height to get a padding of .5rem instead of .75
- use a darker grey for table border color

task-2858455

Part-of: odoo/odoo#92200
2022-08-26 17:16:31 +02:00
Antoine Guenet d3d4443e13 [FIX] web_editor: always apply checklist class on convert p to checklist
When converting a paragraph to a checklist, we first apply the checklist
class and then take the paragraph's attributes and apply it to the new
list. If said attributes included the "class" attribute, it wrote over
the checklist class.

Part-of: odoo/odoo#92200
2022-08-26 17:16:30 +02:00
Antoine Guenet d2200e1088 [FIX] web_editor: trigger selectionchange in tests
When the editor's test utils set the selection, they did not trigger the
selectionchange event, which means the editor's listener didn't get
called.

Part-of: odoo/odoo#92200
2022-08-26 17:16:30 +02:00
Antoine Guenet 2b7b279218 [FIX] web_editor: prevent wrong DOM operations when editable not in DOM
`getDeepRange` fetched a range on potentially the wrong document and
`getTraversedNodes` created a node iterator on potentially the wrong
document, when the editable was not in the DOM.

Part-of: odoo/odoo#92200
2022-08-26 17:16:30 +02:00
Antoine Guenet 49de251a7b [FIX] web_editor: ensure editor is properly destroyed after each test
If an error was thrown during a call to `testEditor` (eg, a test
failed), we never went through the code that destroys the editor and
cleans the DOM. This catches any error to throw it only at the end of
the function.

Part-of: odoo/odoo#92200
2022-08-26 17:16:30 +02:00
Sébastien Geelen (sge) d32a8c53c2 [IMP] web,web_editor,mass_mailing,sms: new dynamic placeholder
Introduce a new Dynamic Placeholder Generator
in mass mailing and SMS creation.

Using a specific character (#) in subject or via the PowerBox in body
we open a field selector popup, which can be use to select
the wanted field and enter a default value. on validation, the dynamic
placeholder will be inserted in the corresponding input/editable.

task-2154624

closes odoo/odoo#71878

Related: odoo/enterprise#30333
Related: odoo/upgrade#3766
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-26 17:16:10 +02:00
Sébastien Geelen (sge) 7587f50140 [FIX] web_editor: more robust getRangePosition
Ensure getRangePosition do not crash if
the current selection is collapsed.

task-2154624

Part-of: odoo/odoo#71878
2022-08-26 17:16:10 +02:00
Sébastien Geelen (sge) 09be8678bb [FIX] web_editor: fix t-out support
Ensure <t-out> tag inside the editable area are
not considered as no content or empty.

task-2154624

Part-of: odoo/odoo#71878
2022-08-26 17:16:09 +02:00
Benoit Socias 375f4dff1c [FIX] web_editor, *: clean previously shown link in link popover
*: web_tour, test_website

Since [1] when the link popover was introduced, when the URL of a link
was made empty, an validation error appeared by the previously shown URL
did still appear inside the popover.

After this commit the previously shown link is replaced by a message
that indicates that no URL is specified.
The telephone and envelope icons are now also always removed when the
URL is change: they used to be only toggled, which made it possible to
make them appear and disappear by updating an email address or a phone
number.

Steps to reproduce:
- Add an image-text snippet to the page
- Select the image
- Add a link on the image
- Specify URL
- Click on image => link popup shows the entered URL
- Make the URL field empty
- Click on image
=> link popup still showed the previously entered URL

[1]: https://github.com/odoo/odoo/commit/8fcf930a6b6b7ffb0965b0a689c7a3117962ce7e

task-2765857

closes odoo/odoo#98845

X-original-commit: f212c56d73f5dad8eb5850b0b39cc92f55706ee2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
2022-08-25 12:05:29 +02:00
Benoit Socias afe148341a [FIX] web_editor, website: not show link tools if link contains a media
Since [1] the link tools got created when the destroyed sub-elements of
the link were clicked on. This causes a problem when the element is a
media because upon destroy the tools reset the link to an incorrect
state.

After this commit the link tools is not touched anymore if the element
that was clicked on is a media.
Also, it reflects the changes done in the popup into the media link
options, and the ones done in the option into the popup.

Steps to reproduce:
- Add an image-text snippet in the page
- Click on the image
- Set up a link
- DO NOT click on the image again
- Click on the left of the image (to click on the snippet itself)
- Click on the image again
=> The image was removed instead and a text link remained

[1]: https://github.com/odoo/odoo/commit/d69d26a2dd8830aca8c5922d3548e5ff59c688fc

task-2765857

X-original-commit: 11ee7d5520c3a14a381b3f5b973114670f1e2edb
Part-of: odoo/odoo#98845
2022-08-25 12:05:29 +02:00
Younn Olivier a0a184fdf6 [FIX] web_editor, website: update invisible elements panel on undo
Before this commit, after:
- Drop a popup,
- Click on the undo button,
=> The invisible elements panel was still displayed, with the popup
entry.

To fix that, the panel visibility is updated on the
'historyUndo'/'historyRedo' events alongside refreshing the snippets
editors.

task-2687506

closes odoo/odoo#98807

X-original-commit: 76704f47db46ac7e71a894f620d8061a3eb594a7
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-25 04:21:07 +02:00
Romain Derie cb80c15d3d [IMP] web_editor, website: warn restricted editor about forbidden change
See previous commit(s) for more details about the new sanitize feature.

This commit implement a solution in the website builder to warn
restricted users when they can't edit a field due to the sanitizer
restriction.

Long story short: a HTML field can be flag as `sanitize_overridable`
which will allow users with the `base.group_sanitize_override` group to
not go through the sanitize process.
It means that such users can write some content which is not sanitize
friendly. A restricted user trying to add content in such fields would
then break the original content as the sanitizer would remove part of
the DOM.
In such cases, the field in the website builder is not detected as an
editable part and clicking on it will warn the user about it.

closes odoo/odoo#97398

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-24 23:03:24 +02:00
Romain Derie cf844e34dd [IMP] core: allow some users to bypass the sanitize of HTML field
Add the possibility to flag a HTML field as `sanitize_overridable`.
The sanitizer will then be bypassed if the user doing the operation is
part of the new group `base.group_sanitize_override`.
The "Settings" users are part of that new group.

If such a user wrote some HTML that would have normally been removed by
the sanitizer, then users without the right to bypass the sanitizer
won't be able to write on that field anymore.
Otherwise, it would sanitize the previously written data.
Such cases are detected, and the modification prevented by the system,
which will warn the user about it.

For instance, with a `field.html(sanitize_overridable=True)`: one being
part of `group_sanitize_override` could write `<script></script>`.
Then, someone not part of the group trying to add an element inside that
field like appending a `<p/>` -> `<script></script><p>New Content</p>`
would not be able to because it would go through the sanitizer and
ultimately, removing part of the original value:
`<p>New Content</p>` (`<script></script>` would be removed).

== Real use case ==
In the website builder, there is 2 editor rights:
- group_website_publisher: restricted editor
- group_website_designer: editor & designer

The designer editor can edit pages and views, while the restricted
editor can't do anything unless he is part of other groups.
In edit mode, the restricted editor will only be able to edit fields of
record he has access to.
For instance, being a sales manager allows you to edit a product
description on the website.
Being an event manager -> edit event. Slide manager -> Slides etc.
As those restricted editor are able to edit those fields, they are
(almost) always sanitized to prevent them to introduce malicious code.

Since those fields are sanitized, even admins / designer editor are not
able to fully use the website builder in such fields.

Some clients don't really care about that sanitation, they'd prefer to
avoid it as they trust their manager and would prefer to have the full
builder capability instead.
This is typically the case in small project (butcher, hairdresser,
reseller etc) and in SMEs.

With the new `sanitize_overridable` feature, they will be able to do
that, as the "Designer & Editor" group now also receive the group
`base.group_sanitize_override` (done in next commit).

Part-of: odoo/odoo#97398
2022-08-24 23:03:23 +02:00
Matthieu Stockbauer fe699a241d [IMP] *: adapt client code to use websocket instead of longpolling
*: bus, calendar, hr_attendance, iap_mail, im_livechat, project, snailmail,
snailmail_account, survey, web, web_editor, website_livechat.

This commit is part of the websocket integration in Odoo.
This bus service now communicates with a shared worker in order to provide
a single websocket connection for multiple tabs. It is designed to
be used as a websocket except that events are slightly different,
re-connection is handled automatically. If the browser does not support shared
worker (Safari), the service fallback on a simple web worker.

Available events are:
   - connect : fired upon a successful connection.
   - disconnect : fired upon reception of the websocket close event.
     The close code and reason are given to the listeners callback.
   - reconnect : fired upon a successful re-connection.
   - reconnecting : triggered when the worker starts to try reconnecting.
   - notification : fired upon the reception of notifications.

Since multiple tabs are now handled by a worker, the cross_tab bus is no longer
required and has been removed.

Part-of: odoo/odoo#75510
2022-08-23 17:55:10 +02:00
tsm-odoo de6de48deb [IMP] bus, *: adapt server to use websocket instead of longpolling
*: hr_presence, web_editor.

This commit is part of the websocket integration in Odoo.
It focuses on adapting the bus to support websockets:
   - last notification id is now kept on the server
   - channel list is built by overriding the `_build_bus_channel_list`
     method of the `ir_websocket` model instead of overriding the `_poll`
     method of the bus controller.
   - The bus presence was updated during polls, since there is no more poll,
     bus presence update will be the responsability of the client.
   - The `/websocket/peek_notifications`, `/websocket/update_bus_presence`
     routes will be available so that odoo sh can access notifications/update presence
      from http requests.
   - /longpolling routes are now prefixed with /bus thus won't be redirected to the
     gevent worker anymore except for `/longpolling/health` which is the
     health check route of the gevent server.

Since websocket now handle incoming messages, a way to manage authentication
have been introduced :
    - The session is retrieved from the HTTP handshake.
    - When a websocket message comes/leaves the session is retrieved
      on the file system so that we're sure it still exists and that
      it is up to date.
    - The session is checked
    - If no session is found on the file system or `check_session`
      fails, the websocket connection is closed with the `SESSION_EXPIRED`
      close code (which is a custom close code: 4001).
    - Note that websocket connections are closed every `KEEP_ALIVE_TIMEOUT`
      seconds to ensure no websocket connection will stay open if the user
      clears its cookies.
    - Note that a wsrequest object is available when processing incoming
      messages. It is similar to the http request and contains various
      useful informations (session, env, ...).

Part-of: odoo/odoo#75510
2022-08-23 17:55:10 +02:00
Antoine Guenet 4acc954bff [FIX] web_editor: restore button and link commands
Commit [1] introduced an option to enable link and button commands.
The goal was to be able to disable it in website_forum when the user
doesn't have the proper privileges. Instead, it disabled it everywhere
except in website_forum (and then indeed only enabled it when the user
had said privileges). The same is true of images and videos.

This enables these commands by default instead, and disables them only
specifically for website_forum under the appropriate circumstances.

[1] e104937118

task-2917285

closes odoo/odoo#98111

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-22 16:48:34 +02:00
shsa-odoo e8c66dc10a [FIX] web_editor: replace button should replace the image then add another
Before this commit:

Replace button was adding another image without replacing the existing one.

After this commit:

Now replace button replaces the existing image with another one.

Task-2895601

closes odoo/odoo#98513

X-original-commit: 3e8db4fa7a2d8eb9eba4b184e33bb3a6f69ce687
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-22 08:57:50 +02:00
Ipsita Borisagar 968c13103f [FIX] web_editor: error while changing background color of button
Before this commit:

When we want to change the background color of a button, clicking on that button
will occur traceback(dropdown is not a function).

After this commit:

Traceback will not occur by initializing the dropdown component as it has
converted into the OWL component.

Task-2916277

closes odoo/odoo#96508

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-18 16:47:24 +02:00
Nicolas Bayet 3dc3b6cc3c [FIX] web_editor: don't observe changes that cancel each others
Before this commit, if the mutation records would contain records that
would cancel each others, those change would be listened and considered.
For instance:
- Mutation 1: Adding ID on element A
- Mutation 2: Removing ID on element A
When processing the mutation records, it is useless to consider those
2 as the Id of the element A is the same before and after the mutation.

This led to multiple issues, especially in case where some elements have
the same branding (and are thus the same field/xpath).
In such cases, the editor is replicating the changes made on one of them
to the others to keep the "same" fields sync'd.
For instance, if you go on an event page and try to modify a date, the
change will be replicated at multiple place in the page which are
actually the same t-field.

When replicating those changes, somehow the jQuery Sizzle ID changes
were listened, leading to infinite loop of mutation observer.

Step to reproduce:
- Install website
- Go to any page and enter edit mode
- Click on the navbar and in the right panel select Vertical header
- Activate the CTA option in that navbar right panel (should already be)
- Click on the CTA button
- Try to edit the URL in the right panel or any link option (style etc)

The changes will be ignored as the button's section is being re-rendered
every 50ms infinitely.
On chrome you can easily see it by watching the DOM in the dev tool. The
section will blink again and again, hinting about DOM change.

opw-2893480

closes odoo/odoo#98331

X-original-commit: 97c712e81692661fc9bc65e0810abc4dc017ed87
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
2022-08-18 13:46:45 +02:00
Benjamin Vray 6bfca9f714 [IMP] web_editor: adds a remove button next to the shape selector
This commit aims to make it easier to remove a shape over a background
image.

Before this commit, we could only remove a shape by clicking on the
"shape" button in the background options (it was not easy to find
quickly), but with this commit we can now also remove it thanks to a
"remove" button that has been added next to the shape selector.

task-2827802

closes odoo/odoo#96788

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2022-08-17 19:48:18 +02:00