https://github.com/amoutonbrady/solid-quill

The Quill rich-text editor as a Solid component.
https://github.com/amoutonbrady/solid-quill

Last synced: 3 days ago
JSON representation

The Quill rich-text editor as a Solid component.

• Host: GitHub
• URL: https://github.com/amoutonbrady/solid-quill
• Owner: amoutonbrady
• Created: 2021-01-30T14:56:34.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-31T11:02:02.000Z (over 3 years ago)
• Last Synced: 2024-11-02T19:34:14.609Z (6 days ago)
• Language: TypeScript
• Size: 53.7 KB
• Stars: 23
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-solid-js - Solid Quill - quill)) (📦 Components & Libraries / Form)

README

        
# solid-quill

A [quilljs](https://quilljs.com/) wrapper for [Solid](https://github.com/ryansolid/solid).

This package is pretty new and probably incomplete in some way.

**PR & issues are much welcomed to help me fill in the missing pieces**

## Installation

This package has two peer-dependencies, [quill](http://npmjs.com/package/quill) and [solid-js](http://npmjs.com/package/solid-js)

```bash

# npm

$ npm install solid-quill solid-js quill

# pnpm

$ pnpm add solid-quill solid-js quill

# yarn

$ yarn add solid-quill solid-js quill

```

## Usage

This package leaves the whole state management to quill internals and therefore doesn't (yet at least) provide a way to do a controlled editor out of the box. The reason behind that decision is that while researching and playing myself with other editor (namely codemirror), I found that trying to get in the way to impose a controlled flow generally results in a Frankenstein of a package.

Initially, I would like to avoid being put in that situation and delegating to quill everything state related. You are provided with the quill instance and can do whatever you'd do with vanilla quill. This is just a wrapper meant to help integration within a solid application.

### Example usage

```tsx

const App: Component = () => {

  let q: Quill;

  onMount(() => {

    console.log(q);

    // log: undefined

    // This is because the `SolidQuill` component also needs to wait for

    // the element to be mounted to the dom bubbling the reference

    // upward to the parent component.

  });

  const init = (quill: Quill) => {

    console.assert(q.getText() === quill.getText());

  };

  return (

    

  );

};

```

### Listen to text change

```tsx

import Quill from "quill";

import { SolidQuill } from "solid-quill";

function App() {

  let quill: Quill;

  return (

     console.log(quill.getText())} />

  );

}

```

## Default values

```tsx

const defaultValues: QuillOptionsStatic = {

  theme: "snow",

  formats: [

    "bold",

    "italic",

    "underline",

    "strike",

    "align",

    "list",

    "indent",

    "size",

    "header",

    "link",

    "image",

    "video",

    "color",

    "background",

    "clean",

  ],

  modules: {

    toolbar: [

      ["bold", "italic", "underline", "strike"],

      [{ align: [] }],

      [{ list: "ordered" }, { list: "bullet" }],

      [{ indent: "-1" }, { indent: "+1" }],

      [{ size: ["small", false, "large", "huge"] }],

      [{ header: [1, 2, 3, 4, 5, 6, false] }],

      ["link", "image", "video"],

      [{ color: [] }, { background: [] }],

      ["clean"],

    ],

    clipboard: {

      matchVisual: false,

    },

  },

};

```

## Contribute

1. Clone the project

2. `pnpm install` (you can install it via `npm i -g pnpm`)

3. You can use `pnpm dev` to start a local server and hack your wait around