Comments (11)
With the way you are creating editorState
, you will also have to pass 2nd argument in EditorState.createWithContent
, that is a list of decorators through which draft knows how to render custom entities like Link
in this case. createEditorState
in medium-draft
takes care of this internally. But if you are using EditorState
from draft-js
directly, you will have to modify it like this -
import {stateFromHTML} from 'draft-js-import-html';
import {EditorState, CompositeDecorator} from 'draft-js';
import { findLinkEntities, Link } from 'medium-draft';
const decorators = new CompositeDecorator([{
strategy: findLinkEntities,
component: Link,
}]);
editorState = EditorState.createWithContent(stateFromHTML(markup), decorators);
from medium-draft.
Could this in any way be related to the issue with CSS for placeholder? Because the default CSS that comes with medium-draft
works great without any extra work.
Do you want to set your own value of target
or do you have problem with the current target=_blank
?
If you want to use your own link component -
import { CompositeDecorator, Entity } from 'draft-js';
import { findLinkEntities, createEditorState } from 'medium-draft';
// create your link component however you like
const MyLinkComponent = (props) => {
const { url } = Entity.get(props.entityKey).getData();
return (
<a
href={url}
target="whatever"
>{props.children}</a>
);
};
const decorators = new CompositeDecorator([{
strategy: findLinkEntities,
component: MyLinkComponent,
}]);
// set editorState in your component like this -
// if you have initial empty data
const editorState = createEditorState(null, decorators);
// if you have some initial data in `initialData`
const editorState = createEditorState(initialData, decorators);
from medium-draft.
I have definitely some CSS issues that i'm trying to solve, but i don't understand what is going on when i add a link.
This is what i see:
- I add a link on the editor
- I don't see any style applied to the linked text
- I don't see the
a
tag if i inspect the html element, i see only a collection of nodes like this:
<span data-offset-key="fpe2b-0-1">
<span data-text="true">this should look like a link
</span>
</span>
- If i look in the database, i see the link added correctly but without the
target=_blank
parameter.
from medium-draft.
I don't know if it can help, but the other inline buttons work correctly.
from medium-draft.
What about the parent of the span
above. Normally, it should look like this -
Also, the target
value is not stored in the data. Its just in the UI. You can use whatever value of target
you want when rendering the HTML.
from medium-draft.
This is what i get, as you can see there is no anchor element..
<div class="md-block md-block-paragraph" data-block="true" data-editor="acaon" data-offset-key="9d79s-0-0">
<div data-offset-key="9d79s-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
<span data-offset-key="9d79s-0-5"><span data-text="true">thi is a link</span>
</span></span></div></div>
from medium-draft.
What version are you using? Can you try the latest version if its not ?
from medium-draft.
I'm using the latest version (0.3.12).
from medium-draft.
Is the code the same that you referenced in placeholder issue ?
If it is, its working with my setup -
from medium-draft.
I think i found something interesting: the issue occurs only when i retrieve data from the database.
Unfortunately right now i'm still persisting the html markup instead of the JSON.
To recreate the EditorState
from the markup i use this:
import {stateFromHTML} from 'draft-js-import-html';
import {EditorState} from 'draft-js';
editorState = EditorState.createWithContent(stateFromHTML(markup))
It works perfectly for everything but the links.
from medium-draft.
It works!
from medium-draft.
Related Issues (20)
- Uncaught TypeError: props.getEditorState is not a function while using the separatorButton HOT 1
- ReadMe needs update HOT 1
- regarding images uploaded via editor HOT 1
- ToolbarComponent prop implemented?
- Is this library compatible with React Native? HOT 2
- Typescript support HOT 1
- Warning in the developer tools
- How can I close the floating styles-widget when clicking outside editable area?
- 5 high vulnerabilities HOT 1
- How to delete the image (from database) after using backspace in editor? HOT 1
- Getting medium like title text field at the top then the content HOT 1
- How to resize the image once added to the editor? HOT 1
- Any pointers on how to start implementing image block alignment
- Is it possible to add the Image resize/ alignment feature?
- Is this maintained anymore? Possible outdated draftjs causing block is not a BlockNode error HOT 4
- editorState.getSelection is not a function in functional component HOT 1
- My app crash HOT 3
- How to add style BLOCK_BUTTONS HOT 1
- Set style for Image HOT 2
- Typescript Version HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from medium-draft.