Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix committed Jul 2, 2019
1 parent 7033c4c commit 53f099d
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 60 deletions.
55 changes: 28 additions & 27 deletions packages/block-editor/src/components/block-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
/**
* WordPress dependencies
*/
import { Component, RawHTML } from '@wordpress/element';
import { Component } from '@wordpress/element';
import {
withSelect,
withDispatch,
Expand Down Expand Up @@ -201,8 +201,8 @@ class BlockList extends Component {
const noteAnchors = document.querySelectorAll( '.note-anchor' );
const notes = Array.from( noteAnchors ).map( ( element ) => {
return {
note: element.getAttribute( 'data-note' ),
id: element.getAttribute( 'href' ).slice( 1 ),
note: element.getAttribute( 'data-note' ) || '',
id: ( element.getAttribute( 'href' ) || '' ).slice( 1 ),
};
} );

Expand Down Expand Up @@ -249,35 +249,36 @@ class BlockList extends Component {
renderAppender={ renderAppender }
/>

<footer>
<h2><small>Notes</small></h2>
<style
dangerouslySetInnerHTML={ {
__html: `
body {
counter-reset: footnotes;
}
{ /* This needs to become a slot/fill */ }
{ this.state.notes.length > 0 && ! rootClientId &&
<footer>
<h2><small>Notes</small></h2>
<style
dangerouslySetInnerHTML={ {
__html: `
body {
counter-reset: footnotes;
}
.editor-styles-wrapper a.note-anchor {
counter-increment: footnotes;
}
.editor-styles-wrapper a.note-anchor {
counter-increment: footnotes;
}
.note-anchor:after {
margin-left: 2px;
content: counter( footnotes );
vertical-align: super;
font-size: smaller;
}
`
} }
/>
{ this.state.notes.length > 0 &&
.note-anchor:after {
margin-left: 2px;
content: '[' counter( footnotes ) ']';
vertical-align: super;
font-size: smaller;
}
`,
} }
/>
<ol>
{ this.state.notes.map( ( { note, id } ) =>
<li id={ id } key={ id }>
<span
dangerouslySetInnerHTML={ {
__html: note
__html: note,
} }
/>
{ ' ' }
Expand All @@ -290,8 +291,8 @@ body {
</li>
) }
</ol>
}
</footer>
</footer>
}
</div>
);
}
Expand Down
21 changes: 8 additions & 13 deletions packages/format-library/src/note/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,8 @@
*/
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, isEmail } from '@wordpress/url';
import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/block-editor';
import { removeFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -31,7 +24,7 @@ export const note = {
href: 'href',
id: 'id',
},
edit: withSpokenMessages( class NoteEdit extends Component {
edit: class NoteEdit extends Component {
constructor() {
super( ...arguments );

Expand All @@ -53,13 +46,13 @@ export const note = {
}

remove() {
const { value, onChange, speak } = this.props;
const { value, onChange } = this.props;

onChange( removeFormat( value, name ) );
}

render() {
const { isActive, activeAttributes, value, onChange } = this.props;
const { isActive, activeAttributes, isObjectActive, activeObjectAttributes, value, onChange } = this.props;

return (
<Fragment>
Expand All @@ -74,11 +67,13 @@ export const note = {
onClose={ this.close }
isActive={ isActive }
activeAttributes={ activeAttributes }
isObjectActive={ isObjectActive }
activeObjectAttributes={ activeObjectAttributes }
value={ value }
onChange={ onChange }
/>
</Fragment>
);
}
} ),
},
};
18 changes: 9 additions & 9 deletions packages/format-library/src/note/inline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,14 @@ import uuid from 'uuid/v4';
*/
import { __ } from '@wordpress/i18n';
import { Component, useMemo } from '@wordpress/element';
import { IconButton, Popover } from '@wordpress/components';
import { Popover } from '@wordpress/components';
import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
import { getRectangleFromRange } from '@wordpress/dom';
import {
create,
insert,
isCollapsed,
applyFormat,
removeFormat,
insertObject,
} from '@wordpress/rich-text';

const stopPropagation = ( event ) => event.stopPropagation();
Expand Down Expand Up @@ -76,7 +75,7 @@ export default class InlineUI extends Component {
this.setState( { inputValue: event.target.value } );
}

onSubmit( event ) {
onSubmit() {
const { isActive, value, onChange } = this.props;
const { inputValue } = this.state;
const type = 'core/note';
Expand All @@ -94,11 +93,11 @@ export default class InlineUI extends Component {

let newValue;

// To do: handle object.
if ( ! inputValue ) {
newValue = removeFormat( value, type );
} else if ( isCollapsed( value ) && ! isActive ) {
const toInsert = applyFormat( create( { text: '*' } ), format, 0, 1 );
newValue = insert( value, toInsert );
newValue = insertObject( value, format );
} else {
newValue = applyFormat( value, format );
}
Expand All @@ -113,12 +112,13 @@ export default class InlineUI extends Component {
}

render() {
const { isActive, activeAttributes: { note = '' }, isOpen, value } = this.props;
const { isActive, activeAttributes, isObjectActive, activeObjectAttributes, isOpen, value } = this.props;

if ( ! isActive && ! isOpen ) {
if ( ! isActive && ! isObjectActive && ! isOpen ) {
return null;
}

const note = activeAttributes.note || activeObjectAttributes.note || '';
const { inputValue } = this.state;
const val = inputValue === undefined ? note : inputValue;

Expand All @@ -127,7 +127,7 @@ export default class InlineUI extends Component {
return (
<PopoverAtLink
value={ value }
isActive={ isActive }
isActive={ isActive || isObjectActive }
isOpen={ true }
focusOnMount={ isOpen ? 'firstElement' : false }
className="note-popover"
Expand Down
2 changes: 1 addition & 1 deletion packages/format-library/src/note/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
textarea {
display: block;
width: 100%;
border-radius: 0px;
border-radius: 0;
}
}
5 changes: 4 additions & 1 deletion packages/rich-text/src/component/format-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ const FormatEdit = ( { formatTypes, onChange, value } ) => {
const activeFormat = getActiveFormat( value, name );
const isActive = activeFormat !== undefined;
const activeObject = getActiveObject( value );
const isObjectActive = activeObject !== undefined;
const isObjectActive = (
activeObject !== undefined &&
activeObject.type === name
);

return (
<Edit
Expand Down
9 changes: 6 additions & 3 deletions packages/rich-text/src/component/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ class RichText extends Component {
this.setRef = this.setRef.bind( this );
this.valueToEditableHTML = this.valueToEditableHTML.bind( this );
this.handleHorizontalNavigation = this.handleHorizontalNavigation.bind( this );
this.onPointerDown = this.onPointerDown.bind( this );
this.onClick = this.onClick.bind( this );
this.formatToValue = this.formatToValue.bind( this );
this.onSplit = this.onSplit.bind( this );

Expand Down Expand Up @@ -876,6 +876,10 @@ class RichText extends Component {

selection.removeAllRanges();
selection.addRange( range );

target.setAttribute( 'data-rich-text-format-boundary', 'set' );

event.preventDefault();
}

componentDidUpdate( prevProps ) {
Expand Down Expand Up @@ -1055,8 +1059,7 @@ class RichText extends Component {
onKeyDown={ this.onKeyDown }
onFocus={ this.onFocus }
onBlur={ this.onBlur }
onMouseDown={ this.onPointerDown }
onTouchStart={ this.onPointerDown }
onClick={ this.onClick }
setRef={ this.setRef }
/>
{ isPlaceholderVisible &&
Expand Down
12 changes: 11 additions & 1 deletion packages/rich-text/src/create.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,19 @@ function accumulateSelection( accumulator, node, range, value ) {
return;
}

const currentLength = accumulator.text.length;

if (
node.nodeType === ELEMENT_NODE &&
node.getAttribute( 'data-rich-text-format-boundary' ) === 'set'
) {
accumulator.start = currentLength;
accumulator.end = currentLength + value.text.length;
return;
}

const { parentNode } = node;
const { startContainer, startOffset, endContainer, endOffset } = range;
const currentLength = accumulator.text.length;

// Selection can be extracted from value.
if ( value.start !== undefined ) {
Expand Down
4 changes: 2 additions & 2 deletions packages/rich-text/src/to-html-string.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function remove( object ) {
return object;
}

function createElementHTML( { type, attributes, object, children } ) {
function createElementHTML( { type, attributes, selfClosing, children } ) {
let attributeString = '';

for ( const key in attributes ) {
Expand All @@ -97,7 +97,7 @@ function createElementHTML( { type, attributes, object, children } ) {
attributeString += ` ${ key }="${ escapeAttribute( attributes[ key ] ) }"`;
}

if ( object ) {
if ( selfClosing ) {
return `<${ type }${ attributeString }>`;
}

Expand Down
17 changes: 14 additions & 3 deletions packages/rich-text/src/to-tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
* @return {Object} Information to be used for
* element creation.
*/
function fromFormat( { type, attributes, unregisteredAttributes, object, boundaryClass } ) {
function fromFormat( { type, attributes, unregisteredAttributes, object, boundaryClass, isEditableTree } ) {
const formatType = getFormatType( type );

let elementAttributes = {};
Expand All @@ -39,12 +39,18 @@ function fromFormat( { type, attributes, unregisteredAttributes, object, boundar
elementAttributes = { ...attributes, ...elementAttributes };
}

return { type, attributes: elementAttributes, object };
return { type, attributes: elementAttributes, selfClosing: object };
}

elementAttributes = { ...unregisteredAttributes, ...elementAttributes };

for ( const name in attributes ) {
const value = attributes[ name ];

if ( value === undefined ) {
continue;
}

const key = formatType.attributes ? formatType.attributes[ name ] : false;

if ( key ) {
Expand All @@ -54,6 +60,10 @@ function fromFormat( { type, attributes, unregisteredAttributes, object, boundar
}
}

if ( isEditableTree && object && ! formatType.object ) {
elementAttributes.contenteditable = 'false';
}

if ( formatType.className ) {
if ( elementAttributes.class ) {
elementAttributes.class = `${ formatType.className } ${ elementAttributes.class }`;
Expand All @@ -64,7 +74,7 @@ function fromFormat( { type, attributes, unregisteredAttributes, object, boundar

return {
type: formatType.tagName,
object: formatType.object,
selfClosing: formatType.object,
attributes: elementAttributes,
};
}
Expand Down Expand Up @@ -226,6 +236,7 @@ export function toTree( {
if ( character === OBJECT_REPLACEMENT_CHARACTER ) {
pointer = append( getParent( pointer ), fromFormat( {
...replacements[ i ],
isEditableTree,
object: true,
} ) );
// Ensure pointer is text node.
Expand Down

0 comments on commit 53f099d

Please sign in to comment.