WordPress.org

Make WordPress Core

Opened 7 years ago

Last modified 3 days ago

#12423 reopened feature request

Include Ace (or similar) as default code editor

Reported by: scribu Owned by:
Milestone: 4.8 Priority: normal
Severity: normal Version: 3.0
Component: Editor Keywords: needs-patch
Focuses: Cc:

Description

We've dropped CodePress since it wasn't quite up to par in regards to browser compatibility.

How about using Bespin for editing plugin and theme files?

Change History (20)

#1 @scribu
7 years ago

There's already a plugin that does this (on a separate admin page):

Better File Editor

#2 follow-up: @c00l2sv
7 years ago

Bespin has poor support for non HTML5 browsers [1].

What about CodeMirror [2]?
Pretty active development and cross-browser support, bsd-like license [3], clean look[4].

[1] https://wiki.mozilla.org/Labs/Bespin/UserGuide#Requisites
[2] http://marijn.haverbeke.nl/codemirror/
[3] http://marijn.haverbeke.nl/codemirror/LICENSE
[4] http://marijn.haverbeke.nl/codemirror/contrib/php/index.html

#3 @nacin
7 years ago

I've also been looking at EditArea. http://sourceforge.net/projects/editarea/

#4 @jane
7 years ago

I was at a panel with one of the guys behind Bespin last week and he said flat out that Bespin was created knowing that they didn't have to worry about IE based on their audience. It was a Canvas vs Flash panel at sxsw, and though it looked cool, it looked very niche in availability based on our general audience browser stats. I don't think we can use Bespin unless we are going to try and be trailblazers for Canvas/HTML5 and basically pull an early-2000s web standards trick and just say 'your browser sucks, upgrade,' which is sometimes tempting, but would be a bummer for users who don't get to install software on their machines and are stuck with pre-9 IE (schools, libraries, government agencies, etc). Injecting a Chrome frame into IE is their workaround I think.

#6 in reply to: ↑ 5 @nacin
7 years ago

  • Milestone changed from 3.1 to Future Release

Replying to c00l2sv:

Also found this: http://shjs.sourceforge.net/

General thoughts here. By all means, we should identify and test as many projects as possible. That said, I don't think we want to repeat mistakes made with CodePress in regards to project activity. http://shjs.sourceforge.net/ has only one maintainer (as does EditArea and countless others) though it also hasn't had a release since 2008.

It would be naive to think that just because a project supports IE6 now, it'll always support every presumably more standards-compliant browser in the future (not to mention future standards). Aside from that, inclusion in WordPress would reveal existing bugs thanks to a larger userbase.

Finding an active (and willing) project should be as important an objective as finding one that works cross-browser.

#7 @c00l2sv
7 years ago

What are the chances to fork an existing project and maintain it exclusively for WordPress (patching and bug fixing if problems arise)?

#8 @mitchoyoshitaka
6 years ago

  • Summary changed from Include Bespin as default code editor to Include Ace (or similar) as default code editor

Bespin, which became SkyWriter, now has merged with and is superceded by Ace. Ace doesn't require canvas for its rendering engine. It is tri-licensed (MPL/GPL/LGPL).

#9 @mitchoyoshitaka
6 years ago

  • Cc mitchoyoshitaka added

#10 @aurimas
6 years ago

  • Cc aurimas added

#11 @mitchoyoshitaka
5 years ago

FWIW, note that Mozilla themselves have decided not to use Ace wholesale for integration into the browser for Firefox's DevTools initiative (think native Firebug).

More info on that decision here:
https://wiki.mozilla.org/DevTools/Features/CodeEditor#Evaluating_the_Options

The bug for their work on integrating their winner, the Orion code editor, into fx is here:
https://bugzilla.mozilla.org/show_bug.cgi?id=660784

#12 in reply to: ↑ 2 @WraithKenny
5 years ago

Replying to c00l2sv:

What about CodeMirror [2]?
Pretty active development and cross-browser support, bsd-like license [3], clean look[4].

I've been using CodeMirror in Scripts-n-Styles and like it alot. The best feature is mixed-mode support so that script and style tags are appropriately highlighted in html which in turn is highlighted in a php file which is properly highlighted.

#13 @WraithKenny
5 years ago

