TinyMCE AI Integration

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai',
  tinymceai_token_provider: function() {
    // Return a promise that resolves to a JWT token
    return fetch('/api/token').then(response => response.text());
  }
});

// Simplified integration of the Users plugin needed for Suggested Edits integration.
// For production applications, replace the dummy user with actual user data from your authentication system.
function setupUsers(editor) {
  // Just add a minimal dummy user
  editor.settings.tinymceai_user = {
    id: 'user-1',
    name: 'John Doe'
  };
}

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai suggestededits',

  // Extend the main editor toolbar configuration with additional buttons:
  // - 'tinymceai': opens the Quick actions menu,
  // - 'tinymceai-conversations': moves the user focus to AI chat,
  // - 'tinymceai-improve-writing': executes the "Improve Writing" quick action.
  //
  // You can add more Quick actions to the toolbar configuration if needed.
  toolbar: [
    'tinymceai',
    'tinymceai-conversations',
    'tinymceai-improve-writing',
    // ... other toolbar items
  ],

  // You can use the same AI feature buttons in the balloon toolbar configuration for contextual convenience.
  contextmenu: 'tinymceai tinymceai-conversations tinymceai-improve-writing',

  setup: function(editor) {
    setupUsers(editor);
  },

  // Configure the document identifier for AI chat history and context preservation.
  // This should be a unique identifier for the document/article being edited.
  tinymceai_document_id: 'document-123', // Replace with your actual document ID

  // Main configuration of AI feature.
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  },

  // ⚠️ Mandatory UI configuration.
  // Display the AI user interface in a dedicated DOM element. The interface can be also displayed
  // in an overlay or in a custom way, learn more in the next chapters of this guide.
  tinymceai_ui_type: 'sidebar',
  tinymceai_sidebar_element: document.querySelector('.ai-sidebar'),

  // (Optional) Whether the AI interface should be visible when the editor is created.
  tinymceai_ui_visible_by_default: false,

  // (Optional) Configure AI chat by configuring available context resources.
  tinymceai_conversations_context: {
    // Configuration of the built-in context options.
    document: {
      enabled: true
    },
    urls: {
      enabled: false
    },
    files: {
      enabled: true
    },

    // (Optional) Additional sources for AI chat context.
    sources: [
      // Definition of the custom context provider.
      {
        // The unique identifier of the provider.
        id: 'my-docs',

        // The human-readable name of the provider.
        label: 'My Documents',

        // The async callback to retrieve the list of available resources.
        // Usually involves fetching data from a database or an external API,
        // but here we use a simple array of resources for demonstration purposes.
        getResources: async (query) => [
          // Texts in various formats
          {
            id: 'text1',
            type: 'text',
            label: 'Internal note in plain text format',
            data: {
              content: 'Lorem ipsum dolor sit amet...',
              type: 'text'
            }
          },
          {
            id: 'text2',
            type: 'text',
            label: 'Internal note in Markdown format',
            data: {
              content: '## Markdown note\n\n**Lorem ipsum** dolor sit amet...',
              type: 'markdown'
            }
          },
          {
            id: 'text3',
            type: 'text',
            label: 'Internal note in HTML format',
            data: {
              content: '<h2>HTML note</h2><p>Lorem ipsum dolor sit amet...</p>',
              type: 'html'
            }
          },
          {
            id: 'text4',
            type: 'text',
            label: 'Internal note (fetched on demand)',

            // Note: Since the `data` property is not provided, the content will be retrieved using the `getData()` callback (see below).
            // This will prevent fetching large content along with the list of resources.
          },

          // URLs to resources in different formats
          {
            id: 'url1',
            type: 'web-resource',
            label: 'Blog post in Markdown',
            data: 'https://example.com/blog-post.md'
          },
          {
            id: 'url2',
            type: 'web-resource',
            label: 'Company brochure in PDF',
            data: 'https://example.com/brochure.pdf'
          },
          {
            id: 'url3',
            type: 'web-resource',
            label: 'Company website in HTML',
            data: 'https://example.com/index.html'
          },
          {
            id: 'url4',
            type: 'web-resource',
            label: 'Terms of service in plain text',
            data: 'https://example.com/terms-of-service.txt'
          },

          // ...
        ],

        // The optional callback to retrieve the content of resources without the `data` property provided by the `getResources()` callback.
        // When the user picks a specific resource,  the content will be fetched on demand (from database or external API) by this callback.
        // This prevents fetching large resources along with the list of resources.
        getData: (id) => fetchDocumentContent(id)
      },

      // More context providers...
    ]
  },

  // (Optional) The configuration of AI chat models selection feature.
  tinymceai_conversations_models: {
    defaultModelId: 'agent-1',
    modelSelectorAlwaysVisible: true,
    displayedModels: ['gpt', 'claude']
  },

  // (Optional) Configure the Quick actions feature by adding a new command.
  tinymceai_quick_actions_extra_commands: [
    // An action that opens AI chat interface for interactive conversations.
    {
      id: 'explain-like-i-am-five',
      displayedPrompt: 'Explain like I am five',
      prompt: 'Explain the following text like I am five years old.',
      type: 'CHAT'
    },

    // ... More custom actions ...
  ]
});