react-page / react-page Goto Github PK

Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.

Home Page: https://react-page.github.io/

License: MIT License

JavaScript 2.71% CSS 4.91% TypeScript 92.38%

editor sites wysiwyg-editor react

react-page's Introduction

ReactPage

ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of contenteditable, you are in the right place.

Install

yarn add @react-page/editor

npm install --save @react-page/editor

There is also a beta release channel, which might contain unstable features:

yarn add @react-page/editor@beta

npm install --save @react-page/editor@beta

Demo

A demo can be found on Demo which reflects the stable release channel on npm.

the current beta version is also available as a demo: beta Demo

Documentation

The documentation is available at docs

Documentation for the current beta is at beta docs

Contributors

Made with contributors-img.

Attributions

Formerly known as ORY Editor

Original Library created by @aeneasr @ory

In the wild

GuestBell Hotel App - ReactPage is used as CMS for hotel landing pages.
Veloplus Online Shop - ReactPage is used to create and display any content page (and the landing page as well)
Bike2School - A project to promote going to school by bike. It uses ReactPage for content editing.

Community

join us in the new Discussion board

react-page's People

Stargazers

Watchers

Forkers

gitter-badger knorrke bartektomas kasperpeulen lanphan devkyoo paddymahoney millerhooks timsayshey raj347 natew factsfinder xennygrimmato neuroradiology qvin chosen1 rhencke ch13g linecode empia bunshar kevindeasis yaogdu belmer litehause lyrl havefive zyp001a pyti jerossh hanuor jai2033shankar bradparks zeachco cybernetics jaircelisv samwisegamgee99 lulzzz tockards tutty427 heziheng 954926491 hhy5277 karamata fengweijp anupvarghese xcelrod06 seansangrc othmaan kustomzone stephensong marufsiddiqui pkyalo jpggvilaca rongfengliang degouville macfrellow goupviet esomkin shiroming ezhangle mjunaidi manishmishra2806 hijodejuliete bamsarts cynricsnow daveek goragodwiriya mpersonal kaizengliu huyufan matrixdekoder phaniapsr tide999 thomposer won21kr manualstar xcchcaptain solostart steinchow theworldcodecopierassociation winziyuan chplain csecong rain168 jackerjay witcxc haxine 321dao zhausong vuquangtam ljb-2000 fnet123 levinhphuc91 alexguo88 devsc zhangf911 leolujuyi isaac12x mshibl

react-page's Issues

React + S3

http://blog.littleblimp.com/post/119230396893/direct-uploads-to-s3-with-react-rails-and

Make copy&paste work without focus on input / contenteditable

Firefox prevents the paste event if not an input / textarea or contenteditable is focused.

This hack should solve this. Might also be smart to use rangy instead.

Please note: closest() does NOT work in IE/Edge

ES6 React

Let's create a new, empty branch and use the flitt template to build an app skeleton with:

The template should not be isomorphic (not required), not use scss (use cool postcss processors instead).

The template should

build with minimal dependencies in production (filesize matters)
be optimized for speed and enforce speed (via enforced patterns or documentation)
have a best practices section in the readme (how to write efficient selectors, how to write saga tests, ...)

layout/resize: update react-draggable to new version

Any plans for musical notation via Lilypond?

Are there any plans to integrate Lilypond into the editor?

Would be extremely cool for any music based project :)

Check prosemirror mobile support (iOS / android)

list of plugins for 0.1

upload (d'n'd) or link to one image - @Knorrke
embed content from soundcloud, youtube, twitter, facebook - @Knorrke
modify text via slate - @inyono
latex blocks if not already solved by slate

core: how does the plugin system work?

this is a critical question. there are various possibilities. i wrote down some thoughts. please extend them :)

npm

editor and plugins are fetched through npm and bundled using npm build. the config file would look like:

import { Plugin } from 'my-foo-plugin'
import { Plugin2 } from 'bar-plugin'

const e = new Editor{
  plugins: [Plugin, Plugin2]
}

pro:

we're using npm
it would work right away

con:

we're using npm
there's always work with building and bundling and people need to know npm and have node installed. in serlo's case this might not work at all

build in the cloud

npm install git://ory/editor/build/?pluins=foo,bar
bower install git://ory/editor/build/?pluins=foo,bar

<script src="https://ory/editor/build/?pluins=foo,bar" />

pro: easy to use, easy to set up, no eval

con: hard to implement

lazy loading

e = new Editor{
  plugins: [{plugin: "foo", version:"1.0"}]
}

pro:

easy to implement
easy to use

con:

hard to secure
evil eval
remote code execution

RFC: undo/redo stack

I currently see two approaches for the undo/redo stack:

