Merge pull request #19528 from overleaf/dp-equation-preview

Equation Preview

GitOrigin-RevId: 98e71e5d2c1a83d6c9fa685eeee1f4b93a5a3da1

services/web/frontend/js/features/source-editor/utils/tree-operations/commands.ts

@@ -10,6 +10,8 @@ export class Command extends ProjectionItem {
   readonly title: string = ''
   readonly optionalArgCount: number = 0
   readonly requiredArgCount: number = 0
+  readonly type: 'usage' | 'definition' = 'usage'
+  readonly raw: string | undefined = undefined
 }
 
 /**
@@ -62,16 +64,16 @@ export const enterNode = (
       argCountNumber--
     }
 
-    const thisCommand: Readonly<Command> = {
+    items.push({
       line: state.doc.lineAt(node.from).number,
       title: commandNameText,
       from: node.from,
       to: node.to,
       optionalArgCount: commandDefinitionHasOptionalArgument ? 1 : 0,
       requiredArgCount: argCountNumber,
-    }
-
-    items.push(thisCommand)
+      type: 'definition',
+      raw: state.sliceDoc(node.from, node.to),
+    })
   } else if (
     node.type.is('UnknownCommand') ||
     node.type.is('KnownCommand') ||
@@ -112,7 +114,7 @@ export const enterNode = (
       commandNode.getChildren('$Argument')
     const text = state.doc.sliceString(ctrlSeq.from, ctrlSeq.to)
 
-    const thisCommand = {
+    items.push({
       line: state.doc.lineAt(commandNode.from).number,
       title: text,
       from: commandNode.from,
@@ -120,7 +122,8 @@ export const enterNode = (
       optionalArgCount: optionalArguments.length,
       requiredArgCount:
         commandArgumentsIncludingOptional.length - optionalArguments.length,
-    }
-    items.push(thisCommand)
+      type: 'usage',
+      raw: undefined,
+    })
   }
 }

services/web/frontend/js/features/source-editor/utils/tree-operations/math.ts

@@ -0,0 +1,56 @@
+import { getEnvironmentName } from './environments'
+import { EditorState } from '@codemirror/state'
+import { SyntaxNode, SyntaxNodeRef } from '@lezer/common'
+import { ancestorNodeOfType } from './ancestors'
+
+export const mathAncestorNode = (state: EditorState, pos: number) =>
+  ancestorNodeOfType(state, pos, '$MathContainer') ||
+  ancestorNodeOfType(state, pos, 'EquationEnvironment') ||
+  // NOTE: EquationArrayEnvironment can be nested inside EquationEnvironment
+  ancestorNodeOfType(state, pos, 'EquationArrayEnvironment')
+
+export const parseMathContainer = (
+  state: EditorState,
+  nodeRef: SyntaxNodeRef,
+  ancestorNode: SyntaxNode
+) => {
+  // the content of the Math element, without braces
+  const innerContent = state.doc.sliceString(nodeRef.from, nodeRef.to).trim()
+
+  if (!innerContent.length) {
+    return null
+  }
+
+  let content = innerContent
+  let displayMode = false
+  let passToMathJax = true
+
+  if (ancestorNode.type.is('$Environment')) {
+    const environmentName = getEnvironmentName(ancestorNode, state)
+    if (environmentName) {
+      // use the outer content of environments that MathJax supports
+      // https://docs.mathjax.org/en/latest/input/tex/macros/index.html#environments
+      if (environmentName === 'tikzcd') {
+        passToMathJax = false
+      }
+      if (environmentName !== 'math' && environmentName !== 'displaymath') {
+        content = state.doc
+          .sliceString(ancestorNode.from, ancestorNode.to)
+          .trim()
+      }
+
+      if (environmentName !== 'math') {
+        displayMode = true
+      }
+    }
+  } else {
+    if (
+      ancestorNode.type.is('BracketMath') ||
+      Boolean(ancestorNode.getChild('DisplayMath'))
+    ) {
+      displayMode = true
+    }
+  }
+
+  return { content, displayMode, passToMathJax }
+}