Inline blot similar to Link

[danielschwartz]

Hi All,

I'm trying to create a custom blot that is similar to Link in that typing after it doesn't keep the formatting (e.g. typing after the blot doesn't keep the same format, but reverts to no formatting), but typing inside of does. My code is below, which follow the Link blot code almost exactly (except for adding properties other than href or blocking certain formatting options), any idea why I can't get this to work?

import Inline from '../blots/inline';


class UserMention extends Inline {
    static create(value) {
        let node = super.create(value);
        node.setAttribute('data-user-id', value.userId);
        node.setAttribute('data-user-name', value.userName);
        return node;
    }

    static formats(domNode) {
        return {
            userName: domNode.getAttribute('data-user-name'),
            userId: domNode.getAttribute('data-user-id')
        }
    }
}

UserMention.blotName = 'user-mention';
UserMention.className = 'user-mention'
UserMention.tagName = 'SPAN';

export default UserMention;

[think2011]

I also want to know.

[jhchen]

The behavior is natively specific to the <a> tag (see https://jsfiddle.net/x7g357ze/) and differs between platforms.

[think2011]

@jhchen So.. how can I created Inline instance similar Link or

https://quilljs.com/guides/cloning-medium-with-parchment/
This teach me how to apply, but did not teach how to cancel

I really want to know, please give me some tips, thanks!
http://codepen.io/think2011/pen/ggPKXE

[danielschwartz]

@think2011 if it's a feature that natively specific to the A tag, then you will have to use a modified A tag for whatever custom blot you'd like. I'm sure there's a way to hack it into Quill core, but that feels like a heavy modification just to get this behavior.

[think2011]

@danielschwartz if I click cancel format and start input, is the result I want.

so I try to read source code formats/bold.js, but I did not found any effected code..😳

[danielschwartz]

If you look at the standard inline blot format from Parchment (which Bold is a subclass of), there is nothing that dictates when it is on or off. Quill core (the part of quill that binds to the contenteditable div) is the part that affects whether a format is currently enabled or not.  You could technically hook into the SELECTION_CHANGE event and look at the node immediately preceding the cursor, and if it matches your custom blot, disable the format by using the Quill API, but again, that feels like a very heavy way to accomplish this when you could simply base your Blot of the A tag and have it happen automatically. 

…

-- Daniel Schwartz On Wed, Jan 11, 2017 at 9:29 AM "曾浩" < mailto: > wrote: a, pre, code, a:link, body { word-wrap: break-word !important; } https://github.com/danielschwartz if I click cancel format and start input, is the result I want. https://cloud.githubusercontent.com/assets/3961388/21839205/751bab42-d811-11e6-8dba-c33087383bbb.gif so I try to read source code https://github.com/quilljs/quill/blob/develop/formats/bold.js , but I did not found any effected code.. 😳 — You are receiving this because you were mentioned. Reply to this email directly, #1232 (comment) , or https://github.com/notifications/unsubscribe-auth/AAe2WUGhhswd4FfJlDDFp3602QdZ_nmTks5rROdSgaJpZM4LZ3WF .

[think2011]

Now I used SELECTION_CHANGE and TEXT_CHANGE to remove the format by custom blot, really a very heavy way to accomplish 😅

[puopg]

I think I might be able to help you with this. I too am working on a facebook like mention autocomplete. What I am doing is essentially controlling the inputs explicitly. Basically, you need to hook into key events before quill gets them and also control inserting of keys yourself.

So lets say you want to insert a character after you have added a mention with some styles of course. Use the keypress event to determine if an actual character is about to go into the editor and then prevent the default action from happening and insert that item yourself. You know that you want to insert it with no styles, you don't want quill's default action on carrying over styles.

Now for a few other events like enter, delete, backspace. Those you need to attach to the config so that your handler runs before quill can. This way if there's something like you want to delete a character from a mention and then you want to remove all formatting from the entire mention, you can do that when you intercept the event first, then allow quill to do its normal action of deleting the character or whatnot.

[scottfr]

I'm trying to solve this too.

@danielschwartz, did using the 'a' tag work for you? In my test using tagName = 'a' doesn't result in the correct behavior and the styling is still extended.

@think2011, do you have an example of the selection_change/text_change approach?

[bakkerjoeri]

I've been plugging away at the same problem, and based on your answers I implemented the following to make something behave more like a link:

quill.on('text-change', (delta, oldDelta, source) => {
  let currentIndex = quill.getSelection().index;

  if (
    source === 'user' // otherwise this goes into an endless loop.
    && quill.getFormat(currentIndex).likelink // format at cursor is likelink
    && !quill.getFormat(currentIndex + 1).likelink // format right after cursor is not likelink, indicating end of a format block
    && delta.ops[delta.ops.length - 1].insert // the user just inserted something
  ) {
    let lengthOfInsert = delta.ops[delta.ops.length - 1].insert.length;

    quill.formatText(currentIndex - lengthOfInsert, currentIndex, 'likelink', false);
  }
});

It specifically looks for text changes done by the 'user', and only removes the linklike format from the newly inserted character(s) when the delta indicates an insert.

There are a few problems with this, of course. I'm not adding up all insert lengths, for instance, but just assume there's a single insert operation at the end of the delta. Additionally, I'd like blots to manage this behaviour themselves, in stead of on the editor level. But this is a first step, at least.

[dkreft]

I'd like to add a little extra flavor for those who are wondering what's going on under the covers here...

I tried to create a subclass of Inline with tagName of "A" and it didn't work. After much digging around, I added a console.log('mutations: %o', mutations) here: https://github.com/quilljs/parchment/blob/master/src/blot/scroll.ts#L27-L29 and discovered that when typing after an inserted link (in Chrome), mutations contains:

When my class has a tagName of "A" and no other attributes, the mutations contains this:

It's only when I added an href attribute to the <a> that it finally gave me the desired behavior.

HOWEVER, in Firefox, there's only one MutationRecord in mutations even when typing after an inserted link, so not even using an href attribute is going to save you in that browser.

TL;DR: Works in Chrome if you make sure your <a> has an href attribute; does not work in Firefox either way:

export default MyCustomLinkTag extends Inline {
  static tagName = 'A'

    static create(tagName) {
      const node = super.create()

      node.setAttribute('href', 'http://xxxxx')

      return node
  }
}

[dkreft]

As a followup to my previous post, it would see that this behavior we're seeing here is a combination of browser-specific behavior and possibly a deficiency/bug in Quill. If you look at the basic example provided for ProseMirror (https://prosemirror.net/examples/basic/), it behaves as expected (i.e. typing immediately after a link does not add text between the <a></a> tags) in both Chrome and Firefox. I haven't dug into how ProseMirror makes this possible.

[Haemp]

We really do need a native quill way to handle the cursor behavior at the end of a starting inline blot. Treating the inline blot as a link does work, but has the limitations of no long being able to nest those blots since browsers won't allow nested anchor tags.

[mitya777]

You can wrap anchor tags in an object tag with a fake mime type to nest links, here are some resources to that effect https://knovigator.com/quest/nested-links-html-anchor-tags-ygqql91g

[Krypternite]

Now I used SELECTION_CHANGE and TEXT_CHANGE to remove the format by custom blot, really a very heavy way to accomplish 😅

Would like to know how to do this

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