if (doc.defaultView && doc.defaultView.$) {

return doc.defaultView.$;

} else {

const _jquery = window.$;

return (...args) => {

if (args.length <= 2 && typeof args[0] === "string") {

return _jquery(args[0], args[1] || doc);

} else {

return _jquery(...args)

}

}

}

static template = 'web_editor.Wysiwyg';

static components = { MediaDialog, VideoSelector, Toolbar, ImageCrop };

static props = {

options: Object,

startWysiwyg: { type: Function, optional: true },

editingValue: { type: String, optional: true },

};

elRef = useRef("el");

toolbarRef = useRef("toolbar");

imageCropRef = useRef("imageCrop");

colorPalettesProps = {

text: useState({

resetTabCount: 0,

}),

background: useState({

resetTabCount: 0,

}),

}

imageCropProps = useState({

showCount: 0,

media: undefined,

mimetype: undefined,

});

state = useState({

linkToolProps: false,

showToolbar: true,

toolbarProps: {},

showSnippetsMenu: false,

snippetsMenuFolded: false,

});

setup() {

this.orm = useService('orm');

this.getColorPickerTemplateService = useService('get_color_picker_template');

this.notification = useService("notification");

this.popover = useService("popover");

this.busService = this.env.services.bus_service;

this.user = user;

this.snippetsMenuContainer = useRef("snippets-menu-container");

this.mutex = new Mutex();

this.snippetsMenuBus = new EventBus();

const getColorPickedHandler = (colorType) => {

return (params) => {

if (this.hadNonCollapsedSelectionBeforeColorpicker) {

this.odooEditor.historyResetLatestComputedSelection(true);

}

// Unstash the mutations now that the color is picked.

this.odooEditor.historyUnstash();

this._processAndApplyColor(colorType, params.color);

// Deselect tables so the applied color can be seen

// without using `!important` (otherwise the selection

// hides it).

if (this.odooEditor.deselectTable() && hasValidSelection(this.odooEditor.editable)) {

this.odooEditor.document.getSelection().collapseToStart();

}

this._updateEditorUI(this.lastMediaClicked && { target: this.lastMediaClicked });

};

}

const getColorHoverHandler = (colorType) => {

return (props) => {

if (this.hadNonCollapsedSelectionBeforeColorpicker) {

this.odooEditor.historyResetLatestComputedSelection(true);

}

this.odooEditor.historyPauseSteps();

try {

this._processAndApplyColor(colorType, props.color, true);

this.odooEditor._computeHistorySelection();

} finally {

this.odooEditor.historyUnpauseSteps();

}

}

};

const colorPaletteCommonOptions = {

excluded: ['transparent_grayscale'],

document: this.props.options.document,

selectedTab: 'theme-colors',

withGradients: true,

onColorLeave: () => {

// We need to prevent rollback in case the seclection is in unremovable

this.odooEditor.withoutRollback(() => this.odooEditor.historyRevertCurrentStep());

// Compute the selection to ensure it's preserved between

// selectionchange events in case this gets triggered multiple

// times quickly.

this.odooEditor._computeHistorySelection();

},

onInputEnter: (ev) => {

const pickergroup = ev.target.closest('.colorpicker-group');

$(pickergroup.querySelector('.dropdown-toggle')).dropdown('hide');

},

getTemplate: this.getColorpickerTemplate.bind(this),

getEditableCustomColors: () => {

if (!this.$editable) {

return [];

}

return [...this.$editable[0].querySelectorAll('[style*="color"]')].map(el => {

return [el.style.color, el.style.backgroundColor];

}).flat();

},

};

onWillStart(() => {

this.init();

Object.assign(this.colorPalettesProps.text, colorPaletteCommonOptions, {

document: this.options.document,

onColorPicked: getColorPickedHandler('text'),

onCustomColorPicked: getColorPickedHandler('text'),

onColorHover: getColorHoverHandler('text'),

onColorpaletteTabChange: this.getColorPaletteTabChangeHandler('text').bind(this),

});

Object.assign(this.colorPalettesProps.background, colorPaletteCommonOptions, {

document: this.options.document,

onColorPicked: getColorPickedHandler('background'),

onCustomColorPicked: getColorPickedHandler('background'),

onColorHover: getColorHoverHandler('background'),

onColorpaletteTabChange: this.getColorPaletteTabChangeHandler('background').bind(this),

});

this._setToolbarProps();

});

onMounted(async () => {

this.el = this.elRef.el

this.$el = $(this.elRef.el);

this._renderElement();

if (this.props.startWysiwyg) {

await this.props.startWysiwyg(this);

} else {

await this.startEdition();

}

});

onWillDestroy(() => {

this.destroy();

});

onWillUpdateProps((newProps) => {

this.options = this._getEditorOptions(newProps.options);

this._setToolbarProps();

const lastValue = String(this.props.options.value || '');

const lastRecordInfo = this.props.options.recordInfo;

const lastCollaborationChannel = this.props.options.collaborationChannel;

const newValue = String(newProps.options.value || '');

const newRecordInfo = newProps.options.recordInfo;

const newCollaborationChannel = newProps.options.collaborationChannel;

const isDifferentRecord =

JSON.stringify(lastRecordInfo) !== JSON.stringify(newRecordInfo) ||

JSON.stringify(lastCollaborationChannel) !== JSON.stringify(newCollaborationChannel);

const isDiscardedRecord = !isDifferentRecord && newProps.options.record && !newProps.options.record.dirty;

if (

(

stripHistoryIds(newValue) !== stripHistoryIds(newProps.editingValue) &&

stripHistoryIds(lastValue) !== stripHistoryIds(newValue)

) ||

isDifferentRecord

)

{

if (isDifferentRecord || isDiscardedRecord) {

this.resetEditor(newValue, newProps.options);

} else {

this.setValue(newValue);

}

this.env.onWysiwygReset && this.env.onWysiwygReset();

}

});

}

