Merge pull request #91 from DLXPlugins/feature/mobile-selection-safari

Fix mobile rendering on Safari and Add WP Fonts to Block

build/has-click-to-share.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '218cc8ffaf44f794c30a');
+<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '3e1eb88b9d5efb8f9137');

highlight-and-share.php

@@ -5,7 +5,7 @@
  * Plugin URI: https://dlxplugins.com/plugins/highlight-and-share/
  * Description: Select text, inline highlight, or use a Click to Share block and show social networks.
  * Author: DLX Plugins
- * Version: 4.6.0
+ * Version: 4.7.0
  * Requires at least: 5.1
  * Requires PHP: 7.2
  * Author URI: https://dlxplugins.com/plugins/highlight-and-share/
@@ -17,7 +17,7 @@
 
 namespace DLXPlugins\HAS;
 
-define( 'HIGHLIGHT_AND_SHARE_VERSION', '4.6.0' );
+define( 'HIGHLIGHT_AND_SHARE_VERSION', '4.7.0' );
 define( 'HIGHLIGHT_AND_SHARE_FILE', __FILE__ );
 
 // Support for site-level autoloading.

readme.txt

@@ -3,7 +3,7 @@ Contributors: ronalfy
 Tags: highlight, social media, click share, select text, highlight text
 Requires at least: 5.1
 Tested up to: 6.4
-Stable tag: 4.6.0
+Stable tag: 4.7.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Donate link: https://github.com/sponsors/DLXPlugins
@@ -112,6 +112,11 @@ So far, the latest versions of Chrome, Firefox, Safari, Edge, and IE9+.
 
 == Changelog ==
 
+= 4.7.0 =
+* Released 2024-04-13
+* Huge bug fix: Highlight and Share now works great on mobile browsers including Safari.
+* Re-worked selection JS to integrate <a href="https://github.com/MaxArt2501/share-this">Share This</a> script.
+
 = 4.6.0 =
 * Released 2023-12-10
 * Added Mastodon social network.
@@ -498,5 +503,5 @@ So far, the latest versions of Chrome, Firefox, Safari, Edge, and IE9+.
 
 == Upgrade Notice ==
 
-= 4.6.0 =
-Added Mastodon social network. Fixed popup in the Support tab for demo video. Fixed deprecation notices.
+= 4.7.0 =
+Text selection works great on mobile browsers now.

src/frontendjs/dom.js

@@ -0,0 +1,35 @@
+export function getOffsetScroll(_window) {
+ const body = _window.document.body;
+ const scrollReference = _window.getComputedStyle(body).position === "static" ? body.parentNode : body;
+ return scrollReference.getBoundingClientRect();
+}
+
+let matchFunc;
+export function matches(element, selector) {
+ if (!matchFunc) matchFunc = getMatchFunctionName(element);
+ return element[matchFunc](selector);
+}
+
+export function closest(element, selector) {
+ let target = element;
+ while (target && (target.nodeType !== 1 /* === Node.ELEMENT_NODE */ || !matches(target, selector))) {
+ target = target.parentNode;
+ }
+
+ return target;
+}
+
+// `contains` in IE doesn't work with text nodes
+export function contains(ancestor, target) {
+ const comparedPositions = ancestor.compareDocumentPosition(target);
+ // eslint-disable-next-line no-bitwise
+ return !comparedPositions || (comparedPositions & 16 /* === Node.DOCUMENT_POSITION_CONTAINED_BY */) > 0;
+}
+
+// eslint-disable-next-line consistent-return
+function getMatchFunctionName(element) {
+ const suffix = "atchesSelector";
+ for (const name of [ "matches", `m${suffix}`, `webkitM${suffix}`, `mozM${suffix}`, `msM${suffix}`, `oM${suffix}` ]) {
+ if (element[name]) return name;
+ }
+}

src/frontendjs/highlight-and-share.js

