Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New editor — react-simple-code-editor and Prism #1073

Closed
wants to merge 10 commits into from
Closed

New editor — react-simple-code-editor and Prism #1073

wants to merge 10 commits into from

Conversation

sapegin
Copy link
Member

@sapegin sapegin commented Aug 6, 2018 •
edited
Loading

This should fix #987, make the UI a bit more consistent, reduce code complexity, and remove some nasty hacks from the code.

  • CodeMirror → react-simple-code-editor
  • Highlight.js → Prism
  • Remove css-loader and style-loader
  • Remove editorConfig and highlightTheme config options
  • Remove code splitting and Babel dynamic import plugins
  • Use theme to change syntax highlighting colors
  • Consistent syntax highlighting in the editor and static code examples

Editor:

cloudapp annotation 2018-08-06 at 10 22 52 am png

Static code blocks:

cloudapp annotation 2018-08-06 at 10 19 04 am png

Bundle size (minified gzipped):

  • Before: 178 kB (plus 74 KB of code-splitted CodeMirror and stuff)
  • After: 184 kB

So, just 6 KB more but everything is included in the initial bundle.

sapegin and others added 9 commits August 4, 2018 18:59
@sapegin
Feat: Highlight.js → Prism
017614d 
BREAKING CHANGE:

* `highlightTheme` isn't deprecated anymore and defines Prism theme
* `editorConfig.theme` isn't supported anymore
* No highlighting in fenced code blocks without specified language.
* No highlighting in non-fenced code blocks
@sapegin
Feat: CodeMirror → react-simple-code-editor
e68ec7e 
BREAKING CHANGE:

* editorConfig option is no longer available
* Remove code splitting and Bable dynamic import plugins

Closes #987 #1054
@sapegin
Feat: Use JSX for syntax highlight theme
de5355b 
* Get rid of css-loader and style-loader

BREAKING CHANGE:

* highlightTheme config option is no longer available
Test: Fix integration tests
a6ce856
Fix: Add focus outline for the editor
ec8141e
Fix: Focus issues in the editor
69fa219
Fix: Better focus styles for inputs
f7c68d8
Fix: Tweak link color
d44cefe
Test: Try to test Cypress failing test
e988f3e 
Looks like a bug in Cypress:
cypress-io/cypress#2245
@sapegin sapegin added this to the 8.0.0: New editor milestone Aug 7, 2018
@sapegin sapegin mentioned this pull request Aug 7, 2018
Closed
@codecov-io
Copy link

codecov-io commented Aug 7, 2018 •
edited
Loading

Codecov Report

Merging #1073 into master will increase coverage by 0.05%.
The diff coverage is 100%.

Impacted Files Coverage Δ
src/rsg-components/Markdown/Pre/PreRenderer.js 100% <ø> (ø) ⬆️
scripts/make-webpack-config.js 95.45% <ø> (ø) ⬆️
...omponents/ReactComponent/ReactComponentRenderer.js 100% <ø> (ø) ⬆️
...ponents/TableOfContents/TableOfContentsRenderer.js 100% <ø> (ø) ⬆️
loaders/styleguide-loader.js 100% <ø> (ø) ⬆️
src/styles/theme.js 100% <ø> (ø) ⬆️
...rc/rsg-components/Playground/PlaygroundRenderer.js 100% <ø> (ø) ⬆️
src/rsg-components/Markdown/Markdown.js 100% <ø> (ø) ⬆️
test/jestsetup.js 100% <ø> (ø) ⬆️
src/styles/prismTheme.js 100% <100%> (ø)
... and 5 more

@sapegin
Copy link
Member Author

sapegin commented Aug 9, 2018

Merged manually to the next branch.

@sapegin sapegin closed this Aug 9, 2018
@sapegin sapegin deleted the new-editor branch August 9, 2018 07:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.0.0: New editor
Development

Successfully merging this pull request may close these issues.

Support for the experimental syntax 'dynamicImport' isn't currently enabled
2 participants
@sapegin @codecov-io