michelson / dante2 Goto Github PK

Hi all,

In my application I'm using Multer for file uploads (and compression with TinyPNG) to S3, that works fine. Now, I'm looking for a way to use Multer and TinyPNg to optimize, store and return a link to the Dante editor for displaying images in blogs created by users of my application.

I saw some nice implementations of the Dante editor with, for example, imgur.com (https://asd.reimertz.co/create), so I'm pretty sure it should work with S3 as well. I just don't really know where to start here..

Any help would be highly appreciated!

Kind regards,
Lothar

The toolbar once you select some text is not positioning correctly. It shows up below the selected text.

Any ideas on how this can be fixed? Reproducible here: https://github.com/shkbahmad/Dante2RailsSample

Images/iframes etc can be aligned to left. But can they be aligned to right siide ?

In my settings, I only see "save_handler" is working (console.log).
But doesn't save by "store_url" or "url" (no requests to server). What's wrong? Help please.

document.addEventListener('DOMContentLoaded', function () {
    editor = new Dante({
        upload_url: "/uploads/new",
        store_url: "/api/save",
        el: "app",
        content: JSON.parse(window.PocData),
        debug: true,
        data_storage: {
            interval: 2000,
            url: "/store",
            save_handler: function (ctx, content) {
                console.log("SAVING DATA!!");
                console.info({
                    editor_content: JSON.stringify(content),
                    text_content: ctx.getTextFromEditor(content)
                });
            }
        },
    })
    editor.render()
})

Can this editor be integrated with angular(which framework's name has changed from angular2) project?
A project using angular-cli to build apps.

The text editor toolbar is not positioning well for me.

As a page gets longer and longer, the toolbar moves further from the are where I'm writing...

Any idea how I can fix this?

As far as I know, for showing articles or post, we needed to use dante2 editor in non editable mode for rendering the html, which doesn't works good for SEO optimizations. One needed to use server side rendering for proper SEO optimization. Is there any suggested way for SEO optimation of the articles or post? or Can someone please point me to the code where dante2 is converting the json markups to html, so that I can use in server side rendering?

Rails 5.0

The plus icon overlaps the image.

Right now, everything gets built into /docs which is mainly for the documentation page.

I think this project needs to look at how other React-based libs are doing it. Most of them build several builds for

• npm module
• es module
• bower module
• distributable

npm/bower/distributable for window.Dante and es for import { Dante } from 'Dante2'.

immutable is used as a dependency , but there's no record in package.json

Is there a callback method I can define when an image is deleted from a post?

Otherwise, I'll likely end up with a lot of images on my server that aren't being used.

I would love to know about, or to suggest, a function that could be called in order to immediately send the editor content data to the url endpoint stored with the Dante object.

The regularly timed storing works well unless the user quickly navigates away from the page. In that case the user may return to the document later and find that not all of their changes have been saved. If the user can initiate saving themselves before navigating away they can be assured the document will be up to date when they return to it.

Dante2 looks great but I can't work out how to use it in my existing Node site. I'm far from a Node expert (I'm much more familiar with Python and PHP).

I've installed the module, but now what? You have an example of how to initialise it:

new Dante({   
  upload_url: "http://localhost:9292/uploads/new",    
  store_url: "http://localhost:3333/store.json",    
  el: "app"  
 })

And I'm guessing I need to have an element like this in my page:

<div id="app"></div>

And will need to have something (what?) happen when requests are made to those two URLs.

But obviously I also need to include some Dante2 JS and CSS files somewhere, somehow. Are there instructions for what else I need to do?

Sorry if I sound stupid - I don't see anyone else here having this problem - but I'm baffled!

In Rails, protect_from_forgery with: :exception expects there to be a CSRF meta tag content.

How can I configure this to be sent with the autosave post?

I've tried the following, but it doesn't work since there's no xhr argument for the before_handler callback

$data = $("[data-editor-content]").data()

    editor = new Dante
      el: "editor"
      read_only: !$data.editable
      content: $("[data-editor-content]").data("editor-content")
      upload_url: $data.uploadUrl
      data_storage:
        failure_handler: -> console.log("Failure")
        success_handler: -> console.log("Success")
        interval: 1000
        url: $data.dataStorageUrl
        method: "PATCH"
      xhr:
        before_handler: (xhr) ->
          console.log("This raises an exception")

There are errors right now if we run basic eslint on this project so I think it would be a good idea to add eslint and make sure it passes before commits are getting pushed.

Since you said the editor is based on data and not dom i thought how will i able to change the size ( font, image/embed size etc ) without changing the look of how the post was written.

As you see if you change the font-size of .postContent the paragraphs get broken.

Dante Normal(18px)
Dante Broken(14px)
Dante Expected(transform:scale(.8))

Using transform scale is a workaround but its not good to use it because text gets blurred. so i wonder if there is any other way out there ?

I am using dante2 editor deployed from separate server as my app is written in python, so I am pinging another url where dante2 is deployed but there is a error in console which tries to ping some sockjs url.

Please look below in the pic

I want to insert two placeholders like :-

• Title

• Write your text here.

How can I do that?

I've tried upgrading to version 0.3.2 in Rails, but I just get an error message in the JS console.

My code hasn't changed at all from the previous version I had installed.

The errors I'm seeing are:

[Error] TypeError: undefined is not an object (evaluating 'React.createElement')
	(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:16608)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:8015)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:5747)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:64)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:65)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:121)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:40)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:41)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:18)
	__webpack_require__ (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:52)
	webpackJsonpCallback (dante-vendors.self-f5e251e4e774d03abf959cb873461b0c7dce9cbc3e9405f83f9fbd545adb7c81.js:23)
	(anonymous function) (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:11)
	webpackUniversalModuleDefinition (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:9)
	Global Code (Dante2.self-a6f6602cd952debeeaa021dd671d18405046c75127e547878b7fe1e580aaf4cd.js:10)
