feat: inline katex

hunghg255 · Oct 23, 2024 · 7a87f03 · 7a87f03
1 parent d6ea4c2
commit 7a87f03
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/playground/.env.exmaple b/playground/.env.exmaple
@@ -1 +1 @@
-GIPHY_API_KEY=
+VITE_GIPHY_API_KEY=
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
@@ -122,9 +122,9 @@ const extensions = [
       return Promise.resolve(f)
     },
   }),
-  // ImageGif.configure({
-  //   GIPHY_API_KEY: '',
-  // }),
+  ImageGif.configure({
+    GIPHY_API_KEY: import.meta.env.VITE_GIPHY_API_KEY as string,
+  }),
   Blockquote,
   SlashCommand,
   HorizontalRule,

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -45,5 +45,11 @@ export default defineConfig(({ mode }) => {
     esbuild: {
       sourcemap: isDev,
     },
+    server: {
+      port: 8000,
+    },
+    preview: {
+      port: 8000,
+    },
   }
 })
diff --git a/src/extensions/BaseKit.ts b/src/extensions/BaseKit.ts
@@ -161,7 +161,7 @@ export const BaseKit = Extension.create<BaseKitOptions>({
       extensions.push(
         Placeholder.configure({
           placeholder: ({ node, pos, editor }) => {
-            if (node?.type?.name === 'columns') {
+            if (node?.type?.name === 'columns' || node?.content?.size !== 0) {
               return ''
             }
 

diff --git a/src/extensions/Katex/Katex.ts b/src/extensions/Katex/Katex.ts
@@ -1,7 +1,7 @@
 import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core'
 import { ReactNodeViewRenderer } from '@tiptap/react'
-import { KatexWrapper } from '@/extensions/Katex/components/KatexWrapper'
 import KatexActiveButton from '@/extensions/Katex/components/KatexActiveButton'
+import { KatexWrapper } from '@/extensions/Katex/components/KatexWrapper'
 
 export interface IKatexAttrs {
   text?: string
@@ -28,10 +28,11 @@ declare module '@tiptap/core' {
 
 export const Katex = Node.create<IKatexOptions>({
   name: 'katex',
-  group: 'block',
-  selectable: true,
-  atom: true,
+  group: 'inline',
+  inline: true,
+  defining: true,
   draggable: true,
+  selectable: true,
 
   addOptions() {
     return {

diff --git a/src/extensions/Katex/components/KatexWrapper.tsx b/src/extensions/Katex/components/KatexWrapper.tsx
@@ -40,12 +40,13 @@ export function KatexWrapper({ node }: any) {
 
   return (
     <NodeViewWrapper
-      className="render-wrapper"
       style={{
+        display: 'inline-block',
         backgroundColor,
       }}
+      as="span"
     >
-      <div className="richtext-flex richtext-px-[4px] richtext-py-4 richtext-text-[1em] richtext-text-[#000] richtext-cursor-pointer richtext-justify-center">{content}</div>
+      {content}
     </NodeViewWrapper>
   )
 }