Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Context-oriented behaviour #61

Closed
DenisIzmaylov opened this issue Feb 24, 2016 · 3 comments
Closed

Context-oriented behaviour #61

DenisIzmaylov opened this issue Feb 24, 2016 · 3 comments

Comments

@DenisIzmaylov
Copy link

Hello and thank you for your yet another awesome solution.

Just watched the demo on project page and noticed it doesn't have context-oriented behaviour. What does it mean?

  • When I switch to H1-H5 mode I'd like to turn off this mode by Enter (new line) key.
  • When I switch to list mode I'd like to create a new level by Tab key.

It seems the good example for improving UX is focusing on Apple Pages to get good ideas and inherit user expectations.
@tasti
Copy link
Contributor

tasti commented Feb 24, 2016

You're absolutely right. The context-orientation behavior is really useful, which hasn't been implement in the rich demo.

We actually do this in Facebook Notes. It seems like this will be a really common question and could be provided through the RichTextEditorUtil.

@hellendag
Copy link

For resetting block type, you can use https://github.com/facebook/draft-js/blob/master/src/model/modifier/RichTextEditorUtil.js#L406 within a handleReturn prop function.

We could create a RichUtils function to bake this in, though my thinking was that the expected rules for return and backspace behavior might vary for different use cases. Apple Pages might be a good UX model, but people have a broad range of expectations from their editors -- it can be hard to prescribe one for all.

For nested lists, see http://facebook.github.io/draft-js/docs/advanced-topics-nested-lists.html#content.

@hellendag
Copy link

Going to close this because I think we can allow clients to define this behavior themselves. If it comes up more and it seems there is an obvious default, then we can reassess. :)