defaultOptions = {

lang: 'odoo',

colors: customColors,

recordInfo: {context: {}},

document: document,

allowCommandVideo: true,

allowCommandImage: true,

allowCommandLink: true,

insertParagraphAfterColumns: true,

onHistoryResetFromSteps: () => {},

autostart: true,

dropImageAsAttachment: true,

editorPlugins: [],

useResponsiveFontSizes: true,

showResponsiveFontSizesBadges: false,

showExtendedTextStylesOptions: false,

getCSSVariableValue: weUtils.getCSSVariableValue,

convertNumericToUnit: weUtils.convertNumericToUnit,

};

init() {

this.id = ++id;

this.options = this._getEditorOptions(this.props.options);

this.saving_mutex = new Mutex();

// Keeps track of color palettes per event name.

this.colorpickers = {};

this._onDocumentMousedown = this._onDocumentMousedown.bind(this);

this._onBlur = this._onBlur.bind(this);

this._onScroll = this._onScroll.bind(this);

this.customizableLinksSelector = 'a'

+ ':not([data-bs-toggle="tab"])'

+ ':not([data-bs-toggle="collapse"])'

+ ':not([data-bs-toggle="dropdown"])'

+ ':not(.dropdown-item)';

// navigator.onLine is sometimes a false positive, this._isOnline use

// more heuristics to bypass the limitation.

this._isOnline = true;

this._signalOnline = this._signalOnline.bind(this);

this.tooltipTimeouts = [];

Wysiwyg.activeWysiwygs.add(this);

this._joinPeerToPeer = this._joinPeerToPeer.bind(this);

}

/**

*

* @override

*/

async start() {

// If this widget is started from the OWL legacy component, at the time

// of start, the $el is not in the document yet. Some instruction in the

// start rely on the $el being in the document at that time, including

// code for the collaboration (for adding cursors) or the iframe loading

// in mass_mailing.

if (this.options.autostart) {

return this.startEdition();

}

}

