"foundnode" is not showing value of custom attrs

[dsipetcher]

As I'm requesting to parse custom "id" which I added to attrs, command will show me text allign without any problems, but "id" value shows as "null" (i've checked in db that it is has a value). What seem to be a problem here? Is there a way to do it?

[arnaugomez]

Hi @dsipetcher Could you provide a CodeSandbox or code snippet so we can reproduce the bug? The more details you provide, the more likely we can provide a helpful answer.

[dsipetcher]

@arnaugomez Will be waiting to hear from you, sorry, I'm not familiar with CodeSandbox(

[arnaugomez]

I encourage you to give CodeSandbox a try, it's very useful 😜

[dsipetcher]

will do for shure then))

[arnaugomez]

Hey @dsipetcher,

Thanks for reaching out and providing the detailed code snippets!

It sounds like you're correctly adding an id to your node data before it potentially gets to Tiptap (or intending for it to be there), but when you try to access it later via node.attrs.id after inspecting the editor state (state.doc.descendants), it comes back as null. You also noted that standard attributes like textAlign work as expected.

The most probable reason for this behavior is that Tiptap's schema isn't aware of your custom id attribute.

Tiptap relies fundamentally on its schema, which is built from all the extensions you provide (Paragraph, Heading, Bold, your CustomParagraph, etc.). Each extension can define the attributes its nodes or marks should have using the addAttributes hook.

When Tiptap parses input content (HTML or JSON) or creates new nodes, it strictly adheres to this schema. If an attribute exists in your source data (like your id from the database) but isn't explicitly defined in the addAttributes section for that specific node type (e.g., for your CustomParagraph), Tiptap will effectively ignore or discard it during the parsing and state update process. It won't become part of the node.attrs object within the editor's internal document representation (state.doc).

Standard attributes like textAlign work because the extensions that provide them (e.g., @tiptap/extension-text-align) correctly use addAttributes to register textAlign within the schema for the relevant node types.

The Solution: Define id using addAttributes

The recommended Tiptap way to fix this is to explicitly tell Tiptap about your id attribute by defining it in the schema of the relevant extension. Since you have a CustomParagraph.ts, that's the ideal place:

// features/editor/extensions/custom-paragraph.ts (or similar)
import { Paragraph } from '@tiptap/extension-paragraph';
import { mergeAttributes } from '@tiptap/core';
import { v4 as uuidv4 } from 'uuid'; // Or your preferred ID generator

export const CustomParagraph = Paragraph.extend({
  // Optional: Keep the name 'paragraph' if you want it to behave like one,
  // or use a unique name if it's truly custom.
  name: 'paragraph',

  addAttributes() {
    return {
      // Inherit existing attributes from the parent (Paragraph)
      // This ensures things like textAlign are still included if defined there.
      ...this.parent?.(),

      // Define your custom 'id' attribute
      id: {
        // Default value when a new node of this type is created.
        // You might want to generate an ID here or leave it null initially.
        default: null,
        // How Tiptap should get this attribute's value when parsing HTML.
        // Adjust the selector ('data-block-id', 'id') based on your HTML structure.
        parseHTML: element => element.getAttribute('data-block-id') || element.getAttribute('id'),
        // How Tiptap should render this attribute back into HTML.
        // Using 'data-*' attributes is often recommended for custom metadata.
        renderHTML: attributes => {
          if (!attributes.id) {
            // Don't render the attribute if the id is null or empty
            return {};
          }
          // Render as data-block-id="your-id"
          return { 'data-block-id': attributes.id };
        },
        // Important for collaboration and history: Should the attribute be kept when
        // splitting (Enter key) or merging (Backspace/Delete) nodes?
        // For unique IDs, you usually want 'false'.
        keepOnSplit: false,
        keepOnMerge: false, // Or true depending on desired merge behavior
      },
    };
  },

  // (Optional but recommended)
  // If you want to ensure every paragraph ALWAYS has an ID when created *within* the editor:
  // onCreate(props) {
  //   // Note: Directly mutating attrs here might be complex.
  //   // It's often better to ensure IDs are generated *before* content hits the editor,
  //   // or use a command/transaction to set the ID after creation if needed.
  //   // Example: if (!props.node.attrs.id) { /* generate and set via transaction */ }
  // },

  // Ensure parseHTML and renderHTML handle other attributes correctly too
  // (mergeAttributes helps manage this)
  // renderHTML({ HTMLAttributes }) {
  //   // Use mergeAttributes to combine existing HTML attributes with yours
  //   // The 'id' attribute rendering is handled by the definition in addAttributes
  //   return ['p', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  // }
});

Integration Steps:

1. Modify your CustomParagraph.ts (or the relevant extension file for the nodes needing the id) to include the addAttributes block as shown above.
2. Ensure you are importing and using this CustomParagraph extension in the extensions array passed to useEditor in page-editor.tsx.
3. Make sure your ID generation logic (like addIdsToBlocks or uuidv4/uuid7) runs on the content before it's passed to Tiptap initially. This ensures the IDs exist in the source data for parseHTML to potentially pick up.

Once you've defined the id attribute in the schema this way, Tiptap will recognize it, store it correctly in the node's attributes, and your code (foundNode.attrs.id) should start retrieving the actual ID value instead of null.

Does this solution work for your code? Let me know if that clears things up or if you have any more questions!

You can learn more about defining custom attributes here: https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#attributes

[dsipetcher]

@arnaugomez Thank you so much for your answer! I will try your solution and will mark as answered as soon as I will get problem solved ☺️

[arnaugomez]

Ok, maybe the problem is another thing, but I'm quite confident that it's that Tiptap's schema isn't aware of your custom id attribute. Do not stop experimenting and building with Tiptap! Have patience, learn how it works inside, and you'll build great things with it!