Multi Format Text Editor #126

VeraZab · 2017-11-27T17:04:03Z

No description provided.

bpostlethwaite · 2017-11-27T17:05:37Z

src/components/index.js

@@ -45,7 +45,7 @@ export {
  Panel,
  PanelMenuWrapper,
  Radio,
-  RichTextEditor,
+  MultiFormatTextEditor,


I'm happy with TextEditor since we know we only have one anyway. But the longer name is 👌 to if you prefer it.

bpostlethwaite · 2017-11-29T21:28:09Z

package.json

    "fast-isnumeric": "^1.1.1",
+    "immutable": "^3.8.2",


i can't it's needed by draft-js..

for real? Ugh ugh ugh. So to interop with this library you have to use a special wrapper around the regular data types because... Grrrr

Sometimes I want to become a farmer 👩‍🌾

bpostlethwaite · 2017-11-29T21:28:16Z

package.json

    "plotly.js": "^1.31.0",
    "prop-types": "^15.5.10",
    "react-color": "^2.13.8",
+    "react-immutable-proptypes": "^2.1.0",


i can't it's needed by draft-js.. same

bpostlethwaite · 2017-11-29T21:29:06Z

src/DefaultEditor.js

@@ -188,7 +188,7 @@ class DefaultEditor extends Component {
          </Fold>
          <Fold name={_('Title and Fonts')}>
            <Section name={_('Title')}>
-              <RichTextEditor />
+              <MultiFormatTextEditor attr="title" />


you still like MultiFormatTextEditor? As this is our external API we can keep it as ring-a-ding as possible. But like I said if you love it then 👌

yeah, sorry i still like it that way its clear for me we're not talking about the richTextEditor or something, TextEditor lacks some kind of keyword for me to indicate that its a super multi mega editor :)

bpostlethwaite · 2017-11-29T21:30:27Z

src/components/fields/MultiFormatTextEditor.js

+        <MultiFormatTextEditor
+          value={this.props.fullValue}
+          onChange={this.props.updatePlot}
+        />


oooh such simple ~~API~~ configuration I like it!

bpostlethwaite · 2017-11-29T21:33:26Z

src/components/widgets/TextArea.js

+          ref="textinput"
+          value={this.state.value}
+          rows={this.props.visibleRows}
+          cols={this.props.areaWidth}


why does visibleRows map to rows but then areaWidth map to cols. Maybe TextArea should expose the same props rows and cols. That way MDN documentation will work for the wrapper component to

bpostlethwaite · 2017-11-29T21:36:15Z

src/components/widgets/TextArea.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+
+export default class TextArea extends Component {


Do we need TextArea at all? Does it need to be stateful? Does't Plotly.js gd.layout hold the state for us?

well on the other hand if this is how it existed in the workspace I don't see a reason to make substantial architectural changes at this stage :)

bpostlethwaite · 2017-11-29T21:37:08Z

src/components/widgets/TextArea.js

+    // Reset the value to the graph's actual value
+    if (nextProps.value !== this.state.value) {
+      this.setState({
+        value: nextProps.value,


if state always equal to props.value why bother with state?

bpostlethwaite · 2017-11-29T21:37:52Z

src/components/widgets/TextArea.js

+    return (
+      <span>
+        <textarea
+          ref="textinput"


do we use that ref?

yeah, its just a component that used to be there before, and i didn't pay as much attention to it, Per used it to create the html editor, I did the same and used it to extend the Latex editor too, i can try to remove, seems not that crucial indeed

bpostlethwaite · 2017-11-29T21:56:46Z

package.json

@@ -65,10 +65,16 @@
    "react": "React"
  },
  "dependencies": {
+    "draft-js": "^0.10.4",
+    "draft-js-export-html": "plotly/draft-js-export-html",


nice work upgrading past our ancient forks!

bpostlethwaite · 2017-11-29T22:06:20Z

src/lib/constants.js

@@ -439,3 +439,8 @@ export const SYMBOLS = [
  {value: 'line-ne-open', alias: 43, label: 'M5,-5L-5,5', fill: 'none'},
  {value: 'line-nw-open', alias: 44, label: 'M5,5L-5,-5', fill: 'none'},
 ];
+
+export const RETURN_KEY = 'Enter';


A quick search seems to indicate that these don't really need to be in a constants file. They are only used in 1 file. Not critical but I am trying to keep a slim constants file under the general architectural philosophy "all the things you need in one place"

bpostlethwaite · 2017-11-29T22:07:23Z

src/styles/_shame.scss

+  font-family: 'react-plotlyjs-editor';
+  src: url('data:font/truetype;charset=utf-8;base64,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
+')
+    format('truetype');


there was no newline before. Is prettier formatting your scss as well or is this intentional?

bpostlethwaite · 2017-11-29T22:08:28Z

src/styles/icons/_icons.scss

@@ -1,18 +1,21 @@
 .icon-cog:before {
-  content: "\61";
+  content: '\61';


is the scss being linted by your tools? That is probably ok but I haven't been linting scss like that.

bpostlethwaite · 2017-11-29T22:10:20Z

src/styles/variables/_defaults.scss

-$default-color-button-default:                #119dff;
-$default-color-button-hover:                  #0f89df;
-$default-color-button-active:                 #0d76bf;
+$default-color-button-default: #119dff;


oh yeh I was trying to get rid of these and replace them with theme names. These variables should be in _main.scss not defaults.scss 🤷‍♀️

later later

bpostlethwaite · 2017-11-29T22:11:24Z

src/styles/variables/_main.scss

@@ -44,6 +44,9 @@ $color-link-light: $default-color-blue-pale;
 $color-panel-background: $default-color-white;
 $color-section-header-background: $default-color-white-blue;
 $color-fold-header-background: $default-color-rhino-dark;
+$color-accent: $default-color-dodger;
+$color-accent-shade: $default-color-dodger-shade;
+$color-button-hover: $default-color-button-hover;


I would like to ⚡ default-color-button-hover as that is a pretty terrible theme color name :) But the partition between theme vars and themable vars is incomplete

later later

bpostlethwaite · 2017-11-29T22:13:48Z

Super work. Double plus good for getting us off those 🍴 !!

I'm a little hesitant on the inheritance based architecture as this repo has implemented composition everywhere we needed to extend a component.

Also tests, what are we gonna do about tests?

bpostlethwaite · 2017-11-29T22:16:52Z

I'm open to tests in future PRs ... since I could use this code everywhere right now :) If you make an issue for tests I'll 💃 on this as is!

bpostlethwaite reviewed Nov 27, 2017

View reviewed changes

VeraZab force-pushed the rich-text-editor branch from 5c3b0bd to 9617d60 Compare November 27, 2017 21:02

VeraZab changed the title ~~Multi Format Text Editor stub~~ Multi Format Text Editor Nov 27, 2017

VeraZab force-pushed the rich-text-editor branch 8 times, most recently from 88f0994 to bb07cb6 Compare November 29, 2017 13:17

VeraZab added 8 commits November 29, 2017 20:55

Multi Format Text Editor stub

69f824f

Adjust Html editor

3b0f94e

Adjust LaTeX

b67ad76

Start RichTextEditor

a86eb4f

Update icons and get correct version of draft-js-export-html module

3730817

Spacing

4206602

Start multi

4ab0b54

Adjust styles

127c03b

VeraZab force-pushed the rich-text-editor branch from 279d246 to 127c03b Compare November 29, 2017 18:56

VeraZab added 2 commits November 29, 2017 22:43

Adjust warning messages

1b38ab3

Adjust css variables

2cc9d2c

bpostlethwaite reviewed Nov 29, 2017

View reviewed changes

VeraZab mentioned this pull request Nov 30, 2017

add tests to MultiFormatTextEditor #145

Open

VeraZab merged commit 064c6f7 into develop Nov 30, 2017

VeraZab deleted the rich-text-editor branch November 30, 2017 01:42

bpostlethwaite mentioned this pull request Nov 30, 2017

Title and fonts: Rich text #16

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multi Format Text Editor #126

Multi Format Text Editor #126

VeraZab commented Nov 27, 2017

bpostlethwaite Nov 27, 2017

bpostlethwaite Nov 29, 2017

VeraZab Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

VeraZab Nov 29, 2017

bpostlethwaite Nov 29, 2017

VeraZab Nov 29, 2017

bpostlethwaite Nov 29, 2017 •

edited

Loading

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

VeraZab Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017 •

edited

Loading

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite Nov 29, 2017

bpostlethwaite commented Nov 29, 2017 •

edited

Loading

bpostlethwaite commented Nov 29, 2017

		@@ -0,0 +1,58 @@
		import React, {Component} from 'react';

		export default class TextArea extends Component {

Multi Format Text Editor #126

Multi Format Text Editor #126

Conversation

VeraZab commented Nov 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bpostlethwaite Nov 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bpostlethwaite Nov 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bpostlethwaite commented Nov 29, 2017 • edited Loading

bpostlethwaite commented Nov 29, 2017

bpostlethwaite Nov 29, 2017 •

edited

Loading

bpostlethwaite Nov 29, 2017 •

edited

Loading

bpostlethwaite commented Nov 29, 2017 •

edited

Loading