Add CodeMirror to the HTML block #4348

noisysocks · 2018-01-08T04:00:34Z

👀 What this is

Adds CodeMirror to the HTML block. This means that a user can type their custom HTML using a fully featured text editor with linting and syntax highlighting:

🤔 How this works

CodeMirror was added to core in WordPress 4.9 which means we can enhance a <textarea> simply by calling wp.codeEditor.initialize().

To make CodeMirror easier to use within React, I introduced a <CodeEditor> component which acts as a drop-in replacement for a <textarea>.

I've also incorporated some of @westonruter's work in #1625 by using SandBox within our HTML block. This makes previewing a HTML block more robust. Specifically, you can now insert HTML that blocks rendering, e.g.:

<script>document.write( 'Hey!' );</script>

To avoiding adding a whopping 1.9 MB to our assets, I've implemented a very simple mechanism to lazily load the assets that are normally queued by calling wp_enqueue_code_editor().

✅ How to test

Create a HTML block
Preview it
Save it, view the page
Check that you can preview HTML that blocks rendering, e.g. <script>document.write( 'Hey!' );</script>
Log in as an author and test that you get lint warnings when using e.g. the <script> tag

gziolo · 2018-01-08T07:39:11Z

Cross-posting related issue: #2768. I didn't take any measurements on the size of CodeMirror, but I would expect it isn't a small one :) I think it's fine to include it temporarily on the initial editor load. However we should at least double check what impact it has on the size of JS and CSS loaded, and mention it in the #2768 so we know if we have to act before it gets merged into the core.

noisysocks · 2018-01-08T23:54:09Z

Thanks @gziolo. Some quick measurements from running npm run build and checking DevTools:

Branch	All	JS	CSS
`master`	3.4 MB	2.9 MB	261 KB
This PR	5.3 MB	4.8 MB	277 KB

A 1.9 MB (55%) increase! 😱

noisysocks · 2018-01-08T23:57:39Z

cc'ing some people who might want to track this work:

@mtias—suggested it
@jasmussen—mocked it up in Add Block: Custom HTML #1386
@westonruter—worked on adding CodeMirror to WP Core
@dmsnell—worked on adding a CodeMirror block to Gutenberg in Introduce new CodeMirror block for editing code. #665

gziolo · 2018-01-09T06:30:24Z

A 1.9 MB (55%) increase! 😱

@noisysocks thanks for checking 🙇

Another thing we can add as a follow-up PR is HTML linting which is built-in in the core. By the way, the code for linting is lazy-loaded when editing plugin files. Which is a very good sign since we discovered that CodeMirror adds 1.9 MB to the uncompressed build size.

gziolo · 2018-01-09T06:35:20Z

components/code-editor/test/index.js

+		} ) );
+
+		const wrapper = shallow( <CodeEditor value={ '<b>wowee</b>' } /> );
+		expect( wrapper.find( 'textarea' ) ).toHaveLength( 1 );


We could use snapshot testing here, too. See example:

gutenberg/components/notice/test/index.js

Line 15 in 300ca0a

expect( wrapper ).toMatchSnapshot();

and docs: https://github.com/WordPress/gutenberg/blob/master/docs/testing-overview.md#snapshot-testing.

Good idea. I've changed this to a snapshot test in 17dbeb231a901007b08e5fd0dd75840bdbbc1489.

mtias · 2018-01-09T12:42:06Z

A 1.9 MB (55%) increase! 😱

Ouch.

noisysocks · 2018-01-16T07:03:38Z

Any feedback, questions, or concerns with this PR?

I'd like to get the basic functionality merged and then iterate on it. I've started work on lazily loading the assets over in #4500.

jasmussen · 2018-01-16T12:44:38Z

Really nice work, fun to see this, it's a very very cool block.

There are a couple of things we should address in this PR. First off, can we tweak the padding a little bit so it looks like this?

I think this should do it:

.CodeMirror-lines {
padding: 8px 8px 8px 0;
}

There's a z-index issue with adjecent block toolbars:

One important issue we have to fix is that you need to be able to escape this block using just the keyboard:

Pressing Escape while you're editing inside the block should deselect the entire block, just like it does in a Paragraph block
Pressing the ↓ at the end of a codemirror block should move the caret into the next adjecent block, same with ↑ at the beginning of a block
Ideally you'd also be able to press Enter twice at the end of a codemirror block to create a new Paragraph block below, just like how you can press Enter twice inside a list to exit it

Question for a future PR, doesn't have to be this one — can we customize the colors of the syntax highlighting? If yes, I'd love for us to use more WordPressy colors. Alternatively, I'd love it if we could at least use something like $blue-medium-200 for the line-highlighter.

