Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

T363600: use a single Popover #116

Merged
merged 6 commits into from
May 10, 2024
Merged

T363600: use a single Popover #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56c67c6
Simplify to use a single Popover component
medied May 1, 2024
c350464
Some cleanup
medied May 2, 2024
71d3ea6
Move single Popover to its own child component
medied May 7, 2024
e6c46a3
Refactor popover placement logic
medied May 7, 2024
de68ba0
Move up onClickPopoverOutside
medied May 7, 2024
6fe1d2f
Lint fix
medied May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 41 additions & 55 deletions src/link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
removeFormat,
} from '@wordpress/rich-text';
import { __ } from '@wordpress/i18n';
import { InlineEditUI } from './inline';
import { PreviewEditUI } from './preview';
import { WikipediaPreviewPopover } from './popover';
import { CustomTooltip } from './tooltip';

const formatType = 'wikipediapreview/link';
Expand Down Expand Up @@ -46,7 +45,8 @@
const [ viewingPreview, setViewingPreview ] = useState( false );
const startViewingPreview = () => setViewingPreview( true );
const stopViewingPreview = () => setViewingPreview( false );
const [ lastValue, setLastValue ] = useState( null );
const [ lastValue, setLastValue ] = useState( value );
const valueRef = useRef( value );
const toolbarButtonRef = useRef();

const formatButtonClick = () => {
Expand Down Expand Up @@ -99,16 +99,26 @@
stopViewingPreview();
};

const removesPreviewFormat = () => {
const counter = ( count, format ) => {
if ( format[ 0 ].type === formatType ) {
return count + 1;
}
return count;
};
const lastValueCount = lastValue.formats && lastValue.formats.reduce( counter, 0 );
const valueCount = value.formats && value.formats.reduce( counter, 0 );

if ( valueCount === 0 ) {
return false;
}

return lastValueCount > valueCount;
};

const goToEdit = () => {
startAddingPreview();
stopViewingPreview();
onFocus();
};

const onClosePreview = () => {
if ( ! Object.keys( activeAttributes ).length ) {
stopViewingPreview();
}
};

const getFormatStart = ( position ) => {
Expand Down Expand Up @@ -157,26 +167,6 @@
return selectedValue.end;
};

const handleTextEdit = () => {
// Assuming a Left-To-Right language:
// --> cursorDirection > 0 means cursor is moving left
// --> cursorDirection < 0 means cursor is moving right
const cursorDirection = lastValue.start - value.start;
const editDetected = value.text !== lastValue.text;
const involvesPreviewFormat =
cursorDirection >= 0
? lastValue.formats[ value.start ] &&
lastValue.formats[ value.start ][ 0 ].type === formatType
: lastValue.formats[ value.end - 1 ] &&
lastValue.formats[ value.end - 1 ][ 0 ].type === formatType;

if ( editDetected && involvesPreviewFormat ) {
const formatStart = getFormatStart( value.start - 1 );
const formatEnd = getFormatEnd( value.end + 1 );
onChange( removeFormat( value, formatType, formatStart, formatEnd ) );
}
};