async startEdition() {

const self = this;

const options = this.options;

this.$editable ??= this.$el;

if (options.value) {

this.$editable.html(options.value);

}

this._isDocumentStale = false;

// Each time a reset of the document is triggered, it is assigned a

// unique identifier. Since resetting the editor involves asynchronous

// requests, it is possible that subsequent resets are triggered before

// the previous one is complete. This property identifies the latest

// reset and can be compared against to cancel the processing of late

// responses from previous resets.

this._lastCollaborationResetId = 0;

// This ID correspond to the peer that initiated the document and set

// the initial oid for all nodes in the tree. It is not the same as

// document that had a step id at some point. If a step comes from a

// different history, we should not apply it.

this._historyShareId = Math.floor(Math.random() * Math.pow(2,52)).toString();

// The ID is the latest step ID that the server knows through

// `data-last-history-steps`. We cannot save to the server if we do not

// have that ID in our history ids as it means that our version is

// stale.

this._serverLastStepId = options.value && this._getLastHistoryStepId(options.value);

this.$editable.data('wysiwyg', this);

this.$editable.data('oe-model', options.recordInfo.res_model);

this.$editable.data('oe-id', options.recordInfo.res_id);

document.addEventListener('mousedown', this._onDocumentMousedown, true);

this._bindOnBlur();

this.toolbarEl = this.toolbarRef.el.firstChild;

this.imageCropEL = this.imageCropRef.el.firstChild;

options.document.body.append(this.imageCropEL);

const powerboxOptions = this._getPowerboxOptions();

let editorCollaborationOptions;

if (this._isCollaborationEnabled(options)) {

this._currentClientId = this._generateClientId();

editorCollaborationOptions = this.setupCollaboration(options.collaborationChannel);

if (this.options.collaborativeTrigger === 'start') {

this._joinPeerToPeer();

} else if (this.options.collaborativeTrigger === 'focus') {

// Wait until editor is focused to join the peer to peer network.

this.$editable[0].addEventListener('focus', this._joinPeerToPeer);

}

}

const getYoutubeVideoElement = async (url) => {

const { embed_url: src } = await this._serviceRpc(

'/web_editor/video_url/data',

{ video_url: url },

);

const [savedVideo] = VideoSelector.createElements([{src}]);

savedVideo.classList.add(...VideoSelector.mediaSpecificClasses);

return savedVideo;

};

weUtils.setEditableDocument(this.options.document);

const _getContentEditableAreas = this.options.getContentEditableAreas;

this.odooEditor = new OdooEditor(this.$editable[0], Object.assign({

_t: _t,

toolbar: this.toolbarEl,

document: this.options.document,

autohideToolbar: !!this.options.autohideToolbar,

isRootEditable: this.options.isRootEditable,

onPostSanitize: this._onPostSanitize.bind(this),

placeholder: this.options.placeholder,

powerboxFilters: this.options.powerboxFilters || [],

showEmptyElementHint: this.options.showEmptyElementHint,

controlHistoryFromDocument: this.options.controlHistoryFromDocument,

initialHistoryId: this._serverLastStepId,

// TODO other places in this file call this.options.getContentEditableAreas

// without the extension here. It does not seem to be a problem (it

// was like that before o_editor_banner elements were considered

// here), but we might want to review that.

getContentEditableAreas: (...args) => {

const areaEls = _getContentEditableAreas?.(...args) || [];

const bannerEls = this.$editable[0].querySelectorAll('.o_editor_banner > div');

return [...areaEls, ...bannerEls];

},

getReadOnlyAreas: this.options.getReadOnlyAreas,

getUnremovableElements: this.options.getUnremovableElements,

defaultLinkAttributes: this.options.userGeneratedContent ? {rel: 'ugc' } : {},

allowCommandVideo: this.options.allowCommandVideo,

allowInlineAtRoot: this.options.allowInlineAtRoot,

getYoutubeVideoElement: getYoutubeVideoElement,

getContextFromParentRect: options.getContextFromParentRect,

getScrollContainerRect: () => {

if (!this.scrollContainer || !this.scrollContainer.getBoundingClientRect) {

this.scrollContainer = document.querySelector('.o_action_manager') || document.body;

}

return this.scrollContainer.getBoundingClientRect();

},

getPowerboxElement: () => {

const selection = (this.options.document || document).getSelection();

if (selection.isCollapsed && selection.rangeCount) {

const [deepestNode] = getDeepestPosition(selection.anchorNode, selection.anchorOffset);

const elementSelectors = [

'LI:not([t-field])',

'DIV:not([t-field]):not(.o_not_editable)',

...paragraphRelatedElements.map(tag => `${tag}:not([t-field])`),

];

const baseNode = closestElement(deepestNode, elementSelectors.join(', '));

const fieldContainer = closestElement(deepestNode, '[data-oe-field]');

if (!baseNode ||

(

fieldContainer &&

!(

fieldContainer.getAttribute('data-oe-field') === 'arch' ||

fieldContainer.getAttribute('data-oe-type') === 'html'

)

)) {

return false;

}

return baseNode;

}

},

isHintBlacklisted: node => {

return (node.classList && node.classList.contains('nav-item')) || (

node.hasAttribute && (

node.hasAttribute('data-target') ||

node.hasAttribute('data-oe-model')

)

);

},

filterMutationRecords: (records) => {

return records.filter((record) => {

if (record.type === 'attributes'

&& record.attributeName === 'aria-describedby') {

const value = (record.oldValue || record.target.getAttribute(record.attributeName));

if (value && ['popover', 'tooltip'].some(type => value.startsWith(type))) {

// E.g. prevents to consider the mutation due to

// the 'o_edit_menu_popover' popover being shown.

return false;

}

}

return !(

// TODO should probably not check o_header_standard

// here, since it is a website class ?

(record.target.classList && record.target.classList.contains('o_header_standard')) ||

(record.type === 'attributes' && record.attributeName === 'data-last-history-steps')

);

});

},

preHistoryUndo: () => {

this.destroyLinkTools();

},

beforeAnyCommand: this._beforeAnyCommand.bind(this),

commands: powerboxOptions.commands,

categories: powerboxOptions.categories,

plugins: options.editorPlugins,

direction: options.direction || localization.direction || 'ltr',

collaborationClientAvatarUrl: this._getCollaborationClientAvatarUrl(),

renderingClasses: ["o_dirty", "o_transform_removal", "oe_edited_link", "o_menu_loading", "o_draggable", "o_link_in_selection"],

dropImageAsAttachment: options.dropImageAsAttachment,

foldSnippets: !!options.foldSnippets,

useResponsiveFontSizes: options.useResponsiveFontSizes,

showResponsiveFontSizesBadges: options.showResponsiveFontSizesBadges,

showExtendedTextStylesOptions: options.showExtendedTextStylesOptions,

getCSSVariableValue: options.getCSSVariableValue,

convertNumericToUnit: options.convertNumericToUnit,

autoActivateContentEditable: this.options.autoActivateContentEditable,

}, editorCollaborationOptions));

this.odooEditor.addEventListener('contentChanged', function () {

self.$editable.trigger('content_changed');

});

document.addEventListener("mousemove", this._signalOnline, true);

document.addEventListener("keydown", this._signalOnline, true);

document.addEventListener("keyup", this._signalOnline, true);

if (this.odooEditor.document !== document) {

this.odooEditor.document.addEventListener("mousemove", this._signalOnline, true);

this.odooEditor.document.addEventListener("keydown", this._signalOnline, true);

this.odooEditor.document.addEventListener("keyup", this._signalOnline, true);

}

this._initialValue = this.getValue();

// TODO this code should be reviewed. Previously, it searched for the

// wrapwrap and added some scroll handler if found... we are now

// continuing to search for it, but it is not clear why. As the wrapwrap

// will be removed, this code will not stay for too long anyway.

if ($('wrapwrap').length) {

this.multiSelectionTarget = $().getScrollingTarget(this.odooEditor.document);

this.multiSelectionTarget.addEventListener('scroll', this.odooEditor.multiselectionRefresh, { passive: true });

}

this.$editable.on('click', '[data-oe-field][data-oe-sanitize-prevent-edition]', () => {

this.env.services.dialog.add(AlertDialog, {

body: _t("Someone with escalated rights previously modified this area, you are therefore not able to modify it yourself."),

});

});

for (const field of this.$editable[0].querySelectorAll('[data-oe-type="text"], [data-oe-type="char"]')) {

if (!isVisible(field)) {

fillEmpty(field);

}

}

this._observeOdooFieldChanges();

this.$editable.on(

'mousedown touchstart',

'[data-oe-field]',

function () {

self.odooEditor.observerUnactive();

const $field = $(this);

if (($field.data('oe-type') === "datetime" || $field.data('oe-type') === "date")) {

let selector = '[data-oe-id="' + $field.data('oe-id') + '"]';

selector += '[data-oe-field="' + $field.data('oe-field') + '"]';

selector += '[data-oe-model="' + $field.data('oe-model') + '"]';

const $linkedFieldNodes = self.$editable.find(selector).addBack(selector);

$linkedFieldNodes.addClass('o_editable_date_field_linked');

if (!$field.hasClass('o_editable_date_field_format_changed')) {

$linkedFieldNodes.text($field.data('oe-original-with-format'));

$linkedFieldNodes.addClass('o_editable_date_field_format_changed');

$linkedFieldNodes.filter('.oe_hide_on_date_edit').addClass('d-none');

setTimeout(() => {

// we might hide the clicked date, focus the one

// supposed to be editable

Wysiwyg.setRange($linkedFieldNodes.filter(':not(.oe_hide_on_date_edit)')[0]);

}, 0);

}

}

if ($field.attr('contenteditable') !== 'false') {

if ($field.data('oe-type') === "monetary") {

$field.attr('contenteditable', false);

const $currencyValue = $field.find('.oe_currency_value');

$currencyValue.attr('contenteditable', true);

$currencyValue.one('mouseup touchend', (e) => {

$currencyValue.selectContent();

});

}

if ($field.data('oe-type') === "image") {

$field.attr('contenteditable', false);

$field.find('img').attr('contenteditable', $field.data('oe-readonly') !== 1);

}

if ($field.is('[data-oe-many2one-id]')) {

$field.attr('contenteditable', false);

}

}

self.odooEditor.observerActive();

}

);

this.$editable.on('click', '.o_image, .media_iframe_video', e => e.preventDefault());

let closeBannerEmojiPicker;

this.$editable.on('click', '.o_editor_banner_icon', event => {

if (closeBannerEmojiPicker) {

closeBannerEmojiPicker();

}

closeBannerEmojiPicker = this.popover.add(event.target, EmojiPicker, {

onSelect: emoji => {

event.target.innerText = emoji;

}

}, { position: 'bottom' });

});

this.showTooltip = true;

this.$editable.on('dblclick', mediaSelector, ev => {

const targetEl = ev.currentTarget;

let isEditable =

// TODO that first check is probably useless/wrong: checking if

// the media itself has editable content should not be relevant.

// In fact the content of all media should be marked as non

// editable anyway.

targetEl.isContentEditable ||

// For a media to be editable, the base case is to be in a

// container whose content is editable.

(targetEl.parentElement && targetEl.parentElement.isContentEditable);

if (!isEditable && targetEl.classList.contains('o_editable_media')) {

isEditable = weUtils.shouldEditableMediaBeEditable(targetEl);

}

if (isEditable) {

this.showTooltip = false;

if (!isProtected(this.odooEditor.document.getSelection().anchorNode)) {

if (this.options.onDblClickEditableMedia && targetEl.nodeName === 'IMG' && targetEl.src) {

this.options.onDblClickEditableMedia(ev);

} else {

this._onDblClickEditableMedia(ev);

}

}

}

});

if (options.snippets) {

this.snippetsMenuComponent = await this.getSnippetsMenuClass(options);

await this._insertSnippetMenu();

$(this.odooEditor.document.body).addClass('editor_enable');

this._onBeforeUnload = (event) => {

if (this.isDirty()) {

event.returnValue = _t('This document is not saved!');

}

};

window.addEventListener('beforeunload', this._onBeforeUnload);

}

if (this.options.getContentEditableAreas) {

$(this.options.getContentEditableAreas(this.odooEditor)).find('*').off('mousedown mouseup click');

}

// The toolbar must be configured after the snippetMenu is loaded

// because if snippetMenu is loaded in an iframe, binding of the color

// buttons must use the jquery loaded in that iframe.

this._configureToolbar(options);

$(this.odooEditor.editable).on('mouseup', this._updateEditorUI.bind(this));

$(this.odooEditor.editable).on('keydown', this._updateEditorUI.bind(this));

$(this.odooEditor.editable).on('keydown', this._handleShortcuts.bind(this));

// Ensure the Toolbar always have the correct layout in note.

this._updateEditorUI();

this.$editable.on('click.Wysiwyg', (ev) => {

const $target = $(ev.target).closest('a');

// Keep popover open if clicked inside it, but not on a button

if ($(ev.target).parents('.o_edit_menu_popover').length && !$target.length) {

ev.preventDefault();

}

if ($target.is(this.customizableLinksSelector)

&& $target.is('a')

&& $target[0].isContentEditable

&& !$target.attr('data-oe-model')

&& !$target.find('> [data-oe-model]').length

&& !$target[0].closest('.o_extra_menu_items')

&& $target[0].isContentEditable) {

if (ev.ctrlKey || ev.metaKey) {

window.open($target[0].href, '_blank');

}

this.linkPopover = $target.data('popover-widget-initialized');

if (!this.linkPopover) {

// TODO this code is ugly maybe the mutex should be in the

// editor root widget / the popover should not depend on

// editor panel (like originally intended but...) / ...

(async () => {

let container;

if (this.state.showSnippetsMenu) {

// Await for the editor panel to be fully updated

// as some buttons of the link popover we create

// here relies on clicking in that editor panel...

await this.mutex.exec(() => null);

container = this.options.document.getElementById('oe_manipulators');

}

this.linkPopover = LinkPopoverWidget.createFor({

target: $target[0],

wysiwyg: this,

container,

notify: (message, params) => {

this.notification.add(message, { type: params.type });

},

});;

$target.data('popover-widget-initialized', this.linkPopover);

})();

}

// Setting the focus on the closest contenteditable element

// resets the selection inside that element if no selection

// exists.

$target.closest('[contenteditable=true]').focus();

if ($target.closest('#wrapwrap').length && this.state.showSnippetsMenu) {

this.toggleLinkTools({

forceOpen: true,

link: $target[0],

shouldFocusUrl: ev.detail !== 1,

});

}

}

});

this._onSelectionChange = this._onSelectionChange.bind(this);

this.odooEditor.document.addEventListener('selectionchange', this._onSelectionChange);

if (!this.state.showSnippetsMenu) {

this.setCSSVariables(this.toolbarEl);

}

this.odooEditor.addEventListener('preObserverActive', () => {

// The onPostSanitize will be called right after the

// editor sanitization (to be right before the historyStep).

// If any `.o_not_editable` is created while the observer is

// unactive, now is the time to call `onPostSanitize` before the

// editor could register a mutation.

this._onPostSanitize(this.odooEditor.editable);

});

if (this.options.autohideToolbar) {

if (this.odooEditor.isMobile) {

this.odooEditor.editable.before(this.toolbarEl);

} else {

document.body.append(this.toolbarEl);

}

}

}

