Allow to paste font tag as it is used to style colors.
Allow style attribute on tag B, STRONG, I, S, U, FONT.
task-2980754
closesodoo/odoo#100262
X-original-commit: 0b907fe5cfb9a1f83da4079e30e46e6711ade797
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This transforms text between two backticks into a code element, when
typing the closing backtick.
task-2985108
closesodoo/odoo#100218
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Make sure there is no migration issue in the module. Adapt the design
to ensure visual consistency. Remove custom SCSS and use BS classes
when possible
task-2950589
closesodoo/odoo#98706
Related: odoo/enterprise#30616
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
A typo fix is added.
Fix error from loading xml while widget is destroyed. Now that the xml
templates are loaded in the bundle, the error appears more frequently.
Part-of: odoo/odoo#95500
When a selection start from a table and finish outside editable, the
toobar was disable but should be enable.
task-2982630
closesodoo/odoo#100091
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Before this commit
The call to `historyunPauseSteps('handleSelectionInTable')` is not
called without a mouseup.
If called from `historySetSelection` in an undo and multiples commands
were to be called before a mouse up, no step would be created.
Also, `observerUnactive` and `observerActive` should be used rather than
`historyPauseStep` and `historyUnpauseStep` for mutations that are
visual and local to the user.
task-2982429
Part-of: odoo/odoo#100091
When the editor blur, the odoo editor gets reset but shouldn't. One of
the side effect is to loose the history.
task-2981508
closesodoo/odoo#100051
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This adds a feature that displays the avatars of the users editing a
document collaboratively, in front of the block they are editing.
task-2947368
closesodoo/odoo#99842
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
The function that checks if the current selection is in an editable
area only checked if it was in a descendant of the editor's editable
element, failing to account for sub-zones that might be set to
`contenteditable=false`.
task-2962912
closesodoo/odoo#100040
X-original-commit: b16609c9d0107d09df9ffac158a3a540b42547d8
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Ensure all the `#top_menu` links are unremovable.
This prevent the editor to merge two `<a>` elements together
during delete commands.
task-2967314
closesodoo/odoo#99966
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
*: web_editor, website_blog
This commit improves the mobile preview of websites. A mobile phone
image has been added around the iframe during the mobile preview. This
image was already used for the themes mobile preview, this is why the
css code has been unified to be used in these 2 mobile previews.
Parallel to this commit, we have modified the websites displayed in the
iframe of the preview of the themes so that the scrollbar of these is
visible (before it was hidden behind the image of the phone) but with a
smaller width in mobile mode.
This commit also improves the button to switch to mobile preview by
coloring it green when mobile preview is active.
task-2890050
closesodoo/odoo#98061
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Before this commit, `beforeStepIndex` (now `_powerboxBeforeStepIndex`),
was set at the wrong time.
The callback `onOpen` was called after opening the powerbox from the
`_onInput`. The calculation of `beforeStepIndex` presuposed the step
that add `/` happened. Thefore the calculation
`this._historySteps.length - 2` was made rather than
`this._historySteps.length - 1`.
But that presuposition is wrong.
The best time to know until which step index to revert is before any
possible step occurs.
task-2980550
closesodoo/odoo#100009
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
- adapt the html field and mass_mailing_widget to be owl components
- adapt the mass mailing view to be an owl view
task-2898432
closesodoo/odoo#94875
Related: odoo/enterprise#30915
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
When hovering the first row and/or first column of a table, the buttons
appear to edit it. These are removed in the callback of a mousemove
event on the editable. If we click for instance on the code view button
while still over the table, the mouse didn't move so the buttons are not
removed. Then after that moving the mouse doesn't trigger the callback
since the editable is not visible anymore. So the buttons stay.
This fixes that case by adding a listener to the table on mouseleave,
that will remove the buttons, then self-destroy.
closesodoo/odoo#99897
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
In stable, because we feared that some behaviors were relying on the
the default behavior of closestElement, we added an option to restrict
it to the editable.
This was safer from a retrocompatibility point of view but it was a
bad gamble overall because we forgot to use the parameter in new
code, thus introducing new bugs.
This commit removes the parameter and forces the closestElement util
to be restricted to the editable.
closesodoo/odoo#99896
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Unfortunately, the selectionchange event is triggered on document,
so we need to be careful not to affect the selection if it is not
in the editable.
Part-of: odoo/odoo#99896
Before this commit
The method `getOrCreateLink` did not return the startNode when the
startNode was a link.
If the startNode is a link, we should not try to get the link from the
selection as we already have the link. Getting the link from the
selection should be a fallback.
When clicking on a link that within a `contenteditable=false`, because
the link startNode was not returned, the element from the selection was
not the link and `getOrCreateLink` created a new link.
task-2967314
closesodoo/odoo#99864
X-original-commit: c50c2b025c58408b2e90b7b25430c981d0bcdc2b
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Refactor the tabs to be :
* Automatically aligned on a 40px grid.
* A tab only need one delete to remove.
* Arrow navigation around tabs is working as intended.
task-2871848
closesodoo/odoo#99460
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Ensure the selection is never put inside a contenteditable=false
element when correcting the selection due to navigating around ZWS.
Part-of: odoo/odoo#99460
* Add test for the new Odoo Editor Tabs.
* Refactor test utils to simplify and
remove deprecated or unused features.
task-2871848
Part-of: odoo/odoo#99460
Firefox throws NS_ERROR_FAILURE when setting selection on element
with contentEditable=false for no valid reason since non-editable
content are selectable by the user anyway.
task-2809451
closesodoo/odoo#99706closesodoo/odoo#99777
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
In some case the ctrl+A selection in the editor
create issue with the commands and the toolbar.
We fixed it by correcting the selection and force it
to be strictly inside the editable.
task-2971144
closesodoo/odoo#99718
X-original-commit: be07c2c021c71d1c5654ea5e331287f2d4e0d559
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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..
closesodoo/odoo#99536
Related: odoo/enterprise#31081
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#99511
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#99567
X-original-commit: 56f620ff65ca9c1e5d9a64f5280ea16fd469c87d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#93144
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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>
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
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
closesodoo/odoo#94119
Related: odoo/upgrade#3858
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
closesodoo/odoo#99358
X-original-commit: da8d2669b03e1016dc05f031a2a7ac840541962e
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
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
closesodoo/odoo#99325
X-original-commit: 96ac829e0dc512350f5a828702c20d44219cc933
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#99300
X-original-commit: 8a124a9342fc0f7091b78b45d9b7fe13db472927
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#98889
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
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.
closesodoo/odoo#99255
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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.
closesodoo/odoo#99208
X-original-commit: 3bb0aaaa0833e3d72fbb07e47e42441e293babb7
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
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
closesodoo/odoo#98352
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
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
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
closesodoo/odoo#99014
X-original-commit: 66213cfb33f4545d4c70af1a72c3db47ca687e92
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
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
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
Nicolas Bayet