Click Event in CKEditor5 Toolbar - ckeditor5

I found some information on CKEditor4 on trapping a clicked tool on the CKEditor toolbar but the v5 rewrite means this no longer works:
editor.on('afterCommandExec', handleAfterCommandExec);
function handleAfterCommandExec(event)
{
var commandName = event.data.name;
// For 'bold' commmand
if (commandName == 'bold')
alert("Bold button pressed!");
}
Are there any examples of working CKEditor 5 code to detect when a tool has been clicked? I'm actually trying to trap when someone clicks Track Changes to show the changes sidebar but hide it otherwise.

Maybe this works
const command = editor.commands.get('bold')
command.on('execute', () => {
console.log('Bold has been executed')
})

Related

Clicking on button in iframe in Cypress

Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.
Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')
HTML of the problem
Tried the other ways to click on iframe button:
cy.get('iframe[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
})
also
cy.get('[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('[class="resp-iframe"]').click(150,150)
})
and
cy.iframe('#resp-iframe').find('[name="submitButton"]')
Error
Error 2
Updated FYI:
The first part of code - clicking the Google button in bottom-right:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
Then, waiting for secure payment preloader to finish up:
cy.wait(20000)
Then, trying to catch the Process button by suggestions:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
or
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
whole code part looks:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
cy.wait(20000)
cy.iframe('[name="AcsFrame"]').find('#submit').click()
But still, getting:
Maybe anyone had something like that?
Thanks.
How about you try this:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
You don't need to repeat the resp-iframe inside the .find().
The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.
Everything else looks ok
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')

How to select a line chart by clicking somewhere else than a datapoint in echarts?

I am using echarts to visualize multiple line-charts. When I click exactly on a datapoint I am able to select a specific line chart. However If I click elsewhere on the line, where there in no datapoint associated, the chart in not selected. I know there is a focus feature by hovering the mouse. I want the same functionality using the click event.
I am using the following method, but I am not sure how to implement it.
myChart.getZr().on('click', params => {
//to be implemented
})
Here is the configuration example for the hovering effect on echarts:
https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis
I solved this with filled-area
I put areaStyle: {} in series' option
then add the following event handler like this
myChart.getZr().on('click', function (params) {
Object.keys(params.target).filter(key => key.includes(
'__ec_inner_')).filter(key => params.target[key]
.seriesIndex != undefined).forEach(key => {
console.log(option.series[params.target[key]
.seriesIndex].name)
})
});

PrimeNg TabView with ConfirmDialog not working

I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀

vala webkit context menu

How to remove defaut context menu in vala?
https://valadoc.org/webkit2gtk-4.0/WebKit.ContextMenu.html
this code, not working
var cm = new WebKit.ContextMenu();
cm.remove_all();
According to the documentation, you could do something like that.
my_web_view.context_menu.connect ((menu, evt, hit_test) => { return true; });
This signal is emitted every time a context menu is about to be shown. Returning true in the handler will just prevent the menu to appear.

How to disable right click during navigation from one web page to other?

I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">