chencheng (云谦) sorrycc

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

ESM modules in node: npm edition

The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.

Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.

This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

@developit/replaceall

~80b ponyfill for String.prototype.replaceAll() with good performance.

Why ponyfill? Because this is a proposal for a spec, and polyfilling it in-place before it gets solidified could break code that relies on an incorrect implementation.

Alternate Version

	var mobx = require('mobx');
	var _ = require('lodash');

	/*

	MOBX in VANILLA ES5
	Notes are based on Matt Ruby's Open Source North Talk:

	Practical React with MobX
	https://www.youtube.com/watch?v=XGwuM_u7UeQ

	import { select, put, take } from 'redux-saga/effects';

	function* emptySaga() {}

	export function* withConfirmation(text, onConfirm, onCancel = emptySaga) {
	yield put({ type: 'ShowConfirmationDialog', payload: text });

	const { type } = yield take([
	'ConfirmationDialogConfirmed',
	'ConfirmationDialogCanceled'

	/* eslint no-undef: 0*/
	/* eslint react/jsx-no-undef: 0*/
	import React from "react"

	const chart = {
	id: "purchase",
	initial: "fetchingWorkshopData",
	states: {
	fetchingWorkshopData: {
	on: {

	import produce from 'immer';
	import {createStore} from 'redux';

	const handleActions = (actionsMap, defaultState) => (
	state = defaultState,
	{type, payload}
	) =>
	produce(state, draft => {
	const action = actionsMap[type];
	action && action(draft, payload);