noisysocks · 2018-01-17T06:08:15Z

Question for a future PR, doesn't have to be this one — can we customize the colors of the syntax highlighting?

Yep! It's just a matter of styling the .CodeMirror classes 🙂

noisysocks · 2018-01-18T04:04:36Z

Thanks @jasmussen! I've implemented your suggested changes.

Pressing the ↓ at the end of a codemirror block should move the caret into the next adjecent block, same with ↑ at the beginning of a block

I made it so that pressing UP/DOWN first moves the cursor to the start/end of the line. A subsequent press will then move focus to the previous/next block. It feels really natural in my testing.

Ideally you'd also be able to press Enter twice at the end of a codemirror block to create a new Paragraph block below, just like how you can press Enter twice inside a list to exit it

I didn't implement this since pressing ENTER twice is quite common while writing code and e.g. adding whitespace between lines.

dmsnell · 2018-01-18T04:38:44Z

sorry I'm coming in somewhat late. what did we decide about async-loading CodeMirror? are we wanting to still do that?

we can use example code in #665 where I have everything async-loading including the editor and the language modes

I don't think it's responsible for us to add almost 2 MB to the download, especially since we expect most page views to not open the HTML editor. I'd be happy to help with this too, though my cycles lately have been limited and stretched

westonruter · 2018-01-18T05:37:31Z

sorry I'm coming in somewhat late. what did we decide about async-loading CodeMirror? are we wanting to still do that?

Yes, see #4500

noisysocks · 2018-01-22T22:48:53Z

Any more thoughts on this? 😊

dmsnell · 2018-01-22T23:00:57Z

I'd really like to see us wait until this is loading on-demand before merging it otherwise it's going to instantly bloat the editor in no small way - that is, I'd love to see something like #4500 merge first or have some changes here to lazy-load.

noisysocks · 2018-01-23T02:43:06Z

I'll hold off on hitting the merge button until #4500 is ready. Nonetheless, I'd like to get this PR into an approved and ready-to-go state 🙂

jasmussen · 2018-01-23T08:08:41Z

Visually this is in a good place 👍:

I also appreciate that the arrow at the beginning and end of the block enters adjecent blocks or creates a new paragraph so at least you can escape the block. 👍

However I'm seeing some weird behavior when testing. Not sure if it's intentional, but basic dummy text paragraphs are joined together on reload:

noisysocks · 2018-01-23T23:57:23Z

However I'm seeing some weird behavior when testing. Not sure if it's intentional, but basic dummy text paragraphs are joined together on reload:

It looks like this is because Gutenberg pretty prints the post HTML before saving. You can see that this happens on master as well. I think this behaviour is reasonable. We're typing HTML into the block here and, in HTML, whitespace is collapsed.

noisysocks · 2018-01-29T02:39:21Z

As per the discussion over in #4500, I've implemented lazy loading in a one-off manner in e51f342. The 1.9 MB of CodeMirror scripts and styles are now not loaded until a HTML block is instantiated.

noisysocks · 2018-02-08T00:29:01Z

Rebased and fixed conflicts. How do we feel about getting this in? cc. @westonruter @mtias

westonruter

A couple minor things I commented on.

Also, there is a bit of an unexpected UX behavior whereby if I shift-arrow to select some text, I get the block toolbar appearing. I understand that normally makes sense because toolbar buttons like bold and italic. But since there are no such buttons in the toolbar for Custom HTML (yet, as I suppose there could be shortcuts to add common tags), it is a little distracting to see the HTML/Preview buttons flash whenever I select some text with the keyboard.

westonruter · 2018-02-22T22:06:43Z

components/code-editor/README.md

