ek0519/nova-quilljs

A Laravel Nova implementation of the Quill editor for Vue.js

nova-quilljs's Issues

Image upload error

Hi,

I have done all the steps below:
composer require ek0519/quilljs
php artisan vendor:publish --provider="Ek0519\Quilljs\FieldServiceProvider"
php artisan migrate
php artisan storage:link

But when I upload a image, even it is a small logo image, it will show [upload error].
Other function like text or embedding video work perfectly.

Can let me know how to solve this?

Paragraph Spacing

Currently in when writing text in 'Normal' text style, and then press Enter, it skips a line.
It looks like it becomes double spaced.

Is it possible when pressing enter to go directly to the line below? (i.e. similar to this text editor on github)

Error when updating Nova from v3.8.4 to v3.9.2

Hey there,

First of all, I like your package very much!

The placeholder method which is being used within the Ek0519\Quilljs\Quilljs class overrides the placeholder method within the Laravel\Nova\Fields\Field.

I guess within these updates the placeholder method has been changed to:

/**
 * Set the placeholder text for the field if supported.
 *
 * @param string $text
 * @return $this
 */
public function placeholder($text)
{
    $this->placeholder = $text;
    $this->withMeta(['extraAttributes' => ['placeholder' => $text]]);

    return $this;
}

This gives an error like this:

