question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Undo / Redo does not work properly for EmbedBlot.

See original GitHub issue

Please describe the a concise description and fill out the details below. It will help others efficiently understand your request and get to an answer instead of repeated back and forth. Providing a minimal, complete and verifiable example will further increase your chances that someone can help.

Steps for Reproduction

  1. Added a new EmbedBlot and defined value functions.
  2. After I add a new EmbedBlot on the Quill component, I try CTRL+Z for undo.
  • When there is no appended texts, undo just removes that Custom Blot perfect. But if I try redo, then it just adds a simple text(from value() function) and does not add CustomBlot back.
  • When there is appended texts, its behavior is really messy. I am gonna attach the video below for that.
class MathInputCmp extends Embed {
  state = {
    mathField: null
  };

  static create(val) {
    const node = super.create();
    node.innerHTML = '<span class="input__math__field"></span>';
    node.setAttribute('data-latex', val);
    node.setAttribute('contenteditable', false);
    return node;
  }

  static value(domNode) {
    return domNode.getAttribute('data-latex');
  }

  static formats(domNode) {
    const MQ = window.MathQuill.getInterface(2);
    const mathField = MQ.StaticMath(domNode.firstChild);
    return {
      "data-latex": mathField.latex()
    };
  }

  constructor(domNode, value) {
    super(domNode, value);
    const MQ = window.MathQuill.getInterface(2);
    const mathField = MQ.StaticMath(domNode.firstChild);
    mathField.latex(value);
    domNode.setAttribute('data-latex', value);
    this.state = {
      mathField
    };
  }

  value() {
    return this.state.mathField.latex();
  }

  format(name, value) {
    if (name === 'data-latex') {
      if (value) {
        this.domNode.setAttribute('data-latex', value);
      } else {
        this.domNode.removeAttribute('data-latex');
      }
    } else {
      super.format(name, value);
    }
  }
}
MathInputCmp.blotName = "MathInput";
MathInputCmp.tagName = "span";
MathInputCmp.className = "input__math";
Quill.register(MathInputCmp, true);

https://vimeo.com/319684211

Expected behavior:

  1. undo should remove CustomBlot completely.
  2. redo should restore CustomBlot again.

Actual behavior:

  1. undo does not remove CustomBlot sometimes.
  2. redo is not adding CustomBlot back never.

Platforms:

Google Chrome 72.0 Using this on react react-quill: 1.3.3 quilljs: 1.2.6

Version:

quilljs: 1.2.6

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:2
  • Comments:8

github_iconTop GitHub Comments

3reactions
fritzfrcommented, Apr 9, 2019

Similar problem. For me though, undo restores the custom blot with the word true, no matter what was in there before.

I am on 2.0.0-dev.3.

2reactions
Chris-Kincommented, Oct 23, 2019

I also encounter this problem. We need get a complete delta information when excute ‘undo’ operation. Or whole node is also accepted.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to create undo/redo buttons in Quill JS (react-quill)?
Here's how to make undo/redo work for react-quill: ... In the editor, the undo/redo buttons don't have the icons yet; I haven't figured...
Read more >
Getting to know QuillJS - Part 1 (Parchment, Blots, and Lifecycle)
Blots are not necesarilly always constructed with their create function. ... and Parchment.create(blotName) will work correctly.
Read more >
Why is undo/redo not working! - Blender Stack Exchange
Pressing Shift + Alt when? As far as I am aware there is no way to disable undo/redo.
Read more >
Quill - Pasting Custom Embed Sometimes Return Boolean Instead ...
After I add a new EmbedBlot on the Quill component I try CTRL+Z for undo. When there is no appended texts undo just...
Read more >
Test Tables - JS Bin - Collaborative JavaScript Debugging
scrollIntoView(); this.stack[dest].push(delta); } }, { key: 'clear', value: function clear() { this.stack = { undo: [], redo: [] }; } } ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found