text-editor-studio-ts/dist/equation-component-DwRzznXV.js

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

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
import { o, a, $ as $isEquationNode, K as KatexRenderer } from "./index-BwW17RmP.js";
import { mergeRegister } from "@lexical/utils";
import { $getNodeByKey, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, $getSelection, $isNodeSelection } from "lexical";
import { ErrorBoundary } from "react-error-boundary";
function EquationEditor({ equation, setEquation, inline }, forwardedRef) {
  const onChange = (event) => {
    setEquation(event.target.value);
  };
  return inline && forwardedRef instanceof HTMLInputElement ? /* @__PURE__ */ jsxs("span", { className: "EquationEditor_inputBackground bg-background-system-body-primary", children: [
    /* @__PURE__ */ jsx("span", { className: "EquationEditor_dollarSign text-left text-content-system-global-secondary", children: "$" }),
    /* @__PURE__ */ jsx(
      "input",
      {
        className: "EquationEditor_inlineEditor m-0 resize-none border-0 bg-inherit p-0 text-content-system-global-primary outline-none",
        value: equation,
        onChange,
        autoFocus: true,
        ref: forwardedRef
      }
    ),
    /* @__PURE__ */ jsx("span", { className: "EquationEditor_dollarSign text-left text-content-system-global-secondary", children: "$" })
  ] }) : /* @__PURE__ */ jsxs("div", { className: "EquationEditor_inputBackground bg-background-system-body-primary", children: [
    /* @__PURE__ */ jsx("span", { className: "EquationEditor_dollarSign text-left text-content-system-global-secondary", children: "$$\n" }),
    /* @__PURE__ */ jsx(
      "textarea",
      {
        className: "EquationEditor_blockEditor m-0 w-full resize-none border-0 bg-inherit p-0 text-content-system-global-primary outline-none",
        value: equation,
        onChange,
        ref: forwardedRef
      }
    ),
    /* @__PURE__ */ jsx("span", { className: "EquationEditor_dollarSign text-left text-content-system-global-secondary", children: "\n$$" })
  ] });
}
const EquationEditor$1 = forwardRef(EquationEditor);
function EquationComponent({
  equation,
  inline,
  nodeKey
}) {
  const [editor] = o();
  const isEditable = a();
  const [equationValue, setEquationValue] = useState(equation);
  const [showEquationEditor, setShowEquationEditor] = useState(false);
  const inputRef = useRef(null);
  const onHide = useCallback(
    (restoreSelection) => {
      setShowEquationEditor(false);
      editor.update(() => {
        const node = $getNodeByKey(nodeKey);
        if ($isEquationNode(node)) {
          node.setEquation(equationValue);
          if (restoreSelection) {
            node.selectNext(0, 0);
          }
        }
      });
    },
    [editor, equationValue, nodeKey]
  );
  useEffect(() => {
    if (!showEquationEditor && equationValue !== equation) {
      setEquationValue(equation);
    }
  }, [showEquationEditor, equation, equationValue]);
  useEffect(() => {
    if (!isEditable) {
      return;
    }
    if (showEquationEditor) {
      return mergeRegister(
        editor.registerCommand(
          SELECTION_CHANGE_COMMAND,
          // @ts-ignore
          (payload) => {
            const activeElement = document.activeElement;
            const inputElem = inputRef.current;
            if (inputElem !== activeElement) {
              onHide();
            }
            return false;
          },
          COMMAND_PRIORITY_HIGH
        ),
        editor.registerCommand(
          KEY_ESCAPE_COMMAND,
          // @ts-ignore
          (payload) => {
            const activeElement = document.activeElement;
            const inputElem = inputRef.current;
            if (inputElem === activeElement) {
              onHide(true);
              return true;
            }
            return false;
          },
          COMMAND_PRIORITY_HIGH
        )
      );
    } else {
      return editor.registerUpdateListener(({ editorState }) => {
        const isSelected = editorState.read(() => {
          const selection = $getSelection();
          return $isNodeSelection(selection) && selection.has(nodeKey) && selection.getNodes().length === 1;
        });
        if (isSelected) {
          setShowEquationEditor(true);
        }
      });
    }
  }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
  return /* @__PURE__ */ jsx(Fragment, { children: showEquationEditor && isEditable ? /* @__PURE__ */ jsx(
    EquationEditor$1,
    {
      equation: equationValue,
      setEquation: setEquationValue,
      inline,
      ref: inputRef
    }
  ) : /* @__PURE__ */ jsx(ErrorBoundary, { onError: (e) => editor._onError(e), fallback: null, children: /* @__PURE__ */ jsx(
    KatexRenderer,
    {
      equation: equationValue,
      inline,
      onDoubleClick: () => {
        if (isEditable) {
          setShowEquationEditor(true);
        }
      }
    }
  ) }) });
}
export {
  EquationComponent as default
};
//# sourceMappingURL=equation-component-DwRzznXV.js.map