How do my plugin get notified when editor.setData is done?
I have a plugin which need to do some calculations on data, each time editor.setData is called.
If you want to listen to all data changes in the editor and make some action after it, then you can do:
editor.model.document.listenTo( 'change:data', () => {
// Perform some action.
}
Related
I'm firing a custom event listener ...
export const customEvent = new Event("HelloOld", {bubble: false});
And I'm dispatching that event on an API response.
.then(res => {
document.dispatchEvent(customEvent);
})
Now that event listener (HelloOld) is already being used heavily by others, but I need to change its name to "HelloNew".
So, how to change the event name without breaking the old one? I thought of aliasing, but I don't know how to approach that.
i have a button in my project when i click on it two queries added to URL
onClickBtn(){
this.$router.push({queries: {name:'kevin' , age:21} })
}
and I have a watch on $route
watch:{
$route:function(){
// call API
}
}
and when i click on that button severall time
watch calls my API every time although nothing has changed
and this make a problem form me
because nothing has changed in route But API is called and the same data is
received .
what should I do to avoid calling API in watch , when queries don't changed ??
The object you are pushing on the router is always different, that's why the $route watch is launched.
You can compare the data you receive in the watch, so that when they are different then you invoke the API:
watch:{
'$route' (newRoute, lastRoute){
// Check if query is different
// call API
}
}
On top of the answer that Cristian provided, you could also even double-check if your stuff has changed before even pushing a new object to your router.
Like this
checkIfUpdateNeeded && this.$router.push({queries: {name: 'kevin', age:21 } })
That way, you will have less moving parts and you won't have a trigger in the watcher for "nothing", especially if you're pushing a bigger object and want to make a deep-diff between 2 objects.
I am trying to write a way for in Electron to duplicate Vuex commits from one Window to another with IPC. This way devs can use the Vuex store between browser windows seamlessly without manually using IPC calls to send everything, causing lots of duplicate code.
So far, I have written a basic Vue plugin to handle pushing commits around
With only some base code using store.subscribe, I IPC send all commits to main, which then forwards the commits to all renderer windows, applying the commits to their respective stores. Each new browser Windows is able to forward the data to all others. To prevent endless loops, I check the event and payload and verify it's different than the current value before applying it.
This all works. It's not even that slow amazingly. But there is a problem, When the window is opened, the store is fresh. I need a way to export the entire store, IPC it to the new window, and import the store.
Is there any way in Vuex to generically export the entire state, then import it again?
After some time, I found a way to sync vuex store between main window and another IPCRenderer Window. I would not explain how to subscribe to mutation using plugins since the question is about replacing the state. Here are the logic steps to replace the state in newWindow:
When opening a new window from main window, we can call IPCRenderer
and send our entire state (this.$store.state)
For example:
this.ipcRenderer.send("open-new-window",cloneObject(this.$store.state));
What we should note here, we could not send a complex object like DOM Object to our new window because you will get circular JSON error, so here I use script (UTIL.cloneObject(this.$store.state)) for convert complex object to avoid circular JSON Error. You can see the code here or you can find in another place since this question is not about converting to circular json
In ipcMain you can store this state in the global variable, for example:
let temporaryState
ipcMain.on('open-new-window', async(event, data) => {
//Another code...
newWindow = new BrowserWindow(options);
temporaryState = data
//this is data is your temporary state from mainWindow
//Another code for open new window
})
Request to rehydrate state in new window if new window already in "mounted stage", for example:
mounted() {
this.ipcRenderer.send("ask-rehydrate");
}
Back to ipcMain, you can listen to rehydrate request from newWindow and send the state that you already store in global variable, for example:
ipcMain.on('ask-rehydrate', (event) => {
newWindow.webContents.send("currentState", temporaryState);
}
Listen again in mounted stage to replace the current stage in "newWindow":
mounted() {
this.ipcRenderer.send("ask-rehydrate");
this.ipcRenderer.once("currentState", (event, state) => {
new Promise((resolve, reject) => {
logger.debug("Current state will be replaced with %o", state);
this.$store.replaceState(state);
resolve();
}).then(() => {
//Do something});
});
}
Congratulation now your state in newWindow will replaced with the current state in main window, here the mutation also sync if you subscribe the mutation using plugin. We should do this in mounted stage of vue since we need to wait until the store already initiated.
I wanted to run a function whenever I change to a specific tab in my react-native app, but I couldn't find a way.
I know that after Wix Navigation (RNN) v2, the way to change current tab is by using mergeOptions, and that works. But what if I want to also, after the tab is changed, execute a function from that screen?
This is how I'm changing the tab:
Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
currentTabIndex: 3
}
}
The tab is changed, but I couldn't find a way to add a listener or trigger event after this specific event occurs.
Is there any way to accomplish this?
React-Native: 0.60.5
React-Native-Navigation: 3.1.2
Thanks.
You can add a listener which will trigger when ever the tab change . See Documentation
Try this
// Subscribe
const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
});
...
// Unsubscribe
bottomTabEventListener.remove();
Let's assume that we have an API call authenticates the user and then based on if a user is returned from the server or not, we either replaceState or do nothing, which might look something like this:
<Route component={App} onEnter={authUser} />
const onEnter = (nextState, replaceState) => {
if (isClient) {
AuthHelper.findCurrentUser()
.then(response => {
// This here doesn't work, `replaceState` doesn't change the page or URL, however I know for sure
// that the line is being called because if I put a `debugger` right before it,
// the `debugger` hits every time...
replaceState({nextPathname: nextState.location.pathname}, '/dashboard');
})
.catch(response => {});
// If we put the same line here, it redirects the user to the dashbaord.
// replaceState({nextPathname: nextState.location.pathname}, '/dashboard');
}
}
The only differentiating factor between replaceState working and not working is that one is called from within the then of a Promise, and one is called outside of the Promise resolution. Does the Promise affect replaceState from executing?
The syntax for asynchronous onEnter hooks is necessarily a bit difference, since we need a way to block the transition until the handler has completed running.
If your onEnter hook is asynchronous, then it needs to take a 3rd argument, e.g.
function onEnter(nextState, replaceState, callback) {
/* ... */
}
When you do this, you have to call callback() yourself when your enter hook has finished running. It's necessary for us to use this API to support people who e.g. aren't using