Develop

components/MarkdownExtended.js

@@ -4,25 +4,88 @@ import remarkGfm from 'remark-gfm'
 
 import 'github-markdown-css/github-markdown-light.css'
 
-function MarkdownExtended({ children, className }) {
-  const content = (typeof children === 'string' ? children : '')
-    .replace(/< *br *\/?>/gi, '\n')
-    .replaceAll('\\n', '\n')
+import TaContentInfo from './Panel/Resources/TAContentInfo'
 
-  const convertYoutube = (props) => {
+function MarkdownExtended({ children, className, onLinkClick, config, setItem }) {
+  const convertRcLinksToMarkdownLinks = (text) => {
+    if (!config?.resource?.repo) return text
+    const locale = config.resource.repo.split('_')[0]
+    return text
+      .replace(/\*\//g, locale + '/')
+      .replace(/\[\[(rc:\/\/\S+?)\]\]/g, (_, url) => `[${url}](${url})`)
+      .replace(/\[(\d+:\d+)\]\(\.\.\/\d+\/\d+\.md\)/g, (_, time) => time)
+  }
+
+  const content = convertRcLinksToMarkdownLinks(
+    (typeof children === 'string' ? children : '')
+      .replace(/< *br *\/?>/gi, '\n')
+      .replaceAll('\\n', '\n')
+  )
+
+  const handleLinkClick = (href) => {
+    if (href.endsWith('.md')) {
+      onLinkClick?.(href)
+    } else if (href.startsWith('rc://')) {
+      onLinkClick?.(href)
+    }
+  }
+
+  const parsingRef = (props) => {
     function getVideoID(userInput) {
-      var res = userInput.match(
+      const res = userInput.match(
         /^.*(?:(?:youtu.be\/)|(?:v\/)|(?:\/u\/\w\/)|(?:embed\/)|(?:watch\?))\??v?=?([^#\&\?]*).*/
       )
-      if (res) return res[1]
-      return false
+      return res ? res[1] : false
     }
+
+    const href = props?.node?.properties?.href
+    if (href?.includes('translate') && href.includes('ta')) {
+      return (
+        <TaContentInfo
+          href={href}
+          onClick={handleLinkClick}
+          config={config}
+          setItem={setItem}
+        >
+          {props.children}
+        </TaContentInfo>
+      )
+    }
+
+    if (href?.includes('translate')) {
+      return (
+        <a
+          href={href}
+          onClick={(e) => {
+            e.preventDefault()
+            handleLinkClick(href)
+          }}
+        >
+          {props.children}
+        </a>
+      )
+    }
+
+    if (props.href.endsWith('.md')) {
+      return (
+        <a
+          href={props.href}
+          onClick={(e) => {
+            e.preventDefault()
+            handleLinkClick(props.href)
+          }}
+        >
+          {props.children}
+        </a>
+      )
+    }
+
     const youtubeId = getVideoID(props?.href)
     return youtubeId ? (
       <iframe
         src={`https://youtube.com/embed/${youtubeId}`}
         frameBorder="0"
-        allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
         style={{ width: '100%', aspectRatio: '16/9', outline: 'none' }}
       ></iframe>
@@ -36,7 +99,7 @@ function MarkdownExtended({ children, className }) {
       rehypePlugins={[rehypeRaw]}
       className={className}
       components={{
-        a: convertYoutube,
+        a: parsingRef,
       }}
       remarkPlugins={[remarkGfm]}
     >

components/ModalInSideBar.js

@@ -7,6 +7,7 @@ function ModalInSideBar({
   modalTitle,
   buttonTitle,
   collapsed,
+  contentClassName = 'p-4',
 }) {
   return (
     <>
@@ -31,7 +32,9 @@ function ModalInSideBar({
               <Close className="h-8 stroke-th-secondary-10" />
             </button>
           </div>
-          <div className="h-full overflow-y-auto overflow-x-hidden p-4 lg:px-7">
+          <div
+            className={`h-full overflow-y-auto overflow-x-hidden px-4 sm:px-7 ${contentClassName}`}
+          >
             {children}
           </div>
         </div>

components/Panel/Resources/TAContentInfo.js

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { getFile } from 'utils/apiHelper'
+import { getWordsAcademy } from 'utils/helper'
+
+import Loading from 'public/icons/progress.svg'
+
+function TaContentInfo({ href, config, setItem, returnImmediately = false }) {
+  const [words, setWords] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const hrefRef = useRef(href)
+
+  useEffect(() => {
+    if (!config || !config.resource) {
+      console.error('Config object is missing or invalid.')
+      return
+    }
+
+    const getData = async () => {
+      setIsLoading(true)
+      try {
+        const zip = await getFile({
+          owner: config.resource.owner,
+          repo: config.resource.repo.split('_')[0] + '_ta',
+          commit: config.resource.commit,
+          apiUrl: '/api/git/ta',
+        })
+        const fetchedWords = await getWordsAcademy({
+          zip,
+          href: hrefRef.current,
+        })
+        setWords(fetchedWords)
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    getData()
+  }, [config, returnImmediately, setItem])
+
+  if (isLoading) {
+    return (
+      <Loading className="progress-custom-colors right-2 m-auto w-6 animate-spin stroke-th-primary-100" />
+    )
+  }
+
+  if (!words) return null
+
+  const description = words['title'] || words.title || hrefRef.current
+  const title = words['sub-title'] || words.sub || hrefRef.current
+  const text = words['01'] || hrefRef.current
+  const item = { title, text, type: 'ta' }
+
+  if (returnImmediately) {
+    return null
+  }
+
+  return (
+    <div
+      className="inline-block cursor-pointer text-[#0969da] hover:underline"
+      onClick={(e) => {
+        e.preventDefault()
+        setItem?.(item)
+      }}
+    >
+      {description}
+    </div>
+  )
+}
+export default TaContentInfo

components/Panel/Resources/TN.js

@@ -7,11 +7,15 @@ import { useQuotesTranslation } from '@texttree/tn-quote'
 
 import { Placeholder, TNTWLContent } from '../UI'
 
-import { filterNotes } from 'utils/helper'
+import { getFile } from 'utils/apiHelper'
+import { filterNotes, getWordsAcademy } from 'utils/helper'
 import { useGetResource, useScroll } from 'utils/hooks'
 
 function TN({ config, url, toolName }) {
   const [item, setItem] = useState(null)
+  const [href, setHref] = useState(null)
+
+  const [parentItem, setParentItem] = useState(null)
   const [tnotes, setTnotes] = useState([])
   const { isLoading, data } = useGetResource({ config, url })
   const { extraTNotes, setTnotes: updateTnotes } = useQuotesTranslation({
@@ -28,6 +32,42 @@ function TN({ config, url, toolName }) {
           config.mainResource.repo,
     },
   })
+
+  useEffect(() => {
+    const fetchWordData = async () => {
+      if (href && data.length > 0) {
+        if (href?.includes('-')) {
+          const result = href.split('/')[1]
+          const zip = await getFile({
+            owner: config.resource.owner,
+            repo: config.resource.repo.split('_')[0] + '_ta',
+            commit: config.resource.commit,
+            apiUrl: '/api/git/ta',
+          })
+
+          const hrefNew = `rc://${config.resource.repo.split('_')[0]}/ta/man/translate/${result}`
+          const fetchedWords = await getWordsAcademy({
+            zip,
+            href: hrefNew,
+          })
+          const title = fetchedWords?.['sub-title'] || fetchedWords?.sub || href
+          const text = fetchedWords?.['01'] || href
+          const type = 'ta'
+          const item = {
+            title,
+            text,
+            type,
+          }
+          setItem?.(item)
+        }
+      }
+    }
+
+    fetchWordData()
+
+    // eslint-disable-next-line
+  }, [href, config.resource.repo])
+
   useEffect(() => {
     if (extraTNotes) {
       const _data = []
@@ -50,10 +90,18 @@ function TN({ config, url, toolName }) {
       ) : (
         <div className="relative h-full">
           {item ? (
-            <TNTWLContent setItem={setItem} item={item} />
+            <TNTWLContent
+              setItem={setItem}
+              item={item}
+              parentItem={parentItem}
+              setParentItem={setParentItem}
+              setHref={setHref}
+              config={config}
+            />
           ) : (
             <TNList
               setItem={setItem}
+              setParentItem={setParentItem}
               data={tnotes}
               toolName={toolName}
               isLoading={isLoading || tnotes}
@@ -67,7 +115,7 @@ function TN({ config, url, toolName }) {
 
 export default TN
 
-function TNList({ setItem, data, toolName, isLoading }) {
+function TNList({ setItem, setParentItem, data, toolName, isLoading }) {
   const { t } = useTranslation()
   const [verses, setVerses] = useState([])
   const { highlightId, handleSaveScroll } = useScroll({
@@ -103,9 +151,15 @@ function TNList({ setItem, data, toolName, isLoading }) {
                         }`}
                         onClick={() => {
                           handleSaveScroll(verseNumber, note.ID)
+                          setParentItem({
+                            text: note.Note,
+                            title: note.Quote || note.origQuote,
+                            type: 'tn',
+                          })
                           setItem({
                             text: note.Note,
                             title: note.Quote || note.origQuote,
+                            type: 'tn',
                           })
                         }}
                       >