npmpackage.info

Gathering detailed insights and metrics for draftjs-conductor

draftjs-conductor - 3.0.0 | npmpackage.info

draftjs-conductor

📝✨ Little Draft.js helpers to make rich text editors “just work”

3.0.0

MIT

TypeScript

40.57 kB

3.4

Installations

npm install draftjs-conductor

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.3.0

NPM Version

8.12.0 Pull Requests

Open

12

Total

310

Closed

21

Merged

277

Issues

Open

2

Total

13

Closed

11

Releases

v3.0.0

Updated on Jun 13, 2022

v2.2.0

Updated on Apr 14, 2021

v2.1.0

Updated on Apr 13, 2021

v2.0.0

Updated on Nov 19, 2020

v1.2.0

Updated on Nov 19, 2020

v1.1.0

Updated on Aug 16, 2020

View All 21 releases

Languages

TypeScript

JavaScript

HTML

Shell

CSS

TypeScript (78.76%)

JavaScript (8.82%)

HTML (5.96%)

Shell (3.49%)

CSS (2.96%)

Developer

thibaudcolas

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

40 Stars

752 Commits

6 Forks

3 Watchers

13 Branches

6 Contributors

Updated on Mar 08, 2025

Maintainers

View All 6 Contributors

Package Meta Information

Latest Version

3.0.0

Package Id

draftjs-conductor@3.0.0

Unpacked Size

40.57 kB

Size

9.68 kB

File Count

NPM Version

8.12.0

Node Version

18.3.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Draft.js conductor

📝✨ Little Draft.js helpers to make rich text editors just work. Built for Draftail.

Check out the online demo!

Infinite list nesting

By default, Draft.js only provides support for 5 list levels for bulleted and numbered lists. While this is often more than enough, some editors need to go further.

Instead of manually writing and maintaining the list nesting styles, use those little helpers:

1import { getListNestingStyles, blockDepthStyleFn } from "draftjs-conductor";
2
3<style>
4  {getListNestingStyles(6)}
5</style>
6<Editor blockStyleFn={blockDepthStyleFn} />

getListNestingStyles will generate the necessary CSS for your editor’s lists. blockDepthStyleFn will then apply classes to blocks based on their depth, so the styles take effect. Voilà!

If your editor’s maximum list nesting depth never changes, pre-render the styles as a fragment for better performance:

1const listNestingStyles = <style>{getListNestingStyles(6)}</style>;

You can also leverage React.memo to speed up re-renders even if max was to change:

1const NestingStyles = React.memo(ListNestingStyles);
2
3<style>
4  <NestingStyles max={max} />
5</style>;

Relevant Draft.js issues:

Idempotent copy-paste between editors

The default Draft.js copy-paste handlers lose a lot of the formatting when copy-pasting between Draft.js editors. While this might be ok for some use cases, sites with multiple editors on the same page need them to reliably support copy-paste.

Relevant Draft.js issues:

All of those problems can be fixed with this library, which overrides the copy and cut events to transfer more of the editor’s content, and introduces a function to use with the Draft.js handlePastedText to retrieve the pasted content.

This will paste all copied content, even if the target editor might not support it. To ensure only supported content is retained, use filters like draftjs-filters.

Note: IE11 isn’t supported, as it doesn't support storing HTML in the clipboard, and we also use the Element.closest API.

With draft.js 0.11 and above

Here’s how to use the copy/cut override, and the paste handler:

1import {
2  onDraftEditorCopy,
3  onDraftEditorCut,
4  handleDraftEditorPastedText,
5} from "draftjs-conductor";
6
7class MyEditor extends Component {
8  constructor(props: Props) {
9    super(props);
10
11    this.state = {
12      editorState: EditorState.createEmpty(),
13    };
14
15    this.onChange = this.onChange.bind(this);
16    this.handlePastedText = this.handlePastedText.bind(this);
17  }
18
19  onChange(nextState: EditorState) {
20    this.setState({ editorState: nextState });
21  }
22
23  handlePastedText(
24    text: string,
25    html: string | null,
26    editorState: EditorState,
27  ) {
28    let newState = handleDraftEditorPastedText(html, editorState);
29
30    if (newState) {
31      this.onChange(newState);
32      return true;
33    }
34
35    return false;
36  }
37
38  render() {
39    const { editorState } = this.state;
40
41    return (
42      <Editor
43        editorState={editorState}
44        onChange={this.onChange}
45        onCopy={onDraftEditorCopy}
46        onCut={onDraftEditorCut}
47        handlePastedText={this.handlePastedText}
48      />
49    );
50  }
51}