@joepio joepio mentioned this issue Apr 16, 2016
Open
@davoscript davoscript mentioned this issue Oct 30, 2019
Closed
facebook-github-bot pushed a commit that referenced this issue Nov 5, 2019
@davoscript @facebook-github-bot
Defaulting to createEmpty if block map is empty in createWithContent …
c42662e 
…(Fixes issue #2226) (#2240)

Summary:
**Summary**

When passing `createWithContent` a `state` parameter created using `convertFromHTML` from an empty string and `createFromBlockArray`, as shown in the example:

```
const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
  '<img src="image.png" height="112" width="200" />';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

this.state = {
  editorState: EditorState.createWithContent(
    state,
    decorator,
  ),
};
```

The following error is thrown:

```
TypeError: Cannot read property 'getKey' of undefined

  84 | EditorState.createWithContent = function createWithContent(contentState, decorator) {
> 85 |   var firstKey = contentState.getBlockMap().first().getKey();
     | ^  86 |   return EditorState.create({
  87 |     currentContent: contentState,
  88 |     undoStack: Stack(),
```
The previous error is generated because `createWithContent` asumes that `contentState.getBlockMap().first()` will return an element, which is wrong for scenarios where the block map is empty. As a consecuence the `getKey();` function in `contentState.getBlockMap().first().getKey();` is executed on `undefined`, thus throwing the error.

The previous scenario is very common if you are planning to use the editor to allow a user to write HTML content which could also be blank, especially as a default value.

**Solution**

In order to make the less amount of modifications to the code, I've added a validation that will run `createEmpty` in case the block map is empty.

**Test Plan**

Open `/draft-js/examples/draft-0-10-0/convertFromHTML/convert.html` and change line #61 from:

`const blocksFromHTML = convertFromHTML(sampleMarkup);`

to:

`const blocksFromHTML = convertFromHTML('');`

No error will be shown.
Pull Request resolved: #2240

Differential Revision: D18247644

Pulled By: mrkev

fbshipit-source-id: 3eb90fd5379e8a2d85efbb2b7b9587ca87701d12
mmissey pushed a commit to mmissey/draft-js that referenced this issue Mar 24, 2020
@davoscript @mmissey
Defaulting to createEmpty if block map is empty in createWithContent …
e2fe6b3 
…(Fixes issue facebookarchive#2226) (facebookarchive#2240)

Summary:
**Summary**

When passing `createWithContent` a `state` parameter created using `convertFromHTML` from an empty string and `createFromBlockArray`, as shown in the example:

```
const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
  '<img src="image.png" height="112" width="200" />';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

this.state = {
  editorState: EditorState.createWithContent(
    state,
    decorator,
  ),
};
```

The following error is thrown:

```
TypeError: Cannot read property 'getKey' of undefined

  84 | EditorState.createWithContent = function createWithContent(contentState, decorator) {
> 85 |   var firstKey = contentState.getBlockMap().first().getKey();
     | ^  86 |   return EditorState.create({
  87 |     currentContent: contentState,
  88 |     undoStack: Stack(),
```
The previous error is generated because `createWithContent` asumes that `contentState.getBlockMap().first()` will return an element, which is wrong for scenarios where the block map is empty. As a consecuence the `getKey();` function in `contentState.getBlockMap().first().getKey();` is executed on `undefined`, thus throwing the error.

The previous scenario is very common if you are planning to use the editor to allow a user to write HTML content which could also be blank, especially as a default value.

**Solution**

In order to make the less amount of modifications to the code, I've added a validation that will run `createEmpty` in case the block map is empty.

**Test Plan**

Open `/draft-js/examples/draft-0-10-0/convertFromHTML/convert.html` and change line facebookarchive#61 from:

`const blocksFromHTML = convertFromHTML(sampleMarkup);`

to:

`const blocksFromHTML = convertFromHTML('');`

No error will be shown.
Pull Request resolved: facebookarchive#2240

Differential Revision: D18247644

Pulled By: mrkev

fbshipit-source-id: 3eb90fd5379e8a2d85efbb2b7b9587ca87701d12
vilemj-Viclick pushed a commit to kontent-ai/draft-js that referenced this issue Jul 16, 2020
@davoscript @vilemj-Viclick
Defaulting to createEmpty if block map is empty in createWithContent …
25812a8 
…(Fixes issue facebookarchive#2226) (facebookarchive#2240)

Summary:
**Summary**

When passing `createWithContent` a `state` parameter created using `convertFromHTML` from an empty string and `createFromBlockArray`, as shown in the example:

```
const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
  '<img src="image.png" height="112" width="200" />';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

this.state = {
  editorState: EditorState.createWithContent(
    state,
    decorator,
  ),
};
```

The following error is thrown:

```
TypeError: Cannot read property 'getKey' of undefined

  84 | EditorState.createWithContent = function createWithContent(contentState, decorator) {
> 85 |   var firstKey = contentState.getBlockMap().first().getKey();
     | ^  86 |   return EditorState.create({
  87 |     currentContent: contentState,
  88 |     undoStack: Stack(),
```
The previous error is generated because `createWithContent` asumes that `contentState.getBlockMap().first()` will return an element, which is wrong for scenarios where the block map is empty. As a consecuence the `getKey();` function in `contentState.getBlockMap().first().getKey();` is executed on `undefined`, thus throwing the error.

The previous scenario is very common if you are planning to use the editor to allow a user to write HTML content which could also be blank, especially as a default value.

**Solution**

In order to make the less amount of modifications to the code, I've added a validation that will run `createEmpty` in case the block map is empty.

**Test Plan**

Open `/draft-js/examples/draft-0-10-0/convertFromHTML/convert.html` and change line facebookarchive#61 from:

`const blocksFromHTML = convertFromHTML(sampleMarkup);`

to:

`const blocksFromHTML = convertFromHTML('');`

No error will be shown.
Pull Request resolved: facebookarchive#2240

Differential Revision: D18247644

Pulled By: mrkev

fbshipit-source-id: 3eb90fd5379e8a2d85efbb2b7b9587ca87701d12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@DenisIzmaylov @hellendag @tasti