Handle undo/redo in the Draft.js instances

We could use the undo/redo stacks from the underlying Draft.js. A undo/redo in our editor will call the corresponding method on the respective Draft.js instance.

+ Easy to implement, we only need to store a stack of pointers to Draft.js instances so that we can infer which Draft.js instance needs to handle the undo/redo.
+ Draft.js (hopefully) implements efficient undo/redo.
- There might be syncing issues. If I understand the Draft.js documentation correctly, there could be operations that do not push to the undo/redo stack (for whatever reasons). Therefore, our stack of Draft.js pointers could be out of sync with the undo/redo stack.
- If we ever want something else than Draft.js editables, then we need to implement undo/redo for those plugins ourselves. For example, if we want a Markdown instance or something that edits the <head> of a HTML component and we don't want to wrap those into Draft.js.
- Undo/redo in entities (e.g. our LaTeX components) is not handled correctly at the moment, see facebookarchive/draft-js#185

Handle undo/redo in Redux

We could implement our own undo/redo stack in Redux and deactivate the undo/redo stack in Draft.js.

+ Works for other editables, too. The editable just has to dispatch the corresponding action on change.
- We have to implement an efficient undo/redo ourselves. For example, just storing the editorStates might lead to memory problems. On the other hand, storing diffes and applying those might be to slow for mobile phones...
https://github.com/omnidan/redux-undo
omnidan/redux-undo#36

Draft.js Equation inline style doesn't update new state when clear equation inline ?

Demo code: https://inyono.github.io/editor/
When add new equation inline style, it's work well.
But I do delete (typing Backspace), it's not clear equation.

Draft.js to do

LaTeX example with MathJax or KaTeX (check why server side code is required)
~~Try building a simple layout builder~~
Generic HTML rendering

Add flow

https://flowtype.org/docs/getting-started.html#_

core: generic stuff that needs to be done

write docs on content model, integration and plugins
write useful functional, acceptance or e2e tests
un- and redo
merging and splitting cells
check collaboration with what @inyono suggested ( @inyono do you have a link?)
... a lot of stuff I don't remember and that will probably be extended in the future

don't use dev-master for slate once stable

Smartcrop

https://github.com/jwagner/smartcrop.js?utm_source=javascriptweekly&utm_medium=email

devices/touch: undo/redo need buttons on touch devices

EditableArea architecture

An EditableArea could be a list of editables:

<EditableArea>
  <Editable />
  <Editable />
  <Editable />
  <Editable />
</EditableArea>

Each Editable wraps an EditablePlugin:

<EditableArea>
  <Editable>
     <EditableGeogebra />
  </Editable>
  <Editable>
     <EditableText /> (e.g. draft.js)
  </Editable>
</EditableArea>

An Editable is basically the factory for the EditablePlugin. It should be able to load plugins from remote locations (how to safety) and define handlers for changes, updates and so on. It could also be a wrapper for moving editables around. We could also define options:

<EditableArea>
  <Editable>
     <EditableGeogebra />
  </Editable>
  <Editable>
     <EditableText /> (e.g. draft.js)
  </Editable>
</EditableArea>

Problem: EditableText Siblings should be joined. If not, there will be n "textareas" which will confine cursor movement amongst other issues (selecting text, ...)

<EditableArea>
  <Editable>
     <EditableText /> (e.g. draft.js)
  </Editable>
  <Editable>
     <EditableText /> (e.g. draft.js)
  </Editable>
</EditableArea>

SelectionChange is not supported in FireFox

Upstream: https://bugzilla.mozilla.org/show_bug.cgi?id=571294

But...there's a polyfill: https://github.com/2is10/selectionchange-polyfill

Use header key origin to evaluate CORS requests

Use saucelabs for testing?

https://saucelabs.com/opensauce/

plugins should not require an internal state - optimize shouldComponentupdate

iOS keyboard breaks fix position elements

"Upstream":

Check out scribe

https://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor

http://guardian.github.io/scribe/

https://github.com/guardian/scribe

core: IE10/IE11 throws symbol is undefined

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _isObject2 = require('lodash/isObject');

var _isObject3 = _interopRequireDefault(_isObject2);

var _isFunction2 = require('lodash/isFunction');

