-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Watchdog support for the integrations #4693
Comments
Maybe watchdog could be built-in into integrations? So wherever you add the editor to the integration it is automatically wrapped into a watchdog? |
It's an interesting idea. Right now, we require the concrete API from the |
This issue is currently blocked by the #4699. Currently adding Watchdog introduces imports to |
The support for the Watchdog and Context features has been implemented in the React integration and will be released soon - ckeditor/ckeditor5-react#178. |
Any news regarding this issue? Will watchdog be available for Vue anytime soon? |
Hi @JarvisH, thanks for your interest. We'd really love to add watchdog support in the Vue integration, although I'm afraid I cannot give you any ETA for this. We are now focused on closing a few priority issues in the project and do not have enough manpower to squeeze this one in, unfortunately. However, we'll keep it in mind and will try to get back to this topic as soon as possible. Or maybe the Vue community will be able to give us a hand? It's an Open Source project after all... |
Hi Anna, thanks for your reply, I appreciate it. We managed to put a solution together where a watchdog could be used with the editor vue-component, which did require copying the Vue-Component and making changes to it of course. One problem we had, was that the Watchdog can not be passed as prop in Vue, as it otherwise becomes reactive and this causes errors. So we basically did the following:
Example parent Component: async mounted() {
await this.createWatchDog()
},
methods: {
async createWatchDog() {
// Get context config from some getter method
const contextConfig = getContextConfiguration()
// Create context instance
const contextWatchDog = new ContextWatchdog(Context)
await contextWatchDog.create(contextConfig)
// returns array of configs for multiple editors
// [{
// id: 'someId',
// type: 'editor',
// config: {
// placeholder: 'Some placeholder',
// toolbar: someToolBarConfig,
// heading: someHeadingConfig,
// collaboration: {
// channelId: ''
// }
// }
// }]
let configs = getConfigsFromSomeMethod()
// Loop through all configs and adjust
// channelId, set initialData or whatever you need
configs.map((conf) => {
})
/*
Add all editors to watchdog.
This improves performance, instead of
adding single editor objects direcly
in the individual editor components, which would
have been a lot easier and better suited for the
concept of vue components, but alas...
*/
await contextWatchDog.add(configs)
window.watchdog = contextWatchDog
this.watchdogReady = true
},
} In the child editor component which was copied from the ckeditor vue component: watch: {
// Wait for watchdogReady prop
watchdogReady(newValue) {
if (newValue === true) {
this.handleEditorInstance()
}
},
},
methods: {
handleEditorInstance() {
// Clone the config first so it never gets mutated (across multiple editor instances).
// https://github.com/ckeditor/ckeditor5-vue/issues/101
const editorConfig = Object.assign({}, this.config)
let watchdog = window.watchdog
const createdEditor = watchdog.getItem('someIdPassedViaProp')
// use created editor instance,
// fx add event handlers:
// createdEditor.editing.view.document.on('someEvent', function() {})
// Save the reference to the $_instance for further use.
this.$_instance = createdEditor
// Set initial disabled state.
createdEditor.isReadOnly = this.disabled
this.$_setUpEditorEvents()
// Let the world know the editor is ready.
this.$emit('ready', createdEditor)
},
} This feels contrary to how vue components normally work though, as it would have been much nicer to instantiate each Editor in its own component. This of course is also possible, but comes with a performance hit according to the ckeditor documentation:
Adding the watchdog as a global variable is also unfortunate. |
Instead of a global variable, maybe you could try the |
@psmyrek thanks for the hint, will give that a try. |
There won't be much to implement in the
Watchdog
after the ckeditor/ckeditor5-watchdog#1 will be closed to align the Watchdog to the interface required by integrations. Hopefully once theget model(){}
andget view()
andgetData()
will be implemented the watchdog should start working well inside the integrations. Anyway, we should test our integrations in how they behave when an error occurs.If you'd like to see this feature implemented, add a 👍 reaction to this post.
Update: The Watchdog is implemented inside the Angular and React integrations already 🎉
The text was updated successfully, but these errors were encountered: