diff --git a/lib/client-assets.php b/lib/client-assets.php index d3e84f1b9779ca..ef63cabf755bda 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -87,8 +87,6 @@ function register_tinymce_scripts() { gutenberg_override_script( 'wp-tinymce-root', includes_url( 'js/tinymce/' ) . "tinymce{$mce_suffix}.js", array(), $tinymce_version ); gutenberg_override_script( 'wp-tinymce', includes_url( 'js/tinymce/' ) . "plugins/compat3x/plugin{$suffix}.js", array( 'wp-tinymce-root' ), $tinymce_version ); } - - gutenberg_override_script( 'wp-tinymce-lists', includes_url( 'js/tinymce/' ) . "plugins/lists/plugin{$suffix}.js", array( 'wp-tinymce' ), $tinymce_version ); } } diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index ada718023b33c7..e9865a402a8927 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -132,7 +132,7 @@ ), 'wp-editor' => array( 'lodash', - 'wp-tinymce-lists', + 'wp-tinymce', 'wp-a11y', 'wp-api-fetch', 'wp-blob', diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index 1b2b97f18c350a..21ae5a91b5cac3 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -91,7 +91,6 @@ export class RichText extends Component { this.onSplit = this.props.unstableOnSplit; } - this.onSetup = this.onSetup.bind( this ); this.onFocus = this.onFocus.bind( this ); this.onBlur = this.onBlur.bind( this ); this.onChange = this.onChange.bind( this ); @@ -137,15 +136,6 @@ export class RichText extends Component { this.editableRef = node; } - /** - * Sets a reference to the TinyMCE editor instance. - * - * @param {Editor} editor The editor instance as passed by TinyMCE. - */ - onSetup( editor ) { - this.editor = editor; - } - setFocusedElement() { if ( this.props.setFocusedElement ) { this.props.setFocusedElement( this.props.instanceId ); @@ -837,12 +827,10 @@ export class RichText extends Component {
- { isSelected && this.editor && this.multilineTag === 'li' && ( + { isSelected && this.multilineTag === 'li' && ( this.onChange( this.createRecord() ) } value={ record } onChange={ this.onChange } /> @@ -867,7 +855,6 @@ export class RichText extends Component { ( @@ -82,26 +109,24 @@ export const ListEdit = ( { onTagNameChange && { icon: 'editor-ul', title: __( 'Convert to unordered list' ), - isActive: isActiveListType( editor, 'ul', tagName ), + isActive: isActiveListType( 'ul', tagName ), onClick() { - if ( isListRootSelected( editor ) ) { + onChange( changeListType( value, { type: 'ul' } ) ); + + if ( isListRootSelected() ) { onTagNameChange( 'ul' ); - } else { - editor.execCommand( 'InsertUnorderedList' ); - onSyncDOM(); } }, }, onTagNameChange && { icon: 'editor-ol', title: __( 'Convert to ordered list' ), - isActive: isActiveListType( editor, 'ol', tagName ), + isActive: isActiveListType( 'ol', tagName ), onClick() { - if ( isListRootSelected( editor ) ) { + onChange( changeListType( value, { type: 'ol' } ) ); + + if ( isListRootSelected() ) { onTagNameChange( 'ol' ); - } else { - editor.execCommand( 'InsertOrderedList' ); - onSyncDOM(); } }, }, diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js index a29117bdce24d8..529fa15c1a54ce 100644 --- a/packages/editor/src/components/rich-text/tinymce.js +++ b/packages/editor/src/components/rich-text/tinymce.js @@ -200,16 +200,11 @@ export default class TinyMCE extends Component { lists_indent_on_tab: false, }; - if ( multilineTag === 'li' ) { - settings.plugins.push( 'lists' ); - } - tinymce.init( { ...settings, target: this.editorNode, setup: ( editor ) => { this.editor = editor; - this.props.onSetup( editor ); // TinyMCE resets the element content on initialization, even // when it's already identical to what exists currently. This diff --git a/packages/rich-text/src/change-list-type.js b/packages/rich-text/src/change-list-type.js new file mode 100644 index 00000000000000..fd1dede3c617ce --- /dev/null +++ b/packages/rich-text/src/change-list-type.js @@ -0,0 +1,53 @@ +/** + * Internal dependencies + */ + +import { LINE_SEPARATOR } from './special-characters'; +import { normaliseFormats } from './normalise-formats'; + +function getLineIndex( { start, text }, startIndex = start ) { + let index = startIndex; + + while ( index-- ) { + if ( text[ index ] === LINE_SEPARATOR ) { + return index; + } + } +} + +export function changeListType( value, newFormat ) { + const { text, formats, start, end } = value; + const startLineIndex = getLineIndex( value, start ); + const endLineIndex = getLineIndex( value, end ); + const startLineFormats = formats[ startLineIndex ] || []; + const endLineFormats = formats[ endLineIndex ] || []; + const length = text.length; + const newFormats = formats.slice( 0 ); + const startCount = startLineFormats.length - 1; + const endCount = endLineFormats.length - 1; + + for ( let index = startLineIndex || 0; index < length; index++ ) { + if ( text[ index ] !== LINE_SEPARATOR ) { + continue; + } + + if ( ( newFormats[ index ] || [] ).length <= startCount ) { + break; + } + + if ( ! newFormats[ index ] ) { + continue; + } + + newFormats[ index ] = newFormats[ index ].map( ( format, i ) => { + return i < startCount || i > endCount ? format : newFormat; + } ); + } + + return normaliseFormats( { + text, + formats: newFormats, + start, + end, + } ); +} diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js index 712c1a609b3441..86f7cd1b29ae1d 100644 --- a/packages/rich-text/src/index.js +++ b/packages/rich-text/src/index.js @@ -27,3 +27,4 @@ export { LINE_SEPARATOR } from './special-characters'; export { unregisterFormatType } from './unregister-format-type'; export { indentListItems } from './indent-list-items'; export { outdentListItems } from './outdent-list-items'; +export { changeListType } from './change-list-type';