Skip to content

Latest commit

 

History

History
125 lines (104 loc) · 7.09 KB

README.md

File metadata and controls

125 lines (104 loc) · 7.09 KB

Render Quill's Delta ops in React

See Quill, Delta

Quickstart

Installation

npm install quill-delta-to-react

Usage

import { RenderDelta } from 'quill-delta-to-react';

const ops =  [
  { "insert": "Hello\n" },
  { "insert": "This is colorful", "attributes": { "color": "#ff0000" } },
  { "insert": "\n" }
];

const App = () => {
  return (
    <RenderDelta ops={ops} />
  );
};

Principles

This library is designed to provide a lot of flexibility and extensibility. You can customize nearly anything about the rendering.

At the same time, we take performance seriously. You can have many instances of a RenderDelta component on a page, and it will render quickly and efficiently.

Finally, this library keeps dependencies to a minimum, and the dependencies that it has are kept up-to-date.

Configuration

The RenderDelta component accepts a few configuration options with the options prop as shown below:

Option Type Default Description
paragraphTag string 'p' Custom tag to wrap elements
classPrefix string 'ql' A CSS class name to prefix classes for styles such as size and font
inlineStyles boolean or object false If true or an object, use inline styles instead of classes. See Rendering Inline Styles section below for using an object
multiLineBlockquote boolean true Instead of rendering multiple blockquote elements for quotes that are consecutive and have exactly the same attributes, render them into only one
multiLineHeader boolean true Same deal as multiLineBlockquote for headers
multiLineCodeBlock boolean true Same deal as multiLineBlockquote for code-blocks
linkRel string none Specifies a value to put on the rel attr on all links. This can be overridden by an individual link op by specifying the rel attribute in the respective op's attributes
linkTarget string '_blank' Specifies target for all links; use '' (empty string) to not generate target attribute. This can be overridden by an individual link op by specifiying the target with a value in the respective op's attributes.
allowBackgroundClasses boolean false If true, classes will be added for the background attribute
urlSanitizer function (url: string): string undefined A function that is called once per url in the ops (image, video, link) for you to do custom sanitizatio
customTag function (format: string, op: DeltaInsertOp): string | undefined undefined Callback allows to provide custom tag for some format
customAttributes function (op: DeltaInsertOp): { [key: string]: string } | undefined undefined Allows to provide custom html tag attributes
customClasses function (op: DeltaInsertOp): string | string[] | undefined undefined Allows to provide custom classes
customCssStyles function (op: DeltaInsertOp): string | string[] | undefined undefined Allows to provide custom CSS styles

Rendering Inline Styles

The easiest way to enable this is to pass the option inlineStyles: true.

You can customize styles by passing an object for inlineStyles instead. Below is how the default inline styles are configured:

const DEFAULT_INLINE_STYLES = {
  direction: (value, op) => {
    if (value === 'rtl') {
      if (op.attributes['align']) {
        return {
          direction: 'rtl',
        };
      }
      return {
        direction: 'rtl',
        textAlign: 'inherit',
      };
    }
    return undefined;
  },
  font: (value) => {
    switch (value) {
    case 'serif':
      return { fontFamily: 'Georgia, Times New Roman, serif' };
    case 'monospace':
      return { fontFamily: 'Monaco, Courier New, monospace' };
    default:
      if (typeof value === 'string') {
        return { fontFamily: value };
      }
    }
  },
  size: (value) => {
    switch (value) {
    case 'small':
      return { fontSize: '0.75em' };
    case 'large':
      return { fontSize: '1.5em' };
    case 'huge':
      return { fontSize: '2.5em' };
    default:
      return undefined;
    }
  },
  indent: (value, op) => {
    const indentSize = Number(value) * 3;
    return {
      [op.attributes['direction'] === DirectionType.Rtl
        ? 'paddingRight'
        : 'paddingLeft']: `${indentSize}em`,
    };
  },
};

Keys to this object are the names of attributes from Quill. The values are a function that takes the value of the attribute and the Op object and returns an object of CSS properties (or undefined).

Advanced Custom Rendering

In addition to providing custom HTML element tags, classes, styles, and any other attribute, you can define custom Op types and provide a rendering function for these types with a customRenderer prop.

By default your custom ops will be treated as inlines, but you can set the renderAsBlock: true property in an op's attributes to have it rendered as a block.