CODEWITHSUNDEEP
reactjstypescriptnext.jstinymce
Alexandre Pascal
Alexandre Pascal

Reputation: 11

TinyMCE Comments not displaying existing comments despite using correct data structure

I'm implementing TinyMCE Comments in a Next.js application, and I'm facing an issue where previously created comments are not being displayed when loading the editor. I'm using the tinycomments_fetch callback with the exact type structure from the documentation:

type tinycomments_fetch = {
    conversations: {
        [conversationUid: string]: {
            uid: string,
            comments: [
                {
                    uid: string,
                    author: string,
                    authorName?: string,
                    authorAvatar?: string,
                    content: string,
                    createdAt: string,
                    modifiedAt: string
                }
            ]
        }
    }
}

What I tried:

  1. My API correctly returns data in this exact format (verified in console logs)

  2. New comments work perfectly - they appear when created

  3. I've implemented the tinycomments_fetch callback to fetch all existing conversations:

tinycomments_fetch: (conversationUids: string[], done: (data: tinycomments_fetch) => void, fail: Function) => {
    fetch(`/api/communities/${communityId}/posts/${postId}/comments/conversations`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
    })
        .then(response => response.json())
        .then((data: tinycomments_fetch) => {
            console.log('All conversations:', data);
            done(data);
        })
        .catch(err => fail(err));
}

The API response matches the expected format exactly, but the comments still don't appear in the editor when loading.

Upvotes: 1

Views: 15

Answers (1)

Alexandre Pascal
Alexandre Pascal

Reputation: 11

I found the solution to this issue with help from TinyMCE support.

The problem wasn't with the tinycomments_fetch callback or the data structure, but rather with how the editor content itself was being handled. When creating comments, TinyMCE wraps the commented text in tags with specific attributes that the Comments plugin uses to identify and display comments. These spans are part of the editor's content.

The solution is to save the entire editor content (using editor.getContent()) to your database whenever a comment is created. This ensures that these special comment-related spans are preserved. Here's the implementation flow:

  1. User creates a comment
  2. Save the comment to the database
  3. Save the editor's content using editor.getContent()
  4. When the page loads/refreshes, load this saved content into the editor

This way, when the page refreshes and the content is loaded back into the editor, all the necessary markup for the Comments plugin is present, allowing it to properly display the existing comments.

Upvotes: 0

Related Questions