Some cool draft-js-plugins used in the last draft editor
yarn install
npm run dev
open http://127.0.0.1:3000
last draft draft-js plugins
License: MIT License
Some cool draft-js-plugins used in the last draft editor
yarn install
npm run dev
open http://127.0.0.1:3000
Hi,
I am not able to make draft-js-emoji-picker-plugin
work:
import React, { Component } from 'react'
import { render } from 'react-dom' // eslint-disable-line no-unused-vars
import Editor, { composeDecorators } from 'draft-js-plugins-editor'
import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
import { fromJS } from 'immutable';
/* Emoji plugin */
import createEmojiPlugin from 'draft-js-emoji-plugin'
import emojiPickerPlugin from 'draft-js-emoji-picker-plugin'
import 'draft-js-emoji-plugin/lib/plugin.css'
const emojiPlugin = createEmojiPlugin()
// const { EmojiSuggestions } = emojiPlugin
const decorator = composeDecorators(
// resizeablePlugin.decorator,
)
/* Toolbar */
import createToolbarPlugin from 'last-draft-js-toolbar-plugin'
import 'last-draft-js-toolbar-plugin/lib/plugin.css'
const toolbarPlugin = createToolbarPlugin()
const { Toolbar } = toolbarPlugin
/* Side Toolbar */
import createSidebarPlugin from 'last-draft-js-sidebar-plugin'
import 'last-draft-js-sidebar-plugin/lib/plugin.css'
const sidebarPlugin = createSidebarPlugin()
const { Sidebar } = sidebarPlugin
/* init the plugins */
const plugins = [
emojiPlugin,
emojiPickerPlugin,
toolbarPlugin,
sidebarPlugin,
]
/* init the state, either from raw, html or text */
import { raw } from './initialState/raw'
/* from raw */
const content = convertFromRaw(raw)
let STATE = EditorState.createWithContent(content)
export default class Example extends Component {
state = {
editorState: STATE
}
onChange = (editorState) => {
this.setState({ editorState })
let raw = convertToRaw(editorState.getCurrentContent())
this.logState('raw state:', raw)
}
logState (type, raw) {
// console.log(type)
console.log(JSON.stringify(raw))
}
focus = () => {
this.editor.focus()
}
render () {
return (
<div>
<div className='editor'>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={(element) => { this.editor = element }}
/>
<Sidebar />
</div>
</div>
)
}
}
Any thoughts or help is welcome!
how to add a link downloadOption??
After react 16 update, SideToolbarPlugin>Emoji and GIF are not work
Picker.js:197 Uncaught TypeError: Cannot read property 'func' of undefined
at Function.get (Picker.js:197)
at validatePropTypes (react.development.js:1638)
at Object.createElementWithValidation [as createElement] (react.development.js:1738)
at _default.render (index.js:61)
at finishClassComponent (react-dom.development.js:14301)
at updateClassComponent (react-dom.development.js:14264)
at beginWork (react-dom.development.js:15082)
at performUnitOfWork (react-dom.development.js:17820)
at workLoop (react-dom.development.js:17860)
at renderRoot (react-dom.development.js:17946)
In my opinion link modal should be closed after editor looses focus or after changing selection on editor.
To reproduce: just select some text, click "link" then just select another part of text or click outside of editor and back. Every time u open toolbar there would be link modal.
Could be fixed by subscribing on "onEditorChange" and close modal window each time editor changed. This event would be raised by any kind of selection, focus loosing or editing.
P.S. same behaviour comes with any other pickers and kinda frustrating based on UX.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! A complete log of this run can be found in:
I have a similar issue like this draft-js-plugins/draft-js-plugins#398 but it says
Warning: Unknown prop
contentState
on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in a (created by Link)
My guess is that fileInput in createImageButton.js is not getting reset, so the onChange won't fire.
console.log
appear in ToolBar file
Would it be possible not to fix react and react dom ?
Hello, found a bug that adding a link to inline text would result updating entity, but href on link would be same as text.
For example decorating text "github.com" with "google.com" link would result link to github.com, which seems like a wrong behaviour.
After running yarn add last-draft-js-toolbar-plugin
and serving the app I'm seeing the following errors. Looks like the packages linkify-it
and tlds
aren't specified in package.json. Adding them to my own package.json fixes the problem.
Module not found: Error: Can't resolve 'linkify-it' in '.../node_modules/draft-js-modal-plugin/lib/components/LinkModal'
@ ./~/draft-js-modal-plugin/lib/components/LinkModal/index.js 22:17-38
@ ./~/draft-js-modal-plugin/lib/index.js
Module not found: Error: Can't resolve 'tlds' in '.../node_modules/draft-js-modal-plugin/lib/components/LinkModal'
@ ./~/draft-js-modal-plugin/lib/components/LinkModal/index.js 26:12-27
@ ./~/draft-js-modal-plugin/lib/index.js
@ ./~/last-draft-js-toolbar-plugin/lib/components/getModalByType/index.js
@ ./~/last-draft-js-toolbar-plugin/lib/index.js
Currently, all last-draft-js-plugins depend on [email protected]
. Now that react@16
has been out for a while it'd be great to add that version number to the peerDependencies!
Hi,
I'm using custom decorators with draft.js and now my links don't have any styles on them. Is there some way of setting them manually?
const linkPlugin = createLinkPlugin({
placeholder: "",
theme: {
link: {
color: 'red'
}
}
})
This doesn't work. In fact any option I try setting through there doesn't seem to appear.
after fresh cloning and installation, console shows:
WARNING: DraftEntity.get will be deprecated soon!
Please use "contentState.getEntity" instead.
Is it possible to get an array of all the links that draft-js-plugins-editor
has found from editorState
?
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.