TinyMCE - open code view inside editor - range error - tinymce

like I mentions in the topic I want to open code view inside my editor, not on separate modal window. I found similar topic and use some of the code from it:
TinyMCE Code Plugin - don't want to open code view in a modal dialog
I managed to do something like this:
const tinyDomUtils = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
const editorBody = editor.getBody();
const toggleCodeView = (isCodeView: string) => {
editorContent = editor.getContent({ source_view: !0 });
editorBody.setAttribute(codeViewAttribute, isCodeView);
if (editorBody.getAttribute(codeViewAttribute) === 'true') {
editor.setContent(tinyDomUtils.DOM.encode(editorContent));
editorBody.blur();
} else {
editor.setContent(tinyDomUtils.DOM.decode(editorContent));
}
};
And it works pretty good, I am able to switch between modes. The problem I have is that currently when I am on the code view, the user can hit "save" and then the content is display with all the html markup. I am trying to fix it just by some event listener to "Save" button and when user click it I am running my function again
toggleCodeView("false");
but then I get console error:
react-dom.development.js:22738 Uncaught TypeError: Cannot read properties of undefined (reading 'createRange')
at c.getRng (tinymce.min.js?5.0.0:6:15446)
at c.getNode (tinymce.min.js?5.0.0:6:16732)
at a.getBookmark (tinymce.min.js?5.0.0:6:8198)
at c.getBookmark (tinymce.min.js?5.0.0:6:13908)
at Object.add (tinymce.min.js?5.0.0:7:12595)
at A.i (tinymce.min.js?5.0.0:7:10860)
at t.i [as fire] (tinymce.min.js?5.0.0:8:4752)
at A.fire (tinymce.min.js?5.0.0:8:6637)
at A.save (tinymce.min.js?5.0.0:11:11915)
at A.remove (tinymce.min.js?5.0.0:11:15152)
I can't find any solution for this. Can anyone help?

Related

Vue JS 2 - Vuetify and Vulidate on openning modal

so there is my problem.
I simply put a form in a dialog, when I open it for the first time it's all good, vuelidate works, errors if my fields are empty works too. I complete the form send it, it close the modal.
But then, when I open it to complete it again,errors are display for no reason :
Image of the error
<v-select
v-model="selectedDoctor"
:items="doctors"
item-text="username"
item-value="id"
:label="$t('components.homeCardTeleconsultation.doctor')"
:error-messages="
fieldErrors($v.selectedDoctor, $t('components.homeCardTeleconsultation.doctor'))"
return-object
/>
addTeleconsultant () {
this.$v.$touch()
if (this.$v.$invalid || this.isSaving) {
} else {
const query = {
xxxxx
}
this.$repositories.teleconsultations.create(query).then((reponse) => {
this.teleconsults = reponse.data
})
this.close()
}
It seems like vuelidate check if my fields are required when I open the modal but never the first time. I really don't understand what's going on so if someone have a solution or something...
Thanks !
Just one line this.$v.$reset()

How can i handle popups in playwright-java?

How can i handle alerts and popups in playwright-java?
there are different methods in API like page.onDialog(), page.onPopup(), what is the difference between them and how can i generate a handle?
//code to launch my browser and url
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new LaunchOptions().withHeadless(false).withSlowMo(50));
BrowserContext context = browser.newContext();
Page page = context.newPage();
page.navigate("http://myurl.com");
//had to switch to iframe to click on upload button
Frame mypage = page.frameByName("uploadScreenPage");
//below line is triggering the alert
mypage.setInputFiles("//*[#id='fileUpload']",Path.of("C:\\myFile.jar"));
//using this code to handle alert, which is not working
page.onDialog(dialog -> {dialog.accept();});
unable to accept alert using the above code. also alert has occurred after clicking an element that is inside an iframe. how can i handle such alerts?
Dialogs are messages like an alert or a confirm, whereas popups are new pages, like the one you would get by calling window.open.
This is how you can use it :
page.onDialog(dialog -> {
assertEquals("alert", dialog.type());
assertEquals("", dialog.defaultValue());
assertEquals("yo", dialog.message());
dialog.accept();
});
page.evaluate("alert('yo')");
I am happy to answer this question. I encountered the same situation and find the solution. Please see below:
//Handling Pop-up or new page
Page pgdriver1 = pagedriver.waitForPopup(new Runnable()
{
public void run() {
pagedriver.click("text=\"Analiza\"");
}
});
pgdriver1.click("//button[normalize-space(#aria-label)=\"Close dialog\"]/nx-icon");
I hope this answer your question.
//listening to the alert
page.onDialog(dialog -> {dialog.accept();});
//next line will be action that triggers your alert
page.click("//['clickonsomethingthatopensalert']")

