How do I add callback functions to my config

[sattyframework]

Bug description

Hello, I am looking at using the comments extension which all works well when using the 'embedded' mode. However I wanted to explore using the callback mode which allows users to save comments to external database.

Have tried to apply the below to the tinymce config in statamic, but given that it needs to be valid json it fails. Is there another way to add callback functions?

Any help is appreciated. Thanks

This is the example given on the tinymce docs: https://www.tiny.cloud/docs/tinymce/latest/comments-callback-mode/#tinycomments_create

const create_comment = (ref, done, fail) => {
  const { content, createdAt } = ref;

  fetch('https://api.example/conversations/', {
    method: 'POST',
    body: JSON.stringify({ content: content, createdAt: createdAt }),
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Failed to create comment');
      }
      return response.json();
    })
    .then((ref2) => {
      let conversationUid = ref2.conversationUid;
      done({ conversationUid: conversationUid });
    })
    .catch((e) => {
      fail(e);
    });
}

tinymce.init({
  selector: 'textarea',
  plugins: 'tinycomments',
  tinycomments_mode: 'callback',
  tinycomments_create: create_comment, // Add the callback to TinyMCE
  ...
});

Steps to reproduce

Install TinyMCE plugin and add comments extension with mode set to callback

Environment and versions

Environment
Application Name: Statamic
Laravel Version: 11.10.0
PHP Version: 8.2.19
Composer Version: 2.7.7
Environment: local
Debug Mode: ENABLED
URL: warcom.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: statamic
Database: mysql
Logs: stack / single
Mail: log
Queue: sync
Session: file

Statamic
Addons: 5
Sites: 3 (UK, US, German)
Stache Watcher: Enabled
Static Caching: Disabled
Version: 5.7.2 PRO

Statamic Addons
mitydigital/statamic-tinymce-cloud: 3.0.1
rias/statamic-link-it: 2.4.0
ryanmitchell/statamic-translation-manager: 2.0.0
statamic/eloquent-driver: 4.2.0
statamic/seo-pro: 6.0.3

Statamic Eloquent Driver
Asset Containers: eloquent
Assets: eloquent
Blueprints: eloquent
Collection Trees: eloquent
Collections: eloquent
Entries: eloquent
Forms: eloquent
Global Sets: eloquent
Global Variables: eloquent
Navigation Trees: eloquent
Navigations: eloquent
Revisions: file
Taxonomies: eloquent
Terms: eloquent
Tokens: eloquent

Additional details

No response

[martyf]

It's not elegant, however you need to move those callbacks inline, and just have your configuration as a simple js object.

For example:

{
    selector: 'textarea',
    plugins: 'tinycomments',
    tinycomments_mode: 'callback',
    tinycomments_create: (ref, done, fail) => {
        const { content, createdAt } = ref;

        fetch('https://api.example/conversations/', {
            method: 'POST',
            body: JSON.stringify({ content: content, createdAt: createdAt }),
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Failed to create comment');
            }
            return response.json();
        })
        .then((ref2) => {
            let conversationUid = ref2.conversationUid;
            done({ conversationUid: conversationUid });
        })
        .catch((e) => {
            fail(e);
        });
    }
    // ...
}

If you were in a Vue app with full access to the tiny Vue component, you could have the scripts in there: but there's no way for us to inject scripts in to the Tiny Cloud component for Statamic.