math node inherits anchor node's style

ibastawisi · Nov 24, 2024 · 923b24d · 923b24d
1 parent f8c800a
commit 923b24d
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 23 deletions.
diff --git a/src/editor/nodes/MathNode/MathComponent.tsx b/src/editor/nodes/MathNode/MathComponent.tsx
@@ -192,15 +192,13 @@ export default function MathComponent({ initialValue, nodeKey }: MathComponentPr
   return <math-field key={nodeKey}>
     <style>
       {`
-        :host .ML__container {
-          pointer-events: inherit; 
-          padding: 0;
+        :host(:not(:focus)) .ML__caret {
+          display: none;
         }
         :host(:not(:focus)) .ML__contains-caret,
         :host(:not(:focus)) .ML__contains-caret * {
           color: inherit;
         }
-        :host .ML__latex, :host .ML__text { font-family: inherit; }
       `}
     </style>
   </math-field>;

diff --git a/src/editor/nodes/MathNode/index.css b/src/editor/nodes/MathNode/index.css
@@ -12,6 +12,16 @@ math-field {
   --selection-color: nope;
 }
 
+math-field::part(container) {
+  padding: 0;
+  pointer-events: inherit;
+  --_text-font-family: inherit;
+}
+
+math-field::part(content) {
+  padding: 2px 3px 2px 1px;
+}
+
 math-field::part(virtual-keyboard-toggle),
 math-field::part(menu-toggle) {
   display: none;

diff --git a/src/editor/plugins/MarkdownPlugin/MarkdownTransformers.tsx b/src/editor/plugins/MarkdownPlugin/MarkdownTransformers.tsx
@@ -569,7 +569,8 @@ export const MATH: TextMatchTransformer = {
   regExp: /\$+(.*?)\$+|\\\((.*?)\\\)/,
   replace: (textNode, match) => {
     const value = match[1] || match[2];
-    const mathNode = $createMathNode(value);
+    const style = textNode.getStyle();
+    const mathNode = $createMathNode(value, style);
     textNode.replace(mathNode);
     if (!value) mathNode.select();
   },

diff --git a/src/editor/plugins/MathPlugin/index.tsx b/src/editor/plugins/MathPlugin/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { $createParagraphNode, $insertNodes, $isRootNode, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, LexicalCommand } from 'lexical';
+import { $createParagraphNode, $getSelection, $insertNodes, $isRangeSelection, $isRootNode, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, LexicalCommand } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { useEffect } from 'react';
@@ -29,7 +29,9 @@ export default function MathPlugin(): JSX.Element | null {
         INSERT_MATH_COMMAND,
         (payload) => {
           const { value } = payload;
-          const mathNode = $createMathNode(value);
+          const selection = $getSelection();
+          const style = $isRangeSelection(selection)? selection.anchor.getNode().getStyle() : '';
+          const mathNode = $createMathNode(value, style);
           $insertNodes([mathNode]);
           if ($isRootNode(mathNode.getParentOrThrow())) {
             $wrapNodeInElement(mathNode, $createParagraphNode);

diff --git a/src/editor/plugins/ToolbarPlugin/Menus/FontSelect.tsx b/src/editor/plugins/ToolbarPlugin/Menus/FontSelect.tsx
@@ -17,23 +17,26 @@ export default function FontSelect({ editor }: { editor: LexicalEditor }): JSX.E
 
   const updateToolbar = useCallback(() => {
     const selection = $getSelection();
+    const domSelection = window.getSelection();
+    if (!domSelection) return false;
+    const focusNode = domSelection.focusNode;
+    if (!focusNode) return false;
+    const isTextNode = focusNode.nodeType === Node.TEXT_NODE;
+    const domElement = isTextNode ? focusNode.parentElement : focusNode as HTMLElement;
+    if (!domElement) return false;
+    const computedStyle = window.getComputedStyle(domElement);
+    const currentFontSize = computedStyle.getPropertyValue('font-size');
+    const currentFontFamily = computedStyle.getPropertyValue('font-family').split(',')[0].trim().replace(/['"]+/g, '');
     if ($isRangeSelection(selection)) {
       const nextFontSize = $getSelectionStyleValueForProperty(selection, 'font-size');
       const nextFontFamily = $getSelectionStyleValueForProperty(selection, 'font-family');
       setFontSize(nextFontSize);
       setFontFamily(nextFontFamily);
-      const domSelection = window.getSelection();
-      if (!domSelection) return false;
-      const focusNode = domSelection.focusNode;
-      if (!focusNode) return false;
-      const isTextNode = focusNode.nodeType === Node.TEXT_NODE;
-      const domElement = isTextNode ? focusNode.parentElement : focusNode as HTMLElement;
-      if (!domElement) return false;
-      const computedStyle = window.getComputedStyle(domElement);
-      const currentFontSize = computedStyle.getPropertyValue('font-size');
-      const currentFontFamily = computedStyle.getPropertyValue('font-family').split(',')[0].trim().replace(/['"]+/g, '');
       if (!nextFontSize) setFontSize(currentFontSize);
       if (!nextFontFamily) setFontFamily(currentFontFamily);
+    } else {
+      setFontSize(currentFontSize);
+      setFontFamily(currentFontFamily);
     }
     return false;
 

diff --git a/src/editor/plugins/ToolbarPlugin/Tools/MathTools.tsx b/src/editor/plugins/ToolbarPlugin/Tools/MathTools.tsx
@@ -47,8 +47,17 @@ export default function MathTools({ editor, node, sx }: { editor: LexicalEditor,
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
+    const domSelection = window.getSelection();
+    if (!domSelection) return;
+    const focusNode = domSelection.focusNode;
+    if (!focusNode) return;
+    const isTextNode = focusNode.nodeType === Node.TEXT_NODE;
+    const domElement = isTextNode ? focusNode.parentElement : focusNode as HTMLElement;
+    if (!domElement) return;
+    const computedStyle = window.getComputedStyle(domElement);
+    const currentFontSize = computedStyle.getPropertyValue('font-size');
     editor.getEditorState().read(() => {
-      const fontSize = $getNodeStyleValueForProperty(node, 'font-size', '16px');
+      const fontSize = $getNodeStyleValueForProperty(node, 'font-size', currentFontSize);
       setFontSize(fontSize);
       const mathfield = editor.getElementByKey(node.__key)?.querySelector("math-field") as MathfieldElement | null;
       if (!mathfield) return;

diff --git a/src/editor/theme.css b/src/editor/theme.css
@@ -521,11 +521,6 @@ iframe {
 .LexicalTheme__math>.ML__latex {
   user-select: auto;
   padding: 2px 3px 2px 1px;
-  font-family: inherit;
-}
-
-.LexicalTheme__math .ML__text {
-  font-family: inherit;
 }
 
 .LexicalTheme__math:hover {