text-editor-studio-ts/dist/equation-component-CpuvXGaQ.cjs.map

A powerful mobile-responsive rich text editor built with Lexical and React

{"version":3,"file":"equation-component-CpuvXGaQ.cjs","sources":["../src/components/editor/editor-ui/equation-editor.tsx","../src/components/editor/editor-ui/equation-component.tsx"],"sourcesContent":["import type { Ref, RefObject, JSX } from \"react\";\n\nimport { ChangeEvent, forwardRef } from \"react\";\n\ntype BaseEquationEditorProps = {\n  equation: string;\n  inline: boolean;\n  setEquation: (equation: string) => void;\n};\n\nfunction EquationEditor(\n  { equation, setEquation, inline }: BaseEquationEditorProps,\n  forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>\n): JSX.Element {\n  const onChange = (event: ChangeEvent) => {\n    setEquation((event.target as HTMLInputElement).value);\n  };\n\n  return inline && forwardedRef instanceof HTMLInputElement ? (\n    <span className=\"EquationEditor_inputBackground bg-background-system-body-primary\">\n      <span className=\"EquationEditor_dollarSign text-left text-content-system-global-secondary\">\n        $\n      </span>\n      <input\n        className=\"EquationEditor_inlineEditor m-0 resize-none border-0 bg-inherit p-0 text-content-system-global-primary outline-none\"\n        value={equation}\n        onChange={onChange}\n        autoFocus={true}\n        ref={forwardedRef as RefObject<HTMLInputElement>}\n      />\n      <span className=\"EquationEditor_dollarSign text-left text-content-system-global-secondary\">\n        $\n      </span>\n    </span>\n  ) : (\n    <div className=\"EquationEditor_inputBackground bg-background-system-body-primary\">\n      <span className=\"EquationEditor_dollarSign text-left text-content-system-global-secondary\">\n        {\"$$\\n\"}\n      </span>\n      <textarea\n        className=\"EquationEditor_blockEditor m-0 w-full resize-none border-0 bg-inherit p-0 text-content-system-global-primary outline-none\"\n        value={equation}\n        onChange={onChange}\n        ref={forwardedRef as RefObject<HTMLTextAreaElement>}\n      />\n      <span className=\"EquationEditor_dollarSign text-left text-content-system-global-secondary\">\n        {\"\\n$$\"}\n      </span>\n    </div>\n  );\n}\n\nexport default forwardRef(EquationEditor);\n","import { useCallback, useEffect, useRef, useState, JSX } from \"react\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalEditable } from \"@lexical/react/useLexicalEditable\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  COMMAND_PRIORITY_HIGH,\n  KEY_ESCAPE_COMMAND,\n  NodeKey,\n  SELECTION_CHANGE_COMMAND,\n} from \"lexical\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { $isEquationNode } from \"@/components/editor/nodes/equation-node\";\nimport EquationEditor from \"@/components/editor/editor-ui/equation-editor\";\nimport KatexRenderer from \"@/components/editor/editor-ui/katex-renderer\";\n\ntype EquationComponentProps = {\n  equation: string;\n  inline: boolean;\n  nodeKey: NodeKey;\n};\n\nexport default function EquationComponent({\n  equation,\n  inline,\n  nodeKey,\n}: EquationComponentProps): JSX.Element {\n  const [editor] = useLexicalComposerContext();\n  const isEditable = useLexicalEditable();\n  const [equationValue, setEquationValue] = useState(equation);\n  const [showEquationEditor, setShowEquationEditor] = useState<boolean>(false);\n  const inputRef = useRef(null);\n\n  const onHide = useCallback(\n    (restoreSelection?: boolean) => {\n      setShowEquationEditor(false);\n      editor.update(() => {\n        const node = $getNodeByKey(nodeKey);\n        if ($isEquationNode(node)) {\n          node.setEquation(equationValue);\n          if (restoreSelection) {\n            node.selectNext(0, 0);\n          }\n        }\n      });\n    },\n    [editor, equationValue, nodeKey]\n  );\n\n  useEffect(() => {\n    if (!showEquationEditor && equationValue !== equation) {\n      setEquationValue(equation);\n    }\n  }, [showEquationEditor, equation, equationValue]);\n\n  useEffect(() => {\n    if (!isEditable) {\n      return;\n    }\n    if (showEquationEditor) {\n      return mergeRegister(\n        editor.registerCommand(\n          SELECTION_CHANGE_COMMAND,\n          // @ts-ignore\n          (payload) => {\n            const activeElement = document.activeElement;\n            const inputElem = inputRef.current;\n            if (inputElem !== activeElement) {\n              onHide();\n            }\n            return false;\n          },\n          COMMAND_PRIORITY_HIGH\n        ),\n        editor.registerCommand(\n          KEY_ESCAPE_COMMAND,\n          // @ts-ignore\n          (payload) => {\n            const activeElement = document.activeElement;\n            const inputElem = inputRef.current;\n            if (inputElem === activeElement) {\n              onHide(true);\n              return true;\n            }\n            return false;\n          },\n          COMMAND_PRIORITY_HIGH\n        )\n      );\n    } else {\n      return editor.registerUpdateListener(({ editorState }) => {\n        const isSelected = editorState.read(() => {\n          const selection = $getSelection();\n          return (\n            $isNodeSelection(selection) &&\n            selection.has(nodeKey) &&\n            selection.getNodes().length === 1\n          );\n        });\n        if (isSelected) {\n          setShowEquationEditor(true);\n        }\n      });\n    }\n  }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);\n\n  return (\n    <>\n      {showEquationEditor && isEditable ? (\n        <EquationEditor\n          equation={equationValue}\n          setEquation={setEquationValue}\n          inline={inline}\n          ref={inputRef}\n        />\n      ) : (\n        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>\n          <KatexRenderer\n            equation={equationValue}\n            inline={inline}\n            onDoubleClick={() => {\n              if (isEditable) {\n                setShowEquationEditor(true);\n              }\n            }}\n          />\n        </ErrorBoundary>\n      )}\n    </>\n  );\n}\n"],"names":["forwardRef","equation","setEquation","inline","forwardedRef","onChange","event","target","value","HTMLInputElement","jsxs","className","children","jsx","jsxRuntime","autoFocus","ref","nodeKey","editor","useLexicalComposerContext","isEditable","useLexicalEditable","equationValue","setEquationValue","useState","showEquationEditor","setShowEquationEditor","inputRef","useRef","onHide","useCallback","restoreSelection","update","node","$getNodeByKey","$isEquationNode","selectNext","useEffect","mergeRegister","registerCommand","SELECTION_CHANGE_COMMAND","payload","activeElement","document","current","COMMAND_PRIORITY_HIGH","KEY_ESCAPE_COMMAND","registerUpdateListener","editorState","read","selection","$getSelection","$isNodeSelection","has","getNodes","length","Fragment","EquationEditor","ErrorBoundary","onError","e","_onError","fallback","KatexRenderer","onDoubleClick"],"mappings":"6PAoDA,MAAeA,EAAAA,EAAAA,WA1Cf,UACEC,SAAEA,EAAAC,YAAUA,EAAaC,OAAAA,GACzBC,GAEM,MAAAC,EAAYC,IACHJ,EAAAI,EAAMC,OAA4BC,QAG1C,OAAAL,GAAUC,aAAwBK,iBACtCC,EAAAA,KAAA,OAAA,CAAKC,UAAU,mEACdC,SAAA,CAACC,EAAAA,IAAA,OAAA,CAAKF,UAAU,2EAA2EC,SAE3F,MACAE,EAAAD,IAAC,QAAA,CACCF,UAAU,sHACVH,MAAOP,EACPI,WACAU,WAAW,EACXC,IAAKZ,IAENS,EAAAA,IAAA,OAAA,CAAKF,UAAU,2EAA2EC,SAE3F,SAGFF,EAAAA,KAAC,MAAI,CAAAC,UAAU,mEACbC,SAAA,CAACC,EAAAA,IAAA,OAAA,CAAKF,UAAU,2EACbC,SACH,SACAE,EAAAD,IAAC,WAAA,CACCF,UAAU,4HACVH,MAAOP,EACPI,WACAW,IAAKZ,IAENS,EAAAA,IAAA,OAAA,CAAKF,UAAU,2EACbC,SACH,WAGN,mBCxBA,UAA0CX,SACxCA,EAAAE,OACAA,EAAAc,QACAA,IAEM,MAACC,GAAUC,MACXC,EAAaC,EAAAA,KACZC,EAAeC,GAAoBC,EAAAA,SAASvB,IAC5CwB,EAAoBC,GAAyBF,EAAAA,UAAkB,GAChEG,EAAWC,SAAO,MAElBC,EAASC,EAAAA,YACZC,IACCL,GAAsB,GACtBR,EAAOc,OAAO,KACN,MAAAC,EAAOC,gBAAcjB,GACvBkB,EAAAA,gBAAgBF,KAClBA,EAAK/B,YAAYoB,GACbS,GACGE,EAAAG,WAAW,EAAG,OAK3B,CAAClB,EAAQI,EAAeL,IA6DxBJ,OA1DFwB,EAAAA,UAAU,KACHZ,GAAsBH,IAAkBrB,GAC3CsB,EAAiBtB,IAElB,CAACwB,EAAoBxB,EAAUqB,IAElCe,EAAAA,UAAU,KACR,GAAKjB,EAGL,OAAIK,EACKa,EAAAA,cACLpB,EAAOqB,gBACLC,EAAAA,yBAECC,IACC,MAAMC,EAAgBC,SAASD,cAKxB,OAJWf,EAASiB,UACTF,GACTb,KAEF,GAETgB,EAAAA,uBAEF3B,EAAOqB,gBACLO,EAAAA,mBAECL,IACC,MAAMC,EAAgBC,SAASD,cAE/B,OADkBf,EAASiB,UACTF,IAChBb,GAAO,IACA,IAIXgB,EAAAA,wBAIG3B,EAAO6B,uBAAuB,EAAGC,kBACnBA,EAAYC,KAAK,KAC5B,MAAAC,EAAYC,EAAAA,gBAEhBC,OAAAA,mBAAiBF,IACjBA,EAAUG,IAAIpC,IACkB,IAAhCiC,EAAUI,WAAWC,UAIvB7B,GAAsB,MAI3B,CAACR,EAAQD,EAASY,EAAQJ,EAAoBL,IAG/CP,EAAAA,IAAA2C,EAAAA,SAAA,CACG5C,YAAsBQ,EACrBN,EAAAD,IAAC4C,EAAA,CACCxD,SAAUqB,EACVpB,YAAaqB,EACbpB,SACAa,IAAKW,IAGNb,EAAAD,IAAA6C,EAAAA,cAAA,CAAcC,QAAUC,GAAM1C,EAAO2C,SAASD,GAAIE,SAAU,KAC3DlD,SAAAE,EAAAD,IAACkD,EAAAA,cAAA,CACC9D,SAAUqB,EACVnB,SACA6D,cAAe,KACT5C,GACFM,GAAsB,SAQtC"}