Facebook from Draft-js Repository

MIT License

29 Sep 2022

AngleGhost

started

Started On 29 Sep 2022 at 04:40:50

Vrfranco

started

Started On 29 Sep 2022 at 05:56:24

Xuqiang1227

started

Started On 29 Sep 2022 at 05:00:05

Code-with-onye

started

Started On 28 Sep 2022 at 05:10:00
Issue Comment

VilizarTodorov

Invalid selection state.

What is the current behavior? I want to stitch Chinese after IMMUTABLE entity, but it will destroy the previous entity。 Give a warning: Invalid selection state。

What is the expected behavior? I want to retain the previous entity.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? It is normal in version 0.10.5, but not in version 0.11.5.

Forked On 28 Sep 2022 at 08:49:58

VilizarTodorov

I had the same problem using Next.js and used @zeekrey 's solution to dynamically load the editor and the problem was gone

Commented On 28 Sep 2022 at 08:49:58

Cyjme

started

Started On 28 Sep 2022 at 06:36:43

Polly3d

started

Started On 28 Sep 2022 at 06:18:06

Huhaixiao

started

Started On 28 Sep 2022 at 02:12:14

Mofeisi77

started

Started On 28 Sep 2022 at 01:58:37

AarshOza

started

Started On 27 Sep 2022 at 09:05:36
Issue Comment

Iam-medvedev

Invalid DOM

Do you want to request a feature or report a bug? Bug

What is the current behavior? When trying to use paragraph, as in the below.

const blockRenderMap = Immutable.Map({
  'paragraph': {
    element: 'p',
  },
  'unstyled': {
    element: 'p',
  }
}) 

An invalid DOM is generated:

<p class="unstyled" data-block="true" data-editor="40m80" data-offset-key="ej8f1-0-0">
    <div data-offset-key="ej8f1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
        <span data-offset-key="ej8f1-0-0">
            <span data-text="true">asdf</span>
        </span>
    </div>
</p> 

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

Check the output below what you are typing and notice the div nested inside the p tag. https://jsfiddle.net/fedan2nv/25/

What is the expected behavior? The P tag should only contain phrasing content. A div element is invalid. http://w3c.github.io/html/single-page.html#phrasing-content http://w3c.github.io/html/single-page.html#the-p-element

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft.js 0.10.5 I can't tell you if it worked in previous versions as I just started looking into Draft.JS

Windows 10, MacOS 10.13.3 All Browsers

See the render method at:

https://github.com/facebook/draft-js/blob/e9540910e0e0168e5fdb3ce5b9e42168b301bd91/src/component/contents/DraftEditorBlock.react.js#L228

Also see #395

Forked On 27 Sep 2022 at 03:50:54

Iam-medvedev

@sahilpurav Most likely, there will be no more releases. https://github.com/facebook/draft-js#status

Commented On 27 Sep 2022 at 03:50:54
Issue Comment

Sahilpurav

fix: change div to span on default unstyled block

Summary

This PR changes the default tag from an unstyled component to be a <span> instead of a <div>. This fixes invalid DOM nesting, since <div> cannot be a child of <p>.

The Wiki for W3 defines <span> as the correct pick for an unstyled component:

The element doesn't mean anything on its own, but can be useful when used together with the global attributes [ref]

I'm working with systems that requires content accessibility and this is important.

Fixes #1718 and #395

Test Plan

I don't have one. Maybe implementing a W3C checks.

Forked On 27 Sep 2022 at 03:45:49

Sahilpurav

Someone please release this 🙏

Commented On 27 Sep 2022 at 03:45:49
Issue Comment

Sahilpurav

Invalid DOM

Do you want to request a feature or report a bug? Bug

What is the current behavior? When trying to use paragraph, as in the below.

const blockRenderMap = Immutable.Map({
  'paragraph': {
    element: 'p',
  },
  'unstyled': {
    element: 'p',
  }
}) 

An invalid DOM is generated:

<p class="unstyled" data-block="true" data-editor="40m80" data-offset-key="ej8f1-0-0">
    <div data-offset-key="ej8f1-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
        <span data-offset-key="ej8f1-0-0">
            <span data-text="true">asdf</span>
        </span>
    </div>
</p> 

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

Check the output below what you are typing and notice the div nested inside the p tag. https://jsfiddle.net/fedan2nv/25/

What is the expected behavior? The P tag should only contain phrasing content. A div element is invalid. http://w3c.github.io/html/single-page.html#phrasing-content http://w3c.github.io/html/single-page.html#the-p-element

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft.js 0.10.5 I can't tell you if it worked in previous versions as I just started looking into Draft.JS

Windows 10, MacOS 10.13.3 All Browsers

See the render method at:

https://github.com/facebook/draft-js/blob/e9540910e0e0168e5fdb3ce5b9e42168b301bd91/src/component/contents/DraftEditorBlock.react.js#L228

Also see #395

Forked On 27 Sep 2022 at 03:45:14

Sahilpurav

I see the pull request is open since 2018. Any plan to push it in the release?

Commented On 27 Sep 2022 at 03:45:14

Zchumpitaz

started

Started On 27 Sep 2022 at 02:07:09

Babu-ch

