RichText: Format boundaries without DOM (#13697)

* Avoid flickering by setting boundary class when creating the DOM tree * Remove TinyMCE boundaries * Remove TinyMCE so it doesn't interfere with our boundaries * Fix failing unit tests * Only have one boundary class at a time * Remove filterString param * Build in own padding and boundary classes * Update styling * valueToFormat shouldn't create editable tree * Add zero with spaces around formatting * Remove old boundary compatibility code * Update dom diff, prevent browser selection overwrite on boundary * Update UI * Fix inserting format with shortcut * Add check * Remove nbsp inserted by TinyMCE from test * Do not mutate attirbutes object * Fix link e2e tests * WIP * WIP: try boundaries without DOM * Remove zero width space everywhere * Fix e2e tests * Clean up * Revert selection snapshots * Correctly remove dependencies * Add nested boundary test * Add backtick test * Fix annotation tests: they now have boundaries * Merge logic * Fix getActiveFormat test * Update some docs and dependencies * Fix block CSS * Return focus to editable after pressing format button * Update docs * Update changelogs * Add changelog headings * Remove obsolete onFocus class method from Editable * Restore :focus * Update TinyMCE mentions * Use Escape instead of mouse move * Update isHorizontalEdge comment * Add docs for fromFormat * Create test content manually
WordPress · Mar 6, 2019 · 0f01eec · 0f01eec
1 parent 813ee11
commit 0f01eec
Show file tree

Hide file tree

Showing 56 changed files with 793 additions and 1,026 deletions.
diff --git a/...velopers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md b/...velopers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md
@@ -118,17 +118,17 @@ In the code snippet above, when loading the editor, we will extract the `content
 
 Earlier examples used the `createElement` function to create DOM nodes, but it's also possible to encapsulate this behavior into ["components"](). This abstraction helps as a pattern to share common behaviors and to hide complexity into self-contained units. There are a number of components available to use in implementing your blocks. You can see one such component in the snippet above: the [`RichText` component]().
 
-The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library.
+The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc.
 
 To use the `RichText` component, add `wp-editor` to the array of registered script handles when calling `wp_register_script`.
 
 ```php
 wp_register_script(
 	'gutenberg-boilerplate-es5-step03',
 	plugins_url( 'step-03/block.js', __FILE__ ),
-	array( 
-		'wp-blocks', 
-		'wp-element', 
+	array(
+		'wp-blocks',
+		'wp-element',
 		'wp-editor', // Note the addition of wp-editor to the dependencies
 	)
 );

diff --git a/docs/designers-developers/faq.md b/docs/designers-developers/faq.md
@@ -241,7 +241,7 @@ Here is a brief animation illustrating how to find and use the keyboard shortcut
 
 ## Is Gutenberg built on top of TinyMCE?
 
-No. [TinyMCE](https://www.tinymce.com/) is one of the best tools for enabling rich text on the web. In Gutenberg, TinyMCE does exactly that. Nearly every text field you'll find is augmented with TinyMCE for rich text. Whether it be text, lists, or even just a single caption, TinyMCE can be invoked on blocks for rich text enhancements.
+No. [TinyMCE](https://www.tinymce.com/) is only used for the "Classic" block.
 
 ## What browsers will Gutenberg support?
 
@@ -320,7 +320,7 @@ We realize it's a big change. We also think there will be many new opportunities
 
 ## Will I be able to opt out of Gutenberg for my site?
 
-There is a “Classic” block, which is virtually the same as the current editor, except in block form. 
+There is a “Classic” block, which is virtually the same as the current editor, except in block form.
 
 There is also the [Classic Editor Plugin](https://wordpress.org/plugins/classic-editor/) which restores the previous editor, see the plugin for more information. The WordPress Core team has committed to supporting the Classic Editor Plugin [until December 2021](https://make.wordpress.org/core/2018/11/07/classic-editor-plugin-support-window/).
 

diff --git a/docs/designers-developers/glossary.md b/docs/designers-developers/glossary.md
@@ -35,7 +35,7 @@
 <dd>A sidebar region containing metadata fields for the post, including scheduling, visibility, terms, and featured image.</dd>
 
 <dt>RichText</dt>
-<dd>A common component enabling rich content editing including bold, italics, hyperlinks, etc. It is not too much unlike the single editor region of the legacy post editor, and is in fact powered by the same TinyMCE library.</dd>
+<dd>A common component enabling rich content editing including bold, italics, hyperlinks, etc.</dd>
 
 <dt>Reusable block</dt>
 <dd>A block that is saved and then can be shared as a reusable, repeatable piece of content.</dd>

diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php
@@ -102,7 +102,6 @@
 	),
 	'wp-dom'                                => array(
 		'lodash',
-		'wp-tinymce',
 	),
 	'wp-dom-ready'                          => array(),
 	'wp-edit-post'                          => array(
@@ -153,7 +152,6 @@
 		'wp-notices',
 		'wp-nux',
 		'wp-rich-text',
-		'wp-tinymce',
 		'wp-token-list',
 		'wp-url',
 		'wp-viewport',

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -14,17 +14,17 @@
 	margin-bottom: 0;
 	position: relative;
 
-	.editor-rich-text__tinymce.mce-content-body {
+	[contenteditable] {
 		cursor: text;
 	}
 
 	// Make placeholder text white unless custom colors or outline versions are chosen.
-	&:not(.has-text-color):not(.is-style-outline) .editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce {
+	&:not(.has-text-color):not(.is-style-outline) .editor-rich-text__editable[data-is-placeholder-visible="true"] + .editor-rich-text__editable {
 		color: $white;
 	}
 
 	// Increase placeholder opacity to meet contrast ratios.
-	.editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce {
+	.editor-rich-text__editable[data-is-placeholder-visible="true"] + .editor-rich-text__editable {
 		opacity: 0.8;
 	}
 
@@ -33,7 +33,7 @@
 		max-width: 100%;
 
 		// Polish the empty placeholder text for the button in variation previews.
-		.editor-rich-text__tinymce[data-is-placeholder-visible="true"] {
+		.editor-rich-text__editable[data-is-placeholder-visible="true"] {
 			height: auto;
 		}
 

diff --git a/packages/block-library/src/button/test/__snapshots__/index.js.snap b/packages/block-library/src/button/test/__snapshots__/index.js.snap
@@ -18,17 +18,17 @@ exports[`core/button block edit matches snapshot 1`] = `
               aria-autocomplete="list"
               aria-label="Add text…"
               aria-multiline="true"
-              class="wp-block-button__link editor-rich-text__tinymce"
+              class="wp-block-button__link editor-rich-text__editable"
               contenteditable="true"
               data-is-placeholder-visible="true"
               role="textbox"
             >
               <br
-                data-mce-bogus="1"
+                data-rich-text-padding="true"
               />
             </div>
             <div
-              class="editor-rich-text__tinymce wp-block-button__link"
+              class="editor-rich-text__editable wp-block-button__link"
             >
               Add text…
             </div>

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -1,13 +1,6 @@
 .wp-block-cover-image,
 .wp-block-cover {
-	.editor-rich-text__tinymce[data-is-empty="true"]::before {
-		position: inherit;
-	}
-
-	.editor-rich-text__tinymce:focus a[data-mce-selected] {
-		padding: 0 2px;
-		margin: 0 -2px;
-		border-radius: 2px;
+	.editor-rich-text__editable:focus a[data-rich-text-format-boundary] {
 		box-shadow: none;
 		background: rgba(255, 255, 255, 0.3);
 	}

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -48,7 +48,7 @@ ul.wp-block-gallery li {
 		}
 
 		// Make extra space for the inline toolbar.
-		.editor-rich-text__tinymce {
+		figcaption {
 			padding-top: 48px;
 		}
 	}
@@ -78,12 +78,12 @@ ul.wp-block-gallery li {
 		}
 	}
 
-	.editor-rich-text .editor-rich-text__tinymce {
+	.editor-rich-text figcaption {
 		a {
 			color: $white;
 		}
 
-		&:focus a[data-mce-selected] {
+		&:focus a[data-rich-text-format-boundary] {
 			color: rgba(0, 0, 0, 0.2);
 		}
 	}

diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
@@ -35,13 +35,13 @@
 	}
 
 	// Adjust line spacing for larger headings.
-	h1.editor-rich-text__tinymce,
-	h2.editor-rich-text__tinymce,
-	h3.editor-rich-text__tinymce {
+	h1,
+	h2,
+	h3 {
 		line-height: 1.4;
 	}
 
-	h4.editor-rich-text__tinymce {
+	h4 {
 		line-height: 1.5;
 	}
 }
diff --git a/packages/block-library/src/heading/test/__snapshots__/index.js.snap b/packages/block-library/src/heading/test/__snapshots__/index.js.snap
@@ -13,17 +13,17 @@ exports[`core/heading block edit matches snapshot 1`] = `
           aria-autocomplete="list"
           aria-label="Write heading…"
           aria-multiline="true"
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
           contenteditable="true"
           data-is-placeholder-visible="true"
           role="textbox"
         >
           <br
-            data-mce-bogus="1"
+            data-rich-text-padding="true"
           />
         </h2>
         <h2
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
         >
           Write heading…
         </h2>

diff --git a/packages/block-library/src/list/editor.scss b/packages/block-library/src/list/editor.scss
@@ -1,6 +1,5 @@
-.block-library-list .editor-rich-text__tinymce,
-.block-library-list .editor-rich-text__tinymce ul,
-.block-library-list .editor-rich-text__tinymce ol {
+.editor-styles-wrapper .block-library-list ul,
+.editor-styles-wrapper .block-library-list ol {
 	padding-left: 1.3em;
 	margin-left: 1.3em;
 }
diff --git a/packages/block-library/src/list/test/__snapshots__/index.js.snap b/packages/block-library/src/list/test/__snapshots__/index.js.snap
@@ -13,19 +13,19 @@ exports[`core/list block edit matches snapshot 1`] = `
           aria-autocomplete="list"
           aria-label="Write list…"
           aria-multiline="true"
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
           contenteditable="true"
           data-is-placeholder-visible="true"
           role="textbox"
         >
           <li>
             <br
-              data-mce-bogus="1"
+              data-rich-text-padding="true"
             />
           </li>
         </ul>
         <ul
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
         >
           <li>
             Write list…

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -1,7 +1,7 @@
 // Specific to the empty paragraph placeholder:
 // when shown on mobile and in nested contexts, one or more icons show up on the right.
 // This padding makes sure it doesn't overlap text.
-.editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce.wp-block-paragraph {
+.editor-rich-text__editable[data-is-placeholder-visible="true"] + .editor-rich-text__editable.wp-block-paragraph {
 	padding-right: $icon-button-size * 3;
 
 	// In nested contexts only one icon shows up.

diff --git a/packages/block-library/src/paragraph/test/__snapshots__/index.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/index.js.snap
@@ -15,17 +15,17 @@ exports[`core/paragraph block edit matches snapshot 1`] = `
             aria-autocomplete="list"
             aria-label="Empty block; start writing or type forward slash to choose a block"
             aria-multiline="true"
-            class="wp-block-paragraph editor-rich-text__tinymce"
+            class="wp-block-paragraph editor-rich-text__editable"
             contenteditable="true"
             data-is-placeholder-visible="true"
             role="textbox"
           >
             <br
-              data-mce-bogus="1"
+              data-rich-text-padding="true"
             />
           </p>
           <p
-            class="editor-rich-text__tinymce wp-block-paragraph"
+            class="editor-rich-text__editable wp-block-paragraph"
           >
             Start writing or type / to choose a block
           </p>

diff --git a/packages/block-library/src/preformatted/test/__snapshots__/index.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/index.js.snap
@@ -13,17 +13,17 @@ exports[`core/preformatted block edit matches snapshot 1`] = `
           aria-autocomplete="list"
           aria-label="Write preformatted text…"
           aria-multiline="true"
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
           contenteditable="true"
           data-is-placeholder-visible="true"
           role="textbox"
         >
           <br
-            data-mce-bogus="1"
+            data-rich-text-padding="true"
           />
         </pre>
         <pre
-          class="editor-rich-text__tinymce"
+          class="editor-rich-text__editable"
         >
           Write preformatted text…
         </pre>

diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
@@ -1,26 +1,13 @@
 .editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
-		& .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 		& .editor-rich-text p {
 			font-size: 20px;
 		}
 	}
 }
 
 .wp-block-pullquote {
-	cite .editor-rich-text__tinymce[data-is-empty="true"]::before {
-		font-size: 14px;
-		font-family: $default-font;
-	}
-
-	.editor-rich-text__tinymce[data-is-empty="true"]::before {
-		width: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	& blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 	& blockquote > .editor-rich-text p {
 		font-size: 28px;
 		line-height: 1.6;

diff --git a/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap b/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
@@ -17,19 +17,19 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
               aria-autocomplete="list"
               aria-label="Write quote…"
               aria-multiline="true"
-              class="editor-rich-text__tinymce"
+              class="editor-rich-text__editable"
               contenteditable="true"
               data-is-placeholder-visible="true"
               role="textbox"
             >
               <p>
                 <br
-                  data-mce-bogus="1"
+                  data-rich-text-padding="true"
                 />
               </p>
             </div>
             <div
-              class="editor-rich-text__tinymce"
+              class="editor-rich-text__editable"
             >
               <p>
                 Write quote…

diff --git a/packages/block-library/src/quote/test/__snapshots__/index.js.snap b/packages/block-library/src/quote/test/__snapshots__/index.js.snap
@@ -16,19 +16,19 @@ exports[`core/quote block edit matches snapshot 1`] = `
             aria-autocomplete="list"
             aria-label="Write quote…"
             aria-multiline="true"
-            class="editor-rich-text__tinymce"
+            class="editor-rich-text__editable"
             contenteditable="true"
             data-is-placeholder-visible="true"
             role="textbox"
           >
             <p>
               <br
-                data-mce-bogus="1"
+                data-rich-text-padding="true"
               />
             </p>
           </div>
           <div
-            class="editor-rich-text__tinymce"
+            class="editor-rich-text__editable"
           >
             <p>
               Write quote…

diff --git a/packages/block-library/src/text-columns/editor.scss b/packages/block-library/src/text-columns/editor.scss
@@ -1,5 +1,5 @@
 .wp-block-text-columns {
-	.editor-rich-text__tinymce:focus {
+	.editor-rich-text__editable:focus {
 		outline: $border-width solid $light-gray-500;
 	}
 }