npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

quill-delta-enhanced

v0.0.6

Published

Format for representing rich text documents and changes. And with DELTA EMBED support.

Downloads

5

Readme

QUILL DELTA ENHANCED

For more instructions, please read Instruction.

English 中文版

quill-delta with DELTA EMBED support. If you want to know the basic concept of delta, please read the README of quill-delta.

Motivation

Quill-delta can basically only be used to manage flat document data. It is powerless for document contains complex levels. But such as Microsoft Word, you can embed tables and text boxes in documents, and then embed complex document content in tables and text boxes. In order for quill-delta to manage complex embed data, there is QUILL-DELTA-ENHANCED.

Changes

enhance insert operator

The original insert operation of quill-delta can insert three types of data: string, number, and object. On this basis, delta types are added, such as:

var embedContent = new Delta().insert('embed')
var doc = new Delta().insert(embedContent)

No matter how complicated the content of embedContent is, for doc, the length of embedContent is always 1. In addition, a number type 'key' attribute has been added to the insert operation to mark the unique insert operation. For the role of the key, refer to the part that introduces the new diff algorithm below.

enhance retain operator

The original retain operation of quill-delta can only be of type number. On this basis, a delta type is added, for example:

var embedContent = new Delta().insert('embed')
var doc = new Delta().insert(embedContent)
// {ops:[{insert: {ops:[{insert: "embed"}]} }]}

var modifyEmbedAttr = new Delta().retain(5, { bold:true })
var modifyAttr = new Delta().retain(modifyEmbedAttr)

doc.compose(modifyAttr)
// {ops:[{insert: {ops:[{insert: "embed", attributes: {bold: true}}]} }]}

The new delta type retain operation refers to applying the delta operation to the content whose length is 1 at the current position. In the above example, modifyEmbedAttr is applied to the embedContent. This delta type retain operation can only compose with data of type number and delta.

modify insert number operator

When the original insert operation of quill-delta inserts data of type number, its length is 1 regardless of the value of number. Such as:

var delta1 = new Delta.insert(1)
delta1.length() // 1

var delta2 = new Delta.insert(5)
delta2.length() // 1

This is because quill-delta only considers the data of type number as an indivisible data, and does not “understand” the data content, which limits the use of number type. Therefore, the operator of insert number type after modification will It is understood by quill-delta-enhanced to insert n data, that is, the length is n, for example:

var delta1 = new Delta.insert(1)
delta1.length() // 1

var delta2 = new Delta.insert(5)
delta2.length() // 5

remove insert object operator

The original insert operation of quill-delta can insert data of type object, such as:

var delta = new Delta().insert({embedData: 'embed'})

This type of operation will no longer be supported in quill-delta-enhanced, that is, the insert operator only supports three types of data: string, number, and delta. However, as mentioned above, I have modified the meaning of the insert number operation, so insert object type operations can be replaced with insert number, such as:

// used before
var insertImage = new Delta().insert({src: 'http://xxxx.xx/xx.jpg'})

// now
var insertImage = new Delta().insert(1, {src: 'http://xxxx.xx/xx.jpg'})
// You can even insert 5 pictures in a row
var insertFiveImages = new Delta().insert(5, {src: 'http://xxxx.xx/xx.jpg'})

modified diff algorithm

quill-delta's original diff algorithm can only perform diff calculations on strings, so the use scenarios are very limited and the calculated results are often not optimal. This is because quill-delta's diff algorithm uses the npm package fast-diff at the bottom. This package only supports string diff. Imagine the following case

var a = new Delta().insert(new Delta().insert('a'))
var b = new Delta().insert(new Delta().insert('b')).insert(new Delta().insert('a'))

According to the original diff logic of quill-delta, the diff result of these two deltas will be

new Delta().retain(new Delta().insert('b').delete(1)).insert(new Delta().insert('a'))

For specific reasons, you can refer to the source code of quill-delta. In order to solve this problem, I introduced a new attribute in the insert operation: key, which is used to mark the unique insert operation, so that when two deltas contain an insert operation with the same key, quill-delta-enhanced will know These two operations are the same operation. If the data of this operation has not changed, then the situation of deleting and reinserting this operation will not occur. The above scenario will result in diff in quill-delta-enhanced. become:

var a = new Delta().insert(new Delta().insert('a'), null, 1)
var b = new Delta().insert(new Delta().insert('b'), null, 2).insert(new Delta().insert('a'), null, 1)

var expected = new Delta().insert(new Delta().insert('b'))

More complex scenarios can refer to the testcase in the repository

Have fun!