From 56c67c6c0ab5764577de71db22728732396d6e0b Mon Sep 17 00:00:00 2001 From: eamedina Date: Wed, 1 May 2024 17:11:23 -0400 Subject: [PATCH 1/8] Simplify to use a single Popover component --- src/link/edit.js | 92 +++++++++++++++++++++++++++++++-------------- src/link/inline.js | 29 ++++---------- src/link/preview.js | 58 ++++++++++++---------------- 3 files changed, 96 insertions(+), 83 deletions(-) diff --git a/src/link/edit.js b/src/link/edit.js index dc295fc..111d5b5 100644 --- a/src/link/edit.js +++ b/src/link/edit.js @@ -6,11 +6,13 @@ import { insert, applyFormat, removeFormat, + useAnchor, } from '@wordpress/rich-text'; import { __ } from '@wordpress/i18n'; import { InlineEditUI } from './inline'; import { PreviewEditUI } from './preview'; import { CustomTooltip } from './tooltip'; +import { Popover } from '@wordpress/components'; const formatType = 'wikipediapreview/link'; const formatTitle = __( 'Wikipedia Preview', 'wikipedia-preview' ); @@ -42,12 +44,30 @@ const Edit = ( { } ) => { const [ addingPreview, setAddingPreview ] = useState( false ); const startAddingPreview = () => setAddingPreview( true ); + // const startAddingPreview = () => { + // console.log('startAddingPreview'); + // setAddingPreview( true ); + // // if ( contentRef.current ) { + // // contentRef.current.focus(); + // // } + // }; const stopAddingPreview = () => setAddingPreview( false ); const [ viewingPreview, setViewingPreview ] = useState( false ); const startViewingPreview = () => setViewingPreview( true ); + // const startViewingPreview = () => { + // setViewingPreview( true ); + // if ( contentRef.current ) { + // contentRef.current.focus(); + // } + // }; const stopViewingPreview = () => setViewingPreview( false ); const [ lastValue, setLastValue ] = useState( null ); const toolbarButtonRef = useRef(); + const anchor = useAnchor( { + editableContentElement: contentRef.current, + value, + settings, + } ); const formatButtonClick = () => { if ( isActive ) { @@ -100,9 +120,13 @@ const Edit = ( { }; const goToEdit = () => { + console.log('goToEdit - value:', value); + console.log('goToEdit - contentRef:', contentRef); + console.log('goToEdit - activeAttributes:', activeAttributes); + startAddingPreview(); stopViewingPreview(); - onFocus(); + // onFocus(); }; const onClosePreview = () => { @@ -158,6 +182,7 @@ const Edit = ( { }; const handleTextEdit = () => { + console.log('handleTextEdit'); // Assuming a Left-To-Right language: // --> cursorDirection > 0 means cursor is moving left // --> cursorDirection < 0 means cursor is moving right @@ -174,6 +199,7 @@ const Edit = ( { const formatStart = getFormatStart( value.start - 1 ); const formatEnd = getFormatEnd( value.end + 1 ); onChange( removeFormat( value, formatType, formatStart, formatEnd ) ); + // setLastValue( null ); } }; @@ -189,12 +215,17 @@ const Edit = ( { useEffect( () => { if ( lastValue === null ) { setLastValue( value ); - } else if ( lastValue !== value ) { + } else if ( lastValue.text.length !== value.text.length ) { handleTextEdit(); setLastValue( value ); } }, [ value ] ); + useEffect( () => { + console.log('edit.js - adding/viewing useEffect addingPreview:', addingPreview); + console.log('edit.js - adding/viewing useEffect viewingPreview:', viewingPreview); + }, [ addingPreview, viewingPreview ] ); + return ( <> @@ -212,32 +243,37 @@ const Edit = ( { anchorRef={ toolbarButtonRef } addingPreview={ addingPreview } /> - { addingPreview && ( - - ) } - { viewingPreview && ( - - ) } + { ( addingPreview || viewingPreview ) && ( + + { addingPreview && ( + + ) } + { viewingPreview && ( + + ) } + + )} ); }; diff --git a/src/link/inline.js b/src/link/inline.js index a7ce8f5..21590f1 100644 --- a/src/link/inline.js +++ b/src/link/inline.js @@ -1,10 +1,9 @@ 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'; @@ -12,9 +11,6 @@ import { prefixSearch, fulltextSearch, abortAllRequest } from './api'; import { LanguageSelector } from './language-selector'; export const InlineEditUI = ( { - contentRef, - settings, - onClose, onApply, value, activeAttributes, @@ -30,11 +26,6 @@ export const InlineEditUI = ( { const inputRef = createRef(); let placement = 'top'; - const anchor = useAnchor( { - editableContentElement: contentRef.current, - value, - settings, - } ); useEffect( () => { setTitle( activeAttributes.title || getTextContent( slice( value ) ) ); @@ -72,19 +63,13 @@ export const InlineEditUI = ( { } }, [ lang ] ); - if ( isTextNearTheEdge( anchor ) ) { - placement = 'right'; - } + // TODO: move isTextNearTheEdge logic to parent + // if ( isTextNearTheEdge( anchor ) ) { + // placement = 'right'; + // } return ( - +
{ ! languageSelector ? (
@@ -237,6 +222,6 @@ export const InlineEditUI = ( { }, } } /> - +
); }; diff --git a/src/link/preview.js b/src/link/preview.js index 1203626..dbcafe6 100644 --- a/src/link/preview.js +++ b/src/link/preview.js @@ -5,17 +5,16 @@ import { useLayoutEffect, useCallback, } from '@wordpress/element'; -import { useAnchor } from '@wordpress/rich-text'; +// 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, + // contentRef, + // settings, + // value, activeAttributes, - onClose, onForceClose, onEdit, onRemove, @@ -23,11 +22,11 @@ export const PreviewEditUI = ( { let placement = 'bottom'; const [ previewHtml, setPreviewHtml ] = useState( null ); const [ showControllersMenu, setShowControllersMenu ] = useState( true ); - const anchor = useAnchor( { - editableContentElement: contentRef.current, - value, - settings, - } ); + // const anchor = useAnchor( { + // editableContentElement: contentRef.current, + // value, + // settings, + // } ); const onClickPopoverOutside = useCallback( ( e ) => { if ( e.target.className === 'components-popover__content' ) { onForceClose(); @@ -99,31 +98,24 @@ export const PreviewEditUI = ( { }; }, [ previewHtml ] ); - if ( isTextNearTheEdge( anchor ) ) { - placement = 'right'; - } + // TODO: move isTextNearTheEdge logic to parent + // if ( isTextNearTheEdge( anchor ) ) { + // placement = 'right'; + // } + + // useEffect( () => { + // console.log('preview.js - value:', value); + // }, [ value ]); return ( -
- -
-
- { previewHtml && showControllersMenu && ( - - ) } -
- +
+
+ { previewHtml && showControllersMenu && ( + + ) }
); }; From c350464d90021823acffe0f6a7d3b3c33749dab8 Mon Sep 17 00:00:00 2001 From: eamedina Date: Thu, 2 May 2024 13:12:29 -0400 Subject: [PATCH 2/8] Some cleanup --- src/link/edit.js | 29 ++--------------------------- 1 file changed, 2 insertions(+), 27 deletions(-) diff --git a/src/link/edit.js b/src/link/edit.js index 111d5b5..0b7dfb1 100644 --- a/src/link/edit.js +++ b/src/link/edit.js @@ -1,6 +1,6 @@ import { useEffect, useState, useRef } from '@wordpress/element'; import { BlockControls } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { ToolbarGroup, ToolbarButton, Popover } from '@wordpress/components'; import { create, insert, @@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n'; import { InlineEditUI } from './inline'; import { PreviewEditUI } from './preview'; import { CustomTooltip } from './tooltip'; -import { Popover } from '@wordpress/components'; const formatType = 'wikipediapreview/link'; const formatTitle = __( 'Wikipedia Preview', 'wikipedia-preview' ); @@ -44,22 +43,9 @@ const Edit = ( { } ) => { const [ addingPreview, setAddingPreview ] = useState( false ); const startAddingPreview = () => setAddingPreview( true ); - // const startAddingPreview = () => { - // console.log('startAddingPreview'); - // setAddingPreview( true ); - // // if ( contentRef.current ) { - // // contentRef.current.focus(); - // // } - // }; const stopAddingPreview = () => setAddingPreview( false ); const [ viewingPreview, setViewingPreview ] = useState( false ); const startViewingPreview = () => setViewingPreview( true ); - // const startViewingPreview = () => { - // setViewingPreview( true ); - // if ( contentRef.current ) { - // contentRef.current.focus(); - // } - // }; const stopViewingPreview = () => setViewingPreview( false ); const [ lastValue, setLastValue ] = useState( null ); const toolbarButtonRef = useRef(); @@ -120,13 +106,8 @@ const Edit = ( { }; const goToEdit = () => { - console.log('goToEdit - value:', value); - console.log('goToEdit - contentRef:', contentRef); - console.log('goToEdit - activeAttributes:', activeAttributes); - startAddingPreview(); stopViewingPreview(); - // onFocus(); }; const onClosePreview = () => { @@ -182,7 +163,6 @@ const Edit = ( { }; const handleTextEdit = () => { - console.log('handleTextEdit'); // Assuming a Left-To-Right language: // --> cursorDirection > 0 means cursor is moving left // --> cursorDirection < 0 means cursor is moving right @@ -195,11 +175,11 @@ const Edit = ( { : lastValue.formats[ value.end - 1 ] && lastValue.formats[ value.end - 1 ][ 0 ].type === formatType; + console.log('editDetected, involvesPreviewFormat', editDetected, involvesPreviewFormat); if ( editDetected && involvesPreviewFormat ) { const formatStart = getFormatStart( value.start - 1 ); const formatEnd = getFormatEnd( value.end + 1 ); onChange( removeFormat( value, formatType, formatStart, formatEnd ) ); - // setLastValue( null ); } }; @@ -221,11 +201,6 @@ const Edit = ( { } }, [ value ] ); - useEffect( () => { - console.log('edit.js - adding/viewing useEffect addingPreview:', addingPreview); - console.log('edit.js - adding/viewing useEffect viewingPreview:', viewingPreview); - }, [ addingPreview, viewingPreview ] ); - return ( <> From 71d3ea658426a02ec57e0776e937f3b4e3f1a9a7 Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 7 May 2024 13:45:44 -0400 Subject: [PATCH 3/8] Move single Popover to its own child component --- src/link/edit.js | 124 ++++++++++++++++++-------------------------- src/link/popover.js | 63 ++++++++++++++++++++++ 2 files changed, 113 insertions(+), 74 deletions(-) create mode 100644 src/link/popover.js diff --git a/src/link/edit.js b/src/link/edit.js index 0b7dfb1..c173332 100644 --- a/src/link/edit.js +++ b/src/link/edit.js @@ -1,16 +1,14 @@ import { useEffect, useState, useRef } from '@wordpress/element'; import { BlockControls } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarButton, Popover } from '@wordpress/components'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { create, insert, applyFormat, removeFormat, - useAnchor, } 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'; @@ -47,13 +45,9 @@ const Edit = ( { 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 anchor = useAnchor( { - editableContentElement: contentRef.current, - value, - settings, - } ); const formatButtonClick = () => { if ( isActive ) { @@ -105,17 +99,28 @@ const Edit = ( { 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(); }; - const onClosePreview = () => { - if ( ! Object.keys( activeAttributes ).length ) { - stopViewingPreview(); - } - }; - const getFormatStart = ( position ) => { if ( value.formats[ position ] && @@ -162,27 +167,6 @@ const Edit = ( { 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; - - console.log('editDetected, involvesPreviewFormat', editDetected, involvesPreviewFormat); - 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(); @@ -192,14 +176,21 @@ const Edit = ( { } }, [ activeAttributes ] ); - useEffect( () => { - if ( lastValue === null ) { - setLastValue( value ); - } else if ( lastValue.text.length !== value.text.length ) { - handleTextEdit(); - setLastValue( value ); - } - }, [ value ] ); + useEffect( () => { + 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 ] ); + + useEffect( () => { + // Update lastValue with the previous value + setLastValue( valueRef.current ); + }, [ value ] ); return ( <> @@ -219,35 +210,20 @@ const Edit = ( { addingPreview={ addingPreview } /> { ( addingPreview || viewingPreview ) && ( - - { addingPreview && ( - - ) } - { viewingPreview && ( - - ) } - + < WikipediaPreviewPopover + addingPreview={ addingPreview } + stopAddingPreview={ stopAddingPreview } + viewingPreview={ viewingPreview } + stopViewingPreview={ stopViewingPreview } + updateAttributes={ updateAttributes } + insertText={ insertText } + removeAttributes={ removeAttributes } + goToEdit={ goToEdit } + value={ value } + activeAttributes={ activeAttributes } + contentRef={ contentRef } + settings={ settings } + /> )} ); diff --git a/src/link/popover.js b/src/link/popover.js new file mode 100644 index 0000000..5fd0ffc --- /dev/null +++ b/src/link/popover.js @@ -0,0 +1,63 @@ +import { useAnchor } from '@wordpress/rich-text'; +import { Popover } from '@wordpress/components'; +import { InlineEditUI } from './inline'; +import { PreviewEditUI } from './preview'; + +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(); + } + }; + + return ( + + { addingPreview && ( + + ) } + { viewingPreview && ( + + ) } + + ); +}; \ No newline at end of file From e6c46a3636eb899f6609620ed11c782d284af4d8 Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 7 May 2024 14:03:19 -0400 Subject: [PATCH 4/8] Refactor popover placement logic --- src/link/inline.js | 9 +-------- src/link/popover.js | 13 ++++++++++++- src/link/preview.js | 21 --------------------- 3 files changed, 13 insertions(+), 30 deletions(-) diff --git a/src/link/inline.js b/src/link/inline.js index 21590f1..887df18 100644 --- a/src/link/inline.js +++ b/src/link/inline.js @@ -6,7 +6,7 @@ import { 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'; @@ -25,8 +25,6 @@ export const InlineEditUI = ( { const [ langCodeAdjustment, setLangCodeAdjustment ] = useState( false ); const inputRef = createRef(); - let placement = 'top'; - useEffect( () => { setTitle( activeAttributes.title || getTextContent( slice( value ) ) ); setLang( activeAttributes.lang || getSiteLanguage() ); @@ -63,11 +61,6 @@ export const InlineEditUI = ( { } }, [ lang ] ); - // TODO: move isTextNearTheEdge logic to parent - // if ( isTextNearTheEdge( anchor ) ) { - // placement = 'right'; - // } - return (
{ ! languageSelector ? ( diff --git a/src/link/popover.js b/src/link/popover.js index 5fd0ffc..fa6bc9d 100644 --- a/src/link/popover.js +++ b/src/link/popover.js @@ -2,6 +2,7 @@ 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, @@ -29,10 +30,20 @@ export const WikipediaPreviewPopover = ( { } }; + const setPlacement = () => { + if ( isTextNearTheEdge( anchor ) ) { + return 'right'; + } else if ( addingPreview ) { + return 'top'; + } else { + return 'bottom'; + } + }; + return ( { - 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(); @@ -98,15 +86,6 @@ export const PreviewEditUI = ( { }; }, [ previewHtml ] ); - // TODO: move isTextNearTheEdge logic to parent - // if ( isTextNearTheEdge( anchor ) ) { - // placement = 'right'; - // } - - // useEffect( () => { - // console.log('preview.js - value:', value); - // }, [ value ]); - return (
Date: Tue, 7 May 2024 15:23:34 -0400 Subject: [PATCH 5/8] Move up onClickPopoverOutside --- src/link/popover.js | 9 ++++++++- src/link/preview.js | 6 ------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/link/popover.js b/src/link/popover.js index fa6bc9d..ba9e369 100644 --- a/src/link/popover.js +++ b/src/link/popover.js @@ -1,3 +1,4 @@ +import { useCallback } from '@wordpress/element'; import { useAnchor } from '@wordpress/rich-text'; import { Popover } from '@wordpress/components'; import { InlineEditUI } from './inline'; @@ -30,6 +31,12 @@ export const WikipediaPreviewPopover = ( { } }; + const onClickPopoverOutside = useCallback( ( e ) => { + if ( e.target.className === 'components-popover__content' ) { + stopViewingPreview(); + } + }, [] ); + const setPlacement = () => { if ( isTextNearTheEdge( anchor ) ) { return 'right'; @@ -48,7 +55,7 @@ export const WikipediaPreviewPopover = ( { expandOnMobile={ true } onClose={ addingPreview ? stopAddingPreview : onClosePreview } className={`wikipediapreview-edit-${ addingPreview ? 'inline' : 'preview-popover' }`} - // onClick={ onClickPopoverOutside } + onClick={ onClickPopoverOutside } > { addingPreview && ( { const [ previewHtml, setPreviewHtml ] = useState( null ); const [ showControllersMenu, setShowControllersMenu ] = useState( true ); - const onClickPopoverOutside = useCallback( ( e ) => { - if ( e.target.className === 'components-popover__content' ) { - onForceClose(); - } - }, [] ); const toggleControllersMenu = () => { /* eslint-disable-next-line no-shadow */ setShowControllersMenu( ( showControllersMenu ) => ! showControllersMenu ); From 6fe1d2f72bb45bc01b3ac06b926b03ec71fc1e6a Mon Sep 17 00:00:00 2001 From: eamedina Date: Tue, 7 May 2024 15:25:44 -0400 Subject: [PATCH 6/8] Lint fix --- src/link/edit.js | 29 ++++++------ src/link/popover.js | 111 ++++++++++++++++++++++---------------------- 2 files changed, 69 insertions(+), 71 deletions(-) diff --git a/src/link/edit.js b/src/link/edit.js index c173332..f9cb159 100644 --- a/src/link/edit.js +++ b/src/link/edit.js @@ -114,7 +114,7 @@ const Edit = ( { } return lastValueCount > valueCount; - } + }; const goToEdit = () => { startAddingPreview(); @@ -176,21 +176,20 @@ const Edit = ( { } }, [ activeAttributes ] ); - useEffect( () => { - valueRef.current = value; - - if ( removesPreviewFormat() ) { - const formatStart = getFormatStart( value.start - 1 ); - const formatEnd = getFormatEnd( value.end + 1 ); - onChange( removeFormat( value, formatType, formatStart, formatEnd ) ); - } + useEffect( () => { + valueRef.current = value; - }, [ value.formats ] ); + if ( removesPreviewFormat() ) { + const formatStart = getFormatStart( value.start - 1 ); + const formatEnd = getFormatEnd( value.end + 1 ); + onChange( removeFormat( value, formatType, formatStart, formatEnd ) ); + } + }, [ value.formats ] ); - useEffect( () => { + useEffect( () => { // Update lastValue with the previous value - setLastValue( valueRef.current ); - }, [ value ] ); + setLastValue( valueRef.current ); + }, [ value ] ); return ( <> @@ -210,7 +209,7 @@ const Edit = ( { addingPreview={ addingPreview } /> { ( addingPreview || viewingPreview ) && ( - < WikipediaPreviewPopover + - )} + ) } ); }; diff --git a/src/link/popover.js b/src/link/popover.js index ba9e369..083ed8b 100644 --- a/src/link/popover.js +++ b/src/link/popover.js @@ -6,76 +6,75 @@ import { PreviewEditUI } from './preview'; import { isTextNearTheEdge } from './utils'; export const WikipediaPreviewPopover = ( { - addingPreview, - stopAddingPreview, - viewingPreview, - stopViewingPreview, - updateAttributes, - insertText, - removeAttributes, - goToEdit, - value, - activeAttributes, - contentRef, - settings, + addingPreview, + stopAddingPreview, + viewingPreview, + stopViewingPreview, + updateAttributes, + insertText, + removeAttributes, + goToEdit, + value, + activeAttributes, + contentRef, + settings, } ) => { - const anchor = useAnchor( { + const anchor = useAnchor( { editableContentElement: contentRef.current, value, settings, } ); - const onClosePreview = () => { + const onClosePreview = () => { if ( ! Object.keys( activeAttributes ).length ) { stopViewingPreview(); } }; - const onClickPopoverOutside = useCallback( ( e ) => { + const onClickPopoverOutside = useCallback( ( e ) => { if ( e.target.className === 'components-popover__content' ) { stopViewingPreview(); } }, [] ); - const setPlacement = () => { - if ( isTextNearTheEdge( anchor ) ) { - return 'right'; - } else if ( addingPreview ) { - return 'top'; - } else { - return 'bottom'; - } - }; + const setPlacement = () => { + if ( isTextNearTheEdge( anchor ) ) { + return 'right'; + } else if ( addingPreview ) { + return 'top'; + } + return 'bottom'; + }; - return ( - - { addingPreview && ( - - ) } - { viewingPreview && ( - - ) } - - ); -}; \ No newline at end of file + return ( + + { addingPreview && ( + + ) } + { viewingPreview && ( + + ) } + + ); +}; From 2117e986fb0e210708d01a825ff4f3c3b7a469ae Mon Sep 17 00:00:00 2001 From: eamedina Date: Thu, 9 May 2024 11:57:42 -0400 Subject: [PATCH 7/8] Add sections option to controllers preview controllers --- src/link/images/article-black.svg | 3 + src/link/images/article-white.svg | 3 + src/link/images/change-black.svg | 3 - src/link/images/change.svg | 1 - .../images/{remove.svg => remove-white.svg} | 0 src/link/images/search-black.svg | 3 + src/link/images/search-white.svg | 3 + src/link/images/search.svg | 3 - src/link/preview.js | 27 +++++- src/link/style.scss | 85 ++++++++++--------- 10 files changed, 81 insertions(+), 50 deletions(-) create mode 100644 src/link/images/article-black.svg create mode 100644 src/link/images/article-white.svg delete mode 100644 src/link/images/change-black.svg delete mode 100644 src/link/images/change.svg rename src/link/images/{remove.svg => remove-white.svg} (100%) create mode 100644 src/link/images/search-black.svg create mode 100644 src/link/images/search-white.svg delete mode 100644 src/link/images/search.svg diff --git a/src/link/images/article-black.svg b/src/link/images/article-black.svg new file mode 100644 index 0000000..42eec45 --- /dev/null +++ b/src/link/images/article-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/article-white.svg b/src/link/images/article-white.svg new file mode 100644 index 0000000..b67a40e --- /dev/null +++ b/src/link/images/article-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/change-black.svg b/src/link/images/change-black.svg deleted file mode 100644 index 3cad1b8..0000000 --- a/src/link/images/change-black.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/link/images/change.svg b/src/link/images/change.svg deleted file mode 100644 index 753adb6..0000000 --- a/src/link/images/change.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/link/images/remove.svg b/src/link/images/remove-white.svg similarity index 100% rename from src/link/images/remove.svg rename to src/link/images/remove-white.svg diff --git a/src/link/images/search-black.svg b/src/link/images/search-black.svg new file mode 100644 index 0000000..738bbc6 --- /dev/null +++ b/src/link/images/search-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/search-white.svg b/src/link/images/search-white.svg new file mode 100644 index 0000000..41e86fb --- /dev/null +++ b/src/link/images/search-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/link/images/search.svg b/src/link/images/search.svg deleted file mode 100644 index e9fb880..0000000 --- a/src/link/images/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/link/preview.js b/src/link/preview.js index 7800bf8..50ddc74 100644 --- a/src/link/preview.js +++ b/src/link/preview.js @@ -102,21 +102,40 @@ const isPopoverExpanded = () => { }; const ControllerEditUI = ( { onEdit, onRemove } ) => { + const showSections = () => { + console.log('showSections'); + } return (
- { __( 'Change', 'wikipedia-preview' ) } +
+
+ { __( 'Topic', 'wikipedia-preview' ) } +
+
+
+ { __( 'Sections', 'wikipedia-preview' ) } +
+
+
- { __( 'Remove', 'wikipedia-preview' ) } +
+
+ { __( 'Remove', 'wikipedia-preview' ) } +
); diff --git a/src/link/style.scss b/src/link/style.scss index 0854f19..198aab7 100644 --- a/src/link/style.scss +++ b/src/link/style.scss @@ -40,7 +40,7 @@ body { } &-icon { - background-image: url(./images/search.svg); + background-image: url(./images/search-black.svg); width: 20px; height: 20px; position: absolute; @@ -242,7 +242,7 @@ body { } &-search-icon { - background-image: url(./images/search.svg); + background-image: url(./images/search-black.svg); width: 20px; height: 20px; position: absolute; @@ -348,12 +348,13 @@ body { } &-controllers { - width: 52px; - height: 136px; + width: 73px; + height: 194px; background-color: #000; display: flex; flex-direction: column; justify-content: space-around; + align-items: center; font-size: 12px; color: #fff; border-top-right-radius: 4px; @@ -364,29 +365,36 @@ body { cursor: pointer; } - &-change { - - &::before { - position: relative; - content: url(./images/change.svg); - width: 20px; - height: 20px; - left: 14px; + &-option { + display: flex; + flex-direction: column; + align-items: center; + &-icon { + &-change { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/search-white.svg); + } + &-sections { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/article-white.svg); + } + &-remove { + width: 20px; + height: 20px; + margin-bottom: 5px; + content: url(./images/remove-white.svg); + } } - } - - &-remove { - &::before { - position: relative; - content: url(./images/remove.svg); - width: 20px; + &-message { + width: 100%; height: 20px; - left: 15px; - } - } } @@ -455,23 +463,22 @@ body { cursor: pointer; } - &-change { - text-align: center; - - &::before { - content: url(./images/change-black.svg); - left: -7px; - top: 5px; - } - } - - &-remove { - text-align: center; - - &::before { - content: url(./images/remove-black.svg); - left: -7px; - top: 5px; + &-option { + flex-direction: row; + width: 100%; + &-icon { + &-change { + margin: 0 5px 0 5px; + content: url(./images/search-black.svg); + } + &-sections { + margin: 0 5px 0 5px; + content: url(./images/article-black.svg); + } + &-remove { + margin: 0 5px 0 5px; + content: url(./images/remove-black.svg); + } } } } From 5ff17a4fdc6c91dda99b540c797a0cbe3c166e36 Mon Sep 17 00:00:00 2001 From: eamedina Date: Thu, 9 May 2024 12:52:27 -0400 Subject: [PATCH 8/8] Create Sections bare skeleton --- src/link/popover.js | 2 +- src/link/preview.js | 38 ++++++++++++++++++++++++-------------- src/link/sections.js | 7 +++++++ src/link/style.scss | 9 +++++++++ 4 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 src/link/sections.js diff --git a/src/link/popover.js b/src/link/popover.js index 083ed8b..b11dca2 100644 --- a/src/link/popover.js +++ b/src/link/popover.js @@ -69,7 +69,7 @@ export const WikipediaPreviewPopover = ( { ) } { viewingPreview && ( { const [ previewHtml, setPreviewHtml ] = useState( null ); + const [ selectingSection, setSelectingSection ] = useState( false ); const [ showControllersMenu, setShowControllersMenu ] = useState( true ); + const toggleControllersMenu = () => { /* eslint-disable-next-line no-shadow */ setShowControllersMenu( ( showControllersMenu ) => ! showControllersMenu ); }; + const showSections = () => { + setSelectingSection( true ); + }; + useEffect( () => { const { title, lang } = activeAttributes; if ( title && lang ) { @@ -81,13 +88,19 @@ export const PreviewEditUI = ( { }, [ previewHtml ] ); return ( -
-
- { previewHtml && showControllersMenu && ( - +
+ { ! selectingSection ? ( +
+
+ { previewHtml && showControllersMenu && ( + + ) } +
+ ) : ( + ) }
); @@ -101,15 +114,12 @@ const isPopoverExpanded = () => { return hasPreviewPopup && hasExpandedClass; }; -const ControllerEditUI = ( { onEdit, onRemove } ) => { - const showSections = () => { - console.log('showSections'); - } +const ControllerEditUI = ( { onEditTopic, onEditSection, onRemove } ) => { return (
@@ -119,7 +129,7 @@ const ControllerEditUI = ( { onEdit, onRemove } ) => {
diff --git a/src/link/sections.js b/src/link/sections.js new file mode 100644 index 0000000..d49ce19 --- /dev/null +++ b/src/link/sections.js @@ -0,0 +1,7 @@ +export const Sections = ( {} ) => { + return ( +
+

Sections

+
+ ); +}; diff --git a/src/link/style.scss b/src/link/style.scss index 198aab7..bd25d54 100644 --- a/src/link/style.scss +++ b/src/link/style.scss @@ -503,6 +503,15 @@ body { } } + .wikipediapreview-edit-sections { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + width: 100%; + border: papayawhip ; + } + &.rtl { .wikipediapreview-edit-inline {