@elementor/editor-controls 3.35.0-327 → 3.35.0-328

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.35.0-327",
+  "version": "3.35.0-328",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-327",
-    "@elementor/editor-elements": "3.35.0-327",
-    "@elementor/editor-props": "3.35.0-327",
-    "@elementor/editor-responsive": "3.35.0-327",
-    "@elementor/editor-ui": "3.35.0-327",
-    "@elementor/editor-v1-adapters": "3.35.0-327",
-    "@elementor/env": "3.35.0-327",
-    "@elementor/http-client": "3.35.0-327",
+    "@elementor/editor-current-user": "3.35.0-328",
+    "@elementor/editor-elements": "3.35.0-328",
+    "@elementor/editor-props": "3.35.0-328",
+    "@elementor/editor-responsive": "3.35.0-328",
+    "@elementor/editor-ui": "3.35.0-328",
+    "@elementor/editor-v1-adapters": "3.35.0-328",
+    "@elementor/env": "3.35.0-328",
+    "@elementor/http-client": "3.35.0-328",
     "@elementor/icons": "^1.61.1",
-    "@elementor/locations": "3.35.0-327",
-    "@elementor/mixpanel": "3.35.0-327",
-    "@elementor/query": "3.35.0-327",
-    "@elementor/session": "3.35.0-327",
+    "@elementor/locations": "3.35.0-328",
+    "@elementor/mixpanel": "3.35.0-328",
+    "@elementor/query": "3.35.0-328",
+    "@elementor/session": "3.35.0-328",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-327",
-    "@elementor/wp-media": "3.35.0-327",
+    "@elementor/utils": "3.35.0-328",
+    "@elementor/wp-media": "3.35.0-328",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",
@@ -68,6 +68,7 @@
     "@tiptap/extension-superscript": "^3.11.1",
     "@tiptap/extension-text": "^3.11.1",
     "@tiptap/extension-underline": "^3.11.1",
+    "@tiptap/extension-link": "^3.11.1",
     "@tiptap/pm": "^3.11.1",
     "@tiptap/react": "^3.11.1",
     "@tiptap/starter-kit": "^3.11.1"

package/src/components/inline-editor-toolbar.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import {
 	BoldIcon,
 	ItalicIcon,
+	LinkIcon,
 	MinusIcon,
 	StrikethroughIcon,
 	SubscriptIcon,
 	SuperscriptIcon,
 	UnderlineIcon,
 } from '@elementor/icons';
-import { Box, IconButton, ToggleButton, ToggleButtonGroup, Tooltip } from '@elementor/ui';
+import { Box, IconButton, ToggleButton, ToggleButtonGroup, Tooltip, usePopupState } from '@elementor/ui';
 import { type Editor, useEditorState } from '@tiptap/react';
 import { __ } from '@wordpress/i18n';
 
+import { UrlPopover } from './url-popover';
+
 type InlineEditorToolbarProps = {
 	editor: Editor;
 };
@@ -74,6 +77,12 @@ const toolbarButtons = {
 			editor.chain().focus().toggleSubscript().run();
 		},
 	},
+	link: {
+		label: __( 'Link', 'elementor' ),
+		icon: <LinkIcon fontSize="tiny" />,
+		action: 'link',
+		method: null,
+	},
 } as const;
 
 type ToolbarButtonKeys = keyof typeof toolbarButtons;
@@ -85,6 +94,11 @@ const { clear: clearButton, ...formatButtons } = toolbarButtons;
 const possibleFormats: FormatAction[] = Object.keys( formatButtons ) as FormatAction[];
 
 export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