A React framework for building text editors.

Forked On 27 Sep 2022 at 12:39:40

Start-point

started

Started On 27 Sep 2022 at 11:36:20

Tahara-hzj

started

Started On 27 Sep 2022 at 08:53:45

JellyZero

started

Started On 27 Sep 2022 at 04:05:23

Jjiaqi

A React framework for building text editors.

Forked On 27 Sep 2022 at 03:31:39

Jjiaqi

started

Started On 27 Sep 2022 at 03:31:36
Issue Comment

Tseringn

How to insert texts via google chrome extension to an input created by DraftJS

There's a site that uses the draftjs lib for text inputs and I'm looking for a way to be able to insert texts out of it using a google chrome extension build with React-JS. I've tried changing the dom and inserting the same tags but the draft doesn't seem to accept it. Does anyone know of any way I can work with this?

Forked On 27 Sep 2022 at 02:52:46

Tseringn

Just saw Draft js is archiving in few months, spend several days a bug it caused and now I am realizing how bad I am at reading ReadME. So in-short, it's best to move away from it

Commented On 27 Sep 2022 at 02:52:46
Issue Comment

Tseringn

Pressing return jumps to start of line in Android API 33

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Currently the pressing return in keyboard jumps start of the line in Android 13, but when entering space and then pressing return goes as expected to the next line. Did some debugging and found

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.

used default code in the above jsfiddle link https://user-images.githubusercontent.com/62776949/192414726-8e3bf5a3-f60f-40e5-903c-70e7c4203f9b.mov

What is the expected behavior?

pressing return should go to next line

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

latest draft js, Android 13 pixel 5 vm, on MacOs 12.6

--EDIT-- The editorState.getCurrentInlineStyle() does not returns an empty array even if there are bunch of inline styles, until white space is encountered

Forked On 27 Sep 2022 at 02:18:54

Tseringn

This is pretty serious bug for me, so a workaround or a fix will be very much appreciated

Commented On 27 Sep 2022 at 02:18:54
Issue Comment

Patrickmuhi

Error: jest-haste-map: Watchman crawl failed. Retrying once with node crawler.

Do you want to request a feature or report a bug? bug

What is the current behavior? When running jest in watch mode on the root directory of the project, jest-haste-map throws an error:

$ yarn test --watch
Using globally installed version of Yarn
yarn run v1.12.1
$ node node_modules/fbjs-scripts/node/check-dev-engines.js package.json
$ cross-env NODE_ENV=test jest --watch
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
  Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
  Error: Watchman error: resolve_projpath:  None of the files listed in global config root_files are present in path `/Users/procidac/Development/gh/facebook/draft-js/src` or any of its parent directories.  root_files is defined by the `/etc/watchman.json` config file and includes `.watchmanconfig`.  One or more of these files must be present in order to allow a watch. Try pulling and checking out a newer version of the project?. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.html.
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: resolve_projpath:  None of the files listed in global config root_files are present in path `/Users/procidac/Development/gh/facebook/draft-js/src` or any of its parent directories.  root_files is defined by the `/etc/watchman.json` config file and includes `.watchmanconfig`.  One or more of these files must be present in order to allow a watch. Try pulling and checking out a newer version of the project?
    at BunserBuf.<anonymous> (/Users/procidac/Development/gh/facebook/draft-js/node_modules/fb-watchman/index.js:95:23)
    at BunserBuf.emit (events.js:182:13)
    at BunserBuf.process (/Users/procidac/Development/gh/facebook/draft-js/node_modules/bser/index.js:292:10)
    at /Users/procidac/Development/gh/facebook/draft-js/node_modules/bser/index.js:247:12
    at process._tickCallback (internal/process/next_tick.js:61:11)
Emitted 'error' event at:
    at Client.client.on.error (/Users/procidac/Development/gh/facebook/draft-js/node_modules/jest-haste-map/build/lib/WatchmanWatcher.js:130:10)
    at Client.emit (events.js:182:13)
    at BunserBuf.<anonymous> (/Users/procidac/Development/gh/facebook/draft-js/node_modules/fb-watchman/index.js:107:12)
    at BunserBuf.emit (events.js:182:13)
    at /Users/procidac/Development/gh/facebook/draft-js/node_modules/bser/index.js:249:12
    at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 

This is similar to https://github.com/facebook/create-react-app/issues/346

What is the expected behavior? Jest starts in watch mode without errors

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? This is happening in draft-js master with Node v10.14.2

Forked On 26 Sep 2022 at 08:22:37

Patrickmuhi

First run watchman watch-del-all then run watchman shutdown-server fixed my issue

Commented On 26 Sep 2022 at 08:22:37

Leemoo666

started

Started On 26 Sep 2022 at 09:31:37

Agangdi

started

Started On 26 Sep 2022 at 06:45:02

ChengFolder

started

Started On 26 Sep 2022 at 06:37:21

Alexec

started

Started On 26 Sep 2022 at 03:33:04

About Repository

A React framework for building text editors.
Language: JavaScript
Star: 22090
Fork: 2647
Watchers: 22090
Open Issues: 953
https://github.com/facebook/draft-js
MIT License
Last updated: 29 Sep 2022