Add some classes to improve the alignment.
Quite difficult to deal with as we have a lot of inputs on the same line.
Follow of odoo/odoo#95725closesodoo/odoo#95815
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
During Editor initialisation, detect if the editable element contain orphan inline nodes.
If so we transform the base element HTML to put those orphans inside `<p>` containers.
This is used to ensure the HTML generated by Etherpad is compatible with this editor,
allowing the user to use all the features without loosing the Etherpad look.
task-2877273
closesodoo/odoo#93207closesodoo/odoo#95347
Related: odoo/enterprise#28965
Related: odoo/enterprise#29130
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
# Conflicts:
# addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
closesodoo/odoo#95445
Related: odoo/enterprise#29185
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
During paste HTML, an inline element or a textNode should never be
inserted outside of the targeted initial container.
Those kind of orphans elements should never be present in an HTML paste data,
but better safe than sorry.
Part-of: odoo/odoo#95347
# Conflicts:
# addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
Part-of: odoo/odoo#95445
* Adapt Unit tests to always have a container block element
* Add some tests to ensure the editable root direct child nodes are all blocks
* Fix paste HTML unit tests to properly check that we never paste inline
elements or text nodes outside the target container
Part-of: odoo/odoo#95347
# Conflicts:
# addons/web_editor/static/lib/odoo-editor/test/spec/collab.test.js
# addons/web_editor/static/lib/odoo-editor/test/spec/copyPaste.test.js
# addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
Part-of: odoo/odoo#95445
Following [1], it was discovered that, before this commit, the
img-thumbnail class was properly removed when turning an image into an
icon, document or video but not when turning an icon into an image,
document or video. The working image case actually worked by chance as
we remove all classes starting by img-. The "thumbnail" class was
actually removed instead of the "img-thumbnail" one.
In master, this fixes the issue by adding "img-thumbnail" instead of
"thumbnail" to the list of classes to remove. We also do not need to
consider all classes starting by "img-" anymore.
[1]: https://github.com/odoo/odoo/pull/95287#pullrequestreview-1031639109closesodoo/odoo#95616
X-original-commit: 55ba93da587773fedae64b2911ddc8d04482d94b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
* website_forum
Portal users cannot insert images in the WYSIWYG, eg in a forum post.
Steps to reproduce:
- Install website_forum
- Connect as portal
- Go to the forum and create a new post
- Type '/image' and try to insert an image
- An Access Error is raised preventing the portal user from inserting an
image
History:
- It was possible in version earlier than 15.0 before the new editor, as
it was using a base64 inplace image upload to bypass the access rights
and avoid creating an attachment.
- It was broken in 15.0 with the new editor which doesn't have such a
mechanism. The image upload was then disabled for those users in 15.0
with [1] to avoid that bad UX with those errors/tracebacks.
- It was decided to implement a clean solution in master and see from
there was will be done with 15.0 (as being able to upload an image on
a forum seems quite critical).
Solution here in master to be able to use the media dialog:
- First issue, about opening the media dialog:
It fetches attachments, which is raising some access errors. We now
catch the error silently and return an empty list.
- Second issue, about upload an image (and thus creating an attachment):
We now create attachments with sudo to allow access to portal users,
but only if he has write access on the model.
[1]: https://github.com/odoo/odoo/commit/e453d4c119a69f285d9a014babe485492bbe9c40
opw-2648770
task-2811325
closesodoo/odoo#82612
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Merlin (megu) <megu@odoo.com>
Before this commit:
Changing header style with triple click selection bring changes to the next
line, which it should not.
After this commit:
Now even after triple click selection the change stays with the selected part.
Task-2810134
closesodoo/odoo#95613
X-original-commit: dd64fc7730ef34d715cfb2146a7ef8a7ba98f34e
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
When replacing an image by a pictogram, the classes of the previous
media are copied to the new icon's `<span>`. This potentially includes
the `w-100` class which prevents the alignment from behaving correctly.
This commit removes the `w-100` class if it exists.
Steps to reproduce:
- Drop a "Media List" block
- Replace first image by pictogram.
- Align icon to the right.
=> Icon was displayed aligned to the left.
task-2829971 (was task-2729177)
closesodoo/odoo#95287
X-original-commit: https://github.com/odoo/odoo/commit/8f71a3c55dcaae738fbb673266aa400b4c4a1fa4
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Since [1] when the media dialog was refactored to owl, some of the
classes clean up when switching across media types were lost.
This commit restores the clean up for each media type - as they were
before [1].
Steps to reproduce:
(Just one example - there are many scenarios)
- Drop a "Text - Image" block.
- Apply a rounded circle on the image.
- Replace the image by a video.
=> The rounded circle effect remains but cannot be removed.
[1]: https://github.com/odoo/odoo/commit/7fd0698cf765a79959566b51e33cb76bff83d344
task-2829971
Part-of: odoo/odoo#95287
> Media query mixins parameters have changed for a more logical approach
> media-breakpoint-down() uses the breakpoint itself instead of the next
> breakpoint (e.g., media-breakpoint-down(lg) instead of
> media-breakpoint-down(md) targets viewports smaller than lg).
> Similarly, the second parameter in media-breakpoint-between() also
> uses the breakpoint itself instead of the next breakpoint (e.g.,
> media-between(sm, lg) instead of media-breakpoint-between(sm, md)
> targets viewports between sm and lg).
https://getbootstrap.com/docs/5.1/migration/#sass
Task ID: 2766483
Part-of: odoo/odoo#95450
Due to the removal of btn-block we need to change the display to grid
> Dropped .btn-block for utilities. Instead of using .btn-block on the
> .btn, wrap your buttons with .d-grid and a .gap-* utility to space
> them as needed
https://getbootstrap.com/docs/5.1/migration/#buttons
Task ID: 2766483
Part-of: odoo/odoo#95450
The conversion of html to inline-styled html compatible with e-mail
clients failed to take into account styles that included `var()` and/or
`calc()`. Those didn't occur with Bootstrap 4 but are very common with
Bootstrap 5.
This allow that conversion by using `getComputedStyle` in those cases.
Task ID: 2766483
Part-of: odoo/odoo#95450
> Data attributes for all JavaScript plugins are now namespaced to help
> distinguish Bootstrap functionality from third parties and your own code.
> For example, we use data-bs-toggle instead of data-toggle.
https://getbootstrap.com/docs/5.1/migration/#javascript
Task ID: 2766483
Part-of: odoo/odoo#95450
In BS5 there is a check to avoid having multiple handler for one
element and we can't add two components' instance on an element.
So, before disposing a tooltip we check if there is an instance of a
tooltip and we avoid instantiation of tooltip if not already done.
e.g.:
> Bootstrap doesn't allow more than one instance per element. Bound
> instance: bs.collapse.
e.g.:
> Bootstrap doesn't allow more than one instance per element. Bound
> instance: bs.carousel.
> Bootstrap doesn't allow more than one instance per element.
> Bound instance: bs.tooltip.
Task ID: 2766483
Part-of: odoo/odoo#95450
- BS5 JS use the `data-bs-toggle="dropdown"` attribute to
automatically enable the BS Component.
But in this case as the `.dropdown-menu` is only rendered when the
`.dropdown-toggle` is clicked we can't initialize the Dropdown at the
first render. So we do it manually.
- change .dropdown-menu by .o-dropdown-menu (owl)
-> to handle keyboard navigation we can't use BS dropdowns
- use currentTarget of event
As the event can bubble we use currentTarget to be sure to be at the
higher level in the DOM.
> All the events for the dropdown are now triggered on the dropdown
> toggle button and then bubbled up to the parent element.
- BS5 don't add .show on parent group anymore
-> dropdown show class not on the same node on BS5
- avoid dropdown warning using margin in CSS
BS5 show a warning if we use margin statically in CSS for a dropdown.
> Popper: CSS "margin" styles cannot be used to apply padding between
> the popper and its reference element or boundary. To replicate margin,
> use the `offset` modifier, as well as the `padding` option in the
> `preventOverflow` and `flip` modifiers.
- adapt the systray activity dropdown for mobile
On desktop positions are now dynamic and on mobile it's static
- In BS5 the CSS `bottom: 100%;` is not more applied to the
`.dropup .dropdown-menu` selector.
- Change right -> end and add data-bs-popper="none" to avoid
Popper interaction
Task ID: 2766483
Part-of: odoo/odoo#95450
- BS5 uses native inputs instead of pseudo-element for some
input like checkbox, radio, ...
in BS5 input checkbox don't have "virtual visual" checkbox anymore
(::before), so we remove the relative's rules
- removed `.custom-control` class
- `form-switch` use a new layout system in BS5 we adapt the code to
match the Bootstrap approach (inline SVG).
- In tests, we don't check the exact value of the background as it
change in community/enterprise, and it's difficult to check the value
of an SVG.
- Overflow in progressbar is now hidden.
-> we had to restore it.
- In BS5 margins in forms/inputs has been changed
-> we had to restore it (e.g. 'mb-3')
- .form-group, .form-row, .form-inline
> Dropped form-specific layout classes for our grid system.
> Use our grid and utilities instead of .form-group, .form-row,
> or .form-inline.
- .input-group-append and .input-group-prepend
> Dropped .input-group-append and .input-group-prepend.
> You can now just add buttons and .input-group-text as direct
> children of the input groups.
Ref:
[1] https://getbootstrap.com/docs/5.1/migration/#forms
Task ID: 2766483
Part-of: odoo/odoo#95450
- modal 'show' option doesn't exist anymore
-> We need to call .show()
- by default, show is not the default
-> we need to call .show() explicitly.
- generic close button for dismissing content like modals and alerts.
- BS5 modals needs `modal-dialog` class to work
- normally we need also to add `modal-content` class but as the original
XML don't have this nested level of div we don't use it, but instead
we add `pointer-events: auto` for all children `DIV` of `modal-dialog`
-> See DocumentViewer
Task ID: 2766483
Part-of: odoo/odoo#95450
The logic not identical in BS4 -> BS5
The color contrast system in BS5 relies on WCAG 2.0 contrast algo.
So color-yiq is converted to color-contrast.
Note that there are some "texts/buttons/other visuals" elements
which will not have the same contrast as before.
$yiq-text-dark and $yiq-text-light are respectively replaced with
$color-contrast-dark and $color-contrast-light.
Note that we had to use '$min-contrast-ratio: 2.2' for .o_tag_color_X badge.
Task ID: 2766483
Part-of: odoo/odoo#95450
Co-authored-by: Stefano Rigano <sri@odoo.com>
This commit is a hack for Bootstrap 5
In Bootstrap 4 these variables was used with map-merge()
In Bootstrap 5 these variables has set only if they don't exist before
PS: Another fix will be to reorder all bundle to follow Bootstrap
documentation and do another logic that wasn't use before.
Ref:
https://getbootstrap.com/docs/5.1/customize/sass/#colors
Task ID: 2766483
Part-of: odoo/odoo#95450
The urgentSave fix at f9d27d41 was broken by 9e02cec48.
Do not wait for the resolution of the cleanForSave promise to update
the internal value in case this happens during an urgentSave as the
beforeunload event does not play well with asynchronicity. It is
better to have a partially cleared value than to lose changes. When
this function is called outside of an urgentSave context, the full
cleaning is still awaited below and `_super` will reupdate the value.
Task-2861050
closesodoo/odoo#95336
X-original-commit: 0483a778a4032fe2264cfdd5f037834cfb903845
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Pasting a list within a list resulted in wrongly nested li elements
(<li><li>text</li></li>). This applies the same principles for pasting
lists within lists as were already applied for blocks within paragraphs.
task-2879892
closesodoo/odoo#95331
X-original-commit: 49058d63b7a8d03c9b6e323cac19b66bf542a5b3
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
This refactors the insertion loops in the insert command, in order to
make it more maintainable.
X-original-commit: cb87020ab4e893ca62a677c9104f16c3aa9938cf
Part-of: odoo/odoo#95331
Pasting blocks at the beginning of the editable pasted the content in
the wrong place (after the first node instead of before it).
task-2879892
X-original-commit: f810b11204a3e227d7ac98429f21b2ddf93de215
Part-of: odoo/odoo#95331
When Odoo Editor was in a separate repository, it made sense to have a
separate demo page and README file. It doesn't anymore.
closesodoo/odoo#94516
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Loading assets for Odoo Editor's tests was a problematic matter since
some were in the lib folder while others were in src. This solves that
issue by finally creating a route for these tests, like web has one for
QUnit tests.
Part-of: odoo/odoo#94516
Odoo Editor uses chai/mocha for testing. Since it was moved into Odoo,
we need chai's global constants to be recognized by eslint. The same
thing applies to DOMPurify.
Part-of: odoo/odoo#94516
Odoo-Editor, having originally been developed with the purpose of being
a standalone library, was put into a `lib` folder. Since in the meantime
the library plans were aborted and since its presence outside the `src`
directory makes translations unavailable for it, this moves the editor
to `src/js/editor/odoo-editor`.
task-2880723
Part-of: odoo/odoo#94516
Before this commit
When removing the last word of an html container, the last space was
not transformed into an `nbsp`. This caused google chrome to not
render the space.
Task-2809312
closesodoo/odoo#95124
X-original-commit: cd4f1c4bce66817640eea20f0b297095d48ea647
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
The fix 1b80fe9 removed the behavior that made `.o_not_editable`
`contenteditable=false`. Without this behavior, other issues could
arises.
closesodoo/odoo#94889
X-original-commit: 4e7d6e1a70e44df3476c2602119fbcedc7c04199
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
The _parse function of sanitize used to be recursive both along the
length and depth of the DOM tree, making it exceed maximum stack size
limit for long documents. This updated version is now only recursive in
the depth of the tree, not its length. It would be possible to write a
fully non-recursive version of this function but it is out of scope of
this task and is unlikely to happen anyway as DOM trees are way more
unlikely to exceed stack limits in depth rather than length.
task-2895671
closesodoo/odoo#94967
X-original-commit: c711a2c4106da0c2d5c35ee7a367ba86a9dcbdb7
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Before this commit, it was possible to set the selection of the document
whenever sanitizing an element that was not present in the dom.
task-2877501
closesodoo/odoo#94900
X-original-commit: 7b60241e01914ffc0176c24d4e780f773f9a277f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit makes various adapations in addons with respect to
the introduction of the owl kanban view. Mainly, some selectors
in scss and in tests needed to be adapted. Moreover, in some tests
that we haven't adapted yet, we must ensure that legacy form and
list views are still used (useLegacyViews).
It also contains some adaptations in kanban templates, e.g. the
replacement of moment by luxon, the removal of underscore...
Part-of: odoo/odoo#92475
Whenever the user hit ctrl+k when being on an html field, both the
link dialog and the command palette opened.
In order to resolve the conflict, now ctrl+k open the command palette
with the first entry being the command to open the linktool and
a subsequent hit to ctrl+k when the command palette is open to open
the link dialog.
Task-2738457
Forward-port-of: #89940
Forward-port-of: #82994
Part-of: odoo/odoo#91102
Before this commit, when the admin had set his unsplash credentials in
the media dialog, he could search for unsplash images in the backend
(website builder, optimize SEO, html fields), but not on the frontend
(from the website_forum reply section for example). This was caused by a
wrong assets management for the media dialog views.
This commit reworks the assets_media_dialog introduced in [1], that were
not correctly defined. Until now, a web_editor.assets_media_dialog
bundle including js, scss and xml files was included in both the
web.assets_frontend and web.assets_backend bundles. It was built that
way, because the frontend only takes the views defined in the
web.assets_frontend bundle.
Two mistakes were made with that approach:
- The views defined in web.assets_backend are not added to the
webclient's templates list. Only the ones defined in web.assets_qweb
are. It was only working because web.assets_qweb was globally taking
every component view, defined as /component/*/*.xml.
- The qweb extensions templates for web_unsplash were defined in
web.assets_qweb (therefore, not included in web.assets_frontend and not
added to the frontend's template list).
To change that and include the web_editor and web_unsplash media dialog
views both for the frontend and the backend, a
web_editor.assets_media_dialog_templates is added, with the xml files
from the web_editor.assets_media_dialog bundle. But this time, this new
views-only bundle is included in web.assets_frontend and
web.assets_qweb.
When the public root's assets management is reworked and when it fetches
the templates from assets_common, these bundles should move to
assets_common, as discussed in [2].
Also, the extension template that adds the unsplash records is reworked:
the t-if is separated from the t-foreach, and set using an id instead of
the qweb instruction that it was using before, as it is more robust.
Finally, the isFetching getter was not set on the unsplash ImageSelector
patch, leading to a visual glitch ("No images found" was displayed while
querying unsplash). It is added in this commit.
task-2687506
[1]: https://github.com/odoo/odoo/pull/89223/commits/a154ee7ad6fd3ebdd38943e1439badae11c3151d
[2]: https://github.com/odoo/odoo/pull/89223#discussion_r895627061closesodoo/odoo#94572
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Ensure the link are visible enough in the editor.
task-2855712
closesodoo/odoo#94760
X-original-commit: 5d598e4269431222ae28ac2196ff6f1f45466734
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
*: web_editor
When installing an app from the web_editor, it's needed to actually
reload the webclient, or some apps might not work properly as they
won't have the right assets loaded.
See merge commit for more information.
task-2687506
By starting the get_switchable_related_views request when the
WysiwygAdapter is started, and awaiting it only when we need to know,
we can improve the initial loading time of the editor.
See merge commit for more information.
task-2687506
When clicking on save while having a popup open, in some conditions,
a traceback can appear due to a race condtion.
This is caused by an event listener which updates the visibility status
of said popup in the editor panel. When saving the popup is closed,
and the cleanForSave starts, but while the popup is closing an event
is triggered which recreates editors (_onSnippetOptionVisibilityUpdate).
This commit aims at mitigating the appearance of this race condition
by listening to the .hide event instead of the .hidden, which means
the event is fired right away instead of 400ms later.
See merge commit for more information.
task-2687506
This commit adds the autofocus on inputs on form inputs.
It also adds inputs validation on the Edit Menu dialog, and
autocomplete.
The validation is done with a useControlled input hook, taking an
initial value and a validation function (isEmpty, ...). It returns a
state holding two value: the actual value of the input and the boolean
hasError (used to display or not an is-error css class), as well as the
validation function, wrapped to update the hasError state value.
The existing jquery autocomplete widget is reused, with the a mapping
object (a fake widget that will use the Component's rpc service instead
of the legacy Widget's one).
See merge commit for more information.
task-2687506
Before this commit, the welcome message was removed at the level of the
client action, independently from the wysiwyg initialisation.
As the welcome message is directly inserted into the iframe's
contentDocument, it could lead to a race condition with the editor's
observer: if the wysiwyg was already started when the client
action was removing the message, that mutation was recorded in the
history (therefore, when switching to edit mode and clicking on discard
would show the "Are you sure to discard ?" toaster).
Now, the welcome message is removed before starting the wysiwyg using a
removeWelcomeMessage callback.
See merge commit for more information.
task-2687506
This commit mocks the website service for all the QUnit tests.
As the website module now defines a patch on the WebClient and NavBar
components, adding the website service, this service needs to be mocked
for all the tests. This is done by patching the QUnit.testStart hook.
Also, after the addition of the new media dialog, this component is
mocked at the field html unit test.
See merge commit for more information.
task-2687506
Romeo Fragomeli