setupCollaboration(collaborationChannel) {

const modelName = collaborationChannel.collaborationModelName;

const fieldName = collaborationChannel.collaborationFieldName;

const resId = collaborationChannel.collaborationResId;

const channelName = `editor_collaboration:${modelName}:${fieldName}:${resId}`;

if (

!(modelName && fieldName && resId) ||

Wysiwyg.activeCollaborationChannelNames.has(channelName)

) {

return;

}

this._collaborationChannelName = channelName;

this._historyStepsBuffer = [];

Wysiwyg.activeCollaborationChannelNames.add(channelName);

const collaborationBusListener = (payload) => {

if (

payload.model_name === modelName &&

payload.field_name === fieldName &&

payload.res_id === resId

) {

if (payload.notificationName === 'html_field_write') {

this._onServerLastIdUpdate(payload.notificationPayload.last_step_id);

} else if (this._ptpJoined) {

this._peerToPeerLoading.then(() => this.ptp.handleNotification(payload));

}

}

}

this.busService.subscribe('editor_collaboration', collaborationBusListener);

this.busService.addChannel(this._collaborationChannelName);

this._collaborationStopBus = () => {

Wysiwyg.activeCollaborationChannelNames.delete(this._collaborationChannelName);

this.busService.unsubscribe('editor_collaboration', collaborationBusListener);

this.busService.deleteChannel(this._collaborationChannelName);

}

this._startCollaborationTime = new Date().getTime();

this._checkConnectionChange = () => {

if (!this.ptp) {

return;

}

if (!navigator.onLine) {

this._signalOffline();

} else {

this._signalOnline();

}

};

window.addEventListener('online', this._checkConnectionChange);

window.addEventListener('offline', this._checkConnectionChange);

this._collaborationInterval = setInterval(async () => {

if (this._offlineTimeout || this.preSavePromise || !this.ptp) {

return;

}

const clientsInfos = Object.values(this.ptp.clientsInfos);

const couldBeDisconnected =

Boolean(clientsInfos.length) &&

clientsInfos.every((x) => PTP_CLIENT_DISCONNECTED_STATES.includes(x.peerConnection && x.peerConnection.connectionState));

if (couldBeDisconnected) {

this._offlineTimeout = setTimeout(() => {

this._signalOffline();

}, CONSIDER_OFFLINE_TIME);

}

}, CHECK_OFFLINE_TIME);

this._peerToPeerLoading = new Promise(async (resolve) => {

if (!ICE_SERVERS) {

ICE_SERVERS = await this._serviceRpc('/web_editor/get_ice_servers');

}

let iceServers = ICE_SERVERS;

if (!iceServers.length) {

iceServers = [

{

urls: [

'stun:stun1.l.google.com:19302',

'stun:stun2.l.google.com:19302',

],

}

];

}

this._iceServers = iceServers;

this.ptp = this._getNewPtp();

resolve();

});

const editorCollaborationOptions = {

collaborationClientId: this._currentClientId,

onHistoryStep: (historyStep) => {

if (!this.ptp) return;

this.ptp.notifyAllClients('oe_history_step', historyStep, { transport: 'rtc' });

},

onCollaborativeSelectionChange: debounce((collaborativeSelection) => {

if (!this.ptp) return;

this.ptp.notifyAllClients('oe_history_set_selection', collaborativeSelection, { transport: 'rtc' });

}, 50),

onHistoryMissingParentSteps: async ({ step, fromStepId }) => {

if (!this.ptp) return;

const missingSteps = await this.requestClient(

step.clientId,

'get_missing_steps', {

fromStepId: fromStepId,

toStepId: step.id

},

{ transport: 'rtc' }

);

if (missingSteps === REQUEST_ERROR) return;

this._processMissingSteps(Array.isArray(missingSteps) ? missingSteps.concat(step) : missingSteps);

},

};

if (this.options.postProcessExternalSteps) {

editorCollaborationOptions.postProcessExternalSteps = this.options.postProcessExternalSteps;

}

return editorCollaborationOptions;

}