useEffect( () => {
if ( Object.keys( activeAttributes ).length ) {
stopAddingPreview();
Expand All @@ -187,12 +177,18 @@
}, [ activeAttributes ] );

useEffect( () => {
if ( lastValue === null ) {
setLastValue( value );
} else if ( lastValue !== value ) {
handleTextEdit();
setLastValue( value );
valueRef.current = value;

if ( removesPreviewFormat() ) {
const formatStart = getFormatStart( value.start - 1 );
const formatEnd = getFormatEnd( value.end + 1 );
onChange( removeFormat( value, formatType, formatStart, formatEnd ) );
}
}, [ value.formats ] );

Check warning on line 187 in src/link/edit.js

View workflow job for this annotation

GitHub Actions / build 

React Hook useEffect has missing dependencies: 'getFormatEnd', 'getFormatStart', 'onChange', 'removesPreviewFormat', and 'value'. Either include them or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback

useEffect( () => {
// Update lastValue with the previous value
setLastValue( valueRef.current );
}, [ value ] );

return (
Expand All @@ -212,30 +208,20 @@
anchorRef={ toolbarButtonRef }
addingPreview={ addingPreview }
/>
{ addingPreview && (
<InlineEditUI
contentRef={ contentRef }
settings={ settings }
onApply={
value.start !== value.end || activeAttributes.title
? updateAttributes
: insertText
}
{ ( addingPreview || viewingPreview ) && (
<WikipediaPreviewPopover
addingPreview={ addingPreview }
stopAddingPreview={ stopAddingPreview }
viewingPreview={ viewingPreview }
stopViewingPreview={ stopViewingPreview }
updateAttributes={ updateAttributes }
insertText={ insertText }
removeAttributes={ removeAttributes }
goToEdit={ goToEdit }
value={ value }
activeAttributes={ activeAttributes }
onClose={ stopAddingPreview }
/>
) }
{ viewingPreview && (
<PreviewEditUI
contentRef={ contentRef }
settings={ settings }
value={ value }
onClose={ onClosePreview }
onEdit={ goToEdit }
onRemove={ removeAttributes }
onForceClose={ stopViewingPreview }
activeAttributes={ activeAttributes }
/>
) }
</>
Expand Down
30 changes: 4 additions & 26 deletions src/link/inline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import {
Popover,
TextControl,
Button,
KeyboardShortcuts,
} from '@wordpress/components';
import { getTextContent, slice, useAnchor } from '@wordpress/rich-text';
import { getTextContent, slice } from '@wordpress/rich-text';
import { useState, useEffect, createRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getSiteLanguage, isTextNearTheEdge } from './utils';
import { getSiteLanguage } from './utils';
import { prefixSearch, fulltextSearch, abortAllRequest } from './api';
import { LanguageSelector } from './language-selector';

export const InlineEditUI = ( {
contentRef,
settings,
onClose,
onApply,
value,
activeAttributes,
Expand All @@ -29,17 +25,10 @@
const [ langCodeAdjustment, setLangCodeAdjustment ] = useState( false );
const inputRef = createRef();

let placement = 'top';
const anchor = useAnchor( {
editableContentElement: contentRef.current,
value,
settings,
} );

useEffect( () => {
setTitle( activeAttributes.title || getTextContent( slice( value ) ) );
setLang( activeAttributes.lang || getSiteLanguage() );
}, [ activeAttributes ] );

Check warning on line 31 in src/link/inline.js

View workflow job for this annotation

GitHub Actions / build 

React Hook useEffect has a missing dependency: 'value'. Either include it or remove the dependency array. If 'setTitle' needs the current value of 'value', you can also switch to useReducer instead of useState and read 'value' in the reducer

useEffect( () => {
if ( title ) {
Expand Down Expand Up @@ -72,19 +61,8 @@
}
}, [ lang ] );

if ( isTextNearTheEdge( anchor ) ) {
placement = 'right';
}

return (
<Popover
anchor={ anchor }
onClose={ onClose }
placement={ placement }
className="wikipediapreview-edit-inline"
noArrow={ false }
expandOnMobile={ true }
>
<div>
{ ! languageSelector ? (
<div>
<div className="wikipediapreview-edit-inline-search">
Expand Down Expand Up @@ -237,6 +215,6 @@
},
} }
/>
</Popover>
</div>
);
};
80 changes: 80 additions & 0 deletions src/link/popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { useCallback } from '@wordpress/element';
import { useAnchor } from '@wordpress/rich-text';
import { Popover } from '@wordpress/components';
import { InlineEditUI } from './inline';
import { PreviewEditUI } from './preview';
import { isTextNearTheEdge } from './utils';

export const WikipediaPreviewPopover = ( {
addingPreview,
stopAddingPreview,
viewingPreview,
stopViewingPreview,
updateAttributes,
insertText,
removeAttributes,
goToEdit,
value,
activeAttributes,
contentRef,
settings,
} ) => {
const anchor = useAnchor( {
editableContentElement: contentRef.current,
value,
settings,
} );

const onClosePreview = () => {
if ( ! Object.keys( activeAttributes ).length ) {
stopViewingPreview();
}
};

const onClickPopoverOutside = useCallback( ( e ) => {
if ( e.target.className === 'components-popover__content' ) {
stopViewingPreview();
}
}, [] );

Check warning on line 38 in src/link/popover.js

View workflow job for this annotation

GitHub Actions / build 

React Hook useCallback has a missing dependency: 'stopViewingPreview'. Either include it or remove the dependency array. If 'stopViewingPreview' changes too often, find the parent component that defines it and wrap that definition in useCallback

const setPlacement = () => {
if ( isTextNearTheEdge( anchor ) ) {
return 'right';
} else if ( addingPreview ) {
return 'top';
}
return 'bottom';
};

return (
<Popover
anchor={ anchor }
placement={ setPlacement() }
noArrow={ false }
expandOnMobile={ true }
onClose={ addingPreview ? stopAddingPreview : onClosePreview }
className={ `wikipediapreview-edit-${ addingPreview ? 'inline' : 'preview-popover' }` }
onClick={ onClickPopoverOutside }
>
{ addingPreview && (
<InlineEditUI
onApply={
value.start !== value.end || activeAttributes.title
? updateAttributes
: insertText
}
value={ value }
activeAttributes={ activeAttributes }
/>
) }
{ viewingPreview && (
<PreviewEditUI
onEdit={ goToEdit }
onRemove={ removeAttributes }
onForceClose={ stopViewingPreview }
activeAttributes={ activeAttributes }
/>
) }
</Popover>
);
};
51 changes: 8 additions & 43 deletions src/link/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,19 @@
import { Popover } from '@wordpress/components';
import {
useState,
useEffect,
useLayoutEffect,
useCallback,
} from '@wordpress/element';
import { useAnchor } from '@wordpress/rich-text';
import { __ } from '@wordpress/i18n';
import wikipediaPreview from 'wikipedia-preview';
import { isTextNearTheEdge } from './utils';

export const PreviewEditUI = ( {
contentRef,
settings,
value,
activeAttributes,
onClose,
onForceClose,
onEdit,
onRemove,
} ) => {
let placement = 'bottom';
const [ previewHtml, setPreviewHtml ] = useState( null );
const [ showControllersMenu, setShowControllersMenu ] = useState( true );
const anchor = useAnchor( {
editableContentElement: contentRef.current,
value,
settings,
} );
const onClickPopoverOutside = useCallback( ( e ) => {
if ( e.target.className === 'components-popover__content' ) {
onForceClose();
}
}, [] );
const toggleControllersMenu = () => {
/* eslint-disable-next-line no-shadow */
setShowControllersMenu( ( showControllersMenu ) => ! showControllersMenu );
Expand Down Expand Up @@ -97,33 +78,17 @@
.querySelector( '.wikipediapreview-header-closebtn' )
?.removeEventListener( 'click', onForceClose );
};
}, [ previewHtml ] );

Check warning on line 81 in src/link/preview.js

View workflow job for this annotation

GitHub Actions / build 

React Hook useLayoutEffect has a missing dependency: 'onForceClose'. Either include it or remove the dependency array

if ( isTextNearTheEdge( anchor ) ) {
placement = 'right';
}

return (
<div>
<Popover
anchor={ anchor }
onClose={ onClose }
placement={ placement }
noArrow={ false }
expandOnMobile={ true }
className="wikipediapreview-edit-preview-popover"
onClick={ onClickPopoverOutside }
>
<div className="wikipediapreview-edit-preview-container">
<div
className="wikipediapreview-edit-preview"
dangerouslySetInnerHTML={ { __html: previewHtml } }
></div>
{ previewHtml && showControllersMenu && (
<ControllerEditUI onEdit={ onEdit } onRemove={ onRemove } />
) }
</div>
</Popover>
<div className="wikipediapreview-edit-preview-container">
<div
className="wikipediapreview-edit-preview"
dangerouslySetInnerHTML={ { __html: previewHtml } }
></div>
{ previewHtml && showControllersMenu && (
<ControllerEditUI onEdit={ onEdit } onRemove={ onRemove } />
) }
</div>
);
};
Expand Down
Loading