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>
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
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>
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
The cancel dialog is now using the new Dialog API and disables buttons
when the process is ongoing.
This is needed because prior to this commit, the iframe would reload,
but it would still be possible to click on the buttons.
So one could cancel then click on save and a traceback would show up.
See merge commit for more information.
task-2687506
This commit adapts the Knowledge "/file" wysiwyg command to work with
the new media dialog, introduced earlier in this merge.
See merge commit for more information.
task-2687506
As there are now two different documents at the SnippetsMenu level, in
the context of the website app:
- the iframe's one, where the snippets are,
- the global one, where the SnippetsMenu is,
Focusing a contenteditable snippet would not blur an option's input and
the other way around, leading to wrong behaviours.
One of them was the creation of a link via the link tools:
- Drop a s_text_image snippet
- Click on the first paragraph
- Create a link via the link tools
(The paragraph is still selected while entering the url input)
- Click on the newly created link
- Click on the "remove link" popover's button
-> Traceback, as the selection was not correctly set
To avoid that, and restore the one-document-behaviour, we remove the
selection of the global document when clicking on the iframe's document,
and we remove the iframe's document selection when clicking on the
SnippetsMenu.
See merge commit for more information.
task-2687506
After the core Dialog API was refactored in [1], the web_editor and
website dialogs had to be reworked.
These dialogs are using a base WebsiteDialog component, that allows for
a default footer and adds the o_website_dialog content class.
[1]: https://github.com/odoo/odoo/commit/7c4f200b8edf0bc695c623c7afc62288f838db36
See merge commit for more information.
task-2687506
The goal of this commit is to adapt the website HTML/CSS/JS editor using
a 'ComponentAdapter' to website backend.
Since we reload the iframe only after editing resources, the
'_updateEditor' method was added to update UI (toggle 'resetButton'
visibility,...) and get the same behaviour (on save/reset) as before
using iframe.
See merge commit for more information.
task-2687506
This commit adds a Translator component, that replaces the
TranslatePageMenu.
It has not been completely adapted to owl: instead, it only extends the
Editor component (that instantiates the Wysiwyg widget) and passes
callback props that are using the legacy code from the
TranslatePageMenu.
See merge commit for more information.
task-2687506
The media dialog was refactored using owl.
It can be displayed via the dialogs service.
The (Image/Document/Icon/Video)Selector components are controlled by the
state of their parent, the MediaDialog: this.selectedMedia.
Some things differ from the original implementation: the dialog still
takes (optionally) a media as a parameter, but it does not directly
modify it anymore.
It will pass the selected media as a parameter to a callback, save, that
it gets as a prop. That save prop should be responsible to make the
appropriate modification to the original media, given the new selected
media.
The code opens up for an easy multiSelect of other tabs than the images
(multiIcons, multiDocuments), but that use case is not currently tackled
and maybe it would be better to simplify the code.
See merge commit for more information.
task-2687506
Use a BlockIframe component when the iframe is being reloaded,
use the new loading spinner in the web_editor.
Scroll the snippet into view when reloading the editor.
See merge commit for more information.
task-2687506
SmoothScrollOnDrag and jquery-ui, the libraries used to handle the drag
and drop of the snippets, are using the HTMLElement
getBoundingClientRect method on the draggable/droppable elements to get
their position, listen to mouseover events and trigger scroll while
dragging.
With the WebsiteEditorClientAction's iframe, the getBoundingClientRect
method of elements inside the iframe was not taking into account a
possible offset of the iframe. For example, in the "mobile preview"
edition mode, the iframe was reduced in size and centered in the screen.
This commit adds this offset to these libraries:
- in SmoothScrollOnDrag, when the drag is started, to correctly trigger
the scroll inside the iframe.
- the insertion zones' getBoundingClientRect (used for the jquery-ui
droppable) is patched.
- the SnippetEditor.cover method is adapted to correctly display the
handles over the snippets.
See merge commit for more information.
task-2687506
On website, the edition is done in an iframe while the SnippetsMenu
resides outside of said iframe. This means that the SnippetsMenu no
longer has frontend styles. Therefore, colors aren't accurate.
This commit aims at patching web_editor widgets, such as color_palette,
so that the color displayed is always accurate. To do so, it computes
the color inside the iframe and adds style attributes to color_palette
preview elements.
See merge commit for more information.
task-2687506
*: website_blog, website_event, website_forum, website_links,
website_livechat, website_slides, survey, web_editor
This commit removes the website navbar root widget, as the edition is
now handled in the backend through the client action and custom menus.
It removes associated widgets and their css.
See merge commit for more information.
task-2687506
*: mass_mailing, web, web_editor, website_blog, website_event,
website_event_meet, website_livechat, website_sale, website_twitter,
base
This commit does 3 things:
- Adapt existing code so that the editor can be run outside of its
editing element. Prior to this commit, it was expected that the
editor would be attached to the element it was currently editing.
This needs to change however as the editable is now inside an
iframe for the website edition. mass_mailing already had a similar
approach but the editor was started within the iframe.
With these changes, the editor is alongside the iframe, editing
the content that's inside it. This allows multiple features
such as reloading the iframe while keeping the editor visible and
resizing the iframe for a mobile preview.
- Adds logic to the wysiwyg_adapter so that it can undertake
the duty of the previous widget sytem. The wysiwyg existed not only
in the legacy widget system, but most importantly in the frontend.
One of the duties of this adapter is to send events inside the
iframe when it is necessary to reach the frontend public widget
(i.e. widgets_start_request)
- Removes existing SCSS that is no longer used.
See merge commit for more information.
task-2687506
This commit takes previously existing code and moves it to the new
location where it will be currently used by the new website editor.
Some SCSS rules were now necessary in both the frontend and the backend
(i.e SCSS for o_we_shapes). Optimizations about assets will follow this
merge.
Some code were moved to new components (i.e reloadBundle moved from
snippets.options to wysiwyg_adapter)
And some code was taken away from widgets that will be removed
(i.e edit.js).
See merge commit for more information.
task-2687506
This commit adds 2 components essential to website edition.
- WysiwygAdapterComponent: Allows the legacy @web_editor/wysiwyg widget
to work in an OWL context. It will be further expanded in the next
commit to fully replace the previous edit.js which was the initial
widget that started the edition prior to this commit / branch.
- WebsiteEditorComponent: This component is in between WebsitePreview
and the adapter. It allows some tricks described below.
The reason this is split in two component is because, for now, when
the page needs reloading, the editor component will clone the content
of the widget, destroy the Wysiwyg, and restart it. This ensure that
every event is properly bound and gives the illusion that the wysiwyg is
never destroyed.
See merge commit for more information.
task-2687506
After this commit, the customize_show views are automatically added in
the editor panel as page options in the "customize" tab.
Most of the customize_show views have been replaced by snippets options
but for some it was better to keep an auto population system so as not
to have to create too many bridge modules when it's not worth it
(e.g. My Portal page).
See merge commit for more information.
task-2710582
With this commit, clicking on the "customize" tab automatically
activates the page options (if there are any). This commit also replaces
the name of the "style" tab by naming it "customize".
task-2710582
This commit introduces a new way to set the title of an option section
in the customize panel. The title can now be filled in a new "string"
attribute in the template of an option.
See merge commit for more information.
task-2710582
This commit also suggests a way to conditionnaly display menus. Here the
website edit menu should only be visible when the website is displayed.
There may be a better way to filter out some menus. That feature will
be reviewed anyway as part of a `patch` the framework team would like to
avoid.
See merge commit for more information.
task-2687506
*: web_editor, web_unsplash, website_event, website_blog,
website_event_meet, website_forum, website_links, website_livechat,
website_sale_slides, website_slides
With [1], many files will move as the website UI is moved in the
backend. This commit moves all the static files (JS/CSS/XML) to their
final destination without modifying them, in an attempt to preserve
some history and ease some forward-ports.
After this commit, everything works as before as the files are simply
renamed and the references to them adapted.
However, technically, many files will actually be split into multiple
files by the work made with [1]. While it is theoretically possible to
preserve history over multiples files, this would require inner merge
commits, which does not go well with robodoo. In those cases, the "main"
file of the split was chosen. Mainly, 4 worth-noticing splits were
detected (and so the history moved only to the first file):
move: addons/web_editor/static/src/js/wysiwyg/widgets/media.js
to: addons/web_editor/static/src/components/media_dialog/file_selector.js
- addons/web_editor/static/src/components/media_dialog/search_media.js
- addons/web_editor/static/src/components/media_dialog/image_selector.js
- addons/web_editor/static/src/components/media_dialog/document_selector.js
- addons/web_editor/static/src/components/media_dialog/icon_selector.js
- addons/web_editor/static/src/components/media_dialog/video_selector.js
move: addons/web_editor/static/src/js/wysiwyg/widgets/upload_progress_toast.js
to: addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
- addons/web_editor/static/src/components/upload_progress_toast/upload_service.js
move: addons/website/static/src/js/menu/content.js
to: addons/website/static/src/components/dialog/edit_menu.js
- addons/website/static/src/components/dialog/page_properties.js
- addons/website/static/src/components/wysiwyg_adapter/page_options.js
- addons/website/static/src/js/website_page_list.js
move: addons/website/static/src/js/menu/edit.js
to: addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
- addons/website/static/src/systray_items/edit_website.js
- addons/website/static/src/components/editor/editor.js
Notice that as those moves were made post-work and the rest of the work
(80+ commits) rebased on top of it, some commits may remove more than
they should in a moved file to then reimplement some of what was
removed in a later commit... ideally this should have been avoided of
course but keep in mind that the final files are just entirely rewritten
and split as converted to OWL. It seemed however worth it to keep most
of the inner history of the work made here to see step by step what was
done. [1] will obviously be merged with a merge commit, binding the
whole work together.
[1]: https://github.com/odoo/odoo/pull/89223
task-2687506
This works follows [1] which already hid lots of options which were not
supposed to show up on some images. That concerned mainly t-field images
and others. This commit is about media elements (images, icons, ...)
which are editable roots, meaning they carry the branding of the portion
of the view they belong to.
In 14.0, such root media elements were simply not editable. Indeed, the
media tools (which were amongst text tools of summernote) simply did not
show up. With the new editor of 15.0, all media options were converted
as "snippet" options for the website editor. The system being entirely
different, explicit conditions for the options to not appear had to be
made.
Technically, some of those options may work on editable roots. With [2],
the "class" and "style" attributes are savable on such items... unless
they are computed. In the future, we may allow more attributes. The
problem in allowing some options to appear (depending if they work on
a given element) is that it would require:
- knowing which attributes an option modifies (class? style? others?)
- knowing which attributes are computed in the qweb view
We may consider improving all of that in future versions, but in stable,
we decided to simply hide all media options on editable roots.
Theoretically, some non-media options could still appear on non-media
editable root elements and not work... but probably no standard option
matches this case.
[1]: https://github.com/odoo/odoo/commit/e707789d43a5754dc2a28192e5502cc14eaca73f
[2]: https://github.com/odoo/odoo/commit/8579c0cae839c615415120b79d6ec22c71f7affd
opw-2817765
opw-2854285
opw-2864584
closesodoo/odoo#93751
X-original-commit: 9dc76ce4b0a646563a29a431e28cf96218a66991
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Ensure the selection in the fonts tags after `applyColor`, otherwise an
undetermined race condition could generate a wrong selection during
multiples call of `_processAndApplyColor` from the color picker.
task-2822221
closesodoo/odoo#92654
X-original-commit: 2b2aba49550cf7c2ba1914f03beef9cbdf60b166
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Before this commit
When removing the style of a link in an html_field, the style was
not removed.
After this commit
When removing the style of a link in an html_field, the style is
removed.
task-2857072
closesodoo/odoo#92573
X-original-commit: f98c6b1ffe3a788f2da6536a109efe68cb6c2da7
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Currently only the `*.assets_*` CSS and JS files are considered as
assets. Because of this some assets from `web_studio`, `pos` and
`document_spreadsheet` become available for selection as documents.
This commit replaces the existing blacklist by a check on whether the
URL matches `/web/assets/*`.
Steps to reproduce:
- Install website, web_studio and pos.
- Drop a Text - Image block in the home page.
- Replace the Image.
- Go to the Documents tab.
=> Some JS/CSS/map assets were available for selection.
task-2799866
closesodoo/odoo#89151
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This applies the following heuristic when converting from static columns
to stacking, responsive columns: don't do stack duos of columns where
one is very small and the other very big (eg., col-2 col-10). This
doesn't apply when one of the columns in question is host to a
full-width element (as this could cause ugly sizing).
task-2761098
closesodoo/odoo#87962
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
David Monjoie