{
+ el?.setAttribute('style', `position-anchor: --${anchorId}`);
+ if(typeof ref === 'function') ref(el);
+ else if(ref) ref.current = el;
+ }}
className={`anchored-box${visible ? ' active' : ''} ${className}`}
- style={{ positionAnchor: `--${anchorId}` }} // setting anchor properties here allows greater recyclability.
{...props}
>
{children}
diff --git a/client/components/Anchored.less b/client/components/Anchored.less
index aeb9f1d5f..1e4c3be11 100644
--- a/client/components/Anchored.less
+++ b/client/components/Anchored.less
@@ -1,11 +1,9 @@
.anchored-box {
- position : absolute;
- visibility : hidden;
- justify-self : anchor-center;
- @supports (inset-block-start: anchor(bottom)) {
- inset-block-start : anchor(bottom);
- }
+ position : absolute;
+ visibility : hidden;
+ justify-self : anchor-center;
+ inset-block-start : anchor(bottom);
&.active { visibility : visible; }
}
\ No newline at end of file
diff --git a/client/components/anchorPositioningPolyfill.js b/client/components/anchorPositioningPolyfill.js
new file mode 100644
index 000000000..df4ab240c
--- /dev/null
+++ b/client/components/anchorPositioningPolyfill.js
@@ -0,0 +1,27 @@
+/*
+This file basically checks support for Anchor Positioning API in the browser,
+and then loads the Oddbird polyfill if support is lacking.
+*/
+
+let polyfillPromise;
+
+// look for `anchorName` in the computed styles
+const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style;
+
+export const bootstrapAnchorPositioningPolyfill = ()=>{
+ if(supportsAnchorPositioning()) return Promise.resolve(false);
+ if(polyfillPromise) return polyfillPromise;
+
+ polyfillPromise = (async ()=>{
+ try {
+ const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn');
+ await polyfill();
+ return true;
+ } catch (error){
+ polyfillPromise = undefined;
+ throw error;
+ }
+ })();
+
+ return polyfillPromise;
+};
\ No newline at end of file
diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
new file mode 100644
index 000000000..0848f3fdd
--- /dev/null
+++ b/client/components/dropdown/dropdown.jsx
@@ -0,0 +1,123 @@
+/**
+ * A dropdown menu component that uses the Anchor Positioning API to position the elements. It supports nested submenus as well.
+ * Anchor Positioning is now supported in all major browsers. A polyfill is conditionally loaded for older browsers.
+ *
+ * As-is, the menus will always open down aligned on left to trigger, submenus open to the right initially.
+ * If no space, menus will still open down, but aligned to the right of the trigger. Submenus will flip to the other side of the top menu.
+ * This could be customized either in more specific CSS, or as a `direction` prop on the component (in future iterations).
+ *
+ * @param {string} props.groupName - Name of the menu. Appears as the trigger text.
+ * @param {string} [props.icon] - Icon to display in the trigger.
+ * @param {string} [props.color] - Color class to add to the trigger.
+ * @param {string} [props.className] - Additional classes for the menu wrapper.
+ * @param {React.ReactNode} [props.customTrigger] - Custom element to use as a trigger.
+ * @param {React.ReactNode} [props.children] - Child elements to render in the menu.
+ * @returns {React.JSX.Element}
+ */
+
+import './dropdown.less';
+import React, { useEffect, useId, useRef } from 'react';
+import _ from 'lodash';
+
+// use react context to keep track of the menu depth (menus in menus)
+const MenuDepthContext = React.createContext(0);
+
+const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
+ const reactId = useId();
+ const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+ const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
+ const anchorName = `--${menuId}`;
+ const depth = React.useContext(MenuDepthContext);
+
+ // A menu is a submenu if depth > 0
+ const isSubMenu = depth > 0;
+
+ const triggerRef = useRef(null);
+ const menuRef = useRef(null);
+
+ // use setAttribute instead of the React style prop because React strips unknown CSS
+ // properties (like anchor-name) from inline styles in browsers that don't support them.
+ // setAttribute writes raw CSS text that the anchor positioning polyfill can read
+ useEffect(()=>{
+ triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
+ menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
+ }, [anchorName]);
+
+ // hide popover with click inside iframe (not supported by light dismiss)
+ useEffect(()=>{
+ const menuElement = document.getElementById(menuId);
+ if(!menuElement) return;
+
+ const handleClick = ()=>{
+ if(menuElement.matches(':popover-open')) {
+ menuElement.hidePopover();
+ }
+ };
+ // Listen for clicks from both the main document and the iframe
+ document.addEventListener('iframe-click', handleClick);
+ return ()=>{
+ document.removeEventListener('iframe-click', handleClick);
+ };
+ }, [menuId]);
+
+ // the trigger is the piece placed inside the opening button of the menu.
+ // This method allows for creating a generic span with the group name,
+ // or using a bespoke element (like a graphic) passed in from props to be used as the trigger
+ const trigger = (groupName = 'menu', icon = '')=>{
+ if(!customTrigger){
+ return <>
+
{groupName}
+ ;
+ } else {
+ return customTrigger;
+ }
+ };
+
+ // handle clicks on menu items. By default, actions do dismiss.
+ const handleMenuActionClick = (event)=>{
+ const menuElement = menuRef.current;
+ if(!menuElement) return;
+
+ const menuAction = event.target.closest('button, a, [role="menuitem"]');
+ if(!menuAction || !menuElement.contains(menuAction)) return;
+
+ // don't dismiss if the target triggers a submenu
+ if(menuAction.hasAttribute('popovertarget')) return;
+
+ // don't dismiss if the target has `no-dismiss` attribute
+ const noDismissValue = menuAction.getAttribute('no-dismiss')?.toLowerCase();
+ if(noDismissValue === '' || noDismissValue === 'true') return;
+
+ document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export { Dropdown };
\ No newline at end of file
diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less
new file mode 100644
index 000000000..28a26954c
--- /dev/null
+++ b/client/components/dropdown/dropdown.less
@@ -0,0 +1,24 @@
+.menu-wrapper {
+ position: relative;
+ &:is(.menu-bar > .menu-section > .menu-wrapper){
+ display: inline-block;
+ }
+}
+
+.menu-list {
+ position : fixed;
+ z-index : 1000;
+ top : anchor(bottom);
+ left : anchor(left);
+ position-try: flip-inline flip-block;
+ color: inherit; // [popover] gets a `canvastext` color value from useragent.
+ > .menu-wrapper {
+ position:relative;
+ > .menu-list {
+ margin: 0 0px;
+ top : anchor(top);
+ left : anchor(right);
+ position-try: flip-inline;
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 24cf9306f..05ca73bea 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -11,7 +11,7 @@ import ErrorBar from './errorBar/errorBar.jsx';
import ToolBar from './toolBar/toolBar.jsx';
//TODO: move to the brew renderer
-import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
+import RenderWarnings from '@components/renderWarnings/renderWarnings.jsx';
import NotificationPopup from './notificationPopup/notificationPopup.jsx';
import Frame from 'react-frame-component';
import dedent from 'dedent';
@@ -29,6 +29,7 @@ const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
const INITIAL_CONTENT = dedent`
+
Rendered Brew Content
@@ -210,7 +211,7 @@ const BrewRenderer = (props)=>{
classes = [classes, injectedTags.classes].join(' ').trim();
attributes = injectedTags.attributes;
if(global.enablev4) {
- if (attributes && Object.hasOwn(attributes, 'hbtemplate')) {
+ if(attributes && Object.hasOwn(attributes, 'hbtemplate')) {
pageTemplates[index] = attributes['hbtemplate'];
}
}
@@ -220,7 +221,7 @@ const BrewRenderer = (props)=>{
if(!pageTemplates[index]) {
for (let i=index;i>=0; i--) {
// If one is found, add the template attribute
- if (pageTemplates[i]) attributes['hbtemplate'] = pageTemplates[i];
+ if(pageTemplates[i]) attributes['hbtemplate'] = pageTemplates[i];
}
}
}
@@ -348,10 +349,11 @@ const BrewRenderer = (props)=>{
0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
{/*render in iFrame so broken code doesn't crash the site.*/}
- {emitClick();}}
+ sandbox="allow-same-origin allow-modals allow-top-navigation"
>
;
diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
index 5f4fc5608..9ef30917d 100644
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
import request from '../../utils/request-middleware.js';
import Markdown from '@shared/markdown.js';
-import Dialog from '../../../components/dialog.jsx';
+import Dialog from '@components/dialog.jsx';
const DISMISS_BUTTON = ;
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 97d996633..16c89ea59 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,7 +3,7 @@ import './toolBar.less';
import React, { useState, useEffect } from 'react';
import _ from 'lodash';
-import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+import { Anchored, AnchoredBox, AnchoredTrigger } from '@components/Anchored.jsx';
const MAX_ZOOM = 300;
const MIN_ZOOM = 10;
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 017cb7933..f500bebeb 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -5,7 +5,7 @@ import createReactClass from 'create-react-class';
import _ from 'lodash';
import dedent from 'dedent';
-import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
+import CodeEditor from '@components/codeEditor/codeEditor.jsx';
import SnippetBar from './snippetbar/snippetbar.jsx';
import MetadataEditor from './metadataEditor/metadataEditor.jsx';
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 8d6ccb890..2ce76188c 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -4,7 +4,7 @@ import React from 'react';
import createReactClass from 'create-react-class';
import _ from 'lodash';
import request from '../../utils/request-middleware.js';
-import Combobox from '../../../components/combobox.jsx';
+import Combobox from '@components/combobox.jsx';
import TagInput from '../tagInput/tagInput.jsx';
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index ac9c7943a..dc921ffbb 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -2,6 +2,7 @@
import './snippetbar.less';
import React from 'react';
import createReactClass from 'create-react-class';
+import { Dropdown } from '@components/dropdown/dropdown.jsx';
import _ from 'lodash';
import cx from 'classnames';
@@ -320,36 +321,33 @@ const SnippetGroup = createReactClass({
};
},
handleSnippetClick : function(e, snippet){
- e.stopPropagation();
this.props.onSnippetClick(execute(snippet.gen, this.props));
},
renderSnippets : function(snippets){
return _.map(snippets, (snippet)=>{
- return this.handleSnippetClick(e, snippet)}>
-
-
{snippet.name}
- {snippet.experimental &&
beta}
- {snippet.disabled &&
disabled}
- {snippet.subsnippets && <>
-
-
+ if(!snippet.subsnippets){
+ return (
+
+ );
+ } else if(snippet.subsnippets){
+ return (
+
{this.renderSnippets(snippet.subsnippets)}
-
}
-
-
-
- {this.props.groupName}
-
-
- {this.renderSnippets(this.props.snippets)}
-
-