[Error] ReferenceError: Can't find variable: Dante
	(anonymous function) (posts.self-a0a4eae2fae059bfeabae18f566b848ed4a9166e8c9a5cf6b56b78fc02c31165.js:12)
	dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:5227)
	handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:4879)
	dispatchEvent
	dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:899)
	notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:32467)
	pageLoaded (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:30855)
	(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:27069)
[Error] ReferenceError: Can't find variable: Dante
	(anonymous function) (posts.self-a0a4eae2fae059bfeabae18f566b848ed4a9166e8c9a5cf6b56b78fc02c31165.js:12)
	dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:5227)
	handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:4879)
	dispatchEvent
	dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:899)
	notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:32467)
	visitCompleted (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:7:332)
	complete (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:22637)
	(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:24367)
	(anonymous function) (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js:6:26880)
[Error] TypeError: undefined is not an object (evaluating 'q.clear')
	e (bundle.js:152)

I would like to know like during the process of development of the editor, is there any documentation available in which its explained that what parameters are used in json and what all things can i use to convert it back to html?

Hi Miguel.
1- I using this ES6 modules. I want get content from editor with editorState. How do I access editorState?

2- draft-js default way for focus when page loads, does not work in Dante.

I tried this script for setting content in editor, but didn't got success, below is the script :-

$.getJSON("http://127.0.0.1:8081/fetch/", function(data){
  window.PocData = data;
  console.log(data);
  document.addEventListener('DOMContentLoaded', function(){
    editor = new Dante(
      {
        el: "app",
        content: data,
        upload_url: "http://127.0.0.1:8081/upload/",
        data_storage: {
          url: "http://127.0.0.1:8081/store/"
        }
      }
    )
    editor.render()
  });
})

and below is the data format which I am fetching using getJSON :-

{u'text_content': u'sheesh mohsin', u'editor_content': u'{"entityMap":{},"blocks":[{"key":"46hh7","text":"sheesh mohsin","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}'}

Please provide more details.

When adding a link it sends requet to

http://api.embed.ly/1/extract?key={KEY}&url={URL}&scheme=https

How can i change it to something

http://custom.com/url?blahblah={}

Could you point out the line of code ?

It would be great if calling dispatchChangesToSave could result in the same xhr handlers (before_handler, success_handler) being called so it's possible to keep the user updated on the article's status just as it is with automatic saving.

Would it be, or is it possible, to send the editor content json string from to a function rather than posting it to a URL?

Thanks!

When the editor is not in the editable state, images still appear to be editable when you click on them.

While these changes are not persisted, it doesn't look good to the end user.

Currently, editor is sending editor_content and text_content on store url, after saving the json i.e. editor_content in backend. How to render it on another html page to show the article to the user?
According to the docs, what am I able to know is we can render in editor using window.PocData but there is nothing in docs how to render it in another html page. Thanks in advance for your help.

Which one is better this one or github.com/yabwe/medium-editor/ ?

Hello was wondering how to upload images 😊

I want to send authorization token for auth purpose as well as enable below options in each request fired by dante.

xhrFields: {
    withCredentials: true
},
crossDomain: true

Not compatible with webpack v2.2+

please check this: webpack/webpack#4039