@@ -1,3 +1,4 @@
+import { constrainRange } from './selection';
 ( function() {
  'use strict';
 
@@ -200,7 +201,7 @@
  switch ( type ) {
  case 'selection':
  // Position the interface.
- setHasContainerPositionSelection( hasClone );
+ setHasContainerPositionSelection( hasClone, triggerElement );
  break;
  case 'inline':
  // Position the interface.
@@ -336,8 +337,8 @@
  el.addEventListener( 'click', ( event ) => {
  event.preventDefault();
  const url = event.target.closest( 'a' ).getAttribute( 'href' );
- 
- // 
+
+ //
  if ( 'undefined' !== typeof Fancybox ) {
  // eslint-disable-next-line no-undef
  hasRemoveVisibleElements();
@@ -428,18 +429,16 @@
  /**
  * Set the Social Sharer container position for the current selection. This needs to run after cloned element has been appended to the dom.
  *
- * @param {element} element The cloned social sharer element.
+ * @param {element} element The cloned social sharer element.
+ * @param {element} triggerElement The event initiator (null if no trigger element).
  */
- const setHasContainerPositionSelection = ( element ) => {
+ const setHasContainerPositionSelection = ( element, triggerElement ) => {
  // Get the dimensions of the window.
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
 
  // Get the dimensions and location of the selection.
- const selectionRect = window
- .getSelection()
- .getRangeAt( 0 )
- .getBoundingClientRect();
+ const selectionRect = getConstrainedRange( triggerElement ).getBoundingClientRect();
  const selectionTop = selectionRect.top; // top position relative to view port.
  const selectionLeft = selectionRect.left; // left position relative to view port.
  const selectionWidth = selectionRect.width;
@@ -650,6 +649,30 @@
  }
  };
 
+ /**
+ * Get the constrained range.
+ *
+ * @param {Element} element The element to constrain the range to.
+ * @return {Range} The constrained range.
+ * @see https://github.com/MaxArt2501/share-this/tree/master
+ */
+ const getConstrainedRange = ( element ) => {
+ const _window = document.defaultView;
+ const selection = _window.getSelection();
+ const range = selection.rangeCount && selection.getRangeAt( 0 );
+ if ( ! range ) {
+ return;
+ }
+
+ const constrainedRange = constrainRange( range, element );
+ if ( constrainedRange.collapsed || ! constrainedRange.getClientRects().length ) {
+ return;
+ }
+
+ // eslint-disable-next-line consistent-return
+ return constrainedRange;
+ };
+
  /**
  * Set the Social Sharer container position for the inline highlighter. This needs to run after cloned element has been appended to the dom.
  *
@@ -824,7 +847,7 @@
 
  const element = parentElement.querySelector( '.has-social-placeholder' );
 
-  // Get the highlight and share params.
+ // Get the highlight and share params.
  const { href, title, hashtags } = getPageParams( element );
 
  // Display Highlight and Share.
@@ -838,8 +861,11 @@
 
  // Check if element has class `has-content-area` and if so, it's flush with the content. Select its parent, and add the event to that.
  if ( element.classList.contains( 'has-content-area' ) && ! isLegacyContentMode ) {
- element.parentElement.addEventListener( 'mouseup', ( event ) => {
- hasHandleSelectEvents( event, element.parentElement );
+ const eventTypes = [ 'selectionchange', 'mouseup', 'touchend', 'touchcancel' ];
+ eventTypes.forEach( ( eventType ) => {
+ element.parentElement.addEventListener( eventType, ( event ) => {
+ hasHandleSelectEvents( event, element.parentElement );
+ } );
  } );
  return;
  }

src/frontendjs/selection.js

@@ -0,0 +1,76 @@
+import { closest, contains } from './dom.js';
+
+export function isSelectionForward( selection ) {
+ if ( selection.isCollapsed ) {
+ return true;
+ }
+
+ const comparedPositions = selection.anchorNode.compareDocumentPosition( selection.focusNode );
+ if ( ! comparedPositions ) {
+ // It's the same node
+ return selection.anchorOffset < selection.focusOffset;
+ }
+
+ // eslint-disable-next-line no-bitwise
+ return ( comparedPositions & 4 /* === Node.DOCUMENT_POSITION_FOLLOWING */ ) > 0;
+}
+
+export function getEndLineRect( range, isForward ) {
+ let endLineRects;
+ const rangeRects = range.getClientRects();
+ const sliceRects = [].slice.bind( rangeRects );
+
+ if ( isForward ) {
+ let lastLeft = Infinity;
+ let i = rangeRects.length;
+ while ( i-- ) {
+ const rect = rangeRects[ i ];
+ if ( rect.left > lastLeft ) {
+ break;
+ }
+ lastLeft = rect.left;
+ }
+ endLineRects = sliceRects( i + 1 );
+ } else {
+ let lastRight = -Infinity;
+ let i = 0;
+ for ( ; i < rangeRects.length; i++ ) {
+ const rect = rangeRects[ i ];
+ if ( rect.right < lastRight ) {
+ break;
+ }
+ lastRight = rect.right;
+ }
+ endLineRects = sliceRects( 0, i );
+ }
+
+ return {
+ top: Math.min( ...endLineRects.map( ( rect ) => rect.top ) ),
+ bottom: Math.max( ...endLineRects.map( ( rect ) => rect.bottom ) ),
+ left: endLineRects[ 0 ].left,
+ right: endLineRects[ endLineRects.length - 1 ].right,
+ };
+}
+
+export function constrainRange( range, selector ) {
+ const constrainedRange = range.cloneRange();
+ if ( range.collapsed || ! selector ) {
+ return constrainedRange;
+ }
+
+ let ancestor = closest( range.startContainer, selector );
+ if ( ancestor ) {
+ if ( ! contains( ancestor, range.endContainer ) ) {
+ constrainedRange.setEnd( ancestor, ancestor.childNodes.length );
+ }
+ } else {
+ ancestor = closest( range.endContainer, selector );
+ if ( ancestor ) {
+ constrainedRange.setStart( ancestor, 0 );
+ } else {
+ constrainedRange.collapse();
+ }
+ }
+
+ return constrainedRange;
+}

src/react/Components/Typography/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import fontFamilies from '../../../fonts/fonts';
 import { __ } from '@wordpress/i18n';
+import { useSettings } from '@wordpress/block-editor';
 import { ButtonGroup, Button, Tooltip, SelectControl, BaseControl, TextControl, Popover } from '@wordpress/components';
 import { useForm, Controller, useWatch } from 'react-hook-form';
 import { geHierarchicalPlaceholderValue } from '../../Utils/TypographyHelper';
@@ -73,6 +74,8 @@ const Typography = ( props ) => {
  defaultValues: getDefaultValues(),
  } );
 
+ const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
+
  const formValues = useWatch( { control } );
 
  const { label } = props;
@@ -105,8 +108,18 @@ const Typography = ( props ) => {
  const mergedFamilies = [];
  families.forEach( ( fontFamily ) => {
  fonts.push( { label: fontFamily.name, value: fontFamily.slug } );
- mergedFamilies.push( { family: fontFamily.family, slug: fontFamily.slug, fallback: fontFamily.fallback, type: fontFamily.type  } );
+ mergedFamilies.push( { family: fontFamily.family, slug: fontFamily.slug, fallback: fontFamily.fallback, type: fontFamily.type } );
  } );
+ if ( blockLevelFontFamilies ) {
+ const { theme } = blockLevelFontFamilies;
+
+ if ( theme ) {
+ theme.forEach( ( fontFamily ) => {
+ fonts.push( { label: fontFamily.name, value: fontFamily.slug } );
+ mergedFamilies.push( { family: fontFamily.name, slug: fontFamily.slug, fallback: fontFamily.fallback, type: 'web' } );
+ } );
+ }
+ }
  // Push adobe fonts to the front.
  adobeFonts.forEach( ( font ) => {
  fonts.unshift( { label: font.name, value: font.slug } );