NGX-Bootstrap Datepicker when i open it on my ipad its not selecting the date on first click

I am using NGX-Bootstrap DatePicker
When i open it in tab or mobile (all the devices other than desktop and laptop).I need to tap on the Date two times to select. How to resolve this problem
For Demo please open (https://valor-software.com/ngx-bootstrap/#/datepicker) in TAB or MOBILE
I was facing the same problem yesterday. This is a Apple devices issue and happens because it device detect the user's first touch like a hover, instead of a click.
To solve this, im using a event inside the input that im calling the ngx-bootstrap datepicker to execute a method when calendar is shown , like:
<input type="text" bsDaterangepicker (onShown)="onShowPicker($event)">
and inside the method onShownPicker, my algorithm is detecting if the user is inside an apple device and then, it use a ngxbootstrap-datepicker method to instance dayHandler (that is called when click is normally detected, instead of hover):
onShowPicker(event) {
const dayHoverHandler = event.dayHoverHandler;
const hoverWrapper = (hoverEvent) => {
const { cell, isHovered } = hoverEvent;
if ((isHovered &&
!!navigator.platform &&
/iPad|iPhone|iPod|Apple/.test(navigator.platform)) &&
'ontouchstart' in window
) {
(this.datapickerDirective as any)._datepickerRef.instance.daySelectHandler(cell);
}
return dayHoverHandler(hoverEvent);
};
event.dayHoverHandler = hoverWrapper;
}
To work properly, you need to have the datepicker directive as viewChild because its used on this method above. in my case, im using like:
#ViewChild(BsDaterangepickerDirective, {static: false}) datapickerDirective;

cannot react to close tab event with cloudfare app

I am using the app creator and trying to react to close tab window event using the code below.
I then preview the app in a separate window, but when I close the tab I don't get the confirmation pop up.
When I inject this code in the js console it works as expected.
Doesn't cloudfare app support such functionality?
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here
return "Please click 'Stay on this Page' and we will give you candy";
};
I tested this and was able to see the pop up when after clicking to close the tab. Are you certain that this assignment is happening? In the previewed window, what is the output of window.onbeforeunload?
You also need to make sure to set the returnValueof e to something other than null e.g. :
function sendAlert() {
window.onbeforeunload = (e) => {
const dialogText = 'Random Text';
e.returnValue = dialogText;
return dialogText; }
}

Whats the best way to programatically open a pane inside Dijit AccordionContainer

I am trying open & close accordion panes programatically. Here is the simplified version of my code. Even though I set the first pane's selected to false and and second pane's selected to true, only the first pane opens when it loads on the browser (FF3).
var accordionContainer = new dijit.layout.AccordionContainer().placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"hello"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"hello1"});
accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
//accordionContainer.selectChild(accordPane2);
accordionContainer.startup();
accordPane.selected = false;
accordPane2.selected = true;
You can do it like this:
accordionContainer.selectChild( accordPane2 );
Assuming you are using dojo 1.3.
dijit.layout.AccordionContainer is a subclass of dijit.layout.StackContainer, which has selectChild defined.
I set up a demo page where you can see this code in action
If you were calling selectChild before startup, that could cause the error you were seeing since the widget wasn't in a 'complete' state. (Sorry, missed the commneted out code before I posted original answer)