CodeMirror is a solid and unobtrusive editor (degrades gracefully, ie, doesn't impact without javascript) which is simple to include into the plugin/theme editor pages. For example, I've quickly integrated it into Scripts-n-Styles to see what would be involved (and because I thought it'd be useful):

https://github.com/unFocus/Scripts-n-Styles/blob/master/js/code-editor.js
https://github.com/unFocus/Scripts-n-Styles/blob/master/includes/class.SnS_Admin_Code_Editor.php
https://github.com/unFocus/Scripts-n-Styles/blob/master/css/code-editor.css

The CodeMirror part of it works great (though there are bugs in the wp side of the editor). There are also quite a few other plugins that configure CodeMirror in more advanced ways, to include Search-n-Replace, Auto-complete, and more. (This also means it is somewhat tested in the wordpress environment.)

CodeMirror is open and actively developed https://github.com/marijnh/CodeMirror2/graphs/impact

Supports Firefox 2+, Chrome (any version), Safari 3+, Internet Explorer 6+, Opera 9+ http://codemirror.net/

Anyone still interested in this? I think I remember something about splitting the editors completely out of core and into a "Core Plugin" like the importer plugin. If so, any interest in that? (I'd contribute if it had blessing.)

#15 @WraithKenny
4 years ago

An update: Adobe decided to go with CodeMirror over ACE: https://github.com/adobe/brackets/wiki/Notes-on-CodeMirror essentially because of its MIT license. Their engineers are working with CodeMirror's developer, so the project has more support behind it.

On the related ticket above (a request for highlighting in the post editor) CodeMirror has a markdown mode included.

Also, In the mean-time, I'm sure ACE has evolved from the last time I checked, and they moved to a BSD license.

#16 @bpetty
4 years ago

I can't find it now, but I know there was some recent discussion regarding possibly removing the code editors entirely from core because they are just so dangerous for most users, and now that WP 3.4+ has the theme customizer, the theme editor really isn't needed/recommended at all.

Anyway, I think this is part of the reason that when I proposed doing exactly this kind of thing with the editors, I was forced to convert my patch into a plugin. Here's the relevant IRC discussion, and here's the final plugin (which made use of ACE).

Given the above though, I think that we really should start closing up these tickets just like all other "plugin material" requests, they honestly aren't going to ever be merged in when it comes down to a finished patch in the end, based on my experience. It's definitely less than 20% of users that end up needing the editors or using them, and they encourage the horrible practice of "cowboy coding". Everyone that told me to move it to a plugin really was right, the entire editors themselves should be a plugin.

#17 @scribu
4 years ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

I'm not sure why the code editors have stuck around for so long; wordpress.com probably uses entirely different code for enalbing CSS editing by now.

Version 0, edited 4 years ago by scribu (next)

#18 @DrewAPicture
16 months ago

#23601 was marked as a duplicate.

#19 @westonruter
5 days ago

  • Keywords needs-patch added
  • Milestone set to 4.8
  • Resolution wontfix deleted
  • Status changed from closed to reopened

CodeMirror was originally proposed to be employed by the Custom CSS feature (#35395), but it was removed from what was committed due to the 4.7 timeline and the size of the library. In its place, a regular textarea was added with support for tabbing. Nevertheless, it is used by Jetpack for its enhanced Custom CSS feature. Having syntax highlighting and syntax error checking would be very helpful for users.

In addition to being used in the Custom CSS feature, having a proper code editor available would be greatly helpful for the file editor and also the HTML post content editor (as was raised during the Q&A at SOTW).

So, is CodeMirror the library that core should ship with and employ?

#20 @iseulde
3 days ago

Thanks @westonruter for reopening this. Cc @joen @azaozz.

Some other conversations: https://wordpress.slack.com/archives/core-editor/p1484239765000646 (scroll a bit down too).

We have talked about this lot for the text editor too and I'm leaning towards a yes to add a code editor there as well. In the case of the text editor, I would still keep the look more or less similar to what we have at the moment: a light (maybe even just greyed text) theme, no line numbers etc. In other words, no scary code editor feeling.

The benefits would be:

  • Syntax Validation. This is very useful for users who just want to change something small and are not that familiar with HTML.
  • Autocomplete tags. This might be especially useful if we want to drop auto-p.
  • Separate HTML tags and text with colour. Initially I though just greying out the HTML tags a bit would be a good default. We could format the HTML better too to make it more readable.
  • Switching mode without losing context. This has been a hard issue to solve with a text area, but if we use a code editor it's easy to scroll to the right part in either mode when switching.

I wouldn't add a code editor without making it a pure HTML editor. I'm not entirely sure what all the reasons were for adding auto-p all these years a go, but my guess is that:

  • It was annoying to add all the paragraphs by hand.
  • There was no visual editor, and it make it a bit more visually pleasant.
  • It would be noisy to have all the paragraph tags.
  • It would looks more like code and scary.

With just a text area these issues were hard to solve. But a code editor comes with many possibilities:

  • Autocompleting paragraph tags when pressing enter, which would be similar to the visual editor.
  • We can grey out the paragraph tags, or, more extremely even, make them invisible.
  • We can leave a margin between the top level tags so it resembles the visual side more closely.

So a code editor could also mean no more auto-p!

Note: See TracTickets for help on using tickets.