{"id":13758276,"url":"https://github.com/SamyPesse/draft-js-code","last_synced_at":"2025-05-10T07:30:47.018Z","repository":{"id":57215934,"uuid":"60646462","full_name":"SamyPesse/draft-js-code","owner":"SamyPesse","description":"Collection of utilities to make code blocks edition easy in DraftJS","archived":false,"fork":false,"pushed_at":"2018-03-22T02:35:52.000Z","size":515,"stargazers_count":108,"open_issues_count":14,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T19:16:41.392Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://samypesse.github.io/draft-js-code/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SamyPesse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-07T21:05:49.000Z","updated_at":"2024-09-07T11:15:25.000Z","dependencies_parsed_at":"2022-08-26T15:01:11.335Z","dependency_job_id":null,"html_url":"https://github.com/SamyPesse/draft-js-code","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamyPesse%2Fdraft-js-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamyPesse%2Fdraft-js-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamyPesse%2Fdraft-js-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamyPesse%2Fdraft-js-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SamyPesse","download_url":"https://codeload.github.com/SamyPesse/draft-js-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252452791,"owners_count":21750182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:00:24.007Z","updated_at":"2025-05-10T07:30:46.783Z","avatar_url":"https://github.com/SamyPesse.png","language":"JavaScript","funding_links":[],"categories":["Plugins and Decorators Built for Draft.js"],"sub_categories":[],"readme":"# draft-js-code\n\n[![NPM version](https://badge.fury.io/js/draft-js-code.svg)](http://badge.fury.io/js/draft-js-code)\n[![Coverage Status](https://coveralls.io/repos/github/SamyPesse/draft-js-code/badge.svg?branch=master)](https://coveralls.io/github/SamyPesse/draft-js-code?branch=master)\n\n`draft-js-code` is a collection of low-level utilities to make code block editing in DraftJS editors nicer.\n\n\u003c!-- If you're using `draft-js-plugins`, check out the [`draft-js-code-plugin`](https://github.com/withspectrum/draft-js-code-plugin) wrapper around this library. --\u003e\n\nIt works well with [`draft-js-prism`](https://github.com/SamyPesse/draft-js-prism) or [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin).\n\nDemo: [samypesse.github.io/draft-js-code/](http://samypesse.github.io/draft-js-code/)\n\n### Features\n\n- [x] Indent with \u003ckbd\u003eTAB\u003c/kbd\u003e\n- [x] Insert new line with correct indentation with \u003ckbd\u003eENTER\u003c/kbd\u003e\n- [x] Remove indentation with \u003ckbd\u003eDELETE\u003c/kbd\u003e\n- [ ] Remove indentation with \u003ckdb\u003eSHIFT+TAB\u003c/kbd\u003e ([#6](https://github.com/SamyPesse/draft-js-code/issues/6))\n- [ ] Handle input of pair characters like `()`, `[]`, `{}`, `\"\"`, etc. ([#3](https://github.com/SamyPesse/draft-js-code/issues/3))\n\n### Installation\n\n```\n$ npm install draft-js-code --save\n```\n\n### API\n\n##### `CodeUtils.hasSelectionInBlock(editorState)`\n\nReturns true if user is editing a code block. You should call this method to encapsulate all other methods when limiting code edition behaviour to `code-block`.\n\n##### `CodeUtils.handleKeyCommand(editorState, command)`\n\nHandle key command for code blocks, returns a new `EditorState` or `null`.\n\n##### `CodeUtils.onTab(e, editorState)`\n\nHandle user pressing tab, to insert indentation, it returns a new `EditorState`.\n\n##### `CodeUtils.handleReturn(e, editorState)`\n\nHandle user pressing return, to insert a new line inside the code block, it returns a new `EditorState`.\n\n\n### Usage\n\n```js\nimport React from 'react';\nimport Draft from 'draft-js';\nimport CodeUtils from 'draft-js-code';\n\nclass Editor extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      editorState: Draft.EditorState.createEmpty()\n    };\n  }\n\n  onChange = (editorState) =\u003e {\n    this.setState({\n      editorState\n    })\n  }\n\n  handleKeyCommand = (command) =\u003e {\n    const { editorState } = this.state;\n    let newState;\n\n    if (CodeUtils.hasSelectionInBlock(editorState)) {\n      newState = CodeUtils.handleKeyCommand(editorState, command);\n    }\n\n    if (!newState) {\n      newState = RichUtils.handleKeyCommand(editorState, command);\n    }\n\n    if (newState) {\n      this.onChange(newState);\n      return 'handled';\n    }\n    return 'not-handled';\n  }\n\n  keyBindingFn = (evt) =\u003e {\n    const { editorState } = this.state;\n    if (!CodeUtils.hasSelectionInBlock(editorState)) return Draft.getDefaultKeyBinding(evt);\n\n    const command = CodeUtils.getKeyBinding(evt);\n\n    return command || Draft.getDefaultKeyBinding(evt);\n  }\n\n  handleReturn = (evt) =\u003e {\n    const { editorState } = this.state;\n    if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';\n\n    this.onChange(CodeUtils.handleReturn(evt, editorState));\n    return 'handled';\n  }\n\n  onTab = (evt) =\u003e {\n    const { editorState } = this.state;\n    if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';\n\n    this.onChange(CodeUtils.onTab(evt, editorState));\n    return 'handled';\n  }\n\n  render() {\n    return (\n      \u003cDraft.Editor\n        editorState={this.state.editorState}\n        onChange={this.onChange}\n        keyBindingFn={this.keyBindingFn}\n        handleKeyCommand={this.handleKeyCommand}\n        handleReturn={this.handleReturn}\n        onTab={this.onTab}\n      /\u003e\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamyPesse%2Fdraft-js-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSamyPesse%2Fdraft-js-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamyPesse%2Fdraft-js-code/lists"}