diff --git a/apps/roam/src/components/MinimalReproduction.tsx b/apps/roam/src/components/MinimalReproduction.tsx new file mode 100644 index 000000000..a9b03659c --- /dev/null +++ b/apps/roam/src/components/MinimalReproduction.tsx @@ -0,0 +1,179 @@ +import React, { useState, useEffect } from "react"; +import ReactDOM from "react-dom"; +import { + Button, + Dialog, + InputGroup, + Menu, + MenuItem, + Popover, +} from "@blueprintjs/core"; + +const PRECONFIGURED_MENU_ITEMS = [ + { text: "Option Alpha", id: "alpha" }, + { text: "Option Beta", id: "beta" }, + { text: "Option Gamma", id: "gamma" }, +]; + +const MinimalFormDialog = ({ + onSubmit, +}: { + onSubmit: (value: string) => void; +}) => { + const [value, setValue] = useState(""); + + return ( + +
+ setValue(e.target.value)} + /> +
+
+
+
+ ); +}; + +export const renderMinimalFormDialog = ({ + updateBlock, +}: { + updateBlock: (value: string) => void; +}) => { + const container = document.createElement("div"); + document.body.appendChild(container); + + ReactDOM.render( + { + updateBlock(value); + ReactDOM.unmountComponentAtNode(container); + if (container.parentNode) { + container.parentNode.removeChild(container); + } + }} + />, + container, + ); +}; + +export const NodeMenu = ({ + onClose, + textarea, +}: { + onClose: () => void; + textarea: HTMLTextAreaElement; +}) => { + const id = textarea.id; + const blockUid = id.substring(id.length - 9, id.length); + + const onSelectMenuItem = (index: number) => { + const selectedItem = PRECONFIGURED_MENU_ITEMS[index]; + if (!selectedItem) return; + + onClose(); + + renderMinimalFormDialog({ + updateBlock: (dialogValue: string) => { + if (dialogValue && blockUid) { + window.roamAlphaAPI.data.block.update({ + block: { + string: dialogValue, + uid: blockUid, + }, + }); + console.log( + `window.roamAlphaAPI.data.block.update({ + block: { + string: "${dialogValue}", + uid: "${blockUid}", + }, + });`, + ); + } + }, + }); + }; + + const keydownListener = (e: KeyboardEvent) => { + if (e.key === "Enter") { + onSelectMenuItem(0); + e.stopPropagation(); + e.preventDefault(); + } + }; + + useEffect(() => { + textarea.addEventListener("keydown", keydownListener, true); + return () => textarea.removeEventListener("keydown", keydownListener); + }, [keydownListener]); + + return ( + } + position="bottom-left" + autoFocus={false} + enforceFocus={false} + content={ + + {PRECONFIGURED_MENU_ITEMS.map((item, i) => { + return ( + onSelectMenuItem(0)} + /> + ); + })} + + } + /> + ); +}; + +export const render = (textarea: HTMLTextAreaElement) => { + const parent = document.createElement("span"); + textarea.parentElement?.insertBefore(parent, textarea); + ReactDOM.render( + { + ReactDOM.unmountComponentAtNode(parent); + parent.remove(); + }} + />, + parent, + ); +}; + +// export const initializeNodeMenuTrigger = () => { +// const handleNodeMenuRender = (target: HTMLElement, evt: KeyboardEvent) => { +// if ( +// target.tagName === "TEXTAREA" && +// target.classList.contains("rm-block-input") +// ) { +// render(target as HTMLTextAreaElement); +// evt.preventDefault(); +// evt.stopPropagation(); +// } +// }; + +// const nodeMenuTriggerListener = (e: Event) => { +// const evt = e as KeyboardEvent; +// const target = evt.target as HTMLElement; + +// if (evt.key === "\\") { +// handleNodeMenuRender(target, evt); +// } +// }; + +// document.addEventListener("keydown", nodeMenuTriggerListener); +// return () => document.removeEventListener("keydown", nodeMenuTriggerListener); +// }; diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index df2a2f36d..4ebe61ace 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -28,10 +28,8 @@ import refreshConfigTree from "~/utils/refreshConfigTree"; import { render as renderGraphOverviewExport } from "~/components/ExportDiscourseContext"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; import { getSettingValueFromTree } from "roamjs-components/util"; -import { - getModifiersFromCombo, - render as renderDiscourseNodeMenu, -} from "~/components/DiscourseNodeMenu"; +import { getModifiersFromCombo } from "~/components/DiscourseNodeMenu"; +import { render as renderDiscourseNodeMenu } from "~/components/MinimalReproduction"; import { IKeyCombo } from "@blueprintjs/core"; import { configPageTabs } from "~/utils/configPageTabs"; @@ -147,10 +145,7 @@ export const initObservers = async ({ target.tagName === "TEXTAREA" && target.classList.contains("rm-block-input") ) { - renderDiscourseNodeMenu({ - textarea: target as HTMLTextAreaElement, - extensionAPI: onloadArgs.extensionAPI, - }); + renderDiscourseNodeMenu(target as HTMLTextAreaElement); evt.preventDefault(); evt.stopPropagation(); } @@ -160,22 +155,7 @@ export const initObservers = async ({ const evt = e as KeyboardEvent; const target = evt.target as HTMLElement; - // Personal Trigger overrides Global Trigger - if (personalTrigger) { - if (evt.key !== personalTrigger) return; - if ( - (personalModifiers.includes("ctrl") && !evt.ctrlKey) || - (personalModifiers.includes("shift") && !evt.shiftKey) || - (personalModifiers.includes("alt") && !evt.altKey) || - (personalModifiers.includes("meta") && !evt.metaKey) - ) { - return; - } - handleNodeMenuRender(target, evt); - return; - } - - if (evt.key === globalTrigger) { + if (evt.key === "\\") { handleNodeMenuRender(target, evt); } };