+	const [ urlValue, setUrlValue ] = useState( '' );
+	const [ openInNewTab, setOpenInNewTab ] = useState( false );
+	const toolbarRef = useRef< HTMLDivElement >( null );
+	const popupState = usePopupState( { variant: 'popover' } );
+
 	const editorState = useEditorState( {
 		editor,
 		selector: ( ctx ) => possibleFormats.filter( ( format ) => ctx.editor.isActive( format ) ),
@@ -92,8 +106,40 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 
 	const formatButtonsList = useMemo( () => Object.values( formatButtons ), [] );
 
+	const handleLinkClick = () => {
+		const linkAttrs = editor.getAttributes( 'link' );
+		setUrlValue( linkAttrs.href || '' );
+		setOpenInNewTab( linkAttrs.target === '_blank' );
+		popupState.open( toolbarRef.current );
+	};
+
+	const handleUrlChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setUrlValue( event.target.value );
+	};
+
+	const handleToggleNewTab = () => {
+		setOpenInNewTab( ! openInNewTab );
+	};
+
+	const handleUrlSubmit = () => {
+		if ( urlValue ) {
+			editor
+				.chain()
+				.focus()
+				.setLink( {
+					href: urlValue,
+					target: openInNewTab ? '_blank' : '_self',
+				} )
+				.run();
+		} else {
+			editor.chain().focus().unsetLink().run();
+		}
+		popupState.close();
+	};
+
 	return (
 		<Box
+			ref={ toolbarRef }
 			sx={ {
 				position: 'absolute',
 				top: -40,
@@ -104,6 +150,7 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 				backgroundColor: 'background.paper',
 				boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
 				alignItems: 'center',
+				visibility: popupState.isOpen ? 'hidden' : 'visible',
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top">
@@ -125,13 +172,24 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 							value={ button.action }
 							aria-label={ button.label }
 							size="tiny"
-							onClick={ () => button.method( editor ) }
+							onClick={ () =>
+								button.action === 'link' ? handleLinkClick() : button.method?.( editor )
+							}
 						>
 							{ button.icon }
 						</ToggleButton>
 					</Tooltip>
 				) ) }
 			</ToggleButtonGroup>
+			<UrlPopover
+				popupState={ popupState }
+				anchorRef={ toolbarRef }
+				restoreValue={ handleUrlSubmit }
+				value={ urlValue }
+				onChange={ handleUrlChange }
+				openInNewTab={ openInNewTab }
+				onToggleNewTab={ handleToggleNewTab }
+			/>
 		</Box>
 	);
 };

package/src/components/inline-editor.tsx

@@ -5,6 +5,7 @@ import Bold from '@tiptap/extension-bold';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
 import Italic from '@tiptap/extension-italic';
+import Link from '@tiptap/extension-link';
 import Strike from '@tiptap/extension-strike';
 import Subscript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
@@ -52,6 +53,9 @@ export const InlineEditor = React.forwardRef(
 				Underline,
 				Superscript,
 				Subscript,
+				Link.configure( {
+					openOnClick: false,
+				} ),
 				HardBreak.extend( {
 					addKeyboardShortcuts() {
 						return {
@@ -98,6 +102,9 @@ export const InlineEditor = React.forwardRef(
 					'& .ProseMirror': {
 						minHeight: '70px',
 						fontSize: '12px',
+						'& a': {
+							color: 'inherit',
+						},
 					},
 					...sx,
 				} }

package/src/components/url-popover.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
+import { ExternalLinkIcon } from '@elementor/icons';
+import { bindPopover, Popover, type PopupState, Stack, TextField, ToggleButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	popupState: PopupState;
+	anchorRef: RefObject< HTMLDivElement | null >;
+	restoreValue: () => void;
+	value: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	openInNewTab: boolean;
+	onToggleNewTab: () => void;
+};
+
+export const UrlPopover = ( {
+	popupState,
+	restoreValue,
+	anchorRef,
+	value,
+	onChange,
+	openInNewTab,
+	onToggleNewTab,
+}: Props ) => {
+	const inputRef = useRef< HTMLInputElement >( null );
+
+	useEffect( () => {
+		if ( popupState.isOpen ) {
+			requestAnimationFrame( () => inputRef.current?.focus() );
+		}
+	}, [ popupState.isOpen ] );
+
+	const handleClose = () => {
+		restoreValue();
+		popupState.close();
+	};
+
+	return (
+		<Popover
+			slotProps={ {
+				paper: { sx: { borderRadius: '16px', width: anchorRef.current?.offsetWidth + 'px', marginTop: -1 } },
+			} }
+			{ ...bindPopover( popupState ) }
+			anchorOrigin={ { vertical: 'top', horizontal: 'left' } }
+			transformOrigin={ { vertical: 'top', horizontal: 'left' } }
+			onClose={ handleClose }
+		>
+			<Stack direction="row" alignItems="center" gap={ 1 } sx={ { p: 1.5 } }>
+				<TextField
+					value={ value }
+					onChange={ onChange }
+					size="tiny"
+					fullWidth
+					placeholder={ __( 'Type a URL', 'elementor' ) }
+					inputProps={ { ref: inputRef } }
+					color="secondary"
+					InputProps={ { sx: { borderRadius: '8px' } } }
+				/>
+				<ToggleButton
+					size="tiny"
+					value="newTab"
+					selected={ openInNewTab }
+					onClick={ onToggleNewTab }
+					aria-label={ __( 'Open in a new tab', 'elementor' ) }
+					sx={ { borderRadius: '8px' } }
+				>
+					<ExternalLinkIcon fontSize="tiny" />
+				</ToggleButton>
+			</Stack>
+		</Popover>
+	);
+};