Merge branch 'main' into kalilsn/sorting

core/app/components/ContextEditor/ContextEditorClient.tsx

@@ -26,13 +26,17 @@ export const ContextEditorClient = ({
 	initialDoc,
 	onChange,
 	disabled,
+	hideMenu,
 }: {
 	pubs: GetPubsResult;
 	pubTypes: GetPubTypesResult;
 	pubId: PubsId;
 	pubTypeId: PubTypesId;
 	// Might be able to use more of this type in the future—for now, this component is a lil more stricty typed than context-editor
-} & Pick<ContextEditorProps, "onChange" | "initialDoc" | "className" | "disabled">) => {
+} & Pick<
+	ContextEditorProps,
+	"onChange" | "initialDoc" | "className" | "disabled" | "hideMenu"
+>) => {
 	const getPubs = useCallback(
 		(filter: string) => {
 			return new Promise<any[]>((resolve, reject) => {
@@ -57,6 +61,7 @@ export const ContextEditorClient = ({
 				initialDoc={initialDoc}
 				disabled={disabled}
 				className={className}
+				hideMenu={hideMenu}
 			/>
 		);
 	}, [pubs, pubTypes, disabled]);

core/app/components/FormBuilder/ElementPanel/InputComponentConfigurationForm.tsx

@@ -173,6 +173,7 @@ const componentInfo: Record<InputComponent, SchemaComponentData> = {
 						pubId={"" as PubsId}
 						pubTypeId={"" as PubTypesId}
 						className="-ml-6 -mt-4 h-full w-full overflow-scroll"
+						hideMenu
 					/>
 				</div>
 			);

core/package.json

@@ -100,7 +100,7 @@
 		"import-in-the-middle": "^1.12.0",
 		"jsonpath-plus": "^10.2.0",
 		"jsonwebtoken": "^9.0.0",
-		"katex": "^0.16.18",
+		"katex": "catalog:",
 		"kysely": "^0.27.5",
 		"lodash.partition": "^4.6.0",
 		"logger": "workspace:*",

packages/context-editor/package.json

@@ -50,11 +50,13 @@
 		"vitest": "catalog:"
 	},
 	"dependencies": {
+		"@benrbray/prosemirror-math": "^1.0.0",
 		"@nytimes/react-prosemirror": "^1.0.0",
 		"@prosemirror-adapter/react": "^0.4.0",
 		"deepmerge": "^4.3.1",
 		"fuzzy": "^0.1.3",
 		"install": "^0.13.0",
+		"katex": "catalog:",
 		"lucide-react": "^0.469.0",
 		"prosemirror-autocomplete": "^0.4.3",
 		"prosemirror-commands": "^1.6.0",

packages/context-editor/src/ContextEditor.tsx

@@ -19,6 +19,9 @@ import { baseSchema } from "./schemas";
 
 import "prosemirror-view/style/prosemirror.css";
 import "prosemirror-gapcursor/style/gapcursor.css";
+// For math
+import "@benrbray/prosemirror-math/dist/prosemirror-math.css";
+import "katex/dist/katex.min.css";
 
 import SuggestPanel from "./components/SuggestPanel";
 
@@ -41,6 +44,7 @@ export interface ContextEditorProps {
 	atomRenderingComponent: React.ComponentType<{
 		nodeProp: any;
 	}> /* A react component that is given the ContextAtom pubtype and renders it accordingly */;
+	hideMenu?: boolean;
 }
 
 export interface PanelProps {
@@ -112,14 +116,18 @@ function UnwrappedEditor(props: ContextEditorProps) {
 					suggestData,
 					setSuggestData
 				),
-				new Plugin({
-					view: pluginViewFactory({
-						component: () => <MenuBar />,
-						root: () => {
-							return document.getElementById(MENU_BAR_ID) as HTMLElement;
-						},
-					}),
-				}),
+				...(props.hideMenu
+					? []
+					: [
+							new Plugin({
+								view: pluginViewFactory({
+									component: () => <MenuBar />,
+									root: () => {
+										return document.getElementById(MENU_BAR_ID) as HTMLElement;
+									},
+								}),
+							}),
+						]),
 			],
 		});
 		if (viewHost.current) {

packages/context-editor/src/commands/blocks.ts

@@ -3,7 +3,7 @@ import { Node, NodeType } from "prosemirror-model";
 import { NodeSelection } from "prosemirror-state";
 
 import type { Attrs, ToggleCommandFn, ToggleOptions } from "./types";
-import { createTypeToggle } from "./utils";
+import { createTypeToggle } from "./util";
 
 const nodeMatchesTypeAndAttrs = (node: Node, type: NodeType, attrs?: Attrs) => {
 	if (node.type === type) {

packages/context-editor/src/commands/marks.ts

@@ -3,7 +3,7 @@ import type { MarkType } from "prosemirror-model";
 import { toggleMark as pmToggleMark } from "prosemirror-commands";
 
 import type { ToggleOptions } from "./types";
-import { createTypeToggle } from "./utils";
+import { createTypeToggle } from "./util";
 
 export const markIsActive = (options: ToggleOptions<MarkType>) => {
 	const { type, state } = options;

packages/context-editor/src/commands/math.ts

@@ -0,0 +1,82 @@
+import type { Command } from "prosemirror-state";
+
+import { EditorState, NodeSelection } from "prosemirror-state";
+
+import type { Dispatch } from "./types";
+import { insertNodeIntoEditor } from "../utils/nodes";
+import { createCommandSpec } from "./util";
+
+type MathType = "math_inline" | "math_display";
+
+const toggleInlineOrBlock: Command = (state: EditorState, dispatch?: Dispatch) => {
+	const { node } = state.selection as NodeSelection;
+	const canRun = node && (node.type.name === "math_inline" || node.type.name === "math_display");
+	if (!canRun) {
+		return false;
+	}
+	const isDisplay = node.type.name === "math_display";
+	if (dispatch) {
+		const {
+			schema: {
+				nodes: { math_display: displayType, math_inline: inlineType },
+			},
+		} = state;
+		const swapNodeType = isDisplay ? inlineType : displayType;
+		const transaction = state.tr.replaceSelectionWith(
+			swapNodeType.create({}, node.content),
+			true
+		);
+		dispatch(transaction);
+	}
+	return true;
+};
+
+/**
+ * If we are not inside any sort of math block, this will add a math element to the editor
+ * If we are inside a math block of the same type, this will 'undo' it (make it a paragraph).
+ * If we are inside a math block of the other type, this will transform it to the other type
+ * (i.e. block <-> inline)
+ */
+const createMathToggle = (state: EditorState, type: MathType, dispatch?: Dispatch) => {
+	// Q: should this ever return false? (when can this func not be run?)
+	const { node } = state.selection as NodeSelection;
+	const isActive = node && node.type.name === type;
+
+	const other = type === "math_inline" ? "math_display" : "math_inline";
+	const isOther = node && node.type.name === other;
+	if (dispatch) {
+		if (isOther) {
+			toggleInlineOrBlock(state, dispatch);
+		} else {
+			if (!isActive) {
+				// Insert a new math block
+				insertNodeIntoEditor(state, dispatch, type);
+			} else {
+				const transaction = state.tr.replaceSelectionWith(
+					state.schema.nodes.paragraph.create({}, node.content),
+					true
+				);
+				dispatch(transaction);
+			}
+		}
+	}
+
+	return true;
+};
+
+const isMathActive = (state: EditorState, type: MathType) => {
+	const { node } = state.selection as NodeSelection;
+	return node && node.type.name === type;
+};
+
+export const mathToggleInline = createCommandSpec((dispatch, state) => ({
+	run: () => createMathToggle(state, "math_inline", dispatch),
+	canRun: createMathToggle(state, "math_inline"),
+	isActive: isMathActive(state, "math_inline"),
+}));
+
+export const mathToggleBlock = createCommandSpec((dispatch, state) => ({
+	run: () => createMathToggle(state, "math_display", dispatch),
+	canRun: createMathToggle(state, "math_display"),
+	isActive: isMathActive(state, "math_display"),
+}));

packages/context-editor/src/components/AttributePanel.tsx

@@ -108,6 +108,10 @@ export function AttributePanel({ panelPosition, viewRef }: AttributePanelProps)
 			)
 		);
 	};
+	// Marks will automatically show names, so it is only the 'inline' types
+	// that are not marks that need to be specifically rendered
+	const showName = node.type?.name === "math_inline";
+
 	return (
 		<>
 			{node && (
@@ -135,6 +139,9 @@ export function AttributePanel({ panelPosition, viewRef }: AttributePanelProps)
 					}}
 				>
 					<div className="text-sm">Attributes</div>
+					{showName ? (
+						<div className="mt-4 text-sm font-bold">{node.type?.name}</div>
+					) : null}
 					{Object.keys(nodeAttrs).map((attrKey) => {
 						if (attrKey === "data") {
 							return null;