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 } }) {
<>
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 (
+
+ )
+}