Declaration of Ek0519\Quilljs\Quilljs::placeholder(string $value) should be compatible with Laravel\Nova\Fields\Field::placeholder($text) {"userId":1,"exception":"[object] (ErrorException(code: 0): Declaration of Ek0519\\Quilljs\\Quilljs::placeholder(string $value) should be compatible with Laravel\\Nova\\Fields\\Field::placeholder($text) at /vendor/ek0519/quilljs/src/Quilljs.php:53)

So I did change the placeholder method within the Ek0519\Quilljs\Quilljs class to:

public function placeholder($text)
{
    return $this->withMeta(['placeholder'=> $text]);
}

And this fixes the issue.

I don't know how you want to update this; Should I send you a PR?

Editor Height

Thank you for this great package. Is there any option to set a height for the editor? And is it possible to resize it?

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Hi,
I got an error message when using this package.
I don't know whether it affects the function or not.
I'm using the last version of laravel nova.

vendor.js?id=0846a9071dc76942659b:1 TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at p.mounted (quilljs:1)
    at Pt (vendor.js?id=0846a9071dc76942659b:1)
    at en (vendor.js?id=0846a9071dc76942659b:1)
    at Object.insert (vendor.js?id=0846a9071dc76942659b:1)
    at y (vendor.js?id=0846a9071dc76942659b:1)
    at p.__patch__ (vendor.js?id=0846a9071dc76942659b:1)
    at p.t._update (vendor.js?id=0846a9071dc76942659b:1)
    at p.ln.before (vendor.js?id=0846a9071dc76942659b:1)
    at ln.get (vendor.js?id=0846a9071dc76942659b:1)
    at ln.run (vendor.js?id=0846a9071dc76942659b:1)
It @ vendor.js?id=0846a9071dc76942659b:1
jt @ vendor.js?id=0846a9071dc76942659b:1
Yt @ vendor.js?id=0846a9071dc76942659b:1
Pt @ vendor.js?id=0846a9071dc76942659b:1
en @ vendor.js?id=0846a9071dc76942659b:1
insert @ vendor.js?id=0846a9071dc76942659b:1
y @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
t._update @ vendor.js?id=0846a9071dc76942659b:1
ln.before @ vendor.js?id=0846a9071dc76942659b:1
ln.get @ vendor.js?id=0846a9071dc76942659b:1
ln.run @ vendor.js?id=0846a9071dc76942659b:1
un @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
Gt @ vendor.js?id=0846a9071dc76942659b:1
Promise.then (async)
Vt @ vendor.js?id=0846a9071dc76942659b:1
ee @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
ln.update @ vendor.js?id=0846a9071dc76942659b:1
Mt.notify @ vendor.js?id=0846a9071dc76942659b:1
set @ vendor.js?id=0846a9071dc76942659b:1
On.dn.set @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
k @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
e.<computed> @ app.js?id=866a14858a4d8d105161:1
o @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
Promise.then (async)
o @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
t @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
k @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
e.<computed> @ app.js?id=866a14858a4d8d105161:1
o @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
t @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
Pt @ vendor.js?id=0846a9071dc76942659b:1
en @ vendor.js?id=0846a9071dc76942659b:1
vn._init @ vendor.js?id=0846a9071dc76942659b:1
p @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
init @ vendor.js?id=0846a9071dc76942659b:1
n @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
M @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
t._update @ vendor.js?id=0846a9071dc76942659b:1
ln.before @ vendor.js?id=0846a9071dc76942659b:1
ln.get @ vendor.js?id=0846a9071dc76942659b:1
ln.run @ vendor.js?id=0846a9071dc76942659b:1
un @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ vendor.js?id=0846a9071dc76942659b:1
Gt @ vendor.js?id=0846a9071dc76942659b:1
Promise.then (async)
Vt @ vendor.js?id=0846a9071dc76942659b:1
ee @ vendor.js?id=0846a9071dc76942659b:1
t.$nextTick @ vendor.js?id=0846a9071dc76942659b:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
k @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
e.<computed> @ app.js?id=866a14858a4d8d105161:1
o @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
Promise.then (async)
o @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
t @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ app.js?id=866a14858a4d8d105161:1
l @ app.js?id=866a14858a4d8d105161:1
z @ vendor.js?id=0846a9071dc76942659b:1
o @ vendor.js?id=0846a9071dc76942659b:1
lt @ vendor.js?id=0846a9071dc76942659b:1
qt.confirmTransition @ vendor.js?id=0846a9071dc76942659b:1
qt.transitionTo @ vendor.js?id=0846a9071dc76942659b:1
xt.init @ vendor.js?id=0846a9071dc76942659b:1
beforeCreate @ vendor.js?id=0846a9071dc76942659b:1
Pt @ vendor.js?id=0846a9071dc76942659b:1
en @ vendor.js?id=0846a9071dc76942659b:1
vn._init @ vendor.js?id=0846a9071dc76942659b:1
vn @ vendor.js?id=0846a9071dc76942659b:1
value @ app.js?id=866a14858a4d8d105161:1
(anonymous) @ edit?viaResource=&viaResourceId=&viaRelationship=:232

Image alignments are causing problems - sometimes do not save, or sometimes get left aligned when reopening the editor for editing post

Hi there,

This plugin is awesome. Just causing a problem for images - sometimes attached images do not save the alignment and sometimes they are aligned left automatically. The same kind of issue is also addressed in the following link. Could you assist me with how to resolve it?

kensnyder/quill-image-resize-module#10

Thanks

MIssing styles when showing stored contnet on resource details page.

Consider these..

How can I add styles for the indented, centered and right aligned texts or overwrite the .ql-indent-x & .ql-align-x classes?

In the front-end I just targeted a parent class quill and then in it .ql-indent-x etc.. but in Nova, that is not an option.

Maybe If a create a custom field to extend this one, I can add my styles? Doesn't seem like the right way to go about it though...

Nova 4 support

Do you plan on updating the package to Nova 4 ?

Editor overlaps field below.

The editor overlaps any fields below in Chrome or Firefox

Past as Plaintext

How can I paste text as plain text?

404 error on image upload

I have done all the steps:
composer require ek0519/quilljs
php artisan vendor:publish --provider="Ek0519\Quilljs\FieldServiceProvider"
php artisan migrate
php artisan storage:link

Laravel Nova ver 3.14

Editor overlaps fields below it

The editor overlaps any fields below it (in Firefox) at least.

What solves it for me is setting the height on .ql-container instead of .quill-editor. Also the padding-bottom is not needed that way. Of course the overall height of the editor then exceeds the set height due to the height of the toolbar, but I would prefer that to overlapping.

请修改你的README文档内容

你一个老外，请不要在readme里放入不利**的内容链接，香港事务，你无权干预和评论，请删掉这些链接！像你这样不尊重国家主权的开发者， 代码也是不值得信任的。耗子尾汁！

You are a foreigner, please do not put in the readme adverse links to China, Hong Kong affairs, you have no right to intervene and comment, please delete these links! For developers like you who don't respect national sovereignty, code can't be trusted. Rat tail juice!

Undefined property $attachCallback

Hi,

Thanks for this package!

However, I'm getting

ErrorException: Undefined property: Laravel\Nova\Fields\Text::$attachCallback in file /asdf/vendor/ek0519/quilljs/src/Http/Controllers/UploadController.php on line 26

Any ideas?

When enter , . on russian keybord - is activated search mode

When i enter , . (/?) on Russian keybord - is activated search mode

Paste html markup in Quill Editor

Hi,

I've got a question about the conversion of pasted markup in the QuillJS Editor. I would like to give editors the option to paste existing markup inside the editor, but the editor doesn't seem to convert it to correct html. Can you tell me if this is supported within this plugin, and if so how I can enable this feature?

For example:

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

Is converted to:

<div class="ql-editor" data-gramm="false" contenteditable="true">
    <p>&lt;table&gt;</p>
    <p>&nbsp;&nbsp;&lt;thead&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th colspan="2"&gt;The table header&lt;/th&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</p>
    <p>&nbsp;&nbsp;&lt;/thead&gt;</p>
    <p>&nbsp;&nbsp;&lt;tbody&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;The table body&lt;/td&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;with two columns&lt;/td&gt;</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</p>
    <p>&nbsp;&nbsp;&lt;/tbody&gt;</p>
    <p>&lt;/table&gt;</p>
</div>

The image attachment does not getting save

Hi, firstly thank you for creating this awesome package! And I am implementing the field with image upload feature, the image uploaded and displayed fine. However, it does not move the record from nova_pending_trix_attachments table to nova_trix_attachments after resource updated. I am using the latest laravel nova version 3.18.0 with the original trix attachment do this fine. Could you please take a look?