Merge branch 'develop'

Author: iftakharul-islam

assets/build/index.js

@@ -2,6 +2,8 @@
 
 The documentation plugin for WordPress. Create great looking documentation for your products.
 
+[Preview in WordPress Playground](https://playground.wordpress.net/?plugin=wedocs&blueprint-url=https%3A%2F%2Fwordpress.org%2Fplugins%2Fwp-json%2Fplugins%2Fv1%2Fplugin%2Fwedocs%2Fblueprint.json%3Frev%3D3372138%26lang%3Den_US)
+
 ![WordPress Plugin Version](https://img.shields.io/badge/PLUGIN_VERSION-V2.1.7-blue) ![WordPress Plugin Active Installs](https://img.shields.io/badge/ACTIVE_INSTALLS-6K-green) ![WordPress Plugin Rating](https://img.shields.io/badge/RATING-4.8/5_(61)-green) ![WordPress Plugin: Tested WP Version](https://img.shields.io/badge/WORDPRESS-V6.5_TESTED-orange) ![WordPress Plugin Last Updated](https://img.shields.io/badge/LAST_UPDATED-Aug_2024-orange)
 
 ## Description ##

assets/build/store.js

@@ -3,8 +3,12 @@ import DocActions from '../DocActions';
 import { __, sprintf } from '@wordpress/i18n';
 import QuickEditModal from './QuickEditModal';
 import extractedTitle from '../../utils/extractedTitle';
+import UpgradePopup from '../ProPreviews/common/UpgradePopup';
 
 const ArticleChildrens = ( { article, section, sections, setShowArticles, isAllowComments } ) => {
+  // Note: Level 3 articles cannot be dragged due to @dnd-kit nested context limitation
+  // Drag-and-drop only works for Level 2 articles in the root context
+
   const { modified: lastModifiedDate, comment_count: commentCount } = article;
 
   const formattedDateString = () => {
@@ -22,7 +26,10 @@ const ArticleChildrens = ( { article, section, sections, setShowArticles, isAllo
 
   if ( section ) {
     return (
-      <div key={ section?.id } className="flex items-center bg-white border-b border-[#D9D9D9] py-4">
+      <div
+        key={ section?.id }
+        className="flex items-center bg-white border-b border-[#D9D9D9] py-4"
+      >
         <div className="flex items-center w-full group">
           <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
             <div className="flex items-center">
@@ -75,7 +82,34 @@ const ArticleChildrens = ( { article, section, sections, setShowArticles, isAllo
                       { __( 'Draft', 'wedocs' ) }
                     </div>
                   ) }
+                </a>
+
+                { /* Add Nested Article Button - Pro Feature */ }
+                { ! Boolean( parseInt( isAdminRestrictedArticle ) ) && (
+                  <UpgradePopup className={ `mr-4` }>
+                    <div
+                      className='tooltip cursor-pointer flex items-center justify-center w-3.5 h-3.5'
+                      data-tip={ __( 'Create Nested Article (Pro)', 'wedocs' ) }
+                    >
+                      <span className="items-center dashicons dashicons-plus-alt2 hidden group-hover:inline-flex text-2xl font-medium text-[#d1d5db] hover:text-indigo-700"></span>
+                    </div>
+                  </UpgradePopup>
+                ) }
 
+                <a
+                  target="_blank"
+                  href={
+                    ! Boolean( parseInt( wp?.hooks?.applyFilters(
+                      'wedocs_check_is_admin_restricted_article',
+                      false,
+                      article?.id
+                    ) ) ) ?
+                      `${ weDocsAdminVars.adminUrl }post.php?post=${ article?.id }&action=edit` :
+                      `${ window.location.origin }/?p=${ article?.id }`
+                  }
+                  className={ `${ ! Boolean( parseInt( isAdminRestrictedArticle ) ) ? 'mr-4' : '' } flex items-center flex-shrink-0 text-base group font-medium text-gray-700 !shadow-none` }
+                  rel="noreferrer"
+                >
                   { ! Boolean( parseInt( isAdminRestrictedArticle ) ) && (
                     <>
                       <QuickEditModal

readme.md

@@ -175,7 +175,7 @@ const DocSections = ( { docs, section, sections, searchValue } ) => {
                       className='tooltip cursor-pointer flex items-center justify-center w-3.5 h-3.5'
                       data-tip={ __( 'Create', 'wedocs' ) }
                     >
-                      <span className="flex items-center dashicons dashicons-plus-alt2 hidden group-hover:inline-flex text-2xl font-medium text-[#d1d5db] hover:text-indigo-700"></span>
+                      <span className="items-center dashicons dashicons-plus-alt2 hidden group-hover:inline-flex text-2xl font-medium text-[#d1d5db] hover:text-indigo-700"></span>
                     </div>
                   </AddArticleModal>
                   <a
@@ -286,7 +286,7 @@ const DocSections = ( { docs, section, sections, searchValue } ) => {
                   setNeedSortingStatus={ setNeedSortingStatus }
                 >
                   <SortableContext
-                    items={ articles }
+                    items={ articles?.map( a => a.id ) || [] }
                     strategy={ verticalListSortingStrategy }
                   >
                     { articles?.map( ( article ) => (

src/components/DocListing/ArticleChildrens.js

@@ -5,11 +5,12 @@ import { __, sprintf } from '@wordpress/i18n';
 import QuickEditModal from './QuickEditModal';
 import { useSortable } from '@dnd-kit/sortable';
 import extractedTitle from '../../utils/extractedTitle';
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment, useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import docStore from '../../data/docs';
 import ArticleChildrens from './ArticleChildrens';
 import AddArticleModal from '../AddArticleModal';
+import DraggableDocs from '../DraggableDocs';
 
 const SectionArticles = ( { article, articles, isAdmin, section, sections, searchValue, setShowArticles, isAllowComments } ) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
@@ -33,13 +34,53 @@ const SectionArticles = ( { article, articles, isAdmin, section, sections, searc
 
   const articleChildrens = useSelect(
     ( select ) => select( docStore ).getArticleChildrens( parseInt( article?.id ) ),
+    [ article?.id ]
+  );
+
+  const [ childrenItems, setChildrenItems ] = useState( articleChildrens || [] );
+  const [ needSortingStatusLocal, setNeedSortingStatusLocal ] = useState( false );
+
+  const sortableStatus = useSelect(
+    ( select ) => select( docStore ).getSortingStatus(),
     []
   );
 
-  const filteredArticleChildrens = articleChildrens?.filter(
-    ( children ) => children?.title?.rendered?.toLowerCase().includes( searchValue.toLowerCase() )
+  const needSortableStatus = useSelect(
+    ( select ) => select( docStore ).getNeedSortingStatus(),
+    []
   );
 
+  // Update children items when articleChildren changes
+  useEffect( () => {
+    if ( articleChildrens ) {
+      setChildrenItems( articleChildrens );
+    }
+  }, [ articleChildrens, article?.id ] );
+
+  // Sync local sorting status with global status
+  useEffect( () => {
+    setNeedSortingStatusLocal( needSortableStatus );
+  }, [ needSortableStatus ] );
+
+  // Handle sorting when needed
+  useEffect( () => {
+    if ( needSortingStatusLocal && childrenItems.length > 0 ) {
+      const { dispatch } = wp.data;
+      dispatch( docStore )
+        .updateSortingStatus( { sortable_status: sortableStatus, documentations: childrenItems } )
+        .then( ( result ) => setNeedSortingStatusLocal( result?.sorting ) )
+        .catch( ( error ) => {
+          console.error( 'Failed to update sorting status:', error );
+        } );
+    }
+  }, [ needSortingStatusLocal, childrenItems, sortableStatus ] );
+
+  const filteredArticleChildrens = searchValue
+    ? childrenItems?.filter(
+        ( children ) => children?.title?.rendered?.toLowerCase().includes( searchValue.toLowerCase() )
+      )
+    : childrenItems;
+
   const isAdminRestrictedArticle = wp?.hooks?.applyFilters(
     'wedocs_check_is_admin_restricted_article',
     false,
@@ -55,13 +96,17 @@ const SectionArticles = ( { article, articles, isAdmin, section, sections, searc
           { ...attributes }
           ref={ setNodeRef }
         >
-          <div className={ `pr-3.5 py-0.5 cursor-grab` }>
+          <div
+            className={ `pr-3.5 py-0.5 cursor-grab hover:bg-gray-100 rounded transition-colors` }
+            { ...listeners }
+            style={{ touchAction: 'none' }}
+          >
             <svg
               width="20"
               height="21"
               fill="none"
-              { ...listeners }
               xmlns="http://www.w3.org/2000/svg"
+              className="pointer-events-none"
             >
               <path
                 fillRule="evenodd"
@@ -133,7 +178,7 @@ const SectionArticles = ( { article, articles, isAdmin, section, sections, searc
                       className='tooltip cursor-pointer flex items-center justify-center w-3.5 h-3.5'
                       data-tip={ __( 'Create', 'wedocs' ) }
                     >
-                      <span className="flex items-center dashicons dashicons-plus-alt2 hidden group-hover:inline-flex text-2xl font-medium text-[#d1d5db] hover:text-indigo-700"></span>
+                      <span className="items-center dashicons dashicons-plus-alt2 hidden group-hover:inline-flex text-2xl font-medium text-[#d1d5db] hover:text-indigo-700"></span>
                     </div>
                   </AddArticleModal>
 
@@ -232,7 +277,7 @@ const SectionArticles = ( { article, articles, isAdmin, section, sections, searc
                 </div>
               </div>
               <div className="flex items-center gap-5 flex-shrink-0 mt-4 sm:mt-0 sm:ml-5">
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-3">
                   { /* Render admin restriction icon. */ }
                   { wp?.hooks?.applyFilters(
                     'wedocs_article_privacy_action',
@@ -297,21 +342,48 @@ const SectionArticles = ( { article, articles, isAdmin, section, sections, searc
           </div>
         </div>
 
+        { /* Level 3 children - no DraggableDocs wrapper (nested context doesn't work) */ }
         { !isDragging && ( filteredArticleChildrens?.length > 0 ) && (
           <div
-            style={ style }
             className={ `my-1 article-children pl-4 sm:pl-16 bg-white` }
           >
-            { filteredArticleChildrens?.map( ( childrenDoc ) => (
-              <ArticleChildrens
-                section={ article }
-                sections={ articles }
-                key={ childrenDoc.id }
-                article={ childrenDoc }
-                setShowArticles={ setShowArticles }
-                isAllowComments={ isAllowComments }
-              />
-            ) ) }
+            { filteredArticleChildrens?.map( ( childrenDoc ) => {
+                // Allow pro version to override the article children component
+                const ChildComponent = wp?.hooks?.applyFilters(
+                  'wedocs_article_children_component',
+                  ArticleChildrens,
+                  {
+                    section: article,
+                    sections: articles,
+                    article: childrenDoc,
+                    setShowArticles: setShowArticles,
+                    isAllowComments: isAllowComments,
+                    searchValue: searchValue,
+                    DocActions: DocActions,
+                    QuickEditModal: QuickEditModal,
+                    AddArticleModal: AddArticleModal,
+                    DraggableDocs: DraggableDocs,
+                  }
+                );
+
+                return (
+                  <ChildComponent
+                    section={ article }
+                    sections={ articles }
+                    key={ childrenDoc.id }
+                    article={ childrenDoc }
+                    setShowArticles={ setShowArticles }
+                    isAllowComments={ isAllowComments }
+                    searchValue={ searchValue }
+                    DocActions={ DocActions }
+                    QuickEditModal={ QuickEditModal }
+                    AddArticleModal={ AddArticleModal }
+                    DraggableDocs={ DraggableDocs }
+                    depth={ 2 }
+                    maxDepth={ 7 }
+                  />
+                );
+              } ) }
           </div>
         ) }
       </Fragment>

src/components/DocListing/DocSections.js

@@ -1,6 +1,7 @@
 import {
   DndContext,
   closestCenter,
+  pointerWithin,
   PointerSensor,
   useSensor,
   useSensors,
@@ -11,7 +12,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { dispatch } from '@wordpress/data';
 import docsStore from '../data/docs';
 
-const DraggableDocs = ( { setItems, children, setNeedSortingStatus } ) => {
+const DraggableDocs = ( { setItems, children, setNeedSortingStatus, parentId = null } ) => {
   const sensors = useSensors(
     useSensor( PointerSensor, {
       activationConstraint: {
@@ -24,7 +25,7 @@ const DraggableDocs = ( { setItems, children, setNeedSortingStatus } ) => {
   const handleDragEnd = ( event ) => {
     const { active, over } = event;
 
-    if ( active?.id !== over?.id ) {
+    if ( active?.id !== over?.id && over?.id ) {
       setItems( ( elements ) => {
         const oldItem = elements.find(
           ( element ) => element?.id === active?.id
@@ -33,6 +34,12 @@ const DraggableDocs = ( { setItems, children, setNeedSortingStatus } ) => {
         const newItem = elements.find(
           ( element ) => element?.id === over?.id
         );
+
+        // Only allow reordering if both items exist in the current elements array
+        if ( !oldItem || !newItem ) {
+          return elements;
+        }
+
         const oldIndex = elements.indexOf( oldItem );
         const newIndex = elements.indexOf( newItem );
         const updatedOrder = arrayMove( elements, oldIndex, newIndex );
@@ -50,12 +57,15 @@ const DraggableDocs = ( { setItems, children, setNeedSortingStatus } ) => {
     }
   };
 
+  // Use pointerWithin for better nested context support
+  const collisionDetectionStrategy = parentId ? pointerWithin : closestCenter;
+
   return (
     <DndContext
       sensors={ sensors }
-      collisionDetection={ closestCenter }
+      collisionDetection={ collisionDetectionStrategy }
       onDragEnd={ handleDragEnd }
-      class="z-10"
+      id={ parentId ? `parent-${parentId}` : 'root-context' }
     >
       { children }
     </DndContext>

src/components/DocListing/SectionArticles.js

@@ -0,0 +1,81 @@
+import { __ } from '@wordpress/i18n';
+import Overlay from './common/Overlay';
+import Switcher from '../Switcher';
+import { useState } from '@wordpress/element';
+
+const SocialShareSettings = ( { settingsData, setSettings } ) => {
+	const [ showOverlay, setShowOverlay ] = useState( false );
+	const { general } = settingsData;
+	const SwitcherComponent = window?.switchComponent || Switcher;
+
+	return (
+		<section>
+			<div className="shadow sm:rounded-md bg-white min-h-[500px] relative">
+				<div className="py-4 px-8 sm:px-8 sm:py-4">
+					<h2 className="text-gray-900 font-medium text-lg">
+						{ __( 'Social Share', 'wedocs' ) }
+					</h2>
+				</div>
+				<hr className="h-px !bg-gray-200 border-0 dark:!bg-gray-200" />
+				<div 
+					className="pt-6 pb-20 px-8 grid grid-cols-4 gap-5 relative"
+					onMouseEnter={ () => setShowOverlay( true ) }
+					onMouseLeave={ () => setShowOverlay( false ) }
+				>
+					<div className='col-span-12' >
+						<div className="settings-content flex items-center justify-between">
+							<div className="settings-heading md:min-w-[300px] space-x-2 items-center flex flex-1">
+								<label
+									className="block text-sm font-medium text-gray-600"
+									id="headlessui-listbox-label-social-share"
+								>
+									{ __( 'Enable Social Share', 'wedocs' ) }
+								</label>
+								<div
+									className="tooltip cursor-pointer ml-2 z-[9999]"
+									data-tip={ __(
+										'Enable social sharing buttons on documentation articles',
+										'wedocs'
+									) }
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="18"
+										height="18"
+										fill="none"
+									>
+										<path
+											d="M9 16A7 7 0 1 0 9 2a7 7 0 0 0 0 14ZM9 6v4M9 14h.01"
+											stroke="#6b7280"
+											strokeWidth="1.5"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										/>
+									</svg>
+								</div>
+							</div>
+							<div className="settings-field flex items-center w-full max-w-[490px] ml-auto flex-2">
+								<div className="flex items-center space-x-2">
+									<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">
+										PRO
+									</span>
+									<SwitcherComponent
+										name="social_share"
+										settingsPanel={ general }
+										settingsData={ settingsData }
+										setSettings={ setSettings }
+										panelName={ `general` }
+										isEnabled={ false }
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<Overlay classes={ `${ showOverlay ? 'flex items-center justify-center' : 'hidden' }` } />
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default SocialShareSettings;