+	return (
+		<CodeEditor
+			value={ '<p>This is some <b>HTML</b> code that will have syntax highlighting!</p>' }
+		    onChange={ value => console.log( value ) }


Attributes here have inconsistent indentation.

Oops. Fixed in 87af208.

westonruter · 2018-02-22T22:09:01Z

components/code-editor/README.md

+=======
+
+CodeEditor is a React component that provides the user with a code editor
+that has syntax highliting and linting.


s/highliting/highlighting/

Oops. Fixed in 87af208.

westonruter · 2018-02-22T22:11:46Z

components/code-editor/editor.js

+		this.lastCursor = editor.getCursor();
+	}
+
+	onKeyHandled( editor, name, event ) {


I love this.

westonruter · 2018-02-22T22:24:25Z

Per my review comment, here's me with cursor in block:

And then as soon as I select some text with keyboard:

It doesn't feel like the HTML/Preview buttons show appear.

Introduces a new <CodeEditor> component which wraps a CodeMirror enhanced <textarea>. This component is then used to provide syntax highliting in the Custom HTML block.

This prevents the cursor from moving around to different blocks while editing code.

Make the CodeEditor in the HTML block look vaguely like what Joen mocked up in #1386.

Prevent the iframe from capturing pointer events and preventing the user from being able to select the block.

`componentDidUpdate` and `componentDidMount` fire after DOM reconcilation but before the frame is painted. CodeMirror's `focus()` method seems to only work *after* paint. Scheduling `focus()` to happen after the next frame is painted seems to be the best that we can do.

We only care that the component renders without an error and doesn't change unintentionally, which makes this a perfect use case for snapshot testing.

Bumps up the z-index of every element that is at the same depth as the block toolbar. By making these indicies greater than 4, we ensure our contextual elements appear over the CodeMirror editor. This stops the CodeMirror gutter from appearing over the block toolbar.

- Permit pressing ESCAPE to unfocus the currently selected block. - Allow pressing UP/DOWN to move focus to the previous/next block when the cursor is at the start/end of the editor.

Wraps CodeEditor with a component that lazily loads the scripts and styles that CodeMirror needs. This lets us avoid using wp_enqueue_code_editor() which adds considerable bulk (~ 1.9 MB) to the page load.

noisysocks · 2018-02-27T01:31:52Z

Thanks for reviewing this, @westonruter!

It doesn't feel like the HTML/Preview buttons show appear.

Good catch. I agree that it feels weird. I think to address this we need to split <Slot name="Block.Toolbar"> into two slots: one for toolbar buttons that affect the block and one for toolbar buttons that affect the selected text. Only the latter should be shown when text is selected.

Since this would require moving a few things around and it's not a major issue, I'll defer this work for later.

noisysocks added [Feature] Blocks Overall functionality of blocks [Status] In Progress Tracking issues with work in progress labels Jan 8, 2018

noisysocks mentioned this pull request Jan 8, 2018

Add Custom HTML block description and use sandbox for preview #1625

Closed

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch 2 times, most recently from 2eeb4c5 to 37445c7 Compare January 8, 2018 06:24

noisysocks mentioned this pull request Jan 9, 2018

Block and Component Lazy Loading #2768

Open

3 tasks

gziolo reviewed Jan 9, 2018

View reviewed changes

noisysocks changed the title ~~[WIP] Add syntax highlighting to the Custom HTML block~~ Add CodeMirror to the HTML block Jan 9, 2018

noisysocks removed the [Status] In Progress Tracking issues with work in progress label Jan 9, 2018

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from 17dbeb2 to e2c619d Compare January 10, 2018 02:28

noisysocks added the [Type] Enhancement A suggestion for improvement. label Jan 11, 2018

noisysocks requested review from westonruter and dmsnell January 12, 2018 04:26

noisysocks mentioned this pull request Jan 16, 2018

Lazily load CodeMirror assets #4500

Closed

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from e2c619d to 7714d1e Compare January 18, 2018 03:53

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from 7714d1e to 7847ea2 Compare January 18, 2018 04:14

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from d9cbfaa to e51f342 Compare January 29, 2018 02:29

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch 4 times, most recently from 5c729cc to 35d7dde Compare February 8, 2018 00:21

westonruter approved these changes Feb 22, 2018

View reviewed changes

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from 35d7dde to 87af208 Compare February 26, 2018 03:16

noisysocks added 12 commits February 27, 2018 12:04

Use CodeMirror in Custom HTML block

3269e1c

Introduces a new <CodeEditor> component which wraps a CodeMirror enhanced <textarea>. This component is then used to provide syntax highliting in the Custom HTML block.

Prevent CodeEditor from propagating events

c78dc36

This prevents the cursor from moving around to different blocks while editing code.

Allow CodeEditor to be focused via the focus prop

a2cfe2e

Improve HTML block styling

f28b685

Make the CodeEditor in the HTML block look vaguely like what Joen mocked up in #1386.

Allow HTML block to be selected when it's in preview mode

d7305dc

Prevent the iframe from capturing pointer events and preventing the user from being able to select the block.

Change CodeEditor test to use a snapshot test

6206f13

We only care that the component renders without an error and doesn't change unintentionally, which makes this a perfect use case for snapshot testing.

Increase code editor padding in HTML block

67cbf3d

Improve HTML block cursor behaviour

28c925a

- Permit pressing ESCAPE to unfocus the currently selected block. - Allow pressing UP/DOWN to move focus to the previous/next block when the cursor is at the start/end of the editor.

Lazily load CodeMirror assets

3119677

Wraps CodeEditor with a component that lazily loads the scripts and styles that CodeMirror needs. This lets us avoid using wp_enqueue_code_editor() which adds considerable bulk (~ 1.9 MB) to the page load.

Fix typos in CodeEditor README

30ade66

noisysocks force-pushed the add/syntax-highlighting-to-html-block branch from 87af208 to 30ade66 Compare February 27, 2018 01:16

noisysocks merged commit aaf6060 into master Feb 27, 2018

noisysocks deleted the add/syntax-highlighting-to-html-block branch February 27, 2018 01:32

noisysocks mentioned this pull request Feb 27, 2018

HTML block: Selecting text with keyboard should not reveal block toolbar #5274

Closed

okmttdhr mentioned this pull request Mar 25, 2024

Add CodeMirror to Additional CSS / Custom HTML block #60155

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CodeMirror to the HTML block #4348

Add CodeMirror to the HTML block #4348

noisysocks commented Jan 8, 2018 •

edited

Loading

gziolo commented Jan 8, 2018

noisysocks commented Jan 8, 2018 •

edited

Loading

noisysocks commented Jan 8, 2018 •

edited

Loading

gziolo commented Jan 9, 2018

gziolo Jan 9, 2018

noisysocks Jan 10, 2018

mtias commented Jan 9, 2018

noisysocks commented Jan 16, 2018 •

edited

Loading

jasmussen commented Jan 16, 2018 •

edited

Loading

noisysocks commented Jan 17, 2018 •

edited

Loading

noisysocks commented Jan 18, 2018

dmsnell commented Jan 18, 2018 •

edited

Loading

westonruter commented Jan 18, 2018

noisysocks commented Jan 22, 2018

dmsnell commented Jan 22, 2018

noisysocks commented Jan 23, 2018

jasmussen commented Jan 23, 2018

noisysocks commented Jan 23, 2018 •

edited

Loading

noisysocks commented Jan 29, 2018 •

edited

Loading

noisysocks commented Feb 8, 2018

westonruter left a comment

westonruter Feb 22, 2018

noisysocks Feb 26, 2018

westonruter Feb 22, 2018

noisysocks Feb 26, 2018

westonruter Feb 22, 2018

westonruter commented Feb 22, 2018

noisysocks commented Feb 27, 2018 •

edited

Loading

Add CodeMirror to the HTML block #4348

Add CodeMirror to the HTML block #4348

Conversation

noisysocks commented Jan 8, 2018 • edited Loading

👀 What this is

🤔 How this works

✅ How to test

gziolo commented Jan 8, 2018

noisysocks commented Jan 8, 2018 • edited Loading

noisysocks commented Jan 8, 2018 • edited Loading

gziolo commented Jan 9, 2018

gziolo Jan 9, 2018

Choose a reason for hiding this comment

noisysocks Jan 10, 2018

Choose a reason for hiding this comment

mtias commented Jan 9, 2018

noisysocks commented Jan 16, 2018 • edited Loading

jasmussen commented Jan 16, 2018 • edited Loading

noisysocks commented Jan 17, 2018 • edited Loading

noisysocks commented Jan 18, 2018

dmsnell commented Jan 18, 2018 • edited Loading

westonruter commented Jan 18, 2018

noisysocks commented Jan 22, 2018

dmsnell commented Jan 22, 2018

noisysocks commented Jan 23, 2018

jasmussen commented Jan 23, 2018

noisysocks commented Jan 23, 2018 • edited Loading

noisysocks commented Jan 29, 2018 • edited Loading

noisysocks commented Feb 8, 2018

westonruter left a comment

Choose a reason for hiding this comment

westonruter Feb 22, 2018

Choose a reason for hiding this comment

noisysocks Feb 26, 2018

Choose a reason for hiding this comment

westonruter Feb 22, 2018

Choose a reason for hiding this comment

noisysocks Feb 26, 2018

Choose a reason for hiding this comment

westonruter Feb 22, 2018

Choose a reason for hiding this comment

westonruter commented Feb 22, 2018

noisysocks commented Feb 27, 2018 • edited Loading

noisysocks commented Jan 8, 2018 •

edited

Loading

noisysocks commented Jan 8, 2018 •

edited

Loading

noisysocks commented Jan 8, 2018 •

edited

Loading

noisysocks commented Jan 16, 2018 •

edited

Loading

jasmussen commented Jan 16, 2018 •

edited

Loading

noisysocks commented Jan 17, 2018 •

edited

Loading

dmsnell commented Jan 18, 2018 •

edited

Loading

noisysocks commented Jan 23, 2018 •

edited

Loading

noisysocks commented Jan 29, 2018 •

edited

Loading

noisysocks commented Feb 27, 2018 •

edited

Loading