var _isFunction3 = _interopRequireDefault(_isFunction2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ITERATOR_SYMBOL = (0, _isFunction3.default)(Symbol) && Symbol.iterator;
var OLD_ITERATOR_SYMBOL = '@@iterator';

bundle.js (93673,2)

List of editors

https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors

Check if `npm run docs` work on new fancy Ubuntu@Windows bash

plugins/slate: katex vs mathjax for formulas

benchmarks

Drag and drop

0.0.1-sprint2-ux-preparation

@inyono @Knorrke @arekkas think about layout editing user experience and technical details until next monday (30.5.). The proposal should include:

How layout blocks are created (add a new video)
How layout blocks are transformed (moved in position, transformed in number of columns)
How do text fields behave inside of a layout block

You can also think about technical details like:

What does the layout state look like?
How would you deal with undo/redo
...

core: react-css-modules throw "Warning: Unknown prop `styleName` on <div> tag"

upstream https://github.com/gajus/react-css-modules/issues/147

karma: IE launcher does not work

upstream karma-runner/karma-ie-launcher#36

Container with absolute positioned children are not transformed

Internet Explorer

Firefox/Chrome

fix things

dropping over a cell prohibits from dropping over a row. the indicator however is still active
people miss the drop indicator when it is too far left / right
the drop level behaviour is not understood (I'm far right so why isn't it dropping on top??)
the layout mode is missing a good indicator
rows need to be dragged as well (think moving spoilers). it should be possible to move above/below and left/right. maybe not because wraps could be cells instead
double click mouse gesture is not intuitive (especially because a "left layout mode" indicator is missing)
check multiple and nested editables

core: e2e test don't work with firefox 47

upstream: nightwatchjs/nightwatch#1025

cleanup draftjs code base

Please clean up the draft-js codebase introduced by b3b5004

Side note: I disabled css imports to make the build work:

katex.css: b3b5004#diff-f85b40cd50f2ee231a763028c0ab618eR3
draft.css: b3b5004#diff-3ebe1306b18e5df887d9041fb1d2ae71R5

Review Slate

https://github.com/ianstormtaylor/slate might be quite a suitable replacement for Draft.js.

plugin redux middleware

80a1696#diff-72db36c88028e38afcba6e0f318173c6R7

react-resizable seems to be broken when handle is on the left

...there is a lot of jumping values involved.

CSS Frameworks

Bootstrap is outdated (can't find the blogpost on why twitter needs to adapt to current design trends). Therefore, alternatives must be found.

For now, there are two candidates. Feel free to extend:

Review change from `readOnly` to `writable` in Firefox

together.js

https://togetherjs.com/

Check draft.js mobile support on iOS and android

karma: Opera launcher does not work

upstream codymikol/karma-webpack#69

plugins/slate: implement rich text editing

Required:

see https://github.com/GitbookIO?utf8=%E2%9C%93&query=slate

not required:

images, tables

also, it should be possible to en-/disable functionality in slate or maybe even load your own plugins or replace existing plugins with yours. this could be done similarly to the plugin loader used for cells

Check if `npm run flow` works on Windows

How does editing work on mobile

Inspiration for toolbar

Section update workflow

transform HTML to sections
create section diff
patch/replace (new id!) the sections
all <p><br></p> rows get transformed to a new section
update editor state
update sections (how to prevent flickering?)

React layout builder

I thought about how to merge @arekkas working prototype with my React layout builder ideas that allow even more freedom (although they are not necessarily feasible ;)). The main issue was that we want to allow dropping cells beside each other (correct me if I forget other major issues). Like @arekkas mentioned, this is hard to achieve when we have no distinguished layout components. I came up with two approaches to solve this:

Make dnd heatmaps configurable

Instead of having the same dnd heatmap behaviour for all components, we could make this configurable by the component. For example, usually one can drop cells above and below other cells. In layout components though, one can specify that there is also a drop target left and right of components and then configure the behaviour for this. So in the Bootstrap case, one would introduce a new column with the dragged cell and make the sibling columns smaller. In principle, one could introduce new layout components (e.g. Foundation, ...) that also enable dnd and even let multiple layout components work side by side (e.g. consider Bootstrap grid + html tables that work just fine)

One issue this this approach is that it doesn't allow creating columns globally (i.e. a cell that is not a children of some Bootstrap component wouldn't have the left and right heatmap). We would implicitly wrap things into rows to allow this (e.g. by have one preferred layout system)

On the other hand, this approach allows custom dnd behaviour for plugins (consider html tables) that wouldn't be possible with the current approach.

Make layouts pluggable

This approach is basically a rather simple (in comparison to the approach above) generalization of the current approach. Instead of fixed Row/Cells, the webmaster can configure which layout system to use. So the current Row/Cells would be one layout system and the dnd behavior moves to this plugin.

This approach at least allows to switch to another Layout system. Heatmaps still work globally, since the layout system is a distinguished plugin the editor knows of. On the other hand, the layout systems don't work side by side.

So these are my ideas that I did not try out. I'm not sure whether we even have to decide to use such an generalization at once, since we probably could extend the plugin API later without to much problems.