The copy/cut event handlers will ensure the clipboard contains a full representation of the Draft.js content state on copy/cut, while handleDraftEditorPastedText retrieves Draft.js content state from the clipboard. Voilà! This also changes the HTML clipboard content to be more semantic, with less styles copied to other word processors/editors.

You can also use getDraftEditorPastedContent method and set new EditorState by yourself. It is useful when you need to do some transformation with content (for example filtering unsupported styles), before past it in the state.

With draft.js 0.10

The above code relies on the onCopy and onCut event handlers, only available from Draft.js v0.11.0 onwards. For Draft.js v0.10.5, use registerCopySource instead, providing a ref to the editor:

1import {
2  registerCopySource,
3  handleDraftEditorPastedText,
4} from "draftjs-conductor";
5
6class MyEditor extends Component {
7  componentDidMount() {
8    this.copySource = registerCopySource(this.editorRef);
9  }
10
11  componentWillUnmount() {
12    if (this.copySource) {
13      this.copySource.unregister();
14    }
15  }
16
17  render() {
18    const { editorState } = this.state;
19
20    return (
21      <Editor
22        ref={(ref) => {
23          this.editorRef = ref;
24        }}
25        editorState={editorState}
26        onChange={this.onChange}
27        handlePastedText={this.handlePastedText}
28      />
29    );
30  }
31}

With draft-js-plugins

The setup is slightly different with draft-js-plugins (and React hooks) – we need to use the provided getEditorRef method:

1// reference to the editor
2const editor = useRef<Editor>(null);
3
4// register code for copying
5useEffect(() => {
6  let unregisterCopySource: undefined | unregisterObject = undefined;
7  if (editor.current !== null) {
8    unregisterCopySource = registerCopySource(
9      editor.current.getEditorRef() as any,
10    );
11  }
12  return () => {
13    unregisterCopySource?.unregister();
14  };
15});

See #115 for further details.

Editor state data conversion helpers

Draft.js has its own data conversion helpers, convertFromRaw and convertToRaw, which work really well, but aren’t providing that good of an API when initialising or persisting the content of an editor.

We provide two helper methods to simplify the initialisation and serialisation of content. createEditorStateFromRaw combines EditorState.createWithContent, EditorState.createEmpty and convertFromRaw as a single method:

1import { createEditorStateFromRaw } from "draftjs-conductor";
2
3// Initialise with `null` if there’s no preexisting state.
4const editorState = createEditorStateFromRaw(null);
5// Initialise with the raw content state otherwise
6const editorState = createEditorStateFromRaw({ entityMap: {}, blocks: [] });
7// Optionally use a decorator, like with Draft.js APIs.
8const editorState = createEditorStateFromRaw(null, decorator);

To save content, serialiseEditorStateToRaw combines convertToRaw with checks for empty content – so empty content is saved as null, rather than a single text block with empty text as would be the case otherwise.

1import { serialiseEditorStateToRaw } from "draftjs-conductor";
2
3// Content will be `null` if there’s no textual content, or RawDraftContentState otherwise.
4const content = serialiseEditorStateToRaw(editorState);

Contributing

See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our contribution guidelines.

Credits

View the full list of contributors. MIT licensed. Website content available as CC0. Image credit: FirefoxEmoji.

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

52 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

3.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

draftjs-conductor

Installations

Developer Guide

Yes

CommonJS

18.3.0

8.12.0

Pull Requests

12

310

21

277

Issues

2

13

11

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Draft.js conductor

Features

Infinite list nesting

Idempotent copy-paste between editors

With draft.js 0.11 and above

With draft.js 0.10

With draft-js-plugins

Editor state data conversion helpers

Contributing

Credits

10

10

10

10

10

3

0

0

0

0

0

0

0

0

0

3.4

/10