diff --git a/package-lock.json b/package-lock.json index a8c9939..db505f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "license": "AGPL-3.0-or-later", "dependencies": { + "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.3", "fetch-jsonp": "^1.3.0", "next": "^14.2.14", @@ -367,7 +368,6 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" diff --git a/package.json b/package.json index c265e9f..adde3ab 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.3", "fetch-jsonp": "^1.3.0", "next": "^14.2.14", diff --git a/src/app/advanced/[engine]/index.html/page.tsx b/src/app/advanced/[engine]/index.html/page.tsx index d9da526..93bc04f 100644 --- a/src/app/advanced/[engine]/index.html/page.tsx +++ b/src/app/advanced/[engine]/index.html/page.tsx @@ -6,6 +6,7 @@ import TestForm from './TestForm'; //import { testRegexAction } from './testRegexAction'; //import OptionsInput from './OptionsInput'; import { TestInput } from '@/types/TestInput'; +import { HelpButton } from '@/components/HelpButton'; export async function generateMetadata({ params }: { params: { engine: string } }) { const engine = getEngine(params.engine); @@ -48,7 +49,7 @@ export default function Page({ params }: { params: { engine: string } }) { <>

{engine.short_name} Regular Expression Test Page

- {engine.help_label} +

diff --git a/src/app/share/index.html/page.tsx b/src/app/share/index.html/page.tsx index 00ba7aa..909a204 100644 --- a/src/app/share/index.html/page.tsx +++ b/src/app/share/index.html/page.tsx @@ -20,7 +20,7 @@ async function lookupShareCode(shareCode: string): Promise { //shareCode = "yyyyfud6z4r"; const shareApiUrl = shareCode.indexOf('-') === -1 ? `https://appengine.regexplanet.com/share/index.json?share=${shareCode}` - : `https://www.regex.zone/share/lookup.json?share=${shareCode}`; + : `https://www.regex.zone/sharing/lookup.json?share=${shareCode}`; const response = await fetch(shareApiUrl); const data = await response.json(); console.log(`server response=${JSON.stringify(data)}`); @@ -29,7 +29,7 @@ async function lookupShareCode(shareCode: string): Promise { message: `Share code ${shareCode} found!`, messageType: 'success', shareCode, - regex: data.recipe, + regex: data.regex /* regex.zone */ || data.recipe /* old regexplanet */, }; } return { diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx new file mode 100644 index 0000000..6ef265b --- /dev/null +++ b/src/components/HelpButton.tsx @@ -0,0 +1,64 @@ +'use client' +import { RegexEngine } from "@/engines/RegexEngine"; +import React from "react"; +import { useState, useEffect, useRef } from 'react'; +import { createPopper } from '@popperjs/core'; + +type HelpButtonDropdownProps = { + links: Record; +}; + +export function HelpButtonDropDown({ links }: HelpButtonDropdownProps) { + const [showPopover, setShowPopover] = useState(false); + const buttonRef = useRef(null); + const popoverRef = useRef(null); + + useEffect(() => { + if (showPopover && buttonRef.current && popoverRef.current) { + const popper = createPopper(buttonRef.current, popoverRef.current, { + placement: 'bottom-end', // Customize placement as needed + modifiers: [ + { + name: 'offset', + options: { + offset: [0, 0], // Adjust offset as needed + }, + }, + ], + }); + + return () => { + popper.destroy(); + }; + } + }, [showPopover]); + + return ( +
+ + { showPopover && (
    + { Object.entries(links).map(([key, value]) =>
  • {key}
  • ) } +
)} +
+ ); +} + +type HelpButtonProps = { + engine: RegexEngine; +}; + +export function HelpButton({ engine }: HelpButtonProps) { + return ( +
+ {engine.help_label} + { Object.keys(engine.links).length > 0 ? : null } +
+ ) +}