In the original medium editor people can highlight some text which is very useful.
So it would be awesome to add that feature.
moreover i was thinking to it would be cool if instead of one color highlight it could get a list of ['#hex','#hex2'] colors and toggle the color

Right now, what I can see is, dante is sending the complete data on store url , is there any way to send only the changes did by the user and add it up in the backend? so that we can save some bandwidth from user side? and alternatively improve the user experience?

I've set up an account with Embed.ly and added their API key to my application.

if $("[data-editor-content]").length > 0

  $data = $("[data-editor-content]").data()

  window.editor = new Dante
    el: "editor"
    api_key: $data.apiKey
    read_only: !$data.editable
    content: $("[data-editor-content]").data("editor-content")
    upload_url: $data.uploadUrl
    data_storage:
      failure_handler: -> console.log("Failure")
      success_handler: -> console.log("Success")
      interval: 1000
      url: $data.dataStorageUrl
      method: "PATCH"
    xhr:
      before_handler:  ->
        console.log("Before xhr")
      success_handler: ->
        console.log("Success xhr")
      error_handler: ->
        console.log("Error xhr")


  editor.render()

When I inspect my editor I can see the API key in the options

console.log(editor.options.api_key) # => "[mykey"]

But when I try to embed a URL, I see this error message

Invalid `key` provided: undefined. To find your key, log into https://app.embed.ly -> API.

And the same thing is reported in my console.

[Error] Failed to load resource: the server responded with a status of 401 (Unauthorized) (extract, line 0)      https://api.embed.ly/1/extract?key=undefined&url=https://vimeo.com/197412946&scheme=https

Any ideas?

Hi, anyway we can change the menu buttons icon/text?

Also, is it possible to remove some functionality that we don't need?

The text copied (cmd+c) from the editor content is not getting pasted (cmd+v) while copied text from outside is working fine.

Hi,

is there a way to disable the DanteImagePopover tooltip?
we don't need/want the alignment chooser in our project..

Thanks,
Georg

When Inserting a Video the Caption is the URL of the Video (minus the "h" from http://) ..

Tested with:
https://www.youtube.com/watch?v=2hpVVv493Uw

Hi

the placeholder for the link text doesn't seem to be configurable up to now?

Thanks,
Georg

Awesome job on this new version. Obviously this version of Dante can be integrated with react as easily as any other standard JavaScript module but given that it was built in react in the first place, I was imagining there would be a component to import and work with react directly. Any thoughts on this?

Just wonder the reasoning behind using coffeescript rather than es6 transpiling with babel?
It seems the majority of the community has moved away from coffeescript.

I am about to get Dante to work as a React component but the issue is that I have to have a coffeescript loader to be able to import it (except some weird issues with your fonts, but I'm about to fix that as well).

#Gemfile
gem 'dante2-editor'
gem 'react-rails' #, '~> 1.4.0'

#application.js
//= require jquery
//= require jquery_ujs
//= require react
//= require 'dante-vendors.js'
//= require 'Dante2.js'
//= require_tree .

#view
<div id="dante2-editor"></div>
<script type="text/javascript">
	new Dante({ el: "#dante2-editor"});
</script>

Console shows the Dante object being created but not showing. What am I missing?

After initialising Dante (like so):

  editor = new Dante({
    el: "app",
    content: JSON.parse(content),
    ...
  });
  editor.render();

How can you change the content and force Dante to render again?
I tried running editor.editor.setPreContent(JSON.parse(newContent));and editor.options.content = JSON.parse(newContent); followed by editor.editor.render(); and editor.render();, to no effect.

I looked at app/components/App.cjsx but I couldn't figure it out.

Thanks for your help!

It would be awesome to have required blocks as a feature.
If you visit https://asd.reimertz.co/create you see that I have Title, subtitle and author as a starting point but a lot of people probably just remove these right now.

For consistency, that sucks pretty badly since I am planning on building an explore feature.

ping @michelson

how do i get the json state in order to save it in backend ? i dont find it in docs

When im uploading a picture what is the thing should i return from server ? the uploaded url what format ?

How do i update the model onChange ?

Following https://michelson.github.io/dante2/doc.html, I am using new Dante({ el: "app"}) to initialise the Editor.

Thank You!

I am not able to generate dante.css, dante.js, dante-vendors.js for use in a separate app, however I am able to use it with the demo cloned in local.

Also there are not guidelines on how to generate those?

Is there any docs regarding that?

P.S: I am not a node developer, and want to use it in my python project, just as css, and js urls, is that possible?

Hi,

it seems the String

"Write Caption for image (Optional)" is hardcoded ... ?

Best,
Georg