solid-quill

A quilljs wrapper for 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 and 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.

$3

`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 (
// Bind the Quill instance to the parent
ref={q}
// Which element to create (default to div)
as="main"
// Events
onReady={init}
onTextChange={console.log}
onSelectionChange={console.log}
onEditorChange={console.log}
// Quill options
debug={false}
modules={} // see defaults below
formats={} // see defaults below
placeholder=""
readOnly={false} // for now this is the only reactive props
theme="snow"
bounds={}
scrollingContainer={}
strict={}
// All other props will be attached to the rendered
// dom element, so you can add classes, styles, w/e
class="quill"
style="transform: rotate(90deg)"
classList={{ active: true }}
/>
);
};
`

$3

`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