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

Custom Formats rendering twice on deserialization. #4551

Open
CaseSens opened this issue Jan 3, 2025 · 0 comments
Open

Custom Formats rendering twice on deserialization. #4551

CaseSens opened this issue Jan 3, 2025 · 0 comments

Comments

@CaseSens
Copy link

CaseSens commented Jan 3, 2025

When I use my custom Timestamp Format, it correctly serializes as just 1 <span>, but upon deserialization (i.e. when create() is called), it renders the Timestamp twice into the DOM. It will only render twice, unless I hot-reload where it will double the amounts every time. I tried and failed to make a codepen or quilljs example but wasn't able to get either to work with this code.

Steps for Reproduction

  1. Turn a piece of text into Timestamp blot

image

  1. Refresh

After the refresh, when it deserializes the Delta and formats it, it renders twice:

image

The code:

import Quill from "quill";
import InlineBlot from "quill/blots/inline";

type TimestampedTextValueFormat = { text: string; timestamp: number };

export default class Timestamp extends InlineBlot {
  static blotName = "timestampedText";
  static tagName = "span";
  static className = "timestampedText";

  static create(value: TimestampedTextValueFormat) {
    console.log(Quill.version);
    console.log("Creating timestamped text:", value);
    // Create the DOM node
    let node = super.create();

    // Set the text content
    node.textContent = value.text;

    // Store the timestamp as a data attribute
    node.setAttribute("data-timestamp", value.timestamp.toString());

    // Apply styling or class
    node.classList.add(this.className);
    node.classList.add("bg-red-400/25");
    // node.className = `cursor-pointer p-1 px-2 bg-red-400/25 rounded-lg mx-2`;

    return node;
  }

  /* This formats static function is commented out because another issue posting
  (https://github.com/slab/quill/issues/2154#issuecomment-397751348) claimed
  this had fixed their issue. */

  // static formats(domNode: HTMLElement) {
  //   return {
  //     text: domNode.textContent || "",
  //     timestamp: parseInt(domNode.getAttribute("data-timestamp") || "0", 10),
  //   };
  // }

  format(name: string, value: TimestampedTextValueFormat) {
    if (name === this.statics.blotName && value) {
      // Update the timestamp and text
      this.domNode.textContent = value.text;
      this.domNode.setAttribute("data-timestamp", value.timestamp.toString());
    } else {
      super.format(name, value);
    }
  }

  formats() {
    let formats = super.formats();
    formats[this.statics.blotName] = {
      text: this.domNode.textContent || "",
      timestamp: parseInt(
        this.domNode.getAttribute("data-timestamp") || "0",
        10
      ),
    };
    return formats;
  }
}

Expected behavior:
For a custom Format to render only once on deserialization.

Actual behavior:
Renders twice, the second render being on a new line.

Platforms:
I'm using Tauri V2.0 along with React (Not strict mode), which uses the OS' native Webview (in my case, Windows Edge WebView 2)

Version:
Quill v2.0.2 (Not react-quill)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant