advoor / nova-editor-js Goto Github PK
View Code? Open in Web Editor NEWEditor JS field for Laravel Nova
Editor JS field for Laravel Nova
I just added the package and initialised the field on my resource, however, i seem to be unable to use it. Not sure where to start looking for this problem.
SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at p.setInitialValue (nova-editor-js:1)
at p.mounted (nova-editor-js:1)
at Pt (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at en (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at Object.insert (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at y (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at p.patch (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at p.t._update (vendor.js?id=65e95ff86f8b1a7dffe7:1)
at p.ln.before (vendor.js?id=65e95ff86f8b1a7dffe7:1)
Referencing to EXTENDING.md
There is mentioned about webpack.mix.js
, but Laravel is not delivered with Vite by default. So maybe it needs an update? ๐ค
Is this package still active?
Hey guys,
Can't have the field with the content castable to array so it's sent to frontend as array, because nova field json.parse fails...
I have noticed that my db fields must contain an empty object "{}" in order for this to work.
So adding something like this:
NovaEditorJs::make('my_wonderful_content')
Where 'my_wonderful_conten' is an empty TEXT field on the DB
results in a console error:
Unexpected end of JSON input
Hello,
I currently have an app where the uploaded images need to be converted to the webp format. Currently I do this by observing my model, looping over the editor blocks and sending out jobs to convert the images from the block data. However, it would be nice if this package could thrown an event whenever an image has been successfully uploaded.
What do you think about this idea? I can implement it I think. Just wanted to get an opinion of the maintainer(s) first before I sink some time in it.
It would definitely make our codebase cleaner, and I'm sure other people can find a use for the events if they need to do some extra post-processing with images.
Cheers.
Currently Block Tunes are not available when rendering content.
Tunes are stored separate to a block's data. Here's an example for an image with a tune called "blockWidthTune":
{
"id":"4njDtOcDe2",
"type":"image",
"data":{
"file":{
"url":"/storage/images/tTVQFcY2KCNDXWHvKRX8VjdkOifWJK6aDdKQpqk8.jpg",
"thumbnails": ["/storage/images/tTVQFcY2KCNDXWHvKRX8VjdkOifWJK6aDdKQpqk8_small.jpg"]
},
"caption":""
},
"tunes":{
"blockWidthTune":"wide"
}
}
In NovaEditorJsConverter.php, only the block data key gets passed to the view, e.g.
$this->addRender(
"list",
fn($block) => view("nova-editor-js::list", $block["data"])->render()
);
We cannot change to passing the data and tunes separately like ['data' => $block['data'], 'tunes' => $block['tunes']]
without rewriting all the block views, so perhaps the best way to pass the tunes would be to merge them with the block data, like so:
$this->addRender(
"list",
fn($block) => view(
"nova-editor-js::list",
array_merge($block["data"], ["tunes" => $block["tunes"] ?? []])
)->render()
);
To prevent collision with an existing data key with the name 'tunes', the key could perhaps be changed to "_tunes".
Happy to open a PR but wanted to seek input first!
@roelofr this might be related to this issue because it's trying to save [object Object] again.
What's happening is that when I have an empty EditorJS field in Nova and type some content and save it, everything works fine.
If I then edit the resource and hit save but don't edit the content, I get:
3140 Invalid JSON text: "Invalid value." at position 1 in value for column 'post.body'. (SQL: update `posts` set `body` = [object Object], ...)
If I change the EditorJS content and save it (even if it's just adding a dot), then it does actually works.
The "active_url" validator failed when then domain use a CNAME (ex: https://www.lemonde.fr)
Should be a simple "url" validator.
Hi, I receive the below error when using this on a resource. I've added:
protected $casts = [
'content' => 'json'
];
to my model. But I still get this error. My database column type for 'content' is TEXT and not JSON as the server doesn't support JSON but that shouldn't make a difference as I'm using the casts property.
Any ideas?
The top level frontend message on the resource is:
Something went wrong: Wrong JSON format: Syntax error
SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at p.setInitialValue (nova-editor-js:1)
at p.mounted (nova-editor-js:1)
at Pt (vendor.js?id=abad729d86d183328118:1)
at en (vendor.js?id=abad729d86d183328118:1)
at Object.insert (vendor.js?id=abad729d86d183328118:1)
at y (vendor.js?id=abad729d86d183328118:1)
at p.patch (vendor.js?id=abad729d86d183328118:1)
at p.t._update (vendor.js?id=abad729d86d183328118:1)
at p.ln.before (vendor.js?id=abad729d86d183328118:1)
As far as i have seen, you are now using Spatie/Image for optimizing uploaded images.
Maybe better way will be using full Spatie/laravel-medialibrary (https://github.com/spatie/laravel-medialibrary), which also stores image information associated to object (thus making easier managing it later)?
@advoor I forked you here:
https://github.com/alloyking/nova-editor-js.
I don't actually know how pull requests work, nor if you even want changes I make.
But if you do I'm happy to help in anyway. My goal isn't to take over what you have here which I think is useful.
I made two hurried changes:
Thanks,
Alloyking
I've followed every step of the documentation under https://github.com/advoor/nova-editor-js#extending
But the plugin is still not appearing. I think the reason is because the javascript is rendered after the main editor-js scripts.
Here's the HTML part where the scripts are loaded.
<script>
window.config = {...}
</script>
<!-- Scripts -->
<script src="/vendor/nova/manifest.js?id=2d315777967b6001bcf1"></script>
<script src="/vendor/nova/vendor.js?id=e2c07eb6c9b9faf610fc"></script>
<script src="/vendor/nova/app.js?id=1c7abbbe8cf05b9e2ece"></script>
<!-- Build Nova Instance -->
<script>
window.Nova = new CreateNova(config)
</script>
<!-- Tool Scripts -->
<script src="/nova-api/scripts/nova-editor-js"></script>
<script src="/nova-api/scripts/editor-js-quote"></script>
<!-- Start Nova -->
<script>
Nova.liftOff()
</script>
I'm using the NovaEditorJsCast
on my modal. Everything is rendering as expected, except for anchor tags (<a href="..."></a>
), those are displayed as plain text. Anything I'm missing? I'm using the regular {{ $post->body }}
in my blade view.
Is this package works with Spatie Translatable ?
I was able to use it but as we store the json into another json, it's seem not to display the content on the nova index or show page. I can make some content and edit it but this is what I get when I try to see it in nova:
"Something went wrong: Field blocks
is missing"
Any solution or fix ? Thx
Hello,
Is it possible to edit the header tool levels ?
I want to disable H1 and I tried this but it's stil allowing H1 when editing :
'toolSettings' => [
'header' => [
'activated' => true,
'placeholder' => 'Header',
'defaultLevel'=> 3,
'levels'=> [2, 3, 4, 5],
'shortcut' => 'CMD+SHIFT+H'
],
...
advoor/nova-editor-js v3.3.0 requires spatie/image ^1.7 || ^2.0 -> found spatie/image[1.7.0, ..., 1.11.0, 2.0.0, ..., 2.2.7] but the package is fixed to 3.3.4 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command
Hi, as I already mentioned - great work, thanks for the library!
I thought about possible improvements. Would it be possible to add support for spatie medialibrary? Resize/Multiple sizes of images would become so easy.
Alternatively some resize params would be nice, like in advanced image field
What do yo think?
Is the package compatible with the new version of Laravel Nova 4 if the composer.json file is changed?
is it possible?
When attaching a link and viewing it I receive this error.
Something went wrong: Found extra param `imageUrl`
This seems to be a regression in #70 where the structure of the link json was changed, but the config validation was not updated to match, nor was the link.blade.php
renderer.
<div class="editor-js-block">
<div class="editor-js-link">
<a href="{{ $link }}" class="editor-js-link-content">
@if (!empty($meta['image']['url']))
<div class="editor-js-link-image" style="background-image: url('{{ $meta['image']['url'] }}');"></div>
@endif
<h4>{{ $meta['title'] }}</h4>
<p>
{{ $meta['description'] }}
</p>
<p>
<small>{{ $link }}</small>
</p>
</a>
</div>
</div>
I've made a model to work with the new editor, and since it needs array data, I've added the content
property to the casts list in the model.
It looks something like this:
<?php
namespace App\Models;
use Advoor\NovaEditorJs\NovaEditorJs;
use Illuminate\Database\Eloquent\Model;
/**
* A page
*/
class Page extends Model
{
/**
* @inheritDoc
*/
protected $casts = [
'content' => 'json',
];
/**
* Returns content HTML
*
* @return string|null
*/
public function getContentHtmlAttribute(): ?string
{
return $this->content ? NovaEditorJs::generateHtmlOutput($this->content) : null;
}
}
Problem is, when using this code, the NovaEditorJs::generateHtmlOutput
will recieve an array, instead of a string (which the phpdocs aren't clear about).
Hi,
pls change the line 36 in EditorJsLinkController.php
!
$imageUrl = null;
to
$imageUrl = '';
This way it doesn't throw an error, when no "og:image" is found.
Thx
Hello, I have an issue with this Field on Details page. When other Fields are first in the Panel they don't have border-t
and other border-related classes:
However when Nova JS Editor is the first element in the Panel it has this top border:
I found that those classes are added by Nova itself, but I cannot find why it is applied to Editor field.
@roelofr thanks for the previous fixes with the attribute casting. After the upgrade however (I'm using the casting now), this is what's happening:
{{ $post->body }}
I get Something went wrong: Field
blocks is missing
while the database data I can clearly see the blocks
in the stored data.Great package & thank you. There is some styling issue with this editor:
It is possible, to fix this issue by setting global nova style to:
.codex-editor__redactor { padding-bottom: 30px !important; }
But this solution looks like a hack. There is more native solution here: codex-team/editor.js#724 but I don't know how to set config options in your package. It would be great if you could somehow implement this functionality.
Is this package still maintained? Would it be possible to update in order to support Laravel 11?
advoor/nova-editor-js dev-fix/read-header-tool-config requires illuminate/support ^8.0 || ^9.0 || ^10.0 -> satisfiable by illuminate/support[v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.16, v10.0.0, ..., v10.48.4]
I'm getting foreach() argument must be of type array|object, string given
when saving the Nova resource with the EditorJS field.
Happens on line 25
of NovaEditorJsData
:
foreach ($attributes as $key => $value) {
$this->attributes[$key] = $value;
}
Not sure if it's related but I'm using the NovaEditorJsCast
on the model.
I'm using this package in a Laravel application that I want to run on Laravel Vapor. Does this package support Vapor, or are there plans to support it?
Thanks for the great package!
In a vanilla installation the embed block does not show up in the drop down list, even though it's enabled in the config file.
Hello!
Is it possible to apply localization settings?
Editor js support i18n message on config file. Can i do it in nova-editor-js?
Hello, first, thank you for this amazing tool.
Image upload is working fine, but will be great to remove the image if a Image block is deleted.
A way to customize the storage disk will be useful also.
Thanks!
Hello.
I dont have Laravel Nova. How i can use EditorJS in Laravel 5.7?
Thank you.
Nova : 2.0.6+
When I type ? or / in the editor, the Nova global search is focused.
Hey,
I have a unsorted list with text on each line, all beginning with a link at the first word. But the links aren't parsed when generating HtmlOutput.. Also not in the show-modus in Nova.
how can the editor object can be configured?
for example i want to change the placeholder ("tell your story") to another value
thanks,
nils
I'm updating my laravel 9 project to use Laravel 10, but I'm encountering an error related to compatibility. I believe there is a conflict between the requirements of package and Laravel 10. Can you please help me resolve this issue?
{
"require": {
"php": "^8.1.0",
"advoor/nova-editor-js": "^3.0",
"laravel/framework": "^10.0"
}
}
Problem 1
- Conclusion: don't install advoor/nova-editor-js v3.0.1 (conflict analysis result)
- Conclusion: don't install advoor/nova-editor-js v3.0.5 (conflict analysis result)
- Conclusion: don't install advoor/nova-editor-js v3.1.0 (conflict analysis result)
- illuminate/support[v8.0.0, ..., v8.11.2] require php ^7.3 -> your php version (8.2.2) does not satisfy that requirement.
- Root composer.json requires advoor/nova-editor-js ^3.0 -> satisfiable by advoor/nova-editor-js[v3.0.0, ..., v3.1.0].
- Conclusion: don't install laravel/framework v10.0.1 (conflict analysis result)
- Conclusion: don't install laravel/framework v10.0.2 (conflict analysis result)
- Conclusion: don't install laravel/framework v10.0.3 (conflict analysis result)
- Conclusion: don't install laravel/framework v10.0.0 (conflict analysis result)
- advoor/nova-editor-js v3.0.0 requires illuminate/support ^8.0 || ^9.0 -> satisfiable by illuminate/support[v8.0.0, ..., 8.x-dev, v9.0.0-beta.1, ..., 9.x-dev].
- Only one of these can be installed: illuminate/support[v5.0.0, ..., 5.8.x-dev, v6.0.0, ..., 6.x-dev, v7.0.0, ..., 7.x-dev, v8.0.0, ..., 8.x-dev, v9.0.0-beta.1, ..., 9.x-dev, v10.0.0, ..., 10.x-dev], laravel/framework[v10.0.0, ..., 10.x-dev]. laravel/framework replaces illuminate/support and thus cannot coexist with it.
- Root composer.json requires laravel/framework ^10.0 -> satisfiable by laravel/framework[v10.0.0, ..., 10.x-dev].
how we can have RTL support for this package?
When using \Advoor\NovaEditorJs\NovaEditorJs::generateHtmlOutput
it automatically encodes html entities in the returned HtmlString
object returned:
Then when using blade to output this string it shows as html tags which is not what we want:
I had to use this work around to make it work:
{!! html_entity_decode(\Advoor\NovaEditorJs\NovaEditorJs::generateHtmlOutput($content->body_default)) !!}
This does not work also:
{{ \Advoor\NovaEditorJs\NovaEditorJs::generateHtmlOutput($content->body_default) }}
When I make a nullable column, and don't change any content in NovaEditorJs field, it sends null
to the backend, what is the behaviour I expect.
The problem is, when generateHtmlOutput()
is used, it returns following error: "Something went wrong: JSON is empty". And it is pretty weird, when I don't enter any content, but on entity preview I such an error. It just feels broken.
So my suggestions are:
generateHtmlOutput()
method, and simply return empty string, if given value is null
{"time":1558480815671,"blocks":[],"version":"2.12.4"}
What do you think?
@advoor we are trying to implement this package in our nova dashboard. It works fine with local disk, but on s3 disk, it gives 500 error on image upload, and in network tab error is as follows on /nova-vendor/editor-js-field/upload/file
call :
It does't support nova 3.0, please update it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.