Refactor things

lib/codemirror-kit/decorations.ts

@@ -133,6 +133,8 @@ export const buildNodeDecorations = <T extends TypedDecoration>(state: EditorSta
 
             for (let line = state.doc.lineAt(node.from); line.from < node.to; line = state.doc.lineAt(line.to + 1)) {
               decorationRanges.push(wrapped.range(line.from))
+
+              if (line.to === state.doc.length) break
             }
           }
 

package.json

@@ -133,18 +133,18 @@
     }
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.15.0",
-    "@codemirror/commands": "^6.3.3",
-    "@codemirror/lang-markdown": "^6.2.4",
+    "@codemirror/autocomplete": "^6.16.0",
+    "@codemirror/commands": "^6.5.0",
+    "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/language": "^6.10.1",
-    "@codemirror/language-data": "^6.4.1",
+    "@codemirror/language-data": "^6.5.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.0",
+    "@codemirror/view": "^6.26.3",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@lezer/markdown": "^1.2.0",
-    "@replit/codemirror-vim": "^6.2.0",
+    "@lezer/markdown": "^1.3.0",
+    "@replit/codemirror-vim": "^6.2.1",
     "ink-mde": "workspace:*",
     "katex": "^0.16.9",
     "solid-js": "^1.8.7",

plugins/katex/index.ts

@@ -2,15 +2,8 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { EditorView } from '@codemirror/view'
 import { plugin, pluginTypes } from 'ink-mde'
 import { buildBlockWidgetDecoration, buildLineDecoration, buildWidget, nodeDecorator } from '/lib/codemirror-kit'
-import { useModule } from '/src/modules'
 import { grammar, mathInline, mathInlineMark, mathInlineMarkClose, mathInlineMarkOpen } from './grammar'
 
-const render = (text: string, element: HTMLElement) => {
-  useModule('katex', (katex) => {
-    katex.render(text, element, { output: 'html', throwOnError: false })
-  })
-}
-
 export const katex = () => {
   return [
     plugin({
@@ -51,23 +44,31 @@ export const katex = () => {
               return buildBlockWidgetDecoration({
                 widget: buildWidget({
                   id: text,
-                  toDOM: () => {
+                  toDOM: (view) => {
                     const container = document.createElement('div')
-                    const block = document.createElement('div')
+                    const katexTarget = document.createElement('div')
 
                     container.className = 'ink-mde-block-widget-container'
-                    block.className = 'ink-mde-block-widget ink-mde-katex-target'
-                    container.appendChild(block)
+                    katexTarget.className = 'ink-mde-block-widget ink-mde-katex-target'
+                    container.appendChild(katexTarget)
 
-                    render(text, block)
+                    import('katex').then(({ default: lib }) => {
+                      lib.render(text, katexTarget, { output: 'html', throwOnError: false })
+
+                      view.requestMeasure()
+                    })
 
                     return container
                   },
-                  updateDOM: (dom) => {
+                  updateDOM: (dom, view) => {
                     const katexTarget = dom.querySelector<HTMLElement>('.ink-mde-katex-target')
 
                     if (katexTarget) {
-                      render(text, katexTarget)
+                      import('katex').then(({ default: lib }) => {
+                        lib.render(text, katexTarget, { output: 'html', throwOnError: false })
+
+                        view.requestMeasure()
+                      })
 
                       return true
                     }