angular / angular/components

cdk proposal: framework for rich text editors ("draftjs" for angular)

Open
#4,444 31 comments 47 reactions 0 assignees View on GitHub
area: new feature P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

tl;dr https://draftjs.org/ for angular

I've been searching the internets and there is nothing that comes even close to draftjs, which is built on top and requires react. What does it do? It solves most of the [contenteditable issues](https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480) and provides api for people to build their own rich text editors on top of it.

Rich text editor doesn't necessarily mean WYSIWYG textarea, it can help with anything from mentions, hashtags to replacing text emoticons with images etc.

![image](https://cloud.githubusercontent.com/assets/1303561/25852521/edeec4ea-34c9-11e7-928c-394a8ffa8ed5.png)

Some of the most popular draftjs plugins can be found [here](https://www.draft-js-plugins.com/) and [here](https://github.com/nikgraf/awesome-draft-js), it should give you an idea what can be done with it.

worth reading:
- https://code.facebook.com/posts/1684092755205505/facebook-open-sources-rich-text-editor-framework-draft-js/
- https://medium.com/@rajaraodv/why-draft-js-and-why-you-should-contribute-460c4a69e6c8
- https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2

I think this could be a great fit for CDK, given that you are eventually planning on creating WYSIWYG anyway.. what do you think?

@jelbourn @mmalerba @kara @andrewseguin @DevVersion @crisbeto

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the Draft.js resources and the Angular CDK context described in the issue, including the linked editor and plugin references. Define the proposed Angular integration, API scope, and acceptance criteria before implementation; the work is done when the framework design and project fit are agreed.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.