marmelab / aor-rich-text-input

<RichTextInput> component for admin-on-rest, useful for editing HTML code in admin GUIs

Archived Repository This code is no longer maintained. Feel free to fork it, but use it at your own risks.

<RichTextInput> for admin-on-rest

For editing HTML with admin-on-rest, use the <RichTextInput> component. It embarks quill, a popular cross-platform Rich Text Editor.

Installation

npm install aor-rich-text-input --save-dev

Usage

import React from 'react';
import {
    DateInput,
    Edit,
    EditButton,
    LongTextInput,
    TextInput,
} from 'admin-on-rest/mui';
import RichTextInput from 'aor-rich-text-input';

const PostTitle = ({ record }) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
        <DisabledInput label="Id" source="id" />
        <TextInput source="title" validation={{ required: true }} />
        <LongTextInput source="teaser" validation={{ required: true }} />
        <RichTextInput source="body" validation={{ required: true }} />
        <DateInput label="Publication date" source="published_at" />
    </Edit>
);

You can customize the rich text editor toolbar using the toolbar attribute, as described on the Quill official toolbar documentation.

<RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />

License

This library is licensed under the MIT Licence, and sponsored by marmelab.

aor-rich-text-input's Issues

Loosen quill dependency lock

Any reason for locking on Quill minor 1.1?
We're using zenoamaro/react-quill and as a result we end up with multiple versions of quill in webpack bundle. Could we change aor-rich-text-input dependency on quill to either: ~1.1 or ^1.1.9?

Empty content on first load

Coming from the listing, the field is empty. After hitting refresh button, the field is filled.

If I log the value received in componentDidMount, I see it's empty the first time and not the second one.

<RichTextInput> doesn't display validation errors

With the following edition form:

export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
        <DisabledInput label="Id" source="id" />
        <RichTextInput source="body" validation={{ required: true }} />
    </Edit>
);

It's impossible to edit a post with no body - and there are no explanations.

Ported from https://github.com/marmelab/admin-on-rest/issues/207

How to set default direction on RTL in RichTextInput

I'm using the Admin-on-rest framework. I read AOS and Quill documents and don't find any solution.
How to set default direction on RTL in RichTextInput?
I want to it always be right-to-left.

    export const BookCreate = (props) => (
        <Create {...props} title="ایجاد کتاب جدید">
            <SimpleForm>
                <TextInput label="عنوان کتاب" source="title" />
                <RichTextInput label="توضیحات" source="description" formats={[{direction:'rtl'}]} toolbar={[ 
                    ['bold', 'italic', 'underline', 'link'],
                    [{ 'direction': 'rtl' }],
                    [{ 'align': [] }],
                    ['clean'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ]} />
            </SimpleForm>
        </Create>
    );

using additional quilljs modules

could you please enable including additional quilljs modules (e.g. https://github.com/kensnyder/quill-image-resize-module, https://github.com/kensnyder/quill-image-drop-module), or provide some workaround for accomplishing this?

style="color: rgb(0, 0, 0)"

The editor seems to apply style="color: rgb(0, 0, 0)" to tags (strong, em, etc) on text created with the editor, which then overrides the styles that would be applied to the text on our front-end. Why is this being applied? How can we make it not do this? Thanks.

Refresh button in the Edit view does not refresh data.

What you were expecting:
To have original values pulled from API and set in the form fields.

What happened instead:
The form field values do not get updated with the original values coming from the API.

Related to https://github.com/marmelab/admin-on-rest/issues/1417

Explore code splitting options

Quill.js, the main dependency of aor-rich-text-input, is a large addition to the bundle size of any SPA. Here, on admin-on-rest-demo, it's taking 14% of the bundle size.

We should provide a lazy loading alternative for people using a bundler compatible with code splitting.

aor-rich-text-input not adding content when store is changed with connect

I have a
<RichTextInput options={{ fullWidth : true }} source="body" label="Content"/>
When I change the redux-store from another component using connect, the new value does reflect. It works if instead of RichTextInput I use TextInput for example.

Quill adds padding without matchvisual option

I was trying out AOR and noticed it was adding extra padding before a list.

With some searching, I discovered this is a known feature, but can be disabled in Quill 1.3+. This component currently only supports Quill ~1.1.9, so I'm not sure if there is something stopping aor-rich-text-input going to version Quill 1.3?

Quill issue about padding here:
quilljs/quill#1483

Quill matchvisual option documentation:
https://quilljs.com/docs/modules/clipboard/#matchvisual

react is not in peerDependencies

Is there any reason for specifying explicit react dependency?

"react": "~15.4.0"

It leads to errors like this: https://facebook.github.io/react/warnings/refs-must-have-owner.html

The package is crashed when importing at the existed admin on rest project code.

I installed this package additionally at the existing aor project.
But it was crashing when importing at the code.
Following is dependencies and log from terminal.

"dependencies": {
    "admin-on-rest": "^1.4.0",
    "aor-loopback": "^1.3.2",
    "aor-rich-text-input": "^1.0.2",

ERROR in ./node_modules/aor-rich-text-input/lib/RichTextInput.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "~quill/dist/quill.snow.css";
| 
| .aor-rich-text-input .ql-editor {
 @ ./node_modules/aor-rich-text-input/lib/index.js 33:0-30
 @ ./client/containers/crud/talent.js
 @ ./client/containers/app.js
 @ ./client/index.js
 @ multi webpack-hot-middleware/client ./client/index

Editor is not rendered

Hi,

I encountered a problem with this Component.

I use the RichTextInput with HydraAdmin from "Les Tilleuls".

The code below throw an error :

 <RichTextInput {...props} source="description" addLabel={true} />

uncaught at handleFetch TypeError: Cannot read property 'value' of undefined
    at RichTextInput.componentDidMount 

If a add the input props with arbitrary value, it's working.

 <RichTextInput {...props} source="description" addLabel={true} input={{"value":"<b>Test</b>"}} />

I'm really lost ! Thank's for your help.

Nico (Noob on ReactJS)