setupToolbar(toolbarEl) {

this.toolbarEl = toolbarEl;

this.odooEditor.setupToolbar(toolbarEl);

this._configureToolbar(this.options)

this._updateEditorUI();

}

/**

* @override

*/

destroy() {

// Sometimes, the component is started and destroyed so quickly that

// external calls to `wysiwyg.getColorPickerTemplateService()` fail by

// the time it's done, even though `wysiwyg` was properly instantiated.

// As it's not needed once the component is destroyed, we return null.

this.getColorPickerTemplateService = () => null;

Wysiwyg.activeWysiwygs.delete(this);

this._stopPeerToPeer();

document.removeEventListener("mousemove", this._signalOnline, true);

document.removeEventListener("keydown", this._signalOnline, true);

document.removeEventListener("keyup", this._signalOnline, true);

this._collaborationStopBus && this._collaborationStopBus();

if (this.odooEditor) {

this.odooEditor.document.removeEventListener("mousemove", this._signalOnline, true);

this.odooEditor.document.removeEventListener("keydown", this._signalOnline, true);

this.odooEditor.document.removeEventListener("keyup", this._signalOnline, true);

this.odooEditor.document.removeEventListener('selectionchange', this._onSelectionChange);

this.odooEditor.destroy();

}

// If peer to peer is initializing, wait for properly closing it.

if (this._peerToPeerLoading) {

this._peerToPeerLoading.then(()=> {

this._stopPeerToPeer();

this._collaborationStopBus && this._collaborationStopBus();

});

}

clearInterval(this._collaborationInterval);

this.$editable && this.$editable.off('blur', this._onBlur);

document.removeEventListener('mousedown', this._onDocumentMousedown, true);

const $body = $(document.body);

$body.off('mousemove', this.resizerMousemove);

$body.off('mouseup', this.resizerMouseup);

this.multiSelectionTarget?.removeEventListener('scroll', this.odooEditor.multiselectionRefresh, { passive: true });

this.$editable?.off('.Wysiwyg');

this.toolbarEl?.remove();

this.imageCropEL?.remove();

if (this.linkPopover) {

this.linkPopover.hide();

}

if (this._checkConnectionChange) {

window.removeEventListener('online', this._checkConnectionChange);

window.removeEventListener('offline', this._checkConnectionChange);

}

window.removeEventListener('beforeunload', this._onBeforeUnload);

for (const timeout of this.tooltipTimeouts) {

clearTimeout(timeout);

}

document.removeEventListener('scroll', this._onScroll, true);

}

