Skip to content
Branch: master
Find file History
hypest [RNMobile] Native mobile release v1.7.0 (#16156)
* [Mobile] Disable Video block on Android for v1.7.0 release (#16149)

* Disable Video block on Android for v1.7.0 release

* Add import statement to check platform

* [RNMobile] Narrow down blur on unmount to replaceable only (#16151)

* Remove focus from RichText when unmounting

In #15999 this behavior was changed to prevent the keyboard from disappearing
when you press Enter to create a new paragraph.

This worked in that case, but had the side effect of TextInputState still
thinking a dead view had focus, and causing a crash in some scenarios.

* Only blur a RichText in replaceable block

That RichText won't have the chance to blur earlier so, we need to do it
on unmount. But, non replaceable blocks wont need to blur their RichText
on unmount because that will happen normally in componentDidUpdate().

* Rename to an unstable, very goal-named name

* Compute shouldBlurOnUnmount inside RichText

* Fix no-duplicate-imports lint issue

* Fix comma-dangle lint error

* Remove trailing space from comment
Latest commit 714d561 Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
format-toolbar Try implementing a built-in Gutenberg playground (#14497) Mar 25, 2019
test Scripts: Fix default use of lint-js file patterns (#16079) Jun 11, 2019
README.md RichText: stabilize onSplit (#14765) May 18, 2019
aria.js Move the block components to the block editor module (#14112) Mar 8, 2019
editable.js RichText: show boundary only with editable element focus (#15466) May 14, 2019
format-edit.js JSX: Use <> Fragments (#15261) May 7, 2019
index.js Refactor remove line separator to method in the rich-text package. (#… Jun 5, 2019
index.native.js [RNMobile] Native mobile release v1.7.0 (#16156) Jun 14, 2019
input-event.js Block Editor: Rename UnstableRichTextInputEvent to convention (#15198) Apr 26, 2019
input-event.native.js Block Editor: Rename UnstableRichTextInputEvent to convention (#15198) Apr 26, 2019
list-edit.js JSX: Use <> Fragments (#15261) May 7, 2019
patterns.js RichText & Docs: remove or rename undocumented functions and constants ( Apr 10, 2019
remove-browser-shortcuts.js Move the block components to the block editor module (#14112) Mar 8, 2019
shortcut.js Move the block components to the block editor module (#14112) Mar 8, 2019
shortcut.native.js Move the block components to the block editor module (#14112) Mar 8, 2019
style.native.scss Rnmobile/change colors on rich text mobile (#16016) Jun 10, 2019
style.scss Docs: RichText: elaborate on use of pre-wrap (#15170) May 1, 2019
toolbar-button.js Move the block components to the block editor module (#14112) Mar 8, 2019

README.md

RichText

Render a rich contenteditable input, providing users with the option to format the content.

Properties

value: String

Required. HTML string to make editable. The HTML should be valid, and valid inside the tagName, if provided.

onChange( value: String ): Function

Required. Called when the value changes.

tagName: String

Default: div. The tag name of the editable element. Elements that display inline are not supported.

placeholder: String

Optional. Placeholder text to show when the field is empty, similar to the input and textarea attribute of the same name.

multiline: Boolean | String

Optional. By default, a line break will be inserted on Enter. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on Enter.

onSplit( value: String ): Function

Optional. Called when the content can be split, where value is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide onReplace in order for this to take any effect.

onReplace( blocks: Array ): Function

Optional. Called when the RichText instance can be replaced with the given blocks.

onMerge( forward: Boolean ): Function

Optional. Called when blocks can be merged. forward is true when merging with the next block, false when merging with the previous block.

onRemove( forward: Boolean ): Function

Optional. Called when the block can be removed. forward is true when the selection is expected to move to the next block, false to the previous block.

formattingControls: Array

Optional. By default, all formatting controls are present. This setting can be used to fine-tune formatting controls. Possible items: [ 'bold', 'italic', 'strikethrough', 'link' ].

isSelected: Boolean

Optional. Whether to show the input is selected or not in order to show the formatting controls. By default it renders the controls when the block is selected.

keepPlaceholderOnFocus: Boolean

Optional. By default, the placeholder will hide as soon as the editable field receives focus. With this setting it can be be kept while the field is focussed and empty.

autocompleters: Array<Completer>

Optional. A list of autocompleters to use instead of the default.

RichText.Content

RichText.Content should be used in the save function of your block to correctly save rich text content.

Example

{% codetabs %} {% ES5 %}

wp.blocks.registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: 'h2',
		},
	},

	edit: function( props ) {
		return wp.element.createElement( wp.editor.RichText, {
			tagName: 'h2',
			className: props.className,
			value: props.attributes.content,
			onChange: function( content ) {
				props.setAttributes( { content: content } );
			}
		} );
	},

	save: function( props ) {
		return wp.element.createElement( wp.editor.RichText.Content, {
			tagName: 'h2', value: props.attributes.content
		} );
	}
} );

{% ESNext %}

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: 'h2',
		},
	},

	edit( { className, attributes, setAttributes } ) {
		return (
			<RichText
				tagName="h2"
				className={ className }
				value={ attributes.content }
				onChange={ ( content ) => setAttributes( { content } ) }
			/>
		);
	},

	save( { attributes } ) {
		return <RichText.Content tagName="h2" value={ attributes.content } />;
	}
} );

{% end %}

RichTextToolbarButton

Slot to extend the format toolbar. Use it in the edit function of a registerFormatType call to surface the format to the UI.

Example

{% codetabs %} {% ES5 %}

wp.richText.registerFormatType( /* ... */, {
	/* ... */
	edit: function( props ) {
		return wp.element.createElement(
			wp.editor.RichTextToolbarButton, {
				icon: 'editor-code',
				title: 'My formatting button',
				onClick: function() { /* ... */ }
				isActive: props.isActive,
			} );
	},
	/* ... */
} );

{% ESNext %}

import { registerFormatType } from 'wp-rich-text';
import { richTextToolbarButton } from 'wp-editor';

registerFormatType( /* ... */, {
	/* ... */
	edit( { isActive } ) {
		return (
			<RichTextToolbarButton
				icon={ 'editor-code' }
				title={ 'My formatting button' }
				onClick={ /* ... */ }
				isActive={ isActive }
				/>
		);
	},
	/* ... */
} );

{% end %}

You can’t perform that action at this time.