Code Monkey home page Code Monkey logo

quill's Introduction

Reedsy: Why Fork?

We need to use our own forked version of the Delta class, which adds support for complex attributes (which we need for tracked changes).

Quill Rich Text Editor

Quill Logo

Documentation • Development • Contributing • Interactive Playground

Build Status Version Downloads

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

To get started, check out https://quilljs.com/ for documentation, guides, and live demos!

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Include Quill stylesheet -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  const quill = new Quill("#editor", {
    theme: "snow",
  });
</script>

Take a look at the Quill website for more documentation, guides and live playground!

Download

npm install quill

CDN

<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

<!-- Theme included stylesheets -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
  rel="stylesheet"
/>

<!-- Core build with no theme, formatting, non-essential modules -->
<link
  href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js"></script>

Community

Get help or stay up to date.

License

BSD 3-clause

quill's People

Contributors

alecgibson avatar alexkrolick avatar benbro avatar bmakuh avatar butsjoh avatar byronm avatar dgreensp avatar fancyoung avatar fnlctrl avatar fracmak avatar hansnow avatar heidid avatar igmcdowell avatar jacobmllr95 avatar jhchen avatar keeganpoppen avatar leoasis avatar luin avatar masonicboom avatar ndnovadev avatar philraj avatar svermeulen avatar tboevil avatar thomsbg avatar victorborrasdev avatar violetpixel avatar vojtechsebo avatar willrowe avatar yilativ avatar younggglcy avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

xavivars

quill's Issues

Cannot find typings of `@reedsy/quill`

After installing both @reedsy/delta and @reedsy/quill in a project with "strict" typescript setup, I can't import anything from @reedsy/quill. For reference, I can import from @reedsy/delta with no issues.

Steps for Reproduction

npm i reedsy/delta
npm i quill#2.0.0-reedsy-2.0.3

And then, in my index.ts

import type Delta from "@reedsy/quill-delta";
import type Quill from "@reedsy/quill"; // this line errors with the message below


[!] (plugin typescript) Error: @rollup/plugin-typescript TS7016: Could not find a declaration file for module '@reedsy/quill'. '/home/xavi/quill_test/node_modules/@reedsy/quill/dist/quill.js' implicitly has an 'any' type.
  Try `npm install @types/reedsy__quill` if it exists or add a new declaration (.d.ts) file containing `declare module '@reedsy/quill';`

Expected behavior:

I can use all typings from the library.

As a reference, this is what is included in @reedsy/quill-delta dist folder

image

Actual behavior:

@reedsy/quill dist folder doesn't include any typing, so the error happens

As a reference, see how all typing files are not in dist folder, but next to the JS file

image

** Notes **

Complex attributes are (sometimes) lost

Complex attributes are lost in certain situations, when a custom blot has both complex attributes and format.

Steps for Reproduction

Given an editor, with the following content:

[{insert: "hello world"}],

And a custom Blot that contains a complex argument, when this happens:

const complex = { key: 'foo', value: 'bar' }

const ops = new Delta()
        .retain(6)
        .retain(match.length, { complex });

quill.updateContents(ops);

Expected behavior:

New content looks like

[
    { insert: "hello "},
    { insert "world", attributes: { complex: { key: 'foo', value: 'bar' } }
]

Actual behavior:

New content looks like

[
    { insert: "hello "},
    { insert "world", attributes: { complex: true }
]

Debugging information

The reason why this happens is here:

quill/core/editor.ts

Lines 263 to 265 in d2ea83a

this.delta = this.getDelta();
if (!change || !isEqual(oldDelta.compose(change), this.delta)) {
change = oldDelta.diff(this.delta, selectionInfo);

Even if "oldDelta" was correct, and oldDelta.compose(change) is also correct, when calling getDelta the whole state of the editor gets regenerated.

That happens, basically, by getting the "delta" for each corresponding line

quill/core/editor.ts

Line 135 in d2ea83a

return delta.concat(line.delta());

(which, in reality, is a block)

quill/blots/block.ts

Line 21 in d2ea83a

this.cache.delta = blockDelta(this);

quill/blots/block.ts

Lines 171 to 184 in d2ea83a

function blockDelta(blot: BlockBlot, filter = true) {
return (
blot
// @ts-expect-error
.descendants(LeafBlot)
.reduce((delta, leaf: LeafBlot) => {
if (leaf.length() === 0) {
return delta;
}
return delta.insert(leaf.value(), bubbleFormats(leaf, {}, filter));
}, new Delta())
.insert('\n', bubbleFormats(blot))
);
}

and, to create those deltas, no other arguments than the formats are used.

quill/blots/block.ts

Lines 186 to 206 in d2ea83a

function bubbleFormats(blot, formats = {}, filter = true) {
if (blot == null) return formats;
if (typeof blot.formats === 'function') {
formats = {
...formats,
...blot.formats(),
};
if (filter) {
// exclude syntax highlighting from deltas and getFormat()
delete formats['code-token'];
}
}
if (
blot.parent == null ||
blot.parent.statics.blotName === 'scroll' ||
blot.parent.statics.scope !== blot.statics.scope
) {
return formats;
}
return bubbleFormats(blot.parent, formats, filter);
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.