/**

* @override

*/

_renderElement() {

this.$editable = this.options.editable || $('<div class="note-editable">');

// We add the field's name as id so default_focus will target it if

// needed. For that to work, it has to already be editable but note that

// the editor is at this point not yet instantiated.

if (typeof this.options.fieldId !== 'undefined' && !this.options.inIframe) {

this.$editable.attr('id', this.options.fieldId);

this.$editable.attr('contenteditable', true);

}

if (this.options.height) {

this.$editable.height(this.options.height);

}

if (this.options.minHeight) {

this.$editable.css('min-height', this.options.minHeight);

}

if (this.options.maxHeight && this.options.maxHeight > 10) {

this.$editable.css('max-height', this.options.maxHeight);

}

if (this.options.resizable && !isMobileOS()) {

const $wrapper = $('<div class="o_wysiwyg_wrapper odoo-editor">');

$wrapper.append(this.$editable);

this.$resizer = $(`<div class="o_wysiwyg_resizer">

<div class="o_wysiwyg_resizer_hook"></div>

<div class="o_wysiwyg_resizer_hook"></div>

<div class="o_wysiwyg_resizer_hook"></div>

</div>`);

$wrapper.append(this.$resizer);

this._replaceElement($wrapper);

const minHeight = this.options.minHeight || 100;

this.$editable.height(this.options.height || minHeight);

// resizer hooks

let startOffsetTop;

let startHeight;

const $body = $(document.body);

const resizerMousedown = (e) => {

e.preventDefault();

e.stopPropagation();

$body.on('mousemove', this.resizerMousemove);

$body.on('mouseup', this.resizerMouseup);

startHeight = this.$editable.height();

startOffsetTop = e.pageY;

};

this.resizerMousemove = (e) => {

const offsetTop = e.pageY - startOffsetTop;

let height = startHeight + offsetTop;

if (height < minHeight) {

height = minHeight;

}

this.$editable.height(height);

};

this.resizerMouseup = () => {

$body.off('mousemove', this.resizerMousemove);

$body.off('mouseup', this.resizerMouseup);

};

this.$resizer.on('mousedown', resizerMousedown);

} else {

if (!this.options.sideAttach) {

this._replaceElement(this.$editable);

}