Skip to content
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

Open
ma2ciek opened this issue Jun 25, 2019 · 9 comments
Open

Add Watchdog support for the integrations #4693

ma2ciek opened this issue Jun 25, 2019 · 9 comments
Labels
package:watchdog support:2 An issue reported by a commercially licensed client. type:feature This issue reports a feature request (an idea for a new functionality or a missing option).

Comments

@ma2ciek
Copy link
Contributor

ma2ciek commented Jun 25, 2019

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 the get model(){} and get view() and getData() 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 🎉

@ma2ciek ma2ciek changed the title Support for the integrations Add support for the integrations Jun 25, 2019
@pjasiun
Copy link

pjasiun commented Jun 25, 2019

Maybe watchdog could be built-in into integrations? So wherever you add the editor to the integration it is automatically wrapped into a watchdog?

@ma2ciek
Copy link
Contributor Author

ma2ciek commented Jun 25, 2019

It's an interesting idea.

Right now, we require the concrete API from the Editor class. So probably it could be used internally to wrap the editor into the watchdog. I'll check it.

@mlewand mlewand transferred this issue from ckeditor/ckeditor5-watchdog Oct 9, 2019
@mlewand mlewand added this to the nice-to-have milestone Oct 9, 2019
@mlewand mlewand added status:confirmed type:task This issue reports a chore (non-production change) and other types of "todos". package:watchdog labels Oct 9, 2019
@ma2ciek ma2ciek added type:feature This issue reports a feature request (an idea for a new functionality or a missing option). and removed type:task This issue reports a chore (non-production change) and other types of "todos". labels Nov 12, 2019
@Mgsy Mgsy added the support:2 An issue reported by a commercially licensed client. label Dec 10, 2019
@ma2ciek
Copy link
Contributor Author

ma2ciek commented Dec 10, 2019

This issue is currently blocked by the #4699. Currently adding Watchdog introduces imports to @ckeditor/ckeditor5-utils, which lead to the CKEditor 5 duplication error in some integrations where both, the editor and the integration layer, are built separately.

@lslowikowska lslowikowska added support:1 An issue reported by a commercially licensed client. support:2 An issue reported by a commercially licensed client. and removed support:2 An issue reported by a commercially licensed client. support:1 An issue reported by a commercially licensed client. labels Dec 11, 2019
@scofalik scofalik changed the title Add support for the integrations Add Watchdog support for the integrations Jan 8, 2020
@ma2ciek
Copy link
Contributor Author

ma2ciek commented Sep 24, 2020

The support for the Watchdog and Context features has been implemented in the React integration and will be released soon - ckeditor/ckeditor5-react#178.

@JarvisH
Copy link

JarvisH commented Apr 19, 2021

Any news regarding this issue? Will watchdog be available for Vue anytime soon?

@AnnaTomanek
Copy link
Contributor

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...

@JarvisH
Copy link

JarvisH commented Apr 27, 2021

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:

  • Create the watchdog instance in the parent component which contains any editor components.
  • Add watchdog to window.watchdog instead of passing via props.
  • In this same parent component, we also create the context instance as well as all the editor config objects which we then add via ContextWatchdog.add([{}]) Method .
  • In the child Editor-Components, no editor instantiation takes place, only event listeners etc. are added.

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:

Note that this method can be called multiple times, but for performance reasons it is better to pass all items together.

Adding the watchdog as a global variable is also unfortunate.

@psmyrek
Copy link
Contributor

psmyrek commented Apr 27, 2021

Instead of a global variable, maybe you could try the provide/inject feature of Vue and use it to pass the Watchdog down to child components? The provide/inject bindings are not reactive by default.

@JarvisH
Copy link

JarvisH commented Apr 27, 2021

@psmyrek thanks for the hint, will give that a try.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:watchdog support:2 An issue reported by a commercially licensed client. type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Projects
None yet
Development

No branches or pull requests

9 participants