improve(pages): improve math extensions

Author: gustavotoyota

apps/client/src/code/tiptap/inline-math/extension.ts

@@ -3,6 +3,14 @@ import { VueNodeViewRenderer } from '@tiptap/vue-3';
 
 import NodeView from './NodeView.vue';
 
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    inlineMath: {
+      addInlineMath: () => ReturnType;
+    };
+  }
+}
+
 export const InlineMathExtension = Node.create({
   name: 'inlineMath',
 
@@ -41,14 +49,19 @@ export const InlineMathExtension = Node.create({
     return VueNodeViewRenderer(NodeView);
   },
 
-  addCommands(): any {
+  addCommands() {
     return {
       addInlineMath:
-        (options: any) =>
-        ({ commands }: any) =>
+        () =>
+        ({ commands, state }) =>
           commands.insertContent({
             type: this.name,
-            attrs: options,
+            attrs: {
+              input: state.doc.textBetween(
+                state.selection.from,
+                state.selection.to,
+              ),
+            },
           }),
     };
   },

apps/client/src/code/tiptap/math-block/extension.ts

@@ -3,6 +3,14 @@ import { VueNodeViewRenderer } from '@tiptap/vue-3';
 
 import NodeView from './NodeView.vue';
 
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mathBlock: {
+      addMathBlock: () => ReturnType;
+    };
+  }
+}
+
 export const MathBlockExtension = Node.create({
   name: 'mathBlock',
 
@@ -40,14 +48,19 @@ export const MathBlockExtension = Node.create({
     return VueNodeViewRenderer(NodeView);
   },
 
-  addCommands(): any {
+  addCommands() {
     return {
       addMathBlock:
-        (options: any) =>
-        ({ commands }: any) =>
+        () =>
+        ({ commands, state }) =>
           commands.insertContent({
             type: this.name,
-            attrs: options,
+            attrs: {
+              input: state.doc.textBetween(
+                state.selection.from,
+                state.selection.to,
+              ),
+            },
           }),
     };
   },

apps/client/src/layouts/PagesLayout/MainToolbar/ObjectBtns.vue

@@ -26,14 +26,14 @@
     icon="mdi-sigma-lower"
     icon-size="24px"
     :disable="page.react.readOnly || !page.activeElem.react.exists"
-    @click="page.selection.format((chain) => (chain as any).addInlineMath())"
+    @click="page.selection.format((chain) => chain.addInlineMath())"
   />
   <ToolbarBtn
     :tooltip="`Math block`"
     icon="mdi-sigma"
     icon-size="24px"
     :disable="page.react.readOnly || !page.activeElem.react.exists"
-    @click="page.selection.format((chain) => (chain as any).addMathBlock())"
+    @click="page.selection.format((chain) => chain.addMathBlock())"
   />
 
   <q-separator