-
- { items.map( ( item ) => {
- const itemIconStyle = item.icon ? {
- backgroundColor: item.icon.background,
- color: item.icon.foreground,
- } : {};
- const itemIconStackStyle = item.icon && item.icon.shadowColor ? {
- backgroundColor: item.icon.shadowColor,
- } : {};
- return (
-
- - - - ); - } ) } -
-
+ { items && items.map( ( item ) =>
+
+
+ { controls.map( ( format ) =>
+
+
+ );
+};
+
+export default FormatToolbar;
diff --git a/packages/editor/src/components/rich-text/format-toolbar/style.scss b/packages/editor/src/components/rich-text/format-toolbar/style.scss
index 5ae6291e3262f6..2b6fa1e5c07b5d 100644
--- a/packages/editor/src/components/rich-text/format-toolbar/style.scss
+++ b/packages/editor/src/components/rich-text/format-toolbar/style.scss
@@ -7,18 +7,3 @@
position: absolute;
transform: translateX(-50%);
}
-
-.editor-format-toolbar__link-container-content {
- display: flex;
-}
-
-.editor-format-toolbar__link-container-value {
- margin: $grid-size - $border-width;
- flex-grow: 1;
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- min-width: 150px;
- max-width: 500px;
-}
diff --git a/packages/editor/src/components/rich-text/format-toolbar/toolbar-container.js b/packages/editor/src/components/rich-text/format-toolbar/toolbar-container.js
deleted file mode 100644
index effed4d9271811..00000000000000
--- a/packages/editor/src/components/rich-text/format-toolbar/toolbar-container.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const ToolbarContainer = ( props ) => (
-
- { props.children }
-
-);
-export default ToolbarContainer;
diff --git a/packages/editor/src/components/rich-text/formatting-controls.js b/packages/editor/src/components/rich-text/formatting-controls.js
deleted file mode 100644
index 2699a17fbbe7ca..00000000000000
--- a/packages/editor/src/components/rich-text/formatting-controls.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-
-export const FORMATTING_CONTROLS = [
- {
- icon: 'editor-bold',
- title: __( 'Bold' ),
- shortcut: displayShortcut.primary( 'b' ),
- format: 'bold',
- selector: 'strong',
- },
- {
- icon: 'editor-italic',
- title: __( 'Italic' ),
- shortcut: displayShortcut.primary( 'i' ),
- format: 'italic',
- selector: 'em',
- },
- {
- icon: 'admin-links',
- title: __( 'Link' ),
- shortcut: displayShortcut.primary( 'k' ),
- activeShortcut: displayShortcut.access( 's' ),
- format: 'link',
- selector: 'a',
- },
- {
- icon: 'editor-strikethrough',
- title: __( 'Strikethrough' ),
- shortcut: displayShortcut.access( 'd' ),
- format: 'strikethrough',
- selector: 'del',
- },
-];
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
index 582c75c0a1e415..20cf3555bb8bda 100644
--- a/packages/editor/src/components/rich-text/index.js
+++ b/packages/editor/src/components/rich-text/index.js
@@ -23,7 +23,6 @@ import {
} from '@wordpress/dom';
import { createBlobURL } from '@wordpress/blob';
import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, rawShortcut } from '@wordpress/keycodes';
-import { Slot } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { rawHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -47,13 +46,12 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import Autocomplete from '../autocomplete';
import BlockFormatControls from '../block-format-controls';
-import { FORMATTING_CONTROLS } from './formatting-controls';
+import FormatEdit from './format-edit';
import FormatToolbar from './format-toolbar';
import TinyMCE from './tinymce';
import { pickAriaProps } from './aria';
import { getPatterns } from './patterns';
import { withBlockEditContext } from '../block-edit/context';
-import TokenUI from './tokens/ui';
/**
* Browser dependencies
@@ -864,15 +862,6 @@ export class RichText extends Component {
const classes = classnames( wrapperClassName, 'editor-rich-text' );
const record = this.getRecord();
- const formatToolbar = this.editor && (
-
{ isSelected && ! inlineToolbar && (
- { formatToolbar }
+
) }
{ isSelected && inlineToolbar && (
{ placeholder } : placeholder }
}
- { isSelected &&
@@ -941,7 +923,7 @@ export class RichText extends Component {
}
RichText.defaultProps = {
- formattingControls: FORMATTING_CONTROLS.map( ( { format } ) => format ),
+ formattingControls: [ 'bold', 'italic', 'link', 'strikethrough' ],
format: 'string',
value: '',
};
diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index d6462e4b39a436..48f83b3dec3b15 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -20,11 +20,34 @@ import {
split,
toHTMLString,
} from '@wordpress/rich-text';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { FORMATTING_CONTROLS } from './formatting-controls';
+
+const FORMATTING_CONTROLS = [
+ {
+ icon: 'editor-bold',
+ title: __( 'Bold' ),
+ format: 'bold',
+ },
+ {
+ icon: 'editor-italic',
+ title: __( 'Italic' ),
+ format: 'italic',
+ },
+ {
+ icon: 'admin-links',
+ title: __( 'Link' ),
+ format: 'link',
+ },
+ {
+ icon: 'editor-strikethrough',
+ title: __( 'Strikethrough' ),
+ format: 'strikethrough',
+ },
+];
const isRichTextValueEmpty = ( value ) => {
return ! value || ! value.length;
diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js
index 217f40eaa024bc..c1d752a1d3c7ad 100644
--- a/packages/editor/src/components/rich-text/tinymce.js
+++ b/packages/editor/src/components/rich-text/tinymce.js
@@ -168,6 +168,16 @@ export default class TinyMCE extends Component {
setup: ( editor ) => {
this.editor = editor;
this.props.onSetup( editor );
+
+ editor.on( 'init', () => {
+ // See https://github.com/tinymce/tinymce/blob/master/src/core/main/ts/keyboard/FormatShortcuts.ts
+ [ 'b', 'i', 'u' ].forEach( ( character ) => {
+ editor.shortcuts.remove( `meta+${ character }` );
+ } );
+ [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ].forEach( ( number ) => {
+ editor.shortcuts.remove( `access+${ number }` );
+ } );
+ } );
},
} );
}
diff --git a/packages/editor/src/components/rich-text/tokens/index.js b/packages/editor/src/components/rich-text/tokens/index.js
deleted file mode 100644
index d74c50b425fc7f..00000000000000
--- a/packages/editor/src/components/rich-text/tokens/index.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import { has, isFunction } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { isValidIcon, normalizeIconObject } from '@wordpress/blocks';
-import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Browser dependencies
- */
-const { error } = window.console;
-
-/**
- * Validates the token settings object.
- *
- * @param {string} name Token name.
- * @param {Object} settings Token settings.
- * @param {Object} state core/editor state.
- *
- * @return {Object} Validated token settings.
- */
-export function validateTokenSettings( name, settings, state ) {
- if ( typeof name !== 'string' ) {
- error(
- 'Token names must be strings.'
- );
- return;
- }
-
- if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
- error(
- 'Token names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-token'
- );
- return;
- }
-
- if ( has( state, [ name ] ) ) {
- error(
- 'Token "' + name + '" is already registered.'
- );
- return;
- }
-
- settings = applyFilters( 'editor.registerToken', settings, name );
-
- if ( ! settings || ! isFunction( settings.save ) ) {
- error(
- 'The "save" property must be specified and must be a valid function.'
- );
- return;
- }
-
- if ( has( settings, [ 'edit' ] ) && ! isFunction( settings.edit ) ) {
- error(
- 'The "edit" property must be a valid function.'
- );
- return;
- }
-
- if ( has( settings, [ 'keywords' ] ) && settings.keywords.length > 3 ) {
- error(
- 'The token "' + name + '" can have a maximum of 3 keywords.'
- );
- return;
- }
-
- if ( ! has( settings, [ 'title' ] ) || settings.title === '' ) {
- error(
- 'The token "' + name + '" must have a title.'
- );
- return;
- }
-
- if ( typeof settings.title !== 'string' ) {
- error(
- 'Token titles must be strings.'
- );
- return;
- }
-
- settings.icon = normalizeIconObject( settings.icon );
-
- if ( ! isValidIcon( settings.icon.src ) ) {
- error(
- 'The icon passed is invalid. ' +
- 'The icon should be a string, an element, a function, or an object following the specifications documented in https://wordpress.org/gutenberg/handbook/block-api/#icon-optional'
- );
- return;
- }
-
- return settings;
-}
diff --git a/packages/editor/src/components/rich-text/tokens/ui/index.js b/packages/editor/src/components/rich-text/tokens/ui/index.js
deleted file mode 100644
index 9671551e2541b7..00000000000000
--- a/packages/editor/src/components/rich-text/tokens/ui/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component, Fragment, renderToString } from '@wordpress/element';
-import { getRectangleFromRange } from '@wordpress/dom';
-import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { InserterResultsPortal } from '../../../inserter';
-
-class TokenUI extends Component {
- constructor() {
- super( ...arguments );
-
- this.onHover = this.onHover.bind( this );
- this.onSelect = this.onSelect.bind( this );
- this.onSave = this.onSave.bind( this );
-
- this.state = {
- selected: null,
- hovered: null,
- };
- }
-
- getInsertPosition() {
- const { containerRef, editor } = this.props;
-
- // The container is relatively positioned.
- const containerPosition = containerRef.current.getBoundingClientRect();
- const rect = getRectangleFromRange( editor.selection.getRng() );
-
- return {
- top: rect.top - containerPosition.top,
- left: rect.right - containerPosition.left,
- height: rect.height,
- };
- }
-
- onSave( { save } ) {
- return ( attributes ) => {
- const { editor } = this.props;
-
- if ( attributes ) {
- editor.insertContent( renderToString( save( attributes ) ) );
- }
-
- this.setState( { selected: null } );
- };
- }
-
- onHover( settings ) {
- this.setState( { hovered: !! settings } );
- }
-
- onSelect( settings ) {
- this.setState( { selected: settings } );
- }
-
- render() {
- const { hovered, selected } = this.state;
-
- return (
-
-
- );
- }
-}
-
-export default withSelect( ( select ) => {
- const { getTokenSettings } = select( 'core/editor' );
-
- return {
- items: Object.values( getTokenSettings() ),
- };
-} )( TokenUI );
diff --git a/packages/editor/src/components/rich-text/tokens/ui/style.scss b/packages/editor/src/components/rich-text/tokens/ui/style.scss
deleted file mode 100644
index cbc38140121aaf..00000000000000
--- a/packages/editor/src/components/rich-text/tokens/ui/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.blocks-inline-insertion-point {
- display: block;
- z-index: 1;
- width: 4px;
- margin-left: -2px;
- background: theme(primary);
-}
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 6a21f91a2f98e2..349cecd08dcfd8 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -752,21 +752,6 @@ export function updateEditorSettings( settings ) {
};
}
-export function registerToken( name, settings ) {
- return {
- type: 'REGISTER_TOKEN',
- name,
- settings,
- };
-}
-
-export function unregisterToken( name ) {
- return {
- type: 'UNREGISTER_TOKEN',
- name,
- };
-}
-
/**
* Returns an action object used in signalling that the user has enabled the publish sidebar.
*
diff --git a/packages/editor/src/store/index.js b/packages/editor/src/store/index.js
index 542ab0a908b56d..fb8f9fe11d5cc6 100644
--- a/packages/editor/src/store/index.js
+++ b/packages/editor/src/store/index.js
@@ -1,8 +1,3 @@
-/**
- * External Dependencies
- */
-import { forOwn } from 'lodash';
-
/**
* WordPress Dependencies
*/
@@ -15,8 +10,6 @@ import reducer from './reducer';
import applyMiddlewares from './middlewares';
import * as selectors from './selectors';
import * as actions from './actions';
-import * as tokens from '../components/rich-text/core-tokens';
-import { validateTokenSettings } from '../components/rich-text/tokens';
/**
* Module Constants
@@ -31,12 +24,4 @@ const store = registerStore( MODULE_KEY, {
} );
applyMiddlewares( store );
-forOwn( tokens, ( { name, settings } ) => {
- settings = validateTokenSettings( name, settings, store.getState() );
-
- if ( settings ) {
- store.dispatch( actions.registerToken( name, settings ) );
- }
-} );
-
export default store;
diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
index df9f7bda241944..fc6168b73e9906 100644
--- a/packages/editor/src/store/reducer.js
+++ b/packages/editor/src/store/reducer.js
@@ -1115,28 +1115,6 @@ export function autosave( state = null, action ) {
return state;
}
-/**
- * Reducer managing the block types
- *
- * @param {Object} state Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function tokens( state = {}, action ) {
- switch ( action.type ) {
- case 'REGISTER_TOKEN':
- return {
- ...state,
- [ action.name ]: action.settings,
- };
- case 'UNREGISTER_TOKEN':
- return omit( state, action.name );
- }
-
- return state;
-}
-
export default optimist( combineReducers( {
editor,
currentPost,
@@ -1153,6 +1131,5 @@ export default optimist( combineReducers( {
template,
autosave,
settings,
- tokens,
postSavingLock,
} ) );
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index b1afcd28b8bee8..972322a31a8b6c 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -21,6 +21,7 @@
@import "./components/inner-blocks/style.scss";
@import "./components/inserter-with-shortcuts/style.scss";
@import "./components/inserter/style.scss";
+@import "./components/inserter-list-item/style.scss";
@import "./components/media-placeholder/style.scss";
@import "./components/page-attributes/style.scss";
@import "./components/panel-color-settings/style.scss";
@@ -38,10 +39,8 @@
@import "./components/post-visibility/style.scss";
@import "./components/post-title/style.scss";
@import "./components/post-trash/style.scss";
-@import "./components/rich-text/core-tokens/image/style.scss";
@import "./components/rich-text/format-toolbar/style.scss";
@import "./components/rich-text/style.scss";
-@import "./components/rich-text/tokens/ui/style.scss";
@import "./components/skip-to-selected-block/style.scss";
@import "./components/table-of-contents/style.scss";
@import "./components/template-validation-notice/style.scss";
diff --git a/packages/editor/src/utils/test/url.js b/packages/editor/src/utils/test/url.js
deleted file mode 100644
index 66ce212bf564dc..00000000000000
--- a/packages/editor/src/utils/test/url.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { filterURLForDisplay } from '../url';
-
-describe( 'filterURLForDisplay', () => {
- it( 'should remove protocol', () => {
- let url = filterURLForDisplay( 'http://wordpress.org' );
- expect( url ).toBe( 'wordpress.org' );
- url = filterURLForDisplay( 'https://wordpress.org' );
- expect( url ).toBe( 'wordpress.org' );
- } );
- it( 'should remove www subdomain', () => {
- const url = filterURLForDisplay( 'http://www.wordpress.org' );
- expect( url ).toBe( 'wordpress.org' );
- } );
- it( 'should remove single trailing slash', () => {
- const url = filterURLForDisplay( 'http://www.wordpress.org/' );
- expect( url ).toBe( 'wordpress.org' );
- } );
- it( 'should preserve slashes where the url has multiple in the path', () => {
- const url = filterURLForDisplay( 'http://www.wordpress.org/something/' );
- expect( url ).toBe( 'wordpress.org/something/' );
- } );
- it( 'should preserve slash where the url has path after the initial slash', () => {
- const url = filterURLForDisplay( 'http://www.wordpress.org/something' );
- expect( url ).toBe( 'wordpress.org/something' );
- } );
-} );
diff --git a/packages/editor/src/utils/url.js b/packages/editor/src/utils/url.js
index 54d3ce6a4bbd0b..566775289f9777 100644
--- a/packages/editor/src/utils/url.js
+++ b/packages/editor/src/utils/url.js
@@ -16,22 +16,3 @@ import { addQueryArgs } from '@wordpress/url';
export function getWPAdminURL( page, query ) {
return addQueryArgs( page, query );
}
-
-/**
- * Returns a URL for display.
- *
- * @param {string} url Original URL.
- *
- * @return {string} Displayed URL.
- */
-export function filterURLForDisplay( url ) {
- // remove protocol and www prefixes
- const filteredURL = url.replace( new RegExp( '^https?://(www\.)?' ), '' );
-
- // ends with / and only has that single slash, strip it
- if ( filteredURL.match( '^[^/]+/$' ) ) {
- return filteredURL.replace( '/', '' );
- }
-
- return filteredURL;
-}
diff --git a/packages/format-library/.npmrc b/packages/format-library/.npmrc
new file mode 100644
index 00000000000000..43c97e719a5a82
--- /dev/null
+++ b/packages/format-library/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/format-library/README.md b/packages/format-library/README.md
new file mode 100644
index 00000000000000..69d6f157279d07
--- /dev/null
+++ b/packages/format-library/README.md
@@ -0,0 +1,15 @@
+# Format library
+
+Format library for the WordPress editor.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/format-library --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+
+
+ );
+ },
+};
diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.js
new file mode 100644
index 00000000000000..9ac6d1fc3bfaa7
--- /dev/null
+++ b/packages/format-library/src/code/index.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { toggleFormat } from '@wordpress/rich-text';
+
+const name = 'core/code';
+
+export const code = {
+ name,
+ title: __( 'Code' ),
+ match: {
+ tagName: 'code',
+ },
+ edit( { value, onChange, Shortcut } ) {
+ const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
+
+ return (
+
+
+ );
+ },
+};
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
new file mode 100644
index 00000000000000..aad07328b5c2cf
--- /dev/null
+++ b/packages/format-library/src/image/index.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Fragment, Component } from '@wordpress/element';
+import { insertObject } from '@wordpress/rich-text';
+import { MediaUpload } from '@wordpress/editor';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+const name = 'core/image';
+
+export const image = {
+ name,
+ title: __( 'Image' ),
+ keywords: [ __( 'photo' ), __( 'media' ) ],
+ object: true,
+ match: {
+ tagName: 'img',
+ },
+ attributes: {
+ className: 'class',
+ style: 'style',
+ url: 'src',
+ alt: 'alt',
+ },
+ edit: class ImageEdit extends Component {
+ constructor() {
+ super( ...arguments );
+ this.openModal = this.openModal.bind( this );
+ this.closeModal = this.closeModal.bind( this );
+ this.state = {
+ modal: false,
+ };
+ }
+
+ openModal() {
+ this.setState( { modal: true } );
+ }
+
+ closeModal() {
+ this.setState( { modal: false } );
+ }
+
+ render() {
+ const { value, onChange, InserterListItem } = this.props;
+
+ return (
+
+ {
+ this.closeModal();
+ onChange( insertObject( value, {
+ type: name,
+ attributes: {
+ className: `wp-image-${ id }`,
+ style: `width: ${ Math.min( width, 150 ) }px;`,
+ url,
+ alt,
+ },
+ } ) );
+ } }
+ onClose={ this.closeModal }
+ render={ ( { open } ) => {
+ open();
+ return null;
+ } }
+ /> }
+
+ );
+ }
+ },
+};
diff --git a/packages/format-library/src/index.js b/packages/format-library/src/index.js
new file mode 100644
index 00000000000000..36012be4f1b5b1
--- /dev/null
+++ b/packages/format-library/src/index.js
@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { bold } from './bold';
+import { code } from './code';
+import { image } from './image';
+import { italic } from './italic';
+import { link } from './link';
+import { strikethrough } from './strikethrough';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ registerFormatType,
+} from '@wordpress/rich-text';
+
+[
+ bold,
+ code,
+ image,
+ italic,
+ link,
+ strikethrough,
+].forEach( registerFormatType );
diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js
new file mode 100644
index 00000000000000..6a3728a70940e0
--- /dev/null
+++ b/packages/format-library/src/italic/index.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { toggleFormat } from '@wordpress/rich-text';
+
+const name = 'core/italic';
+
+export const italic = {
+ name,
+ title: __( 'Italic' ),
+ match: {
+ tagName: 'em',
+ },
+ edit( { isActive, value, onChange, ToolbarButton, Shortcut } ) {
+ const onToggle = () => onChange( toggleFormat( value, { type: name } ) );
+
+ return (
+
+
+ );
+ },
+};
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
new file mode 100644
index 00000000000000..a794ef26e55e30
--- /dev/null
+++ b/packages/format-library/src/link/index.js
@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+import { withSpokenMessages } from '@wordpress/components';
+import {
+ getTextContent,
+ applyFormat,
+ removeFormat,
+ slice,
+} from '@wordpress/rich-text';
+import { isURL } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import InlineLinkUI from './inline';
+
+const name = 'core/link';
+
+export const link = {
+ name,
+ title: __( 'Link' ),
+ match: {
+ tagName: 'a',
+ },
+ attributes: {
+ url: 'href',
+ target: 'target',
+ },
+ edit: withSpokenMessages( class LinkEdit extends Component {
+ constructor() {
+ super( ...arguments );
+
+ this.addLink = this.addLink.bind( this );
+ this.stopAddingLink = this.stopAddingLink.bind( this );
+ this.onRemoveFormat = this.onRemoveFormat.bind( this );
+ this.state = {
+ addingLink: false,
+ };
+ }
+
+ addLink() {
+ const { value, onChange } = this.props;
+ const text = getTextContent( slice( value ) );
+
+ if ( text && isURL( text ) ) {
+ onChange( applyFormat( value, { type: name, attributes: { url: text } } ) );
+ } else {
+ this.setState( { addingLink: true } );
+ }
+ }
+
+ stopAddingLink() {
+ this.setState( { addingLink: false } );
+ }
+
+ onRemoveFormat() {
+ const { value, onChange, speak } = this.props;
+
+ onChange( removeFormat( value, name ) );
+ speak( __( 'Link removed.' ), 'assertive' );
+ }
+
+ render() {
+ const { isActive, activeAttributes, value, onChange, ToolbarButton, Shortcut } = this.props;
+
+ return (
+
+
+ );
+ }
+ } ),
+};
diff --git a/packages/editor/src/components/rich-text/format-toolbar/link-container.js b/packages/format-library/src/link/inline.js
similarity index 61%
rename from packages/editor/src/components/rich-text/format-toolbar/link-container.js
rename to packages/format-library/src/link/inline.js
index fa7eabca07d73b..c72ef6158a2be3 100644
--- a/packages/editor/src/components/rich-text/format-toolbar/link-container.js
+++ b/packages/format-library/src/link/inline.js
@@ -5,39 +5,32 @@ import { __ } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import {
ExternalLink,
- Fill,
IconButton,
ToggleControl,
withSpokenMessages,
} from '@wordpress/components';
import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { prependHTTP, safeDecodeURI } from '@wordpress/url';
+import { prependHTTP, safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import {
create,
insert,
isCollapsed,
applyFormat,
} from '@wordpress/rich-text';
+import { URLInput, URLPopover } from '@wordpress/editor';
/**
* Internal dependencies
*/
import PositionedAtSelection from './positioned-at-selection';
-import URLInput from '../../url-input';
-import { filterURLForDisplay } from '../../../utils/url';
-import URLPopover from '../../url-popover';
const stopKeyPropagation = ( event ) => event.stopPropagation();
-function getLinkAttributesFromFormat( { attributes: { href = '', target } = {} } = {} ) {
- return { href, target };
-}
-
-function createLinkFormat( { href, opensInNewWindow } ) {
+function createLinkFormat( { url, opensInNewWindow } ) {
const format = {
- type: 'a',
+ type: 'core/link',
attributes: {
- href,
+ url,
},
};
@@ -53,7 +46,7 @@ function isShowingInput( props, state ) {
return props.addingLink || state.editLink;
}
-const LinkEditor = ( { inputValue, onChangeInputValue, onKeyDown, submitLink, autocompleteRef } ) => (
+const LinkEditor = ( { value, onChangeInputValue, onKeyDown, submitLink, autocompleteRef } ) => (
// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
- { formatToolbar }
+
) }
- { isSelected &&
- 