diff --git a/package-lock.json b/package-lock.json
index 56979073c..e97a15918 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3939,6 +3939,35 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.23.tgz",
+      "integrity": "sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.23"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.23.tgz",
+      "integrity": "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.23.tgz",
+      "integrity": "sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.25",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
@@ -4019,6 +4048,43 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/language-core": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.5.tgz",
+      "integrity": "sha512-FMcqyzWN+sYBeqRMWPGT2QY0mUasZMVIuHvmb5NT3eeqPrbHBYtCP8JWEUCDCgM+Zr62uuWY/qoeBrPrzfa78w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.0.0",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.2"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.25",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.25.tgz",
@@ -4204,6 +4270,13 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.1.tgz",
+      "integrity": "sha512-ogkIWbVrLwKtHY6oOAXaYkAxP+cTH7V5FZ5+Tm4NZFd8VDZ6uNMDrfzqctTZ42eTMCSR3ne3otpcxmqSnFfPYA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ansi-escapes": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
@@ -12279,6 +12352,13 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -21351,6 +21431,13 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue": {
       "version": "3.5.25",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
@@ -21405,6 +21492,23 @@
         }
       }
     },
+    "node_modules/vue-tsc": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.5.tgz",
+      "integrity": "sha512-L/G9IUjOWhBU0yun89rv8fKqmKC+T0HfhrFjlIml71WpfBv9eb4E9Bev8FMbyueBIU9vxQqbd+oOsVcDa5amGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.23",
+        "@vue/language-core": "3.1.5"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/vueuc": {
       "version": "0.4.65",
       "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.65.tgz",
@@ -24800,6 +24904,8 @@
       },
       "devDependencies": {
         "@floating-ui/dom": "^1.7.0",
+        "@typescript-eslint/eslint-plugin": "^8.48.0",
+        "@typescript-eslint/parser": "^8.48.0",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/test-utils": "^2.4.6",
         "postcss-nested": "^6.0.1",
@@ -24809,7 +24915,8 @@
         "typescript": "^5.7.3",
         "vite": "^6.3.5",
         "vite-plugin-node-polyfills": "^0.24.0",
-        "vitest": "^3.2.4"
+        "vitest": "^3.2.4",
+        "vue-tsc": "^3.1.5"
       },
       "peerDependencies": {
         "@floating-ui/dom": "^1.7.0",
diff --git a/packages/ai/src/editor-adapter.ts b/packages/ai/src/editor-adapter.ts
index 56c8be274..7a19ca9cc 100644
--- a/packages/ai/src/editor-adapter.ts
+++ b/packages/ai/src/editor-adapter.ts
@@ -88,7 +88,7 @@ export class EditorAdapter {
    * @param from - Start position to scroll to
    * @param to - End position to scroll to
    */
-  scrollToPosition(from: number, to: number): void {
+  scrollToPosition(from: number, _to: number): void {
     const { view } = this.editor;
     if (!view?.domAtPos) {
       return;
diff --git a/packages/layout-engine/layout-bridge/src/cacheInvalidation.ts b/packages/layout-engine/layout-bridge/src/cacheInvalidation.ts
index 037838b15..24f71ce29 100644
--- a/packages/layout-engine/layout-bridge/src/cacheInvalidation.ts
+++ b/packages/layout-engine/layout-bridge/src/cacheInvalidation.ts
@@ -66,7 +66,14 @@ export function computeSectionMetadataHash(sections: SectionMetadata[]): string
   const parts: string[] = [];
 
   for (const section of sections) {
-    parts.push(`section:${section.sectionIndex}`);
+    const sectionId = (section as { id?: string | null }).id;
+    parts.push(`section:${sectionId ?? section.sectionIndex}`);
+
+    // Include section break type if present
+    const sectionType = (section as { type?: string | null }).type;
+    if (sectionType) {
+      parts.push(`type:${sectionType}`);
+    }
 
     // Include numbering properties that affect display
     if (section.numbering) {
diff --git a/packages/layout-engine/layout-engine/src/layout-paragraph.ts b/packages/layout-engine/layout-engine/src/layout-paragraph.ts
index 15d5355b0..593915caa 100644
--- a/packages/layout-engine/layout-engine/src/layout-paragraph.ts
+++ b/packages/layout-engine/layout-engine/src/layout-paragraph.ts
@@ -147,83 +147,6 @@ const asSafeNumber = (value: unknown): number => {
   return value;
 };
 
-/**
- * Calculates the first line indent for list markers when remeasuring paragraphs.
- *
- * In Word layout, there are two distinct list marker layout patterns:
- *
- * 1. **firstLineIndentMode** (marker inline with text):
- *    - The marker is positioned at `left + firstLine` and consumes horizontal space on the first line
- *    - Text begins after the marker (at `textStartPx`)
- *    - The first line's available width must account for the marker's width
- *    - This pattern is indicated by `firstLineIndentMode === true`
- *
- * 2. **Standard hanging indent** (marker in hanging area):
- *    - The marker is positioned absolutely in the hanging region at `left - hanging`
- *    - The marker does NOT consume horizontal space from the text flow
- *    - Text begins at `left` on ALL lines (first and subsequent)
- *    - The first line's available width is the same as subsequent lines
- *    - This is the default pattern when `firstLineIndentMode` is not set
- *
- * This function determines which pattern is in use and calculates the appropriate
- * first line indent for the remeasurement operation.
- *
- * @param block - The paragraph block being remeasured
- * @param measure - The current paragraph measurement (may contain marker measurements)
- * @returns The first line indent in pixels. Returns 0 for standard hanging indent,
- *   or the marker width + gutter width for firstLineIndentMode.
- *
- * @example
- * ```typescript
- * // Standard hanging indent - marker doesn't consume first line space
- * const block1 = {
- *   attrs: {
- *     wordLayout: {
- *       marker: { markerBoxWidthPx: 20 },
- *       // firstLineIndentMode is NOT set
- *     }
- *   }
- * };
- * const indent1 = calculateFirstLineIndent(block1, measure);
- * // Returns: 0 (marker is in hanging area)
- *
- * // firstLineIndentMode - marker consumes first line space
- * const block2 = {
- *   attrs: {
- *     wordLayout: {
- *       marker: { markerBoxWidthPx: 20 },
- *       firstLineIndentMode: true
- *     }
- *   }
- * };
- * const indent2 = calculateFirstLineIndent(block2, measure);
- * // Returns: markerWidth + gutterWidth (marker is inline)
- * ```
- */
-function calculateFirstLineIndent(block: ParagraphBlock, measure: ParagraphMeasure): number {
-  const wordLayout = block.attrs?.wordLayout as WordLayoutAttrs | undefined;
-
-  // Only apply first line indent in firstLineIndentMode
-  if (!wordLayout?.firstLineIndentMode) {
-    return 0;
-  }
-
-  // Ensure marker exists in both wordLayout and measure
-  if (!wordLayout.marker || !measure.marker) {
-    return 0;
-  }
-
-  // Extract marker width with fallback chain and validation
-  const markerWidthRaw = measure.marker.markerWidth ?? wordLayout.marker.markerBoxWidthPx ?? 0;
-  const markerWidth = Number.isFinite(markerWidthRaw) && markerWidthRaw >= 0 ? markerWidthRaw : 0;
-
-  // Extract gutter width with validation
-  const gutterWidthRaw = measure.marker.gutterWidth ?? 0;
-  const gutterWidth = Number.isFinite(gutterWidthRaw) && gutterWidthRaw >= 0 ? gutterWidthRaw : 0;
-
-  return markerWidth + gutterWidth;
-}
-
 export type ParagraphLayoutContext = {
   block: ParagraphBlock;
   measure: ParagraphMeasure;
@@ -408,7 +331,6 @@ export function layoutParagraphBlock(ctx: ParagraphLayoutContext, anchors?: Para
   const negativeRightIndent = indentRight < 0 ? indentRight : 0;
   // Paragraph content width should honor paragraph indents (including negative values).
   const remeasureWidth = Math.max(1, columnWidth - indentLeft - indentRight);
-  const hasNegativeIndent = indentLeft < 0 || indentRight < 0;
   let didRemeasureForColumnWidth = false;
   if (
     typeof remeasureParagraph === 'function' &&
diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts
index 34b8cbc29..8c0a14914 100644
--- a/packages/layout-engine/painters/dom/src/renderer.ts
+++ b/packages/layout-engine/painters/dom/src/renderer.ts
@@ -20,7 +20,6 @@ import type {
   ImageDrawing,
   ParagraphAttrs,
   ParagraphBorder,
-  ParagraphBorders,
   ListItemFragment,
   ListBlock,
   ListMeasure,
@@ -67,12 +66,7 @@ import { sanitizeHref, encodeTooltip } from '@superdoc/url-validation';
 import { renderTableFragment as renderTableFragmentElement } from './table/renderTableFragment.js';
 import { assertPmPositions, assertFragmentPmPositions } from './pm-position-validation.js';
 import { applySdtContainerStyling } from './utils/sdt-helpers.js';
-import {
-  generateRulerDefinitionFromPx,
-  createRulerElement,
-  ensureRulerStyles,
-  RULER_CLASS_NAMES,
-} from './ruler/index.js';
+import { generateRulerDefinitionFromPx, createRulerElement, ensureRulerStyles } from './ruler/index.js';
 import { toCssFontFamily } from '../../../../../shared/font-utils/index.js';
 import {
   hashParagraphBorders,
@@ -1887,7 +1881,6 @@ export class DomPainter {
         // When using explicit segment positioning, segments are absolutely positioned and textIndent
         // has no effect, so we skip it to avoid confusion.
         // Also skip when left indent is negative - fragment positioning already handles that case.
-        const hasNegativeLeftIndent = paraIndentLeft != null && paraIndentLeft < 0;
         if (!fragment.continuesFromPrev && index === 0 && firstLineOffset && !isListFirstLine) {
           if (!hasExplicitSegmentPositioning) {
             lineEl.style.textIndent = `${firstLineOffset}px`;
@@ -3767,7 +3760,7 @@ export class DomPainter {
     context: FragmentRenderContext,
     availableWidthOverride?: number,
     lineIndex?: number,
-    skipJustify?: boolean,
+    _skipJustify?: boolean,
   ): HTMLElement {
     if (!this.doc) {
       throw new Error('DomPainter: document is not available');
diff --git a/packages/layout-engine/pm-adapter/src/attributes/paragraph-styles.ts b/packages/layout-engine/pm-adapter/src/attributes/paragraph-styles.ts
index 1e04b95f9..ff3d387e6 100644
--- a/packages/layout-engine/pm-adapter/src/attributes/paragraph-styles.ts
+++ b/packages/layout-engine/pm-adapter/src/attributes/paragraph-styles.ts
@@ -167,7 +167,7 @@ export const hydrateParagraphStyleAttrs = (
   }
 
   const hydrated: ParagraphStyleHydration = {
-    resolved,
+    resolved: resolved as ResolvedParagraphProperties,
     spacing: resolvedSpacing,
     indent: resolvedIndent,
     borders: cloneIfObject(resolvedExtended.borders) as ParagraphAttrs['borders'],
diff --git a/packages/super-editor/index.html b/packages/super-editor/index.html
index 14096b05c..7e9c5b2b6 100644
--- a/packages/super-editor/index.html
+++ b/packages/super-editor/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app" role="application"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/super-editor/package.json b/packages/super-editor/package.json
index 9d832fd35..4b3e87c15 100644
--- a/packages/super-editor/package.json
+++ b/packages/super-editor/package.json
@@ -45,6 +45,11 @@
     "build": "vite build",
     "build:watch": "vite build --watch",
     "types:check": "tsc --noEmit",
+    "types:check:strict": "tsc -p tsconfig.strict.json",
+    "types:check:extensions": "tsc -p tsconfig.extensions.json",
+    "types:check:vue": "vue-tsc --noEmit",
+    "types:check:test": "tsc -p tsconfig.test.json",
+    "types:check:all": "npm run types:check:strict && npm run types:check:vue && npm run types:check:test",
     "types:build": "tsc -p tsconfig.build.json",
     "test": "vitest",
     "test:debug": "vitest --inspect-brk --pool threads --poolOptions.threads.singleThread",
@@ -53,13 +58,13 @@
     "pack": "rm *.tgz 2>/dev/null || true && npm run build && npm pack && mv harbour-enterprises-super-editor-0.0.1-alpha.0.tgz ./super-editor.tgz"
   },
   "dependencies": {
-    "@superdoc/word-layout": "*",
-    "@superdoc/pm-adapter": "*",
-    "@superdoc/layout-bridge": "*",
-    "@superdoc/url-validation": "*",
-    "@superdoc/painter-dom": "*",
     "@superdoc/contracts": "*",
+    "@superdoc/layout-bridge": "*",
     "@superdoc/measuring-dom": "*",
+    "@superdoc/painter-dom": "*",
+    "@superdoc/pm-adapter": "*",
+    "@superdoc/url-validation": "*",
+    "@superdoc/word-layout": "*",
     "buffer-crc32": "^1.0.0",
     "color2k": "^2.0.3",
     "eventemitter3": "^5.0.1",
@@ -98,6 +103,8 @@
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.0",
+    "@typescript-eslint/parser": "^8.48.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.6",
     "postcss-nested": "^6.0.1",
@@ -107,6 +114,7 @@
     "typescript": "^5.7.3",
     "vite": "^6.3.5",
     "vite-plugin-node-polyfills": "^0.24.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.1.5"
   }
 }
diff --git a/packages/super-editor/src/components/SuperInput.vue b/packages/super-editor/src/components/SuperInput.vue
index b66fe0020..d2f2133df 100644
--- a/packages/super-editor/src/components/SuperInput.vue
+++ b/packages/super-editor/src/components/SuperInput.vue
@@ -1,54 +1,51 @@
-<script setup>
+<script setup lang="ts">
 import { ref, shallowRef, onMounted, onBeforeUnmount } from 'vue';
+import type { Editor as EditorType } from '@/index.js';
 import { Editor } from '@/index.js';
 import { getRichTextExtensions, Placeholder } from '@extensions/index.js';
+import type { Transaction } from 'prosemirror-state';
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
-const props = defineProps({
-  modelValue: {
-    type: String,
-  },
-
-  placeholder: {
-    type: String,
-    required: false,
-    default: 'Type something...',
-  },
-
-  options: {
-    type: Object,
-    required: false,
-    default: () => ({}),
-  },
-
-  users: {
-    type: Array,
-    required: false,
-    default: () => [],
-  },
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  options?: Record<string, unknown>;
+  users?: unknown[];
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void;
+  (e: 'focus', payload: { editor: EditorType; transaction: Transaction }): void;
+  (e: 'blur', payload: { editor: EditorType; transaction: Transaction }): void;
+}
+
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Type something...',
+  options: () => ({}),
+  users: () => [],
 });
 
-const editor = shallowRef();
-const editorElem = ref(null);
+const editor = shallowRef<EditorType>();
+const editorElem = ref<HTMLElement | null>(null);
 const isFocused = ref(false);
 
-const onTransaction = ({ editor, transaction }) => {
+const onTransaction = ({ editor, transaction }: { editor: EditorType; transaction: Transaction }): void => {
   const contents = editor.getHTML();
   emit('update:modelValue', contents);
 };
 
-const onFocus = ({ editor, transaction }) => {
+const onFocus = ({ editor, transaction }: { editor: EditorType; transaction: Transaction }): void => {
   isFocused.value = true;
   updateUsersState();
   emit('focus', { editor, transaction });
 };
 
-const onBlur = ({ editor, transaction }) => {
+const onBlur = ({ editor, transaction }: { editor: EditorType; transaction: Transaction }): void => {
   isFocused.value = false;
   emit('blur', { editor, transaction });
 };
 
-const initEditor = async () => {
+const initEditor = async (): Promise<void> => {
   Placeholder.options.placeholder = props.placeholder || 'Type something...';
 
   props.options.onTransaction = onTransaction;
@@ -64,12 +61,12 @@ const initEditor = async () => {
   });
 };
 
-const handleFocus = () => {
+const handleFocus = (): void => {
   isFocused.value = true;
   editor.value?.view?.focus();
 };
 
-const updateUsersState = () => {
+const updateUsersState = (): void => {
   editor.value?.setOptions({ users: props.users });
 };
 
diff --git a/packages/super-editor/src/components/TableResizeOverlay.vue b/packages/super-editor/src/components/TableResizeOverlay.vue
index d30a4827c..3fadbfb83 100644
--- a/packages/super-editor/src/components/TableResizeOverlay.vue
+++ b/packages/super-editor/src/components/TableResizeOverlay.vue
@@ -26,33 +26,81 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import type { Editor } from '@/core/Editor.js';
 import { pixelsToTwips, twipsToPixels } from '@core/super-converter/helpers.js';
 import { measureCache } from '@superdoc/layout-bridge';
 
 /**
  * Props for the TableResizeOverlay component
  */
-const props = defineProps({
+interface Props {
   /** Editor instance for dispatching transactions */
-  editor: {
-    type: Object,
-    required: true,
-  },
+  editor: Editor;
   /** Show or hide the overlay */
-  visible: {
-    type: Boolean,
-    default: false,
-  },
+  visible?: boolean;
   /** Table fragment element containing data-table-boundaries */
-  tableElement: {
-    type: Object,
-    default: null,
-  },
+  tableElement?: HTMLElement | null;
+}
+
+/**
+ * Payload for resize-start event
+ */
+interface ResizeStartPayload {
+  columnIndex: number;
+  isRightEdge: boolean;
+  initialWidths: number[];
+}
+
+/**
+ * Payload for resize-move event
+ */
+interface ResizeMovePayload {
+  columnIndex: number;
+  delta: number;
+}
+
+/**
+ * Payload for resize-end event
+ */
+interface ResizeEndPayload {
+  columnIndex: number;
+  finalWidths: number[];
+  delta: number;
+}
+
+/**
+ * Payload for resize-success event
+ */
+interface ResizeSuccessPayload {
+  columnIndex: number;
+  newWidths: number[];
+}
+
+/**
+ * Payload for resize-error event
+ */
+interface ResizeErrorPayload {
+  columnIndex?: number;
+  error: string | unknown;
+  rawMetadata?: string;
+}
+
+interface Emits {
+  (e: 'resize-start', payload: ResizeStartPayload): void;
+  (e: 'resize-move', payload: ResizeMovePayload): void;
+  (e: 'resize-end', payload: ResizeEndPayload): void;
+  (e: 'resize-success', payload: ResizeSuccessPayload): void;
+  (e: 'resize-error', payload: ResizeErrorPayload): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  tableElement: null,
 });
 
-const emit = defineEmits(['resize-start', 'resize-move', 'resize-end', 'resize-success', 'resize-error']);
+const emit = defineEmits<Emits>();
 
 const overlayRect = ref(null);
 /**
diff --git a/packages/super-editor/src/components/cursor-helpers.js b/packages/super-editor/src/components/cursor-helpers.ts
similarity index 81%
rename from packages/super-editor/src/components/cursor-helpers.js
rename to packages/super-editor/src/components/cursor-helpers.ts
index 323a3cc75..0177eca5b 100644
--- a/packages/super-editor/src/components/cursor-helpers.js
+++ b/packages/super-editor/src/components/cursor-helpers.ts
@@ -1,19 +1,33 @@
-import { TextSelection } from 'prosemirror-state';
+import { TextSelection, EditorState } from 'prosemirror-state';
+import type { Editor } from '../core/Editor.js';
+import type { Component } from 'vue';
 import LinkInput from './toolbar/LinkInput.vue';
 import { getEditorSurfaceElement } from '../core/helpers/editorSurface.js';
 
+interface PopoverControls {
+  component: Component;
+  position: {
+    left: string;
+    top: string;
+  };
+  props: {
+    showInput: boolean;
+  };
+  visible: boolean;
+}
+
 /**
  * Calculates cursor position based on margin click event
  * @param {MouseEvent} event Mousedown event
- * @param {SuperEditor} editor SuperEditor instance
+ * @param {Editor} editor Editor instance
  */
-export const onMarginClickCursorChange = (event, editor) => {
+export const onMarginClickCursorChange = (event: MouseEvent, editor: Editor): void => {
   const y = event.clientY;
   const x = event.clientX;
   const { view } = editor;
   const editorRect = view.dom.getBoundingClientRect();
 
-  let coords = {
+  const coords = {
     left: 0,
     top: y,
   };
@@ -51,9 +65,14 @@ export const onMarginClickCursorChange = (event, editor) => {
  * Checks if the current selection has a parent node of a given type
  * and shows a popover with a link input if it does
  * @param {Editor} editor - The editor instance
- * @param {Object} popoverControls - The popover controls object
+ * @param {MouseEvent} event - The mouse event
+ * @param {PopoverControls} popoverControls - The popover controls object
  */
-export const checkNodeSpecificClicks = (editor, event, popoverControls) => {
+export const checkNodeSpecificClicks = (
+  editor: Editor | null | undefined,
+  event: MouseEvent,
+  popoverControls: PopoverControls,
+): void => {
   if (!editor) return;
   const state = editor.state;
   if (!state) return;
@@ -76,20 +95,24 @@ export const checkNodeSpecificClicks = (editor, event, popoverControls) => {
   }
 };
 
+interface SelectionCheckOptions {
+  requireEnds?: boolean;
+}
+
 /**
  * Checks if the current selection is inside a node or mark with the given name.
  * Optionally, can restrict the check to only the start or end of the selection (not anywhere in the range).
  *
  * @param {EditorState} state - The ProseMirror editor state.
  * @param {string} name - The node or mark name to check for (e.g. 'paragraph', 'link').
- * @param {Object} [options] - Optional settings.
+ * @param {SelectionCheckOptions} [options] - Optional settings.
  * @param {boolean} [options.requireEnds=false] - If true, only checks if the start or end of the selection has the node/mark, not if it exists anywhere in the selection.
  *
  * This is useful for cases like showing a link popup: you may only want to show the popup if the selection starts or ends with a link, not if a link exists anywhere in the selection.
  *
  * @returns {boolean}
  */
-export function selectionHasNodeOrMark(state, name, options = {}) {
+export function selectionHasNodeOrMark(state: EditorState, name: string, options: SelectionCheckOptions = {}): boolean {
   const { requireEnds = false } = options;
   const $from = state.selection.$from;
   const $to = state.selection.$to;
@@ -158,9 +181,9 @@ export function selectionHasNodeOrMark(state, name, options = {}) {
 /**
  * Move the editor cursor to the position closest to the mouse event
  * @param {MouseEvent} event
- * @param {Object} editor - The editor instance
+ * @param {Editor} editor - The editor instance
  */
-export function moveCursorToMouseEvent(event, editor) {
+export function moveCursorToMouseEvent(event: MouseEvent, editor: Editor | null | undefined): void {
   if (!editor) return;
   const state = editor.state;
   if (!state) return;
diff --git a/packages/super-editor/src/components/pagination-helpers.js b/packages/super-editor/src/components/pagination-helpers.ts
similarity index 78%
rename from packages/super-editor/src/components/pagination-helpers.js
rename to packages/super-editor/src/components/pagination-helpers.ts
index 6231eda8c..0af58aea2 100644
--- a/packages/super-editor/src/components/pagination-helpers.js
+++ b/packages/super-editor/src/components/pagination-helpers.ts
@@ -1,4 +1,7 @@
 import { isHeadless } from '@/utils/headless-helpers.js';
+import type { Editor } from '../core/Editor.js';
+import type { Ref } from 'vue';
+
 /**
  * Adjusts pagination breaks based on editor zoom/positioning
  *
@@ -6,7 +9,10 @@ import { isHeadless } from '@/utils/headless-helpers.js';
  * @param {Object} editor The editor instance
  * @returns {void}
  */
-export function adjustPaginationBreaks(editorElem, editor) {
+export function adjustPaginationBreaks(
+  editorElem: Ref<HTMLElement | undefined>,
+  editor: Ref<Editor | undefined>,
+): void {
   if (!editorElem.value || !editor?.value?.options?.scale || isHeadless(editor)) return;
 
   const zoom = editor.value.options.scale;
@@ -14,7 +20,7 @@ export function adjustPaginationBreaks(editorElem, editor) {
 
   // Find all `.pagination-break-wrapper` nodes and adjust them
   const breakNodes = editorElem.value.querySelectorAll('.pagination-break-wrapper');
-  let firstLeft;
+  let firstLeft: number | undefined;
 
   // We align all nodes to the first one, which is guaranteed to be in the right place
   // since its the original header and is not generated inside any document node
@@ -26,7 +32,7 @@ export function adjustPaginationBreaks(editorElem, editor) {
       const diff = left - firstLeft;
       // Note: elements with "position: fixed" do not work correctly with transform style.
       // node.style.left = `${diff}px`;
-      node.style.transform = `translateX(${diff}px)`;
+      (node as HTMLElement).style.transform = `translateX(${diff}px)`;
     }
   });
 }
diff --git a/packages/super-editor/src/components/popovers/GenericPopover.vue b/packages/super-editor/src/components/popovers/GenericPopover.vue
index ac88b1574..096744ffd 100644
--- a/packages/super-editor/src/components/popovers/GenericPopover.vue
+++ b/packages/super-editor/src/components/popovers/GenericPopover.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue';
 import { moveCursorToMouseEvent } from '../cursor-helpers.js';
 
diff --git a/packages/super-editor/src/components/popovers/Mentions.vue b/packages/super-editor/src/components/popovers/Mentions.vue
index 6dc272bdf..a7fab5673 100644
--- a/packages/super-editor/src/components/popovers/Mentions.vue
+++ b/packages/super-editor/src/components/popovers/Mentions.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 const props = defineProps({
diff --git a/packages/super-editor/src/components/rulers/Ruler.vue b/packages/super-editor/src/components/rulers/Ruler.vue
index 8d883e182..b0f8b6938 100644
--- a/packages/super-editor/src/components/rulers/Ruler.vue
+++ b/packages/super-editor/src/components/rulers/Ruler.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, reactive, watch } from 'vue';
 import { generateRulerDefinition, clampHandlePosition, calculateMarginFromHandle } from '@superdoc/painter-dom';
 
diff --git a/packages/super-editor/src/components/slash-menu/SlashMenu.vue b/packages/super-editor/src/components/slash-menu/SlashMenu.vue
index ac7920ca6..434414a62 100644
--- a/packages/super-editor/src/components/slash-menu/SlashMenu.vue
+++ b/packages/super-editor/src/components/slash-menu/SlashMenu.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed, markRaw } from 'vue';
 import { SlashMenuPluginKey } from '../../extensions/slash-menu/slash-menu.js';
 import { getPropsByItemId } from './utils.js';
diff --git a/packages/super-editor/src/components/slash-menu/constants.js b/packages/super-editor/src/components/slash-menu/constants.ts
similarity index 93%
rename from packages/super-editor/src/components/slash-menu/constants.js
rename to packages/super-editor/src/components/slash-menu/constants.ts
index c85cdf7b9..1e4baed8f 100644
--- a/packages/super-editor/src/components/slash-menu/constants.js
+++ b/packages/super-editor/src/components/slash-menu/constants.ts
@@ -13,7 +13,7 @@ import pasteIconSvg from '@superdoc/common/icons/paste-solid.svg?raw';
 import checkIconSvg from '@superdoc/common/icons/check-solid.svg?raw';
 import xMarkIconSvg from '@superdoc/common/icons/xmark-solid.svg?raw';
 
-export const ICONS = {
+export const ICONS: Record<string, string> = {
   addRowBefore: plusIconSvg,
   addRowAfter: plusIconSvg,
   addColumnBefore: plusIconSvg,
@@ -38,7 +38,7 @@ export const ICONS = {
 };
 
 // Table actions constant
-export const TEXTS = {
+export const TEXTS: Record<string, string> = {
   addRowBefore: 'Insert row above',
   addRowAfter: 'Insert row below',
   addColumnBefore: 'Insert column left',
@@ -64,7 +64,18 @@ export const TEXTS = {
   trackChangesReject: 'Reject change',
 };
 
-export const tableActionsOptions = [
+export interface TableAction {
+  label: string;
+  command: string;
+  icon: string;
+  bottomBorder?: boolean;
+  props: {
+    'data-item': string;
+    ariaLabel: string;
+  };
+}
+
+export const tableActionsOptions: TableAction[] = [
   {
     label: TEXTS.addRowBefore,
     command: 'addRowBefore',
@@ -171,4 +182,4 @@ export const tableActionsOptions = [
 export const TRIGGERS = {
   slash: 'slash',
   click: 'click',
-};
+} as const;
diff --git a/packages/super-editor/src/components/slash-menu/menuItems.js b/packages/super-editor/src/components/slash-menu/menuItems.ts
similarity index 100%
rename from packages/super-editor/src/components/slash-menu/menuItems.js
rename to packages/super-editor/src/components/slash-menu/menuItems.ts
diff --git a/packages/super-editor/src/components/slash-menu/utils.js b/packages/super-editor/src/components/slash-menu/utils.ts
similarity index 100%
rename from packages/super-editor/src/components/slash-menu/utils.js
rename to packages/super-editor/src/components/slash-menu/utils.ts
diff --git a/packages/super-editor/src/components/toolbar/AIWriter.vue b/packages/super-editor/src/components/toolbar/AIWriter.vue
index 8fbbe4493..8215d306e 100644
--- a/packages/super-editor/src/components/toolbar/AIWriter.vue
+++ b/packages/super-editor/src/components/toolbar/AIWriter.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue';
 import { writeStreaming, rewriteStreaming, formatDocument } from './ai-helpers';
 import { TextSelection } from 'prosemirror-state';
diff --git a/packages/super-editor/src/components/toolbar/AlignmentButtons.vue b/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
index a621308cc..375474826 100644
--- a/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
+++ b/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 
diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
index 5a081e6f4..2bf3cbeea 100644
--- a/packages/super-editor/src/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref, h } from 'vue';
 import ToolbarButton from './ToolbarButton.vue';
 import ToolbarSeparator from './ToolbarSeparator.vue';
diff --git a/packages/super-editor/src/components/toolbar/DocumentMode.vue b/packages/super-editor/src/components/toolbar/DocumentMode.vue
index 021e83597..23a0e4fff 100644
--- a/packages/super-editor/src/components/toolbar/DocumentMode.vue
+++ b/packages/super-editor/src/components/toolbar/DocumentMode.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 
diff --git a/packages/super-editor/src/components/toolbar/IconGrid.vue b/packages/super-editor/src/components/toolbar/IconGrid.vue
index 946a5f865..6bc23eddc 100644
--- a/packages/super-editor/src/components/toolbar/IconGrid.vue
+++ b/packages/super-editor/src/components/toolbar/IconGrid.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import IconGridRow from './IconGridRow.vue';
 import DropIcon from '@superdoc/common/icons/droplet-slash.svg?raw';
 const emit = defineEmits(['select', 'clickoutside']);
diff --git a/packages/super-editor/src/components/toolbar/IconGridRow.vue b/packages/super-editor/src/components/toolbar/IconGridRow.vue
index b8e60736c..f359d6f45 100644
--- a/packages/super-editor/src/components/toolbar/IconGridRow.vue
+++ b/packages/super-editor/src/components/toolbar/IconGridRow.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { toolbarIcons } from './toolbarIcons.js';
 
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index 4fdbb5bff..5dfa0c2e0 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { toolbarIcons } from './toolbarIcons.js';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
diff --git a/packages/super-editor/src/components/toolbar/LinkedStyle.vue b/packages/super-editor/src/components/toolbar/LinkedStyle.vue
index c02e8cf88..85c4ffe65 100644
--- a/packages/super-editor/src/components/toolbar/LinkedStyle.vue
+++ b/packages/super-editor/src/components/toolbar/LinkedStyle.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted } from 'vue';
 import { toolbarIcons } from './toolbarIcons.js';
 import { generateLinkedStyleString, getQuickFormatList } from '@extensions/linked-styles/index.js';
diff --git a/packages/super-editor/src/components/toolbar/OverflowMenu.vue b/packages/super-editor/src/components/toolbar/OverflowMenu.vue
index 9f668d40d..f59ab1357 100644
--- a/packages/super-editor/src/components/toolbar/OverflowMenu.vue
+++ b/packages/super-editor/src/components/toolbar/OverflowMenu.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { getCurrentInstance, ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import ToolbarButton from './ToolbarButton.vue';
 import ButtonGroup from './ButtonGroup.vue';
diff --git a/packages/super-editor/src/components/toolbar/SearchInput.vue b/packages/super-editor/src/components/toolbar/SearchInput.vue
index c8805ab7a..64efb09dc 100644
--- a/packages/super-editor/src/components/toolbar/SearchInput.vue
+++ b/packages/super-editor/src/components/toolbar/SearchInput.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 
 const props = defineProps({
diff --git a/packages/super-editor/src/components/toolbar/TableActions.vue b/packages/super-editor/src/components/toolbar/TableActions.vue
index 9b7960a18..dcb01d168 100644
--- a/packages/super-editor/src/components/toolbar/TableActions.vue
+++ b/packages/super-editor/src/components/toolbar/TableActions.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const emit = defineEmits(['select']);
 
 const props = defineProps({
diff --git a/packages/super-editor/src/components/toolbar/TableGrid.vue b/packages/super-editor/src/components/toolbar/TableGrid.vue
index 6c3c825cd..cc1f77bba 100644
--- a/packages/super-editor/src/components/toolbar/TableGrid.vue
+++ b/packages/super-editor/src/components/toolbar/TableGrid.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 const emit = defineEmits(['select', 'clickoutside']);
diff --git a/packages/super-editor/src/components/toolbar/ToggleSlider.vue b/packages/super-editor/src/components/toolbar/ToggleSlider.vue
index f70354b39..e2dc7129a 100644
--- a/packages/super-editor/src/components/toolbar/ToggleSlider.vue
+++ b/packages/super-editor/src/components/toolbar/ToggleSlider.vue
@@ -1,23 +1,27 @@
-<script setup>
-const emit = defineEmits(['toggle', 'select']);
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  command: {
-    type: String,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    required: true,
-  },
-});
+<script setup lang="ts">
+/**
+ * Toolbar item structure
+ */
+interface ToolbarItem {
+  name?: string;
+  command?: string;
+  active?: boolean;
+  [key: string]: unknown;
+}
+
+interface Props {
+  item: ToolbarItem;
+  name: string;
+  command: string;
+  active: boolean;
+}
+
+defineEmits<{
+  toggle: [];
+  select: [];
+}>();
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/packages/super-editor/src/components/toolbar/Toolbar.vue b/packages/super-editor/src/components/toolbar/Toolbar.vue
index 4faca526e..8b4ba68d2 100644
--- a/packages/super-editor/src/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/components/toolbar/Toolbar.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, getCurrentInstance, onMounted, onDeactivated, nextTick } from 'vue';
 import { throttle } from './helpers.js';
 import ButtonGroup from './ButtonGroup.vue';
diff --git a/packages/super-editor/src/components/toolbar/ToolbarButtonIcon.vue b/packages/super-editor/src/components/toolbar/ToolbarButtonIcon.vue
index d91b98953..6b66cf193 100644
--- a/packages/super-editor/src/components/toolbar/ToolbarButtonIcon.vue
+++ b/packages/super-editor/src/components/toolbar/ToolbarButtonIcon.vue
@@ -1,19 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-    default: null,
-  },
+interface Props {
+  name: string;
+  color?: string | null;
+  icon?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: null,
+  icon: null,
 });
 
 const getBarColor = computed(() => {
diff --git a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
index 059a16927..c4290fab7 100644
--- a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
+++ b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
@@ -1,16 +1,19 @@
-<script setup>
-import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
-const emit = defineEmits(['command']);
-const props = defineProps({
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
+<script setup lang="ts">
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode.js';
+
+interface Props {
+  active?: boolean;
+}
+
+defineEmits<{
+  command: [];
+}>();
+
+defineProps<Props>();
 
 const { isHighContrastMode } = useHighContrastMode();
 
-const getSeparatorColor = () => {
+const getSeparatorColor = (): string => {
   if (isHighContrastMode.value) {
     return '#000';
   }
diff --git a/packages/super-editor/src/components/toolbar/ai-helpers.js b/packages/super-editor/src/components/toolbar/ai-helpers.ts
similarity index 79%
rename from packages/super-editor/src/components/toolbar/ai-helpers.js
rename to packages/super-editor/src/components/toolbar/ai-helpers.ts
index 36b2723bc..40b569e88 100644
--- a/packages/super-editor/src/components/toolbar/ai-helpers.js
+++ b/packages/super-editor/src/components/toolbar/ai-helpers.ts
@@ -1,3 +1,5 @@
+import type { Editor } from '../../core/Editor.js';
+
 /**
  * AI Helpers - Utilities for interacting with Harbour API for document insights
  * Based on documentation at: https://harbour-enterprises.github.io/Harbour-API-Docs/#insights
@@ -21,22 +23,39 @@
 const DEFAULT_API_ENDPOINT = 'https://sd-dev-express-gateway-i6xtm.ondigitalocean.app/insights';
 const SYSTEM_PROMPT =
   'You are an expert copywriter and you are immersed in a document editor. You are to provide document related text responses based on the user prompts. Only write what is asked for. Do not provide explanations. Try to keep placeholders as short as possible. Do not output your prompt. Your instructions are: ';
+
+interface APIConfig {
+  apiKey?: string;
+  endpoint?: string;
+}
+
+interface InsightPayload {
+  stream: boolean;
+  context: string;
+  doc_text?: string;
+  document_content?: string;
+  insights: Array<{
+    type: string;
+    name: string;
+    message: string;
+    format?: Array<{ value: string }>;
+  }>;
+}
+
 /**
  * UTILITY - Makes a fetch request to the Harbour API
- * @param {Object} payload - The request payload
- * @param {Object} options - Configuration options
- * @param {string} options.apiKey - API key for authentication
- * @param {string} options.endpoint - Custom API endpoint (optional)
+ * @param {InsightPayload} payload - The request payload
+ * @param {APIConfig} options - Configuration options
  * @returns {Promise<Response>} - The API response
  */
-async function baseInsightsFetch(payload, options = {}) {
+async function baseInsightsFetch(payload: InsightPayload, options: APIConfig = {}): Promise<Response> {
   const apiKey = options.apiKey;
 
   // Use the provided endpoint from config, or fall back to the default
   const apiEndpoint = options.endpoint || DEFAULT_API_ENDPOINT;
 
   try {
-    const headers = {
+    const headers: Record<string, string> = {
       'Content-Type': 'application/json',
     };
 
@@ -63,17 +82,25 @@ async function baseInsightsFetch(payload, options = {}) {
   }
 }
 
+type ChunkCallback = (chunk: string) => void;
+type DoneCallback = () => void;
+
 /**
  * UTILITY - Extracts content from a streaming response
  * @param {ReadableStream} stream - The stream to process
- * @param {function} onChunk - Callback for each text chunk
+ * @param {ChunkCallback} onChunk - Callback for each text chunk
+ * @param {DoneCallback} onDone - Callback when streaming is done
  * @returns {Promise<string>} - The complete generated text
  */
-async function processStream(stream, onChunk, onDone) {
+async function processStream(
+  stream: ReadableStream<Uint8Array>,
+  onChunk: ChunkCallback,
+  onDone?: DoneCallback,
+): Promise<string> {
   const reader = stream.getReader();
   const decoder = new TextDecoder();
   let result = '';
-  let buffer = '';
+  const buffer = '';
 
   try {
     while (true) {
@@ -95,7 +122,7 @@ async function processStream(stream, onChunk, onDone) {
     }
 
     // Final attempt to extract content from buffer
-    let extractedValue = getJsonBetweenFencesFromResponse(buffer);
+    const extractedValue = getJsonBetweenFencesFromResponse(buffer);
     if (extractedValue !== null) {
       result = extractedValue;
     }
@@ -114,7 +141,7 @@ async function processStream(stream, onChunk, onDone) {
  * @param {string} buffer - The text buffer to parse
  * @returns {string|null} - The extracted content or null if not found
  */
-function getJsonBetweenFencesFromResponse(buffer) {
+function getJsonBetweenFencesFromResponse(buffer: string): string | null {
   try {
     // Try to extract content between ```json and ```
     const jsonRegex = /```json\s*\n([\s\S]*?)\n\s*```/;
@@ -140,7 +167,7 @@ function getJsonBetweenFencesFromResponse(buffer) {
  * @param {Response} response - The API response
  * @returns {Promise<string>} - The extracted content
  */
-async function returnNonStreamingJson(response) {
+async function returnNonStreamingJson(response: Response): Promise<string> {
   const jsonResponse = await response.json();
   if (jsonResponse.custom_prompt) {
     return jsonResponse.custom_prompt[0].value;
@@ -149,23 +176,32 @@ async function returnNonStreamingJson(response) {
   }
 }
 
+interface WriteOptions {
+  context?: string;
+  documentXml?: string;
+  url?: string;
+  config?: APIConfig;
+}
+
 /**
  * Generate text based on a prompt with streaming
  * @param {string} prompt - User prompt
- * @param {Object} options - Additional options
- * @param {string} options.context - System prompt to guide generation
- * @param {string} options.documentXml - Document XML for context
- * @param {string} options.url - URL of a document to analyze
- * @param {Object} options.config - API configuration
- * @param {function} onChunk - Callback for each text chunk
+ * @param {WriteOptions} options - Additional options
+ * @param {ChunkCallback} onChunk - Callback for each text chunk
+ * @param {DoneCallback} onDone - Callback when done
  * @returns {Promise<string>} - The complete generated text
  */
-export async function writeStreaming(prompt, options = {}, onChunk, onDone) {
+export async function writeStreaming(
+  prompt: string,
+  options: WriteOptions = {},
+  onChunk: ChunkCallback,
+  onDone?: DoneCallback,
+): Promise<string> {
   if (!prompt) {
     throw new Error('Prompt is required for text generation');
   }
 
-  const payload = {
+  const payload: InsightPayload = {
     stream: true,
     context: SYSTEM_PROMPT,
     doc_text: '',
@@ -192,19 +228,15 @@ export async function writeStreaming(prompt, options = {}, onChunk, onDone) {
 /**
  * Generate text based on a prompt (non-streaming)
  * @param {string} prompt - User prompt
- * @param {Object} options - Additional options
- * @param {string} options.context - System prompt to guide generation
- * @param {string} options.documentXml - Document XML for context
- * @param {string} options.url - URL of a document to analyze
- * @param {Object} options.config - API configuration
+ * @param {WriteOptions} options - Additional options
  * @returns {Promise<string>} - The generated text
  */
-export async function write(prompt, options = {}) {
+export async function write(prompt: string, options: WriteOptions = {}): Promise<string> {
   if (!prompt) {
     throw new Error('Prompt is required for text generation');
   }
 
-  const payload = {
+  const payload: InsightPayload = {
     stream: false,
     context: SYSTEM_PROMPT,
     insights: [
@@ -225,14 +257,18 @@ export async function write(prompt, options = {}) {
  * Rewrite text based on a prompt with streaming
  * @param {string} text - Text to rewrite
  * @param {string} prompt - User instructions for rewriting
- * @param {Object} options - Additional options
- * @param {string} options.documentXml - Document XML for context
- * @param {string} options.url - URL of a document to analyze
- * @param {Object} options.config - API configuration
- * @param {function} onChunk - Callback for each text chunk
+ * @param {WriteOptions} options - Additional options
+ * @param {ChunkCallback} onChunk - Callback for each text chunk
+ * @param {DoneCallback} onDone - Callback when done
  * @returns {Promise<string>} - The complete rewritten text
  */
-export async function rewriteStreaming(text, prompt = '', options = {}, onChunk, onDone) {
+export async function rewriteStreaming(
+  text: string,
+  prompt: string = '',
+  options: WriteOptions = {},
+  onChunk: ChunkCallback,
+  onDone?: DoneCallback,
+): Promise<string> {
   if (!text) {
     throw new Error('Text is required for rewriting');
   }
@@ -241,7 +277,7 @@ export async function rewriteStreaming(text, prompt = '', options = {}, onChunk,
     ? `Rewrite the following text: "${text}" using these instructions: ${prompt}`
     : `Rewrite the following text: "${text}"`;
 
-  const payload = {
+  const payload: InsightPayload = {
     stream: true,
     context: SYSTEM_PROMPT,
     insights: [
@@ -264,13 +300,10 @@ export async function rewriteStreaming(text, prompt = '', options = {}, onChunk,
  * Rewrite text based on a prompt (non-streaming)
  * @param {string} text - Text to rewrite
  * @param {string} prompt - User instructions for rewriting
- * @param {Object} options - Additional options
- * @param {string} options.documentXml - Document XML for context
- * @param {string} options.url - URL of a document to analyze
- * @param {Object} options.config - API configuration
+ * @param {WriteOptions} options - Additional options
  * @returns {Promise<string>} - The rewritten text
  */
-export async function rewrite(text, prompt = '', options = {}) {
+export async function rewrite(text: string, prompt: string = '', options: WriteOptions = {}): Promise<string> {
   if (!text) {
     throw new Error('Text is required for rewriting');
   }
@@ -279,7 +312,7 @@ export async function rewrite(text, prompt = '', options = {}) {
     ? `Rewrite the following text: "${text}" using these instructions: ${prompt}`
     : `Rewrite the following text: "${text}"`;
 
-  const payload = {
+  const payload: InsightPayload = {
     stream: false,
     context: SYSTEM_PROMPT,
     insights: [
@@ -296,12 +329,26 @@ export async function rewrite(text, prompt = '', options = {}) {
   return returnNonStreamingJson(response);
 }
 
+interface FormatRule {
+  name: string;
+  pattern: RegExp;
+  transform: (
+    match: string,
+    content: string,
+    editor: Editor,
+  ) => {
+    type: string;
+    marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+    text: string;
+  };
+}
+
 /**
  * Format registry to manage text formatting rules
  * Each rule has a name, pattern, and transform function
  * Extend this for more rules (e.g. italic, underline, etc.)
  */
-const formatRegistry = {
+const formatRegistry: { rules: FormatRule[] } = {
   rules: [
     {
       name: 'bold',
@@ -342,9 +389,9 @@ const formatRegistry = {
  * node positions and boundaries. The function works from the end of the document to the start to avoid
  * position shifts when making replacements.
  *
- * @param {Object} editor - The ProseMirror editor instance containing the document state and view
+ * @param {Editor} editor - The ProseMirror editor instance containing the document state and view
  */
-export function formatDocument(editor) {
+export function formatDocument(editor: Editor): void {
   try {
     let doc = editor.state.doc;
     const docText = doc.textContent || '';
@@ -354,7 +401,13 @@ export function formatDocument(editor) {
     // Registry is defined above
     formatRegistry.rules.forEach((rule) => {
       rule.pattern.lastIndex = 0;
-      const matches = [];
+      const matches: Array<{
+        rule: FormatRule;
+        startPos: number;
+        endPos: number;
+        originalText: string;
+        contentText: string;
+      }> = [];
       let match;
 
       while ((match = rule.pattern.exec(docText)) !== null) {
@@ -381,7 +434,7 @@ export function formatDocument(editor) {
           const replacement = rule.transform(originalText, contentText, editor);
 
           // Gather nodes needed to replace the match
-          const nodesInRange = [];
+          const nodesInRange: Array<{ node: import('prosemirror-model').Node; pos: number }> = [];
           doc.nodesBetween(startPos, Math.min(endPos, doc.content.size), (node, pos) => {
             if (node.isText) {
               nodesInRange.push({ node, pos });
@@ -416,10 +469,10 @@ export function formatDocument(editor) {
             if (!foundExactMatch) {
               // Build text spanning multiple nodes
               let combinedText = '';
-              let offsets = [];
+              const offsets: number[] = [];
               // Start of first node
               // This acts as an anchor point for the relative position of characters in other nodes
-              let basePos = nodesInRange[0].pos;
+              const basePos = nodesInRange[0].pos;
 
               // Build a mapping between combined text positions and actual document positions
               for (const nodeInfo of nodesInRange) {
diff --git a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.ts
similarity index 79%
rename from packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
rename to packages/super-editor/src/components/toolbar/color-dropdown-helpers.ts
index 95c3e6207..2a6334d4e 100644
--- a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
+++ b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.ts
@@ -1,12 +1,28 @@
-import { h } from 'vue';
+import { h, type VNode, type Ref } from 'vue';
 import IconGrid from './IconGrid.vue';
 import { toolbarIcons } from './toolbarIcons.js';
 
-const closeDropdown = (dropdown) => {
+interface DropdownButton {
+  expand: Ref<boolean>;
+  iconColor: Ref<string>;
+}
+
+const closeDropdown = (dropdown: DropdownButton): void => {
   dropdown.expand.value = false;
 };
 
-export const makeColorOption = (color, label = null) => {
+export interface ColorOption {
+  label: string | null;
+  icon: string;
+  value: string;
+  style: {
+    color: string;
+    boxShadow: string;
+    borderRadius: string;
+  };
+}
+
+export const makeColorOption = (color: string, label: string | null = null): ColorOption => {
   return {
     label,
     icon: toolbarIcons.colorOption,
@@ -19,8 +35,17 @@ export const makeColorOption = (color, label = null) => {
   };
 };
 
-export const renderColorOptions = (superToolbar, button, customIcons = [], hasNoneIcon = false) => {
-  const handleSelect = (e) => {
+interface SuperToolbar {
+  emitCommand: (payload: { item: DropdownButton; argument: string }) => void;
+}
+
+export const renderColorOptions = (
+  superToolbar: SuperToolbar,
+  button: DropdownButton,
+  customIcons: ColorOption[][] = [],
+  hasNoneIcon: boolean = false,
+): VNode => {
+  const handleSelect = (e: string): void => {
     button.iconColor.value = e;
     superToolbar.emitCommand({ item: button, argument: e });
     closeDropdown(button);
@@ -37,7 +62,7 @@ export const renderColorOptions = (superToolbar, button, customIcons = [], hasNo
   ]);
 };
 
-const icons = [
+const icons: ColorOption[][] = [
   [
     makeColorOption('#111111', 'black'),
     makeColorOption('#333333', 'dark gray'),
@@ -119,6 +144,6 @@ const icons = [
   ],
 ];
 
-export const getAvailableColorOptions = () => {
+export const getAvailableColorOptions = (): string[] => {
   return icons.flat().map((item) => item.value);
 };
diff --git a/packages/super-editor/src/components/toolbar/constants.js b/packages/super-editor/src/components/toolbar/constants.ts
similarity index 83%
rename from packages/super-editor/src/components/toolbar/constants.js
rename to packages/super-editor/src/components/toolbar/constants.ts
index d6b58992c..5d3662cf5 100644
--- a/packages/super-editor/src/components/toolbar/constants.js
+++ b/packages/super-editor/src/components/toolbar/constants.ts
@@ -1,4 +1,22 @@
-export const TOOLBAR_FONTS = [
+export interface ToolbarFont {
+  label: string;
+  key: string;
+  fontWeight: number;
+  props: {
+    style: { fontFamily: string };
+    'data-item': string;
+  };
+}
+
+export interface ToolbarFontSize {
+  label: string;
+  key: string;
+  props: {
+    'data-item': string;
+  };
+}
+
+export const TOOLBAR_FONTS: ToolbarFont[] = [
   {
     label: 'Georgia',
     key: 'Georgia, serif',
@@ -37,7 +55,7 @@ export const TOOLBAR_FONTS = [
   },
 ];
 
-export const TOOLBAR_FONT_SIZES = [
+export const TOOLBAR_FONT_SIZES: ToolbarFontSize[] = [
   { label: '8', key: '8pt', props: { 'data-item': 'btn-fontSize-option' } },
   { label: '9', key: '9pt', props: { 'data-item': 'btn-fontSize-option' } },
   { label: '10', key: '10pt', props: { 'data-item': 'btn-fontSize-option' } },
diff --git a/packages/super-editor/src/components/toolbar/defaultItems.js b/packages/super-editor/src/components/toolbar/defaultItems.ts
similarity index 87%
rename from packages/super-editor/src/components/toolbar/defaultItems.js
rename to packages/super-editor/src/components/toolbar/defaultItems.ts
index f8bb6062c..dc6b194b4 100644
--- a/packages/super-editor/src/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/components/toolbar/defaultItems.ts
@@ -1,7 +1,7 @@
-import { h, ref } from 'vue';
+import { h, ref, type Ref } from 'vue';
 
 import { sanitizeNumber } from './helpers';
-import { useToolbarItem } from './use-toolbar-item';
+import { useToolbarItem, type ToolbarItem } from './use-toolbar-item';
 import AIWriter from './AIWriter.vue';
 import AlignmentButtons from './AlignmentButtons.vue';
 import DocumentMode from './DocumentMode.vue';
@@ -17,10 +17,21 @@ import SearchInput from './SearchInput.vue';
 import { TOOLBAR_FONTS, TOOLBAR_FONT_SIZES } from './constants.js';
 import { getQuickFormatList } from '@extensions/linked-styles/index.js';
 
-const closeDropdown = (dropdown) => {
+const closeDropdown = (dropdown: ToolbarItem): void => {
   dropdown.expand.value = false;
 };
 
+interface MakeDefaultItemsParams {
+  superToolbar: import('./super-toolbar').SuperToolbar;
+  toolbarIcons: Record<string, string>;
+  toolbarTexts: Record<string, string>;
+  toolbarFonts: Array<{ label: string; key: string }> | null;
+  hideButtons: boolean;
+  availableWidth: number;
+  role: string;
+  isDev?: boolean;
+}
+
 export const makeDefaultItems = ({
   superToolbar,
   toolbarIcons,
@@ -30,7 +41,7 @@ export const makeDefaultItems = ({
   availableWidth,
   role,
   isDev = false,
-} = {}) => {
+}: MakeDefaultItemsParams) => {
   // bold
   const bold = useToolbarItem({
     type: 'button',
@@ -62,13 +73,13 @@ export const makeDefaultItems = ({
       ariaLabel: 'Font family',
     },
     options: fontOptions,
-    onActivate: ({ fontFamily }) => {
-      if (!fontFamily) return;
-      fontFamily = fontFamily.split(',')[0]; // in case of fonts with fallbacks
-      fontButton.label.value = fontFamily;
+    onActivate: ({ fontFamily }: { fontFamily?: unknown }) => {
+      if (!fontFamily || typeof fontFamily !== 'string') return;
+      const cleanFontFamily = fontFamily.split(',')[0]; // in case of fonts with fallbacks
+      fontButton.label.value = cleanFontFamily;
 
       const defaultFont = fontOptions.find((i) => i.label === fontButton.defaultLabel.value);
-      const foundFont = fontOptions.find((i) => i.label === fontFamily);
+      const foundFont = fontOptions.find((i) => i.label === cleanFontFamily);
       if (foundFont) {
         fontButton.selectedValue.value = foundFont.key;
       } else if (defaultFont) {
@@ -155,7 +166,7 @@ export const makeDefaultItems = ({
       ariaLabel: 'Font size',
     },
     options: fontSizeOptions,
-    onActivate: ({ fontSize: size }, isMultiple = false) => {
+    onActivate: ({ fontSize: size }: { fontSize?: unknown }, isMultiple = false) => {
       if (isMultiple) {
         // if there are multiple sizes in the selection.
         fontSize.label.value = '';
@@ -164,7 +175,7 @@ export const makeDefaultItems = ({
       }
 
       const defaultSize = fontSizeOptions.find((i) => i.label === String(fontSize.defaultLabel.value));
-      if (!size) {
+      if (!size || typeof size !== 'string') {
         fontSize.label.value = fontSize.defaultLabel.value;
         if (defaultSize) fontSize.selectedValue.value = defaultSize.key;
         else fontSize.selectedValue.value = '';
@@ -174,7 +185,7 @@ export const makeDefaultItems = ({
       let sanitizedValue = sanitizeNumber(size, 12);
       if (sanitizedValue < 8) sanitizedValue = 8;
       if (sanitizedValue > 96) sanitizedValue = 96;
-      let sanitizedValueStr = String(sanitizedValue);
+      const sanitizedValueStr = String(sanitizedValue);
 
       const foundSize = fontSizeOptions.find((i) => {
         return i.label === sanitizedValueStr || i.key === sanitizedValueStr;
@@ -209,7 +220,6 @@ export const makeDefaultItems = ({
     name: 'italic',
     command: 'toggleItalic',
     icon: toolbarIcons.italic,
-    active: false,
     tooltip: toolbarTexts.italic,
     attributes: {
       ariaLabel: 'Italic',
@@ -222,7 +232,6 @@ export const makeDefaultItems = ({
     name: 'underline',
     command: 'toggleUnderline',
     icon: toolbarIcons.underline,
-    active: false,
     tooltip: toolbarTexts.underline,
     attributes: {
       ariaLabel: 'Underline',
@@ -234,7 +243,6 @@ export const makeDefaultItems = ({
     name: 'strike',
     command: 'toggleStrike',
     icon: toolbarIcons.strikethrough,
-    active: false,
     tooltip: toolbarTexts.strikethrough,
     attributes: {
       ariaLabel: 'Strikethrough',
@@ -249,10 +257,9 @@ export const makeDefaultItems = ({
     hideLabel: true,
     markName: 'highlight',
     labelAttr: 'color',
-    active: false,
     tooltip: toolbarTexts.highlight,
     command: 'setHighlight',
-    noArgumentCommand: 'unsetHighlight',
+    noArgumentCommand: false,
     suppressActiveHighlight: true,
     attributes: {
       ariaLabel: 'Highlight',
@@ -264,8 +271,8 @@ export const makeDefaultItems = ({
         render: () => renderColorOptions(superToolbar, highlight, [], true),
       },
     ],
-    onActivate: ({ color }) => {
-      highlight.iconColor.value = color || '';
+    onActivate: ({ color }: { color?: unknown }) => {
+      highlight.iconColor.value = (typeof color === 'string' ? color : '') || '';
     },
     onDeactivate: () => (highlight.iconColor.value = ''),
   });
@@ -278,7 +285,6 @@ export const makeDefaultItems = ({
     hideLabel: true,
     markName: 'textStyle',
     labelAttr: 'color',
-    active: false,
     tooltip: toolbarTexts.color,
     command: 'setColor',
     suppressActiveHighlight: true,
@@ -292,22 +298,21 @@ export const makeDefaultItems = ({
         render: () => renderColorOptions(superToolbar, colorButton),
       },
     ],
-    onActivate: ({ color }) => {
-      colorButton.iconColor.value = color;
+    onActivate: ({ color }: { color?: unknown }) => {
+      colorButton.iconColor.value = typeof color === 'string' ? color : '#000';
     },
     onDeactivate: () => (colorButton.iconColor.value = '#000'),
   });
 
   // search
-  const searchRef = ref(null);
+  const searchRef: Ref<HTMLInputElement | null> = ref(null);
   const search = useToolbarItem({
     type: 'dropdown',
     name: 'search',
-    active: false,
     icon: toolbarIcons.search,
     tooltip: toolbarTexts.search,
     group: 'right',
-    inputRef: searchRef,
+    inputRef: null,
     attributes: {
       ariaLabel: 'Search',
     },
@@ -321,8 +326,8 @@ export const makeDefaultItems = ({
   });
 
   const renderSearchDropdown = () => {
-    const handleSubmit = ({ value }) => {
-      superToolbar.activeEditor.commands.search(value);
+    const handleSubmit = ({ value }: { value: string }) => {
+      superToolbar.activeEditor?.commands.search(value);
     };
 
     return h('div', {}, [
@@ -339,7 +344,6 @@ export const makeDefaultItems = ({
     name: 'link',
     markName: 'link',
     icon: toolbarIcons.link,
-    active: false,
     tooltip: toolbarTexts.link,
     attributes: {
       ariaLabel: 'Link dropdown',
@@ -351,8 +355,8 @@ export const makeDefaultItems = ({
         render: () => renderLinkDropdown(link),
       },
     ],
-    onActivate: ({ href }) => {
-      if (href) link.attributes.value = { href };
+    onActivate: ({ href }: { href?: unknown }) => {
+      if (href && typeof href === 'string') link.attributes.value = { href };
       else link.attributes.value = {};
     },
     onDeactivate: () => {
@@ -369,10 +373,10 @@ export const makeDefaultItems = ({
         goToAnchor: () => {
           closeDropdown(link);
           if (!superToolbar.activeEditor || !link.attributes.value?.href) return;
-          const anchorName = link.attributes.value?.href?.slice(1);
+          const anchorName = (link.attributes.value.href as string)?.slice(1);
           const container = superToolbar.activeEditor.element;
           const anchor = container.querySelector(`a[name='${anchorName}']`);
-          if (anchor) scrollToElement(anchor);
+          if (anchor instanceof HTMLElement) scrollToElement(anchor);
         },
       }),
     ]);
@@ -382,10 +386,9 @@ export const makeDefaultItems = ({
     type: 'options',
     name: 'linkInput',
     command: 'toggleLink',
-    active: false,
   });
-  link.childItem = linkInput;
-  linkInput.parentItem = link;
+  link.childItem.value = linkInput;
+  linkInput.parentItem.value = link;
 
   // image
   const image = useToolbarItem({
@@ -393,7 +396,6 @@ export const makeDefaultItems = ({
     name: 'image',
     command: 'startImageUpload',
     icon: toolbarIcons.image,
-    active: false,
     tooltip: toolbarTexts.image,
     disabled: false,
     attributes: {
@@ -408,7 +410,6 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.table,
     hideLabel: true,
     labelAttr: 'table',
-    active: false,
     tooltip: toolbarTexts.table,
     command: 'insertTable',
     suppressActiveHighlight: true,
@@ -424,9 +425,9 @@ export const makeDefaultItems = ({
     ],
   });
 
-  function renderTableGrid(tableItem) {
-    const handleSelect = (e) => {
-      superToolbar.emitCommand({ item: tableItem, argument: e });
+  function renderTableGrid(tableItem: ToolbarItem) {
+    const handleSelect = (e: unknown) => {
+      superToolbar.emitCommand({ item: tableItem, argument: e, option: undefined });
       closeDropdown(tableItem);
     };
 
@@ -561,13 +562,13 @@ export const makeDefaultItems = ({
     },
   ];
 
-  function renderTableActions(tableActionsItem) {
+  function renderTableActions(tableActionsItem: ToolbarItem) {
     return h(TableActions, {
       options: tableActionsOptions,
-      onSelect: (event) => {
+      onSelect: (event: { command: string }) => {
         closeDropdown(tableActionsItem);
         const { command } = event;
-        superToolbar.emitCommand({ item: tableActionsItem, argument: { command } });
+        superToolbar.emitCommand({ item: tableActionsItem, argument: { command }, option: undefined });
       },
     });
   }
@@ -590,11 +591,11 @@ export const makeDefaultItems = ({
       {
         type: 'render',
         render: () => {
-          const handleSelect = (e) => {
+          const handleSelect = (e: string) => {
             closeDropdown(alignment);
             const buttonWithCommand = { ...alignment, command: 'setTextAlign' };
             buttonWithCommand.command = 'setTextAlign';
-            superToolbar.emitCommand({ item: buttonWithCommand, argument: e });
+            superToolbar.emitCommand({ item: buttonWithCommand, argument: e, option: undefined });
             setAlignmentIcon(alignment, e);
           };
 
@@ -607,24 +608,24 @@ export const makeDefaultItems = ({
         key: 'alignment',
       },
     ],
-    onActivate: ({ textAlign }) => {
-      setAlignmentIcon(alignment, textAlign);
+    onActivate: ({ textAlign }: { textAlign?: unknown }) => {
+      setAlignmentIcon(alignment, typeof textAlign === 'string' ? textAlign : 'left');
     },
     onDeactivate: () => {
       setAlignmentIcon(alignment, 'left');
     },
   });
 
-  const setAlignmentIcon = (alignment, e) => {
-    let alignValue = e === 'both' ? 'justify' : e;
-    let icons = {
+  const setAlignmentIcon = (alignment: ToolbarItem, e: string) => {
+    const alignValue = e === 'both' ? 'justify' : e;
+    const icons = {
       left: toolbarIcons.alignLeft,
       right: toolbarIcons.alignRight,
       center: toolbarIcons.alignCenter,
       justify: toolbarIcons.alignJustify,
     };
 
-    let icon = icons[alignValue] ?? icons.left;
+    const icon = icons[alignValue] ?? icons.left;
     alignment.icon.value = icon;
   };
 
@@ -634,7 +635,6 @@ export const makeDefaultItems = ({
     name: 'list',
     command: 'toggleBulletList',
     icon: toolbarIcons.bulletList,
-    active: false,
     tooltip: toolbarTexts.bulletList,
     attributes: {
       ariaLabel: 'Bullet list',
@@ -647,7 +647,6 @@ export const makeDefaultItems = ({
     name: 'numberedlist',
     command: 'toggleOrderedList',
     icon: toolbarIcons.numberedList,
-    active: false,
     tooltip: toolbarTexts.numberedList,
     attributes: {
       ariaLabel: 'Numbered list',
@@ -660,7 +659,6 @@ export const makeDefaultItems = ({
     name: 'indentleft',
     command: 'decreaseTextIndent',
     icon: toolbarIcons.indentLeft,
-    active: false,
     tooltip: toolbarTexts.indentLeft,
     disabled: false,
     attributes: {
@@ -674,7 +672,6 @@ export const makeDefaultItems = ({
     name: 'indentright',
     command: 'increaseTextIndent',
     icon: toolbarIcons.indentRight,
-    active: false,
     tooltip: toolbarTexts.indentRight,
     disabled: false,
     attributes: {
@@ -686,9 +683,7 @@ export const makeDefaultItems = ({
   const overflow = useToolbarItem({
     type: 'overflow',
     name: 'overflow',
-    command: null,
     icon: toolbarIcons.overflow,
-    active: false,
     disabled: false,
     attributes: {
       ariaLabel: 'Overflow items',
@@ -728,10 +723,18 @@ export const makeDefaultItems = ({
       { label: '150%', key: 1.5, props: { 'data-item': 'btn-zoom-option' } },
       { label: '200%', key: 2, props: { 'data-item': 'btn-zoom-option' } },
     ],
-    onActivate: ({ zoom: value }) => {
-      if (!value) return;
+    onActivate: ({ zoom: value }: { zoom?: unknown }) => {
+      if (value === null || value === undefined) return;
 
-      zoom.label.value = value;
+      if (typeof value === 'number') {
+        if (!Number.isFinite(value)) return;
+        zoom.label.value = `${value}%`;
+        return;
+      }
+
+      if (typeof value === 'string') {
+        zoom.label.value = value;
+      }
     },
   });
 
@@ -846,7 +849,6 @@ export const makeDefaultItems = ({
     tooltip: toolbarTexts.copyFormat,
     icon: toolbarIcons.copyFormat,
     command: 'copyFormat',
-    active: false,
     attributes: {
       ariaLabel: 'Copy formatting',
     },
@@ -913,16 +915,16 @@ export const makeDefaultItems = ({
     },
   ];
 
-  function renderDocumentMode(renderDocumentButton) {
+  function renderDocumentMode(renderDocumentButton: ToolbarItem) {
     const optionsAfterRole = getDocumentOptionsAfterRole(role, documentOptions);
     return h(DocumentMode, {
       options: optionsAfterRole,
-      onSelect: (item) => {
+      onSelect: (item: { label: string; icon: string }) => {
         closeDropdown(renderDocumentButton);
         const { label, icon } = item;
         documentMode.label.value = label;
         documentMode.icon.value = icon;
-        superToolbar.emitCommand({ item: documentMode, argument: label });
+        superToolbar.emitCommand({ item: documentMode, argument: label, option: undefined });
       },
     });
   }
@@ -945,7 +947,6 @@ export const makeDefaultItems = ({
     name: 'ruler',
     command: 'toggleRuler',
     icon: toolbarIcons.ruler,
-    active: false,
     tooltip: toolbarTexts.ruler,
     attributes: {
       ariaLabel: 'Ruler',
@@ -975,10 +976,10 @@ export const makeDefaultItems = ({
         type: 'render',
         key: 'linkedStyle',
         render: () => {
-          const handleSelect = (style) => {
+          const handleSelect = (style: { id: string }) => {
             closeDropdown(linkedStyles);
             const itemWithCommand = { ...linkedStyles, command: 'setLinkedStyle' };
-            superToolbar.emitCommand({ item: itemWithCommand, argument: style });
+            superToolbar.emitCommand({ item: itemWithCommand, argument: style, option: undefined });
             selectedLinkedStyle.value = style.id;
           };
 
@@ -992,12 +993,14 @@ export const makeDefaultItems = ({
         },
       },
     ],
-    onActivate: ({ styleId }) => {
+    onActivate: ({ styleId }: { styleId?: unknown }) => {
       const styles = getQuickFormatList(superToolbar.activeEditor);
-      const selectedStyle = styles?.find((style) => style.id === styleId);
+      const selectedStyle = styles?.find((style: { id: string }) => style.id === styleId);
       // Normal linked style is default one
       linkedStyles.label.value =
-        selectedStyle && selectedStyle.id !== 'Normal' ? selectedStyle.definition.attrs.name : toolbarTexts.formatText;
+        selectedStyle && selectedStyle.id !== 'Normal'
+          ? String(selectedStyle.definition.attrs.name)
+          : toolbarTexts.formatText;
       linkedStyles.disabled.value = false;
     },
     onDeactivate: () => {
@@ -1006,8 +1009,8 @@ export const makeDefaultItems = ({
     },
   });
 
-  const renderIcon = (value, selectedValue) => {
-    if (selectedValue.value != value) return;
+  const renderIcon = (value: number, selectedValue: Ref<string | undefined>) => {
+    if (selectedValue.value != String(value)) return;
     return h('div', { innerHTML: checkIconSvg, class: 'dropdown-select-icon' });
   };
 
@@ -1096,7 +1099,15 @@ export const makeDefaultItems = ({
     documentMode,
   ];
 
-  if (!superToolbar.config?.superdoc?.config?.modules?.ai) {
+  interface SuperdocConfig {
+    config?: {
+      modules?: {
+        ai?: boolean;
+      };
+    };
+  }
+
+  if (!(superToolbar.config?.superdoc as SuperdocConfig)?.config?.modules?.ai) {
     toolbarItems = toolbarItems.filter((item) => item.name.value !== 'ai');
   }
 
diff --git a/packages/super-editor/src/components/toolbar/format-negation.js b/packages/super-editor/src/components/toolbar/format-negation.ts
similarity index 83%
rename from packages/super-editor/src/components/toolbar/format-negation.js
rename to packages/super-editor/src/components/toolbar/format-negation.ts
index 14ce2ae33..ea5c7b1bf 100644
--- a/packages/super-editor/src/components/toolbar/format-negation.js
+++ b/packages/super-editor/src/components/toolbar/format-negation.ts
@@ -1,18 +1,17 @@
-// @ts-check
-
 /**
  * Normalize "off" values used by cascade-aware formatting marks.
  * @param {unknown} value
  * @returns {boolean}
  */
-export const isOffValue = (value) => {
+export const isOffValue = (value: unknown): boolean => {
   if (value == null) return false;
   const normalized = String(value).toLowerCase();
   return normalized === '0' || normalized === 'false' || normalized === 'off';
 };
 
-/** @type {Record<string, (attrs?: Record<string, unknown>) => boolean>} */
-export const negationChecks = {
+type NegationChecker = (attrs?: Record<string, unknown>) => boolean;
+
+export const negationChecks: Record<string, NegationChecker> = {
   bold: (attrs = {}) => isOffValue(attrs.value),
   italic: (attrs = {}) => isOffValue(attrs.value),
   strike: (attrs = {}) => isOffValue(attrs.value),
@@ -41,7 +40,7 @@ export const negationChecks = {
  * @param {Record<string, unknown>} [attrs]
  * @returns {boolean}
  */
-export const isNegatedMark = (name, attrs = {}) => {
+export const isNegatedMark = (name: string, attrs: Record<string, unknown> = {}): boolean => {
   const checker = negationChecks[name];
   if (typeof checker !== 'function') return false;
   return Boolean(checker(attrs));
diff --git a/packages/super-editor/src/components/toolbar/helpers.js b/packages/super-editor/src/components/toolbar/helpers.js
deleted file mode 100644
index e4897291e..000000000
--- a/packages/super-editor/src/components/toolbar/helpers.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const sanitizeNumber = (value, defaultNumber) => {
-  // remove non-numeric characters
-  let sanitized = value.replace(/[^0-9.]/g, '');
-  // convert to number
-  sanitized = parseFloat(sanitized);
-  if (isNaN(sanitized)) sanitized = defaultNumber;
-
-  sanitized = parseFloat(sanitized);
-  return sanitized;
-};
-
-const throttle = (func, wait, options) => {
-  let timeout, args, result;
-  let previous = 0;
-  if (!options) options = {};
-
-  const later = () => {
-    previous = options.leading === false ? 0 : Date.now();
-    timeout = null;
-    result = func(...args);
-    if (!timeout) args = null;
-  };
-
-  const throttled = (...callArgs) => {
-    const _now = Date.now();
-    if (!previous && options.leading === false) previous = _now;
-    const remaining = wait - (_now - previous);
-    args = callArgs;
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-      previous = _now;
-      result = func(...callArgs);
-      if (!timeout) args = null;
-    } else if (!timeout && options.trailing !== false) {
-      timeout = setTimeout(later, remaining);
-    }
-    return result;
-  };
-
-  throttled.cancel = function () {
-    clearTimeout(timeout);
-    previous = 0;
-    timeout = args = null;
-  };
-  return throttled;
-};
-
-export { sanitizeNumber, throttle };
diff --git a/packages/super-editor/src/components/toolbar/helpers.ts b/packages/super-editor/src/components/toolbar/helpers.ts
new file mode 100644
index 000000000..84f8a3b63
--- /dev/null
+++ b/packages/super-editor/src/components/toolbar/helpers.ts
@@ -0,0 +1,68 @@
+const sanitizeNumber = (value: string, defaultNumber: number): number => {
+  // remove non-numeric characters
+  const sanitized = value.replace(/[^0-9.]/g, '');
+  // convert to number
+  let sanitizedNum = parseFloat(sanitized);
+  if (isNaN(sanitizedNum)) sanitizedNum = defaultNumber;
+
+  return sanitizedNum;
+};
+
+interface ThrottleOptions {
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface ThrottledFunction<T extends (...args: any[]) => any> {
+  (...args: Parameters<T>): ReturnType<T> | undefined;
+  cancel: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const throttle = <T extends (...args: any[]) => any>(
+  func: T,
+  wait: number,
+  options?: ThrottleOptions,
+): ThrottledFunction<T> => {
+  let timeout: ReturnType<typeof setTimeout> | null;
+  let args: Parameters<T> | null;
+  let result: ReturnType<T> | undefined;
+  let previous = 0;
+  if (!options) options = {};
+
+  const later = (): void => {
+    previous = options!.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func(...(args as Parameters<T>));
+    if (!timeout) args = null;
+  };
+
+  const throttled = (...callArgs: Parameters<T>): ReturnType<T> | undefined => {
+    const _now = Date.now();
+    if (!previous && options!.leading === false) previous = _now;
+    const remaining = wait - (_now - previous);
+    args = callArgs;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = _now;
+      result = func(...callArgs);
+      if (!timeout) args = null;
+    } else if (!timeout && options!.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+
+  throttled.cancel = function (): void {
+    if (timeout) clearTimeout(timeout);
+    previous = 0;
+    timeout = args = null;
+  };
+  return throttled;
+};
+
+export { sanitizeNumber, throttle };
diff --git a/packages/super-editor/src/components/toolbar/scroll-helpers.js b/packages/super-editor/src/components/toolbar/scroll-helpers.ts
similarity index 61%
rename from packages/super-editor/src/components/toolbar/scroll-helpers.js
rename to packages/super-editor/src/components/toolbar/scroll-helpers.ts
index d300ea4b3..69b2063d4 100644
--- a/packages/super-editor/src/components/toolbar/scroll-helpers.js
+++ b/packages/super-editor/src/components/toolbar/scroll-helpers.ts
@@ -1,4 +1,4 @@
-function getScrollableParent(element) {
+function getScrollableParent(element: HTMLElement | null): HTMLElement | Element {
   let currentElement = element;
 
   while (currentElement) {
@@ -12,7 +12,15 @@ function getScrollableParent(element) {
   return document.scrollingElement || document.documentElement;
 }
 
-export function scrollToElement(targetElement, options = { behavior: 'smooth', block: 'start' }) {
+interface ScrollOptions {
+  behavior?: ScrollBehavior;
+  block?: 'start' | 'end';
+}
+
+export function scrollToElement(
+  targetElement: HTMLElement | null,
+  options: ScrollOptions = { behavior: 'smooth', block: 'start' },
+): void {
   if (!targetElement) return;
 
   const container = getScrollableParent(targetElement);
@@ -22,7 +30,10 @@ export function scrollToElement(targetElement, options = { behavior: 'smooth', b
   const offsetTop = targetRect.top - containerRect.top + container.scrollTop;
 
   container.scrollTo({
-    top: options.block === 'start' ? offsetTop : offsetTop - container.clientHeight + targetElement.offsetHeight,
+    top:
+      options.block === 'start'
+        ? offsetTop
+        : offsetTop - (container as HTMLElement).clientHeight + targetElement.offsetHeight,
     behavior: options.behavior,
   });
 }
diff --git a/packages/super-editor/src/components/toolbar/super-toolbar.js b/packages/super-editor/src/components/toolbar/super-toolbar.ts
similarity index 78%
rename from packages/super-editor/src/components/toolbar/super-toolbar.js
rename to packages/super-editor/src/components/toolbar/super-toolbar.ts
index ec5ba2fb8..13b78e64a 100644
--- a/packages/super-editor/src/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/components/toolbar/super-toolbar.ts
@@ -1,6 +1,7 @@
 import { EventEmitter } from 'eventemitter3';
-import { createApp } from 'vue';
+import { createApp, type App } from 'vue';
 import { undoDepth, redoDepth } from 'prosemirror-history';
+import { TextSelection } from 'prosemirror-state';
 import { makeDefaultItems } from './defaultItems';
 import { getActiveFormatting } from '@core/helpers/getActiveFormatting.js';
 import { findParentNode } from '@helpers/index.js';
@@ -15,13 +16,19 @@ import {
 import { toolbarIcons } from './toolbarIcons.js';
 import { toolbarTexts } from './toolbarTexts.js';
 import { getQuickFormatList } from '@extensions/linked-styles/index.js';
-import { getAvailableColorOptions, makeColorOption, renderColorOptions } from './color-dropdown-helpers.js';
+import {
+  getAvailableColorOptions,
+  makeColorOption,
+  renderColorOptions,
+  type ColorOption,
+} from './color-dropdown-helpers.js';
 import { isInTable } from '@helpers/isInTable.js';
-import { useToolbarItem } from '@components/toolbar/use-toolbar-item';
+import { useToolbarItem, type ToolbarItem, type ToolbarItemOptions } from './use-toolbar-item';
 import { yUndoPluginKey } from 'y-prosemirror';
 import { isNegatedMark } from './format-negation.js';
 import { collectTrackedChanges, isTrackedChangeActionAllowed } from '@extensions/track-changes/permission-helpers.js';
 import { isList } from '@core/commands/list-helpers';
+import type { Comment } from '@core/types/EditorEvents.js';
 import { calculateResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
 import { twipsToLines } from '@converter/helpers';
 import { parseSizeUnit } from '@core/utilities';
@@ -37,17 +44,24 @@ import { parseSizeUnit } from '@core/utilities';
 /**
  * @typedef {Object} ToolbarConfig
  * @property {string} [selector] - CSS selector for the toolbar container
+ * @property {string} [element] - Legacy: CSS selector for the toolbar container (use selector instead)
  * @property {string[]} [toolbarGroups=['left', 'center', 'right']] - Groups to organize toolbar items
  * @property {string} [role='editor'] - Role of the toolbar ('editor' or 'viewer')
  * @property {Object} [icons] - Custom icons for toolbar items
  * @property {Object} [texts] - Custom texts for toolbar items
+ * @property {any[]} [fonts] - Font options for the toolbar
+ * @property {boolean} [hideButtons] - Whether to hide buttons on overflow
+ * @property {boolean} [responsiveToContainer] - Whether toolbar should be responsive to container size
  * @property {string} [mode='docx'] - Editor mode
  * @property {string[]} [excludeItems=[]] - Items to exclude from the toolbar
  * @property {Object} [groups=null] - Custom groups configuration
  * @property {Object} [editor=null] - The editor instance
  * @property {string} [aiApiKey=null] - API key for AI integration
  * @property {string} [aiEndpoint=null] - Endpoint for AI integration
- * @property {ToolbarItem[]} [customButtons=[]] - Custom buttons to add to the toolbar
+ * @property {(ToolbarItemOptions|ToolbarItem)[]} [customButtons=[]] - Custom buttons to add to the toolbar
+ * @property {string} [documentMode] - Document mode ('editing', 'viewing', etc.)
+ * @property {boolean} [isDev] - Whether in development mode
+ * @property {any} [superdoc] - SuperDoc instance
  */
 
 /**
@@ -163,8 +177,27 @@ export class SuperToolbar extends EventEmitter {
    * Default configuration for the toolbar
    * @type {ToolbarConfig}
    */
-  config = {
+  config: {
+    selector: string | null;
+    element: string | null;
+    toolbarGroups: string[];
+    role: string;
+    icons: Record<string, string>;
+    texts: Record<string, string>;
+    fonts: Array<{ label: string; key: string }> | null;
+    hideButtons: boolean;
+    responsiveToContainer: boolean;
+    mode: string;
+    excludeItems: string[];
+    groups: Record<string, string[]> | null;
+    editor: import('../../core/Editor').Editor | null;
+    aiApiKey: string | null;
+    aiEndpoint: string | null;
+    customButtons: Array<ToolbarItem | ToolbarItemOptions>;
+    superdoc: { config?: { rulers?: unknown } } | null;
+  } = {
     selector: null,
+    element: null,
     toolbarGroups: ['left', 'center', 'right'],
     role: 'editor',
     icons: { ...toolbarIcons },
@@ -179,6 +212,108 @@ export class SuperToolbar extends EventEmitter {
     aiApiKey: null,
     aiEndpoint: null,
     customButtons: [],
+    superdoc: null,
+  };
+
+  /**
+   * Array of toolbar items
+   * @type {ToolbarItem[]}
+   */
+  toolbarItems: ToolbarItem[] = [];
+
+  /**
+   * Array of overflow items
+   * @type {ToolbarItem[]}
+   */
+  overflowItems: ToolbarItem[] = [];
+
+  /**
+   * Document mode
+   * @type {string}
+   */
+  documentMode: string = 'editing';
+
+  /**
+   * Whether in development mode
+   * @type {boolean}
+   */
+  isDev: boolean = false;
+
+  /**
+   * SuperDoc instance
+   * @type {unknown}
+   */
+  superdoc: { config?: { rulers?: unknown } } | null = null;
+
+  /**
+   * Toolbar role
+   * @type {string}
+   */
+  role: string = 'editor';
+
+  /**
+   * Toolbar container element
+   * @type {HTMLElement | null}
+   */
+  toolbarContainer: HTMLElement | null = null;
+
+  /**
+   * Vue app instance
+   * @type {App | null}
+   */
+  app: App | null = null;
+
+  /**
+   * Toolbar Vue component instance
+   * @type {unknown}
+   */
+  toolbar: unknown = null;
+
+  /**
+   * Active editor instance
+   * @type {import('../../core/Editor').Editor | null}
+   */
+  activeEditor: import('../../core/Editor').Editor | null = null;
+
+  /**
+   * Undo depth
+   * @type {number}
+   */
+  undoDepth: number = 0;
+
+  /**
+   * Redo depth
+   * @type {number}
+   */
+  redoDepth: number = 0;
+
+  /**
+   * Queue of mark commands to execute when editor regains focus.
+   * @type {Array<{command: string, argument: unknown, item: ToolbarItem}>}
+   * @private
+   */
+  pendingMarkCommands: Array<{ command: string; argument: unknown; item: ToolbarItem }> = [];
+
+  /**
+   * Persisted stored marks to re-apply when the selection is empty and has no formatting.
+   * @type {import('prosemirror-model').Mark[]|null}
+   * @private
+   */
+  stickyStoredMarks: import('prosemirror-model').Mark[] | null = null;
+
+  /**
+   * Bound event handlers stored for proper cleanup when switching editors.
+   * @type {{transaction: ((params: { transaction: unknown }) => void) | null, selectionUpdate: (() => void) | null, focus: (() => void) | null}}
+   * @private
+   */
+  _boundEditorHandlers: {
+    transaction: ((params: { transaction: unknown }) => void) | null;
+    selectionUpdate: (() => void) | null;
+    focus: (() => void) | null;
+  } = {
+    transaction: null,
+    selectionUpdate: null,
+    focus: null,
   };
 
   /**
@@ -186,17 +321,22 @@ export class SuperToolbar extends EventEmitter {
    * @param {ToolbarConfig} config - The configuration for the toolbar
    * @returns {void}
    */
-  constructor(config) {
+  constructor(
+    config: Partial<typeof SuperToolbar.prototype.config> & {
+      editor?: import('../../core/Editor').Editor;
+      documentMode?: string;
+      isDev?: boolean;
+      superdoc?: unknown;
+      role?: string;
+    },
+  ) {
     super();
 
     this.config = { ...this.config, ...config };
-    this.toolbarItems = [];
-    this.overflowItems = [];
     this.documentMode = config.documentMode || 'editing';
     this.isDev = config.isDev || false;
     this.superdoc = config.superdoc;
     this.role = config.role || 'editor';
-    this.toolbarContainer = null;
 
     if (this.config.editor) {
       this.config.mode = this.config.editor.options.mode;
@@ -215,31 +355,6 @@ export class SuperToolbar extends EventEmitter {
     this.config.hideButtons = config.hideButtons ?? true;
     this.config.responsiveToContainer = config.responsiveToContainer ?? false;
 
-    /**
-     * Queue of mark commands to execute when editor regains focus.
-     * @type {Array<{command: string, argument: *, item: ToolbarItem}>}
-     * @private
-     */
-    this.pendingMarkCommands = [];
-
-    /**
-     * Persisted stored marks to re-apply when the selection is empty and has no formatting.
-     * @type {import('prosemirror-model').Mark[]|null}
-     * @private
-     */
-    this.stickyStoredMarks = null;
-
-    /**
-     * Bound event handlers stored for proper cleanup when switching editors.
-     * @type {{transaction: Function|null, selectionUpdate: Function|null, focus: Function|null}}
-     * @private
-     */
-    this._boundEditorHandlers = {
-      transaction: null,
-      selectionUpdate: null,
-      focus: null,
-    };
-
     // Move legacy 'element' to 'selector'
     if (!this.config.selector && this.config.element) {
       this.config.selector = this.config.element;
@@ -249,10 +364,12 @@ export class SuperToolbar extends EventEmitter {
     this.#initToolbarGroups();
     this.#makeToolbarItems({
       superToolbar: this,
-      icons: this.config.icons,
-      texts: this.config.texts,
-      fonts: this.config.fonts,
+      toolbarIcons: this.config.icons,
+      toolbarTexts: this.config.texts,
+      toolbarFonts: this.config.fonts,
       hideButtons: this.config.hideButtons,
+      availableWidth: 0,
+      role: this.role,
       isDev: config.isDev,
     });
 
@@ -270,8 +387,8 @@ export class SuperToolbar extends EventEmitter {
     this.updateToolbarState();
   }
 
-  findElementBySelector(selector) {
-    let el = null;
+  findElementBySelector(selector: string | null | undefined): HTMLElement | null {
+    let el: HTMLElement | null = null;
 
     if (selector) {
       if (selector.startsWith('#') || selector.startsWith('.')) {
@@ -326,7 +443,17 @@ export class SuperToolbar extends EventEmitter {
       // 2. PresentationEditor.setGlobalZoom() is called when activeZoom changes (via SuperDoc.vue watcher)
       // 3. Centralizing zoom in PresentationEditor ensures both content and selection overlays scale together
 
-      this.superdoc.superdocStore.activeZoom = parseInt(argument, 10);
+      interface SuperdocInstance {
+        element?: HTMLElement;
+        superdocStore?: {
+          activeZoom?: number;
+        };
+      }
+
+      const superdocStore = (this.superdoc as SuperdocInstance)?.superdocStore;
+      if (superdocStore) {
+        superdocStore.activeZoom = parseInt(argument as string, 10);
+      }
     },
 
     /**
@@ -411,7 +538,10 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     toggleRuler: () => {
-      this.superdoc.toggleRuler();
+      interface SuperdocWithRuler {
+        toggleRuler?: () => void;
+      }
+      (this.superdoc as SuperdocWithRuler)?.toggleRuler?.();
       this.updateToolbarState();
     },
 
@@ -422,8 +552,8 @@ export class SuperToolbar extends EventEmitter {
      */
     startImageUpload: async () => {
       try {
-        let open = getFileOpener();
-        let result = await open();
+        const open = getFileOpener();
+        const result: { file?: File } | undefined = await open();
 
         if (!result?.file) {
           return;
@@ -431,7 +561,10 @@ export class SuperToolbar extends EventEmitter {
 
         const { size, file } = await checkAndProcessImage({
           file: result.file,
-          getMaxContentSize: () => this.activeEditor.getMaxContentSize(),
+          getMaxContentSize: () => {
+            const maxSize = this.activeEditor?.getMaxContentSize() ?? {};
+            return { width: maxSize.width ?? 0, height: maxSize.height ?? 0 };
+          },
         });
 
         if (!file) {
@@ -442,7 +575,8 @@ export class SuperToolbar extends EventEmitter {
 
         replaceSelectionWithImagePlaceholder({
           view: this.activeEditor.view,
-          editorOptions: this.activeEditor.options,
+          editorOptions: this.activeEditor
+            .options as import('../../extensions/image/imageHelpers/index.js').EditorOptions,
           id,
         });
 
@@ -450,7 +584,10 @@ export class SuperToolbar extends EventEmitter {
           editor: this.activeEditor,
           view: this.activeEditor.view,
           file,
-          size,
+          size:
+            size && size.width != null && size.height != null
+              ? { width: size.width, height: size.height }
+              : { width: 0, height: 0 },
           id,
         });
       } catch (error) {
@@ -468,7 +605,7 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     increaseTextIndent: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (this.activeEditor.commands.increaseListIndent?.()) {
         return true;
@@ -487,7 +624,7 @@ export class SuperToolbar extends EventEmitter {
      * @returns {boolean}
      */
     decreaseTextIndent: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (this.activeEditor.commands.decreaseListIndent?.()) {
         return true;
@@ -506,7 +643,7 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     toggleBold: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (command in this.activeEditor.commands) {
         this.activeEditor.commands[command](argument);
@@ -524,7 +661,7 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     toggleItalic: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (command in this.activeEditor.commands) {
         this.activeEditor.commands[command](argument);
@@ -542,7 +679,7 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     toggleUnderline: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (command in this.activeEditor.commands) {
         this.activeEditor.commands[command](argument);
@@ -560,16 +697,16 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     toggleLink: ({ item, argument }) => {
-      let command = item.command;
+      const command = item.command;
 
       if (command in this.activeEditor.commands) {
         this.activeEditor.commands[command](argument);
 
         // move cursor to end
         const { view } = this.activeEditor;
-        let { selection } = view.state;
-        if (this.activeEditor.options.isHeaderOrFooter) {
-          selection = this.activeEditor.options.lastSelection;
+        let selection = view.state.selection;
+        if (this.activeEditor.options.isHeaderOrFooter && this.activeEditor.options.lastSelection) {
+          selection = this.activeEditor.options.lastSelection as typeof view.state.selection;
         }
         const endPos = selection.$to.pos;
 
@@ -595,7 +732,13 @@ export class SuperToolbar extends EventEmitter {
      * @returns {void}
      */
     insertTable: ({ item, argument }) => {
-      this.#runCommandWithArgumentOnly({ item, argument });
+      if (!argument || !this.activeEditor) return;
+
+      const command = item.command;
+      if (this.activeEditor && this.activeEditor.commands && command && command in this.activeEditor.commands) {
+        this.activeEditor.commands[command](argument);
+        this.updateToolbarState();
+      }
     },
 
     /**
@@ -608,7 +751,7 @@ export class SuperToolbar extends EventEmitter {
     executeTableCommand: ({ argument }) => {
       if (!argument) return;
 
-      let command = argument.command;
+      const command = argument.command;
 
       if (command in this.activeEditor.commands) {
         this.activeEditor.commands[command](argument);
@@ -693,31 +836,57 @@ export class SuperToolbar extends EventEmitter {
    * Create toolbar items based on configuration
    * @private
    * @param {SuperToolbar} options.superToolbar - The toolbar instance
-   * @param {Object} options.icons - Icons to use for toolbar items
-   * @param {Object} options.texts - Texts to use for toolbar items
-   * @param {Array} options.fonts - Fonts for the toolbar item
+   * @param {Object} options.toolbarIcons - Icons to use for toolbar items
+   * @param {Object} options.toolbarTexts - Texts to use for toolbar items
+   * @param {Array} options.toolbarFonts - Fonts for the toolbar item
+   * @param {boolean} options.hideButtons - Whether to hide buttons on overflow
+   * @param {number} options.availableWidth - Available width for toolbar
+   * @param {string} options.role - Toolbar role
    * @param {boolean} options.isDev - Whether in development mode
    * @returns {void}
    */
-  #makeToolbarItems({ superToolbar, icons, texts, fonts, hideButtons, isDev = false } = {}) {
+  #makeToolbarItems({
+    superToolbar,
+    toolbarIcons,
+    toolbarTexts,
+    toolbarFonts,
+    hideButtons,
+    availableWidth,
+    role: _role,
+    isDev = false,
+  }: {
+    superToolbar: SuperToolbar;
+    toolbarIcons: Record<string, string>;
+    toolbarTexts: Record<string, string>;
+    toolbarFonts: Array<{ label: string; key: string }> | null;
+    hideButtons: boolean;
+    availableWidth: number;
+    role: string;
+    isDev?: boolean;
+  }) {
     const documentWidth = document.documentElement.clientWidth; // take into account the scrollbar
     const containerWidth = this.toolbarContainer?.offsetWidth ?? 0;
-    const availableWidth = this.config.responsiveToContainer ? containerWidth : documentWidth;
+    const computedAvailableWidth = this.config.responsiveToContainer ? containerWidth : documentWidth;
 
     const { defaultItems, overflowItems } = makeDefaultItems({
       superToolbar,
-      toolbarIcons: icons,
-      toolbarTexts: texts,
-      toolbarFonts: fonts,
+      toolbarIcons,
+      toolbarTexts,
+      toolbarFonts,
       hideButtons,
-      availableWidth,
+      availableWidth: computedAvailableWidth || availableWidth,
       role: this.role,
       isDev,
     });
 
     const customItems = this.config.customButtons || [];
     if (customItems.length) {
-      defaultItems.push(...customItems.map((item) => useToolbarItem({ ...item })));
+      const normalizedCustomItems = customItems.map((item) => {
+        const maybeToolbarItem = item as ToolbarItem;
+        if (maybeToolbarItem?.id?.value) return maybeToolbarItem;
+        return useToolbarItem(item as ToolbarItemOptions);
+      });
+      defaultItems.push(...normalizedCustomItems);
     }
 
     let allConfigItems = [
@@ -762,22 +931,23 @@ export class SuperToolbar extends EventEmitter {
     if (!highlightItem) return;
 
     const pickerColorOptions = getAvailableColorOptions();
-    const perChunk = 7; // items per chunk
 
-    const result = Array.from(this.activeEditor.converter.docHiglightColors).reduce((resultArray, item, index) => {
-      const chunkIndex = Math.floor(index / perChunk);
-      if (!resultArray[chunkIndex]) {
-        resultArray[chunkIndex] = [];
-      }
+    const customColors: ColorOption[] = Array.from(this.activeEditor.converter.docHiglightColors)
+      .filter((color: string) => !pickerColorOptions.includes(color))
+      .map((color: string) => makeColorOption(color));
 
-      if (!pickerColorOptions.includes(item)) resultArray[chunkIndex].push(makeColorOption(item));
-      return resultArray;
-    }, []);
+    const perChunk = 7;
+    const customColorRows: ColorOption[][] = [];
+    customColors.forEach((color, index) => {
+      const chunkIndex = Math.floor(index / perChunk);
+      if (!customColorRows[chunkIndex]) customColorRows[chunkIndex] = [];
+      customColorRows[chunkIndex].push(color);
+    });
 
     const option = {
       key: 'color',
       type: 'render',
-      render: () => renderColorOptions(this, highlightItem, result, true),
+      render: () => renderColorOptions(this, highlightItem, customColorRows, true),
     };
 
     highlightItem.nestedOptions.value = [option];
@@ -867,16 +1037,24 @@ export class SuperToolbar extends EventEmitter {
       }
 
       const rawActiveMark = marks.find((mark) => mark.name === item.name.value);
-      const markNegated = rawActiveMark ? isNegatedMark(rawActiveMark.name, rawActiveMark.attrs) : false;
+      const markNegated =
+        rawActiveMark && typeof rawActiveMark.attrs === 'object'
+          ? isNegatedMark(rawActiveMark.name, rawActiveMark.attrs)
+          : false;
       const activeMark = markNegated ? null : rawActiveMark;
 
       if (activeMark) {
-        if (activeMark.name === 'fontSize') {
-          const fontSizes = marks.filter((i) => i.name === 'fontSize').map((i) => i.attrs.fontSize);
-          const isMultiple = [...new Set(fontSizes)].length > 1;
+        if (activeMark.name === 'fontSize' && typeof activeMark.attrs === 'object') {
+          const fontSizes = marks
+            .filter((i) => i.name === 'fontSize' && typeof i.attrs === 'object')
+            .map((i) => (i.attrs as Record<string, unknown>).fontSize)
+            .filter((size): size is string => typeof size === 'string');
+          const isMultiple = Array.from(new Set(fontSizes)).length > 1;
           item.activate(activeMark.attrs, isMultiple);
-        } else {
+        } else if (typeof activeMark.attrs === 'object') {
           item.activate(activeMark.attrs);
+        } else {
+          item.activate(typeof activeMark.attrs === 'boolean' ? {} : (activeMark.attrs as Record<string, unknown>));
         }
       } else {
         item.deactivate();
@@ -910,8 +1088,13 @@ export class SuperToolbar extends EventEmitter {
       }
 
       if (item.name.value === 'lineHeight') {
-        if (paragraphProps?.spacing) {
-          item.selectedValue.value = twipsToLines(paragraphProps.spacing.line);
+        if (paragraphProps?.spacing && typeof paragraphProps.spacing === 'object' && 'line' in paragraphProps.spacing) {
+          const line = (paragraphProps.spacing as { line: unknown }).line;
+          if (typeof line === 'number') {
+            item.selectedValue.value = String(twipsToLines(line));
+          } else {
+            item.selectedValue.value = '';
+          }
         } else {
           item.selectedValue.value = '';
         }
@@ -950,10 +1133,12 @@ export class SuperToolbar extends EventEmitter {
   onToolbarResize = () => {
     this.#makeToolbarItems({
       superToolbar: this,
-      icons: this.config.icons,
-      texts: this.config.texts,
-      fonts: this.config.fonts,
+      toolbarIcons: this.config.icons,
+      toolbarTexts: this.config.texts,
+      toolbarFonts: this.config.fonts,
       hideButtons: this.config.hideButtons,
+      availableWidth: 0,
+      role: this.role,
       isDev: this.isDev,
     });
 
@@ -1002,18 +1187,64 @@ export class SuperToolbar extends EventEmitter {
     }
   }
 
-  #enrichTrackedChanges(trackedChanges = []) {
-    if (!trackedChanges?.length) return trackedChanges;
-    const store = this.superdoc?.commentsStore;
-    if (!store?.getComment) return trackedChanges;
+  #enrichTrackedChanges(
+    trackedChanges: Array<{
+      id: string | null;
+      type: string | null;
+      attrs: Record<string, unknown>;
+      from: number;
+      to: number;
+      segments: { from: number; to: number }[];
+      comment?: unknown;
+    }> = [],
+  ): Array<{
+    id: string | null;
+    type: string | null;
+    attrs: Record<string, unknown>;
+    from: number;
+    to: number;
+    segments: { from: number; to: number }[];
+    comment?: Comment | null;
+  }> {
+    if (!trackedChanges?.length)
+      return trackedChanges as Array<{
+        id: string | null;
+        type: string | null;
+        attrs: Record<string, unknown>;
+        from: number;
+        to: number;
+        segments: { from: number; to: number }[];
+        comment?: Comment | null;
+      }>;
+
+    interface SuperdocWithComments {
+      commentsStore?: {
+        getComment?: (id: string) => unknown;
+      };
+    }
+
+    const store = (this.superdoc as SuperdocWithComments)?.commentsStore;
+    if (!store?.getComment)
+      return trackedChanges as Array<{
+        id: string | null;
+        type: string | null;
+        attrs: Record<string, unknown>;
+        from: number;
+        to: number;
+        segments: { from: number; to: number }[];
+        comment?: Comment | null;
+      }>;
 
     return trackedChanges.map((change) => {
       const commentId = change.id;
-      if (!commentId) return change;
+      if (!commentId) return { ...change, comment: null };
       const storeComment = store.getComment(commentId);
-      if (!storeComment) return change;
-      const comment = typeof storeComment.getValues === 'function' ? storeComment.getValues() : storeComment;
-      return { ...change, comment };
+      if (!storeComment) return { ...change, comment: null };
+      const comment =
+        typeof (storeComment as { getValues?: () => unknown }).getValues === 'function'
+          ? (storeComment as { getValues: () => unknown }).getValues()
+          : storeComment;
+      return { ...change, comment: comment as Comment | null };
     });
   }
 
@@ -1166,7 +1397,7 @@ export class SuperToolbar extends EventEmitter {
   #runCommandWithArgumentOnly({ item, argument, noArgumentCallback = false }, callback) {
     if (!argument || !this.activeEditor) return;
 
-    let command = item.command;
+    const command = item.command;
     const noArgumentCommand = item.noArgumentCommand;
 
     if (
diff --git a/packages/super-editor/src/components/toolbar/toolbarIcons.js b/packages/super-editor/src/components/toolbar/toolbarIcons.ts
similarity index 99%
rename from packages/super-editor/src/components/toolbar/toolbarIcons.js
rename to packages/super-editor/src/components/toolbar/toolbarIcons.ts
index 70f62342f..ef8222d4e 100644
--- a/packages/super-editor/src/components/toolbar/toolbarIcons.js
+++ b/packages/super-editor/src/components/toolbar/toolbarIcons.ts
@@ -50,7 +50,7 @@ import copyIconSvg from '@superdoc/common/icons/copy-solid.svg?raw';
 import pasteIconSvg from '@superdoc/common/icons/paste-solid.svg?raw';
 import strikethroughSvg from '@superdoc/common/icons/strikethrough.svg?raw';
 
-export const toolbarIcons = {
+export const toolbarIcons: Record<string, string> = {
   undo: rotateLeftIconSvg,
   redo: rotateRightIconSvg,
   bold: boldIconSvg,
diff --git a/packages/super-editor/src/components/toolbar/toolbarTexts.js b/packages/super-editor/src/components/toolbar/toolbarTexts.ts
similarity index 96%
rename from packages/super-editor/src/components/toolbar/toolbarTexts.js
rename to packages/super-editor/src/components/toolbar/toolbarTexts.ts
index 82caab224..18d2cf8f3 100644
--- a/packages/super-editor/src/components/toolbar/toolbarTexts.js
+++ b/packages/super-editor/src/components/toolbar/toolbarTexts.ts
@@ -1,4 +1,4 @@
-export const toolbarTexts = {
+export const toolbarTexts: Record<string, string> = {
   bold: 'Bold',
   fontFamily: 'Font',
   ai: 'AI text generation',
diff --git a/packages/super-editor/src/components/toolbar/use-toolbar-item.js b/packages/super-editor/src/components/toolbar/use-toolbar-item.js
deleted file mode 100644
index 6f6e8d4aa..000000000
--- a/packages/super-editor/src/components/toolbar/use-toolbar-item.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import { ref } from 'vue';
-import { v4 as uuidv4 } from 'uuid';
-
-export const useToolbarItem = (options) => {
-  const types = ['button', 'options', 'separator', 'dropdown', 'overflow'];
-  if (!types.includes(options.type)) {
-    throw new Error('Invalid toolbar item type - ' + options.type);
-  }
-
-  if (options.type === 'button' && !options.defaultLabel && !options.icon) {
-    throw new Error('Toolbar button item needs either icon or label - ' + options.name);
-  }
-
-  if (!options.name) {
-    throw new Error('Invalid toolbar item name - ' + options.name);
-  }
-
-  const id = ref(uuidv4());
-  const type = options.type;
-  const name = ref(options.name);
-  const command = options.command;
-  const noArgumentCommand = options.noArgumentCommand;
-  const icon = ref(options.icon);
-  const group = ref(options.group || 'center');
-  const allowWithoutEditor = ref(options.allowWithoutEditor);
-  const attributes = ref(options.attributes || {});
-
-  const initiallyDisabled = options.disabled || false;
-  const disabled = ref(options.disabled);
-  const active = ref(false);
-  const expand = ref(false);
-
-  // top-level style
-  const style = ref(options.style);
-  const isNarrow = ref(options.isNarrow);
-  const isWide = ref(options.isWide);
-  const minWidth = ref(options.minWidth);
-  const suppressActiveHighlight = ref(options.suppressActiveHighlight || false);
-
-  const argument = ref(options.argument);
-  const childItem = ref(null);
-  const parentItem = ref(null);
-
-  // icon properties
-  const iconColor = ref(options.iconColor);
-  const hasCaret = ref(options.hasCaret);
-
-  // dropdown properties
-  const dropdownStyles = ref(options.dropdownStyles);
-
-  // tooltip properties
-  const tooltip = ref(options.tooltip);
-  const tooltipVisible = ref(options.tooltipVisible);
-  const tooltipTimeout = ref(options.tooltipTimeout);
-
-  // behavior
-  const defaultLabel = ref(options.defaultLabel);
-  const label = ref(options.label);
-  const hideLabel = ref(options.hideLabel);
-  const inlineTextInputVisible = ref(options.inlineTextInputVisible);
-  const hasInlineTextInput = ref(options.hasInlineTextInput);
-
-  const markName = ref(options.markName);
-  const labelAttr = ref(options.labelAttr);
-
-  // Dropdown item
-  const selectedValue = ref(options.selectedValue);
-  const dropdownValueKey = ref(options.dropdownValueKey);
-
-  const inputRef = ref(options.inputRef || null);
-
-  const nestedOptions = ref([]);
-  if (options.options) {
-    if (!Array.isArray(options.options)) throw new Error('Invalid toolbar item options - ' + options.options);
-    nestedOptions.value?.push(...options.options);
-  }
-
-  // Activation & Deactivation
-  const activate = (attrs = {}, ...args) => {
-    onActivate(attrs, ...args);
-
-    if (suppressActiveHighlight.value) return;
-    active.value = true;
-  };
-
-  const deactivate = () => {
-    onDeactivate();
-    active.value = false;
-  };
-
-  const setDisabled = (state) => {
-    disabled.value = state;
-  };
-
-  const resetDisabled = () => {
-    disabled.value = initiallyDisabled;
-  };
-
-  // User can override this behavior
-  const onActivate = options.onActivate || (() => null);
-  const onDeactivate = options.onDeactivate || (() => null);
-
-  const unref = () => {
-    const flattened = {};
-    Object.keys(refs).forEach((key) => {
-      if (refs[key].value !== undefined) {
-        flattened[key] = refs[key].value;
-      }
-    });
-    return flattened;
-  };
-
-  const refs = {
-    id,
-    name,
-    type,
-    command,
-    noArgumentCommand,
-    icon,
-    tooltip,
-    group,
-    attributes,
-    disabled,
-    active,
-    expand,
-    nestedOptions,
-
-    style,
-    isNarrow,
-    isWide,
-    minWidth,
-    argument,
-    parentItem,
-    iconColor,
-    hasCaret,
-    dropdownStyles,
-    tooltipVisible,
-    tooltipTimeout,
-    defaultLabel,
-    label,
-    hideLabel,
-    inlineTextInputVisible,
-    hasInlineTextInput,
-    markName,
-    labelAttr,
-    childItem,
-
-    allowWithoutEditor,
-    dropdownValueKey,
-    selectedValue,
-    inputRef,
-  };
-
-  return {
-    ...refs,
-    unref,
-    activate,
-    deactivate,
-    setDisabled,
-    resetDisabled,
-    onActivate,
-    onDeactivate,
-  };
-};
diff --git a/packages/super-editor/src/components/toolbar/use-toolbar-item.ts b/packages/super-editor/src/components/toolbar/use-toolbar-item.ts
new file mode 100644
index 000000000..acdb5d835
--- /dev/null
+++ b/packages/super-editor/src/components/toolbar/use-toolbar-item.ts
@@ -0,0 +1,259 @@
+import { ref, type Ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+type ToolbarItemType = 'button' | 'options' | 'separator' | 'dropdown' | 'overflow';
+
+export interface ToolbarItemOptions {
+  type: ToolbarItemType;
+  name: string;
+  command?: string;
+  noArgumentCommand?: boolean;
+  icon?: string;
+  group?: string;
+  allowWithoutEditor?: boolean;
+  attributes?: Record<string, unknown>;
+  disabled?: boolean;
+  style?: Record<string, unknown>;
+  isNarrow?: boolean;
+  isWide?: boolean;
+  minWidth?: string;
+  suppressActiveHighlight?: boolean;
+  argument?: unknown;
+  iconColor?: string;
+  hasCaret?: boolean;
+  dropdownStyles?: Record<string, unknown>;
+  tooltip?: string;
+  tooltipVisible?: boolean;
+  tooltipTimeout?: number;
+  defaultLabel?: string;
+  label?: string;
+  hideLabel?: boolean;
+  inlineTextInputVisible?: boolean;
+  hasInlineTextInput?: boolean;
+  markName?: string;
+  labelAttr?: string;
+  selectedValue?: string;
+  dropdownValueKey?: string;
+  inputRef?: HTMLInputElement | null;
+  options?: unknown[];
+  onActivate?: (attrs?: Record<string, unknown>, ...args: unknown[]) => void;
+  onDeactivate?: () => void;
+}
+
+export interface ToolbarItem {
+  id: Ref<string>;
+  name: Ref<string>;
+  type: ToolbarItemType;
+  command?: string;
+  noArgumentCommand?: boolean;
+  icon: Ref<string | undefined>;
+  tooltip: Ref<string | undefined>;
+  group: Ref<string>;
+  attributes: Ref<Record<string, unknown>>;
+  disabled: Ref<boolean | undefined>;
+  active: Ref<boolean>;
+  expand: Ref<boolean>;
+  nestedOptions: Ref<unknown[]>;
+  style: Ref<Record<string, unknown> | undefined>;
+  isNarrow: Ref<boolean | undefined>;
+  isWide: Ref<boolean | undefined>;
+  minWidth: Ref<string | undefined>;
+  argument: Ref<unknown>;
+  parentItem: Ref<ToolbarItem | undefined>;
+  iconColor: Ref<string | undefined>;
+  hasCaret: Ref<boolean | undefined>;
+  dropdownStyles: Ref<Record<string, unknown> | undefined>;
+  tooltipVisible: Ref<boolean | undefined>;
+  tooltipTimeout: Ref<number | undefined>;
+  defaultLabel: Ref<string | undefined>;
+  label: Ref<string | undefined>;
+  hideLabel: Ref<boolean | undefined>;
+  inlineTextInputVisible: Ref<boolean | undefined>;
+  hasInlineTextInput: Ref<boolean | undefined>;
+  markName: Ref<string | undefined>;
+  labelAttr: Ref<string | undefined>;
+  childItem: Ref<ToolbarItem | undefined>;
+  allowWithoutEditor: Ref<boolean | undefined>;
+  dropdownValueKey: Ref<string | undefined>;
+  selectedValue: Ref<string | undefined>;
+  inputRef: Ref<HTMLInputElement | null>;
+  unref: () => Record<string, unknown>;
+  activate: (attrs?: Record<string, unknown>, ...args: unknown[]) => void;
+  deactivate: () => void;
+  setDisabled: (state: boolean) => void;
+  resetDisabled: () => void;
+  onActivate: (attrs?: Record<string, unknown>, ...args: unknown[]) => void;
+  onDeactivate: () => void;
+}
+
+export const useToolbarItem = (options: ToolbarItemOptions): ToolbarItem => {
+  const types: ToolbarItemType[] = ['button', 'options', 'separator', 'dropdown', 'overflow'];
+  if (!types.includes(options.type)) {
+    throw new Error('Invalid toolbar item type - ' + options.type);
+  }
+
+  if (options.type === 'button' && !options.defaultLabel && !options.icon) {
+    throw new Error('Toolbar button item needs either icon or label - ' + options.name);
+  }
+
+  if (!options.name) {
+    throw new Error('Invalid toolbar item name - ' + options.name);
+  }
+
+  const id = ref(uuidv4());
+  const type = options.type;
+  const name = ref(options.name);
+  const command = options.command;
+  const noArgumentCommand = options.noArgumentCommand;
+  const icon = ref(options.icon);
+  const group = ref(options.group || 'center');
+  const allowWithoutEditor = ref(options.allowWithoutEditor);
+  const attributes = ref(options.attributes || {});
+
+  const initiallyDisabled = options.disabled || false;
+  const disabled = ref(options.disabled);
+  const active = ref(false);
+  const expand = ref(false);
+
+  // top-level style
+  const style = ref(options.style);
+  const isNarrow = ref(options.isNarrow);
+  const isWide = ref(options.isWide);
+  const minWidth = ref(options.minWidth);
+  const suppressActiveHighlight = ref(options.suppressActiveHighlight || false);
+
+  const argument = ref(options.argument);
+  const childItem = ref(null);
+  const parentItem = ref(null);
+
+  // icon properties
+  const iconColor = ref(options.iconColor);
+  const hasCaret = ref(options.hasCaret);
+
+  // dropdown properties
+  const dropdownStyles = ref(options.dropdownStyles);
+
+  // tooltip properties
+  const tooltip = ref(options.tooltip);
+  const tooltipVisible = ref(options.tooltipVisible);
+  const tooltipTimeout = ref(options.tooltipTimeout);
+
+  // behavior
+  const defaultLabel = ref(options.defaultLabel);
+  const label = ref(options.label);
+  const hideLabel = ref(options.hideLabel);
+  const inlineTextInputVisible = ref(options.inlineTextInputVisible);
+  const hasInlineTextInput = ref(options.hasInlineTextInput);
+
+  const markName = ref(options.markName);
+  const labelAttr = ref(options.labelAttr);
+
+  // Dropdown item
+  const selectedValue = ref(options.selectedValue);
+  const dropdownValueKey = ref(options.dropdownValueKey);
+
+  const inputRef = ref(options.inputRef || null);
+
+  const nestedOptions = ref<unknown[]>([]);
+  if (options.options) {
+    if (!Array.isArray(options.options)) throw new Error('Invalid toolbar item options - ' + options.options);
+    nestedOptions.value?.push(...options.options);
+  }
+
+  // Activation & Deactivation
+  const activate = (attrs: Record<string, unknown> = {}, ...args: unknown[]): void => {
+    onActivate(attrs, ...args);
+
+    if (suppressActiveHighlight.value) return;
+    active.value = true;
+  };
+
+  const deactivate = (): void => {
+    onDeactivate();
+    active.value = false;
+  };
+
+  const setDisabled = (state: boolean): void => {
+    disabled.value = state;
+  };
+
+  const resetDisabled = (): void => {
+    disabled.value = initiallyDisabled;
+  };
+
+  // User can override this behavior
+  const onActivate =
+    options.onActivate ||
+    ((): void => {
+      /* noop */
+    });
+  const onDeactivate =
+    options.onDeactivate ||
+    ((): void => {
+      /* noop */
+    });
+
+  const unref = (): Record<string, unknown> => {
+    const flattened: Record<string, unknown> = {};
+    const refsRecord = refs as unknown as Record<string, Ref<unknown>>;
+    Object.keys(refsRecord).forEach((key) => {
+      const refValue = refsRecord[key];
+      if (refValue?.value !== undefined) {
+        flattened[key] = refValue.value;
+      }
+    });
+    return flattened;
+  };
+
+  const refs = {
+    id,
+    name,
+    type,
+    command,
+    noArgumentCommand,
+    icon,
+    tooltip,
+    group,
+    attributes,
+    disabled,
+    active,
+    expand,
+    nestedOptions,
+
+    style,
+    isNarrow,
+    isWide,
+    minWidth,
+    argument,
+    parentItem,
+    iconColor,
+    hasCaret,
+    dropdownStyles,
+    tooltipVisible,
+    tooltipTimeout,
+    defaultLabel,
+    label,
+    hideLabel,
+    inlineTextInputVisible,
+    hasInlineTextInput,
+    markName,
+    labelAttr,
+    childItem,
+
+    allowWithoutEditor,
+    dropdownValueKey,
+    selectedValue,
+    inputRef,
+  };
+
+  return {
+    ...refs,
+    unref,
+    activate,
+    deactivate,
+    setDisabled,
+    resetDisabled,
+    onActivate,
+    onDeactivate,
+  };
+};
diff --git a/packages/super-editor/src/composables/use-high-contrast-mode.js b/packages/super-editor/src/composables/use-high-contrast-mode.ts
similarity index 79%
rename from packages/super-editor/src/composables/use-high-contrast-mode.js
rename to packages/super-editor/src/composables/use-high-contrast-mode.ts
index ba71c1f53..2b22c0de0 100644
--- a/packages/super-editor/src/composables/use-high-contrast-mode.js
+++ b/packages/super-editor/src/composables/use-high-contrast-mode.ts
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 const isHighContrastMode = ref(false);
 
 export function useHighContrastMode() {
-  const setHighContrastMode = (value) => {
+  const setHighContrastMode = (value: boolean): void => {
     isHighContrastMode.value = value;
   };
 
diff --git a/packages/super-editor/src/core/Attribute.ts b/packages/super-editor/src/core/Attribute.ts
index 3c7db72fa..d6dee333e 100644
--- a/packages/super-editor/src/core/Attribute.ts
+++ b/packages/super-editor/src/core/Attribute.ts
@@ -14,7 +14,14 @@ export type AttributePrimitive = string | number | boolean | null | undefined;
 /**
  * Allowed attribute values (recursive to permit nested objects/arrays)
  */
-export type AttributeValue = AttributePrimitive | AttributeValue[] | { [key: string]: AttributeValue };
+export type AttributeValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | AttributeValue[]
+  | { [key: string]: AttributeValue };
 
 /**
  * Supported attribute default value (raw value or lazy getter)
diff --git a/packages/super-editor/src/core/CommandService.js b/packages/super-editor/src/core/CommandService.ts
similarity index 56%
rename from packages/super-editor/src/core/CommandService.js
rename to packages/super-editor/src/core/CommandService.ts
index 2602f4308..c4b5416f7 100644
--- a/packages/super-editor/src/core/CommandService.js
+++ b/packages/super-editor/src/core/CommandService.ts
@@ -1,57 +1,57 @@
-//@ts-check
+import type { Transaction, EditorState } from 'prosemirror-state';
 import { chainableEditorState } from './helpers/chainableEditorState.js';
-
-/**
- * @typedef {import('prosemirror-state').Transaction} Transaction
- * @typedef {import('./commands/types/index.js').ChainableCommandObject} ChainableCommandObject
- */
+import type { Editor } from './Editor.js';
+import type {
+  CommandServiceOptions,
+  EditorCommands,
+  ChainableCommandObject,
+  CanObject,
+  CommandProps,
+  Command,
+} from './types/ChainedCommands.js';
 
 /**
  * CommandService is the main class to work with commands.
  */
 export class CommandService {
-  editor;
+  editor: Editor;
 
-  rawCommands;
+  rawCommands: Record<string, (...args: unknown[]) => Command>;
 
-  /**
-   * @param {import('./commands/types/index.js').CommandServiceOptions} props
-   */
-  constructor(props) {
+  constructor(props: CommandServiceOptions) {
     this.editor = props.editor;
     this.rawCommands = this.editor.extensionService.commands;
   }
 
   /**
    * Static method for creating a service.
-   * @param {import('./commands/types/index.js').CommandServiceOptions} params for the constructor.
-   * @returns {CommandService} New instance of CommandService
+   * @param params Parameters for the constructor.
+   * @returns New instance of CommandService
    */
-  static create(params) {
+  static create(params: CommandServiceOptions): CommandService {
     return new CommandService(params);
   }
 
   /**
    * Get editor state.
-   * @returns {import("prosemirror-state").EditorState} Editor state
+   * @returns Editor state
    */
-  get state() {
+  get state(): EditorState {
     return this.editor.state;
   }
 
   /**
    * Get all editor commands
-   * @returns {import('./commands/types/index.js').EditorCommands} Commands object
+   * @returns Commands object
    */
-  get commands() {
+  get commands(): EditorCommands {
     const { editor, state } = this;
     const { view } = editor;
     const { tr } = state;
     const props = this.createProps(tr);
 
     const entries = Object.entries(this.rawCommands).map(([name, command]) => {
-      /** @type {(...args: any[]) => boolean} */
-      const method = (...args) => {
+      const method = (...args: unknown[]): boolean => {
         const fn = command(...args)(props);
 
         if (!tr.getMeta('preventDispatch')) {
@@ -67,39 +67,39 @@ export class CommandService {
       return [name, method];
     });
 
-    return /** @type {import('./commands/types/index.js').EditorCommands} */ Object.fromEntries(entries);
+    return Object.fromEntries(entries) as EditorCommands;
   }
 
   /**
    * Create a chain of commands to call multiple commands at once.
-   * @returns {(startTr?: Transaction, shouldDispatch?: boolean) => ChainableCommandObject} Function that creates a command chain
+   * @returns Function that creates a command chain
    */
-  get chain() {
+  get chain(): (startTr?: Transaction, shouldDispatch?: boolean) => ChainableCommandObject {
     return () => this.createChain();
   }
 
   /**
    * Check if a command or a chain of commands can be executed. Without executing it.
-   * @returns {() => import('./commands/types/index.js').CanObject} Function that creates a can object
+   * @returns Function that creates a can object
    */
-  get can() {
+  get can(): () => CanObject {
     return () => this.createCan();
   }
 
   /**
    * Creates a chain of commands.
-   * @param {import("prosemirror-state").Transaction} [startTr] - Start transaction.
-   * @param {boolean} [shouldDispatch=true] - Whether to dispatch the transaction.
-   * @returns {import('./commands/types/index.js').ChainableCommandObject} The command chain.
+   * @param startTr - Start transaction.
+   * @param shouldDispatch - Whether to dispatch the transaction.
+   * @returns The command chain.
    */
-  createChain(startTr, shouldDispatch = true) {
+  createChain(startTr?: Transaction, shouldDispatch: boolean = true): ChainableCommandObject {
     const { editor, state, rawCommands } = this;
     const { view } = editor;
-    const callbacks = [];
+    const callbacks: boolean[] = [];
     const hasStartTr = !!startTr;
     const tr = startTr || state.tr;
 
-    const run = () => {
+    const run = (): boolean => {
       if (!hasStartTr && shouldDispatch && !tr.getMeta('preventDispatch')) {
         view.dispatch(tr);
       }
@@ -108,7 +108,7 @@ export class CommandService {
     };
 
     const entries = Object.entries(rawCommands).map(([name, command]) => {
-      const chainedCommand = (...args) => {
+      const chainedCommand = (...args: unknown[]): ChainableCommandObject => {
         const props = this.createProps(tr, shouldDispatch);
         const callback = command(...args)(props);
         callbacks.push(callback);
@@ -118,29 +118,28 @@ export class CommandService {
       return [name, chainedCommand];
     });
 
-    const chain = {
+    const chain: ChainableCommandObject = {
       ...Object.fromEntries(entries),
       run,
-    };
+    } as ChainableCommandObject;
 
     return chain;
   }
 
   /**
    * Creates a can check for commands.
-   * @param {import("prosemirror-state").Transaction} [startTr] - Start transaction.
-   * @returns {import('./commands/types/index.js').CanObject} The can object.
+   * @param startTr - Start transaction.
+   * @returns The can object.
    */
-  createCan(startTr) {
+  createCan(startTr?: Transaction): CanObject {
     const { rawCommands, state } = this;
     const dispatch = false;
     const tr = startTr || state.tr;
     const props = this.createProps(tr, dispatch);
 
-    /** @type {Record<string, import('./commands/types/index.js').CanCommand>} */
     const commands = Object.fromEntries(
       Object.entries(rawCommands).map(([name, command]) => {
-        return [name, (...args) => command(...args)({ ...props, dispatch: undefined })];
+        return [name, (...args: unknown[]) => command(...args)({ ...props, dispatch: undefined })];
       }),
     );
 
@@ -149,20 +148,20 @@ export class CommandService {
       chain: () => this.createChain(tr, dispatch),
     };
 
-    return /** @type {import('./commands/types/index.js').CanObject} */ (result);
+    return result as CanObject;
   }
 
   /**
    * Creates default props for the command method.
-   * @param {import("prosemirror-state").Transaction} tr Transaction.
-   * @param {boolean} shouldDispatch Check if should dispatch.
-   * @returns {Object} Props object.
+   * @param tr Transaction.
+   * @param shouldDispatch Check if should dispatch.
+   * @returns Props object.
    */
-  createProps(tr, shouldDispatch = true) {
+  createProps(tr: Transaction, shouldDispatch: boolean = true): CommandProps {
     const { editor, state, rawCommands } = this;
     const { view } = editor;
 
-    const props = {
+    const props: CommandProps = {
       tr,
       editor,
       view,
@@ -170,12 +169,12 @@ export class CommandService {
       dispatch: shouldDispatch ? () => undefined : undefined,
       chain: () => this.createChain(tr, shouldDispatch),
       can: () => this.createCan(tr),
-      get commands() {
+      get commands(): EditorCommands {
         return Object.fromEntries(
           Object.entries(rawCommands).map(([name, command]) => {
-            return [name, (...args) => command(...args)(props)];
+            return [name, (...args: unknown[]) => command(...args)(props)];
           }),
-        );
+        ) as EditorCommands;
       },
     };
 
diff --git a/packages/super-editor/src/core/DocxZipper.js b/packages/super-editor/src/core/DocxZipper.ts
similarity index 67%
rename from packages/super-editor/src/core/DocxZipper.js
rename to packages/super-editor/src/core/DocxZipper.ts
index 455729da5..b672dd445 100644
--- a/packages/super-editor/src/core/DocxZipper.js
+++ b/packages/super-editor/src/core/DocxZipper.ts
@@ -1,13 +1,68 @@
 import xmljs from 'xml-js';
 import JSZip from 'jszip';
+import type { JSZipObject } from 'jszip';
 import { getContentTypesFromXml } from './super-converter/helpers.js';
 import { ensureXmlString, isXmlLike } from './encoding-helpers.js';
 
+/**
+ * Docx file entry
+ */
+export interface DocxFile {
+  name: string;
+  content: string;
+}
+
+/**
+ * DocxZipper constructor parameters
+ */
+interface DocxZipperParams {
+  debug?: boolean;
+}
+
+/**
+ * Media files map
+ */
+type MediaFiles = Record<string, string>;
+
+/**
+ * Media map (URLs)
+ */
+type Media = Record<string, string>;
+
+/**
+ * Fonts map
+ */
+type Fonts = Record<string, Uint8Array>;
+
+/**
+ * Updated docs map
+ */
+type UpdatedDocs = Record<string, string>;
+
+/**
+ * Update zip parameters
+ */
+interface UpdateZipParams {
+  docx: DocxFile[] | Record<string, string>;
+  updatedDocs: UpdatedDocs;
+  originalDocxFile?: File | Blob | Buffer;
+  media: MediaFiles;
+  fonts: Fonts;
+  isHeadless: boolean;
+}
+
 /**
  * Class to handle unzipping and zipping of docx files
  */
 class DocxZipper {
-  constructor(params = {}) {
+  debug: boolean;
+  zip: JSZip;
+  files: DocxFile[];
+  media: Media;
+  mediaFiles: MediaFiles;
+  fonts: Fonts;
+
+  constructor(params: DocxZipperParams = {}) {
     this.debug = params.debug || false;
     this.zip = new JSZip();
     this.files = [];
@@ -34,7 +89,7 @@ class DocxZipper {
    * docProps/core.xml
    * docProps/app.xml
    * */
-  async getDocxData(file, isNode = false) {
+  async getDocxData(file: File | Blob | Buffer | ArrayBuffer, isNode: boolean = false): Promise<DocxFile[]> {
     const extractedFiles = await this.unzip(file);
     const files = Object.entries(extractedFiles.files);
 
@@ -62,7 +117,7 @@ class DocxZipper {
           const extension = this.getFileExtension(name)?.toLowerCase();
           // Only build data URIs for images; keep raw base64 for other binaries (e.g., xlsx)
           const imageTypes = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'emf', 'wmf', 'svg', 'webp']);
-          if (imageTypes.has(extension)) {
+          if (extension && imageTypes.has(extension)) {
             this.mediaFiles[name] = `data:image/${extension};base64,${fileBase64}`;
             const blob = await zipEntry.async('blob');
             const fileObj = new File([blob], name, { type: blob.type });
@@ -82,39 +137,48 @@ class DocxZipper {
     return this.files;
   }
 
-  getFileExtension(fileName) {
+  getFileExtension(fileName: string): string | null {
     const fileSplit = fileName.split('.');
     if (fileSplit.length < 2) return null;
-    return fileSplit[fileSplit.length - 1];
+    return fileSplit[fileSplit.length - 1] || null;
   }
 
   /**
    * Update [Content_Types].xml with extensions of new Image annotations
    */
-  async updateContentTypes(docx, media, fromJson, updatedDocs = {}) {
+  async updateContentTypes(
+    docx: JSZip | { files: DocxFile[] | Record<string, string> },
+    media: MediaFiles,
+    fromJson: boolean,
+    updatedDocs: UpdatedDocs = {},
+  ): Promise<string | void> {
     const additionalPartNames = Object.keys(updatedDocs || {});
     const imageExts = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tiff', 'emf', 'wmf', 'svg', 'webp']);
     const newMediaTypes = Object.keys(media)
       .map((name) => this.getFileExtension(name))
-      .filter((ext) => ext && imageExts.has(ext));
+      .filter((ext): ext is string => ext !== null && imageExts.has(ext));
 
     const contentTypesPath = '[Content_Types].xml';
-    let contentTypesXml;
+    let contentTypesXml: string;
     if (fromJson) {
-      if (Array.isArray(docx.files)) {
+      if ('files' in docx && Array.isArray(docx.files)) {
         contentTypesXml = docx.files.find((file) => file.name === contentTypesPath)?.content || '';
+      } else if ('files' in docx && typeof docx.files === 'object') {
+        contentTypesXml = (docx.files as Record<string, string>)[contentTypesPath] || '';
       } else {
-        contentTypesXml = docx.files?.[contentTypesPath] || '';
+        contentTypesXml = '';
       }
-    } else contentTypesXml = await docx.file(contentTypesPath).async('string');
+    } else {
+      contentTypesXml = await (docx as JSZip).file(contentTypesPath)!.async('string');
+    }
 
     let typesString = '';
 
     const defaultMediaTypes = getContentTypesFromXml(contentTypesXml);
 
     // Update media types in content types
-    const seenTypes = new Set();
-    for (let type of newMediaTypes) {
+    const seenTypes = new Set<string>();
+    for (const type of newMediaTypes) {
       // Current extension already presented in Content_Types
       if (defaultMediaTypes.includes(type)) continue;
       if (seenTypes.has(type)) continue;
@@ -125,26 +189,29 @@ class DocxZipper {
     }
 
     // Update for comments
-    const xmlJson = JSON.parse(xmljs.xml2json(contentTypesXml, null, 2));
-    const types = xmlJson.elements?.find((el) => el.name === 'Types') || {};
+    type XmlElement = { name: string; attributes?: { PartName?: string }; elements?: XmlElement[] };
+    const xmlJson = JSON.parse(xmljs.xml2json(contentTypesXml, { compact: false })) as {
+      elements?: XmlElement[];
+    };
+    const types = xmlJson.elements?.find((el) => el.name === 'Types') || { elements: [] };
 
     // Overrides
     const hasComments = types.elements?.some(
-      (el) => el.name === 'Override' && el.attributes.PartName === '/word/comments.xml',
+      (el: XmlElement) => el.name === 'Override' && el.attributes?.PartName === '/word/comments.xml',
     );
     const hasCommentsExtended = types.elements?.some(
-      (el) => el.name === 'Override' && el.attributes.PartName === '/word/commentsExtended.xml',
+      (el: XmlElement) => el.name === 'Override' && el.attributes?.PartName === '/word/commentsExtended.xml',
     );
     const hasCommentsIds = types.elements?.some(
-      (el) => el.name === 'Override' && el.attributes.PartName === '/word/commentsIds.xml',
+      (el: XmlElement) => el.name === 'Override' && el.attributes?.PartName === '/word/commentsIds.xml',
     );
     const hasCommentsExtensible = types.elements?.some(
-      (el) => el.name === 'Override' && el.attributes.PartName === '/word/commentsExtensible.xml',
+      (el: XmlElement) => el.name === 'Override' && el.attributes?.PartName === '/word/commentsExtensible.xml',
     );
 
-    const hasFile = (filename) => {
-      if (!docx?.files) return false;
-      if (!fromJson) return Boolean(docx.files[filename]);
+    const hasFile = (filename: string): boolean => {
+      if (!docx || !('files' in docx)) return false;
+      if (!fromJson) return Boolean((docx as JSZip).files[filename]);
       if (Array.isArray(docx.files)) return docx.files.some((file) => file.name === filename);
       return Boolean(docx.files[filename]);
     };
@@ -169,8 +236,8 @@ class DocxZipper {
       if (!hasCommentsExtensible) typesString += commentsExtendedDef;
     }
 
-    const partNames = new Set(additionalPartNames);
-    if (docx?.files) {
+    const partNames = new Set<string>(additionalPartNames);
+    if (docx && 'files' in docx) {
       if (fromJson && Array.isArray(docx.files)) {
         docx.files.forEach((file) => partNames.add(file.name));
       } else {
@@ -182,7 +249,7 @@ class DocxZipper {
       if (name.includes('.rels')) return;
       if (!name.includes('header') && !name.includes('footer')) return;
       const hasExtensible = types.elements?.some(
-        (el) => el.name === 'Override' && el.attributes.PartName === `/${name}`,
+        (el: XmlElement) => el.name === 'Override' && el.attributes?.PartName === `/${name}`,
       );
       const type = name.includes('header') ? 'header' : 'footer';
       const extendedDef = `<Override PartName="/${name}" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.${type}+xml"/>`;
@@ -195,22 +262,27 @@ class DocxZipper {
     let updatedContentTypesXml = contentTypesXml.replace(beginningString, `${beginningString}${typesString}`);
 
     // Include any header/footer targets referenced from document relationships
-    let relationshipsXml = updatedDocs['word/_rels/document.xml.rels'];
+    let relationshipsXml: string | undefined = updatedDocs['word/_rels/document.xml.rels'];
     if (!relationshipsXml) {
       if (fromJson) {
-        if (Array.isArray(docx.files)) {
+        if ('files' in docx && Array.isArray(docx.files)) {
           relationshipsXml = docx.files.find((file) => file.name === 'word/_rels/document.xml.rels')?.content;
-        } else {
-          relationshipsXml = docx.files?.['word/_rels/document.xml.rels'];
+        } else if ('files' in docx && typeof docx.files === 'object') {
+          relationshipsXml = (docx.files as Record<string, string>)['word/_rels/document.xml.rels'];
         }
       } else {
-        relationshipsXml = await docx.file('word/_rels/document.xml.rels')?.async('string');
+        relationshipsXml = await (docx as JSZip).file('word/_rels/document.xml.rels')?.async('string');
       }
     }
 
     if (relationshipsXml) {
       try {
-        const relJson = xmljs.xml2js(relationshipsXml, { compact: false });
+        const relJson = xmljs.xml2js(relationshipsXml, { compact: false }) as {
+          elements?: Array<{
+            name: string;
+            elements?: Array<{ attributes?: { Type?: string; Target?: string } }>;
+          }>;
+        };
         const relationships = relJson.elements?.find((el) => el.name === 'Relationships');
         relationships?.elements?.forEach((rel) => {
           const type = rel.attributes?.Type;
@@ -241,17 +313,24 @@ class DocxZipper {
 
     if (fromJson) return updatedContentTypesXml;
 
-    docx.file(contentTypesPath, updatedContentTypesXml);
+    (docx as JSZip).file(contentTypesPath, updatedContentTypesXml);
   }
 
-  async unzip(file) {
+  async unzip(file: File | Blob | Buffer | ArrayBuffer): Promise<JSZip> {
     const zip = await this.zip.loadAsync(file);
     return zip;
   }
 
-  async updateZip({ docx, updatedDocs, originalDocxFile, media, fonts, isHeadless }) {
+  async updateZip({
+    docx,
+    updatedDocs,
+    originalDocxFile,
+    media,
+    fonts,
+    isHeadless,
+  }: UpdateZipParams): Promise<Blob | Buffer> {
     // We use a different re-zip process if we have the original docx vs the docx xml metadata
-    let zip;
+    let zip: JSZip;
 
     if (originalDocxFile) {
       zip = await this.exportFromOriginalFile(originalDocxFile, updatedDocs, media);
@@ -266,17 +345,24 @@ class DocxZipper {
 
   /**
    * Export the Editor content to a docx file, updating changed docs
-   * @param {Object} docx An object containing the unzipped docx files (keys are relative file names)
-   * @param {Object} updatedDocs An object containing the updated docs (keys are relative file names)
-   * @returns {Promise<JSZip>} The unzipped but updated docx file ready for zipping
+   * @param docx An object containing the unzipped docx files (keys are relative file names)
+   * @param updatedDocs An object containing the updated docs (keys are relative file names)
+   * @returns The unzipped but updated docx file ready for zipping
    */
-  async exportFromCollaborativeDocx(docx, updatedDocs, media, fonts) {
+  async exportFromCollaborativeDocx(
+    docx: DocxFile[] | Record<string, string>,
+    updatedDocs: UpdatedDocs,
+    media: MediaFiles,
+    fonts: Fonts,
+  ): Promise<JSZip> {
     const zip = new JSZip();
 
     // Rebuild original files
-    for (const file of docx) {
-      const content = file.content;
-      zip.file(file.name, content);
+    if (Array.isArray(docx)) {
+      for (const file of docx) {
+        const content = file.content;
+        zip.file(file.name, content);
+      }
     }
 
     // Replace updated docs
@@ -302,14 +388,18 @@ class DocxZipper {
   /**
    * Export the Editor content to a docx file, updating changed docs
    * Requires the original docx file
-   * @param {File} originalDocxFile The original docx file
-   * @param {Object} updatedDocs An object containing the updated docs (keys are relative file names)
-   * @returns {Promise<JSZip>} The unzipped but updated docx file ready for zipping
+   * @param originalDocxFile The original docx file
+   * @param updatedDocs An object containing the updated docs (keys are relative file names)
+   * @returns The unzipped but updated docx file ready for zipping
    */
-  async exportFromOriginalFile(originalDocxFile, updatedDocs, media) {
+  async exportFromOriginalFile(
+    originalDocxFile: File | Blob | Buffer,
+    updatedDocs: UpdatedDocs,
+    media: MediaFiles,
+  ): Promise<JSZip> {
     const unzippedOriginalDocx = await this.unzip(originalDocxFile);
-    const filePromises = [];
-    unzippedOriginalDocx.forEach((relativePath, zipEntry) => {
+    const filePromises: Promise<void>[] = [];
+    unzippedOriginalDocx.forEach((relativePath: string, zipEntry: JSZipObject) => {
       const promise = zipEntry.async('string').then((content) => {
         unzippedOriginalDocx.file(zipEntry.name, content);
       });
diff --git a/packages/super-editor/src/core/Editor.annotations.test.js b/packages/super-editor/src/core/Editor.annotations.test.js
index 0dc7ffb91..833d6692d 100644
--- a/packages/super-editor/src/core/Editor.annotations.test.js
+++ b/packages/super-editor/src/core/Editor.annotations.test.js
@@ -45,9 +45,8 @@ describe('Editor annotation utilities', () => {
 
     const scrolledTransaction = { id: 'scrolled' };
     const scrollIntoView = vi.fn().mockReturnValue(scrolledTransaction);
-    const annotateDocumentSpy = vi
-      .spyOn(AnnotatorHelpers, 'annotateDocument')
-      .mockReturnValue({ docChanged: true, scrollIntoView });
+    const mockTransaction = { docChanged: true, scrollIntoView };
+    const annotateDocumentSpy = vi.spyOn(AnnotatorHelpers, 'annotateDocument').mockReturnValue(mockTransaction);
 
     const annotationValues = [{ input_id: 'a', input_value: 'b' }];
     const hiddenIds = ['hidden'];
@@ -57,7 +56,7 @@ describe('Editor annotation utilities', () => {
     expect(callArgs.annotationValues).toBe(annotationValues);
     expect(callArgs.hiddenFieldIds).toBe(hiddenIds);
     expect(callArgs.removeEmptyFields).toBe(true);
-    expect(callArgs.editor).toBe(editor);
+    expect(callArgs.schema).toBe(editor.schema);
 
     expect(scrollIntoView).toHaveBeenCalledTimes(1);
     expect(dispatchSpy).toHaveBeenCalledWith(scrolledTransaction);
diff --git a/packages/super-editor/src/core/Editor.ts b/packages/super-editor/src/core/Editor.ts
index 81a461254..269a34c90 100644
--- a/packages/super-editor/src/core/Editor.ts
+++ b/packages/super-editor/src/core/Editor.ts
@@ -1,7 +1,7 @@
 import type { EditorState, Transaction, Plugin } from 'prosemirror-state';
 import type { EditorView as PmEditorView } from 'prosemirror-view';
 import type { Node as PmNode, Schema } from 'prosemirror-model';
-import type { EditorOptions, User, FieldValue, DocxFileEntry } from './types/EditorConfig.js';
+import type { EditorOptions, User, FieldValue, DocxFileEntry, EditorExtension } from './types/EditorConfig.js';
 import type {
   EditorHelpers,
   ExtensionStorage,
@@ -354,7 +354,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
    */
   #initRichText(): void {
     if (!this.options.extensions || !this.options.extensions.length) {
-      this.options.extensions = getRichTextExtensions();
+      this.options.extensions = getRichTextExtensions() as EditorExtension[];
     }
 
     this.#createExtensionService();
@@ -466,7 +466,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
    * Get extension helpers.
    */
   get helpers(): EditorHelpers {
-    return this.extensionService.helpers;
+    return this.extensionService.helpers as EditorHelpers;
   }
 
   /**
@@ -975,7 +975,9 @@ export class Editor extends EventEmitter<EditorEventMap> {
   static async loadXmlData(
     fileSource: File | Blob | Buffer,
     isNode: boolean = false,
-  ): Promise<[DocxFileEntry[], Record<string, unknown>, Record<string, unknown>, Record<string, unknown>] | undefined> {
+  ): Promise<
+    [DocxFileEntry[], Record<string, string>, Record<string, string>, Record<string, Uint8Array>] | undefined
+  > {
     if (!fileSource) return;
 
     const zipper = new DocxZipper();
@@ -996,7 +998,8 @@ export class Editor extends EventEmitter<EditorEventMap> {
    * Set the document version
    */
   static setDocumentVersion(doc: DocxFileEntry[], version: string): string {
-    return SuperConverter.setStoredSuperdocVersion(doc, version) ?? version;
+    const result = SuperConverter.setStoredSuperdocVersion(doc, version);
+    return (result as unknown as string | undefined) ?? version;
   }
 
   /**
@@ -1026,12 +1029,12 @@ export class Editor extends EventEmitter<EditorEventMap> {
 
     const suppressedNames = new Set(
       (this.extensionService?.extensions || [])
-        .filter((ext: { config?: { excludeFromSummaryJSON?: boolean } }) => {
-          const config = (ext as { config?: { excludeFromSummaryJSON?: boolean } })?.config;
+        .filter((ext) => {
+          const config = ext?.config as { excludeFromSummaryJSON?: boolean } | undefined;
           const suppressFlag = config?.excludeFromSummaryJSON;
           return Boolean(suppressFlag);
         })
-        .map((ext: { name: string }) => ext.name),
+        .map((ext) => ext.name),
     );
 
     const summary = buildSchemaSummary(this.schema, schemaVersion);
@@ -1091,7 +1094,15 @@ export class Editor extends EventEmitter<EditorEventMap> {
           doc = this.schema.nodeFromJSON(content);
           doc = this.#prepareDocumentForImport(doc);
         } else {
-          doc = createDocument(this.converter, this.schema, this);
+          const createdDoc = createDocument(
+            this.converter as Parameters<typeof createDocument>[0],
+            this.schema,
+            this as Parameters<typeof createDocument>[2],
+          );
+          if (!createdDoc) {
+            throw new Error('Failed to create document from converter');
+          }
+          doc = createdDoc;
           // Perform any additional document processing prior to finalizing the doc here
           doc = this.#prepareDocumentForImport(doc);
 
@@ -1159,8 +1170,10 @@ export class Editor extends EventEmitter<EditorEventMap> {
     if (this.options.skipViewCreation || typeof this.view?.setProps !== 'function') {
       return;
     }
+
     this.view.setProps({
-      nodeViews: this.extensionService.nodeViews,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ProseMirror nodeViews type is complex and varies by node
+      nodeViews: this.extensionService.nodeViews as any,
     });
   }
 
@@ -1359,7 +1372,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
 
     if (!this.options.isNewFile) {
       this.#initComments();
-      updateYdocDocxData(this, this.options.ydoc);
+      updateYdocDocxData(this, undefined);
     }
   }
 
@@ -1649,7 +1662,11 @@ export class Editor extends EventEmitter<EditorEventMap> {
    * Or paragraph fields that rely on the same underlying document and list defintions
    */
   createChildEditor(options: Partial<EditorOptions>): Editor {
-    return createLinkedChildEditor(this, options);
+    const childEditor = createLinkedChildEditor(this, options);
+    if (!childEditor) {
+      throw new Error('Failed to create child editor - current editor is already a child editor');
+    }
+    return childEditor;
   }
 
   /**
@@ -1672,7 +1689,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
       hasMadeUpdate = true;
     }
 
-    if (hasMadeUpdate && this.view && !isHeadless()) {
+    if (hasMadeUpdate && this.view && !isHeadless(this)) {
       const newTr = this.view.state.tr;
       newTr.setMeta('forceUpdatePagination', true);
       this.#dispatchTransaction(newTr);
@@ -1724,7 +1741,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
   migrateListsToV2(): Array<{ from: number; to: number; slice: unknown }> {
     if (this.options.isHeaderOrFooter) return [];
     const replacements = migrateListsToV2IfNecessary(this);
-    return replacements;
+    return replacements as unknown as Array<{ from: number; to: number; slice: unknown }>;
   }
 
   /**
@@ -1741,7 +1758,16 @@ export class Editor extends EventEmitter<EditorEventMap> {
 
     const { tr, doc } = newState;
 
-    prepareCommentsForExport(doc, tr, this.schema, comments);
+    prepareCommentsForExport(
+      doc,
+      tr,
+      this.schema,
+      comments.map((c) => ({
+        commentId: c.id,
+        parentCommentId: (c as Record<string, unknown>).parentCommentId as string | number | undefined,
+        createdTime: (c as Record<string, unknown>).createdTime as number | string | undefined,
+      })),
+    );
     const updatedState = newState.apply(tr);
     return updatedState.doc.toJSON();
   }
@@ -1851,24 +1877,27 @@ export class Editor extends EventEmitter<EditorEventMap> {
       const zipper = new DocxZipper();
 
       if (getUpdatedDocs) {
-        updatedDocs['[Content_Types].xml'] = await zipper.updateContentTypes(
+        const contentTypesResult = await zipper.updateContentTypes(
           {
-            files: this.options.content,
+            files: this.options.content as DocxFileEntry[] | Record<string, string>,
           },
           media,
           true,
           updatedDocs,
         );
+        if (typeof contentTypesResult === 'string') {
+          updatedDocs['[Content_Types].xml'] = contentTypesResult;
+        }
         return updatedDocs;
       }
 
       const result = await zipper.updateZip({
-        docx: this.options.content,
+        docx: this.options.content as DocxFileEntry[] | Record<string, string>,
         updatedDocs: updatedDocs,
-        originalDocxFile: this.options.fileSource,
+        originalDocxFile: this.options.fileSource ?? undefined,
         media,
-        fonts: this.options.fonts,
-        isHeadless: this.options.isHeadless,
+        fonts: this.options.fonts as Record<string, Uint8Array>,
+        isHeadless: this.options.isHeadless ?? false,
       });
 
       (this.options.telemetry as TelemetryData | null)?.trackUsage?.('document_export', {
@@ -1950,7 +1979,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
     if (!this.options.ydoc) return;
 
     const metaMap = (this.options.ydoc as { getMap: (name: string) => Map<string, unknown> }).getMap('meta');
-    let docVersion = metaMap.get('version');
+    let docVersion = metaMap.get('version') as string | undefined;
     if (!docVersion) docVersion = 'initial';
     console.debug('[checkVersionMigrations] Document version', docVersion);
     const migrations = getNecessaryMigrations(docVersion) || [];
@@ -1971,8 +2000,8 @@ export class Editor extends EventEmitter<EditorEventMap> {
     if (!hasRunMigrations) return;
 
     // Return the updated ydoc
-    const pluginState = syncPlugin?.getState(this.state);
-    return pluginState.doc;
+    const pluginState = syncPlugin?.getState(this.state) as { doc?: unknown } | undefined;
+    return pluginState?.doc;
   }
 
   /**
@@ -1980,7 +2009,11 @@ export class Editor extends EventEmitter<EditorEventMap> {
    */
   async replaceFile(newFile: File | Blob | Buffer): Promise<void> {
     this.setOptions({ annotations: true });
-    const [docx, media, mediaFiles, fonts] = (await Editor.loadXmlData(newFile))!;
+    const result = await Editor.loadXmlData(newFile);
+    if (!result) {
+      throw new Error('Failed to load XML data from file');
+    }
+    const [docx, media, mediaFiles, fonts] = result;
     this.setOptions({
       fileSource: newFile,
       content: docx,
@@ -1997,7 +2030,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
     this.initDefaultStyles();
 
     if (this.options.ydoc && this.options.collaborationProvider) {
-      updateYdocDocxData(this, this.options.ydoc);
+      updateYdocDocxData(this, undefined);
       this.initializeCollaborationData();
     } else {
       this.#insertNewFileData();
@@ -2013,16 +2046,22 @@ export class Editor extends EventEmitter<EditorEventMap> {
    * @param name - File name
    * @param type - type of result (json, string)
    */
-  getInternalXmlFile(name: string, type: 'json' | 'string' = 'json'): unknown | string | null {
-    if (!this.converter.convertedXml[name]) {
+  getInternalXmlFile(name: string, type: 'json' | 'string' = 'json'): unknown | null {
+    const convertedXml = this.converter?.convertedXml;
+    if (!convertedXml || !convertedXml[name]) {
       console.warn('Cannot find file in docx');
       return null;
     }
 
+    const fileData = convertedXml[name] as { elements?: unknown[] } | undefined;
+    if (!fileData?.elements?.[0]) {
+      return null;
+    }
+
     if (type === 'json') {
-      return this.converter.convertedXml[name].elements[0] || null;
+      return fileData.elements[0];
     }
-    return this.converter.schemaToXml(this.converter.convertedXml[name].elements[0]);
+    return this.converter.schemaToXml(fileData.elements[0]);
   }
 
   /**
@@ -2100,7 +2139,6 @@ export class Editor extends EventEmitter<EditorEventMap> {
       annotationValues,
       hiddenFieldIds: hiddenIds,
       removeEmptyFields,
-      editor: this,
     });
 
     // Dispatch everything in a single transaction, which makes this undo-able in a single undo
diff --git a/packages/super-editor/src/core/Extension.ts b/packages/super-editor/src/core/Extension.ts
index 28f1d0696..55004626a 100644
--- a/packages/super-editor/src/core/Extension.ts
+++ b/packages/super-editor/src/core/Extension.ts
@@ -1,11 +1,12 @@
 import { getExtensionConfigField } from './helpers/getExtensionConfigField.js';
 import { callOrGet } from './utilities/callOrGet.js';
 import type { MaybeGetter } from './utilities/callOrGet.js';
+import type { Editor } from './Editor.js';
 
 /**
  * Base configuration for extensions.
  */
-export interface ExtensionConfig<
+interface ExtensionConfigBase<
   Options extends Record<string, unknown> = Record<string, never>,
   Storage extends Record<string, unknown> = Record<string, never>,
 > {
@@ -22,6 +23,15 @@ export interface ExtensionConfig<
   [key: string]: unknown;
 }
 
+/**
+ * Extension configuration with a strongly typed `this` context so config
+ * functions can reference the extension instance (options, editor, etc.).
+ */
+export type ExtensionConfig<
+  Options extends Record<string, unknown> = Record<string, never>,
+  Storage extends Record<string, unknown> = Record<string, never>,
+> = ExtensionConfigBase<Options, Storage> & ThisType<Extension<Options, Storage>>;
+
 /**
  * Extension class is used to create extensions.
  * @template Options - Type for extension options
@@ -39,6 +49,9 @@ export class Extension<
 
   storage: Storage;
 
+  // Editor instance is injected at runtime by the ExtensionService.
+  editor: Editor | undefined;
+
   config: ExtensionConfig<Options, Storage>;
 
   constructor(config: ExtensionConfig<Options, Storage>) {
diff --git a/packages/super-editor/src/core/ExtensionService.js b/packages/super-editor/src/core/ExtensionService.js
deleted file mode 100644
index b09ea4711..000000000
--- a/packages/super-editor/src/core/ExtensionService.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import { keymap } from 'prosemirror-keymap';
-import { Schema } from './Schema.js';
-import { Attribute } from './Attribute.js';
-import { getNodeType } from './helpers/getNodeType.js';
-import { getExtensionConfigField } from './helpers/getExtensionConfigField.js';
-import { getSchemaTypeByName } from './helpers/getSchemaTypeByName.js';
-import { callOrGet } from './utilities/callOrGet.js';
-import { isExtensionRulesEnabled } from './helpers/isExtentionRulesEnabled.js';
-import { inputRulesPlugin } from './InputRule.js';
-
-/**
- * ExtensionService is the main class to work with extensions.
- */
-export class ExtensionService {
-  editor;
-
-  schema;
-
-  extensions;
-
-  externalExtensions = [];
-
-  splittableMarks = [];
-
-  constructor(extensions, userExtensions, editor) {
-    this.editor = editor;
-
-    this.externalExtensions = userExtensions || [];
-
-    this.externalExtensions = this.externalExtensions.map((extension) => {
-      return {
-        ...extension,
-        isExternal: true,
-      };
-    });
-
-    this.extensions = ExtensionService.getResolvedExtensions([...extensions, ...this.externalExtensions]);
-    this.schema = Schema.createSchemaByExtensions(this.extensions, editor);
-    this.#setupExtensions();
-  }
-
-  /**
-   * Static method for creating ExtensionService.
-   * @param args Arguments for the constructor.
-   */
-  static create(...args) {
-    return new ExtensionService(...args);
-  }
-
-  /**
-   * Get an array of resolved extensions (e.g. sorted by priority).
-   * @param extensions Array of extensions.
-   * @returns Array of resolved extensions.
-   */
-  static getResolvedExtensions(extensions) {
-    const resolvedExtensions = ExtensionService.sortByPriority(extensions);
-    return resolvedExtensions;
-  }
-
-  /**
-   * Sort extensions by priority.
-   * @param extensions Array of extensions.
-   * @returns Array of sorted extensions by priority.
-   */
-  static sortByPriority(extensions) {
-    const defaultValue = 100;
-    return extensions.sort((a, b) => {
-      const priorityA = getExtensionConfigField(a, 'priority') || defaultValue;
-      const priorityB = getExtensionConfigField(b, 'priority') || defaultValue;
-      if (priorityA > priorityB) return -1;
-      if (priorityA < priorityB) return 1;
-      return 0;
-    });
-  }
-
-  /**
-   * Get all attributes defined in the extensions.
-   * @returns Array of attributes.
-   */
-  get attributes() {
-    return Attribute.getAttributesFromExtensions(this.extensions);
-  }
-
-  /**
-   * Get all commands defined in the extensions.
-   * @returns Object with commands (key - command name, value - function).
-   */
-  get commands() {
-    let commandsObject = {};
-
-    for (const extension of this.extensions) {
-      const context = {
-        name: extension.name,
-        options: extension.options,
-        storage: extension.storage,
-        editor: this.editor,
-        type: getSchemaTypeByName(extension.name, this.schema),
-      };
-
-      const addCommands = getExtensionConfigField(extension, 'addCommands', context);
-      if (addCommands) {
-        commandsObject = {
-          ...commandsObject,
-          ...addCommands(),
-        };
-      }
-    }
-
-    return commandsObject;
-  }
-
-  /**
-   * Get all helper methods defined in the extensions.
-   * Each extension can define its own helper methods.
-   * Example: editor.helpers.linkedStyles.getStyles()
-   * @returns {Object} Object with helper methods for extensions.
-   */
-  get helpers() {
-    const helpersObject = {};
-
-    for (const extension of this.extensions) {
-      const name = extension.name;
-      if (!name) continue;
-
-      const context = {
-        name: extension.name,
-        options: extension.options,
-        storage: extension.storage,
-        editor: this.editor,
-        type: getSchemaTypeByName(extension.name, this.schema),
-      };
-
-      const addHelpers = getExtensionConfigField(extension, 'addHelpers', context);
-
-      if (addHelpers) {
-        helpersObject[name] = addHelpers();
-      }
-    }
-
-    return helpersObject;
-  }
-
-  /**
-   * Get all PM plugins defined in the extensions.
-   * And also keyboard shortcuts.
-   * @returns Array of PM plugins.
-   */
-  get plugins() {
-    const editor = this.editor;
-    const extensions = ExtensionService.sortByPriority([...this.extensions].reverse());
-
-    const inputRules = [];
-
-    const allPlugins = extensions
-      .map((extension) => {
-        const context = {
-          name: extension.name,
-          options: extension.options,
-          storage: extension.storage,
-          editor,
-          type: getSchemaTypeByName(extension.name, this.schema),
-        };
-
-        const plugins = [];
-
-        const addShortcuts = getExtensionConfigField(extension, 'addShortcuts', context);
-
-        let bindingsObject = {};
-
-        if (addShortcuts) {
-          const entries = Object.entries(addShortcuts()).map(([shortcut, method]) => {
-            return [shortcut, (...args) => method({ editor, keymapArgs: args })];
-          });
-          bindingsObject = { ...Object.fromEntries(entries) };
-        }
-
-        plugins.push(keymap(bindingsObject));
-
-        const addInputRules = getExtensionConfigField(extension, 'addInputRules', context);
-
-        if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
-          inputRules.push(...addInputRules());
-        }
-
-        const addPmPlugins = getExtensionConfigField(extension, 'addPmPlugins', context);
-
-        if (addPmPlugins) {
-          const pmPlugins = addPmPlugins();
-          plugins.push(...pmPlugins);
-        }
-
-        return plugins;
-      })
-      .flat();
-
-    return [
-      inputRulesPlugin({
-        editor,
-        rules: inputRules,
-      }),
-      ...allPlugins,
-    ];
-  }
-
-  /**
-   * Get all node views from the extensions.
-   * @returns An object with all node views.
-   */
-  get nodeViews() {
-    const { editor } = this;
-    const nodeExtensions = this.extensions.filter((e) => e.type === 'node');
-
-    const entries = nodeExtensions
-      .filter((extension) => !!getExtensionConfigField(extension, 'addNodeView'))
-      .map((extension) => {
-        const extensionAttrs = this.attributes.filter((a) => a.type === extension.name);
-        const context = {
-          name: extension.name,
-          options: extension.options,
-          storage: extension.storage,
-          editor,
-          type: getNodeType(extension.name, this.schema),
-        };
-
-        const addNodeView = getExtensionConfigField(extension, 'addNodeView', context);
-
-        if (!addNodeView) return null;
-
-        // Call addNodeView() to get the actual node view function
-        // It may return null in headless mode or other scenarios
-        const nodeViewFunction = addNodeView();
-
-        if (!nodeViewFunction) return null;
-
-        const nodeview = (node, _view, getPos, decorations) => {
-          const htmlAttributes = Attribute.getAttributesToRender(node, extensionAttrs);
-          return nodeViewFunction({
-            editor,
-            node,
-            getPos,
-            decorations,
-            htmlAttributes,
-            extension,
-            extensionAttrs,
-          });
-        };
-
-        return [extension.name, nodeview];
-      })
-      .filter(Boolean);
-
-    return Object.fromEntries(entries);
-  }
-
-  /**
-   * Install all extensions.
-   * Create extension storage in the editor, attach editor events.
-   */
-  #setupExtensions() {
-    for (const extension of this.extensions) {
-      this.editor.extensionStorage[extension.name] = extension.storage;
-
-      const context = {
-        name: extension.name,
-        options: extension.options,
-        storage: extension.storage,
-        editor: this.editor,
-        type: getSchemaTypeByName(extension.name, this.schema),
-      };
-
-      if (extension.type === 'mark') {
-        const keepOnSplit = callOrGet(getExtensionConfigField(extension, 'keepOnSplit', context)) ?? true;
-        if (keepOnSplit) {
-          this.splittableMarks.push(extension.name);
-        }
-      }
-
-      this.#attachEditorEvents(extension);
-    }
-  }
-
-  /**
-   * Attach editor events to extension
-   * if callbacks are defined in the extension config.
-   * @param extension Extension.
-   */
-  #attachEditorEvents(extension) {
-    const context = {
-      name: extension.name,
-      options: extension.options,
-      storage: extension.storage,
-      editor: this.editor,
-      type: getSchemaTypeByName(extension.name, this.schema),
-    };
-
-    const onBeforeCreate = getExtensionConfigField(extension, 'onBeforeCreate', context);
-    const onCreate = getExtensionConfigField(extension, 'onCreate', context);
-    const onUpdate = getExtensionConfigField(extension, 'onUpdate', context);
-    const onSelectionUpdate = getExtensionConfigField(extension, 'onSelectionUpdate', context);
-    const onTransaction = getExtensionConfigField(extension, 'onTransaction', context);
-    const onFocus = getExtensionConfigField(extension, 'onFocus', context);
-    const onBlur = getExtensionConfigField(extension, 'onBlur', context);
-    const onDestroy = getExtensionConfigField(extension, 'onDestroy', context);
-
-    if (onBeforeCreate) this.editor.on('beforeCreate', onBeforeCreate);
-    if (onCreate) this.editor.on('create', onCreate);
-    if (onUpdate) this.editor.on('update', onUpdate);
-    if (onSelectionUpdate) this.editor.on('selectionUpdate', onSelectionUpdate);
-    if (onTransaction) this.editor.on('transaction', onTransaction);
-    if (onFocus) this.editor.on('focus', onFocus);
-    if (onBlur) this.editor.on('blur', onBlur);
-    if (onDestroy) this.editor.on('destroy', onDestroy);
-  }
-}
diff --git a/packages/super-editor/src/core/ExtensionService.ts b/packages/super-editor/src/core/ExtensionService.ts
new file mode 100644
index 000000000..661aa251b
--- /dev/null
+++ b/packages/super-editor/src/core/ExtensionService.ts
@@ -0,0 +1,402 @@
+import { keymap } from 'prosemirror-keymap';
+import type { Plugin, Transaction } from 'prosemirror-state';
+import type { NodeType, Node as PmNode, Mark as PmMark, MarkType } from 'prosemirror-model';
+import { Schema } from './Schema.js';
+import { Attribute } from './Attribute.js';
+import { getNodeType } from './helpers/getNodeType.js';
+import { getExtensionConfigField } from './helpers/getExtensionConfigField.js';
+import { getSchemaTypeByName } from './helpers/getSchemaTypeByName.js';
+import { callOrGet } from './utilities/callOrGet.js';
+import { isExtensionRulesEnabled } from './helpers/isExtentionRulesEnabled.js';
+import { inputRulesPlugin, InputRule } from './InputRule.js';
+import type { Editor } from './Editor.js';
+import type { EditorExtension } from './types/EditorConfig.js';
+import type { Schema as PmSchema } from 'prosemirror-model';
+import type { EventCallback } from './EventEmitter.js';
+
+/**
+ * Extension context passed to extension configuration methods
+ */
+interface ExtensionContext {
+  name: string;
+  options: Record<string, unknown>;
+  storage: Record<string, unknown>;
+  editor: Editor;
+  type?: NodeType | MarkType | null;
+}
+
+/**
+ * Resolved extension with priority and external flag
+ * Extends EditorExtension to maintain type compatibility
+ */
+type ResolvedExtension = EditorExtension & {
+  isExternal?: boolean;
+};
+
+/**
+ * ExtensionService is the main class to work with extensions.
+ */
+export class ExtensionService {
+  editor: Editor;
+
+  schema: PmSchema;
+
+  extensions: ResolvedExtension[];
+
+  externalExtensions: ResolvedExtension[] = [];
+
+  splittableMarks: string[] = [];
+
+  constructor(extensions: EditorExtension[], userExtensions: EditorExtension[] | undefined, editor: Editor) {
+    this.editor = editor;
+
+    this.externalExtensions = userExtensions || [];
+
+    this.externalExtensions = this.externalExtensions.map((extension) => {
+      return {
+        ...extension,
+        isExternal: true,
+      };
+    });
+
+    this.extensions = ExtensionService.getResolvedExtensions([...extensions, ...this.externalExtensions]);
+    this.schema = Schema.createSchemaByExtensions(this.extensions, editor);
+    this.#setupExtensions();
+  }
+
+  /**
+   * Static method for creating ExtensionService.
+   * @param args Arguments for the constructor.
+   */
+  static create(
+    extensions: EditorExtension[],
+    userExtensions: EditorExtension[] | undefined,
+    editor: Editor,
+  ): ExtensionService {
+    return new ExtensionService(extensions, userExtensions, editor);
+  }
+
+  /**
+   * Get an array of resolved extensions (e.g. sorted by priority).
+   * @param extensions Array of extensions.
+   * @returns Array of resolved extensions.
+   */
+  static getResolvedExtensions(extensions: EditorExtension[]): ResolvedExtension[] {
+    const resolvedExtensions = ExtensionService.sortByPriority(extensions);
+    return resolvedExtensions;
+  }
+
+  /**
+   * Sort extensions by priority.
+   * @param extensions Array of extensions.
+   * @returns Array of sorted extensions by priority.
+   */
+  static sortByPriority(extensions: EditorExtension[]): ResolvedExtension[] {
+    const defaultValue = 100;
+    return extensions.sort((a, b) => {
+      const priorityA = getExtensionConfigField(a, 'priority') || defaultValue;
+      const priorityB = getExtensionConfigField(b, 'priority') || defaultValue;
+      if (priorityA > priorityB) return -1;
+      if (priorityA < priorityB) return 1;
+      return 0;
+    });
+  }
+
+  /**
+   * Get all attributes defined in the extensions.
+   * @returns Array of attributes.
+   */
+  get attributes(): ReturnType<typeof Attribute.getAttributesFromExtensions> {
+    return Attribute.getAttributesFromExtensions(
+      this.extensions as Array<{
+        type: string;
+        name: string;
+        options: Record<string, unknown>;
+        storage: Record<string, unknown>;
+        config: Record<string, unknown>;
+      }>,
+    );
+  }
+
+  /**
+   * Get all commands defined in the extensions.
+   * @returns Object with commands (key - command name, value - function).
+   */
+  get commands(): Record<string, (...args: unknown[]) => (props: unknown) => boolean> {
+    let commandsObject: Record<string, (...args: unknown[]) => (props: unknown) => boolean> = {};
+
+    for (const extension of this.extensions) {
+      const context: ExtensionContext = {
+        name: extension.name,
+        options: extension.options,
+        storage: extension.storage,
+        editor: this.editor,
+        type: getSchemaTypeByName(extension.name, this.schema),
+      };
+
+      const addCommands = getExtensionConfigField(extension, 'addCommands', context);
+      if (typeof addCommands === 'function') {
+        const commands = addCommands();
+        commandsObject = {
+          ...commandsObject,
+          ...(commands as Record<string, (...args: unknown[]) => (props: unknown) => boolean>),
+        };
+      }
+    }
+
+    return commandsObject;
+  }
+
+  /**
+   * Get all helper methods defined in the extensions.
+   * Each extension can define its own helper methods.
+   * Example: editor.helpers.linkedStyles.getStyles()
+   * @returns Object with helper methods for extensions.
+   */
+  get helpers(): Record<string, Record<string, unknown>> {
+    const helpersObject: Record<string, Record<string, unknown>> = {};
+
+    for (const extension of this.extensions) {
+      const name = extension.name;
+      if (!name) continue;
+
+      const context: ExtensionContext = {
+        name: extension.name,
+        options: extension.options,
+        storage: extension.storage,
+        editor: this.editor,
+        type: getSchemaTypeByName(extension.name, this.schema),
+      };
+
+      const addHelpers = getExtensionConfigField(extension, 'addHelpers', context);
+
+      if (typeof addHelpers === 'function') {
+        const helpers = addHelpers();
+        helpersObject[name] = helpers as Record<string, unknown>;
+      }
+    }
+
+    return helpersObject;
+  }
+
+  /**
+   * Get all PM plugins defined in the extensions.
+   * And also keyboard shortcuts.
+   * @returns Array of PM plugins.
+   */
+  get plugins(): Plugin[] {
+    const editor = this.editor;
+    const extensions = ExtensionService.sortByPriority([...this.extensions].reverse());
+
+    const inputRules: InputRule[] = [];
+
+    const allPlugins = extensions
+      .map((extension) => {
+        const context: ExtensionContext = {
+          name: extension.name,
+          options: extension.options,
+          storage: extension.storage,
+          editor,
+          type: getSchemaTypeByName(extension.name, this.schema),
+        };
+
+        const plugins: Plugin[] = [];
+
+        const addShortcuts = getExtensionConfigField(extension, 'addShortcuts', context);
+
+        const bindingsObject: Record<string, (...args: unknown[]) => boolean> = {};
+
+        if (typeof addShortcuts === 'function') {
+          const shortcuts = addShortcuts() as Record<
+            string,
+            (props: { editor: Editor; keymapArgs: unknown[] }) => boolean
+          >;
+          Object.entries(shortcuts).forEach(([shortcut, method]) => {
+            bindingsObject[shortcut] = (...args: unknown[]) => method({ editor, keymapArgs: args });
+          });
+        }
+
+        plugins.push(keymap(bindingsObject));
+
+        const addInputRules = getExtensionConfigField(extension, 'addInputRules', context);
+
+        if (
+          isExtensionRulesEnabled(extension, editor.options.enableInputRules ?? false) &&
+          typeof addInputRules === 'function'
+        ) {
+          const rules = addInputRules() as InputRule[];
+          inputRules.push(...rules);
+        }
+
+        const addPmPlugins = getExtensionConfigField(extension, 'addPmPlugins', context);
+
+        if (typeof addPmPlugins === 'function') {
+          const pmPlugins = addPmPlugins() as Plugin[];
+          plugins.push(...pmPlugins);
+        }
+
+        return plugins;
+      })
+      .flat();
+
+    return [
+      inputRulesPlugin({
+        editor,
+        rules: inputRules,
+      }),
+      ...allPlugins,
+    ];
+  }
+
+  /**
+   * Get all node views from the extensions.
+   * @returns An object with all node views.
+   */
+  get nodeViews(): Record<string, (node: unknown, view: unknown, getPos: unknown, decorations: unknown) => unknown> {
+    const { editor } = this;
+    const nodeExtensions = this.extensions.filter((e) => e.type === 'node');
+
+    const entries: Array<[string, (node: unknown, view: unknown, getPos: unknown, decorations: unknown) => unknown]> =
+      [];
+
+    for (const extension of nodeExtensions) {
+      const hasNodeView = getExtensionConfigField(extension, 'addNodeView');
+      if (!hasNodeView) continue;
+
+      const extensionAttrs = this.attributes.filter((a) => a.type === extension.name);
+      const context: ExtensionContext = {
+        name: extension.name,
+        options: extension.options,
+        storage: extension.storage,
+        editor,
+        type: getNodeType(extension.name, this.schema),
+      };
+
+      const addNodeView = getExtensionConfigField(extension, 'addNodeView', context);
+
+      if (typeof addNodeView !== 'function') continue;
+
+      // Call addNodeView() to get the actual node view function
+      // It may return null in headless mode or other scenarios
+      const nodeViewFunction = addNodeView() as
+        | ((props: {
+            editor: Editor;
+            node: unknown;
+            getPos: unknown;
+            decorations: unknown;
+            htmlAttributes: Record<string, unknown>;
+            extension: ResolvedExtension;
+            extensionAttrs: ReturnType<typeof Attribute.getAttributesFromExtensions>;
+          }) => unknown)
+        | null;
+
+      if (!nodeViewFunction) continue;
+
+      const nodeview = (node: unknown, _view: unknown, getPos: unknown, decorations: unknown) => {
+        const htmlAttributes = Attribute.getAttributesToRender(node as PmNode | PmMark, extensionAttrs);
+        return nodeViewFunction({
+          editor,
+          node,
+          getPos,
+          decorations,
+          htmlAttributes,
+          extension,
+          extensionAttrs,
+        });
+      };
+
+      entries.push([extension.name, nodeview]);
+    }
+
+    return Object.fromEntries(entries);
+  }
+
+  /**
+   * Install all extensions.
+   * Create extension storage in the editor, attach editor events.
+   */
+  #setupExtensions(): void {
+    for (const extension of this.extensions) {
+      this.editor.extensionStorage[extension.name] = extension.storage;
+
+      const context: ExtensionContext = {
+        name: extension.name,
+        options: extension.options,
+        storage: extension.storage,
+        editor: this.editor,
+        type: getSchemaTypeByName(extension.name, this.schema),
+      };
+
+      if (extension.type === 'mark') {
+        const keepOnSplitValue = callOrGet(getExtensionConfigField(extension, 'keepOnSplit', context));
+        const keepOnSplit = typeof keepOnSplitValue === 'boolean' ? keepOnSplitValue : true;
+        if (keepOnSplit) {
+          this.splittableMarks.push(extension.name);
+        }
+      }
+
+      this.#attachEditorEvents(extension);
+    }
+  }
+
+  /**
+   * Attach editor events to extension
+   * if callbacks are defined in the extension config.
+   * @param extension Extension.
+   */
+  #attachEditorEvents(extension: ResolvedExtension): void {
+    const context: ExtensionContext = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage,
+      editor: this.editor,
+      type: getSchemaTypeByName(extension.name, this.schema),
+    };
+
+    const onBeforeCreate = getExtensionConfigField(extension, 'onBeforeCreate', context);
+    const onCreate = getExtensionConfigField(extension, 'onCreate', context);
+    const onUpdate = getExtensionConfigField(extension, 'onUpdate', context);
+    const onSelectionUpdate = getExtensionConfigField(extension, 'onSelectionUpdate', context);
+    const onTransaction = getExtensionConfigField(extension, 'onTransaction', context);
+    const onFocus = getExtensionConfigField(extension, 'onFocus', context);
+    const onBlur = getExtensionConfigField(extension, 'onBlur', context);
+    const onDestroy = getExtensionConfigField(extension, 'onDestroy', context);
+
+    if (typeof onBeforeCreate === 'function') {
+      this.editor.on('beforeCreate', onBeforeCreate as EventCallback<[{ editor: Editor }]>);
+    }
+    if (typeof onCreate === 'function') {
+      this.editor.on('create', onCreate as EventCallback<[{ editor: Editor }]>);
+    }
+    if (typeof onUpdate === 'function') {
+      this.editor.on('update', onUpdate as EventCallback<[{ editor: Editor; transaction: Transaction }]>);
+    }
+    if (typeof onSelectionUpdate === 'function') {
+      this.editor.on(
+        'selectionUpdate',
+        onSelectionUpdate as EventCallback<[{ editor: Editor; transaction: Transaction }]>,
+      );
+    }
+    if (typeof onTransaction === 'function') {
+      this.editor.on(
+        'transaction',
+        onTransaction as EventCallback<[{ editor: Editor; transaction: Transaction; duration?: number }]>,
+      );
+    }
+    if (typeof onFocus === 'function') {
+      this.editor.on(
+        'focus',
+        onFocus as EventCallback<[{ editor: Editor; event: FocusEvent; transaction: Transaction }]>,
+      );
+    }
+    if (typeof onBlur === 'function') {
+      this.editor.on(
+        'blur',
+        onBlur as EventCallback<[{ editor: Editor; event: FocusEvent; transaction: Transaction }]>,
+      );
+    }
+    if (typeof onDestroy === 'function') {
+      this.editor.on('destroy', onDestroy as EventCallback<[]>);
+    }
+  }
+}
diff --git a/packages/super-editor/src/core/InputRule.js b/packages/super-editor/src/core/InputRule.ts
similarity index 52%
rename from packages/super-editor/src/core/InputRule.js
rename to packages/super-editor/src/core/InputRule.ts
index ef5da4bad..308479f00 100644
--- a/packages/super-editor/src/core/InputRule.js
+++ b/packages/super-editor/src/core/InputRule.ts
@@ -1,5 +1,8 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
-import { Fragment, DOMParser as PMDOMParser, Slice } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import { Slice, Fragment, DOMParser as PMDOMParser } from 'prosemirror-model';
+import type { ResolvedPos } from 'prosemirror-model';
 import { CommandService } from './CommandService.js';
 import { chainableEditorState } from './helpers/chainableEditorState.js';
 import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js';
@@ -8,20 +11,97 @@ import { isRegExp } from './utilities/isRegExp.js';
 import { handleDocxPaste, wrapTextsInRuns } from './inputRules/docx-paste/docx-paste.js';
 import { flattenListsInHtml } from './inputRules/html/html-helpers.js';
 import { handleGoogleDocsHtml } from './inputRules/google-docs-paste/google-docs-paste.js';
+import type { Editor } from './Editor.js';
+import type { ChainableCommandObject, CanObject, EditorCommands } from './types/ChainedCommands.js';
+
+/**
+ * Match result from input rule matching
+ */
+export interface InputRuleMatch extends Array<string> {
+  index?: number;
+  input?: string;
+  data?: unknown;
+  text?: string;
+  replaceWith?: string;
+}
+
+/**
+ * Input rule handler context
+ */
+export interface InputRuleHandlerContext {
+  state: EditorState;
+  range: {
+    from: number;
+    to: number;
+  };
+  match: InputRuleMatch;
+  commands: EditorCommands;
+  chain: () => ChainableCommandObject;
+  can: () => CanObject;
+}
+
+/**
+ * Input rule configuration
+ */
+export interface InputRuleConfig {
+  match: RegExp | ((text: string) => InputRuleMatch | null);
+  handler: (context: InputRuleHandlerContext) => unknown;
+}
+
+/**
+ * Input rules plugin configuration
+ */
+export interface InputRulesPluginConfig {
+  editor: Editor;
+  rules: InputRule[];
+}
+
+/**
+ * Run configuration for input rules
+ */
+interface RunConfig {
+  editor: Editor;
+  from: number;
+  to: number;
+  text: string;
+  rules: InputRule[];
+  plugin: Plugin;
+}
+
+/**
+ * Metadata stored in transaction when input rule is triggered
+ */
+interface InputRuleMeta {
+  transform: Transaction;
+  from: number;
+  to: number;
+  text: string;
+}
+
+/**
+ * Metadata for simulated input
+ */
+interface SimulatedInputMeta {
+  text: string | Fragment;
+  from: number;
+}
 
 export class InputRule {
-  match;
-  handler;
+  match: RegExp | ((text: string) => InputRuleMatch | null);
+  handler: (context: InputRuleHandlerContext) => unknown;
 
-  constructor(config) {
+  constructor(config: InputRuleConfig) {
     this.match = config.match;
     this.handler = config.handler;
   }
 }
 
-const inputRuleMatcherHandler = (text, match) => {
+const inputRuleMatcherHandler = (
+  text: string,
+  match: RegExp | ((text: string) => InputRuleMatch | null),
+): InputRuleMatch | null => {
   if (isRegExp(match)) {
-    return match.exec(text);
+    return match.exec(text) as InputRuleMatch | null;
   }
 
   const inputRuleMatch = match(text);
@@ -30,14 +110,15 @@ const inputRuleMatcherHandler = (text, match) => {
     return null;
   }
 
-  const result = [inputRuleMatch.text];
+  const matchedText = inputRuleMatch.text ?? inputRuleMatch.input ?? '';
+  const result: InputRuleMatch = [matchedText] as InputRuleMatch;
 
   result.index = inputRuleMatch.index;
   result.input = text;
   result.data = inputRuleMatch.data;
 
   if (inputRuleMatch.replaceWith) {
-    if (!inputRuleMatch.text.includes(inputRuleMatch.replaceWith)) {
+    if (matchedText && !matchedText.includes(inputRuleMatch.replaceWith)) {
       console.warn('[super-editor warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".');
     }
 
@@ -47,7 +128,7 @@ const inputRuleMatcherHandler = (text, match) => {
   return result;
 };
 
-const run = (config) => {
+const run = (config: RunConfig): boolean => {
   const { editor, from, to, text, rules, plugin } = config;
   const { view } = editor;
 
@@ -87,7 +168,6 @@ const run = (config) => {
 
     const { commands, chain, can } = new CommandService({
       editor,
-      state,
     });
 
     const handler = rule.handler({
@@ -111,7 +191,7 @@ const run = (config) => {
       from,
       to,
       text,
-    });
+    } as InputRuleMeta);
 
     view.dispatch(tr);
     matched = true;
@@ -122,27 +202,27 @@ const run = (config) => {
 
 /**
  * Create an input rules plugin. When enabled, it will cause text
- * input that matches any of the given rules to trigger the rule’s
+ * input that matches any of the given rules to trigger the rule's
  * action.
  */
-export const inputRulesPlugin = ({ editor, rules }) => {
-  const plugin = new Plugin({
+export const inputRulesPlugin = ({ editor, rules }: InputRulesPluginConfig): Plugin => {
+  const plugin: Plugin = new Plugin({
     key: new PluginKey('inputRulesPlugin'),
 
     state: {
-      init() {
+      init(): InputRuleMeta | null {
         return null;
       },
 
-      apply(tr, prev, state) {
-        const stored = tr.getMeta(plugin);
+      apply(tr: Transaction, prev: InputRuleMeta | null, _oldState: EditorState): InputRuleMeta | null {
+        const stored = tr.getMeta(plugin) as InputRuleMeta | undefined;
 
         if (stored) {
           return stored;
         }
 
         // if InputRule is triggered by insertContent()
-        const simulatedInputMeta = tr.getMeta('applyInputRules');
+        const simulatedInputMeta = tr.getMeta('applyInputRules') as SimulatedInputMeta | undefined;
         const isSimulatedInput = !!simulatedInputMeta;
 
         if (isSimulatedInput) {
@@ -150,17 +230,17 @@ export const inputRulesPlugin = ({ editor, rules }) => {
             let { text } = simulatedInputMeta;
 
             if (typeof text !== 'string') {
-              text = getHTMLFromFragment(Fragment.from(text), state.schema);
+              text = getHTMLFromFragment(Fragment.from(text), _oldState.schema);
             }
 
             const { from } = simulatedInputMeta;
-            const to = from + text.length;
+            const to = from + (text as string).length;
 
             run({
               editor,
               from,
               to,
-              text,
+              text: text as string,
               rules,
               plugin,
             });
@@ -172,7 +252,7 @@ export const inputRulesPlugin = ({ editor, rules }) => {
     },
 
     props: {
-      handleTextInput(view, from, to, text) {
+      handleTextInput(view: EditorView, from: number, to: number, text: string): boolean {
         return run({
           editor,
           from,
@@ -185,12 +265,12 @@ export const inputRulesPlugin = ({ editor, rules }) => {
 
       // add support for input rules to trigger on enter
       // this is useful for example for code blocks
-      handleKeyDown(view, event) {
+      handleKeyDown(view: EditorView, event: KeyboardEvent): boolean {
         if (event.key !== 'Enter') {
           return false;
         }
 
-        const { $cursor } = view.state.selection;
+        const { $cursor } = view.state.selection as { $cursor?: ReturnType<typeof view.state.doc.resolve> };
 
         if ($cursor) {
           return run({
@@ -207,9 +287,9 @@ export const inputRulesPlugin = ({ editor, rules }) => {
       },
 
       // Paste handler
-      handlePaste(view, event, slice) {
+      handlePaste(view: EditorView, event: ClipboardEvent, slice: Slice): boolean {
         const clipboard = event.clipboardData;
-        const html = clipboard.getData('text/html');
+        const html = clipboard?.getData('text/html') || '';
 
         // Allow specialised plugins (e.g., field-annotation) first shot.
         const fieldAnnotationContent = slice.content.content.filter((item) => item.type.name === 'fieldAnnotation');
@@ -227,13 +307,13 @@ export const inputRulesPlugin = ({ editor, rules }) => {
   return plugin;
 };
 
-export function isWordHtml(html) {
+export function isWordHtml(html: string): boolean {
   return /class=["']?Mso|xmlns:o=["']?urn:schemas-microsoft-com|<!--\[if gte mso|<meta[^>]+name=["']?Generator["']?[^>]+Word/i.test(
     html,
   );
 }
 
-function isGoogleDocsHtml(html) {
+function isGoogleDocsHtml(html: string): boolean {
   return /docs-internal-guid-/.test(html);
 }
 
@@ -243,7 +323,7 @@ function isGoogleDocsHtml(html) {
  * @param {ResolvedPos} $from The resolved position to search from.
  * @returns {{ node: Node | null, depth: number }} The paragraph node and its depth, or null if not found.
  */
-function findParagraphAncestor($from) {
+function findParagraphAncestor($from: ResolvedPos) {
   for (let d = $from.depth; d >= 0; d--) {
     const node = $from.node(d);
     if (node.type.name === 'paragraph') {
@@ -256,15 +336,13 @@ function findParagraphAncestor($from) {
 /**
  * Handle HTML paste events.
  *
- * @param {String} html The HTML string to be pasted.
- * @param {Editor} editor The editor instance.
- * @param {String} source HTML content source
- * @returns {Boolean} Returns true if the paste was handled.
+ * @param html The HTML string to be pasted.
+ * @param editor The editor instance.
+ * @param source HTML content source
+ * @returns Returns true if the paste was handled.
  */
-export function handleHtmlPaste(html, editor, source) {
-  let cleanedHtml;
-  if (source === 'google-docs') cleanedHtml = handleGoogleDocsHtml(html, editor);
-  else cleanedHtml = htmlHandler(html, editor);
+export function handleHtmlPaste(html: string, editor: Editor, _source?: string): boolean {
+  const cleanedHtml = htmlHandler(html, editor);
 
   let doc = PMDOMParser.fromSchema(editor.schema).parse(cleanedHtml);
 
@@ -285,12 +363,13 @@ export function handleHtmlPaste(html, editor, source) {
   const isInParagraph = paragraphNode !== null;
 
   // Check if the pasted content is a single paragraph
-  const isSingleParagraph = doc.childCount === 1 && doc.firstChild.type.name === 'paragraph';
+  const isSingleParagraph = doc.childCount === 1 && doc.firstChild?.type.name === 'paragraph';
 
   if (isInParagraph && isSingleParagraph) {
     // Extract the contents of the paragraph and paste only those
-    const paragraphContent = doc.firstChild.content;
-    const tr = state.tr.replaceSelectionWith(paragraphContent, false);
+    const paragraphContent = doc.firstChild!.content;
+    // Use replaceSelection instead of replaceSelectionWith for fragments
+    const tr = state.tr.replaceSelection(new Slice(paragraphContent, 0, 0));
     dispatch(tr);
   } else if (isInParagraph) {
     // For multi-paragraph paste, use replaceSelection with a proper Slice
@@ -307,15 +386,16 @@ export function handleHtmlPaste(html, editor, source) {
 
   return true;
 }
+
 /**
  * Handle HTML content before it is inserted into the editor.
  * This function is used to clean and sanitize HTML content,
  * converting em units to pt and removing unnecessary tags.
- * @param {String} html The HTML string to be processed.
- * @param {Editor} editor The editor instance.
- * @returns {DocumentFragment} The processed HTML string.
+ * @param html The HTML string to be processed.
+ * @param editor The editor instance.
+ * @returns The processed HTML string.
  */
-export function htmlHandler(html, editor) {
+export function htmlHandler(html: string, editor: Editor): DocumentFragment {
   const flatHtml = flattenListsInHtml(html, editor);
   const htmlWithPtSizing = convertEmToPt(flatHtml);
   return sanitizeHtml(htmlWithPtSizing);
@@ -324,11 +404,11 @@ export function htmlHandler(html, editor) {
 /**
  * Process the HTML string to convert em units to pt units in font-size
  *
- * @param {String} html The HTML string to be processed.
- * @returns {String} The processed HTML string with em units converted to pt units.
+ * @param html The HTML string to be processed.
+ * @returns The processed HTML string with em units converted to pt units.
  */
-export const convertEmToPt = (html) => {
-  return html.replace(/font-size\s*:\s*([\d.]+)em/gi, (_, emValue) => {
+export const convertEmToPt = (html: string): string => {
+  return html.replace(/font-size\s*:\s*([\d.]+)em/gi, (_match, emValue: string) => {
     const em = parseFloat(emValue);
     const pt = Math.round(em * 12 * 100) / 100; // e.g. 1.5×12 = 18.00
     return `font-size: ${pt}pt`;
@@ -338,10 +418,10 @@ export const convertEmToPt = (html) => {
 /**
  *  Cleans and sanitizes HTML content by removing unnecessary tags, entities, and extra whitespace.
  *
- * @param {String} html The HTML string to be processed.
- * @returns {String} The processed HTML string with em units converted to pt units.
+ * @param html The HTML string to be processed.
+ * @returns The processed HTML string with em units converted to pt units.
  */
-export function cleanHtmlUnnecessaryTags(html) {
+export function cleanHtmlUnnecessaryTags(html: string): string {
   return html
     .replace(/<o:p>.*?<\/o:p>/gi, '')
     .replace(/&nbsp;/gi, ' ')
@@ -351,25 +431,105 @@ export function cleanHtmlUnnecessaryTags(html) {
 }
 
 /**
- * Recursive function to sanitize HTML and remove forbidden tags.
- * @param {string} html The HTML string to be sanitized.
- * @param {string[]} forbiddenTags The list of forbidden tags to remove from the HTML.
- * @returns {DocumentFragment} The sanitized HTML as a DocumentFragment.
+ * Default forbidden tags that will be removed during sanitization.
+ * Includes script execution, embedding, and form-related elements.
+ */
+const DEFAULT_FORBIDDEN_TAGS = [
+  'script',
+  'style',
+  'meta',
+  'link',
+  'base',
+  'svg',
+  'math',
+  'iframe',
+  'frame',
+  'frameset',
+  'object',
+  'embed',
+  'applet',
+  'form',
+  'input',
+  'textarea',
+  'select',
+  'button',
+  'template',
+  'noscript',
+  'plaintext',
+  'xmp',
+];
+
+/**
+ * URL protocols that are considered dangerous and will be removed.
  */
-export function sanitizeHtml(html, forbiddenTags = ['meta', 'svg', 'script', 'style', 'button']) {
+const DANGEROUS_URL_PATTERN = /^\s*(javascript|vbscript|data):/i;
+
+/**
+ * Attributes that can contain URLs and need to be checked for dangerous protocols.
+ */
+const URL_ATTRIBUTES = ['href', 'src', 'action', 'formaction', 'xlink:href', 'poster', 'background'];
+
+/**
+ * Checks if an attribute name is an event handler (starts with "on").
+ */
+function isEventHandler(attrName: string): boolean {
+  return attrName.toLowerCase().startsWith('on');
+}
+
+/**
+ * Checks if a URL value contains a dangerous protocol.
+ */
+function hasDangerousUrl(value: string): boolean {
+  return DANGEROUS_URL_PATTERN.test(value);
+}
+
+/**
+ * Sanitizes HTML to prevent XSS attacks by removing forbidden tags,
+ * event handler attributes, and dangerous URL protocols.
+ * @param html The HTML string to be sanitized.
+ * @param forbiddenTags The list of forbidden tags to remove from the HTML.
+ * @returns The sanitized HTML as a DocumentFragment.
+ */
+export function sanitizeHtml(html: string, forbiddenTags: string[] = DEFAULT_FORBIDDEN_TAGS): DocumentFragment {
   const container = document.createElement('div');
   container.innerHTML = html;
 
-  const walkAndClean = (node) => {
-    for (const child of [...node.children]) {
-      if (forbiddenTags.includes(child.tagName.toLowerCase())) {
+  const walkAndClean = (node: Element): void => {
+    const children = Array.from(node.children);
+    for (const child of children) {
+      const tagName = child.tagName.toLowerCase();
+
+      // Remove forbidden tags entirely
+      if (forbiddenTags.includes(tagName)) {
         child.remove();
         continue;
       }
 
-      // Remove linebreaktype here - we don't want it when pasting HTML
-      if (child.hasAttribute('linebreaktype')) {
-        child.removeAttribute('linebreaktype');
+      // Remove dangerous attributes
+      const attrsToRemove: string[] = [];
+      for (const attr of Array.from(child.attributes)) {
+        const attrName = attr.name.toLowerCase();
+
+        // Remove event handlers (onclick, onerror, onload, etc.)
+        if (isEventHandler(attrName)) {
+          attrsToRemove.push(attr.name);
+          continue;
+        }
+
+        // Remove dangerous URL protocols from URL attributes
+        if (URL_ATTRIBUTES.includes(attrName) && hasDangerousUrl(attr.value)) {
+          attrsToRemove.push(attr.name);
+          continue;
+        }
+
+        // Remove linebreaktype - we don't want it when pasting HTML
+        if (attrName === 'linebreaktype') {
+          attrsToRemove.push(attr.name);
+        }
+      }
+
+      for (const attrName of attrsToRemove) {
+        child.removeAttribute(attrName);
       }
 
       walkAndClean(child);
@@ -377,7 +537,7 @@ export function sanitizeHtml(html, forbiddenTags = ['meta', 'svg', 'script', 'st
   };
 
   walkAndClean(container);
-  return container;
+  return container as unknown as DocumentFragment;
 }
 
 /**
@@ -386,14 +546,14 @@ export function sanitizeHtml(html, forbiddenTags = ['meta', 'svg', 'script', 'st
  * (e.g. slash-menu items) to invoke the same paste logic without duplicating
  * code.
  *
- * @param {Object}   params
- * @param {Editor}   params.editor  The SuperEditor instance.
- * @param {View}     params.view    The ProseMirror view associated with the editor.
- * @param {String}   html           HTML clipboard content (may be empty).
- * @returns {Boolean}               Whether the paste was handled.
+ * @param params
+ * @param params.editor  The SuperEditor instance.
+ * @param params.view    The ProseMirror view associated with the editor.
+ * @param html           HTML clipboard content (may be empty).
+ * @returns              Whether the paste was handled.
  */
-export function handleClipboardPaste({ editor, view }, html) {
-  let source;
+export function handleClipboardPaste({ editor, view }: { editor: Editor; view: EditorView }, html: string): boolean {
+  let source: string;
 
   if (!html) {
     source = 'plain-text';
diff --git a/packages/super-editor/src/core/Mark.ts b/packages/super-editor/src/core/Mark.ts
index b2494ce07..beac5515b 100644
--- a/packages/super-editor/src/core/Mark.ts
+++ b/packages/super-editor/src/core/Mark.ts
@@ -1,11 +1,12 @@
 import { getExtensionConfigField } from './helpers/getExtensionConfigField.js';
 import { callOrGet } from './utilities/callOrGet.js';
 import type { MaybeGetter } from './utilities/callOrGet.js';
+import type { Editor } from './Editor.js';
 
 /**
  * Configuration for Mark extensions.
  */
-export interface MarkConfig<
+interface MarkConfigBase<
   Options extends Record<string, unknown> = Record<string, never>,
   Storage extends Record<string, unknown> = Record<string, never>,
 > {
@@ -25,6 +26,14 @@ export interface MarkConfig<
   [key: string]: unknown;
 }
 
+/**
+ * Mark configuration with typed `this` context for mark instance access.
+ */
+export type MarkConfig<
+  Options extends Record<string, unknown> = Record<string, never>,
+  Storage extends Record<string, unknown> = Record<string, never>,
+> = MarkConfigBase<Options, Storage> & ThisType<Mark<Options, Storage>>;
+
 /**
  * Mark class is used to create Mark extensions.
  * @template Options - Type for mark options
@@ -42,6 +51,9 @@ export class Mark<
 
   storage: Storage;
 
+  // Editor instance is injected by the ExtensionService at runtime.
+  editor: Editor | undefined;
+
   isExternal: boolean;
 
   config: MarkConfig<Options, Storage>;
diff --git a/packages/super-editor/src/core/Node.ts b/packages/super-editor/src/core/Node.ts
index 00dafcf3d..7acc7070f 100644
--- a/packages/super-editor/src/core/Node.ts
+++ b/packages/super-editor/src/core/Node.ts
@@ -3,16 +3,19 @@ import { callOrGet } from './utilities/callOrGet.js';
 import type { MaybeGetter } from './utilities/callOrGet.js';
 import type { NodeType, ParseRule, DOMOutputSpec, Node as PmNode } from 'prosemirror-model';
 import type { Plugin } from 'prosemirror-state';
-import type { NodeView, EditorView, Decoration, DecorationSource } from 'prosemirror-view';
 import type { InputRule } from './InputRule.js';
 import type { Editor } from './Editor.js';
-import type { Command } from './types/ChainedCommands.js';
 import type { AttributeSpec } from './Attribute.js';
 
+export interface RenderNodeContext {
+  node: PmNode;
+  htmlAttributes: Record<string, unknown>;
+}
+
 /**
  * Configuration for Node extensions.
  */
-export interface NodeConfig<
+interface NodeConfigBase<
   Options extends Record<string, unknown> = Record<string, never>,
   Storage extends Record<string, unknown> = Record<string, never>,
 > {
@@ -44,7 +47,7 @@ export interface NodeConfig<
   tableRole?: string;
 
   /** ProseMirror string for what content this node accepts */
-  content?: MaybeGetter<string, []>;
+  content?: MaybeGetter<string>;
 
   /** The marks applied to this node */
   marks?: string;
@@ -65,7 +68,7 @@ export interface NodeConfig<
   parseDOM?: MaybeGetter<ParseRule[]>;
 
   /** The DOM rendering function - returns a DOMOutputSpec (allows mutable arrays for JS compatibility) */
-  renderDOM?: MaybeGetter<DOMOutputSpec>;
+  renderDOM?: DOMOutputSpec | ((context: RenderNodeContext) => DOMOutputSpec) | unknown;
 
   /** Function or object to add options to the node */
   addOptions?: MaybeGetter<Options>;
@@ -77,27 +80,19 @@ export interface NodeConfig<
   addAttributes?: MaybeGetter<Record<string, Partial<AttributeSpec>>>;
 
   /** Function or object to add commands to the node */
-  addCommands?: MaybeGetter<Record<string, Command>>;
+  addCommands?: MaybeGetter<Record<string, (...args: unknown[]) => unknown>>;
 
   /** Function or object to add helpers to the node */
   addHelpers?: MaybeGetter<Record<string, (...args: unknown[]) => unknown>>;
 
   /** Function or object to add shortcuts to the node */
-  addShortcuts?: MaybeGetter<Record<string, Command>>;
+  addShortcuts?: MaybeGetter<Record<string, (...args: unknown[]) => unknown>>;
 
   /** Function or object to add input rules to the node */
   addInputRules?: MaybeGetter<InputRule[]>;
 
   /** Function to add a custom node view to the node */
-  addNodeView?: MaybeGetter<
-    (props: {
-      node: PmNode;
-      view: EditorView;
-      getPos: () => number | undefined;
-      decorations: readonly Decoration[];
-      innerDecorations: DecorationSource;
-    }) => NodeView | null
-  >;
+  addNodeView?: MaybeGetter<(...args: unknown[]) => unknown>;
 
   /** Function to add ProseMirror plugins to the node */
   addPmPlugins?: MaybeGetter<Plugin[]>;
@@ -109,6 +104,15 @@ export interface NodeConfig<
   [key: string]: unknown;
 }
 
+/**
+ * Node configuration with a typed `this` context that points to the Node
+ * instance so config callbacks can access `this.editor`, `this.options`, etc.
+ */
+export type NodeConfig<
+  Options extends Record<string, unknown> = Record<string, never>,
+  Storage extends Record<string, unknown> = Record<string, never>,
+> = NodeConfigBase<Options, Storage> & ThisType<Node<Options, Storage>>;
+
 /**
  * Node class is used to create Node extensions.
  * @template Options - Type for node options
diff --git a/packages/super-editor/src/core/PresentationEditor.test.ts b/packages/super-editor/src/core/PresentationEditor.test.ts
index 06b0cb9ce..95673d9d5 100644
--- a/packages/super-editor/src/core/PresentationEditor.test.ts
+++ b/packages/super-editor/src/core/PresentationEditor.test.ts
@@ -1202,7 +1202,7 @@ describe('PresentationEditor', () => {
         documentId: 'test-doc',
       });
 
-      const mockEditorInstance = (Editor as unknown as MockedEditor).mock.results[
+      const _mockEditorInstance = (Editor as unknown as MockedEditor).mock.results[
         (Editor as unknown as MockedEditor).mock.results.length - 1
       ].value;
 
@@ -1263,7 +1263,7 @@ describe('PresentationEditor', () => {
         documentId: 'test-doc',
       });
 
-      const mockEditorInstance = (Editor as unknown as MockedEditor).mock.results[
+      const _mockEditorInstance = (Editor as unknown as MockedEditor).mock.results[
         (Editor as unknown as MockedEditor).mock.results.length - 1
       ].value;
 
@@ -1941,6 +1941,7 @@ describe('PresentationEditor', () => {
     let consoleErrorSpy: ReturnType<typeof vi.spyOn> | undefined;
 
     beforeEach(() => {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function -- Intentional no-op to suppress console errors in tests
       consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     });
 
@@ -2142,7 +2143,7 @@ describe('PresentationEditor', () => {
 
           // Call twice
           handler();
-          const firstCallCount = mockAwareness.on.mock.calls.length;
+          const _firstCallCount = mockAwareness.on.mock.calls.length;
 
           // Reset mock to detect second subscription
           mockAwareness.on.mockClear();
diff --git a/packages/super-editor/src/core/PresentationEditor.ts b/packages/super-editor/src/core/PresentationEditor.ts
index 85740c31e..4d4239110 100644
--- a/packages/super-editor/src/core/PresentationEditor.ts
+++ b/packages/super-editor/src/core/PresentationEditor.ts
@@ -58,7 +58,6 @@ import type {
   TableBlock,
   TableMeasure,
 } from '@superdoc/contracts';
-import { extractHeaderFooterSpace } from '@superdoc/contracts';
 import { TrackChangesBasePluginKey } from '@extensions/track-changes/plugins/index.js';
 
 // Comment and tracked change mark names (inline to avoid missing declaration files)
@@ -223,15 +222,17 @@ export type PresenceOptions = {
  * Used to access converter-specific properties for header/footer management
  * without resorting to type assertions throughout the codebase.
  */
-interface EditorWithConverter extends Editor {
-  converter: Editor['converter'] & {
-    pageStyles?: { alternateHeaders?: boolean };
-    headerIds?: { default?: string; first?: string; even?: string; odd?: string };
-    footerIds?: { default?: string; first?: string; even?: string; odd?: string };
-    createDefaultHeader?: (variant: string) => string;
-    createDefaultFooter?: (variant: string) => string;
-  };
-}
+type ConverterLike = {
+  pageStyles?: { alternateHeaders?: boolean };
+  headerIds?: { default?: string; first?: string; even?: string; odd?: string };
+  footerIds?: { default?: string; first?: string; even?: string; odd?: string };
+  createDefaultHeader?: (variant: string) => string;
+  createDefaultFooter?: (variant: string) => string;
+};
+
+type EditorWithConverter = {
+  converter?: ConverterLike;
+};
 
 export type LayoutEngineOptions = {
   pageSize?: PageSize;
@@ -1361,7 +1362,6 @@ export class PresentationEditor extends EventEmitter {
       }
     }
     const layoutCaretStart = this.#computeCaretLayoutRectGeometry(start, false);
-    const layoutCaretEnd = this.#computeCaretLayoutRectGeometry(end, false);
     const pageDelta: Record<number, { dx: number; dy: number }> = {};
     if (domCaretStart && layoutCaretStart && domCaretStart.pageIndex === layoutCaretStart.pageIndex) {
       pageDelta[domCaretStart.pageIndex] = {
@@ -2332,7 +2332,8 @@ export class PresentationEditor extends EventEmitter {
     const states = provider.awareness?.getStates();
     const normalized = new Map<number, RemoteCursorState>();
 
-    states?.forEach((aw, clientId) => {
+    states?.forEach((awRaw, clientId) => {
+      const aw = awRaw as AwarenessState;
       // Skip local client
       if (clientId === provider.awareness?.clientID) return;
 
@@ -2663,8 +2664,6 @@ export class PresentationEditor extends EventEmitter {
     // Use existing geometry helper to get caret layout rect
     const caretLayout = this.#computeCaretLayoutRect(cursor.head);
 
-    // Use effective zoom from actual rendered dimensions for consistent scaling
-    const zoom = this.#layoutOptions.zoom ?? 1;
     const doc = this.#visibleHost.ownerDocument ?? document;
     const color = this.#getValidatedColor(cursor);
 
@@ -2878,7 +2877,7 @@ export class PresentationEditor extends EventEmitter {
 
     // Set up drag handler on the painter host (where layout engine renders)
     this.#dragHandlerCleanup = createDragHandler(this.#painterHost, {
-      onDragOver: (event) => {
+      onDragOver: (event: DropEvent) => {
         if (!event.hasFieldAnnotation || event.event.clientX === 0) {
           return;
         }
@@ -5173,7 +5172,7 @@ export class PresentationEditor extends EventEmitter {
       }
     }
 
-    return (pageNumber, pageMargins, page) => {
+    return (pageNumber: number, pageMargins: PageMargins, page: Page | null | undefined) => {
       const sectionIndex = page?.sectionIndex ?? 0;
       const firstPageInSection = sectionFirstPageNumbers.get(sectionIndex);
       const sectionPageNumber =
@@ -5423,7 +5422,7 @@ export class PresentationEditor extends EventEmitter {
       }
     }
 
-    layout.pages.forEach((page, pageIndex) => {
+    layout.pages.forEach((page: Page, pageIndex: number) => {
       const margins = page.margins ?? this.#layoutOptions.margins ?? DEFAULT_MARGINS;
       const actualPageHeight = page.size?.h ?? pageHeight;
 
@@ -6388,8 +6387,8 @@ export class PresentationEditor extends EventEmitter {
 
     // Find table fragments on all pages
     const tableFragments: Array<{ fragment: TableFragment; pageIndex: number }> = [];
-    layout.pages.forEach((page, pageIndex) => {
-      page.fragments.forEach((fragment) => {
+    layout.pages.forEach((page: Page, pageIndex: number) => {
+      page.fragments.forEach((fragment: Fragment) => {
         if (fragment.kind === 'table' && fragment.blockId === tableBlock.id) {
           tableFragments.push({ fragment: fragment as TableFragment, pageIndex });
         }
@@ -6458,7 +6457,7 @@ export class PresentationEditor extends EventEmitter {
         }
 
         // Find column boundary
-        const colBoundary = columnBoundaries.find((cb) => cb.index === col);
+        const colBoundary = columnBoundaries.find((cb: { index: number; width: number }) => cb.index === col);
         if (!colBoundary) {
           continue;
         }
@@ -6467,7 +6466,9 @@ export class PresentationEditor extends EventEmitter {
         let cellWidth = colBoundary.width;
         if (colspan > 1) {
           for (let c = 1; c < colspan; c++) {
-            const nextColBoundary = columnBoundaries.find((cb) => cb.index === col + c);
+            const nextColBoundary = columnBoundaries.find(
+              (cb: { index: number; width: number }) => cb.index === col + c,
+            );
             if (nextColBoundary) {
               cellWidth += nextColBoundary.width;
             }
@@ -6977,10 +6978,6 @@ export class PresentationEditor extends EventEmitter {
    * ```
    */
   #computeDomCaretPageLocal(pos: number): { pageIndex: number; x: number; y: number } | null {
-    const pageEl = this.#viewportHost.querySelector(`.superdoc-page span[data-pm-start][data-pm-end]`)
-      ? (this.#viewportHost.querySelector(`.superdoc-page`) as HTMLElement | null)
-      : null;
-
     // Narrow search to matching page if possible
     const spans = Array.from(this.#viewportHost.querySelectorAll('span[data-pm-start][data-pm-end]')) as HTMLElement[];
     let targetSpan: HTMLElement | null = null;
@@ -7006,11 +7003,12 @@ export class PresentationEditor extends EventEmitter {
         y: (spanRect.top - pageRect.top) / zoom,
       };
     }
+    const text = textNode as Text;
     const pmStart = Number(targetSpan.dataset.pmStart ?? 'NaN');
-    const charIndex = Math.min(pos - pmStart, (textNode as Text).length);
+    const charIndex = Math.min(pos - pmStart, text.length);
     const range = document.createRange();
-    range.setStart(textNode, Math.max(0, charIndex));
-    range.setEnd(textNode, Math.max(0, charIndex));
+    range.setStart(text, Math.max(0, charIndex));
+    range.setEnd(text, Math.max(0, charIndex));
     const rangeRect = range.getBoundingClientRect();
     const lineEl = targetSpan.closest('.superdoc-line') as HTMLElement | null;
     const lineRect = lineEl?.getBoundingClientRect() ?? rangeRect;
@@ -7186,8 +7184,8 @@ export class PresentationEditor extends EventEmitter {
 
       let domCaretX: number | null = null;
       let domCaretY: number | null = null;
-      const spanEls = pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]');
-      for (const spanEl of Array.from(spanEls ?? [])) {
+      const spanEls = Array.from(pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]') ?? []);
+      for (const spanEl of spanEls) {
         const pmStart = Number((spanEl as HTMLElement).dataset.pmStart);
         const pmEnd = Number((spanEl as HTMLElement).dataset.pmEnd);
         if (pos >= pmStart && pos <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
@@ -7249,8 +7247,8 @@ export class PresentationEditor extends EventEmitter {
     // Find span containing this pos and measure actual DOM position
     let domCaretX: number | null = null;
     let domCaretY: number | null = null;
-    const spanEls = pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]');
-    for (const spanEl of Array.from(spanEls ?? [])) {
+    const spanEls = Array.from(pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]') ?? []);
+    for (const spanEl of spanEls) {
       const pmStart = Number((spanEl as HTMLElement).dataset.pmStart);
       const pmEnd = Number((spanEl as HTMLElement).dataset.pmEnd);
       if (pos >= pmStart && pos <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
diff --git a/packages/super-editor/src/core/Schema.js b/packages/super-editor/src/core/Schema.ts
similarity index 62%
rename from packages/super-editor/src/core/Schema.js
rename to packages/super-editor/src/core/Schema.ts
index fce70131c..3778e60da 100644
--- a/packages/super-editor/src/core/Schema.js
+++ b/packages/super-editor/src/core/Schema.ts
@@ -1,8 +1,52 @@
 import { Schema as PmSchema } from 'prosemirror-model';
+import type {
+  NodeSpec,
+  MarkSpec,
+  Node as PmNode,
+  Mark as PmMark,
+  DOMOutputSpec,
+  ParseRule as PmParseRule,
+} from 'prosemirror-model';
 import { Attribute } from './Attribute.js';
+import type { ExtensionAttribute } from './Attribute.js';
 import { getExtensionConfigField } from './helpers/getExtensionConfigField.js';
 import { cleanSchemaItem } from './helpers/cleanSchemaItem.js';
 import { callOrGet } from './utilities/callOrGet.js';
+import type { Editor } from './Editor.js';
+import type { EditorExtension } from './types/EditorConfig.js';
+
+/**
+ * Extension context passed to schema configuration methods
+ */
+interface SchemaContext {
+  name: string;
+  options: Record<string, unknown>;
+  storage: Record<string, unknown>;
+  editor: Editor;
+}
+
+/**
+ * Render DOM context for nodes
+ */
+interface RenderDOMContext {
+  node: PmNode;
+  htmlAttributes: Record<string, unknown>;
+}
+
+/**
+ * Render DOM context for marks
+ */
+interface RenderMarkDOMContext {
+  mark: PmMark;
+  htmlAttributes: Record<string, unknown>;
+}
+
+/**
+ * Node schema with OOXML metadata
+ */
+interface NodeSchemaWithMetadata extends NodeSpec {
+  validChildren?: (() => string[]) | string[];
+}
 
 /**
  * Schema class is used to create and work with schema.
@@ -14,12 +58,20 @@ export class Schema {
    * @param editor Editor instance.
    * @returns PM schema
    */
-  static createSchemaByExtensions(extensions, editor) {
+  static createSchemaByExtensions(extensions: EditorExtension[], editor: Editor): PmSchema {
     const nodeExtensions = extensions.filter((e) => e.type === 'node');
     const markExtensions = extensions.filter((e) => e.type === 'mark');
     const topNode = nodeExtensions.find((e) => getExtensionConfigField(e, 'topNode'))?.name;
 
-    const attributes = Attribute.getAttributesFromExtensions(extensions);
+    const attributes = Attribute.getAttributesFromExtensions(
+      extensions as unknown as Array<{
+        type: string;
+        name: string;
+        options: Record<string, unknown>;
+        storage: Record<string, unknown>;
+        config: Record<string, unknown>;
+      }>,
+    );
     const nodes = Schema.#createNodesSchema(nodeExtensions, attributes, editor);
     const marks = Schema.#createMarksSchema(markExtensions, attributes, editor);
     return new PmSchema({ topNode, nodes, marks });
@@ -32,18 +84,22 @@ export class Schema {
    * @param editor Editor instance.
    * @returns Nodes schema.
    */
-  static #createNodesSchema(nodeExtensions, attributes, editor) {
+  static #createNodesSchema(
+    nodeExtensions: EditorExtension[],
+    attributes: ExtensionAttribute[],
+    editor: Editor,
+  ): Record<string, NodeSpec> {
     const nodeEntries = nodeExtensions.map((extension) => {
       const extensionAttributes = attributes.filter((a) => a.type === extension.name);
 
-      const context = {
+      const context: SchemaContext = {
         name: extension.name,
         options: extension.options,
         storage: extension.storage,
         editor,
       };
 
-      const attrs = Object.fromEntries(
+      const attrs: Record<string, { default: unknown }> = Object.fromEntries(
         extensionAttributes.map((attr) => {
           return [attr.name, { default: attr?.attribute?.default }];
         }),
@@ -53,11 +109,11 @@ export class Schema {
         const extendNodeSchema = getExtensionConfigField(e, 'extendNodeSchema', context);
         return {
           ...fields,
-          ...(extendNodeSchema ? extendNodeSchema(extension) : {}),
+          ...(typeof extendNodeSchema === 'function' ? extendNodeSchema(extension) : {}),
         };
       }, {});
 
-      const schema = cleanSchemaItem({
+      const schema: NodeSchemaWithMetadata = cleanSchemaItem({
         content: callOrGet(getExtensionConfigField(extension, 'content', context)),
         group: callOrGet(getExtensionConfigField(extension, 'group', context)),
         marks: callOrGet(getExtensionConfigField(extension, 'marks', context)),
@@ -71,34 +127,43 @@ export class Schema {
         summary: getExtensionConfigField(extension, 'summary', context),
         attrs,
         ...additionalNodeFields,
-      });
+      }) as NodeSchemaWithMetadata;
 
       // Attach OOXML metadata if the extension supports it
-      if (typeof extension.validChildren === 'function' || Array.isArray(extension.validChildren)) {
+      const extensionWithValidChildren = extension as EditorExtension & { validChildren?: (() => string[]) | string[] };
+      if (
+        typeof extensionWithValidChildren.validChildren === 'function' ||
+        Array.isArray(extensionWithValidChildren.validChildren)
+      ) {
         Object.defineProperty(schema, 'validChildren', {
           enumerable: false,
           configurable: false,
-          get: () => extension.validChildren,
+          get: () => extensionWithValidChildren.validChildren,
         });
       }
 
-      const parseDOM = callOrGet(getExtensionConfigField(extension, 'parseDOM', context));
+      const parseDOM = callOrGet(getExtensionConfigField(extension, 'parseDOM', context)) as PmParseRule[] | undefined;
       if (parseDOM) {
+        // Type assertion needed due to ProseMirror ParseRule type incompatibility
         schema.parseDOM = parseDOM.map((parseRule) => {
           return Attribute.insertExtensionAttrsToParseRule(parseRule, extensionAttributes);
-        });
+        }) as unknown as typeof schema.parseDOM;
       }
 
-      const renderDOM = getExtensionConfigField(extension, 'renderDOM', context);
+      const renderDOM = getExtensionConfigField(extension, 'renderDOM', context) as
+        | ((context: RenderDOMContext) => unknown)
+        | undefined;
       if (renderDOM) {
-        schema.toDOM = (node) =>
+        schema.toDOM = (node: PmNode) =>
           renderDOM({
             node,
             htmlAttributes: Attribute.getAttributesToRender(node, extensionAttributes),
-          });
+          }) as DOMOutputSpec;
       }
 
-      const renderText = getExtensionConfigField(extension, 'renderText', context);
+      const renderText = getExtensionConfigField(extension, 'renderText', context) as
+        | ((node: PmNode) => string)
+        | undefined;
       if (renderText) {
         schema.toText = renderText;
       }
@@ -116,45 +181,52 @@ export class Schema {
    * @param editor Editor instance.
    * @returns Marks schema.
    */
-  static #createMarksSchema(markExtensions, attributes, editor) {
+  static #createMarksSchema(
+    markExtensions: EditorExtension[],
+    attributes: ExtensionAttribute[],
+    editor: Editor,
+  ): Record<string, MarkSpec> {
     const markEntries = markExtensions.map((extension) => {
       const extensionAttributes = attributes.filter((a) => a.type === extension.name);
 
-      const context = {
+      const context: SchemaContext = {
         name: extension.name,
         options: extension.options,
         storage: extension.storage,
         editor,
       };
 
-      const attrs = Object.fromEntries(
+      const attrs: Record<string, { default: unknown }> = Object.fromEntries(
         extensionAttributes.map((attr) => {
           return [attr.name, { default: attr?.attribute?.default }];
         }),
       );
 
-      const schema = cleanSchemaItem({
+      const schema: MarkSpec = cleanSchemaItem({
         group: callOrGet(getExtensionConfigField(extension, 'group', context)),
         inclusive: callOrGet(getExtensionConfigField(extension, 'inclusive', context)),
         excludes: callOrGet(getExtensionConfigField(extension, 'excludes', context)),
         spanning: callOrGet(getExtensionConfigField(extension, 'spanning', context)),
         code: callOrGet(getExtensionConfigField(extension, 'code', context)),
         attrs,
-      });
+      }) as MarkSpec;
 
-      const parseDOM = callOrGet(getExtensionConfigField(extension, 'parseDOM', context));
+      const parseDOM = callOrGet(getExtensionConfigField(extension, 'parseDOM', context)) as PmParseRule[] | undefined;
       if (parseDOM) {
+        // Type assertion needed due to ProseMirror ParseRule type incompatibility
         schema.parseDOM = parseDOM.map((parseRule) => {
           return Attribute.insertExtensionAttrsToParseRule(parseRule, extensionAttributes);
-        });
+        }) as unknown as typeof schema.parseDOM;
       }
-      const renderDOM = getExtensionConfigField(extension, 'renderDOM', context);
+      const renderDOM = getExtensionConfigField(extension, 'renderDOM', context) as
+        | ((context: RenderMarkDOMContext) => unknown)
+        | undefined;
       if (renderDOM) {
-        schema.toDOM = (mark) =>
+        schema.toDOM = (mark: PmMark) =>
           renderDOM({
             mark,
             htmlAttributes: Attribute.getAttributesToRender(mark, extensionAttributes),
-          });
+          }) as DOMOutputSpec;
       }
 
       return [extension.name, schema];
diff --git a/packages/super-editor/src/core/child-editor/child-editor.js b/packages/super-editor/src/core/child-editor/child-editor.ts
similarity index 62%
rename from packages/super-editor/src/core/child-editor/child-editor.js
rename to packages/super-editor/src/core/child-editor/child-editor.ts
index dc31a6aa9..709a469b7 100644
--- a/packages/super-editor/src/core/child-editor/child-editor.js
+++ b/packages/super-editor/src/core/child-editor/child-editor.ts
@@ -1,20 +1,19 @@
 import { Editor } from '../Editor.js';
+import type { EditorOptions } from '../types/EditorConfig.js';
+import type { ListDefinitionsPayload } from '../types/EditorEvents.js';
 
 /**
  * Creates a linked child editor based on the current editor.
  * This function checks if the current editor is already a child editor,
  * and if not, it creates a new editor instance with the specified options.
  * The new editor will have pagination disabled and will link to the parent editor's list definitions change handler.
- * @param {Editor} currentEditor - The current editor instance to link to.
- * @param {Object} [options={}] - Additional options to override the default editor options.
- * @returns {Editor} A new child editor instance linked to the current editor.
  */
-export const createLinkedChildEditor = (currentEditor, options = {}) => {
+export const createLinkedChildEditor = (currentEditor: Editor, options: Partial<EditorOptions> = {}): Editor | null => {
   if (currentEditor.options.isChildEditor) {
     return null;
   }
 
-  const editor = new Editor({
+  const editorOptions = {
     ...currentEditor.options,
     pagination: false,
     suppressDefaultDocxStyles: true,
@@ -25,7 +24,7 @@ export const createLinkedChildEditor = (currentEditor, options = {}) => {
     documentId: null,
     isCommentsEnabled: false,
     isNewFile: false,
-    fragment: false,
+    fragment: null,
     onCreate: () => null,
     onListDefinitionsChange: linkListDefinitionsChange,
 
@@ -33,7 +32,9 @@ export const createLinkedChildEditor = (currentEditor, options = {}) => {
     ...options,
     isChildEditor: true,
     parentEditor: currentEditor,
-  });
+  } as Partial<EditorOptions>;
+
+  const editor = new Editor(editorOptions);
 
   return editor;
 };
@@ -42,15 +43,13 @@ export const createLinkedChildEditor = (currentEditor, options = {}) => {
  * Default handler for when the list definitions change in a linked child editor.
  * This function updates the parent editor's converter with the new numbering definitions
  * and dispatches a transaction to update the list item node views.
- * @param {Object} options - The options object containing the editor, change, and numbering.
- * @param {Editor} options.editor - The parent editor instance.
- * @param {Object} options.change - The change object containing the new numbering definitions.
- * @param {Object} options.numbering - The new numbering definitions to be applied.
- * @returns {void}
  */
-const linkListDefinitionsChange = (options) => {
-  const { editor, numbering } = options;
-  const { parentEditor = {} } = editor.options;
+const linkListDefinitionsChange = (params: ListDefinitionsPayload): void => {
+  const { editor, numbering } = params;
+  if (!editor || !(editor instanceof Editor)) return;
+  const { parentEditor } = editor.options;
+  if (!parentEditor) return;
+
   const { converter: parentConverter } = parentEditor;
   if (!parentConverter) return;
 
diff --git a/packages/super-editor/src/core/child-editor/index.js b/packages/super-editor/src/core/child-editor/index.ts
similarity index 100%
rename from packages/super-editor/src/core/child-editor/index.js
rename to packages/super-editor/src/core/child-editor/index.ts
diff --git a/packages/super-editor/src/core/commands/backspaceEmptyRunParagraph.d.ts b/packages/super-editor/src/core/commands/backspaceEmptyRunParagraph.d.ts
new file mode 100644
index 000000000..60b119265
--- /dev/null
+++ b/packages/super-editor/src/core/commands/backspaceEmptyRunParagraph.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export const backspaceEmptyRunParagraph: () => Command;
diff --git a/packages/super-editor/src/core/commands/backspaceNextToRun.d.ts b/packages/super-editor/src/core/commands/backspaceNextToRun.d.ts
new file mode 100644
index 000000000..b54e1b2d5
--- /dev/null
+++ b/packages/super-editor/src/core/commands/backspaceNextToRun.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export const backspaceNextToRun: () => Command;
diff --git a/packages/super-editor/src/core/commands/backspaceSkipEmptyRun.d.ts b/packages/super-editor/src/core/commands/backspaceSkipEmptyRun.d.ts
new file mode 100644
index 000000000..0b07f2783
--- /dev/null
+++ b/packages/super-editor/src/core/commands/backspaceSkipEmptyRun.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export const backspaceSkipEmptyRun: () => Command;
diff --git a/packages/super-editor/src/core/commands/changeListLevel.js b/packages/super-editor/src/core/commands/changeListLevel.ts
similarity index 80%
rename from packages/super-editor/src/core/commands/changeListLevel.js
rename to packages/super-editor/src/core/commands/changeListLevel.ts
index fda3461d6..0bec20f7b 100644
--- a/packages/super-editor/src/core/commands/changeListLevel.js
+++ b/packages/super-editor/src/core/commands/changeListLevel.ts
@@ -2,6 +2,9 @@ import { findParentNode } from '@helpers/index.js';
 import { isList } from '@core/commands/list-helpers';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Editor } from '../Editor.js';
+import type { Transaction } from 'prosemirror-state';
+import type { Node, ResolvedPos } from 'prosemirror-model';
 
 /**
  * Increase or decrease the numbering level of the currently selected list item.
@@ -11,22 +14,22 @@ import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPr
  * @param {import('prosemirror-state').Transaction} tr The transaction to mutate when the level changes.
  * @returns {boolean} True when the command handled the interaction (even if it was a no-op), otherwise false.
  */
-export const changeListLevel = (delta, editor, tr) => {
+export const changeListLevel = (delta: number, editor: Editor, tr: Transaction): boolean => {
   const { state } = editor;
   const { selection, doc: stateDoc } = state;
 
-  const listItemsInSelection = [];
-  const seenPositions = new Set();
+  const listItemsInSelection: Array<{ node: Node; pos: number }> = [];
+  const seenPositions = new Set<number>();
   const doc = stateDoc ?? selection?.$from?.node?.(0);
 
-  const collectListItem = (node, pos) => {
+  const collectListItem = (node: Node, pos: number): void => {
     if (isList(node) && !seenPositions.has(pos)) {
       listItemsInSelection.push({ node, pos });
       seenPositions.add(pos);
     }
   };
 
-  const addEdgeNode = ($pos) => {
+  const addEdgeNode = ($pos: ResolvedPos): void => {
     if (!$pos) return;
     const parentNode = $pos.parent;
     if (parentNode.type.name !== 'paragraph') return;
@@ -58,15 +61,16 @@ export const changeListLevel = (delta, editor, tr) => {
     listItemsInSelection.push({ node: currentItem.node, pos: currentItem.pos });
   }
 
-  const targets = [];
+  type Target = { node: Node; pos: number; numberingProperties: { numId: number; ilvl: number } };
+  const targets: Target[] = [];
   let encounteredNegativeLevel = false;
 
   for (const item of listItemsInSelection) {
     const numberingProperties = getResolvedParagraphProperties(item.node)?.numberingProperties;
 
-    if (!numberingProperties) continue;
+    if (!numberingProperties || numberingProperties.numId === undefined) continue;
 
-    const currentLevel = Number.parseInt(numberingProperties.ilvl ?? 0, 10);
+    const currentLevel = Number.parseInt(String(numberingProperties.ilvl ?? '0'), 10);
     const normalizedLevel = Number.isNaN(currentLevel) ? 0 : currentLevel;
     const newLevel = normalizedLevel + delta;
 
@@ -83,7 +87,7 @@ export const changeListLevel = (delta, editor, tr) => {
       node: item.node,
       pos: item.pos,
       numberingProperties: {
-        ...numberingProperties,
+        numId: numberingProperties.numId,
         ilvl: newLevel,
       },
     });
@@ -111,7 +115,13 @@ export const changeListLevel = (delta, editor, tr) => {
  * @param {import('../Editor').Editor} editor The editor that supplies numbering and style resolution helpers.
  * @param {import('prosemirror-state').Transaction} tr The transaction receiving the updated node markup.
  */
-export function updateNumberingProperties(newNumberingProperties, paragraphNode, pos, editor, tr) {
+export function updateNumberingProperties(
+  newNumberingProperties: { numId: number; ilvl: number } | null,
+  paragraphNode: Node,
+  pos: number,
+  editor: Editor,
+  tr: Transaction,
+): void {
   const newProperties = {
     ...(paragraphNode.attrs.paragraphProperties || {}),
     numberingProperties: newNumberingProperties ? { ...newNumberingProperties } : null,
@@ -127,7 +137,7 @@ export function updateNumberingProperties(newNumberingProperties, paragraphNode,
     delete newProperties.indent;
   }
 
-  const newAttrs = {
+  const newAttrs: Record<string, unknown> = {
     ...paragraphNode.attrs,
     paragraphProperties: newProperties,
     numberingProperties: newProperties.numberingProperties,
@@ -137,7 +147,7 @@ export function updateNumberingProperties(newNumberingProperties, paragraphNode,
   // When adding/updating list properties, let numberingPlugin compute it via appendTransaction.
   // This prevents cache issues where the first transaction caches with null marker data.
   if (!newNumberingProperties) {
-    newAttrs.listRendering = null;
+    (newAttrs as { listRendering?: unknown }).listRendering = null;
   }
 
   tr.setNodeMarkup(pos, null, newAttrs);
diff --git a/packages/super-editor/src/core/commands/clearNodes.js b/packages/super-editor/src/core/commands/clearNodes.ts
similarity index 89%
rename from packages/super-editor/src/core/commands/clearNodes.js
rename to packages/super-editor/src/core/commands/clearNodes.ts
index eb7950ac2..238aa218f 100644
--- a/packages/super-editor/src/core/commands/clearNodes.js
+++ b/packages/super-editor/src/core/commands/clearNodes.ts
@@ -1,4 +1,5 @@
 import { liftTarget } from 'prosemirror-transform';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Normalize nodes to the default node (paragraph by default).
@@ -8,7 +9,7 @@ import { liftTarget } from 'prosemirror-transform';
  * it has the highest priority (priority: 1000) and it's loaded first.
  */
 // prettier-ignore
-export const clearNodes = () => ({ state, tr, dispatch }) => {
+export const clearNodes = (): Command => ({ state, tr, dispatch }) => {
   const { selection } = tr;
   const { ranges } = selection;
 
diff --git a/packages/super-editor/src/core/commands/command.js b/packages/super-editor/src/core/commands/command.js
deleted file mode 100644
index 4a1658d98..000000000
--- a/packages/super-editor/src/core/commands/command.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Define a command function inline.
- * @param fn Command function.
- */
-export const command = (fn) => (props) => fn(props);
diff --git a/packages/super-editor/src/core/commands/command.ts b/packages/super-editor/src/core/commands/command.ts
new file mode 100644
index 000000000..e00049904
--- /dev/null
+++ b/packages/super-editor/src/core/commands/command.ts
@@ -0,0 +1,10 @@
+import type { Command, CommandProps } from '../types/ChainedCommands.js';
+
+/**
+ * Define a command function inline.
+ * @param fn Command function.
+ */
+export const command =
+  (fn: Command) =>
+  (props: CommandProps): boolean =>
+    fn(props);
diff --git a/packages/super-editor/src/core/commands/core-command-map.d.ts b/packages/super-editor/src/core/commands/core-command-map.d.ts
index 8ce525e8a..8db3aacf1 100644
--- a/packages/super-editor/src/core/commands/core-command-map.d.ts
+++ b/packages/super-editor/src/core/commands/core-command-map.d.ts
@@ -5,48 +5,11 @@ type ExtractCommandSignature<F> = F extends (...args: infer A) => (props: Comman
   ? (...args: A) => R
   : (...args: unknown[]) => unknown;
 
-type CoreCommandNames =
-  | 'first'
-  | 'command'
-  | 'insertTabChar'
-  | 'insertTabNode'
-  | 'setMeta'
-  | 'splitBlock'
-  | 'liftEmptyBlock'
-  | 'createParagraphNear'
-  | 'newlineInCode'
-  | 'exitCode'
-  | 'setMark'
-  | 'unsetMark'
-  | 'unsetAllMarks'
-  | 'toggleMark'
-  | 'toggleMarkCascade'
-  | 'clearNodes'
-  | 'setNode'
-  | 'toggleNode'
-  | 'selectAll'
-  | 'deleteSelection'
-  | 'updateAttributes'
-  | 'resetAttributes'
-  | 'joinUp'
-  | 'joinDown'
-  | 'joinBackward'
-  | 'joinForward'
-  | 'selectNodeBackward'
-  | 'selectNodeForward'
-  | 'selectTextblockStart'
-  | 'selectTextblockEnd'
-  | 'insertContent'
-  | 'insertContentAt'
-  | 'undoInputRule'
-  | 'toggleList'
-  | 'increaseListIndent'
-  | 'decreaseListIndent'
-  | 'changeListLevel'
-  | 'removeNumberingProperties'
-  | 'restoreSelection'
-  | 'setTextSelection'
-  | 'getSelectionMarks';
+type CoreCommandNames = {
+  [K in keyof typeof CoreCommandExports]: (typeof CoreCommandExports)[K] extends (...args: unknown[]) => unknown
+    ? K
+    : never;
+}[keyof typeof CoreCommandExports];
 
 type CoreCommandSignatures = {
   [K in CoreCommandNames]: ExtractCommandSignature<(typeof CoreCommandExports)[K]>;
diff --git a/packages/super-editor/src/core/commands/createParagraphNear.js b/packages/super-editor/src/core/commands/createParagraphNear.ts
similarity index 60%
rename from packages/super-editor/src/core/commands/createParagraphNear.js
rename to packages/super-editor/src/core/commands/createParagraphNear.ts
index 7f291c154..36aadd3c1 100644
--- a/packages/super-editor/src/core/commands/createParagraphNear.js
+++ b/packages/super-editor/src/core/commands/createParagraphNear.ts
@@ -1,9 +1,10 @@
 import { createParagraphNear as originalCreateParagraphNear } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Create a paragraph nearby.
  */
 //prettier-ignore
-export const createParagraphNear = () => ({ state, dispatch }) => {
+export const createParagraphNear = (): Command => ({ state, dispatch }) => {
   return originalCreateParagraphNear(state, dispatch);
 };
diff --git a/packages/super-editor/src/core/commands/decreaseListIndent.js b/packages/super-editor/src/core/commands/decreaseListIndent.ts
similarity index 83%
rename from packages/super-editor/src/core/commands/decreaseListIndent.js
rename to packages/super-editor/src/core/commands/decreaseListIndent.ts
index a457355c2..ad4a982d6 100644
--- a/packages/super-editor/src/core/commands/decreaseListIndent.js
+++ b/packages/super-editor/src/core/commands/decreaseListIndent.ts
@@ -1,4 +1,4 @@
-// @ts-check
+import type { Command } from '../types/ChainedCommands.js';
 import { changeListLevel } from './changeListLevel.js';
 
 /**
@@ -6,7 +6,7 @@ import { changeListLevel } from './changeListLevel.js';
  * @returns {Function} A ProseMirror command function.
  */
 export const decreaseListIndent =
-  () =>
+  (): Command =>
   ({ editor, tr, dispatch }) => {
     const handled = changeListLevel(-1, editor, tr);
 
diff --git a/packages/super-editor/src/core/commands/deleteNextToRun.d.ts b/packages/super-editor/src/core/commands/deleteNextToRun.d.ts
new file mode 100644
index 000000000..8c02b1ce3
--- /dev/null
+++ b/packages/super-editor/src/core/commands/deleteNextToRun.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export const deleteNextToRun: () => Command;
diff --git a/packages/super-editor/src/core/commands/deleteSelection.js b/packages/super-editor/src/core/commands/deleteSelection.ts
similarity index 95%
rename from packages/super-editor/src/core/commands/deleteSelection.js
rename to packages/super-editor/src/core/commands/deleteSelection.ts
index 0d1bd5277..cbb430dd4 100644
--- a/packages/super-editor/src/core/commands/deleteSelection.js
+++ b/packages/super-editor/src/core/commands/deleteSelection.ts
@@ -1,10 +1,11 @@
 import { deleteSelection as originalDeleteSelection } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Delete the selection, if there is one.
  */
 export const deleteSelection =
-  () =>
+  (): Command =>
   ({ state, tr, dispatch }) => {
     const { from, to, empty } = state.selection;
 
diff --git a/packages/super-editor/src/core/commands/deleteSkipEmptyRun.d.ts b/packages/super-editor/src/core/commands/deleteSkipEmptyRun.d.ts
new file mode 100644
index 000000000..34a36e9d8
--- /dev/null
+++ b/packages/super-editor/src/core/commands/deleteSkipEmptyRun.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export const deleteSkipEmptyRun: () => Command;
diff --git a/packages/super-editor/src/core/commands/exitCode.js b/packages/super-editor/src/core/commands/exitCode.ts
similarity index 57%
rename from packages/super-editor/src/core/commands/exitCode.js
rename to packages/super-editor/src/core/commands/exitCode.ts
index 33d494570..c88e7661d 100644
--- a/packages/super-editor/src/core/commands/exitCode.js
+++ b/packages/super-editor/src/core/commands/exitCode.ts
@@ -1,9 +1,10 @@
 import { exitCode as originalExitCode } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Exit from a code block.
  */
 //prettier-ignore
-export const exitCode = () => ({ state, dispatch }) => {
+export const exitCode = (): Command => ({ state, dispatch }) => {
   return originalExitCode(state, dispatch);
 };
diff --git a/packages/super-editor/src/core/commands/first.js b/packages/super-editor/src/core/commands/first.js
deleted file mode 100644
index a4d23c83d..000000000
--- a/packages/super-editor/src/core/commands/first.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Runs commands and stops at the first one that returns true.
- * @param commands Commands to run.
- *
- * Example:
- * editor.commands.first(({ commands }) => [
- *  () => commands.deleteSelection(),
- *  () => commands.joinBackward(),
- *  () => commands.selectNodeBackward(),
- * ]);
- */
-export const first = (commands) => (props) => {
-  const items = typeof commands === 'function' ? commands(props) : commands;
-
-  for (let i = 0; i < items.length; i += 1) {
-    if (items[i](props)) return true;
-  }
-
-  return false;
-};
diff --git a/packages/super-editor/src/core/commands/first.ts b/packages/super-editor/src/core/commands/first.ts
new file mode 100644
index 000000000..cc218033c
--- /dev/null
+++ b/packages/super-editor/src/core/commands/first.ts
@@ -0,0 +1,24 @@
+import type { Command, CommandProps } from '../types/ChainedCommands.js';
+
+/**
+ * Runs commands and stops at the first one that returns true.
+ * @param commands Commands to run.
+ *
+ * Example:
+ * editor.commands.first(({ commands }) => [
+ *  () => commands.deleteSelection(),
+ *  () => commands.joinBackward(),
+ *  () => commands.selectNodeBackward(),
+ * ]);
+ */
+export const first =
+  (commands: Command[] | ((props: CommandProps) => Command[])): Command =>
+  (props) => {
+    const items = typeof commands === 'function' ? commands(props) : commands;
+
+    for (let i = 0; i < items.length; i += 1) {
+      if (items[i](props)) return true;
+    }
+
+    return false;
+  };
diff --git a/packages/super-editor/src/core/commands/getSelectionMarks.js b/packages/super-editor/src/core/commands/getSelectionMarks.ts
similarity index 83%
rename from packages/super-editor/src/core/commands/getSelectionMarks.js
rename to packages/super-editor/src/core/commands/getSelectionMarks.ts
index 880cd3d68..df21944aa 100644
--- a/packages/super-editor/src/core/commands/getSelectionMarks.js
+++ b/packages/super-editor/src/core/commands/getSelectionMarks.ts
@@ -1,4 +1,6 @@
 import { getMarksFromSelection } from '../helpers/getMarksFromSelection.js';
+import type { Mark } from 'prosemirror-model';
+import type { CommandProps } from '../types/ChainedCommands.js';
 
 /**
  * Retrieve the mark set for the current selection without duplicates.
@@ -6,11 +8,11 @@ import { getMarksFromSelection } from '../helpers/getMarksFromSelection.js';
  */
 export const getSelectionMarks =
   () =>
-  ({ state, tr }) => {
+  ({ state, tr }: CommandProps): Mark[] => {
     tr.setMeta('preventDispatch', true);
 
     const marks = getMarksFromSelection(state) ?? [];
-    const uniqueByType = new Map();
+    const uniqueByType = new Map<string, Mark>();
 
     for (const mark of marks) {
       const typeName = typeof mark?.type === 'string' ? mark.type : mark?.type?.name;
diff --git a/packages/super-editor/src/core/commands/increaseListIndent.js b/packages/super-editor/src/core/commands/increaseListIndent.ts
similarity index 84%
rename from packages/super-editor/src/core/commands/increaseListIndent.js
rename to packages/super-editor/src/core/commands/increaseListIndent.ts
index 2cd509b33..55d820d16 100644
--- a/packages/super-editor/src/core/commands/increaseListIndent.js
+++ b/packages/super-editor/src/core/commands/increaseListIndent.ts
@@ -1,11 +1,12 @@
 import { changeListLevel } from './changeListLevel.js';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Increases the indent level of the current list item.
  * Works for both ordered and bullet lists, including lists toggled from ordered→bullet.
  */
 export const increaseListIndent =
-  () =>
+  (): Command =>
   ({ editor, tr, dispatch }) => {
     const handled = changeListLevel(1, editor, tr);
 
diff --git a/packages/super-editor/src/core/commands/index.js b/packages/super-editor/src/core/commands/index.ts
similarity index 100%
rename from packages/super-editor/src/core/commands/index.js
rename to packages/super-editor/src/core/commands/index.ts
diff --git a/packages/super-editor/src/core/commands/insertContent.js b/packages/super-editor/src/core/commands/insertContent.ts
similarity index 69%
rename from packages/super-editor/src/core/commands/insertContent.js
rename to packages/super-editor/src/core/commands/insertContent.ts
index 7dd6e5637..9aff5773a 100644
--- a/packages/super-editor/src/core/commands/insertContent.js
+++ b/packages/super-editor/src/core/commands/insertContent.ts
@@ -1,6 +1,12 @@
-//@ts-check
+import type { ContentValue, InsertContentOptions as InsertContentAtOptions } from './insertContentAt.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { processContent } from '../helpers/contentProcessor.js';
 
+interface InsertContentOptions extends InsertContentAtOptions {
+  contentType?: 'html' | 'markdown' | 'text' | 'schema';
+  [key: string]: unknown;
+}
+
 /**
  * Command to insert content at the current selection or replace the current selection.
  * If contentType is specified in options, it will use the unified content processor to handle
@@ -15,7 +21,7 @@ import { processContent } from '../helpers/contentProcessor.js';
  * @returns {function} A command function that can be executed by the editor.
  */
 export const insertContent =
-  (value, options = {}) =>
+  (value: ContentValue, options: InsertContentOptions = {}): Command =>
   ({ tr, commands, editor }) => {
     // If contentType is specified, use the new processor
     if (options.contentType) {
@@ -32,8 +38,15 @@ export const insertContent =
           editor,
         });
 
-        const jsonContent = processedDoc.toJSON();
-        const ok = commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, jsonContent, options);
+        if (!processedDoc) {
+          console.error('[insertContent] No document produced for contentType:', options.contentType);
+          return false;
+        }
+
+        const jsonContent = processedDoc.toJSON() as Record<string, unknown>;
+        const ok = Boolean(
+          commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, jsonContent, options),
+        );
 
         // Schedule list migration right after the insert transaction dispatches
         if (ok && (options.contentType === 'html' || options.contentType === 'markdown')) {
@@ -48,5 +61,5 @@ export const insertContent =
     }
 
     // Otherwise use the original behavior for backward compatibility
-    return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value, options);
+    return Boolean(commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value, options));
   };
diff --git a/packages/super-editor/src/core/commands/insertContentAt.js b/packages/super-editor/src/core/commands/insertContentAt.ts
similarity index 50%
rename from packages/super-editor/src/core/commands/insertContentAt.js
rename to packages/super-editor/src/core/commands/insertContentAt.ts
index d9c576665..aa0b6db81 100644
--- a/packages/super-editor/src/core/commands/insertContentAt.js
+++ b/packages/super-editor/src/core/commands/insertContentAt.ts
@@ -1,17 +1,32 @@
-import { createNodeFromContent } from '../helpers/createNodeFromContent';
-import { selectionToInsertionEnd } from '../helpers/selectionToInsertionEnd';
-
-/**
- * @typedef {import("prosemirror-model").Node} ProseMirrorNode
- * @typedef {import("prosemirror-model").Fragment} ProseMirrorFragment
- */
+import { createNodeFromContent } from '../helpers/createNodeFromContent.js';
+import type { Command, CommandProps } from '../types/ChainedCommands.js';
+import { selectionToInsertionEnd } from '../helpers/selectionToInsertionEnd.js';
+import type { Node as ProseMirrorNode, Fragment as ProseMirrorFragment, ResolvedPos } from 'prosemirror-model';
+
+export type JSONContent = Record<string, unknown> | Array<Record<string, unknown>>;
+export type ContentValue =
+  | string
+  | Array<string | { text?: string }>
+  | ProseMirrorNode
+  | ProseMirrorFragment
+  | JSONContent;
+export type Position = ResolvedPos | number | { from: number; to: number };
+
+export interface InsertContentOptions {
+  parseOptions?: Record<string, unknown>;
+  updateSelection?: boolean;
+  applyInputRules?: boolean;
+  applyPasteRules?: boolean;
+  asText?: boolean;
+  errorOnInvalidContent?: boolean;
+}
 
 /**
  * Checks if the given node or fragment is a ProseMirror Fragment.
  * @param {ProseMirrorNode|ProseMirrorFragment} nodeOrFragment
  * @returns {boolean}
  */
-const isFragment = (nodeOrFragment) => {
+const isFragment = (nodeOrFragment: ProseMirrorNode | ProseMirrorFragment): boolean => {
   return !('type' in nodeOrFragment);
 };
 
@@ -28,10 +43,12 @@ const isFragment = (nodeOrFragment) => {
  */
 // prettier-ignore
 export const insertContentAt =
-  (position, value, options) =>
-  ({ tr, dispatch, editor }) => {
+  (position: Position, value: ContentValue, options?: InsertContentOptions): Command =>
+  ({ tr, dispatch, editor }: CommandProps) => {
     if (!dispatch) return true;
 
+    const isPmContent = typeof value === 'object' && value !== null && 'childCount' in value;
+
     options = {
       parseOptions: {},
       updateSelection: true,
@@ -42,31 +59,44 @@ export const insertContentAt =
       ...options,
     };
 
-    let content;
+    let content: ProseMirrorNode | ProseMirrorFragment;
 
     try {
-      content = createNodeFromContent(value, editor, {
-        parseOptions: {
-          preserveWhitespace: 'full',
-          ...options.parseOptions,
-        },
-        errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
-      });
+      content = isPmContent
+        ? (value as ProseMirrorNode | ProseMirrorFragment)
+        : createNodeFromContent(value as string | Record<string, unknown> | Array<Record<string, unknown>>, editor, {
+            parseOptions: {
+              preserveWhitespace: 'full',
+              ...options.parseOptions,
+            },
+            errorOnInvalidContent: Boolean(
+              options.errorOnInvalidContent ?? (editor.options as Record<string, unknown>).enableContentCheck,
+            ),
+          });
     } catch (e) {
-      editor.emit('contentError', {
-        editor,
-        error: e,
-        disableCollaboration: () => {
-          console.error('[super-editor error]: Unable to disable collaboration at this point in time');
+      editor.emit(
+        'contentError',
+        {
+          editor,
+          error: e as Error,
         },
-      });
+      );
       return false;
     }
 
-    let { from, to } =
-      typeof position === 'number'
-        ? { from: position, to: position }
-        : { from: position.from, to: position.to };
+    let from: number;
+    let to: number;
+    if (typeof position === 'number') {
+      from = position;
+      to = position;
+    } else if ((position as { from?: number; to?: number }).from !== undefined) {
+      from = (position as { from: number }).from;
+      to = (position as { to: number }).to;
+    } else {
+      const resolved = position as ResolvedPos;
+      from = resolved.pos;
+      to = resolved.pos;
+    }
 
     // Heuristic:
     // - Bare strings that LOOK like HTML: let parser handle (replaceWith)
@@ -77,26 +107,29 @@ export const insertContentAt =
     const forceTextInsert =
       !!options.asText ||
       (hasNewline && !looksLikeHTML) ||
-      (Array.isArray(value) && value.every((v) => typeof v === 'string' || (v && typeof v.text === 'string'))) ||
-      (!!value && typeof value === 'object' && typeof value.text === 'string');
+      (Array.isArray(value) && value.every((v) => typeof v === 'string' || (v && typeof (v as { text?: string }).text === 'string'))) ||
+      (!!value && typeof value === 'object' && 'text' in value && typeof value.text === 'string');
 
     // Inspect parsed nodes to decide text vs block replacement
     let isOnlyTextContent = true;
     let isOnlyBlockContent = true;
-    const nodes = isFragment(content) ? content : [content];
+    const nodes = isFragment(content) ? Array.from({ length: content.childCount }, (_, i) => content.child(i)) : [content];
 
     nodes.forEach((node) => {
       // validate node
-      node.check();
+      if ('check' in node && typeof node.check === 'function') {
+        node.check();
+      }
 
       // only-plain-text if every node is an unmarked text node
-      isOnlyTextContent = isOnlyTextContent ? (node.isText && node.marks.length === 0) : false;
+      isOnlyTextContent = isOnlyTextContent ? ('isText' in node && node.isText && node.marks?.length === 0) : false;
 
-      isOnlyBlockContent = isOnlyBlockContent ? node.isBlock : false;
+      isOnlyBlockContent = isOnlyBlockContent ? ('isBlock' in node && Boolean(node.isBlock)) : false;
     });
 
     // Replace empty textblock wrapper when inserting blocks at a cursor
-    if (from === to && isOnlyBlockContent) {
+    // But NOT when we're forcing text insertion (e.g., bare strings with newlines)
+    if (from === to && isOnlyBlockContent && !forceTextInsert) {
       const { parent } = tr.doc.resolve(from);
       const isEmptyTextBlock = parent.isTextblock && !parent.type.spec.code && !parent.childCount;
 
@@ -106,13 +139,13 @@ export const insertContentAt =
       }
     }
 
-    let newContent;
+    let newContent: ProseMirrorNode | ProseMirrorFragment | string;
 
     // Use insertText for pure text OR when explicitly/heuristically forced
     if (isOnlyTextContent || forceTextInsert) {
       if (Array.isArray(value)) {
         newContent = value.map((v) => (typeof v === 'string' ? v : (v && v.text) || '')).join('');
-      } else if (typeof value === 'object' && !!value && !!value.text) {
+      } else if (typeof value === 'object' && !!value && 'text' in value && typeof value.text === 'string') {
         newContent = value.text;
       } else {
         newContent = typeof value === 'string' ? value : '';
diff --git a/packages/super-editor/src/core/commands/insertSectionBreakAtSelection.js b/packages/super-editor/src/core/commands/insertSectionBreakAtSelection.ts
similarity index 89%
rename from packages/super-editor/src/core/commands/insertSectionBreakAtSelection.js
rename to packages/super-editor/src/core/commands/insertSectionBreakAtSelection.ts
index bea159cd5..233ee7bc1 100644
--- a/packages/super-editor/src/core/commands/insertSectionBreakAtSelection.js
+++ b/packages/super-editor/src/core/commands/insertSectionBreakAtSelection.ts
@@ -1,4 +1,11 @@
 import { updateSectionMargins, getSectPrMargins } from '@converter/section-properties.js';
+import type { Command } from '../types/ChainedCommands.js';
+import type { Node } from 'prosemirror-model';
+
+interface SectionBreakParams {
+  headerInches?: number;
+  footerInches?: number;
+}
 
 /**
  * Insert (or ensure) a paragraph-level sectPr at the selection.
@@ -14,7 +21,7 @@ import { updateSectionMargins, getSectPrMargins } from '@converter/section-prope
  * @returns {import('./types/index.js').Command}
  */
 export const insertSectionBreakAtSelection =
-  ({ headerInches, footerInches } = {}) =>
+  ({ headerInches, footerInches }: SectionBreakParams = {}): Command =>
   ({ state, editor }) => {
     if (!state || !editor) {
       console.warn('[insertSectionBreakAtSelection] Missing state or editor');
@@ -34,7 +41,7 @@ export const insertSectionBreakAtSelection =
     const { $from } = state.selection;
     // Find nearest paragraph node and its position
     let paraPos = 0;
-    let paragraph = null;
+    let paragraph: Node | null = null;
     for (let d = $from.depth; d >= 0; d -= 1) {
       const node = $from.node(d);
       if (node?.type?.name === 'paragraph') {
@@ -58,7 +65,7 @@ export const insertSectionBreakAtSelection =
       : { type: 'element', name: 'w:sectPr', elements: [] };
 
     // Apply updates if provided
-    const updates = {};
+    const updates: { headerInches?: number; footerInches?: number } = {};
     if (headerInches != null) updates.headerInches = headerInches;
     if (footerInches != null) updates.footerInches = footerInches;
     if (Object.keys(updates).length) {
diff --git a/packages/super-editor/src/core/commands/insertTabChar.js b/packages/super-editor/src/core/commands/insertTabChar.js
deleted file mode 100644
index ae3f8c440..000000000
--- a/packages/super-editor/src/core/commands/insertTabChar.js
+++ /dev/null
@@ -1,6 +0,0 @@
-//prettier-ignore
-export const insertTabChar = () => ({ tr }) => {
-  tr.insertText('\t', tr.selection.from, tr.selection.to);
-  
-  return true;
-};
diff --git a/packages/super-editor/src/core/commands/insertTabChar.ts b/packages/super-editor/src/core/commands/insertTabChar.ts
new file mode 100644
index 000000000..5698088bb
--- /dev/null
+++ b/packages/super-editor/src/core/commands/insertTabChar.ts
@@ -0,0 +1,8 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+//prettier-ignore
+export const insertTabChar = (): Command => ({ tr }) => {
+  tr.insertText('\t', tr.selection.from, tr.selection.to);
+
+  return true;
+};
diff --git a/packages/super-editor/src/core/commands/insertTabNode.js b/packages/super-editor/src/core/commands/insertTabNode.ts
similarity index 77%
rename from packages/super-editor/src/core/commands/insertTabNode.js
rename to packages/super-editor/src/core/commands/insertTabNode.ts
index 4f15e60fc..6047d7dac 100644
--- a/packages/super-editor/src/core/commands/insertTabNode.js
+++ b/packages/super-editor/src/core/commands/insertTabNode.ts
@@ -1,7 +1,10 @@
 import { splitRunAtCursor } from '@extensions/run/commands/split-run.js';
 import { TextSelection } from 'prosemirror-state';
+import type { Command, CommandProps } from '../types/ChainedCommands.js';
 
-export const insertTabCharacter = ({ tr, state, dispatch }) => {
+type InsertTabProps = Pick<CommandProps, 'tr' | 'state' | 'dispatch' | 'editor'>;
+
+export const insertTabCharacter = ({ tr, state, dispatch }: InsertTabProps): boolean => {
   const { from } = tr.selection;
   const tabText = state.schema.text('\t');
 
@@ -13,13 +16,13 @@ export const insertTabCharacter = ({ tr, state, dispatch }) => {
 };
 
 export const insertTabNode =
-  () =>
-  ({ tr, state, dispatch }) => {
+  (): Command =>
+  ({ tr, state, dispatch, editor }) => {
     let newPos = tr.selection.from;
     const tabNode = state.schema?.nodes?.tab?.create();
 
     // If tab node isn't defined, fallback to tab character
-    if (!tabNode) return insertTabCharacter({ tr, state, dispatch });
+    if (!tabNode) return insertTabCharacter({ tr, state, dispatch, editor });
 
     // Move selection out of run node if inside one
     const { from } = tr.selection;
@@ -33,7 +36,7 @@ export const insertTabNode =
         newPos = $pos.start() - 1;
       } else {
         // In middle of run, split it at the cursor
-        splitRunAtCursor()({ tr, state });
+        splitRunAtCursor()({ tr, state } as unknown as CommandProps);
         newPos = tr.selection.from;
       }
     }
diff --git a/packages/super-editor/src/core/commands/joinBackward.js b/packages/super-editor/src/core/commands/joinBackward.ts
similarity index 78%
rename from packages/super-editor/src/core/commands/joinBackward.js
rename to packages/super-editor/src/core/commands/joinBackward.ts
index 983a8233d..dc717e718 100644
--- a/packages/super-editor/src/core/commands/joinBackward.js
+++ b/packages/super-editor/src/core/commands/joinBackward.ts
@@ -1,4 +1,6 @@
 import { joinBackward as originalJoinBackward } from 'prosemirror-commands';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Join two nodes backward.
@@ -14,7 +16,7 @@ import { joinBackward as originalJoinBackward } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.joinBackward
  */
 //prettier-ignore
-export const joinBackward = () => ({ state, dispatch }) => {
+export const joinBackward = (): Command => ({ state, dispatch }) => {
   const { selection, doc } = state;
   const { $from } = selection;
 
@@ -31,7 +33,7 @@ export const joinBackward = () => ({ state, dispatch }) => {
   const nodeAfter = doc.resolve(beforePos).nodeAfter;
 
   // Dont join lists
-  const isList = (node) => node?.type.name === 'orderedList' || node?.type.name === 'bulletList';
+  const isList = (node: PmNode | null | undefined): boolean => node?.type.name === 'orderedList' || node?.type.name === 'bulletList';
   if (isList(nodeBefore) || isList(nodeAfter)) {
     return false;
   }
diff --git a/packages/super-editor/src/core/commands/joinDown.js b/packages/super-editor/src/core/commands/joinDown.ts
similarity index 63%
rename from packages/super-editor/src/core/commands/joinDown.js
rename to packages/super-editor/src/core/commands/joinDown.ts
index e82132676..79bb50183 100644
--- a/packages/super-editor/src/core/commands/joinDown.js
+++ b/packages/super-editor/src/core/commands/joinDown.ts
@@ -1,4 +1,5 @@
 import { joinDown as originalJoinDown } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Join the selected block, or the closest ancestor of the selection
@@ -7,4 +8,4 @@ import { joinDown as originalJoinDown } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.joinDown
  */
 //prettier-ignore
-export const joinDown = () => ({ state, dispatch }) => originalJoinDown(state, dispatch);
+export const joinDown = (): Command => ({ state, dispatch }) => originalJoinDown(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/joinForward.js b/packages/super-editor/src/core/commands/joinForward.ts
similarity index 76%
rename from packages/super-editor/src/core/commands/joinForward.js
rename to packages/super-editor/src/core/commands/joinForward.ts
index de7cb81b5..c9b9a0a1b 100644
--- a/packages/super-editor/src/core/commands/joinForward.js
+++ b/packages/super-editor/src/core/commands/joinForward.ts
@@ -1,4 +1,6 @@
 import { joinForward as originalJoinForward } from 'prosemirror-commands';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Join two nodes forward.
@@ -12,7 +14,7 @@ import { joinForward as originalJoinForward } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.joinForward
  */
 //prettier-ignore
-export const joinForward = () => ({ state, dispatch }) => {
+export const joinForward = (): Command => ({ state, dispatch }) => {
   const { selection, doc } = state;
   const { $from } = selection;
 
@@ -29,7 +31,7 @@ export const joinForward = () => ({ state, dispatch }) => {
   const nodeAfter = doc.resolve(beforePos).nodeAfter;
 
   // Dont join lists
-  const isList = (node) => node?.type.name === 'orderedList' || node?.type.name === 'bulletList';
+  const isList = (node: PmNode | null | undefined): boolean => node?.type.name === 'orderedList' || node?.type.name === 'bulletList';
   if (isList(nodeBefore) || isList(nodeAfter)) {
     return false;
   }
diff --git a/packages/super-editor/src/core/commands/joinUp.js b/packages/super-editor/src/core/commands/joinUp.ts
similarity index 66%
rename from packages/super-editor/src/core/commands/joinUp.js
rename to packages/super-editor/src/core/commands/joinUp.ts
index 46c91936f..ff425d258 100644
--- a/packages/super-editor/src/core/commands/joinUp.js
+++ b/packages/super-editor/src/core/commands/joinUp.ts
@@ -1,4 +1,5 @@
 import { joinUp as originalJoinUp } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Join the selected block or, if there is a text selection, the
@@ -8,4 +9,4 @@ import { joinUp as originalJoinUp } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.joinUp
  */
 //prettier-ignore
-export const joinUp = () => ({ state, dispatch }) => originalJoinUp(state, dispatch);
+export const joinUp = (): Command => ({ state, dispatch }) => originalJoinUp(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/liftEmptyBlock.js b/packages/super-editor/src/core/commands/liftEmptyBlock.ts
similarity index 59%
rename from packages/super-editor/src/core/commands/liftEmptyBlock.js
rename to packages/super-editor/src/core/commands/liftEmptyBlock.ts
index e2e8d7213..ee5544420 100644
--- a/packages/super-editor/src/core/commands/liftEmptyBlock.js
+++ b/packages/super-editor/src/core/commands/liftEmptyBlock.ts
@@ -1,4 +1,5 @@
 import { liftEmptyBlock as originalLiftEmptyBlock } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * If the cursor is in an empty textblock that can be lifted, lift the block.
@@ -6,4 +7,4 @@ import { liftEmptyBlock as originalLiftEmptyBlock } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.liftEmptyBlock
  */
 //prettier-ignore
-export const liftEmptyBlock = () => ({ state, dispatch }) => originalLiftEmptyBlock(state, dispatch);
+export const liftEmptyBlock = (): Command => ({ state, dispatch }) => originalLiftEmptyBlock(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/lineHeight.js b/packages/super-editor/src/core/commands/lineHeight.ts
similarity index 53%
rename from packages/super-editor/src/core/commands/lineHeight.js
rename to packages/super-editor/src/core/commands/lineHeight.ts
index a10cb51c0..f2dbf4ebf 100644
--- a/packages/super-editor/src/core/commands/lineHeight.js
+++ b/packages/super-editor/src/core/commands/lineHeight.ts
@@ -1,4 +1,5 @@
 import { linesToTwips } from '@converter/helpers';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Set line height
@@ -8,13 +9,15 @@ import { linesToTwips } from '@converter/helpers';
  * editor.commands.setLineHeight(1.5)
  */
 export const setLineHeight =
-  (lineHeight) =>
+  (lineHeight: number): Command =>
   ({ commands }) => {
     if (!lineHeight) return false;
-    return commands.updateAttributes('paragraph', {
-      'paragraphProperties.spacing.line': linesToTwips(lineHeight),
-      'paragraphProperties.spacing.lineRule': 'auto',
-    });
+    return Boolean(
+      commands.updateAttributes('paragraph', {
+        'paragraphProperties.spacing.line': linesToTwips(lineHeight),
+        'paragraphProperties.spacing.lineRule': 'auto',
+      }),
+    );
   };
 
 /**
@@ -25,11 +28,9 @@ export const setLineHeight =
  * @note Reverts to default line spacing
  */
 export const unsetLineHeight =
-  () =>
+  (): Command =>
   ({ commands }) => {
-    return commands.resetAttributes(
-      'paragraph',
-      'paragraphProperties.spacing.line',
-      'paragraphProperties.spacing.lineRule',
+    return Boolean(
+      commands.resetAttributes('paragraph', 'paragraphProperties.spacing.line', 'paragraphProperties.spacing.lineRule'),
     );
   };
diff --git a/packages/super-editor/src/core/commands/list-helpers/find-node-position.js b/packages/super-editor/src/core/commands/list-helpers/find-node-position.js
deleted file mode 100644
index 728c89c2a..000000000
--- a/packages/super-editor/src/core/commands/list-helpers/find-node-position.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Helper function to find the position of a target node in the document.
- * @param {import("prosemirror-model").Node} doc - The ProseMirror document to search in.
- * @param {import("prosemirror-model").Node} targetNode - The ProseMirror node to find the position of.
- * @returns {number|null} The position of the target node in the document, or null
- */
-export const findNodePosition = (doc, targetNode) => {
-  let nodePos = null;
-  doc.descendants((node, pos) => {
-    if (node === targetNode) {
-      nodePos = pos;
-      return false;
-    }
-    return true;
-  });
-  return nodePos;
-};
diff --git a/packages/super-editor/src/core/commands/list-helpers/find-node-position.ts b/packages/super-editor/src/core/commands/list-helpers/find-node-position.ts
new file mode 100644
index 000000000..ced505b53
--- /dev/null
+++ b/packages/super-editor/src/core/commands/list-helpers/find-node-position.ts
@@ -0,0 +1,19 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+/**
+ * Helper function to find the position of a target node in the document.
+ * @param doc - The ProseMirror document to search in.
+ * @param targetNode - The ProseMirror node to find the position of.
+ * @returns The position of the target node in the document, or null
+ */
+export const findNodePosition = (doc: PmNode, targetNode: PmNode): number | null => {
+  let nodePos = null;
+  doc.descendants((node, pos) => {
+    if (node === targetNode) {
+      nodePos = pos;
+      return false;
+    }
+    return true;
+  });
+  return nodePos;
+};
diff --git a/packages/super-editor/src/core/commands/list-helpers/index.js b/packages/super-editor/src/core/commands/list-helpers/index.ts
similarity index 100%
rename from packages/super-editor/src/core/commands/list-helpers/index.js
rename to packages/super-editor/src/core/commands/list-helpers/index.ts
diff --git a/packages/super-editor/src/core/commands/list-helpers/is-list.js b/packages/super-editor/src/core/commands/list-helpers/is-list.js
deleted file mode 100644
index 947c59447..000000000
--- a/packages/super-editor/src/core/commands/list-helpers/is-list.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
-/**
- * Helper function to check if a node is a list.
- * @param {import("prosemirror-model").Node} n - The ProseMirror node to check.
- * @returns {boolean} True if the node is an ordered or bullet list, false otherwise
- */
-export const isList = (node) =>
-  !!node &&
-  node.type?.name === 'paragraph' &&
-  getResolvedParagraphProperties(node).numberingProperties &&
-  node.attrs?.listRendering;
diff --git a/packages/super-editor/src/core/commands/list-helpers/is-list.ts b/packages/super-editor/src/core/commands/list-helpers/is-list.ts
new file mode 100644
index 000000000..95078616e
--- /dev/null
+++ b/packages/super-editor/src/core/commands/list-helpers/is-list.ts
@@ -0,0 +1,13 @@
+import type { Node as PmNode } from 'prosemirror-model';
+import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+
+/**
+ * Helper function to check if a node is a list.
+ * @param node - The ProseMirror node to check.
+ * @returns True if the node is an ordered or bullet list, false otherwise
+ */
+export const isList = (node: PmNode | null | undefined): boolean =>
+  !!node &&
+  node.type?.name === 'paragraph' &&
+  !!getResolvedParagraphProperties(node)?.numberingProperties &&
+  node.attrs?.listRendering;
diff --git a/packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.js b/packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.ts
similarity index 57%
rename from packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.js
rename to packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.ts
index a85a21e96..2f961a46b 100644
--- a/packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.js
+++ b/packages/super-editor/src/core/commands/list-helpers/list-indent-helpers.ts
@@ -1,12 +1,14 @@
+import type { Node as PmNode, ResolvedPos } from 'prosemirror-model';
+
 const LIST_NODE_NAMES = new Set(['orderedList', 'bulletList']);
 
-export const parseLevel = (value) => {
+export const parseLevel = (value: number | string | undefined): number => {
   if (typeof value === 'number') return value;
-  const parsed = parseInt(value, 10);
+  const parsed = parseInt(value as string, 10);
   return Number.isNaN(parsed) ? 0 : parsed;
 };
 
-export const resolveParentList = ($pos) => {
+export const resolveParentList = ($pos: ResolvedPos | null | undefined): PmNode | null => {
   if (!$pos) return null;
 
   for (let depth = $pos.depth; depth >= 0; depth--) {
diff --git a/packages/super-editor/src/core/commands/list-helpers/test-helpers.js b/packages/super-editor/src/core/commands/list-helpers/test-helpers.ts
similarity index 69%
rename from packages/super-editor/src/core/commands/list-helpers/test-helpers.js
rename to packages/super-editor/src/core/commands/list-helpers/test-helpers.ts
index 19819633c..e8e1fc2d2 100644
--- a/packages/super-editor/src/core/commands/list-helpers/test-helpers.js
+++ b/packages/super-editor/src/core/commands/list-helpers/test-helpers.ts
@@ -1,10 +1,21 @@
 import { EditorState, TextSelection } from 'prosemirror-state';
+import type { Node as PmNode, Schema } from 'prosemirror-model';
+import type { Transaction } from 'prosemirror-state';
+import type { CommandProps } from '@core/types/ChainedCommands.js';
 
-export function createEditor(docNode, schema) {
+type TestEditor = {
+  schema: Schema;
+  converter: { numbering: { definitions: Record<string, unknown>; abstracts: Record<string, unknown> } };
+  emit: () => void;
+};
+
+export function createEditor(docNode: PmNode, schema: Schema): { editor: TestEditor; state: EditorState } {
   const editor = {
     schema,
     converter: { numbering: { definitions: {}, abstracts: {} } },
-    emit: () => {},
+    emit: () => {
+      /* noop */
+    },
   };
   const [from, to] = inlineSpanOf(docNode);
   const state = EditorState.create({
@@ -15,14 +26,14 @@ export function createEditor(docNode, schema) {
   return { editor, state };
 }
 
-export function inlineSpanOf(root) {
+export function inlineSpanOf(root: PmNode): [number, number] {
   const from = firstInlinePos(root);
   const to = lastInlinePos(root);
   return [from, Math.max(from, to)];
 }
 
-export function firstInlinePos(root) {
-  let pos = null;
+export function firstInlinePos(root: PmNode): number {
+  let pos: number | null = null;
   root.descendants((node, p) => {
     if (node.isTextblock && node.content.size > 0 && pos == null) {
       pos = p + 1; // first position inside inline content
@@ -33,8 +44,8 @@ export function firstInlinePos(root) {
   return pos ?? 1;
 }
 
-export function lastInlinePos(root) {
-  let pos = null;
+export function lastInlinePos(root: PmNode): number {
+  let pos: number | null = null;
   root.descendants((node, p) => {
     if (node.isTextblock && node.content.size > 0) {
       pos = p + node.content.size; // last position inside inline content
@@ -44,29 +55,29 @@ export function lastInlinePos(root) {
   return pos ?? Math.max(1, root.nodeSize - 2);
 }
 
-export function selectionInsideFirstAndLastTextblocks(root) {
+export function selectionInsideFirstAndLastTextblocks(root: PmNode): [number, number] {
   // Convenience for “inside first item to inside last item”
   return inlineSpanOf(root);
 }
 
-export function applyCmd(state, editor, cmd) {
-  let newState = state;
+export function applyCmd(state: EditorState, editor: TestEditor, cmd: (props: CommandProps) => unknown): EditorState {
+  let newState: EditorState = state;
   cmd({
-    editor,
+    editor: editor as unknown as CommandProps['editor'],
     state,
     tr: state.tr,
-    dispatch: (tr) => {
+    dispatch: (tr: Transaction) => {
       newState = state.apply(tr);
     },
-  });
+  } as CommandProps);
   return newState;
 }
 
-export function getSelectionRange(st) {
+export function getSelectionRange(st: EditorState): [number, number] {
   return [st.selection.from, st.selection.to];
 }
 
-export function hasNestedListInsideParagraph(root) {
+export function hasNestedListInsideParagraph(root: PmNode): boolean {
   let nested = false;
   root.descendants((node) => {
     if (node.type.name === 'paragraph') {
diff --git a/packages/super-editor/src/core/commands/newlineInCode.js b/packages/super-editor/src/core/commands/newlineInCode.ts
similarity index 54%
rename from packages/super-editor/src/core/commands/newlineInCode.js
rename to packages/super-editor/src/core/commands/newlineInCode.ts
index 0f8cd94bb..232f88fc2 100644
--- a/packages/super-editor/src/core/commands/newlineInCode.js
+++ b/packages/super-editor/src/core/commands/newlineInCode.ts
@@ -1,4 +1,5 @@
 import { newlineInCode as originalNewlineInCode } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Add a newline character in code.
@@ -6,4 +7,4 @@ import { newlineInCode as originalNewlineInCode } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.newlineInCode
  */
 //prettier-ignore
-export const newlineInCode = () => ({ state, dispatch }) => originalNewlineInCode(state, dispatch);
+export const newlineInCode = (): Command => ({ state, dispatch }) => originalNewlineInCode(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/removeNumberingProperties.js b/packages/super-editor/src/core/commands/removeNumberingProperties.ts
similarity index 77%
rename from packages/super-editor/src/core/commands/removeNumberingProperties.js
rename to packages/super-editor/src/core/commands/removeNumberingProperties.ts
index 327d569ee..88120d76c 100644
--- a/packages/super-editor/src/core/commands/removeNumberingProperties.js
+++ b/packages/super-editor/src/core/commands/removeNumberingProperties.ts
@@ -1,18 +1,21 @@
-// @ts-check
+import type { Command } from '../types/ChainedCommands.js';
 import { findParentNode } from '@helpers/index.js';
 import { isList } from '@core/commands/list-helpers';
 import { decreaseListIndent } from './decreaseListIndent.js';
 import { updateNumberingProperties } from './changeListLevel.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Node } from 'prosemirror-model';
 
 export const removeNumberingProperties =
-  ({ checkType = 'startParagraph' } = {}) =>
+  ({ checkType = 'startParagraph' }: { checkType?: 'startParagraph' | 'empty' } = {}): Command =>
   (props) => {
     const { tr, state, editor, dispatch } = props;
-    const { node: paragraph, pos } = findParentNode(isList)(state.selection) || {};
+    const foundNode = findParentNode(isList)(state.selection);
+    const paragraph = foundNode?.node;
+    const pos = foundNode?.pos;
 
     // Guard checks
-    if (!paragraph) return false;
+    if (!paragraph || pos === undefined) return false;
     if (checkType === 'empty' && !isVisuallyEmptyParagraph(paragraph)) return false;
     if (checkType === 'startParagraph') {
       const { $from, empty } = state.selection;
@@ -20,7 +23,12 @@ export const removeNumberingProperties =
     }
 
     // If level > 0, outdent one level first
-    const ilvl = getResolvedParagraphProperties(paragraph).numberingProperties.ilvl;
+    const numberingProps = (getResolvedParagraphProperties(paragraph) ?? {}).numberingProperties as Record<
+      string,
+      unknown
+    > | null;
+    const ilvlRaw = numberingProps?.ilvl;
+    const ilvl = Number(ilvlRaw ?? 0);
     if (ilvl > 0) {
       const outdented = decreaseListIndent()(props);
       if (outdented) {
@@ -42,7 +50,7 @@ export const removeNumberingProperties =
  * @param {import('prosemirror-model').Node} node
  * @returns {boolean}
  */
-function isVisuallyEmptyParagraph(node) {
+function isVisuallyEmptyParagraph(node: Node): boolean {
   if (!node || node.type.name !== 'paragraph') return false;
 
   // hardBreak => not empty
diff --git a/packages/super-editor/src/core/commands/resetAttributes.test.js b/packages/super-editor/src/core/commands/resetAttributes.test.js
index b3e877a06..5f394f315 100644
--- a/packages/super-editor/src/core/commands/resetAttributes.test.js
+++ b/packages/super-editor/src/core/commands/resetAttributes.test.js
@@ -45,7 +45,7 @@ describe('resetAttributes', () => {
     let state = createState(doc);
     let appliedTr = null;
 
-    const command = resetAttributes('paragraph', ['title', 'nested.deep.drop']);
+    const command = resetAttributes('paragraph', 'title', 'nested.deep.drop');
     const dispatched = command({
       state,
       tr: state.tr,
@@ -72,7 +72,7 @@ describe('resetAttributes', () => {
     let state = createState(doc);
     let appliedTr = null;
 
-    const command = resetAttributes('highlight', ['color', 'meta.temp']);
+    const command = resetAttributes('highlight', 'color', 'meta.temp');
     const dispatched = command({
       state,
       tr: state.tr,
@@ -96,7 +96,7 @@ describe('resetAttributes', () => {
     const doc = schema.nodes.doc.create({}, paragraph);
     const state = createState(doc);
 
-    const command = resetAttributes('unknown', ['foo']);
+    const command = resetAttributes('unknown', 'foo');
     const result = command({ state, tr: state.tr, dispatch: () => {} });
 
     expect(result).toBe(false);
diff --git a/packages/super-editor/src/core/commands/resetAttributes.js b/packages/super-editor/src/core/commands/resetAttributes.ts
similarity index 76%
rename from packages/super-editor/src/core/commands/resetAttributes.js
rename to packages/super-editor/src/core/commands/resetAttributes.ts
index abf136709..6874499e4 100644
--- a/packages/super-editor/src/core/commands/resetAttributes.js
+++ b/packages/super-editor/src/core/commands/resetAttributes.ts
@@ -1,7 +1,9 @@
 import { getMarkType } from '../helpers/getMarkType.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { getNodeType } from '../helpers/getNodeType.js';
 import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName.js';
 import { deleteProps } from '../utilities/deleteProps.js';
+import type { MarkType, NodeType } from 'prosemirror-model';
 
 /**
  * Resets some node attributes to the default value.
@@ -9,10 +11,10 @@ import { deleteProps } from '../utilities/deleteProps.js';
  * @param {*} attrs  The attributes of the node to reset.
  */
 export const resetAttributes =
-  (typeOrName, attrs) =>
+  (typeOrName: string | NodeType | MarkType, ...attrs: string[]): Command =>
   ({ tr, state, dispatch }) => {
-    let nodeType = null;
-    let markType = null;
+    let nodeType: NodeType | null = null;
+    let markType: MarkType | null = null;
 
     const schemaType = getSchemaTypeNameByName(
       typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
@@ -22,10 +24,10 @@ export const resetAttributes =
     if (!schemaType) return false;
 
     if (schemaType === 'node') {
-      nodeType = getNodeType(typeOrName, state.schema);
+      nodeType = getNodeType(typeOrName as string | NodeType, state.schema);
     }
     if (schemaType === 'mark') {
-      markType = getMarkType(typeOrName, state.schema);
+      markType = getMarkType(typeOrName as string | MarkType, state.schema);
     }
 
     if (dispatch) {
diff --git a/packages/super-editor/src/core/commands/restartNumbering.js b/packages/super-editor/src/core/commands/restartNumbering.ts
similarity index 51%
rename from packages/super-editor/src/core/commands/restartNumbering.js
rename to packages/super-editor/src/core/commands/restartNumbering.ts
index c3b75fbfa..7ddf723db 100644
--- a/packages/super-editor/src/core/commands/restartNumbering.js
+++ b/packages/super-editor/src/core/commands/restartNumbering.ts
@@ -1,25 +1,34 @@
 import { findParentNode } from '@helpers/index.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { isList } from '@core/commands/list-helpers';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 import { updateNumberingProperties } from './changeListLevel.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Node } from 'prosemirror-model';
 
-export const restartNumbering = ({ editor, tr, state, dispatch }) => {
+export const restartNumbering: Command = ({ editor, tr, state, dispatch }) => {
   // 1) Find the current list item
-  const { node: paragraph, pos } = findParentNode(isList)(state.selection) || {};
+  const foundNode = findParentNode(isList)(state.selection);
+  const paragraph = foundNode?.node;
+  const pos = foundNode?.pos;
 
   // 2) If not found, return false
-  if (!paragraph) return false;
+  if (!paragraph || pos == null) return false;
 
   // 3) Find all consecutive list items of the same type following the current one
-  const allParagraphs = [{ node: paragraph, pos }];
+  const allParagraphs: Array<{ node: Node; pos: number }> = [{ node: paragraph, pos }];
   const startPos = pos + paragraph.nodeSize;
-  const myNumId = getResolvedParagraphProperties(paragraph).numberingProperties.numId;
+  const paragraphNumberingProps = (getResolvedParagraphProperties(paragraph) ?? {}).numberingProperties as Record<
+    string,
+    unknown
+  > | null;
+  const myNumId = paragraphNumberingProps?.numId;
   let stop = false;
   state.doc.nodesBetween(startPos, state.doc.content.size, (node, nodePos) => {
     if (node.type.name === 'paragraph') {
-      const paraProps = getResolvedParagraphProperties(node);
-      if (isList(node) && paraProps.numberingProperties?.numId === myNumId) {
+      const paraProps = getResolvedParagraphProperties(node) ?? {};
+      const nodeNumberingProps = paraProps.numberingProperties as Record<string, unknown> | null;
+      if (isList(node) && nodeNumberingProps?.numId === myNumId) {
         allParagraphs.push({ node, pos: nodePos });
       } else {
         stop = true;
@@ -33,15 +42,25 @@ export const restartNumbering = ({ editor, tr, state, dispatch }) => {
   const { numberingType } = paragraph.attrs.listRendering || {};
   const listType = numberingType === 'bullet' ? 'bulletList' : 'orderedList';
   const numId = ListHelpers.getNewListId(editor);
-  ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor });
+  ListHelpers.generateNewListDefinition({
+    numId: Number(numId),
+    listType,
+    editor,
+    level: undefined,
+    start: undefined,
+    text: undefined,
+    fmt: undefined,
+  });
 
   // 5) Update numbering properties for all found paragraphs
   allParagraphs.forEach(({ node, pos }) => {
-    const paragraphProps = getResolvedParagraphProperties(node);
+    const paragraphProps = getResolvedParagraphProperties(node) ?? {};
+    const nodeNumberingProps = paragraphProps.numberingProperties as Record<string, unknown> | null;
     updateNumberingProperties(
       {
-        ...(paragraphProps.numberingProperties || {}),
+        ...(nodeNumberingProps || {}),
         numId: Number(numId),
+        ilvl: Number(nodeNumberingProps?.ilvl ?? 0),
       },
       node,
       pos,
diff --git a/packages/super-editor/src/core/commands/restoreSelection.js b/packages/super-editor/src/core/commands/restoreSelection.js
deleted file mode 100644
index 91b7ac578..000000000
--- a/packages/super-editor/src/core/commands/restoreSelection.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TextSelection } from 'prosemirror-state';
-
-export const restoreSelection =
-  () =>
-  ({ editor, state, tr }) => {
-    if (editor.options.lastSelection) {
-      const selectionTr = tr.setSelection(
-        TextSelection.create(state.doc, editor.options.lastSelection.from, editor.options.lastSelection.to),
-      );
-      editor.view.dispatch(selectionTr);
-    }
-  };
diff --git a/packages/super-editor/src/core/commands/restoreSelection.ts b/packages/super-editor/src/core/commands/restoreSelection.ts
new file mode 100644
index 000000000..47aab7ea7
--- /dev/null
+++ b/packages/super-editor/src/core/commands/restoreSelection.ts
@@ -0,0 +1,13 @@
+import { TextSelection } from 'prosemirror-state';
+import type { Command } from '../types/ChainedCommands.js';
+
+export const restoreSelection =
+  (): Command =>
+  ({ editor, state, tr }) => {
+    const lastSelection = editor.options.lastSelection as { from: number; to: number } | undefined;
+    if (lastSelection) {
+      const selectionTr = tr.setSelection(TextSelection.create(state.doc, lastSelection.from, lastSelection.to));
+      editor.view.dispatch(selectionTr);
+    }
+    return true;
+  };
diff --git a/packages/super-editor/src/core/commands/selectAll.js b/packages/super-editor/src/core/commands/selectAll.ts
similarity index 53%
rename from packages/super-editor/src/core/commands/selectAll.js
rename to packages/super-editor/src/core/commands/selectAll.ts
index eaa5655e2..4ebf50287 100644
--- a/packages/super-editor/src/core/commands/selectAll.js
+++ b/packages/super-editor/src/core/commands/selectAll.ts
@@ -1,4 +1,5 @@
 import { selectAll as originalSelectAll } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Select the whole document.
@@ -6,4 +7,4 @@ import { selectAll as originalSelectAll } from 'prosemirror-commands';
  * https://prosemirror.net/docs/ref/#commands.selectAll
  */
 //prettier-ignore
-export const selectAll = () => ({ state, dispatch }) => originalSelectAll(state, dispatch);
+export const selectAll = (): Command => ({ state, dispatch }) => originalSelectAll(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/selectNodeBackward.js b/packages/super-editor/src/core/commands/selectNodeBackward.ts
similarity index 80%
rename from packages/super-editor/src/core/commands/selectNodeBackward.js
rename to packages/super-editor/src/core/commands/selectNodeBackward.ts
index 9302e344d..57e5cee10 100644
--- a/packages/super-editor/src/core/commands/selectNodeBackward.js
+++ b/packages/super-editor/src/core/commands/selectNodeBackward.ts
@@ -1,4 +1,5 @@
 import { selectNodeBackward as originalSelectNodeBackward } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Select a node backward.
@@ -6,7 +7,7 @@ import { selectNodeBackward as originalSelectNodeBackward } from 'prosemirror-co
  * https://prosemirror.net/docs/ref/#commands.selectNodeBackward
  */
 export const selectNodeBackward =
-  () =>
+  (): Command =>
   ({ state, dispatch }) => {
     return originalSelectNodeBackward(state, dispatch);
   };
diff --git a/packages/super-editor/src/core/commands/selectNodeForward.js b/packages/super-editor/src/core/commands/selectNodeForward.ts
similarity index 53%
rename from packages/super-editor/src/core/commands/selectNodeForward.js
rename to packages/super-editor/src/core/commands/selectNodeForward.ts
index 146a5a699..d9fb81600 100644
--- a/packages/super-editor/src/core/commands/selectNodeForward.js
+++ b/packages/super-editor/src/core/commands/selectNodeForward.ts
@@ -1,4 +1,5 @@
 import { selectNodeForward as originalSelectNodeForward } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Select a node forward.
@@ -6,4 +7,4 @@ import { selectNodeForward as originalSelectNodeForward } from 'prosemirror-comm
  * https://prosemirror.net/docs/ref/#commands.selectNodeForward
  */
 //prettier-ignore
-export const selectNodeForward = () => ({ state, dispatch }) => originalSelectNodeForward(state, dispatch);
+export const selectNodeForward = (): Command => ({ state, dispatch }) => originalSelectNodeForward(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/selectTextblockEnd.js b/packages/super-editor/src/core/commands/selectTextblockEnd.ts
similarity index 57%
rename from packages/super-editor/src/core/commands/selectTextblockEnd.js
rename to packages/super-editor/src/core/commands/selectTextblockEnd.ts
index e628e415e..6fb50e84b 100644
--- a/packages/super-editor/src/core/commands/selectTextblockEnd.js
+++ b/packages/super-editor/src/core/commands/selectTextblockEnd.ts
@@ -1,4 +1,5 @@
 import { selectTextblockEnd as originalSelectTextblockEnd } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Moves the cursor to the end of current text block.
@@ -6,4 +7,4 @@ import { selectTextblockEnd as originalSelectTextblockEnd } from 'prosemirror-co
  * https://prosemirror.net/docs/ref/#commands.selectTextblockEnd
  */
 //prettier-ignore
-export const selectTextblockEnd = () => ({ state, dispatch }) => originalSelectTextblockEnd(state, dispatch);
+export const selectTextblockEnd = (): Command => ({ state, dispatch }) => originalSelectTextblockEnd(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/selectTextblockStart.js b/packages/super-editor/src/core/commands/selectTextblockStart.ts
similarity index 57%
rename from packages/super-editor/src/core/commands/selectTextblockStart.js
rename to packages/super-editor/src/core/commands/selectTextblockStart.ts
index 6f4204c39..fa479bb4b 100644
--- a/packages/super-editor/src/core/commands/selectTextblockStart.js
+++ b/packages/super-editor/src/core/commands/selectTextblockStart.ts
@@ -1,4 +1,5 @@
 import { selectTextblockStart as originalSelectTextblockStart } from 'prosemirror-commands';
+import type { Command } from '../types/ChainedCommands.js';
 
 /**
  * Moves the cursor to the start of current text block.
@@ -6,4 +7,4 @@ import { selectTextblockStart as originalSelectTextblockStart } from 'prosemirro
  * https://prosemirror.net/docs/ref/#commands.selectTextblockStart
  */
 //prettier-ignore
-export const selectTextblockStart = () => ({ state, dispatch }) => originalSelectTextblockStart(state, dispatch);
+export const selectTextblockStart = (): Command => ({ state, dispatch }) => originalSelectTextblockStart(state, dispatch);
diff --git a/packages/super-editor/src/core/commands/setBodyHeaderFooter.js b/packages/super-editor/src/core/commands/setBodyHeaderFooter.ts
similarity index 82%
rename from packages/super-editor/src/core/commands/setBodyHeaderFooter.js
rename to packages/super-editor/src/core/commands/setBodyHeaderFooter.ts
index 3df4be813..492625dcb 100644
--- a/packages/super-editor/src/core/commands/setBodyHeaderFooter.js
+++ b/packages/super-editor/src/core/commands/setBodyHeaderFooter.ts
@@ -1,3 +1,6 @@
+import type { Command } from '../types/ChainedCommands.js';
+import type { Editor } from '../Editor.js';
+
 /**
  * Update document default header/footer distances (inches) via editor.updatePageStyle.
  * Triggers pagination update.
@@ -8,8 +11,8 @@
  * @returns {import('./types/index.js').Command}
  */
 export const setBodyHeaderFooter =
-  ({ headerInches, footerInches } = {}) =>
-  ({ editor }) => {
+  ({ headerInches, footerInches }: { headerInches?: number; footerInches?: number } = {}): Command =>
+  ({ editor }: { editor: Editor }): boolean => {
     if (!editor) {
       console.warn('[setBodyHeaderFooter] No editor instance provided');
       return false;
@@ -40,7 +43,7 @@ export const setBodyHeaderFooter =
 
     const styles = editor.getPageStyles?.() || {};
     const current = styles.pageMargins || {};
-    const next = { ...current };
+    const next: Record<string, unknown> = { ...(current as Record<string, unknown>) };
     if (hasHeader) next.header = headerInches;
     if (hasFooter) next.footer = footerInches;
 
diff --git a/packages/super-editor/src/core/commands/setMark.js b/packages/super-editor/src/core/commands/setMark.ts
similarity index 80%
rename from packages/super-editor/src/core/commands/setMark.js
rename to packages/super-editor/src/core/commands/setMark.ts
index 7667ed712..4347839fd 100644
--- a/packages/super-editor/src/core/commands/setMark.js
+++ b/packages/super-editor/src/core/commands/setMark.ts
@@ -1,11 +1,15 @@
+import type { EditorState, Transaction, Selection } from 'prosemirror-state';
+import type { MarkType } from 'prosemirror-model';
+import type { Editor } from '../Editor.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { Attribute } from '../Attribute.js';
 import { getMarkType } from '../helpers/getMarkType.js';
 import { isTextSelection } from '../helpers/isTextSelection.js';
 
-function canSetMark(editor, state, tr, newMarkType) {
+function canSetMark(editor: Editor, state: EditorState, tr: Transaction, newMarkType: MarkType): boolean {
   let { selection } = tr;
-  if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
+  if (editor.options.isHeaderOrFooter && editor.options.lastSelection) {
+    selection = editor.options.lastSelection as Selection;
   }
   let cursor = null;
 
@@ -52,10 +56,10 @@ function canSetMark(editor, state, tr, newMarkType) {
  * @param attributes Attributes to add.
  */
 //prettier-ignore
-export const setMark = (typeOrName, attributes = {}) => ({ tr, state, dispatch, editor }) => {
+export const setMark = (typeOrName: string | MarkType, attributes: Record<string, unknown> = {}): Command => ({ tr, state, dispatch, editor }) => {
     let { selection } = tr;
-    if (editor.options.isHeaderOrFooter) {
-      selection = editor.options.lastSelection;
+    if (editor.options.isHeaderOrFooter && editor.options.lastSelection) {
+      selection = editor.options.lastSelection as Selection;
     }
     const { empty, ranges } = selection;
     const type = getMarkType(typeOrName, state.schema);
diff --git a/packages/super-editor/src/core/commands/setMeta.js b/packages/super-editor/src/core/commands/setMeta.js
deleted file mode 100644
index 060ca47ba..000000000
--- a/packages/super-editor/src/core/commands/setMeta.js
+++ /dev/null
@@ -1,5 +0,0 @@
-//prettier-ignore
-export const setMeta = (key, value) => ({ tr }) => {
-  tr.setMeta(key, value);
-  return true;
-};
diff --git a/packages/super-editor/src/core/commands/setMeta.ts b/packages/super-editor/src/core/commands/setMeta.ts
new file mode 100644
index 000000000..5929806d2
--- /dev/null
+++ b/packages/super-editor/src/core/commands/setMeta.ts
@@ -0,0 +1,7 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+//prettier-ignore
+export const setMeta = (key: string, value: unknown): Command => ({ tr }) => {
+  tr.setMeta(key, value);
+  return true;
+};
diff --git a/packages/super-editor/src/core/commands/setNode.js b/packages/super-editor/src/core/commands/setNode.ts
similarity index 70%
rename from packages/super-editor/src/core/commands/setNode.js
rename to packages/super-editor/src/core/commands/setNode.ts
index 3c8d1e4e8..348509dfc 100644
--- a/packages/super-editor/src/core/commands/setNode.js
+++ b/packages/super-editor/src/core/commands/setNode.ts
@@ -1,4 +1,6 @@
 import { setBlockType } from 'prosemirror-commands';
+import type { NodeType } from 'prosemirror-model';
+import type { Command, CommandProps } from '../types/ChainedCommands.js';
 import { getNodeType } from '../helpers/getNodeType.js';
 
 /**
@@ -7,7 +9,7 @@ import { getNodeType } from '../helpers/getNodeType.js';
  * @param attrs The attributes of the node.
  */
 export const setNode =
-  (typeOrName, attrs = {}) =>
+  (typeOrName: string | NodeType, attrs: Record<string, unknown> = {}): Command =>
   ({ state, dispatch, chain }) => {
     const type = getNodeType(typeOrName, state.schema);
     if (!type.isTextblock) return false;
@@ -15,12 +17,12 @@ export const setNode =
     return (
       chain()
         // try to convert node to default node if needed
-        .command(({ commands }) => {
+        .command(({ commands }: CommandProps) => {
           const canSetBlock = setBlockType(type, attrs)(state);
           if (canSetBlock) return true;
           return commands.clearNodes();
         })
-        .command(({ state: updatedState }) => {
+        .command(({ state: updatedState }: CommandProps) => {
           return setBlockType(type, attrs)(updatedState, dispatch);
         })
         .run()
diff --git a/packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.js b/packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.ts
similarity index 88%
rename from packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.js
rename to packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.ts
index efce1ab8d..6b01a93ae 100644
--- a/packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.js
+++ b/packages/super-editor/src/core/commands/setSectionHeaderFooterAtSelection.ts
@@ -1,4 +1,11 @@
 import { updateSectionMargins, getSectPrMargins } from '@converter/section-properties.js';
+import type { Command } from '../types/ChainedCommands.js';
+import type { Node } from 'prosemirror-model';
+
+interface SectionHeaderFooterParams {
+  headerInches?: number;
+  footerInches?: number;
+}
 
 /**
  * Find the nearest paragraph at or before a given document position that carries a sectPr.
@@ -8,8 +15,8 @@ import { updateSectionMargins, getSectPrMargins } from '@converter/section-prope
  * @param {number} pos - Document position to search from
  * @returns {{ node: import('prosemirror-model').Node, pos: number }|null} The paragraph node and position, or null if not found
  */
-function findNearestParagraphWithSectPr(doc, pos) {
-  let target = null;
+function findNearestParagraphWithSectPr(doc: Node, pos: number): { node: Node; pos: number } | null {
+  let target: { node: Node; pos: number } | null = null;
   doc.descendants((node, nodePos) => {
     if (nodePos > pos) return false;
     if (node.type?.name === 'paragraph' && node.attrs?.paragraphProperties?.sectPr) {
@@ -33,7 +40,7 @@ function findNearestParagraphWithSectPr(doc, pos) {
  * @returns {import('./types/index.js').Command}
  */
 export const setSectionHeaderFooterAtSelection =
-  ({ headerInches, footerInches } = {}) =>
+  ({ headerInches, footerInches }: SectionHeaderFooterParams = {}): Command =>
   ({ state, editor }) => {
     if (!state || !editor) {
       console.warn('[setSectionHeaderFooterAtSelection] Missing state or editor');
@@ -78,7 +85,7 @@ export const setSectionHeaderFooterAtSelection =
     // Clone sectPr to avoid mutating node attrs in place
     const sectPr = JSON.parse(JSON.stringify(existingSectPr));
 
-    const updates = {};
+    const updates: { headerInches?: number; footerInches?: number } = {};
     if (hasHeader) updates.headerInches = headerInches;
     if (hasFooter) updates.footerInches = footerInches;
 
diff --git a/packages/super-editor/src/core/commands/setTextSelection.js b/packages/super-editor/src/core/commands/setTextSelection.ts
similarity index 86%
rename from packages/super-editor/src/core/commands/setTextSelection.js
rename to packages/super-editor/src/core/commands/setTextSelection.ts
index 785e99177..72d216d1e 100644
--- a/packages/super-editor/src/core/commands/setTextSelection.js
+++ b/packages/super-editor/src/core/commands/setTextSelection.ts
@@ -1,6 +1,7 @@
 import { TextSelection } from 'prosemirror-state';
+import type { Command } from '../types/ChainedCommands.js';
 
-const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(value, max));
 
 /**
  * Set the text selection to the provided `{ from, to }` positions.
@@ -11,7 +12,7 @@ const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
  * @returns {import('./types/index.js').Command}
  */
 export const setTextSelection =
-  ({ from, to }) =>
+  ({ from, to }: { from?: number; to?: number }): Command =>
   ({ state, dispatch, editor }) => {
     if (typeof from !== 'number' && typeof to !== 'number') {
       return false;
diff --git a/packages/super-editor/src/core/commands/skipTab.d.ts b/packages/super-editor/src/core/commands/skipTab.d.ts
new file mode 100644
index 000000000..b9cd460e9
--- /dev/null
+++ b/packages/super-editor/src/core/commands/skipTab.d.ts
@@ -0,0 +1,3 @@
+import type { Command } from '../types/ChainedCommands.js';
+
+export function skipTab(dir: 1 | -1): Command;
diff --git a/packages/super-editor/src/core/commands/splitBlock.js b/packages/super-editor/src/core/commands/splitBlock.ts
similarity index 72%
rename from packages/super-editor/src/core/commands/splitBlock.js
rename to packages/super-editor/src/core/commands/splitBlock.ts
index e58c0b43f..5938b5751 100644
--- a/packages/super-editor/src/core/commands/splitBlock.js
+++ b/packages/super-editor/src/core/commands/splitBlock.ts
@@ -1,9 +1,11 @@
 import { NodeSelection, TextSelection } from 'prosemirror-state';
+import type { Command } from '../types/ChainedCommands.js';
 import { canSplit } from 'prosemirror-transform';
 import { defaultBlockAt } from '../helpers/defaultBlockAt.js';
-import { Attribute } from '../Attribute.js';
+import { Attribute, type AttributeValue } from '../Attribute.js';
+import type { EditorState } from 'prosemirror-state';
 
-const ensureMarks = (state, splittableMarks) => {
+const ensureMarks = (state: EditorState, splittableMarks: string[]): void => {
   const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
   if (marks) {
     const filtered = marks.filter((m) => splittableMarks?.includes(m.type.name));
@@ -21,14 +23,21 @@ const ensureMarks = (state, splittableMarks) => {
  * https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.ts#L357
  */
 export const splitBlock =
-  ({ keepMarks = true, attrsToRemoveOverride = [] } = {}) =>
+  ({
+    keepMarks = true,
+    attrsToRemoveOverride = [],
+  }: { keepMarks?: boolean; attrsToRemoveOverride?: string[] } = {}): Command =>
   (props) => {
     const { tr, state, dispatch, editor } = props;
     const { selection, doc } = tr;
     const { $from, $to } = selection;
 
     const extensionAttrs = editor.extensionService.attributes;
-    let newAttrs = Attribute.getSplittedAttributes(extensionAttrs, $from.node().type.name, $from.node().attrs);
+    let newAttrs: Record<string, AttributeValue> = Attribute.getSplittedAttributes(
+      extensionAttrs,
+      $from.node().type.name,
+      $from.node().attrs,
+    ) as Record<string, AttributeValue>;
 
     // Remove any overridden attributes
     if (attrsToRemoveOverride.length > 0) {
@@ -78,19 +87,24 @@ export const splitBlock =
     return true;
   };
 
-function deleteAttributes(attrs, attrsToRemove) {
+function deleteAttributes(
+  attrs: Record<string, AttributeValue>,
+  attrsToRemove: string[],
+): Record<string, AttributeValue> {
   const newAttrs = { ...attrs };
   attrsToRemove.forEach((attrName) => {
     const parts = attrName.split('.');
     if (parts.length === 1) {
       delete newAttrs[attrName];
     } else {
-      let current = newAttrs;
+      let current: Record<string, AttributeValue> | AttributeValue = newAttrs;
       for (let i = 0; i < parts.length - 1; i++) {
-        if (current[parts[i]] == null) return;
-        current = current[parts[i]];
+        if (current == null || typeof current !== 'object' || Array.isArray(current)) return;
+        current = (current as Record<string, AttributeValue>)[parts[i]];
+      }
+      if (current != null && typeof current === 'object' && !Array.isArray(current)) {
+        delete (current as Record<string, AttributeValue>)[parts[parts.length - 1]];
       }
-      delete current[parts[parts.length - 1]];
     }
   });
   return newAttrs;
diff --git a/packages/super-editor/src/core/commands/textIndent.js b/packages/super-editor/src/core/commands/textIndent.ts
similarity index 74%
rename from packages/super-editor/src/core/commands/textIndent.js
rename to packages/super-editor/src/core/commands/textIndent.ts
index 540db1707..1943048b0 100644
--- a/packages/super-editor/src/core/commands/textIndent.js
+++ b/packages/super-editor/src/core/commands/textIndent.ts
@@ -1,5 +1,7 @@
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { ptToTwips } from '@converter/helpers';
+import type { Node } from 'prosemirror-model';
 
 const defaultIncrementPoints = 36;
 
@@ -12,7 +14,7 @@ const defaultIncrementPoints = 36;
  * @note Increments by the default value (36 points by default)
  * @note Creates initial indent if none exists
  */
-export const increaseTextIndent = () => modifyIndentation((node) => calculateNewIndentation(node, 1));
+export const increaseTextIndent = (): Command => modifyIndentation((node) => calculateNewIndentation(node, 1));
 
 /**
  * Decrease text indentation
@@ -23,7 +25,7 @@ export const increaseTextIndent = () => modifyIndentation((node) => calculateNew
  * @note Decrements by the default value (36 points by default)
  * @note Removes indentation completely if it reaches 0 or below
  */
-export const decreaseTextIndent = () => modifyIndentation((node) => calculateNewIndentation(node, -1));
+export const decreaseTextIndent = (): Command => modifyIndentation((node) => calculateNewIndentation(node, -1));
 
 /**
  * Set text indentation
@@ -35,7 +37,7 @@ export const decreaseTextIndent = () => modifyIndentation((node) => calculateNew
  * setTextIndentation(72)
  * @note Accepts indentation value in points
  */
-export const setTextIndentation = (points) => modifyIndentation(() => ptToTwips(points));
+export const setTextIndentation = (points: number): Command => modifyIndentation(() => ptToTwips(points));
 
 /**
  * Remove text indentation
@@ -45,7 +47,7 @@ export const setTextIndentation = (points) => modifyIndentation(() => ptToTwips(
  * unsetTextIndent()
  * @note Removes inline indentation from the selected nodes
  */
-export const unsetTextIndentation = () => modifyIndentation(() => null);
+export const unsetTextIndentation = (): Command => modifyIndentation(() => null);
 
 /**
  * Calculate new indentation based on delta
@@ -53,19 +55,14 @@ export const unsetTextIndentation = () => modifyIndentation(() => null);
  * @param {number} delta - The delta to apply (positive to increase, negative to decrease)
  * @returns {number|null} New left indentation in twips, or null if no indentation
  */
-function calculateNewIndentation(node, delta) {
-  let { indent } = getResolvedParagraphProperties(node);
-  let { left } = indent || {};
-
+function calculateNewIndentation(node: Node, delta: number): number | null {
+  const { indent } = getResolvedParagraphProperties(node) ?? {};
   const increment = ptToTwips(delta * defaultIncrementPoints);
-  if (!left) {
-    left = increment;
-  } else {
-    left += increment;
-  }
+  let left = typeof indent?.left === 'number' ? indent.left : 0;
+  left += increment;
 
   if (left <= 0) {
-    left = null;
+    return null;
   }
   return left;
 }
@@ -74,17 +71,17 @@ function calculateNewIndentation(node, delta) {
  * @param {Function} calcFunc - Function to calculate new indentation
  * @returns {Function} Command function
  */
-function modifyIndentation(calcFunc) {
+function modifyIndentation(calcFunc: (node: Node) => number | null): Command {
   return ({ state, dispatch }) => {
     const tr = state.tr;
 
     const { from, to } = state.selection;
-    const results = [];
+    const results: boolean[] = [];
 
     state.doc.nodesBetween(from, to, (node, pos) => {
       if (node.type.name === 'paragraph') {
-        let left = calcFunc(node);
-        if (Number.isNaN(left)) {
+        const left = calcFunc(node);
+        if (left !== null && Number.isNaN(left)) {
           results.push(false);
           return false;
         }
diff --git a/packages/super-editor/src/core/commands/toggleList.js b/packages/super-editor/src/core/commands/toggleList.ts
similarity index 78%
rename from packages/super-editor/src/core/commands/toggleList.js
rename to packages/super-editor/src/core/commands/toggleList.ts
index 341e0787b..a89d4c0f3 100644
--- a/packages/super-editor/src/core/commands/toggleList.js
+++ b/packages/super-editor/src/core/commands/toggleList.ts
@@ -1,27 +1,28 @@
-// @ts-check
+import type { Command } from '../types/ChainedCommands.js';
 import { updateNumberingProperties } from './changeListLevel.js';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Node } from 'prosemirror-model';
 import { isVisuallyEmptyParagraph } from './removeNumberingProperties.js';
 import { TextSelection } from 'prosemirror-state';
 
 export const toggleList =
-  (listType) =>
+  (listType: 'orderedList' | 'bulletList'): Command =>
   ({ editor, state, tr, dispatch }) => {
     // 1. Find first paragraph in selection that is a list of the same type
-    let predicate;
+    let predicate: (n: Node) => boolean;
     if (listType === 'orderedList') {
-      predicate = (n) => {
-        const paraProps = getResolvedParagraphProperties(n);
-        return (
-          paraProps.numberingProperties && n.attrs.listRendering && n.attrs.listRendering.numberingType !== 'bullet'
+      predicate = (n): boolean => {
+        const paraProps = getResolvedParagraphProperties(n) ?? {};
+        return Boolean(
+          paraProps.numberingProperties && n.attrs.listRendering && n.attrs.listRendering.numberingType !== 'bullet',
         );
       };
     } else if (listType === 'bulletList') {
-      predicate = (n) => {
-        const paraProps = getResolvedParagraphProperties(n);
-        return (
-          paraProps.numberingProperties && n.attrs.listRendering && n.attrs.listRendering.numberingType === 'bullet'
+      predicate = (n): boolean => {
+        const paraProps = getResolvedParagraphProperties(n) ?? {};
+        return Boolean(
+          paraProps.numberingProperties && n.attrs.listRendering && n.attrs.listRendering.numberingType === 'bullet',
         );
       };
     } else {
@@ -29,9 +30,9 @@ export const toggleList =
     }
     const { selection } = state;
     const { from, to } = selection;
-    let firstListNode = null;
+    let firstListNode: Node | null = null;
     let hasNonListParagraphs = false;
-    let allParagraphsInSelection = [];
+    const allParagraphsInSelection: Array<{ node: Node; pos: number }> = [];
     state.doc.nodesBetween(from, to, (node, pos) => {
       if (node.type.name === 'paragraph') {
         allParagraphsInSelection.push({ node, pos });
@@ -43,7 +44,7 @@ export const toggleList =
     // Skip visually empty paragraphs (e.g., paragraphs with only an empty run)
     // but only when creating a list from multiple paragraphs.
     // If only a single paragraph is selected (even if empty), we should still apply the list.
-    let paragraphsInSelection =
+    const paragraphsInSelection =
       allParagraphsInSelection.length === 1
         ? allParagraphsInSelection
         : allParagraphsInSelection.filter(({ node }) => !isVisuallyEmptyParagraph(node));
@@ -67,8 +68,8 @@ export const toggleList =
       }
     }
     // 3. Resolve numbering properties
-    let mode = null;
-    let sharedNumberingProperties = null;
+    let mode: 'remove' | 'reuse' | 'create' | null = null;
+    let sharedNumberingProperties: { numId: number; ilvl: number } | null = null;
     if (firstListNode) {
       if (!hasNonListParagraphs) {
         // All paragraphs are already lists of the same type, remove the list formatting
@@ -76,18 +77,27 @@ export const toggleList =
       } else {
         // Apply numbering properties to new list paragraphs while keeping existing list items untouched
         mode = 'reuse';
-        const paraProps = getResolvedParagraphProperties(firstListNode);
-        const baseNumbering = paraProps.numberingProperties || {};
+        const paraProps = getResolvedParagraphProperties(firstListNode) ?? {};
+        const baseNumbering = (paraProps.numberingProperties as Record<string, unknown>) || {};
         sharedNumberingProperties = {
-          ...baseNumbering,
-          ilvl: baseNumbering.ilvl ?? 0,
+          ...(baseNumbering as Record<string, unknown>),
+          numId: Number((baseNumbering as Record<string, unknown>).numId ?? ListHelpers.getNewListId(editor)),
+          ilvl: Number((baseNumbering as Record<string, unknown>).ilvl ?? 0),
         };
       }
     } else {
       // If list paragraph was not found, create a new list definition and apply it to all paragraphs in selection
       mode = 'create';
       const numId = ListHelpers.getNewListId(editor);
-      ListHelpers.generateNewListDefinition({ numId: Number(numId), listType, editor });
+      ListHelpers.generateNewListDefinition({
+        numId: Number(numId),
+        listType,
+        editor,
+        level: undefined,
+        start: undefined,
+        text: undefined,
+        fmt: undefined,
+      });
       sharedNumberingProperties = {
         numId: Number(numId),
         ilvl: 0,
diff --git a/packages/super-editor/src/core/commands/toggleMark.js b/packages/super-editor/src/core/commands/toggleMark.ts
similarity index 57%
rename from packages/super-editor/src/core/commands/toggleMark.js
rename to packages/super-editor/src/core/commands/toggleMark.ts
index eafa819b2..f8a832207 100644
--- a/packages/super-editor/src/core/commands/toggleMark.js
+++ b/packages/super-editor/src/core/commands/toggleMark.ts
@@ -1,3 +1,5 @@
+import type { MarkType } from 'prosemirror-model';
+import type { Command } from '../types/ChainedCommands.js';
 import { getMarkType } from '../helpers/getMarkType.js';
 import { isMarkActive } from '../helpers/isMarkActive.js';
 
@@ -8,11 +10,15 @@ import { isMarkActive } from '../helpers/isMarkActive.js';
  * @param options.extendEmptyMarkRange Removes the mark even across the current selection.
  */
 export const toggleMark =
-  (typeOrName, attrs = {}, options = {}) =>
+  (
+    typeOrName: string | MarkType,
+    attrs: Record<string, unknown> = {},
+    options: { extendEmptyMarkRange?: boolean } = {},
+  ): Command =>
   ({ state, commands }) => {
     const { extendEmptyMarkRange = false } = options;
     const type = getMarkType(typeOrName, state.schema);
     const isActive = isMarkActive(state, type, attrs);
-    if (isActive) return commands.unsetMark(type, { extendEmptyMarkRange });
-    return commands.setMark(type, attrs);
+    if (isActive) return Boolean(commands.unsetMark(type, { extendEmptyMarkRange }));
+    return Boolean(commands.setMark(type, attrs));
   };
diff --git a/packages/super-editor/src/core/commands/toggleMarkCascade.js b/packages/super-editor/src/core/commands/toggleMarkCascade.ts
similarity index 66%
rename from packages/super-editor/src/core/commands/toggleMarkCascade.js
rename to packages/super-editor/src/core/commands/toggleMarkCascade.ts
index de1734f47..b83c792e5 100644
--- a/packages/super-editor/src/core/commands/toggleMarkCascade.js
+++ b/packages/super-editor/src/core/commands/toggleMarkCascade.ts
@@ -1,4 +1,25 @@
 import { getMarksFromSelection } from '../helpers/getMarksFromSelection.js';
+import type { Command, ChainableCommandObject } from '../types/ChainedCommands.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark } from 'prosemirror-model';
+import type { Editor } from '../Editor.js';
+
+interface ToggleMarkCascadeOptions {
+  negationAttrs?: Record<string, unknown>;
+  isNegation?: (attrs: Record<string, unknown>) => boolean;
+  styleDetector?: (params: { state: EditorState; selectionMarks: Mark[]; markName: string; editor: Editor }) => boolean;
+  extendEmptyMarkRange?: boolean;
+}
+
+/**
+ * Helper type for chainable commands that support extended setMark API.
+ * The setMark command's base signature doesn't include the options parameter,
+ * but the chainable command system may support it at runtime for consistency
+ * with other mark commands like unsetMark.
+ */
+type ChainWithExtendedSetMark = ChainableCommandObject & {
+  setMark(name: string, attrs: Record<string, unknown>, opts?: Record<string, unknown>): ChainableCommandObject;
+};
 
 /**
  * Cascade-aware toggle for marks that may be provided by styles (e.g., rStyle in runProperties).
@@ -18,11 +39,11 @@ import { getMarksFromSelection } from '../helpers/getMarksFromSelection.js';
  * }} [options]
  */
 export const toggleMarkCascade =
-  (markName, options = {}) =>
+  (markName: string, options: ToggleMarkCascadeOptions = {}): Command =>
   ({ state, chain, editor }) => {
     const {
       negationAttrs = { value: '0' },
-      isNegation = (attrs) => attrs?.value === '0',
+      isNegation = (attrs: Record<string, unknown>): boolean => attrs?.value === '0',
       styleDetector = defaultStyleDetector,
       extendEmptyMarkRange = true,
     } = options;
@@ -39,8 +60,7 @@ export const toggleMarkCascade =
 
     // 2) If inline is present and style is also ON, we must both remove inline AND add negation
     if (hasInline && styleOn) {
-      return cmdChain
-        .unsetMark(markName, { extendEmptyMarkRange })
+      return (cmdChain.unsetMark(markName, { extendEmptyMarkRange }) as ChainWithExtendedSetMark)
         .setMark(markName, negationAttrs, { extendEmptyMarkRange })
         .run();
     }
@@ -49,10 +69,12 @@ export const toggleMarkCascade =
     if (hasInline) return cmdChain.unsetMark(markName, { extendEmptyMarkRange }).run();
 
     // 4) If only style is present, add negation (turn OFF)
-    if (styleOn) return cmdChain.setMark(markName, negationAttrs, { extendEmptyMarkRange }).run();
+    if (styleOn) {
+      return (cmdChain as ChainWithExtendedSetMark).setMark(markName, negationAttrs, { extendEmptyMarkRange }).run();
+    }
 
     // 5) Neither inline nor style is present; turn ON inline
-    return cmdChain.setMark(markName, {}, { extendEmptyMarkRange }).run();
+    return (cmdChain as ChainWithExtendedSetMark).setMark(markName, {}, { extendEmptyMarkRange }).run();
   };
 
 /**
@@ -60,24 +82,52 @@ export const toggleMarkCascade =
  * @param {Object} params
  * @returns {boolean}
  */
-export function defaultStyleDetector({ state, selectionMarks, markName, editor }) {
+export function defaultStyleDetector({
+  state,
+  selectionMarks,
+  markName,
+  editor,
+}: {
+  state: EditorState;
+  selectionMarks: Mark[];
+  markName: string;
+  editor: Editor;
+}): boolean {
   try {
     const styleId = getEffectiveStyleId(state, selectionMarks);
-    if (!styleId || !editor?.converter?.linkedStyles) return false;
+    if (!styleId) return false;
+
+    // Type guard: converter exists and has linkedStyles array
+    const converter = editor?.converter as
+      | {
+          linkedStyles?: Array<{
+            id: string;
+            definition?: {
+              styles?: Record<string, unknown>;
+              attrs?: { basedOn?: string };
+            };
+          }>;
+        }
+      | null
+      | undefined;
+
+    const linkedStyles = converter?.linkedStyles;
+    if (!linkedStyles || !Array.isArray(linkedStyles)) return false;
+
     // Resolve styles with basedOn chain
-    const styles = editor.converter.linkedStyles;
-    const seen = new Set();
-    let current = styleId;
+    const seen = new Set<string>();
+    let current: string | null = styleId;
     const key = mapMarkToStyleKey(markName);
+
     while (current && !seen.has(current)) {
       seen.add(current);
-      const style = styles.find((s) => s.id === current);
+      const style = linkedStyles.find((s) => s.id === current);
       const def = style?.definition?.styles || {};
       if (key in def) {
         const raw = def[key];
         // Some style parsers set the key with undefined value to indicate presence (ON)
         if (raw === undefined) return true;
-        const val = raw?.value ?? raw;
+        const val = (raw as { value?: unknown } | undefined)?.value ?? raw;
         return isStyleTokenEnabled(val);
       }
       current = style?.definition?.attrs?.basedOn || null;
@@ -102,7 +152,7 @@ export function defaultStyleDetector({ state, selectionMarks, markName, editor }
  * @param {Array} selectionMarks - Array of marks from the current selection
  * @returns {string|null} The effective style ID, or null if none found
  */
-export function getEffectiveStyleId(state, selectionMarks) {
+export function getEffectiveStyleId(state: EditorState, selectionMarks: Mark[]): string | null {
   // 1) Run-level style resolved from the current mark set
   const sidFromMarks = getStyleIdFromMarks(selectionMarks);
   if (sidFromMarks) return sidFromMarks;
@@ -139,7 +189,7 @@ export function getEffectiveStyleId(state, selectionMarks) {
  * @param {import('prosemirror-model').Mark[]} marks
  * @returns {string|null}
  */
-export function getStyleIdFromMarks(marks) {
+export function getStyleIdFromMarks(marks: readonly Mark[]): string | null {
   if (!Array.isArray(marks)) return null;
 
   const textStyleMark = marks.find((m) => m.type?.name === 'textStyle' && m.attrs?.styleId);
@@ -156,12 +206,12 @@ export function getStyleIdFromMarks(marks) {
  * @param {string} markName - The name of the mark to map
  * @returns {string} The corresponding style key
  */
-export function mapMarkToStyleKey(markName) {
+export function mapMarkToStyleKey(markName: string): string {
   if (markName === 'textStyle' || markName === 'color') return 'color';
   return markName;
 }
 
-export function isStyleTokenEnabled(val) {
+export function isStyleTokenEnabled(val: unknown): boolean {
   if (val === false || val === 0) return false;
   if (typeof val === 'string') {
     const normalized = val.trim().toLowerCase();
diff --git a/packages/super-editor/src/core/commands/toggleNode.js b/packages/super-editor/src/core/commands/toggleNode.ts
similarity index 61%
rename from packages/super-editor/src/core/commands/toggleNode.js
rename to packages/super-editor/src/core/commands/toggleNode.ts
index 85c9e9e32..7a5973378 100644
--- a/packages/super-editor/src/core/commands/toggleNode.js
+++ b/packages/super-editor/src/core/commands/toggleNode.ts
@@ -1,3 +1,5 @@
+import type { NodeType } from 'prosemirror-model';
+import type { Command } from '../types/ChainedCommands.js';
 import { getNodeType } from '../helpers/getNodeType.js';
 import { isNodeActive } from '../helpers/isNodeActive.js';
 
@@ -8,11 +10,11 @@ import { isNodeActive } from '../helpers/isNodeActive.js';
  * @param attrs The attrs of the node.
  */
 export const toggleNode =
-  (typeOrName, toggleTypeOrName, attrs = {}) =>
+  (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs: Record<string, unknown> = {}): Command =>
   ({ state, commands }) => {
     const type = getNodeType(typeOrName, state.schema);
     const toggleType = getNodeType(toggleTypeOrName, state.schema);
     const isActive = isNodeActive(state, type, attrs);
-    if (isActive) return commands.setNode(toggleType);
-    return commands.setNode(type, attrs);
+    if (isActive) return Boolean(commands.setNode(toggleType));
+    return Boolean(commands.setNode(type, attrs));
   };
diff --git a/packages/super-editor/src/core/commands/types/index.js b/packages/super-editor/src/core/commands/types/index.ts
similarity index 100%
rename from packages/super-editor/src/core/commands/types/index.js
rename to packages/super-editor/src/core/commands/types/index.ts
diff --git a/packages/super-editor/src/core/commands/undoInputRule.js b/packages/super-editor/src/core/commands/undoInputRule.ts
similarity index 66%
rename from packages/super-editor/src/core/commands/undoInputRule.js
rename to packages/super-editor/src/core/commands/undoInputRule.ts
index fe0b35f16..f199ade8d 100644
--- a/packages/super-editor/src/core/commands/undoInputRule.js
+++ b/packages/super-editor/src/core/commands/undoInputRule.ts
@@ -1,13 +1,24 @@
+import type { Command } from '../types/ChainedCommands.js';
+import type { Step } from 'prosemirror-transform';
+import type { Node as ProseMirrorNode } from 'prosemirror-model';
+
+type UndoableState = {
+  transform: { steps: Step[]; docs: ProseMirrorNode[] };
+  from: number;
+  to: number;
+  text?: string;
+};
+
 export const undoInputRule =
-  () =>
+  (): Command =>
   ({ state, dispatch }) => {
     const plugins = state.plugins;
 
     for (let i = 0; i < plugins.length; i += 1) {
       const plugin = plugins[i];
-      let undoable;
+      let undoable: UndoableState | null = null;
 
-      if (plugin.spec.isInputRules && (undoable = plugin.getState(state))) {
+      if (plugin.spec.isInputRules && (undoable = plugin.getState(state) as UndoableState | null)) {
         if (dispatch) {
           const tr = state.tr;
           const toUndo = undoable.transform;
diff --git a/packages/super-editor/src/core/commands/unsetAllMarks.js b/packages/super-editor/src/core/commands/unsetAllMarks.ts
similarity index 65%
rename from packages/super-editor/src/core/commands/unsetAllMarks.js
rename to packages/super-editor/src/core/commands/unsetAllMarks.ts
index ba9cc2b9d..d5775f2dc 100644
--- a/packages/super-editor/src/core/commands/unsetAllMarks.js
+++ b/packages/super-editor/src/core/commands/unsetAllMarks.ts
@@ -1,11 +1,14 @@
+import type { Command } from '../types/ChainedCommands.js';
+import type { Selection } from 'prosemirror-state';
+
 /**
  * Remove all marks in the current selection.
  */
 //prettier-ignore
-export const unsetAllMarks = () => ({ tr, dispatch, editor }) => {
+export const unsetAllMarks = (): Command => ({ tr, dispatch, editor }) => {
   let { selection } = tr;
   if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
+    selection = editor.options.lastSelection as Selection;
   }
   const { empty, ranges } = selection;
 
diff --git a/packages/super-editor/src/core/commands/unsetMark.js b/packages/super-editor/src/core/commands/unsetMark.ts
similarity index 75%
rename from packages/super-editor/src/core/commands/unsetMark.js
rename to packages/super-editor/src/core/commands/unsetMark.ts
index 3814c85a6..0ffb40fd1 100644
--- a/packages/super-editor/src/core/commands/unsetMark.js
+++ b/packages/super-editor/src/core/commands/unsetMark.ts
@@ -1,5 +1,8 @@
+import type { MarkType } from 'prosemirror-model';
+import type { Command } from '../types/ChainedCommands.js';
 import { getMarkRange } from '../helpers/getMarkRange.js';
 import { getMarkType } from '../helpers/getMarkType.js';
+import type { Selection } from 'prosemirror-state';
 
 /**
  * Remove all marks in the current selection.
@@ -7,11 +10,11 @@ import { getMarkType } from '../helpers/getMarkType.js';
  * @param options.extendEmptyMarkRange Removes the mark even across the current selection.
  */
 //prettier-ignore
-export const unsetMark = (typeOrName, options = {}) => ({ tr, state, dispatch, editor }) => {
+export const unsetMark = (typeOrName: string | MarkType, options: { extendEmptyMarkRange?: boolean } = {}): Command => ({ tr, state, dispatch, editor }) => {
   const { extendEmptyMarkRange = false } = options;
   let { selection } = tr;
   if (editor.options.isHeaderOrFooter) {
-    selection = editor.options.lastSelection;
+    selection = editor.options.lastSelection as Selection;
   }
   const type = getMarkType(typeOrName, state.schema);
   const { $from, empty, ranges } = selection;
diff --git a/packages/super-editor/src/core/commands/updateAttributes.js b/packages/super-editor/src/core/commands/updateAttributes.ts
similarity index 78%
rename from packages/super-editor/src/core/commands/updateAttributes.js
rename to packages/super-editor/src/core/commands/updateAttributes.ts
index a5d2fee4d..f7b316d8d 100644
--- a/packages/super-editor/src/core/commands/updateAttributes.js
+++ b/packages/super-editor/src/core/commands/updateAttributes.ts
@@ -1,6 +1,8 @@
 import { getMarkType } from '../helpers/getMarkType.js';
+import type { Command } from '../types/ChainedCommands.js';
 import { getNodeType } from '../helpers/getNodeType.js';
 import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName.js';
+import type { MarkType, NodeType } from 'prosemirror-model';
 
 /**
  * Update attributes of a node or mark.
@@ -9,7 +11,7 @@ import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName.js';
  * @returns {(params: { tr: import('prosemirror-state').Transaction, state: import('prosemirror-state').EditorState, dispatch?: (tr: import('prosemirror-state').Transaction) => void }) => boolean}
  */
 //prettier-ignore
-export const updateAttributes = (typeOrName, attrs = {}) => ({ tr, state, dispatch }) => {
+export const updateAttributes = (typeOrName: string | NodeType | MarkType, attrs: Record<string, unknown> = {}): Command => ({ tr, state, dispatch }) => {
   let nodeType = null;
   let markType = null;
 
@@ -21,10 +23,10 @@ export const updateAttributes = (typeOrName, attrs = {}) => ({ tr, state, dispat
   if (!schemaType) return false;
 
   if (schemaType === 'node') {
-    nodeType = getNodeType(typeOrName, state.schema);
+    nodeType = getNodeType(typeOrName as string, state.schema);
   }
   if (schemaType === 'mark') {
-    markType = getMarkType(typeOrName, state.schema);
+    markType = getMarkType(typeOrName as string, state.schema);
   }
 
   if (dispatch) {
@@ -62,7 +64,8 @@ export const updateAttributes = (typeOrName, attrs = {}) => ({ tr, state, dispat
  * @param {unknown} value
  * @returns {value is Record<string, any>}
  */
-const isPlainObject = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 
 /**
  * Assigns a value to a dot-notation path within an object.
@@ -70,7 +73,7 @@ const isPlainObject = (value) => Boolean(value) && typeof value === 'object' &&
  * @param {string} path
  * @param {any} value
  */
-const assignNestedValue = (target, path, value) => {
+const assignNestedValue = (target: Record<string, unknown>, path: string, value: unknown): void => {
   if (!path.includes('.')) {
     target[path] = value;
     return;
@@ -88,7 +91,7 @@ const assignNestedValue = (target, path, value) => {
       if (!isPlainObject(current[part])) {
         current[part] = {};
       }
-      current = current[part];
+      current = current[part] as Record<string, unknown>;
     }
   }
 };
@@ -99,7 +102,10 @@ const assignNestedValue = (target, path, value) => {
  * @param {Record<string, any>} newAttrs
  * @returns {Record<string, any>}
  */
-const mergeAttributes = (existingAttrs = {}, newAttrs = {}) => {
+const mergeAttributes = (
+  existingAttrs: Record<string, unknown> = {},
+  newAttrs: Record<string, unknown> = {},
+): Record<string, unknown> => {
   const expandedAttrs = JSON.parse(JSON.stringify(existingAttrs));
 
   Object.entries(newAttrs).forEach(([key, value]) => {
diff --git a/packages/super-editor/src/core/encoding-helpers.js b/packages/super-editor/src/core/encoding-helpers.js
deleted file mode 100644
index f04eeecad..000000000
--- a/packages/super-editor/src/core/encoding-helpers.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Quick check for .xml / .rels
- * @param {string} name
- * @returns {boolean} True if the name has a .xml or .rels extension
- */
-export const isXmlLike = (name) => /\.xml$|\.rels$/i.test(name);
-
-/**
- * Hex dump for optional debugging
- * @param {Uint8Array|ArrayBuffer} bytes
- * @param {number} n
- * @returns {string} Hex dump
- */
-export function hex(bytes, n = 32) {
-  const u8 = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
-  return Array.from(u8.slice(0, n))
-    .map((b) => b.toString(16).padStart(2, '0'))
-    .join(' ');
-}
-
-/**
- * Try to detect encoding by BOM / null density
- * @param {Uint8Array} u8
- * @returns {string} Detected encoding
- */
-export function sniffEncoding(u8) {
-  if (u8.length >= 2) {
-    const b0 = u8[0],
-      b1 = u8[1];
-    if (b0 === 0xff && b1 === 0xfe) return 'utf-16le';
-    if (b0 === 0xfe && b1 === 0xff) return 'utf-16be';
-  }
-  // Heuristic: lots of NULs near the start → likely UTF-16
-  let nul = 0;
-  for (let i = 0; i < Math.min(64, u8.length); i++) if (u8[i] === 0) nul++;
-  if (nul > 16) return 'utf-16le';
-  return 'utf-8';
-}
-
-/**
- * Remove leading BOM from already-decoded JS string
- * @param {string} str
- * @returns {string} Cleaned string without BOM
- */
-export function stripBOM(str) {
-  return str && str.charCodeAt(0) === 0xfeff ? str.slice(1) : str;
-}
-
-/**
- * Decode XML/RELS content to a clean JS string.
- * Accepts: string | Uint8Array | ArrayBuffer
- * @param {string|Uint8Array|ArrayBuffer} content
- * @returns {string} Clean XML string
- */
-export function ensureXmlString(content) {
-  if (typeof content === 'string') return stripBOM(content);
-
-  // Accept: Buffer, Uint8Array, DataView, any TypedArray, or ArrayBuffer
-  let u8 = null;
-
-  if (content && typeof content === 'object') {
-    if (content instanceof Uint8Array) {
-      u8 = content;
-    } else if (typeof Buffer !== 'undefined' && Buffer.isBuffer && Buffer.isBuffer(content)) {
-      // Node Buffer
-      u8 = new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
-    } else if (ArrayBuffer.isView && ArrayBuffer.isView(content)) {
-      // Any ArrayBufferView: DataView or other TypedArray
-      u8 = new Uint8Array(content.buffer, content.byteOffset, content.byteLength);
-    } else if (content.constructor && (content instanceof ArrayBuffer || content.constructor.name === 'ArrayBuffer')) {
-      u8 = new Uint8Array(content);
-    }
-  }
-
-  if (!u8) throw new Error('Unsupported content type for XML');
-
-  const enc = sniffEncoding(u8);
-  let xml = new TextDecoder(enc).decode(u8);
-  return stripBOM(xml);
-}
diff --git a/packages/super-editor/src/core/encoding-helpers.ts b/packages/super-editor/src/core/encoding-helpers.ts
new file mode 100644
index 000000000..722d012b7
--- /dev/null
+++ b/packages/super-editor/src/core/encoding-helpers.ts
@@ -0,0 +1,88 @@
+/**
+ * Quick check for .xml / .rels
+ * @param name File name to check
+ * @returns True if the name has a .xml or .rels extension
+ */
+export const isXmlLike = (name: string): boolean => /\.xml$|\.rels$/i.test(name);
+
+/**
+ * Hex dump for optional debugging
+ * @param bytes Bytes to dump
+ * @param n Number of bytes to dump
+ * @returns Hex dump
+ */
+export function hex(bytes: Uint8Array | ArrayBuffer, n: number = 32): string {
+  const u8 = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
+  return Array.from(u8.slice(0, n))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join(' ');
+}
+
+/**
+ * Try to detect encoding by BOM / null density
+ * @param u8 Byte array to check
+ * @returns Detected encoding
+ */
+export function sniffEncoding(u8: Uint8Array): string {
+  if (u8.length >= 2) {
+    const b0 = u8[0],
+      b1 = u8[1];
+    if (b0 === 0xff && b1 === 0xfe) return 'utf-16le';
+    if (b0 === 0xfe && b1 === 0xff) return 'utf-16be';
+  }
+  // Heuristic: lots of NULs near the start → likely UTF-16
+  let nul = 0;
+  for (let i = 0; i < Math.min(64, u8.length); i++) if (u8[i] === 0) nul++;
+  if (nul > 16) return 'utf-16le';
+  return 'utf-8';
+}
+
+/**
+ * Remove leading BOM from already-decoded JS string
+ * @param str String to strip BOM from
+ * @returns Cleaned string without BOM
+ */
+export function stripBOM(str: string): string {
+  return str && str.charCodeAt(0) === 0xfeff ? str.slice(1) : str;
+}
+
+/**
+ * Decode XML/RELS content to a clean JS string.
+ * Accepts: string | Uint8Array | ArrayBuffer
+ * @param content Content to decode
+ * @returns Clean XML string
+ */
+export function ensureXmlString(content: string | Uint8Array | ArrayBuffer | Buffer): string {
+  if (typeof content === 'string') return stripBOM(content);
+
+  // Accept: Buffer, Uint8Array, DataView, any TypedArray, or ArrayBuffer
+  let u8: Uint8Array | null = null;
+
+  if (content && typeof content === 'object') {
+    if (content instanceof Uint8Array) {
+      u8 = content;
+    } else if (content instanceof ArrayBuffer) {
+      u8 = new Uint8Array(content);
+    } else if (typeof Buffer !== 'undefined' && Buffer.isBuffer && Buffer.isBuffer(content)) {
+      // Node Buffer - using type assertion since Buffer type isn't fully known here
+      const bufferContent = content as unknown as { buffer: ArrayBuffer; byteOffset: number; byteLength: number };
+      u8 = new Uint8Array(bufferContent.buffer, bufferContent.byteOffset, bufferContent.byteLength);
+    } else if (ArrayBuffer.isView && ArrayBuffer.isView(content)) {
+      // Any ArrayBufferView: DataView or other TypedArray
+      const viewContent = content as ArrayBufferView;
+      u8 = new Uint8Array(viewContent.buffer, viewContent.byteOffset, viewContent.byteLength);
+    } else {
+      // Fallback: check constructor name for ArrayBuffer-like objects
+      const anyContent = content as unknown as { constructor?: { name?: string } };
+      if (anyContent.constructor && anyContent.constructor.name === 'ArrayBuffer') {
+        u8 = new Uint8Array(content as ArrayBuffer);
+      }
+    }
+  }
+
+  if (!u8) throw new Error('Unsupported content type for XML');
+
+  const enc = sniffEncoding(u8);
+  const xml = new TextDecoder(enc).decode(u8);
+  return stripBOM(xml);
+}
diff --git a/packages/super-editor/src/core/extensions/commands.js b/packages/super-editor/src/core/extensions/commands.ts
similarity index 100%
rename from packages/super-editor/src/core/extensions/commands.js
rename to packages/super-editor/src/core/extensions/commands.ts
diff --git a/packages/super-editor/src/core/extensions/editable.js b/packages/super-editor/src/core/extensions/editable.ts
similarity index 70%
rename from packages/super-editor/src/core/extensions/editable.js
rename to packages/super-editor/src/core/extensions/editable.ts
index 2f0ce4525..84eb6ac04 100644
--- a/packages/super-editor/src/core/extensions/editable.js
+++ b/packages/super-editor/src/core/extensions/editable.ts
@@ -20,24 +20,24 @@ export const Editable = Extension.create({
     const editablePlugin = new Plugin({
       key: new PluginKey('editable'),
       props: {
-        editable: () => editor.options.editable,
+        editable: () => Boolean(editor?.options?.editable),
         handleDOMEvents: {
           beforeinput: (_view, event) => {
-            if (!editor.options.editable) {
+            if (!editor?.options?.editable) {
               event.preventDefault();
               return true;
             }
             return false;
           },
           mousedown: (_view, event) => {
-            if (!editor.options.editable) {
+            if (!editor?.options?.editable) {
               event.preventDefault();
               return true;
             }
             return false;
           },
           focus: (view, event) => {
-            if (!editor.options.editable) {
+            if (!editor?.options?.editable) {
               event.preventDefault();
               view.dom.blur();
               return true;
@@ -45,12 +45,12 @@ export const Editable = Extension.create({
             return false;
           },
         },
-        handleClick: () => !editor.options.editable,
-        handleDoubleClick: () => !editor.options.editable,
-        handleTripleClick: () => !editor.options.editable,
-        handleKeyDown: () => !editor.options.editable,
-        handlePaste: () => !editor.options.editable,
-        handleDrop: () => !editor.options.editable,
+        handleClick: () => !editor?.options?.editable,
+        handleDoubleClick: () => !editor?.options?.editable,
+        handleTripleClick: () => !editor?.options?.editable,
+        handleKeyDown: () => !editor?.options?.editable,
+        handlePaste: () => !editor?.options?.editable,
+        handleDrop: () => !editor?.options?.editable,
       },
     });
 
diff --git a/packages/super-editor/src/core/extensions/editorFocus.js b/packages/super-editor/src/core/extensions/editorFocus.ts
similarity index 84%
rename from packages/super-editor/src/core/extensions/editorFocus.js
rename to packages/super-editor/src/core/extensions/editorFocus.ts
index 9c7d4f8e8..fb5ba3e97 100644
--- a/packages/super-editor/src/core/extensions/editorFocus.js
+++ b/packages/super-editor/src/core/extensions/editorFocus.ts
@@ -1,5 +1,6 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Extension } from '../Extension.js';
+import type { Editor } from '../Editor.js';
 
 /**
  * For reference.
@@ -9,13 +10,14 @@ export const EditorFocus = Extension.create({
   name: 'editorFocus',
 
   addPmPlugins() {
-    const editor = this.editor;
+    const editor = this.editor as Editor | undefined;
 
     const editorFocusPlugin = new Plugin({
       key: new PluginKey('editorFocus'),
       props: {
         handleDOMEvents: {
           focus: (view, event) => {
+            if (!editor) return false;
             editor.isFocused = true;
 
             const tr = editor.state.tr.setMeta('focus', { event }).setMeta('addToHistory', false);
@@ -24,6 +26,7 @@ export const EditorFocus = Extension.create({
             return false;
           },
           blur: (view, event) => {
+            if (!editor) return false;
             editor.isFocused = false;
 
             const tr = editor.state.tr.setMeta('blur', { event }).setMeta('addToHistory', false);
diff --git a/packages/super-editor/src/core/extensions/index.js b/packages/super-editor/src/core/extensions/index.ts
similarity index 100%
rename from packages/super-editor/src/core/extensions/index.js
rename to packages/super-editor/src/core/extensions/index.ts
diff --git a/packages/super-editor/src/core/extensions/keymap.js b/packages/super-editor/src/core/extensions/keymap.js
deleted file mode 100644
index eaa5041b9..000000000
--- a/packages/super-editor/src/core/extensions/keymap.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Extension } from '../Extension.js';
-import { isIOS } from '../utilities/isIOS.js';
-import { isMacOS } from '../utilities/isMacOS.js';
-
-export const handleEnter = (editor) => {
-  return editor.commands.first(({ commands }) => [
-    () => commands.splitRunToParagraph(),
-    () => commands.newlineInCode(),
-    () => commands.createParagraphNear(),
-    () => commands.liftEmptyBlock(),
-    () => commands.splitBlock(),
-  ]);
-};
-
-export const handleBackspace = (editor) => {
-  return editor.commands.first(({ commands, tr }) => [
-    () => commands.undoInputRule(),
-    () => {
-      tr.setMeta('inputType', 'deleteContentBackward');
-      return false;
-    },
-    () => commands.backspaceEmptyRunParagraph(),
-    () => commands.backspaceSkipEmptyRun(),
-    () => commands.backspaceNextToRun(),
-    () => commands.deleteSelection(),
-    () => commands.removeNumberingProperties(),
-    () => commands.joinBackward(),
-    () => commands.selectNodeBackward(),
-  ]);
-};
-
-export const handleDelete = (editor) => {
-  return editor.commands.first(({ commands }) => [
-    () => commands.deleteSkipEmptyRun(),
-    () => commands.deleteNextToRun(),
-    () => commands.deleteSelection(),
-    () => commands.joinForward(),
-    () => commands.selectNodeForward(),
-  ]);
-};
-
-/**
- * For reference.
- * https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.ts
- */
-export const Keymap = Extension.create({
-  name: 'keymap',
-
-  addShortcuts() {
-    const baseKeymap = {
-      Enter: () => handleEnter(this.editor),
-      'Shift-Enter': () => this.editor.commands.insertLineBreak(),
-      'Mod-Enter': () => this.editor.commands.insertPageBreak(),
-      Backspace: () => handleBackspace(this.editor),
-      'Mod-Backspace': () => handleBackspace(this.editor),
-      'Shift-Backspace': () => handleBackspace(this.editor),
-      Delete: () => handleDelete(this.editor),
-      'Mod-Delete': () => handleDelete(this.editor),
-      'Mod-a': () => this.editor.commands.selectAll(),
-      Tab: () => this.editor.commands.insertTabNode(),
-      ArrowLeft: () => this.editor.commands.skipTab(-1),
-      ArrowRight: () => this.editor.commands.skipTab(1),
-    };
-
-    const pcBaseKeymap = {
-      ...baseKeymap,
-    };
-
-    const macBaseKeymap = {
-      ...baseKeymap,
-      'Ctrl-h': () => handleBackspace(this.editor),
-      'Alt-Backspace': () => handleBackspace(this.editor),
-      'Ctrl-d': () => handleDelete(this.editor),
-      'Ctrl-Alt-Backspace': () => handleDelete(this.editor),
-      'Alt-Delete': () => handleDelete(this.editor),
-      'Alt-d': () => handleDelete(this.editor),
-      'Ctrl-a': () => this.editor.commands.selectTextblockStart(),
-      'Ctrl-e': () => this.editor.commands.selectTextblockEnd(),
-      'Ctrl-t': () => this.editor.commands.insertTabChar(),
-    };
-
-    if (isMacOS() || isIOS()) {
-      return macBaseKeymap;
-    }
-
-    return pcBaseKeymap;
-  },
-});
diff --git a/packages/super-editor/src/core/extensions/keymap.ts b/packages/super-editor/src/core/extensions/keymap.ts
new file mode 100644
index 000000000..92c9de32f
--- /dev/null
+++ b/packages/super-editor/src/core/extensions/keymap.ts
@@ -0,0 +1,117 @@
+import { Extension } from '../Extension.js';
+import { isIOS } from '../utilities/isIOS.js';
+import { isMacOS } from '../utilities/isMacOS.js';
+import type { Editor } from '../Editor.js';
+import type { Command } from '../types/ChainedCommands.js';
+import type { Transaction } from 'prosemirror-state';
+
+/**
+ * Commands context passed to first() method
+ */
+interface CommandsContext {
+  commands: Record<string, (...args: unknown[]) => Command>;
+  tr: Transaction;
+}
+
+export const handleEnter = (editor: Editor): boolean => {
+  const firstCommand = editor.commands.first as unknown as
+    | ((fn: (ctx: CommandsContext) => (() => Command)[]) => boolean)
+    | undefined;
+  if (!firstCommand) return false;
+
+  return firstCommand(({ commands }) => [
+    () => commands.splitRunToParagraph(),
+    () => commands.newlineInCode(),
+    () => commands.createParagraphNear(),
+    () => commands.liftEmptyBlock(),
+    () => commands.splitBlock(),
+  ]);
+};
+
+export const handleBackspace = (editor: Editor): boolean => {
+  const firstCommand = editor.commands.first as
+    | ((fn: (ctx: CommandsContext) => (() => Command | boolean)[]) => boolean)
+    | undefined;
+  if (!firstCommand) return false;
+
+  return firstCommand(({ commands, tr }) => [
+    () => commands.undoInputRule(),
+    () => {
+      tr.setMeta('inputType', 'deleteContentBackward');
+      return false;
+    },
+    () => commands.backspaceEmptyRunParagraph(),
+    () => commands.backspaceSkipEmptyRun(),
+    () => commands.backspaceNextToRun(),
+    () => commands.deleteSelection(),
+    () => commands.removeNumberingProperties(),
+    () => commands.joinBackward(),
+    () => commands.selectNodeBackward(),
+  ]);
+};
+
+export const handleDelete = (editor: Editor): boolean => {
+  const firstCommand = editor.commands.first as unknown as
+    | ((fn: (ctx: CommandsContext) => (() => Command)[]) => boolean)
+    | undefined;
+  if (!firstCommand) return false;
+
+  return firstCommand(({ commands }) => [
+    () => commands.deleteSkipEmptyRun(),
+    () => commands.deleteNextToRun(),
+    () => commands.deleteSelection(),
+    () => commands.joinForward(),
+    () => commands.selectNodeForward(),
+  ]);
+};
+
+/**
+ * For reference.
+ * https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.ts
+ */
+export const Keymap = Extension.create({
+  name: 'keymap',
+
+  addShortcuts() {
+    const editor = this.editor;
+    if (!editor) return {};
+
+    const baseKeymap = {
+      Enter: () => handleEnter(editor),
+      'Shift-Enter': () => editor.commands.insertLineBreak(),
+      'Mod-Enter': () => editor.commands.insertPageBreak(),
+      Backspace: () => handleBackspace(editor),
+      'Mod-Backspace': () => handleBackspace(editor),
+      'Shift-Backspace': () => handleBackspace(editor),
+      Delete: () => handleDelete(editor),
+      'Mod-Delete': () => handleDelete(editor),
+      'Mod-a': () => editor.commands.selectAll(),
+      Tab: () => editor.commands.insertTabNode(),
+      ArrowLeft: () => editor.commands.skipTab(-1),
+      ArrowRight: () => editor.commands.skipTab(1),
+    };
+
+    const pcBaseKeymap = {
+      ...baseKeymap,
+    };
+
+    const macBaseKeymap = {
+      ...baseKeymap,
+      'Ctrl-h': () => handleBackspace(editor),
+      'Alt-Backspace': () => handleBackspace(editor),
+      'Ctrl-d': () => handleDelete(editor),
+      'Ctrl-Alt-Backspace': () => handleDelete(editor),
+      'Alt-Delete': () => handleDelete(editor),
+      'Alt-d': () => handleDelete(editor),
+      'Ctrl-a': () => editor.commands.selectTextblockStart(),
+      'Ctrl-e': () => editor.commands.selectTextblockEnd(),
+      'Ctrl-t': () => editor.commands.insertTabChar(),
+    };
+
+    if (isMacOS() || isIOS()) {
+      return macBaseKeymap;
+    }
+
+    return pcBaseKeymap;
+  },
+});
diff --git a/packages/super-editor/src/core/header-footer/HeaderFooterRegistry.ts b/packages/super-editor/src/core/header-footer/HeaderFooterRegistry.ts
index abc990019..654868675 100644
--- a/packages/super-editor/src/core/header-footer/HeaderFooterRegistry.ts
+++ b/packages/super-editor/src/core/header-footer/HeaderFooterRegistry.ts
@@ -648,7 +648,7 @@ export class HeaderFooterEditorManager extends EventEmitter {
     if (!json) return null;
 
     let editor: Editor;
-    let container: HTMLElement;
+    let container: HTMLDivElement;
     try {
       container = this.#createEditorContainer();
       editor = createHeaderFooterEditor({
@@ -668,7 +668,7 @@ export class HeaderFooterEditorManager extends EventEmitter {
       return null;
     }
 
-    const handleUpdate = async ({ transaction }: { transaction?: unknown }) => {
+    const handleUpdate = async ({ transaction }: { transaction?: { selection?: unknown } }) => {
       this.emit('contentChanged', { descriptor } as ContentChangedPayload);
       try {
         // Update the converter data structures with the latest content
@@ -765,7 +765,7 @@ export class HeaderFooterEditorManager extends EventEmitter {
     };
   }
 
-  #createEditorContainer(): HTMLElement {
+  #createEditorContainer(): HTMLDivElement {
     const doc =
       (this.#editor.options?.element?.ownerDocument as Document | undefined) ?? globalThis.document ?? undefined;
     const container = doc?.createElement('div') ?? document.createElement('div');
diff --git a/packages/super-editor/src/core/helpers/ErrorWithDetails.js b/packages/super-editor/src/core/helpers/ErrorWithDetails.js
deleted file mode 100644
index c4722f1b6..000000000
--- a/packages/super-editor/src/core/helpers/ErrorWithDetails.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Custom error class which allows to pass additional details
- * @param {string} name - Error name
- * @param {string} message - Error message
- * @param {object} details - additional details from the calling context
- */
-
-function ErrorWithDetails(name, message, details) {
-  this.name = name;
-  this.message = message || '';
-  this.details = details;
-
-  const error = new Error(this.message);
-  this.stack = error.stack;
-  error.name = this.name;
-}
-ErrorWithDetails.prototype = Object.create(Error.prototype);
-
-export { ErrorWithDetails };
diff --git a/packages/super-editor/src/core/helpers/ErrorWithDetails.ts b/packages/super-editor/src/core/helpers/ErrorWithDetails.ts
new file mode 100644
index 000000000..918394460
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/ErrorWithDetails.ts
@@ -0,0 +1,12 @@
+/**
+ * Custom error class which allows passing additional details
+ */
+export class ErrorWithDetails extends Error {
+  details: unknown;
+
+  constructor(name: string, message = '', details?: unknown) {
+    super(message);
+    this.name = name;
+    this.details = details;
+  }
+}
diff --git a/packages/super-editor/src/core/helpers/annotator.js b/packages/super-editor/src/core/helpers/annotator.ts
similarity index 57%
rename from packages/super-editor/src/core/helpers/annotator.js
rename to packages/super-editor/src/core/helpers/annotator.ts
index aa9449006..31f4f9214 100644
--- a/packages/super-editor/src/core/helpers/annotator.js
+++ b/packages/super-editor/src/core/helpers/annotator.ts
@@ -1,15 +1,61 @@
+import type { Node as PmNode, Schema } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
 import { Fragment } from 'prosemirror-model';
 
+/**
+ * Annotation value from the backend
+ */
+interface AnnotationValue {
+  input_id: string;
+  input_value: string | string[] | null;
+  input_field_type?: string;
+  input_format?: string;
+  input_options?: Array<{ itemid: string }>;
+  input_link_value?: Record<string, string>;
+}
+
+/**
+ * Field node attributes
+ */
+interface FieldNodeAttrs {
+  type?: string;
+  fieldType?: string;
+  fieldId: string;
+  generatorIndex?: number | null;
+  displayLabel?: string;
+  rawHtml?: string;
+  linkUrl?: string;
+  imageSrc?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Field annotation attributes returned by annotators
+ */
+type FieldAnnotationAttrs = {
+  displayLabel?: string;
+  rawHtml?: string;
+  linkUrl?: string;
+  imageSrc?: string;
+};
+
+/**
+ * Handler function for annotating fields
+ */
+type AnnotatorHandler = (value: string | string[], input: AnnotationValue | null) => FieldAnnotationAttrs;
+
 /**
  * Get the field attributes based on the field type and value
- *
- * @param {Object} field The field node
- * @param {Object} value The value we want to annotate the field with
- * @returns
  */
-export const getFieldAttrs = (field, value, input) => {
-  const { type } = field.attrs;
-  const annotatorHandlers = {
+export const getFieldAttrs = (
+  field: PmNode,
+  value: string | string[] | null,
+  input: AnnotationValue | null,
+): FieldAnnotationAttrs => {
+  const attrs = field.attrs as FieldNodeAttrs;
+  const { type } = attrs;
+
+  const annotatorHandlers: Record<string, AnnotatorHandler> = {
     html: annotateHtml,
     text: annotateText,
     checkbox: annotateCheckbox,
@@ -19,50 +65,70 @@ export const getFieldAttrs = (field, value, input) => {
     date: annotateDate,
   };
 
-  const handler = annotatorHandlers[type];
+  const handler = type ? annotatorHandlers[type] : undefined;
   if (!handler) return {};
 
   // Run the handler to get the annotated field attributes
-  return handler(value, input);
+  return handler(value || '', input);
 };
 
-const annotateHtml = (value) => ({ rawHtml: value });
-const annotateText = (value) => ({ displayLabel: value });
-const annotateImage = (value) => ({ imageSrc: value });
-const annotateCheckbox = (value) => ({ displayLabel: value });
+const annotateHtml = (value: string | string[]): FieldAnnotationAttrs => ({
+  rawHtml: Array.isArray(value) ? value.join('') : value,
+});
+
+const annotateText = (value: string | string[]): FieldAnnotationAttrs => ({
+  displayLabel: Array.isArray(value) ? value.join('') : value,
+});
 
-const annotateDate = (value, input) => {
-  const formatted = getFormattedDate(value, input.input_format);
+const annotateImage = (value: string | string[]): FieldAnnotationAttrs => ({
+  imageSrc: Array.isArray(value) ? value[0] : value,
+});
+
+const annotateCheckbox = (value: string | string[]): FieldAnnotationAttrs => ({
+  displayLabel: Array.isArray(value) ? value.join('') : value,
+});
+
+const annotateDate = (value: string | string[], input: AnnotationValue | null): FieldAnnotationAttrs => {
+  const stringValue = Array.isArray(value) ? value[0] : value;
+  const formatted = getFormattedDate(stringValue, input?.input_format);
   return { displayLabel: formatted };
 };
 
-const annotateLink = (value) => {
-  if (!value.startsWith('http')) value = `http://${value}`;
-  return { linkUrl: value };
+const annotateLink = (value: string | string[]): FieldAnnotationAttrs => {
+  let linkValue = Array.isArray(value) ? value[0] : value;
+  if (linkValue && !linkValue.startsWith('http')) {
+    linkValue = `http://${linkValue}`;
+  }
+  return { linkUrl: linkValue };
 };
 
-const annotateYesNo = (value) => {
-  const yesNoValues = {
+const annotateYesNo = (value: string | string[]): FieldAnnotationAttrs => {
+  const yesNoValues: Record<string, string> = {
     YES: 'Yes',
     NO: 'No',
   };
-  const parsedValue = yesNoValues[value[0].toUpperCase()];
+  const stringValue = Array.isArray(value) ? value[0] : value;
+  const normalized = typeof stringValue === 'string' ? stringValue.toUpperCase() : undefined;
+  const parsedValue = normalized ? yesNoValues[normalized] : undefined;
   return { displayLabel: parsedValue };
 };
 
 /**
  * Pre-process tables in the document to generate rows from annotations if necessary
- *
- * @param {Object} param0 Options used to drive the table processing.
- * @param {import('prosemirror-state').EditorState} param0.state The current editor state.
- * @param {import('prosemirror-state').Transaction} param0.tr Transaction that is mutated with generated rows.
- * @param {Array} param0.annotationValues The annotation values to process
  */
-export const processTables = ({ state, tr, annotationValues }) => {
+export const processTables = ({
+  state,
+  tr,
+  annotationValues,
+}: {
+  state: EditorState;
+  tr: Transaction;
+  annotationValues: AnnotationValue[];
+}): Transaction => {
   const { doc } = state;
 
   // Get all tables in the document
-  const tables = [];
+  const tables: Array<{ node: PmNode; pos: number }> = [];
   doc.descendants((node, pos) => {
     if (node.type.name === 'table') tables.push({ node, pos });
   });
@@ -83,7 +149,17 @@ export const processTables = ({ state, tr, annotationValues }) => {
   return tr;
 };
 
-const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) => {
+const generateTableIfNecessary = ({
+  tableNode,
+  annotationValues,
+  tr,
+  state,
+}: {
+  tableNode: { node: PmNode; pos: number };
+  annotationValues: AnnotationValue[];
+  tr: Transaction;
+  state: EditorState;
+}): void => {
   const {
     tableRow: RowType,
     tableCell: CellType,
@@ -92,7 +168,7 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   } = state.schema.nodes;
 
   // Find rows with field annotations that have array values
-  const rows = [];
+  const rows: Array<{ node: PmNode; pos: number }> = [];
   tableNode.node.descendants((node, pos) => {
     if (node.type === RowType) {
       rows.push({ node, pos });
@@ -100,14 +176,15 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   });
 
   // Check each row for field annotations with array values
-  let rowNodeToGenerate = null;
+  let rowNodeToGenerate: { node: PmNode; pos: number } | null = null;
   for (const row of rows) {
     let hasArrayAnnotation = false;
 
     row.node.descendants((node) => {
       if (node.type === FieldType) {
-        const annotationValue = getAnnotationValue(node.attrs.fieldId, annotationValues);
-        if (Array.isArray(annotationValue) && node.attrs.generatorIndex === null) {
+        const attrs = node.attrs as FieldNodeAttrs;
+        const annotationValue = getAnnotationValue(attrs.fieldId, annotationValues);
+        if (Array.isArray(annotationValue) && attrs.generatorIndex === null) {
           hasArrayAnnotation = true;
         }
       }
@@ -130,7 +207,8 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   let rowsToGenerate = 0;
   rowNode.descendants((childNode) => {
     if (childNode.type === FieldType) {
-      const annotationValue = getAnnotationValue(childNode.attrs.fieldId, annotationValues);
+      const attrs = childNode.attrs as FieldNodeAttrs;
+      const annotationValue = getAnnotationValue(attrs.fieldId, annotationValues);
       if (Array.isArray(annotationValue)) {
         rowsToGenerate = Math.max(rowsToGenerate, annotationValue.length);
       }
@@ -140,8 +218,8 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   if (rowsToGenerate <= 1) return;
 
   // Validate and clean attributes to ensure proper rendering
-  const validateAttributes = (attrs) => {
-    const cleaned = {};
+  const validateAttributes = (attrs: Record<string, unknown>): Record<string, unknown> => {
+    const cleaned: Record<string, unknown> = {};
 
     for (const [key, value] of Object.entries(attrs)) {
       if (value !== undefined && value !== null) {
@@ -166,7 +244,7 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   };
 
   // Rebuild a cell with the correct annotation values for a specific row index
-  const rebuildCell = (cellNode, rowIndex) => {
+  const rebuildCell = (cellNode: PmNode, rowIndex: number): PmNode => {
     try {
       const updatedBlocks = cellNode.content.content.map((blockNode) => {
         if (blockNode.type !== ParaType) return blockNode;
@@ -175,14 +253,15 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
           if (inlineNode.type !== FieldType) return inlineNode;
 
           // Get the value for this row index
-          let matchedAnnotationValues = getAnnotationValue(inlineNode.attrs.fieldId, annotationValues);
+          const attrs = inlineNode.attrs as FieldNodeAttrs;
+          let matchedAnnotationValues = getAnnotationValue(attrs.fieldId, annotationValues);
           if (!Array.isArray(matchedAnnotationValues)) {
-            matchedAnnotationValues = [matchedAnnotationValues];
+            matchedAnnotationValues = matchedAnnotationValues ? [matchedAnnotationValues] : [];
           }
           const value = matchedAnnotationValues[rowIndex];
 
           // Get extra attributes from field handlers
-          let extraAttrs = {};
+          let extraAttrs: Record<string, unknown> = {};
           try {
             const rawExtraAttrs = getFieldAttrs(inlineNode, value, null);
             extraAttrs = validateAttributes(rawExtraAttrs || {});
@@ -192,8 +271,8 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
           }
 
           // Build new attributes
-          const baseAttrs = validateAttributes(inlineNode.attrs || {});
-          const newAttrs = {
+          const baseAttrs = validateAttributes((inlineNode.attrs as Record<string, unknown>) || {});
+          const newAttrs: Record<string, unknown> = {
             ...baseAttrs,
             ...extraAttrs,
             generatorIndex: rowIndex,
@@ -227,7 +306,7 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
         // Create new paragraph
         try {
           return ParaType.create(
-            validateAttributes(blockNode.attrs || {}),
+            validateAttributes((blockNode.attrs as Record<string, unknown>) || {}),
             Fragment.from(updatedInlines),
             blockNode.marks || [],
           );
@@ -239,7 +318,7 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
 
       // Create new cell
       return CellType.create(
-        validateAttributes(cellNode.attrs || {}),
+        validateAttributes((cellNode.attrs as Record<string, unknown>) || {}),
         Fragment.from(updatedBlocks),
         cellNode.marks || [],
       );
@@ -251,11 +330,11 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
 
   try {
     // Create all the new rows
-    const newRows = [];
+    const newRows: PmNode[] = [];
     for (let rowIndex = 0; rowIndex < rowsToGenerate; rowIndex++) {
       const newCells = rowNode.content.content.map((cellNode) => rebuildCell(cellNode, rowIndex));
       const newRow = RowType.create(
-        validateAttributes(rowNode.attrs || {}),
+        validateAttributes((rowNode.attrs as Record<string, unknown>) || {}),
         Fragment.from(newCells),
         rowNode.marks || [],
       );
@@ -274,27 +353,21 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
   }
 };
 
-const getAnnotationValue = (id, annotationValues) => {
+const getAnnotationValue = (id: string, annotationValues: AnnotationValue[]): string | string[] | null => {
   return annotationValues.find((value) => value.input_id === id)?.input_value || null;
 };
 
 /**
  * Get all header and footer editors from the editor instance
- * @param {Editor} editor The editor instance
- * @returns {Object[]} An array of header and footer editors
  */
-export const getAllHeaderFooterEditors = () => [];
+export const getAllHeaderFooterEditors = (): unknown[] => [];
 
 /**
- * Annotate headers and footers in the document
- *
- * @param {Object} param0
- * @param {Object} param0.editor The editor instance
- * @param {Array} param0.annotationValues The annotation values to apply
- * @param {Array} param0.hiddenFieldIds List of field IDs to hide
- * @returns {void}
+ * Annotate headers and footers in the document (legacy, currently a no-op)
  */
-const annotateHeadersAndFooters = () => {};
+const annotateHeadersAndFooters = (): void => {
+  /* noop */
+};
 
 export const annotateDocument = ({
   annotationValues = [],
@@ -302,10 +375,16 @@ export const annotateDocument = ({
   removeEmptyFields = false,
   schema,
   tr,
-}) => {
+}: {
+  annotationValues?: AnnotationValue[];
+  hiddenFieldIds?: string[];
+  removeEmptyFields?: boolean;
+  schema: Schema;
+  tr: Transaction;
+}): Transaction => {
   // Header/footer annotation removed with pagination legacy
 
-  const annotations = [];
+  const annotations: Array<{ node: PmNode; pos: number; size: number }> = [];
   const FieldType = schema.nodes.fieldAnnotation;
   tr.doc.descendants((node, pos) => {
     if (node.type === FieldType) {
@@ -313,11 +392,12 @@ export const annotateDocument = ({
     }
   });
 
-  const toDelete = new Set();
+  const toDelete = new Set<number>();
 
   if (hiddenFieldIds.length) {
     for (const { node, pos } of annotations) {
-      if (hiddenFieldIds.includes(node.attrs.fieldId)) {
+      const attrs = node.attrs as FieldNodeAttrs;
+      if (hiddenFieldIds.includes(attrs.fieldId)) {
         toDelete.add(pos);
       }
     }
@@ -325,18 +405,20 @@ export const annotateDocument = ({
 
   // For each annotation, either queue it for deletion or queue an update
   for (const { node, pos } of annotations) {
-    const { type, fieldType, fieldId } = node.attrs;
+    const attrs = node.attrs as FieldNodeAttrs;
+    const { type, fieldType, fieldId } = attrs;
     if (toDelete.has(pos)) continue;
 
-    let newValue = null;
+    let newValue: string | string[] | null = null;
     const input = annotationValues.find((i) => i.input_id === fieldId);
 
     if (!input) {
       const checkboxInputs = annotationValues.filter((i) => i.input_field_type === 'CHECKBOXINPUT');
       inputsLoop: for (const cb of checkboxInputs) {
-        for (const opt of cb.input_options) {
+        const options = cb.input_options || [];
+        for (const opt of options) {
           if (opt.itemid === fieldId) {
-            newValue = cb.input_link_value[opt.itemid] || ' ';
+            newValue = cb.input_link_value?.[opt.itemid] || ' ';
             break inputsLoop;
           }
         }
@@ -345,12 +427,13 @@ export const annotateDocument = ({
     newValue = newValue || input?.input_value || null;
 
     // skip table-generator placeholders
-    if (Array.isArray(newValue) && node.attrs.generatorIndex != null) {
+    if (Array.isArray(newValue) && attrs.generatorIndex != null) {
       continue;
     }
 
     if (type === 'checkbox' || fieldType === 'CHECKBOXINPUT') {
-      const isEmptyOrSquare = !newValue || (typeof newValue === 'string' && newValue.codePointAt(0) === 0x2610);
+      const codePoint = typeof newValue === 'string' ? newValue.codePointAt(0) : undefined;
+      const isEmptyOrSquare = !newValue || (codePoint !== undefined && codePoint === 0x2610);
       if (isEmptyOrSquare) newValue = ' ';
     }
 
@@ -358,10 +441,10 @@ export const annotateDocument = ({
     if (!newValue) {
       toDelete.add(pos);
     } else {
-      const attrs = getFieldAttrs(node, newValue, input);
+      const fieldAttrs = getFieldAttrs(node, newValue, input ?? null);
       tr = tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        ...attrs,
+        ...(node.attrs as Record<string, unknown>),
+        ...fieldAttrs,
       });
     }
   }
@@ -382,27 +465,29 @@ export const annotateDocument = ({
 
 /**
  * Format the date to the given format
- *
- * @param {String} input The date value
- * @param {String} format The date format
  */
-const getFormattedDate = (input = null, format = '') => {
+const getFormattedDate = (input: string | null = null, format = ''): string => {
   // 1. Parse: if input is falsy, use "now"; otherwise let Date handle it.
   const date = input ? new Date(input) : new Date();
 
   // 2. If invalid, just return what you got.
   if (isNaN(date.getTime())) {
-    return input;
+    return input ?? '';
   }
 
-  // 3. If a custom format was requested, use the dateFormat lib:
-  if (format) return dateFormat(date, format);
+  // 3. If a global dateFormat function is available (e.g., from dateformat library), use it
+  const globalWithDateFormat = globalThis as typeof globalThis & {
+    dateFormat?: (date: Date, format: string) => string;
+  };
+  if (typeof globalWithDateFormat.dateFormat === 'function') {
+    return globalWithDateFormat.dateFormat(date, format || 'mmm dd, yyyy');
+  }
 
-  // 4. Otherwise, do a single toLocaleDateString call:
+  // 4. Fall back to toLocaleDateString:
   return date.toLocaleDateString('en-US', {
-    month: 'short', // e.g. “May”
-    day: '2-digit', // e.g. “05”
-    year: 'numeric', // e.g. “2025”
+    month: 'short', // e.g. "May"
+    day: '2-digit', // e.g. "05"
+    year: 'numeric', // e.g. "2025"
   });
 };
 
diff --git a/packages/super-editor/src/core/helpers/baseListDefinitions.js b/packages/super-editor/src/core/helpers/baseListDefinitions.ts
similarity index 100%
rename from packages/super-editor/src/core/helpers/baseListDefinitions.js
rename to packages/super-editor/src/core/helpers/baseListDefinitions.ts
diff --git a/packages/super-editor/src/core/helpers/canRenderFont.js b/packages/super-editor/src/core/helpers/canRenderFont.ts
similarity index 85%
rename from packages/super-editor/src/core/helpers/canRenderFont.js
rename to packages/super-editor/src/core/helpers/canRenderFont.ts
index 09e138414..a2aac08b5 100644
--- a/packages/super-editor/src/core/helpers/canRenderFont.js
+++ b/packages/super-editor/src/core/helpers/canRenderFont.ts
@@ -1,7 +1,6 @@
 /**
  * Checks if a given font can be rendered on the browser
  *
- * @param {string} fontName - The name of the font to check for availability.
  * @returns {boolean} True if the font can be rendered, false otherwise.
  *
  * @example
@@ -10,11 +9,12 @@
  * }
  */
 
-export function canRenderFont(fontName, fallbackFont = 'sans-serif') {
-  const _canRenderFont = (fontName, fallbackFont) => {
+export function canRenderFont(fontName: string, fallbackFont = 'sans-serif'): boolean {
+  const _canRenderFont = (fontNameToTest: string, fallbackFontName: string): boolean => {
     // Create a canvas context to measure text
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
+    if (!ctx) return false;
     // Ensure the text baseline is top so we can properly measure the height.
     ctx.textBaseline = 'top';
 
@@ -22,13 +22,13 @@ export function canRenderFont(fontName, fallbackFont = 'sans-serif') {
     const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
 
     // Measure the text with a generic fallback font
-    ctx.font = `72px ${fallbackFont}`;
+    ctx.font = `72px ${fallbackFontName}`;
     const initialTextMeasurement = ctx.measureText(text);
     const fallbackWidth = initialTextMeasurement.width;
     const fallbackHeight = initialTextMeasurement.actualBoundingBoxDescent;
 
     // Measure the text with given font
-    ctx.font = `72px "${fontName}", ${fallbackFont}`;
+    ctx.font = `72px "${fontNameToTest}", ${fallbackFontName}`;
     const customTextMeasurement = ctx.measureText(text);
     const customFontWidth = customTextMeasurement.width;
     const customFontHeight = customTextMeasurement.actualBoundingBoxDescent;
diff --git a/packages/super-editor/src/core/helpers/chainableEditorState.js b/packages/super-editor/src/core/helpers/chainableEditorState.ts
similarity index 64%
rename from packages/super-editor/src/core/helpers/chainableEditorState.js
rename to packages/super-editor/src/core/helpers/chainableEditorState.ts
index c34e72d7b..47afe4b93 100644
--- a/packages/super-editor/src/core/helpers/chainableEditorState.js
+++ b/packages/super-editor/src/core/helpers/chainableEditorState.ts
@@ -1,11 +1,18 @@
 /**
  * Creates chainable editor state.
  * https://remirror.io/blog/chainable-commands/
- * @param {*} transaction Transaction.
- * @param {*} state State
- * @returns Chainable editor state.
  */
-export function chainableEditorState(transaction, state) {
+import type { EditorState, Transaction, Selection } from 'prosemirror-state';
+import type { Mark, Node as PmNode } from 'prosemirror-model';
+
+export type ChainableEditorState = EditorState & {
+  tr: Transaction;
+  selection: Selection;
+  doc: PmNode;
+  storedMarks: readonly Mark[] | null;
+};
+
+export function chainableEditorState(transaction: Transaction, state: EditorState): ChainableEditorState {
   let { selection, doc, storedMarks } = transaction;
 
   return {
diff --git a/packages/super-editor/src/core/helpers/cleanSchemaItem.js b/packages/super-editor/src/core/helpers/cleanSchemaItem.ts
similarity index 58%
rename from packages/super-editor/src/core/helpers/cleanSchemaItem.js
rename to packages/super-editor/src/core/helpers/cleanSchemaItem.ts
index c23023ab5..404b64ccd 100644
--- a/packages/super-editor/src/core/helpers/cleanSchemaItem.js
+++ b/packages/super-editor/src/core/helpers/cleanSchemaItem.ts
@@ -1,16 +1,18 @@
 import { isEmptyObject } from '../utilities/isEmptyObject.js';
 
+type UnknownRecord = Record<string, unknown>;
+
 /**
  * Clean schema item from "null" and "undefined" values.
  * @param schemaItem Schema item.
  * @returns Cleaned schema item.
  */
-export function cleanSchemaItem(schemaItem) {
+export function cleanSchemaItem<T extends UnknownRecord>(schemaItem: T): Partial<T> {
   const entries = Object.entries(schemaItem).filter(([key, value]) => {
-    if (key === 'attrs' && isEmptyObject(value)) {
+    if (key === 'attrs' && isEmptyObject(value as UnknownRecord)) {
       return false;
     }
     return value !== null && value !== undefined;
   });
-  return Object.fromEntries(entries);
+  return Object.fromEntries(entries) as Partial<T>;
 }
diff --git a/packages/super-editor/src/core/helpers/contentProcessor.js b/packages/super-editor/src/core/helpers/contentProcessor.ts
similarity index 54%
rename from packages/super-editor/src/core/helpers/contentProcessor.js
rename to packages/super-editor/src/core/helpers/contentProcessor.ts
index 3e2816a21..49690ac85 100644
--- a/packages/super-editor/src/core/helpers/contentProcessor.js
+++ b/packages/super-editor/src/core/helpers/contentProcessor.ts
@@ -1,41 +1,41 @@
-//@ts-check
 import { DOMParser } from 'prosemirror-model';
 import { createDocFromHTML } from './importHtml.js';
 import { createDocFromMarkdown } from './importMarkdown.js';
 import { wrapTextsInRuns } from '../inputRules/docx-paste/docx-paste.js';
+import type { Editor } from '../Editor.js';
+import type { Node as PmNode, Schema } from 'prosemirror-model';
+
+type ContentType = 'html' | 'markdown' | 'text' | 'schema';
+
+type ProcessContentParams = { content: unknown; type: ContentType; editor: Editor };
 
 /**
  * Unified content processor that handles all content types
- * @param {Object} params
- * @param {string} params.content - The content to process
- * @param {string} params.type - Content type: 'html', 'markdown', 'text', 'schema'
- * @param {Object} params.editor - The editor instance
- * @returns {Object} Processed ProseMirror document
  */
-export function processContent({ content, type, editor }) {
-  let doc;
+export function processContent({ content, type, editor }: ProcessContentParams): PmNode | null {
+  let doc: PmNode | null = null;
 
   switch (type) {
     case 'html':
-      doc = createDocFromHTML(content, editor, { isImport: true });
+      doc = createDocFromHTML(content as string | HTMLElement, editor, { isImport: true });
       break;
 
     case 'markdown':
-      doc = createDocFromMarkdown(content, editor, { isImport: true });
+      doc = createDocFromMarkdown(content as string, editor, { isImport: true });
       break;
 
     case 'text':
       const wrapper = document.createElement('div');
       wrapper.dataset.superdocImport = 'true';
       const para = document.createElement('p');
-      para.textContent = content;
+      para.textContent = content != null ? String(content) : '';
       wrapper.appendChild(para);
       doc = DOMParser.fromSchema(editor.schema).parse(wrapper);
       doc = wrapTextsInRuns(doc);
       break;
 
     case 'schema':
-      doc = editor.schema.nodeFromJSON(content);
+      doc = editor.schema.nodeFromJSON(content as Parameters<Schema['nodeFromJSON']>[0]);
       doc = wrapTextsInRuns(doc);
       break;
 
diff --git a/packages/super-editor/src/core/helpers/createDocument.js b/packages/super-editor/src/core/helpers/createDocument.ts
similarity index 50%
rename from packages/super-editor/src/core/helpers/createDocument.js
rename to packages/super-editor/src/core/helpers/createDocument.ts
index ea2f01ff4..78f70ed2e 100644
--- a/packages/super-editor/src/core/helpers/createDocument.js
+++ b/packages/super-editor/src/core/helpers/createDocument.ts
@@ -1,12 +1,20 @@
 /**
  * Creates the document to pass to EditorState.
- * @param converter SuperConverter instance.
- * @param schema Schema.
- * @param editor Editor
- * @returns Document.
  */
 
-export function createDocument(converter, schema, editor, { check = false } = {}) {
+import type { Schema, Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '../Editor.js';
+
+type Converter = {
+  getSchema: (editor: Editor) => unknown;
+};
+
+export function createDocument(
+  converter: Converter,
+  schema: Schema,
+  editor: Editor,
+  { check = false }: { check?: boolean } = {},
+): PmNode | null {
   const documentData = converter.getSchema(editor);
 
   if (documentData) {
diff --git a/packages/super-editor/src/core/helpers/createNodeFromContent.js b/packages/super-editor/src/core/helpers/createNodeFromContent.ts
similarity index 55%
rename from packages/super-editor/src/core/helpers/createNodeFromContent.js
rename to packages/super-editor/src/core/helpers/createNodeFromContent.ts
index 64f93e48e..24fb0618c 100644
--- a/packages/super-editor/src/core/helpers/createNodeFromContent.js
+++ b/packages/super-editor/src/core/helpers/createNodeFromContent.ts
@@ -1,7 +1,8 @@
-import { DOMParser, Schema, Fragment } from 'prosemirror-model';
+import { DOMParser, Schema, Fragment, type Node as PmNode, type ParseOptions } from 'prosemirror-model';
 import { htmlHandler } from '../InputRule.js';
+import type { Editor } from '../Editor.js';
 
-const removeWhitespaces = (node) => {
+const removeWhitespaces = (node: Node): Node => {
   const children = node.childNodes;
 
   for (let i = children.length - 1; i >= 0; i -= 1) {
@@ -17,17 +18,27 @@ const removeWhitespaces = (node) => {
   return node;
 };
 
-export function elementFromString(value, editor) {
+export function elementFromString(value: string, editor: Editor): HTMLElement {
   // add a wrapper to preserve leading and trailing whitespace
   const wrappedValue = `<body>${value}</body>`;
   const html = htmlHandler(wrappedValue, editor);
 
-  return removeWhitespaces(html);
+  return removeWhitespaces(html) as HTMLElement;
 }
 
-export function createNodeFromContent(content, editor, options) {
+export interface CreateNodeFromContentOptions {
+  slice?: boolean;
+  parseOptions?: ParseOptions;
+  errorOnInvalidContent?: boolean;
+}
+
+export function createNodeFromContent(
+  content: string | Record<string, unknown> | Array<Record<string, unknown>>,
+  editor: Editor,
+  options: CreateNodeFromContentOptions = {},
+): PmNode | Fragment {
   const schema = editor.schema;
-  options = {
+  const resolvedOptions: CreateNodeFromContentOptions = {
     slice: true,
     parseOptions: {},
     ...options,
@@ -47,25 +58,27 @@ export function createNodeFromContent(content, editor, options) {
 
       const node = schema.nodeFromJSON(content);
 
-      if (options.errorOnInvalidContent) {
+      if (resolvedOptions.errorOnInvalidContent) {
         node.check();
       }
 
       return node;
     } catch (error) {
-      if (options.errorOnInvalidContent) {
-        throw new Error('[super-editor error]: Invalid JSON content', { cause: error });
+      if (resolvedOptions.errorOnInvalidContent) {
+        const err = new Error('[super-editor error]: Invalid JSON content');
+        (err as unknown as { cause?: unknown }).cause = error;
+        throw err;
       }
 
       console.warn('[super-editor warn]: Invalid content.', 'Passed value:', content, 'Error:', error);
 
-      return createNodeFromContent('', editor, options);
+      return createNodeFromContent('', editor, resolvedOptions);
     }
   }
 
   if (isTextContent) {
     // Check for invalid content
-    if (options.errorOnInvalidContent) {
+    if (resolvedOptions.errorOnInvalidContent) {
       let hasInvalidContent = false;
       let invalidContent = '';
 
@@ -79,14 +92,14 @@ export function createNodeFromContent(content, editor, options) {
           __supereditor__private__unknown__catch__all__node: {
             content: 'inline*',
             group: 'block',
-            parseDOM: () => [
+            parseDOM: [
               {
                 tag: '*',
-                getAttrs: (e) => {
+                getAttrs: (e: unknown) => {
                   // If this is ever called, we know that the content has something that we don't know how to handle in the schema
                   hasInvalidContent = true;
                   // Try to stringify the element for a more helpful error message
-                  invalidContent = typeof e === 'string' ? e : e.outerHTML;
+                  invalidContent = typeof e === 'string' ? e : ((e as HTMLElement | null)?.outerHTML ?? String(e));
                   return null;
                 },
               },
@@ -95,27 +108,33 @@ export function createNodeFromContent(content, editor, options) {
         }),
       });
 
-      if (options.slice) {
-        DOMParser.fromSchema(contentCheckSchema).parseSlice(elementFromString(content, editor), options.parseOptions);
+      if (resolvedOptions.slice) {
+        DOMParser.fromSchema(contentCheckSchema).parseSlice(
+          elementFromString(content, editor),
+          resolvedOptions.parseOptions,
+        );
       } else {
-        DOMParser.fromSchema(contentCheckSchema).parse(elementFromString(content, editor), options.parseOptions);
+        DOMParser.fromSchema(contentCheckSchema).parse(
+          elementFromString(content, editor),
+          resolvedOptions.parseOptions,
+        );
       }
 
-      if (options.errorOnInvalidContent && hasInvalidContent) {
-        throw new Error('[super-editor error]: Invalid HTML content', {
-          cause: new Error(`Invalid element found: ${invalidContent}`),
-        });
+      if (resolvedOptions.errorOnInvalidContent && hasInvalidContent) {
+        const err = new Error('[super-editor error]: Invalid HTML content');
+        (err as unknown as { cause?: unknown }).cause = new Error(`Invalid element found: ${invalidContent}`);
+        throw err;
       }
     }
 
     const parser = DOMParser.fromSchema(schema);
 
-    if (options.slice) {
-      return parser.parseSlice(elementFromString(content, editor), options.parseOptions).content;
+    if (resolvedOptions.slice) {
+      return parser.parseSlice(elementFromString(content, editor), resolvedOptions.parseOptions).content;
     }
 
-    return parser.parse(elementFromString(content, editor), options.parseOptions);
+    return parser.parse(elementFromString(content, editor), resolvedOptions.parseOptions);
   }
 
-  return createNodeFromContent('', editor, options);
+  return createNodeFromContent('', editor, resolvedOptions);
 }
diff --git a/packages/super-editor/src/core/helpers/defaultBlockAt.js b/packages/super-editor/src/core/helpers/defaultBlockAt.ts
similarity index 69%
rename from packages/super-editor/src/core/helpers/defaultBlockAt.js
rename to packages/super-editor/src/core/helpers/defaultBlockAt.ts
index dc377ffe3..d8b51e351 100644
--- a/packages/super-editor/src/core/helpers/defaultBlockAt.js
+++ b/packages/super-editor/src/core/helpers/defaultBlockAt.ts
@@ -1,11 +1,11 @@
 /**
  * Gets the default block type at a given match.
- * @param match Content match.
- * @returns Default block type or null.
  *
  * https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.ts#L297
  */
-export function defaultBlockAt(match) {
+import type { ContentMatch, NodeType } from 'prosemirror-model';
+
+export function defaultBlockAt(match: ContentMatch): NodeType | null {
   for (let i = 0; i < match.edgeCount; i++) {
     const { type } = match.edge(i);
     if (type.isTextblock && !type.hasRequiredAttrs()) return type;
diff --git a/packages/super-editor/src/core/helpers/editorSurface.js b/packages/super-editor/src/core/helpers/editorSurface.ts
similarity index 70%
rename from packages/super-editor/src/core/helpers/editorSurface.js
rename to packages/super-editor/src/core/helpers/editorSurface.ts
index 25fbd51a9..c20c15950 100644
--- a/packages/super-editor/src/core/helpers/editorSurface.js
+++ b/packages/super-editor/src/core/helpers/editorSurface.ts
@@ -5,17 +5,18 @@
  * 1. Editor IS a PresentationEditor - returns the visible layout surface (element property)
  * 2. Flow Editor with attached PresentationEditor - returns the presentation's visible surface
  * 3. Plain flow Editor - returns the ProseMirror view's DOM element
- *
- * @param {import('../Editor.js').Editor | import('../PresentationEditor.js').PresentationEditor} editor
- * @returns {HTMLElement|null}
  */
-export function getEditorSurfaceElement(editor) {
+import type { Editor } from '../Editor.js';
+
+export function getEditorSurfaceElement(editor: Editor | null | undefined): HTMLElement | null {
   if (!editor) return null;
 
+  const maybePresentationEditor = editor as unknown as { hitTest?: unknown; element?: unknown };
+
   // Check if editor IS a PresentationEditor by looking for PresentationEditor-specific method (hitTest)
   // and the element property. This distinguishes from flow Editor which delegates hitTest to presentationEditor.
-  if (typeof editor.hitTest === 'function' && editor.element instanceof HTMLElement) {
-    return editor.element;
+  if (typeof maybePresentationEditor.hitTest === 'function' && maybePresentationEditor.element instanceof HTMLElement) {
+    return maybePresentationEditor.element;
   }
 
   // For flow Editor: check for attached PresentationEditor, then fall back to view.dom or options.element
@@ -25,17 +26,17 @@ export function getEditorSurfaceElement(editor) {
 /**
  * Convert viewport coordinates into a position relative to the active editor surface.
  * Falls back to the current selection when explicit coordinates are unavailable.
- * @param {import('../Editor.js').Editor} editor
- * @param {{ clientX?: number, clientY?: number }} eventLocation
- * @returns {{ left: number, top: number } | null}
  */
-export function getSurfaceRelativePoint(editor, eventLocation = {}) {
+export function getSurfaceRelativePoint(
+  editor: Editor | null | undefined,
+  eventLocation: { clientX?: number; clientY?: number } = {},
+): { left: number; top: number } | null {
   const surface = getEditorSurfaceElement(editor);
   if (!surface) return null;
 
   const rect = surface.getBoundingClientRect();
-  let left;
-  let top;
+  let left: number | undefined;
+  let top: number | undefined;
 
   if (typeof eventLocation.clientX === 'number' && typeof eventLocation.clientY === 'number') {
     left = eventLocation.clientX - rect.left;
@@ -53,5 +54,5 @@ export function getSurfaceRelativePoint(editor, eventLocation = {}) {
     return null;
   }
 
-  return { left, top };
+  return { left: left as number, top: top as number };
 }
diff --git a/packages/super-editor/src/core/helpers/findChildren.js b/packages/super-editor/src/core/helpers/findChildren.js
deleted file mode 100644
index 6cf03d8ea..000000000
--- a/packages/super-editor/src/core/helpers/findChildren.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Find children inside PM node that match a predicate.
- * @param node PM node to search in.
- * @param predicate The predicate to match.
- * @returns An array of nodes with their positions.
- */
-export function findChildren(node, predicate) {
-  const nodesWithPos = [];
-
-  node.descendants((child, pos) => {
-    if (predicate(child)) {
-      nodesWithPos.push({
-        node: child,
-        pos,
-      });
-    }
-  });
-
-  return nodesWithPos;
-}
diff --git a/packages/super-editor/src/core/helpers/findChildren.ts b/packages/super-editor/src/core/helpers/findChildren.ts
new file mode 100644
index 000000000..99e749017
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/findChildren.ts
@@ -0,0 +1,22 @@
+/**
+ * Find children inside PM node that match a predicate.
+ */
+import type { Node as PmNode } from 'prosemirror-model';
+
+export function findChildren(
+  node: PmNode,
+  predicate: (child: PmNode, pos: number, parent: PmNode | null) => boolean,
+): Array<{ node: PmNode; pos: number }> {
+  const nodesWithPos: Array<{ node: PmNode; pos: number }> = [];
+
+  node.descendants((child, pos, parent) => {
+    if (predicate(child, pos, parent)) {
+      nodesWithPos.push({
+        node: child,
+        pos,
+      });
+    }
+  });
+
+  return nodesWithPos;
+}
diff --git a/packages/super-editor/src/core/helpers/findMark.js b/packages/super-editor/src/core/helpers/findMark.js
deleted file mode 100644
index 13dada160..000000000
--- a/packages/super-editor/src/core/helpers/findMark.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export const findMark = (state, markType, toArr = false) => {
-  const { selection, doc } = state;
-  const { $from, $to } = selection;
-
-  const fromMark = $from.marks().find((mark) => mark.type === markType);
-  const toMark = $to.marks().find((mark) => mark.type === markType);
-
-  let markFound;
-  const marksFound = [];
-
-  doc.nodesBetween($from.pos, $to.pos, (node, from) => {
-    if (node.marks) {
-      const actualMark = node.marks.find((mark) => mark.type === markType);
-      if (actualMark) {
-        markFound = {
-          from,
-          to: from + node.nodeSize,
-          attrs: actualMark.attrs,
-          contained: !fromMark || !toMark || fromMark === toMark,
-        };
-        marksFound.push(markFound);
-      }
-    }
-  });
-
-  if (toArr) {
-    return marksFound;
-  }
-
-  return markFound;
-};
diff --git a/packages/super-editor/src/core/helpers/findMark.ts b/packages/super-editor/src/core/helpers/findMark.ts
new file mode 100644
index 000000000..d470da201
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/findMark.ts
@@ -0,0 +1,61 @@
+import type { EditorState } from 'prosemirror-state';
+import type { MarkType } from 'prosemirror-model';
+
+/**
+ * Information about a found mark
+ */
+interface MarkInfo {
+  /** Start position of the mark */
+  from: number;
+  /** End position of the mark */
+  to: number;
+  /** Attributes of the mark */
+  attrs: Record<string, unknown>;
+  /** Whether the mark is fully contained within the selection */
+  contained: boolean;
+}
+
+/**
+ * Find marks of a given type within the current selection
+ * @param state The editor state
+ * @param markType The type of mark to search for
+ * @param toArr Whether to return all matches as an array
+ * @returns Single mark info, array of mark infos, or undefined
+ */
+export function findMark(state: EditorState, markType: MarkType, toArr: false): MarkInfo | undefined;
+
+export function findMark(state: EditorState, markType: MarkType, toArr: true): MarkInfo[];
+
+export function findMark(state: EditorState, markType: MarkType, toArr?: boolean): MarkInfo | MarkInfo[] | undefined;
+
+export function findMark(state: EditorState, markType: MarkType, toArr = false): MarkInfo | MarkInfo[] | undefined {
+  const { selection, doc } = state;
+  const { $from, $to } = selection;
+
+  const fromMark = $from.marks().find((mark) => mark.type === markType);
+  const toMark = $to.marks().find((mark) => mark.type === markType);
+
+  let markFound: MarkInfo | undefined;
+  const marksFound: MarkInfo[] = [];
+
+  doc.nodesBetween($from.pos, $to.pos, (node, from) => {
+    if (node.marks) {
+      const actualMark = node.marks.find((mark) => mark.type === markType);
+      if (actualMark) {
+        markFound = {
+          from,
+          to: from + node.nodeSize,
+          attrs: actualMark.attrs as Record<string, unknown>,
+          contained: !fromMark || !toMark || fromMark === toMark,
+        };
+        marksFound.push(markFound);
+      }
+    }
+  });
+
+  if (toArr) {
+    return marksFound;
+  }
+
+  return markFound;
+}
diff --git a/packages/super-editor/src/core/helpers/findParentNode.js b/packages/super-editor/src/core/helpers/findParentNode.ts
similarity index 66%
rename from packages/super-editor/src/core/helpers/findParentNode.js
rename to packages/super-editor/src/core/helpers/findParentNode.ts
index 398356613..34a571f52 100644
--- a/packages/super-editor/src/core/helpers/findParentNode.js
+++ b/packages/super-editor/src/core/helpers/findParentNode.ts
@@ -1,5 +1,7 @@
 // @ts-check
-import { findParentNodeClosestToPos } from './findParentNodeClosestToPos';
+import { findParentNodeClosestToPos } from './findParentNodeClosestToPos.js';
+import type { Node as PmNode, ResolvedPos } from 'prosemirror-model';
+import type { ParentNodeInfo } from './findParentNodeClosestToPos.js';
 
 /**
  * @typedef {import("./findParentNodeClosestToPos").ParentNodeInfo} ParentNodeInfo
@@ -12,6 +14,6 @@ import { findParentNodeClosestToPos } from './findParentNodeClosestToPos';
  *
  * https://github.com/atlassian/prosemirror-utils/blob/master/src/selection.ts#L17
  */
-export const findParentNode = (predicate) => {
-  return ({ $from }) => findParentNodeClosestToPos($from, predicate);
+export const findParentNode = (predicate: (node: PmNode) => boolean) => {
+  return ({ $from }: { $from: ResolvedPos }): ParentNodeInfo | null => findParentNodeClosestToPos($from, predicate);
 };
diff --git a/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.js b/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.js
deleted file mode 100644
index 77ce33a34..000000000
--- a/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// @ts-check
-
-/**
- * @typedef {Object} ParentNodeInfo
- * @property {number} pos - The position of the parent node.
- * @property {number} start - The start position of the parent node.
- * @property {number} depth - The depth of the parent node.
- * @property {import("prosemirror-model").Node} node - The parent node.
- */
-
-/**
- * Finds the closest parent node to a resolved position that matches a predicate.
- * @param {import("prosemirror-model").ResolvedPos} $pos - The resolved position.
- * @param {function(import("prosemirror-model").Node): boolean} predicate - Predicate to match.
- * @returns {ParentNodeInfo|null} Closest parent node to the resolved position that matches the predicate.
- *
- * https://github.com/atlassian/prosemirror-utils/blob/master/src/selection.ts#L57
- */
-export const findParentNodeClosestToPos = ($pos, predicate) => {
-  for (let i = $pos.depth; i > 0; i--) {
-    const node = $pos.node(i);
-    if (predicate(node)) {
-      return {
-        pos: i > 0 ? $pos.before(i) : 0,
-        start: $pos.start(i),
-        depth: i,
-        node,
-      };
-    }
-  }
-};
diff --git a/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.ts b/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.ts
new file mode 100644
index 000000000..ea63e27d7
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/findParentNodeClosestToPos.ts
@@ -0,0 +1,31 @@
+import type { Node as PmNode, ResolvedPos } from 'prosemirror-model';
+
+export type ParentNodeInfo = {
+  pos: number;
+  start: number;
+  depth: number;
+  node: PmNode;
+};
+
+/**
+ * Finds the closest parent node to a resolved position that matches a predicate.
+ *
+ * https://github.com/atlassian/prosemirror-utils/blob/master/src/selection.ts#L57
+ */
+export const findParentNodeClosestToPos = (
+  $pos: ResolvedPos,
+  predicate: (node: PmNode) => boolean,
+): ParentNodeInfo | null => {
+  for (let i = $pos.depth; i > 0; i--) {
+    const node = $pos.node(i);
+    if (predicate(node)) {
+      return {
+        pos: i > 0 ? $pos.before(i) : 0,
+        start: $pos.start(i),
+        depth: i,
+        node,
+      };
+    }
+  }
+  return null;
+};
diff --git a/packages/super-editor/src/core/helpers/findWordBounds.js b/packages/super-editor/src/core/helpers/findWordBounds.ts
similarity index 68%
rename from packages/super-editor/src/core/helpers/findWordBounds.js
rename to packages/super-editor/src/core/helpers/findWordBounds.ts
index f0a71c4a4..ba43580f6 100644
--- a/packages/super-editor/src/core/helpers/findWordBounds.js
+++ b/packages/super-editor/src/core/helpers/findWordBounds.ts
@@ -4,13 +4,17 @@
  * @param pos event position.
  * @returns position of the word.
  */
-export const findWordBounds = (doc, pos) => {
+import type { Node as PmNode, ResolvedPos } from 'prosemirror-model';
+
+type ResolvableDoc = PmNode & { resolve: (pos: number) => ResolvedPos };
+
+export const findWordBounds = (doc: ResolvableDoc, pos: number): { from: number; to: number } | undefined => {
   const $pos = doc.resolve(pos);
   const parent = $pos.parent;
   const offsetInParent = $pos.parentOffset;
 
   let offset = 0;
-  let targetNode = null;
+  let targetNode: PmNode | null = null;
   let nodeStart = 0;
 
   parent.forEach((child, childOffset) => {
@@ -29,13 +33,15 @@ export const findWordBounds = (doc, pos) => {
 
   if (!targetNode) return;
 
-  const text = targetNode.text;
+  const text: string | undefined = (targetNode as { text?: string }).text;
+  if (typeof text !== 'string') return;
   const cursorOffset = offsetInParent - nodeStart;
 
-  const isWordChar = (ch) => /\w/.test(ch);
-  const isPunctOrSpace = (ch) => /[.,;:!-?=()[\]{}"'\s]/.test(ch);
+  const isWordChar = (ch: string) => /\w/.test(ch);
+  const isPunctOrSpace = (ch: string) => /[.,;:!-?=()[\]{}"'\s]/.test(ch);
 
-  let from, to;
+  let from: number;
+  let to: number;
 
   if (isPunctOrSpace(text[cursorOffset])) {
     from = $pos.start() + nodeStart + cursorOffset;
diff --git a/packages/super-editor/src/core/helpers/generateDocxListAttributes.js b/packages/super-editor/src/core/helpers/generateDocxListAttributes.ts
similarity index 77%
rename from packages/super-editor/src/core/helpers/generateDocxListAttributes.js
rename to packages/super-editor/src/core/helpers/generateDocxListAttributes.ts
index 23f845eb6..e7f7ebfdc 100644
--- a/packages/super-editor/src/core/helpers/generateDocxListAttributes.js
+++ b/packages/super-editor/src/core/helpers/generateDocxListAttributes.ts
@@ -1,8 +1,10 @@
-import { generateDocxRandomId } from './generateDocxRandomId';
+import { generateDocxRandomId } from './generateDocxRandomId.js';
 
-export function generateDocxListAttributes(listType) {
+type ListType = 'bulletList' | 'orderedList' | string;
+
+export function generateDocxListAttributes(listType: ListType) {
   // Our default blank doc definition has the following list types:
-  const listTypesMap = {
+  const listTypesMap: Record<'bulletList' | 'orderedList', number> = {
     bulletList: 1,
     orderedList: 2,
   };
@@ -41,7 +43,7 @@ export function generateDocxListAttributes(listType) {
                   type: 'element',
                   name: 'w:numId',
                   attributes: {
-                    'w:val': listTypesMap[listType] || 0,
+                    'w:val': listTypesMap[listType as 'bulletList' | 'orderedList'] || 0,
                   },
                 },
               ],
diff --git a/packages/super-editor/src/core/helpers/generateDocxRandomId.js b/packages/super-editor/src/core/helpers/generateDocxRandomId.ts
similarity index 100%
rename from packages/super-editor/src/core/helpers/generateDocxRandomId.js
rename to packages/super-editor/src/core/helpers/generateDocxRandomId.ts
diff --git a/packages/super-editor/src/core/helpers/getActiveFormatting.js b/packages/super-editor/src/core/helpers/getActiveFormatting.ts
similarity index 53%
rename from packages/super-editor/src/core/helpers/getActiveFormatting.js
rename to packages/super-editor/src/core/helpers/getActiveFormatting.ts
index 8e9beae00..104acde23 100644
--- a/packages/super-editor/src/core/helpers/getActiveFormatting.js
+++ b/packages/super-editor/src/core/helpers/getActiveFormatting.ts
@@ -1,16 +1,23 @@
 import { getMarksFromSelection } from './getMarksFromSelection.js';
 import { findMark } from './findMark.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark, MarkType, Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '../Editor.js';
 
-export function getActiveFormatting(editor) {
+type FormattingEntry = { name: string; attrs: Record<string, unknown> | boolean };
+
+export function getActiveFormatting(editor: Editor): FormattingEntry[] {
   const { state } = editor;
   const { selection } = state;
 
-  const marks = getMarksFromSelection(state);
-  const markAttrs = selection.$head.parent.attrs.marksAttrs;
+  const marks: Mark[] = getMarksFromSelection(state);
+  const markAttrs = selection.$head.parent.attrs.marksAttrs as
+    | Array<{ type: string; attrs?: Record<string, unknown> }>
+    | undefined;
 
-  const marksToProcess = marks
+  const marksToProcess: FormattingEntry[] = marks
     .filter((mark) => !['textStyle', 'link'].includes(mark.type.name))
-    .map((mark) => ({ name: mark.type.name, attrs: mark.attrs }));
+    .map((mark) => ({ name: mark.type.name, attrs: mark.attrs as Record<string, unknown> }));
 
   const textStyleMarks = marks.filter((mark) => mark.type.name === 'textStyle');
   marksToProcess.push(...textStyleMarks.flatMap(unwrapTextMarks));
@@ -27,11 +34,13 @@ export function getActiveFormatting(editor) {
     marksToProcess.push(...textStyleMarksFromAttrs.flatMap(unwrapTextMarks));
   }
 
-  const linkMarkType = state.schema.marks['link'];
-  const linkMark = findMark(state, linkMarkType);
+  const linkMarkType: MarkType | undefined = state.schema.marks['link'];
+  const linkMark = linkMarkType
+    ? (findMark(state, linkMarkType) as unknown as { from: number; to: number; attrs: Record<string, unknown> } | null)
+    : null;
 
   if (linkMark) {
-    let { from, to, attrs } = linkMark;
+    const { from, to, attrs } = linkMark;
 
     if (selection.from >= from && selection.to <= to) {
       marksToProcess.push({ name: 'link', attrs });
@@ -42,7 +51,7 @@ export function getActiveFormatting(editor) {
   const attributes = getActiveAttributes(state);
   Object.keys(attributes).forEach((key) => {
     if (ignoreKeys.includes(key)) return;
-    const attrs = {};
+    const attrs: Record<string, unknown> = {};
     attrs[key] = attributes[key];
     marksToProcess.push({ name: key, attrs });
   });
@@ -51,28 +60,30 @@ export function getActiveFormatting(editor) {
   const textColor = marksToProcess.find((i) => i.name === 'textColor');
   const textHightlight = marksToProcess.find((i) => i.name === 'textHighlight');
 
-  if (textColor) {
+  if (textColor && textColor.attrs && typeof textColor.attrs === 'object') {
     marksToProcess.push({
       name: 'color',
-      attrs: { color: textColor.attrs?.textColor },
+      attrs: { color: (textColor.attrs as Record<string, unknown>)?.['textColor'] },
     });
   }
-  if (textHightlight) {
+  if (textHightlight && textHightlight.attrs && typeof textHightlight.attrs === 'object') {
     marksToProcess.push({
       name: 'highlight',
-      attrs: { color: textHightlight.attrs?.textHighlight },
+      attrs: { color: (textHightlight.attrs as Record<string, unknown>)?.['textHighlight'] },
     });
   }
 
-  const hasPendingFormatting = !!editor.storage.formatCommands?.storedStyle;
+  const hasPendingFormatting = !!(editor as unknown as { storage?: { formatCommands?: { storedStyle?: unknown } } })
+    .storage?.formatCommands?.storedStyle;
   if (hasPendingFormatting) marksToProcess.push({ name: 'copyFormat', attrs: true });
 
   return marksToProcess;
 }
 
-function unwrapTextMarks(textStyleMark) {
-  const processedMarks = [];
-  const { attrs } = textStyleMark;
+function unwrapTextMarks(textStyleMark: Mark | { attrs?: Record<string, unknown> }): FormattingEntry[] {
+  const processedMarks: FormattingEntry[] = [];
+  const attrs = (textStyleMark as Mark).attrs ?? (textStyleMark as { attrs?: Record<string, unknown> }).attrs;
+  if (!attrs) return processedMarks;
   Object.keys(attrs).forEach((key) => {
     if (!attrs[key]) return;
     processedMarks.push({ name: key, attrs: { [key]: attrs[key] } });
@@ -80,11 +91,11 @@ function unwrapTextMarks(textStyleMark) {
   return processedMarks;
 }
 
-function getActiveAttributes(state) {
+function getActiveAttributes(state: EditorState): Record<string, unknown> {
   try {
     const { from, to, empty } = state.selection;
-    const attributes = {};
-    const getAttrs = (node) => {
+    const attributes: Record<string, unknown> = {};
+    const getAttrs = (node: PmNode) => {
       Object.keys(node.attrs).forEach((key) => {
         const value = node.attrs[key];
         if (value) {
@@ -93,8 +104,8 @@ function getActiveAttributes(state) {
       });
     };
 
-    let start = from;
-    let end = to;
+    const start = from;
+    const end = to;
     if (empty) state.doc.nodesBetween(start, end + 1, (node) => getAttrs(node));
     else state.doc.nodesBetween(from, to, (node) => getAttrs(node));
     return attributes;
diff --git a/packages/super-editor/src/core/helpers/getExtensionConfigField.js b/packages/super-editor/src/core/helpers/getExtensionConfigField.js
deleted file mode 100644
index ff947de60..000000000
--- a/packages/super-editor/src/core/helpers/getExtensionConfigField.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './getExtensionConfigField.ts';
diff --git a/packages/super-editor/src/core/helpers/getExtensionConfigField.ts b/packages/super-editor/src/core/helpers/getExtensionConfigField.ts
index cf0565e60..2f6738921 100644
--- a/packages/super-editor/src/core/helpers/getExtensionConfigField.ts
+++ b/packages/super-editor/src/core/helpers/getExtensionConfigField.ts
@@ -1,49 +1,28 @@
 /**
- * Context object passed to extension config functions.
- * This represents the runtime context available to extension configuration.
+ * Retrieves a configuration field from an extension.
+ * First checks extension.config[field], then falls back to extension[field].
+ *
+ * @param extension - The extension object to query (can be any object with optional config property)
+ * @param field - The field name to retrieve
+ * @param context - Optional context to bind function values to
+ * @returns The field value, potentially bound to context if it's a function
  */
-export interface ExtensionContext {
-  /** The name of the extension */
-  name: string;
-  /** Extension-specific options */
-  options?: Record<string, unknown>;
-  /** Extension-specific storage */
-  storage?: Record<string, unknown>;
-  /** The editor instance (when available) */
-  editor?: unknown;
-  /** The schema type for this extension (when available) */
-  type?: unknown;
-  /** Additional context properties that may be passed */
-  [key: string]: unknown;
-}
-
-/**
- * Base interface for extensions with a config object.
- */
-export interface ExtensionLike {
-  config: Record<string, unknown>;
-}
-
-/**
- * Get extension config field.
- * If the field is a function, it will be bound to the provided context.
- * @param extension The Editor extension.
- * @param field The config field name.
- * @param context The context object to bind to function.
- * @returns The config field value or bound function.
- * @template T The expected return type of the config field.
- */
-export function getExtensionConfigField<T = unknown>(
-  extension: ExtensionLike,
+export const getExtensionConfigField = <T>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extension: any,
   field: string,
-  context: ExtensionContext = { name: '' },
-): T {
-  const fieldValue = extension.config[field];
+  context?: unknown,
+): T => {
+  if (extension.config?.[field] === undefined && extension[field] === undefined) {
+    return undefined as T;
+  }
+
+  // Check config first (primary source), then fall back to direct property
+  const value = extension.config?.[field] ?? extension[field];
 
-  if (typeof fieldValue === 'function') {
-    const boundValue = fieldValue.bind({ ...context });
-    return boundValue as T;
+  if (typeof value === 'function' && context) {
+    return value.bind(context) as T;
   }
 
-  return fieldValue as T;
-}
+  return value as T;
+};
diff --git a/packages/super-editor/src/core/helpers/getHTMLFromFragment.js b/packages/super-editor/src/core/helpers/getHTMLFromFragment.ts
similarity index 66%
rename from packages/super-editor/src/core/helpers/getHTMLFromFragment.js
rename to packages/super-editor/src/core/helpers/getHTMLFromFragment.ts
index bc06467f3..e83331db5 100644
--- a/packages/super-editor/src/core/helpers/getHTMLFromFragment.js
+++ b/packages/super-editor/src/core/helpers/getHTMLFromFragment.ts
@@ -1,6 +1,6 @@
-import { DOMSerializer } from 'prosemirror-model';
+import { DOMSerializer, Fragment, Schema } from 'prosemirror-model';
 
-export function getHTMLFromFragment(fragment, schema) {
+export function getHTMLFromFragment(fragment: Fragment, schema: Schema): string {
   const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(fragment);
 
   const temporaryDocument = document.implementation.createHTMLDocument();
diff --git a/packages/super-editor/src/core/helpers/getMarkRange.js b/packages/super-editor/src/core/helpers/getMarkRange.ts
similarity index 60%
rename from packages/super-editor/src/core/helpers/getMarkRange.js
rename to packages/super-editor/src/core/helpers/getMarkRange.ts
index dc166d16e..452317a8f 100644
--- a/packages/super-editor/src/core/helpers/getMarkRange.js
+++ b/packages/super-editor/src/core/helpers/getMarkRange.ts
@@ -1,14 +1,10 @@
-// @ts-check
 import { objectIncludes } from '../utilities/objectIncludes.js';
+import type { Mark, MarkType, ResolvedPos } from 'prosemirror-model';
 
 /**
  * Get the range of a mark in a document
- * @param {Array<import("prosemirror-model").Mark>} marks
- * @param {import("prosemirror-model").MarkType} type
- * @param {Object} attrs
- * @returns {Object} The range of the mark in the document
  */
-function findMarkInSet(marks, type, attrs = {}) {
+function findMarkInSet(marks: Mark[], type: MarkType, attrs: Record<string, unknown> = {}): Mark | undefined {
   return marks.find((item) => {
     return item.type === type && objectIncludes(item.attrs, attrs);
   });
@@ -16,23 +12,19 @@ function findMarkInSet(marks, type, attrs = {}) {
 
 /**
  * Check if a mark is in a set of marks
- * @param {Array<import("prosemirror-model").Mark>} marks
- * @param {import("prosemirror-model").MarkType} type
- * @param {Object} attrs
- * @returns {boolean} True if the mark is in the set, false otherwise
  */
-function isMarkInSet(marks, type, attrs = {}) {
+function isMarkInSet(marks: Mark[], type: MarkType, attrs: Record<string, unknown> = {}): boolean {
   return !!findMarkInSet(marks, type, attrs);
 }
 
 /**
  * Get the range of a mark in a document
- * @param {import("prosemirror-model").ResolvedPos} $pos - The position in the document
- * @param {import("prosemirror-model").MarkType} type - The type of the mark
- * @param {Object} attrs - The attributes of the mark
- * @returns {Object} The range of the mark in the document
  */
-export function getMarkRange($pos, type, attrs = {}) {
+export function getMarkRange(
+  $pos: ResolvedPos,
+  type: MarkType,
+  attrs: Record<string, unknown> = {},
+): { from: number; to: number } | undefined {
   if (!$pos || !type) return;
 
   let start = $pos.parent.childAfter($pos.parentOffset);
diff --git a/packages/super-editor/src/core/helpers/getMarkType.js b/packages/super-editor/src/core/helpers/getMarkType.ts
similarity index 73%
rename from packages/super-editor/src/core/helpers/getMarkType.js
rename to packages/super-editor/src/core/helpers/getMarkType.ts
index 663e993f5..f3b9704df 100644
--- a/packages/super-editor/src/core/helpers/getMarkType.js
+++ b/packages/super-editor/src/core/helpers/getMarkType.ts
@@ -1,10 +1,12 @@
+import type { MarkType, Schema } from 'prosemirror-model';
+
 /**
  * Get mark type from schema if it's a string or return directly.
  * @param nameOrType Name or type of the mark.
  * @param schema Schema.
  * @returns Mark type or null.
  */
-export function getMarkType(nameOrType, schema) {
+export function getMarkType(nameOrType: string | MarkType, schema: Schema): MarkType {
   if (typeof nameOrType === 'string') {
     if (!schema.marks[nameOrType]) {
       throw Error(`There is no mark type named '${nameOrType}' in schema.`);
diff --git a/packages/super-editor/src/core/helpers/getMarksBetween.js b/packages/super-editor/src/core/helpers/getMarksBetween.ts
similarity index 73%
rename from packages/super-editor/src/core/helpers/getMarksBetween.js
rename to packages/super-editor/src/core/helpers/getMarksBetween.ts
index 8ccb137e8..6b47a02dd 100644
--- a/packages/super-editor/src/core/helpers/getMarksBetween.js
+++ b/packages/super-editor/src/core/helpers/getMarksBetween.ts
@@ -1,7 +1,14 @@
 import { getMarkRange } from './getMarkRange.js';
+import type { Node as PmNode, Mark } from 'prosemirror-model';
 
-export function getMarksBetween(from, to, doc) {
-  const marks = [];
+type MarkWithRange = {
+  mark: Mark;
+  from: number;
+  to: number;
+};
+
+export function getMarksBetween(from: number, to: number, doc: PmNode): MarkWithRange[] {
+  const marks: MarkWithRange[] = [];
 
   // get all inclusive marks on empty selection
   if (from === to) {
diff --git a/packages/super-editor/src/core/helpers/getMarksFromSelection.js b/packages/super-editor/src/core/helpers/getMarksFromSelection.ts
similarity index 61%
rename from packages/super-editor/src/core/helpers/getMarksFromSelection.js
rename to packages/super-editor/src/core/helpers/getMarksFromSelection.ts
index 07c5a19b8..b3f471c5e 100644
--- a/packages/super-editor/src/core/helpers/getMarksFromSelection.js
+++ b/packages/super-editor/src/core/helpers/getMarksFromSelection.ts
@@ -1,6 +1,9 @@
-export function getMarksFromSelection(state) {
+import type { EditorState } from 'prosemirror-state';
+import type { Mark } from 'prosemirror-model';
+
+export function getMarksFromSelection(state: EditorState): Mark[] {
   const { from, to, empty } = state.selection;
-  const marks = [];
+  const marks: Mark[] = [];
 
   if (empty) {
     if (state.storedMarks) {
diff --git a/packages/super-editor/src/core/helpers/getNodeType.js b/packages/super-editor/src/core/helpers/getNodeType.ts
similarity index 73%
rename from packages/super-editor/src/core/helpers/getNodeType.js
rename to packages/super-editor/src/core/helpers/getNodeType.ts
index bce1a1cbe..2ab224c2a 100644
--- a/packages/super-editor/src/core/helpers/getNodeType.js
+++ b/packages/super-editor/src/core/helpers/getNodeType.ts
@@ -1,10 +1,12 @@
+import type { NodeType, Schema } from 'prosemirror-model';
+
 /**
  * Get node type from schema if it's a string or return directly.
  * @param nameOrType Name or type of the node.
  * @param schema Schema.
  * @returns Node type or null.
  */
-export function getNodeType(nameOrType, schema) {
+export function getNodeType(nameOrType: string | NodeType, schema: Schema): NodeType {
   if (typeof nameOrType === 'string') {
     if (!schema.nodes[nameOrType]) {
       throw Error(`There is no node type named '${nameOrType}' in schema.`);
diff --git a/packages/super-editor/src/core/helpers/getSchemaTypeByName.js b/packages/super-editor/src/core/helpers/getSchemaTypeByName.ts
similarity index 55%
rename from packages/super-editor/src/core/helpers/getSchemaTypeByName.js
rename to packages/super-editor/src/core/helpers/getSchemaTypeByName.ts
index 8374a1a32..6bf78aae2 100644
--- a/packages/super-editor/src/core/helpers/getSchemaTypeByName.js
+++ b/packages/super-editor/src/core/helpers/getSchemaTypeByName.ts
@@ -1,9 +1,11 @@
+import type { NodeType, MarkType, Schema } from 'prosemirror-model';
+
 /**
  * Get node or mark type by name.
  * @param name Node or mark name.
  * @param schema PM schema.
  * @returns Node or mark type or null.
  */
-export function getSchemaTypeByName(name, schema) {
+export function getSchemaTypeByName(name: string, schema: Schema): NodeType | MarkType | null {
   return schema.nodes[name] || schema.marks[name] || null;
 }
diff --git a/packages/super-editor/src/core/helpers/getSchemaTypeNameByName.js b/packages/super-editor/src/core/helpers/getSchemaTypeNameByName.ts
similarity index 69%
rename from packages/super-editor/src/core/helpers/getSchemaTypeNameByName.js
rename to packages/super-editor/src/core/helpers/getSchemaTypeNameByName.ts
index e04324dfc..aa2d08f2a 100644
--- a/packages/super-editor/src/core/helpers/getSchemaTypeNameByName.js
+++ b/packages/super-editor/src/core/helpers/getSchemaTypeNameByName.ts
@@ -1,10 +1,12 @@
+import type { Schema } from 'prosemirror-model';
+
 /**
  * Get the type of a schema item by its name.
  * @param name The name of the schema item.
  * @param schema The PM schema to search in.
  * @returns The type of the schema item (`node` or `mark`), or null if it doesn't exist.
  */
-export function getSchemaTypeNameByName(name, schema) {
+export function getSchemaTypeNameByName(name: string, schema: Schema): 'node' | 'mark' | null {
   if (schema.nodes[name]) return 'node';
   if (schema.marks[name]) return 'mark';
   return null;
diff --git a/packages/super-editor/src/core/helpers/getTextContentFromNodes.js b/packages/super-editor/src/core/helpers/getTextContentFromNodes.js
deleted file mode 100644
index 26ddf5a96..000000000
--- a/packages/super-editor/src/core/helpers/getTextContentFromNodes.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Returns the text content of a resolved prosemirror position
- * @param $from The resolved position to get the text content from
- * @param maxMatch The maximum number of characters to match
- * @returns The text content
- */
-export const getTextContentFromNodes = ($from, maxMatch = 500) => {
-  let textBefore = '';
-
-  const sliceEndPos = $from.parentOffset;
-
-  $from.parent.nodesBetween(Math.max(0, sliceEndPos - maxMatch), sliceEndPos, (node, pos, parent, index) => {
-    const chunk =
-      node.type.spec.toText?.({
-        node,
-        pos,
-        parent,
-        index,
-      }) ||
-      node.textContent ||
-      '%leaf%';
-
-    textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
-  });
-
-  return textBefore;
-};
diff --git a/packages/super-editor/src/core/helpers/getTextContentFromNodes.ts b/packages/super-editor/src/core/helpers/getTextContentFromNodes.ts
new file mode 100644
index 000000000..68b718dfa
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/getTextContentFromNodes.ts
@@ -0,0 +1,36 @@
+import type { ResolvedPos, Node as PmNode } from 'prosemirror-model';
+
+/**
+ * Returns the text content of a resolved prosemirror position
+ * @param $from The resolved position to get the text content from
+ * @param maxMatch The maximum number of characters to match
+ * @returns The text content
+ */
+export const getTextContentFromNodes = ($from: ResolvedPos, maxMatch = 500): string => {
+  let textBefore = '';
+
+  const sliceEndPos = $from.parentOffset;
+
+  $from.parent.nodesBetween(
+    Math.max(0, sliceEndPos - maxMatch),
+    sliceEndPos,
+    (node: PmNode, pos: number, parent: PmNode | null, index: number) => {
+      const toTextFn = node.type.spec.toText as unknown as
+        | ((params: { node: PmNode; pos: number; parent: PmNode | null; index: number }) => string)
+        | undefined;
+      const chunk =
+        toTextFn?.({
+          node,
+          pos,
+          parent,
+          index,
+        }) ||
+        node.textContent ||
+        '%leaf%';
+
+      textBefore += node.isAtom && !node.isText ? chunk : chunk.slice(0, Math.max(0, sliceEndPos - pos));
+    },
+  );
+
+  return textBefore;
+};
diff --git a/packages/super-editor/src/core/helpers/htmlSanitizer.js b/packages/super-editor/src/core/helpers/htmlSanitizer.ts
similarity index 62%
rename from packages/super-editor/src/core/helpers/htmlSanitizer.js
rename to packages/super-editor/src/core/helpers/htmlSanitizer.ts
index 4b9612590..0238cf402 100644
--- a/packages/super-editor/src/core/helpers/htmlSanitizer.js
+++ b/packages/super-editor/src/core/helpers/htmlSanitizer.ts
@@ -1,12 +1,11 @@
-//@ts-check
 /**
  * Strip all inline styles(but alignment) and non-semantic attributes from HTML
  * Preserves structure while removing presentation
  *
- * @param {string} html - Raw HTML string
- * @returns {string} Clean HTML with semantic structure only
+ * @param html - Raw HTML string
+ * @returns Clean HTML with semantic structure only
  */
-export function stripHtmlStyles(html) {
+export function stripHtmlStyles(html: string): string {
   if (!html) return '';
 
   const parser = new window.DOMParser();
@@ -30,22 +29,24 @@ export function stripHtmlStyles(html) {
     'styleid',
   ];
 
-  const cleanNode = (node) => {
+  const cleanNode = (node: Node): void => {
     if (node.nodeType !== window.Node.ELEMENT_NODE) return;
 
+    const element = node as Element;
+
     // Process spans with only text inside
-    if (node.nodeName.toLowerCase() === 'span' && !node.children.length) {
-      node.innerHTML = preserveSpaces(node.innerHTML);
+    if (element.nodeName.toLowerCase() === 'span' && !element.children.length) {
+      element.innerHTML = preserveSpaces(element.innerHTML);
     }
 
-    [...node.attributes].forEach((attr) => {
+    Array.from(element.attributes).forEach((attr) => {
       const name = attr.name.toLowerCase();
 
       if (name === 'style') {
         const cleanedStyle = cleanStyle(attr.value);
         if (!cleanedStyle) {
-          node.removeAttribute(attr.name);
-        } else node.setAttribute(attr.name, cleanedStyle);
+          element.removeAttribute(attr.name);
+        } else element.setAttribute(attr.name, cleanedStyle);
 
         return;
       }
@@ -53,10 +54,10 @@ export function stripHtmlStyles(html) {
       const shouldKeep = SUPPORTED_ATTRS.includes(name) || name.startsWith('data-'); // Keep all data-* attributes
 
       if (!shouldKeep) {
-        node.removeAttribute(attr.name);
+        element.removeAttribute(attr.name);
       }
     });
-    [...node.children].forEach(cleanNode);
+    Array.from(element.children).forEach(cleanNode);
   };
 
   cleanNode(doc.body);
@@ -66,10 +67,10 @@ export function stripHtmlStyles(html) {
 /**
  * Strip all styles except of alignment
  *
- * @param {string} style - Style attribute value
- * @returns {string} Clean style string with supported styling
+ * @param style - Style attribute value
+ * @returns Clean style string with supported styling
  */
-function cleanStyle(style) {
+function cleanStyle(style: string): string {
   if (!style) return '';
 
   const declarations = style
@@ -84,9 +85,9 @@ function cleanStyle(style) {
 /**
  * Replaces all leading and trailing spaces inside innerHtml with special space symbol
  *
- * @param {string} innerHtml - innerHtml of DOM node
- * @returns {string} Updated innerHTML
+ * @param innerHtml - innerHtml of DOM node
+ * @returns Updated innerHTML
  */
-function preserveSpaces(innerHtml) {
+function preserveSpaces(innerHtml: string): string {
   return innerHtml.replace(/^\s+/, '&nbsp;').replace(/\s+$/, '&nbsp;');
 }
diff --git a/packages/super-editor/src/core/helpers/importHtml.js b/packages/super-editor/src/core/helpers/importHtml.js
deleted file mode 100644
index 1f36cb7f0..000000000
--- a/packages/super-editor/src/core/helpers/importHtml.js
+++ /dev/null
@@ -1,36 +0,0 @@
-//@ts-check
-import { DOMParser } from 'prosemirror-model';
-import { stripHtmlStyles } from './htmlSanitizer.js';
-import { htmlHandler } from '../InputRule.js';
-import { wrapTextsInRuns } from '../inputRules/docx-paste/docx-paste.js';
-
-/**
- * Create a document from HTML content
- * @param {string} content - HTML content
- * @param {Object} editor - Editor instance
- * @param {Object} [options={}] - Import options
- * @returns {Object} Document node
- */
-export function createDocFromHTML(content, editor, options = {}) {
-  const { isImport = false } = options;
-  let parsedContent;
-
-  if (typeof content === 'string') {
-    // Strip styles
-    const tempDiv = htmlHandler(stripHtmlStyles(content), editor);
-
-    // Mark as import if needed
-    if (isImport) {
-      // @ts-expect-error - dataset property may not exist on all node types
-      tempDiv.dataset.superdocImport = 'true';
-    }
-
-    parsedContent = tempDiv;
-  } else {
-    parsedContent = content;
-  }
-
-  let doc = DOMParser.fromSchema(editor.schema).parse(parsedContent);
-  doc = wrapTextsInRuns(doc);
-  return doc;
-}
diff --git a/packages/super-editor/src/core/helpers/importHtml.ts b/packages/super-editor/src/core/helpers/importHtml.ts
new file mode 100644
index 000000000..462fb6a29
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/importHtml.ts
@@ -0,0 +1,39 @@
+import { DOMParser, Node as PmNode } from 'prosemirror-model';
+import { stripHtmlStyles } from './htmlSanitizer.js';
+import { htmlHandler } from '../InputRule.js';
+import { wrapTextsInRuns } from '../inputRules/docx-paste/docx-paste.js';
+import type { Editor } from '../Editor.js';
+
+/**
+ * Create a document from HTML content
+ * @param content - HTML content
+ * @param editor - Editor instance
+ * @param options - Import options
+ * @returns Document node
+ */
+export function createDocFromHTML(
+  content: string | HTMLElement,
+  editor: Editor,
+  options: { isImport?: boolean } = {},
+): PmNode {
+  const { isImport = false } = options;
+  let parsedContent: HTMLElement | DocumentFragment;
+
+  if (typeof content === 'string') {
+    // Strip styles
+    const fragment = htmlHandler(stripHtmlStyles(content), editor);
+
+    // Mark as import if needed
+    if (isImport && fragment.firstElementChild) {
+      (fragment.firstElementChild as HTMLElement).dataset.superdocImport = 'true';
+    }
+
+    parsedContent = fragment;
+  } else {
+    parsedContent = content;
+  }
+
+  let doc = DOMParser.fromSchema(editor.schema).parse(parsedContent);
+  doc = wrapTextsInRuns(doc);
+  return doc;
+}
diff --git a/packages/super-editor/src/core/helpers/importMarkdown.js b/packages/super-editor/src/core/helpers/importMarkdown.ts
similarity index 58%
rename from packages/super-editor/src/core/helpers/importMarkdown.js
rename to packages/super-editor/src/core/helpers/importMarkdown.ts
index 0aef461f3..31e49456f 100644
--- a/packages/super-editor/src/core/helpers/importMarkdown.js
+++ b/packages/super-editor/src/core/helpers/importMarkdown.ts
@@ -1,6 +1,7 @@
-// @ts-check
 import { marked } from 'marked';
 import { createDocFromHTML } from './importHtml.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '../Editor.js';
 
 // Configure marked once
 marked.use({
@@ -10,23 +11,23 @@ marked.use({
 
 /**
  * Create a ProseMirror document from Markdown content
- * @param {string} markdown - Markdown content
- * @param {Object} editor - Editor instance
- * @param {Object} [options={}] - Import options
- * @returns {Object} Document node
+ * @param markdown - Markdown content
+ * @param editor - Editor instance
+ * @param options - Import options
+ * @returns Document node
  */
-export function createDocFromMarkdown(markdown, editor, options = {}) {
+export function createDocFromMarkdown(markdown: string, editor: Editor, options: { isImport?: boolean } = {}): PmNode {
   const html = convertMarkdownToHTML(markdown);
   return createDocFromHTML(html, editor, options);
 }
 
 /**
  * Convert Markdown to HTML with SuperDoc/DOCX compatibility
- * @param {string} markdown - Markdown content
- * @returns {string} HTML content
+ * @param markdown - Markdown content
+ * @returns HTML content
  */
-export function convertMarkdownToHTML(markdown) {
-  let html = marked.parse(markdown, { async: false });
+export function convertMarkdownToHTML(markdown: string): string {
+  const html = marked.parse(markdown, { async: false }) as string;
 
   // Add spacing between paragraphs and lists for proper DOCX rendering
   return html
diff --git a/packages/super-editor/src/core/helpers/index.js b/packages/super-editor/src/core/helpers/index.ts
similarity index 100%
rename from packages/super-editor/src/core/helpers/index.js
rename to packages/super-editor/src/core/helpers/index.ts
diff --git a/packages/super-editor/src/core/helpers/isActive.js b/packages/super-editor/src/core/helpers/isActive.ts
similarity index 81%
rename from packages/super-editor/src/core/helpers/isActive.js
rename to packages/super-editor/src/core/helpers/isActive.ts
index 0b0d61ac3..adcdfb202 100644
--- a/packages/super-editor/src/core/helpers/isActive.js
+++ b/packages/super-editor/src/core/helpers/isActive.ts
@@ -1,6 +1,7 @@
 import { getSchemaTypeNameByName } from './getSchemaTypeNameByName.js';
 import { isMarkActive } from './isMarkActive.js';
 import { isNodeActive } from './isNodeActive.js';
+import type { EditorState } from 'prosemirror-state';
 
 /**
  * Checks if the currently selected node or mark is active.
@@ -9,7 +10,7 @@ import { isNodeActive } from './isNodeActive.js';
  * @param attrs The node or mark attrs.
  * @returns Boolean.
  */
-export function isActive(state, name, attrs = {}) {
+export function isActive(state: EditorState, name: string | null, attrs: Record<string, unknown> = {}): boolean {
   if (!name) {
     return isNodeActive(state, null, attrs) || isMarkActive(state, null, attrs);
   }
diff --git a/packages/super-editor/src/core/helpers/isExtentionRulesEnabled.js b/packages/super-editor/src/core/helpers/isExtentionRulesEnabled.ts
similarity index 51%
rename from packages/super-editor/src/core/helpers/isExtentionRulesEnabled.js
rename to packages/super-editor/src/core/helpers/isExtentionRulesEnabled.ts
index a754e64bf..074fe9ad8 100644
--- a/packages/super-editor/src/core/helpers/isExtentionRulesEnabled.js
+++ b/packages/super-editor/src/core/helpers/isExtentionRulesEnabled.ts
@@ -1,4 +1,11 @@
-export function isExtensionRulesEnabled(extension, enabled) {
+import type { Extension } from '../Extension.js';
+
+type EnabledExtension = string | { name: string };
+
+export function isExtensionRulesEnabled(
+  extension: Extension | { name: string },
+  enabled: boolean | EnabledExtension[],
+): boolean {
   if (Array.isArray(enabled)) {
     return enabled.some((enabledExtension) => {
       const name = typeof enabledExtension === 'string' ? enabledExtension : enabledExtension.name;
diff --git a/packages/super-editor/src/core/helpers/isInTable.js b/packages/super-editor/src/core/helpers/isInTable.ts
similarity index 65%
rename from packages/super-editor/src/core/helpers/isInTable.js
rename to packages/super-editor/src/core/helpers/isInTable.ts
index bd28d5874..a40a55462 100644
--- a/packages/super-editor/src/core/helpers/isInTable.js
+++ b/packages/super-editor/src/core/helpers/isInTable.ts
@@ -1,16 +1,17 @@
-// @ts-check
+import type { EditorState } from 'prosemirror-state';
+
 /**
  * Check if cursor is inside a table
  * @private
  * @category Helper
- * @param {Object} state - Editor state
- * @returns {boolean} True if cursor is in table
+ * @param state - Editor state
+ * @returns True if cursor is in table
  * @example
  * if (isInTable(state)) {
  *   // Enable table-specific commands
  * }
  */
-export const isInTable = (state) => {
+export const isInTable = (state: EditorState): boolean => {
   const { $head } = state.selection;
 
   for (let d = $head.depth; d > 0; d -= 1) {
diff --git a/packages/super-editor/src/core/helpers/isList.js b/packages/super-editor/src/core/helpers/isList.ts
similarity index 59%
rename from packages/super-editor/src/core/helpers/isList.js
rename to packages/super-editor/src/core/helpers/isList.ts
index f0cb4acea..e0fcd20f3 100644
--- a/packages/super-editor/src/core/helpers/isList.js
+++ b/packages/super-editor/src/core/helpers/isList.ts
@@ -1,12 +1,16 @@
 import { getExtensionConfigField } from './getExtensionConfigField.js';
 import { callOrGet } from '../utilities/callOrGet.js';
+import type { Extension } from '../Extension.js';
+import type { Node } from '../Node.js';
+
+type AnyExtension = Extension | Node;
 
 /**
  * Check if node is a list.
  * @param name Node name.
  * @param extensions Array of extensions.
  */
-export const isList = (name, extensions) => {
+export const isList = (name: string, extensions: AnyExtension[]): boolean => {
   const nodeExtensions = extensions.filter((e) => e.type === 'node');
   const extension = nodeExtensions.find((i) => i.name === name);
   if (!extension) return false;
@@ -16,8 +20,10 @@ export const isList = (name, extensions) => {
     options: extension.options,
     storage: extension.storage,
   };
-  const group = callOrGet(getExtensionConfigField(extension, 'group', context));
+  const groupField = getExtensionConfigField(extension, 'group', context);
+  const group = callOrGet(groupField);
+
   if (typeof group !== 'string') return false;
 
-  return group.split(' ').includes('list');
+  return (group as string).split(' ').includes('list');
 };
diff --git a/packages/super-editor/src/core/helpers/isMarkActive.js b/packages/super-editor/src/core/helpers/isMarkActive.ts
similarity index 86%
rename from packages/super-editor/src/core/helpers/isMarkActive.js
rename to packages/super-editor/src/core/helpers/isMarkActive.ts
index 7d1973b49..e62b15f95 100644
--- a/packages/super-editor/src/core/helpers/isMarkActive.js
+++ b/packages/super-editor/src/core/helpers/isMarkActive.ts
@@ -1,5 +1,7 @@
 import { getMarkType } from './getMarkType.js';
 import { objectIncludes } from '../utilities/objectIncludes.js';
+import type { EditorState } from 'prosemirror-state';
+import type { MarkType } from 'prosemirror-model';
 
 /**
  * Checks if the currently selected mark is active.
@@ -8,7 +10,11 @@ import { objectIncludes } from '../utilities/objectIncludes.js';
  * @param attrs The mark attrs.
  * @returns Boolean.
  */
-export function isMarkActive(state, typeOrName, attrs = {}) {
+export function isMarkActive(
+  state: EditorState,
+  typeOrName: string | MarkType | null,
+  attrs: Record<string, unknown> = {},
+): boolean {
   const { empty, ranges } = state.selection;
   const type = typeOrName ? getMarkType(typeOrName, state.schema) : null;
 
@@ -22,7 +28,7 @@ export function isMarkActive(state, typeOrName, attrs = {}) {
   }
 
   let selectionRange = 0;
-  const markRanges = [];
+  const markRanges: Array<{ mark: import('prosemirror-model').Mark; from: number; to: number }> = [];
 
   ranges.forEach(({ $from, $to }) => {
     const from = $from.pos;
diff --git a/packages/super-editor/src/core/helpers/isNodeActive.js b/packages/super-editor/src/core/helpers/isNodeActive.ts
similarity index 77%
rename from packages/super-editor/src/core/helpers/isNodeActive.js
rename to packages/super-editor/src/core/helpers/isNodeActive.ts
index b97b77443..6deb3bcab 100644
--- a/packages/super-editor/src/core/helpers/isNodeActive.js
+++ b/packages/super-editor/src/core/helpers/isNodeActive.ts
@@ -1,5 +1,7 @@
 import { getNodeType } from './getNodeType.js';
 import { objectIncludes } from '../utilities/objectIncludes.js';
+import type { EditorState } from 'prosemirror-state';
+import type { NodeType } from 'prosemirror-model';
 
 /**
  * Checks if the currently selected node is active.
@@ -8,11 +10,15 @@ import { objectIncludes } from '../utilities/objectIncludes.js';
  * @param attrs The node attrs.
  * @returns Boolean.
  */
-export function isNodeActive(state, typeOrName, attrs = {}) {
+export function isNodeActive(
+  state: EditorState,
+  typeOrName: string | NodeType | null,
+  attrs: Record<string, unknown> = {},
+): boolean {
   const { from, to, empty } = state.selection;
   const type = typeOrName ? getNodeType(typeOrName, state.schema) : null;
 
-  const nodeRanges = [];
+  const nodeRanges: Array<{ node: import('prosemirror-model').Node; from: number; to: number }> = [];
 
   state.doc.nodesBetween(from, to, (node, pos) => {
     if (node.isText) return;
diff --git a/packages/super-editor/src/core/helpers/isTextSelection.js b/packages/super-editor/src/core/helpers/isTextSelection.ts
similarity index 68%
rename from packages/super-editor/src/core/helpers/isTextSelection.js
rename to packages/super-editor/src/core/helpers/isTextSelection.ts
index 67fe0d2a2..6d75ba350 100644
--- a/packages/super-editor/src/core/helpers/isTextSelection.js
+++ b/packages/super-editor/src/core/helpers/isTextSelection.ts
@@ -4,6 +4,6 @@ import { TextSelection } from 'prosemirror-state';
  * Checks if value is a TextSelection.
  * @param value Any value.
  */
-export const isTextSelection = (value) => {
+export const isTextSelection = (value: unknown): value is TextSelection => {
   return value instanceof TextSelection;
 };
diff --git a/packages/super-editor/src/core/helpers/list-numbering-helpers.test.js b/packages/super-editor/src/core/helpers/list-numbering-helpers.test.js
index 6b4f63e58..1532fb401 100644
--- a/packages/super-editor/src/core/helpers/list-numbering-helpers.test.js
+++ b/packages/super-editor/src/core/helpers/list-numbering-helpers.test.js
@@ -86,10 +86,13 @@ describe('getListDefinitionDetails', () => {
 
       expect(result).toEqual({
         start: '1',
+        restart: null,
         numFmt: 'decimal',
         lvlText: '%1.',
+        suffix: null,
+        justification: null,
         listNumberingType: 'decimal',
-        customFormat: undefined,
+        customFormat: null,
         abstract: mockAbstracts['abstract1'],
         abstractId: 'abstract1',
       });
@@ -288,12 +291,13 @@ describe('getListDefinitionDetails', () => {
 
       expect(result).toEqual({
         start: null,
+        restart: null,
         numFmt: null,
         lvlText: null,
+        suffix: null,
+        justification: null,
         listNumberingType: null,
         customFormat: null,
-        justification: null,
-        suffix: null,
         abstract: null,
         abstractId: 'nonexistent', // The function correctly returns the abstractId even when abstract is not found
       });
@@ -327,6 +331,7 @@ describe('getListDefinitionDetails', () => {
 
       expect(result).toEqual({
         start: null,
+        restart: null,
         numFmt: null,
         lvlText: null,
         suffix: null,
@@ -614,8 +619,8 @@ describe('getListDefinitionDetails', () => {
         editor: mockEditor,
       });
 
-      expect(result.start).toBe(undefined);
-      expect(result.numFmt).toBe(undefined);
+      expect(result.start).toBeNull();
+      expect(result.numFmt).toBeNull();
       expect(result.lvlText).toBe('valid');
     });
 
@@ -661,6 +666,7 @@ describe('getListDefinitionDetails', () => {
 
       expect(result).toEqual({
         start: null,
+        restart: null,
         numFmt: null,
         lvlText: null,
         justification: null,
@@ -668,7 +674,7 @@ describe('getListDefinitionDetails', () => {
         listNumberingType: null,
         customFormat: null,
         abstract: null,
-        abstractId: undefined,
+        abstractId: null,
       });
     });
   });
@@ -738,13 +744,15 @@ describe('getListDefinitionDetails', () => {
         converter: null,
       };
 
-      expect(() => {
-        getListDefinitionDetails({
-          numId: 1,
-          level: 0,
-          editor: badEditor,
-        });
-      }).toThrow();
+      const result = getListDefinitionDetails({
+        numId: 1,
+        level: 0,
+        editor: badEditor,
+      });
+
+      // Should return nulls for all fields instead of throwing
+      expect(result.numFmt).toBeNull();
+      expect(result.abstract).toBeNull();
     });
 
     it('should handle missing numbering gracefully', () => {
@@ -754,13 +762,15 @@ describe('getListDefinitionDetails', () => {
         },
       };
 
-      expect(() => {
-        getListDefinitionDetails({
-          numId: 1,
-          level: 0,
-          editor: editorWithoutNumbering,
-        });
-      }).toThrow();
+      const result = getListDefinitionDetails({
+        numId: 1,
+        level: 0,
+        editor: editorWithoutNumbering,
+      });
+
+      // Should return nulls for all fields instead of throwing
+      expect(result.numFmt).toBeNull();
+      expect(result.abstract).toBeNull();
     });
   });
 
diff --git a/packages/super-editor/src/core/helpers/list-numbering-helpers.js b/packages/super-editor/src/core/helpers/list-numbering-helpers.ts
similarity index 50%
rename from packages/super-editor/src/core/helpers/list-numbering-helpers.js
rename to packages/super-editor/src/core/helpers/list-numbering-helpers.ts
index 43bf878f5..fc30909cd 100644
--- a/packages/super-editor/src/core/helpers/list-numbering-helpers.js
+++ b/packages/super-editor/src/core/helpers/list-numbering-helpers.ts
@@ -1,30 +1,97 @@
-// @ts-check
 import { getStyleTagFromStyleId } from '@core/super-converter/v2/importer/listImporter.js';
-import { baseBulletList, baseOrderedListDef } from './baseListDefinitions';
-import { updateNumberingProperties } from '@core/commands/changeListLevel';
+import { baseBulletList, baseOrderedListDef } from './baseListDefinitions.js';
+import { updateNumberingProperties } from '@core/commands/changeListLevel.js';
 import { findParentNode } from './findParentNode.js';
+import type { Editor } from '../Editor.js';
+import type { Node as PmNode, NodeType } from 'prosemirror-model';
+import type { Transaction } from 'prosemirror-state';
+
+type NumberingElement = {
+  type?: string;
+  name: string;
+  attributes?: Record<string, string>;
+  elements?: NumberingElement[];
+};
+
+type NumberingData = {
+  definitions: Record<string, NumberingElement>;
+  abstracts: Record<string, NumberingElement>;
+};
+
+type ListType = NodeType | { name: string } | string;
+
+type ListDefinitionDetails = {
+  start: string | null;
+  restart: string | null;
+  numFmt: string | null;
+  lvlText: string | null;
+  suffix: string | null;
+  justification: string | null;
+  listNumberingType: string | null;
+  customFormat: string | null;
+  abstract: NumberingElement | null;
+  abstractId: string | null;
+};
+
+type LevelDefinition = {
+  start: string | null;
+  restart: string | null;
+  numFmt: string | null;
+  lvlText: string | null;
+  suffix: string | null;
+  justification: string | null;
+  listNumberingType: string | null;
+  customFormat: string | null;
+  abstract: NumberingElement | null;
+  abstractId: string | null;
+};
+
+type AllListDefinitions = Record<string, Record<string, LevelDefinition>>;
+
+const getNumbering = (editor: Editor): NumberingData => {
+  const numbering = editor?.converter?.numbering as NumberingData | undefined;
+  return (
+    numbering ?? {
+      definitions: {},
+      abstracts: {},
+    }
+  );
+};
 
 /**
  * Generate a new list definition for the given list type.
  * This function creates a new abstractNum and num definition for the list type.
  * It updates the editor's numbering with the new definitions.
- * @param {Object} param0
- * @param {number} param0.numId - The numId to be used for the new list definition.
- * @param {Object} param0.listType - The type of the list (ordered or bullet).
- * @param {number} [param0.level] - The level of the list definition (0-based). Required when generating new definitions with specific level properties.
- * @param {number} [param0.start] - The starting number for the list (1-based). Required for ordered lists.
- * @param {string} [param0.text] - The text to display for the list level. Required for ordered lists.
- * @param {string} [param0.fmt] - The numbering format for the list level. Required for ordered lists.
- * @param {import('../Editor').Editor} param0.editor - The editor instance where the list definition will be added.
- * @returns {Object} The new abstract and num definitions.
+ * @returns The new abstract and num definitions.
  */
-export const generateNewListDefinition = ({ numId, listType, level, start, text, fmt, editor, markerFontFamily }) => {
+export const generateNewListDefinition = ({
+  numId,
+  listType,
+  level,
+  start,
+  text,
+  fmt,
+  editor,
+  markerFontFamily,
+}: {
+  numId: number;
+  listType: ListType;
+  level?: number;
+  start?: number;
+  text?: string;
+  fmt?: string;
+  editor: Editor;
+  markerFontFamily?: string;
+}): { abstract: NumberingElement; definition: NumberingElement } => {
   // Generate a new numId to add to numbering.xml
-  if (typeof listType !== 'string') listType = listType.name;
+  const listTypeName = typeof listType === 'string' ? listType : listType?.name;
 
-  const definition = listType === 'orderedList' ? baseOrderedListDef : baseBulletList;
-  const numbering = editor.converter.numbering;
-  const newNumbering = { ...numbering };
+  const definition = listTypeName === 'orderedList' ? baseOrderedListDef : baseBulletList;
+  const numbering = getNumbering(editor);
+  const newNumbering: NumberingData = {
+    definitions: { ...numbering.definitions },
+    abstracts: { ...numbering.abstracts },
+  };
   let skipAddingNewAbstract = false;
 
   // Generate the new abstractNum definition
@@ -40,81 +107,81 @@ export const generateNewListDefinition = ({ numId, listType, level, start, text,
   );
 
   // Generate the new abstractNum definition for copy/paste lists
-  if (level && start && text && fmt) {
-    // @ts-expect-error - newNumbering is known to have definitions property at runtime
+  if (level != null && start != null && text && fmt) {
     if (newNumbering.definitions[numId]) {
-      // @ts-expect-error - newNumbering.definitions is known to exist at runtime
-      const abstractId = newNumbering.definitions[numId]?.elements[0]?.attributes['w:val'];
-      newAbstractId = abstractId;
-      const abstract = editor.converter.numbering.abstracts[abstractId];
-      newAbstractDef = { ...abstract };
-      skipAddingNewAbstract = true;
+      const abstractId = newNumbering.definitions[numId]?.elements?.[0]?.attributes?.['w:val'];
+      newAbstractId = abstractId ? Number(abstractId) : newAbstractId;
+      const abstract = abstractId ? getNumbering(editor).abstracts[abstractId] : undefined;
+      if (abstract) {
+        newAbstractDef = { ...abstract };
+        skipAddingNewAbstract = true;
+      }
     }
 
-    const levelDefIndex = newAbstractDef.elements.findIndex(
-      (el) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === level,
+    const levelDefIndex = newAbstractDef.elements?.findIndex(
+      (el: NumberingElement) => el.name === 'w:lvl' && String(el.attributes?.['w:ilvl']) === String(level),
     );
-    const levelProps = newAbstractDef.elements[levelDefIndex];
-    const elToFilter = ['w:numFmt', 'w:lvlText', 'w:start'];
-    const oldElements = levelProps.elements.filter((el) => !elToFilter.includes(el.name));
-    levelProps.elements = [
-      ...oldElements,
-      {
-        type: 'element',
-        name: 'w:start',
-        attributes: {
-          'w:val': start,
+    const levelProps = levelDefIndex != null && levelDefIndex >= 0 ? newAbstractDef.elements?.[levelDefIndex] : null;
+    if (levelProps?.elements) {
+      const elToFilter = ['w:numFmt', 'w:lvlText', 'w:start'];
+      const oldElements = levelProps.elements.filter((el: NumberingElement) => !elToFilter.includes(el.name));
+      levelProps.elements = [
+        ...oldElements,
+        {
+          type: 'element',
+          name: 'w:start',
+          attributes: {
+            'w:val': String(start),
+          },
         },
-      },
-      {
-        type: 'element',
-        name: 'w:numFmt',
-        attributes: {
-          'w:val': fmt,
+        {
+          type: 'element',
+          name: 'w:numFmt',
+          attributes: {
+            'w:val': fmt,
+          },
         },
-      },
-      {
-        type: 'element',
-        name: 'w:lvlText',
-        attributes: {
-          'w:val': text,
+        {
+          type: 'element',
+          name: 'w:lvlText',
+          attributes: {
+            'w:val': text,
+          },
         },
-      },
-    ];
-    if (markerFontFamily) {
-      // Add font family to level properties
-      const rPrIndex = levelProps.elements.findIndex((el) => el.name === 'w:rPr');
-      let rPr = levelProps.elements[rPrIndex];
-      if (!rPr) {
-        rPr = {
+      ];
+      if (markerFontFamily) {
+        // Add font family to level properties
+        const rPrIndex = levelProps.elements.findIndex((el: NumberingElement) => el.name === 'w:rPr');
+        let rPr = levelProps.elements[rPrIndex] as NumberingElement | undefined;
+        if (!rPr) {
+          rPr = {
+            type: 'element',
+            name: 'w:rPr',
+            elements: [],
+          };
+          levelProps.elements.push(rPr);
+        }
+        // Remove existing rFonts if present
+        rPr.elements = rPr.elements?.filter((el: NumberingElement) => el.name !== 'w:rFonts');
+        // Add new rFonts element
+        rPr.elements?.push({
           type: 'element',
-          name: 'w:rPr',
-          elements: [],
-        };
-        levelProps.elements.push(rPr);
+          name: 'w:rFonts',
+          attributes: {
+            'w:ascii': markerFontFamily,
+            'w:hAnsi': markerFontFamily,
+            'w:eastAsia': markerFontFamily,
+            'w:cs': markerFontFamily,
+          },
+        });
       }
-      // Remove existing rFonts if present
-      rPr.elements = rPr.elements.filter((el) => el.name !== 'w:rFonts');
-      // Add new rFonts element
-      rPr.elements.push({
-        type: 'element',
-        name: 'w:rFonts',
-        attributes: {
-          'w:ascii': markerFontFamily,
-          'w:hAnsi': markerFontFamily,
-          'w:eastAsia': markerFontFamily,
-          'w:cs': markerFontFamily,
-        },
-      });
     }
   }
 
-  // @ts-expect-error - newNumbering.abstracts is known to exist at runtime
   if (!skipAddingNewAbstract) newNumbering.abstracts[newAbstractId] = newAbstractDef;
 
   // Generate the new numId definition
   const newNumDef = getBasicNumIdTag(numId, newAbstractId);
-  // @ts-expect-error - newNumbering.definitions is known to exist at runtime
   newNumbering.definitions[numId] = newNumDef;
 
   // Update the editor's numbering with the new definition
@@ -127,34 +194,38 @@ export const generateNewListDefinition = ({ numId, listType, level, start, text,
   return { abstract: newAbstractDef, definition: newNumDef };
 };
 
-export const hasListDefinition = (editor, numId, ilvl) => {
-  const { definitions, abstracts } = editor.converter.numbering;
+export const hasListDefinition = (editor: Editor, numId: number | string, ilvl: number | string) => {
+  const { definitions, abstracts } = getNumbering(editor);
   const numDef = definitions[numId];
   if (!numDef) return false;
 
-  const abstractId = numDef.elements?.find((item) => item.name === 'w:abstractNumId')?.attributes?.['w:val'];
+  const abstractId = numDef.elements?.find((item: NumberingElement) => item.name === 'w:abstractNumId')?.attributes?.[
+    'w:val'
+  ];
+  if (!abstractId) return false;
+
   const abstract = abstracts[abstractId];
   if (!abstract) return false;
 
-  const levelDef = abstract.elements?.find((item) => item.name === 'w:lvl' && item.attributes?.['w:ilvl'] == ilvl);
+  const levelDef = abstract.elements?.find(
+    (item: NumberingElement) => item.name === 'w:lvl' && item.attributes?.['w:ilvl'] == ilvl,
+  );
 
   return !!levelDef;
 };
 
 /**
  * Change the numId of a list definition and clone the abstract definition.
- * @param {number} numId - The current numId of the list definition.
- * @param {number} level - The level of the list definition.
- * @param {import("prosemirror-model").NodeType} listType - The type of the list (e.g., 'orderedList', 'bulletList').
- * @param {import('../Editor').Editor} editor - The editor instance where the list definition is stored.
- * @returns {number} The new numId for the list definition.
  */
-export const changeNumIdSameAbstract = (numId, level, listType, editor) => {
+export const changeNumIdSameAbstract = (numId: number, level: number, listType: ListType, editor: Editor) => {
   const newId = getNewListId(editor, 'definitions');
   const { abstract } = ListHelpers.getListDefinitionDetails({ numId, level, listType, editor });
 
-  const numbering = editor.converter.numbering;
-  const newNumbering = { ...numbering };
+  const numbering = getNumbering(editor);
+  const newNumbering: NumberingData = {
+    definitions: { ...numbering.definitions },
+    abstracts: { ...numbering.abstracts },
+  };
 
   // If we don't have an abstract to clone (e.g. legacy/missing numbering),
   // fall back to generating a fresh definition for the target list type.
@@ -171,11 +242,9 @@ export const changeNumIdSameAbstract = (numId, level, listType, editor) => {
       'w:abstractNumId': String(newAbstractId),
     },
   };
-  // @ts-expect-error - newNumbering.abstracts is known to exist at runtime
   newNumbering.abstracts[newAbstractId] = newAbstractDef;
 
   const newNumDef = getBasicNumIdTag(newId, newAbstractId);
-  // @ts-expect-error - newNumbering.definitions is known to exist at runtime
   newNumbering.definitions[newId] = newNumDef;
   // Persist updated numbering so downstream exporters can resolve the ID
   editor.converter.numbering = newNumbering;
@@ -184,11 +253,8 @@ export const changeNumIdSameAbstract = (numId, level, listType, editor) => {
 
 /**
  * Get the basic numbering ID tag for a list definition.
- * @param {number} numId - The numId of the list definition.
- * @param {number} abstractId - The abstractId of the list definition.
- * @returns {Object} The basic numbering ID tag.
  */
-export const getBasicNumIdTag = (numId, abstractId) => {
+export const getBasicNumIdTag = (numId: number, abstractId: number): NumberingElement => {
   return {
     type: 'element',
     name: 'w:num',
@@ -203,11 +269,9 @@ export const getBasicNumIdTag = (numId, abstractId) => {
  * Get a new list ID for the editor without creating a conflict.
  * This function calculates the next available list ID by finding the maximum existing ID
  * and adding 1 to it.
- * @param {import('../Editor').Editor} editor The editor instance where the list ID will be generated.
- * @returns {number} The new list ID.
  */
-export const getNewListId = (editor, grouping = 'definitions') => {
-  const defs = editor.converter?.numbering?.[grouping] || {};
+export const getNewListId = (editor: Editor, grouping: keyof NumberingData = 'definitions') => {
+  const defs = getNumbering(editor)[grouping] || {};
   const intKeys = Object.keys(defs)
     .map((k) => Number(k))
     .filter((n) => Number.isInteger(n));
@@ -220,17 +284,35 @@ export const getNewListId = (editor, grouping = 'definitions') => {
  * This function retrieves the start value, numbering format, level text, and custom format
  * for a given list definition. It handles style link recursion and generates new definitions when needed.
  *
- * @param {Object} params - The parameters object
- * @param {number} params.numId - The numId of the list definition
- * @param {number} params.level - The level of the list definition (0-based)
- * @param {import("prosemirror-model").NodeType} [params.listType] - The type of the list (e.g., 'orderedList', 'bulletList'). Required when generating new definitions
- * @param {Object} params.editor - The editor instance containing converter and numbering data
- * @param {number} [params.tries=0] - The number of recursion attempts to avoid infinite loops (max 1)
- * @returns {Object} The list definition details
  */
-export const getListDefinitionDetails = ({ numId, level, listType, editor, tries = 0 }) => {
-  const { definitions, abstracts } = editor.converter.numbering;
-  if (!numId) return {};
+export const getListDefinitionDetails = ({
+  numId,
+  level,
+  listType,
+  editor,
+  tries = 0,
+}: {
+  numId: number;
+  level: number;
+  listType?: ListType;
+  editor: Editor;
+  tries?: number;
+}): ListDefinitionDetails => {
+  const { definitions, abstracts } = getNumbering(editor);
+  if (!numId) {
+    return {
+      start: null,
+      restart: null,
+      numFmt: null,
+      lvlText: null,
+      suffix: null,
+      justification: null,
+      listNumberingType: null,
+      customFormat: null,
+      abstract: null,
+      abstractId: null,
+    };
+  }
 
   const numDef = definitions[numId];
 
@@ -240,14 +322,29 @@ export const getListDefinitionDetails = ({ numId, level, listType, editor, tries
   }
 
   // Get abstract definition
-  const abstractId = definitions[numId]?.elements?.find((item) => item.name === 'w:abstractNumId')?.attributes?.[
-    'w:val'
-  ];
+  const abstractId = definitions[numId]?.elements?.find((item: NumberingElement) => item.name === 'w:abstractNumId')
+    ?.attributes?.['w:val'];
+
+  if (!abstractId) {
+    return {
+      start: null,
+      restart: null,
+      numFmt: null,
+      lvlText: null,
+      listNumberingType: null,
+      suffix: null,
+      justification: null,
+      customFormat: null,
+      abstract: null,
+      abstractId: null,
+    };
+  }
 
   const abstract = abstracts[abstractId];
   if (!abstract) {
     return {
       start: null,
+      restart: null,
       numFmt: null,
       lvlText: null,
       listNumberingType: null,
@@ -255,20 +352,20 @@ export const getListDefinitionDetails = ({ numId, level, listType, editor, tries
       justification: null,
       customFormat: null,
       abstract: null,
-      abstractId,
+      abstractId: abstractId ?? null,
     };
   }
 
   // Handle style link recursion (max 1 retry)
-  const numStyleLink = abstract.elements?.find((item) => item.name === 'w:numStyleLink');
+  const numStyleLink = abstract.elements?.find((item: NumberingElement) => item.name === 'w:numStyleLink');
   const styleId = numStyleLink?.attributes?.['w:val'];
 
   if (styleId && tries < 1) {
     const styleDefinition = getStyleTagFromStyleId(styleId, editor.converter.convertedXml);
     const linkedNumId = styleDefinition?.elements
-      ?.find((el) => el.name === 'w:pPr')
-      ?.elements?.find((el) => el.name === 'w:numPr')
-      ?.elements?.find((el) => el.name === 'w:numId')?.attributes?.['w:val'];
+      ?.find((el: NumberingElement) => el.name === 'w:pPr')
+      ?.elements?.find((el: NumberingElement) => el.name === 'w:numPr')
+      ?.elements?.find((el: NumberingElement) => el.name === 'w:numId')?.attributes?.['w:val'];
 
     if (linkedNumId) {
       return getListDefinitionDetails({
@@ -283,12 +380,13 @@ export const getListDefinitionDetails = ({ numId, level, listType, editor, tries
 
   // Find level definition
   const listDefinition = abstract.elements?.find(
-    (item) => item.name === 'w:lvl' && item.attributes?.['w:ilvl'] == level,
+    (item: NumberingElement) => item.name === 'w:lvl' && String(item.attributes?.['w:ilvl']) === String(level),
   );
 
   if (!listDefinition) {
     return {
       start: null,
+      restart: null,
       numFmt: null,
       lvlText: null,
       suffix: null,
@@ -296,19 +394,20 @@ export const getListDefinitionDetails = ({ numId, level, listType, editor, tries
       listNumberingType: null,
       customFormat: null,
       abstract,
-      abstractId,
+      abstractId: abstractId ?? null,
     };
   }
 
   // Extract level properties safely
-  const findElement = (name) => listDefinition.elements?.find((item) => item.name === name);
+  const findElement = (name: string): NumberingElement | undefined =>
+    listDefinition.elements?.find((item: NumberingElement) => item.name === name);
 
   const startElement = findElement('w:start');
   let numFmtElement = findElement('w:numFmt');
   if (!numFmtElement) {
-    const mcAlternate = listDefinition.elements?.find((item) => item.name === 'mc:AlternateContent');
-    const choice = mcAlternate?.elements?.find((el) => el.name === 'mc:Choice');
-    numFmtElement = choice?.elements?.find((item) => item.name === 'w:numFmt');
+    const mcAlternate = listDefinition.elements?.find((item: NumberingElement) => item.name === 'mc:AlternateContent');
+    const choice = mcAlternate?.elements?.find((el: NumberingElement) => el.name === 'mc:Choice');
+    numFmtElement = choice?.elements?.find((item: NumberingElement) => item.name === 'w:numFmt');
   }
   const lvlTextElement = findElement('w:lvlText');
   const suffixElement = findElement('w:suff');
@@ -319,49 +418,59 @@ export const getListDefinitionDetails = ({ numId, level, listType, editor, tries
   const lvlText = lvlTextElement?.attributes?.['w:val'];
   const suffix = suffixElement?.attributes?.['w:val'];
   const justification = lvlJcElement?.attributes?.['w:val'];
+  const restart = findElement('w:lvlRestart')?.attributes?.['w:val'] ?? null;
   const listNumberingType = numFmt;
 
   // Handle custom format
   const customFormat = numFmt === 'custom' ? numFmtElement?.attributes?.['w:format'] : undefined;
 
   return {
-    start,
-    numFmt,
-    lvlText,
-    suffix,
-    justification,
-    listNumberingType,
-    customFormat,
+    start: start ?? null,
+    restart,
+    numFmt: numFmt ?? null,
+    lvlText: lvlText ?? null,
+    suffix: suffix ?? null,
+    justification: justification ?? null,
+    listNumberingType: listNumberingType ?? null,
+    customFormat: customFormat ?? null,
     abstract,
-    abstractId,
+    abstractId: abstractId ?? null,
   };
 };
 
 /**
  * Get all list definitions grouped by numId and level.
- * @param {import('../Editor').Editor} editor - The editor instance containing numbering information.
- * @returns {Record<string, Record<string, {start: string|null, numFmt: string|null, lvlText: string|null, suffix: string|null, listNumberingType: string|null, customFormat: string|null, abstract: Object|null, abstractId: string|undefined}>>}
  */
-export const getAllListDefinitions = (editor) => {
+export const getAllListDefinitions = (editor: Editor): AllListDefinitions => {
   const numbering = editor?.converter?.numbering;
   if (!numbering) return {};
 
   const { definitions = {}, abstracts = {} } = numbering;
 
-  return Object.entries(definitions).reduce((acc, [numId, definition]) => {
+  return Object.entries(definitions).reduce<AllListDefinitions>((acc, [numId, definition]): AllListDefinitions => {
     if (!definition) return acc;
 
-    const abstractId = definition.elements?.find((item) => item.name === 'w:abstractNumId')?.attributes?.['w:val'];
-    const abstract = abstractId != null ? abstracts?.[abstractId] : undefined;
-    const levelDefinitions = abstract?.elements?.filter((item) => item.name === 'w:lvl') || [];
+    const definitionObj = definition as { elements?: Array<{ name: string; attributes?: Record<string, string> }> };
+    const abstractId = definitionObj.elements?.find(
+      (item: { name: string; attributes?: Record<string, string> }) => item.name === 'w:abstractNumId',
+    )?.attributes?.['w:val'];
+    const abstract = abstractId != null ? (abstracts?.[abstractId] as { elements?: unknown[] } | undefined) : undefined;
+    const abstractElement = (abstract as NumberingElement | undefined) ?? null;
+    const levelDefinitions =
+      abstract?.elements?.filter((item: unknown) => (item as { name: string }).name === 'w:lvl') || [];
 
     if (!acc[numId]) acc[numId] = {};
 
-    levelDefinitions.forEach((levelDef) => {
-      const ilvl = levelDef?.attributes?.['w:ilvl'];
+    levelDefinitions.forEach((levelDef: unknown) => {
+      const levelDefTyped = levelDef as { attributes?: Record<string, string>; elements?: unknown[] };
+      const ilvl = levelDefTyped?.attributes?.['w:ilvl'];
       if (ilvl == null) return;
+      const ilvlKey = String(ilvl);
 
-      const findElement = (name) => levelDef?.elements?.find((item) => item.name === name);
+      const findElement = (name: string) =>
+        levelDefTyped?.elements?.find((item: unknown) => (item as { name: string }).name === name) as
+          | { attributes?: Record<string, string> }
+          | undefined;
 
       const startElement = findElement('w:start');
       const lvlRestartElement = findElement('w:lvlRestart');
@@ -372,16 +481,17 @@ export const getAllListDefinitions = (editor) => {
       const numFmt = numFmtElement?.attributes?.['w:val'] ?? null;
       const customFormat = numFmt === 'custom' ? (numFmtElement?.attributes?.['w:format'] ?? null) : null;
 
-      acc[numId][ilvl] = {
+      acc[numId][ilvlKey] = {
         start: startElement?.attributes?.['w:val'] ?? null,
         restart: lvlRestartElement?.attributes?.['w:val'] ?? null,
         numFmt,
         lvlText: lvlTextElement?.attributes?.['w:val'] ?? null,
         suffix: suffixElement?.attributes?.['w:val'] ?? null,
+        justification: null,
         listNumberingType: numFmt,
         customFormat,
-        abstract: abstract ?? null,
-        abstractId,
+        abstract: abstractElement,
+        abstractId: abstractId ?? null,
       };
     });
 
@@ -393,17 +503,15 @@ export const getAllListDefinitions = (editor) => {
  * Remove list definitions from the editor's numbering.
  * This function deletes the definitions and abstracts for a given list ID from the editor's numbering.
  * It is used to clean up list definitions when they are no longer needed.
- * @param {string} listId The ID of the list to be removed.
- * @param {import('../Editor').Editor} editor The editor instance from which the list definitions will be removed.
- * @returns {void}
  */
-export const removeListDefinitions = (listId, editor) => {
+export const removeListDefinitions = (listId: string, editor: Editor) => {
   const { numbering } = editor.converter;
   if (!numbering) return;
 
   const { definitions, abstracts } = numbering;
 
-  const abstractId = definitions[listId].elements[0].attributes['w:val'];
+  const abstractId = definitions[listId]?.elements?.[0]?.attributes?.['w:val'];
+  if (!abstractId) return;
   delete definitions[listId];
   delete abstracts[abstractId];
   editor.converter.numbering = {
@@ -416,14 +524,17 @@ export const removeListDefinitions = (listId, editor) => {
  * Create a JSON representation of a list item node.
  * This function constructs a list item node in JSON format, including its level, numbering type,
  * starting number, and content node.
- * @param {Object} param0
- * @param {number} param0.level - The level of the list item.
- * @param {number} param0.numId - The ID of the numbering definition for the list item.
- * @param {Object} param0.contentNode - The content node to be included in the list item.
- * @returns {Object} A JSON object representing the list item node.
  */
-export const createListItemNodeJSON = ({ level, numId, contentNode }) => {
-  if (!Array.isArray(contentNode)) contentNode = [contentNode];
+export const createListItemNodeJSON = ({
+  level,
+  numId,
+  contentNode,
+}: {
+  level: number | string;
+  numId: number | string;
+  contentNode: unknown;
+}) => {
+  const normalizedContent = Array.isArray(contentNode) ? contentNode : [contentNode];
 
   const numberingProperties = {
     numId: Number(numId),
@@ -439,7 +550,7 @@ export const createListItemNodeJSON = ({ level, numId, contentNode }) => {
   const listItem = {
     type: 'paragraph',
     attrs,
-    content: [...(contentNode || [])],
+    content: [...normalizedContent],
   };
   return listItem;
 };
@@ -455,7 +566,17 @@ export const createListItemNodeJSON = ({ level, numId, contentNode }) => {
  * @param {Object} param0.contentNode - The content node to be included in the ordered list.
  * @returns {Object} A ProseMirror node representing the ordered list.
  */
-export const createSchemaOrderedListNode = ({ level, numId, editor, contentNode }) => {
+export const createSchemaOrderedListNode = ({
+  level,
+  numId,
+  editor,
+  contentNode,
+}: {
+  level: number | string;
+  numId: number | string;
+  editor: Editor;
+  contentNode: unknown;
+}) => {
   level = Number(level);
   numId = Number(numId);
   const listNodeJSON = createListItemNodeJSON({ level, numId, contentNode });
@@ -471,12 +592,12 @@ export const createSchemaOrderedListNode = ({ level, numId, editor, contentNode
  * @param {import("prosemirror-state").Transaction} param0.tr - The ProseMirror transaction object.
  * @returns {Boolean} The result of the insertion operation.
  */
-export const createNewList = ({ listType, tr, editor }) => {
+export const createNewList = ({ listType, tr, editor }: { listType: ListType; tr: Transaction; editor: Editor }) => {
   const numId = ListHelpers.getNewListId(editor);
 
   ListHelpers.generateNewListDefinition({ numId, listType, editor });
 
-  const paragraphInfo = findParentNode((node) => node?.type?.name === 'paragraph')(tr.selection);
+  const paragraphInfo = findParentNode((node: PmNode) => node?.type?.name === 'paragraph')(tr.selection);
 
   // If we're not in a paragraph, bail (nothing to convert)
   if (!paragraphInfo) return false;
@@ -498,14 +619,18 @@ export const createNewList = ({ listType, tr, editor }) => {
 
 /**
  * Replace a list with a new node in the ProseMirror transaction.
- * @param {Object} param0 - The parameters for the replacement.
- * @param {Object} param0.tr - The ProseMirror transaction object.
- * @param {number} param0.from - The starting position of the list to be replaced.
- * @param {number} param0.to - The ending position of the list to be replaced.
- * @param {Node} param0.newNode - The new node to replace the list with.
- * @returns {void}
  */
-export const replaceListWithNode = ({ tr, from, to, newNode }) => {
+export const replaceListWithNode = ({
+  tr,
+  from,
+  to,
+  newNode,
+}: {
+  tr: Transaction;
+  from: number;
+  to: number;
+  newNode: PmNode;
+}) => {
   tr.replaceWith(from, to, newNode);
 };
 
diff --git a/packages/super-editor/src/core/helpers/orderedListUtils.js b/packages/super-editor/src/core/helpers/orderedListUtils.ts
similarity index 100%
rename from packages/super-editor/src/core/helpers/orderedListUtils.js
rename to packages/super-editor/src/core/helpers/orderedListUtils.ts
diff --git a/packages/super-editor/src/core/helpers/pasteListHelpers.js b/packages/super-editor/src/core/helpers/pasteListHelpers.ts
similarity index 66%
rename from packages/super-editor/src/core/helpers/pasteListHelpers.js
rename to packages/super-editor/src/core/helpers/pasteListHelpers.ts
index d5d6eb851..7fb091550 100644
--- a/packages/super-editor/src/core/helpers/pasteListHelpers.js
+++ b/packages/super-editor/src/core/helpers/pasteListHelpers.ts
@@ -1,4 +1,9 @@
-export const extractListLevelStyles = (cssText, listId, level, numId) => {
+export const extractListLevelStyles = (
+  cssText: string,
+  listId: string,
+  level: string,
+  numId: string,
+): Record<string, string> | null => {
   const pattern = new RegExp(`@list\\s+l${listId}:level${level}(?:\\s+lfo${numId})?\\s*\\{([^}]+)\\}`, 'i');
   const match = cssText.match(pattern);
   if (!match) return null;
@@ -8,7 +13,7 @@ export const extractListLevelStyles = (cssText, listId, level, numId) => {
     .map((line) => line.trim())
     .filter(Boolean);
 
-  const styleMap = {};
+  const styleMap: Record<string, string> = {};
   for (const style of rawStyles) {
     const [key, value] = style.split(':').map((s) => s.trim());
     styleMap[key] = value;
@@ -17,7 +22,8 @@ export const extractListLevelStyles = (cssText, listId, level, numId) => {
   return styleMap;
 };
 
-export const extractParagraphStyles = (cssText, selector) => {
+export const extractParagraphStyles = (cssText: string, selector: string | null): Record<string, string> | null => {
+  if (!selector) return null;
   const pattern = new RegExp(`(${selector})\\s*\\{([^}]+)\\}`, 'i');
   const match = cssText.match(pattern);
   if (!match) return null;
@@ -25,7 +31,7 @@ export const extractParagraphStyles = (cssText, selector) => {
     .split(';')
     .map((line) => line.trim())
     .filter(Boolean);
-  const styleMap = {};
+  const styleMap: Record<string, string> = {};
   for (const style of rawStyles) {
     const [key, value] = style.split(':').map((s) => s.trim());
     styleMap[key] = value;
@@ -33,8 +39,11 @@ export const extractParagraphStyles = (cssText, selector) => {
   return styleMap;
 };
 
-export function resolveStyles(extractedStyles, inlineStyles) {
-  const inlineStyleMap = {};
+export function resolveStyles(
+  extractedStyles: Record<string, string> | null,
+  inlineStyles: string | null,
+): Record<string, string> {
+  const inlineStyleMap: Record<string, string> = {};
   if (inlineStyles) {
     const styles = inlineStyles
       .split(';')
@@ -57,7 +66,7 @@ export function resolveStyles(extractedStyles, inlineStyles) {
     inlineStyleMap['font-family'] = inlineStyleMap['mso-bidi-font-family'];
     delete inlineStyleMap['mso-bidi-font-family'];
   }
-  return { ...extractedStyles, ...inlineStyleMap };
+  return { ...(extractedStyles || {}), ...inlineStyleMap };
 }
 
 export const numDefMap = new Map([
@@ -77,24 +86,24 @@ export const numDefByTypeMap = new Map([
   ['i', 'lowerRoman'],
 ]);
 
-function getStartNumber(lvlText) {
+function getStartNumber(lvlText: string): number | null {
   const match = lvlText.match(/^(\d+)/);
   if (match) return parseInt(match[1], 10);
   return null;
 }
 
-function letterToNumber(letter) {
+function letterToNumber(letter: string): number {
   return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) + 1;
 }
 
-function getStartNumberFromAlpha(lvlText) {
+function getStartNumberFromAlpha(lvlText: string): number | null {
   const match = lvlText.match(/^([a-zA-Z])/);
   if (match) return letterToNumber(match[1]);
   return null;
 }
 
-function romanToNumber(roman) {
-  const map = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
+function romanToNumber(roman: string): number {
+  const map: Record<string, number> = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
   let num = 0,
     prev = 0;
   for (let i = roman.length - 1; i >= 0; i--) {
@@ -106,7 +115,7 @@ function romanToNumber(roman) {
   return num;
 }
 
-function getStartNumberFromRoman(lvlText) {
+function getStartNumberFromRoman(lvlText: string): number | null {
   const match = lvlText.match(/^([ivxlcdmIVXLCDM]+)/);
   if (match) return romanToNumber(match[1]);
   return null;
@@ -131,18 +140,38 @@ export const googleNumDefMap = new Map([
   ['bullet', 'bullet'],
 ]);
 
-export const getLvlTextForGoogleList = (fmt, level, editor) => {
+/**
+ * Editor instance with converter property containing numbering abstracts
+ */
+interface EditorWithConverter {
+  converter: {
+    numbering: {
+      abstracts: Array<{
+        elements: Array<{
+          name: string;
+          attributes?: Record<string, string>;
+          elements?: Array<{
+            name: string;
+            attributes?: Record<string, string>;
+          }>;
+        }>;
+      }>;
+    };
+  };
+}
+
+export const getLvlTextForGoogleList = (fmt: string, level: number, editor: EditorWithConverter): string => {
   const bulletListDef = editor.converter.numbering.abstracts[0];
   const bulletDefForLevel = bulletListDef.elements.find(
     (el) => el.name === 'w:lvl' && el.attributes?.['w:ilvl'] === (level - 1).toString(),
   );
-  const bulletLvlText = bulletDefForLevel.elements.find((el) => el.name === 'w:lvlText')?.attributes?.['w:val'];
+  const bulletLvlText = bulletDefForLevel?.elements?.find((el) => el.name === 'w:lvlText')?.attributes?.['w:val'];
 
   switch (fmt) {
     case 'decimal-leading-zero':
       return `0%${level}.`;
     case 'bullet':
-      return bulletLvlText;
+      return bulletLvlText || '';
     default:
       return `%${level}.`;
   }
diff --git a/packages/super-editor/src/core/helpers/posToDOMRect.js b/packages/super-editor/src/core/helpers/posToDOMRect.ts
similarity index 56%
rename from packages/super-editor/src/core/helpers/posToDOMRect.js
rename to packages/super-editor/src/core/helpers/posToDOMRect.ts
index eee0c2e22..d6b198208 100644
--- a/packages/super-editor/src/core/helpers/posToDOMRect.js
+++ b/packages/super-editor/src/core/helpers/posToDOMRect.ts
@@ -1,12 +1,23 @@
 import { minMax } from '../utilities/minMax.js';
+import type { EditorView } from 'prosemirror-view';
 
-export function posToDOMRect(view, from, to) {
+type Coords = { left: number; right: number; top: number; bottom: number };
+
+type DOMRectLike = Coords & {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  toJSON: () => Coords & { width: number; height: number; x: number; y: number };
+};
+
+export function posToDOMRect(view: EditorView, from: number, to: number): DOMRectLike {
   const minPos = 0;
   const maxPos = view.state.doc.content.size;
   const resolvedFrom = minMax(from, minPos, maxPos);
   const resolvedEnd = minMax(to, minPos, maxPos);
-  const start = view.coordsAtPos(resolvedFrom);
-  const end = view.coordsAtPos(resolvedEnd, -1);
+  const start = view.coordsAtPos(resolvedFrom) as Coords;
+  const end = view.coordsAtPos(resolvedEnd, -1) as Coords;
   const top = Math.min(start.top, end.top);
   const bottom = Math.max(start.bottom, end.bottom);
   const left = Math.min(start.left, end.left);
diff --git a/packages/super-editor/src/core/helpers/rangeUtils.js b/packages/super-editor/src/core/helpers/rangeUtils.ts
similarity index 86%
rename from packages/super-editor/src/core/helpers/rangeUtils.js
rename to packages/super-editor/src/core/helpers/rangeUtils.ts
index b2ccf0043..9b03daa70 100644
--- a/packages/super-editor/src/core/helpers/rangeUtils.js
+++ b/packages/super-editor/src/core/helpers/rangeUtils.ts
@@ -3,11 +3,11 @@
  * @param {Array<[number, number]>} ranges - Array of [from, to] ranges
  * @returns {Array<[number, number]>} Merged ranges sorted by start position
  */
-export const mergeRanges = (ranges) => {
+export const mergeRanges = (ranges: Array<[number, number]>): Array<[number, number]> => {
   if (ranges.length === 0) return [];
 
   // Sort ranges by start position and clone to avoid mutating callers
-  const sorted = [...ranges].sort((a, b) => a[0] - b[0]).map((range) => [...range]);
+  const sorted = [...ranges].sort((a, b) => a[0] - b[0]).map(([start, end]): [number, number] => [start, end]);
   const merged = [sorted[0]];
 
   for (let i = 1; i < sorted.length; i++) {
@@ -48,7 +48,7 @@ export const mergeRanges = (ranges) => {
  * clampRange(10, 150, 100)  // => [10, 100] - end clamped to docSize
  * clampRange(150, 200, 100) // => null - completely out of bounds
  */
-export const clampRange = (start, end, docSize) => {
+export const clampRange = (start: number, end: number, docSize: number): [number, number] | null => {
   const safeStart = Math.max(0, Math.min(start, docSize));
   const safeEnd = Math.max(0, Math.min(end, docSize));
 
diff --git a/packages/super-editor/src/core/helpers/selectionToInsertionEnd.js b/packages/super-editor/src/core/helpers/selectionToInsertionEnd.ts
similarity index 62%
rename from packages/super-editor/src/core/helpers/selectionToInsertionEnd.js
rename to packages/super-editor/src/core/helpers/selectionToInsertionEnd.ts
index 359f5ae5b..05a2ee892 100644
--- a/packages/super-editor/src/core/helpers/selectionToInsertionEnd.js
+++ b/packages/super-editor/src/core/helpers/selectionToInsertionEnd.ts
@@ -1,8 +1,8 @@
-import { Selection } from 'prosemirror-state';
-import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+import { Selection, type Transaction } from 'prosemirror-state';
+import { ReplaceAroundStep, ReplaceStep, type StepMap } from 'prosemirror-transform';
 
 // source: https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.js#L466
-export function selectionToInsertionEnd(tr, startLen, bias) {
+export function selectionToInsertionEnd(tr: Transaction, startLen: number, bias: number): void {
   const last = tr.steps.length - 1;
 
   if (last < startLen) {
@@ -15,7 +15,7 @@ export function selectionToInsertionEnd(tr, startLen, bias) {
     return;
   }
 
-  const map = tr.mapping.maps[last];
+  const map: StepMap = tr.mapping.maps[last];
   let end = 0;
 
   map.forEach((_from, _to, _newFrom, newTo) => {
diff --git a/packages/super-editor/src/core/helpers/setImageNodeSelection.js b/packages/super-editor/src/core/helpers/setImageNodeSelection.js
deleted file mode 100644
index 3d5e64349..000000000
--- a/packages/super-editor/src/core/helpers/setImageNodeSelection.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NodeSelection } from 'prosemirror-state';
-
-export const setImageNodeSelection = (view, pos) => {
-  const { doc } = view.state;
-  const node = doc.nodeAt(pos);
-  if (node && node.type.name === 'image') {
-    const tr = view.state.tr.setSelection(NodeSelection.create(doc, pos));
-    view.dispatch(tr);
-    return true;
-  }
-  return false;
-};
diff --git a/packages/super-editor/src/core/helpers/setImageNodeSelection.ts b/packages/super-editor/src/core/helpers/setImageNodeSelection.ts
new file mode 100644
index 000000000..7d7b10bc7
--- /dev/null
+++ b/packages/super-editor/src/core/helpers/setImageNodeSelection.ts
@@ -0,0 +1,13 @@
+import { NodeSelection, type EditorState, type Transaction } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+
+export const setImageNodeSelection = (view: EditorView, pos: number): boolean => {
+  const { doc } = view.state as EditorState;
+  const node = doc.nodeAt(pos);
+  if (node && node.type.name === 'image') {
+    const tr: Transaction = view.state.tr.setSelection(NodeSelection.create(doc, pos));
+    view.dispatch(tr);
+    return true;
+  }
+  return false;
+};
diff --git a/packages/super-editor/src/core/helpers/setWordSelection.js b/packages/super-editor/src/core/helpers/setWordSelection.ts
similarity index 71%
rename from packages/super-editor/src/core/helpers/setWordSelection.js
rename to packages/super-editor/src/core/helpers/setWordSelection.ts
index ed6d8ff40..60d84d51d 100644
--- a/packages/super-editor/src/core/helpers/setWordSelection.js
+++ b/packages/super-editor/src/core/helpers/setWordSelection.ts
@@ -1,7 +1,8 @@
 import { findWordBounds } from './findWordBounds.js';
 import { TextSelection } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
 
-export const setWordSelection = (view, pos) => {
+export const setWordSelection = (view: EditorView, pos: number): void => {
   const { state, dispatch } = view;
   const word = findWordBounds(state.doc, pos);
   if (!word) return;
diff --git a/packages/super-editor/src/core/helpers/updateDOMAttributes.js b/packages/super-editor/src/core/helpers/updateDOMAttributes.ts
similarity index 64%
rename from packages/super-editor/src/core/helpers/updateDOMAttributes.js
rename to packages/super-editor/src/core/helpers/updateDOMAttributes.ts
index d99bdd70e..3c23d07e1 100644
--- a/packages/super-editor/src/core/helpers/updateDOMAttributes.js
+++ b/packages/super-editor/src/core/helpers/updateDOMAttributes.ts
@@ -1,6 +1,9 @@
 const defaultBooleans = ['required', 'readonly', 'disabled', 'checked', 'multiple', 'autofocus'];
 
-export function updateDOMAttributes(dom, attrs = {}, options = {}) {
+type AttrValue = string | number | boolean | null | undefined;
+type Attrs = Record<string, AttrValue>;
+
+export function updateDOMAttributes(dom: Element, attrs: Attrs = {}, options: { customBooleans?: string[] } = {}) {
   const customBooleans = options.customBooleans || [];
   const booleans = [...defaultBooleans, ...customBooleans];
 
@@ -12,7 +15,7 @@ export function updateDOMAttributes(dom, attrs = {}, options = {}) {
     }
 
     if (value != null) {
-      dom.setAttribute(key, value);
+      dom.setAttribute(key, String(value));
     } else {
       dom.removeAttribute(key);
     }
diff --git a/packages/super-editor/src/core/index.js b/packages/super-editor/src/core/index.js
deleted file mode 100644
index 41848e413..000000000
--- a/packages/super-editor/src/core/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export * from './Node.js';
-export * from './Mark.js';
-export * from './Schema.js';
-export * from './Attribute.js';
-export * from './CommandService.js';
-export * from './Extension.js';
-export * from './super-converter/SuperConverter.js';
-export * from './OxmlNode.js';
-
-export * as coreExtensions from './extensions/index.js';
-export * as helpers from './helpers/index.js';
-export * as utilities from './utilities/index.js';
-
-// This needs to be last otherwise it causes circular dependencies
-export * from './Editor.js';
-export * from './PresentationEditor.js';
-
-export { default as DocxZipper } from './DocxZipper.js';
diff --git a/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.test.js b/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.test.js
index ff7b9d001..ee0f5a0e6 100644
--- a/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.test.js
+++ b/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.test.js
@@ -17,11 +17,19 @@ vi.mock('prosemirror-model', () => ({
 const convertEmToPtMock = vi.hoisted(() => vi.fn((html) => html));
 const cleanHtmlMock = vi.hoisted(() => vi.fn((html) => html));
 const handleHtmlPasteMock = vi.hoisted(() => vi.fn(() => false));
+const sanitizeHtmlMock = vi.hoisted(() =>
+  vi.fn((html) => {
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    return container;
+  }),
+);
 
 vi.mock('../../InputRule.js', () => ({
   convertEmToPt: convertEmToPtMock,
   cleanHtmlUnnecessaryTags: cleanHtmlMock,
   handleHtmlPaste: handleHtmlPasteMock,
+  sanitizeHtml: sanitizeHtmlMock,
 }));
 
 const normalizeLvlTextCharMock = vi.hoisted(() => vi.fn((value) => value || '%1.'));
diff --git a/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.js b/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.ts
similarity index 53%
rename from packages/super-editor/src/core/inputRules/docx-paste/docx-paste.js
rename to packages/super-editor/src/core/inputRules/docx-paste/docx-paste.ts
index c9410c43f..fa42e324b 100644
--- a/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.js
+++ b/packages/super-editor/src/core/inputRules/docx-paste/docx-paste.ts
@@ -1,5 +1,8 @@
+import type { EditorView } from 'prosemirror-view';
 import { DOMParser, Fragment } from 'prosemirror-model';
-import { cleanHtmlUnnecessaryTags, convertEmToPt, handleHtmlPaste } from '../../InputRule.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '../../Editor.js';
+import { cleanHtmlUnnecessaryTags, convertEmToPt, handleHtmlPaste, sanitizeHtml } from '../../InputRule.js';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 import {
   extractListLevelStyles,
@@ -13,16 +16,19 @@ import { normalizeLvlTextChar } from '@superdoc/common/list-numbering';
 import { pointsToTwips } from '@converter/helpers';
 import { decodeRPrFromMarks } from '@converter/styles.js';
 
+interface StartMap {
+  [key: string]: string | number;
+}
+
 /**
  * Main handler for pasted DOCX content.
  *
- * @param {string} html The string being pasted
- * @param {Editor} editor The SuperEditor instance
- * @param {Object} view The ProseMirror view
- * @param {Object} plugin The plugin instance
+ * @param html The string being pasted
+ * @param editor The SuperEditor instance
+ * @param view The ProseMirror view
  * @returns
  */
-export const handleDocxPaste = (html, editor, view) => {
+export const handleDocxPaste = (html: string, editor: Editor, view: EditorView): boolean => {
   const { converter } = editor;
   if (!converter || !converter.convertedXml) return handleHtmlPaste(html, editor);
 
@@ -30,28 +36,31 @@ export const handleDocxPaste = (html, editor, view) => {
   cleanedHtml = cleanHtmlUnnecessaryTags(cleanedHtml);
 
   const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = cleanedHtml;
+  const sanitizedFragment = sanitizeHtml(cleanedHtml);
+  tempDiv.appendChild(sanitizedFragment);
 
   const data = tempDiv.querySelectorAll('p, li, ' + [1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => `h${n}`).join(', '));
 
-  const startMap = {};
+  const startMap: StartMap = {};
 
   data.forEach((item) => {
-    let type;
-    if (item.localName === 'li') {
+    const element = item as HTMLElement;
+    let type: 'listItem' | 'p';
+    if (element.localName === 'li') {
       type = 'listItem';
     } else {
       type = 'p';
     }
 
-    const styleAttr = item.getAttribute('style') || '';
+    const styleAttr = element.getAttribute('style') || '';
     const msoListMatch = styleAttr.match(/mso-list:\s*l(\d+)\s+level(\d+)\s+lfo(\d+)/);
-    const css = tempDiv.querySelector('style').innerHTML;
+    const styleElement = tempDiv.querySelector('style');
+    const css = styleElement?.innerHTML || '';
     const normalStyles = extractParagraphStyles(css, '.MsoNormal');
-    let styleId = item.getAttribute('class');
-    let charStyles = {};
-    if (item.localName.startsWith('h') && !styleId) {
-      styleId = item.localName;
+    let styleId: string | null = element.getAttribute('class');
+    let charStyles: Record<string, string> | null = {};
+    if (element.localName.startsWith('h') && !styleId) {
+      styleId = element.localName;
       const level = styleId.substring(1);
       charStyles = extractParagraphStyles(css, `.Heading${level}Char`);
     } else if (styleId) {
@@ -71,42 +80,50 @@ export const handleDocxPaste = (html, editor, view) => {
       } else {
         styleChain = { ...normalStyles, ...numberingStyles, ...paragraphStyles };
       }
-      let start, numFmt, lvlText;
+      let start: string | number | undefined;
+      let numFmt: string | undefined;
+      let lvlText: string;
 
       if (type === 'listItem') {
-        const listType = item.parentNode.getAttribute('type');
-        const startAttr = item.parentNode.getAttribute('start');
-        if (!startMap[numId]) startMap[numId] = startAttr;
+        const parentElement = element.parentNode as HTMLElement | null;
+        const listType = parentElement?.getAttribute('type');
+        const startAttr = parentElement?.getAttribute('start');
+        if (!startMap[numId]) startMap[numId] = startAttr || '1';
         start = startMap[numId];
-        numFmt = numDefByTypeMap.get(listType);
+        numFmt = numDefByTypeMap.get(listType || '');
         lvlText = `%${level}.`;
       } else {
         // Get numbering format from Word styles
         const msoNumFormat = numberingStyles['mso-level-number-format'] || 'decimal';
         numFmt = numDefMap.get(msoNumFormat);
-        const punc = item.innerText?.match(/^\s*[a-zA-Z0-9]+([.()])/i)?.[1] || '.';
-        lvlText = numFmt === 'bullet' ? normalizeLvlTextChar(numberingStyles['mso-level-text']) : `%${level}${punc}`;
-
-        const startGetter = startHelperMap.get(numFmt);
-        if (!startMap[numId]) startMap[numId] = startGetter(item.children[0]?.innerText || '1');
+        const punc = element.innerText?.match(/^\s*[a-zA-Z0-9]+([.()])/i)?.[1] || '.';
+        lvlText =
+          numFmt === 'bullet' ? normalizeLvlTextChar(numberingStyles['mso-level-text']) || '' : `%${level}${punc}`;
+
+        const startGetter = startHelperMap.get(numFmt || '');
+        if (!startMap[numId]) {
+          const result = startGetter?.(element.children[0]?.innerHTML || '1');
+          startMap[numId] = typeof result === 'string' || typeof result === 'number' ? result : '1';
+        }
         start = startMap[numId];
       }
 
-      item.setAttribute('data-marker-font-family', markerFontFamily);
-      item.setAttribute('data-num-id', numId);
-      item.setAttribute('data-list-level', parseInt(level) - 1);
-      item.setAttribute('data-start', start);
-      item.setAttribute('data-lvl-text', lvlText);
-      item.setAttribute('data-num-fmt', numFmt);
+      element.setAttribute('data-marker-font-family', markerFontFamily || '');
+      element.setAttribute('data-num-id', numId);
+      element.setAttribute('data-list-level', String(parseInt(level, 10) - 1));
+      element.setAttribute('data-start', String(start));
+      element.setAttribute('data-lvl-text', lvlText);
+      element.setAttribute('data-num-fmt', numFmt || '');
     }
 
     // Handle paragraph properties
-    const resolvedStyle = resolveStyles(styleChain, item.getAttribute('style'));
+    const resolvedStyle = resolveStyles(styleChain, element.getAttribute('style'));
 
     //   Indentation
-    const left = pointsToTwips(parseInt(resolvedStyle['margin-left'] ?? 0));
-    const hangingFirstLine = pointsToTwips(parseInt(resolvedStyle['text-indent'] ?? 0));
-    let hanging, firstLine;
+    const left = pointsToTwips(parseInt(resolvedStyle['margin-left'] ?? '0', 10));
+    const hangingFirstLine = pointsToTwips(parseInt(resolvedStyle['text-indent'] ?? '0', 10));
+    let hanging: number | undefined;
+    let firstLine: number | undefined;
     if (hangingFirstLine < 0) {
       hanging = Math.abs(hangingFirstLine);
     } else {
@@ -114,25 +131,25 @@ export const handleDocxPaste = (html, editor, view) => {
     }
 
     if (left || hanging || firstLine) {
-      const indent = {};
+      const indent: Record<string, number> = {};
       if (left != null) indent.left = left;
       if (hanging != null) indent.hanging = hanging;
       if (firstLine != null) indent.firstLine = firstLine;
-      item.setAttribute('data-indent', JSON.stringify(indent));
+      element.setAttribute('data-indent', JSON.stringify(indent));
     }
 
     //  Spacing
-    const after = pointsToTwips(parseInt(resolvedStyle['margin-bottom'] ?? 0));
-    const before = pointsToTwips(parseInt(resolvedStyle['margin-top'] ?? 0));
+    const after = pointsToTwips(parseInt(resolvedStyle['margin-bottom'] ?? '0', 10));
+    const before = pointsToTwips(parseInt(resolvedStyle['margin-top'] ?? '0', 10));
     if (after || before) {
-      const spacing = {};
+      const spacing: Record<string, number> = {};
       if (after != null) spacing.after = after;
       if (before != null) spacing.before = before;
-      item.setAttribute('data-spacing', JSON.stringify(spacing));
+      element.setAttribute('data-spacing', JSON.stringify(spacing));
     }
 
     //   Text styles
-    const textStyles = {};
+    const textStyles: Record<string, string> = {};
 
     if (resolvedStyle['font-size']) {
       textStyles['font-size'] = resolvedStyle['font-size'];
@@ -147,17 +164,17 @@ export const handleDocxPaste = (html, editor, view) => {
       Object.keys(textStyles).forEach((key) => {
         const styleValue = textStyles[key];
         if (styleValue) {
-          item.style[key] = styleValue;
+          (element.style as unknown as Record<string, string>)[key] = styleValue;
         }
       });
-      item.setAttribute('data-text-styles', JSON.stringify(textStyles));
+      element.setAttribute('data-text-styles', JSON.stringify(textStyles));
 
-      for (const child of item.children) {
-        if (child.style) {
+      for (const child of Array.from(element.children)) {
+        if ((child as HTMLElement).style) {
           Object.keys(textStyles).forEach((key) => {
             const styleValue = textStyles[key];
             if (styleValue) {
-              child.style[key] = styleValue;
+              ((child as HTMLElement).style as unknown as Record<string, string>)[key] = styleValue;
             }
           });
         }
@@ -166,16 +183,16 @@ export const handleDocxPaste = (html, editor, view) => {
 
     // Marks
     if (resolvedStyle['font-weight'] === 'bold') {
-      item.style.fontWeight = 'bold';
-      for (const child of item.children) {
-        if (child.style) {
-          child.style.fontWeight = 'bold';
+      element.style.fontWeight = 'bold';
+      for (const child of Array.from(element.children)) {
+        if ((child as HTMLElement).style) {
+          (child as HTMLElement).style.fontWeight = 'bold';
         }
       }
     }
 
     // Strip literal prefix inside conditional span
-    extractAndRemoveConditionalPrefix(item);
+    extractAndRemoveConditionalPrefix(element);
   });
 
   transformWordLists(tempDiv, editor);
@@ -191,11 +208,11 @@ export const handleDocxPaste = (html, editor, view) => {
   return true;
 };
 
-export const wrapTextsInRuns = (doc) => {
+export const wrapTextsInRuns = (doc: PmNode): PmNode => {
   const runType = doc.type?.schema?.nodes?.run;
   if (!runType) return doc;
 
-  const wrapNode = (node, parent) => {
+  const wrapNode = (node: PmNode, parent: PmNode | null): PmNode => {
     if (node.isText) {
       if (parent?.type?.name === 'run') return node;
       const runProperties = decodeRPrFromMarks(node.marks);
@@ -205,7 +222,7 @@ export const wrapTextsInRuns = (doc) => {
     if (!node.childCount) return node;
 
     let changed = false;
-    const wrappedChildren = [];
+    const wrappedChildren: PmNode[] = [];
     node.forEach((child) => {
       const wrappedChild = wrapNode(child, node);
       if (wrappedChild !== child) changed = true;
@@ -220,34 +237,52 @@ export const wrapTextsInRuns = (doc) => {
   return wrapNode(doc, null);
 };
 
-const transformWordLists = (container, editor) => {
+interface ListLevels {
+  [key: number]: number;
+}
+
+interface ListInfo {
+  levels: ListLevels;
+}
+
+interface ListsMap {
+  [key: string]: ListInfo;
+}
+
+interface MappedLists {
+  [key: string]: string;
+}
+
+const transformWordLists = (container: HTMLElement, editor: Editor): void => {
   const listItems = Array.from(container.querySelectorAll('[data-num-id]'));
 
-  const lists = {};
-  const mappedLists = {};
+  const lists: ListsMap = {};
+  const mappedLists: MappedLists = {};
 
   for (const item of listItems) {
-    const level = parseInt(item.getAttribute('data-list-level'));
-    const numFmt = item.getAttribute('data-num-fmt');
-    const start = item.getAttribute('data-start');
-    const lvlText = item.getAttribute('data-lvl-text');
-    const markerFontFamily = item.getAttribute('data-marker-font-family');
+    const element = item as HTMLElement;
+    const level = parseInt(element.getAttribute('data-list-level') || '0', 10);
+    const numFmt = element.getAttribute('data-num-fmt');
+    const start = element.getAttribute('data-start');
+    const lvlText = element.getAttribute('data-lvl-text');
+    const markerFontFamily = element.getAttribute('data-marker-font-family') || undefined;
 
     // MS Word copy-pasted lists always start with num Id 1 and increment from there.
     // Which way not match the target documents numbering.xml lists
     // We will generate new definitions for all pasted lists
     // But keep track of a map of original ID to new ID so that we can keep lists together
-    const importedId = item.getAttribute('data-num-id');
-    if (!mappedLists[importedId]) mappedLists[importedId] = ListHelpers.getNewListId(editor);
+    const importedId = element.getAttribute('data-num-id');
+    if (!importedId) continue;
+    if (!mappedLists[importedId]) mappedLists[importedId] = String(ListHelpers.getNewListId(editor));
     const id = mappedLists[importedId];
     const listType = numFmt === 'bullet' ? 'bulletList' : 'orderedList';
     ListHelpers.generateNewListDefinition({
-      numId: id,
+      numId: parseInt(id, 10),
       listType,
-      level: level.toString(),
-      start,
-      fmt: numFmt,
-      text: lvlText,
+      level: level,
+      start: parseInt(start || '1', 10),
+      fmt: numFmt || '',
+      text: lvlText || '',
       editor,
       markerFontFamily,
     });
@@ -266,56 +301,55 @@ const transformWordLists = (container, editor) => {
       }
     });
 
-    const path = generateListPath(level, currentListByNumId.levels, start);
+    const path = generateListPath(level, currentListByNumId.levels, start || '1');
     if (!path.length) path.push(currentListByNumId.levels[level]);
 
     const pElement = document.createElement('p');
-    pElement.innerHTML = item.innerHTML;
+    pElement.innerHTML = element.innerHTML;
     pElement.setAttribute('data-num-id', id);
     pElement.setAttribute('data-list-level', JSON.stringify(path));
-    pElement.setAttribute('data-level', level);
-    pElement.setAttribute('data-lvl-text', lvlText);
-    pElement.setAttribute('data-num-fmt', numFmt);
+    pElement.setAttribute('data-level', String(level));
+    pElement.setAttribute('data-lvl-text', lvlText || '');
+    pElement.setAttribute('data-num-fmt', numFmt || '');
 
-    if (item.hasAttribute('data-indent')) {
-      pElement.setAttribute('data-indent', item.getAttribute('data-indent'));
+    if (element.hasAttribute('data-indent')) {
+      pElement.setAttribute('data-indent', element.getAttribute('data-indent') || '');
     }
-    if (item.hasAttribute('data-spacing')) {
-      pElement.setAttribute('data-spacing', item.getAttribute('data-spacing'));
+    if (element.hasAttribute('data-spacing')) {
+      pElement.setAttribute('data-spacing', element.getAttribute('data-spacing') || '');
     }
-    if (item.hasAttribute('data-text-styles')) {
-      const textStyles = JSON.parse(item.getAttribute('data-text-styles'));
+    if (element.hasAttribute('data-text-styles')) {
+      const textStyles = JSON.parse(element.getAttribute('data-text-styles') || '{}');
       Object.keys(textStyles).forEach((key) => {
         const styleValue = textStyles[key];
         if (styleValue) {
-          pElement.style[key] = styleValue;
-          for (const child of pElement.children) {
-            if (child.style) {
-              child.style[key] = styleValue;
+          (pElement.style as unknown as Record<string, string>)[key] = styleValue;
+          for (const child of Array.from(pElement.children)) {
+            if ((child as HTMLElement).style) {
+              ((child as HTMLElement).style as unknown as Record<string, string>)[key] = styleValue;
             }
           }
         }
       });
     }
-    const parentNode = item.parentNode;
-    parentNode.appendChild(pElement);
+    const parentNode = element.parentNode;
+    parentNode?.appendChild(pElement);
 
-    let listForLevel;
     const newList = numFmt === 'bullet' ? document.createElement('ul') : document.createElement('ol');
     newList.setAttribute('data-list-id', id);
-    newList.level = level;
+    (newList as unknown as { level: number }).level = level;
 
-    parentNode.insertBefore(newList, item);
-    listForLevel = newList;
+    parentNode?.insertBefore(newList, element);
+    const listForLevel = newList;
 
     listForLevel.appendChild(pElement);
-    item.remove();
+    element.remove();
   }
 };
 
-export const generateListPath = (level, levels, start) => {
+export const generateListPath = (level: number | string, levels: ListLevels, start: string | number): number[] => {
   const iLvl = Number(level);
-  const path = [];
+  const path: number[] = [];
   if (iLvl > 0) {
     for (let i = iLvl; i >= 0; i--) {
       if (!levels[i]) levels[i] = Number(start);
@@ -325,18 +359,18 @@ export const generateListPath = (level, levels, start) => {
   return path;
 };
 
-function extractAndRemoveConditionalPrefix(item) {
+function extractAndRemoveConditionalPrefix(item: HTMLElement): void {
   const nodes = Array.from(item.childNodes);
-  let fontFamily = null;
-  let fontSize = null;
+  let fontFamily: string | null = null;
+  let fontSize: string | null = null;
 
-  let start = -1,
-    end = -1;
+  let start = -1;
+  let end = -1;
   nodes.forEach((node, index) => {
-    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue.includes('[if !supportLists]')) {
+    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue?.includes('[if !supportLists]')) {
       start = index;
     }
-    if (start !== -1 && node.nodeType === Node.COMMENT_NODE && node.nodeValue.includes('[endif]')) {
+    if (start !== -1 && node.nodeType === Node.COMMENT_NODE && node.nodeValue?.includes('[endif]')) {
       end = index;
     }
   });
@@ -344,9 +378,10 @@ function extractAndRemoveConditionalPrefix(item) {
   if (start !== -1 && end !== -1) {
     for (let i = start + 1; i < end; i++) {
       const node = nodes[i];
-      if (node.nodeType === Node.ELEMENT_NODE && node.style) {
-        fontFamily = fontFamily || node.style.fontFamily;
-        fontSize = fontSize || node.style.fontSize;
+      if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).style) {
+        const elemNode = node as HTMLElement;
+        fontFamily = fontFamily || elemNode.style.fontFamily;
+        fontSize = fontSize || elemNode.style.fontSize;
       }
     }
 
diff --git a/packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.js b/packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.ts
similarity index 64%
rename from packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.js
rename to packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.ts
index 33de203ac..7e6c62482 100644
--- a/packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.js
+++ b/packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.ts
@@ -1,22 +1,40 @@
+import type { EditorView } from 'prosemirror-view';
 import { DOMParser } from 'prosemirror-model';
+import type { Editor } from '../../Editor.js';
 import { convertEmToPt, sanitizeHtml } from '../../InputRule.js';
 import { ListHelpers } from '../../helpers/list-numbering-helpers.js';
 import { createSingleItemList } from '../html/html-helpers.js';
 import { getLvlTextForGoogleList, googleNumDefMap } from '../../helpers/pasteListHelpers.js';
 import { wrapTextsInRuns } from '../docx-paste/docx-paste.js';
 
+interface LevelCounters {
+  [key: number]: number;
+}
+
+interface LevelStarts {
+  [key: number]: number;
+}
+
+interface GetInitialStartValueParams {
+  li: HTMLLIElement;
+  listElem: HTMLElement;
+  level: number;
+  baseLevel: number;
+}
+
 /**
  * Main handler for pasted Google Docs content.
  *
- * @param {string} html The string being pasted
- * @param {Editor} editor The SuperEditor instance
- * @param {Object} view The ProseMirror view
+ * @param html The string being pasted
+ * @param editor The SuperEditor instance
+ * @param view The ProseMirror view
  * @returns
  */
-export const handleGoogleDocsHtml = (html, editor, view) => {
+export const handleGoogleDocsHtml = (html: string, editor: Editor, view: EditorView): boolean => {
   // convert lists
   const htmlWithPtSizing = convertEmToPt(html);
-  const cleanedHtml = sanitizeHtml(htmlWithPtSizing).innerHTML;
+  const sanitized = sanitizeHtml(htmlWithPtSizing) as unknown as HTMLElement;
+  const cleanedHtml = sanitized.innerHTML;
 
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = cleanedHtml;
@@ -38,9 +56,9 @@ export const handleGoogleDocsHtml = (html, editor, view) => {
 /**
  * Flattens lists to ensure each list contains exactly ONE list item.
  */
-function flattenListsInHtml(container, editor) {
+function flattenListsInHtml(container: HTMLElement, editor: Editor): HTMLElement {
   // Keep processing until all lists are flattened
-  let foundList;
+  let foundList: HTMLElement | null;
   while ((foundList = findListToFlatten(container))) {
     flattenFoundList(foundList, editor);
   }
@@ -51,10 +69,10 @@ function flattenListsInHtml(container, editor) {
 /**
  * Finds lists to be flattened
  */
-function findListToFlatten(container) {
+function findListToFlatten(container: HTMLElement): HTMLElement | null {
   // First priority: unprocessed lists
-  let list = container.querySelector('ol:not([data-list-id]), ul:not([data-list-id])');
-  if (list) return list;
+  const list = container.querySelector('ol:not([data-list-id]), ul:not([data-list-id])');
+  if (list) return list as HTMLElement;
 
   return null;
 }
@@ -65,23 +83,29 @@ function findListToFlatten(container) {
  * 2. Splitting multi-item lists into single-item lists
  * 3. Extracting nested lists and processing them recursively
  */
-function flattenFoundList(listElem, editor) {
+function flattenFoundList(listElem: HTMLElement, editor: Editor): void {
   const tag = listElem.tagName.toLowerCase();
   const baseLevel = getBaseLevel(listElem);
-  const items = Array.from(listElem.children).filter((c) => c.tagName?.toLowerCase() === 'li');
+  const items = Array.from(listElem.children).filter(
+    (c) => (c as HTMLElement).tagName?.toLowerCase() === 'li',
+  ) as HTMLLIElement[];
   if (!items.length) return;
 
-  const counters = {};
-  const levelStarts = {};
+  const counters: LevelCounters = {};
+  const levelStarts: LevelStarts = {};
 
   const rootNumId = ListHelpers.getNewListId(editor);
-  const newNodes = [];
+  const newNodes: HTMLElement[] = [];
 
   items.forEach((li) => {
     const level = getEffectiveLevel(li, baseLevel);
     const styleType = getListStyleType(li, tag);
     const numFmt = googleNumDefMap.get(styleType) || (tag === 'ol' ? 'decimal' : 'bullet');
-    const lvlText = getLvlTextForGoogleList(styleType, level + 1, editor);
+    const lvlText = getLvlTextForGoogleList(
+      styleType,
+      level + 1,
+      editor as unknown as Parameters<typeof getLvlTextForGoogleList>[2],
+    );
 
     if (levelStarts[level] == null) {
       levelStarts[level] = getInitialStartValue({ li, listElem, level, baseLevel });
@@ -91,8 +115,10 @@ function flattenFoundList(listElem, editor) {
     const path = buildListPath(level, counters);
 
     const paragraph = createSingleItemList({
-      li: li.childNodes.length && li.childNodes[0].tagName === 'P' ? li.childNodes[0] : li,
-      rootNumId,
+      li: (li.childNodes.length && (li.childNodes[0] as HTMLElement).tagName === 'P'
+        ? li.childNodes[0]
+        : li) as HTMLLIElement,
+      rootNumId: String(rootNumId),
       level,
       listNumberingType: numFmt,
     });
@@ -106,7 +132,7 @@ function flattenFoundList(listElem, editor) {
       listType: numFmt === 'bullet' ? 'bulletList' : 'orderedList',
       editor,
       fmt: numFmt,
-      level: level.toString(),
+      level: level,
       start: levelStarts[level],
       text: lvlText,
     });
@@ -116,10 +142,10 @@ function flattenFoundList(listElem, editor) {
     const nestedLists = getNestedLists([li.nextSibling]);
     const nestedList = nestedLists[0];
     if (nestedList) {
-      const cloned = nestedList.cloneNode(true);
+      const cloned = nestedList.cloneNode(true) as HTMLElement;
       cloned.setAttribute('data-level', String(level + 1));
       newNodes.push(cloned);
-      if (['OL', 'UL'].includes(li.nextSibling?.tagName)) {
+      if (li.nextSibling && ['OL', 'UL'].includes((li.nextSibling as HTMLElement).tagName)) {
         li.nextSibling.remove();
       }
     }
@@ -127,24 +153,25 @@ function flattenFoundList(listElem, editor) {
 
   const parent = listElem.parentNode;
   const nextSibling = listElem.nextSibling;
-  parent.removeChild(listElem);
+  parent?.removeChild(listElem);
 
   newNodes.forEach((node) => {
-    parent.insertBefore(node, nextSibling);
+    parent?.insertBefore(node, nextSibling);
   });
 }
 
 /**
  * Recursive helper to find all nested lists for the list item
  */
-function getNestedLists(nodes) {
-  let result = [];
+function getNestedLists(nodes: (Node | null)[]): HTMLElement[] {
+  const result: HTMLElement[] = [];
 
   const nodesArray = Array.from(nodes).filter((n) => n !== null);
 
-  for (let item of nodesArray) {
-    if (item.tagName === 'OL' || item.tagName === 'UL') {
-      result.push(item);
+  for (const item of nodesArray) {
+    const element = item as HTMLElement;
+    if (element.tagName === 'OL' || element.tagName === 'UL') {
+      result.push(element);
     }
   }
 
@@ -155,10 +182,10 @@ function getNestedLists(nodes) {
  * Method that combines separate lists with sequential start attribute into one list
  * Google Docs list items could be presented as separate lists with sequential start attribute
  */
-function mergeSeparateLists(container) {
-  const tempCont = container.cloneNode(true);
+function mergeSeparateLists(container: HTMLElement): HTMLElement {
+  const tempCont = container.cloneNode(true) as HTMLElement;
 
-  const rootLevelLists = Array.from(tempCont.querySelectorAll('ol:not(ol ol):not(ul ol)') || []);
+  const rootLevelLists = Array.from(tempCont.querySelectorAll('ol:not(ol ol):not(ul ol)') || []) as HTMLElement[];
   const mainList = rootLevelLists.find((list) => !list.getAttribute('start')) || rootLevelLists[0];
   const hasStartAttr = rootLevelLists.some((list) => list.getAttribute('start') !== null);
 
@@ -169,7 +196,7 @@ function mergeSeparateLists(container) {
     listsWithStartAttr
       .sort((a, b) => Number(a.getAttribute('start')) - Number(b.getAttribute('start')))
       .forEach((item) => {
-        mainList.append(...item.childNodes);
+        mainList.append(...Array.from(item.childNodes));
         item.remove();
       });
   }
@@ -177,7 +204,7 @@ function mergeSeparateLists(container) {
   return tempCont;
 }
 
-function getBaseLevel(listElem) {
+function getBaseLevel(listElem: HTMLElement): number {
   const explicitLevel = Number(listElem.getAttribute('data-level'));
   if (!Number.isNaN(explicitLevel)) return explicitLevel;
 
@@ -191,7 +218,7 @@ function getBaseLevel(listElem) {
   return level;
 }
 
-function getEffectiveLevel(li, baseLevel) {
+function getEffectiveLevel(li: HTMLLIElement, baseLevel: number): number {
   const ariaLevel = Number(li.getAttribute('aria-level'));
   if (Number.isNaN(ariaLevel)) {
     return baseLevel;
@@ -199,11 +226,14 @@ function getEffectiveLevel(li, baseLevel) {
   return Math.max(ariaLevel - 1, baseLevel);
 }
 
-function getListStyleType(li, fallbackTag) {
-  return li.style?.['list-style-type'] || (fallbackTag === 'ol' ? 'decimal' : 'bullet');
+function getListStyleType(li: HTMLLIElement, fallbackTag: string): string {
+  return (
+    (li.style as unknown as { 'list-style-type'?: string })?.['list-style-type'] ||
+    (fallbackTag === 'ol' ? 'decimal' : 'bullet')
+  );
 }
 
-function getInitialStartValue({ li, listElem, level, baseLevel }) {
+function getInitialStartValue({ li, listElem, level, baseLevel }: GetInitialStartValueParams): number {
   const valueAttr = Number(li.getAttribute('value'));
   if (!Number.isNaN(valueAttr)) {
     return valueAttr;
@@ -219,11 +249,11 @@ function getInitialStartValue({ li, listElem, level, baseLevel }) {
   return 1;
 }
 
-function incrementLevelCounter(map, level, start) {
+function incrementLevelCounter(map: LevelCounters, level: number, start: number): number {
   const numericLevel = Number(level);
   Object.keys(map).forEach((key) => {
     if (Number(key) > numericLevel) {
-      delete map[key];
+      delete map[Number(key)];
     }
   });
 
@@ -236,13 +266,13 @@ function incrementLevelCounter(map, level, start) {
   return map[numericLevel];
 }
 
-function buildListPath(level, map) {
+function buildListPath(level: number, map: LevelCounters): number[] {
   const numericLevel = Number(level);
   if (Number.isNaN(numericLevel)) {
     return [];
   }
 
-  const path = [];
+  const path: number[] = [];
   for (let i = 0; i <= numericLevel; i++) {
     if (map[i] != null) {
       path.push(map[i]);
diff --git a/packages/super-editor/src/core/inputRules/html/html-helpers.js b/packages/super-editor/src/core/inputRules/html/html-helpers.ts
similarity index 74%
rename from packages/super-editor/src/core/inputRules/html/html-helpers.js
rename to packages/super-editor/src/core/inputRules/html/html-helpers.ts
index 47ff610b1..fb372ac53 100644
--- a/packages/super-editor/src/core/inputRules/html/html-helpers.js
+++ b/packages/super-editor/src/core/inputRules/html/html-helpers.ts
@@ -1,6 +1,36 @@
+import type { Editor } from '../../Editor.js';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 
-const removeWhitespaces = (node) => {
+interface ListItem {
+  element: HTMLElement;
+  level: number;
+  numId: string | null;
+  listNumberingType: string;
+  listLevel: number[] | null;
+}
+
+interface ListSequence {
+  id: string;
+  items: HTMLElement[];
+}
+
+interface NestedListData {
+  element: Element;
+  parent: Node | null;
+}
+
+interface CreateSingleItemListParams {
+  li: HTMLLIElement;
+  rootNumId: string;
+  level: number;
+  listNumberingType: string;
+}
+
+interface BuildNestedListParams {
+  items: ListItem[];
+}
+
+const removeWhitespaces = (node: Node): Node => {
   const children = node.childNodes;
 
   for (let i = children.length - 1; i >= 0; i -= 1) {
@@ -20,11 +50,15 @@ const removeWhitespaces = (node) => {
  * Flattens ALL lists to ensure each list contains exactly ONE list item.
  * Handles both multi-item lists and nested lists.
  */
-export function flattenListsInHtml(html, editor) {
+export function flattenListsInHtml(html: string, editor: Editor): string {
   // pick the right parser & Node interface
-  let parser, NodeInterface;
+  let parser: DOMParser;
+  let NodeInterface: typeof Node;
   if (editor.options?.mockDocument) {
-    const win = editor.options.mockDocument.defaultView;
+    const win = editor.options.mockDocument.defaultView as unknown as {
+      DOMParser: typeof DOMParser;
+      Node: typeof Node;
+    };
     parser = new win.DOMParser();
     NodeInterface = win.Node;
   } else {
@@ -32,10 +66,10 @@ export function flattenListsInHtml(html, editor) {
     NodeInterface = window.Node;
   }
 
-  const doc = removeWhitespaces(parser.parseFromString(html, 'text/html'));
+  const doc = removeWhitespaces(parser.parseFromString(html, 'text/html')) as Document;
 
   // Keep processing until all lists are flattened
-  let foundList;
+  let foundList: HTMLElement | null;
   while ((foundList = findListToFlatten(doc))) {
     flattenFoundList(foundList, editor, NodeInterface);
   }
@@ -49,28 +83,28 @@ export function flattenListsInHtml(html, editor) {
  * 2. Lists with more than one <li> child
  * 3. Lists with nested lists inside them
  */
-function findListToFlatten(doc) {
+function findListToFlatten(doc: Document): HTMLElement | null {
   // First priority: unprocessed lists
-  let list = doc.querySelector('ol:not([data-list-id]), ul:not([data-list-id])');
-  if (list) return list;
+  const list = doc.querySelector('ol:not([data-list-id]), ul:not([data-list-id])');
+  if (list) return list as HTMLElement;
 
   // Second priority: lists with multiple items
   const allLists = doc.querySelectorAll('ol[data-list-id], ul[data-list-id]');
-  for (const list of allLists) {
-    const liChildren = Array.from(list.children).filter((c) => c.tagName.toLowerCase() === 'li');
+  for (const list of Array.from(allLists)) {
+    const liChildren = Array.from(list.children).filter((c) => (c as Element).tagName.toLowerCase() === 'li');
     if (liChildren.length > 1) {
-      return list;
+      return list as HTMLElement;
     }
 
     // Third priority: lists with nested lists
     const nestedLists = list.querySelectorAll('ol, ul');
     if (nestedLists.length > 0) {
-      return list;
+      return list as HTMLElement;
     }
 
     // Finally: even single-item lists should be flattened when they carry list metadata
     if (liChildren.length === 1) {
-      return list;
+      return list as HTMLElement;
     }
   }
 
@@ -83,19 +117,19 @@ function findListToFlatten(doc) {
  * 2. Splitting multi-item lists into single-item lists
  * 3. Extracting nested lists and processing them recursively
  */
-function flattenFoundList(listElem, editor) {
+function flattenFoundList(listElem: HTMLElement, editor: Editor, _NodeInterface: typeof Node): void {
   const localDoc = listElem.ownerDocument;
   const tag = listElem.tagName.toLowerCase();
 
   // Ensure the list has a data-list-id
   let rootNumId = listElem.getAttribute('data-list-id');
   if (!rootNumId) {
-    rootNumId = ListHelpers.getNewListId(editor);
+    rootNumId = String(ListHelpers.getNewListId(editor));
     ListHelpers.generateNewListDefinition({
-      numId: rootNumId,
+      numId: parseInt(rootNumId, 10),
       listType: tag === 'ol' ? 'orderedList' : 'bulletList',
       editor,
-    });
+    } as Parameters<typeof ListHelpers.generateNewListDefinition>[0]);
   }
 
   // Calculate the level of this list
@@ -112,28 +146,29 @@ function flattenFoundList(listElem, editor) {
   }
 
   // Get all direct <li> children
-  const items = Array.from(listElem.children).filter((c) => c.tagName.toLowerCase() === 'li');
+  const items = Array.from(listElem.children).filter((c) => c.tagName.toLowerCase() === 'li') as HTMLLIElement[];
 
   // Create single-item lists for each item
-  const newLists = [];
+  const newLists: Array<HTMLElement | Element> = [];
 
   items.forEach((li) => {
     // Extract any nested lists first
     const nestedLists = Array.from(li.querySelectorAll('ol, ul'));
-    const nestedListsData = nestedLists.map((nl) => ({
-      element: nl.cloneNode(true),
+    const nestedListsData: NestedListData[] = nestedLists.map((nl) => ({
+      element: nl.cloneNode(true) as Element,
       parent: nl.parentNode,
     }));
 
     // Remove nested lists from the li
-    nestedLists.forEach((nl) => nl.parentNode.removeChild(nl));
+    nestedLists.forEach((nl) => nl.parentNode?.removeChild(nl));
 
     // Create a new single-item list for this li
     let listNumberingType = tag === 'ol' ? 'decimal' : 'bullet';
     try {
       const details = ListHelpers.getListDefinitionDetails?.({
-        numId: rootNumId,
+        numId: parseInt(rootNumId, 10),
         level,
+        listType: tag === 'ol' ? 'orderedList' : 'bulletList',
         editor,
       });
       if (details?.listNumberingType) {
@@ -149,7 +184,7 @@ function flattenFoundList(listElem, editor) {
     // Add the nested lists (they'll be processed in the next iteration)
     nestedListsData.forEach((data) => {
       // save level for next iteration because parent list is already flattened
-      data.element.setAttribute('data-level', level + 1);
+      data.element.setAttribute('data-level', String(level + 1));
       const nestedTag = data.element.tagName?.toLowerCase();
       if (nestedTag === tag) {
         data.element.setAttribute('data-list-id', rootNumId);
@@ -161,17 +196,22 @@ function flattenFoundList(listElem, editor) {
   // Replace the original list with the new single-item lists
   const parent = listElem.parentNode;
   const nextSibling = listElem.nextSibling;
-  parent.removeChild(listElem);
+  parent?.removeChild(listElem);
 
   newLists.forEach((list) => {
-    parent.insertBefore(list, nextSibling);
+    parent?.insertBefore(list, nextSibling);
   });
 }
 
 /**
  * Creates a single-item list from an <li> element
  */
-export function createSingleItemList({ li, rootNumId, level, listNumberingType }) {
+export function createSingleItemList({
+  li,
+  rootNumId,
+  level,
+  listNumberingType,
+}: CreateSingleItemListParams): HTMLElement {
   const localDoc = li.ownerDocument;
 
   // Create new list and list item
@@ -197,7 +237,7 @@ export function createSingleItemList({ li, rootNumId, level, listNumberingType }
 
   // Copy child nodes
   Array.from(li.childNodes).forEach((node) => {
-    if (node.tagName === 'P') {
+    if ((node as HTMLElement).tagName === 'P') {
       // unwrap nested <p> inside <li>
       Array.from(node.childNodes).forEach((childNode) => {
         newItem.appendChild(childNode.cloneNode(true));
@@ -213,26 +253,27 @@ export function createSingleItemList({ li, rootNumId, level, listNumberingType }
 /**
  * Converts flatten lists back to normal list structure.
  */
-export function unflattenListsInHtml(html) {
+export function unflattenListsInHtml(html: string): string {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
-  const allNodes = [...doc.body.children];
+  const allNodes = Array.from(doc.body.children);
 
-  const listSequences = [];
-  let currentSequence = null;
+  const listSequences: ListSequence[] = [];
+  let currentSequence: ListSequence | null = null;
 
   allNodes.forEach((node) => {
-    const isListParagraph = node.tagName === 'P' && node.hasAttribute('data-num-id');
+    const element = node as HTMLElement;
+    const isListParagraph = element.tagName === 'P' && element.hasAttribute('data-num-id');
 
     if (isListParagraph) {
-      const listId = node.getAttribute('data-num-id');
+      const listId = element.getAttribute('data-num-id');
 
       if (currentSequence && currentSequence.id === listId) {
-        currentSequence.items.push(node);
+        currentSequence.items.push(element);
       } else {
         currentSequence = {
-          id: listId,
-          items: [node],
+          id: listId!,
+          items: [element],
         };
         listSequences.push(currentSequence);
       }
@@ -291,7 +332,7 @@ export function unflattenListsInHtml(html) {
 /**
  * Builds a nested list structure from flat items.
  */
-function buildNestedList({ items }) {
+function buildNestedList({ items }: BuildNestedListParams): HTMLElement | null {
   if (!items.length) {
     return null;
   }
@@ -308,11 +349,11 @@ function buildNestedList({ items }) {
 
   applyStartAttribute(rootList, rootItem.listLevel, 0);
 
-  const lastLevelItem = new Map();
+  const lastLevelItem = new Map<number, HTMLLIElement>();
   items.forEach((item) => {
     const { element: paragraph, level } = item;
     const listItem = createListItemFromParagraph(paragraph);
-    const cleanLi = cleanListItem(listItem);
+    const cleanLi = cleanListItem(listItem) as HTMLLIElement;
 
     if (level === 0) {
       rootList.append(cleanLi);
@@ -338,7 +379,7 @@ function buildNestedList({ items }) {
       }
       nestedList.setAttribute('data-level', String(level));
 
-      applyStartAttribute(nestedList, item.listLevel, level);
+      applyStartAttribute(nestedList as HTMLElement, item.listLevel, level);
       nestedList.append(cleanLi);
       lastLevelItem.set(level, cleanLi);
     }
@@ -354,7 +395,7 @@ function buildNestedList({ items }) {
   return rootList;
 }
 
-function createListItemFromParagraph(paragraph) {
+function createListItemFromParagraph(paragraph: HTMLElement): HTMLLIElement {
   const doc = paragraph.ownerDocument;
   const listItem = doc.createElement('li');
 
@@ -371,12 +412,12 @@ function createListItemFromParagraph(paragraph) {
   return listItem;
 }
 
-function findNestedList(parentLi, listTag) {
+function findNestedList(parentLi: HTMLLIElement, listTag: string): Element | undefined {
   const lowerTag = listTag.toLowerCase();
   return Array.from(parentLi.children).find((child) => child.tagName && child.tagName.toLowerCase() === lowerTag);
 }
 
-function getListTagForType(listNumberingType) {
+function getListTagForType(listNumberingType: string): string {
   const type = listNumberingType?.toLowerCase();
   if (!type || type === 'bullet' || type === 'image' || type === 'none') {
     return 'ul';
@@ -384,7 +425,7 @@ function getListTagForType(listNumberingType) {
   return 'ol';
 }
 
-function applyStartAttribute(listNode, listLevel, level) {
+function applyStartAttribute(listNode: HTMLElement, listLevel: number[] | null, level: number): void {
   if (!listNode || listNode.tagName?.toLowerCase() !== 'ol') {
     return;
   }
@@ -395,7 +436,7 @@ function applyStartAttribute(listNode, listLevel, level) {
   }
 }
 
-function getStartValueForLevel(listLevel, level) {
+function getStartValueForLevel(listLevel: number[] | null, level: number): number | null {
   if (!Array.isArray(listLevel)) {
     return null;
   }
@@ -404,7 +445,7 @@ function getStartValueForLevel(listLevel, level) {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
-function parseListLevelAttribute(raw) {
+function parseListLevelAttribute(raw: string | null): number[] | null {
   if (!raw) {
     return null;
   }
@@ -430,7 +471,7 @@ const LIST_METADATA_ATTRIBUTES = new Set([
 /**
  * Removes flatten attributes from list item.
  */
-function cleanListItem(listItem) {
+function cleanListItem(listItem: HTMLLIElement): HTMLLIElement {
   const attrs = [
     'data-num-id',
     'data-level',
diff --git a/packages/super-editor/src/core/inputRules/html/transform-copied-lists.js b/packages/super-editor/src/core/inputRules/html/transform-copied-lists.ts
similarity index 56%
rename from packages/super-editor/src/core/inputRules/html/transform-copied-lists.js
rename to packages/super-editor/src/core/inputRules/html/transform-copied-lists.ts
index 818fd9cb2..f0e1f31dd 100644
--- a/packages/super-editor/src/core/inputRules/html/transform-copied-lists.js
+++ b/packages/super-editor/src/core/inputRules/html/transform-copied-lists.ts
@@ -1,20 +1,20 @@
 /**
  * Handler for copied content which transforms list for Google Docs/Word.
  *
- * @param {string} html The copied html content
- * @returns {string} Result html to be inserted in clipboard data
+ * @param html The copied html content
+ * @returns Result html to be inserted in clipboard data
  */
 
-export const transformListsInCopiedContent = (html) => {
+export const transformListsInCopiedContent = (html: string): string => {
   const container = document.createElement('div');
   container.innerHTML = html;
 
-  const result = [];
-  const stack = [];
+  const result: string[] = [];
+  const stack: Array<{ tag: string; level: number; el: HTMLElement }> = [];
 
-  const flushStackUntil = (level) => {
+  const flushStackUntil = (level: number): void => {
     while (stack.length && stack[stack.length - 1].level >= level) {
-      const top = stack.pop();
+      const top = stack.pop()!;
       if (stack.length) {
         stack[stack.length - 1].el.appendChild(top.el);
       } else {
@@ -25,20 +25,24 @@ export const transformListsInCopiedContent = (html) => {
 
   Array.from(container.childNodes).forEach((node) => {
     if (node.nodeType !== Node.ELEMENT_NODE) {
-      result.push(node.outerHTML || node.textContent);
+      result.push((node as Element).outerHTML || node.textContent || '');
       return;
     }
 
-    if (node.tagName.toLowerCase() === 'ol' || node.tagName.toLowerCase() === 'ul') {
-      const child = getFirstElementChild(node);
+    const element = node as HTMLElement;
+
+    if (element.tagName.toLowerCase() === 'ol' || element.tagName.toLowerCase() === 'ul') {
+      const child = getFirstElementChild(element);
+      if (!child) return;
+
       const level = getLevel(child);
       const numFmt = child.getAttribute('data-num-fmt');
       const lvlText = child.getAttribute('data-lvl-text');
-      const tag = node.tagName.toLowerCase();
+      const tag = element.tagName.toLowerCase();
 
-      const li = child.cloneNode(true);
-      li.setAttribute('aria-level', level + 1);
-      li.style['list-style-type'] = getListStyleType(numFmt, lvlText);
+      const li = child.cloneNode(true) as HTMLElement;
+      li.setAttribute('aria-level', String(level + 1));
+      (li.style as unknown as { 'list-style-type': string })['list-style-type'] = getListStyleType(numFmt, lvlText);
 
       // if current level not open, create new list
       if (!stack.length || stack[stack.length - 1].level < level) {
@@ -54,7 +58,7 @@ export const transformListsInCopiedContent = (html) => {
       stack[stack.length - 1].el.appendChild(li);
     } else {
       flushStackUntil(0);
-      result.push(node.outerHTML);
+      result.push(element.outerHTML);
     }
   });
 
@@ -67,14 +71,14 @@ export const transformListsInCopiedContent = (html) => {
 /**
  * Returns value for list-style-type attribute of copied content
  */
-export const getListStyleType = (numFmt, lvlText) => {
+export const getListStyleType = (numFmt: string | null, lvlText: string | null): string => {
   const bulletFmtMap = new Map([
     ['●', 'disc'],
     ['◦', 'circle'],
     ['▪', 'square'],
   ]);
 
-  if (numFmt === 'bullet') return bulletFmtMap.get(lvlText) || 'disc';
+  if (numFmt === 'bullet') return bulletFmtMap.get(lvlText || '') || 'disc';
 
   const fmtMap = new Map([
     ['decimal', 'decimal'],
@@ -84,20 +88,20 @@ export const getListStyleType = (numFmt, lvlText) => {
     ['upperRoman', 'upper-roman'],
   ]);
 
-  return lvlText.startsWith('0') ? 'decimal-leading-zero' : fmtMap.get(numFmt);
+  return lvlText?.startsWith('0') ? 'decimal-leading-zero' : fmtMap.get(numFmt || '') || 'decimal';
 };
 
 /**
  * Get first child of Element type
  */
-function getFirstElementChild(node) {
-  return Array.from(node.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE) || null;
+function getFirstElementChild(node: HTMLElement): HTMLElement | null {
+  return (Array.from(node.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE) as HTMLElement) || null;
 }
 
 /**
  * Returns parsed list level
  */
-export const getLevel = (node) => {
+export const getLevel = (node: HTMLElement): number => {
   const lvl = node.getAttribute('data-level');
   return lvl ? parseInt(lvl, 10) : 0;
 };
diff --git a/packages/super-editor/src/core/inputRules/wrappingInputRule.js b/packages/super-editor/src/core/inputRules/wrappingInputRule.ts
similarity index 74%
rename from packages/super-editor/src/core/inputRules/wrappingInputRule.js
rename to packages/super-editor/src/core/inputRules/wrappingInputRule.ts
index 89d79c5f2..606a1ab13 100644
--- a/packages/super-editor/src/core/inputRules/wrappingInputRule.js
+++ b/packages/super-editor/src/core/inputRules/wrappingInputRule.ts
@@ -1,14 +1,26 @@
+import type { NodeType, Node as PmNode, Attrs } from 'prosemirror-model';
 import { canJoin, findWrapping } from 'prosemirror-transform';
-import { InputRule } from '../InputRule.js';
+import { InputRule, InputRuleMatch } from '../InputRule.js';
 import { callOrGet } from '../utilities/callOrGet.js';
+import type { Editor } from '../Editor.js';
+
+export interface WrappingInputRuleConfig {
+  match: RegExp | ((text: string) => InputRuleMatch | null);
+  type: NodeType;
+  getAttributes?: ((match: InputRuleMatch) => Attrs | null) | null;
+  keepMarks?: boolean;
+  keepAttributes?: boolean;
+  editor?: Editor;
+  joinPredicate?: (match: InputRuleMatch, node: PmNode) => boolean;
+}
 
 /**
  * Build an input rule for automatically wrapping a textblock when a
- * given string is typed. When using a regular expresion you’ll
+ * given string is typed. When using a regular expresion you'll
  * probably want the regexp to start with `^`, so that the pattern can
  * only occur at the start of a textblock.
  */
-export function wrappingInputRule(config) {
+export function wrappingInputRule(config: WrappingInputRuleConfig): InputRule {
   return new InputRule({
     match: config.match,
     handler: ({ state, range, match, chain }) => {
diff --git a/packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.js b/packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.ts
similarity index 74%
rename from packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.js
rename to packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.ts
index 930315ab5..2d8c628ff 100644
--- a/packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.js
+++ b/packages/super-editor/src/core/migrations/0.14-listsv2/listsv2migration.ts
@@ -1,23 +1,32 @@
 import { getAllFieldAnnotations } from '@extensions/field-annotation/fieldAnnotationHelpers/index.js';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
+import type { Editor } from '../../Editor.js';
+import type { Node } from 'prosemirror-model';
 
 const isDebugging = false;
-const log = (...args) => {
+const log = (...args: unknown[]): void => {
   if (isDebugging) console.debug('[lists v2 migration]', ...args);
 };
 
+interface Replacement {
+  from: number;
+  to: number;
+  listNode: Node;
+  replacement: FlattenedItem[];
+}
+
+interface FlattenedItem {
+  node: Node;
+  baseLevel?: number;
+}
+
 /**
  * Migration for lists v1 to v2
  * This function checks if the editor has any lists that need to be migrated from v1 to v2.
- * It splits list nodes that have more than one item into single-item lists,
- * @param {Editor} editor - The editor instance containing the lists to be migrated.
- * @return {Object} An object containing the extracted items and replacements made.
- *                  The `extracted` property contains the flattened list items,
- *                  and the `replacements` property contains the positions and nodes replaced.
- *                  If no migration is needed, it returns an empty object.
+ * It splits list nodes that have more than one item into single-item lists.
  */
-export const migrateListsToV2IfNecessary = (editor) => {
-  const replacements = [];
+export const migrateListsToV2IfNecessary = (editor: Editor): Replacement[] => {
+  const replacements: Replacement[] = [];
 
   log('ATTEMPTING MIGRATIONS');
 
@@ -57,7 +66,7 @@ export const migrateListsToV2IfNecessary = (editor) => {
       const { from, to, replacement, listNode } = replacements[i];
 
       // Convert the flattened items to actual nodes
-      const nodesToInsert = [];
+      const nodesToInsert: Node[] = [];
       for (const item of replacement) {
         if (item.node.type.name === 'listItem') {
           // Create a single-item list containing this list item
@@ -75,7 +84,8 @@ export const migrateListsToV2IfNecessary = (editor) => {
   }
 
   tr.setMeta('listsv2migration', replacements);
-  editor.options.migrated = true;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (editor.options as any).migrated = true;
   dispatch(tr);
 
   return replacements;
@@ -83,13 +93,14 @@ export const migrateListsToV2IfNecessary = (editor) => {
 
 /**
  * Completely flatten a list structure into single-item lists
- * @param {Node} listNode - The list node to flatten
- * @param {Editor} editor - The editor instance
- * @param {number} baseLevel - The base nesting level
- * @returns {Array} Array of single-item list nodes
  */
-function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = null) {
-  const result = [];
+function flattenListCompletely(
+  listNode: Node,
+  editor: Editor,
+  baseLevel: number = 0,
+  sharedNumId: number | null = null,
+): FlattenedItem[] {
+  const result: FlattenedItem[] = [];
   const listTypes = ['orderedList', 'bulletList'];
   const currentListType = listNode.type.name;
 
@@ -104,10 +115,15 @@ function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = nu
     }
   }
 
-  let numId = parseInt(listNode.attrs?.listId);
+  let numId = parseInt(listNode.attrs?.listId, 10);
   log('LIST ID', numId, 'SHARED NUM ID', sharedNumId);
   if (!numId || Number.isNaN(numId)) numId = ListHelpers.getNewListId(editor);
-  const listHasDef = ListHelpers.getListDefinitionDetails({ numId, level: baseLevel, editor });
+  const listHasDef = ListHelpers.getListDefinitionDetails({
+    numId,
+    level: baseLevel,
+    listType: currentListType,
+    editor,
+  });
   if (!listHasDef || (!sharedNumId && !numId)) {
     // In some legacy cases, we might not find any list ID at all but we can infer
     // the list style from the list-style-type attribute.
@@ -142,10 +158,8 @@ function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = nu
         const newList = ListHelpers.createSchemaOrderedListNode({
           level: baseLevel,
           numId: sharedNumId,
-          listType: listNode.type.name,
           editor,
           contentNode: contentNode.toJSON(),
-          listLevel: listItem.attrs.listLevel || [1],
         });
         result.push({ node: newList, baseLevel });
       }
@@ -168,10 +182,8 @@ function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = nu
           const newList = ListHelpers.createSchemaOrderedListNode({
             level: baseLevel,
             numId: sharedNumId,
-            listType: listNode.type.name,
             editor,
             contentNode: firstItem.toJSON(),
-            listLevel: listItem.attrs.listLevel || [1],
           });
           result.push({ node: newList, baseLevel });
         } else {
@@ -180,7 +192,7 @@ function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = nu
         }
       }
 
-      for (let contentItem of listItem.content.content.slice(1)) {
+      for (const contentItem of listItem.content.content.slice(1)) {
         if (listTypes.includes(contentItem.type.name)) {
           // If the first item is a nested list, we need to flatten it completely
           const flattened = flattenListCompletely(contentItem, editor, baseLevel + 1, sharedNumId);
@@ -198,12 +210,9 @@ function flattenListCompletely(listNode, editor, baseLevel = 0, sharedNumId = nu
 /**
  * Check if a list item needs migration to v2.
  * This function checks if a list item has more than one child or if the first child is a list item
- * without the required attributes for v2 migration. It returns true if migration is needed,
- * and false otherwise.
- * @param {Object} listItem - The list item to check for migration.
- * @returns {boolean} True if the list item needs migration, false otherwise.
+ * without the required attributes for v2 migration.
  */
-const shouldMigrateList = (listItem) => {
+const shouldMigrateList = (listItem: Node): boolean => {
   const content = listItem.content;
 
   if (content?.content?.length > 1) {
@@ -233,15 +242,11 @@ const shouldMigrateList = (listItem) => {
 /**
  * Check if a list definition is valid.
  * This function checks if a list node has a valid definition for lists v2 based on its attributes.
- * It returns true if the definition is valid, and false otherwise.
- * @param {Object} listNode - The list node to check for a valid definition.
- * @param {Editor} editor - The editor instance to use for checking the definition.
- * @returns {boolean} True if the list definition is valid, false otherwise.
  */
-const checkValidDefinition = (listNode, editor) => {
+const checkValidDefinition = (listNode: Node, editor: Editor): boolean => {
   const listType = listNode.type.name;
   const listItem = listNode.content.firstChild;
-  const { attrs } = listItem;
+  const { attrs } = listItem || {};
   const { numId, level } = attrs || {};
   const listDef = ListHelpers.getListDefinitionDetails({ numId, level, listType, editor });
   const { abstract } = listDef || {};
@@ -253,34 +258,35 @@ const checkValidDefinition = (listNode, editor) => {
 /**
  * Generate a missing list definition for a list node.
  * This function creates a new list definition based on the attributes of the list item
- * and the editor instance. It returns the generated list definition.
- * @param {Object} listNode - The list node to generate a definition for.
- * @param {Editor} editor - The editor instance to use for generating the definition.
- * @returns {Object} The generated list definition.
+ * and the editor instance.
  */
-const generateMissingListDefinition = (listNode, editor) => {
+const generateMissingListDefinition = (listNode: Node, editor: Editor): FlattenedItem[] => {
   const listType = listNode.type.name;
   const listItem = listNode.content.firstChild;
-  const { attrs } = listItem;
+  const { attrs } = listItem || {};
   const { numId } = attrs || {};
-  return ListHelpers.generateNewListDefinition({
+  ListHelpers.generateNewListDefinition({
     numId,
     listType,
     editor,
   });
+  return [];
 };
 
+interface AnnotationValue {
+  input_id: string;
+  input_value: string;
+}
+
 /**
  * Migrate paragraph fields to lists v2.
  * This function processes all field annotations in the editor state,
  * specifically those with type 'html', and migrates their content to the new lists v2 format.
- * It creates a child editor for each field annotation, processes the HTML content,
- * and updates the input values accordingly.
- * @param {Array} annotationValues - The array of field annotations to migrate.
- * @returns {Promise<Array>} A promise that resolves to an array of updated field annotations
- *                            with their input values migrated to the new lists v2 format.
  */
-export const migrateParagraphFieldsListsV2 = async (annotationValues = [], editor) => {
+export const migrateParagraphFieldsListsV2 = async (
+  annotationValues: AnnotationValue[] = [],
+  editor: Editor,
+): Promise<AnnotationValue[]> => {
   const annotations = getAllFieldAnnotations(editor.state);
   const newValues = [];
 
@@ -292,7 +298,7 @@ export const migrateParagraphFieldsListsV2 = async (annotationValues = [], edito
   for (const annotation of annotations) {
     const type = annotation.node?.attrs?.type;
 
-    const matchedAnnotation = annotationValues.find((v) => v.input_id === annotation.node.attrs.fieldId);
+    const matchedAnnotation = annotationValues.find((v) => v.input_id === annotation.node?.attrs?.fieldId);
 
     if (!!matchedAnnotation && (!type || type !== 'html')) {
       newValues.push(matchedAnnotation);
@@ -303,13 +309,14 @@ export const migrateParagraphFieldsListsV2 = async (annotationValues = [], edito
     if (!value) continue;
 
     // Wait for each child editor to complete
-    await new Promise((resolve, reject) => {
+    await new Promise<void>((resolve, _reject) => {
       const element = document.createElement('div');
       editor.createChildEditor({
         element,
         html: value,
         onCreate: ({ editor: localEditor }) => {
-          const { migrated } = localEditor.options;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const migrated = (localEditor.options as any).migrated;
 
           if (migrated) {
             const newHTML = localEditor.getHTML();
@@ -318,9 +325,6 @@ export const migrateParagraphFieldsListsV2 = async (annotationValues = [], edito
           }
           resolve();
         },
-        onError: (error) => {
-          reject(error);
-        },
       });
     });
   }
diff --git a/packages/super-editor/src/core/migrations/index.js b/packages/super-editor/src/core/migrations/index.ts
similarity index 59%
rename from packages/super-editor/src/core/migrations/index.js
rename to packages/super-editor/src/core/migrations/index.ts
index 59cb5e79c..b597f2a37 100644
--- a/packages/super-editor/src/core/migrations/index.js
+++ b/packages/super-editor/src/core/migrations/index.ts
@@ -1,9 +1,10 @@
-import { migration_after_0_4_14 } from './migration_after_0_4_14';
+import { migration_after_0_4_14 } from './migration_after_0_4_14.js';
+import type { Editor } from '../Editor.js';
 
 const DOCUMENT_MIGRATIONS = {
   initial: migration_after_0_4_14,
 };
 
-export const getNecessaryMigrations = (version) => {
+export const getNecessaryMigrations = (version: string): ((editor: Editor) => boolean)[] | undefined => {
   if (version === 'initial' || version === '0.4.14') return Object.values(DOCUMENT_MIGRATIONS);
 };
diff --git a/packages/super-editor/src/core/migrations/migration_after_0_4_14.js b/packages/super-editor/src/core/migrations/migration_after_0_4_14.ts
similarity index 86%
rename from packages/super-editor/src/core/migrations/migration_after_0_4_14.js
rename to packages/super-editor/src/core/migrations/migration_after_0_4_14.ts
index 7fc0f2c3a..7a4fa766c 100644
--- a/packages/super-editor/src/core/migrations/migration_after_0_4_14.js
+++ b/packages/super-editor/src/core/migrations/migration_after_0_4_14.ts
@@ -1,16 +1,15 @@
 import { twipsToLines, pixelsToTwips } from '@converter/helpers.js';
+import type { Editor } from '../Editor.js';
 
 /**
  * This migration is necessary after 0.4.14 line change upgrades as we went from using pixels in
  * line spacing to unitless line spacing.
- *
- * @param {Editor} editor
  */
-export const migration_after_0_4_14 = (editor) => {
+export const migration_after_0_4_14 = (editor: Editor): boolean => {
   const { state } = editor;
   const { dispatch } = editor.view;
   const { tr } = state;
-  if (!dispatch) return;
+  if (!dispatch) return false;
 
   state.doc.descendants((node, pos) => {
     if (node.type.name === 'paragraph') {
diff --git a/packages/super-editor/src/core/super-converter/docx-helpers/document-rels.d.ts b/packages/super-editor/src/core/super-converter/docx-helpers/document-rels.d.ts
new file mode 100644
index 000000000..ac9f6eb78
--- /dev/null
+++ b/packages/super-editor/src/core/super-converter/docx-helpers/document-rels.d.ts
@@ -0,0 +1 @@
+export function insertNewRelationship(target: string, type: string, editor: unknown): string | null;
diff --git a/packages/super-editor/src/core/super-converter/helpers.d.ts b/packages/super-editor/src/core/super-converter/helpers.d.ts
index 406d0d134..b3b06fa13 100644
--- a/packages/super-editor/src/core/super-converter/helpers.d.ts
+++ b/packages/super-editor/src/core/super-converter/helpers.d.ts
@@ -41,6 +41,7 @@ export function getDocxHighlightKeywordFromHex(hexColor: any): any;
 export function normalizeHexColor(hex: any): any;
 export function isValidHexColor(color: any): boolean;
 export function rgbToHex(rgb: any): string;
+export function pointsToTwips(points: any): number;
 export function ptToTwips(pt: any): number;
 export function twipsToPt(twips: any): number;
 export function getLineHeightValueString(
@@ -66,4 +67,5 @@ export function hasSomeParentWithClass(element: any, classname: any): any;
 export function getTextIndentExportValue(indent: string | number): number;
 export function polygonUnitsToPixels(pu: any): number;
 export function pixelsToPolygonUnits(pixels: any): number;
+export function convertSizeToCSS(value: any, type: any): string | null;
 //# sourceMappingURL=helpers.d.ts.map
diff --git a/packages/super-editor/src/core/super-converter/section-properties.d.ts b/packages/super-editor/src/core/super-converter/section-properties.d.ts
new file mode 100644
index 000000000..cf052f295
--- /dev/null
+++ b/packages/super-editor/src/core/super-converter/section-properties.d.ts
@@ -0,0 +1,194 @@
+/**
+ * Type definitions for section-properties.js
+ * Provides type information for OOXML section property manipulation functions.
+ */
+
+/**
+ * Represents an OOXML element in JSON format.
+ * This is the standard structure used for OOXML XML elements converted to JSON.
+ */
+export interface OOXMLElement {
+  type: 'element';
+  name: string;
+  attributes?: Record<string, string | number>;
+  elements?: OOXMLElement[];
+}
+
+/**
+ * Section break type values from OOXML w:type specification.
+ */
+export type SectionType = 'continuous' | 'nextPage' | 'evenPage' | 'oddPage';
+
+/**
+ * Page orientation values.
+ */
+export type PageOrientation = 'portrait' | 'landscape';
+
+/**
+ * Page size information including dimensions and orientation.
+ */
+export interface PageSize {
+  width?: number;
+  height?: number;
+  orientation?: PageOrientation;
+}
+
+/**
+ * Column configuration for multi-column layout.
+ */
+export interface ColumnConfig {
+  count?: number;
+  gap?: number;
+}
+
+/**
+ * Page margin values in inches.
+ */
+export interface PageMargins {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+  header?: number;
+  footer?: number;
+  gutter?: number;
+}
+
+/**
+ * Margin update parameters in inches.
+ */
+export interface MarginUpdates {
+  topInches?: number;
+  rightInches?: number;
+  bottomInches?: number;
+  leftInches?: number;
+  headerInches?: number;
+  footerInches?: number;
+  gutterInches?: number;
+}
+
+/**
+ * Converter object with page styles.
+ * Used for updating document-level default margins.
+ */
+export interface Converter {
+  pageStyles?: {
+    pageMargins?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+      header?: number;
+      footer?: number;
+      gutter?: number;
+    };
+  };
+}
+
+/**
+ * Target for body-level margin updates.
+ */
+export interface BodyTarget {
+  type: 'body';
+  converter: Converter;
+}
+
+/**
+ * Target for section-level (sectPr) margin updates.
+ */
+export interface SectPrTarget {
+  type: 'sectPr';
+  sectPr: OOXMLElement;
+}
+
+/**
+ * Union type for margin update targets.
+ */
+export type MarginTarget = BodyTarget | SectPrTarget;
+
+/**
+ * Result of body-level margin update.
+ */
+export interface BodyUpdateResult {
+  kind: 'body';
+  pageMargins: PageMargins;
+}
+
+/**
+ * Result of sectPr-level margin update.
+ */
+export interface SectPrUpdateResult {
+  kind: 'sectPr';
+  sectPr: OOXMLElement;
+}
+
+/**
+ * Union type for margin update results.
+ */
+export type MarginUpdateResult = BodyUpdateResult | SectPrUpdateResult;
+
+/**
+ * Read section type from a sectPr node.
+ * Maps OOXML w:type values to our internal section break types.
+ *
+ * @param sectPr - The OOXML JSON for a <w:sectPr> element.
+ * @returns The section type, or undefined if not found or invalid.
+ */
+export function getSectPrType(sectPr: OOXMLElement | null | undefined): SectionType | undefined;
+
+/**
+ * Read page size and orientation from a sectPr node.
+ * Returns dimensions in inches and orientation string.
+ *
+ * @param sectPr - The OOXML JSON for a <w:sectPr> element.
+ * @returns Page size information, or undefined if not found.
+ */
+export function getSectPrPageSize(sectPr: OOXMLElement | null | undefined): PageSize | undefined;
+
+/**
+ * Read column configuration from a sectPr node.
+ * Maps OOXML w:cols element to our internal column structure.
+ *
+ * @param sectPr - The OOXML JSON for a <w:sectPr> element.
+ * @returns Column configuration, or undefined if not found.
+ */
+export function getSectPrColumns(sectPr: OOXMLElement | null | undefined): ColumnConfig | undefined;
+
+/**
+ * Read page margin values from a sectPr node (in inches).
+ * Returns only margins present on the node; missing values are omitted.
+ *
+ * @param sectPr - The OOXML JSON for a <w:sectPr> element.
+ * @returns Page margins object (empty if no margins found).
+ */
+export function getSectPrMargins(sectPr: OOXMLElement | null | undefined): PageMargins;
+
+/**
+ * Update header/footer and/or other page margins on a given <w:sectPr>.
+ * Values are specified in inches; underlying OOXML is stored in twips.
+ * Mutates the sectPr node in place.
+ *
+ * @param sectPr - The OOXML JSON for a <w:sectPr> element.
+ * @param updates - Margin updates in inches.
+ * @returns The mutated sectPr node (same reference).
+ * @throws Error if sectPr is invalid or missing.
+ */
+export function updateSectPrMargins(sectPr: OOXMLElement, updates?: MarginUpdates): OOXMLElement;
+
+/**
+ * Unified API to update section margins, targeting either the document body defaults
+ * (via converter.pageStyles.pageMargins) or a specific paragraph-level sectPr JSON node.
+ *
+ * - Body target: { type: 'body', converter }
+ *   Updates converter.pageStyles.pageMargins.{header/footer/...} in inches.
+ *   Export will reflect changes through ensureSectionLayoutDefaults.
+ *
+ * - SectPr target: { type: 'sectPr', sectPr }
+ *   Mutates the provided sectPr JSON (pass-through on export) setting margins in twips.
+ *
+ * @param target - Update target descriptor (body or sectPr).
+ * @param updates - Margin updates in inches.
+ * @returns A summary of what was updated.
+ * @throws Error if target is invalid or missing required properties.
+ */
+export function updateSectionMargins(target: MarginTarget, updates?: MarginUpdates): MarginUpdateResult;
diff --git a/packages/super-editor/src/core/super-converter/styles.d.ts b/packages/super-editor/src/core/super-converter/styles.d.ts
index 6cd29a269..7359d6b30 100644
--- a/packages/super-editor/src/core/super-converter/styles.d.ts
+++ b/packages/super-editor/src/core/super-converter/styles.d.ts
@@ -1,55 +1,87 @@
+export interface NumberingProperties {
+  numId?: number;
+  ilvl?: number;
+  [key: string]: unknown;
+}
+
+export interface ParagraphProperties extends Record<string, unknown> {
+  numberingProperties?: NumberingProperties;
+  indent?: Record<string, unknown>;
+  framePr?: { dropCap?: unknown; [key: string]: unknown };
+  runProperties?: Record<string, unknown>;
+  styleId?: string;
+}
+
+export type RunProperties = Record<string, unknown>;
+export function combineRunProperties(propertiesArray: RunProperties[]): RunProperties;
+
 /**
  * Resolves paragraph properties from styles chain
  */
 export function resolveParagraphProperties(
-  params: unknown,
-  inlineProps: unknown,
+  params: Record<string, unknown>,
+  inlineProps: ParagraphProperties | Record<string, unknown>,
   insideTable?: boolean,
   overrideInlineStyleId?: boolean,
   tableStyleId?: string | null,
-): unknown;
+): ParagraphProperties;
 
 /**
  * Gets default properties for a translator
  */
-export function getDefaultProperties(params: unknown, translator: unknown): unknown;
+export function getDefaultProperties(params: Record<string, unknown>, translator: unknown): Record<string, unknown>;
 
 /**
  * Gets style properties by style ID
  */
 export function getStyleProperties(
-  params: unknown,
+  params: Record<string, unknown>,
   styleId: string,
   translator: unknown,
-): { properties: unknown; isDefault: boolean };
+): { properties: Record<string, unknown>; isDefault: boolean };
 
 /**
  * Gets numbering properties
  */
 export function getNumberingProperties(
-  params: unknown,
+  params: Record<string, unknown>,
   ilvl: number,
   numId: number,
   translator: unknown,
   tries?: number,
-): unknown;
+): Record<string, unknown>;
 
 /**
  * Encodes marks from run properties
  */
-export function encodeMarksFromRPr(runProperties: unknown, docx: unknown): unknown;
+export function encodeMarksFromRPr(runProperties: RunProperties, docx: unknown): unknown;
 
 /**
  * Encodes CSS from paragraph properties
  */
-export function encodeCSSFromPPr(paragraphProperties: unknown): unknown;
+export function encodeCSSFromPPr(
+  paragraphProperties: ParagraphProperties,
+  hasPreviousParagraph?: boolean,
+  nextParagraphProps?: ParagraphProperties | null,
+): Record<string, string>;
 
 /**
  * Encodes CSS from run properties
  */
-export function encodeCSSFromRPr(runProperties: unknown, docx: unknown): unknown;
+export function encodeCSSFromRPr(runProperties: RunProperties, docx: unknown): Record<string, string>;
 
 /**
  * Decodes run properties from marks
  */
-export function decodeRPrFromMarks(marks: unknown): unknown;
+export function decodeRPrFromMarks(marks: unknown): RunProperties;
+
+/**
+ * Resolves run properties
+ */
+export function resolveRunProperties(
+  params: Record<string, unknown>,
+  inlineRpr: RunProperties,
+  resolvedPpr: ParagraphProperties,
+  isListNumber?: boolean,
+  numberingDefinedInline?: boolean,
+): RunProperties;
diff --git a/packages/super-editor/src/core/super-converter/v3/handlers/index.js b/packages/super-editor/src/core/super-converter/v3/handlers/index.js
index b20cd9b55..ed9626f21 100644
--- a/packages/super-editor/src/core/super-converter/v3/handlers/index.js
+++ b/packages/super-editor/src/core/super-converter/v3/handlers/index.js
@@ -305,7 +305,7 @@ const translatorList = Array.from(
 
 const additionalHandlers = Object.freeze(
   translatorList.reduce((acc, translator) => {
-    const key = translator?.xmlName;
+    const key = /** @type {any} */ (translator)?.xmlName;
     if (!key) return acc;
     acc[key] = translator;
     return acc;
diff --git a/packages/super-editor/src/core/super-converter/v3/handlers/w/r/r-translator.js b/packages/super-editor/src/core/super-converter/v3/handlers/w/r/r-translator.js
index 0013ed486..ed96ce809 100644
--- a/packages/super-editor/src/core/super-converter/v3/handlers/w/r/r-translator.js
+++ b/packages/super-editor/src/core/super-converter/v3/handlers/w/r/r-translator.js
@@ -1,4 +1,3 @@
-// @ts-check
 import { NodeTranslator } from '@translator';
 import { translateChildNodes } from '../../../../v2/exporter/helpers/index.js';
 import { cloneMark, cloneXmlNode, applyRunPropertiesTemplate, resolveFontFamily } from './helpers/helpers.js';
diff --git a/packages/super-editor/src/core/super-validator/index.js b/packages/super-editor/src/core/super-validator/index.ts
similarity index 57%
rename from packages/super-editor/src/core/super-validator/index.js
rename to packages/super-editor/src/core/super-validator/index.ts
index e803390eb..9b65645b3 100644
--- a/packages/super-editor/src/core/super-validator/index.js
+++ b/packages/super-editor/src/core/super-validator/index.ts
@@ -1,2 +1,2 @@
-// @ts-check
 export * from './super-validator.js';
+export * from './types.js';
diff --git a/packages/super-editor/src/core/super-validator/logger/index.js b/packages/super-editor/src/core/super-validator/logger/index.ts
similarity index 69%
rename from packages/super-editor/src/core/super-validator/logger/index.js
rename to packages/super-editor/src/core/super-validator/logger/index.ts
index fbf0e3d93..3bb73efba 100644
--- a/packages/super-editor/src/core/super-validator/logger/index.js
+++ b/packages/super-editor/src/core/super-validator/logger/index.ts
@@ -1,2 +1 @@
-// @ts-check
 export * from './logger.js';
diff --git a/packages/super-editor/src/core/super-validator/logger/logger.js b/packages/super-editor/src/core/super-validator/logger/logger.ts
similarity index 61%
rename from packages/super-editor/src/core/super-validator/logger/logger.js
rename to packages/super-editor/src/core/super-validator/logger/logger.ts
index 2a8570175..dcad103dc 100644
--- a/packages/super-editor/src/core/super-validator/logger/logger.js
+++ b/packages/super-editor/src/core/super-validator/logger/logger.ts
@@ -1,12 +1,9 @@
-// @ts-check
+import type { ValidatorLogger } from '../types.js';
 
 /**
  * Create special debug logger for SuperValidator and validators.
- * @param {boolean} debug
- * @param {string[]} [additionalPrefixes]
- * @returns {import('../types.js').ValidatorLogger}
  */
-export function createLogger(debug, additionalPrefixes = []) {
+export function createLogger(debug: boolean, additionalPrefixes: string[] = []): ValidatorLogger {
   const basePrefix = '[SuperValidator]';
   const style = 'color: teal; font-weight: bold;';
 
@@ -15,11 +12,11 @@ export function createLogger(debug, additionalPrefixes = []) {
   const styledPrefixes = allPrefixes.map((p) => [style, p]).flat();
 
   return {
-    debug: (...args) => {
+    debug: (...args: unknown[]): void => {
       if (!debug) return;
       console.debug(format, ...styledPrefixes, ...args);
     },
 
-    withPrefix: (prefix) => createLogger(debug, [...additionalPrefixes, prefix]),
+    withPrefix: (prefix: string): ValidatorLogger => createLogger(debug, [...additionalPrefixes, prefix]),
   };
 }
diff --git a/packages/super-editor/src/core/super-validator/super-validator.js b/packages/super-editor/src/core/super-validator/super-validator.ts
similarity index 56%
rename from packages/super-editor/src/core/super-validator/super-validator.js
rename to packages/super-editor/src/core/super-validator/super-validator.ts
index fd449c226..8476ecc8a 100644
--- a/packages/super-editor/src/core/super-validator/super-validator.js
+++ b/packages/super-editor/src/core/super-validator/super-validator.ts
@@ -1,45 +1,30 @@
-// @ts-check
 import { createLogger } from './logger/logger.js';
 import { StateValidators } from './validators/state/index.js';
 import { XmlValidators } from './validators/xml/index.js';
-
-/**
- * @typedef {import('./types.js').ElementInfo} ElementInfo
- * @typedef {import('./types.js').DocumentAnalysis} DocumentAnalysis
- * @typedef {import('./types.js').ValidatorFunction} ValidatorFunction
- * @typedef {import('./types.js').ValidatorRequirements} ValidatorRequirements
- * @typedef {import('./types.js').SuperValidatorOptions} SuperValidatorOptions
- * @typedef {import('./types.js').Editor} Editor
- * @typedef {import('./types.js').ValidatorLogger} ValidatorLogger
- * @typedef {import('./types.js').StateValidator} StateValidator
- * @typedef {import('prosemirror-model').Mark} Mark
- * @typedef {import('prosemirror-model').Node} Node
- */
+import type {
+  DocumentAnalysis,
+  ValidatorFunction,
+  SuperValidatorOptions,
+  ValidatorLogger,
+  ValidationResult,
+} from './types.js';
+import type { Editor } from '../Editor.js';
+import type { Mark, Node } from 'prosemirror-model';
 
 /**
  * Main class for validating XML documents in the Super Editor.
  */
 export class SuperValidator {
-  /** @type {Editor} */
-  #editor;
-
-  /** @type {any} */
-  #stateValidators;
-
-  /** @type {any} */
-  #xmlValidators;
-
-  /** @type {Set<string>} */
-  #requiredNodeTypes;
-
-  /** @type {Set<string>} */
-  #requiredMarkTypes;
-
-  /**
-   * Create a SuperValidator instance.
-   * @param {SuperValidatorOptions} options - Options for the validator.
-   */
-  constructor(options) {
+  #editor: Editor;
+  #stateValidators: Record<string, ValidatorFunction>;
+  #xmlValidators: Record<string, () => ValidationResult>;
+  #requiredNodeTypes: Set<string>;
+  #requiredMarkTypes: Set<string>;
+  dryRun: boolean;
+  debug: boolean;
+  logger: ValidatorLogger;
+
+  constructor(options: SuperValidatorOptions) {
     this.#editor = options.editor;
     this.dryRun = options.dryRun || false;
     this.debug = options.debug || false;
@@ -57,15 +42,26 @@ export class SuperValidator {
    * Initialize all validators and collect their element requirements
    * @returns {{ stateValidators: Record<string, ValidatorFunction>, xmlValidators: Record<string, ValidatorFunction>, nodeTypes: Set<string>, markTypes: Set<string> }}
    */
-  #initializeValidators() {
-    const requiredNodes = new Set();
-    const requiredMarks = new Set();
-
-    const initializeValidatorSet = (validatorFactories) => {
+  #initializeValidators(): {
+    stateValidators: Record<string, ValidatorFunction>;
+    xmlValidators: Record<string, () => ValidationResult>;
+    nodeTypes: Set<string>;
+    markTypes: Set<string>;
+  } {
+    const requiredNodes = new Set<string>();
+    const requiredMarks = new Set<string>();
+
+    type ValidatorFactory = (params: {
+      editor: Editor;
+      logger: ValidatorLogger;
+    }) => ValidatorFunction | (() => ValidationResult);
+
+    const initializeValidatorSet = (
+      validatorFactories: Record<string, ValidatorFactory>,
+    ): Record<string, ValidatorFunction | (() => ValidationResult)> => {
       return Object.fromEntries(
         Object.entries(validatorFactories).map(([key, factory]) => {
           const validatorLogger = this.logger.withPrefix(key);
-          /** @type {ValidatorFunction} */
           const validator = factory({ editor: this.#editor, logger: validatorLogger });
 
           // Collect requirements from this validator
@@ -76,12 +72,12 @@ export class SuperValidator {
       );
     };
 
-    const stateValidators = initializeValidatorSet(StateValidators);
-    const xmlValidators = initializeValidatorSet(XmlValidators);
+    const stateValidators = initializeValidatorSet(StateValidators as unknown as Record<string, ValidatorFactory>);
+    const xmlValidators = initializeValidatorSet(XmlValidators as unknown as Record<string, ValidatorFactory>);
 
     return {
-      stateValidators: stateValidators,
-      xmlValidators: xmlValidators,
+      stateValidators: stateValidators as Record<string, ValidatorFunction>,
+      xmlValidators: xmlValidators as Record<string, () => ValidationResult>,
       nodeTypes: requiredNodes,
       markTypes: requiredMarks,
     };
@@ -89,21 +85,24 @@ export class SuperValidator {
 
   /**
    * Extract and collect requirements from a validator
-   * @param {ValidatorFunction} validator
-   * @param {Set<string>} requiredNodes
-   * @param {Set<string>} requiredMarks
    */
-  #collectValidatorRequirements(validator, requiredNodes, requiredMarks) {
-    if (!validator.requiredElements) return;
-
-    if (typeof validator.requiredElements === 'object') {
-      if (validator.requiredElements.nodes) {
-        validator.requiredElements.nodes.forEach((nodeType) => {
+  #collectValidatorRequirements(
+    validator: ValidatorFunction | (() => ValidationResult),
+    requiredNodes: Set<string>,
+    requiredMarks: Set<string>,
+  ): void {
+    const validatorWithReqs = validator as ValidatorFunction;
+    if (!validatorWithReqs.requiredElements) return;
+
+    const requirements = validatorWithReqs.requiredElements;
+    if (typeof requirements === 'object' && requirements !== null) {
+      if (requirements.nodes && Array.isArray(requirements.nodes)) {
+        requirements.nodes.forEach((nodeType) => {
           requiredNodes.add(nodeType);
         });
       }
-      if (validator.requiredElements.marks) {
-        validator.requiredElements.marks.forEach((markType) => {
+      if (requirements.marks && Array.isArray(requirements.marks)) {
+        requirements.marks.forEach((markType) => {
           requiredMarks.add(markType);
         });
       }
@@ -112,35 +111,36 @@ export class SuperValidator {
 
   /**
    * Analyze the document to collect all required elements
-   * @returns {DocumentAnalysis}
    */
-  #analyzeDocument() {
+  #analyzeDocument(): DocumentAnalysis {
     const { doc } = this.#editor.state;
 
-    /** @type {DocumentAnalysis} */
-    const analysis = {};
+    const analysis: DocumentAnalysis = {};
 
     // Initialize arrays for required element types
-    this.#requiredNodeTypes.forEach((type) => (analysis[type] = []));
-    this.#requiredMarkTypes.forEach((type) => (analysis[type] = []));
-
-    /**
-     * @param {Node} node
-     * @param {number} pos
-     */
-    const collectElements = (node, pos) => {
+    this.#requiredNodeTypes.forEach((type) => {
+      analysis[type] = [];
+    });
+    this.#requiredMarkTypes.forEach((type) => {
+      analysis[type] = [];
+    });
+
+    const collectElements = (node: Node, pos: number): void => {
       // Collect nodes by type
       if (this.#requiredNodeTypes.has(node.type.name)) {
-        analysis[node.type.name].push({ node, pos });
+        const arr = analysis[node.type.name];
+        if (arr) {
+          arr.push({ node, pos });
+        }
       }
 
       // Collect marks from text nodes
       if (node.isText && node.marks) {
-        node.marks.forEach(
-          /** @param {Mark} mark */
-          (mark) => {
-            if (this.#requiredMarkTypes.has(mark.type.name)) {
-              analysis[mark.type.name].push({
+        node.marks.forEach((mark: Mark) => {
+          if (this.#requiredMarkTypes.has(mark.type.name)) {
+            const arr = analysis[mark.type.name];
+            if (arr) {
+              arr.push({
                 mark,
                 node,
                 pos,
@@ -148,8 +148,8 @@ export class SuperValidator {
                 to: pos + node.nodeSize,
               });
             }
-          },
-        );
+          }
+        });
       }
     };
 
@@ -159,9 +159,8 @@ export class SuperValidator {
 
   /**
    * Validate the active document in the editor. Triggered automatically on editor initialization.
-   * @returns {{ modified: boolean, results: Array<{ key: string, results: string[] }> }}
    */
-  validateActiveDocument() {
+  validateActiveDocument(): { modified: boolean; results: Array<{ key: string; results: string[] }> } {
     const state = this.#editor.state;
     if (!state) return { modified: false, results: [] };
 
@@ -171,11 +170,11 @@ export class SuperValidator {
     this.logger.debug('Document analysis:', documentAnalysis);
 
     let hasModifiedDocument = false;
-    const validationResults = [];
+    const validationResults: Array<{ key: string; results: string[] }> = [];
     Object.entries(this.#stateValidators).forEach(([key, validator]) => {
       this.logger.debug(`🕵 Validating with ${key}...`);
 
-      const { results, modified } = validator(tr, documentAnalysis);
+      const { results, modified } = (validator as ValidatorFunction)(tr, documentAnalysis);
       validationResults.push({ key, results });
 
       hasModifiedDocument = hasModifiedDocument || modified;
@@ -193,21 +192,20 @@ export class SuperValidator {
 
   /**
    * Validate the exported document in the editor. Triggered automatically on editor export.
-   * @returns {{ modified: boolean, results: Array<{ key: string, results: string[] }> }}
    */
-  validateDocumentExport() {
+  validateDocumentExport(): { modified: boolean; results: Array<{ key: string; results: string[] }> } {
     const state = this.#editor.state;
     if (!state) return { modified: false, results: [] };
     const { tr } = state;
 
     let hasModifiedDocument = false;
-    const validationResults = [];
+    const validationResults: Array<{ key: string; results: string[] }> = [];
 
     // Run XML validators
     Object.entries(this.#xmlValidators).forEach(([key, validator]) => {
       this.logger.debug(`🕵 Validating export with ${key}...`);
 
-      const { results, modified } = validator();
+      const { results, modified } = (validator as () => ValidationResult)();
       validationResults.push({ key, results });
 
       hasModifiedDocument = hasModifiedDocument || modified;
@@ -225,9 +223,8 @@ export class SuperValidator {
 
   /**
    * Dispatch a transaction using the editor's public API if available, or fall back to the view.
-   * @param {import('prosemirror-state').Transaction} tr
    */
-  #dispatchWithFallback(tr) {
+  #dispatchWithFallback(tr: import('prosemirror-state').Transaction): void {
     if (typeof this.#editor?.dispatch === 'function') {
       this.#editor.dispatch(tr);
       return;
diff --git a/packages/super-editor/src/core/super-validator/types.js b/packages/super-editor/src/core/super-validator/types.js
deleted file mode 100644
index 2fec90614..000000000
--- a/packages/super-editor/src/core/super-validator/types.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/** @typedef {import('../Editor.js').Editor} Editor */
-
-/**
- * @typedef {Object} SuperValidatorOptions
- * @property {Editor} editor The editor instance to validate.
- * @property {boolean} [dryRun=false] If true, the validator will not modify the document.
- * @property {boolean} [debug=false] If true, debug information will be logged to the console.
- */
-
-/**
- * @typedef {Object} ValidatorLogger
- * @property {function(string, ...any): void} debug - Function to log debug messages.
- * @property {function(string): ValidatorLogger} withPrefix - Function to create a new logger with an additional prefix.
- */
-
-/**
- * @typedef {function} StateValidator
- * @param {Editor} editor - The editor instance to validate.
- * @param {ValidatorLogger} logger - Logger for validation messages.
- * @returns {{ modified: boolean, results: string[] }} - Validation results and whether the document was modified.
- */
-
-/**
- * @typedef {function} XmlValidator
- * @param {Editor} editor - The editor instance to validate.
- * @param {ValidatorLogger} logger - Logger for validation messages.
- * @returns {{ modified: boolean, results: string[] }} - Validation results and whether the document was modified.
- */
-
-/**
- * @typedef {Object} ElementInfo
- * @property {import('prosemirror-model').Node} [node]
- * @property {number} pos
- * @property {number} [from] - For marks
- * @property {number} [to] - For marks
- * @property {import('prosemirror-model').Mark} [mark] - For marks
- */
-
-/**
- * @typedef {Record<string, ElementInfo[]>} DocumentAnalysis
- * @property {import('prosemirror-model').Node} node - The ProseMirror node.
- * @property {number} pos - The position of the node in the document.
- * @property {number} [from] - The start position for marks.
- * @property {number} [to] - The end position for marks.
- * @property {import('prosemirror-model').Mark} [mark] - The ProseMirror mark, if applicable.
- */
-
-/**
- * @typedef {Object} ValidatorRequirements
- * @property {string[]} [nodes] - Node types this validator needs
- * @property {string[]} [marks] - Mark types this validator needs
- */
-
-/** @typedef {function(import('prosemirror-state').Transaction, DocumentAnalysis): { modified: boolean, results: string[] }} ValidatorFn */
-
-/** @typedef {ValidatorFn & { requiredElements?: ValidatorRequirements }} ValidatorFunction */
-
-/** @typedef {Record<string, ElementInfo[]>} DocumentAnalysis */
-
-export {};
diff --git a/packages/super-editor/src/core/super-validator/types.ts b/packages/super-editor/src/core/super-validator/types.ts
new file mode 100644
index 000000000..6638e07cd
--- /dev/null
+++ b/packages/super-editor/src/core/super-validator/types.ts
@@ -0,0 +1,42 @@
+import type { Editor } from '../Editor.js';
+import type { Node, Mark } from 'prosemirror-model';
+import type { Transaction } from 'prosemirror-state';
+
+export interface SuperValidatorOptions {
+  editor: Editor;
+  dryRun?: boolean;
+  debug?: boolean;
+}
+
+export interface ValidatorLogger {
+  debug: (...args: unknown[]) => void;
+  withPrefix: (prefix: string) => ValidatorLogger;
+}
+
+export interface ValidationResult {
+  modified: boolean;
+  results: string[];
+}
+
+export type StateValidator = (editor: Editor, logger: ValidatorLogger) => ValidationResult;
+
+export type XmlValidator = (editor: Editor, logger: ValidatorLogger) => ValidationResult;
+
+export interface ElementInfo {
+  node?: Node;
+  pos: number;
+  from?: number;
+  to?: number;
+  mark?: Mark;
+}
+
+export type DocumentAnalysis = Record<string, ElementInfo[]>;
+
+export interface ValidatorRequirements {
+  nodes?: string[];
+  marks?: string[];
+}
+
+export type ValidatorFn = (tr: Transaction, analysis: DocumentAnalysis) => ValidationResult;
+
+export type ValidatorFunction = ValidatorFn & { requiredElements?: ValidatorRequirements };
diff --git a/packages/super-editor/src/core/super-validator/validators/state/index.js b/packages/super-editor/src/core/super-validator/validators/state/index.js
deleted file mode 100644
index c52b21b46..000000000
--- a/packages/super-editor/src/core/super-validator/validators/state/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// @ts-check
-import { createImageNodeValidator } from './nodes/image/image-validator.js';
-import { createLinkMarkValidator } from './nodes/link/link-validator.js';
-
-/**
- * @typedef {Object} StateValidators
- * @property {import('../../types.js').StateValidator} imageNodeValidator - Validator for image nodes.
- * @property {import('../../types.js').StateValidator} linkMarkValidator - Validator for link marks.
- */
-export const StateValidators = {
-  imageNodeValidator: createImageNodeValidator,
-  linkMarkValidator: createLinkMarkValidator,
-};
diff --git a/packages/super-editor/src/core/super-validator/validators/state/index.ts b/packages/super-editor/src/core/super-validator/validators/state/index.ts
new file mode 100644
index 000000000..169dcc953
--- /dev/null
+++ b/packages/super-editor/src/core/super-validator/validators/state/index.ts
@@ -0,0 +1,15 @@
+import { createImageNodeValidator } from './nodes/image/image-validator.js';
+import { createLinkMarkValidator } from './nodes/link/link-validator.js';
+import type { ValidatorFunction } from '../../types.js';
+import type { Editor } from '@core/Editor.js';
+import type { ValidatorLogger } from '../../types.js';
+
+interface StateValidatorsType {
+  imageNodeValidator: (params: { editor: Editor; logger: ValidatorLogger }) => ValidatorFunction;
+  linkMarkValidator: (params: { editor: Editor; logger: ValidatorLogger }) => ValidatorFunction;
+}
+
+export const StateValidators: StateValidatorsType = {
+  imageNodeValidator: createImageNodeValidator,
+  linkMarkValidator: createLinkMarkValidator,
+};
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.js
deleted file mode 100644
index 1f103ba35..000000000
--- a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @ts-check
-import { ensureValidImageRID } from './rules/index.js';
-
-/**
- * @typedef {import('prosemirror-model').Node} Node
- * @typedef {import('prosemirror-state').Transaction} Transaction
- * @typedef {import('../../../../types.js').ValidatorLogger} ValidatorLogger
- * @typedef {import('../../../../types.js').Editor} Editor
- * @typedef {import('../../../../types.js').ValidatorFunction} ValidatorFunction
- * @typedef {import('../../../../types.js').ElementInfo} ElementInfo
- */
-
-/**
- * Image node validations
- *
- * 1. Ensure that every image node has a valid rId attribute.
- *
- * @param {{ editor: Editor, logger: ValidatorLogger }} ctx
- * @returns {ValidatorFunction}
- */
-export function createImageNodeValidator({ editor, logger }) {
-  /** @type {ValidatorFunction} */
-  const validator = (tr, analysis) => {
-    const images = analysis.image || [];
-
-    const ruleResults = [ensureValidImageRID(images, editor, tr, logger)];
-
-    const modified = ruleResults.some((r) => r.modified);
-    const results = ruleResults.flatMap((r) => r.results);
-
-    return { modified, results };
-  };
-
-  // Define the required elements for this validator
-  validator.requiredElements = {
-    nodes: ['image'],
-  };
-
-  return validator;
-}
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.ts b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.ts
new file mode 100644
index 000000000..c22f625fe
--- /dev/null
+++ b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/image-validator.ts
@@ -0,0 +1,35 @@
+import { ensureValidImageRID } from './rules/index.js';
+import type { Transaction } from 'prosemirror-state';
+import type { ValidatorLogger, ValidatorFunction, DocumentAnalysis } from '../../../../types.js';
+import type { Editor } from '@core/Editor.js';
+
+/**
+ * Image node validations
+ *
+ * 1. Ensure that every image node has a valid rId attribute.
+ */
+export function createImageNodeValidator({
+  editor,
+  logger,
+}: {
+  editor: Editor;
+  logger: ValidatorLogger;
+}): ValidatorFunction {
+  const validator: ValidatorFunction = (tr: Transaction, analysis: DocumentAnalysis) => {
+    const images = analysis.image || [];
+
+    const ruleResults = [ensureValidImageRID(images, editor, tr, logger)];
+
+    const modified = ruleResults.some((r) => r.modified);
+    const results = ruleResults.flatMap((r) => r.results);
+
+    return { modified, results };
+  };
+
+  // Define the required elements for this validator
+  validator.requiredElements = {
+    nodes: ['image'],
+  };
+
+  return validator;
+}
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/index.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/index.ts
similarity index 100%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/image/index.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/image/index.ts
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.ts
similarity index 60%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.ts
index b461b6f08..19969173c 100644
--- a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.js
+++ b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/image-rid.ts
@@ -1,25 +1,21 @@
-// @ts-check
-
-/**
- * @typedef {import('prosemirror-state').Transaction} Transaction
- * @typedef {import('../../../../../types.js').ValidatorLogger} ValidatorLogger
- * @typedef {import('../../../../../types.js').Editor} Editor
- * @typedef {import('../../../../../types.js').ElementInfo} ElementInfo
- */
+import type { Transaction } from 'prosemirror-state';
+import type { ValidatorLogger, ElementInfo } from '../../../../../types.js';
+import type { Editor } from '@core/Editor.js';
 
 /**
  * Ensure all image nodes have a valid rId attribute.
- * @param {ElementInfo[]} images
- * @param {Editor} editor
- * @param {Transaction} tr
- * @param {ValidatorLogger} logger
- * @returns {{ modified: boolean, results: string[] }}
  */
-export function ensureValidImageRID(images, editor, tr, logger) {
+export function ensureValidImageRID(
+  images: ElementInfo[],
+  editor: Editor,
+  tr: Transaction,
+  logger: ValidatorLogger,
+): { modified: boolean; results: string[] } {
   let modified = false;
-  const results = [];
+  const results: string[] = [];
 
   images.forEach(({ node, pos }) => {
+    if (!node) return;
     const { rId, src } = node.attrs;
     if (!rId && src) {
       let newId = editor.converter.docxHelpers.findRelationshipIdFromTarget(src, editor);
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/index.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/index.ts
similarity index 100%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/index.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/image/rules/index.ts
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/index.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/index.ts
similarity index 100%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/link/index.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/link/index.ts
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.js
deleted file mode 100644
index 9e60f17bc..000000000
--- a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// @ts-check
-import { ensureValidLinkRID } from './rules/index.js';
-
-/**
- * @typedef {import('prosemirror-state').Transaction} Transaction
- * @typedef {import('../../../../types.js').ValidatorLogger} ValidatorLogger
- * @typedef {import('../../../../types.js').Editor} Editor
- * @typedef {import('../../../../types.js').ValidatorFunction} ValidatorFunction
- * @typedef {import('../../../../types.js').ElementInfo} ElementInfo
- */
-
-/**
- * Link mark validations
- *
- * 1. Ensure that every link mark has a valid rId attribute.
- *
- * @param {{ editor: Editor, logger: ValidatorLogger }} ctx
- * @returns {ValidatorFunction}
- */
-export function createLinkMarkValidator({ editor, logger }) {
-  /** @type {ValidatorFunction} */
-  const validator = (tr, analysis) => {
-    const links = analysis.link || [];
-
-    const ruleResults = [ensureValidLinkRID(links, editor, tr, logger)];
-
-    const modified = ruleResults.some((r) => r.modified);
-    const results = ruleResults.flatMap((r) => r.results);
-
-    return { modified, results };
-  };
-
-  // Define the required elements for this validator
-  validator.requiredElements = {
-    marks: ['link'],
-  };
-
-  return validator;
-}
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.ts b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.ts
new file mode 100644
index 000000000..9eda31143
--- /dev/null
+++ b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/link-validator.ts
@@ -0,0 +1,35 @@
+import { ensureValidLinkRID } from './rules/index.js';
+import type { Transaction } from 'prosemirror-state';
+import type { ValidatorLogger, ValidatorFunction, DocumentAnalysis } from '../../../../types.js';
+import type { Editor } from '@core/Editor.js';
+
+/**
+ * Link mark validations
+ *
+ * 1. Ensure that every link mark has a valid rId attribute.
+ */
+export function createLinkMarkValidator({
+  editor,
+  logger,
+}: {
+  editor: Editor;
+  logger: ValidatorLogger;
+}): ValidatorFunction {
+  const validator: ValidatorFunction = (tr: Transaction, analysis: DocumentAnalysis) => {
+    const links = analysis.link || [];
+
+    const ruleResults = [ensureValidLinkRID(links, editor, tr, logger)];
+
+    const modified = ruleResults.some((r) => r.modified);
+    const results = ruleResults.flatMap((r) => r.results);
+
+    return { modified, results };
+  };
+
+  // Define the required elements for this validator
+  validator.requiredElements = {
+    marks: ['link'],
+  };
+
+  return validator;
+}
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/index.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/index.ts
similarity index 100%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/index.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/index.ts
diff --git a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.js b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.ts
similarity index 64%
rename from packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.js
rename to packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.ts
index 7b392a035..e6357c302 100644
--- a/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.js
+++ b/packages/super-editor/src/core/super-validator/validators/state/nodes/link/rules/link-rid.ts
@@ -1,26 +1,21 @@
-// @ts-check
-
-/**
- * @typedef {import('prosemirror-state').Transaction} Transaction
- * @typedef {import('../../../../../types.js').ValidatorLogger} ValidatorLogger
- * @typedef {import('../../../../../types.js').Editor} Editor
- * @typedef {import('../../../../../types.js').ValidatorFunction} ValidatorFunction
- * @typedef {import('../../../../../types.js').ElementInfo} ElementInfo
- */
+import type { Transaction } from 'prosemirror-state';
+import type { ValidatorLogger, ElementInfo } from '../../../../../types.js';
+import type { Editor } from '@core/Editor.js';
 
 /**
  * Ensure all link marks have a valid rId attribute.
- * @param {ElementInfo[]} links
- * @param {Editor} editor
- * @param {Transaction} tr
- * @param {ValidatorLogger} logger
- * @returns {{ modified: boolean, results: string[] }}
  */
-export function ensureValidLinkRID(links, editor, tr, logger) {
+export function ensureValidLinkRID(
+  links: ElementInfo[],
+  editor: Editor,
+  tr: Transaction,
+  logger: ValidatorLogger,
+): { modified: boolean; results: string[] } {
   let modified = false;
-  const results = [];
+  const results: string[] = [];
 
   links.forEach(({ mark, from, to }) => {
+    if (!mark || from === undefined || to === undefined) return;
     const { rId, href, anchor } = mark.attrs;
 
     if (!rId && href && !anchor) {
diff --git a/packages/super-editor/src/core/super-validator/validators/xml/index.js b/packages/super-editor/src/core/super-validator/validators/xml/index.js
deleted file mode 100644
index cb4180d1b..000000000
--- a/packages/super-editor/src/core/super-validator/validators/xml/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// @ts-check
-import { createNumberingValidator } from './numbering/numbering-validator.js';
-import { createRelationshipsValidator } from './relationships/relationships-validator.js';
-
-/**
- * @typedef {Object} XmlValidator
- * @property {import('../../types.js').XmlValidator} numberingValidator - Validator for numbering.xml file.
- */
-export const XmlValidators = {
-  numberingValidator: createNumberingValidator,
-  relationshipsValidator: createRelationshipsValidator,
-};
diff --git a/packages/super-editor/src/core/super-validator/validators/xml/index.ts b/packages/super-editor/src/core/super-validator/validators/xml/index.ts
new file mode 100644
index 000000000..df03e3728
--- /dev/null
+++ b/packages/super-editor/src/core/super-validator/validators/xml/index.ts
@@ -0,0 +1,14 @@
+import { createNumberingValidator } from './numbering/numbering-validator.js';
+import { createRelationshipsValidator } from './relationships/relationships-validator.js';
+import type { Editor } from '../../../Editor.js';
+import type { ValidatorLogger, ValidationResult } from '../../types.js';
+
+interface XmlValidatorsType {
+  numberingValidator: (params: { editor: Editor; logger: ValidatorLogger }) => () => ValidationResult;
+  relationshipsValidator: (params: { editor: Editor; logger: ValidatorLogger }) => () => ValidationResult;
+}
+
+export const XmlValidators: XmlValidatorsType = {
+  numberingValidator: createNumberingValidator,
+  relationshipsValidator: createRelationshipsValidator,
+};
diff --git a/packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.js b/packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.ts
similarity index 71%
rename from packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.js
rename to packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.ts
index 7bd66e777..c8ebd942b 100644
--- a/packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.js
+++ b/packages/super-editor/src/core/super-validator/validators/xml/numbering/numbering-validator.ts
@@ -1,11 +1,22 @@
-// @ts-check
-/**
- * @typedef {import('../../../types.js').Editor} Editor
- * @typedef {import('../../../types.js').ValidatorLogger} ValidatorLogger
- */
-export function createNumberingValidator({ editor, logger }) {
+import type { Editor } from '@core/Editor.js';
+import type { ValidatorLogger, ValidationResult } from '../../../types.js';
+
+interface XmlElement {
+  type?: string;
+  name?: string;
+  attributes?: Record<string, unknown>;
+  elements?: XmlElement[];
+}
+
+export function createNumberingValidator({
+  editor,
+  logger,
+}: {
+  editor: Editor;
+  logger: ValidatorLogger;
+}): () => ValidationResult {
   return () => {
-    const results = [];
+    const results: string[] = [];
     let modified = false;
 
     const convertedXml = editor?.converter?.convertedXml;
@@ -17,8 +28,8 @@ export function createNumberingValidator({ editor, logger }) {
       return { results, modified };
     }
 
-    const removed = [];
-    let elements = numbering.elements[0];
+    const removed: string[] = [];
+    const elements = numbering.elements[0];
     pruneInvalidNumNodes(elements, removed);
 
     if (removed.length) {
@@ -31,16 +42,15 @@ export function createNumberingValidator({ editor, logger }) {
     return { results, modified };
   };
 }
+
 /**
  * Recursively walks an xml tree and removes <w:num> with bad numId.
  * Mutates the tree in place.
- * @param {any} node - xml node (expects .elements array for element nodes)
- * @param {string[]} removed - collects removed numId values
  */
-function pruneInvalidNumNodes(node, removed) {
+function pruneInvalidNumNodes(node: XmlElement, removed: string[]): void {
   if (!node || !Array.isArray(node.elements)) return;
 
-  const next = [];
+  const next: XmlElement[] = [];
   for (const el of node.elements) {
     if (el?.type === 'element') {
       if (el.name === 'w:num') {
diff --git a/packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.js b/packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.ts
similarity index 70%
rename from packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.js
rename to packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.ts
index a2955d980..65c3ced59 100644
--- a/packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.js
+++ b/packages/super-editor/src/core/super-validator/validators/xml/relationships/relationships-validator.ts
@@ -1,22 +1,36 @@
+import type { Editor } from '@core/Editor.js';
+import type { ValidatorLogger, ValidationResult } from '../../../types.js';
+
+interface XmlElement {
+  type?: string;
+  name?: string;
+  attributes?: Record<string, unknown>;
+  elements?: XmlElement[];
+}
+
+interface XmlTree {
+  elements?: XmlElement[];
+}
+
 /**
  * Creates a validator for Word document relationships (word/_rels/document.xml.rels)
  *
  * This validator ensures the relationships file is properly structured and contains
  * valid relationship entries that reference existing files and follow Word's conventions.
- *
- * @typedef {import('../../../types.js').Editor} Editor
- * @typedef {import('../../../types.js').ValidatorLogger} ValidatorLogger
- * @param {Object} params - Validator parameters
- * @param {Editor} params.editor - The editor instance containing the document
- * @param {ValidatorLogger} params.logger - Logger for validation messages
- * @returns {Function} Validator function that returns {results: string[], modified: boolean}
  */
-export function createRelationshipsValidator({ editor, logger }) {
+export function createRelationshipsValidator({
+  editor,
+  logger,
+}: {
+  editor: Editor;
+  logger: ValidatorLogger;
+}): () => ValidationResult {
   return () => {
-    const results = [];
+    const results: string[] = [];
     let modified = false;
 
-    const convertedXml = editor?.converter?.convertedXml;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const convertedXml = (editor as any)?.converter?.convertedXml as Record<string, unknown> | undefined;
     if (!convertedXml || typeof convertedXml !== 'object') {
       return { results, modified };
     }
@@ -65,7 +79,10 @@ export function createRelationshipsValidator({ editor, logger }) {
 /**
  * Finds the relationships file and normalizes its location to canonical path
  */
-function findAndNormalizeRelationshipsFile(convertedXml, results) {
+function findAndNormalizeRelationshipsFile(
+  convertedXml: Record<string, unknown>,
+  results: string[],
+): { relsKey: string | null; wasNormalized: boolean } {
   const candidateKeys = [
     'word/_rels/document.xml.rels',
     'word/document.xml.rels',
@@ -73,7 +90,10 @@ function findAndNormalizeRelationshipsFile(convertedXml, results) {
     'document.xml.rels',
   ];
 
-  const relsKey = candidateKeys.find((k) => convertedXml?.[k]?.elements);
+  const relsKey = candidateKeys.find((k) => {
+    const value = convertedXml?.[k];
+    return value && typeof value === 'object' && 'elements' in value;
+  });
   if (!relsKey) return { relsKey: null, wasNormalized: false };
 
   const canonicalKey = 'word/_rels/document.xml.rels';
@@ -90,8 +110,13 @@ function findAndNormalizeRelationshipsFile(convertedXml, results) {
 /**
  * Validates and fixes the relationships root element structure
  */
-function validateRelationshipsRoot(relsTree, relsKey, results) {
-  const root = relsTree?.elements?.[0];
+function validateRelationshipsRoot(
+  relsTree: unknown,
+  relsKey: string,
+  results: string[],
+): { root: XmlElement | null; wasFixed: boolean } {
+  const tree = relsTree as XmlTree;
+  const root = tree?.elements?.[0];
 
   if (!root || root.type !== 'element') {
     results.push(`${relsKey} is not a valid xml`);
@@ -120,7 +145,7 @@ function validateRelationshipsRoot(relsTree, relsKey, results) {
 /**
  * Cleans up root element children to ensure only valid Relationship elements
  */
-function cleanupRootChildren(root) {
+function cleanupRootChildren(root: XmlElement): boolean {
   const validChildren =
     root.elements?.filter((child) => child?.type === 'element' && child.name === 'Relationship') || [];
 
@@ -134,42 +159,51 @@ function cleanupRootChildren(root) {
 /**
  * Processes relationships and returns filtered IDs and media targets
  */
-function processRelationships(root, convertedXml, results) {
-  const binMediaTargets = new Set();
-  const filteredIds = new Set();
+function processRelationships(
+  root: XmlElement,
+  convertedXml: Record<string, unknown>,
+  results: string[],
+): { filteredIds: Set<string>; binMediaTargets: Set<string>; wasProcessed: boolean } {
+  const binMediaTargets = new Set<string>();
+  const filteredIds = new Set<string>();
   let wasProcessed = false;
 
-  const ridNum = (id) => {
+  const ridNum = (id: unknown): number | null => {
     const m = /^rId(\d+)$/.exec(String(id || ''));
     return m ? parseInt(m[1], 10) : null;
   };
 
-  const isType = (type, tail) => typeof type === 'string' && new RegExp(`/relationships/${tail}$`, 'i').test(type);
+  const isType = (type: unknown, tail: string): boolean =>
+    typeof type === 'string' && new RegExp(`/relationships/${tail}$`, 'i').test(type);
 
-  const isHyperlinkType = (type) => isType(type, 'hyperlink');
-  const isImageType = (type) => isType(type, 'image');
-  const looksExternal = (target) => /^https?:\/\//i.test(target || '') || /^mailto:/i.test(target || '');
+  const isHyperlinkType = (type: unknown): boolean => isType(type, 'hyperlink');
+  const isImageType = (type: unknown): boolean => isType(type, 'image');
+  const looksExternal = (target: unknown): boolean => {
+    const targetStr = String(target || '');
+    return /^https?:\/\//i.test(targetStr) || /^mailto:/i.test(targetStr);
+  };
 
-  const usedIds = new Set();
+  const usedIds = new Set<string>();
   let maxRid = 0;
 
+  if (!root.elements) root.elements = [];
   for (const el of root.elements) {
     el.attributes = el.attributes || {};
     const id = el.attributes.Id;
     const n = ridNum(id);
-    if (Number.isInteger(n)) maxRid = Math.max(maxRid, n);
+    if (Number.isInteger(n) && n !== null) maxRid = Math.max(maxRid, n);
     if (typeof id === 'string' && id) {
       usedIds.add(id);
     }
   }
 
   let ridCounter = maxRid;
-  const allocateId = (preferred) => {
+  const allocateId = (preferred: string | null): string => {
     if (preferred && !usedIds.has(preferred)) {
       usedIds.add(preferred);
       return preferred;
     }
-    let newId;
+    let newId: string;
     do {
       ridCounter += 1;
       newId = `rId${ridCounter}`;
@@ -178,18 +212,19 @@ function processRelationships(root, convertedXml, results) {
     return newId;
   };
 
-  const seenIds = new Set();
-  const filtered = [];
+  const seenIds = new Set<string>();
+  const filtered: XmlElement[] = [];
 
-  function extractStringAttr(attrs, key) {
-    return typeof attrs[key] === 'string' ? attrs[key].trim() : '';
+  function extractStringAttr(attrs: Record<string, unknown> | undefined, key: string): string {
+    const value = attrs?.[key];
+    return typeof value === 'string' ? value.trim() : '';
   }
   for (const rel of root.elements) {
     rel.attributes = rel.attributes || {};
     const attrs = rel.attributes;
     let id = extractStringAttr(attrs, 'Id');
     const type = extractStringAttr(attrs, 'Type');
-    let target = extractStringAttr(attrs, 'Target');
+    const target = extractStringAttr(attrs, 'Target');
     let targetMode = extractStringAttr(attrs, 'TargetMode');
 
     // Skip relationships without target
@@ -285,14 +320,19 @@ function processRelationships(root, convertedXml, results) {
 /**
  * Fixes missing relationship references in document.xml
  */
-function fixMissingDocumentRefs(convertedXml, filteredIds, results, logger) {
+function fixMissingDocumentRefs(
+  convertedXml: Record<string, unknown>,
+  filteredIds: Set<string>,
+  results: string[],
+  logger: ValidatorLogger,
+): boolean {
   const documentPath = 'word/document.xml';
-  const document = convertedXml[documentPath];
+  const document = convertedXml[documentPath] as XmlTree | undefined;
 
   if (document?.elements?.length) {
     const documentRoot = document.elements[0];
     if (documentRoot?.type === 'element') {
-      const missingRefs = [];
+      const missingRefs: string[] = [];
       processDocumentForMissingRefs(documentRoot, filteredIds, missingRefs);
 
       if (missingRefs.length) {
@@ -308,14 +348,18 @@ function fixMissingDocumentRefs(convertedXml, filteredIds, results, logger) {
 /**
  * Updates Content_Types.xml for media .bin entries
  */
-function updateContentTypes(convertedXml, binMediaTargets, results) {
+function updateContentTypes(
+  convertedXml: Record<string, unknown>,
+  binMediaTargets: Set<string>,
+  results: string[],
+): boolean {
   const contentTypesKey = '[Content_Types].xml';
   const contentTypesXml = convertedXml[contentTypesKey];
 
   if (typeof contentTypesXml === 'string') {
     return updateContentTypesString(contentTypesXml, binMediaTargets, results, convertedXml, contentTypesKey);
-  } else if (contentTypesXml?.elements?.length) {
-    return updateContentTypesElements(contentTypesXml, binMediaTargets, results);
+  } else if (contentTypesXml && typeof contentTypesXml === 'object' && 'elements' in contentTypesXml) {
+    return updateContentTypesElements(contentTypesXml as XmlTree, binMediaTargets, results);
   } else {
     return false; // no changes made
   }
@@ -324,9 +368,15 @@ function updateContentTypes(convertedXml, binMediaTargets, results) {
 /**
  * Updates Content_Types.xml when it's a string
  */
-function updateContentTypesString(contentTypesXml, binMediaTargets, results, convertedXml, contentTypesKey) {
+function updateContentTypesString(
+  contentTypesXml: string,
+  binMediaTargets: Set<string>,
+  results: string[],
+  convertedXml: Record<string, unknown>,
+  contentTypesKey: string,
+): boolean {
   const CONTENT_TYPES_NS = '<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">';
-  const ensureDefault = (xmlString, ext, contentType) => {
+  const ensureDefault = (xmlString: string, ext: string, contentType: string): string => {
     const defRe = new RegExp(`<Default\\s+Extension="${ext}"\\b`, 'i');
     if (defRe.test(xmlString)) return xmlString;
     return xmlString.replace(
@@ -335,7 +385,7 @@ function updateContentTypesString(contentTypesXml, binMediaTargets, results, con
     );
   };
 
-  const ensureOverride = (xmlString, partName, contentType) => {
+  const ensureOverride = (xmlString: string, partName: string, contentType: string): string => {
     const esc = partName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const ovRe = new RegExp(`<Override\\s+PartName="${esc}"\\b`, 'i');
     if (ovRe.test(xmlString)) return xmlString;
@@ -364,14 +414,23 @@ function updateContentTypesString(contentTypesXml, binMediaTargets, results, con
 /**
  * Updates Content_Types.xml when it's parsed elements
  */
-function updateContentTypesElements(contentTypesXml, binMediaTargets, results) {
-  const typesRoot = contentTypesXml.elements.find((el) => el.name === 'Types') || contentTypesXml.elements[0];
-  typesRoot.elements = typesRoot.elements || [];
+function updateContentTypesElements(
+  contentTypesXml: XmlTree,
+  binMediaTargets: Set<string>,
+  results: string[],
+): boolean {
+  const typesRoot = contentTypesXml.elements?.find((el) => el.name === 'Types') || contentTypesXml.elements?.[0];
+  if (!typesRoot) return false;
+  if (!typesRoot.elements) {
+    typesRoot.elements = [];
+  }
 
-  const hasDefault = (ext) =>
-    typesRoot.elements.some((el) => el.name === 'Default' && el.attributes?.Extension === ext);
+  const hasDefault = (ext: string): boolean => {
+    return typesRoot.elements?.some((el) => el.name === 'Default' && el.attributes?.Extension === ext) ?? false;
+  };
 
-  const addDefault = (ext, ct) => {
+  const addDefault = (ext: string, ct: string): void => {
+    if (!typesRoot.elements) typesRoot.elements = [];
     typesRoot.elements.unshift({
       type: 'element',
       name: 'Default',
@@ -379,10 +438,12 @@ function updateContentTypesElements(contentTypesXml, binMediaTargets, results) {
     });
   };
 
-  const hasOverride = (part) =>
-    typesRoot.elements.some((el) => el.name === 'Override' && el.attributes?.PartName === part);
+  const hasOverride = (part: string): boolean => {
+    return typesRoot.elements?.some((el) => el.name === 'Override' && el.attributes?.PartName === part) ?? false;
+  };
 
-  const addOverride = (part, ct) => {
+  const addOverride = (part: string, ct: string): void => {
+    if (!typesRoot.elements) typesRoot.elements = [];
     typesRoot.elements.unshift({
       type: 'element',
       name: 'Override',
@@ -416,12 +477,8 @@ function updateContentTypesElements(contentTypesXml, binMediaTargets, results) {
 
 /**
  * Recursively processes document.xml to find and fix missing relationship references.
- *
- * @param {any} node - XML node to process (can be element, text, etc.)
- * @param {Set<string>} usedIds - Set of valid relationship IDs from the relationships file
- * @param {string[]} fixed - Array to collect descriptions of fixes made
  */
-function processDocumentForMissingRefs(node, usedIds, fixed) {
+function processDocumentForMissingRefs(node: XmlElement, usedIds: Set<string>, fixed: string[]): void {
   if (!node?.elements?.length) return;
 
   for (const element of node.elements) {
@@ -429,7 +486,9 @@ function processDocumentForMissingRefs(node, usedIds, fixed) {
 
     const rIdValue = element.attributes?.['r:id'];
     if (typeof rIdValue === 'string' && !usedIds.has(rIdValue)) {
-      delete element.attributes['r:id'];
+      if (element.attributes) {
+        delete element.attributes['r:id'];
+      }
       fixed.push(`Removed invalid r:id="${rIdValue}"`);
     }
 
diff --git a/packages/super-editor/src/core/types/EditorConfig.ts b/packages/super-editor/src/core/types/EditorConfig.ts
index e377201b2..e40242843 100644
--- a/packages/super-editor/src/core/types/EditorConfig.ts
+++ b/packages/super-editor/src/core/types/EditorConfig.ts
@@ -71,8 +71,8 @@ export interface Awareness {
  */
 export interface CollaborationProvider {
   awareness?: Awareness | null;
-  on?(event: any, handler: (...args: any[]) => void): void;
-  off?(event: any, handler: (...args: any[]) => void): void;
+  on?(event: unknown, handler: (...args: unknown[]) => void): void;
+  off?(event: unknown, handler: (...args: unknown[]) => void): void;
   disconnect?(): void;
   destroy?(): void;
   /** Whether provider is synced - some use `synced`, others `isSynced` */
@@ -80,6 +80,17 @@ export interface CollaborationProvider {
   isSynced?: boolean;
 }
 
+/**
+ * Base interface for all extensions (node, mark, extension)
+ */
+export interface ExtensionBase {
+  type: 'node' | 'mark' | 'extension';
+  name: string;
+  options: Record<string, unknown>;
+  storage: Record<string, unknown>;
+  config: Record<string, unknown>;
+}
+
 /**
  * Any extension supported by the editor (node, mark, or extension)
  */
diff --git a/packages/super-editor/src/core/types/EditorEvents.ts b/packages/super-editor/src/core/types/EditorEvents.ts
index ea39143cc..da7a207b4 100644
--- a/packages/super-editor/src/core/types/EditorEvents.ts
+++ b/packages/super-editor/src/core/types/EditorEvents.ts
@@ -30,11 +30,20 @@ export interface CommentsPayload {
  * Payload for comment locations/positions
  */
 export interface CommentLocationsPayload {
-  locations: Array<{
+  locations?: Array<{
     commentId: string;
     position: { top: number; left: number; height: number; width: number };
     [key: string]: unknown;
   }>;
+  allCommentPositions?: Record<
+    string,
+    {
+      threadId: string;
+      start: number;
+      end: number;
+      bounds: { top: number; bottom: number; left: number; right: number };
+    }
+  >;
 }
 
 /**
diff --git a/packages/super-editor/src/core/types/__tests__/command-types.ts b/packages/super-editor/src/core/types/__tests__/command-types.ts
index 5b1255618..49dfc992c 100644
--- a/packages/super-editor/src/core/types/__tests__/command-types.ts
+++ b/packages/super-editor/src/core/types/__tests__/command-types.ts
@@ -16,7 +16,13 @@ type AppendRowsArgs = Parameters<ExtensionCommandMap['appendRowsWithContent']>[0
 type AssertAppendRowsArgs = ExpectTrue<
   Equal<
     AppendRowsArgs,
-    { tablePos?: number | null; tableNode?: unknown; valueRows?: unknown[][]; copyRowStyle?: boolean }
+    {
+      tablePos?: number | null;
+      tableNode?: unknown;
+      valueRows?: unknown[][];
+      copyRowStyle?: boolean;
+      dispatch?: boolean;
+    }
   >
 >;
 
diff --git a/packages/super-editor/src/core/types/index.js b/packages/super-editor/src/core/types/index.ts
similarity index 100%
rename from packages/super-editor/src/core/types/index.js
rename to packages/super-editor/src/core/types/index.ts
diff --git a/packages/super-editor/src/core/utilities/callOrGet.js b/packages/super-editor/src/core/utilities/callOrGet.js
deleted file mode 100644
index 248d1d599..000000000
--- a/packages/super-editor/src/core/utilities/callOrGet.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './callOrGet.ts';
diff --git a/packages/super-editor/src/core/utilities/callOrGet.ts b/packages/super-editor/src/core/utilities/callOrGet.ts
index d6fb15c8b..363921c5e 100644
--- a/packages/super-editor/src/core/utilities/callOrGet.ts
+++ b/packages/super-editor/src/core/utilities/callOrGet.ts
@@ -1,25 +1,9 @@
-/**
- * Type representing a value that can be either a direct value or a function that returns that value.
- */
-export type MaybeGetter<T, Args extends unknown[] = []> = T | ((...args: Args) => T);
+export type MaybeGetter<T> = T | ((...args: unknown[]) => T);
 
-/**
- * If "value" is a function, then call it and return result.
- * Otherwise it is returned directly.
- * @param value Any value or function that returns a value.
- * @param context Context to bind to function (Optional).
- * @param props Props for function (Optional).
- */
-export function callOrGet<T, Args extends unknown[] = []>(
-  value: MaybeGetter<T, Args>,
-  context: unknown = null,
-  ...props: Args
-): T {
+export const callOrGet = <T>(value: MaybeGetter<T>, context?: unknown, ...args: unknown[]): T => {
   if (typeof value === 'function') {
-    const fn = value as (...args: Args) => T;
-    if (context) return fn.bind(context)(...props);
-    return fn(...props);
+    const fn = value as (...args: unknown[]) => T;
+    return context ? fn.apply(context, args) : fn(...args);
   }
-
   return value as T;
-}
+};
diff --git a/packages/super-editor/src/core/utilities/carbonCopy.js b/packages/super-editor/src/core/utilities/carbonCopy.js
deleted file mode 100644
index 0d561a288..000000000
--- a/packages/super-editor/src/core/utilities/carbonCopy.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- *
- * @template T
- * @param {T} obj
- * @returns {T}
- */
-export const carbonCopy = (obj) => {
-  if (!obj) return undefined;
-  try {
-    return JSON.parse(JSON.stringify(obj));
-  } catch (e) {
-    console.error('Error in carbonCopy', obj, e);
-    return undefined;
-  }
-};
diff --git a/packages/super-editor/src/core/utilities/carbonCopy.ts b/packages/super-editor/src/core/utilities/carbonCopy.ts
new file mode 100644
index 000000000..40500e349
--- /dev/null
+++ b/packages/super-editor/src/core/utilities/carbonCopy.ts
@@ -0,0 +1,9 @@
+export const carbonCopy = <T>(obj: T): T | undefined => {
+  if (!obj) return undefined;
+  try {
+    return JSON.parse(JSON.stringify(obj)) as T;
+  } catch (e) {
+    console.error('Error in carbonCopy', obj, e);
+    return undefined;
+  }
+};
diff --git a/packages/super-editor/src/core/utilities/clipboardUtils.js b/packages/super-editor/src/core/utilities/clipboardUtils.ts
similarity index 80%
rename from packages/super-editor/src/core/utilities/clipboardUtils.js
rename to packages/super-editor/src/core/utilities/clipboardUtils.ts
index 80a1ba755..e62b9a50a 100644
--- a/packages/super-editor/src/core/utilities/clipboardUtils.js
+++ b/packages/super-editor/src/core/utilities/clipboardUtils.ts
@@ -1,13 +1,6 @@
-// @ts-check
-// clipboardUtils.js
-
 import { DOMParser } from 'prosemirror-model';
-
-/**
- * @typedef {import('prosemirror-state').EditorState} EditorState
- * @typedef {import('prosemirror-model').Node} ProseMirrorNode
- * @typedef {import('prosemirror-model').Fragment} Fragment
- */
+import type { EditorState } from 'prosemirror-state';
+import type { Node as ProseMirrorNode, Fragment } from 'prosemirror-model';
 
 /**
  * Checks if clipboard read permission is granted and handles permission prompts.
@@ -15,9 +8,8 @@ import { DOMParser } from 'prosemirror-model';
  * proactively trigger a readText() call which will surface the browser permission
  * dialog to the user. Falls back gracefully in older browsers that lack the
  * Permissions API.
- * @returns {Promise<boolean>} Whether clipboard read permission is granted
  */
-export async function ensureClipboardPermission() {
+export async function ensureClipboardPermission(): Promise<boolean> {
   if (typeof navigator === 'undefined' || !navigator.clipboard) {
     return false;
   }
@@ -55,10 +47,8 @@ export async function ensureClipboardPermission() {
 /**
  * Reads content from the system clipboard and parses it into a ProseMirror fragment.
  * Attempts to read HTML first, falling back to plain text if necessary.
- * @param {EditorState} state - The ProseMirror editor state, used for schema and parsing.
- * @returns {Promise<Fragment|ProseMirrorNode|null>} A promise that resolves to a ProseMirror fragment or text node, or null if reading fails.
  */
-export async function readFromClipboard(state) {
+export async function readFromClipboard(state: EditorState): Promise<Fragment | ProseMirrorNode | null> {
   let html = '';
   let text = '';
   const hasPermission = await ensureClipboardPermission();
@@ -83,7 +73,7 @@ export async function readFromClipboard(state) {
   } else {
     // permissions denied or API unavailable; leave content empty
   }
-  let content = null;
+  let content: Fragment | ProseMirrorNode | null = null;
   if (html) {
     try {
       content = DOMParser.fromSchema(state.schema).parseSlice(
diff --git a/packages/super-editor/src/core/utilities/createStyleTag.js b/packages/super-editor/src/core/utilities/createStyleTag.ts
similarity index 72%
rename from packages/super-editor/src/core/utilities/createStyleTag.js
rename to packages/super-editor/src/core/utilities/createStyleTag.ts
index 7bfc2cd65..f3caf2887 100644
--- a/packages/super-editor/src/core/utilities/createStyleTag.js
+++ b/packages/super-editor/src/core/utilities/createStyleTag.ts
@@ -1,13 +1,11 @@
 /**
  * Creates style tag and append it to head.
- * @param {*} style Style string.
- * @param {*} suffix Suffix to add to data attribute (Optional).
  */
-export function createStyleTag(style, suffix) {
+export function createStyleTag(style: string, suffix?: string): HTMLStyleElement {
   const styleTag = document.querySelector(`style[data-supereditor-style${suffix ? `-${suffix}` : ''}]`);
 
   if (styleTag !== null) {
-    return styleTag;
+    return styleTag as HTMLStyleElement;
   }
 
   const styleNode = document.createElement('style');
diff --git a/packages/super-editor/src/core/utilities/deleteProps.js b/packages/super-editor/src/core/utilities/deleteProps.js
deleted file mode 100644
index 657c0e869..000000000
--- a/packages/super-editor/src/core/utilities/deleteProps.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Delete a property or an array of properties from an object.
- * @param obj Object
- * @param propOrProps Key or array of keys to remove.
- */
-export function deleteProps(obj, propOrProps) {
-  const props = typeof propOrProps === 'string' ? [propOrProps] : propOrProps;
-
-  const removeNested = (target, pathParts, index = 0) => {
-    if (!target || typeof target !== 'object') {
-      return false;
-    }
-
-    const key = pathParts[index];
-    const isLast = index === pathParts.length - 1;
-
-    if (!(key in target)) {
-      return Object.keys(target).length === 0;
-    }
-
-    if (isLast) {
-      delete target[key];
-    } else {
-      const shouldDeleteChild = removeNested(target[key], pathParts, index + 1);
-      if (shouldDeleteChild) {
-        delete target[key];
-      }
-    }
-
-    return Object.keys(target).length === 0;
-  };
-
-  const clonedObj = JSON.parse(JSON.stringify(obj));
-  props.forEach((propPath) => {
-    if (!propPath.includes('.')) {
-      delete clonedObj[propPath];
-      return;
-    }
-
-    removeNested(clonedObj, propPath.split('.'));
-  });
-
-  return Object.entries(clonedObj).reduce((acc, [key, value]) => {
-    if (value == null) {
-      return acc;
-    }
-
-    if (typeof value === 'object' && Object.keys(value).length === 0) {
-      return acc;
-    }
-
-    acc[key] = value;
-    return acc;
-  }, {});
-}
diff --git a/packages/super-editor/src/core/utilities/deleteProps.ts b/packages/super-editor/src/core/utilities/deleteProps.ts
new file mode 100644
index 000000000..c89f88b27
--- /dev/null
+++ b/packages/super-editor/src/core/utilities/deleteProps.ts
@@ -0,0 +1,55 @@
+/**
+ * Delete a property or an array of properties from an object.
+ */
+export function deleteProps<T extends Record<string, unknown>>(obj: T, propOrProps: string | string[]): Partial<T> {
+  const props = typeof propOrProps === 'string' ? [propOrProps] : propOrProps;
+
+  const removeNested = (target: unknown, pathParts: string[], index = 0): boolean => {
+    if (!target || typeof target !== 'object') {
+      return false;
+    }
+
+    // Type guard to ensure we can access properties
+    const targetObj = target as Record<string, unknown>;
+    const key = pathParts[index];
+    const isLast = index === pathParts.length - 1;
+
+    if (!(key in targetObj)) {
+      return Object.keys(targetObj).length === 0;
+    }
+
+    if (isLast) {
+      delete targetObj[key];
+    } else {
+      const shouldDeleteChild = removeNested(targetObj[key], pathParts, index + 1);
+      if (shouldDeleteChild) {
+        delete targetObj[key];
+      }
+    }
+
+    return Object.keys(targetObj).length === 0;
+  };
+
+  const clonedObj: Record<string, unknown> = JSON.parse(JSON.stringify(obj));
+  props.forEach((propPath: string) => {
+    if (!propPath.includes('.')) {
+      delete clonedObj[propPath];
+      return;
+    }
+
+    removeNested(clonedObj, propPath.split('.'));
+  });
+
+  return Object.entries(clonedObj).reduce<Partial<T>>((acc, [key, value]) => {
+    if (value == null) {
+      return acc;
+    }
+
+    if (typeof value === 'object' && value !== null && Object.keys(value as object).length === 0) {
+      return acc;
+    }
+
+    (acc as Record<string, unknown>)[key] = value;
+    return acc;
+  }, {} as Partial<T>);
+}
diff --git a/packages/super-editor/src/core/utilities/imageBlobs.js b/packages/super-editor/src/core/utilities/imageBlobs.js
deleted file mode 100644
index 34c7e067a..000000000
--- a/packages/super-editor/src/core/utilities/imageBlobs.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Convert object of Uint8Array to blob URL
- * @param {Object} media Object where keys are docx file names and values are Uint8Arrays
- * @returns {Object} Object where keys are docx file names and values are blob URLs
- */
-export const getMediaObjectUrls = (media) => {
-  const blobUrls = {};
-  Object.keys(media).forEach((key) => {
-    const uint8Array = media[key];
-    const blob = new Blob([uint8Array], { type: 'text/plain' });
-    const file = new File([blob], key, { type: blob.type });
-    const imageUrl = URL.createObjectURL(file);
-    blobUrls[key] = imageUrl;
-  });
-  return blobUrls;
-};
diff --git a/packages/super-editor/src/core/utilities/imageBlobs.ts b/packages/super-editor/src/core/utilities/imageBlobs.ts
new file mode 100644
index 000000000..fc9d19e35
--- /dev/null
+++ b/packages/super-editor/src/core/utilities/imageBlobs.ts
@@ -0,0 +1,17 @@
+/**
+ * Convert object of Uint8Array to blob URL
+ * @param media Object where keys are docx file names and values are Uint8Arrays
+ * @returns Object where keys are docx file names and values are blob URLs
+ */
+export const getMediaObjectUrls = (media: Record<string, Uint8Array>): Record<string, string> => {
+  const blobUrls: Record<string, string> = {};
+  Object.keys(media).forEach((key) => {
+    const uint8Array = media[key];
+    const copy = new Uint8Array(uint8Array);
+    const blob = new Blob([copy], { type: 'text/plain' });
+    const file = new File([blob], key, { type: blob.type });
+    const imageUrl = URL.createObjectURL(file);
+    blobUrls[key] = imageUrl;
+  });
+  return blobUrls;
+};
diff --git a/packages/super-editor/src/core/utilities/index.js b/packages/super-editor/src/core/utilities/index.ts
similarity index 100%
rename from packages/super-editor/src/core/utilities/index.js
rename to packages/super-editor/src/core/utilities/index.ts
diff --git a/packages/super-editor/src/core/utilities/isEmptyObject.js b/packages/super-editor/src/core/utilities/isEmptyObject.ts
similarity index 60%
rename from packages/super-editor/src/core/utilities/isEmptyObject.js
rename to packages/super-editor/src/core/utilities/isEmptyObject.ts
index f2f37a692..155caaa5c 100644
--- a/packages/super-editor/src/core/utilities/isEmptyObject.js
+++ b/packages/super-editor/src/core/utilities/isEmptyObject.ts
@@ -1,7 +1,6 @@
 /**
  * Check if the object is empty.
- * @param value Object.
  */
-export function isEmptyObject(value = {}) {
+export function isEmptyObject(value: Record<string, unknown> = {}): boolean {
   return Object.keys(value).length === 0 && value.constructor === Object;
 }
diff --git a/packages/super-editor/src/core/utilities/isIOS.js b/packages/super-editor/src/core/utilities/isIOS.ts
similarity index 83%
rename from packages/super-editor/src/core/utilities/isIOS.js
rename to packages/super-editor/src/core/utilities/isIOS.ts
index e4279ddf2..b04f59b05 100644
--- a/packages/super-editor/src/core/utilities/isIOS.js
+++ b/packages/super-editor/src/core/utilities/isIOS.ts
@@ -1,4 +1,4 @@
-export const isIOS = () => {
+export const isIOS = (): boolean => {
   if (typeof navigator === 'undefined') return false;
   return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
     navigator.platform,
diff --git a/packages/super-editor/src/core/utilities/isMacOS.js b/packages/super-editor/src/core/utilities/isMacOS.ts
similarity index 68%
rename from packages/super-editor/src/core/utilities/isMacOS.js
rename to packages/super-editor/src/core/utilities/isMacOS.ts
index b9d995981..f635395c9 100644
--- a/packages/super-editor/src/core/utilities/isMacOS.js
+++ b/packages/super-editor/src/core/utilities/isMacOS.ts
@@ -1,3 +1,3 @@
-export const isMacOS = () => {
+export const isMacOS = (): boolean => {
   return typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false;
 };
diff --git a/packages/super-editor/src/core/utilities/isRegExp.js b/packages/super-editor/src/core/utilities/isRegExp.ts
similarity index 53%
rename from packages/super-editor/src/core/utilities/isRegExp.js
rename to packages/super-editor/src/core/utilities/isRegExp.ts
index 196773d9f..e44f2d1a8 100644
--- a/packages/super-editor/src/core/utilities/isRegExp.js
+++ b/packages/super-editor/src/core/utilities/isRegExp.ts
@@ -1,3 +1,3 @@
-export const isRegExp = (value) => {
+export const isRegExp = (value: unknown): value is RegExp => {
   return Object.prototype.toString.call(value) === '[object RegExp]';
 };
diff --git a/packages/super-editor/src/core/utilities/minMax.js b/packages/super-editor/src/core/utilities/minMax.js
deleted file mode 100644
index 9f7effa24..000000000
--- a/packages/super-editor/src/core/utilities/minMax.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function minMax(value = 0, min = 0, max = 0) {
-  return Math.min(Math.max(value, min), max);
-}
diff --git a/packages/super-editor/src/core/utilities/minMax.ts b/packages/super-editor/src/core/utilities/minMax.ts
new file mode 100644
index 000000000..fdab6c84d
--- /dev/null
+++ b/packages/super-editor/src/core/utilities/minMax.ts
@@ -0,0 +1,3 @@
+export function minMax(value = 0, min = 0, max = 0): number {
+  return Math.min(Math.max(value, min), max);
+}
diff --git a/packages/super-editor/src/core/utilities/objectIncludes.js b/packages/super-editor/src/core/utilities/objectIncludes.js
deleted file mode 100644
index 5ff7c088e..000000000
--- a/packages/super-editor/src/core/utilities/objectIncludes.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isRegExp } from './isRegExp.js';
-
-/**
- * Check if obj1 includes obj2
- * @param obj1 Object
- * @param obj2 Object
- */
-export function objectIncludes(obj1, obj2, options = { strict: true }) {
-  const keys = Object.keys(obj2);
-  if (!keys.length) return true;
-  return keys.every((key) => {
-    if (options.strict) return obj2[key] === obj1[key];
-    if (isRegExp(obj2[key])) return obj2[key].test(obj1[key]);
-    return obj2[key] === obj1[key];
-  });
-}
diff --git a/packages/super-editor/src/core/utilities/objectIncludes.ts b/packages/super-editor/src/core/utilities/objectIncludes.ts
new file mode 100644
index 000000000..5d37f249e
--- /dev/null
+++ b/packages/super-editor/src/core/utilities/objectIncludes.ts
@@ -0,0 +1,31 @@
+import { isRegExp } from './isRegExp.js';
+
+/**
+ * Check if obj1 includes obj2
+ */
+export function objectIncludes(
+  obj1: Record<string, unknown>,
+  obj2: Record<string, unknown>,
+  options: { strict: boolean } = { strict: true },
+): boolean {
+  const keys = Object.keys(obj2);
+  if (!keys.length) return true;
+  return keys.every((key) => {
+    const value1 = obj1[key];
+    const value2 = obj2[key];
+
+    if (options.strict) {
+      return value2 === value1;
+    }
+
+    if (isRegExp(value2)) {
+      // Type guard: ensure value1 can be tested by the RegExp
+      if (typeof value1 === 'string' || typeof value1 === 'number') {
+        return value2.test(String(value1));
+      }
+      return false;
+    }
+
+    return value2 === value1;
+  });
+}
diff --git a/packages/super-editor/src/core/utilities/parseSizeUnit.js b/packages/super-editor/src/core/utilities/parseSizeUnit.ts
similarity index 100%
rename from packages/super-editor/src/core/utilities/parseSizeUnit.js
rename to packages/super-editor/src/core/utilities/parseSizeUnit.ts
diff --git a/packages/super-editor/src/extensions/ai/ai-constants.js b/packages/super-editor/src/extensions/ai/ai-constants.ts
similarity index 100%
rename from packages/super-editor/src/extensions/ai/ai-constants.js
rename to packages/super-editor/src/extensions/ai/ai-constants.ts
diff --git a/packages/super-editor/src/extensions/ai/ai-marks.js b/packages/super-editor/src/extensions/ai/ai-marks.ts
similarity index 57%
rename from packages/super-editor/src/extensions/ai/ai-marks.js
rename to packages/super-editor/src/extensions/ai/ai-marks.ts
index 4458ef974..135d37865 100644
--- a/packages/super-editor/src/extensions/ai/ai-marks.js
+++ b/packages/super-editor/src/extensions/ai/ai-marks.ts
@@ -1,4 +1,5 @@
-import { Mark, Attribute } from '@core/index.js';
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
 import { AiMarkName, AiAnimationMarkName } from './ai-constants.js';
 
 export const AiMark = Mark.create({
@@ -29,8 +30,14 @@ export const AiMark = Mark.create({
     return [{ tag: AiMarkName }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return [AiMarkName, Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      AiMarkName,
+      Attribute.mergeAttributes(
+        (this.options as { htmlAttributes: Record<string, AttributeValue> }).htmlAttributes,
+        htmlAttributes as Record<string, AttributeValue>,
+      ),
+    ];
   },
 });
 
@@ -72,7 +79,13 @@ export const AiAnimationMark = Mark.create({
     return [{ tag: AiAnimationMarkName }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return [AiAnimationMarkName, Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      AiAnimationMarkName,
+      Attribute.mergeAttributes(
+        (this.options as { htmlAttributes: Record<string, AttributeValue> }).htmlAttributes,
+        htmlAttributes as Record<string, AttributeValue>,
+      ),
+    ];
   },
 });
diff --git a/packages/super-editor/src/extensions/ai/ai-nodes.js b/packages/super-editor/src/extensions/ai/ai-nodes.ts
similarity index 56%
rename from packages/super-editor/src/extensions/ai/ai-nodes.js
rename to packages/super-editor/src/extensions/ai/ai-nodes.ts
index 2d20cd0c1..415445067 100644
--- a/packages/super-editor/src/extensions/ai/ai-nodes.js
+++ b/packages/super-editor/src/extensions/ai/ai-nodes.ts
@@ -1,4 +1,5 @@
-import { Attribute, Node } from '@core/index.js';
+import { Attribute, type AttributeValue, Node } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
 import dotsLoader from '@superdoc/common/icons/dots-loader.svg';
 import { AiLoaderNodeName } from './ai-constants.js';
 
@@ -31,11 +32,16 @@ export const AiLoaderNode = Node.create({
     return [{ tag: 'span.sd-ai-loader' }];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM(...args: unknown[]): DOMOutputSpec {
+    const { htmlAttributes } = (args[0] || {}) as { htmlAttributes?: Record<string, unknown> };
     const span = document.createElement('span');
-    Object.entries(Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)).forEach(([k, v]) =>
-      span.setAttribute(k, v),
-    );
+    const options = this.options as { htmlAttributes?: Record<string, unknown> };
+    Object.entries(
+      Attribute.mergeAttributes(
+        (options.htmlAttributes as Record<string, AttributeValue>) || {},
+        (htmlAttributes as Record<string, AttributeValue>) || {},
+      ),
+    ).forEach(([k, v]) => span.setAttribute(k, String(v)));
 
     const img = document.createElement('img');
     img.src = dotsLoader;
diff --git a/packages/super-editor/src/extensions/ai/ai-plugin.js b/packages/super-editor/src/extensions/ai/ai-plugin.ts
similarity index 69%
rename from packages/super-editor/src/extensions/ai/ai-plugin.js
rename to packages/super-editor/src/extensions/ai/ai-plugin.ts
index ca21e9bde..0f572189a 100644
--- a/packages/super-editor/src/extensions/ai/ai-plugin.js
+++ b/packages/super-editor/src/extensions/ai/ai-plugin.ts
@@ -1,5 +1,8 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { Node as ProseMirrorNode } from 'prosemirror-model';
 import { Extension } from '@core/Extension.js';
+import type { Editor } from '@core/Editor.js';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { AiMarkName, AiLoaderNodeName } from './ai-constants.js';
 
@@ -12,7 +15,7 @@ export const AiPlugin = Extension.create({
     return {
       insertAiMark:
         () =>
-        ({ tr, dispatch }) => {
+        ({ tr, dispatch }: { tr: Transaction; dispatch: ((tr: Transaction) => void) | undefined }) => {
           const { selection } = tr;
           const { $from, $to } = selection;
 
@@ -22,7 +25,7 @@ export const AiPlugin = Extension.create({
           tr.addMark(
             $from.pos,
             $to.pos,
-            this.editor.schema.marks[AiMarkName].create({
+            (this.editor as Editor).schema.marks[AiMarkName].create({
               id: 'ai-highlight',
             }),
           );
@@ -35,11 +38,25 @@ export const AiPlugin = Extension.create({
        */
       removeSelectionAfterAiPulse:
         () =>
-        ({ tr, dispatch, state }) => {
+        ({
+          tr,
+          dispatch,
+          _state,
+        }: {
+          tr: Transaction;
+          dispatch: ((tr: Transaction) => void) | undefined;
+          _state: EditorState;
+        }) => {
           const { selection } = tr;
           const { $to } = selection;
 
-          tr.setSelection(state.selection.constructor.create(tr.doc, $to.pos, $to.pos));
+          tr.setSelection(
+            (
+              selection.constructor as unknown as {
+                create: (doc: ProseMirrorNode, pos1: number, pos2: number) => typeof selection;
+              }
+            ).create(tr.doc, $to.pos, $to.pos),
+          );
 
           if (dispatch) dispatch(tr);
           return true;
@@ -52,8 +69,8 @@ export const AiPlugin = Extension.create({
        * @returns {Boolean} - True if the highlight style was updated
        */
       updateAiHighlightStyle:
-        (className) =>
-        ({ tr, dispatch }) => {
+        (className: string | null) =>
+        ({ tr, dispatch }: { tr: Transaction; dispatch: ((tr: Transaction) => void) | undefined }) => {
           // We can use a transaction meta to communicate with the plugin
           // to update our decorations with the new class
           tr.setMeta(AiPluginKey, { type: 'updateStyle', className });
@@ -68,7 +85,7 @@ export const AiPlugin = Extension.create({
        */
       clearAiHighlightStyle:
         () =>
-        ({ tr, dispatch }) => {
+        ({ tr, dispatch }: { tr: Transaction; dispatch: ((tr: Transaction) => void) | undefined }) => {
           // We'll send null to clear any custom classes
           tr.setMeta(AiPluginKey, { type: 'updateStyle', className: null });
 
@@ -83,8 +100,16 @@ export const AiPlugin = Extension.create({
        * @returns {Boolean} - True if the mark was removed, false otherwise
        */
       removeAiMark:
-        (markName = AiMarkName) =>
-        ({ tr, dispatch, state }) => {
+        (markName: string = AiMarkName) =>
+        ({
+          tr,
+          dispatch,
+          state,
+        }: {
+          tr: Transaction;
+          dispatch: ((tr: Transaction) => void) | undefined;
+          state: EditorState;
+        }) => {
           // Loop through the document to find and remove all AI marks
           const { doc } = state;
           let markFound = false;
@@ -113,10 +138,18 @@ export const AiPlugin = Extension.create({
        * @returns {Boolean} - True if any nodes were removed, false otherwise
        */
       removeAiNode:
-        (nodeName = AiLoaderNodeName) =>
-        ({ tr, dispatch, state }) => {
+        (nodeName: string = AiLoaderNodeName) =>
+        ({
+          tr,
+          dispatch,
+          state,
+        }: {
+          tr: Transaction;
+          dispatch: ((tr: Transaction) => void) | undefined;
+          state: EditorState;
+        }) => {
           const { doc } = state;
-          const positions = [];
+          const positions: number[] = [];
 
           doc.descendants((node, pos) => {
             if (node.type.name === nodeName) {
@@ -146,7 +179,9 @@ export const AiPlugin = Extension.create({
   },
 
   addPmPlugins() {
-    const editor = this.editor;
+    const editor = this.editor as Editor | undefined;
+    if (!editor) return [];
+
     const aiPlugin = new Plugin({
       key: AiPluginKey,
       state: {
@@ -154,16 +189,21 @@ export const AiPlugin = Extension.create({
           return {
             decorations: DecorationSet.empty,
             highlightColor: '#6366f1', // Indigo color, matches AiLayer
-            customClass: null, // Pulse animation class spot (later)
+            customClass: null as string | null, // Pulse animation class spot (later)
           };
         },
-        apply(tr, oldState, _, newEditorState) {
+        apply(
+          tr: Transaction,
+          oldState: { decorations: DecorationSet; highlightColor: string; customClass: string | null },
+          _: EditorState,
+          newEditorState: EditorState,
+        ) {
           // Check if we have an update meta for styling
-          const meta = tr.getMeta(AiPluginKey);
+          const meta = tr.getMeta(AiPluginKey) as { type?: string; className?: string | null } | undefined;
           let customClass = oldState.customClass;
 
           if (meta && meta.type === 'updateStyle') {
-            customClass = meta.className;
+            customClass = meta.className ?? null;
           }
 
           // Clear pulse animation when text is being inserted/replaced
@@ -172,7 +212,11 @@ export const AiPlugin = Extension.create({
             // Check if any text was inserted in places with AI marks
             let hasTextChanges = false;
             tr.steps.forEach((step) => {
-              if (step.slice && step.slice.content.size > 0) {
+              if (
+                'slice' in step &&
+                (step as { slice?: { content: { size: number } } }).slice &&
+                (step as { slice: { content: { size: number } } }).slice.content.size > 0
+              ) {
                 hasTextChanges = true;
               }
             });
@@ -198,8 +242,8 @@ export const AiPlugin = Extension.create({
         },
       },
       props: {
-        decorations(state) {
-          return this.getState(state).decorations;
+        decorations(state: EditorState) {
+          return this.getState(state)?.decorations;
         },
       },
     });
@@ -209,16 +253,16 @@ export const AiPlugin = Extension.create({
 
 /**
  * Iterate through the document to find AI marks and create decorations for them
- * @param {*} editor The current editor instance
- * @param {*} doc The current document
- * @param {string} highlightColor The color to use for highlights
- * @param {string} customClass Optional custom class to add to the decorations
- * @returns {Object} The decorations for AI marks
  */
-const processAiHighlights = (editor, doc, highlightColor, customClass = null) => {
-  const decorations = [];
-
-  doc.descendants((node, pos) => {
+const processAiHighlights = (
+  editor: Editor,
+  doc: ProseMirrorNode,
+  highlightColor: string,
+  customClass: string | null = null,
+): { decorations: Decoration[] } => {
+  const decorations: Decoration[] = [];
+
+  doc.descendants((node: ProseMirrorNode, pos: number) => {
     // Check if it contains the aiMarkName
     const { marks = [] } = node;
     const aiMark = marks.find((mark) => mark.type.name === AiMarkName);
diff --git a/packages/super-editor/src/extensions/ai/ai.test.js b/packages/super-editor/src/extensions/ai/ai.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/ai/ai.test.js
rename to packages/super-editor/src/extensions/ai/ai.test.ts
diff --git a/packages/super-editor/src/extensions/ai/index.js b/packages/super-editor/src/extensions/ai/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/ai/index.js
rename to packages/super-editor/src/extensions/ai/index.ts
diff --git a/packages/super-editor/src/extensions/block-node/block-node.test.js b/packages/super-editor/src/extensions/block-node/block-node.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/block-node/block-node.test.js
rename to packages/super-editor/src/extensions/block-node/block-node.test.ts
diff --git a/packages/super-editor/src/extensions/block-node/block-node.js b/packages/super-editor/src/extensions/block-node/block-node.ts
similarity index 73%
rename from packages/super-editor/src/extensions/block-node/block-node.js
rename to packages/super-editor/src/extensions/block-node/block-node.ts
index fb00a7080..e63f62c6d 100644
--- a/packages/super-editor/src/extensions/block-node/block-node.js
+++ b/packages/super-editor/src/extensions/block-node/block-node.ts
@@ -1,8 +1,9 @@
-// @ts-nocheck
 import { Extension } from '@core/Extension.js';
 import { helpers } from '@core/index.js';
 import { mergeRanges, clampRange } from '@core/helpers/rangeUtils.js';
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { Node as ProseMirrorNode } from 'prosemirror-model';
 import { ReplaceStep } from 'prosemirror-transform';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -56,20 +57,28 @@ export const BlockNode = Extension.create({
        * @note The replacement node should have the same type as the original
        */
       replaceBlockNodeById:
-        (id, contentNode) =>
-        ({ dispatch, tr }) => {
-          const blockNode = this.editor.helpers.blockNode.getBlockNodeById(id);
+        (id: string, contentNode: ProseMirrorNode) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }): boolean => {
+          const editor = this.editor as unknown as
+            | {
+                helpers: {
+                  blockNode: { getBlockNodeById: (id: string) => Array<{ node: ProseMirrorNode; pos: number }> };
+                };
+              }
+            | undefined;
+          if (!editor) return false;
+          const blockNode = editor.helpers.blockNode.getBlockNodeById(id);
           if (!blockNode || blockNode.length > 1) {
             return false;
           }
 
           if (dispatch) {
-            let { pos, node } = blockNode[0];
-            let newPosFrom = tr.mapping.map(pos);
-            let newPosTo = tr.mapping.map(pos + node.nodeSize);
+            const { pos, node } = blockNode[0];
+            const newPosFrom = tr.mapping.map(pos);
+            const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-            let currentNode = tr.doc.nodeAt(newPosFrom);
-            if (node.eq(currentNode)) {
+            const currentNode = tr.doc.nodeAt(newPosFrom);
+            if (currentNode && node.eq(currentNode)) {
               tr.replaceWith(newPosFrom, newPosTo, contentNode);
             }
           }
@@ -86,20 +95,28 @@ export const BlockNode = Extension.create({
        * @note Completely removes the node from the document
        */
       deleteBlockNodeById:
-        (id) =>
-        ({ dispatch, tr }) => {
-          const blockNode = this.editor.helpers.blockNode.getBlockNodeById(id);
+        (id: string) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }): boolean => {
+          const editor = this.editor as unknown as
+            | {
+                helpers: {
+                  blockNode: { getBlockNodeById: (id: string) => Array<{ node: ProseMirrorNode; pos: number }> };
+                };
+              }
+            | undefined;
+          if (!editor) return false;
+          const blockNode = editor.helpers.blockNode.getBlockNodeById(id);
           if (!blockNode || blockNode.length > 1) {
             return false;
           }
 
           if (dispatch) {
-            let { pos, node } = blockNode[0];
-            let newPosFrom = tr.mapping.map(pos);
-            let newPosTo = tr.mapping.map(pos + node.nodeSize);
+            const { pos, node } = blockNode[0];
+            const newPosFrom = tr.mapping.map(pos);
+            const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-            let currentNode = tr.doc.nodeAt(newPosFrom);
-            if (node.eq(currentNode)) {
+            const currentNode = tr.doc.nodeAt(newPosFrom);
+            if (currentNode && node.eq(currentNode)) {
               tr.delete(newPosFrom, newPosTo);
             }
           }
@@ -119,25 +136,33 @@ export const BlockNode = Extension.create({
        * @note Merges new attributes with existing ones
        */
       updateBlockNodeAttributes:
-        (id, attrs = {}) =>
-        ({ dispatch, tr }) => {
-          const blockNode = this.editor.helpers.blockNode.getBlockNodeById(id);
+        (id: string, attrs: Record<string, unknown> = {}) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }): boolean => {
+          const editor = this.editor as unknown as
+            | {
+                helpers: {
+                  blockNode: { getBlockNodeById: (id: string) => Array<{ node: ProseMirrorNode; pos: number }> };
+                };
+              }
+            | undefined;
+          if (!editor) return false;
+          const blockNode = editor.helpers.blockNode.getBlockNodeById(id);
           if (!blockNode || blockNode.length > 1) {
             return false;
           }
           if (dispatch) {
-            let { pos, node } = blockNode[0];
-            let newPos = tr.mapping.map(pos);
-            let currentNode = tr.doc.nodeAt(newPos);
-            if (node.eq(currentNode)) {
+            const { pos, node } = blockNode[0];
+            const newPos = tr.mapping.map(pos);
+            const currentNode = tr.doc.nodeAt(newPos);
+            if (currentNode && node.eq(currentNode)) {
               tr.setNodeMarkup(newPos, undefined, {
                 ...node.attrs,
                 ...attrs,
               });
             }
-
-            return true;
           }
+
+          return true;
         },
     };
   },
@@ -152,8 +177,10 @@ export const BlockNode = Extension.create({
        * const blocks = editor.helpers.blockNode.getBlockNodes()
        * console.log(`Found ${blocks.length} block nodes`)
        */
-      getBlockNodes: () => {
-        return findChildren(this.editor.state.doc, (node) => nodeAllowsSdBlockIdAttr(node));
+      getBlockNodes: (): Array<{ node: ProseMirrorNode; pos: number }> => {
+        return findChildren((this.editor as { state: { doc: ProseMirrorNode } }).state.doc, (node: ProseMirrorNode) =>
+          nodeAllowsSdBlockIdAttr(node),
+        );
       },
 
       /**
@@ -165,8 +192,11 @@ export const BlockNode = Extension.create({
        * const block = editor.helpers.blockNode.getBlockNodeById('block-123')
        * if (block.length) console.log('Found:', block[0].node.type.name)
        */
-      getBlockNodeById: (id) => {
-        return findChildren(this.editor.state.doc, (node) => node.attrs.sdBlockId === id);
+      getBlockNodeById: (id: string): Array<{ node: ProseMirrorNode; pos: number }> => {
+        return findChildren(
+          (this.editor as { state: { doc: ProseMirrorNode } }).state.doc,
+          (node: ProseMirrorNode) => node.attrs.sdBlockId === id,
+        );
       },
 
       /**
@@ -178,8 +208,11 @@ export const BlockNode = Extension.create({
        * const paragraphs = editor.helpers.blockNode.getBlockNodesByType('paragraph')
        * const headings = editor.helpers.blockNode.getBlockNodesByType('heading')
        */
-      getBlockNodesByType: (type) => {
-        return findChildren(this.editor.state.doc, (node) => node.type.name === type);
+      getBlockNodesByType: (type: string): Array<{ node: ProseMirrorNode; pos: number }> => {
+        return findChildren(
+          (this.editor as { state: { doc: ProseMirrorNode } }).state.doc,
+          (node: ProseMirrorNode) => node.type.name === type,
+        );
       },
 
       /**
@@ -195,17 +228,21 @@ export const BlockNode = Extension.create({
        *   selection.to
        * )
        */
-      getBlockNodesInRange: (from, to) => {
-        let blockNodes = [];
-
-        this.editor.state.doc.nodesBetween(from, to, (node, pos) => {
-          if (nodeAllowsSdBlockIdAttr(node)) {
-            blockNodes.push({
-              node,
-              pos,
-            });
-          }
-        });
+      getBlockNodesInRange: (from: number, to: number) => {
+        const blockNodes: Array<{ node: ProseMirrorNode; pos: number }> = [];
+
+        (this.editor as { state: { doc: ProseMirrorNode } }).state.doc.nodesBetween(
+          from,
+          to,
+          (node: ProseMirrorNode, pos: number) => {
+            if (nodeAllowsSdBlockIdAttr(node)) {
+              blockNodes.push({
+                node,
+                pos,
+              });
+            }
+          },
+        );
 
         return blockNodes;
       },
@@ -221,7 +258,7 @@ export const BlockNode = Extension.create({
      * @param {import('prosemirror-model').Node} node - Node that needs the identifier.
      * @param {number} pos - Document position of the node.
      */
-    const assignBlockId = (tr, node, pos) => {
+    const assignBlockId = (tr: Transaction, node: ProseMirrorNode, pos: number) => {
       tr.setNodeMarkup(
         pos,
         undefined,
@@ -236,7 +273,7 @@ export const BlockNode = Extension.create({
     return [
       new Plugin({
         key: BlockNodePluginKey,
-        appendTransaction: (transactions, oldState, newState) => {
+        appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
           const docChanges = transactions.some((tr) => tr.docChanged) && !oldState.doc.eq(newState.doc);
 
           if (hasInitialized && !docChanges) {
@@ -260,7 +297,7 @@ export const BlockNode = Extension.create({
             });
           } else {
             // Subsequent updates: only check affected ranges
-            const rangesToCheck = [];
+            const rangesToCheck: Array<[number, number]> = [];
             let shouldFallbackToFullTraversal = false;
 
             transactions.forEach((transaction, txIndex) => {
@@ -371,7 +408,7 @@ export const BlockNode = Extension.create({
  * @param {ProseMirrorNode} node - The ProseMirror node to check
  * @returns {boolean} True if the node type supports sdBlockId attribute
  */
-export const nodeAllowsSdBlockIdAttr = (node) => {
+export const nodeAllowsSdBlockIdAttr = (node: ProseMirrorNode): boolean => {
   return !!(node?.isBlock && node?.type?.spec?.attrs?.[SD_BLOCK_ID_ATTRIBUTE_NAME]);
 };
 
@@ -380,7 +417,7 @@ export const nodeAllowsSdBlockIdAttr = (node) => {
  * @param {ProseMirrorNode} node - The ProseMirror node to check
  * @returns {boolean} True if the node needs an sdBlockId assigned
  */
-export const nodeNeedsSdBlockId = (node) => {
+export const nodeNeedsSdBlockId = (node: ProseMirrorNode): boolean => {
   const currentId = node?.attrs?.[SD_BLOCK_ID_ATTRIBUTE_NAME];
   return !currentId;
 };
@@ -391,7 +428,7 @@ export const nodeNeedsSdBlockId = (node) => {
  * @param {Transaction[]} transactions - The ProseMirror transactions to check
  * @returns {boolean} True if new block nodes are found, false otherwise
  */
-export const checkForNewBlockNodesInTrs = (transactions) => {
+export const checkForNewBlockNodesInTrs = (transactions: readonly Transaction[]): boolean => {
   return Array.from(transactions).some((tr) => {
     return tr.steps.some((step) => {
       if (!(step instanceof ReplaceStep)) return false;
diff --git a/packages/super-editor/src/extensions/block-node/index.js b/packages/super-editor/src/extensions/block-node/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/block-node/index.js
rename to packages/super-editor/src/extensions/block-node/index.ts
diff --git a/packages/super-editor/src/extensions/bold/bold.js b/packages/super-editor/src/extensions/bold/bold.ts
similarity index 55%
rename from packages/super-editor/src/extensions/bold/bold.js
rename to packages/super-editor/src/extensions/bold/bold.ts
index ec1c00501..489c0891c 100644
--- a/packages/super-editor/src/extensions/bold/bold.js
+++ b/packages/super-editor/src/extensions/bold/bold.ts
@@ -1,20 +1,16 @@
-// @ts-nocheck
 import { Mark, Attribute } from '@core/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec, Mark as PmMark } from 'prosemirror-model';
 import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.js';
 
 /**
  * Configuration options for Bold
- * @typedef {Object} BoldOptions
  * @category Options
- * @property {Object} [htmlAttributes] HTML attributes for the strong element
- */
-
-/**
- * Attributes for bold marks
- * @typedef {Object} BoldAttributes
- * @category Attributes
- * @property {string} [value] Bold weight value ('0' renders as normal)
  */
+interface BoldOptions extends Record<string, unknown> {
+  /** HTML attributes for the strong element */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 /**
  * @module Bold
@@ -23,7 +19,7 @@ import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.j
  * @shortcut Mod-b | toggleBold | Toggle bold formatting
  * @shortcut Mod-B | toggleBold | Toggle bold formatting (uppercase)
  */
-export const Bold = Mark.create({
+export const Bold = Mark.create<BoldOptions>({
   name: 'bold',
 
   addOptions() {
@@ -36,7 +32,7 @@ export const Bold = Mark.create({
     return {
       value: {
         default: null,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { value?: string | null }) => {
           if (attrs.value == null) return {};
           if (attrs.value === '0' || !attrs.value) {
             return { style: 'font-weight: normal' };
@@ -50,19 +46,26 @@ export const Bold = Mark.create({
   parseDOM() {
     return [
       { tag: 'strong' },
-      { tag: 'b', getAttrs: (node) => node.style.fontWeight != 'normal' && null },
-      { style: 'font-weight=400', clearMark: (m) => m.type.name == 'strong' },
-      { style: 'font-weight', getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null },
+      {
+        tag: 'b',
+        getAttrs: (node: HTMLElement | string) => (node as HTMLElement).style?.fontWeight !== 'normal' && null,
+      },
+      { style: 'font-weight=400', clearMark: (m: PmMark) => m.type.name === 'strong' },
+      {
+        style: 'font-weight',
+        getAttrs: (value: string | HTMLElement) => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
+      },
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    const merged = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    const options = this.options as BoldOptions;
+    const merged = Attribute.mergeAttributes(options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>);
     const { value, ...rest } = merged || {};
     if (value === '0') {
-      return ['span', rest, 0];
+      return ['span', rest, 0] as const;
     }
-    return ['strong', rest, 0];
+    return ['strong', rest, 0] as const;
   },
 
   addCommands() {
@@ -101,8 +104,8 @@ export const Bold = Mark.create({
 
   addShortcuts() {
     return {
-      'Mod-b': () => this.editor.commands.toggleBold(),
-      'Mod-B': () => this.editor.commands.toggleBold(),
+      'Mod-b': () => (this.editor as { commands: { toggleBold: () => boolean } }).commands.toggleBold(),
+      'Mod-B': () => (this.editor as { commands: { toggleBold: () => boolean } }).commands.toggleBold(),
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/bold/index.js b/packages/super-editor/src/extensions/bold/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/bold/index.js
rename to packages/super-editor/src/extensions/bold/index.ts
diff --git a/packages/super-editor/src/extensions/bookmarks/bookmark-end.js b/packages/super-editor/src/extensions/bookmarks/bookmark-end.ts
similarity index 61%
rename from packages/super-editor/src/extensions/bookmarks/bookmark-end.js
rename to packages/super-editor/src/extensions/bookmarks/bookmark-end.ts
index af83bb045..ac77363c8 100644
--- a/packages/super-editor/src/extensions/bookmarks/bookmark-end.js
+++ b/packages/super-editor/src/extensions/bookmarks/bookmark-end.ts
@@ -1,12 +1,22 @@
-// @ts-nocheck
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
 
-import { Node, Attribute } from '@core/index.js';
+/**
+ * Bookmark end options
+ * @category Options
+ */
+export interface BookmarkEndOptions extends Record<string, unknown> {
+  /**
+   * HTML attributes for the bookmark end element
+   */
+  htmlAttributes: Record<string, string>;
+}
 
 /**
  * @module BookmarkEnd
  * @sidebarTitle Bookmarks
  */
-export const BookmarkEnd = Node.create({
+export const BookmarkEnd = Node.create<BookmarkEndOptions>({
   name: 'bookmarkEnd',
   group: 'inline',
   inline: true,
@@ -14,11 +24,6 @@ export const BookmarkEnd = Node.create({
 
   addOptions() {
     return {
-      /**
-       * @typedef {Object} BookmarkEndOptions
-       * @category Options
-       * @property {Object} [htmlAttributes] - HTML attributes for the bookmark end element
-       */
       htmlAttributes: {
         style: 'height: 0; width: 0; display: none;',
         'aria-label': 'Bookmark end node',
@@ -35,7 +40,7 @@ export const BookmarkEnd = Node.create({
        */
       id: {
         default: null,
-        renderDOM: ({ id }) => {
+        renderDOM: ({ id }: { id?: string }) => {
           if (id) return { 'data-bookmark-end-id': id };
           return {};
         },
@@ -47,7 +52,7 @@ export const BookmarkEnd = Node.create({
        */
       displacedByCustomXml: {
         default: null,
-        renderDOM: ({ displacedByCustomXml }) => {
+        renderDOM: ({ displacedByCustomXml }: { displacedByCustomXml?: string }) => {
           if (displacedByCustomXml) return { 'data-displaced-by-custom-xml': displacedByCustomXml };
           return {};
         },
@@ -63,11 +68,16 @@ export const BookmarkEnd = Node.create({
     };
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      'span',
+      Attribute.mergeAttributes(
+        (this.options as BookmarkEndOptions).htmlAttributes,
+        htmlAttributes as Record<string, AttributeValue>,
+      ),
+    ];
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -80,13 +90,17 @@ export const BookmarkEnd = Node.create({
        * insertBookmarkEnd('bookmark-001')
        */
       insertBookmarkEnd:
-        (id) =>
-        ({ commands }) => {
+        (id: string) =>
+        ({
+          commands,
+        }: {
+          commands: { insertContent: (content: { type: string; attrs: { id: string } }) => boolean };
+        }) => {
           return commands.insertContent({
             type: this.name,
             attrs: { id },
           });
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 });
diff --git a/packages/super-editor/src/extensions/bookmarks/bookmark-start.js b/packages/super-editor/src/extensions/bookmarks/bookmark-start.ts
similarity index 60%
rename from packages/super-editor/src/extensions/bookmarks/bookmark-start.js
rename to packages/super-editor/src/extensions/bookmarks/bookmark-start.ts
index 8f6150b18..1ae9372f3 100644
--- a/packages/super-editor/src/extensions/bookmarks/bookmark-start.js
+++ b/packages/super-editor/src/extensions/bookmarks/bookmark-start.ts
@@ -1,20 +1,39 @@
-// @ts-nocheck
-
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec, Node as PmNode } from 'prosemirror-model';
+import type { Transaction } from 'prosemirror-state';
+import type { Editor } from '@core/Editor.js';
 
 /**
  * Bookmark configuration
- * @typedef {Object} BookmarkConfig
- * @property {string} name - Bookmark name for reference
- * @property {string} [id] - Optional unique identifier
  */
+export interface BookmarkConfig {
+  /**
+   * Bookmark name for reference
+   */
+  name: string;
+  /**
+   * Optional unique identifier
+   */
+  id?: string;
+}
+
+/**
+ * Bookmark options
+ * @category Options
+ */
+export interface BookmarkStartOptions extends Record<string, unknown> {
+  /**
+   * HTML attributes for the bookmark element
+   */
+  htmlAttributes: Record<string, string>;
+}
 
 /**
  * @module BookmarkStart
  * @sidebarTitle Bookmarks
  * @snippetPath /snippets/extensions/bookmarks.mdx
  */
-export const BookmarkStart = Node.create({
+export const BookmarkStart = Node.create<BookmarkStartOptions>({
   name: 'bookmarkStart',
   group: 'inline',
   content: 'inline*',
@@ -22,11 +41,6 @@ export const BookmarkStart = Node.create({
 
   addOptions() {
     return {
-      /**
-       * @typedef {Object} BookmarkOptions
-       * @category Options
-       * @property {Object} [htmlAttributes] - HTML attributes for the bookmark element
-       */
       htmlAttributes: {
         style: 'height: 0; width: 0;',
         'aria-label': 'Bookmark start node',
@@ -43,7 +57,7 @@ export const BookmarkStart = Node.create({
        */
       name: {
         default: null,
-        renderDOM: ({ name }) => {
+        renderDOM: ({ name }: { name?: string }) => {
           if (name) return { name };
           return {};
         },
@@ -55,7 +69,7 @@ export const BookmarkStart = Node.create({
        */
       id: {
         default: null,
-        renderDOM: ({ id }) => {
+        renderDOM: ({ id }: { id?: string }) => {
           if (id) return { id };
           return {};
         },
@@ -63,11 +77,16 @@ export const BookmarkStart = Node.create({
     };
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['a', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      'a',
+      Attribute.mergeAttributes(
+        (this.options as BookmarkStartOptions).htmlAttributes,
+        htmlAttributes as Record<string, AttributeValue>,
+      ),
+    ];
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -84,8 +103,12 @@ export const BookmarkStart = Node.create({
        * @note Bookmarks are invisible markers for navigation and cross-references
        */
       insertBookmark:
-        (config) =>
-        ({ commands }) => {
+        (config: BookmarkConfig) =>
+        ({
+          commands,
+        }: {
+          commands: { insertContent: (content: { type: string; attrs: BookmarkConfig }) => boolean };
+        }) => {
           return commands.insertContent({
             type: this.name,
             attrs: config,
@@ -102,12 +125,12 @@ export const BookmarkStart = Node.create({
        * @note Scrolls the document to the bookmark position
        */
       goToBookmark:
-        (name) =>
-        ({ editor, tr }) => {
+        (name: string) =>
+        ({ editor, tr }: { editor: Editor; tr: Transaction }) => {
           const { doc } = tr;
-          let targetPos = null;
+          let targetPos: number | null = null;
 
-          doc.descendants((node, pos) => {
+          doc.descendants((node: PmNode, pos: number) => {
             if (node.type.name === 'bookmarkStart' && node.attrs.name === name) {
               targetPos = pos;
               return false; // Stop iteration
@@ -120,6 +143,6 @@ export const BookmarkStart = Node.create({
           }
           return false;
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 });
diff --git a/packages/super-editor/src/extensions/bookmarks/index.js b/packages/super-editor/src/extensions/bookmarks/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/bookmarks/index.js
rename to packages/super-editor/src/extensions/bookmarks/index.ts
diff --git a/packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.js b/packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.ts
similarity index 67%
rename from packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.js
rename to packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.ts
index c077eb31d..e69f368f3 100644
--- a/packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.js
+++ b/packages/super-editor/src/extensions/collaboration-cursor/collaboration-cursor.ts
@@ -1,5 +1,12 @@
 import { Extension } from '@core/index.js';
 import { yCursorPlugin } from 'y-prosemirror';
+import type { Awareness } from 'y-protocols/awareness';
+
+interface CollaborationUser {
+  name?: string;
+  email?: string;
+  color: string;
+}
 
 export const CollaborationCursor = Extension.create({
   name: 'collaborationCursor',
@@ -23,21 +30,26 @@ export const CollaborationCursor = Extension.create({
   },
 
   addPmPlugins() {
-    const { collaborationProvider: provider = null } = this.editor.options;
+    const editor = this.editor;
+    if (!editor) return [];
+
+    const { collaborationProvider: provider = null } = editor.options as {
+      collaborationProvider?: { awareness: Awareness } | null;
+    };
     if (!provider) return [];
 
     return [yCursorPlugin(provider.awareness, { cursorBuilder: customCursors })];
   },
 });
 
-const customCursors = (user) => {
+const customCursors = (user: CollaborationUser): HTMLSpanElement => {
   const cursor = document.createElement('span');
   cursor.classList.add('ProseMirror-yjs-cursor');
   cursor.setAttribute('style', `border-color: ${user.color}`);
 
   const userDiv = document.createElement('div');
   userDiv.setAttribute('style', `background-color: ${user.color}`);
-  userDiv.insertBefore(document.createTextNode(user.name || user.email), null);
+  userDiv.insertBefore(document.createTextNode(user.name || user.email || ''), null);
   cursor.insertBefore(userDiv, null);
   return cursor;
 };
diff --git a/packages/super-editor/src/extensions/collaboration-cursor/index.js b/packages/super-editor/src/extensions/collaboration-cursor/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/collaboration-cursor/index.js
rename to packages/super-editor/src/extensions/collaboration-cursor/index.ts
diff --git a/packages/super-editor/src/extensions/collaboration/collaboration-helpers.d.ts b/packages/super-editor/src/extensions/collaboration/collaboration-helpers.d.ts
index 97996b5a1..8289e9334 100644
--- a/packages/super-editor/src/extensions/collaboration/collaboration-helpers.d.ts
+++ b/packages/super-editor/src/extensions/collaboration/collaboration-helpers.d.ts
@@ -1 +1,4 @@
-export function updateYdocDocxData(...args: any[]): any;
+import type { Editor } from '@core/Editor.js';
+import type * as Y from 'yjs';
+
+export function updateYdocDocxData(editor: Editor, ydoc?: Y.Doc): Promise<void>;
diff --git a/packages/super-editor/src/extensions/collaboration/collaboration-helpers.js b/packages/super-editor/src/extensions/collaboration/collaboration-helpers.ts
similarity index 57%
rename from packages/super-editor/src/extensions/collaboration/collaboration-helpers.js
rename to packages/super-editor/src/extensions/collaboration/collaboration-helpers.ts
index 8b7fa05d4..6f2216f29 100644
--- a/packages/super-editor/src/extensions/collaboration/collaboration-helpers.js
+++ b/packages/super-editor/src/extensions/collaboration/collaboration-helpers.ts
@@ -1,32 +1,35 @@
+import type { Editor } from '@core/Editor.js';
+import type * as Y from 'yjs';
+
 /**
  * Update the Ydoc document data with the latest Docx XML.
  *
  * @param {Editor} editor The editor instance
  * @returns {Promise<void>}
  */
-export const updateYdocDocxData = async (editor, ydoc) => {
+export const updateYdocDocxData = async (editor: Editor, ydoc?: Y.Doc): Promise<void> => {
   try {
-    ydoc = ydoc || editor?.options?.ydoc;
+    ydoc = ydoc || (editor?.options as { ydoc?: Y.Doc })?.ydoc;
     if (!ydoc) return;
     if (!editor || editor.isDestroyed) return;
 
     const metaMap = ydoc.getMap('meta');
     const docxValue = metaMap.get('docx');
 
-    let docx = [];
+    let docx: Array<{ name: string; content: unknown }> = [];
     if (Array.isArray(docxValue)) {
       docx = [...docxValue];
-    } else if (docxValue && typeof docxValue.toArray === 'function') {
-      docx = docxValue.toArray();
-    } else if (docxValue && typeof docxValue[Symbol.iterator] === 'function') {
-      docx = Array.from(docxValue);
+    } else if (docxValue && typeof (docxValue as { toArray?: () => unknown[] }).toArray === 'function') {
+      docx = (docxValue as { toArray: () => Array<{ name: string; content: unknown }> }).toArray();
+    } else if (docxValue && typeof (docxValue as Iterable<unknown>)[Symbol.iterator] === 'function') {
+      docx = Array.from(docxValue as Iterable<{ name: string; content: unknown }>);
     }
 
     if (!docx.length && Array.isArray(editor.options.content)) {
-      docx = [...editor.options.content];
+      docx = [...(editor.options.content as Array<{ name: string; content: unknown }>)];
     }
 
-    const newXml = await editor.exportDocx({ getUpdatedDocs: true });
+    const newXml = (await editor.exportDocx({ getUpdatedDocs: true })) as Record<string, unknown> | null | undefined;
     if (!newXml || typeof newXml !== 'object') return;
 
     let hasChanges = false;
@@ -56,7 +59,7 @@ export const updateYdocDocxData = async (editor, ydoc) => {
         () => {
           metaMap.set('docx', docx);
         },
-        { event: 'docx-update', user: editor.options.user },
+        { event: 'docx-update', user: editor.options.user } as Y.Transaction['origin'],
       );
     }
   } catch (error) {
diff --git a/packages/super-editor/src/extensions/collaboration/collaboration.js b/packages/super-editor/src/extensions/collaboration/collaboration.js
deleted file mode 100644
index ac61bc4d7..000000000
--- a/packages/super-editor/src/extensions/collaboration/collaboration.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Extension } from '@core/index.js';
-import { PluginKey } from 'prosemirror-state';
-import { encodeStateAsUpdate } from 'yjs';
-import { ySyncPlugin, prosemirrorToYDoc } from 'y-prosemirror';
-import { updateYdocDocxData } from '@extensions/collaboration/collaboration-helpers.js';
-
-export const CollaborationPluginKey = new PluginKey('collaboration');
-
-export const Collaboration = Extension.create({
-  name: 'collaboration',
-
-  priority: 1000,
-
-  addOptions() {
-    return {
-      ydoc: null,
-      field: 'supereditor',
-      fragment: null,
-      isReady: false,
-    };
-  },
-
-  addPmPlugins() {
-    if (!this.editor.options.ydoc) return [];
-    this.options.ydoc = this.editor.options.ydoc;
-
-    initSyncListener(this.options.ydoc, this.editor, this);
-    initDocumentListener({ ydoc: this.options.ydoc, editor: this.editor });
-
-    const [syncPlugin, fragment] = createSyncPlugin(this.options.ydoc, this.editor);
-    this.options.fragment = fragment;
-
-    const metaMap = this.options.ydoc.getMap('media');
-    metaMap.observe((event) => {
-      event.changes.keys.forEach((_, key) => {
-        if (!(key in this.editor.storage.image.media)) {
-          const fileData = metaMap.get(key);
-          this.editor.storage.image.media[key] = fileData;
-        }
-      });
-    });
-
-    return [syncPlugin];
-  },
-
-  addCommands() {
-    return {
-      addImageToCollaboration:
-        ({ mediaPath, fileData }) =>
-        () => {
-          if (!this.options.ydoc || !mediaPath || !fileData) return false;
-          const mediaMap = this.options.ydoc.getMap('media');
-          mediaMap.set(mediaPath, fileData);
-          return true;
-        },
-    };
-  },
-});
-
-export const createSyncPlugin = (ydoc, editor) => {
-  const fragment = ydoc.getXmlFragment('supereditor');
-  const onFirstRender = () => {
-    if (!editor.options.isNewFile) return;
-    initializeMetaMap(ydoc, editor);
-  };
-
-  return [ySyncPlugin(fragment, { onFirstRender }), fragment];
-};
-
-export const initializeMetaMap = (ydoc, editor) => {
-  const metaMap = ydoc.getMap('meta');
-  metaMap.set('docx', editor.options.content);
-  metaMap.set('fonts', editor.options.fonts);
-
-  const mediaMap = ydoc.getMap('media');
-  Object.entries(editor.options.mediaFiles).forEach(([key, value]) => {
-    mediaMap.set(key, value);
-  });
-};
-
-const checkDocxChanged = (transaction) => {
-  if (!transaction.changed) return false;
-
-  for (const [, value] of transaction.changed.entries()) {
-    if (value instanceof Set && value.has('docx')) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-const initDocumentListener = ({ ydoc, editor }) => {
-  const debouncedUpdate = debounce((editor) => {
-    updateYdocDocxData(editor);
-  }, 1000);
-
-  ydoc.on('afterTransaction', (transaction) => {
-    const { local } = transaction;
-
-    const hasChangedDocx = checkDocxChanged(transaction);
-    if (!hasChangedDocx && transaction.changed?.size && local) {
-      debouncedUpdate(editor);
-    }
-  });
-};
-
-const debounce = (fn, wait) => {
-  let timeout = null;
-  return (...args) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => fn.apply(this, args), wait);
-  };
-};
-
-const initSyncListener = (ydoc, editor, extension) => {
-  const provider = editor.options.collaborationProvider;
-  if (!provider) return;
-
-  const emit = () => {
-    extension.options.isReady = true;
-    provider.off('synced', emit);
-    editor.emit('collaborationReady', { editor, ydoc });
-  };
-
-  if (provider.synced) {
-    setTimeout(() => {
-      emit();
-    }, 250);
-    return;
-  }
-  provider.on('synced', emit);
-};
-
-export const generateCollaborationData = async (editor) => {
-  const ydoc = prosemirrorToYDoc(editor.state.doc, 'supereditor');
-  initializeMetaMap(ydoc, editor);
-  await updateYdocDocxData(editor, ydoc);
-  return encodeStateAsUpdate(ydoc);
-};
diff --git a/packages/super-editor/src/extensions/collaboration/collaboration.test.js b/packages/super-editor/src/extensions/collaboration/collaboration.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/collaboration/collaboration.test.js
rename to packages/super-editor/src/extensions/collaboration/collaboration.test.ts
diff --git a/packages/super-editor/src/extensions/collaboration/collaboration.ts b/packages/super-editor/src/extensions/collaboration/collaboration.ts
new file mode 100644
index 000000000..4068a133a
--- /dev/null
+++ b/packages/super-editor/src/extensions/collaboration/collaboration.ts
@@ -0,0 +1,166 @@
+import { Extension } from '@core/index.js';
+import { PluginKey } from 'prosemirror-state';
+import { encodeStateAsUpdate } from 'yjs';
+import type * as Y from 'yjs';
+import { ySyncPlugin, prosemirrorToYDoc } from 'y-prosemirror';
+import { updateYdocDocxData } from '@extensions/collaboration/collaboration-helpers.js';
+import type { Editor } from '@core/Editor.js';
+
+export const CollaborationPluginKey = new PluginKey('collaboration');
+
+interface CollaborationOptions extends Record<string, unknown> {
+  ydoc: Y.Doc | null;
+  field: string;
+  fragment: Y.XmlFragment | null;
+  isReady: boolean;
+}
+
+export const Collaboration = Extension.create<CollaborationOptions>({
+  name: 'collaboration',
+
+  priority: 1000,
+
+  addOptions() {
+    return {
+      ydoc: null,
+      field: 'supereditor',
+      fragment: null,
+      isReady: false,
+    };
+  },
+
+  addPmPlugins() {
+    const editor = this.editor;
+    if (!editor) return [];
+
+    const ydoc = (editor.options as { ydoc?: Y.Doc }).ydoc;
+    if (!ydoc) return [];
+
+    this.options.ydoc = ydoc;
+
+    initSyncListener(ydoc, editor, this as { options: { isReady: boolean } });
+    initDocumentListener({ ydoc, editor });
+
+    const [syncPlugin, fragment] = createSyncPlugin(ydoc, editor);
+    this.options.fragment = fragment;
+
+    const metaMap = ydoc.getMap('media');
+    metaMap.observe((event: Y.YMapEvent<unknown>) => {
+      event.changes.keys.forEach((_change: { action: string }, key: string) => {
+        const imageStorage = editor.storage.image as { media: Record<string, unknown> } | undefined;
+        if (imageStorage && !(key in imageStorage.media)) {
+          const fileData = metaMap.get(key);
+          imageStorage.media[key] = fileData;
+        }
+      });
+    });
+
+    return [syncPlugin];
+  },
+
+  addCommands() {
+    return {
+      addImageToCollaboration:
+        ({ mediaPath, fileData }: { mediaPath: string; fileData: unknown }) =>
+        () => {
+          const ydoc = this.options.ydoc;
+          if (!ydoc || !mediaPath || !fileData) return false;
+          const mediaMap = ydoc.getMap('media');
+          mediaMap.set(mediaPath, fileData);
+          return true;
+        },
+    };
+  },
+});
+
+export const createSyncPlugin = (ydoc: Y.Doc, editor: Editor) => {
+  const fragment = ydoc.getXmlFragment('supereditor');
+  const onFirstRender = () => {
+    if (!(editor.options as { isNewFile?: boolean }).isNewFile) return;
+    initializeMetaMap(ydoc, editor);
+  };
+
+  return [ySyncPlugin(fragment, { onFirstRender }), fragment];
+};
+
+export const initializeMetaMap = (ydoc: Y.Doc, editor: Editor) => {
+  const metaMap = ydoc.getMap('meta');
+  metaMap.set('docx', editor.options.content);
+  metaMap.set('fonts', (editor.options as { fonts?: unknown }).fonts);
+
+  const mediaMap = ydoc.getMap('media');
+  Object.entries((editor.options as { mediaFiles?: Record<string, unknown> }).mediaFiles || {}).forEach(
+    ([key, value]) => {
+      mediaMap.set(key, value);
+    },
+  );
+};
+
+const checkDocxChanged = (transaction: Y.Transaction) => {
+  if (!transaction.changed) return false;
+
+  for (const [, value] of transaction.changed.entries()) {
+    if (value instanceof Set && value.has('docx')) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const initDocumentListener = ({ ydoc, editor }: { ydoc: Y.Doc; editor: Editor }) => {
+  const debouncedUpdate = debounce((editor: Editor) => {
+    updateYdocDocxData(editor, ydoc);
+  }, 1000);
+
+  ydoc.on('afterTransaction', (transaction) => {
+    const { local } = transaction;
+
+    const hasChangedDocx = checkDocxChanged(transaction);
+    if (!hasChangedDocx && transaction.changed?.size && local) {
+      debouncedUpdate(editor);
+    }
+  });
+};
+
+const debounce = <T extends unknown[]>(fn: (...args: T) => void, wait: number) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  return (...args: T) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), wait);
+  };
+};
+
+const initSyncListener = (ydoc: Y.Doc, editor: Editor, extension: { options: { isReady: boolean } }) => {
+  const provider = (
+    editor.options as {
+      collaborationProvider?: {
+        synced: boolean;
+        on: (event: string, callback: () => void) => void;
+        off: (event: string, callback: () => void) => void;
+      };
+    }
+  ).collaborationProvider;
+  if (!provider) return;
+
+  const emit = () => {
+    extension.options.isReady = true;
+    if (provider) provider.off('synced', emit);
+    editor.emit('collaborationReady', { editor, ydoc });
+  };
+
+  if (provider?.synced) {
+    setTimeout(() => {
+      emit();
+    }, 250);
+    return;
+  }
+  provider?.on('synced', emit);
+};
+
+export const generateCollaborationData = async (editor: Editor): Promise<Uint8Array> => {
+  const ydoc = prosemirrorToYDoc(editor.state.doc, 'supereditor');
+  initializeMetaMap(ydoc, editor);
+  await updateYdocDocxData(editor, ydoc);
+  return encodeStateAsUpdate(ydoc);
+};
diff --git a/packages/super-editor/src/extensions/collaboration/index.js b/packages/super-editor/src/extensions/collaboration/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/collaboration/index.js
rename to packages/super-editor/src/extensions/collaboration/index.ts
diff --git a/packages/super-editor/src/extensions/color/color.js b/packages/super-editor/src/extensions/color/color.ts
similarity index 67%
rename from packages/super-editor/src/extensions/color/color.js
rename to packages/super-editor/src/extensions/color/color.ts
index 38fb3f258..4b1a701a1 100644
--- a/packages/super-editor/src/extensions/color/color.js
+++ b/packages/super-editor/src/extensions/color/color.ts
@@ -1,24 +1,26 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
 
 /**
  * Color value format
- * @typedef {string} ColorValue
  * @description Accepts hex colors (#ff0000), rgb(255,0,0), or named colors (red)
  */
+export type ColorValue = string;
 
 /**
  * Configuration options for Color
- * @typedef {Object} ColorOptions
  * @category Options
- * @property {string[]} [types=['textStyle']] Mark types to add color support to
  */
+export interface ColorOptions extends Record<string, unknown> {
+  /**
+   * Mark types to add color support to
+   * @default ['textStyle']
+   */
+  types: string[];
+}
 
 /**
  * Attributes for color marks
- * @typedef {Object} ColorAttributes
  * @category Attributes
- * @property {ColorValue} [color] Text color value
  * @example
  * // Apply color to selected text
  * editor.commands.setColor('#ff0000')
@@ -26,13 +28,19 @@ import { Extension } from '@core/index.js';
  * // Remove color
  * editor.commands.unsetColor()
  */
+export interface ColorAttributes {
+  /**
+   * Text color value
+   */
+  color?: ColorValue;
+}
 
 /**
  * @module Color
  * @sidebarTitle Color
  * @snippetPath /snippets/extensions/color.mdx
  */
-export const Color = Extension.create({
+export const Color = Extension.create<ColorOptions>({
   name: 'color',
 
   addOptions() {
@@ -48,8 +56,8 @@ export const Color = Extension.create({
         attributes: {
           color: {
             default: null,
-            parseDOM: (el) => el.style.color?.replace(/['"]+/g, ''),
-            renderDOM: (attrs) => {
+            parseDOM: (el: HTMLElement) => el.style.color?.replace(/['"]+/g, ''),
+            renderDOM: (attrs: { color?: string | null }) => {
               if (!attrs.color) return {};
               return { style: `color: ${attrs.color}` };
             },
@@ -79,8 +87,12 @@ export const Color = Extension.create({
        * @note Preserves other text styling attributes
        */
       setColor:
-        (color) =>
-        ({ chain }) => {
+        (color: ColorValue) =>
+        ({
+          chain,
+        }: {
+          chain: () => { setMark: (mark: string, attrs: { color: ColorValue }) => { run: () => boolean } };
+        }) => {
           return chain().setMark('textStyle', { color: color }).run();
         },
 
@@ -93,7 +105,13 @@ export const Color = Extension.create({
        */
       unsetColor:
         () =>
-        ({ chain }) => {
+        ({
+          chain,
+        }: {
+          chain: () => {
+            setMark: (mark: string, attrs: { color: null }) => { removeEmptyTextStyle: () => { run: () => boolean } };
+          };
+        }) => {
           return chain().setMark('textStyle', { color: null }).removeEmptyTextStyle().run();
         },
     };
diff --git a/packages/super-editor/src/extensions/color/index.js b/packages/super-editor/src/extensions/color/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/color/index.js
rename to packages/super-editor/src/extensions/color/index.ts
diff --git a/packages/super-editor/src/extensions/comment/comment-import-helpers.test.js b/packages/super-editor/src/extensions/comment/comment-import-helpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/comment-import-helpers.test.js
rename to packages/super-editor/src/extensions/comment/comment-import-helpers.test.ts
diff --git a/packages/super-editor/src/extensions/comment/comment-import-helpers.js b/packages/super-editor/src/extensions/comment/comment-import-helpers.ts
similarity index 56%
rename from packages/super-editor/src/extensions/comment/comment-import-helpers.js
rename to packages/super-editor/src/extensions/comment/comment-import-helpers.ts
index 270be8804..78ac45874 100644
--- a/packages/super-editor/src/extensions/comment/comment-import-helpers.js
+++ b/packages/super-editor/src/extensions/comment/comment-import-helpers.ts
@@ -1,6 +1,28 @@
 import { v4 as uuidv4 } from 'uuid';
 
-export const resolveCommentMeta = ({ converter, importedId }) => {
+export interface Comment {
+  importedId?: string | number;
+  commentId: string;
+  internal?: boolean;
+  isInternal?: boolean;
+  textJson?: unknown;
+  creatorName?: string | null;
+  creatorEmail?: string | null;
+  createdTime?: string | null;
+  isDone?: boolean;
+}
+
+export interface Converter {
+  comments?: Comment[];
+}
+
+export const resolveCommentMeta = ({
+  converter,
+  importedId,
+}: {
+  converter?: Converter;
+  importedId?: string | number;
+}) => {
   const comments = converter?.comments || [];
   const matchingImportedComment = comments.find((c) => c.importedId == importedId);
 
@@ -15,7 +37,17 @@ export const resolveCommentMeta = ({ converter, importedId }) => {
   };
 };
 
-export const ensureFallbackComment = ({ converter, matchingImportedComment, commentId, importedId }) => {
+export const ensureFallbackComment = ({
+  converter,
+  matchingImportedComment,
+  commentId,
+  importedId,
+}: {
+  converter?: Converter;
+  matchingImportedComment?: Comment;
+  commentId: string;
+  importedId?: string | number;
+}) => {
   if (matchingImportedComment || !converter) return;
 
   converter.comments = converter.comments || [];
diff --git a/packages/super-editor/src/extensions/comment/comment.js b/packages/super-editor/src/extensions/comment/comment.ts
similarity index 55%
rename from packages/super-editor/src/extensions/comment/comment.js
rename to packages/super-editor/src/extensions/comment/comment.ts
index df386af27..e2d3c9211 100644
--- a/packages/super-editor/src/extensions/comment/comment.js
+++ b/packages/super-editor/src/extensions/comment/comment.ts
@@ -1,6 +1,11 @@
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
 
-export const CommentRangeStart = Node.create({
+interface CommentOptions extends Record<string, unknown> {
+  htmlAttributes: Record<string, string>;
+}
+
+export const CommentRangeStart = Node.create<CommentOptions>({
   name: 'commentRangeStart',
 
   group: 'inline',
@@ -26,8 +31,11 @@ export const CommentRangeStart = Node.create({
     };
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['commentRangeStart', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      'commentRangeStart',
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>),
+    ];
   },
 
   addAttributes() {
@@ -43,7 +51,7 @@ export const CommentRangeStart = Node.create({
   },
 });
 
-export const CommentRangeEnd = Node.create({
+export const CommentRangeEnd = Node.create<CommentOptions>({
   name: 'commentRangeEnd',
 
   group: 'inline',
@@ -69,8 +77,11 @@ export const CommentRangeEnd = Node.create({
     return [{ tag: 'commentRangeEnd' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['commentRangeEnd', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      'commentRangeEnd',
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>),
+    ];
   },
 
   addAttributes() {
@@ -82,7 +93,7 @@ export const CommentRangeEnd = Node.create({
   },
 });
 
-export const CommentReference = Node.create({
+export const CommentReference = Node.create<CommentOptions>({
   name: 'commentReference',
 
   group: 'inline',
@@ -108,8 +119,11 @@ export const CommentReference = Node.create({
     return [{ tag: 'commentReference' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['commentReference', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      'commentReference',
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>),
+    ];
   },
 
   addAttributes() {
diff --git a/packages/super-editor/src/extensions/comment/comments-constants.js b/packages/super-editor/src/extensions/comment/comments-constants.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/comments-constants.js
rename to packages/super-editor/src/extensions/comment/comments-constants.ts
diff --git a/packages/super-editor/src/extensions/comment/comments-helpers.d.ts b/packages/super-editor/src/extensions/comment/comments-helpers.d.ts
index 76b704ef9..ea90eba64 100644
--- a/packages/super-editor/src/extensions/comment/comments-helpers.d.ts
+++ b/packages/super-editor/src/extensions/comment/comments-helpers.d.ts
@@ -1,2 +1,18 @@
-export function prepareCommentsForExport(...args: any[]): any;
-export function prepareCommentsForImport(...args: any[]): any;
+import type { Node as PmNode, Schema } from 'prosemirror-model';
+import type { Transaction } from 'prosemirror-state';
+import type { Converter } from './comment-import-helpers.js';
+
+export interface CommentForExport {
+  commentId: string | number;
+  parentCommentId?: string | number | null;
+  createdTime?: number | string | null;
+}
+
+export function prepareCommentsForExport(
+  doc: PmNode,
+  tr: Transaction,
+  schema: Schema,
+  comments?: CommentForExport[],
+): Transaction;
+
+export function prepareCommentsForImport(doc: PmNode, tr: Transaction, schema: Schema, converter?: Converter): void;
diff --git a/packages/super-editor/src/extensions/comment/comments-helpers.js b/packages/super-editor/src/extensions/comment/comments-helpers.ts
similarity index 67%
rename from packages/super-editor/src/extensions/comment/comments-helpers.js
rename to packages/super-editor/src/extensions/comment/comments-helpers.ts
index 30e3d7e7c..73904b610 100644
--- a/packages/super-editor/src/extensions/comment/comments-helpers.js
+++ b/packages/super-editor/src/extensions/comment/comments-helpers.ts
@@ -1,39 +1,46 @@
 import { CommentMarkName } from './comments-constants.js';
 import { CommentsPluginKey } from './comments-plugin.js';
-import { ensureFallbackComment, resolveCommentMeta } from './comment-import-helpers.js';
+import { ensureFallbackComment, resolveCommentMeta, type Converter } from './comment-import-helpers.js';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { Node as PmNode, Schema, Mark as PmMark } from 'prosemirror-model';
+import type { Editor } from '@core/Editor.js';
 
 /**
- * Remove comment by id
- *
- * @param {Object} param0
- * @param {string} param0.commentId The comment ID
- * @param {import('prosemirror-state').EditorState} state The current editor state
- * @param {import('prosemirror-state').Transaction} tr The current transaction
- * @param {Function} param0.dispatch The dispatch function
- * @returns {void}
+ * Remove comment by id.
  */
-export const removeCommentsById = ({ commentId, state, tr, dispatch }) => {
-  const positions = getCommentPositionsById(commentId, state.doc);
+export const removeCommentsById = ({
+  commentId,
+  importedId,
+  state,
+  tr,
+  dispatch,
+}: {
+  commentId?: string;
+  importedId?: string;
+  state: EditorState;
+  tr: Transaction;
+  dispatch?: (tr: Transaction) => void;
+}) => {
+  const targetId = commentId || importedId;
+  if (!targetId) return;
+
+  const positions = getCommentPositionsById(targetId, state.doc);
 
   // Remove the mark
   positions.forEach(({ from, to }) => {
     tr.removeMark(from, to, state.schema.marks[CommentMarkName]);
   });
-  dispatch(tr);
+  dispatch?.(tr);
 };
 
 /**
- * Get the positions of a comment by ID
- *
- * @param {String} commentId The comment ID
- * @param {import('prosemirror-model').Node} doc The prosemirror document
- * @returns {Array} The positions of the comment
+ * Get the positions of a comment by ID.
  */
-export const getCommentPositionsById = (commentId, doc) => {
-  const positions = [];
-  doc.descendants((node, pos) => {
+export const getCommentPositionsById = (commentId: string, doc: PmNode): Array<{ from: number; to: number }> => {
+  const positions: Array<{ from: number; to: number }> = [];
+  doc.descendants((node: PmNode, pos: number) => {
     const { marks } = node;
-    const commentMark = marks.find((mark) => mark.type.name === CommentMarkName);
+    const commentMark = marks.find((mark: PmMark) => mark.type.name === CommentMarkName);
 
     if (commentMark) {
       const { attrs } = commentMark;
@@ -51,32 +58,57 @@ export const getCommentPositionsById = (commentId, doc) => {
  * This function handles both Word format (via commentsExtended.xml) and Google Docs format
  * (via nested comment ranges). For threaded comments from Google Docs, it maintains the
  * nested structure: Parent Start → Child Start → Content → Parent End → Child End
- *
- * @param {import('prosemirror-model').Node} doc The prosemirror document
- * @param {import('prosemirror-state').Transaction} tr The preparation transaction
- * @param {import('prosemirror-model').Schema} schema The editor schema
- * @param {Array[Object]} comments The comments to prepare (may contain parentCommentId relationships)
- * @returns {void}
  */
-export const prepareCommentsForExport = (doc, tr, schema, comments = []) => {
+export const prepareCommentsForExport = (
+  doc: PmNode,
+  tr: Transaction,
+  schema: Schema,
+  comments: Array<{
+    commentId: string | number;
+    parentCommentId?: string | number | null;
+    createdTime?: number | string | null;
+    isInternal?: boolean | null;
+  }> = [],
+) => {
+  const toCreatedTimeMs = (value: unknown): number => {
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+    if (typeof value === 'string') {
+      const parsedDate = Date.parse(value);
+      if (!Number.isNaN(parsedDate)) return parsedDate;
+      const parsedNumber = Number(value);
+      if (Number.isFinite(parsedNumber)) return parsedNumber;
+    }
+    return 0;
+  };
+
   // Create a map of commentId -> comment for quick lookup
-  const commentMap = new Map();
+  const commentMap = new Map<string | number, (typeof comments)[number]>();
   comments.forEach((c) => {
     commentMap.set(c.commentId, c);
   });
 
   // Note: Parent/child relationships are tracked via comment.parentCommentId property
-  const startNodes = [];
-  const endNodes = [];
-  const seen = new Set();
-
-  doc.descendants((node, pos) => {
+  const startNodes: Array<{
+    pos: number;
+    node: PmNode;
+    commentId: string | number;
+    parentCommentId?: string | number | null;
+  }> = [];
+  const endNodes: Array<{
+    pos: number;
+    node: PmNode;
+    commentId: string | number;
+    parentCommentId?: string | number | null;
+  }> = [];
+  const seen = new Set<string | number>();
+
+  doc.descendants((node: PmNode, pos: number) => {
     const commentMarks = node.marks?.filter((mark) => mark.type.name === CommentMarkName) || [];
     commentMarks.forEach((commentMark) => {
       const { attrs = {} } = commentMark;
-      const { commentId } = attrs;
+      const { commentId } = attrs as { commentId?: string | number };
 
-      if (commentId === 'pending') return;
+      if (commentId === 'pending' || commentId == null) return;
       if (seen.has(commentId)) return;
       seen.add(commentId);
 
@@ -103,7 +135,7 @@ export const prepareCommentsForExport = (doc, tr, schema, comments = []) => {
       // Find child comments that should be nested inside this comment
       const childComments = comments
         .filter((c) => c.parentCommentId === commentId)
-        .sort((a, b) => a.createdTime - b.createdTime);
+        .sort((a, b) => toCreatedTimeMs(a.createdTime) - toCreatedTimeMs(b.createdTime));
 
       childComments.forEach((c) => {
         if (seen.has(c.commentId)) return;
@@ -146,7 +178,7 @@ export const prepareCommentsForExport = (doc, tr, schema, comments = []) => {
     if (a.parentCommentId && a.parentCommentId === b.parentCommentId) {
       const aComment = commentMap.get(a.commentId);
       const bComment = commentMap.get(b.commentId);
-      return (aComment?.createdTime || 0) - (bComment?.createdTime || 0);
+      return toCreatedTimeMs(aComment?.createdTime) - toCreatedTimeMs(bComment?.createdTime);
     }
     return 0;
   });
@@ -165,7 +197,7 @@ export const prepareCommentsForExport = (doc, tr, schema, comments = []) => {
     if (a.parentCommentId && a.parentCommentId === b.parentCommentId) {
       const aComment = commentMap.get(a.commentId);
       const bComment = commentMap.get(b.commentId);
-      return (aComment?.createdTime || 0) - (bComment?.createdTime || 0);
+      return toCreatedTimeMs(aComment?.createdTime) - toCreatedTimeMs(bComment?.createdTime);
     }
     return 0;
   });
@@ -188,32 +220,24 @@ export const prepareCommentsForExport = (doc, tr, schema, comments = []) => {
 };
 
 /**
- * Generate the prepared comment attrs for export
- *
- * @param {Object} attrs The comment mark attributes
- * @returns {Object} The prepared comment attributes
+ * Generate the prepared comment attrs for export.
  */
-export const getPreparedComment = (attrs) => {
+export const getPreparedComment = (attrs: { commentId?: string | number; internal?: boolean | null }) => {
   const { commentId, internal } = attrs;
   return {
-    'w:id': commentId,
+    'w:id': commentId != null ? String(commentId) : '',
     internal: internal,
   };
 };
 
 /**
- * Prepare comments for import by removing the commentRange nodes and replacing with marks
- *
- * @param {import('prosemirror-model').Node} doc The prosemirror document
- * @param {import('prosemirror-state').Transaction} tr The preparation transaction
- * @param {import('prosemirror-model').Schema} schema The editor schema
- * @returns {void}
+ * Prepare comments for import by removing the commentRange nodes and replacing with marks.
  */
-export const prepareCommentsForImport = (doc, tr, schema, converter) => {
-  const toMark = [];
-  const toDelete = [];
+export const prepareCommentsForImport = (doc: PmNode, tr: Transaction, schema: Schema, converter?: Converter) => {
+  const toMark: Array<{ commentId: string; importedId: string; internal?: boolean; start: number }> = [];
+  const toDelete: Array<{ start: number; end: number }> = [];
 
-  doc.descendants((node, pos) => {
+  doc.descendants((node: PmNode, pos: number) => {
     const { type } = node;
 
     const commentNodes = ['commentRangeStart', 'commentRangeEnd', 'commentReference'];
@@ -228,8 +252,8 @@ export const prepareCommentsForImport = (doc, tr, schema, converter) => {
     if (type.name === 'commentRangeStart') {
       if (!matchingImportedComment?.isDone) {
         toMark.push({
-          commentId: resolvedCommentId,
-          importedId,
+          commentId: String(resolvedCommentId),
+          importedId: String(importedId ?? resolvedCommentId),
           internal,
           start: pos,
         });
@@ -238,7 +262,7 @@ export const prepareCommentsForImport = (doc, tr, schema, converter) => {
       ensureFallbackComment({
         converter,
         matchingImportedComment,
-        commentId: resolvedCommentId,
+        commentId: String(resolvedCommentId),
         importedId,
       });
 
@@ -249,13 +273,13 @@ export const prepareCommentsForImport = (doc, tr, schema, converter) => {
     // When we reach the commentRangeEnd, add a mark spanning from start to current pos,
     // then mark it for deletion as well.
     else if (type.name === 'commentRangeEnd') {
-      const itemToMark = toMark.find((p) => p.importedId === importedId);
+      const itemToMark = toMark.find((p) => p.importedId === String(importedId));
       if (!itemToMark) return; // No matching start? just skip
 
       const { start } = itemToMark;
       const markAttrs = {
-        commentId: itemToMark.commentId,
-        importedId,
+        commentId: String(itemToMark.commentId),
+        importedId: importedId != null ? String(importedId) : undefined,
         internal: itemToMark.internal,
       };
 
@@ -280,13 +304,15 @@ export const prepareCommentsForImport = (doc, tr, schema, converter) => {
 /**
  * Translate a list of before/after marks into a human-readable format we can
  * display in tracked change comments. This tells us what formatting changes
- * a suggester made
- *
- * @param {Object} attrs The tracked change node attributes. Contains before/after lists
- * @returns {String} The human-readable format of the changes
+ * a suggester made.
  */
-export const translateFormatChangesToEnglish = (attrs = {}) => {
-  const { before = [], after = [] } = attrs;
+interface MarkWithType {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+export const translateFormatChangesToEnglish = (attrs: Record<string, unknown> = {}): string => {
+  const { before = [], after = [] } = attrs as { before?: MarkWithType[]; after?: MarkWithType[] };
 
   const beforeTypes = new Set(before.map((mark) => mark.type));
   const afterTypes = new Set(after.map((mark) => mark.type));
@@ -294,16 +320,16 @@ export const translateFormatChangesToEnglish = (attrs = {}) => {
   const added = [...afterTypes].filter((type) => !beforeTypes.has(type));
   const removed = [...beforeTypes].filter((type) => !afterTypes.has(type));
 
-  const messages = [];
+  const messages: string[] = [];
 
   // Detect added formatting (excluding textStyle, handled separately)
-  const nonTextStyleAdded = added.filter((type) => !['textStyle', 'commentMark'].includes(type));
+  const nonTextStyleAdded = added.filter((type) => !['textStyle', 'commentMark'].includes(String(type)));
   if (nonTextStyleAdded.length) {
     messages.push(`Added formatting: ${nonTextStyleAdded.join(', ')}`);
   }
 
   // Detect removed formatting (excluding textStyle, handled separately)
-  const nonTextStyleRemoved = removed.filter((type) => !['textStyle', 'commentMark'].includes(type));
+  const nonTextStyleRemoved = removed.filter((type) => !['textStyle', 'commentMark'].includes(String(type)));
   if (nonTextStyleRemoved.length) {
     messages.push(`Removed formatting: ${nonTextStyleRemoved.join(', ')}`);
   }
@@ -312,10 +338,10 @@ export const translateFormatChangesToEnglish = (attrs = {}) => {
   const beforeTextStyle = before.find((mark) => mark.type === 'textStyle')?.attrs || {};
   const afterTextStyle = after.find((mark) => mark.type === 'textStyle')?.attrs || {};
 
-  const textStyleChanges = [];
+  const textStyleChanges: string[] = [];
 
   // Function to convert camelCase to human-readable format
-  const formatAttrName = (attr) => attr.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+  const formatAttrName = (attr: string) => attr.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
 
   Object.keys({ ...beforeTextStyle, ...afterTextStyle }).forEach((attr) => {
     const beforeValue = beforeTextStyle[attr];
@@ -347,19 +373,23 @@ export const translateFormatChangesToEnglish = (attrs = {}) => {
 };
 
 /**
- * Get the highlight color for a comment or tracked changes node
- *
- * @param {Object} param0
- * @param {String} param0.activeThreadId The active comment ID
- * @param {String} param0.threadId The current thread ID
- * @param {Boolean} param0.isInternal Whether the comment is internal or external
- * @param {EditorView} param0.editor The current editor view
- * @returns {String} The color to use for the highlight
+ * Get the highlight color for a comment or tracked changes node.
  */
-export const getHighlightColor = ({ activeThreadId, threadId, isInternal, editor }) => {
+export const getHighlightColor = ({
+  activeThreadId,
+  threadId,
+  isInternal,
+  editor,
+}: {
+  activeThreadId?: string | null;
+  threadId?: string | null;
+  isInternal?: boolean;
+  editor: Editor;
+}) => {
+  if (!editor) return 'transparent';
   if (!editor.options.isInternal && isInternal) return 'transparent';
   const pluginState = CommentsPluginKey.getState(editor.state);
-  const color = isInternal ? pluginState.internalColor : pluginState.externalColor;
+  const color = isInternal ? pluginState?.internalColor : pluginState?.externalColor;
   const alpha = activeThreadId == threadId ? '44' : '22';
-  return `${color}${alpha}`;
+  return `${color || '#000000'}${alpha}`;
 };
diff --git a/packages/super-editor/src/extensions/comment/comments-marks.js b/packages/super-editor/src/extensions/comment/comments-marks.js
deleted file mode 100644
index be57d69f9..000000000
--- a/packages/super-editor/src/extensions/comment/comments-marks.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Mark, Attribute } from '@core/index.js';
-import { CommentMarkName } from './comments-constants.js';
-
-export const CommentsMark = Mark.create({
-  name: CommentMarkName,
-
-  group: 'comments',
-
-  excludes: '',
-
-  addOptions() {
-    return {
-      htmlAttributes: { class: 'sd-editor-comment' },
-    };
-  },
-
-  addAttributes() {
-    return {
-      commentId: {},
-      importedId: {},
-      internal: {
-        default: true,
-        rendered: false,
-      },
-    };
-  },
-
-  parseDOM() {
-    return [{ tag: CommentMarkName }];
-  },
-
-  renderDOM({ htmlAttributes }) {
-    return [CommentMarkName, Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
-  },
-});
diff --git a/packages/super-editor/src/extensions/comment/comments-marks.ts b/packages/super-editor/src/extensions/comment/comments-marks.ts
new file mode 100644
index 000000000..6c5626715
--- /dev/null
+++ b/packages/super-editor/src/extensions/comment/comments-marks.ts
@@ -0,0 +1,43 @@
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
+import { CommentMarkName } from './comments-constants.js';
+
+interface CommentsMarkOptions extends Record<string, unknown> {
+  htmlAttributes: Record<string, string>;
+}
+
+export const CommentsMark = Mark.create<CommentsMarkOptions>({
+  name: CommentMarkName,
+
+  group: 'comments',
+
+  excludes: '',
+
+  addOptions() {
+    return {
+      htmlAttributes: { class: 'sd-editor-comment' },
+    };
+  },
+
+  addAttributes() {
+    return {
+      commentId: {},
+      importedId: {},
+      internal: {
+        default: true,
+        rendered: false,
+      },
+    };
+  },
+
+  parseDOM() {
+    return [{ tag: CommentMarkName }];
+  },
+
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    return [
+      CommentMarkName,
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>),
+    ];
+  },
+});
diff --git a/packages/super-editor/src/extensions/comment/comments-plugin.d.ts b/packages/super-editor/src/extensions/comment/comments-plugin.d.ts
index 61642650c..ae7ddfa9b 100644
--- a/packages/super-editor/src/extensions/comment/comments-plugin.d.ts
+++ b/packages/super-editor/src/extensions/comment/comments-plugin.d.ts
@@ -1 +1,31 @@
-export const CommentsPluginKey: any;
+import type { PluginKey } from 'prosemirror-state';
+import type { DecorationSet } from 'prosemirror-view';
+import type { Mark } from 'prosemirror-model';
+
+export interface CommentPositionMap {
+  [threadId: string]: {
+    threadId: string;
+    start: number;
+    end: number;
+    bounds: { top: number; bottom: number; left: number; right: number };
+  };
+}
+
+export interface TrackedChangeRecord {
+  insertion?: string;
+  deletion?: string;
+  format?: string;
+}
+
+export interface CommentsPluginState {
+  activeThreadId: string | null;
+  externalColor: string;
+  internalColor: string;
+  decorations: DecorationSet;
+  allCommentPositions: CommentPositionMap;
+  allCommentIds: string[];
+  changedActiveThread: boolean;
+  trackedChanges: Record<string, TrackedChangeRecord>;
+}
+
+export const CommentsPluginKey: PluginKey<CommentsPluginState>;
diff --git a/packages/super-editor/src/extensions/comment/comments-plugin.test.js b/packages/super-editor/src/extensions/comment/comments-plugin.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/comments-plugin.test.js
rename to packages/super-editor/src/extensions/comment/comments-plugin.test.ts
diff --git a/packages/super-editor/src/extensions/comment/comments-plugin.js b/packages/super-editor/src/extensions/comment/comments-plugin.ts
similarity index 70%
rename from packages/super-editor/src/extensions/comment/comments-plugin.js
rename to packages/super-editor/src/extensions/comment/comments-plugin.ts
index c15caac55..fa4a87e78 100644
--- a/packages/super-editor/src/extensions/comment/comments-plugin.js
+++ b/packages/super-editor/src/extensions/comment/comments-plugin.ts
@@ -1,4 +1,6 @@
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import type { Transaction, EditorState, Selection } from 'prosemirror-state';
+import type { Node as PmNode, Mark } from 'prosemirror-model';
 import { Extension } from '@core/Extension.js';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { removeCommentsById, getHighlightColor } from './comments-helpers.js';
@@ -11,30 +13,79 @@ import { comments_module_events } from '@superdoc/common';
 import { translateFormatChangesToEnglish } from './comments-helpers.js';
 import { normalizeCommentEventPayload, updatePosition } from './helpers/index.js';
 import { v4 as uuidv4 } from 'uuid';
+import type { Editor } from '@core/Editor.js';
 
 const TRACK_CHANGE_MARKS = [TrackInsertMarkName, TrackDeleteMarkName, TrackFormatMarkName];
 
 export const CommentsPluginKey = new PluginKey('comments');
 
+interface CommentMeta {
+  type?: string;
+  event?: string;
+  activeThreadId?: string | null;
+  forceUpdate?: boolean;
+  decorations?: DecorationSet;
+  allCommentPositions?: CommentPositionMap;
+}
+
+interface PluginState {
+  activeThreadId: string | null;
+  externalColor: string;
+  internalColor: string;
+  decorations: DecorationSet;
+  allCommentPositions: CommentPositionMap;
+  allCommentIds: string[];
+  changedActiveThread: boolean;
+  trackedChanges: Record<string, TrackedChangeRecord>;
+}
+
+type CommentPositionMap = Record<
+  string,
+  {
+    threadId: string;
+    start: number;
+    end: number;
+    bounds: { top: number; bottom: number; left: number; right: number };
+  }
+>;
+
+type TrackedMarkMatch = { from: number; to: number; mark: Mark };
+
+interface TrackedChangeMeta {
+  insertedMark?: Mark;
+  deletionMark?: Mark;
+  formatMark?: Mark;
+  step?: unknown;
+  deletionNodes?: PmNode[];
+}
+
+interface TrackedChangeRecord {
+  insertion?: string;
+  deletion?: string;
+  format?: string;
+}
+
 export const CommentsPlugin = Extension.create({
   name: 'comments',
 
   addCommands() {
     return {
       insertComment:
-        (conversation = {}) =>
-        ({ tr, dispatch }) => {
+        (conversation: { commentId?: string; isInternal?: boolean; skipEmit?: boolean; [key: string]: unknown } = {}) =>
+        ({ tr, dispatch }: { tr: Transaction; dispatch?: (tr: Transaction) => void }) => {
+          const editor = this.editor;
+          if (!editor) return false;
           const { selection } = tr;
           const { $from, $to } = selection;
           const skipEmit = conversation?.skipEmit;
           const resolvedCommentId = conversation?.commentId ?? uuidv4();
           const resolvedInternal = conversation?.isInternal ?? false;
 
-          tr.setMeta(CommentsPluginKey, { event: 'add' });
+          tr.setMeta(CommentsPluginKey, { event: 'add' } as CommentMeta);
           tr.addMark(
             $from.pos,
             $to.pos,
-            this.editor.schema.marks[CommentMarkName].create({
+            editor.schema.marks[CommentMarkName].create({
               commentId: resolvedCommentId,
               internal: resolvedInternal,
             }),
@@ -46,12 +97,15 @@ export const CommentsPlugin = Extension.create({
           if (shouldEmit) {
             const commentPayload = normalizeCommentEventPayload({
               conversation,
-              editorOptions: this.editor.options,
+              editorOptions: editor.options,
               fallbackCommentId: resolvedCommentId,
               fallbackInternal: resolvedInternal,
             });
 
-            const activeCommentId = commentPayload.commentId || commentPayload.importedId || null;
+            const activeCommentId =
+              (commentPayload as { commentId?: string; importedId?: string }).commentId ||
+              (commentPayload as { commentId?: string; importedId?: string }).importedId ||
+              null;
 
             const event = {
               type: comments_module_events.ADD,
@@ -59,36 +113,42 @@ export const CommentsPlugin = Extension.create({
               ...(activeCommentId && { activeCommentId }),
             };
 
-            this.editor.emit('commentsUpdate', event);
+            editor.emit('commentsUpdate', event);
           }
 
           return true;
         },
 
       removeComment:
-        ({ commentId, importedId }) =>
-        ({ tr, dispatch, state }) => {
-          tr.setMeta(CommentsPluginKey, { event: 'deleted' });
+        ({ commentId, importedId }: { commentId?: string; importedId?: string }) =>
+        ({ tr, dispatch, state }: { tr: Transaction; dispatch?: (tr: Transaction) => void; state: EditorState }) => {
+          tr.setMeta(CommentsPluginKey, { event: 'deleted' } as CommentMeta);
           removeCommentsById({ commentId, importedId, state, tr, dispatch });
         },
 
       setActiveComment:
-        ({ commentId }) =>
-        ({ tr }) => {
-          tr.setMeta(CommentsPluginKey, { type: 'setActiveComment', activeThreadId: commentId, forceUpdate: true });
+        ({ commentId }: { commentId: string }) =>
+        ({ tr }: { tr: Transaction }) => {
+          tr.setMeta(CommentsPluginKey, {
+            type: 'setActiveComment',
+            activeThreadId: commentId,
+            forceUpdate: true,
+          } as CommentMeta);
           return true;
         },
 
       setCommentInternal:
-        ({ commentId, isInternal }) =>
-        ({ tr, dispatch, state }) => {
+        ({ commentId, isInternal }: { commentId: string; isInternal: boolean }) =>
+        ({ tr, dispatch, state }: { tr: Transaction; dispatch?: (tr: Transaction) => void; state: EditorState }) => {
+          const editor = this.editor;
+          if (!editor) return false;
           const { doc } = state;
-          let foundStartNode;
-          let foundPos;
+          let foundStartNode: PmNode | null = null;
+          let foundPos = 0;
 
           // Find the commentRangeStart node that matches the comment ID
-          tr.setMeta(CommentsPluginKey, { event: 'update' });
-          doc.descendants((node, pos) => {
+          tr.setMeta(CommentsPluginKey, { event: 'update' } as CommentMeta);
+          doc.descendants((node: PmNode, pos: number) => {
             if (foundStartNode) return;
 
             const { marks = [] } = node;
@@ -107,30 +167,31 @@ export const CommentsPlugin = Extension.create({
           // If no matching node, return false
           if (!foundStartNode) return false;
 
-          // Update the mark itself
+          // Update the mark itself (foundStartNode is confirmed non-null above)
+          const nodeSize = (foundStartNode as PmNode).nodeSize;
           tr.addMark(
             foundPos,
-            foundPos + foundStartNode.nodeSize,
-            this.editor.schema.marks[CommentMarkName].create({
+            foundPos + nodeSize,
+            editor.schema.marks[CommentMarkName].create({
               commentId,
               internal: isInternal,
             }),
           );
 
           tr.setMeta(CommentsPluginKey, { type: 'setCommentInternal' });
-          dispatch(tr);
+          dispatch?.(tr);
           return true;
         },
 
       resolveComment:
-        ({ commentId }) =>
-        ({ tr, dispatch, state }) => {
-          tr.setMeta(CommentsPluginKey, { event: 'update' });
+        ({ commentId }: { commentId: string }) =>
+        ({ tr, dispatch, state }: { tr: Transaction; dispatch?: (tr: Transaction) => void; state: EditorState }) => {
+          tr.setMeta(CommentsPluginKey, { event: 'update' } as CommentMeta);
           removeCommentsById({ commentId, state, tr, dispatch });
         },
       setCursorById:
-        (id) =>
-        ({ state, editor }) => {
+        (id: string) =>
+        ({ state, editor }: { state: EditorState; editor: Editor }) => {
           const { from } = findRangeById(state.doc, id) || {};
           if (from != null) {
             state.tr.setSelection(TextSelection.create(state.doc, from));
@@ -146,7 +207,7 @@ export const CommentsPlugin = Extension.create({
     const editor = this.editor;
     let shouldUpdate = true;
 
-    if (editor.options.isHeadless) return [];
+    if (!editor || editor.options.isHeadless) return [];
 
     const commentsPlugin = new Plugin({
       key: CommentsPluginKey,
@@ -158,25 +219,25 @@ export const CommentsPlugin = Extension.create({
             externalColor: '#B1124B',
             internalColor: '#078383',
             decorations: DecorationSet.empty,
-            allCommentPositions: {},
+            allCommentPositions: {} as CommentPositionMap,
             allCommentIds: [],
             changedActiveThread: false,
             trackedChanges: {},
           };
         },
 
-        apply(tr, pluginState, _, newEditorState) {
-          const meta = tr.getMeta(CommentsPluginKey);
-          const { type } = meta || {};
+        apply(tr: Transaction, pluginState: PluginState, _: EditorState, newEditorState: EditorState): PluginState {
+          const meta = (tr.getMeta(CommentsPluginKey) || {}) as CommentMeta;
+          const { type } = meta;
 
           if (type === 'force' || type === 'forceTrackChanges') shouldUpdate = true;
 
           if (type === 'setActiveComment') {
             shouldUpdate = true;
-            pluginState.activeThreadId = meta.activeThreadId; // Update the outer scope variable
+            pluginState.activeThreadId = meta.activeThreadId ?? null; // Update the outer scope variable
             return {
               ...pluginState,
-              activeThreadId: meta.activeThreadId,
+              activeThreadId: meta.activeThreadId ?? null,
               changedActiveThread: true,
             };
           }
@@ -185,20 +246,23 @@ export const CommentsPlugin = Extension.create({
             return {
               ...pluginState,
               decorations: meta.decorations,
-              allCommentPositions: meta.allCommentPositions,
+              allCommentPositions: meta.allCommentPositions || {},
             };
           }
 
           // If this is a tracked change transaction, handle separately
-          const trackedChangeMeta = tr.getMeta(TrackChangesBasePluginKey);
+          const trackedChangeMeta = tr.getMeta(TrackChangesBasePluginKey) as TrackedChangeMeta | undefined;
           const currentTrackedChanges = pluginState.trackedChanges;
           if (trackedChangeMeta) {
-            pluginState.trackedChanges = handleTrackedChangeTransaction(
+            const updatedTrackedChanges = handleTrackedChangeTransaction(
               trackedChangeMeta,
               currentTrackedChanges,
               newEditorState,
               editor,
             );
+            if (updatedTrackedChanges) {
+              pluginState.trackedChanges = updatedTrackedChanges;
+            }
           }
 
           // Check for changes in the actively selected comment
@@ -206,7 +270,7 @@ export const CommentsPlugin = Extension.create({
           if ((!tr.docChanged && tr.selectionSet) || trChangedActiveComment) {
             const { selection } = tr;
             let currentActiveThread = getActiveCommentId(newEditorState.doc, selection);
-            if (trChangedActiveComment) currentActiveThread = meta.activeThreadId;
+            if (trChangedActiveComment) currentActiveThread = meta.activeThreadId ?? null;
 
             const previousSelectionId = pluginState.activeThreadId;
             if (previousSelectionId !== currentActiveThread) {
@@ -232,15 +296,15 @@ export const CommentsPlugin = Extension.create({
       },
 
       props: {
-        decorations(state) {
-          return this.getState(state).decorations;
+        decorations(state: EditorState) {
+          return this.getState(state)?.decorations;
         },
       },
 
       view() {
-        let prevDoc = null;
-        let prevActiveThreadId = null;
-        let prevAllCommentPositions = {};
+        let prevDoc: PmNode | null = null;
+        let prevActiveThreadId: string | null = null;
+        let prevAllCommentPositions: CommentPositionMap = {};
         let hasEverEmitted = false;
 
         return {
@@ -250,7 +314,7 @@ export const CommentsPlugin = Extension.create({
             const pluginState = CommentsPluginKey.getState(state);
             const currentActiveThreadId = pluginState.activeThreadId;
 
-            const meta = tr.getMeta(CommentsPluginKey);
+            const meta = (tr.getMeta(CommentsPluginKey) || {}) as CommentMeta;
             if (meta?.type === 'setActiveComment' || meta?.forceUpdate) {
               shouldUpdate = true;
             }
@@ -272,10 +336,10 @@ export const CommentsPlugin = Extension.create({
             prevDoc = doc;
             shouldUpdate = false;
 
-            const decorations = [];
+            const decorations: Decoration[] = [];
             // Always rebuild positions fresh from the current document to avoid stale PM offsets
-            const allCommentPositions = {};
-            doc.descendants((node, pos) => {
+            const allCommentPositions: CommentPositionMap = {} as CommentPositionMap;
+            doc.descendants((node: PmNode, pos: number) => {
               const { marks = [] } = node;
               const commentMarks = marks.filter((mark) => mark.type.name === CommentMarkName);
 
@@ -300,7 +364,7 @@ export const CommentsPlugin = Extension.create({
                 if (!hasActive) hasActive = currentActiveThreadId === threadId;
 
                 // Get the color based on current activeThreadId
-                let color = getHighlightColor({
+                const color = getHighlightColor({
                   activeThreadId: currentActiveThreadId,
                   threadId,
                   isInternal,
@@ -394,11 +458,8 @@ export const CommentsPlugin = Extension.create({
 /**
  * Compares two comment position objects to determine if they have changed.
  * Uses shallow comparison of position coordinates for efficiency.
- * @param {Object} prevPositions - Previous comment positions object
- * @param {Object} currPositions - Current comment positions object
- * @returns {boolean} True if positions have changed, false otherwise
  */
-const hasPositionsChanged = (prevPositions, currPositions) => {
+const hasPositionsChanged = (prevPositions: CommentPositionMap, currPositions: CommentPositionMap): boolean => {
   const prevKeys = Object.keys(prevPositions);
   const currKeys = Object.keys(currPositions);
 
@@ -421,14 +482,10 @@ const hasPositionsChanged = (prevPositions, currPositions) => {
 };
 
 /**
- * This is run when a new selection is set (tr.selectionSet) to return the active comment ID, if any
- * If there are multiple, only return the first one
- *
- * @param {Object} doc The current document
- * @param {Selection} selection The current selection
- * @returns {String | null} The active comment ID, if any
+ * This is run when a new selection is set (tr.selectionSet) to return the active comment ID, if any.
+ * If there are multiple, only return the first one.
  */
-const getActiveCommentId = (doc, selection) => {
+const getActiveCommentId = (doc: PmNode, selection: Selection | null) => {
   if (!selection) return;
   const { $from, $to } = selection;
 
@@ -450,7 +507,7 @@ const getActiveCommentId = (doc, selection) => {
   }
 
   // Otherwise, we need to check for comment nodes
-  const overlaps = [];
+  const overlaps: Array<{ node: PmNode; pos: number; size: number }> = [];
   let found = false;
 
   // Look for commentRangeStart nodes before the current position
@@ -461,12 +518,12 @@ const getActiveCommentId = (doc, selection) => {
     // node goes from `pos` to `end = pos + node.nodeSize`
     const end = pos + node.nodeSize;
 
-    // If $from.pos is outside this node’s range, skip it
+    // If $from.pos is outside this node's range, skip it
     if ($from.pos < pos || $from.pos >= end) {
       return;
     }
 
-    // Now we know $from.pos is within this node’s start/end
+    // Now we know $from.pos is within this node's start/end
     const { marks = [] } = node;
     const commentMark = marks.find((mark) => mark.type.name === CommentMarkName);
     if (commentMark) {
@@ -484,10 +541,10 @@ const getActiveCommentId = (doc, selection) => {
   });
 
   // Get the closest commentRangeStart node to the current position
-  let closest = null;
-  let closestCommentRangeStart = null;
+  let closest: number | null = null;
+  let closestCommentRangeStart: PmNode | null = null;
   overlaps.forEach(({ pos, node }) => {
-    if (!closest) closest = $from.pos - pos;
+    if (closest === null) closest = $from.pos - pos;
 
     const diff = $from.pos - pos;
     if (diff >= 0 && diff <= closest) {
@@ -496,8 +553,9 @@ const getActiveCommentId = (doc, selection) => {
     }
   });
 
-  const { marks: closestMarks = [] } = closestCommentRangeStart || {};
-  const closestCommentMark = closestMarks.find((mark) => mark.type.name === CommentMarkName);
+  const matchedNode = closestCommentRangeStart as PmNode | null;
+  const closestMarks: readonly Mark[] = matchedNode?.marks ?? [];
+  const closestCommentMark = closestMarks.find((mark: Mark) => mark.type.name === CommentMarkName);
   return closestCommentMark?.attrs?.commentId || closestCommentMark?.attrs?.importedId;
 };
 
@@ -506,13 +564,18 @@ const findTrackedMark = ({
   from,
   to,
   offset = 1, // To get non-inclusive marks.
-}) => {
+}: {
+  doc: PmNode;
+  from: number;
+  to: number;
+  offset?: number;
+}): TrackedMarkMatch | undefined => {
   const startPos = Math.max(from - offset, 0);
   const endPos = Math.min(to + offset, doc.content.size);
 
-  let markFound;
+  let markFound: TrackedMarkMatch | undefined;
 
-  doc.nodesBetween(startPos, endPos, (node, pos) => {
+  doc.nodesBetween(startPos, endPos, (node: PmNode, pos: number) => {
     if (!node || node?.nodeSize === undefined) {
       return;
     }
@@ -531,7 +594,12 @@ const findTrackedMark = ({
   return markFound;
 };
 
-const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEditorState, editor) => {
+const handleTrackedChangeTransaction = (
+  trackedChangeMeta: TrackedChangeMeta,
+  trackedChanges: Record<string, TrackedChangeRecord>,
+  newEditorState: EditorState,
+  editor: Editor,
+): Record<string, TrackedChangeRecord> | undefined => {
   const { insertedMark, deletionMark, formatMark, deletionNodes } = trackedChangeMeta;
 
   if (!insertedMark && !deletionMark && !formatMark) {
@@ -539,25 +607,26 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   }
 
   const newTrackedChanges = { ...trackedChanges };
-  let id = insertedMark?.attrs?.id || deletionMark?.attrs?.id || formatMark?.attrs?.id;
-
-  if (!id) {
+  const rawId = insertedMark?.attrs?.id ?? deletionMark?.attrs?.id ?? formatMark?.attrs?.id;
+  if (rawId === undefined || rawId === null || rawId === '') {
     return trackedChanges;
   }
+  const id = String(rawId);
 
   // Maintain a map of tracked changes with their inserted/deleted ids
   let isNewChange = false;
   if (!newTrackedChanges[id]) {
-    newTrackedChanges[id] = {};
+    newTrackedChanges[id] = {} as TrackedChangeRecord;
     isNewChange = true;
   }
 
   if (insertedMark) newTrackedChanges[id].insertion = id;
-  if (deletionMark) newTrackedChanges[id].deletion = deletionMark.attrs?.id;
-  if (formatMark) newTrackedChanges[id].format = formatMark.attrs?.id;
+  if (deletionMark) newTrackedChanges[id].deletion = String(deletionMark.attrs?.id ?? '');
+  if (formatMark) newTrackedChanges[id].format = String(formatMark.attrs?.id ?? '');
 
   const { step } = trackedChangeMeta;
-  let nodes = step?.slice?.content?.content || [];
+  const stepSlice = (step as { slice?: { content?: { content?: PmNode[] } } })?.slice;
+  let nodes: PmNode[] = stepSlice?.content?.content || [];
 
   // Track format has no nodes, we need to find the node
   if (!nodes.length) {
@@ -571,14 +640,14 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   }
 
   const emitParams = createOrUpdateTrackedChangeComment({
-    documentId: editor.options.documentId,
+    documentId: editor.options.documentId ?? undefined,
     event: isNewChange ? 'add' : 'update',
     marks: {
       insertedMark,
       deletionMark,
       formatMark,
     },
-    deletionNodes,
+    _deletionNodes: deletionNodes,
     nodes,
     newEditorState,
   });
@@ -588,7 +657,17 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   return newTrackedChanges;
 };
 
-const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsertion }) => {
+const getTrackedChangeText = ({
+  nodes,
+  mark,
+  trackedChangeType,
+  isDeletionInsertion,
+}: {
+  nodes: PmNode[];
+  mark: Mark;
+  trackedChangeType: string;
+  isDeletionInsertion: boolean;
+}) => {
   let trackedChangeText = '';
   let deletionText = '';
 
@@ -619,8 +698,24 @@ const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsert
   };
 };
 
-const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes, newEditorState, documentId }) => {
+const createOrUpdateTrackedChangeComment = ({
+  event,
+  marks,
+  _deletionNodes,
+  nodes,
+  newEditorState,
+  documentId,
+}: {
+  event: string;
+  marks: { insertedMark?: Mark; deletionMark?: Mark; formatMark?: Mark };
+  _deletionNodes?: PmNode[];
+  nodes: PmNode[];
+  newEditorState: EditorState;
+  documentId?: string;
+}) => {
   const trackedMark = marks.insertedMark || marks.deletionMark || marks.formatMark;
+  if (!trackedMark) return;
+
   const { type, attrs } = trackedMark;
 
   const { name: trackedChangeType } = type;
@@ -630,7 +725,7 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   const node = nodes[0];
   const isDeletionInsertion = !!(marks.insertedMark && marks.deletionMark);
 
-  let nodesWithMark = [];
+  const nodesWithMark: PmNode[] = [];
   newEditorState.doc.descendants((node) => {
     const { marks = [] } = node;
     const changeMarks = marks.filter((mark) => TRACK_CHANGE_MARKS.includes(mark.type.name));
@@ -640,20 +735,30 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   });
 
   const { deletionText, trackedChangeText } = getTrackedChangeText({
-    state: newEditorState,
     nodes: nodesWithMark.length ? nodesWithMark : [node],
     mark: trackedMark,
-    marks,
     trackedChangeType,
     isDeletionInsertion,
-    deletionNodes,
   });
 
   if (!deletionText && !trackedChangeText) {
     return;
   }
 
-  const params = {
+  const params: {
+    event: string;
+    type: string;
+    documentId?: string;
+    changeId: string;
+    trackedChangeType: string;
+    trackedChangeText: string;
+    deletedText: string | null;
+    author: unknown;
+    authorEmail: unknown;
+    authorImage?: unknown;
+    date: unknown;
+    importedAuthor?: { name: unknown };
+  } = {
     event: comments_module_events.ADD,
     type: 'trackedChange',
     documentId,
@@ -678,9 +783,9 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   return params;
 };
 
-function findRangeById(doc, id) {
-  let from = null,
-    to = null;
+function findRangeById(doc: PmNode, id: string): { from: number; to: number } | null {
+  let from: number | null = null;
+  let to: number | null = null;
   doc.descendants((node, pos) => {
     const trackedMark = node.marks.find((m) => TRACK_CHANGE_MARKS.includes(m.type.name) && m.attrs.id === id);
     if (trackedMark) {
diff --git a/packages/super-editor/src/extensions/comment/comments.test.js b/packages/super-editor/src/extensions/comment/comments.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/comments.test.js
rename to packages/super-editor/src/extensions/comment/comments.test.ts
diff --git a/packages/super-editor/src/extensions/comment/helpers/index.js b/packages/super-editor/src/extensions/comment/helpers/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/helpers/index.js
rename to packages/super-editor/src/extensions/comment/helpers/index.ts
diff --git a/packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.js b/packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.ts
similarity index 60%
rename from packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.js
rename to packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.ts
index 169c04af7..836c2f0ae 100644
--- a/packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.js
+++ b/packages/super-editor/src/extensions/comment/helpers/normalize-comment-event-payload.ts
@@ -1,9 +1,45 @@
+interface UserLike {
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+
+interface EditorOptionsLike {
+  user?: UserLike | null;
+  documentId?: string | null;
+}
+
+interface Conversation {
+  commentId?: string;
+  isInternal?: boolean;
+  text?: string;
+  commentText?: string;
+  skipEmit?: boolean;
+  creatorName?: string;
+  creatorEmail?: string;
+  creatorImage?: string;
+  createdTime?: number;
+  fileId?: string;
+  documentId?: string;
+  [key: string]: unknown;
+}
+
 /**
  * Normalizes the comment event payload.
  * @param {Object} param0 - The parameters for normalizing the comment event payload.
  * @returns {Object} - The normalized comment event payload.
  */
-export const normalizeCommentEventPayload = ({ conversation, editorOptions, fallbackCommentId, fallbackInternal }) => {
+export const normalizeCommentEventPayload = ({
+  conversation,
+  editorOptions,
+  fallbackCommentId,
+  fallbackInternal,
+}: {
+  conversation: Conversation;
+  editorOptions: EditorOptionsLike;
+  fallbackCommentId: string;
+  fallbackInternal: boolean;
+}): Conversation => {
   const { user, documentId } = editorOptions || {};
   const normalized = {
     ...conversation,
diff --git a/packages/super-editor/src/extensions/comment/helpers/update-position.js b/packages/super-editor/src/extensions/comment/helpers/update-position.ts
similarity index 71%
rename from packages/super-editor/src/extensions/comment/helpers/update-position.js
rename to packages/super-editor/src/extensions/comment/helpers/update-position.ts
index abc945d69..ebac16e03 100644
--- a/packages/super-editor/src/extensions/comment/helpers/update-position.js
+++ b/packages/super-editor/src/extensions/comment/helpers/update-position.ts
@@ -1,3 +1,19 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+interface Bounds {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+interface CommentPosition {
+  threadId: string;
+  start: number;
+  end: number;
+  bounds: Bounds;
+}
+
 /**
  * Updates the position of a comment in the editor.
  * @param {Object} param0 - The parameters for updating the comment position.
@@ -7,8 +23,20 @@
  * @param {DOMRect|Object} param0.currentBounds - The current bounds of the comment.
  * @param {Object} param0.node - The ProseMirror node representing the comment.
  */
-export const updatePosition = ({ allCommentPositions, threadId, pos, currentBounds, node }) => {
-  let bounds = {};
+export const updatePosition = ({
+  allCommentPositions,
+  threadId,
+  pos,
+  currentBounds,
+  node,
+}: {
+  allCommentPositions: Record<string, CommentPosition>;
+  threadId: string;
+  pos: number;
+  currentBounds: DOMRect | Bounds;
+  node: PmNode;
+}): void => {
+  let bounds: Bounds;
 
   if (currentBounds instanceof DOMRect) {
     bounds = {
diff --git a/packages/super-editor/src/extensions/comment/index.js b/packages/super-editor/src/extensions/comment/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/comment/index.js
rename to packages/super-editor/src/extensions/comment/index.ts
diff --git a/packages/super-editor/src/extensions/content-block/content-block.js b/packages/super-editor/src/extensions/content-block/content-block.ts
similarity index 69%
rename from packages/super-editor/src/extensions/content-block/content-block.js
rename to packages/super-editor/src/extensions/content-block/content-block.ts
index 03020ea48..83138351b 100644
--- a/packages/super-editor/src/extensions/content-block/content-block.js
+++ b/packages/super-editor/src/extensions/content-block/content-block.ts
@@ -1,6 +1,5 @@
-// @ts-nocheck
-
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
 
 /**
  * Size configuration for content blocks
@@ -71,7 +70,7 @@ export const ContentBlock = Node.create({
     return {
       horizontalRule: {
         default: false,
-        renderDOM: ({ horizontalRule }) => {
+        renderDOM: ({ horizontalRule }: { horizontalRule?: boolean }) => {
           if (!horizontalRule) return {};
           return { 'data-horizontal-rule': 'true' };
         },
@@ -79,20 +78,22 @@ export const ContentBlock = Node.create({
 
       size: {
         default: null,
-        renderDOM: (attrs) => {
-          if (!attrs.size) return {};
+        renderDOM: (attrs: {
+          size?: { top?: number; left?: number; width?: number | string; height?: number | string } | null;
+          marginOffset?: { horizontal?: number; top?: number } | null;
+          originalAttributes?: { relativeHeight?: number } | null;
+        }) => {
+          const { size } = attrs;
+          if (!size) return {};
 
           let style = '';
-          // @ts-expect-error - size is known to be an object with these properties at runtime
-          if (attrs.size.top) style += `top: ${attrs.size.top}px; `;
-          // @ts-expect-error - size is known to be an object with these properties at runtime
-          if (attrs.size.left) style += `left: ${attrs.size.left}px; `;
-          // @ts-expect-error - size is known to be an object with these properties at runtime
-          if (attrs.size.width)
-            style += `width: ${attrs.size.width.toString().endsWith('%') ? attrs.size.width : `${attrs.size.width}px`}; `;
-          // @ts-expect-error - size is known to be an object with these properties at runtime
-          if (attrs.size.height)
-            style += `height: ${attrs.size.height.toString().endsWith('%') ? attrs.size.height : `${attrs.size.height}px`}; `;
+          if (size.top) style += `top: ${size.top}px; `;
+          if (size.left) style += `left: ${size.left}px; `;
+          if (size.width) style += `width: ${size.width.toString().endsWith('%') ? size.width : `${size.width}px`}; `;
+          if (size.height) {
+            const heightValue = size.height.toString().endsWith('%') ? size.height : `${size.height}px`;
+            style += `height: ${heightValue}; `;
+          }
 
           // Apply positioning and z-index for anchored content blocks
           if (attrs.marginOffset?.horizontal != null || attrs.marginOffset?.top != null) {
@@ -101,8 +102,6 @@ export const ContentBlock = Node.create({
             // Use relativeHeight from OOXML for proper z-ordering of overlapping elements
             const relativeHeight = attrs.originalAttributes?.relativeHeight;
             if (relativeHeight != null) {
-              // Scale down the relativeHeight value to a reasonable CSS z-index range
-              // OOXML uses large numbers (e.g., 251659318), we normalize to a smaller range
               const zIndex = Math.floor(relativeHeight / 1000000);
               style += `z-index: ${zIndex}; `;
             } else {
@@ -116,7 +115,7 @@ export const ContentBlock = Node.create({
 
       background: {
         default: null,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { background?: string | null }) => {
           if (!attrs.background) return {};
           return {
             style: `background-color: ${attrs.background}`,
@@ -151,11 +150,19 @@ export const ContentBlock = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-type': this.name })];
+  renderDOM(...args: unknown[]): DOMOutputSpec {
+    const { htmlAttributes } = (args[0] || {}) as { htmlAttributes?: Record<string, unknown> };
+    const options = this.options as { htmlAttributes?: Record<string, unknown> };
+    return [
+      'div',
+      Attribute.mergeAttributes(
+        (options.htmlAttributes as Record<string, AttributeValue>) || {},
+        (htmlAttributes as Record<string, AttributeValue>) || {},
+        { 'data-type': this.name },
+      ),
+    ];
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -167,7 +174,7 @@ export const ContentBlock = Node.create({
        */
       insertHorizontalRule:
         () =>
-        ({ commands }) => {
+        ({ commands }: { commands: { insertContent: (content: unknown) => boolean } }): boolean => {
           return commands.insertContent({
             type: this.name,
             attrs: {
@@ -195,13 +202,17 @@ export const ContentBlock = Node.create({
        * @note Used for spacing, dividers, and special inline content
        */
       insertContentBlock:
-        (config) =>
-        ({ commands }) => {
+        (config: {
+          horizontalRule?: boolean;
+          size?: { top?: number; left?: number; width?: number | string; height?: number | string };
+          background?: string;
+        }) =>
+        ({ commands }: { commands: { insertContent: (content: unknown) => boolean } }): boolean => {
           return commands.insertContent({
             type: this.name,
             attrs: config,
           });
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 });
diff --git a/packages/super-editor/src/extensions/content-block/index.js b/packages/super-editor/src/extensions/content-block/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/content-block/index.js
rename to packages/super-editor/src/extensions/content-block/index.ts
diff --git a/packages/super-editor/src/extensions/custom-selection/custom-selection.test.js b/packages/super-editor/src/extensions/custom-selection/custom-selection.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/custom-selection/custom-selection.test.js
rename to packages/super-editor/src/extensions/custom-selection/custom-selection.test.ts
diff --git a/packages/super-editor/src/extensions/custom-selection/custom-selection.js b/packages/super-editor/src/extensions/custom-selection/custom-selection.ts
similarity index 74%
rename from packages/super-editor/src/extensions/custom-selection/custom-selection.js
rename to packages/super-editor/src/extensions/custom-selection/custom-selection.ts
index 1695b762a..65ed0bb86 100644
--- a/packages/super-editor/src/extensions/custom-selection/custom-selection.js
+++ b/packages/super-editor/src/extensions/custom-selection/custom-selection.ts
@@ -1,31 +1,36 @@
-// @ts-nocheck
 /* global Element */
 import { Extension } from '@core/Extension.js';
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Plugin, TextSelection, Selection } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { PluginKey } from 'prosemirror-state';
 import { shouldAllowNativeContextMenu } from '../../utils/contextmenu-helpers.js';
+import type { EditorView } from 'prosemirror-view';
+import type { Editor } from '@core/index.js';
+import type { EditorOptions } from '@core/types/EditorConfig.js';
 
-const DEFAULT_SELECTION_STATE = Object.freeze({
+/**
+ * Selection state
+ */
+interface SelectionState {
+  focused: boolean;
+  preservedSelection: Selection | null;
+  showVisualSelection: boolean;
+  skipFocusReset: boolean;
+}
+
+const DEFAULT_SELECTION_STATE: SelectionState = Object.freeze({
   focused: false,
   preservedSelection: null,
   showVisualSelection: false,
   skipFocusReset: false,
 });
 
-const normalizeSelectionState = (state = {}) => ({
+const normalizeSelectionState = (state: Partial<SelectionState> = {}): SelectionState => ({
   ...DEFAULT_SELECTION_STATE,
   ...state,
 });
 
-/**
- * Selection state
- * @typedef {Object} SelectionState
- * @property {boolean} focused - Whether editor is focused
- * @property {Object|null} preservedSelection - Stored selection
- * @property {boolean} showVisualSelection - Whether to show selection decoration
- * @property {boolean} skipFocusReset - Whether to skip clearing selection on next focus
- */
-
 /**
  * Configuration options for CustomSelection
  * @typedef {Object} CustomSelectionOptions
@@ -43,38 +48,35 @@ const normalizeSelectionState = (state = {}) => ({
  * Plugin key for custom selection management
  * @private
  */
-export const CustomSelectionPluginKey = new PluginKey('CustomSelection');
+export const CustomSelectionPluginKey = new PluginKey<SelectionState>('CustomSelection');
 
 /**
  * Handle clicks outside the editor
  * @private
- * @param {MouseEvent} event - Mouse event
- * @param {Object} editor - Editor instance
  */
-const handleClickOutside = (event, editor) => {
+const handleClickOutside = (event: MouseEvent, editor: Editor) => {
   const editorElem = editor?.options?.element;
   if (!editorElem) return;
 
-  const isInsideEditor = editorElem?.contains(event.target);
+  const targetElement = event.target instanceof HTMLElement ? event.target : null;
+  const isInsideEditor = targetElement ? editorElem.contains(targetElement) : false;
 
   if (!isInsideEditor) {
     editor.setOptions({
-      focusTarget: event.target,
-    });
+      focusTarget: targetElement,
+    } as unknown as Partial<EditorOptions>);
   } else {
     editor.setOptions({
       focusTarget: null,
-    });
+    } as unknown as Partial<EditorOptions>);
   }
 };
 
 /**
  * Get focus metadata from transaction
  * @private
- * @param {Object} tr - Transaction
- * @returns {Object|undefined} Focus metadata
  */
-function getFocusMeta(tr) {
+function getFocusMeta(tr: Transaction): Partial<SelectionState> | undefined {
   return tr.getMeta(CustomSelectionPluginKey);
 }
 
@@ -85,7 +87,7 @@ function getFocusMeta(tr) {
  * @param {SelectionState} value - State to set
  * @returns {Object} Transaction with metadata
  */
-function setFocusMeta(tr, value) {
+function setFocusMeta(tr: Transaction, value: Partial<SelectionState>): Transaction {
   return tr.setMeta(CustomSelectionPluginKey, value);
 }
 
@@ -95,8 +97,15 @@ function setFocusMeta(tr, value) {
  * @param {Object} state - Editor state
  * @returns {SelectionState} Current focus state
  */
-function getFocusState(state) {
-  return CustomSelectionPluginKey.getState(state);
+function getFocusState(state: EditorState): SelectionState {
+  return CustomSelectionPluginKey.getState(state) as SelectionState;
+}
+
+/**
+ * Type guard to check if target is an Element
+ */
+function isElement(target: EventTarget | null): target is Element {
+  return target instanceof Element;
 }
 
 /**
@@ -105,8 +114,9 @@ function getFocusState(state) {
  * @param {Element} target - DOM element
  * @returns {boolean} True if toolbar input
  */
-const isToolbarInput = (target) => {
-  return !!target?.closest('.button-text-input') || target?.classList?.contains('button-text-input');
+const isToolbarInput = (target: EventTarget | null): boolean => {
+  if (!isElement(target)) return false;
+  return !!target.closest('.button-text-input') || target.classList.contains('button-text-input');
 };
 
 /**
@@ -115,8 +125,9 @@ const isToolbarInput = (target) => {
  * @param {Element} target - DOM element
  * @returns {boolean} True if toolbar button
  */
-const isToolbarButton = (target) => {
-  return !!target?.closest('.toolbar-button') || target?.classList?.contains('toolbar-button');
+const isToolbarButton = (target: EventTarget | null): boolean => {
+  if (!isElement(target)) return false;
+  return !!target.closest('.toolbar-button') || target.classList.contains('toolbar-button');
 };
 
 /**
@@ -129,11 +140,12 @@ export const CustomSelection = Extension.create({
 
   addPmPlugins() {
     const editor = this.editor;
+    if (!editor) return [];
     const customSelectionPlugin = new Plugin({
       key: CustomSelectionPluginKey,
       state: {
-        init: () => ({ ...DEFAULT_SELECTION_STATE }),
-        apply: (tr, value) => {
+        init: (): SelectionState => ({ ...DEFAULT_SELECTION_STATE }),
+        apply: (tr: Transaction, value: SelectionState): SelectionState => {
           const meta = getFocusMeta(tr);
           if (meta !== undefined) {
             return { ...value, ...meta };
@@ -142,7 +154,7 @@ export const CustomSelection = Extension.create({
         },
       },
       view: () => {
-        const clickHandler = (event) => handleClickOutside(event, editor);
+        const clickHandler = (event: MouseEvent) => handleClickOutside(event, editor);
         document?.addEventListener('mousedown', clickHandler);
 
         return {
@@ -153,7 +165,8 @@ export const CustomSelection = Extension.create({
       },
       props: {
         handleDOMEvents: {
-          contextmenu: (view, event) => {
+          contextmenu: (view: EditorView, event: MouseEvent) => {
+            if (!this.editor) return false;
             if (shouldAllowNativeContextMenu(event)) {
               return false;
             }
@@ -180,7 +193,7 @@ export const CustomSelection = Extension.create({
             return false;
           },
 
-          mousedown: (view, event) => {
+          mousedown: (view: EditorView, event: MouseEvent) => {
             // Handle right clicks - prevent focus loss
             if (event.button === 2) {
               if (shouldAllowNativeContextMenu(event)) {
@@ -201,24 +214,24 @@ export const CustomSelection = Extension.create({
                 );
 
                 // Store selection in editor options too
-                this.editor.setOptions({
+                this.editor?.setOptions({
                   lastSelection: selection,
                   preservedSelection: selection,
-                });
+                } as unknown as Partial<EditorOptions>);
               }
               return false;
             }
 
             const { selection } = view.state;
-            const target = event.target;
+            const target = event.target as EventTarget | null;
             const isElement = target instanceof Element;
             const isToolbarBtn = isElement && isToolbarButton(target);
             const isToolbarInp = isElement && isToolbarInput(target);
 
             // Store focus target for other components
-            this.editor.setOptions({
+            this.editor?.setOptions({
               focusTarget: target,
-            });
+            } as unknown as Partial<EditorOptions>);
 
             // Handle toolbar input clicks - preserve selection
             if (isToolbarInp && !selection.empty) {
@@ -233,19 +246,19 @@ export const CustomSelection = Extension.create({
               );
 
               // Store in editor options as well for commands
-              this.editor.setOptions({
+              this.editor?.setOptions({
                 lastSelection: selection,
                 preservedSelection: selection,
-              });
+              } as unknown as Partial<EditorOptions>);
               return false; // Don't prevent the input from getting focus
             }
 
             // Handle toolbar button clicks
             if (isToolbarBtn && !isToolbarInp) {
               if (!selection.empty) {
-                this.editor.setOptions({
+                this.editor?.setOptions({
                   lastSelection: selection,
-                });
+                } as unknown as Partial<EditorOptions>);
                 // Keep selection visible for toolbar buttons
                 view.dispatch(
                   setFocusMeta(view.state.tr, {
@@ -272,18 +285,16 @@ export const CustomSelection = Extension.create({
               );
 
               // Clear selection if clicking outside editor
-              if (!selection.empty && !this.editor.options.element?.contains(target)) {
-                this.editor.setOptions({
-                  lastSelection: selection,
-                });
+              if (!selection.empty && target && !this.editor?.options.element?.contains(target as Node)) {
+                this.editor?.setOptions({ lastSelection: selection } as unknown as Partial<EditorOptions>);
                 const clearSelectionTr = view.state.tr.setSelection(TextSelection.create(view.state.doc, 0));
                 view.dispatch(clearSelectionTr);
               }
             }
           },
 
-          focus: (view) => {
-            const target = this.editor.options.focusTarget;
+          focus: (view: EditorView) => {
+            const target = this.editor?.options.focusTarget ?? null;
             const isElement = target instanceof Element;
             const isToolbarBtn = isElement && isToolbarButton(target);
             const isToolbarInp = isElement && isToolbarInput(target);
@@ -309,8 +320,8 @@ export const CustomSelection = Extension.create({
             }
           },
 
-          blur: (view) => {
-            const target = this.editor.options.focusTarget;
+          blur: (view: EditorView) => {
+            const target = this.editor?.options.focusTarget ?? null;
             const isElement = target instanceof Element;
             const isToolbarBtn = isElement && isToolbarButton(target);
             const isToolbarInp = isElement && isToolbarInput(target);
@@ -343,7 +354,7 @@ export const CustomSelection = Extension.create({
             }
           },
         },
-        decorations: (state) => {
+        decorations: (state: EditorState) => {
           const { selection, doc } = state;
           const focusState = getFocusState(state);
 
@@ -388,14 +399,14 @@ export const CustomSelection = Extension.create({
        */
       restorePreservedSelection:
         () =>
-        ({ tr, state }) => {
+        ({ tr, state }: { tr: Transaction; state: EditorState }): Transaction => {
           const focusState = getFocusState(state);
-          if (focusState.preservedSelection) {
+          if (focusState?.preservedSelection) {
             return tr.setSelection(focusState.preservedSelection);
           }
 
-          const lastSelection = this.editor.options.lastSelection;
-          if (lastSelection) {
+          const lastSelection = (this.editor?.options as { lastSelection?: Selection | null })?.lastSelection;
+          if (lastSelection && lastSelection instanceof Selection) {
             return tr.setSelection(lastSelection);
           }
           return tr;
diff --git a/packages/super-editor/src/extensions/custom-selection/index.js b/packages/super-editor/src/extensions/custom-selection/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/custom-selection/index.js
rename to packages/super-editor/src/extensions/custom-selection/index.ts
diff --git a/packages/super-editor/src/extensions/document/document.js b/packages/super-editor/src/extensions/document/document.ts
similarity index 76%
rename from packages/super-editor/src/extensions/document/document.js
rename to packages/super-editor/src/extensions/document/document.ts
index bae969411..b07bbd670 100644
--- a/packages/super-editor/src/extensions/document/document.js
+++ b/packages/super-editor/src/extensions/document/document.ts
@@ -1,10 +1,8 @@
-// @ts-check
-
 import { Node } from '@core/index.js';
+import type { Editor } from '@core/index.js';
 
 /**
  * Configuration options for Document
- * @typedef {Object} DocumentOptions
  * @category Options
  * @example
  * // Document node is the root - always included
@@ -14,20 +12,23 @@ import { Node } from '@core/index.js';
  *   // Document node wraps all content
  * });
  */
+export type DocumentOptions = Record<string, unknown>;
 
 /**
  * Attributes for document nodes
- * @typedef {Object} DocumentAttributes
  * @category Attributes
- * @property {Object} [attributes] @internal Internal document attributes
  */
+export interface DocumentAttributes {
+  /** @internal Internal document attributes */
+  attributes?: Record<string, unknown>;
+}
 
 /**
  * @module Document
  * @sidebarTitle Document
  * @snippetPath /snippets/extensions/document.mdx
  */
-export const Document = Node.create({
+export const Document = Node.create<DocumentOptions>({
   name: 'doc',
 
   topNode: true,
@@ -39,7 +40,7 @@ export const Document = Node.create({
   },
 
   renderDOM() {
-    return ['doc', 0];
+    return ['doc', 0] as const;
   },
 
   addAttributes() {
@@ -60,7 +61,6 @@ export const Document = Node.create({
     };
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -74,9 +74,9 @@ export const Document = Node.create({
        */
       getDocumentStats:
         () =>
-        ({ editor }) => {
-          const text = editor.getText();
-          const words = text.split(/\s+/).filter((word) => word.length > 0).length;
+        ({ editor }: { editor: Editor }) => {
+          const text = editor.state.doc.textBetween(0, editor.state.doc.content.size, ' ', ' ');
+          const words = text.split(/\s+/).filter((word: string) => word.length > 0).length;
           const characters = text.length;
           const paragraphs = editor.state.doc.content.childCount;
 
@@ -96,7 +96,7 @@ export const Document = Node.create({
        */
       clearDocument:
         () =>
-        ({ commands }) => {
+        ({ commands }: { commands: Editor['commands'] }) => {
           return commands.setContent('<p></p>');
         },
     };
diff --git a/packages/super-editor/src/extensions/document/index.js b/packages/super-editor/src/extensions/document/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/document/index.js
rename to packages/super-editor/src/extensions/document/index.ts
diff --git a/packages/super-editor/src/extensions/dropcursor/dropcursor.js b/packages/super-editor/src/extensions/dropcursor/dropcursor.ts
similarity index 65%
rename from packages/super-editor/src/extensions/dropcursor/dropcursor.js
rename to packages/super-editor/src/extensions/dropcursor/dropcursor.ts
index 406aa8295..72cf17108 100644
--- a/packages/super-editor/src/extensions/dropcursor/dropcursor.js
+++ b/packages/super-editor/src/extensions/dropcursor/dropcursor.ts
@@ -1,14 +1,30 @@
-// @ts-check
 import { Extension } from '@core/index.js';
 import { dropCursor } from 'prosemirror-dropcursor';
 
 /**
  * Configuration options for DropCursor
- * @typedef {Object} DropCursorOptions
- * @category Options
- * @property {string} [color='currentColor'] CSS color for the drop cursor indicator
- * @property {number} [width=2] Width of the drop cursor line in pixels
- * @property {string} [class] Optional CSS class to apply to the drop cursor element
+ */
+export interface DropCursorOptions extends Record<string, unknown> {
+  /**
+   * CSS color for the drop cursor indicator
+   * @default 'currentColor'
+   */
+  color: string;
+  /**
+   * Width of the drop cursor line in pixels
+   * @default 2
+   */
+  width: number;
+  /**
+   * Optional CSS class to apply to the drop cursor element
+   */
+  class?: string;
+}
+
+/**
+ * @module DropCursor
+ * @sidebarTitle Drop Cursor
+ * @snippetPath /snippets/extensions/dropcursor.mdx
  * @example
  * // Customize drop cursor appearance
  * const ConfiguredDropCursor = DropCursor.configure({
@@ -24,13 +40,7 @@ import { dropCursor } from 'prosemirror-dropcursor';
  *   editorExtensions: [ConfiguredDropCursor]
  * });
  */
-
-/**
- * @module DropCursor
- * @sidebarTitle Drop Cursor
- * @snippetPath /snippets/extensions/dropcursor.mdx
- */
-export const DropCursor = Extension.create({
+export const DropCursor = Extension.create<DropCursorOptions>({
   name: 'dropCursor',
 
   addOptions() {
diff --git a/packages/super-editor/src/extensions/dropcursor/index.js b/packages/super-editor/src/extensions/dropcursor/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/dropcursor/index.js
rename to packages/super-editor/src/extensions/dropcursor/index.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.test.js b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.test.js
rename to packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.test.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.js b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.ts
similarity index 79%
rename from packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.js
rename to packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.ts
index d2e384952..1cfd3ecb5 100644
--- a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.js
+++ b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationPlugin.ts
@@ -1,7 +1,10 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { Slice, Node as PmNode } from 'prosemirror-model';
 import { mergeRanges, clampRange } from '@core/helpers/rangeUtils.js';
 import { trackFieldAnnotationsDeletion } from './fieldAnnotationHelpers/trackFieldAnnotationsDeletion.js';
 import { getAllFieldAnnotations } from './fieldAnnotationHelpers/getAllFieldAnnotations.js';
+import type { Editor } from '@core/index.js';
 
 /**
  * Creates a ProseMirror plugin for managing field annotations.
@@ -14,8 +17,21 @@ import { getAllFieldAnnotations } from './fieldAnnotationHelpers/getAllFieldAnno
  * @example
  * const plugin = FieldAnnotationPlugin({ editor, annotationClass: 'field-annotation' });
  */
-export const FieldAnnotationPlugin = (options = {}) => {
-  let { editor, annotationClass } = options;
+interface FieldAnnotationPluginOptions {
+  editor: Editor;
+  annotationClass: string;
+  handleDropOutside?: boolean;
+}
+
+interface DropOutsideParams {
+  fieldAnnotation: string;
+  editor: Editor;
+  view: EditorView;
+  event: DragEvent;
+}
+
+export const FieldAnnotationPlugin = (options: FieldAnnotationPluginOptions) => {
+  const { editor, annotationClass } = options;
 
   return new Plugin({
     key: new PluginKey('fieldAnnotation'),
@@ -33,10 +49,10 @@ export const FieldAnnotationPlugin = (options = {}) => {
     },
 
     props: {
-      handleDrop(view, event, slice, moved) {
+      handleDrop(view: EditorView, event: DragEvent, _slice: Slice, moved: boolean) {
         if (moved) return false;
 
-        let fieldAnnotation = event?.dataTransfer.getData('fieldAnnotation');
+        const fieldAnnotation = event?.dataTransfer?.getData('fieldAnnotation');
 
         if (fieldAnnotation) {
           if (options.handleDropOutside) {
@@ -47,10 +63,10 @@ export const FieldAnnotationPlugin = (options = {}) => {
               event,
             });
           } else {
-            let annotationAttrs;
+            let annotationAttrs: Record<string, unknown> | undefined;
 
             try {
-              let fieldAnnotationObj = JSON.parse(fieldAnnotation);
+              const fieldAnnotationObj = JSON.parse(fieldAnnotation) as { attributes?: Record<string, unknown> };
               annotationAttrs = fieldAnnotationObj.attributes;
             } catch {
               return false;
@@ -61,7 +77,7 @@ export const FieldAnnotationPlugin = (options = {}) => {
               top: event.clientY,
             });
 
-            if (coordinates) {
+            if (coordinates && annotationAttrs) {
               editor.commands.addFieldAnnotation(coordinates.pos, {
                 ...annotationAttrs,
               });
@@ -74,7 +90,7 @@ export const FieldAnnotationPlugin = (options = {}) => {
         return false;
       },
 
-      handlePaste(view, event, slice) {
+      handlePaste(view: EditorView, _event: ClipboardEvent, slice: Slice) {
         const content = slice.content.content.filter((item) => item.type.name === 'fieldAnnotation');
         if (content.length) {
           editor.emit('fieldAnnotationPaste', {
@@ -86,14 +102,14 @@ export const FieldAnnotationPlugin = (options = {}) => {
       },
 
       handleDOMEvents: {
-        dragstart: (view, event) => {
+        dragstart: (_view: EditorView, event: DragEvent) => {
           if (!event.target) return false;
 
-          let { target } = event;
-          let isAnnotationField = target.classList?.contains(annotationClass);
+          const { target } = event;
+          const isAnnotationField = (target as HTMLElement).classList?.contains(annotationClass);
 
           if (isAnnotationField) {
-            event.dataTransfer?.setDragImage(target, 0, 0);
+            event.dataTransfer?.setDragImage(target as Element, 0, 0);
           }
 
           return false;
@@ -124,7 +140,7 @@ export const FieldAnnotationPlugin = (options = {}) => {
         return;
       }
 
-      const affectedRanges = [];
+      const affectedRanges: Array<[number, number]> = [];
       let hasFieldAnnotationsInSlice = false;
       let hasSteps = false;
 
@@ -133,9 +149,12 @@ export const FieldAnnotationPlugin = (options = {}) => {
         hasSteps = true;
 
         transaction.steps.forEach((step) => {
+          // Type assertion for ReplaceStep which has slice property
+          const replaceStep = step as { from?: number; to?: number; slice?: Slice };
+
           // Check if inserted content has field annotations
-          if (step.slice?.content) {
-            step.slice.content.descendants((node) => {
+          if (replaceStep.slice?.content) {
+            replaceStep.slice.content.descendants((node: PmNode) => {
               if (node.type.name === 'fieldAnnotation') {
                 hasFieldAnnotationsInSlice = true;
                 return false;
@@ -144,10 +163,13 @@ export const FieldAnnotationPlugin = (options = {}) => {
           }
 
           // Always track affected ranges for any doc changes that might affect existing field annotations
-          if (typeof step.from === 'number' && typeof step.to === 'number') {
+          if (typeof replaceStep.from === 'number' && typeof replaceStep.to === 'number') {
             // For pure insertions (from === to), derive range from slice size
-            const from = step.from;
-            const to = step.from === step.to && step.slice?.size ? step.from + step.slice.size : step.to;
+            const from = replaceStep.from;
+            const to =
+              replaceStep.from === replaceStep.to && replaceStep.slice?.size
+                ? replaceStep.from + replaceStep.slice.size
+                : replaceStep.to;
             affectedRanges.push([from, to]);
           }
         });
@@ -198,11 +220,11 @@ export const FieldAnnotationPlugin = (options = {}) => {
        * @param {import('prosemirror-model').Node} node - Annotation node discovered in the document.
        * @param {number} pos - Position of the node within the current transaction.
        */
-      const removeMarksFromAnnotation = (node, pos) => {
+      const removeMarksFromAnnotation = (node: PmNode, pos: number) => {
         const { marks } = node;
         const currentNode = tr.doc.nodeAt(pos);
 
-        if (marks.length > 0 && node.eq(currentNode)) {
+        if (marks.length > 0 && currentNode && node.eq(currentNode)) {
           tr.removeMark(pos, pos + node.nodeSize, null);
           changed = true;
         }
@@ -273,16 +295,16 @@ export const FieldAnnotationPlugin = (options = {}) => {
  * @param {DragEvent} params.event - Browser drag event
  * @returns {void}
  */
-function handleDropOutside({ fieldAnnotation, editor, view, event }) {
-  let sourceField;
+function handleDropOutside({ fieldAnnotation, editor, view, event }: DropOutsideParams): void {
+  let sourceField: unknown;
   try {
-    let fieldAnnotationObj = JSON.parse(fieldAnnotation);
+    const fieldAnnotationObj = JSON.parse(fieldAnnotation) as { sourceField?: unknown };
     sourceField = fieldAnnotationObj.sourceField;
   } catch {
     return;
   }
 
-  let coordinates = view.posAtCoords({
+  const coordinates = view.posAtCoords({
     left: event.clientX,
     top: event.clientY,
   });
diff --git a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.test.js b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.test.js
rename to packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.test.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.js b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.ts
similarity index 56%
rename from packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.js
rename to packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.ts
index a6af16305..6e03e871c 100644
--- a/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.js
+++ b/packages/super-editor/src/extensions/field-annotation/FieldAnnotationView.ts
@@ -1,26 +1,43 @@
-import { Attribute } from '@core/index.js';
+import { Attribute, type AttributeValue } from '@core/index.js';
+import type { Editor } from '@core/index.js';
 import { NodeSelection } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, NodeView, ViewMutationRecord } from 'prosemirror-view';
+import type { CommandProps } from '@core/types/ChainedCommands.js';
+
+interface FieldAnnotationViewOptions {
+  editor: Editor;
+  node: PmNode;
+  decorations: readonly Decoration[];
+  getPos: () => number;
+  htmlAttributes: Record<string, unknown>;
+  annotationClass: string;
+  annotationContentClass: string;
+  borderColor: string;
+}
+
+export class FieldAnnotationView implements NodeView {
+  editor: Editor;
 
-export class FieldAnnotationView {
-  editor;
+  node: PmNode;
 
-  node;
+  decorations: readonly Decoration[];
 
-  decorations;
+  getPos: () => number;
 
-  getPos;
+  htmlAttributes: Record<string, unknown>;
 
-  htmlAttributes;
+  dom!: HTMLSpanElement;
 
-  dom;
+  annotationClass: string;
 
-  annotationClass;
+  annotationContentClass: string;
 
-  annotationContentClass;
+  borderColor: string;
 
-  borderColor;
+  contentDOM = null;
 
-  constructor(options) {
+  constructor(options: FieldAnnotationViewOptions) {
     this.editor = options.editor;
     this.node = options.node;
     this.decorations = options.decorations;
@@ -39,41 +56,43 @@ export class FieldAnnotationView {
     this.attachEventListeners();
   }
 
-  buildView() {
-    let { type } = this.node.attrs;
-
-    let handlers = {
-      text: (...args) => this.buildTextView(...args),
-      image: (...args) => this.buildImageView(...args),
-      signature: (...args) => this.buildSignatureView(...args),
-      checkbox: (...args) => this.buildCheckboxView(...args),
-      html: (...args) => this.buildHTMLView(...args),
-      link: (...args) => this.buildLinkView(...args),
-      default: (...args) => this.buildTextView(...args),
+  buildView(): void {
+    const { type } = this.node.attrs;
+
+    type HandlerKey = 'text' | 'image' | 'signature' | 'checkbox' | 'html' | 'link' | 'default';
+
+    const handlers: Record<HandlerKey, () => void> = {
+      text: () => this.buildTextView(),
+      image: () => this.buildImageView(),
+      signature: () => this.buildSignatureView(),
+      checkbox: () => this.buildCheckboxView(),
+      html: () => this.buildHTMLView(),
+      link: () => this.buildLinkView(),
+      default: () => this.buildTextView(),
     };
 
-    let buildHandler = handlers[type] ?? handlers.default;
+    const buildHandler = handlers[type as HandlerKey] ?? handlers.default;
 
     buildHandler();
   }
 
-  buildTextView() {
-    let { displayLabel } = this.node.attrs;
+  buildTextView(): void {
+    const { displayLabel } = this.node.attrs;
 
-    let { annotation } = this.#createAnnotation({
+    const { annotation } = this.#createAnnotation({
       displayLabel,
     });
 
     this.dom = annotation;
   }
 
-  buildImageView() {
-    let { displayLabel, imageSrc } = this.node.attrs;
+  buildImageView(): void {
+    const { displayLabel, imageSrc } = this.node.attrs;
 
-    let { annotation, content } = this.#createAnnotation();
+    const { annotation, content } = this.#createAnnotation();
 
     if (imageSrc) {
-      let img = document.createElement('img');
+      const img = document.createElement('img');
       img.src = imageSrc;
       img.alt = displayLabel;
 
@@ -93,15 +112,15 @@ export class FieldAnnotationView {
     this.dom = annotation;
   }
 
-  buildSignatureView() {
-    let { displayLabel, imageSrc } = this.node.attrs;
+  buildSignatureView(): void {
+    const { displayLabel: rawDisplayLabel, imageSrc } = this.node.attrs;
 
-    displayLabel = displayLabel || 'Signature';
+    const displayLabel = rawDisplayLabel || 'Signature';
 
-    let { annotation, content } = this.#createAnnotation();
+    const { annotation, content } = this.#createAnnotation();
 
     if (imageSrc) {
-      let img = document.createElement('img');
+      const img = document.createElement('img');
       img.src = imageSrc;
       img.alt = displayLabel;
 
@@ -122,18 +141,19 @@ export class FieldAnnotationView {
     this.dom = annotation;
   }
 
-  buildCheckboxView() {
-    let { displayLabel } = this.node.attrs;
+  buildCheckboxView(): void {
+    const { displayLabel } = this.node.attrs;
 
-    let { annotation } = this.#createAnnotation({
+    const { annotation } = this.#createAnnotation({
       displayLabel,
     });
 
     this.dom = annotation;
   }
 
-  buildHTMLView() {
-    let { displayLabel, rawHtml } = this.node.attrs;
+  buildHTMLView(): void {
+    const { displayLabel, rawHtml: rawHtmlAttr } = this.node.attrs;
+    let rawHtml = rawHtmlAttr;
 
     if (!this.editor.options.isHeadless && !!rawHtml) {
       try {
@@ -148,7 +168,7 @@ export class FieldAnnotationView {
       }
     }
 
-    let { annotation, content } = this.#createAnnotation();
+    const { annotation, content } = this.#createAnnotation();
 
     if (rawHtml) {
       content.innerHTML = rawHtml.trim();
@@ -162,13 +182,13 @@ export class FieldAnnotationView {
     this.dom = annotation;
   }
 
-  buildLinkView() {
-    let { displayLabel, linkUrl } = this.node.attrs;
+  buildLinkView(): void {
+    const { displayLabel, linkUrl } = this.node.attrs;
 
-    let { annotation, content } = this.#createAnnotation();
+    const { annotation, content } = this.#createAnnotation();
 
     if (linkUrl) {
-      let link = document.createElement('a');
+      const link = document.createElement('a');
 
       link.href = linkUrl;
       link.target = '_blank';
@@ -185,13 +205,16 @@ export class FieldAnnotationView {
     this.dom = annotation;
   }
 
-  #createAnnotation({ displayLabel } = {}) {
-    let { highlighted } = this.node.attrs;
+  #createAnnotation({ displayLabel }: { displayLabel?: string } = {}): {
+    annotation: HTMLSpanElement;
+    content: HTMLSpanElement;
+  } {
+    const { highlighted } = this.node.attrs;
 
-    let annotation = document.createElement('span');
+    const annotation = document.createElement('span');
     annotation.classList.add(this.annotationClass);
 
-    let content = document.createElement('span');
+    const content = document.createElement('span');
     content.classList.add(this.annotationContentClass);
     content.style.pointerEvents = 'none';
     content.contentEditable = 'false';
@@ -202,25 +225,25 @@ export class FieldAnnotationView {
 
     annotation.append(content);
 
-    let omitHighlight = highlighted === false;
-    let styles = [
+    const omitHighlight = highlighted === false;
+    const styles = [
       `border: 2px solid ${this.borderColor}`,
       `border-radius: 2px`,
       `padding: 1px 2px`,
       `box-sizing: border-box`,
     ];
 
-    let annotationStyle = styles.join('; ');
+    const annotationStyle = styles.join('; ');
 
-    let mergedAttrs = Attribute.mergeAttributes(this.htmlAttributes, {
+    const mergedAttrs = Attribute.mergeAttributes(this.htmlAttributes as Record<string, AttributeValue>, {
       style: omitHighlight ? '' : annotationStyle,
     });
 
-    for (let [key, value] of Object.entries(mergedAttrs)) {
+    for (const [key, value] of Object.entries(mergedAttrs)) {
       if (key === 'style') {
-        annotation.style.cssText = value;
+        annotation.style.cssText = value as string;
       } else {
-        annotation.setAttribute(key, value);
+        annotation.setAttribute(key, value as string);
       }
     }
 
@@ -230,27 +253,27 @@ export class FieldAnnotationView {
     };
   }
 
-  attachEventListeners() {
+  attachEventListeners(): void {
     this.dom.addEventListener('click', this.handleAnnotationClick);
     this.dom.addEventListener('dblclick', this.handleAnnotationDoubleClick);
     this.editor.on('selectionUpdate', this.handleSelectionUpdate);
   }
 
-  removeEventListeners() {
+  removeEventListeners(): void {
     this.dom.removeEventListener('click', this.handleAnnotationClick);
     this.dom.removeEventListener('dblclick', this.handleAnnotationDoubleClick);
     this.editor.off('selectionUpdate', this.handleSelectionUpdate);
   }
 
-  handleSelectionUpdate({ editor }) {
+  handleSelectionUpdate({ editor }: { editor: Editor }): void {
     if (!this.editor.isEditable) {
       return;
     }
 
-    let { selection } = editor.state;
+    const { selection } = editor.state;
 
     if (selection instanceof NodeSelection) {
-      let currentNode = selection.node;
+      const currentNode = selection.node;
 
       if (this.node.eq(currentNode)) {
         this.editor.emit('fieldAnnotationSelected', {
@@ -263,7 +286,7 @@ export class FieldAnnotationView {
     }
   }
 
-  handleAnnotationClick(event) {
+  handleAnnotationClick(event: MouseEvent): void {
     if (!this.editor.isEditable) {
       return;
     }
@@ -277,7 +300,7 @@ export class FieldAnnotationView {
     });
   }
 
-  handleAnnotationDoubleClick(event) {
+  handleAnnotationDoubleClick(event: MouseEvent): void {
     if (!this.editor.isEditable) {
       return;
     }
@@ -291,7 +314,7 @@ export class FieldAnnotationView {
     });
   }
 
-  stopEvent(event) {
+  stopEvent(event: Event): boolean {
     if (!this.editor.isEditable) {
       event.preventDefault();
       return true;
@@ -302,20 +325,20 @@ export class FieldAnnotationView {
 
   // Can be used to manually update the NodeView.
   // Otherwise the NodeView is recreated.
-  update() {
+  update(): boolean {
     return false;
   }
 
-  ignoreMutation() {
+  ignoreMutation(_mutation?: ViewMutationRecord): boolean {
     return true;
   }
 
-  destroy() {
+  destroy(): void {
     this.removeEventListeners();
   }
 
-  updateAttributes(attributes) {
-    this.editor.commands.command(({ tr }) => {
+  updateAttributes(attributes: Record<string, unknown>): void {
+    this.editor.commands.command(({ tr }: CommandProps) => {
       tr.setNodeMarkup(this.getPos(), undefined, {
         ...this.node.attrs,
         ...attributes,
diff --git a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.test.js b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.test.js
rename to packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.test.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.js b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.ts
similarity index 86%
rename from packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.js
rename to packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.ts
index 992796be0..b7b436795 100644
--- a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.js
+++ b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpListsWithAnnotations.ts
@@ -1,8 +1,10 @@
 import { getAllFieldAnnotations } from '../fieldAnnotationHelpers/index.js';
 import { findParentNodeClosestToPos } from '@core/helpers/index.js';
 import { isList as isParagraphList } from '@core/commands/list-helpers';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
 
-const summarizeListContent = (node, fieldsToDeleteSet) => {
+const summarizeListContent = (node: PmNode, fieldsToDeleteSet: Set<string>) => {
   const summary = {
     totalFieldAnnotations: 0,
     deletableFieldAnnotations: 0,
@@ -13,7 +15,7 @@ const summarizeListContent = (node, fieldsToDeleteSet) => {
     return summary;
   }
 
-  node.descendants((child) => {
+  node.descendants((child: PmNode) => {
     if (!child) return true;
 
     if (child.type?.name === 'fieldAnnotation') {
@@ -48,12 +50,10 @@ const summarizeListContent = (node, fieldsToDeleteSet) => {
 /**
  * Clean up lists that contain field annotations if there are annotations
  * being deleted.
- * @param {string[]} fieldsToDelete - Array of field IDs to delete.
- * @returns {function} A ProseMirror command function.
  */
 export const cleanUpListsWithAnnotations =
-  (fieldsToDelete = []) =>
-  ({ dispatch, tr, state }) => {
+  (fieldsToDelete: string[] = []) =>
+  ({ dispatch, tr, state }: { dispatch?: (tr: Transaction) => void; tr: Transaction; state: EditorState }) => {
     if (!dispatch) return true;
 
     if (!Array.isArray(fieldsToDelete)) fieldsToDelete = [fieldsToDelete];
@@ -61,7 +61,7 @@ export const cleanUpListsWithAnnotations =
     const { doc } = state;
     const docxAnnotations = getAllFieldAnnotations(state) || [];
 
-    const nodesToDelete = [];
+    const nodesToDelete: Array<{ pos: number; node: PmNode }> = [];
 
     fieldsToDelete.forEach((fieldId) => {
       const matched = docxAnnotations.find((a) => a.node.attrs.fieldId === fieldId);
diff --git a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotation.test.js b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotation.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotation.test.js
rename to packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotation.test.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.js b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.ts
similarity index 83%
rename from packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.js
rename to packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.ts
index eaf6e1004..f75fb731c 100644
--- a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.js
+++ b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/cleanUpParagraphWithAnnotations.ts
@@ -1,15 +1,15 @@
 import { findFieldAnnotationsByFieldId } from '../fieldAnnotationHelpers/index.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
 
 /**
  * Clean up paragraphs that contain field annotations marked for deletion.
  * If a paragraph has only one field annotation and no other content,
  * it will be deleted.
- * @param {string[]} fieldsToDelete - Array of field IDs to delete.
- * @returns {function} A ProseMirror command function.
  */
 export const cleanUpParagraphWithAnnotations =
-  (fieldsToDelete = []) =>
-  ({ dispatch, tr, state }) => {
+  (fieldsToDelete: string[] = []) =>
+  ({ dispatch, tr, state }: { dispatch?: (tr: Transaction) => void; tr: Transaction; state: EditorState }) => {
     if (!dispatch) return true;
 
     const annotations =
@@ -18,10 +18,10 @@ export const cleanUpParagraphWithAnnotations =
         : []) || [];
 
     // Parent positions to delete (dedup)
-    const toDelete = new Map();
+    const toDelete = new Map<number, boolean>();
 
-    const sizeOf = (doc) => doc.content.size;
-    const inRange = (doc, pos) => Number.isInteger(pos) && pos >= 0 && pos <= sizeOf(doc);
+    const sizeOf = (doc: PmNode): number => doc.content.size;
+    const inRange = (doc: PmNode, pos: number): boolean => Number.isInteger(pos) && pos >= 0 && pos <= sizeOf(doc);
 
     for (const annotation of annotations) {
       const origPos = annotation && annotation.pos;
diff --git a/packages/super-editor/src/extensions/field-annotation/cleanup-commands/index.js b/packages/super-editor/src/extensions/field-annotation/cleanup-commands/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/cleanup-commands/index.js
rename to packages/super-editor/src/extensions/field-annotation/cleanup-commands/index.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/field-annotation.test.js b/packages/super-editor/src/extensions/field-annotation/field-annotation.test.ts
similarity index 98%
rename from packages/super-editor/src/extensions/field-annotation/field-annotation.test.js
rename to packages/super-editor/src/extensions/field-annotation/field-annotation.test.ts
index d7d87ebc1..97696f3f3 100644
--- a/packages/super-editor/src/extensions/field-annotation/field-annotation.test.js
+++ b/packages/super-editor/src/extensions/field-annotation/field-annotation.test.ts
@@ -29,7 +29,7 @@ describe('FieldAnnotation extension commands', () => {
 
   it('updates annotation attributes via updateFieldAnnotation', () => {
     editor.commands.addFieldAnnotationAtSelection({ fieldId: 'field-2', displayLabel: 'Title' });
-    let [annotation] = getAnnotations('field-2');
+    const [annotation] = getAnnotations('field-2');
 
     editor.commands.updateFieldAnnotation(annotation, { displayLabel: 'Updated Title' });
     const [updated] = getAnnotations('field-2');
diff --git a/packages/super-editor/src/extensions/field-annotation/field-annotation.js b/packages/super-editor/src/extensions/field-annotation/field-annotation.ts
similarity index 51%
rename from packages/super-editor/src/extensions/field-annotation/field-annotation.js
rename to packages/super-editor/src/extensions/field-annotation/field-annotation.ts
index 976fabfa3..dd1023fe3 100644
--- a/packages/super-editor/src/extensions/field-annotation/field-annotation.js
+++ b/packages/super-editor/src/extensions/field-annotation/field-annotation.ts
@@ -1,4 +1,5 @@
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { Editor } from '@core/index.js';
 import { FieldAnnotationView } from './FieldAnnotationView.js';
 import { FieldAnnotationPlugin } from './FieldAnnotationPlugin.js';
 import {
@@ -9,15 +10,67 @@ import {
 import { toHex } from 'color2k';
 import { parseSizeUnit, minMax } from '@core/utilities/index.js';
 import { NodeSelection, Selection } from 'prosemirror-state';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { Node as PmNode, Mark as PmMark, DOMOutputSpec } from 'prosemirror-model';
+import type { Decoration } from 'prosemirror-view';
 import { generateDocxRandomId } from '../../core/helpers/index.js';
 import { commands as cleanupCommands } from './cleanup-commands/index.js';
-import { isHeadless } from '@/utils/headless-helpers.js';
+import { isHeadless } from '@/utils/headless-helpers';
 
 export const fieldAnnotationName = 'fieldAnnotation';
 export const annotationClass = 'annotation';
 export const annotationContentClass = 'annotation-content';
 
-export const FieldAnnotation = Node.create({
+interface FieldAnnotationAttributes {
+  type?: string;
+  defaultDisplayLabel?: string;
+  displayLabel?: string;
+  imageSrc?: string | null;
+  rawHtml?: string | null;
+  linkUrl?: string | null;
+  fieldId?: string | null;
+  fieldType?: string | null;
+  fieldColor?: string;
+  hidden?: boolean;
+  visibility?: string;
+  highlighted?: boolean;
+  multipleImage?: boolean | string;
+  size?: { width: number; height: number } | null;
+  extras?: Record<string, unknown>;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  fontFamily?: string | null;
+  fontSize?: string | null;
+  textHighlight?: string | null;
+  textColor?: string | null;
+  generatorIndex?: number | null;
+  hash?: string | null;
+  sdtId?: string | null;
+  [key: string]: unknown;
+}
+
+interface FieldAnnotationOptions extends Record<string, unknown> {
+  htmlAttributes: Record<string, string>;
+  annotationClass: string;
+  annotationContentClass: string;
+  types: string[];
+  defaultType: string;
+  borderColor: string;
+  visibilityOptions: string[];
+  handleDropOutside: boolean;
+  toggleFormatNames: string[];
+}
+
+interface FieldAnnotationNodeViewProps {
+  editor: Editor;
+  node: PmNode;
+  getPos: () => number;
+  HTMLAttributes?: Record<string, unknown>;
+  decorations: readonly Decoration[];
+}
+
+export const FieldAnnotation = Node.create<FieldAnnotationOptions>({
   name: 'fieldAnnotation',
 
   group: 'inline',
@@ -52,9 +105,9 @@ export const FieldAnnotation = Node.create({
   addAttributes() {
     return {
       type: {
-        default: this.options.defaultType,
-        parseDOM: (elem) => elem.getAttribute('data-type'),
-        renderDOM: (attrs) => {
+        default: this.options?.defaultType ?? 'text',
+        parseDOM: (elem: Element) => elem.getAttribute('data-type'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.type) return {};
           return {
             'data-type': attrs.type,
@@ -64,8 +117,8 @@ export const FieldAnnotation = Node.create({
 
       defaultDisplayLabel: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-default-display-label'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-default-display-label'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.defaultDisplayLabel) return {};
           return {
             'data-default-display-label': attrs.defaultDisplayLabel,
@@ -75,8 +128,8 @@ export const FieldAnnotation = Node.create({
 
       displayLabel: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-display-label'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-display-label'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.displayLabel) return {};
           return {
             'data-display-label': attrs.displayLabel,
@@ -87,25 +140,27 @@ export const FieldAnnotation = Node.create({
       imageSrc: {
         default: null,
         rendered: false,
-        parseDOM: (elem) => {
-          let img = elem.querySelector('img');
+        parseDOM: (elem: Element) => {
+          const img = elem.querySelector('img');
           return img?.getAttribute('src') || null;
         },
       },
 
       rawHtml: {
         default: null,
-        parseDOM: (elem) => {
+        parseDOM: (elem: Element) => {
           try {
             const isHtmlType = elem.getAttribute('data-type') === 'html';
             if (!isHtmlType) return null;
-            return JSON.parse(elem.getAttribute('data-raw-html'));
+            const rawHtmlAttr = elem.getAttribute('data-raw-html');
+            if (!rawHtmlAttr) return null;
+            return JSON.parse(rawHtmlAttr);
           } catch (e) {
             console.warn('Paste parse error', e);
           }
           return null;
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.rawHtml) return {};
           return {
             'data-raw-html': JSON.stringify(attrs.rawHtml),
@@ -116,16 +171,16 @@ export const FieldAnnotation = Node.create({
       linkUrl: {
         default: null,
         rendered: false,
-        parseDOM: (elem) => {
-          let link = elem.querySelector('a');
+        parseDOM: (elem: Element) => {
+          const link = elem.querySelector('a');
           return link?.getAttribute('href') || null;
         },
       },
 
       fieldId: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-field-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-field-id'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.fieldId) return {};
           return {
             'data-field-id': attrs.fieldId,
@@ -135,8 +190,8 @@ export const FieldAnnotation = Node.create({
 
       fieldType: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-field-type'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-field-type'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.fieldType) return {};
           return {
             'data-field-type': attrs.fieldType,
@@ -146,17 +201,17 @@ export const FieldAnnotation = Node.create({
 
       fieldColor: {
         default: '#980043',
-        parseDOM: (elem) => elem.getAttribute('data-field-color') || elem.style.backgroundColor || null,
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-field-color') || elem.style.backgroundColor || null,
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.fieldColor || attrs.fieldColor == 'None') return {};
-          let hexColor = toHex(attrs.fieldColor);
-          let isSixValueSyntax = hexColor.slice(1).length === 6;
+          let hexColor = toHex(attrs.fieldColor as string);
+          const isSixValueSyntax = hexColor.slice(1).length === 6;
 
           if (isSixValueSyntax) {
             hexColor = `${hexColor}33`;
           }
 
-          let omitHighlight = attrs.highlighted === false;
+          const omitHighlight = attrs.highlighted === false;
 
           if (omitHighlight) {
             return {
@@ -173,13 +228,13 @@ export const FieldAnnotation = Node.create({
 
       hidden: {
         default: false,
-        parseDOM: (elem) => {
-          let hasHiddenAttr = elem.hasAttribute('hidden');
-          let hasDisplayNoneStyle = elem.style.display === 'none';
-          let isHidden = hasHiddenAttr || hasDisplayNoneStyle;
+        parseDOM: (elem: HTMLElement) => {
+          const hasHiddenAttr = elem.hasAttribute('hidden');
+          const hasDisplayNoneStyle = elem.style.display === 'none';
+          const isHidden = hasHiddenAttr || hasDisplayNoneStyle;
           return isHidden;
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.hidden) return {};
           return {
             style: 'display: none',
@@ -189,12 +244,12 @@ export const FieldAnnotation = Node.create({
 
       visibility: {
         default: 'visible',
-        parseDOM: (el) => {
-          let visibility = el.style.visibility || 'visible';
-          let containsVisibility = this.options.visibilityOptions.includes(visibility);
+        parseDOM: (el: HTMLElement) => {
+          const visibility = el.style.visibility || 'visible';
+          const containsVisibility = this.options?.visibilityOptions?.includes(visibility) ?? false;
           return containsVisibility ? visibility : 'visible';
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.visibility || attrs.visibility === 'visible') return {};
           return { style: `visibility: ${attrs.visibility}` };
         },
@@ -207,8 +262,8 @@ export const FieldAnnotation = Node.create({
 
       multipleImage: {
         default: false,
-        parseDOM: (elem) => elem.getAttribute('data-multiple-image'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-multiple-image'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.multipleImage) return {};
           return {
             'data-multiple-image': attrs.multipleImage,
@@ -218,9 +273,10 @@ export const FieldAnnotation = Node.create({
 
       size: {
         default: null,
-        renderDOM: ({ size }) => {
-          if (!size || !size.width) return {};
-          const style = `width: ${size.width}px; height: ${size.height}px; overflow: hidden;`;
+        renderDOM: ({ size }: { size?: { width: number; height: number } | null }) => {
+          if (!size || typeof size !== 'object' || !('width' in size)) return {};
+          const sizeObj = size as { width: number; height: number };
+          const style = `width: ${sizeObj.width}px; height: ${sizeObj.height}px; overflow: hidden;`;
           return { style };
         },
       },
@@ -233,8 +289,8 @@ export const FieldAnnotation = Node.create({
       /// Formatting attrs for y-prosemirror support.
       bold: {
         default: false,
-        parseDOM: (elem) => elem.getAttribute('data-bold') === 'true',
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-bold') === 'true',
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.bold) return {};
           return {
             'data-bold': 'true',
@@ -245,8 +301,8 @@ export const FieldAnnotation = Node.create({
 
       italic: {
         default: false,
-        parseDOM: (elem) => elem.getAttribute('data-italic') === 'true',
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-italic') === 'true',
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.italic) return {};
           return {
             'data-italic': 'true',
@@ -257,8 +313,8 @@ export const FieldAnnotation = Node.create({
 
       underline: {
         default: false,
-        parseDOM: (elem) => elem.getAttribute('data-underline') === 'true',
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-underline') === 'true',
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.underline) return {};
           return {
             'data-underline': 'true',
@@ -269,8 +325,8 @@ export const FieldAnnotation = Node.create({
 
       fontFamily: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-font-family') || elem.style.fontFamily || null,
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-font-family') || elem.style.fontFamily || null,
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.fontFamily) return {};
           return {
             'data-font-family': attrs.fontFamily,
@@ -281,13 +337,13 @@ export const FieldAnnotation = Node.create({
 
       fontSize: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-font-size') || elem.style.fontSize || null,
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-font-size') || elem.style.fontSize || null,
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.fontSize) return {};
-          let [value, unit] = parseSizeUnit(attrs.fontSize);
+          const [value, rawUnit] = parseSizeUnit(attrs.fontSize as string);
           if (Number.isNaN(value)) return {};
-          unit = unit ? unit : 'pt';
-          let fontSize = `${value}${unit}`;
+          const unit = rawUnit ? rawUnit : 'pt';
+          const fontSize = `${value}${unit}`;
           return {
             'data-font-size': fontSize,
             style: `font-size: ${fontSize}`,
@@ -297,8 +353,8 @@ export const FieldAnnotation = Node.create({
 
       textHighlight: {
         default: null,
-        parseDOM: (element) => element.getAttribute('data-text-highlight'),
-        renderDOM: (attrs) => {
+        parseDOM: (element: Element) => element.getAttribute('data-text-highlight'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.textHighlight) return {};
           return {
             'data-text-highlight': attrs.textHighlight,
@@ -310,8 +366,8 @@ export const FieldAnnotation = Node.create({
 
       textColor: {
         default: null,
-        parseDOM: (element) => element.getAttribute('data-text-color'),
-        renderDOM: (attrs) => {
+        parseDOM: (element: Element) => element.getAttribute('data-text-color'),
+        renderDOM: (attrs: FieldAnnotationAttributes) => {
           if (!attrs.textColor) return {};
           return {
             'data-text-color': attrs.textColor,
@@ -341,81 +397,86 @@ export const FieldAnnotation = Node.create({
   parseDOM() {
     return [
       {
-        tag: `span.${this.options.annotationClass}`,
+        tag: `span.${this.options?.annotationClass ?? 'annotation'}`,
         priority: 60,
       },
     ];
   },
 
-  renderDOM({ node, htmlAttributes }) {
-    let { type, displayLabel, imageSrc, linkUrl } = node.attrs;
+  renderDOM: function (
+    this: { options: FieldAnnotationOptions },
+    { node, htmlAttributes }: { node: PmNode; htmlAttributes: Record<string, unknown> },
+  ): DOMOutputSpec {
+    const { type, displayLabel, imageSrc, linkUrl } = node.attrs as FieldAnnotationAttributes;
+    const options = this.options;
+    const displayText = displayLabel ?? '';
 
-    let textRenderer = () => {
+    const textRenderer = (): DOMOutputSpec => {
       return [
         'span',
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes),
+        Attribute.mergeAttributes(options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
         [
           'span',
           {
-            class: `${this.options.annotationContentClass}`,
+            class: `${options?.annotationContentClass ?? 'annotation-content'}`,
           },
-          displayLabel,
+          displayText,
         ],
       ];
     };
 
-    let imageRenderer = () => {
-      let contentRenderer = () => {
-        if (!imageSrc) return displayLabel;
+    const imageRenderer = (): DOMOutputSpec => {
+      const contentRenderer = (): DOMOutputSpec | string => {
+        if (!imageSrc) return displayText;
         return [
           'img',
           {
             src: imageSrc,
-            alt: displayLabel,
+            alt: displayText,
           },
         ];
       };
 
       return [
         'span',
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes),
+        Attribute.mergeAttributes(options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
         [
           'span',
           {
-            class: `${this.options.annotationContentClass}`,
+            class: `${options?.annotationContentClass ?? 'annotation-content'}`,
           },
           contentRenderer(),
         ],
       ];
     };
 
-    let linkRenderer = () => {
-      let contentRenderer = () => {
-        if (!linkUrl) return displayLabel;
+    const linkRenderer = (): DOMOutputSpec => {
+      const contentRenderer = (): DOMOutputSpec | string => {
+        if (!linkUrl) return displayText;
         return [
           'a',
           {
             href: linkUrl,
             target: '_blank',
           },
-          linkUrl,
+          linkUrl ?? displayText,
         ];
       };
 
       return [
         'span',
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes),
+        Attribute.mergeAttributes(options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
         [
           'span',
           {
-            class: `${this.options.annotationContentClass}`,
+            class: `${options?.annotationContentClass ?? 'annotation-content'}`,
           },
           contentRenderer(),
         ],
       ];
     };
 
-    let renderers = {
+    const renderers: Record<string, () => DOMOutputSpec> = {
       text: () => textRenderer(),
       image: () => imageRenderer(),
       signature: () => imageRenderer(),
@@ -425,13 +486,13 @@ export const FieldAnnotation = Node.create({
       default: () => textRenderer(),
     };
 
-    let renderer = renderers[type] ?? renderers.default;
+    const renderer = renderers[type as string] ?? renderers['default'];
 
     return renderer();
   },
 
   addCommands() {
-    const annotationTypes = this.options.types;
+    const annotationTypes = this.options?.types ?? [];
 
     return {
       /**
@@ -447,37 +508,46 @@ export const FieldAnnotation = Node.create({
        * })
        */
       addFieldAnnotation:
-        (pos, attrs = {}, editorFocus = false) =>
-        ({ editor, dispatch, state, tr }) => {
+        (pos: number, attrs: Record<string, unknown> = {}, editorFocus = false) =>
+        ({
+          editor,
+          dispatch,
+          state,
+          tr,
+        }: {
+          editor: Editor;
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          tr: Transaction;
+        }) => {
           if (dispatch) {
-            let { schema } = editor;
+            const { schema } = editor;
 
-            let newPos = tr.mapping.map(pos);
-            let $pos = state.doc.resolve(newPos);
-            let currentMarks = $pos.marks();
-            currentMarks = currentMarks.length ? [...currentMarks] : null;
+            const newPos = tr.mapping.map(pos);
+            const $pos = state.doc.resolve(newPos);
+            const marks = $pos.marks();
+            const currentMarks: readonly PmMark[] | null = marks.length ? [...marks] : null;
 
             /// for y-prosemirror support - attrs instead marks
-            let formatAttrs = getFormatAttrsFromMarks(currentMarks);
+            const formatAttrs = getFormatAttrsFromMarks(currentMarks);
             ///
 
-            let defaultDisplayLabel = attrs.defaultDisplayLabel ? attrs.defaultDisplayLabel : attrs.displayLabel || '';
+            const defaultDisplayLabel =
+              (attrs as Record<string, unknown>).defaultDisplayLabel ||
+              (attrs as Record<string, unknown>).displayLabel ||
+              '';
 
-            let node = schema.nodes[this.name].create(
-              {
-                ...attrs,
-                ...formatAttrs,
-                defaultDisplayLabel,
-                hash: attrs.hash || generateDocxRandomId(4),
-              },
-              null,
-              null,
-            );
+            const node = schema.nodes[this.name].create({
+              ...attrs,
+              ...formatAttrs,
+              defaultDisplayLabel,
+              hash: (attrs as { hash?: string }).hash || generateDocxRandomId(4),
+            });
 
             state.tr.insert(newPos, node).setSelection(Selection.near(tr.doc.resolve(newPos + node.nodeSize)));
 
             if (editorFocus) {
-              this.editor.view.focus();
+              this.editor?.view?.focus();
             }
           }
 
@@ -485,8 +555,8 @@ export const FieldAnnotation = Node.create({
         },
 
       addFieldAnnotationAtSelection:
-        (attrs = {}, editorFocus = false) =>
-        ({ state, commands }) => {
+        (attrs: Record<string, unknown> = {}, editorFocus = false) =>
+        ({ state, commands }: { state: EditorState; commands: Editor['commands'] }) => {
           const { from } = state.selection;
           return commands.addFieldAnnotation(from, attrs, editorFocus);
         },
@@ -505,30 +575,29 @@ export const FieldAnnotation = Node.create({
        * ])
        */
       replaceWithFieldAnnotation:
-        (fieldsArray) =>
-        ({ editor, dispatch, tr }) => {
+        (fieldsArray: Array<{ from: number; to: number; attrs: Record<string, unknown> }>) =>
+        ({ editor, dispatch, tr }: { editor: Editor; dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
           if (!dispatch) return true;
 
           fieldsArray.forEach((annotation) => {
-            let { from, to, attrs } = annotation;
-            let { schema } = editor;
+            const { from, to, attrs } = annotation;
+            const { schema } = editor;
 
-            let newPosFrom = tr.mapping.map(from);
-            let newPosTo = tr.mapping.map(to);
+            const newPosFrom = tr.mapping.map(from);
+            const newPosTo = tr.mapping.map(to);
 
-            let defaultDisplayLabel = attrs.defaultDisplayLabel ? attrs.defaultDisplayLabel : attrs.displayLabel || '';
+            const defaultDisplayLabel =
+              (attrs as Record<string, unknown>).defaultDisplayLabel ||
+              (attrs as Record<string, unknown>).displayLabel ||
+              '';
 
-            attrs.hash = generateDocxRandomId(4);
+            (attrs as { hash: string }).hash = generateDocxRandomId(4);
 
-            let node = schema.nodes[this.name].create(
-              {
-                ...attrs,
-                defaultDisplayLabel,
-                hash: attrs.hash || generateDocxRandomId(4),
-              },
-              null,
-              null,
-            );
+            const node = schema.nodes[this.name].create({
+              ...attrs,
+              defaultDisplayLabel,
+              hash: (attrs as { hash?: string }).hash || generateDocxRandomId(4),
+            });
 
             tr.replaceWith(newPosFrom, newPosTo, node);
           });
@@ -543,8 +612,8 @@ export const FieldAnnotation = Node.create({
        * editor.commands.replaceFieldAnnotationsWithLabelInSelection()
        */
       replaceFieldAnnotationsWithLabelInSelection:
-        (options = {}) =>
-        ({ commands }) => {
+        (options: Record<string, unknown> = {}) =>
+        ({ commands }: { commands: Editor['commands'] }) => {
           return commands.replaceFieldAnnotationsWithLabel(null, {
             ...options,
             isInSelection: true,
@@ -561,13 +630,16 @@ export const FieldAnnotation = Node.create({
        * editor.commands.replaceFieldAnnotationsWithLabel(['1', '2'])
        */
       replaceFieldAnnotationsWithLabel:
-        (fieldIdOrArray, { isInSelection = false, addToHistory = false, types = annotationTypes } = {}) =>
-        ({ dispatch, state, tr }) => {
-          let { from, to } = state.selection;
+        (
+          fieldIdOrArray: string | string[] | null,
+          { isInSelection = false, addToHistory = false, types = annotationTypes } = {},
+        ) =>
+        ({ dispatch, state, tr }: { dispatch?: (tr: Transaction) => void; state: EditorState; tr: Transaction }) => {
+          const { from, to } = state.selection;
 
           let annotations = isInSelection
             ? findFieldAnnotationsBetween(from, to, state.doc)
-            : findFieldAnnotationsByFieldId(fieldIdOrArray, state);
+            : findFieldAnnotationsByFieldId(fieldIdOrArray ?? '', state);
 
           annotations = types.length ? annotations.filter(({ node }) => types.includes(node.attrs.type)) : annotations;
 
@@ -581,22 +653,22 @@ export const FieldAnnotation = Node.create({
 
           if (dispatch) {
             annotations.forEach((annotation) => {
-              let { pos, node } = annotation;
+              const { pos, node } = annotation;
 
-              let newPosFrom = tr.mapping.map(pos);
-              let newPosTo = tr.mapping.map(pos + node.nodeSize);
+              const newPosFrom = tr.mapping.map(pos);
+              const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-              let currentNode = tr.doc.nodeAt(newPosFrom);
-              let nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
+              const currentNode = tr.doc.nodeAt(newPosFrom);
+              const nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
 
-              let $newPosFrom = tr.doc.resolve(newPosFrom);
-              let currentMarks = $newPosFrom.marks();
-              currentMarks = currentMarks.length ? [...currentMarks] : null;
+              const $newPosFrom = tr.doc.resolve(newPosFrom);
+              const marksAtPos = $newPosFrom.marks();
+              const currentMarks: readonly PmMark[] | null = marksAtPos.length ? [...marksAtPos] : null;
 
               if (nodeEqual) {
                 // empty text nodes are not allowed.
-                let label = node.attrs.displayLabel || ' ';
-                let textNode = state.schema.text(label, currentMarks);
+                const label = node.attrs.displayLabel || ' ';
+                const textNode = state.schema.text(label, currentMarks ?? undefined);
                 tr.replaceWith(newPosFrom, newPosTo, textNode);
               }
             });
@@ -612,8 +684,8 @@ export const FieldAnnotation = Node.create({
        */
       resetFieldAnnotations:
         () =>
-        ({ dispatch, state, tr }) => {
-          let annotations = getAllFieldAnnotations(state);
+        ({ dispatch, state, tr }: { dispatch?: (tr: Transaction) => void; state: EditorState; tr: Transaction }) => {
+          const annotations = getAllFieldAnnotations(state);
 
           if (!annotations.length) {
             return true;
@@ -625,13 +697,13 @@ export const FieldAnnotation = Node.create({
 
           if (dispatch) {
             annotations.forEach(({ pos, node }) => {
-              let newPos = tr.mapping.map(pos);
-              let currentNode = tr.doc.nodeAt(newPos);
-              let nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
+              const newPos = tr.mapping.map(pos);
+              const currentNode = tr.doc.nodeAt(newPos);
+              const nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
 
               if (nodeEqual) {
                 // if defaultDisplayLabel is not defined then we fallback to displayLabel.
-                let displayLabel = node.attrs.defaultDisplayLabel || node.attrs.displayLabel || '';
+                const displayLabel = node.attrs.defaultDisplayLabel || node.attrs.displayLabel || '';
 
                 tr.setNodeMarkup(newPos, undefined, {
                   ...node.attrs,
@@ -664,9 +736,17 @@ export const FieldAnnotation = Node.create({
        * })
        */
       updateFieldAnnotations:
-        (fieldIdOrArray, attrs = {}) =>
-        ({ dispatch, state, commands }) => {
-          let annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
+        (fieldIdOrArray: string | string[], attrs: Record<string, unknown> = {}) =>
+        ({
+          dispatch,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
 
           if (!annotations.length) {
             return true;
@@ -687,8 +767,8 @@ export const FieldAnnotation = Node.create({
        * Used for a case when multiple annotations for one input presented
        */
       updateFieldAnnotation:
-        (annotation, attrs = {}) =>
-        ({ dispatch, commands }) => {
+        (annotation: { pos: number; node: PmNode } | null, attrs: Record<string, unknown> = {}) =>
+        ({ dispatch, commands }: { dispatch?: (tr: Transaction) => void; commands: Editor['commands'] }) => {
           if (!annotation) {
             return true;
           }
@@ -697,11 +777,13 @@ export const FieldAnnotation = Node.create({
             commands.updateFieldAnnotationsAttributes([annotation], attrs);
 
             // Don't force update pagination in headless mode
-            if (this.editor.options.pagination && !isHeadless(this.editor)) {
+            if ((this.editor?.options as { pagination?: unknown })?.pagination && !isHeadless(this.editor)) {
               setTimeout(() => {
-                const newTr = this.editor.view.state.tr;
-                newTr.setMeta('forceUpdatePagination', true);
-                this.editor.view.dispatch(newTr);
+                const newTr = this.editor?.view?.state.tr;
+                if (newTr) {
+                  newTr.setMeta('forceUpdatePagination', true);
+                  this.editor?.view?.dispatch(newTr);
+                }
               }, 50);
             }
             return true;
@@ -716,8 +798,8 @@ export const FieldAnnotation = Node.create({
        * @param attrs The attributes object.
        */
       updateFieldAnnotationsAttributes:
-        (annotations, attrs = {}) =>
-        ({ dispatch, tr }) => {
+        (annotations: Array<{ pos: number; node: PmNode }>, attrs: Record<string, unknown> = {}) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
           if (!dispatch) return true;
 
           // Specify that we are updating annotations
@@ -725,10 +807,10 @@ export const FieldAnnotation = Node.create({
           tr.setMeta('fieldAnnotationUpdate', true);
 
           annotations.forEach((annotation) => {
-            let { pos, node } = annotation;
-            let newPos = tr.mapping.map(pos);
-            let currentNode = tr.doc.nodeAt(newPos);
-            let nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
+            const { pos, node } = annotation;
+            const newPos = tr.mapping.map(pos);
+            const currentNode = tr.doc.nodeAt(newPos);
+            const nodeEqual = node.attrs.fieldId === currentNode?.attrs?.fieldId;
             if (nodeEqual) {
               tr.setNodeMarkup(newPos, undefined, {
                 ...node.attrs,
@@ -749,9 +831,9 @@ export const FieldAnnotation = Node.create({
        * editor.commands.deleteFieldAnnotations(['123', '456'])
        */
       deleteFieldAnnotations:
-        (fieldIdOrArray) =>
-        ({ dispatch, state, tr }) => {
-          let annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
+        (fieldIdOrArray: string | string[]) =>
+        ({ dispatch, state, tr }: { dispatch?: (tr: Transaction) => void; state: EditorState; tr: Transaction }) => {
+          const annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
 
           if (!annotations.length) {
             return true;
@@ -759,12 +841,12 @@ export const FieldAnnotation = Node.create({
 
           if (dispatch) {
             annotations.forEach((annotation) => {
-              let { pos, node } = annotation;
-              let newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
-              let newPosTo = tr.mapping.map(pos + node.nodeSize);
+              const { pos, node } = annotation;
+              const newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
+              const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-              let currentNode = tr.doc.nodeAt(newPosFrom);
-              if (node.eq(currentNode)) {
+              const currentNode = tr.doc.nodeAt(newPosFrom);
+              if (currentNode && node.eq(currentNode)) {
                 tr.delete(newPosFrom, newPosTo);
               }
             });
@@ -774,20 +856,20 @@ export const FieldAnnotation = Node.create({
         },
 
       deleteFieldAnnotationsByNode:
-        (annotations) =>
-        ({ dispatch, tr }) => {
+        (annotations: Array<{ pos: number; node: PmNode }>) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
           if (!annotations.length) {
             return true;
           }
 
           if (dispatch) {
             annotations.forEach((annotation) => {
-              let { pos, node } = annotation;
-              let newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
-              let newPosTo = tr.mapping.map(pos + node.nodeSize);
+              const { pos, node } = annotation;
+              const newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
+              const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-              let currentNode = tr.doc.nodeAt(newPosFrom);
-              if (node.eq(currentNode)) {
+              const currentNode = tr.doc.nodeAt(newPosFrom);
+              if (currentNode && node.eq(currentNode)) {
                 tr.delete(newPosFrom, newPosTo);
               }
             });
@@ -797,19 +879,19 @@ export const FieldAnnotation = Node.create({
         },
 
       deleteFieldAnnotation:
-        (annotation) =>
-        ({ dispatch, tr }) => {
+        (annotation: { pos: number; node: PmNode } | null) =>
+        ({ dispatch, tr }: { dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
           if (!annotation) {
             return true;
           }
 
           if (dispatch) {
-            let { pos, node } = annotation;
-            let newPosFrom = tr.mapping.map(pos);
-            let newPosTo = tr.mapping.map(pos + node.nodeSize);
+            const { pos, node } = annotation;
+            const newPosFrom = tr.mapping.map(pos);
+            const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-            let currentNode = tr.doc.nodeAt(newPosFrom);
-            if (node.eq(currentNode)) {
+            const currentNode = tr.doc.nodeAt(newPosFrom);
+            if (currentNode && node.eq(currentNode)) {
               tr.delete(newPosFrom, newPosTo);
             }
           }
@@ -827,9 +909,9 @@ export const FieldAnnotation = Node.create({
        * editor.commands.sliceFieldAnnotations(['123', '456'], 5)
        */
       sliceFieldAnnotations:
-        (fieldIdOrArray, end) =>
-        ({ dispatch, state, tr }) => {
-          let annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
+        (fieldIdOrArray: string | string[], end: number) =>
+        ({ dispatch, state, tr }: { dispatch?: (tr: Transaction) => void; state: EditorState; tr: Transaction }) => {
+          const annotations = findFieldAnnotationsByFieldId(fieldIdOrArray, state);
 
           if (!annotations.length) {
             return true;
@@ -838,12 +920,12 @@ export const FieldAnnotation = Node.create({
           if (dispatch) {
             annotations.forEach((annotation, index) => {
               if (index >= end) {
-                let { pos, node } = annotation;
-                let newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
-                let newPosTo = tr.mapping.map(pos + node.nodeSize);
+                const { pos, node } = annotation;
+                const newPosFrom = tr.mapping.map(pos); // map the position between transaction steps
+                const newPosTo = tr.mapping.map(pos + node.nodeSize);
 
-                let currentNode = tr.doc.nodeAt(newPosFrom);
-                if (node.eq(currentNode)) {
+                const currentNode = tr.doc.nodeAt(newPosFrom);
+                if (currentNode && node.eq(currentNode)) {
                   tr.delete(newPosFrom, newPosTo);
                 }
               }
@@ -865,19 +947,30 @@ export const FieldAnnotation = Node.create({
        * })
        */
       setFieldAnnotationsHiddenByCondition:
-        (predicate = () => false, unsetFromOthers = false) =>
-        ({ dispatch, state, chain }) => {
-          let annotations = getAllFieldAnnotations(state);
+        (predicate: (node: PmNode) => boolean = () => false, unsetFromOthers = false) =>
+        ({
+          dispatch,
+          state,
+          chain,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          chain: Editor['chain'];
+        }) => {
+          const annotations = getAllFieldAnnotations(state);
 
           if (!annotations.length) {
             return true;
           }
 
           if (dispatch) {
-            let otherAnnotations = [];
-            let matchedAnnotations = annotations.filter((annotation) => {
-              if (predicate(annotation.node)) return annotation;
-              else otherAnnotations.push(annotation);
+            const otherAnnotations: Array<{ pos: number; node: PmNode }> = [];
+            const matchedAnnotations = annotations.filter((annotation) => {
+              const isMatch = predicate(annotation.node);
+              if (!isMatch) {
+                otherAnnotations.push(annotation);
+              }
+              return isMatch;
             });
 
             if (unsetFromOthers) {
@@ -900,8 +993,16 @@ export const FieldAnnotation = Node.create({
        */
       unsetFieldAnnotationsHidden:
         () =>
-        ({ dispatch, state, commands }) => {
-          let annotations = getAllFieldAnnotations(state);
+        ({
+          dispatch,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const annotations = getAllFieldAnnotations(state);
 
           if (!annotations.length) {
             return true;
@@ -923,15 +1024,23 @@ export const FieldAnnotation = Node.create({
        * editor.commands.setFieldAnnotationsVisibility('hidden');
        */
       setFieldAnnotationsVisibility:
-        (visibility = 'visible') =>
-        ({ dispatch, state, commands }) => {
-          let annotations = getAllFieldAnnotations(state);
+        (visibility: string = 'visible') =>
+        ({
+          dispatch,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const annotations = getAllFieldAnnotations(state);
 
           if (!annotations.length) {
             return true;
           }
 
-          let containsVisibility = this.options.visibilityOptions.includes(visibility);
+          const containsVisibility = this.options?.visibilityOptions?.includes(visibility) ?? false;
 
           if (!containsVisibility) {
             return false;
@@ -960,18 +1069,24 @@ export const FieldAnnotation = Node.create({
        * editor.commands.setFieldAnnotationsHighlighted(() => true, true)
        */
       setFieldAnnotationsHighlighted:
-        (predicate = () => false, highlighted = true) =>
-        ({ dispatch, state, commands }) => {
-          let annotations = getAllFieldAnnotations(state);
+        (predicate: (node: PmNode) => boolean = () => false, highlighted = true) =>
+        ({
+          dispatch,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const annotations = getAllFieldAnnotations(state);
 
           if (!annotations.length) {
             return true;
           }
 
           if (dispatch) {
-            let matchedAnnotations = annotations.filter((annotation) => {
-              if (predicate(annotation.node)) return annotation;
-            });
+            const matchedAnnotations = annotations.filter((annotation) => predicate(annotation.node));
 
             return commands.updateFieldAnnotationsAttributes(matchedAnnotations, {
               highlighted,
@@ -983,16 +1098,27 @@ export const FieldAnnotation = Node.create({
 
       /// Formatting commands for y-prosemirror support.
       toggleFieldAnnotationsFormat:
-        (name, setSelection = false) =>
-        ({ dispatch, tr, state, commands }) => {
-          let formats = this.options.toggleFormatNames;
+        (name: string, setSelection = false) =>
+        ({
+          dispatch,
+          tr,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          tr: Transaction;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const formats = this.options?.toggleFormatNames ?? [];
 
           if (!formats.includes(name)) {
             return false;
           }
 
-          let { from, to, node } = state.selection;
-          let annotations = findFieldAnnotationsBetween(from, to, state.doc);
+          const { from, to } = state.selection;
+          const selectionNode = state.selection instanceof NodeSelection ? state.selection.node : null;
+          const annotations = findFieldAnnotationsBetween(from, to, state.doc);
 
           if (!annotations.length) {
             return true;
@@ -1001,11 +1127,11 @@ export const FieldAnnotation = Node.create({
           if (dispatch) {
             annotations.forEach((annotation) => {
               commands.updateFieldAnnotationsAttributes([annotation], {
-                [name]: !annotation.node.attrs[name],
+                [name]: !(annotation.node.attrs as Record<string, unknown>)[name],
               });
             });
 
-            if (setSelection && node?.type.name === this.name) {
+            if (setSelection && selectionNode?.type.name === this.name) {
               tr.setSelection(NodeSelection.create(tr.doc, from));
             }
           }
@@ -1014,10 +1140,21 @@ export const FieldAnnotation = Node.create({
         },
 
       setFieldAnnotationsFontFamily:
-        (fontFamily, setSelection = false) =>
-        ({ dispatch, tr, state, commands }) => {
-          let { from, to, node } = state.selection;
-          let annotations = findFieldAnnotationsBetween(from, to, state.doc);
+        (fontFamily: string, setSelection = false) =>
+        ({
+          dispatch,
+          tr,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          tr: Transaction;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const { from, to } = state.selection;
+          const selectionNode = state.selection instanceof NodeSelection ? state.selection.node : null;
+          const annotations = findFieldAnnotationsBetween(from, to, state.doc);
 
           if (!annotations.length) {
             return true;
@@ -1030,7 +1167,7 @@ export const FieldAnnotation = Node.create({
               });
             });
 
-            if (setSelection && node?.type.name === this.name) {
+            if (setSelection && selectionNode?.type.name === this.name) {
               tr.setSelection(NodeSelection.create(tr.doc, from));
             }
           }
@@ -1039,17 +1176,28 @@ export const FieldAnnotation = Node.create({
         },
 
       setFieldAnnotationsFontSize:
-        (fontSize, setSelection = false) =>
-        ({ dispatch, tr, state, commands }) => {
-          let { from, to, node } = state.selection;
-          let annotations = findFieldAnnotationsBetween(from, to, state.doc);
+        (fontSize: string | number, setSelection = false) =>
+        ({
+          dispatch,
+          tr,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          tr: Transaction;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const { from, to } = state.selection;
+          const selectionNode = state.selection instanceof NodeSelection ? state.selection.node : null;
+          const annotations = findFieldAnnotationsBetween(from, to, state.doc);
 
           if (!annotations.length) {
             return true;
           }
 
-          let [value, unit] = parseSizeUnit(fontSize);
-          let min = 8,
+          let [value, unit] = parseSizeUnit(String(fontSize));
+          const min = 8,
             max = 96,
             defaultUnit = 'pt';
 
@@ -1057,7 +1205,7 @@ export const FieldAnnotation = Node.create({
             return false;
           }
 
-          value = minMax(value, min, max);
+          value = minMax(value as number, min, max);
           unit = unit ? unit : defaultUnit;
 
           if (dispatch) {
@@ -1067,7 +1215,7 @@ export const FieldAnnotation = Node.create({
               });
             });
 
-            if (setSelection && node?.type.name === this.name) {
+            if (setSelection && selectionNode?.type.name === this.name) {
               tr.setSelection(NodeSelection.create(tr.doc, from));
             }
           }
@@ -1076,10 +1224,21 @@ export const FieldAnnotation = Node.create({
         },
 
       setFieldAnnotationsTextHighlight:
-        (color, setSelection = false) =>
-        ({ dispatch, tr, state, commands }) => {
-          let { from, to, node } = state.selection;
-          let annotations = findFieldAnnotationsBetween(from, to, state.doc);
+        (color: string, setSelection = false) =>
+        ({
+          dispatch,
+          tr,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          tr: Transaction;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const { from, to } = state.selection;
+          const selectionNode = state.selection instanceof NodeSelection ? state.selection.node : null;
+          const annotations = findFieldAnnotationsBetween(from, to, state.doc);
 
           if (!annotations.length) {
             return true;
@@ -1092,7 +1251,7 @@ export const FieldAnnotation = Node.create({
               });
             });
 
-            if (setSelection && node?.type.name === this.name) {
+            if (setSelection && selectionNode?.type.name === this.name) {
               tr.setSelection(NodeSelection.create(tr.doc, from));
             }
           }
@@ -1101,10 +1260,21 @@ export const FieldAnnotation = Node.create({
         },
 
       setFieldAnnotationsTextColor:
-        (color, setSelection = false) =>
-        ({ dispatch, tr, state, commands }) => {
-          let { from, to, node } = state.selection;
-          let annotations = findFieldAnnotationsBetween(from, to, state.doc);
+        (color: string, setSelection = false) =>
+        ({
+          dispatch,
+          tr,
+          state,
+          commands,
+        }: {
+          dispatch?: (tr: Transaction) => void;
+          tr: Transaction;
+          state: EditorState;
+          commands: Editor['commands'];
+        }) => {
+          const { from, to } = state.selection;
+          const selectionNode = state.selection instanceof NodeSelection ? state.selection.node : null;
+          const annotations = findFieldAnnotationsBetween(from, to, state.doc);
 
           if (!annotations.length) {
             return true;
@@ -1117,7 +1287,7 @@ export const FieldAnnotation = Node.create({
               });
             });
 
-            if (setSelection && node?.type.name === this.name) {
+            if (setSelection && selectionNode?.type.name === this.name) {
               tr.setSelection(NodeSelection.create(tr.doc, from));
             }
           }
@@ -1128,51 +1298,68 @@ export const FieldAnnotation = Node.create({
 
       // Clean up commands (after field deletion)
       ...cleanupCommands,
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 
   addNodeView() {
-    return (props) => {
+    return (props: FieldAnnotationNodeViewProps) => {
       return new FieldAnnotationView({
         ...props,
-        annotationClass: this.options.annotationClass,
-        annotationContentClass: this.options.annotationContentClass,
-        borderColor: this.options.borderColor,
+        htmlAttributes: props.HTMLAttributes ?? {},
+        annotationClass: this.options?.annotationClass ?? 'annotation',
+        annotationContentClass: this.options?.annotationContentClass ?? 'annotation-content',
+        borderColor: this.options?.borderColor ?? '#b015b3',
       });
     };
   },
 
   addPmPlugins() {
+    if (!this.editor) {
+      return [];
+    }
+
     return [
       FieldAnnotationPlugin({
         editor: this.editor,
-        annotationClass: this.options.annotationClass,
-        handleDropOutside: this.options.handleDropOutside,
+        annotationClass: this.options?.annotationClass ?? 'annotation',
+        handleDropOutside: this.options?.handleDropOutside ?? true,
       }),
     ];
   },
 });
 
 /// for y-prosemirror support
-function getFormatAttrsFromMarks(marks) {
+function getFormatAttrsFromMarks(marks: readonly PmMark[] | null): {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  fontFamily: string | null;
+  fontSize: string | null;
+} {
   if (!marks) {
-    return {};
+    return {
+      bold: false,
+      italic: false,
+      underline: false,
+      fontFamily: null,
+      fontSize: null,
+    };
   }
 
-  let formatAttrs = {
+  const formatAttrs = {
     bold: false,
     italic: false,
     underline: false,
-    fontFamily: null,
-    fontSize: null,
+    fontFamily: null as string | null,
+    fontSize: null as string | null,
   };
 
   if (marks && marks.length) {
-    formatAttrs.bold = marks.some((mark) => mark.type.name === 'bold');
-    formatAttrs.italic = marks.some((mark) => mark.type.name === 'italic');
-    formatAttrs.underline = marks.some((mark) => mark.type.name === 'underline');
+    formatAttrs.bold = marks.some((mark: PmMark) => mark.type.name === 'bold');
+    formatAttrs.italic = marks.some((mark: PmMark) => mark.type.name === 'italic');
+    formatAttrs.underline = marks.some((mark: PmMark) => mark.type.name === 'underline');
 
-    let textStyle = marks.find((mark) => mark.type.name === 'textStyle');
+    const textStyle = marks.find((mark: PmMark) => mark.type.name === 'textStyle');
 
     if (textStyle) {
       formatAttrs.fontFamily = textStyle.attrs.fontFamily ?? null;
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/fieldAnnotationHelpers.test.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/fieldAnnotationHelpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/fieldAnnotationHelpers.test.js
rename to packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/fieldAnnotationHelpers.test.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.js
deleted file mode 100644
index 105e283e7..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { getAllFieldAnnotations } from './getAllFieldAnnotations.js';
-
-export function findFieldAnnotations(predicate, state) {
-  let allFieldAnnotations = getAllFieldAnnotations(state);
-  let fieldAnnotations = [];
-
-  allFieldAnnotations.forEach((annotation) => {
-    if (predicate(annotation.node)) {
-      fieldAnnotations.push(annotation);
-    }
-  });
-
-  return fieldAnnotations;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.ts
new file mode 100644
index 000000000..d238326e8
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotations.ts
@@ -0,0 +1,19 @@
+import { getAllFieldAnnotations } from './getAllFieldAnnotations.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState } from 'prosemirror-state';
+
+export function findFieldAnnotations(
+  predicate: (node: PmNode) => boolean,
+  state: EditorState,
+): Array<{ node: PmNode; pos: number }> {
+  const allFieldAnnotations = getAllFieldAnnotations(state);
+  const fieldAnnotations: Array<{ node: PmNode; pos: number }> = [];
+
+  allFieldAnnotations.forEach((annotation: { node: PmNode; pos: number }) => {
+    if (predicate(annotation.node)) {
+      fieldAnnotations.push(annotation);
+    }
+  });
+
+  return fieldAnnotations;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.js
deleted file mode 100644
index 00df24cd3..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Find all field annotations between positions.
- * @param from From position.
- * @param to To position.
- * @param doc Document.
- * @returns The array of field annotations (node and pos).
- */
-export function findFieldAnnotationsBetween(from, to, doc) {
-  let fieldAnnotations = [];
-
-  doc.nodesBetween(from, to, (node, pos) => {
-    if (!node || node?.nodeSize === undefined) {
-      return;
-    }
-
-    if (node.type.name === 'fieldAnnotation') {
-      fieldAnnotations.push({
-        node,
-        pos,
-      });
-    }
-  });
-
-  return fieldAnnotations;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.ts
new file mode 100644
index 000000000..84c1a0dcb
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsBetween.ts
@@ -0,0 +1,27 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+/**
+ * Find all field annotations between positions.
+ */
+export function findFieldAnnotationsBetween(
+  from: number,
+  to: number,
+  doc: PmNode,
+): Array<{ node: PmNode; pos: number }> {
+  const fieldAnnotations: Array<{ node: PmNode; pos: number }> = [];
+
+  doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
+    if (!node || node?.nodeSize === undefined) {
+      return;
+    }
+
+    if (node.type.name === 'fieldAnnotation') {
+      fieldAnnotations.push({
+        node,
+        pos,
+      });
+    }
+  });
+
+  return fieldAnnotations;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.js
deleted file mode 100644
index 153c4b017..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { helpers } from '@core/index.js';
-
-const { findChildren } = helpers;
-
-/**
- * Find field annotations by field ID or array of field IDs.
- * @param fieldIdOrArray The field ID or array of field IDs.
- * @param state The editor state.
- * @returns The field annotations array.
- */
-export function findFieldAnnotationsByFieldId(fieldIdOrArray, state) {
-  let fieldAnnotations = findChildren(state.doc, (node) => {
-    let isFieldAnnotation = node.type.name === 'fieldAnnotation';
-    if (Array.isArray(fieldIdOrArray)) {
-      return isFieldAnnotation && fieldIdOrArray.includes(node.attrs.fieldId);
-    } else {
-      return isFieldAnnotation && node.attrs.fieldId === fieldIdOrArray;
-    }
-  });
-
-  return fieldAnnotations;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.ts
new file mode 100644
index 000000000..b0437a097
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFieldAnnotationsByFieldId.ts
@@ -0,0 +1,24 @@
+import { helpers } from '@core/index.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState } from 'prosemirror-state';
+
+const { findChildren } = helpers;
+
+/**
+ * Find field annotations by field ID or array of field IDs.
+ */
+export function findFieldAnnotationsByFieldId(
+  fieldIdOrArray: string | string[],
+  state: EditorState,
+): Array<{ node: PmNode; pos: number }> {
+  const fieldAnnotations = findChildren(state.doc, (node: PmNode) => {
+    const isFieldAnnotation = node.type.name === 'fieldAnnotation';
+    if (Array.isArray(fieldIdOrArray)) {
+      return isFieldAnnotation && fieldIdOrArray.includes(node.attrs.fieldId);
+    } else {
+      return isFieldAnnotation && node.attrs.fieldId === fieldIdOrArray;
+    }
+  });
+
+  return fieldAnnotations;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.js
deleted file mode 100644
index 9caadb3f7..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Find first field annotation by field ID.
- * @param fieldId The field ID.
- * @param state The editor state.
- * @returns The field annotation or null.
- */
-export function findFirstFieldAnnotationByFieldId(fieldId, state) {
-  let fieldAnnotation = findNode(state.doc, (node) => {
-    return node.type.name === 'fieldAnnotation' && node.attrs.fieldId === fieldId;
-  });
-
-  return fieldAnnotation;
-}
-
-function findNode(node, predicate) {
-  let found = null;
-  node.descendants((node, pos) => {
-    if (predicate(node)) found = { node, pos };
-    if (found) return false;
-  });
-  return found;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.ts
new file mode 100644
index 000000000..95fd9f5c6
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findFirstFieldAnnotationByFieldId.ts
@@ -0,0 +1,25 @@
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState } from 'prosemirror-state';
+
+/**
+ * Find first field annotation by field ID.
+ */
+export function findFirstFieldAnnotationByFieldId(
+  fieldId: string,
+  state: EditorState,
+): { node: PmNode; pos: number } | null {
+  const fieldAnnotation = findNode(state.doc, (node: PmNode) => {
+    return node.type.name === 'fieldAnnotation' && node.attrs.fieldId === fieldId;
+  });
+
+  return fieldAnnotation;
+}
+
+function findNode(node: PmNode, predicate: (node: PmNode) => boolean): { node: PmNode; pos: number } | null {
+  let found: { node: PmNode; pos: number } | null = null;
+  node.descendants((node: PmNode, pos: number) => {
+    if (predicate(node)) found = { node, pos };
+    if (found) return false;
+  });
+  return found;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.ts
similarity index 57%
rename from packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.js
rename to packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.ts
index 5b808f1eb..6dc9959c5 100644
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.js
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findHeaderFooterAnnotationsByFieldId.ts
@@ -1,24 +1,27 @@
 import { helpers } from '@core/index.js';
 import { getAllHeaderFooterEditors } from '../../../core/helpers/annotator.js';
+import type { Editor } from '@core/index.js';
+import type { Node as PmNode } from 'prosemirror-model';
 
 const { findChildren } = helpers;
 
 /**
  * Find field annotations in headers and footers by field ID or array of field IDs.
- * @param fieldIdOrArray The field ID or array of field IDs.
- * @param editor The editor state.
- * @returns The field annotations array.
  */
-export function findHeaderFooterAnnotationsByFieldId(fieldIdOrArray, editor, activeSectionEditor) {
-  const sectionEditors = getAllHeaderFooterEditors(editor);
-  const annotations = [];
+export function findHeaderFooterAnnotationsByFieldId(
+  fieldIdOrArray: string | string[],
+  editor: Editor,
+  activeSectionEditor: Editor,
+): Array<{ node: PmNode; pos: number }> {
+  const sectionEditors = getAllHeaderFooterEditors() as Array<{ editor: Editor }>;
+  const annotations: Array<{ node: PmNode; pos: number }> = [];
   sectionEditors.forEach(({ editor: sectionEditor }) => {
     const state =
       activeSectionEditor.options.documentId === sectionEditor.options.documentId
         ? activeSectionEditor.state
         : sectionEditor.state;
-    const fieldAnnotations = findChildren(state.doc, (node) => {
-      let isFieldAnnotation = node.type.name === 'fieldAnnotation';
+    const fieldAnnotations = findChildren(state.doc, (node: PmNode) => {
+      const isFieldAnnotation = node.type.name === 'fieldAnnotation';
       if (Array.isArray(fieldIdOrArray)) {
         return isFieldAnnotation && fieldIdOrArray.includes(node.attrs.fieldId);
       } else {
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.ts
similarity index 55%
rename from packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.js
rename to packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.ts
index 5ddffbef3..2fbc2716a 100644
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.js
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/findRemovedFieldAnnotations.ts
@@ -1,11 +1,20 @@
-import { ReplaceStep } from 'prosemirror-transform';
+import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
+import type { Transaction } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
 
-export function findRemovedFieldAnnotations(tr) {
-  let removedNodes = [];
+export interface RemovedNode {
+  node: PmNode;
+  pos: number;
+}
+
+export function findRemovedFieldAnnotations(tr: Transaction): RemovedNode[] {
+  const removedNodes: RemovedNode[] = [];
+
+  const meta = (tr as unknown as { meta?: Record<string, unknown> }).meta;
 
   if (
     !tr.steps.length ||
-    (tr.meta && !Object.keys(tr.meta).every((meta) => ['inputType', 'uiEvent', 'paste'].includes(meta))) ||
+    (meta && !Object.keys(meta).every((metaKey) => ['inputType', 'uiEvent', 'paste'].includes(metaKey))) ||
     ['historyUndo', 'historyRedo'].includes(tr.getMeta('inputType')) ||
     ['drop'].includes(tr.getMeta('uiEvent')) ||
     tr.getMeta('fieldAnnotationUpdate') === true ||
@@ -19,12 +28,12 @@ export function findRemovedFieldAnnotations(tr) {
 
   tr.steps.forEach((step, stepIndex) => {
     if (step instanceof ReplaceStep && step.from !== step.to) {
-      let mapping = tr.mapping.maps[stepIndex];
-      let originalDoc = tr.before;
+      const mapping = tr.mapping.maps[stepIndex];
+      const originalDoc = tr.before;
 
       originalDoc.nodesBetween(step.from, step.to, (node, pos) => {
         if (node.type.name === 'fieldAnnotation') {
-          let mappedPos = mapping.mapResult(pos);
+          const mappedPos = mapping.mapResult(pos);
 
           if (mappedPos.deleted) {
             removedNodes.push({ node, pos });
@@ -37,7 +46,7 @@ export function findRemovedFieldAnnotations(tr) {
   return removedNodes;
 }
 
-function transactionDeletedAnything(tr) {
+function transactionDeletedAnything(tr: Transaction): boolean {
   return tr.steps.some((step) => {
     if (step instanceof ReplaceStep || step instanceof ReplaceAroundStep) {
       return step.from !== step.to;
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.js
deleted file mode 100644
index ad19757d9..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { helpers } from '@core/index.js';
-
-const { findChildren } = helpers;
-
-/**
- * Get all field annotations in the doc.
- * @param state The editor state.
- * @returns The array of field annotations.
- */
-export function getAllFieldAnnotations(state) {
-  let fieldAnnotations = findChildren(state.doc, (node) => node.type.name === 'fieldAnnotation');
-
-  return fieldAnnotations;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.ts
new file mode 100644
index 000000000..bc07b5ad3
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotations.ts
@@ -0,0 +1,21 @@
+import { helpers } from '@core/index.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+
+const { findChildren } = helpers;
+
+interface FoundNode {
+  node: PmNode;
+  pos: number;
+}
+
+/**
+ * Get all field annotations in the doc.
+ * @param state The editor state.
+ * @returns The array of field annotations.
+ */
+export function getAllFieldAnnotations(state: EditorState): FoundNode[] {
+  const fieldAnnotations = findChildren(state.doc, (node) => node.type.name === 'fieldAnnotation');
+
+  return fieldAnnotations;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.js
deleted file mode 100644
index 690296acf..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { posToDOMRect } from '@core/helpers/index.js';
-import { getAllFieldAnnotations } from './getAllFieldAnnotations.js';
-
-/**
- * Get all field annotations with rects in the doc.
- * @param view The editor view.
- * @param state The editor state.
- * @returns The array of field annotations with rects.
- */
-export function getAllFieldAnnotationsWithRect(view, state) {
-  let fieldAnnotations = getAllFieldAnnotations(state).map(({ node, pos }) => {
-    let rect = posToDOMRect(view, pos, pos + node.nodeSize);
-    return {
-      node,
-      pos,
-      rect,
-    };
-  });
-
-  return fieldAnnotations;
-}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.ts
new file mode 100644
index 000000000..af8bf8a6e
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getAllFieldAnnotationsWithRect.ts
@@ -0,0 +1,30 @@
+import { posToDOMRect } from '@core/helpers/index.js';
+import { getAllFieldAnnotations } from './getAllFieldAnnotations.js';
+import type { EditorView } from 'prosemirror-view';
+import type { EditorState } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+
+interface FieldAnnotationWithRect {
+  node: PmNode;
+  pos: number;
+  rect: DOMRect | null;
+}
+
+/**
+ * Get all field annotations with rects in the doc.
+ * @param view The editor view.
+ * @param state The editor state.
+ * @returns The array of field annotations with rects.
+ */
+export function getAllFieldAnnotationsWithRect(view: EditorView, state: EditorState): FieldAnnotationWithRect[] {
+  const fieldAnnotations = getAllFieldAnnotations(state).map(({ node, pos }) => {
+    const rect = posToDOMRect(view, pos, pos + node.nodeSize);
+    return {
+      node,
+      pos,
+      rect,
+    };
+  });
+
+  return fieldAnnotations;
+}
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.js
deleted file mode 100644
index 63f2c49ad..000000000
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { getAllHeaderFooterEditors } from '@core/helpers/annotator.js';
-import { getAllFieldAnnotations } from './index.js';
-
-/**
- * Get all field annotations in the header and footer.
- * @returns {Object[]} An array of field annotations, and which editor they belong to.
- */
-export const getHeaderFooterAnnotations = (editor) => {
-  const editors = getAllHeaderFooterEditors(editor);
-
-  const allAnnotations = [];
-  editors.forEach(({ editor }) => {
-    const annotations = getAllFieldAnnotations(editor.state);
-    allAnnotations.push(...annotations);
-  });
-  return allAnnotations;
-};
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.ts b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.ts
new file mode 100644
index 000000000..1a4d76881
--- /dev/null
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/getHeaderFooterAnnotations.ts
@@ -0,0 +1,25 @@
+import { getAllHeaderFooterEditors } from '@core/helpers/annotator.js';
+import { getAllFieldAnnotations } from './index.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState } from 'prosemirror-state';
+
+interface FoundNode {
+  node: PmNode;
+  pos: number;
+}
+
+/**
+ * Get all field annotations in the header and footer.
+ * @returns An array of field annotations, and which editor they belong to.
+ */
+export const getHeaderFooterAnnotations = (): FoundNode[] => {
+  const editors = getAllHeaderFooterEditors() as Array<{ editor?: { state: { doc: unknown } } }>;
+
+  const allAnnotations: FoundNode[] = [];
+  editors.forEach(({ editor }) => {
+    if (!editor || !('state' in editor)) return;
+    const annotations = getAllFieldAnnotations(editor.state as { doc: PmNode } as EditorState);
+    allAnnotations.push(...annotations);
+  });
+  return allAnnotations;
+};
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/index.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/index.js
rename to packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/index.ts
diff --git a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.js b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.ts
similarity index 53%
rename from packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.js
rename to packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.ts
index d24eeb5ca..62cc867f3 100644
--- a/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.js
+++ b/packages/super-editor/src/extensions/field-annotation/fieldAnnotationHelpers/trackFieldAnnotationsDeletion.ts
@@ -1,7 +1,10 @@
 import { findRemovedFieldAnnotations } from './findRemovedFieldAnnotations.js';
+import type { Editor } from '@core/Editor.js';
+import type { Transaction } from 'prosemirror-state';
+import type { RemovedNode } from './findRemovedFieldAnnotations.js';
 
-export function trackFieldAnnotationsDeletion(editor, tr) {
-  let removedAnnotations = [];
+export function trackFieldAnnotationsDeletion(editor: Editor, tr: Transaction): void {
+  let removedAnnotations: RemovedNode[] = [];
   try {
     removedAnnotations = findRemovedFieldAnnotations(tr);
   } catch {}
diff --git a/packages/super-editor/src/extensions/field-annotation/index.js b/packages/super-editor/src/extensions/field-annotation/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/field-annotation/index.js
rename to packages/super-editor/src/extensions/field-annotation/index.ts
diff --git a/packages/super-editor/src/extensions/font-family/font-family.js b/packages/super-editor/src/extensions/font-family/font-family.ts
similarity index 69%
rename from packages/super-editor/src/extensions/font-family/font-family.js
rename to packages/super-editor/src/extensions/font-family/font-family.ts
index 903138337..f8d79a663 100644
--- a/packages/super-editor/src/extensions/font-family/font-family.js
+++ b/packages/super-editor/src/extensions/font-family/font-family.ts
@@ -1,24 +1,26 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
 
 /**
  * Font family value
- * @typedef {string} FontFamilyValue
  * @description CSS font-family string (e.g., 'Arial', 'Times New Roman', 'sans-serif')
  */
+export type FontFamilyValue = string;
 
 /**
  * Configuration options for FontFamily
- * @typedef {Object} FontFamilyOptions
  * @category Options
- * @property {string[]} [types=['textStyle']] Mark types to add font family support to
  */
+export interface FontFamilyOptions extends Record<string, unknown> {
+  /**
+   * Mark types to add font family support to
+   * @default ['textStyle']
+   */
+  types: string[];
+}
 
 /**
  * Attributes for font family marks
- * @typedef {Object} FontFamilyAttributes
  * @category Attributes
- * @property {FontFamilyValue} [fontFamily] Font family for text
  * @example
  * // Set font family on selected text
  * editor.commands.setFontFamily('Arial')
@@ -29,13 +31,19 @@ import { Extension } from '@core/index.js';
  * // Remove custom font
  * editor.commands.unsetFontFamily()
  */
+export interface FontFamilyAttributes {
+  /**
+   * Font family for text
+   */
+  fontFamily?: FontFamilyValue;
+}
 
 /**
  * @module FontFamily
  * @sidebarTitle Font Family
  * @snippetPath /snippets/extensions/font-family.mdx
  */
-export const FontFamily = Extension.create({
+export const FontFamily = Extension.create<FontFamilyOptions>({
   name: 'fontFamily',
 
   addOptions() {
@@ -51,8 +59,8 @@ export const FontFamily = Extension.create({
         attributes: {
           fontFamily: {
             default: null,
-            parseDOM: (el) => el.style.fontFamily?.replace(/['"]+/g, ''),
-            renderDOM: (attrs) => {
+            parseDOM: (el: HTMLElement) => el.style.fontFamily?.replace(/['"]+/g, ''),
+            renderDOM: (attrs: FontFamilyAttributes) => {
               if (!attrs.fontFamily) return {};
               return { style: `font-family: ${attrs.fontFamily}` };
             },
@@ -78,8 +86,8 @@ export const FontFamily = Extension.create({
        * @note Preserves other text styling attributes
        */
       setFontFamily:
-        (fontFamily) =>
-        ({ chain }) => {
+        (fontFamily: FontFamilyValue) =>
+        ({ chain }: { chain: () => { setMark: (...args: unknown[]) => { run: () => boolean } } }) => {
           return chain().setMark('textStyle', { fontFamily }).run();
         },
 
@@ -92,7 +100,11 @@ export const FontFamily = Extension.create({
        */
       unsetFontFamily:
         () =>
-        ({ chain }) => {
+        ({
+          chain,
+        }: {
+          chain: () => { setMark: (...args: unknown[]) => { removeEmptyTextStyle: () => { run: () => boolean } } };
+        }) => {
           return chain().setMark('textStyle', { fontFamily: null }).removeEmptyTextStyle().run();
         },
     };
diff --git a/packages/super-editor/src/extensions/font-family/index.js b/packages/super-editor/src/extensions/font-family/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/font-family/index.js
rename to packages/super-editor/src/extensions/font-family/index.ts
diff --git a/packages/super-editor/src/extensions/font-size/font-size.js b/packages/super-editor/src/extensions/font-size/font-size.ts
similarity index 57%
rename from packages/super-editor/src/extensions/font-size/font-size.js
rename to packages/super-editor/src/extensions/font-size/font-size.ts
index c65cb22ab..c3e21dd41 100644
--- a/packages/super-editor/src/extensions/font-size/font-size.js
+++ b/packages/super-editor/src/extensions/font-size/font-size.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
 import { parseSizeUnit, minMax } from '@core/utilities/index.js';
 
@@ -12,40 +11,69 @@ import { parseSizeUnit, minMax } from '@core/utilities/index.js';
 
 /**
  * Font size configuration
- * @typedef {Object} FontSizeDefaults
- * @property {number} [value=12] - Default font size value
- * @property {string} [unit='pt'] - Default unit (pt, px, em, rem)
- * @property {number} [min=8] - Minimum allowed size
- * @property {number} [max=96] - Maximum allowed size
  */
+export interface FontSizeDefaults {
+  /**
+   * Default font size value
+   * @default 12
+   */
+  value: number;
+  /**
+   * Default unit (pt, px, em, rem)
+   * @default 'pt'
+   */
+  unit: string;
+  /**
+   * Minimum allowed size
+   * @default 8
+   */
+  min: number;
+  /**
+   * Maximum allowed size
+   * @default 96
+   */
+  max: number;
+}
 
 /**
  * Font size value
- * @typedef {string|number} FontSizeValue
  * @description Size with optional unit (e.g., '12pt', '16px', 14)
  */
+export type FontSizeValue = string | number;
 
 /**
  * Configuration options for FontSize
- * @typedef {Object} FontSizeOptions
  * @category Options
- * @property {string[]} [types=['textStyle', 'tableCell']] - Node/mark types to add font size support to
- * @property {FontSizeDefaults} [defaults] - Default size configuration
  */
+export interface FontSizeOptions extends Record<string, unknown> {
+  /**
+   * Node/mark types to add font size support to
+   * @default ['textStyle', 'tableCell']
+   */
+  types: string[];
+  /**
+   * Default size configuration
+   */
+  defaults: FontSizeDefaults;
+}
 
 /**
  * Attributes for font size
- * @typedef {Object} FontSizeAttributes
  * @category Attributes
- * @property {FontSizeValue} [fontSize] - Font size with unit
  */
+export interface FontSizeAttributes {
+  /**
+   * Font size with unit
+   */
+  fontSize?: FontSizeValue;
+}
 
 /**
  * @module FontSize
  * @sidebarTitle Font Size
  * @snippetPath /snippets/extensions/font-size.mdx
  */
-export const FontSize = Extension.create({
+export const FontSize = Extension.create<FontSizeOptions>({
   name: 'fontSize',
 
   addOptions() {
@@ -67,13 +95,13 @@ export const FontSize = Extension.create({
         attributes: {
           fontSize: {
             default: null,
-            parseDOM: (el) => el.style.fontSize,
-            renderDOM: (attrs) => {
+            parseDOM: (el: HTMLElement) => el.style.fontSize,
+            renderDOM: (attrs: FontSizeAttributes) => {
               if (!attrs.fontSize) return {};
-              let [value, unit] = parseSizeUnit(attrs.fontSize);
+              const [value, unit] = parseSizeUnit(String(attrs.fontSize));
               if (Number.isNaN(value)) return {};
-              unit = unit ? unit : this.options.defaults.unit;
-              return { style: `font-size: ${value}${unit}` };
+              const finalUnit = unit ? unit : this.options.defaults.unit;
+              return { style: `font-size: ${value}${finalUnit}` };
             },
           },
         },
@@ -94,22 +122,24 @@ export const FontSize = Extension.create({
        * @note Automatically clamps to min/max values
        */
       setFontSize:
-        (fontSize) =>
-        ({ chain }) => {
-          let value, unit;
+        (fontSize: FontSizeValue) =>
+        ({ chain }: { chain: () => { setMark: (...args: unknown[]) => { run: () => boolean } } }) => {
+          let value: number;
+          let unit: string | null = null;
 
           if (typeof fontSize === 'number') {
             value = fontSize;
-            unit = null;
           } else {
-            [value, unit] = parseSizeUnit(fontSize);
+            const [parsedValue, parsedUnitRaw] = parseSizeUnit(String(fontSize));
+            value = Number(parsedValue);
+            unit = typeof parsedUnitRaw === 'string' ? parsedUnitRaw : null;
           }
 
           if (Number.isNaN(value)) {
             return false;
           }
 
-          let { min, max, unit: defaultUnit } = this.options.defaults;
+          const { min, max, unit: defaultUnit } = this.options.defaults;
           value = minMax(Number(value), min, max);
           unit = unit ? unit : defaultUnit;
 
@@ -127,7 +157,11 @@ export const FontSize = Extension.create({
        */
       unsetFontSize:
         () =>
-        ({ chain }) => {
+        ({
+          chain,
+        }: {
+          chain: () => { setMark: (...args: unknown[]) => { removeEmptyTextStyle: () => { run: () => boolean } } };
+        }) => {
           return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run();
         },
     };
diff --git a/packages/super-editor/src/extensions/font-size/index.js b/packages/super-editor/src/extensions/font-size/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/font-size/index.js
rename to packages/super-editor/src/extensions/font-size/index.ts
diff --git a/packages/super-editor/src/extensions/format-commands/format-commands.js b/packages/super-editor/src/extensions/format-commands/format-commands.ts
similarity index 66%
rename from packages/super-editor/src/extensions/format-commands/format-commands.js
rename to packages/super-editor/src/extensions/format-commands/format-commands.ts
index 131cecc0a..35ba2356b 100644
--- a/packages/super-editor/src/extensions/format-commands/format-commands.js
+++ b/packages/super-editor/src/extensions/format-commands/format-commands.ts
@@ -1,20 +1,37 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
 import { getMarksFromSelection } from '@core/helpers/getMarksFromSelection.js';
 import { toggleMarkCascade } from '@core/commands/toggleMarkCascade.js';
+import type { Mark } from '@tiptap/pm/model';
 
 /**
  * Stored format style
- * @typedef {Object} StoredStyle
- * @property {string} name - Mark name
- * @property {Object} attrs - Mark attributes
  */
+export interface StoredStyle {
+  /**
+   * Mark name
+   */
+  name: string;
+  /**
+   * Mark attributes
+   */
+  attrs: Record<string, unknown>;
+}
 
 /**
  * Configuration options for FormatCommands
- * @typedef {Object} FormatCommandsOptions
  * @category Options
  */
+export type FormatCommandsOptions = Record<string, never>;
+
+/**
+ * Storage for FormatCommands
+ */
+export interface FormatCommandsStorage extends Record<string, unknown> {
+  /**
+   * @private
+   */
+  storedStyle: Mark[] | null;
+}
 
 /**
  * @module FormatCommands
@@ -22,7 +39,7 @@ import { toggleMarkCascade } from '@core/commands/toggleMarkCascade.js';
  * @snippetPath /snippets/extensions/format-commands.mdx
  * @shortcut Mod-Alt-c | clearFormat | Clear all formatting
  */
-export const FormatCommands = Extension.create({
+export const FormatCommands = Extension.create<FormatCommandsOptions, FormatCommandsStorage>({
   name: 'formatCommands',
 
   addOptions() {
@@ -31,10 +48,6 @@ export const FormatCommands = Extension.create({
 
   addStorage() {
     return {
-      /**
-       * @private
-       * @type {StoredStyle[]|null}
-       */
       storedStyle: null,
     };
   },
@@ -51,7 +64,7 @@ export const FormatCommands = Extension.create({
        */
       clearFormat:
         () =>
-        ({ chain }) => {
+        ({ chain }: { chain: () => { clearNodes: () => { unsetAllMarks: () => { run: () => boolean } } } }) => {
           return chain().clearNodes().unsetAllMarks().run();
         },
 
@@ -64,7 +77,7 @@ export const FormatCommands = Extension.create({
        */
       clearMarksFormat:
         () =>
-        ({ chain }) => {
+        ({ chain }: { chain: () => { unsetAllMarks: () => { run: () => boolean } } }) => {
           return chain().unsetAllMarks().run();
         },
 
@@ -77,7 +90,7 @@ export const FormatCommands = Extension.create({
        */
       clearNodesFormat:
         () =>
-        ({ chain }) => {
+        ({ chain }: { chain: () => { clearNodes: () => { run: () => boolean } } }) => {
           return chain().clearNodes().run();
         },
 
@@ -90,9 +103,11 @@ export const FormatCommands = Extension.create({
        */
       copyFormat:
         () =>
-        ({ chain }) => {
+        ({ chain }: { chain: () => Record<string, (...args: unknown[]) => unknown> }) => {
+          if (!this.editor) return false;
           // If we don't have a saved style, save the current one
-          if (!this.storage.storedStyle) {
+          const storedMarks = this.storage.storedStyle;
+          if (!storedMarks) {
             const marks = getMarksFromSelection(this.editor.state);
             this.storage.storedStyle = marks;
             return true;
@@ -100,14 +115,16 @@ export const FormatCommands = Extension.create({
 
           // Special case: if there are no stored marks, but this is still an apply action
           // We just clear the format
-          if (!this.storage.storedStyle.length) {
+          if (!storedMarks.length) {
             this.storage.storedStyle = null;
-            return chain().clearFormat().run();
+            const chainObj = chain() as { clearFormat?: () => { run?: () => boolean } };
+            const res = chainObj.clearFormat?.();
+            const run = res?.run;
+            return typeof run === 'function' ? run.call(res) : true;
           }
 
           // If we do have a stored style, apply it
-          const storedMarks = this.storage.storedStyle;
-          const processedMarks = [];
+          const processedMarks: StoredStyle[] = [];
           storedMarks.forEach((mark) => {
             const { type, attrs } = mark;
             const { name } = type;
@@ -115,7 +132,7 @@ export const FormatCommands = Extension.create({
             if (name === 'textStyle') {
               Object.keys(attrs).forEach((key) => {
                 if (!attrs[key]) return;
-                const attributes = {};
+                const attributes: Record<string, unknown> = {};
                 attributes[key] = attrs[key];
                 processedMarks.push({ name: key, attrs: attributes });
               });
@@ -124,7 +141,7 @@ export const FormatCommands = Extension.create({
             }
           });
 
-          const marksToCommands = {
+          const marksToCommands: Record<string, [string, string, unknown?]> = {
             bold: ['setBold', 'unsetBold'],
             italic: ['setItalic', 'unsetItalic'],
             underline: ['setUnderline', 'unsetUnderline'],
@@ -134,27 +151,31 @@ export const FormatCommands = Extension.create({
           };
 
           // Apply marks present, clear ones that are not, by chaining commands
-          let result = chain();
+          let result = chain() as Record<string, (...args: unknown[]) => unknown>;
           Object.keys(marksToCommands).forEach((key) => {
             const [setCommand, unsetCommand, defaultParam] = marksToCommands[key];
             const markToApply = processedMarks.find((mark) => mark.name === key);
             const hasEmptyAttrs = markToApply?.attrs && markToApply?.attrs[key];
 
-            let cmd = {};
+            let cmd: { command: string; argument: unknown };
             if (!markToApply && !hasEmptyAttrs) cmd = { command: unsetCommand, argument: defaultParam };
-            else cmd = { command: setCommand, argument: markToApply.attrs[key] || defaultParam };
-            result = result[cmd.command](cmd.argument);
+            else cmd = { command: setCommand, argument: markToApply?.attrs[key] || defaultParam };
+            const commandFn = result[cmd.command];
+            if (typeof commandFn === 'function') {
+              result = commandFn.call(result, cmd.argument) as typeof result;
+            }
           });
 
           this.storage.storedStyle = null;
-          return result;
+          const run = (result as unknown as { run?: () => boolean }).run;
+          return typeof run === 'function' ? run.call(result) : true;
         },
     };
   },
 
   addShortcuts() {
     return {
-      'Mod-Alt-c': () => this.editor.commands.clearFormat(),
+      'Mod-Alt-c': () => this.editor?.commands.clearFormat() ?? false,
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/format-commands/index.js b/packages/super-editor/src/extensions/format-commands/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/format-commands/index.js
rename to packages/super-editor/src/extensions/format-commands/index.ts
diff --git a/packages/super-editor/src/extensions/gapcursor/gapcursor.js b/packages/super-editor/src/extensions/gapcursor/gapcursor.ts
similarity index 79%
rename from packages/super-editor/src/extensions/gapcursor/gapcursor.js
rename to packages/super-editor/src/extensions/gapcursor/gapcursor.ts
index f5d66c707..9e843b4e4 100644
--- a/packages/super-editor/src/extensions/gapcursor/gapcursor.js
+++ b/packages/super-editor/src/extensions/gapcursor/gapcursor.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { gapCursor } from 'prosemirror-gapcursor';
 import { Extension } from '@core/index.js';
 import { callOrGet } from '@core/utilities/callOrGet.js';
@@ -6,16 +5,15 @@ import { getExtensionConfigField } from '@core/helpers/getExtensionConfigField.j
 
 /**
  * Configuration options for Gapcursor
- * @typedef {Object} GapcursorOptions
- * @category Options
  */
+export type GapcursorOptions = Record<string, never>;
 
 /**
  * @module Gapcursor
  * @sidebarTitle Gap Cursor
  * @snippetPath /snippets/extensions/gapcursor.mdx
  */
-export const Gapcursor = Extension.create({
+export const Gapcursor = Extension.create<GapcursorOptions>({
   name: 'gapCursor',
 
   addOptions() {
@@ -28,14 +26,13 @@ export const Gapcursor = Extension.create({
 
   /**
    * Extend node schema to allow gap cursor positioning
-   * @returns {Object} Schema extension with allowGapCursor property
+   * @returns Schema extension with allowGapCursor property
    */
-  extendNodeSchema(extension) {
+  extendNodeSchema(extension: { name: string; options: unknown; storage: unknown }) {
     return {
       /**
        * Whether to allow gap cursor before/after this node
        * Set to false on nodes where gap cursor shouldn't appear
-       * @type {boolean|null}
        */
       allowGapCursor:
         callOrGet(
diff --git a/packages/super-editor/src/extensions/gapcursor/index.js b/packages/super-editor/src/extensions/gapcursor/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/gapcursor/index.js
rename to packages/super-editor/src/extensions/gapcursor/index.ts
diff --git a/packages/super-editor/src/extensions/heading/heading.test.js b/packages/super-editor/src/extensions/heading/heading.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/heading/heading.test.js
rename to packages/super-editor/src/extensions/heading/heading.test.ts
diff --git a/packages/super-editor/src/extensions/heading/heading.js b/packages/super-editor/src/extensions/heading/heading.ts
similarity index 76%
rename from packages/super-editor/src/extensions/heading/heading.js
rename to packages/super-editor/src/extensions/heading/heading.ts
index 68660a45f..0c8e733fd 100644
--- a/packages/super-editor/src/extensions/heading/heading.js
+++ b/packages/super-editor/src/extensions/heading/heading.ts
@@ -1,19 +1,22 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
 
 /**
  * Heading attributes
- * @typedef {Object} HeadingAttributes
  * @category Attributes
- * @property {number} level - Heading level (1-6)
  */
+export interface HeadingAttributes {
+  /** Heading level (1-6) */
+  level: number;
+}
 
 /**
  * Configuration options for Heading
- * @typedef {Object} HeadingOptions
  * @category Options
- * @property {number[]} [levels=[1,2,3,4,5,6]] - Supported heading levels
  */
+export interface HeadingOptions extends Record<string, unknown> {
+  /** Supported heading levels */
+  levels: number[];
+}
 
 /**
  * @module Heading
@@ -26,7 +29,7 @@ import { Extension } from '@core/index.js';
  * @shortcut Mod-Alt-5 | toggleHeading | Toggle heading level 5
  * @shortcut Mod-Alt-6 | toggleHeading | Toggle heading level 6
  */
-export const Heading = Extension.create({
+export const Heading = Extension.create<HeadingOptions>({
   name: 'heading',
 
   addOptions() {
@@ -46,8 +49,8 @@ export const Heading = Extension.create({
        * @note Converts current block to heading
        */
       setHeading:
-        (attributes) =>
-        ({ commands }) => {
+        (attributes: HeadingAttributes) =>
+        ({ commands }: { commands: { setLinkedStyle: (attrs: { id: string }) => boolean } }) => {
           const containsLevel = this.options.levels.includes(attributes.level);
           if (!containsLevel) return false;
           return commands.setLinkedStyle({ id: `Heading${attributes.level}` });
@@ -63,8 +66,8 @@ export const Heading = Extension.create({
        * @note Switches between heading and paragraph for the same level
        */
       toggleHeading:
-        (attributes) =>
-        ({ commands }) => {
+        (attributes: HeadingAttributes) =>
+        ({ commands }: { commands: { toggleLinkedStyle: (style: { id: string }, fallback: string) => boolean } }) => {
           const containsLevel = this.options.levels.includes(attributes.level);
           if (!containsLevel) return false;
           return commands.toggleLinkedStyle({ id: `Heading${attributes.level}` }, 'paragraph');
@@ -77,7 +80,7 @@ export const Heading = Extension.create({
       (items, level) => ({
         ...items,
         ...{
-          [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level }),
+          [`Mod-Alt-${level}`]: () => this.editor?.commands.toggleHeading({ level }) ?? false,
         },
       }),
       {},
diff --git a/packages/super-editor/src/extensions/heading/index.js b/packages/super-editor/src/extensions/heading/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/heading/index.js
rename to packages/super-editor/src/extensions/heading/index.ts
diff --git a/packages/super-editor/src/extensions/highlight/highlight.js b/packages/super-editor/src/extensions/highlight/highlight.ts
similarity index 59%
rename from packages/super-editor/src/extensions/highlight/highlight.js
rename to packages/super-editor/src/extensions/highlight/highlight.ts
index 348a60cfe..fee50e5e4 100644
--- a/packages/super-editor/src/extensions/highlight/highlight.js
+++ b/packages/super-editor/src/extensions/highlight/highlight.ts
@@ -1,19 +1,13 @@
-// @ts-nocheck
-import { Mark, Attribute } from '@core/index.js';
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
 
 /**
  * Configuration options for Highlight
- * @typedef {Object} HighlightOptions
  * @category Options
- * @property {Object} [htmlAttributes={}] - HTML attributes for highlight elements
- */
-
-/**
- * Attributes for highlight marks
- * @typedef {Object} HighlightAttributes
- * @category Attributes
- * @property {string} [color] - Background color (CSS color value)
  */
+export interface HighlightOptions extends Record<string, unknown> {
+  /** HTML attributes for highlight elements */
+  htmlAttributes: Record<string, unknown>;
+}
 
 /**
  * @module Highlight
@@ -21,7 +15,7 @@ import { Mark, Attribute } from '@core/index.js';
  * @snippetPath /snippets/extensions/highlight.mdx
  * @shortcut Mod-Shift-h | toggleHighlight | Toggle highlighted formatting
  */
-export const Highlight = Mark.create({
+export const Highlight = Mark.create<HighlightOptions>({
   name: 'highlight',
 
   addOptions() {
@@ -34,8 +28,8 @@ export const Highlight = Mark.create({
     return {
       color: {
         default: null,
-        parseDOM: (element) => element.getAttribute('data-color') || element.style.backgroundColor,
-        renderDOM: (attributes) => {
+        parseDOM: (element: HTMLElement) => element.getAttribute('data-color') || element.style.backgroundColor,
+        renderDOM: (attributes: { color?: string | null }) => {
           if (!attributes.color) {
             return {};
           }
@@ -52,8 +46,12 @@ export const Highlight = Mark.create({
     return [{ tag: 'mark' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['mark', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }) {
+    return [
+      'mark',
+      Attribute.mergeAttributes(this.options.htmlAttributes as Record<string, AttributeValue>, htmlAttributes),
+      0,
+    ];
   },
 
   addCommands() {
@@ -67,8 +65,8 @@ export const Highlight = Mark.create({
        * editor.commands.setHighlight('rgba(255, 235, 59, 0.5)')
        */
       setHighlight:
-        (color) =>
-        ({ commands }) =>
+        (color: string) =>
+        ({ commands }: { commands: { setMark: (name: string, attrs: Record<string, unknown>) => boolean } }) =>
           commands.setMark(this.name, { color }),
 
       /**
@@ -79,7 +77,7 @@ export const Highlight = Mark.create({
        */
       unsetHighlight:
         () =>
-        ({ commands }) =>
+        ({ commands }: { commands: { unsetMark: (name: string) => boolean } }) =>
           commands.unsetMark(this.name),
 
       /**
@@ -90,14 +88,14 @@ export const Highlight = Mark.create({
        */
       toggleHighlight:
         () =>
-        ({ commands }) =>
+        ({ commands }: { commands: { toggleMark: (name: string) => boolean } }) =>
           commands.toggleMark(this.name),
     };
   },
 
   addShortcuts() {
     return {
-      'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),
+      'Mod-Shift-h': () => this.editor?.commands.toggleHighlight() ?? false,
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/highlight/index.js b/packages/super-editor/src/extensions/highlight/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/highlight/index.js
rename to packages/super-editor/src/extensions/highlight/index.ts
diff --git a/packages/super-editor/src/extensions/history/history.js b/packages/super-editor/src/extensions/history/history.ts
similarity index 60%
rename from packages/super-editor/src/extensions/history/history.js
rename to packages/super-editor/src/extensions/history/history.ts
index cbc3ddf1a..9041daa9b 100644
--- a/packages/super-editor/src/extensions/history/history.js
+++ b/packages/super-editor/src/extensions/history/history.ts
@@ -1,15 +1,23 @@
-// @ts-nocheck
 import { history, redo as originalRedo, undo as originalUndo } from 'prosemirror-history';
 import { undo as yUndo, redo as yRedo, yUndoPlugin } from 'y-prosemirror';
 import { Extension } from '@core/Extension.js';
+import type { Plugin, EditorState, Transaction } from 'prosemirror-state';
 
 /**
  * Configuration options for History
- * @typedef {Object} HistoryOptions
- * @category Options
- * @property {number} [depth=100] - Maximum undo/redo steps to remember
- * @property {number} [newGroupDelay=500] - Milliseconds to wait before starting a new history group
  */
+export interface HistoryOptions extends Record<string, unknown> {
+  /**
+   * Maximum undo/redo steps to remember
+   * @default 100
+   */
+  depth: number;
+  /**
+   * Milliseconds to wait before starting a new history group
+   * @default 500
+   */
+  newGroupDelay: number;
+}
 
 /**
  * @module History
@@ -19,7 +27,7 @@ import { Extension } from '@core/Extension.js';
  * @shortcut Mod-Shift-z | redo | Redo last action
  * @shortcut Mod-y | redo | Redo last action (alternative)
  */
-export const History = Extension.create({
+export const History = Extension.create<HistoryOptions>({
   name: 'history',
 
   addOptions() {
@@ -31,7 +39,7 @@ export const History = Extension.create({
   },
 
   addPmPlugins() {
-    if (this.editor.options.collaborationProvider && this.editor.options.ydoc) {
+    if (this.editor?.options.collaborationProvider && this.editor.options.ydoc) {
       const undoPlugin = createUndoPlugin();
       return [undoPlugin];
     }
@@ -49,8 +57,9 @@ export const History = Extension.create({
        * editor.commands.undo()
        * @note Groups changes within the newGroupDelay window
        */
-      undo: () => ({ state, dispatch, tr }) => {
-        if (this.editor.options.collaborationProvider && this.editor.options.ydoc) {
+      undo: () =>
+        ({ state, dispatch, tr }: { state: EditorState; dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
+        if (this.editor?.options.collaborationProvider && this.editor.options.ydoc) {
           tr.setMeta('preventDispatch', true);
           return yUndo(state);
         }
@@ -65,8 +74,9 @@ export const History = Extension.create({
        * editor.commands.redo()
        * @note Only available after an undo action
        */
-      redo: () => ({ state, dispatch, tr }) => {
-        if (this.editor.options.collaborationProvider && this.editor.options.ydoc) {
+      redo: () =>
+        ({ state, dispatch, tr }: { state: EditorState; dispatch?: (tr: Transaction) => void; tr: Transaction }) => {
+        if (this.editor?.options.collaborationProvider && this.editor.options.ydoc) {
           tr.setMeta('preventDispatch', true);
           return yRedo(state);
         }
@@ -78,14 +88,14 @@ export const History = Extension.create({
 
   addShortcuts() {
     return {
-      'Mod-z': () => this.editor.commands.undo(),
-      'Mod-Shift-z': () => this.editor.commands.redo(),
-      'Mod-y': () => this.editor.commands.redo(),
+      'Mod-z': () => this.editor?.commands.undo() ?? false,
+      'Mod-Shift-z': () => this.editor?.commands.redo() ?? false,
+      'Mod-y': () => this.editor?.commands.redo() ?? false,
     };
   },
 });
 
-const createUndoPlugin = () => {
+const createUndoPlugin = (): Plugin => {
   const yUndoPluginInstance = yUndoPlugin();
   return yUndoPluginInstance;
 };
diff --git a/packages/super-editor/src/extensions/history/index.js b/packages/super-editor/src/extensions/history/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/history/index.js
rename to packages/super-editor/src/extensions/history/index.ts
diff --git a/packages/super-editor/src/extensions/image/image.test.js b/packages/super-editor/src/extensions/image/image.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/image.test.js
rename to packages/super-editor/src/extensions/image/image.test.ts
diff --git a/packages/super-editor/src/extensions/image/image.js b/packages/super-editor/src/extensions/image/image.ts
similarity index 78%
rename from packages/super-editor/src/extensions/image/image.js
rename to packages/super-editor/src/extensions/image/image.ts
index d0e8d86fa..3c3cc64dd 100644
--- a/packages/super-editor/src/extensions/image/image.js
+++ b/packages/super-editor/src/extensions/image/image.ts
@@ -1,17 +1,21 @@
-import { Attribute, Node } from '@core/index.js';
+import { Attribute, type AttributeValue, Node } from '@core/index.js';
 import { ImageRegistrationPlugin } from './imageHelpers/imageRegistrationPlugin.js';
 import { ImagePositionPlugin } from './imageHelpers/imagePositionPlugin.js';
 import { getNormalizedImageAttrs } from './imageHelpers/legacyAttributes.js';
 import { getRotationMargins } from './imageHelpers/rotation.js';
 import { inchesToPixels } from '@converter/helpers.js';
+import type { DOMOutputSpec, Node as PmNode } from 'prosemirror-model';
 
 /**
  * Configuration options for Image
- * @typedef {Object} ImageOptions
  * @category Options
- * @property {boolean} [allowBase64=true] - Allow base64 encoded images
- * @property {Object} [htmlAttributes] - Default HTML attributes for image elements
  */
+export interface ImageOptions extends Record<string, unknown> {
+  /** Allow base64 encoded images */
+  allowBase64: boolean;
+  /** Default HTML attributes for image elements */
+  htmlAttributes: Record<string, string>;
+}
 
 /**
  * Attributes for image nodes
@@ -54,12 +58,58 @@ import { inchesToPixels } from '@converter/helpers.js';
  * @property {number} [size.height] - Height in pixels
  */
 
+interface ImageInsertOptions {
+  src: string;
+  alt?: string;
+  title?: string;
+  size?: {
+    width?: number;
+    height?: number;
+  };
+}
+
+interface SetWrappingOptions {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+export interface ImageStorage extends Record<string, unknown> {
+  media: Record<string, string>;
+}
+
+type ImageMargin = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+
+type ImageWrapAttrs = {
+  wrapText?: 'bothSides' | 'largest' | 'left' | 'right';
+  distTop?: number;
+  distBottom?: number;
+  distLeft?: number;
+  distRight?: number;
+  polygon?: Array<[number, number]>;
+  behindDoc?: boolean;
+};
+
+type ImageAttrs = {
+  wrap?: { type?: string; attrs?: ImageWrapAttrs };
+  marginOffset?: { horizontal?: number; top?: number };
+  anchorData?: { hRelativeFrom?: string; vRelativeFrom?: string; alignH?: string };
+  padding?: { left?: number; right?: number; top?: number; bottom?: number };
+  transformData?: { rotation?: number; verticalFlip?: boolean; horizontalFlip?: boolean };
+  size?: { width?: number; height?: number };
+  extension?: string;
+};
+
 /**
  * @module Image
  * @sidebarTitle Image
  * @snippetPath /snippets/extensions/image.mdx
  */
-export const Image = Node.create({
+export const Image = Node.create<ImageOptions, ImageStorage>({
   name: 'image',
 
   group: 'inline',
@@ -78,7 +128,7 @@ export const Image = Node.create({
     };
   },
 
-  addStorage() {
+  addStorage(): ImageStorage {
     return {
       media: {},
     };
@@ -88,10 +138,11 @@ export const Image = Node.create({
     return {
       src: {
         default: null,
-        renderDOM: ({ src }) => {
+        renderDOM: ({ src }: { src?: unknown }) => {
+          const srcKey = Array.isArray(src) || typeof src === 'object' ? String(src) : src;
           return {
-            src: this.storage.media[src] ?? src,
-          };
+            src: (typeof srcKey === 'string' ? this.storage.media[srcKey] : null) ?? src,
+          } as Record<string, AttributeValue>;
         },
       },
 
@@ -159,22 +210,28 @@ export const Image = Node.create({
 
       transformData: {
         default: {},
-        renderDOM: ({ transformData }) => {
+        renderDOM: ({ transformData }: { transformData?: ImageAttrs['transformData'] }) => {
           let style = '';
-          if (transformData?.rotation) {
-            style += `rotate(${Math.round(transformData.rotation)}deg) `;
-          }
-          if (transformData?.verticalFlip) {
-            style += 'scaleY(-1) ';
-          }
-          if (transformData?.horizontalFlip) {
-            style += 'scaleX(-1) ';
+          if (transformData && typeof transformData === 'object' && !Array.isArray(transformData)) {
+            const rotation = 'rotation' in transformData ? transformData.rotation : undefined;
+            const verticalFlip = 'verticalFlip' in transformData ? transformData.verticalFlip : undefined;
+            const horizontalFlip = 'horizontalFlip' in transformData ? transformData.horizontalFlip : undefined;
+
+            if (rotation && typeof rotation === 'number') {
+              style += `rotate(${Math.round(rotation)}deg) `;
+            }
+            if (verticalFlip) {
+              style += 'scaleY(-1) ';
+            }
+            if (horizontalFlip) {
+              style += 'scaleX(-1) ';
+            }
           }
           style = style.trim();
           if (style.length > 0) {
             return { style: `transform: ${style};` };
           }
-          return;
+          return null;
         },
       },
 
@@ -199,9 +256,9 @@ export const Image = Node.create({
 
       size: {
         default: {},
-        renderDOM: ({ size, shouldStretch }) => {
+        renderDOM: ({ size, shouldStretch }: { size?: ImageAttrs['size']; shouldStretch?: boolean }) => {
           let style = '';
-          let { width, height } = size ?? {};
+          const { width, height } = (size ?? {}) as { width?: number; height?: number };
           if (width) style += `width: ${width}px;`;
           if (height && shouldStretch) {
             // When shouldStretch is true (from <a:stretch><a:fillRect/>),
@@ -225,7 +282,7 @@ export const Image = Node.create({
       style: {
         default: null,
         rendered: true,
-        renderDOM: ({ style }) => {
+        renderDOM: ({ style }: { style?: string | null }) => {
           if (!style) return {};
           return { style };
         },
@@ -249,14 +306,21 @@ export const Image = Node.create({
     ];
   },
 
-  renderDOM({ node, htmlAttributes }) {
+  renderDOM({ node, htmlAttributes }: { node: PmNode; htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
     // multiple attributes influence the margin sizes, so we handle them here together rather than separately.
     // Also, the editor context is needed for wrap styling in some cases.
 
-    const { wrap, marginOffset } = getNormalizedImageAttrs(node.attrs);
-    const { anchorData, padding, transformData = {}, size = { width: 0, height: 0 } } = node.attrs;
-
-    const margin = {
+    const normalizedAttrs = getNormalizedImageAttrs(node.attrs as ImageAttrs) as ImageAttrs;
+    const { wrap, marginOffset } = normalizedAttrs;
+    const {
+      anchorData,
+      padding,
+      transformData = {},
+      size: rawSize = { width: 0, height: 0 },
+    } = node.attrs as ImageAttrs;
+    const size = rawSize ?? { width: 0, height: 0 };
+
+    const margin: ImageMargin = {
       left: 0,
       right: 0,
       top: 0,
@@ -287,7 +351,7 @@ export const Image = Node.create({
     //   bottom += transformData.sizeExtension.bottom || 0;
     // }
     const { rotation } = transformData;
-    const { height, width } = size;
+    const { height = 0, width = 0 } = size ?? {};
     if (rotation && height && width) {
       const { horizontal, vertical } = getRotationMargins(width, height, rotation);
       margin.left += horizontal;
@@ -298,7 +362,7 @@ export const Image = Node.create({
 
     // Handle wrap styling (needs editor context)
     if (wrap && wrap.type) {
-      const { type, attrs = {} } = wrap;
+      const { type, attrs = {} as ImageWrapAttrs } = wrap;
 
       switch (type) {
         case 'None':
@@ -327,21 +391,24 @@ export const Image = Node.create({
           } else if (attrs.wrapText === 'left') {
             style += 'float: right;';
             floatRight = true;
-          } else if (['largest', 'bothSides'].includes(attrs.wrapText)) {
+          } else if (attrs.wrapText && ['largest', 'bothSides'].includes(attrs.wrapText)) {
             // TODO: HTML/CSS doesn't support true both-sides wrapping
             // We use 'largest' as best approximation
             //
             // For 'largest', float to the side that would leave the most space for text
-            const pageStylesData = getDataFromPageStyles({
-              editor: this.editor,
-              marginOffset,
-              size,
-              attrs,
-            });
-
-            style += pageStylesData.style;
-            floatRight = pageStylesData.floatRight;
-            baseHorizontal = pageStylesData.baseHorizontal;
+            const editorInstance = this.editor;
+            if (editorInstance) {
+              const pageStylesData = getDataFromPageStyles({
+                editor: editorInstance,
+                marginOffset,
+                size,
+                attrs,
+              });
+
+              style += pageStylesData.style;
+              floatRight = pageStylesData.floatRight;
+              baseHorizontal = pageStylesData.baseHorizontal;
+            }
           }
           if (attrs.distTop) margin.top += attrs.distTop;
           if (attrs.distBottom) margin.bottom += attrs.distBottom;
@@ -353,16 +420,18 @@ export const Image = Node.create({
         case 'Tight': {
           style += 'clear: both;';
 
-          const pageStylesData = getDataFromPageStyles({
-            editor: this.editor,
-            marginOffset,
-            size,
-            attrs,
-          });
+          if (this.editor) {
+            const pageStylesData = getDataFromPageStyles({
+              editor: this.editor,
+              marginOffset,
+              size,
+              attrs,
+            });
 
-          style += pageStylesData.style;
-          floatRight = pageStylesData.floatRight;
-          baseHorizontal = pageStylesData.baseHorizontal;
+            style += pageStylesData.style;
+            floatRight = pageStylesData.floatRight;
+            baseHorizontal = pageStylesData.baseHorizontal;
+          }
 
           // Use float and shape-outside if polygon is provided
 
@@ -370,12 +439,12 @@ export const Image = Node.create({
           if (attrs.distBottom) margin.bottom += attrs.distBottom;
           if (attrs.distLeft) margin.left += attrs.distLeft;
           if (attrs.distRight) margin.right += attrs.distRight;
-          if (attrs.polygon) {
+          if (attrs.polygon && Array.isArray(attrs.polygon)) {
             // Convert polygon points to CSS polygon string
             // For left floating images - we add 15 to the horizontal offset to prevent overlap with text.
             // For right floating images - we pick the smallest x value of the polygon. Difference is due to
             // the polygons in HTML/CSS being defined in relation to the image's bounding box.
-            let horizontalOffset = floatRight ? attrs.polygon[0][0] || 0 : marginOffset.horizontal + 15;
+            let horizontalOffset = floatRight ? attrs.polygon[0][0] || 0 : (marginOffset?.horizontal || 0) + 15;
 
             let maxX = 0;
             let minX = 0;
@@ -390,14 +459,16 @@ export const Image = Node.create({
             });
             const originalWidth = maxX - minX;
             const originalHeight = maxY - minY;
-            const scaleWidth = Math.min(1, size.width / originalWidth);
-            const scaleHeight = Math.min(1, size.height / originalHeight);
+            const sizeWidth = size?.width ?? 0;
+            const sizeHeight = size?.height ?? 0;
+            const scaleWidth = originalWidth ? Math.min(1, sizeWidth / originalWidth) : 0;
+            const scaleHeight = originalHeight ? Math.min(1, sizeHeight / originalHeight) : 0;
             // TODO: Calculating the scale factors based on the declared size of the image and the size of the
             // polygon will work if the polygon touch all the edges of the images (typical case). It will give
             // somewhat incorrect values not if the polygon does not touch the right and bottom edges of the image.
             // To solve this properly, we need to determine the actual image size based on the image file and
             // base the scale factors on that.
-            const verticalOffset = Math.max(0, marginOffset.top);
+            const verticalOffset = Math.max(0, marginOffset?.top || 0);
             const points = attrs.polygon
               .map(([x, y]) => `${horizontalOffset + x * scaleWidth}px ${verticalOffset + y * scaleHeight}px`)
               .join(', ');
@@ -427,29 +498,29 @@ export const Image = Node.create({
     const hasMarginOffsets = marginOffset?.horizontal != null || marginOffset?.top != null;
 
     if (hasAnchorData) {
-      switch (anchorData.hRelativeFrom) {
+      switch (anchorData?.hRelativeFrom) {
         case 'page':
           const pageStyles =
             this.editor?.converter?.pageStyles || this.editor?.options.parentEditor?.converter?.pageStyles;
           margin.left -= inchesToPixels(pageStyles?.pageMargins?.left) || 0;
           break;
         case 'margin':
-          if (anchorData.alignH === 'center') {
+          if (anchorData?.alignH === 'center') {
             style += 'position: absolute; left: 50%; transform: translateX(-50%);';
           }
-          if (anchorData.alignH === 'left' || anchorData.alignH === 'right') {
+          if (anchorData?.alignH === 'left' || anchorData?.alignH === 'right') {
             style += `position: absolute; ${anchorData.alignH}: 0;`;
           }
           break;
         case 'column':
-          if (anchorData.alignH === 'center') {
+          if (anchorData?.alignH === 'center') {
             centered = true;
-          } else if (anchorData.alignH === 'right') {
+          } else if (anchorData?.alignH === 'right') {
             floatRight = true;
             if (!style.includes('float: right;')) {
               style += 'float: right;';
             }
-          } else if (anchorData.alignH === 'left') {
+          } else if (anchorData?.alignH === 'left') {
             if (!style.includes('float: left;')) {
               style += 'float: left;';
             }
@@ -522,13 +593,16 @@ export const Image = Node.create({
     if (margin.bottom) style += `margin-bottom: ${margin.bottom}px;`;
 
     // Merge wrap styling with existing htmlAttributes style
-    const finalAttributes = { ...htmlAttributes };
+    const finalAttributes: Record<string, unknown> = { ...htmlAttributes };
     if (style) {
-      const existingStyle = finalAttributes.style || '';
+      const existingStyle = typeof finalAttributes.style === 'string' ? finalAttributes.style : '';
       finalAttributes.style = existingStyle + (existingStyle ? ' ' : '') + style;
     }
 
-    return ['img', Attribute.mergeAttributes(this.options.htmlAttributes, finalAttributes)];
+    return [
+      'img',
+      Attribute.mergeAttributes(this.options.htmlAttributes, finalAttributes as Record<string, AttributeValue>),
+    ];
   },
 
   addCommands() {
@@ -547,8 +621,8 @@ export const Image = Node.create({
        * @note Supports URLs, relative paths, and base64 data URIs
        */
       setImage:
-        (options) =>
-        ({ commands }) => {
+        (options: ImageInsertOptions) =>
+        ({ commands }: { commands: { insertContent: (content: unknown) => boolean } }): boolean => {
           return commands.insertContent({
             type: this.name,
             attrs: options,
@@ -602,8 +676,14 @@ export const Image = Node.create({
        * })
        */
       setWrapping:
-        (options) =>
-        ({ chain, state }) => {
+        (options: SetWrappingOptions) =>
+        ({
+          chain,
+          state,
+        }: {
+          chain: () => { updateAttributes: (...args: unknown[]) => { run: () => boolean } };
+          state: { selection: { $from: { nodeAfter: PmNode | null } } };
+        }): boolean => {
           const { selection } = state;
           const { $from } = selection;
           const node = $from.nodeAfter;
@@ -615,8 +695,8 @@ export const Image = Node.create({
           const { type, attrs = {} } = options;
 
           // Filter attributes based on allowed ones for the wrap type
-          const allowedAttrs = {};
-          const allowedAttributes = {
+          const allowedAttrs: Record<string, unknown> = {};
+          const allowedAttributes: Record<string, string[]> = {
             None: ['behindDoc'],
             Square: ['wrapText', 'distTop', 'distBottom', 'distLeft', 'distRight'],
             Through: ['distTop', 'distBottom', 'distLeft', 'distRight', 'polygon'],
@@ -644,15 +724,26 @@ export const Image = Node.create({
 
           return chain().updateAttributes(this.name, updatedAttrs).run();
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 
   addPmPlugins() {
+    if (!this.editor) return [];
     return [ImageRegistrationPlugin({ editor: this.editor }), ImagePositionPlugin({ editor: this.editor })];
   },
 });
 
-const getDataFromPageStyles = ({ editor, marginOffset, size, attrs }) => {
+const getDataFromPageStyles = ({
+  editor,
+  marginOffset,
+  size,
+  attrs,
+}: {
+  editor: import('@core/Editor.js').Editor;
+  marginOffset: { horizontal?: number; top?: number } | undefined;
+  size: { width?: number; height?: number };
+  attrs: ImageWrapAttrs;
+}): { style: string; floatRight: boolean; baseHorizontal: number } => {
   let style = '';
   let floatRight = false;
   let baseHorizontal = marginOffset?.horizontal || 0;
@@ -667,7 +758,7 @@ const getDataFromPageStyles = ({ editor, marginOffset, size, attrs }) => {
 
     // marginOffset.horizontal is space on the left when wrapText === "largest"
     // We can therefore calculate the space on the right vs on the left:
-    const leftSpace = marginOffset.horizontal;
+    const leftSpace = marginOffset?.horizontal ?? 0;
     const rightSpace = contentWidth - leftSpace - imageWidth;
 
     if (rightSpace < 0) {
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/basicHelpers.test.js b/packages/super-editor/src/extensions/image/imageHelpers/basicHelpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/basicHelpers.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/basicHelpers.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.test.js b/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.js b/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.ts
similarity index 75%
rename from packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.js
rename to packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.ts
index 0d92425c0..bc0a3dd3c 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/fileNameUtils.ts
@@ -1,8 +1,8 @@
 const FALLBACK_NAME = 'image';
 
-const stripDiacritics = (value) => value.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
+const stripDiacritics = (value: string): string => value.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
 
-const sanitizeSegment = (segment, { allowDots = false } = {}) => {
+const sanitizeSegment = (segment: string, { allowDots = false }: { allowDots?: boolean } = {}): string => {
   if (!segment) return '';
 
   const normalized = stripDiacritics(segment)
@@ -19,7 +19,7 @@ const sanitizeSegment = (segment, { allowDots = false } = {}) => {
   return sanitized;
 };
 
-const splitFileName = (name) => {
+const splitFileName = (name: string): { base: string; ext: string } => {
   const trimmed = name?.trim?.() ?? '';
   const lastDot = trimmed.lastIndexOf('.');
 
@@ -33,7 +33,7 @@ const splitFileName = (name) => {
   };
 };
 
-export const sanitizeImageFileName = (inputName) => {
+export const sanitizeImageFileName = (inputName: string): string => {
   const { base, ext } = splitFileName(inputName || '');
 
   const sanitizedBase = sanitizeSegment(base, { allowDots: true }) || FALLBACK_NAME;
@@ -44,7 +44,7 @@ export const sanitizeImageFileName = (inputName) => {
   return `${sanitizedBase}.${sanitizedExt}`;
 };
 
-export const ensureUniqueFileName = (preferredName, existingNames = new Set()) => {
+export const ensureUniqueFileName = (preferredName: string, existingNames: Set<string> = new Set()): string => {
   const sanitized = sanitizeImageFileName(preferredName);
   if (!existingNames || typeof existingNames.has !== 'function') {
     return sanitized;
@@ -70,4 +70,4 @@ export const ensureUniqueFileName = (preferredName, existingNames = new Set()) =
   return candidate;
 };
 
-export const buildMediaPath = (fileName) => `word/media/${fileName}`;
+export const buildMediaPath = (fileName: string): string => `word/media/${fileName}`;
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.js b/packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.ts
similarity index 79%
rename from packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.js
rename to packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.ts
index 551f9fc6f..4b48a3646 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/getFileOpener.ts
@@ -1,4 +1,3 @@
-// @ts-check
 const ACCEPT_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', 'image/jpeg', 'image/png'];
 
 /**
@@ -11,14 +10,14 @@ const ACCEPT_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', 'image/jpeg', 'image/png'];
  * if (result) console.log(result.file);
  * @note Only accepts JPEG and PNG images
  */
-export const getFileOpener = () => {
-  let fileInput = document.createElement('input');
+export const getFileOpener = (): (() => Promise<{ file: File } | null>) => {
+  const fileInput = document.createElement('input');
   fileInput.type = 'file';
 
-  let acceptTypes = ACCEPT_IMAGE_TYPES;
+  const acceptTypes = ACCEPT_IMAGE_TYPES;
   fileInput.accept = acceptTypes.join(',');
 
-  const openFile = () => {
+  const openFile = (): Promise<{ file: File } | null> => {
     return new Promise((resolve, reject) => {
       fileInput.onchange = async () => {
         const files = fileInput.files;
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.test.js b/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/handleBase64.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/handleBase64.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.js b/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.ts
similarity index 72%
rename from packages/super-editor/src/extensions/image/imageHelpers/handleBase64.js
rename to packages/super-editor/src/extensions/image/imageHelpers/handleBase64.ts
index 022001ab9..abc36497f 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/handleBase64.ts
@@ -1,12 +1,11 @@
-// @ts-check
 const DEFAULT_MIME_TYPE = 'application/octet-stream';
 
 /**
  * Generates a simple hash from a string.
- * @param {string} str - The input string.
- * @returns {string} The generated hash.
+ * @param str - The input string.
+ * @returns The generated hash.
  */
-const simpleHash = (str) => {
+const simpleHash = (str: string): string => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
@@ -18,10 +17,10 @@ const simpleHash = (str) => {
 
 /**
  * Decodes a base64-encoded string into a binary string.
- * @param {string} data - The base64-encoded string.
- * @returns {string} The decoded binary string.
+ * @param data - The base64-encoded string.
+ * @returns The decoded binary string.
  */
-const decodeBase64ToBinaryString = (data) => {
+const decodeBase64ToBinaryString = (data: string): string => {
   if (!data) return '';
 
   if (typeof atob === 'function') {
@@ -37,10 +36,10 @@ const decodeBase64ToBinaryString = (data) => {
 
 /**
  * Extract metadata from a base64-encoded string.
- * @param {string} base64String - The base64-encoded string.
- * @returns {Object} An object containing mimeType, binaryString, and filename.
+ * @param base64String - The base64-encoded string.
+ * @returns An object containing mimeType, binaryString, and filename.
  */
-const extractBase64Meta = (base64String) => {
+const extractBase64Meta = (base64String: string): { mimeType: string; binaryString: string; filename: string } => {
   const [meta = '', payload = ''] = base64String.split(',');
   const mimeMatch = meta.match(/:(.*?);/);
   const rawMimeType = mimeMatch ? mimeMatch[1] : '';
@@ -53,12 +52,12 @@ const extractBase64Meta = (base64String) => {
   return { mimeType, binaryString, filename };
 };
 
-export const getBase64FileMeta = (base64String) => {
+export const getBase64FileMeta = (base64String: string): { mimeType: string; filename: string } => {
   const { mimeType, filename } = extractBase64Meta(base64String);
   return { mimeType, filename };
 };
 
-export const base64ToFile = (base64String) => {
+export const base64ToFile = (base64String: string): File => {
   const { mimeType, binaryString, filename } = extractBase64Meta(base64String);
   const fileType = mimeType || DEFAULT_MIME_TYPE;
 
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.js b/packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.ts
similarity index 57%
rename from packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.js
rename to packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.ts
index fcad1af93..5a111e01e 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/handleImageUpload.ts
@@ -1,21 +1,18 @@
-// @ts-check
-
 /**
  * Converts an image file to base64 data URL
  * @category Helper
- * @param {File} file - Image file to convert
- * @returns {Promise<string>} Base64 data URL of the image
+ * @param file - Image file to convert
+ * @returns Base64 data URL of the image
  * @example
  * const dataUrl = await handleImageUpload(file);
  * // Returns: "data:image/png;base64,..."
  * @note Adds 250ms delay before reading to ensure file is ready
  */
-export const handleImageUpload = (file) => {
+export const handleImageUpload = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
-    let reader = new FileReader();
+    const reader = new FileReader();
     reader.onload = (event) => {
-      // @ts-expect-error - readAsDataURL always returns string, not ArrayBuffer
-      resolve(event.target.result);
+      resolve(event.target?.result as string);
     };
     reader.onerror = reject;
     setTimeout(() => reader.readAsDataURL(file), 250);
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.test.js b/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/handleUrl.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/handleUrl.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.js b/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.ts
similarity index 70%
rename from packages/super-editor/src/extensions/image/imageHelpers/handleUrl.js
rename to packages/super-editor/src/extensions/image/imageHelpers/handleUrl.ts
index 90182b4ee..c5095fd2d 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/handleUrl.ts
@@ -4,12 +4,16 @@
 
 /**
  * Converts a URL to a File object with proper CORS error handling
- * @param {string} url - The image URL to fetch
- * @param {string} [filename] - Optional filename for the resulting file
- * @param {string} [mimeType] - Optional MIME type for the resulting file
- * @returns {Promise<File|null>} File object or null if CORS prevents access
+ * @param url - The image URL to fetch
+ * @param filename - Optional filename for the resulting file
+ * @param mimeType - Optional MIME type for the resulting file
+ * @returns File object or null if CORS prevents access
  */
-export const urlToFile = async (url, filename, mimeType) => {
+export const urlToFile = async (
+  url: string,
+  filename: string | null = null,
+  mimeType: string | null = null,
+): Promise<File | null> => {
   try {
     // Try to fetch the image with credentials mode set to 'omit' to avoid CORS preflight
     const response = await fetch(url, {
@@ -35,9 +39,10 @@ export const urlToFile = async (url, filename, mimeType) => {
     const finalMimeType = mimeType || response.headers.get('content-type') || blob.type || 'image/jpeg';
 
     return new File([blob], finalFilename, { type: finalMimeType });
-  } catch (error) {
+  } catch (error: unknown) {
     if (isCorsError(error)) {
-      console.warn(`CORS policy prevents accessing image from ${url}:`, error.message);
+      const message = error instanceof Error ? error.message : String(error);
+      console.warn(`CORS policy prevents accessing image from ${url}:`, message);
       return null;
     }
 
@@ -48,10 +53,11 @@ export const urlToFile = async (url, filename, mimeType) => {
 
 /**
  * Checks if an error is likely a CORS-related error
- * @param {Error} error - The error to check
- * @returns {boolean} True if the error appears to be CORS-related
+ * @param error - The error to check
+ * @returns True if the error appears to be CORS-related
  */
-const isCorsError = (error) => {
+const isCorsError = (error: unknown): boolean => {
+  if (!(error instanceof Error)) return false;
   const errorMessage = error.message.toLowerCase();
   const errorName = error.name.toLowerCase();
 
@@ -67,10 +73,10 @@ const isCorsError = (error) => {
 
 /**
  * Extracts a filename from a URL
- * @param {string} url - The URL to extract filename from
- * @returns {string} The extracted filename
+ * @param url - The URL to extract filename from
+ * @returns The extracted filename
  */
-const extractFilenameFromUrl = (url) => {
+const extractFilenameFromUrl = (url: string): string => {
   try {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
@@ -89,10 +95,10 @@ const extractFilenameFromUrl = (url) => {
 
 /**
  * Validates if a URL can be accessed without CORS issues
- * @param {string} url - The URL to validate
- * @returns {Promise<boolean>} True if the URL is accessible without CORS issues
+ * @param url - The URL to validate
+ * @returns True if the URL is accessible without CORS issues
  */
-export const validateUrlAccessibility = async (url) => {
+export const validateUrlAccessibility = async (url: string): Promise<boolean> => {
   try {
     const response = await fetch(url, {
       method: 'HEAD',
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.js b/packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.ts
similarity index 78%
rename from packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.js
rename to packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.ts
index 7ef5ba7ae..83d006fd0 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/imagePositionPlugin.ts
@@ -1,16 +1,15 @@
-// @ts-check
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-
-/** @typedef {import('prosemirror-transform').Step} PMStep */
-/** @typedef {import('prosemirror-transform').ReplaceStep} ReplaceStep */
+import type { EditorView } from 'prosemirror-view';
+import type { ReplaceStep, Step } from 'prosemirror-transform';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '@core/Editor.js';
 
 /**
  * Type guard to narrow ProseMirror steps that carry a slice payload.
- * @param {PMStep} step
- * @returns {step is ReplaceStep}
  */
-const stepHasSlice = (step) => 'slice' in step && Boolean(step.slice);
+const stepHasSlice = (step: Step): step is ReplaceStep => 'slice' in step && Boolean((step as ReplaceStep).slice);
 
 const ImagePositionPluginKey = new PluginKey('ImagePosition');
 
@@ -26,16 +25,16 @@ const pageBreakPositionCache = new WeakMap();
 /**
  * Creates a ProseMirror plugin for managing anchored image positioning
  * @category Helper
- * @param {Object} params - Plugin parameters
- * @param {Object} params.editor - Editor instance
- * @returns {Plugin} ProseMirror plugin for image positioning
+ * @param params - Plugin parameters
+ * @param params.editor - Editor instance
+ * @returns ProseMirror plugin for image positioning
  * @example
  * const plugin = ImagePositionPlugin({ editor });
  * @note Handles anchored images with text wrapping
  * @note Integrates with pagination for proper page positioning
  * @note Creates placeholder decorations for absolute positioned images
  */
-export const ImagePositionPlugin = ({ editor }) => {
+export const ImagePositionPlugin = ({ editor }: { editor: Editor }): Plugin => {
   const { view } = editor;
   let shouldUpdate = true;
   return new Plugin({
@@ -47,7 +46,12 @@ export const ImagePositionPlugin = ({ editor }) => {
         return DecorationSet.empty;
       },
 
-      apply(tr, oldDecorationSet, oldState, newState) {
+      apply(
+        tr: Transaction,
+        oldDecorationSet: DecorationSet,
+        _oldState: EditorState,
+        newState: EditorState,
+      ): DecorationSet {
         if (!tr.docChanged && !shouldUpdate) return oldDecorationSet;
 
         // In headless/Node environments, or when no view/DOM is available, skip DOM-dependent work
@@ -65,7 +69,7 @@ export const ImagePositionPlugin = ({ editor }) => {
 
         tr.steps.forEach((step) => {
           if (stepHasSlice(step)) {
-            step.slice.content.descendants((node) => {
+            step.slice.content.descendants((node: PmNode) => {
               if (node.type.name === 'image' || node.attrs?.anchorData) {
                 affectsImages = true;
                 return false;
@@ -86,7 +90,7 @@ export const ImagePositionPlugin = ({ editor }) => {
 
     view: () => {
       return {
-        update: (view, lastState) => {
+        update: (view: EditorView, lastState: EditorState) => {
           const hasDOM = typeof document !== 'undefined' && !!(document && document.createElement);
           if (!hasDOM || !view || typeof view.domAtPos !== 'function') return;
           if (shouldUpdate) {
@@ -99,7 +103,7 @@ export const ImagePositionPlugin = ({ editor }) => {
     },
 
     props: {
-      decorations(state) {
+      decorations(state: EditorState): DecorationSet | undefined {
         return this.getState(state);
       },
     },
@@ -109,15 +113,15 @@ export const ImagePositionPlugin = ({ editor }) => {
 /**
  * Generate decorations for anchored images based on their positioning attributes
  * @private
- * @param {Object} state - Editor state
- * @param {Object} view - Editor view
- * @returns {Array} Array of Decoration objects
+ * @param state - Editor state
+ * @param view - Editor view
+ * @returns Array of Decoration objects
  * @note Creates inline decorations with positioning styles
  * @note Adds placeholder widgets for absolute positioned images
  * @note Handles float left/right and center alignment
  */
-const getImagePositionDecorations = (state, view) => {
-  let decorations = [];
+const getImagePositionDecorations = (state: EditorState, view: EditorView): Decoration[] => {
+  const decorations: Decoration[] = [];
 
   // Guard for non-DOM environments or missing view APIs
   const hasDOM = typeof document !== 'undefined' && !!(document && document.createElement);
@@ -131,7 +135,7 @@ const getImagePositionDecorations = (state, view) => {
    * for documents without absolute-positioned images.
    */
   let hasAnchoredImages = false;
-  state.doc.descendants((node) => {
+  state.doc.descendants((node: PmNode) => {
     if (node.attrs?.anchorData) {
       hasAnchoredImages = true;
       return false;
@@ -142,10 +146,10 @@ const getImagePositionDecorations = (state, view) => {
     return decorations;
   }
 
-  state.doc.descendants((node, pos) => {
+  state.doc.descendants((node: PmNode, pos: number) => {
     if (node.attrs.anchorData) {
       let style = '';
-      let className = '';
+      const className = '';
       const { vRelativeFrom, alignH } = node.attrs.anchorData;
       const { size, padding } = node.attrs;
 
@@ -201,30 +205,32 @@ const getImagePositionDecorations = (state, view) => {
 /**
  * Find the previous DOM node with a specific class by walking up the DOM tree
  * @private
- * @param {Object} view - Editor view
- * @param {number} pos - Position in document
- * @param {string} className - Class name to search for
- * @returns {HTMLElement|null} DOM element with the class or null
+ * @param view - Editor view
+ * @param pos - Position in document
+ * @param className - Class name to search for
+ * @returns DOM element with the class or null
  * @example
  * const pageBreak = findPreviousDomNodeWithClass(view, pos, 'pagination-break-wrapper');
  * @note Walks backward through siblings and ancestors
  * @note Handles text nodes by starting from their parent
  */
-const findPreviousDomNodeWithClass = (view, pos, className) => {
+const findPreviousDomNodeWithClass = (view: EditorView, pos: number, className: string): HTMLElement | null => {
   // Guard for headless environments
   const hasDOM = typeof document !== 'undefined' && !!(document && document.createElement);
   if (!hasDOM || !view || typeof view.domAtPos !== 'function') return null;
-  let { node } = view.domAtPos(pos);
+  let { node } = view.domAtPos(pos) as { node: Node };
 
   // If you get a text node, go to its parent
-  if (node.nodeType === 3) {
+  if (node.nodeType === 3 && node.parentNode) {
     node = node.parentNode;
   }
 
+  if (!node) return null;
+
   // Walk backward over siblings and their ancestors
-  while (node) {
-    if (node.classList && node.classList.contains(className)) {
-      return node;
+  while (node as Node | null) {
+    if ((node as HTMLElement).classList && (node as HTMLElement).classList.contains(className)) {
+      return node as HTMLElement;
     }
     if (node.previousSibling) {
       node = node.previousSibling;
@@ -233,7 +239,9 @@ const findPreviousDomNodeWithClass = (view, pos, className) => {
         node = node.lastChild;
       }
     } else {
-      node = node.parentNode;
+      const parent = node.parentNode;
+      if (!parent) break;
+      node = parent;
     }
   }
 
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.test.js b/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.js b/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.ts
similarity index 63%
rename from packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.js
rename to packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.ts
index 6cd621b24..0f65912b8 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/imageRegistrationPlugin.ts
@@ -1,11 +1,17 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Step } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
+import type { Editor } from '@core/Editor.js';
 import { base64ToFile, getBase64FileMeta } from './handleBase64';
 import { urlToFile, validateUrlAccessibility } from './handleUrl';
 import { checkAndProcessImage, uploadAndInsertImage } from './startImageUpload';
 import { buildMediaPath, ensureUniqueFileName } from './fileNameUtils.js';
 import { addImageRelationship } from '@extensions/image/imageHelpers/startImageUpload.js';
+
 const key = new PluginKey('ImageRegistration');
 
 /**
@@ -18,7 +24,7 @@ const key = new PluginKey('ImageRegistration');
  * @param {import('prosemirror-model').Node} node
  * @returns {boolean}
  */
-export const needsImageRegistration = (node) => {
+export const needsImageRegistration = (node: PmNode | null | undefined): boolean => {
   if (!node || node.type?.name !== 'image') return false;
 
   const src = node.attrs?.src;
@@ -33,7 +39,13 @@ export const needsImageRegistration = (node) => {
   return true;
 };
 
-export const ImageRegistrationPlugin = ({ editor }) => {
+interface ImageNodeInfo {
+  node: PmNode;
+  pos: number;
+  id: object;
+}
+
+export const ImageRegistrationPlugin = ({ editor }: { editor: Editor }): Plugin => {
   const { view } = editor;
   return new Plugin({
     key,
@@ -42,7 +54,7 @@ export const ImageRegistrationPlugin = ({ editor }) => {
         return { set: DecorationSet.empty };
       },
 
-      apply(tr, { set }) {
+      apply(tr: Transaction, { set }: { set: DecorationSet }): { set: DecorationSet } {
         // For reference.
         // let diffStart = tr.doc.content.findDiffStart(oldState.doc.content);
         // let diffEnd = oldState.doc.content.findDiffEnd(tr.doc.content);
@@ -64,14 +76,18 @@ export const ImageRegistrationPlugin = ({ editor }) => {
         return { set };
       },
     },
-    appendTransaction: (trs, _oldState, state) => {
-      let foundImages = [];
-      if (!trs.some((tr) => tr.docChanged)) return null;
-
-      trs.forEach((tr) => {
+    appendTransaction: (
+      trs: readonly Transaction[],
+      _oldState: EditorState,
+      state: EditorState,
+    ): Transaction | null => {
+      let foundImages: ImageNodeInfo[] = [];
+      if (!trs.some((tr: Transaction) => tr.docChanged)) return null;
+
+      trs.forEach((tr: Transaction) => {
         if (tr.docChanged) {
           // Check if there are any images in the incoming transaction. If so, we need to register them.
-          tr.steps.forEach((step, index) => {
+          tr.steps.forEach((step: Step, index: number) => {
             const stepMap = step.getMap();
             foundImages = foundImages.map(({ node, pos, id }) => {
               const mappedPos = stepMap.map(pos, -1);
@@ -82,7 +98,7 @@ export const ImageRegistrationPlugin = ({ editor }) => {
               (tr.docs[index + 1] || tr.doc).nodesBetween(
                 stepMap.map(step.from, -1),
                 stepMap.map(step.to, 1),
-                (node, pos) => {
+                (node: PmNode, pos: number) => {
                   if (node.type.name === 'image' && needsImageRegistration(node)) {
                     // Node contains an image that is not yet registered.
                     const id = {};
@@ -110,15 +126,15 @@ export const ImageRegistrationPlugin = ({ editor }) => {
       return handleBrowserPath(foundImages, editor, view, state);
     },
     props: {
-      decorations(state) {
-        let { set } = key.getState(state);
+      decorations(state: EditorState): DecorationSet {
+        const { set } = key.getState(state) as { set: DecorationSet };
         return set;
       },
     },
   });
 };
 
-const derivePreferredFileName = (src) => {
+const derivePreferredFileName = (src: string): string => {
   if (typeof src !== 'string' || src.length === 0) {
     return 'image.bin';
   }
@@ -135,29 +151,39 @@ const derivePreferredFileName = (src) => {
 /**
  * Handles the node path for image registration.
  *
- * @param {Array} foundImages - Array of found image nodes with their positions and IDs.
- * @param {Object} editor - The editor instance.
- * @param {import('prosemirror-state').EditorState} state - The current editor state.
- * @returns {import('prosemirror-state').Transaction} - The updated transaction with image nodes updated with registered paths and IDs.
+ * @param foundImages - Array of found image nodes with their positions and IDs.
+ * @param editor - The editor instance.
+ * @param state - The current editor state.
+ * @returns The updated transaction with image nodes updated with registered paths and IDs.
  */
-export const handleNodePath = (foundImages, editor, state) => {
+interface ImageStorage {
+  media?: Record<string, string>;
+}
+
+export const handleNodePath = (foundImages: ImageNodeInfo[], editor: Editor, state: EditorState): Transaction => {
   const { tr } = state;
-  const mediaStore = editor.storage.image.media ?? {};
+  const imageStorage = editor.storage.image as ImageStorage;
+  const mediaStore: Record<string, string> = imageStorage.media ?? {};
 
-  if (!editor.storage.image.media) {
-    editor.storage.image.media = mediaStore;
+  if (!imageStorage.media) {
+    imageStorage.media = mediaStore;
   }
 
-  const existingFileNames = new Set(Object.keys(mediaStore).map((key) => key.split('/').pop()));
+  const existingFileNames = new Set<string>(
+    Object.keys(mediaStore)
+      .map((key) => key.split('/').pop() || key)
+      .filter(Boolean) as string[],
+  );
 
-  foundImages.forEach(({ node, pos }) => {
-    const { src } = node.attrs;
-    const preferredFileName = derivePreferredFileName(src);
+  foundImages.forEach(({ node, pos }: ImageNodeInfo) => {
+    const { src } = node.attrs as { src?: unknown };
+    const srcValue = typeof src === 'string' ? src : String(src ?? '');
+    const preferredFileName = derivePreferredFileName(srcValue);
     const uniqueFileName = ensureUniqueFileName(preferredFileName, existingFileNames);
     existingFileNames.add(uniqueFileName);
 
     const mediaPath = buildMediaPath(uniqueFileName);
-    mediaStore[mediaPath] = src;
+    mediaStore[mediaPath] = typeof src === 'string' ? src : String(src ?? '');
 
     const path = mediaPath.startsWith('word/') ? mediaPath.slice(5) : mediaPath;
     const rId = addImageRelationship({ editor, path });
@@ -175,13 +201,18 @@ export const handleNodePath = (foundImages, editor, state) => {
 /**
  * Handles the browser path for image registration.
  *
- * @param {Array} foundImages - Array of found image nodes with their positions and IDs.
- * @param {Object} editor - The editor instance.
- * @param {import('prosemirror-view').EditorView} view - The editor view instance.
- * @param {import('prosemirror-state').EditorState} state - The current editor state.
- * @returns {import('prosemirror-state').Transaction} - The updated transaction with image nodes replaced by placeholders and registration process initiated.
+ * @param foundImages - Array of found image nodes with their positions and IDs.
+ * @param editor - The editor instance.
+ * @param view - The editor view instance.
+ * @param state - The current editor state.
+ * @returns The updated transaction with image nodes replaced by placeholders and registration process initiated.
  */
-const handleBrowserPath = (foundImages, editor, view, state) => {
+const handleBrowserPath = (
+  foundImages: ImageNodeInfo[],
+  editor: Editor,
+  view: EditorView,
+  state: EditorState,
+): Transaction => {
   // Register the images. (async process).
   registerImages(foundImages, editor, view);
 
@@ -191,14 +222,14 @@ const handleBrowserPath = (foundImages, editor, view, state) => {
   // We need to delete the image nodes and replace them with decorations. This will change their positions.
 
   // Get the current decoration set
-  let { set } = key.getState(state);
+  let { set } = key.getState(state) as { set: DecorationSet };
 
   // Add decorations for the images first at their current positions
   foundImages
     .slice()
     .sort((a, b) => a.pos - b.pos)
-    .forEach(({ pos, id }) => {
-      let deco = Decoration.widget(pos, () => document.createElement('placeholder'), {
+    .forEach(({ pos, id }: ImageNodeInfo) => {
+      const deco = Decoration.widget(pos, () => document.createElement('placeholder'), {
         side: -1,
         id,
       });
@@ -209,7 +240,7 @@ const handleBrowserPath = (foundImages, editor, view, state) => {
   foundImages
     .slice()
     .sort((a, b) => b.pos - a.pos)
-    .forEach(({ node, pos }) => {
+    .forEach(({ node, pos }: ImageNodeInfo) => {
       tr.delete(pos, pos + node.nodeSize);
     });
   // Map the decoration set through the transaction to adjust positions
@@ -220,30 +251,30 @@ const handleBrowserPath = (foundImages, editor, view, state) => {
   return tr;
 };
 
-export const findPlaceholder = (state, id) => {
-  let { set } = key.getState(state);
-  let found = set?.find(null, null, (spec) => spec.id === id);
+export const findPlaceholder = (state: EditorState, id: object): number | null => {
+  const { set } = key.getState(state) as { set: DecorationSet };
+  const found = set?.find(undefined, undefined, (spec: Record<string, unknown>) => spec.id === id);
   return found?.length ? found[0].from : null;
 };
 
-export const removeImagePlaceholder = (state, tr, id) => {
-  let { set } = key.getState(state);
+export const removeImagePlaceholder = (state: EditorState, tr: Transaction, id: object): Transaction => {
+  let { set } = key.getState(state) as { set: DecorationSet };
   set = set.map(tr.mapping, tr.doc);
-  set = set.remove(set.find(null, null, (spec) => spec.id == id));
+  set = set.remove(set.find(undefined, undefined, (spec: Record<string, unknown>) => spec.id == id));
   return tr.setMeta(key, { set, type: 'remove' });
 };
 
-export const addImagePlaceholder = (state, tr, id, pos) => {
-  let { set } = key.getState(state);
+export const addImagePlaceholder = (state: EditorState, tr: Transaction, id: object, pos: number): Transaction => {
+  let { set } = key.getState(state) as { set: DecorationSet };
   set = set.map(tr.mapping, tr.doc);
-  let deco = Decoration.widget(pos, () => document.createElement('placeholder'), {
+  const deco = Decoration.widget(pos, () => document.createElement('placeholder'), {
     id,
   });
   set = set.add(tr.doc, [deco]);
   return tr.setMeta(key, { set, type: 'add' });
 };
 
-export const getImageRegistrationMetaType = (tr) => {
+export const getImageRegistrationMetaType = (tr: Transaction): string | null => {
   const meta = tr.getMeta(key);
   if (meta && meta.type) {
     return meta.type;
@@ -251,11 +282,11 @@ export const getImageRegistrationMetaType = (tr) => {
   return null;
 };
 
-const registerImages = async (foundImages, editor, view) => {
-  foundImages.forEach(async (image) => {
+const registerImages = async (foundImages: ImageNodeInfo[], editor: Editor, view: EditorView): Promise<void> => {
+  foundImages.forEach(async (image: ImageNodeInfo) => {
     const src = image.node.attrs.src;
     const id = image.id;
-    let file = null;
+    let file: File | null = null;
 
     if (src.startsWith('http')) {
       // First check if the URL is accessible without CORS issues
@@ -288,7 +319,10 @@ const registerImages = async (foundImages, editor, view) => {
 
     try {
       const process = await checkAndProcessImage({
-        getMaxContentSize: () => editor.getMaxContentSize(),
+        getMaxContentSize: () => {
+          const size = editor.getMaxContentSize();
+          return { width: size.width ?? 0, height: size.height ?? 0 };
+        },
         file,
       });
 
@@ -300,7 +334,13 @@ const registerImages = async (foundImages, editor, view) => {
         return;
       }
 
-      await uploadAndInsertImage({ editor, view, file: process.file, size: process.size, id });
+      await uploadAndInsertImage({
+        editor,
+        view,
+        file: process.file,
+        size: { width: process.size.width, height: process.size.height },
+        id,
+      });
     } catch (error) {
       console.error(`Error processing image from ${src}:`, error);
       // Ensure placeholder is removed even on error
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/index.js b/packages/super-editor/src/extensions/image/imageHelpers/index.ts
similarity index 77%
rename from packages/super-editor/src/extensions/image/imageHelpers/index.js
rename to packages/super-editor/src/extensions/image/imageHelpers/index.ts
index 83856e9c3..99e94fea6 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/index.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/index.ts
@@ -7,3 +7,6 @@ export * from './imagePositionPlugin.js';
 export * from './fileNameUtils.js';
 export * from './rotation.js';
 export * from './legacyAttributes.js';
+
+// Re-export types that are used externally
+export type { EditorOptions } from './startImageUpload.js';
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.js b/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.js
deleted file mode 100644
index d671b5d68..000000000
--- a/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// @ts-check
-
-/**
- * Normalize wrap attribute ensuring backward compatibility with legacy wrap fields.
- * @param {Object} attrs
- * @returns {{ type: string, attrs: Record<string, any> }}
- */
-export const normalizeWrap = (attrs = {}) => {
-  const wrap = attrs.wrap;
-  if (wrap?.type && wrap.type !== 'Inline') {
-    return {
-      type: wrap.type,
-      attrs: wrap.attrs ?? {},
-    };
-  }
-  // If the document already has an explicit inline wrap with attrs, keep it.
-  // The generic inline branch below only handles empty/default inline wraps, so we need
-  // this early exit to avoid falling through to legacy wrapText fallbacks.
-  if (wrap?.type === 'Inline' && Object.keys(wrap.attrs ?? {}).length) {
-    return {
-      type: 'Inline',
-      attrs: wrap.attrs,
-    };
-  }
-
-  if (!wrap && attrs.wrapText) {
-    return {
-      type: 'Square',
-      attrs: {
-        wrapText: attrs.wrapText,
-      },
-    };
-  }
-
-  if (!wrap && attrs.wrapTopAndBottom) {
-    return {
-      type: 'TopAndBottom',
-      attrs: {},
-    };
-  }
-
-  if (wrap?.type === 'Inline') {
-    return {
-      type: 'Inline',
-      attrs: wrap.attrs ?? {},
-    };
-  }
-
-  return {
-    type: 'Inline',
-    attrs: {},
-  };
-};
-
-/**
- * Normalize margin offsets ensuring backward compatibility with legacy left offset.
- * @param {Object} marginOffset
- * @returns {{ horizontal?: number, top?: number, right?: number, bottom?: number }}
- */
-export const normalizeMarginOffset = (marginOffset = {}) => {
-  const { left, horizontal, ...rest } = marginOffset;
-  return {
-    ...rest,
-    horizontal: horizontal ?? left,
-  };
-};
-
-/**
- * Convenience helper returning normalized wrap and marginOffset.
- * @param {Object} attrs
- * @returns {{ wrap: { type: string, attrs: Record<string, any> }, marginOffset: Record<string, any> }}
- */
-export const getNormalizedImageAttrs = (attrs = {}) => {
-  return {
-    wrap: normalizeWrap(attrs),
-    marginOffset: normalizeMarginOffset(attrs.marginOffset ?? {}),
-  };
-};
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.test.js b/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.ts b/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.ts
new file mode 100644
index 000000000..ae341f2c7
--- /dev/null
+++ b/packages/super-editor/src/extensions/image/imageHelpers/legacyAttributes.ts
@@ -0,0 +1,104 @@
+interface WrapConfig {
+  type: string;
+  attrs: Record<string, unknown>;
+}
+
+interface ImageAttrs {
+  wrap?: WrapConfig;
+  wrapText?: string;
+  wrapTopAndBottom?: boolean;
+  marginOffset?: MarginOffset;
+  [key: string]: unknown;
+}
+
+interface MarginOffset {
+  left?: number;
+  horizontal?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+}
+
+/**
+ * Normalize wrap attribute ensuring backward compatibility with legacy wrap fields.
+ * @param attrs - Image attributes that may contain wrap configuration
+ * @returns Normalized wrap configuration
+ */
+export const normalizeWrap = (attrs: Record<string, unknown> = {}): WrapConfig => {
+  const imageAttrs = attrs as ImageAttrs;
+  const wrap = imageAttrs.wrap;
+  if (wrap?.type && wrap.type !== 'Inline') {
+    return {
+      type: wrap.type,
+      attrs: wrap.attrs ?? {},
+    };
+  }
+  // If the document already has an explicit inline wrap with attrs, keep it.
+  // The generic inline branch below only handles empty/default inline wraps, so we need
+  // this early exit to avoid falling through to legacy wrapText fallbacks.
+  if (wrap?.type === 'Inline' && Object.keys(wrap.attrs ?? {}).length) {
+    return {
+      type: 'Inline',
+      attrs: wrap.attrs,
+    };
+  }
+
+  if (!wrap && imageAttrs.wrapText) {
+    return {
+      type: 'Square',
+      attrs: {
+        wrapText: imageAttrs.wrapText,
+      },
+    };
+  }
+
+  if (!wrap && imageAttrs.wrapTopAndBottom) {
+    return {
+      type: 'TopAndBottom',
+      attrs: {},
+    };
+  }
+
+  if (wrap?.type === 'Inline') {
+    return {
+      type: 'Inline',
+      attrs: wrap.attrs ?? {},
+    };
+  }
+
+  return {
+    type: 'Inline',
+    attrs: {},
+  };
+};
+
+/**
+ * Normalize margin offsets ensuring backward compatibility with legacy left offset.
+ * @param marginOffset - Margin offset configuration
+ * @returns Normalized margin offset with horizontal, top, right, bottom properties
+ */
+export const normalizeMarginOffset = (marginOffset: Record<string, unknown> = {}): MarginOffset => {
+  const { left, horizontal, top, right, bottom, ...rest } = marginOffset as MarginOffset & Record<string, unknown>;
+  return {
+    ...rest,
+    horizontal: horizontal ?? left,
+    top,
+    right,
+    bottom,
+  };
+};
+
+/**
+ * Convenience helper returning normalized wrap and marginOffset.
+ * @param attrs - Image attributes
+ * @returns Normalized wrap and margin offset configuration
+ */
+export const getNormalizedImageAttrs = (
+  attrs: Record<string, unknown> = {},
+): { wrap: WrapConfig; marginOffset: MarginOffset } => {
+  const imageAttrs = attrs as ImageAttrs;
+  return {
+    wrap: normalizeWrap(attrs),
+    marginOffset: normalizeMarginOffset((imageAttrs.marginOffset ?? {}) as Record<string, unknown>),
+  };
+};
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.js b/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.js
deleted file mode 100644
index 584e675dc..000000000
--- a/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.js
+++ /dev/null
@@ -1,241 +0,0 @@
-// @ts-check
-/**
- * Process an uploaded image to ensure it fits within the editor's content area
- * @category Helper
- * @param {string|File} fileData - Base64 string or File object
- * @param {Function} getMaxContentSize - Function returning max width/height constraints
- * @returns {Promise<string|Object>} Processed image data
- * @example
- * const processed = await processUploadedImage(file, () => editor.getMaxContentSize());
- * // Returns resized image maintaining aspect ratio
- * @note Uses multi-step Hermite resize for high quality
- * @note Respects device pixel ratio for crisp display
- */
-export const processUploadedImage = (fileData, getMaxContentSize) => {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      const { width: logicalWidth, height: logicalHeight } = getAllowedImageDimensions(
-        img.width,
-        img.height,
-        getMaxContentSize,
-      );
-
-      // Set canvas to original image size first
-      canvas.width = img.width;
-      canvas.height = img.height;
-
-      const ctx = canvas.getContext('2d');
-
-      // Ensure the highest quality if the browser ever needs to resample.
-      // `imageSmoothingQuality` is not supported in every browser, so we wrap it in a try/catch.
-      if (ctx) {
-        ctx.imageSmoothingEnabled = true;
-        try {
-          ctx.imageSmoothingQuality = 'high';
-        } catch {}
-      }
-
-      // Draw original image at full size
-      ctx.drawImage(img, 0, 0, img.width, img.height);
-
-      // We generate an image that has `devicePixelRatio` × the CSS size
-      // in real pixels, but we still tell the editor to draw it at the
-      // logical (CSS) width/height.  This keeps the image crisp while
-      // avoiding the browser's secondary up-scaling that causes blur.
-      const dpr = typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1;
-      const targetPixelWidth = Math.round(logicalWidth * dpr);
-      const targetPixelHeight = Math.round(logicalHeight * dpr);
-
-      const finalTargetWidth = Math.min(targetPixelWidth, img.width);
-      const finalTargetHeight = Math.min(targetPixelHeight, img.height);
-
-      // Use multi-step Hermite resize algorithm if dimensions need to be changed
-      const resizeNeeded = finalTargetWidth !== img.width || finalTargetHeight !== img.height;
-      if (resizeNeeded) {
-        multiStepResize(canvas, finalTargetWidth, finalTargetHeight);
-      }
-
-      if (typeof fileData === 'string') {
-        const resizedBase64 = canvas.toDataURL();
-        resolve(resizedBase64);
-      } else {
-        canvas.toBlob((blob) => {
-          const updatedFile = new File([blob], fileData.name, {
-            type: fileData.type,
-            lastModified: Date.now(),
-          });
-          resolve({ file: updatedFile, width: logicalWidth, height: logicalHeight });
-        });
-      }
-    };
-    img.onerror = (error) => reject(error);
-    img.src = typeof fileData === 'string' ? fileData : URL.createObjectURL(fileData);
-  });
-};
-
-/**
- * Calculate allowed image dimensions based on editor constraints
- * @category Helper
- * @param {number} width - Original image width
- * @param {number} height - Original image height
- * @param {Function} getMaxContentSize - Function returning max width/height constraints
- * @returns {Object} Object with adjusted width and height
- * @example
- * const { width, height } = getAllowedImageDimensions(1920, 1080, () => editor.getMaxContentSize());
- * @note Maintains aspect ratio while fitting within max dimensions
- */
-export const getAllowedImageDimensions = (width, height, getMaxContentSize) => {
-  const { width: maxWidth, height: maxHeight } = getMaxContentSize();
-  if (!maxWidth || !maxHeight) return { width, height };
-
-  let adjustedWidth = width;
-  let adjustedHeight = height;
-  const aspectRatio = width / height;
-
-  if (height > maxHeight) {
-    adjustedHeight = maxHeight;
-    adjustedWidth = Math.round(maxHeight * aspectRatio);
-  }
-
-  if (adjustedWidth > maxWidth) {
-    adjustedWidth = maxWidth;
-    adjustedHeight = Math.round(maxWidth / aspectRatio);
-  }
-
-  return { width: adjustedWidth, height: adjustedHeight };
-};
-
-/**
- * @private
- * Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
- * see: https://github.com/viliusle/Hermite-resize
- * @param {HTMLCanvasElement} canvas - Canvas to resize
- * @param {number} width - Target width
- * @param {number} height - Target height
- * @param {boolean} resize_canvas - Whether to resize the canvas element
- */
-function resample_high_quality(canvas, width, height, resize_canvas) {
-  var width_source = canvas.width;
-  var height_source = canvas.height;
-  width = Math.round(width);
-  height = Math.round(height);
-
-  var ratio_w = width_source / width;
-  var ratio_h = height_source / height;
-  var ratio_w_half = Math.ceil(ratio_w / 2);
-  var ratio_h_half = Math.ceil(ratio_h / 2);
-
-  var ctx = canvas.getContext('2d');
-  var img = ctx.getImageData(0, 0, width_source, height_source);
-  var img2 = ctx.createImageData(width, height);
-  var data = img.data;
-  var data2 = img2.data;
-
-  for (var j = 0; j < height; j++) {
-    for (var i = 0; i < width; i++) {
-      var x2 = (i + j * width) * 4;
-      var weight = 0;
-      var weights = 0;
-      var weights_alpha = 0;
-      var gx_r = 0;
-      var gx_g = 0;
-      var gx_b = 0;
-      var gx_a = 0;
-      var center_y = (j + 0.5) * ratio_h;
-      var yy_start = Math.floor(j * ratio_h);
-      var yy_stop = Math.ceil((j + 1) * ratio_h);
-      for (var yy = yy_start; yy < yy_stop; yy++) {
-        var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
-        var center_x = (i + 0.5) * ratio_w;
-        var w0 = dy * dy; //pre-calc part of w
-        var xx_start = Math.floor(i * ratio_w);
-        var xx_stop = Math.ceil((i + 1) * ratio_w);
-        for (var xx = xx_start; xx < xx_stop; xx++) {
-          var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
-          var w = Math.sqrt(w0 + dx * dx);
-          if (w >= 1) {
-            //pixel too far
-            continue;
-          }
-          //hermite filter
-          weight = 2 * w * w * w - 3 * w * w + 1;
-          var pos_x = 4 * (xx + yy * width_source);
-          //alpha
-          gx_a += weight * data[pos_x + 3];
-          weights_alpha += weight;
-          //colors
-          if (data[pos_x + 3] < 255) weight = (weight * data[pos_x + 3]) / 250;
-          gx_r += weight * data[pos_x];
-          gx_g += weight * data[pos_x + 1];
-          gx_b += weight * data[pos_x + 2];
-          weights += weight;
-        }
-      }
-      data2[x2] = gx_r / weights;
-      data2[x2 + 1] = gx_g / weights;
-      data2[x2 + 2] = gx_b / weights;
-      data2[x2 + 3] = gx_a / weights_alpha;
-    }
-  }
-  //clear and resize canvas
-  if (resize_canvas === true) {
-    canvas.width = width;
-    canvas.height = height;
-  } else {
-    ctx.clearRect(0, 0, width_source, height_source);
-  }
-
-  //draw
-  ctx.putImageData(img2, 0, 0);
-}
-
-/**
- * Multi step image resize for better quality
- * @param {HTMLCanvasElement} canvas - Canvas to resize
- * @param {number} width - Target width
- * @param {number} height - Target height
- */
-function multiStepResize(canvas, width, height) {
-  let oc = document.createElement('canvas');
-  let octx = oc.getContext('2d');
-  let ctx = canvas.getContext('2d');
-
-  let steps = Math.ceil(Math.log(canvas.width / width) / Math.log(2));
-  steps = Math.max(steps, 1);
-
-  let stepWidth = width * Math.pow(2, steps - 1);
-  let stepHeight = height * Math.pow(2, steps - 1);
-  let currentWidth = canvas.width;
-  let currentHeight = canvas.height;
-
-  oc.width = currentWidth;
-  oc.height = currentHeight;
-  octx.drawImage(canvas, 0, 0);
-
-  while (steps > 0) {
-    stepWidth = Math.max(stepWidth, width);
-    stepHeight = Math.max(stepHeight, height);
-
-    canvas.width = stepWidth;
-    canvas.height = stepHeight;
-
-    ctx.drawImage(oc, 0, 0, currentWidth, currentHeight, 0, 0, stepWidth, stepHeight);
-
-    currentWidth = stepWidth;
-    currentHeight = stepHeight;
-
-    oc.width = currentWidth;
-    oc.height = currentHeight;
-    octx.drawImage(canvas, 0, 0);
-
-    stepWidth = Math.round(stepWidth / 2);
-    stepHeight = Math.round(stepHeight / 2);
-    steps--;
-  }
-
-  // Ensure final resize to exact dimensions
-  resample_high_quality(canvas, width, height, true);
-}
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.test.js b/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.ts b/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.ts
new file mode 100644
index 000000000..ec868b27b
--- /dev/null
+++ b/packages/super-editor/src/extensions/image/imageHelpers/processUploadedImage.ts
@@ -0,0 +1,254 @@
+/**
+ * Process an uploaded image to ensure it fits within the editor's content area
+ * @category Helper
+ * @param fileData - Base64 string or File object
+ * @param getMaxContentSize - Function returning max width/height constraints
+ * @returns Processed image data
+ * @example
+ * const processed = await processUploadedImage(file, () => editor.getMaxContentSize());
+ * // Returns resized image maintaining aspect ratio
+ * @note Uses multi-step Hermite resize for high quality
+ * @note Respects device pixel ratio for crisp display
+ */
+export const processUploadedImage = (
+  fileData: string | File,
+  getMaxContentSize: () => { width: number; height: number },
+): Promise<string | { file: File; width: number; height: number }> => {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image();
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const { width: logicalWidth, height: logicalHeight } = getAllowedImageDimensions(
+        img.width,
+        img.height,
+        getMaxContentSize,
+      );
+
+      // Set canvas to original image size first
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      const ctx = canvas.getContext('2d');
+
+      // Ensure the highest quality if the browser ever needs to resample.
+      // `imageSmoothingQuality` is not supported in every browser, so we wrap it in a try/catch.
+      if (ctx) {
+        ctx.imageSmoothingEnabled = true;
+        try {
+          ctx.imageSmoothingQuality = 'high';
+        } catch {}
+
+        // Draw original image at full size
+        ctx.drawImage(img, 0, 0, img.width, img.height);
+
+        // We generate an image that has `devicePixelRatio` × the CSS size
+        // in real pixels, but we still tell the editor to draw it at the
+        // logical (CSS) width/height.  This keeps the image crisp while
+        // avoiding the browser's secondary up-scaling that causes blur.
+        const dpr = typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1;
+        const targetPixelWidth = Math.round(logicalWidth * dpr);
+        const targetPixelHeight = Math.round(logicalHeight * dpr);
+
+        const finalTargetWidth = Math.min(targetPixelWidth, img.width);
+        const finalTargetHeight = Math.min(targetPixelHeight, img.height);
+
+        // Use multi-step Hermite resize algorithm if dimensions need to be changed
+        const resizeNeeded = finalTargetWidth !== img.width || finalTargetHeight !== img.height;
+        if (resizeNeeded) {
+          multiStepResize(canvas, finalTargetWidth, finalTargetHeight);
+        }
+
+        if (typeof fileData === 'string') {
+          const resizedBase64 = canvas.toDataURL();
+          resolve(resizedBase64);
+        } else {
+          canvas.toBlob((blob: Blob | null) => {
+            if (!blob) {
+              reject(new Error('Failed to create blob from canvas'));
+              return;
+            }
+            const updatedFile = new File([blob], fileData.name, {
+              type: fileData.type,
+              lastModified: Date.now(),
+            });
+            resolve({ file: updatedFile, width: logicalWidth, height: logicalHeight });
+          });
+        }
+      }
+    };
+    img.onerror = (error: Event | string) => reject(error);
+    img.src = typeof fileData === 'string' ? fileData : URL.createObjectURL(fileData);
+  });
+};
+
+/**
+ * Calculate allowed image dimensions based on editor constraints
+ * @category Helper
+ * @param width - Original image width
+ * @param height - Original image height
+ * @param getMaxContentSize - Function returning max width/height constraints
+ * @returns Object with adjusted width and height
+ * @example
+ * const { width, height } = getAllowedImageDimensions(1920, 1080, () => editor.getMaxContentSize());
+ * @note Maintains aspect ratio while fitting within max dimensions
+ */
+export const getAllowedImageDimensions = (
+  width: number,
+  height: number,
+  getMaxContentSize: () => { width: number; height: number },
+): { width: number; height: number } => {
+  const { width: maxWidth, height: maxHeight } = getMaxContentSize();
+  if (!maxWidth || !maxHeight) return { width, height };
+
+  let adjustedWidth = width;
+  let adjustedHeight = height;
+  const aspectRatio = width / height;
+
+  if (height > maxHeight) {
+    adjustedHeight = maxHeight;
+    adjustedWidth = Math.round(maxHeight * aspectRatio);
+  }
+
+  if (adjustedWidth > maxWidth) {
+    adjustedWidth = maxWidth;
+    adjustedHeight = Math.round(maxWidth / aspectRatio);
+  }
+
+  return { width: adjustedWidth, height: adjustedHeight };
+};
+
+/**
+ * @private
+ * Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
+ * see: https://github.com/viliusle/Hermite-resize
+ * @param canvas - Canvas to resize
+ * @param width - Target width
+ * @param height - Target height
+ * @param resize_canvas - Whether to resize the canvas element
+ */
+function resample_high_quality(canvas: HTMLCanvasElement, width: number, height: number, resize_canvas: boolean): void {
+  const width_source = canvas.width;
+  const height_source = canvas.height;
+  width = Math.round(width);
+  height = Math.round(height);
+
+  const ratio_w = width_source / width;
+  const ratio_h = height_source / height;
+  const ratio_w_half = Math.ceil(ratio_w / 2);
+  const ratio_h_half = Math.ceil(ratio_h / 2);
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const img = ctx.getImageData(0, 0, width_source, height_source);
+  const img2 = ctx.createImageData(width, height);
+  const data = img.data;
+  const data2 = img2.data;
+
+  for (let j = 0; j < height; j++) {
+    for (let i = 0; i < width; i++) {
+      const x2 = (i + j * width) * 4;
+      let weight = 0;
+      let weights = 0;
+      let weights_alpha = 0;
+      let gx_r = 0;
+      let gx_g = 0;
+      let gx_b = 0;
+      let gx_a = 0;
+      const center_y = (j + 0.5) * ratio_h;
+      const yy_start = Math.floor(j * ratio_h);
+      const yy_stop = Math.ceil((j + 1) * ratio_h);
+      for (let yy = yy_start; yy < yy_stop; yy++) {
+        const dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
+        const center_x = (i + 0.5) * ratio_w;
+        const w0 = dy * dy; //pre-calc part of w
+        const xx_start = Math.floor(i * ratio_w);
+        const xx_stop = Math.ceil((i + 1) * ratio_w);
+        for (let xx = xx_start; xx < xx_stop; xx++) {
+          const dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
+          const w = Math.sqrt(w0 + dx * dx);
+          if (w >= 1) {
+            //pixel too far
+            continue;
+          }
+          //hermite filter
+          weight = 2 * w * w * w - 3 * w * w + 1;
+          const pos_x = 4 * (xx + yy * width_source);
+          //alpha
+          gx_a += weight * data[pos_x + 3];
+          weights_alpha += weight;
+          //colors
+          if (data[pos_x + 3] < 255) weight = (weight * data[pos_x + 3]) / 250;
+          gx_r += weight * data[pos_x];
+          gx_g += weight * data[pos_x + 1];
+          gx_b += weight * data[pos_x + 2];
+          weights += weight;
+        }
+      }
+      data2[x2] = gx_r / weights;
+      data2[x2 + 1] = gx_g / weights;
+      data2[x2 + 2] = gx_b / weights;
+      data2[x2 + 3] = gx_a / weights_alpha;
+    }
+  }
+  //clear and resize canvas
+  if (resize_canvas === true) {
+    canvas.width = width;
+    canvas.height = height;
+  } else {
+    ctx.clearRect(0, 0, width_source, height_source);
+  }
+
+  //draw
+  ctx.putImageData(img2, 0, 0);
+}
+
+/**
+ * Multi step image resize for better quality
+ * @param canvas - Canvas to resize
+ * @param width - Target width
+ * @param height - Target height
+ */
+function multiStepResize(canvas: HTMLCanvasElement, width: number, height: number): void {
+  const oc = document.createElement('canvas');
+  const octx = oc.getContext('2d');
+  const ctx = canvas.getContext('2d');
+
+  if (!octx || !ctx) return;
+
+  let steps = Math.ceil(Math.log(canvas.width / width) / Math.log(2));
+  steps = Math.max(steps, 1);
+
+  let stepWidth = width * Math.pow(2, steps - 1);
+  let stepHeight = height * Math.pow(2, steps - 1);
+  let currentWidth = canvas.width;
+  let currentHeight = canvas.height;
+
+  oc.width = currentWidth;
+  oc.height = currentHeight;
+  octx.drawImage(canvas, 0, 0);
+
+  while (steps > 0) {
+    stepWidth = Math.max(stepWidth, width);
+    stepHeight = Math.max(stepHeight, height);
+
+    canvas.width = stepWidth;
+    canvas.height = stepHeight;
+
+    ctx.drawImage(oc, 0, 0, currentWidth, currentHeight, 0, 0, stepWidth, stepHeight);
+
+    currentWidth = stepWidth;
+    currentHeight = stepHeight;
+
+    oc.width = currentWidth;
+    oc.height = currentHeight;
+    octx.drawImage(canvas, 0, 0);
+
+    stepWidth = Math.round(stepWidth / 2);
+    stepHeight = Math.round(stepHeight / 2);
+    steps--;
+  }
+
+  // Ensure final resize to exact dimensions
+  resample_high_quality(canvas, width, height, true);
+}
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/rotation.js b/packages/super-editor/src/extensions/image/imageHelpers/rotation.ts
similarity index 76%
rename from packages/super-editor/src/extensions/image/imageHelpers/rotation.js
rename to packages/super-editor/src/extensions/image/imageHelpers/rotation.ts
index b44d5ee94..6a4a6c87a 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/rotation.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/rotation.ts
@@ -1,4 +1,8 @@
-export const getRotationMargins = (w, h, angleDegrees) => {
+export const getRotationMargins = (
+  w: number,
+  h: number,
+  angleDegrees: number,
+): { horizontal: number; vertical: number } => {
   const rad = angleDegrees * (Math.PI / 180);
   const cos = Math.abs(Math.cos(rad));
   const sin = Math.abs(Math.sin(rad));
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.test.js b/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.test.js
rename to packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.test.ts
diff --git a/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.js b/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.ts
similarity index 61%
rename from packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.js
rename to packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.ts
index a618d9fa8..6a97e592c 100644
--- a/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.js
+++ b/packages/super-editor/src/extensions/image/imageHelpers/startImageUpload.ts
@@ -1,3 +1,7 @@
+import type { EditorView } from 'prosemirror-view';
+import type { Selection } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Editor } from '@core/Editor.js';
 import { findPlaceholder, removeImagePlaceholder, addImagePlaceholder } from './imageRegistrationPlugin.js';
 import { handleImageUpload as handleImageUploadDefault } from './handleImageUpload.js';
 import { processUploadedImage } from './processUploadedImage.js';
@@ -5,8 +9,8 @@ import { buildMediaPath, ensureUniqueFileName } from './fileNameUtils.js';
 import { generateDocxRandomId } from '@core/helpers/index.js';
 import { insertNewRelationship } from '@core/super-converter/docx-helpers/document-rels.js';
 
-const fileTooLarge = (file) => {
-  let fileSizeMb = Number((file.size / (1024 * 1024)).toFixed(4));
+const fileTooLarge = (file: File): boolean => {
+  const fileSizeMb = Number((file.size / (1024 * 1024)).toFixed(4));
 
   if (fileSizeMb > 5) {
     window.alert('Image size must be less than 5MB');
@@ -15,7 +19,13 @@ const fileTooLarge = (file) => {
   return false;
 };
 
-export const checkAndProcessImage = async ({ getMaxContentSize, file }) => {
+export const checkAndProcessImage = async ({
+  getMaxContentSize,
+  file,
+}: {
+  getMaxContentSize: () => { width: number; height: number };
+  file: File;
+}): Promise<{ file: File | null; size: { width: number; height: number } }> => {
   if (fileTooLarge(file)) {
     return { file: null, size: { width: 0, height: 0 } };
   }
@@ -23,7 +33,7 @@ export const checkAndProcessImage = async ({ getMaxContentSize, file }) => {
   try {
     // Will process the image file in place
     const processedImageResult = await processUploadedImage(file, getMaxContentSize);
-    const process = processedImageResult;
+    const process = processedImageResult as { file: File; width: number; height: number };
     return { file: process.file, size: { width: process.width, height: process.height } };
   } catch (err) {
     console.warn('Error processing image:', err);
@@ -31,11 +41,27 @@ export const checkAndProcessImage = async ({ getMaxContentSize, file }) => {
   }
 };
 
-export function replaceSelectionWithImagePlaceholder({ editorOptions, view, id }) {
+export interface EditorOptions {
+  isHeaderOrFooter?: boolean;
+  lastSelection?: Selection;
+  mode?: 'docx' | 'text' | 'html';
+  handleImageUpload?: (file: File) => Promise<string>;
+  ydoc?: unknown;
+}
+
+export function replaceSelectionWithImagePlaceholder({
+  editorOptions,
+  view,
+  id,
+}: {
+  editorOptions: EditorOptions;
+  view: EditorView;
+  id: object;
+}): void {
   // Replace the selection with a placeholder
   let { tr } = view.state;
-  let { selection } = tr;
-  if (editorOptions.isHeaderOrFooter) {
+  let selection: Selection = tr.selection;
+  if (editorOptions.isHeaderOrFooter && editorOptions.lastSelection) {
     selection = editorOptions.lastSelection;
   }
 
@@ -48,15 +74,15 @@ export function replaceSelectionWithImagePlaceholder({ editorOptions, view, id }
   view.dispatch(tr);
 }
 
-export const generateUniqueDocPrId = (editor) => {
-  const existingIds = new Set();
-  editor?.state?.doc?.descendants((node) => {
+export const generateUniqueDocPrId = (editor: Editor): string => {
+  const existingIds = new Set<string>();
+  editor?.state?.doc?.descendants((node: PmNode) => {
     if (node.type.name === 'image' && node.attrs.id !== undefined && node.attrs.id !== null) {
       existingIds.add(String(node.attrs.id));
     }
   });
 
-  let candidate;
+  let candidate: string;
   do {
     const hex = generateDocxRandomId();
     candidate = String(parseInt(hex, 16));
@@ -65,7 +91,23 @@ export const generateUniqueDocPrId = (editor) => {
   return candidate;
 };
 
-export async function uploadAndInsertImage({ editor, view, file, size, id }) {
+interface ImageStorage {
+  media?: Record<string, string | unknown>;
+}
+
+export async function uploadAndInsertImage({
+  editor,
+  view,
+  file,
+  size,
+  id,
+}: {
+  editor: Editor;
+  view: EditorView;
+  file: File;
+  size: { width: number; height: number };
+  id: object;
+}): Promise<void> {
   const imageUploadHandler =
     typeof editor.options.handleImageUpload === 'function'
       ? editor.options.handleImageUpload
@@ -74,7 +116,12 @@ export async function uploadAndInsertImage({ editor, view, file, size, id }) {
   const placeholderId = id;
 
   try {
-    const existingFileNames = new Set(Object.keys(editor.storage.image.media ?? {}).map((key) => key.split('/').pop()));
+    const imageStorage = editor.storage.image as ImageStorage;
+    const existingFileNames = new Set<string>(
+      Object.keys(imageStorage.media ?? {})
+        .map((key) => key.split('/').pop() || key)
+        .filter(Boolean) as string[],
+    );
 
     const uniqueFileName = ensureUniqueFileName(file.name, existingFileNames);
     const normalizedFile =
@@ -85,9 +132,9 @@ export async function uploadAndInsertImage({ editor, view, file, size, id }) {
             lastModified: file.lastModified ?? Date.now(),
           });
 
-    let url = await imageUploadHandler(normalizedFile);
+    const url = await imageUploadHandler(normalizedFile);
 
-    let placeholderPos = findPlaceholder(view.state, placeholderId);
+    const placeholderPos = findPlaceholder(view.state, placeholderId);
 
     // If the content around the placeholder has been deleted,
     // drop the image
@@ -105,14 +152,14 @@ export async function uploadAndInsertImage({ editor, view, file, size, id }) {
       if (id) rId = id;
     }
 
-    let imageNode = view.state.schema.nodes.image.create({
+    const imageNode = view.state.schema.nodes.image.create({
       src: mediaPath,
       size,
       id: docPrId,
       rId,
     });
 
-    editor.storage.image.media = Object.assign(editor.storage.image.media, { [mediaPath]: url });
+    imageStorage.media = Object.assign(imageStorage.media ?? {}, { [mediaPath]: url });
 
     // If we are in collaboration, we need to share the image with other clients
     if (editor.options.ydoc && typeof editor.commands.addImageToCollaboration === 'function') {
@@ -135,7 +182,7 @@ export async function uploadAndInsertImage({ editor, view, file, size, id }) {
   }
 }
 
-export function addImageRelationship({ editor, path }) {
+export function addImageRelationship({ editor, path }: { editor: Editor; path: string }): string | null {
   const target = path;
   const type = 'image';
   try {
diff --git a/packages/super-editor/src/extensions/image/index.js b/packages/super-editor/src/extensions/image/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/image/index.js
rename to packages/super-editor/src/extensions/image/index.ts
diff --git a/packages/super-editor/src/extensions/index.d.ts b/packages/super-editor/src/extensions/index.d.ts
index bd08f0006..d306dfebf 100644
--- a/packages/super-editor/src/extensions/index.d.ts
+++ b/packages/super-editor/src/extensions/index.d.ts
@@ -1,2 +1,4 @@
-export function getRichTextExtensions(...args: any[]): any[];
-export function getStarterExtensions(...args: any[]): any[];
+import type { Extension } from '@core/index.js';
+
+export function getRichTextExtensions(): Extension[];
+export function getStarterExtensions(): Extension[];
diff --git a/packages/super-editor/src/extensions/index.js b/packages/super-editor/src/extensions/index.ts
similarity index 91%
rename from packages/super-editor/src/extensions/index.js
rename to packages/super-editor/src/extensions/index.ts
index c8c7caf8a..362d810da 100644
--- a/packages/super-editor/src/extensions/index.js
+++ b/packages/super-editor/src/extensions/index.ts
@@ -1,3 +1,6 @@
+import type { Extension as BaseExtension } from '@core/Extension.js';
+import type { Node as NodeExtension } from '@core/Node.js';
+import type { Mark as MarkExtension } from '@core/Mark.js';
 // Extensions
 import { History } from './history/index.js';
 import { Color } from './color/index.js';
@@ -10,7 +13,7 @@ import { Gapcursor } from './gapcursor/index.js';
 import { Collaboration } from './collaboration/index.js';
 import { CollaborationCursor } from './collaboration-cursor/index.js';
 import { AiPlugin, AiMark, AiAnimationMark, AiLoaderNode } from './ai/index.js';
-import { SlashMenu } from './slash-menu';
+import { SlashMenu } from './slash-menu/index.js';
 import { StructuredContentCommands } from './structured-content/index.js';
 
 // Nodes extensions
@@ -72,7 +75,12 @@ import { CustomSelection } from './custom-selection/index.js';
 // Helpers
 import { trackChangesHelpers } from './track-changes/index.js';
 
-const getRichTextExtensions = () => {
+type AnyExtension =
+  | BaseExtension<Record<string, unknown>, Record<string, unknown>>
+  | NodeExtension<Record<string, unknown>, Record<string, unknown>>
+  | MarkExtension<Record<string, unknown>, Record<string, unknown>>;
+
+const getRichTextExtensions = (): AnyExtension[] => {
   return [
     Bold,
     Color,
@@ -112,7 +120,7 @@ const getRichTextExtensions = () => {
   ];
 };
 
-const getStarterExtensions = () => {
+const getStarterExtensions = (): AnyExtension[] => {
   return [
     Bold,
     BlockNode,
diff --git a/packages/super-editor/src/extensions/italic/index.js b/packages/super-editor/src/extensions/italic/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/italic/index.js
rename to packages/super-editor/src/extensions/italic/index.ts
diff --git a/packages/super-editor/src/extensions/italic/italic.js b/packages/super-editor/src/extensions/italic/italic.ts
similarity index 64%
rename from packages/super-editor/src/extensions/italic/italic.js
rename to packages/super-editor/src/extensions/italic/italic.ts
index 911150356..e972ae79c 100644
--- a/packages/super-editor/src/extensions/italic/italic.js
+++ b/packages/super-editor/src/extensions/italic/italic.ts
@@ -1,13 +1,15 @@
-// @ts-nocheck
-import { Mark, Attribute } from '@core/index.js';
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
 import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.js';
+import type { ParseRule, DOMOutputSpec } from 'prosemirror-model';
 
 /**
  * Configuration options for Italic
- * @typedef {Object} ItalicOptions
  * @category Options
- * @property {Object} [htmlAttributes={}] - HTML attributes for italic elements
  */
+export interface ItalicOptions extends Record<string, unknown> {
+  /** HTML attributes for italic elements */
+  htmlAttributes: Record<string, unknown>;
+}
 
 /**
  * @module Italic
@@ -16,7 +18,7 @@ import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.j
  * @shortcut Mod-i | toggleItalic | Toggle italic formatting
  * @shortcut Mod-I | toggleItalic | Toggle italic formatting (uppercase)
  */
-export const Italic = Mark.create({
+export const Italic = Mark.create<ItalicOptions>({
   name: 'italic',
 
   addOptions() {
@@ -29,11 +31,11 @@ export const Italic = Mark.create({
     return {
       /**
        * @category Attribute
-       * @param {string} [value] - Italic toggle value ('0' renders as normal)
+       * @param value - Italic toggle value ('0' renders as normal)
        */
       value: {
         default: null,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: Record<string, unknown>) => {
           if (attrs.value == null) return {};
           if (attrs.value === '0' || !attrs.value) return { style: 'font-style: normal' };
           return {};
@@ -42,7 +44,7 @@ export const Italic = Mark.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [
       { tag: 'i' },
       { tag: 'em' },
@@ -51,8 +53,15 @@ export const Italic = Mark.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    const merged = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+  renderDOM(
+    this: { options: ItalicOptions },
+    { htmlAttributes }: { htmlAttributes?: Record<string, unknown> } = {},
+  ): DOMOutputSpec {
+    const options = this.options;
+    const merged = Attribute.mergeAttributes(
+      (options?.htmlAttributes as Record<string, AttributeValue>) ?? {},
+      (htmlAttributes as Record<string, AttributeValue>) ?? {},
+    );
     const { value, ...rest } = merged || {};
     if (value === '0') {
       return ['span', rest, 0];
@@ -95,8 +104,8 @@ export const Italic = Mark.create({
 
   addShortcuts() {
     return {
-      'Mod-i': () => this.editor.commands.toggleItalic(),
-      'Mod-I': () => this.editor.commands.toggleItalic(),
+      'Mod-i': () => this.editor?.commands.toggleItalic(),
+      'Mod-I': () => this.editor?.commands.toggleItalic(),
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/line-break/index.js b/packages/super-editor/src/extensions/line-break/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/line-break/index.js
rename to packages/super-editor/src/extensions/line-break/index.ts
diff --git a/packages/super-editor/src/extensions/line-break/line-break.js b/packages/super-editor/src/extensions/line-break/line-break.ts
similarity index 58%
rename from packages/super-editor/src/extensions/line-break/line-break.js
rename to packages/super-editor/src/extensions/line-break/line-break.ts
index ceab989e6..eb296040c 100644
--- a/packages/super-editor/src/extensions/line-break/line-break.js
+++ b/packages/super-editor/src/extensions/line-break/line-break.ts
@@ -1,27 +1,29 @@
-// @ts-nocheck
-
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { ParseRule, DOMOutputSpec } from 'prosemirror-model';
 
 /**
  * Configuration options for LineBreak
- * @typedef {Object} LineBreakOptions
  * @category Options
  */
+export type LineBreakOptions = Record<string, never>;
 
 /**
  * Attributes for line break nodes
- * @typedef {Object} LineBreakAttributes
  * @category Attributes
- * @property {string} [lineBreakType] @internal Type of line break - passthrough in this node
- * @property {string} [clear] @internal Clear attribute - passthrough in this node
  */
+export interface LineBreakAttributes {
+  /** @internal Type of line break - passthrough in this node */
+  lineBreakType?: string;
+  /** @internal Clear attribute - passthrough in this node */
+  clear?: string;
+}
 
 /**
  * @module LineBreak
  * @sidebarTitle Line Break
  * @snippetPath /snippets/extensions/line-break.mdx
  */
-export const LineBreak = Node.create({
+export const LineBreak = Node.create<LineBreakOptions>({
   name: 'lineBreak',
   group: 'inline',
   inline: true,
@@ -35,7 +37,7 @@ export const LineBreak = Node.create({
     return {};
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'br' }];
   },
 
@@ -50,7 +52,6 @@ export const LineBreak = Node.create({
     };
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -62,7 +63,7 @@ export const LineBreak = Node.create({
        */
       insertLineBreak:
         () =>
-        ({ commands }) => {
+        ({ commands }: { commands: { insertContent: (content: { type: string }) => boolean } }) => {
           return commands.insertContent({ type: 'lineBreak' });
         },
     };
@@ -71,27 +72,34 @@ export const LineBreak = Node.create({
 
 /**
  * Configuration options for HardBreak
- * @typedef {Object} HardBreakOptions
  * @category Options
- * @property {Object} [htmlAttributes] - HTML attributes for the break element
  */
+export interface HardBreakOptions extends Record<string, unknown> {
+  /** HTML attributes for the break element */
+  htmlAttributes: Record<string, unknown>;
+}
 
 /**
  * Attributes for hard break nodes
- * @typedef {Object} HardBreakAttributes
  * @category Attributes
- * @property {string} [pageBreakSource] @internal Source of the page break
- * @property {string} [pageBreakType] @internal Type of page break
- * @property {string} [lineBreakType] @internal Type of line break - passthrough in this node
- * @property {string} [clear] @internal Clear attribute - passthrough in this node
  */
+export interface HardBreakAttributes {
+  /** @internal Source of the page break */
+  pageBreakSource?: string | null;
+  /** @internal Type of page break */
+  pageBreakType?: string | null;
+  /** @internal Type of line break - passthrough in this node */
+  lineBreakType?: string;
+  /** @internal Clear attribute - passthrough in this node */
+  clear?: string;
+}
 
 /**
  * @module HardBreak
  * @sidebarTitle Hard Break
  * @snippetPath /snippets/extensions/hard-break.mdx
  */
-export const HardBreak = Node.create({
+export const HardBreak = Node.create<HardBreakOptions>({
   name: 'hardBreak',
   group: 'inline',
   inline: true,
@@ -127,11 +135,11 @@ export const HardBreak = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [
       {
         tag: 'span[linebreaktype="page"]',
-        getAttrs: (dom) => {
+        getAttrs: (dom: HTMLElement | string) => {
           if (!(dom instanceof HTMLElement)) return false;
           return {
             pageBreakSource: dom.getAttribute('pagebreaksource') || null,
@@ -142,11 +150,18 @@ export const HardBreak = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM(
+    this: { options: HardBreakOptions },
+    { htmlAttributes }: { htmlAttributes?: Record<string, unknown> } = {},
+  ): DOMOutputSpec {
+    const options = this.options;
+    const merged = Attribute.mergeAttributes(
+      (options?.htmlAttributes as Record<string, AttributeValue>) ?? {},
+      (htmlAttributes as Record<string, AttributeValue>) ?? {},
+    );
+    return ['span', merged];
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -158,7 +173,11 @@ export const HardBreak = Node.create({
        */
       insertPageBreak:
         () =>
-        ({ commands }) => {
+        ({
+          commands,
+        }: {
+          commands: { insertContent: (content: { type: string; attrs: { pageBreakType: string } }) => boolean };
+        }) => {
           return commands.insertContent({
             type: 'hardBreak',
             attrs: { pageBreakType: 'page' },
diff --git a/packages/super-editor/src/extensions/link/index.js b/packages/super-editor/src/extensions/link/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/link/index.js
rename to packages/super-editor/src/extensions/link/index.ts
diff --git a/packages/super-editor/src/extensions/link/link.js b/packages/super-editor/src/extensions/link/link.ts
similarity index 59%
rename from packages/super-editor/src/extensions/link/link.js
rename to packages/super-editor/src/extensions/link/link.ts
index c98aaa7eb..60fdd4b62 100644
--- a/packages/super-editor/src/extensions/link/link.js
+++ b/packages/super-editor/src/extensions/link/link.ts
@@ -1,48 +1,31 @@
-// @ts-nocheck
-import { Mark, Attribute } from '@core/index.js';
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
 import { getMarkRange } from '@core/helpers/getMarkRange.js';
 import { insertNewRelationship } from '@core/super-converter/docx-helpers/document-rels.js';
 import { sanitizeHref, encodeTooltip, UrlValidationConstants } from '@superdoc/url-validation';
 
-/**
- * Target frame options
- * @typedef {'_top' | '_self' | '_parent' | '_blank' | string} TargetFrameOptions
- */
+/** URL protocol schemes allowed by url-validation */
+type Protocol = 'http' | 'https' | 'mailto' | 'tel' | 'sms' | 'ftp' | 'sftp' | 'irc';
+import type { ParseRule, DOMOutputSpec } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
+
+type SanitizedLink = { href: string; isExternal?: boolean };
 
 /**
  * Configuration options for Link
- * @typedef {Object} LinkOptions
  * @category Options
- * @property {string[]} [protocols=['http', 'https']] - Allowed URL protocols
- * @property {Object} [htmlAttributes] - HTML attributes for link elements
- * @property {string} [htmlAttributes.target=null] - Default link target
- * @property {string} [htmlAttributes.rel='noopener noreferrer nofollow'] - Default rel attribute
- * @property {string} [htmlAttributes.class=null] - CSS class
- * @property {string} [htmlAttributes.title=null] - Title attribute
- */
-
-/**
- * Attributes for link marks
- * @typedef {Object} LinkAttributes
- * @category Attributes
- * @property {string} [href] - URL or anchor reference
- * @property {TargetFrameOptions} [target='_blank'] - Link target window
- * @property {string} [rel='noopener noreferrer nofollow'] - Relationship attributes
- * @property {string} [text] - Display text for the link
- * @property {string} [name] - Anchor name for internal references
- * @property {boolean} [history=true] - Whether to add to viewed hyperlinks list
- * @property {string} [anchor] - Bookmark target name (ignored if rId and href specified)
- * @property {string} [docLocation] - Location in target hyperlink
- * @property {string} [tooltip] - Tooltip for the link
- * @property {string} [rId] @internal Word relationship ID for internal links
- */
-
-/**
- * Link options for setLink command
- * @typedef {Object} SetLinkOptions
- * @property {string} [href] - URL for the link
- * @property {string} [text] - Display text (uses selection if omitted)
  */
+export interface LinkOptions extends Record<string, unknown> {
+  /** Allowed URL protocols */
+  protocols: string[];
+  /** HTML attributes for link elements */
+  htmlAttributes: {
+    target: string | null;
+    rel: string;
+    class: string | null;
+    title: string | null;
+    rId?: string | null;
+  };
+}
 
 /**
  * @module Link
@@ -50,7 +33,7 @@ import { sanitizeHref, encodeTooltip, UrlValidationConstants } from '@superdoc/u
  * @snippetPath /snippets/extensions/link.mdx
  * @note Non-inclusive mark that doesn't expand when typing at edges
  */
-export const Link = Mark.create({
+export const Link = Mark.create<LinkOptions>({
   name: 'link',
   priority: 1000,
   keepOnSplit: false,
@@ -58,37 +41,41 @@ export const Link = Mark.create({
 
   addOptions() {
     return {
-      protocols: ['http', 'https'],
+      protocols: ['http', 'https'] as string[],
       htmlAttributes: {
-        target: null,
-        rel: 'noopener noreferrer nofollow',
-        class: null,
-        title: null,
+        target: null as string | null,
+        rel: 'noopener noreferrer nofollow' as string,
+        class: null as string | null,
+        title: null as string | null,
+        rId: null as string | null,
       },
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'a' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    const sanitizedHref = sanitizeLinkHref(htmlAttributes.href, this.options.protocols);
+  renderDOM(this: { options: LinkOptions }, props?: { htmlAttributes?: Record<string, unknown> }): DOMOutputSpec {
+    const htmlAttributes = props?.htmlAttributes ?? {};
+    const options = this.options;
+    const sanitizedHref = sanitizeLinkHref(htmlAttributes.href as string | null | undefined, options?.protocols ?? []);
     const attrs = { ...htmlAttributes };
     attrs.href = sanitizedHref ? sanitizedHref.href : '';
-    return ['a', Attribute.mergeAttributes(this.options.htmlAttributes, attrs), 0];
+    return ['a', Attribute.mergeAttributes(options?.htmlAttributes ?? {}, attrs as Record<string, AttributeValue>), 0];
   },
 
   addAttributes() {
     return {
       /**
        * @category Attribute
-       * @param {string} [href] - URL or anchor reference
+       * @param href - URL or anchor reference
        */
       href: {
         default: null,
-        renderDOM: ({ href, name }) => {
-          const sanitized = sanitizeLinkHref(href, this.options.protocols);
+        renderDOM(this: { options: LinkOptions }, { href, name }: { href?: string; name?: string }) {
+          const options = this.options;
+          const sanitized = sanitizeLinkHref(href, options?.protocols ?? []);
           if (sanitized) return { href: sanitized.href };
           if (name) return { href: `#${name}` };
           return {};
@@ -96,64 +83,67 @@ export const Link = Mark.create({
       },
       /**
        * @category Attribute
-       * @param {TargetFrameOptions} [target='_blank'] - Link target window
+       * @param target - Link target window
        */
       target: {
-        default: this.options.htmlAttributes.target,
-        renderDOM: ({ target, href }) => {
+        default: (this.options as LinkOptions | undefined)?.htmlAttributes?.target ?? null,
+        renderDOM(this: { options: LinkOptions }, { target, href }: { target?: string; href?: string }) {
           if (target) return { target };
-          const sanitized = sanitizeLinkHref(href, this.options.protocols);
+          const options = this.options;
+          const sanitized = sanitizeLinkHref(href, options?.protocols ?? []);
           if (sanitized && sanitized.isExternal) return { target: '_blank' };
           return {};
         },
       },
       /**
        * @category Attribute
-       * @param {string} [rel='noopener noreferrer nofollow'] - Relationship attributes
+       * @param rel - Relationship attributes
        */
-      rel: { default: this.options.htmlAttributes.rel },
+      rel: {
+        default: (this.options as LinkOptions | undefined)?.htmlAttributes?.rel ?? 'noopener noreferrer nofollow',
+      },
       /**
        * @private
        * @category Attribute
-       * @param {string} [rId] - Word relationship ID for internal links
+       * @param rId - Word relationship ID for internal links
        */
-      rId: { default: this.options.htmlAttributes.rId || null },
+      rId: { default: (this.options as LinkOptions | undefined)?.htmlAttributes?.rId || null },
       /**
        * @category Attribute
-       * @param {string} [text] - Display text for the link
+       * @param text - Display text for the link
        */
       text: { default: null },
       /**
        * @category Attribute
-       * @param {string} [name] - Anchor name for internal references
+       * @param name - Anchor name for internal references
        */
       name: { default: null },
       /**
        * @category Attribute
-       * @param {boolean} [history] - Specifies whether the target of the hyperlink  shall be added to a list of viewed hyperlinks when it is invoked.
+       * @param history - Specifies whether the target of the hyperlink  shall be added to a list of viewed hyperlinks when it is invoked.
        */
       history: { default: true, rendered: false },
       /**
        * @category Attribute
-       * @param {string|null} [anchor] - Specifies the name of a bookmark that is the target of this link. If the rId and href attributes are specified, then this attribute is ignored.
+       * @param anchor - Specifies the name of a bookmark that is the target of this link. If the rId and href attributes are specified, then this attribute is ignored.
        */
       anchor: { rendered: false },
       /**
        * @category Attribute
-       * @param {string|null} [docLocation] - Specifies a location in the target of the hyperlink.
+       * @param docLocation - Specifies a location in the target of the hyperlink.
        */
       docLocation: { rendered: false },
       /**
        * @category Attribute
-       * @param {string|null} [tooltip] - A tooltip for the link
+       * @param tooltip - A tooltip for the link
        */
       tooltip: {
         default: null,
-        renderDOM: ({ tooltip }) => {
+        renderDOM: ({ tooltip }: { tooltip?: string }) => {
           const result = encodeTooltip(tooltip);
           if (result) {
             // Use raw text - browser will escape when setting attribute
-            const attrs = { title: result.text };
+            const attrs: Record<string, string> = { title: result.text };
             if (result.wasTruncated) {
               attrs['data-link-tooltip-truncated'] = 'true';
             }
@@ -170,7 +160,7 @@ export const Link = Mark.create({
       /**
        * Create or update a link
        * @category Command
-       * @param {SetLinkOptions} [options] - Link configuration
+       * @param options - Link configuration
        * @example
        * editor.commands.setLink({ href: 'https://example.com' })
        * editor.commands.setLink({
@@ -180,13 +170,22 @@ export const Link = Mark.create({
        * @note Automatically adds underline formatting and trims whitespace from link boundaries
        */
       setLink:
-        ({ href, text } = {}) =>
-        ({ state, dispatch, editor }) => {
+        ({ href, text }: { href?: string; text?: string } = {}) =>
+        ({
+          state,
+          dispatch,
+          editor,
+        }: {
+          state: EditorState;
+          dispatch: (tr: Transaction) => void;
+          editor: import('@core/Editor.js').Editor;
+        }) => {
           const { selection } = state;
           const linkMarkType = editor.schema.marks.link;
           const underlineMarkType = editor.schema.marks.underline;
 
-          const sanitizedHref = href ? sanitizeLinkHref(href, this.options.protocols) : null;
+          const options = this.options as LinkOptions | undefined;
+          const sanitizedHref = href ? sanitizeLinkHref(href, options?.protocols ?? []) : null;
           if (href && !sanitizedHref) {
             return false;
           }
@@ -206,9 +205,11 @@ export const Link = Mark.create({
             const fromLinkRange = getMarkRange(selection.$from, linkMarkType);
             const toLinkRange = getMarkRange(selection.$to, linkMarkType);
             if (fromLinkRange || toLinkRange) {
-              const linkRange = fromLinkRange || toLinkRange;
-              from = linkRange.from;
-              to = linkRange.to;
+              const linkRange = fromLinkRange ?? toLinkRange;
+              if (linkRange) {
+                from = linkRange.from;
+                to = linkRange.to;
+              }
             }
           }
 
@@ -232,11 +233,11 @@ export const Link = Mark.create({
 
           let rId = null;
           if (editor.options.mode === 'docx') {
-            const id = addLinkRelationship({ editor, href });
+            const id = addLinkRelationship({ editor, href: href ?? '' });
             if (id) rId = id;
           }
 
-          const linkAttrs = { text: finalText, rId };
+          const linkAttrs: { text: string; rId: string | null; href?: string } = { text: finalText, rId };
           if (sanitizedHref?.href) {
             linkAttrs.href = sanitizedHref.href;
           }
@@ -257,7 +258,7 @@ export const Link = Mark.create({
        */
       unsetLink:
         () =>
-        ({ chain }) => {
+        ({ chain }: { chain: () => import('@core/types/ChainedCommands.js').ChainableCommandObject }) => {
           return chain()
             .unsetMark('underline', { extendEmptyMarkRange: true })
             .unsetColor()
@@ -268,14 +269,14 @@ export const Link = Mark.create({
       /**
        * Toggle link on selection
        * @category Command
-       * @param {SetLinkOptions} [options] - Link configuration
+       * @param options - Link configuration
        * @example
        * editor.commands.toggleLink({ href: 'https://example.com' })
        * editor.commands.toggleLink()
        */
       toggleLink:
-        ({ href, text } = {}) =>
-        ({ commands }) => {
+        ({ href, text }: { href?: string; text?: string } = {}) =>
+        ({ commands }: { commands: Record<string, (...args: unknown[]) => boolean> }) => {
           if (!href) return commands.unsetLink();
           return commands.setLink({ href, text });
         },
@@ -290,18 +291,23 @@ export const Link = Mark.create({
  * array of lowercase protocol strings, filtering out invalid entries.
  *
  * @private
- * @param {Array<string | {scheme: string}>} [protocols=[]] - Protocol configurations
- * @returns {string[]} Array of normalized lowercase protocol strings
+ * @param protocols - Protocol configurations
+ * @returns Array of normalized lowercase protocol strings
  * @example
  * normalizeProtocols(['HTTP', { scheme: 'FTP' }]) // Returns: ['http', 'ftp']
  */
-function normalizeProtocols(protocols = []) {
-  const result = [];
+function normalizeProtocols(protocols: Array<string | { scheme: string }> = []): string[] {
+  const result: string[] = [];
   protocols.forEach((protocol) => {
     if (!protocol) return;
     if (typeof protocol === 'string' && protocol.trim()) {
       result.push(protocol.trim().toLowerCase());
-    } else if (typeof protocol === 'object' && typeof protocol.scheme === 'string' && protocol.scheme.trim()) {
+    } else if (
+      typeof protocol === 'object' &&
+      'scheme' in protocol &&
+      typeof protocol.scheme === 'string' &&
+      protocol.scheme.trim()
+    ) {
       result.push(protocol.scheme.trim().toLowerCase());
     }
   });
@@ -315,14 +321,17 @@ function normalizeProtocols(protocols = []) {
  * combining default allowed protocols with custom protocols from configuration.
  *
  * @private
- * @param {string | null | undefined} href - URL string to sanitize
- * @param {Array<string | {scheme: string}>} [protocols] - Additional protocols to allow
- * @returns {import('@superdoc/url-validation').SanitizedLink | null} Sanitized link object or null
+ * @param href - URL string to sanitize
+ * @param protocols - Additional protocols to allow
+ * @returns Sanitized link object or null
  * @example
  * sanitizeLinkHref('https://example.com', ['ftp'])
  * // Returns: { href: 'https://example.com', protocol: 'https', isExternal: true }
  */
-function sanitizeLinkHref(href, protocols) {
+function sanitizeLinkHref(
+  href: string | null | undefined,
+  protocols: Array<string | { scheme: string }>,
+): SanitizedLink | null {
   if (!href) return null;
 
   // Validate protocols is array-like before processing
@@ -330,17 +339,17 @@ function sanitizeLinkHref(href, protocols) {
 
   const allowedProtocols = Array.from(
     new Set([...UrlValidationConstants.DEFAULT_ALLOWED_PROTOCOLS, ...normalizedProtocols]),
-  );
+  ) as Protocol[];
   return sanitizeHref(href, { allowedProtocols });
 }
 
 /**
  * Trim node boundaries from range
  * @private
- * @param {Object} doc - Document node
- * @param {number} from - Start position
- * @param {number} to - End position
- * @returns {{from: number, to: number}} Trimmed range
+ * @param doc - Document node
+ * @param from - Start position
+ * @param to - End position
+ * @returns Trimmed range
  * @note A "non-user" position is one that produces **no text** when we ask
  * `doc.textBetween(pos, pos + 1, '')`.
  * That happens at node boundaries (between the doc node and its first child,
@@ -349,7 +358,7 @@ function sanitizeLinkHref(href, protocols) {
  * A regular space typed by the user **does** produce text (" "), so it will
  * NOT be trimmed.
  */
-const trimRange = (doc, from, to) => {
+const trimRange = (doc: import('prosemirror-model').Node, from: number, to: number): { from: number; to: number } => {
   // Skip positions that produce no text output (node boundaries).
   while (from < to && doc.textBetween(from, from + 1, '') === '') {
     from += 1;
@@ -364,7 +373,13 @@ const trimRange = (doc, from, to) => {
   return { from, to };
 };
 
-function addLinkRelationship({ editor, href }) {
+function addLinkRelationship({
+  editor,
+  href,
+}: {
+  editor: import('@core/Editor.js').Editor;
+  href: string;
+}): string | null {
   const target = href;
   const type = 'hyperlink';
   try {
diff --git a/packages/super-editor/src/extensions/linked-styles/helpers.test.js b/packages/super-editor/src/extensions/linked-styles/helpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/linked-styles/helpers.test.js
rename to packages/super-editor/src/extensions/linked-styles/helpers.test.ts
diff --git a/packages/super-editor/src/extensions/linked-styles/helpers.js b/packages/super-editor/src/extensions/linked-styles/helpers.ts
similarity index 64%
rename from packages/super-editor/src/extensions/linked-styles/helpers.js
rename to packages/super-editor/src/extensions/linked-styles/helpers.ts
index 48b85f7a3..a27517d9d 100644
--- a/packages/super-editor/src/extensions/linked-styles/helpers.js
+++ b/packages/super-editor/src/extensions/linked-styles/helpers.ts
@@ -1,10 +1,51 @@
-// @ts-check
 import { CustomSelectionPluginKey } from '../custom-selection/custom-selection.js';
 import { getLineHeightValueString } from '@core/super-converter/helpers.js';
 import { findParentNode } from '@helpers/index.js';
 import { kebabCase } from '@superdoc/common';
 import { getUnderlineCssString } from './index.js';
 import { twipsToLines, twipsToPixels, halfPointToPixels } from '@converter/helpers.js';
+import type { Node as PmNode, Mark } from 'prosemirror-model';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import { Selection } from 'prosemirror-state';
+import type { Step } from 'prosemirror-transform';
+import type { Editor } from '@core/Editor.js';
+
+export interface LinkedStyleDefinition {
+  id?: string;
+  type?: string;
+  definition?: {
+    attrs?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+  };
+}
+
+interface SpacingAttrs {
+  before?: number;
+  after?: number;
+  line?: number;
+  lineRule?: string;
+  beforeAutospacing?: boolean;
+  afterAutospacing?: boolean;
+  lineSpaceBefore?: number;
+  lineSpaceAfter?: number;
+  beforeAutoSpacing?: boolean;
+  afterAutoSpacing?: boolean;
+}
+
+interface MarkAttr {
+  type: string;
+  attrs: Record<string, unknown>;
+}
+
+interface TransactionLike {
+  selection: Selection;
+  doc: PmNode;
+  setSelection: (selection: Selection) => TransactionLike;
+  setNodeMarkup: (pos: number, type: unknown, attrs: Record<string, unknown>) => TransactionLike;
+  removeMark: (from: number, to: number, mark: Mark) => TransactionLike | void;
+  nodesBetween: (from: number, to: number, callback: (node: PmNode, pos: number) => boolean | void) => void;
+  mapping?: unknown;
+}
 
 /**
  * Get the (parsed) linked style from the styles.xml
@@ -15,9 +56,12 @@ import { twipsToLines, twipsToPixels, halfPointToPixels } from '@converter/helpe
  * @example
  * const { linkedStyle, basedOnStyle } = getLinkedStyle('Heading1', styles);
  */
-export const getLinkedStyle = (styleId, styles = []) => {
+export const getLinkedStyle = (
+  styleId: string,
+  styles: LinkedStyleDefinition[] = [],
+): { linkedStyle: LinkedStyleDefinition | undefined; basedOnStyle: LinkedStyleDefinition | undefined } => {
   const linkedStyle = styles.find((style) => style.id === styleId);
-  const basedOn = linkedStyle?.definition?.attrs?.basedOn;
+  const basedOn = linkedStyle?.definition?.attrs?.basedOn as string | undefined;
   const basedOnStyle = styles.find((style) => style.id === basedOn);
   return { linkedStyle, basedOnStyle };
 };
@@ -29,17 +73,22 @@ export const getLinkedStyle = (styleId, styles = []) => {
  * @returns {Object} CSS style properties
  * @private
  */
-export const getSpacingStyle = (spacing) => {
+export const getSpacingStyle = (spacing: SpacingAttrs): Record<string, string> => {
   const { lineSpaceBefore, lineSpaceAfter, line, lineRule, beforeAutoSpacing, afterAutoSpacing } = spacing;
   const lineHeightResult = getLineHeightValueString(line, '', lineRule, true);
-  const lineHeightStyles = typeof lineHeightResult === 'object' && lineHeightResult !== null ? lineHeightResult : {};
+  const lineHeightStyles =
+    typeof lineHeightResult === 'object' && lineHeightResult !== null
+      ? (lineHeightResult as Record<string, string>)
+      : {};
 
-  const result = {};
+  const result: Record<string, string> = {};
   if (!beforeAutoSpacing) {
-    result['margin-top'] = lineSpaceBefore + 'px';
+    const beforeVal = typeof lineSpaceBefore === 'number' ? lineSpaceBefore : 0;
+    result['margin-top'] = `${beforeVal}px`;
   }
   if (!afterAutoSpacing) {
-    result['margin-bottom'] = lineSpaceAfter + 'px';
+    const afterVal = typeof lineSpaceAfter === 'number' ? lineSpaceAfter : 0;
+    result['margin-bottom'] = `${afterVal}px`;
   }
 
   return {
@@ -56,14 +105,17 @@ export const getSpacingStyle = (spacing) => {
  * @returns {string} The CSS style string
  * @private
  */
-export const getSpacingStyleString = (spacing, marks, isListItem) => {
-  let { before, after, line, lineRule, beforeAutospacing, afterAutospacing } = spacing;
-  line = twipsToLines(line);
+export const getSpacingStyleString = (spacing: SpacingAttrs, marks: MarkAttr[], isListItem: boolean): string => {
+  const { before: beforeRaw, after: afterRaw, line: lineRaw, lineRule, beforeAutospacing, afterAutospacing } = spacing;
+  let before = beforeRaw;
+  let after = afterRaw;
+  let line: number | string | null = lineRaw ?? null;
+  line = twipsToLines(line as number | null);
   // Prevent values less than 1 to avoid squashed text
-  if (line != null && line < 1) {
+  if (typeof line === 'number' && line < 1) {
     line = 1;
   }
-  if (lineRule === 'exact' && line) {
+  if (lineRule === 'exact' && line != null) {
     line = String(line);
   }
 
@@ -73,7 +125,8 @@ export const getSpacingStyleString = (spacing, marks, isListItem) => {
   before = twipsToPixels(before);
   if (beforeAutospacing) {
     if (fontSize) {
-      before += halfPointToPixels(parseInt(fontSize) * 0.5);
+      const sizeNum = typeof fontSize === 'number' ? fontSize : Number(fontSize);
+      before += halfPointToPixels(sizeNum * 0.5);
     }
     if (isListItem) {
       before = 0; // Lists do not apply before autospacing
@@ -83,7 +136,8 @@ export const getSpacingStyleString = (spacing, marks, isListItem) => {
   after = twipsToPixels(after);
   if (afterAutospacing) {
     if (fontSize) {
-      after += halfPointToPixels(parseInt(fontSize) * 0.5);
+      const sizeNum = typeof fontSize === 'number' ? fontSize : Number(fontSize);
+      after += halfPointToPixels(sizeNum * 0.5);
     }
     if (isListItem) {
       after = 0; // Lists do not apply after autospacing
@@ -104,7 +158,7 @@ export const getSpacingStyleString = (spacing, marks, isListItem) => {
  * @returns {string} CSS style string
  * @private
  */
-export const getMarksStyle = (attrs) => {
+export const getMarksStyle = (attrs: MarkAttr[]): string => {
   let styles = '';
   for (const attr of attrs) {
     switch (attr.type) {
@@ -139,14 +193,14 @@ export const getMarksStyle = (attrs) => {
  * const quickStyles = getQuickFormatList(editor);
  * // Returns paragraph styles sorted by name
  */
-export const getQuickFormatList = (editor) => {
+export const getQuickFormatList = (editor: Editor): LinkedStyleDefinition[] => {
   if (!editor?.converter?.linkedStyles) return [];
 
   return editor.converter.linkedStyles
-    .filter((style) => style.type === 'paragraph' && style.definition?.attrs)
-    .sort((a, b) => {
-      const nameA = a.definition.attrs?.name ?? '';
-      const nameB = b.definition.attrs?.name ?? '';
+    .filter((style: LinkedStyleDefinition) => style.type === 'paragraph' && style.definition?.attrs)
+    .sort((a: LinkedStyleDefinition, b: LinkedStyleDefinition) => {
+      const nameA = (a.definition?.attrs as { name?: string } | undefined)?.name ?? '';
+      const nameB = (b.definition?.attrs as { name?: string } | undefined)?.name ?? '';
       return nameA.localeCompare(nameB);
     });
 };
@@ -163,9 +217,15 @@ export const getQuickFormatList = (editor) => {
  * @note Node marks take precedence over linked style properties per Word behavior
  * @private
  */
-export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, parent, _includeSpacing = true) => {
+export const generateLinkedStyleString = (
+  linkedStyle: LinkedStyleDefinition | null,
+  basedOnStyle: LinkedStyleDefinition | null,
+  node: PmNode | null,
+  parent: PmNode | null,
+  _includeSpacing = true,
+): string => {
   if (!linkedStyle?.definition?.styles) return '';
-  const markValue = {};
+  const markValue: Record<string, string> = {};
 
   const linkedDefinitionStyles = { ...linkedStyle.definition.styles };
   const basedOnDefinitionStyles = { ...basedOnStyle?.definition?.styles };
@@ -190,7 +250,7 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
 
   Object.entries(resultStyles).forEach(([k, value]) => {
     const key = kebabCase(k);
-    const flattenedMarks = [];
+    const flattenedMarks: Array<{ key: string; value: unknown }> = [];
 
     // Flatten node marks (including text styles) for comparison
     node?.marks?.forEach((n) => {
@@ -218,21 +278,24 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
     // If no mark already in the node, we override the style
     if (!mark) {
       if (key === 'bold' && node) {
-        const boldValue = typeof value === 'object' && value !== null ? value.value : value;
+        const boldValue =
+          typeof value === 'object' && value !== null && 'value' in value ? (value as { value: unknown }).value : value;
         const hasInlineBoldOff = node.marks?.some((m) => m.type?.name === 'bold' && m.attrs?.value === '0');
         const hasInlineBoldOn = node.marks?.some((m) => m.type?.name === 'bold' && m.attrs?.value !== '0');
         if (!hasInlineBoldOff && !hasInlineBoldOn && boldValue !== '0' && boldValue !== false) {
           markValue['font-weight'] = 'bold';
         }
       } else if (key === 'italic' && node) {
-        const italicValue = typeof value === 'object' && value !== null ? value.value : value;
+        const italicValue =
+          typeof value === 'object' && value !== null && 'value' in value ? (value as { value: unknown }).value : value;
         const hasInlineItalicOff = node.marks?.some((m) => m.type?.name === 'italic' && m.attrs?.value === '0');
         const hasInlineItalicOn = node.marks?.some((m) => m.type?.name === 'italic' && m.attrs?.value !== '0');
         if (!hasInlineItalicOff && !hasInlineItalicOn && italicValue !== '0' && italicValue !== false) {
           markValue['font-style'] = 'italic';
         }
       } else if (key === 'strike' && node) {
-        const strikeValue = typeof value === 'object' && value !== null ? value.value : value;
+        const strikeValue =
+          typeof value === 'object' && value !== null && 'value' in value ? (value as { value: unknown }).value : value;
         const hasInlineStrikeOff = node.marks?.some((m) => m.type?.name === 'strike' && m.attrs?.value === '0');
         const hasInlineStrikeOn = node.marks?.some(
           (m) => m.type?.name === 'strike' && (m.attrs?.value === undefined || m.attrs?.value !== '0'),
@@ -241,18 +304,27 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
           markValue['text-decoration'] = 'line-through';
         }
       } else if (key === 'text-transform' && node) {
-        markValue[key] = value;
+        markValue[key] = value as string;
       } else if (key === 'font-size' && node) {
-        markValue[key] = value;
+        markValue[key] = value as string;
       } else if (key === 'font-family' && node) {
-        markValue[key] = value;
+        markValue[key] = value as string;
       } else if (key === 'color' && node) {
-        markValue[key] = value;
+        markValue[key] = value as string;
       } else if (key === 'highlight' && node) {
         const hasInlineHighlight = node.marks?.some((m) => m.type?.name === 'highlight');
         if (!hasInlineHighlight) {
-          const color = typeof value === 'string' ? value : value?.color;
-          if (color) markValue['background-color'] = color;
+          const color =
+            typeof value === 'string'
+              ? value
+              : typeof value === 'object' && value !== null && 'color' in value
+                ? (value as { color?: unknown }).color
+                : undefined;
+          if (typeof color === 'string' && color) {
+            markValue['background-color'] = color;
+          } else if (color != null) {
+            markValue['background-color'] = String(color);
+          }
         }
       } else if (key === 'underline' && node) {
         // Handle multiple possible formats for underline value:
@@ -260,9 +332,12 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
         // - { underlineType: 'single' } from encodeMarksFromRPr
         // - { value: 'single' } legacy format
         // - 'single' as a direct string
+        const valueObj = value as { underline?: unknown; underlineType?: unknown; value?: unknown } | string | null;
         const styleValRaw =
-          value?.underline ?? value?.underlineType ?? value?.value ?? (typeof value === 'string' ? value : '');
-        const styleVal = styleValRaw.toString().toLowerCase();
+          (typeof valueObj === 'object' && valueObj !== null
+            ? (valueObj.underline ?? valueObj.underlineType ?? valueObj.value)
+            : valueObj) ?? '';
+        const styleVal = String(styleValRaw).toLowerCase();
         const hasInlineUnderlineOff = node.marks?.some(
           (m) => m.type?.name === 'underline' && m.attrs?.underlineType === 'none',
         );
@@ -271,10 +346,17 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
         );
         if (!hasInlineUnderlineOff && !hasInlineUnderlineOn) {
           if (styleVal && styleVal !== 'none' && styleVal !== '0') {
-            const colorVal = value && typeof value === 'object' ? value.color || value.underlineColor || null : null;
-            const css = getUnderlineCssString({ type: styleVal, color: colorVal });
+            const colorVal =
+              value && typeof value === 'object' && value !== null
+                ? 'color' in value
+                  ? (value as { color?: unknown }).color
+                  : 'underlineColor' in value
+                    ? (value as { underlineColor?: unknown }).underlineColor
+                    : null
+                : null;
+            const css = getUnderlineCssString({ type: styleVal, color: colorVal as string | null });
             // apply css string into markValue map
-            css.split(';').forEach((decl) => {
+            css.split(';').forEach((decl: string) => {
               const d = decl.trim();
               if (!d) return;
               const idx = d.indexOf(':');
@@ -309,7 +391,11 @@ export const generateLinkedStyleString = (linkedStyle, basedOnStyle, node, paren
  * @note Clears existing formatting marks when applying styles
  * @note Handles both cursor position and selection ranges
  */
-export const applyLinkedStyleToTransaction = (tr, editor, style) => {
+export const applyLinkedStyleToTransaction = (
+  tr: Transaction | TransactionLike,
+  editor: Editor,
+  style: LinkedStyleDefinition | { id: null },
+): boolean => {
   if (!style) return false;
 
   let selection = tr.selection;
@@ -322,7 +408,7 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
     tr.setSelection(selection);
   }
   // Fallback to lastSelection if no preserved selection
-  else if (selection.empty && editor.options.lastSelection) {
+  else if (selection.empty && editor.options.lastSelection instanceof Selection) {
     selection = editor.options.lastSelection;
     tr.setSelection(selection);
   }
@@ -330,7 +416,7 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
   const { from, to } = selection;
 
   // Function to get clean paragraph attributes (strips existing styles)
-  const getUpdatedParagraphAttrs = (node) => {
+  const getUpdatedParagraphAttrs = (node: PmNode): Record<string, unknown> => {
     return {
       ...node.attrs,
       paragraphProperties: {
@@ -341,8 +427,8 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
   };
 
   // Function to clear formatting marks from text content
-  const clearFormattingMarks = (startPos, endPos) => {
-    tr.doc.nodesBetween(startPos, endPos, (node, pos) => {
+  const clearFormattingMarks = (startPos: number, endPos: number): void => {
+    tr.doc.nodesBetween(startPos, endPos, (node: PmNode, pos: number) => {
       if (node.isText && node.marks.length > 0) {
         const marksToRemove = [
           'textStyle',
@@ -386,9 +472,9 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
   }
 
   // Handle selection spanning multiple nodes
-  const paragraphPositions = [];
+  const paragraphPositions: Array<{ node: PmNode; pos: number }> = [];
 
-  tr.doc.nodesBetween(from, to, (node, pos) => {
+  tr.doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
     if (node.type.name === 'paragraph') {
       paragraphPositions.push({ node, pos });
     }
@@ -396,7 +482,7 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
   });
 
   // Apply style to all paragraphs in selection (with clean attributes and cleared marks)
-  paragraphPositions.forEach(({ node, pos }) => {
+  paragraphPositions.forEach(({ node, pos }: { node: PmNode; pos: number }) => {
     // Clear formatting marks within this paragraph
     clearFormattingMarks(pos + 1, pos + node.nodeSize - 1);
 
@@ -408,13 +494,25 @@ export const applyLinkedStyleToTransaction = (tr, editor, style) => {
 };
 
 // Detect typing inside any styled paragraph so decorations can be rebuilt
-export const stepInsertsTextIntoStyledParagraph = (tr, oldEditorState, step, stepIndex) => {
-  if (!step.slice || step.slice.size === 0 || typeof step.from !== 'number') {
+export const stepInsertsTextIntoStyledParagraph = (
+  tr: Transaction,
+  oldEditorState: EditorState,
+  step: Step,
+  stepIndex: number,
+): boolean => {
+  const slice = (
+    step as unknown as {
+      slice?: { size: number; content: { descendants: (callback: (node: PmNode) => boolean | void) => void } };
+      from?: number;
+    }
+  ).slice;
+  const from = (step as unknown as { from?: number }).from;
+  if (!slice || slice.size === 0 || typeof from !== 'number') {
     return false;
   }
 
   let insertsText = false;
-  step.slice.content.descendants((node) => {
+  slice.content.descendants((node: PmNode) => {
     if (node.type?.name === 'text' && node.text?.length) {
       insertsText = true;
       return false;
@@ -424,9 +522,9 @@ export const stepInsertsTextIntoStyledParagraph = (tr, oldEditorState, step, ste
 
   if (!insertsText) return false;
 
-  const docBeforeStep = tr.docs?.[stepIndex] || oldEditorState.doc;
+  const docBeforeStep = (tr as unknown as { docs?: PmNode[] }).docs?.[stepIndex] || oldEditorState.doc;
   if (!docBeforeStep) return false;
-  const resolvedPos = Math.min(step.from, docBeforeStep.content.size);
+  const resolvedPos = Math.min(from, docBeforeStep.content.size);
   const $pos = docBeforeStep.resolve(resolvedPos);
   for (let depth = $pos.depth; depth >= 0; depth--) {
     const node = $pos.node(depth);
diff --git a/packages/super-editor/src/extensions/linked-styles/index.js b/packages/super-editor/src/extensions/linked-styles/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/linked-styles/index.js
rename to packages/super-editor/src/extensions/linked-styles/index.ts
diff --git a/packages/super-editor/src/extensions/linked-styles/linked-styles.test.js b/packages/super-editor/src/extensions/linked-styles/linked-styles.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/linked-styles/linked-styles.test.js
rename to packages/super-editor/src/extensions/linked-styles/linked-styles.test.ts
diff --git a/packages/super-editor/src/extensions/linked-styles/linked-styles.js b/packages/super-editor/src/extensions/linked-styles/linked-styles.ts
similarity index 56%
rename from packages/super-editor/src/extensions/linked-styles/linked-styles.js
rename to packages/super-editor/src/extensions/linked-styles/linked-styles.ts
index 837a93c42..76e12ec7d 100644
--- a/packages/super-editor/src/extensions/linked-styles/linked-styles.js
+++ b/packages/super-editor/src/extensions/linked-styles/linked-styles.ts
@@ -1,9 +1,11 @@
-// @ts-nocheck
 import { Extension } from '@core/Extension.js';
-import { applyLinkedStyleToTransaction, generateLinkedStyleString } from './helpers.js';
+import { applyLinkedStyleToTransaction, generateLinkedStyleString, type LinkedStyleDefinition } from './helpers.js';
 import { createLinkedStylesPlugin, LinkedStylesPluginKey } from './plugin.js';
 import { findParentNodeClosestToPos } from '@core/helpers';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Editor } from '@core/Editor.js';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
 
 /**
  * Style definition from Word document
@@ -24,6 +26,8 @@ import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPr
  * @sidebarTitle Linked Styles
  * @snippetPath /snippets/extensions/linked-styles.mdx
  */
+type LocalLinkedStyle = LinkedStyleDefinition & { id?: string | null };
+
 export const LinkedStyles = Extension.create({
   name: 'linkedStyles',
 
@@ -34,6 +38,7 @@ export const LinkedStyles = Extension.create({
   },
 
   addPmPlugins() {
+    if (!this.editor) return [];
     return [createLinkedStylesPlugin(this.editor)];
   },
 
@@ -49,10 +54,12 @@ export const LinkedStyles = Extension.create({
        * @note Clears existing formatting when applying a style
        * @note Works with custom selection preservation
        */
-      setLinkedStyle: (style) => (params) => {
-        const { tr } = params;
-        return applyLinkedStyleToTransaction(tr, this.editor, style);
-      },
+      setLinkedStyle:
+        (style: LinkedStyleDefinition) =>
+        ({ tr }: { tr: Transaction }) => {
+          if (!this.editor) return false;
+          return applyLinkedStyleToTransaction(tr, this.editor, style);
+        },
 
       /**
        * Toggle a linked style on the current selection
@@ -64,29 +71,32 @@ export const LinkedStyles = Extension.create({
        * @note If selection is empty, returns false
        * @note Removes style if already applied, applies it if not
        */
-      toggleLinkedStyle: (style) => (params) => {
-        const { tr } = params;
-        if (tr.selection.empty) {
-          return false;
-        }
-        let node = tr.doc.nodeAt(tr.selection.$from.pos);
-
-        if (node && node.type.name !== 'paragraph') {
-          node = findParentNodeClosestToPos(tr.selection.$from, (n) => {
-            return n.type.name === 'paragraph';
-          })?.node;
-        }
-        if (!node) {
-          return false;
-        }
-        const paragraphProps = getResolvedParagraphProperties(node);
-        const currentStyleId = paragraphProps.styleId;
-
-        if (currentStyleId === style.id) {
-          return applyLinkedStyleToTransaction(tr, this.editor, { id: null });
-        }
-        return applyLinkedStyleToTransaction(tr, this.editor, style);
-      },
+      toggleLinkedStyle:
+        (style: LocalLinkedStyle) =>
+        ({ tr }: { tr: Transaction }): boolean => {
+          if (!this.editor) return false;
+          if (tr.selection.empty) {
+            return false;
+          }
+          const $from = tr.selection.$from;
+          let node: PmNode | null | undefined = tr.doc.nodeAt($from.pos);
+
+          if (node && node.type.name !== 'paragraph') {
+            node = findParentNodeClosestToPos($from, (n) => {
+              return n.type.name === 'paragraph';
+            })?.node;
+          }
+          if (!node) {
+            return false;
+          }
+          const paragraphProps = getResolvedParagraphProperties(node) ?? {};
+          const currentStyleId = paragraphProps.styleId;
+
+          if (currentStyleId === style.id) {
+            return applyLinkedStyleToTransaction(tr, this.editor, { id: null });
+          }
+          return applyLinkedStyleToTransaction(tr, this.editor, style);
+        },
 
       /**
        * Apply a linked style by its ID
@@ -97,20 +107,25 @@ export const LinkedStyles = Extension.create({
        * editor.commands.setStyleById('Normal')
        * @note Looks up the style from loaded Word styles
        */
-      setStyleById: (styleId) => (params) => {
-        const { state, tr } = params;
-        const pluginState = LinkedStylesPluginKey.getState(state);
-        if (!pluginState) return false;
-
-        const style = pluginState.styles?.find((s) => s.id === styleId);
-        if (!style) return false;
-
-        return applyLinkedStyleToTransaction(tr, this.editor, style);
-      },
+      setStyleById:
+        (styleId: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }): boolean => {
+          if (!this.editor) return false;
+          const pluginState = LinkedStylesPluginKey.getState(state);
+          if (!pluginState) return false;
+
+          const style = (pluginState.styles as LinkedStyleDefinition[] | undefined)?.find((s) => s.id === styleId);
+          if (!style) return false;
+
+          return applyLinkedStyleToTransaction(tr, this.editor, style);
+        },
     };
   },
 
   addHelpers() {
+    const editor = this.editor as Editor;
+    const extensionName = this.name;
+
     return {
       /**
        * Get all available linked styles
@@ -120,8 +135,11 @@ export const LinkedStyles = Extension.create({
        * const styles = editor.helpers.linkedStyles.getStyles();
        * // Returns all styles from the Word document
        */
-      getStyles: () => {
-        const styles = LinkedStylesPluginKey.getState(this.editor.state)?.styles || [];
+      getStyles: (): LinkedStyleDefinition[] => {
+        const pluginState = LinkedStylesPluginKey.getState(editor.state) as
+          | { styles?: LinkedStyleDefinition[] }
+          | undefined;
+        const styles = pluginState?.styles || [];
         return styles;
       },
 
@@ -133,8 +151,9 @@ export const LinkedStyles = Extension.create({
        * @example
        * const headingStyle = editor.helpers.linkedStyles.getStyleById('Heading1');
        */
-      getStyleById: (styleId) => {
-        const styles = this.editor.helpers[this.name].getStyles();
+      getStyleById: (styleId: string) => {
+        const helpers = editor.helpers as Record<string, unknown>;
+        const styles = (helpers?.[extensionName] as { getStyles?: () => LinkedStyleDefinition[] })?.getStyles?.() ?? [];
         return styles.find((s) => s.id === styleId);
       },
 
@@ -148,11 +167,12 @@ export const LinkedStyles = Extension.create({
        * // Returns: "font-size: 16pt; font-weight: bold; color: #2E74B5"
        * @private
        */
-      getLinkedStyleString: (styleId) => {
-        const styles = this.editor.helpers.linkedStyles.getStyles();
+      getLinkedStyleString: (styleId: string) => {
+        const helpers = editor.helpers as Record<string, unknown>;
+        const styles = (helpers?.linkedStyles as { getStyles?: () => LinkedStyleDefinition[] })?.getStyles?.() ?? [];
         const style = styles.find((s) => s.id === styleId);
         if (!style) return '';
-        return generateLinkedStyleString(style);
+        return generateLinkedStyleString(style, null, null, null);
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/linked-styles/plugin.js b/packages/super-editor/src/extensions/linked-styles/plugin.ts
similarity index 75%
rename from packages/super-editor/src/extensions/linked-styles/plugin.js
rename to packages/super-editor/src/extensions/linked-styles/plugin.ts
index 26b4c51b1..7b1598659 100644
--- a/packages/super-editor/src/extensions/linked-styles/plugin.js
+++ b/packages/super-editor/src/extensions/linked-styles/plugin.ts
@@ -1,17 +1,31 @@
-// @ts-check
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { ReplaceStep, AddMarkStep, RemoveMarkStep } from 'prosemirror-transform';
 import { generateLinkedStyleString, getLinkedStyle, stepInsertsTextIntoStyledParagraph } from './helpers.js';
 import {
   calculateResolvedParagraphProperties,
   getResolvedParagraphProperties,
 } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { Step } from 'prosemirror-transform';
 
 /**
  * Plugin key for accessing linked styles state
  */
 export const LinkedStylesPluginKey = new PluginKey('linkedStyles');
 
+import type { Editor } from '@core/Editor.js';
+import type { Node as PmNode } from 'prosemirror-model';
+
+interface LinkedStyleDefinition {
+  id?: string;
+  type?: string;
+  definition?: {
+    attrs?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+  };
+}
+
 /**
  * Create the linked styles ProseMirror plugin
  * @category Helper
@@ -22,7 +36,7 @@ export const LinkedStylesPluginKey = new PluginKey('linkedStyles');
  * @note Only activates in docx mode with converter available
  * @note Generates decorations for visual style application
  */
-export const createLinkedStylesPlugin = (editor) => {
+export const createLinkedStylesPlugin = (editor: Editor): Plugin => {
   return new Plugin({
     key: LinkedStylesPluginKey,
     state: {
@@ -33,7 +47,7 @@ export const createLinkedStylesPlugin = (editor) => {
        */
       init() {
         if (!editor.converter || editor.options.mode !== 'docx') return {};
-        const styles = editor.converter?.linkedStyles || [];
+        const styles = (editor.converter?.linkedStyles as LinkedStyleDefinition[]) || [];
         return {
           styles,
           decorations: generateDecorations(editor.state, styles),
@@ -48,8 +62,14 @@ export const createLinkedStylesPlugin = (editor) => {
        * @returns {Object} Updated state with styles and decorations
        * @private
        */
-      apply(tr, prev, oldEditorState, newEditorState) {
-        if (!editor.converter || editor.options.mode !== 'docx') return { ...prev };
+      apply(
+        tr: Transaction,
+        prev: { styles?: LinkedStyleDefinition[]; decorations?: DecorationSet },
+        oldEditorState: EditorState,
+        newEditorState: EditorState,
+      ): { styles?: LinkedStyleDefinition[]; decorations: DecorationSet } {
+        if (!editor.converter || editor.options.mode !== 'docx')
+          return { ...prev, decorations: prev.decorations || DecorationSet.empty };
         let decorations = prev.decorations || DecorationSet.empty;
 
         // Only regenerate decorations when styles are affected
@@ -59,9 +79,9 @@ export const createLinkedStylesPlugin = (editor) => {
           // Style-related mark types that affect linked styles
           const styleRelatedMarks = new Set(['textStyle', 'bold', 'italic', 'underline', 'strike']);
 
-          tr.steps.forEach((step, index) => {
-            if (step.slice) {
-              step.slice.content.descendants((node, pos) => {
+          tr.steps.forEach((step: Step, index: number) => {
+            if (step instanceof ReplaceStep && (step as ReplaceStep).slice) {
+              (step as ReplaceStep).slice.content.descendants((node: PmNode, pos: number) => {
                 if (node.type.name === 'paragraph') {
                   const paragraphProps = calculateResolvedParagraphProperties(
                     editor,
@@ -85,8 +105,9 @@ export const createLinkedStylesPlugin = (editor) => {
             }
 
             // Only check mark additions/removals for style-related marks
-            if (step.jsonID === 'addMark' || step.jsonID === 'removeMark') {
-              if (step.mark && styleRelatedMarks.has(step.mark.type.name)) {
+            if (step instanceof AddMarkStep || step instanceof RemoveMarkStep) {
+              const markStep = step as AddMarkStep | RemoveMarkStep;
+              if (markStep.mark && styleRelatedMarks.has(markStep.mark.type.name)) {
                 mightAffectStyles = true;
               }
             }
@@ -114,7 +135,7 @@ export const createLinkedStylesPlugin = (editor) => {
        * @returns {Object} The decoration set
        * @private
        */
-      decorations(state) {
+      decorations(state: EditorState): DecorationSet | undefined {
         return LinkedStylesPluginKey.getState(state)?.decorations;
       },
     },
@@ -133,38 +154,40 @@ export const createLinkedStylesPlugin = (editor) => {
  * @note Respects style inheritance and mark precedence
  * @private
  */
-const generateDecorations = (state, styles) => {
-  const decorations = [];
+const generateDecorations = (state: EditorState, styles: LinkedStyleDefinition[]): DecorationSet => {
+  const decorations: Decoration[] = [];
   const doc = state?.doc;
 
   // Early return if no doc or state
   if (!doc || !state) return DecorationSet.empty;
 
-  const getParagraphStyleId = (pos) => {
+  const getParagraphStyleId = (pos: number): string | null => {
     const $pos = state.doc.resolve(pos);
     for (let d = $pos.depth; d >= 0; d--) {
       const n = $pos.node(d);
       if (n?.type?.name === 'paragraph') {
-        const paragraphProps = getResolvedParagraphProperties(n);
+        const paragraphProps = getResolvedParagraphProperties(n) ?? {};
         return paragraphProps.styleId || null;
       }
     }
     return null;
   };
 
-  doc.descendants((node, pos) => {
+  doc.descendants((node: PmNode, pos: number) => {
     const { name } = node.type;
     if (name !== 'text') return;
 
     const paragraphStyleId = getParagraphStyleId(pos);
-    let runStyleId = null;
-    let inlineTextStyleId = null;
+    let runStyleId: string | null = null;
+    let inlineTextStyleId: string | null = null;
     for (const mark of node.marks) {
       if (mark.type.name === 'run') {
         const rp = mark.attrs?.runProperties;
         if (rp && typeof rp === 'object' && !Array.isArray(rp) && rp.styleId) runStyleId = rp.styleId;
         else if (Array.isArray(rp)) {
-          const ent = rp.find((e) => e?.xmlName === 'w:rStyle');
+          const ent = rp.find((e: unknown) => (e as { xmlName?: string })?.xmlName === 'w:rStyle') as
+            | { attributes?: Record<string, string> }
+            | undefined;
           const sid = ent?.attributes?.['w:val'];
           if (sid) runStyleId = sid;
         }
@@ -174,7 +197,7 @@ const generateDecorations = (state, styles) => {
     }
 
     // Merge paragraph -> inlineText -> run styles
-    const buildStyleMap = (sid) => {
+    const buildStyleMap = (sid: string | null): Record<string, unknown> => {
       if (!sid) return {};
       const { linkedStyle, basedOnStyle } = getLinkedStyle(sid, styles);
       if (!linkedStyle) return {};
@@ -183,7 +206,7 @@ const generateDecorations = (state, styles) => {
     };
 
     const pMap = buildStyleMap(paragraphStyleId);
-    let tMap;
+    let tMap: Record<string, unknown>;
     if (paragraphStyleId?.startsWith('TOC')) {
       // Word ignores inline text styles for text in TOC paragraphs, so we do the same
       tMap = {};
diff --git a/packages/super-editor/src/extensions/linked-styles/underline-css.test.js b/packages/super-editor/src/extensions/linked-styles/underline-css.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/linked-styles/underline-css.test.js
rename to packages/super-editor/src/extensions/linked-styles/underline-css.test.ts
diff --git a/packages/super-editor/src/extensions/linked-styles/underline-css.js b/packages/super-editor/src/extensions/linked-styles/underline-css.ts
similarity index 88%
rename from packages/super-editor/src/extensions/linked-styles/underline-css.js
rename to packages/super-editor/src/extensions/linked-styles/underline-css.ts
index 8b691e3bc..cd67b915b 100644
--- a/packages/super-editor/src/extensions/linked-styles/underline-css.js
+++ b/packages/super-editor/src/extensions/linked-styles/underline-css.ts
@@ -1,5 +1,3 @@
-// @ts-check
-
 /**
  * Map OOXML underline types to CSS text-decoration properties.
  * Returns a CSS style string (kebab-case) suitable for inline decorations.
@@ -11,10 +9,20 @@
  * @param {boolean} [params.approximate=true] - Whether to approximate non-standard styles
  * @returns {string} CSS style string (e.g., 'text-decoration-line: underline; text-decoration-style: dashed;')
  */
-export function getUnderlineCssString({ type = 'single', color = null, thickness = null, approximate = true } = {}) {
-  const parts = [];
+export function getUnderlineCssString({
+  type = 'single',
+  color = null,
+  thickness = null,
+  approximate = true,
+}: {
+  type?: string;
+  color?: string | null;
+  thickness?: string | null;
+  approximate?: boolean;
+} = {}): string {
+  const parts: string[] = [];
 
-  const add = (k, v) => {
+  const add = (k: string, v: string | null | undefined) => {
     if (!v) return;
     parts.push(`${k}: ${v}`);
   };
diff --git a/packages/super-editor/src/extensions/mention/index.js b/packages/super-editor/src/extensions/mention/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/mention/index.js
rename to packages/super-editor/src/extensions/mention/index.ts
diff --git a/packages/super-editor/src/extensions/mention/mention.js b/packages/super-editor/src/extensions/mention/mention.js
deleted file mode 100644
index c985052c9..000000000
--- a/packages/super-editor/src/extensions/mention/mention.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Node, Attribute } from '@core/index.js';
-
-/**
- * Configuration options for Mention
- * @typedef {Object} MentionOptions
- * @category Options
- * @property {Object} [htmlAttributes] - HTML attributes for mention elements
- */
-
-/**
- * Attributes for mention nodes
- * @typedef {Object} MentionAttributes
- * @category Attributes
- * @property {string} [name=null] - Display name of the mentioned person
- * @property {string} [email=null] - Email address of the mentioned person
- */
-
-/**
- * @module Mention
- * @sidebarTitle Mention
- * @snippetPath /snippets/extensions/mention.mdx
- */
-export const Mention = Node.create({
-  name: 'mention',
-
-  group: 'inline',
-
-  inline: true,
-
-  selectable: false,
-
-  excludeFromSummaryJSON: true,
-
-  atom: true,
-
-  addOptions() {
-    return {
-      htmlAttributes: {
-        class: 'sd-editor-mention',
-        'aria-label': 'Mention node',
-      },
-    };
-  },
-
-  parseDOM() {
-    return [
-      {
-        tag: `span[data-type="${this.name || this.email}"]`,
-        getAttrs: (node) => ({
-          name: node.getAttribute('name') || null,
-          email: node.getAttribute('email') || null,
-        }),
-      },
-    ];
-  },
-
-  renderDOM({ node, htmlAttributes }) {
-    const { name, email } = node.attrs;
-
-    return [
-      'span',
-      Attribute.mergeAttributes({ 'data-type': this.name || this.email }, this.options.htmlAttributes, htmlAttributes),
-      `@${name ? name : email}`,
-    ];
-  },
-
-  addAttributes() {
-    return {
-      name: { default: null },
-      email: { default: null },
-    };
-  },
-});
diff --git a/packages/super-editor/src/extensions/mention/mention.ts b/packages/super-editor/src/extensions/mention/mention.ts
new file mode 100644
index 000000000..8ae09b087
--- /dev/null
+++ b/packages/super-editor/src/extensions/mention/mention.ts
@@ -0,0 +1,73 @@
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import type { Node as PmNode, DOMOutputSpec } from 'prosemirror-model';
+
+/**
+ * Configuration options for Mention
+ */
+export interface MentionOptions extends Record<string, unknown> {
+  htmlAttributes: {
+    class: string;
+    'aria-label': string;
+  };
+}
+
+/**
+ * @module Mention
+ * @sidebarTitle Mention
+ * @snippetPath /snippets/extensions/mention.mdx
+ */
+export const Mention = Node.create<MentionOptions>({
+  name: 'mention',
+
+  group: 'inline',
+
+  inline: true,
+
+  selectable: false,
+
+  excludeFromSummaryJSON: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: 'sd-editor-mention',
+        'aria-label': 'Mention node',
+      },
+    };
+  },
+
+  parseDOM() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`,
+        getAttrs: (node: HTMLElement) => ({
+          name: node.getAttribute('name') || null,
+          email: node.getAttribute('email') || null,
+        }),
+      },
+    ];
+  },
+
+  renderDOM({ node, htmlAttributes }: { node: PmNode; htmlAttributes?: Record<string, unknown> }): DOMOutputSpec {
+    const { name, email } = node.attrs as { name?: string; email?: string };
+
+    return [
+      'span',
+      Attribute.mergeAttributes(
+        { 'data-type': this.name },
+        this.options.htmlAttributes,
+        (htmlAttributes as Record<string, AttributeValue>) ?? {},
+      ),
+      `@${name ? name : email}`,
+    ];
+  },
+
+  addAttributes() {
+    return {
+      name: { default: null },
+      email: { default: null },
+    };
+  },
+});
diff --git a/packages/super-editor/src/extensions/noderesizer/index.js b/packages/super-editor/src/extensions/noderesizer/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/noderesizer/index.js
rename to packages/super-editor/src/extensions/noderesizer/index.ts
diff --git a/packages/super-editor/src/extensions/noderesizer/noderesizer.test.js b/packages/super-editor/src/extensions/noderesizer/noderesizer.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/noderesizer/noderesizer.test.js
rename to packages/super-editor/src/extensions/noderesizer/noderesizer.test.ts
diff --git a/packages/super-editor/src/extensions/noderesizer/noderesizer.js b/packages/super-editor/src/extensions/noderesizer/noderesizer.ts
similarity index 72%
rename from packages/super-editor/src/extensions/noderesizer/noderesizer.js
rename to packages/super-editor/src/extensions/noderesizer/noderesizer.ts
index 2875a6c6f..d5bbf90c0 100644
--- a/packages/super-editor/src/extensions/noderesizer/noderesizer.js
+++ b/packages/super-editor/src/extensions/noderesizer/noderesizer.ts
@@ -1,22 +1,31 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, NodeSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
 import { Extension } from '@core/Extension.js';
-import { applyStyleIsolationClass } from '@/utils/styleIsolation.js';
-
-/**
- * Configuration options for NodeResizer
- * @typedef {Object} NodeResizerOptions
- * @category Options
- */
+import type { Editor } from '@core/Editor.js';
+
+const STYLE_ISOLATION_CLASS = 'sd-editor-scoped';
+
+interface ResizeState {
+  dragging: boolean;
+  startX: number;
+  startY: number;
+  startWidth: number;
+  startHeight: number;
+  handle: string | null;
+  pos: number | null;
+  resizableElement: HTMLElement | null;
+  aspectRatio: number;
+}
 
 export const NodeResizerKey = new PluginKey('node-resizer');
 
 /**
  * Plugin key for the resize plugin
  */
-const nodeResizer = (nodeNames = ['image'], editor) => {
+const nodeResizer = (nodeNames: string[] = ['image'], editor: Editor) => {
   // Track the resize state
-  let resizeState = {
+  let resizeState: ResizeState = {
     dragging: false,
     startX: 0,
     startY: 0,
@@ -29,12 +38,12 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
   };
 
   // Store references to resize handles container and editor view
-  let resizeContainer = null;
-  let editorView = null;
-  let globalClickHandler = null;
-  let globalMousedownHandler = null;
-  let scrollHandler = null;
-  let currentWrapper = null;
+  let resizeContainer: HTMLDivElement | null = null;
+  let editorView: EditorView | null = null;
+  let globalClickHandler: ((event: MouseEvent) => void) | null = null;
+  let globalMousedownHandler: ((event: MouseEvent) => boolean | void) | null = null;
+  let scrollHandler: (() => void) | null = null;
+  let currentWrapper: HTMLElement | null = null;
 
   return new Plugin({
     key: NodeResizerKey,
@@ -59,7 +68,7 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
 
         // If selection is not on a resizable node — keep current decorations
         const { selection } = newState;
-        const node = selection.node;
+        const node = selection instanceof NodeSelection ? selection.node : null;
         if (!node || !nodeNames.includes(node.type.name)) {
           return DecorationSet.empty;
         }
@@ -67,12 +76,12 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
         const decorations = [];
 
         // Only create decoration if one of the resizable nodes is selected
-        if (nodeNames.includes(selection.node?.type.name)) {
+        if (selection instanceof NodeSelection && nodeNames.includes(selection.node?.type.name)) {
           decorations.push(
             Decoration.node(selection.from, selection.to, {
               nodeName: 'span',
               class: 'sd-editor-resizable-wrapper',
-              'data-pos': selection.from,
+              'data-pos': String(selection.from),
             }),
           );
         }
@@ -91,11 +100,9 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
       editorView = view;
 
       // Add global click handler
-      globalClickHandler = (event) => {
-        if (
-          !event.target.closest('.sd-editor-resizable-wrapper') &&
-          !event.target.closest('.sd-editor-resize-container')
-        ) {
+      globalClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        if (!target.closest('.sd-editor-resizable-wrapper') && !target.closest('.sd-editor-resize-container')) {
           hideResizeHandles();
         }
       };
@@ -103,11 +110,12 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
       document.addEventListener('click', globalClickHandler);
 
       // Add global mousedown handler
-      globalMousedownHandler = (event) => {
-        if (event.target.closest('.sd-editor-resize-handle')) {
+      globalMousedownHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.closest('.sd-editor-resize-handle')) {
           event.preventDefault();
           event.stopPropagation();
-          startResize(editorView, event, event.target);
+          startResize(editorView, event, target);
           return true;
         }
       };
@@ -133,7 +141,9 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
           if (selection.from !== prevSelection.from || selection.to !== prevSelection.to) {
             setTimeout(() => {
               const searchRoot = editorView?.dom;
-              const selectedResizableWrapper = searchRoot?.querySelector('.sd-editor-resizable-wrapper');
+              const selectedResizableWrapper = searchRoot?.querySelector(
+                '.sd-editor-resizable-wrapper',
+              ) as HTMLElement | null;
               if (selectedResizableWrapper) {
                 showResizeHandles(view, selectedResizableWrapper);
               } else {
@@ -164,13 +174,13 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     },
   });
 
-  function showResizeHandles(view, wrapper) {
+  function showResizeHandles(view: EditorView, wrapper: HTMLElement): void {
     hideResizeHandles();
 
-    const pos = Number.parseInt(wrapper.getAttribute('data-pos'), 10);
+    const pos = Number.parseInt(wrapper.getAttribute('data-pos') || '0', 10);
 
     const node = view.state.doc.nodeAt(pos);
-    if (!nodeNames.includes(node?.type.name)) return;
+    if (!nodeNames.includes(node?.type.name ?? '')) return;
 
     // Store current wrapper for scroll updates
     currentWrapper = wrapper;
@@ -188,13 +198,13 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
       const handleEl = document.createElement('div');
       handleEl.className = `sd-editor-resize-handle sd-editor-resize-handle-${handle}`;
       handleEl.setAttribute('data-handle', handle);
-      handleEl.setAttribute('data-pos', pos);
+      handleEl.setAttribute('data-pos', String(pos));
       handleEl.style.pointerEvents = 'auto';
       resizeContainer.appendChild(handleEl);
     }
 
     // Position the container relative to the resizable element
-    applyStyleIsolationClass(resizeContainer);
+    resizeContainer.classList.add(STYLE_ISOLATION_CLASS);
     document.body.appendChild(resizeContainer);
     updateHandlePositions(wrapper.firstElementChild);
   }
@@ -207,7 +217,7 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     currentWrapper = null; // Clear wrapper reference
   }
 
-  function updateHandlePositions(resizableElement) {
+  function updateHandlePositions(resizableElement: Element | null): void {
     if (!resizeContainer || !resizableElement) return;
 
     const rect = resizableElement.getBoundingClientRect();
@@ -220,13 +230,19 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     resizeContainer.style.height = `${rect.height}px`;
   }
 
-  function startResize(view, event, handleElement) {
-    if (!view.hasFocus()) return;
+  function startResize(view: EditorView | null, event: MouseEvent, handleElement: HTMLElement): void {
+    if (!view || !view.hasFocus()) return;
     const handle = handleElement.getAttribute('data-handle');
-    const pos = Number.parseInt(handleElement.getAttribute('data-pos'), 10);
-    if (view.state.selection.from !== pos || !nodeNames.includes(view.state.selection.node?.type.name)) return;
+    const pos = Number.parseInt(handleElement.getAttribute('data-pos') || '0', 10);
+    const selection = view.state.selection;
+    // Check for NodeSelection using both instanceof and duck typing for test compatibility
+    const selectionNode =
+      selection instanceof NodeSelection || (selection as NodeSelection).node
+        ? (selection as NodeSelection).node
+        : null;
+    if (selection.from !== pos || !nodeNames.includes(selectionNode?.type.name ?? '')) return;
 
-    const resizableElement = view.nodeDOM(pos);
+    const resizableElement = view.nodeDOM(pos) as HTMLElement | null;
 
     if (!resizableElement) return;
 
@@ -250,7 +266,7 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     document.body.style.userSelect = 'none';
   }
 
-  function handleMouseMove(event) {
+  function handleMouseMove(event: MouseEvent): void {
     if (!resizeState.dragging) return;
 
     event.preventDefault();
@@ -259,7 +275,7 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     let deltaX = event.clientX - resizeState.startX;
 
     // Adjust delta based on handle position
-    if (resizeState.handle.includes('w')) deltaX = -deltaX;
+    if (resizeState.handle?.includes('w')) deltaX = -deltaX;
 
     // Calculate new dimensions maintaining aspect ratio
     const newWidth = Math.max(20, resizeState.startWidth + deltaX);
@@ -274,7 +290,7 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     }
   }
 
-  function handleMouseUp(event) {
+  function handleMouseUp(event: MouseEvent): void {
     if (!resizeState.dragging) return;
 
     cleanupEventListeners();
@@ -282,22 +298,22 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     let deltaX = event.clientX - resizeState.startX;
 
     // Adjust delta based on handle position
-    if (resizeState.handle.includes('w')) deltaX = -deltaX;
+    if (resizeState.handle?.includes('w')) deltaX = -deltaX;
 
     // Calculate final dimensions
     const newWidth = Math.max(20, resizeState.startWidth + deltaX);
     const newHeight = newWidth / resizeState.aspectRatio;
 
     // Update the document
-    if (editorView && resizeState.pos < editorView.state.doc.content.size) {
+    if (editorView && resizeState.pos !== null && resizeState.pos < editorView.state.doc.content.size) {
       const tr = editorView.state.tr;
       const node = tr.doc.nodeAt(resizeState.pos);
 
-      if (nodeNames.includes(node?.type.name)) {
+      if (node && nodeNames.includes(node.type.name)) {
         const attrs = {
           ...node.attrs,
           size: {
-            ...node.attrs.size,
+            ...(node.attrs.size as Record<string, unknown>),
             width: Math.round(newWidth),
             height: Math.round(newHeight),
           },
@@ -323,14 +339,14 @@ const nodeResizer = (nodeNames = ['image'], editor) => {
     };
   }
 
-  function cleanupEventListeners() {
+  function cleanupEventListeners(): void {
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
   }
 
-  function getResizeCursor(handle) {
+  function getResizeCursor(handle: string | null): string {
     switch (handle) {
       case 'nw':
       case 'se':
@@ -357,9 +373,11 @@ export const NodeResizer = Extension.create({
   },
 
   addPmPlugins() {
-    const isHeadless = this.editor.options.isHeadless;
+    const editor = this.editor;
+    if (!editor) return [];
+    const isHeadless = editor.options.isHeadless;
     const hasDocument = typeof document !== 'undefined';
     if (isHeadless || !hasDocument) return [];
-    return [nodeResizer(['image'], this.editor)];
+    return [nodeResizer(['image'], editor)];
   },
 });
diff --git a/packages/super-editor/src/extensions/page-number/index.js b/packages/super-editor/src/extensions/page-number/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/page-number/index.js
rename to packages/super-editor/src/extensions/page-number/index.ts
diff --git a/packages/super-editor/src/extensions/page-number/page-number.test.js b/packages/super-editor/src/extensions/page-number/page-number.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/page-number/page-number.test.js
rename to packages/super-editor/src/extensions/page-number/page-number.test.ts
diff --git a/packages/super-editor/src/extensions/page-number/page-number.js b/packages/super-editor/src/extensions/page-number/page-number.ts
similarity index 67%
rename from packages/super-editor/src/extensions/page-number/page-number.js
rename to packages/super-editor/src/extensions/page-number/page-number.ts
index ad54e9551..b822fb16b 100644
--- a/packages/super-editor/src/extensions/page-number/page-number.js
+++ b/packages/super-editor/src/extensions/page-number/page-number.ts
@@ -1,5 +1,24 @@
-import { Node, Attribute } from '@core/index.js';
-import { isHeadless } from '@/utils/headless-helpers.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
+import { isHeadless } from '@/utils/headless-helpers';
+import type { Node as PmNode, Mark } from 'prosemirror-model';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { Decoration, EditorView as PmEditorView } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+
+interface CommandProps {
+  tr: Transaction;
+  dispatch?: (tr: Transaction) => void;
+  state: EditorState;
+  editor: Editor;
+}
+
+interface NodeViewProps {
+  node: PmNode;
+  editor: Editor;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+}
+
 /**
  * Configuration options for PageNumber
  * @typedef {Object} PageNumberOptions
@@ -51,8 +70,8 @@ export const PageNumber = Node.create({
   },
 
   addNodeView() {
-    return ({ node, editor, getPos, decorations }) => {
-      const htmlAttributes = this.options.htmlAttributes;
+    return ({ node, editor, getPos, decorations }: NodeViewProps) => {
+      const htmlAttributes = this.options.htmlAttributes as unknown as Record<string, string>;
       return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
     };
   },
@@ -61,8 +80,11 @@ export const PageNumber = Node.create({
     return [{ tag: 'span[data-id="auto-page-number"' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
+  renderDOM({ htmlAttributes }: { htmlAttributes?: Record<string, unknown> }) {
+    return [
+      'span',
+      Attribute.mergeAttributes(this.options.htmlAttributes, (htmlAttributes as Record<string, AttributeValue>) ?? {}),
+    ];
   },
 
   addCommands() {
@@ -77,7 +99,7 @@ export const PageNumber = Node.create({
        */
       addAutoPageNumber:
         () =>
-        ({ tr, dispatch, state, editor }) => {
+        ({ tr, dispatch, state, editor }: CommandProps): boolean => {
           const { options } = editor;
           if (!options.isHeaderOrFooter) return false;
 
@@ -102,7 +124,7 @@ export const PageNumber = Node.create({
 
   addShortcuts() {
     return {
-      'Mod-Shift-alt-p': () => this.editor.commands.addAutoPageNumber(),
+      'Mod-Shift-alt-p': () => this.editor?.commands.addAutoPageNumber(),
     };
   },
 });
@@ -158,8 +180,8 @@ export const TotalPageCount = Node.create({
   },
 
   addNodeView() {
-    return ({ node, editor, getPos, decorations }) => {
-      const htmlAttributes = this.options.htmlAttributes;
+    return ({ node, editor, getPos, decorations }: NodeViewProps) => {
+      const htmlAttributes = this.options.htmlAttributes as unknown as Record<string, string>;
       return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
     };
   },
@@ -168,8 +190,12 @@ export const TotalPageCount = Node.create({
     return [{ tag: 'span[data-id="auto-total-pages"' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: { htmlAttributes?: Record<string, unknown> }) {
+    return [
+      'span',
+      Attribute.mergeAttributes(this.options.htmlAttributes, (htmlAttributes as Record<string, AttributeValue>) ?? {}),
+      0,
+    ];
   },
 
   addCommands() {
@@ -184,7 +210,7 @@ export const TotalPageCount = Node.create({
        */
       addTotalPageCount:
         () =>
-        ({ tr, dispatch, state, editor }) => {
+        ({ tr, dispatch, state, editor }: CommandProps): boolean => {
           const { options } = editor;
           if (!options.isHeaderOrFooter) return false;
 
@@ -192,7 +218,8 @@ export const TotalPageCount = Node.create({
           const pageNumberType = schema.nodes?.['total-page-number'];
           if (!pageNumberType) return false;
 
-          const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
+          const parent = editor?.options?.parentEditor as { currentTotalPages?: number } | undefined;
+          const currentPages = parent?.currentTotalPages || 1;
           const pageNumberNode = {
             type: 'total-page-number',
             content: [{ type: 'text', text: String(currentPages) }],
@@ -208,67 +235,92 @@ export const TotalPageCount = Node.create({
 
   addShortcuts() {
     return {
-      'Mod-Shift-alt-c': () => this.editor.commands.addTotalPageCount(),
+      'Mod-Shift-alt-c': () => this.editor?.commands.addTotalPageCount(),
     };
   },
 });
 
-const getNodeAttributes = (nodeName, editor) => {
+interface NodeAttributesResult {
+  text: string | number;
+  className: string;
+  dataId: string;
+  ariaLabel: string;
+}
+
+const getNodeAttributes = (nodeName: string, editor: Editor): NodeAttributesResult => {
   switch (nodeName) {
     case 'page-number':
       return {
-        text: editor.options.currentPageNumber || '1',
+        text: (editor.options as { currentPageNumber?: number }).currentPageNumber || '1',
         className: 'sd-editor-auto-page-number',
         dataId: 'auto-page-number',
         ariaLabel: 'Page number node',
       };
     case 'total-page-number':
       return {
-        text: editor.options.parentEditor?.currentTotalPages || '1',
+        text: (editor.options.parentEditor as { currentTotalPages?: number } | undefined)?.currentTotalPages || '1',
         className: 'sd-editor-auto-total-pages',
         dataId: 'auto-total-pages',
         ariaLabel: 'Total page count node',
       };
     default:
-      return {};
+      return {
+        text: '',
+        className: '',
+        dataId: '',
+        ariaLabel: '',
+      };
   }
 };
 
 export class AutoPageNumberNodeView {
-  constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
+  node: PmNode;
+  editor: Editor;
+  view: PmEditorView;
+  getPos: () => number | undefined;
+  dom: HTMLElement;
+
+  constructor(
+    node: PmNode,
+    getPos: () => number | undefined,
+    decorations: readonly Decoration[],
+    editor: Editor,
+    htmlAttributes: Record<string, string> = {},
+  ) {
     this.node = node;
     this.editor = editor;
     this.view = editor.view;
     this.getPos = getPos;
-    this.editor = editor;
 
     this.dom = this.#renderDom(node, htmlAttributes);
   }
 
-  #renderDom(node, htmlAttributes) {
+  #renderDom(node: PmNode, htmlAttributes: Record<string, string>): HTMLElement {
     const attrs = getNodeAttributes(this.node.type.name, this.editor);
     const content = document.createTextNode(String(attrs.text));
 
     const nodeContent = document.createElement('span');
-    nodeContent.className = attrs.className;
-    nodeContent.setAttribute('data-id', attrs.dataId);
-    nodeContent.setAttribute('aria-label', attrs.ariaLabel);
+    nodeContent.className = String(attrs.className);
+    nodeContent.setAttribute('data-id', String(attrs.dataId));
+    nodeContent.setAttribute('aria-label', String(attrs.ariaLabel));
 
     const currentPos = this.getPos();
-    const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
-    this.#scheduleUpdateNodeStyle(currentPos, marks);
-    Object.assign(nodeContent.style, styles);
+    if (currentPos !== undefined) {
+      const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
+      this.#scheduleUpdateNodeStyle(currentPos, marks);
+      Object.assign(nodeContent.style, styles);
+    }
 
     nodeContent.appendChild(content);
 
     Object.entries(htmlAttributes).forEach(([key, value]) => {
-      if (value) nodeContent.setAttribute(key, value);
+      if (value) nodeContent.setAttribute(key, String(value));
     });
 
     return nodeContent;
   }
 
-  #scheduleUpdateNodeStyle(pos, marks) {
+  #scheduleUpdateNodeStyle(pos: number, marks: Mark[]): void {
     setTimeout(() => {
       const { state } = this.editor;
       const { dispatch } = this.view;
@@ -293,7 +345,7 @@ export class AutoPageNumberNodeView {
     }, 0);
   }
 
-  update(node) {
+  update(node: PmNode): boolean {
     const incomingType = node?.type?.name;
     const currentType = this.node?.type?.name;
     if (!incomingType || incomingType !== currentType) return false;
@@ -304,14 +356,14 @@ export class AutoPageNumberNodeView {
 
 /**
  * Get styles from the marks of the node before and after the current position.
- * @param {Number} currentPos The current position in the document.
- * @param {Object} view The ProseMirror view instance.
- * @returns {Object} An object containing CSS styles derived from the marks of the neighboring nodes.
  */
-const getMarksFromNeighbors = (currentPos, view) => {
+const getMarksFromNeighbors = (
+  currentPos: number,
+  view: PmEditorView,
+): { styles: Record<string, string>; marks: Mark[] } => {
   const $pos = view.state.doc.resolve(currentPos);
-  const styles = {};
-  const marks = [];
+  const styles: Record<string, string> = {};
+  const marks: Mark[] = [];
 
   const before = $pos.nodeBefore;
   if (before) {
@@ -333,11 +385,9 @@ const getMarksFromNeighbors = (currentPos, view) => {
 
 /**
  * Process marks to extract styles.
- * @param {Object[]} marks The marks to process.
- * @returns {Object} An object containing CSS styles derived from the marks.
  */
-const processMarks = (marks) => {
-  const styles = {};
+const processMarks = (marks: readonly Mark[]): Record<string, string> => {
+  const styles: Record<string, string> = {};
 
   marks.forEach((mark) => {
     const { type, attrs } = mark;
@@ -368,8 +418,8 @@ const processMarks = (marks) => {
 
       default:
         // Handle unknown/custom marks gracefully
-        if (attrs?.style) {
-          Object.entries(attrs.style).forEach(([key, value]) => {
+        if (attrs?.style && typeof attrs.style === 'object') {
+          Object.entries(attrs.style as Record<string, string>).forEach(([key, value]) => {
             styles[key] = value;
           });
         }
diff --git a/packages/super-editor/src/extensions/page-reference/index.js b/packages/super-editor/src/extensions/page-reference/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/page-reference/index.js
rename to packages/super-editor/src/extensions/page-reference/index.ts
diff --git a/packages/super-editor/src/extensions/page-reference/page-reference.js b/packages/super-editor/src/extensions/page-reference/page-reference.ts
similarity index 69%
rename from packages/super-editor/src/extensions/page-reference/page-reference.js
rename to packages/super-editor/src/extensions/page-reference/page-reference.ts
index 0c908aa19..399d39742 100644
--- a/packages/super-editor/src/extensions/page-reference/page-reference.js
+++ b/packages/super-editor/src/extensions/page-reference/page-reference.ts
@@ -1,4 +1,4 @@
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
 
 export const PageReference = Node.create({
   name: 'pageReference',
@@ -38,7 +38,11 @@ export const PageReference = Node.create({
     return [{ tag: 'span[data-id="auto-page-reference"]' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: { htmlAttributes?: Record<string, unknown> }) {
+    return [
+      'span',
+      Attribute.mergeAttributes(this.options.htmlAttributes, (htmlAttributes as Record<string, AttributeValue>) ?? {}),
+      0,
+    ];
   },
 });
diff --git a/packages/super-editor/src/extensions/pagination/pagination-helpers.d.ts b/packages/super-editor/src/extensions/pagination/pagination-helpers.d.ts
index 0989cb4bd..c386c1faa 100644
--- a/packages/super-editor/src/extensions/pagination/pagination-helpers.d.ts
+++ b/packages/super-editor/src/extensions/pagination/pagination-helpers.d.ts
@@ -1,2 +1,25 @@
-export function createHeaderFooterEditor(...args: any[]): any;
-export function onHeaderFooterDataUpdate(...args: any[]): any;
+import type { Editor as SuperEditor } from '@core/Editor.js';
+
+export interface CreateHeaderFooterEditorParams {
+  editor: SuperEditor;
+  data: unknown;
+  editorContainer: HTMLDivElement;
+  appendToBody?: boolean;
+  sectionId?: string;
+  type?: string;
+  availableHeight?: number;
+  currentPageNumber?: number;
+}
+
+export interface OnHeaderFooterDataUpdateParams {
+  editor: SuperEditor;
+  transaction?: { selection?: unknown };
+}
+
+export function createHeaderFooterEditor(params: CreateHeaderFooterEditorParams): SuperEditor;
+export function onHeaderFooterDataUpdate(
+  params: OnHeaderFooterDataUpdateParams,
+  mainEditor: SuperEditor,
+  sectionId?: string,
+  type?: string,
+): Promise<void>;
diff --git a/packages/super-editor/src/extensions/pagination/pagination-helpers.js b/packages/super-editor/src/extensions/pagination/pagination-helpers.ts
similarity index 73%
rename from packages/super-editor/src/extensions/pagination/pagination-helpers.js
rename to packages/super-editor/src/extensions/pagination/pagination-helpers.ts
index aba4ae03d..897cabb48 100644
--- a/packages/super-editor/src/extensions/pagination/pagination-helpers.js
+++ b/packages/super-editor/src/extensions/pagination/pagination-helpers.ts
@@ -2,25 +2,41 @@ import { PluginKey } from 'prosemirror-state';
 import { Editor as SuperEditor } from '@core/Editor.js';
 import { getStarterExtensions } from '@extensions/index.js';
 import { updateYdocDocxData } from '@extensions/collaboration/collaboration-helpers.js';
-import { applyStyleIsolationClass } from '@/utils/styleIsolation.js';
-import { isHeadless } from '@/utils/headless-helpers.js';
+import { applyStyleIsolationClass } from '../../utils/styleIsolation.js';
+import { isHeadless } from '../../utils/headless-helpers';
+import type { EditorExtension } from '@core/index.js';
 
 export const PaginationPluginKey = new PluginKey('paginationPlugin');
 
+interface SectionDataEntry {
+  data?: unknown;
+  height?: number;
+  sectionEditor?: SuperEditor;
+  sectionContainer?: HTMLDivElement;
+}
+
+interface SectionData {
+  headers: Record<string, SectionDataEntry>;
+  footers: Record<string, SectionDataEntry>;
+}
+
+interface HeaderFooterEditorItem {
+  id?: string;
+  editor: SuperEditor;
+}
+
 /**
- * Initialize the pagination data for the editor
- * This will fetch the header and footer data from the converter and calculate their height
- * @param {SuperEditor} editor The editor instance
- * @returns {Object} The data for the headers and footers
+ * Initialize the pagination data for the editor.
+ * This will fetch the header and footer data from the converter and calculate their height.
  */
-export const initPaginationData = async (editor) => {
+export const initPaginationData = async (editor: SuperEditor): Promise<SectionData | undefined> => {
   if (isHeadless(editor) || !editor.converter) return;
 
-  const sectionData = { headers: {}, footers: {} };
-  const headerIds = editor.converter.headerIds.ids;
-  const footerIds = editor.converter.footerIds.ids;
+  const sectionData: SectionData = { headers: {}, footers: {} };
+  const headerIds = editor.converter.headerIds.ids as Record<string, string>;
+  const footerIds = editor.converter.footerIds.ids as Record<string, string>;
 
-  for (let key in headerIds) {
+  for (const key in headerIds) {
     const sectionId = headerIds[key];
     if (!sectionId) continue;
 
@@ -34,12 +50,12 @@ export const initPaginationData = async (editor) => {
     sectionData.headers[sectionId].sectionContainer = sectionContainer;
   }
 
-  for (let key in footerIds) {
+  for (const key in footerIds) {
     const sectionId = footerIds[key];
     if (!sectionId) continue;
 
     const dataForThisSection = editor.converter.footers[sectionId];
-    if (!sectionData.headers[sectionId]) sectionData.footers[sectionId] = {};
+    if (!sectionData.footers[sectionId]) sectionData.footers[sectionId] = {};
     sectionData.footers[sectionId].data = dataForThisSection;
     // Wait for the height to be resolved
     const { height, sectionEditor, sectionContainer } = await getSectionHeight(editor, dataForThisSection);
@@ -51,14 +67,17 @@ export const initPaginationData = async (editor) => {
   return sectionData;
 };
 
+interface SectionHeightResult {
+  height: number;
+  sectionEditor: SuperEditor;
+  sectionContainer: HTMLDivElement;
+}
+
 /**
- * Get the height of a section
- * @param {SuperEditor} editor The editor instance
- * @param {Object} data The data for the section
- * @returns {Promise<Object>} An object containing the height of the section, the section editor and the section container
+ * Get the height of a section.
  */
-const getSectionHeight = async (editor, data) => {
-  if (!data) return {};
+const getSectionHeight = async (editor: SuperEditor, data: unknown): Promise<SectionHeightResult> => {
+  if (!data) return {} as SectionHeightResult;
 
   return new Promise((resolve) => {
     const editorContainer = document.createElement('div');
@@ -80,6 +99,19 @@ const getSectionHeight = async (editor, data) => {
   });
 };
 
+interface CreateHeaderFooterEditorParams {
+  editor: SuperEditor;
+  data: unknown;
+  editorContainer: HTMLDivElement;
+  editorHost?: HTMLElement;
+  sectionId?: string;
+  type?: string;
+  availableWidth?: number;
+  availableHeight?: number;
+  currentPageNumber?: number;
+  totalPageCount?: number;
+}
+
 /**
  * Creates a header or footer editor instance.
  *
@@ -113,7 +145,7 @@ export const createHeaderFooterEditor = ({
   availableHeight,
   currentPageNumber,
   totalPageCount,
-}) => {
+}: CreateHeaderFooterEditorParams): SuperEditor => {
   // Validate required parameters
   if (!editor) {
     throw new TypeError('editor parameter is required');
@@ -197,20 +229,25 @@ export const createHeaderFooterEditor = ({
     document.body.appendChild(editorContainer);
   }
 
+  interface ImageExtensionStorage {
+    media?: Record<string, unknown>;
+  }
+
+  const storage = editor.storage;
+  const imageStorage = storage.image as ImageExtensionStorage | undefined;
   const headerFooterEditor = new SuperEditor({
     role: editor.options.role,
     loadFromSchema: true,
     mode: 'docx',
     element: editorContainer,
     content: data,
-    extensions: getStarterExtensions(),
+    extensions: getStarterExtensions() as EditorExtension[],
     documentId: sectionId || 'sectionId',
-    media: editor.storage.image.media,
-    mediaFiles: editor.storage.image.media,
+    media: imageStorage?.media,
+    mediaFiles: imageStorage?.media,
     fonts: editor.options.fonts,
     isHeaderOrFooter: true, // This flag prevents pagination from being enabled
     isHeadless: editor.options.isHeadless,
-    pagination: false, // Explicitly disable pagination
     annotations: true,
     currentPageNumber: currentPageNumber ?? 1,
     totalPageCount: totalPageCount ?? 1,
@@ -220,9 +257,9 @@ export const createHeaderFooterEditor = ({
     // PresentationEditor#enterHeaderFooterMode will call setEditable(true) when entering edit mode.
     editable: false,
     documentMode: 'viewing',
-    onCreate: (evt) => setEditorToolbar(evt, editor),
-    onBlur: (evt) => onHeaderFooterDataUpdate(evt, editor, sectionId, type),
-  });
+    onCreate: (evt: { editor: SuperEditor }) => setEditorToolbar(evt, editor),
+    onBlur: (evt: { editor: SuperEditor }) => onHeaderFooterDataUpdate(evt, editor, sectionId, type),
+  } as Record<string, unknown>);
 
   // Store parent editor reference separately to avoid circular reference in options
   // This allows access when needed without creating serialization issues
@@ -235,7 +272,7 @@ export const createHeaderFooterEditor = ({
   });
   headerFooterEditor.setEditable(false, false);
 
-  const pm = editorContainer.querySelector('.ProseMirror');
+  const pm = editorContainer.querySelector('.ProseMirror') as HTMLElement | null;
   if (pm) {
     pm.style.maxHeight = '100%';
     pm.style.minHeight = '100%';
@@ -243,14 +280,14 @@ export const createHeaderFooterEditor = ({
     pm.style.border = 'none';
 
     pm.setAttribute('role', 'textbox');
-    pm.setAttribute('aria-multiline', true);
+    pm.setAttribute('aria-multiline', 'true');
     pm.setAttribute('aria-label', `${type} content area. Double click to start typing.`);
   }
 
   return headerFooterEditor;
 };
 
-export const broadcastEditorEvents = (editor, sectionEditor) => {
+export const broadcastEditorEvents = (editor: SuperEditor, sectionEditor: SuperEditor): void => {
   const eventNames = [
     'fieldAnnotationDropped',
     'fieldAnnotationPaste',
@@ -258,27 +295,37 @@ export const broadcastEditorEvents = (editor, sectionEditor) => {
     'fieldAnnotationClicked',
     'fieldAnnotationDoubleClicked',
     'fieldAnnotationDeleted',
-  ];
+  ] as const;
   eventNames.forEach((eventName) => {
-    sectionEditor.on(eventName, (...args) => {
+    sectionEditor.on(eventName, (...args: unknown[]) => {
       editor.emit(eventName, ...args);
       console.debug('broadcastEditorEvents', { eventName, args });
     });
   });
 };
 
-export const toggleHeaderFooterEditMode = ({ editor, focusedSectionEditor, isEditMode, documentMode }) => {
+export const toggleHeaderFooterEditMode = ({
+  editor,
+  focusedSectionEditor,
+  isEditMode,
+  documentMode,
+}: {
+  editor: SuperEditor;
+  focusedSectionEditor?: SuperEditor | null;
+  isEditMode: boolean;
+  documentMode: string;
+}): void => {
   if (isHeadless(editor)) return;
 
-  editor.converter.headerEditors.forEach((item) => {
+  editor.converter.headerEditors.forEach((item: HeaderFooterEditorItem) => {
     item.editor.setEditable(isEditMode, false);
-    item.editor.view.dom.setAttribute('aria-readonly', !isEditMode);
+    item.editor.view.dom.setAttribute('aria-readonly', String(!isEditMode));
     item.editor.view.dom.setAttribute('documentmode', documentMode);
   });
 
-  editor.converter.footerEditors.forEach((item) => {
+  editor.converter.footerEditors.forEach((item: HeaderFooterEditorItem) => {
     item.editor.setEditable(isEditMode, false);
-    item.editor.view.dom.setAttribute('aria-readonly', !isEditMode);
+    item.editor.view.dom.setAttribute('aria-readonly', String(!isEditMode));
     item.editor.view.dom.setAttribute('documentmode', documentMode);
   });
 
@@ -286,7 +333,7 @@ export const toggleHeaderFooterEditMode = ({ editor, focusedSectionEditor, isEdi
     const pm = editor.view?.dom || editor.options.element?.querySelector?.('.ProseMirror');
     if (pm) {
       pm.classList.add('header-footer-edit');
-      pm.setAttribute('aria-readonly', true);
+      pm.setAttribute('aria-readonly', 'true');
     }
   }
 
@@ -295,13 +342,18 @@ export const toggleHeaderFooterEditMode = ({ editor, focusedSectionEditor, isEdi
   }
 };
 
-export const onHeaderFooterDataUpdate = async ({ editor, transaction }, mainEditor, sectionId, type) => {
+export const onHeaderFooterDataUpdate = async (
+  { editor, transaction }: { editor: SuperEditor; transaction?: { selection?: unknown } },
+  mainEditor: SuperEditor,
+  sectionId?: string,
+  type?: string,
+): Promise<void> => {
   if (!type || !sectionId) return;
 
   const updatedData = editor.getUpdatedJson();
-  const editorsList = mainEditor.converter[`${type}Editors`];
+  const editorsList = mainEditor.converter[`${type}Editors`] as HeaderFooterEditorItem[];
   if (Array.isArray(editorsList)) {
-    editorsList.forEach((item) => {
+    editorsList.forEach((item: HeaderFooterEditorItem) => {
       if (item.id === sectionId) {
         item.editor.setOptions({
           media: editor.options.media,
@@ -314,7 +366,7 @@ export const onHeaderFooterDataUpdate = async ({ editor, transaction }, mainEdit
         }
       }
       item.editor.setOptions({
-        lastSelection: transaction?.selection,
+        lastSelection: transaction?.selection ?? null,
       });
     });
   }
@@ -324,9 +376,11 @@ export const onHeaderFooterDataUpdate = async ({ editor, transaction }, mainEdit
     mainEditor.converter.headerFooterModified = true;
   }
 
-  await updateYdocDocxData(mainEditor);
+  await updateYdocDocxData(mainEditor, undefined);
 };
 
-const setEditorToolbar = ({ editor }, mainEditor) => {
-  editor.setToolbar(mainEditor.toolbar);
+const setEditorToolbar = ({ editor }: { editor: SuperEditor }, mainEditor: SuperEditor): void => {
+  if (mainEditor.toolbar) {
+    editor.setToolbar(mainEditor.toolbar);
+  }
 };
diff --git a/packages/super-editor/src/extensions/paragraph/NumberingManager.test.js b/packages/super-editor/src/extensions/paragraph/NumberingManager.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/paragraph/NumberingManager.test.js
rename to packages/super-editor/src/extensions/paragraph/NumberingManager.test.ts
diff --git a/packages/super-editor/src/extensions/paragraph/NumberingManager.js b/packages/super-editor/src/extensions/paragraph/NumberingManager.ts
similarity index 100%
rename from packages/super-editor/src/extensions/paragraph/NumberingManager.js
rename to packages/super-editor/src/extensions/paragraph/NumberingManager.ts
diff --git a/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.js b/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.ts
similarity index 99%
rename from packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.js
rename to packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.ts
index 7edb03a08..54cdde16b 100644
--- a/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.js
+++ b/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.test.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { ParagraphNodeView } from './ParagraphNodeView.js';
 import {
diff --git a/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.js b/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.ts
similarity index 60%
rename from packages/super-editor/src/extensions/paragraph/ParagraphNodeView.js
rename to packages/super-editor/src/extensions/paragraph/ParagraphNodeView.ts
index be759f1e0..2d0d24e72 100644
--- a/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.js
+++ b/packages/super-editor/src/extensions/paragraph/ParagraphNodeView.ts
@@ -1,40 +1,66 @@
 import { Attribute } from '@core/index.js';
 import { twipsToPixels } from '@converter/helpers.js';
 import { extractParagraphContext, calculateTabStyle } from '../tab/helpers/tabDecorations.js';
-import { resolveRunProperties, encodeCSSFromRPr, encodeCSSFromPPr } from '@converter/styles.js';
+import { resolveRunProperties, encodeCSSFromRPr, encodeCSSFromPPr } from '../../core/super-converter/styles.js';
 import { isList } from '@core/commands/list-helpers';
 import { getResolvedParagraphProperties, calculateResolvedParagraphProperties } from './resolvedPropertiesCache.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import { DecorationSet } from 'prosemirror-view';
+import type { Decoration, DecorationSource, NodeView, ViewMutationRecord } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+import type { ExtensionAttribute } from '@core/Attribute.js';
+import type { ParagraphProperties } from '@converter/styles.js';
 
 /**
  * A map to keep track of paragraph node views for quick access.
  * @type {WeakMap<import('prosemirror-model').Node, ParagraphNodeView>}
  */
-const nodeViewMap = new WeakMap();
+const nodeViewMap = new WeakMap<PmNode, ParagraphNodeView>();
 
 /**
  * ProseMirror node view that renders paragraphs, including special handling for
  * numbered/bulleted lists so marker/separator elements stay in sync with docx
  * layout expectations.
  */
-export class ParagraphNodeView {
-  /**
-   * @param {import('prosemirror-model').Node} node Current paragraph node.
-   * @param {import('../../core/Editor').Editor} editor Editor instance providing schema/helpers.
-   * @param {() => number} getPos Position getter provided by ProseMirror.
-   * @param {import('prosemirror-view').Decoration[]} decorations Decorations applied to this node.
-   * @param {Record<string, unknown>} extensionAttrs Extra attributes declared by the paragraph extension.
-   */
-  constructor(node, editor, getPos, decorations, extensionAttrs) {
+export class ParagraphNodeView implements NodeView {
+  dom: HTMLElement;
+  contentDOM: HTMLElement;
+  node: PmNode;
+  editor: Editor;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations?: DecorationSource | readonly Decoration[];
+  extensionAttrs: Record<string, unknown>;
+  private _forceUpdateNext = false;
+  _animationFrameRequest: number | null;
+  marker: HTMLElement | null;
+  separator: HTMLElement | Text | null;
+  surroundingContext: {
+    hasPreviousParagraph: boolean;
+    previousParagraph: PmNode | null;
+    nextParagraphProps: ParagraphProperties | null;
+  };
+
+  constructor(
+    node: PmNode,
+    editor: Editor,
+    getPos: () => number | undefined,
+    decorations: readonly Decoration[],
+    extensionAttrs: Record<string, unknown>,
+  ) {
     this.node = node;
     this.editor = editor;
     this.getPos = getPos;
     this.decorations = decorations;
     this.extensionAttrs = extensionAttrs;
     this._animationFrameRequest = null;
-    this.surroundingContext = {};
+    this.marker = null;
+    this.separator = null;
+    this.surroundingContext = { hasPreviousParagraph: false, previousParagraph: null, nextParagraphProps: null };
     nodeViewMap.set(this.node, this);
 
-    calculateResolvedParagraphProperties(this.editor, this.node, this.editor.state.doc.resolve(this.getPos()));
+    const initialPos = this.getPos?.() ?? 0;
+    calculateResolvedParagraphProperties(this.editor, this.node, this.editor.state.doc.resolve(initialPos));
 
     this.dom = document.createElement('p');
     this.contentDOM = document.createElement('span');
@@ -59,7 +85,7 @@ export class ParagraphNodeView {
    * @param {boolean} [forceUpdate=false]
    * @returns {boolean}
    */
-  update(node, decorations, innerDecorations, forceUpdate = false) {
+  update(node: PmNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
     // Remove cached reference for old node
     if (nodeViewMap.get(this.node) === this) {
       nodeViewMap.delete(this.node);
@@ -71,11 +97,15 @@ export class ParagraphNodeView {
     this.innerDecorations = innerDecorations;
     nodeViewMap.set(this.node, this);
 
+    const forceUpdate = this._forceUpdateNext;
+    this._forceUpdateNext = false;
+
     if (!forceUpdate && !this.#checkShouldUpdate(oldProps, oldAttrs, this.surroundingContext)) {
       return true;
     }
 
-    calculateResolvedParagraphProperties(this.editor, this.node, this.editor.state.doc.resolve(this.getPos()));
+    const currentPos = this.getPos?.() ?? 0;
+    calculateResolvedParagraphProperties(this.editor, this.node, this.editor.state.doc.resolve(currentPos));
 
     this.#updateHTMLAttributes();
     this.#updateDOMStyles(oldProps);
@@ -99,7 +129,11 @@ export class ParagraphNodeView {
    * @param {Record<string, unknown>} oldSurroundingContext
    * @returns {boolean}
    */
-  #checkShouldUpdate(oldProps, oldAttrs, oldSurroundingContext) {
+  #checkShouldUpdate(
+    oldProps: Record<string, unknown> | undefined,
+    oldAttrs: Record<string, unknown>,
+    oldSurroundingContext: Record<string, unknown>,
+  ) {
     this.#resolveNeighborParagraphProperties();
     return (
       JSON.stringify(oldAttrs) !== JSON.stringify(this.node.attrs) ||
@@ -112,19 +146,23 @@ export class ParagraphNodeView {
    * Updates the HTML attributes of the paragraph DOM element based on node attributes and properties.
    */
   #updateHTMLAttributes() {
-    const htmlAttributes = Attribute.getAttributesToRender(this.node, this.extensionAttrs);
+    const htmlAttributes = Attribute.getAttributesToRender(
+      this.node,
+      this.extensionAttrs as unknown as ExtensionAttribute[],
+    );
     htmlAttributes.style = htmlAttributes.style || '';
     for (const [key, value] of Object.entries(htmlAttributes || {})) {
       if (value == null) {
         this.dom.removeAttribute(key);
         continue;
       }
-      this.dom.setAttribute(key, value);
+      this.dom.setAttribute(key, String(value));
     }
-    const paragraphProperties = getResolvedParagraphProperties(this.node);
-    if (this.#checkIsList()) {
-      this.dom.setAttribute('data-num-id', paragraphProperties.numberingProperties.numId);
-      this.dom.setAttribute('data-level', paragraphProperties.numberingProperties.ilvl);
+    const paragraphProperties = getResolvedParagraphProperties(this.node) ?? {};
+    const numbering = paragraphProperties.numberingProperties;
+    if (this.#checkIsList() && numbering) {
+      this.dom.setAttribute('data-num-id', String(numbering.numId ?? ''));
+      this.dom.setAttribute('data-level', String(numbering.ilvl ?? ''));
     } else {
       this.dom.removeAttribute('data-num-id');
       this.dom.removeAttribute('data-level');
@@ -136,7 +174,7 @@ export class ParagraphNodeView {
     }
 
     if (paragraphProperties.styleId) {
-      this.dom.setAttribute('styleid', paragraphProperties.styleId);
+      this.dom.setAttribute('styleid', String(paragraphProperties.styleId));
     }
   }
 
@@ -144,26 +182,32 @@ export class ParagraphNodeView {
    * Updates the CSS styles of the paragraph DOM element based on resolved paragraph properties.
    * @param {Record<string, unknown> | null} oldParagraphProperties
    */
-  #updateDOMStyles(oldParagraphProperties = null) {
+  #updateDOMStyles(oldParagraphProperties: ParagraphProperties | null = null) {
     this.dom.style.cssText = '';
-    const paragraphProperties = getResolvedParagraphProperties(this.node);
+    const paragraphProperties: ParagraphProperties = getResolvedParagraphProperties(this.node) ?? {};
     this.#resolveNeighborParagraphProperties();
 
     const style = encodeCSSFromPPr(
       paragraphProperties,
-      this.surroundingContext.hasPreviousParagraph,
+      this.surroundingContext.hasPreviousParagraph ?? false,
       this.surroundingContext.nextParagraphProps,
     );
     Object.entries(style).forEach(([k, v]) => {
-      this.dom.style[k] = v;
+      if (k in this.dom.style && typeof v === 'string') {
+        // Convert camelCase to kebab-case for CSS properties
+        const kebabKey = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        this.dom.style.setProperty(kebabKey, v);
+      }
     });
 
     // Check if spacing-related props changed and if so, trigger update on previous paragraph so it can adjust its bottom spacing
-    if (
-      JSON.stringify(paragraphProperties.spacing) !== JSON.stringify(oldParagraphProperties?.spacing) ||
-      paragraphProperties.styleId !== oldParagraphProperties?.styleId ||
-      paragraphProperties.contextualSpacing !== oldParagraphProperties?.contextualSpacing
-    ) {
+    const spacingChanged =
+      JSON.stringify(paragraphProperties.spacing ?? null) !== JSON.stringify(oldParagraphProperties?.spacing ?? null);
+    const styleIdChanged = paragraphProperties.styleId !== oldParagraphProperties?.styleId;
+    const contextualSpacingChanged =
+      paragraphProperties.contextualSpacing !== oldParagraphProperties?.contextualSpacing;
+
+    if (spacingChanged || styleIdChanged || contextualSpacingChanged) {
       const previousNodeView = this.surroundingContext.previousParagraph
         ? nodeViewMap.get(this.surroundingContext.previousParagraph)
         : null;
@@ -171,15 +215,18 @@ export class ParagraphNodeView {
         // Check if the previous node view is still valid
         try {
           previousNodeView.getPos();
-        } catch {
+        } catch (error) {
+          console.warn('Failed to get position for previous paragraph node view:', error);
           return;
         }
-        previousNodeView.update(
-          previousNodeView.node,
-          previousNodeView.decorations,
-          previousNodeView.innerDecorations,
-          true,
-        );
+        previousNodeView._forceUpdateNext = true;
+        const inner: DecorationSource =
+          previousNodeView.innerDecorations && !Array.isArray(previousNodeView.innerDecorations)
+            ? (previousNodeView.innerDecorations as DecorationSource)
+            : Array.isArray(previousNodeView.innerDecorations)
+              ? DecorationSet.create(this.editor.state.doc, previousNodeView.innerDecorations)
+              : DecorationSet.empty;
+        previousNodeView.update(previousNodeView.node, previousNodeView.decorations, inner);
       }
     }
   }
@@ -188,12 +235,13 @@ export class ParagraphNodeView {
    * Resolves properties of neighboring paragraphs to determine surrounding context.
    */
   #resolveNeighborParagraphProperties() {
-    const $pos = this.editor.state.doc.resolve(this.getPos());
+    const pos = this.getPos ? (this.getPos() ?? 0) : 0;
+    const $pos = this.editor.state.doc.resolve(pos);
     const parent = $pos.parent;
     const index = $pos.index();
     let hasPreviousParagraph = false;
-    let previousParagraph = null;
-    let nextParagraphProps = null;
+    let previousParagraph: PmNode | null = null;
+    let nextParagraphProps: ParagraphProperties | null = null;
     if (index > 0) {
       const previousNode = parent.child(index - 1);
       hasPreviousParagraph =
@@ -206,7 +254,7 @@ export class ParagraphNodeView {
       if (index < parent.childCount - 1) {
         const nextNode = parent.child(index + 1);
         if (nextNode.type.name === 'paragraph') {
-          nextParagraphProps = getResolvedParagraphProperties(nextNode);
+          nextParagraphProps = getResolvedParagraphProperties(nextNode) ?? null;
         }
       }
     }
@@ -223,32 +271,55 @@ export class ParagraphNodeView {
    * @returns {boolean}
    */
   #updateListStyles() {
-    let { suffix, justification } = this.node.attrs.listRendering;
-    suffix = suffix ?? 'tab';
-    this.#calculateMarkerStyle(justification);
+    if (!this.marker) return true;
+    const { suffix: suffixRaw, justification } = this.node.attrs.listRendering || {};
+    const suffix = suffixRaw ?? 'tab';
+    const justificationValue = (justification as 'left' | 'right' | 'center') ?? 'left';
+    this.#calculateMarkerStyle(justificationValue);
     if (suffix === 'tab') {
-      const paragraphProperties = getResolvedParagraphProperties(this.node);
-      this.#calculateTabSeparatorStyle(justification, paragraphProperties.indent);
+      const paragraphProperties = getResolvedParagraphProperties(this.node) ?? {};
+      const indent =
+        paragraphProperties.indent &&
+        typeof paragraphProperties.indent === 'object' &&
+        'hanging' in paragraphProperties.indent
+          ? (paragraphProperties.indent as { hanging?: number; firstLine?: number })
+          : null;
+      this.#calculateTabSeparatorStyle(justificationValue, indent);
     } else {
-      this.separator.textContent = suffix === 'space' ? '\u00A0' : '';
+      if (this.separator) {
+        this.separator.textContent = suffix === 'space' ? '\u00A0' : '';
+      }
     }
 
     return true;
   }
 
-  /**
-   * @param {MutationRecord} mutation
-   */
-  ignoreMutation(mutation) {
+  ignoreMutation = (mutation: ViewMutationRecord): boolean => {
     // Ignore mutations to the list marker and separator}
-    if (this.marker && (mutation.target === this.marker || this.marker.contains(mutation.target))) {
+    if (
+      this.marker &&
+      'target' in mutation &&
+      mutation.target instanceof Node &&
+      (mutation.target === this.marker || this.marker.contains(mutation.target))
+    ) {
       return true;
     }
-    if (this.separator && (mutation.target === this.separator || this.separator.contains(mutation.target))) {
+    if (
+      this.separator &&
+      'target' in mutation &&
+      mutation.target instanceof Node &&
+      (mutation.target === this.separator ||
+        (this.separator instanceof HTMLElement && this.separator.contains(mutation.target)))
+    ) {
       return true;
     }
     // Ignore style attribute changes on the paragraph DOM element
-    if (mutation.type === 'attributes' && mutation.target === this.dom && mutation.attributeName === 'style') {
+    if (
+      mutation.type === 'attributes' &&
+      'target' in mutation &&
+      mutation.target === this.dom &&
+      (mutation as MutationRecord).attributeName === 'style'
+    ) {
       return true;
     }
     // Ignore addition/removal of marker/separator nodes
@@ -268,24 +339,18 @@ export class ParagraphNodeView {
       }
     }
     return false;
-  }
+  };
 
-  /**
-   * @param {{ markerText: string, suffix?: string }} listRendering
-   */
-  #initList(listRendering) {
+  #initList(listRendering: { markerText: string; suffix?: string }): void {
     this.#createMarker(listRendering.markerText);
     this.#createSeparator(listRendering.suffix);
   }
 
-  #checkIsList() {
+  #checkIsList(): boolean {
     return isList(this.node);
   }
 
-  /**
-   * @param {string} markerText
-   */
-  #createMarker(markerText) {
+  #createMarker(markerText: string): void {
     if (!this.marker) {
       this.marker = document.createElement('span');
       this.dom.insertBefore(this.marker, this.contentDOM);
@@ -295,32 +360,49 @@ export class ParagraphNodeView {
     this.marker.textContent = markerText;
   }
 
-  /**
-   * @param {'tab' | 'space' | 'nothing'} [suffix]
-   */
-  #createSeparator(suffix) {
+  #createSeparator(suffix?: string): void {
+    if (!this.marker) return;
+
     if (suffix === 'tab' || suffix == null) {
-      if (this.separator == null || this.separator.tagName?.toLowerCase() !== 'span') {
-        this.separator?.parentNode?.removeChild(this.separator);
+      if (this.separator == null || (this.separator as HTMLElement).tagName?.toLowerCase() !== 'span') {
+        if (this.separator?.parentNode) {
+          this.separator.parentNode.removeChild(this.separator);
+        }
         this.separator = document.createElement('span');
-        this.marker.after(this.separator);
+        if (this.marker.parentNode) {
+          this.marker.after(this.separator);
+        }
+      }
+      if (this.separator instanceof HTMLElement) {
+        this.separator.className = 'sd-editor-tab';
+        this.separator.contentEditable = 'false';
       }
-      this.separator.className = 'sd-editor-tab';
-      this.separator.contentEditable = 'false';
     } else if (suffix === 'space') {
       if (this.separator == null || this.separator.nodeType !== Node.TEXT_NODE) {
-        this.separator?.parentNode?.removeChild(this.separator);
+        if (this.separator?.parentNode) {
+          this.separator.parentNode.removeChild(this.separator);
+        }
         this.separator = document.createTextNode('\u00A0');
-        this.marker.after(this.separator);
+        if (this.marker.parentNode) {
+          this.marker.after(this.separator);
+        }
+      }
+      if (this.separator) {
+        this.separator.textContent = '\u00A0';
       }
-      this.separator.textContent = '\u00A0';
     } else if (suffix === 'nothing') {
       if (this.separator == null || this.separator.nodeType !== Node.TEXT_NODE) {
-        this.separator?.parentNode?.removeChild(this.separator);
+        if (this.separator?.parentNode) {
+          this.separator.parentNode.removeChild(this.separator);
+        }
         this.separator = document.createTextNode('');
-        this.marker.after(this.separator);
+        if (this.marker.parentNode) {
+          this.marker.after(this.separator);
+        }
+      }
+      if (this.separator) {
+        this.separator.textContent = '';
       }
-      this.separator.textContent = '';
     }
   }
 
@@ -340,14 +422,14 @@ export class ParagraphNodeView {
    * For center alignment:
    *   - The tab character extends to the next tab stop
    */
-  /**
-   * @param {'left' | 'right' | 'center'} justification
-   * @param {{ hanging?: number, firstLine?: number } | null} indent
-   */
-  #calculateTabSeparatorStyle(justification, indent) {
+  #calculateTabSeparatorStyle(
+    justification: 'left' | 'right' | 'center',
+    indent: { hanging?: number; firstLine?: number } | null,
+  ): void {
+    if (!this.marker || !this.separator) return;
     const markerWidth = this.marker.getBoundingClientRect().width;
     let tabStyle;
-    let { paragraphContext, start } = this.#getParagraphContext();
+    const { paragraphContext, start } = this.#getParagraphContext();
 
     if (justification === 'right') {
       if (indent?.hanging || (!indent?.hanging && !indent?.firstLine)) {
@@ -369,7 +451,9 @@ export class ParagraphNodeView {
       const tabNode = this.editor.schema.nodes.tab.create(null);
       tabStyle = calculateTabStyle(tabNode.nodeSize, this.editor.view, start, this.node, paragraphContext);
     }
-    this.separator.style.cssText = tabStyle;
+    if (this.separator && 'style' in this.separator && tabStyle) {
+      (this.separator as HTMLElement).style.cssText = tabStyle;
+    }
   }
 
   /**
@@ -385,18 +469,17 @@ export class ParagraphNodeView {
    *
    * The left/center/right alignment positioning uses the left indent (+ firstLine if present) as the anchor point.
    */
-  /**
-   * @param {'left' | 'right' | 'center'} justification
-   */
-  #calculateMarkerStyle(justification) {
+  #calculateMarkerStyle(justification: 'left' | 'right' | 'center'): void {
+    if (!this.marker) return;
+    const markerEl = this.marker;
     // START: modify after CSS styles
-    const paragraphProperties = getResolvedParagraphProperties(this.node);
+    const paragraphProperties = getResolvedParagraphProperties(this.node) ?? {};
     const runProperties = resolveRunProperties(
       { docx: this.editor.converter.convertedXml, numbering: this.editor.converter.numbering },
       paragraphProperties.runProperties || {},
       paragraphProperties,
       true,
-      Boolean(this.node.attrs.paragraphProperties.numberingProperties),
+      Boolean(this.node.attrs.paragraphProperties?.numberingProperties),
     );
     const style = encodeCSSFromRPr(runProperties, this.editor.converter.convertedXml);
     this.marker.style.cssText = Object.entries(style)
@@ -404,13 +487,18 @@ export class ParagraphNodeView {
       .join(' ');
     // END: modify after CSS styles
 
-    let markerStyle = {
+    const markerStyle: {
+      position: string;
+      left: string;
+      bottom: string;
+      top?: string;
+    } = {
       position: '',
       left: '',
       bottom: '',
     };
 
-    let domStyle = {
+    const domStyle = {
       position: '',
     };
 
@@ -418,7 +506,7 @@ export class ParagraphNodeView {
       let top = '0';
       if (globalThis) {
         const computedStyle = globalThis.getComputedStyle(this.dom);
-        const markerComputedStyle = globalThis.getComputedStyle(this.marker);
+        const markerComputedStyle = globalThis.getComputedStyle(markerEl);
         const lineHeight = parseFloat(computedStyle.lineHeight);
         const markerLineHeight = parseFloat(markerComputedStyle.lineHeight);
         top = `${lineHeight - markerLineHeight}px`;
@@ -426,7 +514,7 @@ export class ParagraphNodeView {
       return top;
     };
 
-    const rect = this.marker.getBoundingClientRect();
+    const rect = markerEl.getBoundingClientRect();
     const markerWidth = rect.width;
     if (justification === 'right') {
       markerStyle.position = 'absolute';
@@ -440,36 +528,34 @@ export class ParagraphNodeView {
       domStyle.position = 'relative';
     }
     Object.entries(markerStyle).forEach(([k, v]) => {
-      this.marker.style[k] = v;
+      markerEl.style.setProperty(k, v);
     });
     Object.entries(domStyle).forEach(([k, v]) => {
-      this.dom.style[k] = v;
+      this.dom.style.setProperty(k, v);
     });
   }
 
   #removeList() {
     if (this.marker) {
-      this.dom.removeChild(this.marker);
+      this.dom.removeChild(this.marker as Element);
       this.marker = null;
     }
     if (this.separator) {
-      this.dom.removeChild(this.separator);
+      this.dom.removeChild(this.separator as unknown as Node);
       this.separator = null;
     }
     this.dom.style.position = '';
   }
 
   #getParagraphContext() {
-    const $pos = this.editor.state.doc.resolve(this.getPos());
+    const pos = this.getPos?.() ?? 0;
+    const $pos = this.editor.state.doc.resolve(pos);
     const start = $pos.start($pos.depth + 1);
     const paragraphContext = extractParagraphContext(this.node, start, this.editor.helpers);
     return { paragraphContext, start };
   }
 
-  /**
-   * @param {() => void} fn
-   */
-  #scheduleAnimation(fn) {
+  #scheduleAnimation(fn: () => void): void {
     if (typeof globalThis === 'undefined') {
       return;
     }
@@ -482,7 +568,7 @@ export class ParagraphNodeView {
     });
   }
 
-  #cancelScheduledAnimation() {
+  #cancelScheduledAnimation(): void {
     if (typeof globalThis === 'undefined' || !this._animationFrameRequest) {
       return;
     }
@@ -490,7 +576,7 @@ export class ParagraphNodeView {
     this._animationFrameRequest = null;
   }
 
-  destroy() {
+  destroy(): void {
     this.#cancelScheduledAnimation();
     if (nodeViewMap.get(this.node) === this) {
       nodeViewMap.delete(this.node);
diff --git a/packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.js b/packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.ts
similarity index 99%
rename from packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.js
rename to packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.ts
index 5819d7f5c..537e46520 100644
--- a/packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.js
+++ b/packages/super-editor/src/extensions/paragraph/dropcapPlugin.test.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { Schema } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
diff --git a/packages/super-editor/src/extensions/paragraph/dropcapPlugin.js b/packages/super-editor/src/extensions/paragraph/dropcapPlugin.ts
similarity index 75%
rename from packages/super-editor/src/extensions/paragraph/dropcapPlugin.js
rename to packages/super-editor/src/extensions/paragraph/dropcapPlugin.ts
index 1456bbb3c..39a3e9858 100644
--- a/packages/super-editor/src/extensions/paragraph/dropcapPlugin.js
+++ b/packages/super-editor/src/extensions/paragraph/dropcapPlugin.ts
@@ -1,18 +1,20 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { ReplaceStep } from 'prosemirror-transform';
 import { calculateResolvedParagraphProperties } from './resolvedPropertiesCache.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
 
-export function createDropcapPlugin(editor) {
+export function createDropcapPlugin(editor: Editor): Plugin {
   const { view } = editor;
-  const dropcapWidthCache = new Map();
+  const dropcapWidthCache = new Map<number, number>();
 
   /**
    * Removes cached dropcap widths that fall within the affected document range.
-   * @param {number} from - Start position of an updated range.
-   * @param {number} to - End position of an updated range.
-   * @returns {void}
    */
-  const invalidateCacheForRange = (from, to) => {
+  const invalidateCacheForRange = (from: number, to: number): void => {
     for (const [pos] of dropcapWidthCache) {
       if (pos >= from && pos <= to) {
         dropcapWidthCache.delete(pos);
@@ -20,8 +22,12 @@ export function createDropcapPlugin(editor) {
     }
   };
 
-  const getDropcapDecorations = (state, view, widthCache) => {
-    const decorations = [];
+  const getDropcapDecorations = (
+    state: EditorState,
+    view: EditorView,
+    widthCache: Map<number, number>,
+  ): Decoration[] => {
+    const decorations: Decoration[] = [];
 
     state.doc.descendants((node, pos) => {
       if (hasDropcapParagraph(node, pos, state)) {
@@ -36,9 +42,9 @@ export function createDropcapPlugin(editor) {
     return decorations;
   };
 
-  function getDropcapWidth(view, pos, widthCache) {
+  function getDropcapWidth(view: EditorView, pos: number, widthCache: Map<number, number>): number {
     if (widthCache.has(pos)) {
-      return widthCache.get(pos);
+      return widthCache.get(pos) ?? 0;
     }
 
     const domNode = view.nodeDOM(pos);
@@ -55,10 +61,8 @@ export function createDropcapPlugin(editor) {
 
   /**
    * Determines whether the node is a margin dropcap paragraph.
-   * @param {import('prosemirror-model').Node} node - Node to inspect.
-   * @returns {boolean} True when the paragraph uses margin dropcaps.
    */
-  const hasDropcapParagraph = (node, pos, state) => {
+  const hasDropcapParagraph = (node: PmNode, pos: number, state: EditorState): boolean => {
     if (node.type.name !== 'paragraph') return false;
     const paragraphProps = calculateResolvedParagraphProperties(editor, node, state.doc.resolve(pos));
     return paragraphProps.framePr?.dropCap === 'margin';
@@ -94,7 +98,7 @@ export function createDropcapPlugin(editor) {
         let affectsDropcaps = false;
 
         tr.steps.forEach((step) => {
-          if (step.slice?.content) {
+          if (step instanceof ReplaceStep && step.slice?.content) {
             step.slice.content.descendants((node, pos) => {
               if (hasDropcapParagraph(node, pos, newState)) {
                 affectsDropcaps = true;
@@ -103,7 +107,7 @@ export function createDropcapPlugin(editor) {
             });
           }
 
-          if (step.jsonID === 'replace' && step.from !== undefined && step.to !== undefined) {
+          if (step instanceof ReplaceStep && step.from !== undefined && step.to !== undefined) {
             try {
               oldState.doc.nodesBetween(step.from, step.to, (node, pos) => {
                 if (hasDropcapParagraph(node, pos, newState)) {
@@ -123,7 +127,7 @@ export function createDropcapPlugin(editor) {
 
         // Invalidate cached widths for affected ranges
         tr.steps.forEach((step) => {
-          if (step.from !== undefined && step.to !== undefined) {
+          if (step instanceof ReplaceStep && step.from !== undefined && step.to !== undefined) {
             invalidateCacheForRange(step.from, step.to);
           }
         });
diff --git a/packages/super-editor/src/extensions/paragraph/helpers/getDefaultSpacing.js b/packages/super-editor/src/extensions/paragraph/helpers/getDefaultSpacing.ts
similarity index 100%
rename from packages/super-editor/src/extensions/paragraph/helpers/getDefaultSpacing.js
rename to packages/super-editor/src/extensions/paragraph/helpers/getDefaultSpacing.ts
diff --git a/packages/super-editor/src/extensions/paragraph/helpers/parseAttrs.d.ts b/packages/super-editor/src/extensions/paragraph/helpers/parseAttrs.d.ts
new file mode 100644
index 000000000..fafffb6db
--- /dev/null
+++ b/packages/super-editor/src/extensions/paragraph/helpers/parseAttrs.d.ts
@@ -0,0 +1,7 @@
+export type ParsedParagraphAttrs = {
+  paragraphProperties: Record<string, unknown> & { styleId?: string | null };
+  extraAttrs: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export function parseAttrs(node: Element): ParsedParagraphAttrs;
diff --git a/packages/super-editor/src/extensions/paragraph/index.js b/packages/super-editor/src/extensions/paragraph/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/paragraph/index.js
rename to packages/super-editor/src/extensions/paragraph/index.ts
diff --git a/packages/super-editor/src/extensions/paragraph/numberingPlugin.js b/packages/super-editor/src/extensions/paragraph/numberingPlugin.js
deleted file mode 100644
index 17b6b690e..000000000
--- a/packages/super-editor/src/extensions/paragraph/numberingPlugin.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { NumberingManager } from './NumberingManager.js';
-import { ListHelpers } from '@helpers/list-numbering-helpers.js';
-import { generateOrderedListIndex } from '@helpers/orderedListUtils.js';
-import { docxNumberingHelpers } from '@core/super-converter/v2/importer/listImporter.js';
-import { calculateResolvedParagraphProperties } from './resolvedPropertiesCache.js';
-
-/**
- * Create a ProseMirror plugin that keeps `listRendering` data in sync with the
- * underlying Word numbering definitions.
- *
- * @param {import('../../core/Editor').Editor} editor The active editor instance.
- * @returns {import('prosemirror-state').Plugin}
- */
-export function createNumberingPlugin(editor) {
-  const numberingManager = NumberingManager();
-
-  // Helpers to initialize and refresh start settings from definitions
-  const applyStartSettingsFromDefinitions = (definitionsMap) => {
-    Object.entries(definitionsMap || {}).forEach(([numId, levels]) => {
-      Object.entries(levels || {}).forEach(([level, def]) => {
-        const start = parseInt(def?.start) || 1;
-        let restart = def?.restart;
-        if (restart != null) {
-          restart = parseInt(restart);
-        }
-        numberingManager.setStartSettings(numId, parseInt(level), start, restart);
-      });
-    });
-  };
-
-  // Callback to refresh start settings when definitions change
-  const refreshStartSettings = () => {
-    const definitions = ListHelpers.getAllListDefinitions(editor);
-    applyStartSettingsFromDefinitions(definitions);
-  };
-
-  // Initial setup
-  refreshStartSettings();
-
-  // Listen for definition changes
-  if (typeof editor?.on === 'function') {
-    editor.on('list-definitions-change', refreshStartSettings);
-    if (typeof editor?.off === 'function') {
-      const cleanupListDefinitionListener = () => {
-        editor.off('list-definitions-change', refreshStartSettings);
-        editor.off?.('destroy', cleanupListDefinitionListener);
-      };
-      editor.on('destroy', cleanupListDefinitionListener);
-    }
-  }
-
-  return new Plugin({
-    name: 'numberingPlugin',
-    key: new PluginKey('numberingPlugin'),
-    /**
-     * Scan document changes and collect fresh numbering metadata for list
-     * paragraphs. The incoming transactions are marked to avoid reprocessing.
-     *
-     * @param {import('prosemirror-state').Transaction[]} transactions
-     * @param {import('prosemirror-state').EditorState} oldState
-     * @param {import('prosemirror-state').EditorState} newState
-     * @returns {import('prosemirror-state').Transaction | null}
-     */
-    appendTransaction(transactions, oldState, newState) {
-      const isFromPlugin = transactions.some((tr) => tr.getMeta('orderedListSync'));
-      if (isFromPlugin || !transactions.some((tr) => tr.docChanged)) {
-        return null;
-      }
-
-      // Mark the transaction to avoid re-processing
-      const tr = newState.tr;
-      tr.setMeta('orderedListSync', true);
-
-      // Generate new list properties
-      numberingManager.enableCache();
-      newState.doc.descendants((node, pos) => {
-        let resolvedProps = calculateResolvedParagraphProperties(editor, node, newState.doc.resolve(pos));
-        if (node.type.name !== 'paragraph' || !resolvedProps.numberingProperties) {
-          return;
-        }
-
-        // Retrieving numbering definition from docx
-        const { numId, ilvl: level = 0 } = resolvedProps.numberingProperties;
-        const definitionDetails = ListHelpers.getListDefinitionDetails({ numId, level, editor });
-
-        if (!definitionDetails || Object.keys(definitionDetails).length === 0) {
-          // Treat as normal paragraph if definition is missing
-          tr.setNodeAttribute(pos, 'listRendering', null);
-          return;
-        }
-
-        let { lvlText, customFormat, listNumberingType, suffix, justification, abstractId } = definitionDetails;
-        // Defining the list marker
-        let markerText = '';
-        listNumberingType = listNumberingType || 'decimal';
-        const count = numberingManager.calculateCounter(numId, level, pos, abstractId);
-        numberingManager.setCounter(numId, level, pos, count, abstractId);
-        const path = numberingManager.calculatePath(numId, level, pos);
-        if (listNumberingType !== 'bullet') {
-          markerText = generateOrderedListIndex({
-            listLevel: path,
-            lvlText: lvlText,
-            listNumberingType,
-            customFormat,
-          });
-        } else {
-          markerText = docxNumberingHelpers.normalizeLvlTextChar(lvlText);
-        }
-
-        const newListRendering = {
-          markerText,
-          suffix,
-          justification,
-          path,
-          numberingType: listNumberingType,
-        };
-
-        if (JSON.stringify(node.attrs.listRendering) !== JSON.stringify(newListRendering)) {
-          // Updating rendering attrs for node view usage
-          tr.setNodeAttribute(pos, 'listRendering', newListRendering);
-        }
-
-        return false; // no need to descend into a paragraph
-      });
-      numberingManager.disableCache();
-      return tr.docChanged ? tr : null;
-    },
-  });
-}
diff --git a/packages/super-editor/src/extensions/paragraph/numberingPlugin.test.js b/packages/super-editor/src/extensions/paragraph/numberingPlugin.test.ts
similarity index 99%
rename from packages/super-editor/src/extensions/paragraph/numberingPlugin.test.js
rename to packages/super-editor/src/extensions/paragraph/numberingPlugin.test.ts
index 9ae7c893d..4e6ee5060 100644
--- a/packages/super-editor/src/extensions/paragraph/numberingPlugin.test.js
+++ b/packages/super-editor/src/extensions/paragraph/numberingPlugin.test.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { createNumberingPlugin } from './numberingPlugin.js';
 import { NumberingManager } from './NumberingManager.js';
diff --git a/packages/super-editor/src/extensions/paragraph/numberingPlugin.ts b/packages/super-editor/src/extensions/paragraph/numberingPlugin.ts
new file mode 100644
index 000000000..f54d6492d
--- /dev/null
+++ b/packages/super-editor/src/extensions/paragraph/numberingPlugin.ts
@@ -0,0 +1,189 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { NumberingManager } from './NumberingManager.js';
+import { ListHelpers } from '@helpers/list-numbering-helpers.js';
+import { generateOrderedListIndex } from '@helpers/orderedListUtils.js';
+import { docxNumberingHelpers } from '@core/super-converter/v2/importer/listImporter.js';
+import { calculateResolvedParagraphProperties } from './resolvedPropertiesCache.js';
+import type { Editor } from '@core/Editor.js';
+import type { Transaction } from 'prosemirror-state';
+import type { EditorState } from 'prosemirror-state';
+
+/**
+ * Create a ProseMirror plugin that keeps `listRendering` data in sync with the
+ * underlying Word numbering definitions.
+ */
+export function createNumberingPlugin(editor: Editor): Plugin {
+  const numberingManager = NumberingManager();
+
+  // Helpers to initialize and refresh start settings from definitions
+  const applyStartSettingsFromDefinitions = (definitionsMap: Record<string, unknown>): void => {
+    if (!definitionsMap || typeof definitionsMap !== 'object') {
+      return;
+    }
+
+    Object.entries(definitionsMap).forEach(([numId, levels]) => {
+      if (!levels || typeof levels !== 'object' || Array.isArray(levels)) {
+        return;
+      }
+
+      Object.entries(levels as Record<string, unknown>).forEach(([level, def]: [string, unknown]) => {
+        if (!def || typeof def !== 'object') {
+          return;
+        }
+
+        const defObj = def as Record<string, unknown>;
+        const start = parseInt(String(defObj.start ?? ''), 10) || 1;
+        let restart: number | undefined;
+        const restartRaw = defObj.restart;
+        if (restartRaw != null) {
+          const parsedRestart = parseInt(String(restartRaw), 10);
+          if (!isNaN(parsedRestart)) {
+            restart = parsedRestart;
+          }
+        }
+        numberingManager.setStartSettings(numId, parseInt(level, 10), start, restart);
+      });
+    });
+  };
+
+  // Callback to refresh start settings when definitions change
+  const refreshStartSettings = (): void => {
+    const definitions = ListHelpers.getAllListDefinitions(editor);
+    applyStartSettingsFromDefinitions(definitions);
+  };
+
+  // Initial setup
+  refreshStartSettings();
+
+  // Listen for definition changes
+  if (typeof editor?.on === 'function') {
+    editor.on('list-definitions-change', refreshStartSettings);
+    if (typeof editor?.off === 'function') {
+      const cleanupListDefinitionListener = () => {
+        editor.off('list-definitions-change', refreshStartSettings);
+        editor.off?.('destroy', cleanupListDefinitionListener);
+      };
+      editor.on('destroy', cleanupListDefinitionListener);
+    }
+  }
+
+  return new Plugin({
+    name: 'numberingPlugin',
+    key: new PluginKey('numberingPlugin'),
+    /**
+     * Scan document changes and collect fresh numbering metadata for list
+     * paragraphs. The incoming transactions are marked to avoid reprocessing.
+     */
+    appendTransaction(
+      transactions: readonly Transaction[],
+      oldState: EditorState,
+      newState: EditorState,
+    ): Transaction | null {
+      const isFromPlugin = transactions.some((tr) => tr.getMeta('orderedListSync'));
+      if (isFromPlugin || !transactions.some((tr) => tr.docChanged)) {
+        return null;
+      }
+
+      // Mark the transaction to avoid re-processing
+      const tr = newState.tr;
+      tr.setMeta('orderedListSync', true);
+
+      // Generate new list properties
+      numberingManager.enableCache();
+      newState.doc.descendants((node, pos) => {
+        const resolvedProps = calculateResolvedParagraphProperties(editor, node, newState.doc.resolve(pos));
+        if (!resolvedProps) {
+          return;
+        }
+        const numberingProps = resolvedProps.numberingProperties;
+        if (
+          node.type.name !== 'paragraph' ||
+          !numberingProps ||
+          numberingProps.numId === undefined ||
+          numberingProps.numId === null
+        ) {
+          return;
+        }
+
+        // Retrieving numbering definition from docx
+        const rawNumId = numberingProps.numId;
+        const rawLevel = numberingProps.ilvl;
+        const numIdValue =
+          typeof rawNumId === 'string' ? parseInt(rawNumId, 10) : typeof rawNumId === 'number' ? rawNumId : NaN;
+        if (!Number.isFinite(numIdValue)) {
+          tr.setNodeAttribute(pos, 'listRendering', null);
+          return;
+        }
+        const levelValue =
+          typeof rawLevel === 'string' ? parseInt(rawLevel, 10) : typeof rawLevel === 'number' ? rawLevel : 0;
+        const definitionDetails = ListHelpers.getListDefinitionDetails({
+          numId: numIdValue,
+          level: levelValue,
+          listType: undefined,
+          editor,
+        });
+
+        // Validate that definition details exist and have expected structure
+        if (
+          !definitionDetails ||
+          typeof definitionDetails !== 'object' ||
+          Object.keys(definitionDetails).length === 0
+        ) {
+          // Treat as normal paragraph if definition is missing
+          tr.setNodeAttribute(pos, 'listRendering', null);
+          return;
+        }
+
+        const {
+          lvlText,
+          customFormat,
+          listNumberingType: listNumberingTypeRaw,
+          suffix,
+          justification,
+          abstractId,
+        } = definitionDetails as Record<string, unknown>;
+        const safeAbstractId: string | number | undefined =
+          typeof abstractId === 'string' || typeof abstractId === 'number' ? abstractId : undefined;
+        const listNumberingType: string = typeof listNumberingTypeRaw === 'string' ? listNumberingTypeRaw : 'decimal';
+        // Defining the list marker
+        let markerText = '';
+        const count = numberingManager.calculateCounter(numIdValue, levelValue, pos, safeAbstractId);
+        numberingManager.setCounter(numIdValue, levelValue, pos, count, safeAbstractId);
+        const path = numberingManager.calculatePath(numIdValue, levelValue, pos);
+        if (listNumberingType !== 'bullet') {
+          markerText = String(
+            generateOrderedListIndex({
+              listLevel: path,
+              lvlText: String(lvlText ?? ''),
+              listNumberingType: String(listNumberingType),
+              customFormat: (typeof customFormat === 'string' ? customFormat : null) as string | undefined,
+            }),
+          );
+        } else {
+          markerText = String(docxNumberingHelpers.normalizeLvlTextChar(String(lvlText ?? '•')));
+        }
+
+        const safeSuffix = typeof suffix === 'string' ? suffix : null;
+        const safeJustification: string = typeof justification === 'string' ? justification : '';
+        const safeNumberingType: string = String(listNumberingType ?? '');
+
+        const newListRendering = {
+          markerText,
+          suffix: safeSuffix,
+          justification: safeJustification,
+          path,
+          numberingType: safeNumberingType,
+        };
+
+        if (JSON.stringify(node.attrs.listRendering) !== JSON.stringify(newListRendering)) {
+          // Updating rendering attrs for node view usage
+          tr.setNodeAttribute(pos, 'listRendering', newListRendering);
+        }
+
+        return false; // no need to descend into a paragraph
+      });
+      numberingManager.disableCache();
+      return tr.docChanged ? tr : null;
+    },
+  });
+}
diff --git a/packages/super-editor/src/extensions/paragraph/paragraph.test.js b/packages/super-editor/src/extensions/paragraph/paragraph.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/paragraph/paragraph.test.js
rename to packages/super-editor/src/extensions/paragraph/paragraph.test.ts
diff --git a/packages/super-editor/src/extensions/paragraph/paragraph.js b/packages/super-editor/src/extensions/paragraph/paragraph.ts
similarity index 65%
rename from packages/super-editor/src/extensions/paragraph/paragraph.js
rename to packages/super-editor/src/extensions/paragraph/paragraph.ts
index 26dc5ce5c..adcab8e44 100644
--- a/packages/super-editor/src/extensions/paragraph/paragraph.js
+++ b/packages/super-editor/src/extensions/paragraph/paragraph.ts
@@ -1,4 +1,4 @@
-import { OxmlNode, Attribute } from '@core/index.js';
+import { OxmlNode, Attribute, type AttributeValue } from '@core/index.js';
 import { TextSelection } from 'prosemirror-state';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 import { splitBlock } from '@core/commands/splitBlock.js';
@@ -13,6 +13,10 @@ import { createNumberingPlugin } from './numberingPlugin.js';
 import { createDropcapPlugin } from './dropcapPlugin.js';
 import { shouldSkipNodeView } from '../../utils/headless-helpers.js';
 import { parseAttrs } from './helpers/parseAttrs.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+import type { CommandProps } from '@core/types/ChainedCommands.js';
 
 /**
  * Input rule regex that matches a bullet list marker (-, +, or *)
@@ -28,40 +32,21 @@ const orderedInputRegex = /^(\d+)\.\s$/;
 
 /**
  * Configuration options for Paragraph
- * @typedef {Object} ParagraphOptions
  * @category Options
- * @property {number[]} [headingLevels=[1,2,3,4,5,6]] - Supported heading levels
- * @property {Object} [htmlAttributes={}] - HTML attributes for paragraph elements
- */
-
-/**
- * Attributes for paragraph nodes
- * @typedef {Object} ParagraphAttributes
- * @category Attributes
- * @property {Object} [extraAttrs={}] - Additional HTML attributes
- * @property {string} [class] - CSS class name
- * @property {string} [sdBlockId] @internal - Internal block tracking ID
- * @property {string} [paraId] @internal - Paragraph identifier
- * @property {string} [textId] @internal - Text identifier
- * @property {string} [rsidR] @internal - Revision save ID
- * @property {string} [rsidRDefault] @internal - Default revision save ID
- * @property {string} [rsidP] @internal - Paragraph revision save ID
- * @property {string} [rsidRPr] @internal - Run properties revision save ID
- * @property {string} [rsidDel] @internal - Deletion revision save ID
- * @property {Object} [attributes] @internal - Internal attributes storage
- * @property {string} [filename] @internal - Associated filename
- * @property {Object} [paragraphProperties] @internal - Internal paragraph properties
- * @property {Object} [dropcap] @internal - Drop cap configuration
- * @property {string} [pageBreakSource] @internal - Page break source
- * @property {Object} [sectionMargins] @internal - Section-specific header/footer margins in inches
  */
+export interface ParagraphOptions extends Record<string, unknown> {
+  /** Supported heading levels */
+  headingLevels: number[];
+  /** HTML attributes for paragraph elements */
+  htmlAttributes: Record<string, unknown>;
+}
 
 /**
  * @module Paragraph
  * @sidebarTitle Paragraph
  * @snippetPath /snippets/extensions/paragraph.mdx
  */
-export const Paragraph = OxmlNode.create({
+export const Paragraph = OxmlNode.create<ParagraphOptions>({
   name: 'paragraph',
 
   oXmlName: 'w:p',
@@ -94,22 +79,22 @@ export const Paragraph = OxmlNode.create({
       rsidDel: { rendered: false },
       extraAttrs: {
         default: {},
-        parseDOM: (element) => {
-          const extra = {};
-          Array.from(element.attributes).forEach((attr) => {
+        parseDOM: (element: Element) => {
+          const extra: Record<string, string> = {};
+          Array.from(element.attributes).forEach((attr: Attr) => {
             extra[attr.name] = attr.value;
           });
           return extra;
         },
-        renderDOM: (attributes) => {
+        renderDOM: (attributes: { extraAttrs?: Record<string, string> }) => {
           return attributes.extraAttrs || {};
         },
       },
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: { sdBlockId?: string | null }) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
@@ -122,7 +107,11 @@ export const Paragraph = OxmlNode.create({
       sectionMargins: { rendered: false },
       listRendering: {
         keepOnSplit: false,
-        renderDOM: ({ listRendering }) => {
+        renderDOM: ({
+          listRendering,
+        }: {
+          listRendering?: { markerText?: string; path?: string | unknown; numberingType?: string };
+        }) => {
           return {
             'data-marker-type': listRendering?.markerText,
             'data-list-level': listRendering?.path ? JSON.stringify(listRendering.path) : null,
@@ -141,9 +130,9 @@ export const Paragraph = OxmlNode.create({
       },
       {
         tag: 'div',
-        getAttrs: (node) => {
-          const extra = {};
-          Array.from(node.attributes).forEach((attr) => {
+        getAttrs: (node: Element) => {
+          const extra: Record<string, string> = {};
+          Array.from(node.attributes).forEach((attr: Attr) => {
             extra[attr.name] = attr.value;
           });
           return { extraAttrs: extra };
@@ -153,10 +142,10 @@ export const Paragraph = OxmlNode.create({
         tag: 'blockquote',
         attrs: { paragraphProperties: { styleId: 'BlockQuote' } },
       },
-      ...this.options.headingLevels.map((level) => ({
+      ...(this.options?.headingLevels ?? []).map((level) => ({
         tag: `h${level}`,
-        getAttrs: (node) => {
-          let attrs = parseAttrs(node);
+        getAttrs: (node: Element) => {
+          const attrs = parseAttrs(node);
           return {
             ...attrs,
             paragraphProperties: {
@@ -169,38 +158,65 @@ export const Paragraph = OxmlNode.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['p', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: { htmlAttributes?: Record<string, AttributeValue> }) {
+    return [
+      'p',
+      Attribute.mergeAttributes(
+        (this.options?.htmlAttributes ?? {}) as Record<string, AttributeValue>,
+        htmlAttributes || {},
+      ),
+      0,
+    ];
   },
 
-  addNodeView() {
+  addNodeView(): unknown {
     // Skip custom node view when the editor isn't using the docx pipeline (e.g. SuperInput rich text)
-    if (this.editor.options?.mode !== 'docx' || !this.editor.converter) return null;
+    if (!this.editor || this.editor.options?.mode !== 'docx' || !this.editor.converter) return null;
     if (shouldSkipNodeView(this.editor)) return null;
-    return ({ node, editor, getPos, decorations, extensionAttrs }) => {
-      return new ParagraphNodeView(node, editor, getPos, decorations, extensionAttrs);
+    return ({
+      node,
+      editor,
+      getPos,
+      decorations,
+      extensionAttrs,
+    }: {
+      node: PmNode;
+      editor: Editor;
+      getPos: () => number;
+      decorations: readonly Decoration[];
+      extensionAttrs?: unknown;
+    }) => {
+      return new ParagraphNodeView(
+        node,
+        editor,
+        getPos,
+        decorations,
+        (extensionAttrs as Record<string, unknown>) || {},
+      );
     };
   },
 
-  addShortcuts() {
+  addShortcuts(): Record<string, (...args: unknown[]) => unknown> {
+    if (!this.editor) return {};
+    const editor = this.editor;
     return {
       'Mod-Shift-7': () => {
-        return this.editor.commands.toggleOrderedList();
+        return editor.commands.toggleOrderedList();
       },
       'Mod-Shift-8': () => {
-        return this.editor.commands.toggleBulletList();
+        return editor.commands.toggleBulletList();
       },
-      Enter: (params) => {
+      Enter: (params: unknown) => {
         return removeNumberingProperties({ checkType: 'empty' })({
-          ...params,
-          tr: this.editor.state.tr,
-          state: this.editor.state,
-          dispatch: this.editor.view.dispatch,
+          ...(params as CommandProps),
+          tr: editor.state.tr,
+          state: editor.state,
+          dispatch: editor.view.dispatch,
         });
       },
 
       'Shift-Enter': () => {
-        return this.editor.commands.first(({ commands }) => [
+        return editor.commands.first(({ commands }: CommandProps) => [
           () => commands.createParagraphNear(),
           splitBlock({
             attrsToRemoveOverride: ['paragraphProperties.numberingProperties', 'listRendering', 'numberingProperties'],
@@ -209,16 +225,18 @@ export const Paragraph = OxmlNode.create({
       },
 
       Tab: () => {
-        return this.editor.commands.first(({ commands }) => [() => commands.increaseListIndent()]);
+        return editor.commands.first(({ commands }: CommandProps) => [() => commands.increaseListIndent()]);
       },
 
       'Shift-Tab': () => {
-        return this.editor.commands.first(({ commands }) => [() => commands.decreaseListIndent()]);
+        return editor.commands.first(({ commands }: CommandProps) => [() => commands.decreaseListIndent()]);
       },
     };
   },
 
   addInputRules() {
+    if (!this.editor) return [];
+    const editor = this.editor;
     return [
       { regex: orderedInputRegex, type: 'orderedList' },
       { regex: bulletInputRegex, type: 'bulletList' },
@@ -241,14 +259,15 @@ export const Paragraph = OxmlNode.create({
             ListHelpers.createNewList({
               listType: type,
               tr,
-              editor: this.editor,
+              editor,
             });
           },
         }),
     );
   },
 
-  addCommands() {
+  addCommands(): Record<string, (...args: unknown[]) => unknown> {
+    if (!this.editor) return {};
     return {
       /**
        * Toggle ordered list formatting
@@ -257,7 +276,7 @@ export const Paragraph = OxmlNode.create({
        * editor.commands.toggleOrderedList()
        * @note Converts selection to ordered list or back to paragraphs
        */
-      toggleOrderedList: () => (params) => {
+      toggleOrderedList: () => (params: CommandProps) => {
         return toggleList('orderedList')(params);
       },
 
@@ -269,7 +288,7 @@ export const Paragraph = OxmlNode.create({
        * editor.commands.toggleBulletList()
        * @note Converts selected paragraphs to list items or removes list formatting
        */
-      toggleBulletList: () => (params) => {
+      toggleBulletList: () => (params: CommandProps) => {
         return toggleList('bulletList')(params);
       },
 
@@ -286,6 +305,7 @@ export const Paragraph = OxmlNode.create({
   },
 
   addPmPlugins() {
+    if (!this.editor) return [];
     const dropcapPlugin = createDropcapPlugin(this.editor);
     const numberingPlugin = createNumberingPlugin(this.editor);
     return [dropcapPlugin, numberingPlugin];
diff --git a/packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.js b/packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.ts
similarity index 51%
rename from packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.js
rename to packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.ts
index d0c74c097..4056c003b 100644
--- a/packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.js
+++ b/packages/super-editor/src/extensions/paragraph/resolvedPropertiesCache.ts
@@ -1,25 +1,38 @@
 import { resolveParagraphProperties } from '@converter/styles.js';
+import type { ParagraphProperties } from '@converter/styles.js';
 import { findParentNodeClosestToPos } from '@helpers/index.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { ResolvedPos } from 'prosemirror-model';
+import type { Editor } from '@core/Editor.js';
 
-const resolvedParagraphPropertiesCache = new WeakMap();
+const resolvedParagraphPropertiesCache = new WeakMap<PmNode, ParagraphProperties>();
 
-export function getResolvedParagraphProperties(node) {
+export function getResolvedParagraphProperties(node: PmNode): ParagraphProperties | undefined {
   return resolvedParagraphPropertiesCache.get(node);
 }
 
-export function calculateResolvedParagraphProperties(editor, node, $pos) {
-  if (!editor.converter) {
-    return node.attrs.paragraphProperties || {};
-  }
+export function calculateResolvedParagraphProperties(
+  editor: Editor,
+  node: PmNode,
+  $pos: ResolvedPos,
+): ParagraphProperties {
   const cached = getResolvedParagraphProperties(node);
   if (cached) {
     return cached;
   }
+
+  const inlineProps = (node.attrs.paragraphProperties as ParagraphProperties | undefined) || {};
+
+  if (!editor.converter) {
+    resolvedParagraphPropertiesCache.set(node, inlineProps);
+    return inlineProps;
+  }
+
   const tableNode = findParentNodeClosestToPos($pos, (node) => node.type.name === 'table');
   const tableStyleId = tableNode?.node.attrs.tableStyleId || null;
   const paragraphProperties = resolveParagraphProperties(
     { docx: editor.converter.convertedXml, numbering: editor.converter.numbering },
-    node.attrs.paragraphProperties || {},
+    inlineProps,
     Boolean(tableNode),
     false,
     tableStyleId,
diff --git a/packages/super-editor/src/extensions/passthrough/index.d.ts b/packages/super-editor/src/extensions/passthrough/index.d.ts
new file mode 100644
index 000000000..d6ab41fb4
--- /dev/null
+++ b/packages/super-editor/src/extensions/passthrough/index.d.ts
@@ -0,0 +1,2 @@
+export const PassthroughBlock: any;
+export const PassthroughInline: any;
diff --git a/packages/super-editor/src/extensions/placeholder/index.js b/packages/super-editor/src/extensions/placeholder/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/placeholder/index.js
rename to packages/super-editor/src/extensions/placeholder/index.ts
diff --git a/packages/super-editor/src/extensions/placeholder/placeholder.js b/packages/super-editor/src/extensions/placeholder/placeholder.ts
similarity index 77%
rename from packages/super-editor/src/extensions/placeholder/placeholder.js
rename to packages/super-editor/src/extensions/placeholder/placeholder.ts
index 7fe298931..d45a8bf44 100644
--- a/packages/super-editor/src/extensions/placeholder/placeholder.js
+++ b/packages/super-editor/src/extensions/placeholder/placeholder.ts
@@ -1,20 +1,25 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
+import type { EditorState } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { Extension } from '@core/Extension.js';
 
 /**
  * Configuration options for Placeholder
- * @typedef {Object} PlaceholderOptions
- * @category Options
- * @property {string} [placeholder='Type something...'] - Placeholder text to display when editor is empty
  */
+export interface PlaceholderOptions extends Record<string, unknown> {
+  /**
+   * Placeholder text to display when editor is empty
+   * @default 'Type something...'
+   */
+  placeholder: string;
+}
 
 /**
  * @module Placeholder
  * @sidebarTitle Placeholder
  * @snippetPath /snippets/extensions/placeholder.mdx
  */
-export const Placeholder = Extension.create({
+export const Placeholder = Extension.create<PlaceholderOptions>({
   name: 'placeholder',
 
   addOptions() {
@@ -24,7 +29,7 @@ export const Placeholder = Extension.create({
   },
 
   addPmPlugins() {
-    const applyDecoration = (state) => {
+    const applyDecoration = (state: EditorState): DecorationSet => {
       const plainText = state.doc.textBetween(0, state.doc.content.size, ' ', ' ');
       if (plainText !== '') return DecorationSet.empty;
 
diff --git a/packages/super-editor/src/extensions/popover-plugin/index.js b/packages/super-editor/src/extensions/popover-plugin/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/popover-plugin/index.js
rename to packages/super-editor/src/extensions/popover-plugin/index.ts
diff --git a/packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.js b/packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.ts
similarity index 97%
rename from packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.js
rename to packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.ts
index 154cb94a1..b16d1ccb6 100644
--- a/packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.js
+++ b/packages/super-editor/src/extensions/popover-plugin/popover-plugin.test.ts
@@ -66,7 +66,7 @@ describe('popover plugin basics', () => {
 
   it('marks state for update when doc changes', () => {
     const doc = schema.nodes.doc.create(null, [schema.nodes.paragraph.create()]);
-    let state = EditorState.create({ schema, doc, plugins: [plugin] });
+    const state = EditorState.create({ schema, doc, plugins: [plugin] });
     const initial = plugin.getState(state);
     expect(initial.shouldUpdate).toBeUndefined();
 
diff --git a/packages/super-editor/src/extensions/popover-plugin/popover-plugin.js b/packages/super-editor/src/extensions/popover-plugin/popover-plugin.ts
similarity index 61%
rename from packages/super-editor/src/extensions/popover-plugin/popover-plugin.js
rename to packages/super-editor/src/extensions/popover-plugin/popover-plugin.ts
index 2f48c6417..056c2ded6 100644
--- a/packages/super-editor/src/extensions/popover-plugin/popover-plugin.js
+++ b/packages/super-editor/src/extensions/popover-plugin/popover-plugin.ts
@@ -1,8 +1,10 @@
-import { createApp } from 'vue';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { createApp, App } from 'vue';
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import { Extension } from '@core/Extension.js';
-import tippy from 'tippy.js';
-import { applyStyleIsolationClass } from '@/utils/styleIsolation.js';
+import tippy, { Instance as TippyInstance } from 'tippy.js';
+import type { Editor } from '@core/Editor.js';
+import { applyStyleIsolationClass } from '../../utils/styleIsolation.js';
 
 import Mentions from '@/components/popovers/Mentions.vue';
 
@@ -12,7 +14,11 @@ import Mentions from '@/components/popovers/Mentions.vue';
  * @category Options
  */
 
-const popoverPluginKey = new PluginKey('popoverPlugin');
+interface PopoverPluginState {
+  shouldUpdate?: boolean;
+}
+
+const popoverPluginKey = new PluginKey<PopoverPluginState>('popoverPlugin');
 
 /**
  * @module PopoverPlugin
@@ -27,14 +33,14 @@ export const PopoverPlugin = Extension.create({
   },
 
   addPmPlugins() {
-    const popover = new Plugin({
+    const popover = new Plugin<PopoverPluginState>({
       key: popoverPluginKey,
       state: {
-        init: () => {
+        init: (): PopoverPluginState => {
           return {};
         },
-        apply: (tr, value) => {
-          const newValue = { ...value };
+        apply: (tr, value): PopoverPluginState => {
+          const newValue: PopoverPluginState = { ...value };
 
           // Only update popover when selection or document changes
           if (tr.docChanged || tr.selectionSet) {
@@ -47,12 +53,15 @@ export const PopoverPlugin = Extension.create({
         },
       },
       view: (view) => {
+        if (!this.editor) {
+          return {};
+        }
         const popover = new Popover(view, this.editor);
         return {
-          update: (view, lastState) => {
+          update: (view) => {
             const pluginState = popoverPluginKey.getState(view.state);
-            if (!pluginState.shouldUpdate) return;
-            popover.update(view, lastState);
+            if (!pluginState || !pluginState.shouldUpdate) return;
+            popover.update(view);
           },
           destroy: () => {
             popover.destroy();
@@ -65,7 +74,15 @@ export const PopoverPlugin = Extension.create({
 });
 
 class Popover {
-  constructor(view, editor) {
+  editor: Editor;
+  view: EditorView;
+  popover: HTMLDivElement;
+  tippyInstance: TippyInstance;
+  popoverRect?: DOMRect;
+  app?: App;
+  state?: EditorState;
+
+  constructor(view: EditorView, editor: Editor) {
     this.editor = editor;
     this.view = view;
     this.popover = document.createElement('div');
@@ -80,45 +97,52 @@ class Popover {
       appendTo: document.body,
       arrow: false,
       onShow: (instance) => {
-        instance.setProps({ getReferenceClientRect: () => this.popoverRect });
+        instance.setProps({
+          getReferenceClientRect: () => this.popoverRect ?? new DOMRect(),
+        });
         this.bindKeyDownEvents();
       },
       onHide: () => {
         this.unbindKeyDownEvents();
       },
       theme: 'sd-editor-popover',
-    });
+    }) as TippyInstance;
   }
 
-  bindKeyDownEvents() {
+  bindKeyDownEvents(): void {
     this.view.dom.addEventListener('keydown', this.handleKeyDown);
   }
 
-  unbindKeyDownEvents() {
+  unbindKeyDownEvents(): void {
     this.view.dom.removeEventListener('keydown', this.handleKeyDown);
   }
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: KeyboardEvent): void => {
     const isArrow = event.key === 'ArrowDown' || event.key === 'ArrowUp';
     if (this.tippyInstance.state.isVisible && isArrow) {
       event.preventDefault();
-      this.popover.firstChild.focus();
+      (this.popover.firstChild as HTMLElement)?.focus();
     }
   };
 
-  mountVueComponent(component, props = {}) {
+  mountVueComponent(component: unknown, props: Record<string, unknown> = {}): void {
     if (this.app) this.app.unmount();
-    this.app = createApp(component, props);
+    // Vue's createApp accepts component definition objects with various shapes
+    // Using unknown here is safer than any and requires the component to be properly typed upstream
+    this.app = createApp(component as Record<string, unknown>, props);
     this.app.mount(this.popover);
     this.tippyInstance.setContent(this.popover);
   }
 
-  update(view) {
+  update(view: EditorView): void {
     this.state = view.state;
     const showPopover = this.isShowMentions;
 
-    let popoverContent = { component: null, props: null };
-    if (this.isShowMentions) {
+    let popoverContent: { component: unknown; props: Record<string, unknown> | null } = {
+      component: null,
+      props: null,
+    };
+    if (this.isShowMentions && this.state) {
       const { from } = this.state.selection;
       const atMention = this.getMentionText(from);
       popoverContent = {
@@ -126,7 +150,8 @@ class Popover {
         props: {
           users: this.editor.users,
           mention: atMention,
-          inserMention: (user) => {
+          inserMention: (user: Record<string, unknown>) => {
+            if (!this.state) return;
             const { $from } = this.state.selection;
             const length = atMention.length;
             const attributes = { ...user };
@@ -139,29 +164,23 @@ class Popover {
       };
     }
 
-    if (showPopover && popoverContent.component) {
+    if (showPopover && popoverContent.component && this.state) {
       const { to } = this.state.selection;
       const { component, props } = popoverContent;
-      this.mountVueComponent(component, props);
+      if (props) this.mountVueComponent(component, props);
       this.showPopoverAtPosition(to);
     } else this.tippyInstance.hide();
   }
 
-  showPopoverAtPosition(pos) {
+  showPopoverAtPosition(pos: number): void {
     const end = this.view.coordsAtPos(pos);
-    this.popoverRect = {
-      width: 0,
-      height: 0,
-      top: end.bottom,
-      left: end.left,
-      bottom: end.bottom,
-      right: end.left,
-    };
+    this.popoverRect = new DOMRect(end.left, end.bottom, 0, 0);
 
     this.tippyInstance.show();
   }
 
-  getMentionText(from) {
+  getMentionText(from: number): string {
+    if (!this.state) return '';
     const maxLookBehind = 20;
     const startPos = Math.max(0, from - maxLookBehind);
     const textBefore = this.state.doc.textBetween(startPos, from, '\n', '\0');
@@ -173,7 +192,8 @@ class Popover {
     return '';
   }
 
-  get isShowMentions() {
+  get isShowMentions(): boolean {
+    if (!this.state) return false;
     const { from } = this.state.selection;
 
     // Ensure we're not out of bounds
@@ -185,10 +205,10 @@ class Popover {
     const mentionPattern = /(?:^|\s)@[\w]*$/;
     const match = textBefore.match(mentionPattern);
 
-    return match && this.state.selection.empty;
+    return !!(match && this.state.selection.empty);
   }
 
-  destroy() {
+  destroy(): void {
     this.tippyInstance.destroy();
     this.popover.remove();
   }
diff --git a/packages/super-editor/src/extensions/run/calculateInlineRunPropertiesPlugin.d.ts b/packages/super-editor/src/extensions/run/calculateInlineRunPropertiesPlugin.d.ts
new file mode 100644
index 000000000..3c5543877
--- /dev/null
+++ b/packages/super-editor/src/extensions/run/calculateInlineRunPropertiesPlugin.d.ts
@@ -0,0 +1,3 @@
+import type { Plugin } from 'prosemirror-state';
+
+export const calculateInlineRunPropertiesPlugin: (editor: unknown) => Plugin;
diff --git a/packages/super-editor/src/extensions/run/cleanupEmptyRunsPlugin.d.ts b/packages/super-editor/src/extensions/run/cleanupEmptyRunsPlugin.d.ts
new file mode 100644
index 000000000..8d67cc54e
--- /dev/null
+++ b/packages/super-editor/src/extensions/run/cleanupEmptyRunsPlugin.d.ts
@@ -0,0 +1,3 @@
+import type { Plugin } from 'prosemirror-state';
+
+export const cleanupEmptyRunsPlugin: Plugin;
diff --git a/packages/super-editor/src/extensions/run/commands/index.js b/packages/super-editor/src/extensions/run/commands/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/run/commands/index.js
rename to packages/super-editor/src/extensions/run/commands/index.ts
diff --git a/packages/super-editor/src/extensions/run/commands/split-run.test.js b/packages/super-editor/src/extensions/run/commands/split-run.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/run/commands/split-run.test.js
rename to packages/super-editor/src/extensions/run/commands/split-run.test.ts
diff --git a/packages/super-editor/src/extensions/run/commands/split-run.js b/packages/super-editor/src/extensions/run/commands/split-run.ts
similarity index 73%
rename from packages/super-editor/src/extensions/run/commands/split-run.js
rename to packages/super-editor/src/extensions/run/commands/split-run.ts
index d453f3420..696148c8d 100644
--- a/packages/super-editor/src/extensions/run/commands/split-run.js
+++ b/packages/super-editor/src/extensions/run/commands/split-run.ts
@@ -1,36 +1,39 @@
-// @ts-check
 import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
 import { canSplit } from 'prosemirror-transform';
 import { defaultBlockAt } from '@core/helpers/defaultBlockAt.js';
+import type { Command, CommandProps } from '@core/types/ChainedCommands.js';
 
 /**
  * Splits a run node at the current selection into two paragraphs.
  * @returns {import('@core/commands/types').Command}
  */
-export const splitRunToParagraph = () => (props) => {
-  const { state, view, tr } = props;
-  const { $from, empty } = state.selection;
-  if (!empty) return false;
-  if ($from.parent.type.name !== 'run') return false;
+export const splitRunToParagraph =
+  (): Command =>
+  ({ state, view, tr }: { state: EditorState; view: EditorView; tr: Transaction }) => {
+    const { $from, empty } = state.selection;
+    if (!empty) return false;
+    if ($from.parent.type.name !== 'run') return false;
 
-  const handled = splitBlockPatch(state, (transaction) => {
-    view.dispatch(transaction);
-  });
+    const handled = splitBlockPatch(state, (transaction) => {
+      view.dispatch(transaction);
+    });
 
-  if (handled) {
-    tr.setMeta('preventDispatch', true);
-  }
+    if (handled) {
+      tr.setMeta('preventDispatch', true);
+    }
 
-  return handled;
-};
+    return handled;
+  };
 
 /**
  * Minimal copy of ProseMirror splitBlock logic that tolerates splitting runs.
  * @param {import('prosemirror-state').EditorState} state
  * @param {(tr: import('prosemirror-state').Transaction) => void} dispatch
  */
-export function splitBlockPatch(state, dispatch) {
-  let { $from } = state.selection;
+export function splitBlockPatch(state: EditorState, dispatch?: (tr: Transaction) => void) {
+  const { $from } = state.selection;
   if (state.selection instanceof NodeSelection && state.selection.node.isBlock) {
     if (!$from.parentOffset || !canSplit(state.doc, $from.pos)) return false;
     if (dispatch) dispatch(state.tr.split($from.pos).scrollIntoView());
@@ -38,13 +41,13 @@ export function splitBlockPatch(state, dispatch) {
   }
 
   if (!$from.depth) return false;
-  let types = [];
+  const types = [];
   let splitDepth,
     deflt,
     atEnd = false,
     atStart = false;
   for (let d = $from.depth; ; d--) {
-    let node = $from.node(d);
+    const node = $from.node(d);
     if (node.isBlock) {
       atEnd = $from.end(d) == $from.pos + ($from.depth - d);
       atStart = $from.start(d) == $from.pos - ($from.depth - d);
@@ -58,9 +61,9 @@ export function splitBlockPatch(state, dispatch) {
     }
   }
 
-  let tr = state.tr;
+  const tr = state.tr;
   if (state.selection instanceof TextSelection || state.selection instanceof AllSelection) tr.deleteSelection();
-  let splitPos = tr.mapping.map($from.pos);
+  const splitPos = tr.mapping.map($from.pos);
   let can = canSplit(tr.doc, splitPos, types.length, types);
   if (!can) {
     types[0] = deflt ? { type: deflt } : null;
@@ -69,7 +72,7 @@ export function splitBlockPatch(state, dispatch) {
   if (!can) return false;
   tr.split(splitPos, types.length, types);
   if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
-    let first = tr.mapping.map($from.before(splitDepth)),
+    const first = tr.mapping.map($from.before(splitDepth)),
       $first = tr.doc.resolve(first);
     if (deflt && $from.node(splitDepth - 1).canReplaceWith($first.index(), $first.index() + 1, deflt))
       tr.setNodeMarkup(tr.mapping.map($from.before(splitDepth)), deflt);
@@ -78,8 +81,8 @@ export function splitBlockPatch(state, dispatch) {
   return true;
 }
 
-export const splitRunAtCursor = () => (props) => {
-  let { state, dispatch, tr } = props;
+export const splitRunAtCursor = () => (props: CommandProps) => {
+  const { state, dispatch, tr } = props;
   const sel = state.selection;
   if (!sel.empty) return false;
 
diff --git a/packages/super-editor/src/extensions/run/index.js b/packages/super-editor/src/extensions/run/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/run/index.js
rename to packages/super-editor/src/extensions/run/index.ts
diff --git a/packages/super-editor/src/extensions/run/run.test.js b/packages/super-editor/src/extensions/run/run.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/run/run.test.js
rename to packages/super-editor/src/extensions/run/run.test.ts
diff --git a/packages/super-editor/src/extensions/run/run.js b/packages/super-editor/src/extensions/run/run.ts
similarity index 81%
rename from packages/super-editor/src/extensions/run/run.js
rename to packages/super-editor/src/extensions/run/run.ts
index 7c75937a6..c9eac8fa8 100644
--- a/packages/super-editor/src/extensions/run/run.js
+++ b/packages/super-editor/src/extensions/run/run.ts
@@ -1,6 +1,4 @@
-// @ts-nocheck
-
-import { Attribute, OxmlNode } from '@core/index.js';
+import { Attribute, type AttributeValue, OxmlNode } from '@core/index.js';
 import { splitRunToParagraph, splitRunAtCursor } from './commands/index.js';
 import { cleanupEmptyRunsPlugin } from './cleanupEmptyRunsPlugin.js';
 import { wrapTextInRunsPlugin } from './wrapTextInRunsPlugin.js';
@@ -53,8 +51,7 @@ export const Run = OxmlNode.create({
     };
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
-  addCommands() {
+  addCommands(): Record<string, (...args: unknown[]) => unknown> {
     return {
       splitRunToParagraph,
       splitRunAtCursor,
@@ -65,8 +62,11 @@ export const Run = OxmlNode.create({
     return [{ tag: 'span[data-run]' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    const base = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+  renderDOM({ htmlAttributes }: { htmlAttributes?: Record<string, unknown> }) {
+    const base = Attribute.mergeAttributes(
+      this.options?.htmlAttributes ?? {},
+      (htmlAttributes as Record<string, AttributeValue>) || {},
+    );
     return ['span', base, 0];
   },
   addPmPlugins() {
diff --git a/packages/super-editor/src/extensions/run/splitRunsAfterMarkPlugin.d.ts b/packages/super-editor/src/extensions/run/splitRunsAfterMarkPlugin.d.ts
new file mode 100644
index 000000000..6823f04f6
--- /dev/null
+++ b/packages/super-editor/src/extensions/run/splitRunsAfterMarkPlugin.d.ts
@@ -0,0 +1,3 @@
+import type { Plugin } from 'prosemirror-state';
+
+export const splitRunsAfterMarkPlugin: Plugin;
diff --git a/packages/super-editor/src/extensions/run/wrapTextInRunsPlugin.d.ts b/packages/super-editor/src/extensions/run/wrapTextInRunsPlugin.d.ts
new file mode 100644
index 000000000..57982affa
--- /dev/null
+++ b/packages/super-editor/src/extensions/run/wrapTextInRunsPlugin.d.ts
@@ -0,0 +1,3 @@
+import type { Plugin } from 'prosemirror-state';
+
+export const wrapTextInRunsPlugin: () => Plugin;
diff --git a/packages/super-editor/src/extensions/search/index.js b/packages/super-editor/src/extensions/search/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/search/index.js
rename to packages/super-editor/src/extensions/search/index.ts
diff --git a/packages/super-editor/src/extensions/search/prosemirror-search-patched.js b/packages/super-editor/src/extensions/search/prosemirror-search-patched.ts
similarity index 62%
rename from packages/super-editor/src/extensions/search/prosemirror-search-patched.js
rename to packages/super-editor/src/extensions/search/prosemirror-search-patched.ts
index a3756f09b..ef87d724f 100644
--- a/packages/super-editor/src/extensions/search/prosemirror-search-patched.js
+++ b/packages/super-editor/src/extensions/search/prosemirror-search-patched.ts
@@ -1,15 +1,47 @@
 // Adapted from prosemirror-search@1.1.0. We patch text extraction and index
 // mapping to treat inline wrapper nodes (e.g. w:r "run" nodes) as transparent
 // so regex queries match across them and return correct document positions.
-import { PluginKey, Plugin, TextSelection } from 'prosemirror-state';
+import { PluginKey, Plugin, TextSelection, EditorState, Transaction } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
-import { Fragment, Slice } from 'prosemirror-model';
+import { Fragment, Slice, Node } from 'prosemirror-model';
+
+interface SearchQueryConfig {
+  search: string;
+  caseSensitive?: boolean;
+  literal?: boolean;
+  regexp?: boolean;
+  replace?: string;
+  wholeWord?: boolean;
+  filter?: ((state: EditorState, result: SearchResult) => boolean) | null;
+}
+
+interface SearchResult {
+  from: number;
+  to: number;
+  match: RegExpExecArray | null;
+  matchStart: number;
+}
+
+interface QueryImpl {
+  findNext(state: EditorState, from: number, to: number): SearchResult | null;
+  findPrev(state: EditorState, from: number, to: number): SearchResult | null;
+}
 
 class SearchQuery {
+  search: string;
+  caseSensitive: boolean;
+  literal: boolean;
+  regexp: boolean;
+  replace: string;
+  valid: boolean;
+  wholeWord: boolean;
+  filter: ((state: EditorState, result: SearchResult) => boolean) | null;
+  impl: QueryImpl;
+
   /**
     Create a query object.
     */
-  constructor(config) {
+  constructor(config: SearchQueryConfig) {
     this.search = config.search;
     this.caseSensitive = !!config.caseSensitive;
     this.literal = !!config.literal;
@@ -23,7 +55,7 @@ class SearchQuery {
   /**
     Compare this query to another query.
     */
-  eq(other) {
+  eq(other: SearchQuery): boolean {
     return (
       this.search == other.search &&
       this.replace == other.replace &&
@@ -35,10 +67,10 @@ class SearchQuery {
   /**
     Find the next occurrence of this query in the given range.
     */
-  findNext(state, from = 0, to = state.doc.content.size) {
+  findNext(state: EditorState, from = 0, to = state.doc.content.size): SearchResult | null {
     for (;;) {
       if (from >= to) return null;
-      let result = this.impl.findNext(state, from, to);
+      const result = this.impl.findNext(state, from, to);
       if (!result || this.checkResult(state, result)) return result;
       from = result.from + 1;
     }
@@ -47,10 +79,10 @@ class SearchQuery {
     Find the previous occurrence of this query in the given range.
     Note that, if `to` is given, it should be _less_ than `from`.
     */
-  findPrev(state, from = state.doc.content.size, to = 0) {
+  findPrev(state: EditorState, from = state.doc.content.size, to = 0): SearchResult | null {
     for (;;) {
       if (from <= to) return null;
-      let result = this.impl.findPrev(state, from, to);
+      const result = this.impl.findPrev(state, from, to);
       if (!result || this.checkResult(state, result)) return result;
       from = result.to - 1;
     }
@@ -58,7 +90,7 @@ class SearchQuery {
   /**
     @internal
     */
-  checkResult(state, result) {
+  checkResult(state: EditorState, result: SearchResult): boolean {
     return (
       (!this.wholeWord || (checkWordBoundary(state, result.from) && checkWordBoundary(state, result.to))) &&
       (!this.filter || this.filter(state, result))
@@ -67,7 +99,7 @@ class SearchQuery {
   /**
     @internal
     */
-  unquote(string) {
+  unquote(string: string): string {
     return this.literal
       ? string
       : string.replace(/\\([nrt\\])/g, (_, ch) => (ch == 'n' ? '\n' : ch == 'r' ? '\r' : ch == 't' ? '\t' : '\\'));
@@ -77,29 +109,29 @@ class SearchQuery {
     return multiple ranges when `this.replace` contains
     `$1`/`$&`-style placeholders, in which case the preserved
     content is skipped by the replacements.
-    
+
     Ranges are sorted by position, and `from`/`to` positions all
     refer to positions in `state.doc`. When applying these, you'll
     want to either apply them from back to front, or map these
     positions through your transaction's current mapping.
     */
-  getReplacements(state, result) {
-    let $from = state.doc.resolve(result.from);
-    let marks = $from.marksAcross(state.doc.resolve(result.to));
-    let ranges = [];
-    let frag = Fragment.empty,
-      pos = result.from,
-      { match } = result;
-    let groups = match ? getGroupIndices(match) : [[0, result.to - result.from]];
-    let replParts = parseReplacement(this.unquote(this.replace));
-    for (let part of replParts) {
+  getReplacements(state: EditorState, result: SearchResult): Array<{ from: number; to: number; insert: Slice }> {
+    const $from = state.doc.resolve(result.from);
+    const marks = $from.marksAcross(state.doc.resolve(result.to));
+    const ranges = [];
+    let frag = Fragment.empty;
+    let pos = result.from;
+    const { match } = result;
+    const groups = match ? getGroupIndices(match) : [[0, result.to - result.from]];
+    const replParts = parseReplacement(this.unquote(this.replace));
+    for (const part of replParts) {
       if (typeof part == 'string') {
         // Replacement text
         frag = frag.addToEnd(state.schema.text(part, marks));
       } else {
         const groupSpan = groups[part.group];
         if (!groupSpan) continue;
-        let from = result.matchStart + groupSpan[0],
+        const from = result.matchStart + groupSpan[0],
           to = result.matchStart + groupSpan[1];
         if (part.copy) {
           // Copied content
@@ -119,26 +151,30 @@ class SearchQuery {
     return ranges;
   }
 }
-const nullQuery = new (class {
-  findNext() {
+const nullQuery: QueryImpl = new (class {
+  findNext(): null {
     return null;
   }
-  findPrev() {
+  findPrev(): null {
     return null;
   }
 })();
-class StringQuery {
-  constructor(query) {
+
+class StringQuery implements QueryImpl {
+  query: SearchQuery;
+  string: string;
+
+  constructor(query: SearchQuery) {
     this.query = query;
     let string = query.unquote(query.search);
     if (!query.caseSensitive) string = string.toLowerCase();
     this.string = string;
   }
-  findNext(state, from, to) {
+  findNext(state: EditorState, from: number, to: number): SearchResult | null {
     return scanTextblocks(state.doc, from, to, (node, start) => {
-      let off = Math.max(from, start);
-      let content = textContent(node).slice(off - start, Math.min(node.content.size, to - start));
-      let index = (this.query.caseSensitive ? content : content.toLowerCase()).indexOf(this.string);
+      const off = Math.max(from, start);
+      const content = textContent(node).slice(off - start, Math.min(node.content.size, to - start));
+      const index = (this.query.caseSensitive ? content : content.toLowerCase()).indexOf(this.string);
       if (index < 0) return null;
       const startOffset = off - start;
       const absoluteIndex = startOffset + index;
@@ -147,12 +183,12 @@ class StringQuery {
       return { from: fromPos, to: toPos, match: null, matchStart: start };
     });
   }
-  findPrev(state, from, to) {
+  findPrev(state: EditorState, from: number, to: number): SearchResult | null {
     return scanTextblocks(state.doc, from, to, (node, start) => {
-      let off = Math.max(start, to);
+      const off = Math.max(start, to);
       let content = textContent(node).slice(off - start, Math.min(node.content.size, from - start));
       if (!this.query.caseSensitive) content = content.toLowerCase();
-      let index = content.lastIndexOf(this.string);
+      const index = content.lastIndexOf(this.string);
       if (index < 0) return null;
       const startOffset = off - start;
       const absoluteIndex = startOffset + index;
@@ -162,17 +198,25 @@ class StringQuery {
     });
   }
 }
-const baseFlags = 'g' + (/x/.unicode == null ? '' : 'u') + (/x/.hasIndices == null ? '' : 'd');
-class RegExpQuery {
-  constructor(query) {
+
+const baseFlags =
+  'g' +
+  ((/x/ as unknown as { unicode?: unknown }).unicode == null ? '' : 'u') +
+  ((/x/ as unknown as { hasIndices?: unknown }).hasIndices == null ? '' : 'd');
+
+class RegExpQuery implements QueryImpl {
+  query: SearchQuery;
+  regexp: RegExp;
+
+  constructor(query: SearchQuery) {
     this.query = query;
     this.regexp = new RegExp(query.search, baseFlags + (query.caseSensitive ? '' : 'i'));
   }
-  findNext(state, from, to) {
+  findNext(state: EditorState, from: number, to: number): SearchResult | null {
     return scanTextblocks(state.doc, from, to, (node, start) => {
-      let content = textContent(node).slice(0, Math.min(node.content.size, to - start));
+      const content = textContent(node).slice(0, Math.min(node.content.size, to - start));
       this.regexp.lastIndex = from - start;
-      let match = this.regexp.exec(content);
+      const match = this.regexp.exec(content);
       if (!match) return null;
       const absoluteIndex = match.index;
       const fromPos = mapIndexToDocPos(node, start, absoluteIndex);
@@ -180,13 +224,13 @@ class RegExpQuery {
       return { from: fromPos, to: toPos, match, matchStart: start };
     });
   }
-  findPrev(state, from, to) {
+  findPrev(state: EditorState, from: number, to: number): SearchResult | null {
     return scanTextblocks(state.doc, from, to, (node, start) => {
-      let content = textContent(node).slice(0, Math.min(node.content.size, from - start));
-      let match;
+      const content = textContent(node).slice(0, Math.min(node.content.size, from - start));
+      let match: RegExpExecArray | null = null;
       for (let off = 0; ; ) {
         this.regexp.lastIndex = off;
-        let next = this.regexp.exec(content);
+        const next = this.regexp.exec(content);
         if (!next) break;
         match = next;
         off = next.index + 1;
@@ -199,32 +243,42 @@ class RegExpQuery {
     });
   }
 }
-function getGroupIndices(match) {
-  if (match.indices) return match.indices;
-  let result = [[0, match[0].length]];
+
+type GroupIndices = Array<[number, number] | undefined>;
+
+function getGroupIndices(match: RegExpExecArray): GroupIndices {
+  if ((match as unknown as { indices?: GroupIndices }).indices)
+    return (match as unknown as { indices: GroupIndices }).indices;
+  const result: GroupIndices = [[0, match[0].length]];
   for (let i = 1, pos = 0; i < match.length; i++) {
-    let found = match[i] ? match[0].indexOf(match[i], pos) : -1;
+    const found = match[i] ? match[0].indexOf(match[i], pos) : -1;
     result.push(found < 0 ? undefined : [found, (pos = found + match[i].length)]);
   }
   return result;
 }
-function parseReplacement(text) {
-  let result = [],
-    highestSeen = -1;
-  function add(text) {
-    let last = result.length - 1;
-    if (last > -1 && typeof result[last] == 'string') result[last] += text;
-    else result.push(text);
+
+type ReplacementPart = string | { group: number; copy: boolean };
+
+function parseReplacement(text: string): ReplacementPart[] {
+  const result: ReplacementPart[] = [];
+  let highestSeen = -1;
+  function add(text: string) {
+    const last = result.length - 1;
+    if (last > -1 && typeof result[last] == 'string') {
+      result[last] = (result[last] as string) + text;
+    } else {
+      result.push(text);
+    }
   }
   while (text.length) {
-    let m = /\$([$&\d+])/.exec(text);
+    const m = /\$([$&\d+])/.exec(text);
     if (!m) {
       add(text);
       return result;
     }
     if (m.index > 0) add(text.slice(0, m.index + (m[1] == '$' ? 1 : 0)));
     if (m[1] != '$') {
-      let n = m[1] == '&' ? 0 : +m[1];
+      const n = m[1] == '&' ? 0 : +m[1];
       if (highestSeen >= n) {
         result.push({ group: n, copy: true });
       } else {
@@ -236,7 +290,8 @@ function parseReplacement(text) {
   }
   return result;
 }
-function validRegExp(source) {
+
+function validRegExp(source: string): boolean {
   try {
     new RegExp(source, baseFlags);
     return true;
@@ -244,14 +299,15 @@ function validRegExp(source) {
     return false;
   }
 }
-const TextContentCache = new WeakMap();
+const TextContentCache = new WeakMap<Node, string>();
 const transparentInlineNodes = new Set(['run', 'bookmarkStart']);
-function textContent(node) {
-  let cached = TextContentCache.get(node);
+
+function textContent(node: Node): string {
+  const cached = TextContentCache.get(node);
   if (cached) return cached;
   let content = '';
   for (let i = 0; i < node.childCount; i++) {
-    let child = node.child(i);
+    const child = node.child(i);
     if (child.isText) content += child.text;
     else if (child.isLeaf) content += '\ufffc';
     else if (child.type && transparentInlineNodes.has(child.type.name)) content += textContent(child);
@@ -265,12 +321,12 @@ function textContent(node) {
  * Handles transparent inline nodes (like 'run', 'bookmarkStart') that don't
  * contribute text boundaries, and block nodes that add space padding.
  *
- * @param {Node} node - The ProseMirror node to search within
- * @param {number} start - The document position where this node starts
- * @param {number} index - The index within the flattened text content (as returned by textContent())
- * @returns {number} The corresponding document position
+ * @param node - The ProseMirror node to search within
+ * @param start - The document position where this node starts
+ * @param index - The index within the flattened text content (as returned by textContent())
+ * @returns The corresponding document position
  */
-function mapIndexToDocPos(node, start, index) {
+function mapIndexToDocPos(node: Node, start: number, index: number): number {
   if (index <= 0) return start;
   const fullTextLength = textContent(node).length;
   if (index >= fullTextLength) return start + node.content.size;
@@ -284,19 +340,19 @@ function mapIndexToDocPos(node, start, index) {
  * - Transparent inline nodes: contribute their inner text without boundary padding
  * - Block nodes: contribute ' ' + innerText + ' ' (2 extra characters for boundaries)
  *
- * @param {Node} node - The ProseMirror node to search within
- * @param {number} start - The document position where this node starts
- * @param {number} index - The remaining index to map (relative to this node's text content)
- * @returns {number} The corresponding document position
+ * @param node - The ProseMirror node to search within
+ * @param start - The document position where this node starts
+ * @param index - The remaining index to map (relative to this node's text content)
+ * @returns The corresponding document position
  */
-function mapIndexWithinNode(node, start, index) {
+function mapIndexWithinNode(node: Node, start: number, index: number): number {
   if (index <= 0) return start;
   let offset = start;
   for (let i = 0; i < node.childCount; i++) {
     const child = node.child(i);
     const childStart = offset;
     if (child.isText) {
-      const len = child.text.length;
+      const len = child.text?.length ?? 0;
       if (index <= len) return childStart + index;
       index -= len;
       offset += child.nodeSize;
@@ -352,27 +408,33 @@ function mapIndexWithinNode(node, start, index) {
   }
   return start + node.content.size;
 }
-function scanTextblocks(node, from, to, f, nodeStart = 0) {
+function scanTextblocks(
+  node: Node,
+  from: number,
+  to: number,
+  f: (node: Node, start: number) => SearchResult | null,
+  nodeStart = 0,
+): SearchResult | null {
   const isTransparentInline = node.inlineContent && node.type && transparentInlineNodes.has(node.type.name);
   if (node.inlineContent && !isTransparentInline) {
     return f(node, nodeStart);
   } else if (!node.isLeaf) {
     if (from > to) {
       for (let i = node.childCount - 1, pos = nodeStart + node.content.size; i >= 0 && pos > to; i--) {
-        let child = node.child(i);
+        const child = node.child(i);
         pos -= child.nodeSize;
         if (pos < from) {
-          let result = scanTextblocks(child, from, to, f, pos + 1);
+          const result = scanTextblocks(child, from, to, f, pos + 1);
           if (result != null) return result;
         }
       }
     } else {
       for (let i = 0, pos = nodeStart; i < node.childCount && pos < to; i++) {
-        let child = node.child(i),
+        const child = node.child(i),
           start = pos;
         pos += child.nodeSize;
         if (pos > from) {
-          let result = scanTextblocks(child, from, to, f, start + 1);
+          const result = scanTextblocks(child, from, to, f, start + 1);
           if (result != null) return result;
         }
       }
@@ -380,12 +442,12 @@ function scanTextblocks(node, from, to, f, nodeStart = 0) {
   }
   return null;
 }
-function checkWordBoundary(state, pos) {
-  let $pos = state.doc.resolve(pos);
-  let before = $pos.nodeBefore,
+function checkWordBoundary(state: EditorState, pos: number): boolean {
+  const $pos = state.doc.resolve(pos);
+  const before = $pos.nodeBefore,
     after = $pos.nodeAfter;
   if (!before || !after || !before.isText || !after.isText) return true;
-  return !/\p{L}$/u.test(before.text) || !/^\p{L}/u.test(after.text);
+  return !/\p{L}$/u.test(before.text ?? '') || !/^\p{L}/u.test(after.text ?? '');
 }
 
 /**
@@ -393,15 +455,20 @@ function checkWordBoundary(state, pos) {
  * search range, highlight setting, and decoration set for rendering matches.
  */
 class SearchState {
+  query: SearchQuery;
+  range: { from: number; to: number } | null;
+  highlight: boolean;
+  deco: DecorationSet;
+
   /**
    * Create a new SearchState instance.
    *
-   * @param {SearchQuery} query - The search query to execute
-   * @param {{from: number, to: number}|null} range - Optional range to restrict search to, or null for entire document
-   * @param {boolean} highlight - Whether to apply CSS classes for visual highlighting of matches
-   * @param {DecorationSet} deco - The decoration set containing match highlights
+   * @param query - The search query to execute
+   * @param range - Optional range to restrict search to, or null for entire document
+   * @param highlight - Whether to apply CSS classes for visual highlighting of matches
+   * @param deco - The decoration set containing match highlights
    */
-  constructor(query, range, highlight, deco) {
+  constructor(query: SearchQuery, range: { from: number; to: number } | null, highlight: boolean, deco: DecorationSet) {
     this.query = query;
     this.range = range;
     this.highlight = highlight;
@@ -417,20 +484,25 @@ class SearchState {
  * CSS classes for visual styling. When disabled, decorations are created without
  * attributes (allowing match tracking without visual styling).
  *
- * @param {EditorState} state - The current ProseMirror editor state
- * @param {SearchQuery} query - The search query to find matches for
- * @param {{from: number, to: number}|null} range - Optional range to restrict search, or null for entire document
- * @param {boolean} [highlight=true] - Whether to apply CSS classes for visual highlighting
- * @returns {DecorationSet} A decoration set containing all match decorations
+ * @param state - The current ProseMirror editor state
+ * @param query - The search query to find matches for
+ * @param range - Optional range to restrict search, or null for entire document
+ * @param highlight - Whether to apply CSS classes for visual highlighting
+ * @returns A decoration set containing all match decorations
  */
-function buildMatchDeco(state, query, range, highlight = true) {
+function buildMatchDeco(
+  state: EditorState,
+  query: SearchQuery,
+  range: { from: number; to: number } | null,
+  highlight = true,
+): DecorationSet {
   if (!query.valid) return DecorationSet.empty;
-  let deco = [];
-  let sel = state.selection;
+  const deco = [];
+  const sel = state.selection;
   for (let pos = range ? range.from : 0, end = range ? range.to : state.doc.content.size; ; ) {
-    let next = query.findNext(state, pos, end);
+    const next = query.findNext(state, pos, end);
     if (!next) break;
-    let cls =
+    const cls =
       next.from == sel.from && next.to == sel.to ? 'ProseMirror-active-search-match' : 'ProseMirror-search-match';
     // When highlight is false, create decorations with empty attributes to track matches without visual styling
     const attrs = highlight ? { class: cls } : {};
@@ -439,23 +511,31 @@ function buildMatchDeco(state, query, range, highlight = true) {
   }
   return DecorationSet.create(state.doc, deco);
 }
-const searchKey = new PluginKey('search');
+
+interface SearchOptions {
+  initialQuery?: SearchQuery;
+  initialRange?: { from: number; to: number } | null;
+  initialHighlight?: boolean;
+}
+
+const searchKey = new PluginKey<SearchState>('search');
+
 /**
 Returns a plugin that stores a current search query and searched
 range, and highlights matches of the query.
 */
-function search(options = {}) {
+function search(options: SearchOptions = {}): Plugin<SearchState> {
   return new Plugin({
     key: searchKey,
     state: {
       init(_config, state) {
-        let query = options.initialQuery || new SearchQuery({ search: '' });
-        let range = options.initialRange || null;
+        const query = options.initialQuery || new SearchQuery({ search: '' });
+        const range = options.initialRange || null;
         const highlight = options.initialHighlight ?? true;
         return new SearchState(query, range, highlight, buildMatchDeco(state, query, range, highlight));
       },
       apply(tr, search, _oldState, state) {
-        let set = tr.getMeta(searchKey);
+        const set = tr.getMeta(searchKey);
         if (set) {
           // Validate and normalize highlight value from transaction metadata
           const highlight = typeof set.highlight === 'boolean' ? set.highlight : true;
@@ -469,8 +549,8 @@ function search(options = {}) {
         if (tr.docChanged || tr.selectionSet) {
           let range = search.range;
           if (range) {
-            let from = tr.mapping.map(range.from, 1);
-            let to = tr.mapping.map(range.to, -1);
+            const from = tr.mapping.map(range.from, 1);
+            const to = tr.mapping.map(range.to, -1);
             range = from < to ? { from, to } : null;
           }
           // Validate and preserve highlight setting from existing state with nullish coalescing fallback
@@ -486,7 +566,7 @@ function search(options = {}) {
       },
     },
     props: {
-      decorations: (state) => searchKey.getState(state).deco,
+      decorations: (state) => searchKey.getState(state)?.deco ?? DecorationSet.empty,
     },
   });
 }
@@ -494,38 +574,48 @@ function search(options = {}) {
 Get the current active search query and searched range. Will
 return `undefined` is the search plugin isn't active.
 */
-function getSearchState(state) {
+function getSearchState(state: EditorState): SearchState | undefined {
   return searchKey.getState(state);
 }
+
 /**
 Access the decoration set holding the currently highlighted search
 matches in the document.
 */
-function getMatchHighlights(state) {
-  let search = searchKey.getState(state);
+function getMatchHighlights(state: EditorState): DecorationSet {
+  const search = searchKey.getState(state);
   return search ? search.deco : DecorationSet.empty;
 }
 
 /**
  * Options for setSearchState function.
- * @typedef {Object} SetSearchStateOptions
- * @property {boolean} [highlight=true] - Whether to apply CSS classes for visual highlighting of search matches.
- *   When true, matches are decorated with 'ProseMirror-search-match' or 'ProseMirror-active-search-match' classes.
- *   When false, matches are tracked in decorations without visual styling classes.
  */
+interface SetSearchStateOptions {
+  /**
+   * Whether to apply CSS classes for visual highlighting of search matches.
+   * When true, matches are decorated with 'ProseMirror-search-match' or 'ProseMirror-active-search-match' classes.
+   * When false, matches are tracked in decorations without visual styling classes.
+   */
+  highlight?: boolean;
+}
 
 /**
  * Add metadata to a transaction that updates the active search query
  * and searched range, when dispatched.
  *
- * @param {Transaction} tr - The transaction to add metadata to
- * @param {SearchQuery} query - The search query to set
- * @param {{from: number, to: number}|null} [range=null] - Optional range to restrict search, or null for entire document
- * @param {SetSearchStateOptions} [options={}] - Additional options for search behavior
- * @returns {Transaction} The transaction with search metadata added
- * @throws {TypeError} If options is not null/undefined and not an object
+ * @param tr - The transaction to add metadata to
+ * @param query - The search query to set
+ * @param range - Optional range to restrict search, or null for entire document
+ * @param options - Additional options for search behavior
+ * @returns The transaction with search metadata added
+ * @throws If options is not null/undefined and not an object
  */
-function setSearchState(tr, query, range = null, options = {}) {
+function setSearchState(
+  tr: Transaction,
+  query: SearchQuery,
+  range: { from: number; to: number } | null = null,
+  options: SetSearchStateOptions = {},
+): Transaction {
   // Validate options parameter - must be an object if provided
   if (options != null && (typeof options !== 'object' || Array.isArray(options))) {
     throw new TypeError('setSearchState options must be an object');
@@ -536,26 +626,43 @@ function setSearchState(tr, query, range = null, options = {}) {
 
   return tr.setMeta(searchKey, { query, range, highlight });
 }
-function nextMatch(search, state, wrap, curFrom, curTo) {
-  let range = search.range || { from: 0, to: state.doc.content.size };
+
+function nextMatch(
+  search: SearchState,
+  state: EditorState,
+  wrap: boolean,
+  curFrom: number,
+  curTo: number,
+): SearchResult | null {
+  const range = search.range || { from: 0, to: state.doc.content.size };
   let next = search.query.findNext(state, Math.max(curTo, range.from), range.to);
   if (!next && wrap) next = search.query.findNext(state, range.from, Math.min(curFrom, range.to));
   return next;
 }
-function prevMatch(search, state, wrap, curFrom, curTo) {
-  let range = search.range || { from: 0, to: state.doc.content.size };
+
+function prevMatch(
+  search: SearchState,
+  state: EditorState,
+  wrap: boolean,
+  curFrom: number,
+  curTo: number,
+): SearchResult | null {
+  const range = search.range || { from: 0, to: state.doc.content.size };
   let prev = search.query.findPrev(state, Math.min(curFrom, range.to), range.from);
   if (!prev && wrap) prev = search.query.findPrev(state, range.to, Math.max(curTo, range.from));
   return prev;
 }
-function findCommand(wrap, dir) {
+
+type Command = (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;
+
+function findCommand(wrap: boolean, dir: number): Command {
   return (state, dispatch) => {
-    let search = searchKey.getState(state);
+    const search = searchKey.getState(state);
     if (!search || !search.query.valid) return false;
-    let { from, to } = state.selection;
-    let next = dir > 0 ? nextMatch(search, state, wrap, from, to) : prevMatch(search, state, wrap, from, to);
+    const { from, to } = state.selection;
+    const next = dir > 0 ? nextMatch(search, state, wrap, from, to) : prevMatch(search, state, wrap, from, to);
     if (!next) return false;
-    let selection = TextSelection.create(state.doc, next.from, next.to);
+    const selection = TextSelection.create(state.doc, next.from, next.to);
     if (dispatch) dispatch(state.tr.setSelection(selection).scrollIntoView());
     return true;
   };
@@ -564,39 +671,40 @@ function findCommand(wrap, dir) {
 Find the next instance of the search query after the current
 selection and move the selection to it.
 */
-const findNext = findCommand(true, 1);
+const findNext: Command = findCommand(true, 1);
 /**
 Find the next instance of the search query and move the selection
 to it. Don't wrap around at the end of document or search range.
 */
-const findNextNoWrap = findCommand(false, 1);
+const findNextNoWrap: Command = findCommand(false, 1);
 /**
 Find the previous instance of the search query and move the
 selection to it.
 */
-const findPrev = findCommand(true, -1);
+const findPrev: Command = findCommand(true, -1);
 /**
 Find the previous instance of the search query and move the
 selection to it. Don't wrap at the start of the document or search
 range.
 */
-const findPrevNoWrap = findCommand(false, -1);
-function replaceCommand(wrap, moveForward) {
+const findPrevNoWrap: Command = findCommand(false, -1);
+
+function replaceCommand(wrap: boolean, moveForward: boolean): Command {
   return (state, dispatch) => {
-    let search = searchKey.getState(state);
+    const search = searchKey.getState(state);
     if (!search || !search.query.valid) return false;
-    let { from } = state.selection;
-    let next = nextMatch(search, state, wrap, from, from);
+    const { from } = state.selection;
+    const next = nextMatch(search, state, wrap, from, from);
     if (!next) return false;
     if (!dispatch) return true;
     if (state.selection.from == next.from && state.selection.to == next.to) {
-      let tr = state.tr,
+      const tr = state.tr,
         replacements = search.query.getReplacements(state, next);
       for (let i = replacements.length - 1; i >= 0; i--) {
-        let { from, to, insert } = replacements[i];
+        const { from, to, insert } = replacements[i];
         tr.replace(from, to, insert);
       }
-      let after = moveForward && nextMatch(search, state, wrap, next.from, next.to);
+      const after = moveForward && nextMatch(search, state, wrap, next.from, next.to);
       if (after)
         tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(after.from, 1), tr.mapping.map(after.to, -1)));
       else tr.setSelection(TextSelection.create(tr.doc, next.from, tr.mapping.map(next.to, 1)));
@@ -614,38 +722,38 @@ Replace the currently selected instance of the search query, and
 move to the next one. Or select the next match, if none is already
 selected.
 */
-const replaceNext = replaceCommand(true, true);
+const replaceNext: Command = replaceCommand(true, true);
 /**
 Replace the next instance of the search query. Don't wrap around
 at the end of the document.
 */
-const replaceNextNoWrap = replaceCommand(false, true);
+const replaceNextNoWrap: Command = replaceCommand(false, true);
 /**
 Replace the currently selected instance of the search query, if
 any, and keep it selected.
 */
-const replaceCurrent = replaceCommand(false, false);
+const replaceCurrent: Command = replaceCommand(false, false);
 /**
 Replace all instances of the search query.
 */
-const replaceAll = (state, dispatch) => {
-  let search = searchKey.getState(state);
+const replaceAll: Command = (state, dispatch) => {
+  const search = searchKey.getState(state);
   if (!search) return false;
-  let matches = [],
+  const matches = [],
     range = search.range || { from: 0, to: state.doc.content.size };
   for (let pos = range.from; ; ) {
-    let next = search.query.findNext(state, pos, range.to);
+    const next = search.query.findNext(state, pos, range.to);
     if (!next) break;
     matches.push(next);
     pos = next.to;
   }
   if (dispatch) {
-    let tr = state.tr;
+    const tr = state.tr;
     for (let i = matches.length - 1; i >= 0; i--) {
-      let match = matches[i];
-      let replacements = search.query.getReplacements(state, match);
+      const match = matches[i];
+      const replacements = search.query.getReplacements(state, match);
       for (let j = replacements.length - 1; j >= 0; j--) {
-        let { from, to, insert } = replacements[j];
+        const { from, to, insert } = replacements[j];
         tr.replace(from, to, insert);
       }
     }
diff --git a/packages/super-editor/src/extensions/search/search.js b/packages/super-editor/src/extensions/search/search.ts
similarity index 65%
rename from packages/super-editor/src/extensions/search/search.js
rename to packages/super-editor/src/extensions/search/search.ts
index c6600cc3a..b157cb609 100644
--- a/packages/super-editor/src/extensions/search/search.js
+++ b/packages/super-editor/src/extensions/search/search.ts
@@ -1,49 +1,62 @@
-// @ts-nocheck
-
 import { Extension } from '@core/Extension.js';
 import { search, SearchQuery, setSearchState, getMatchHighlights } from './prosemirror-search-patched.js';
 import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { v4 as uuidv4 } from 'uuid';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { Editor } from '@core/Editor.js';
 
-const isRegExp = (value) => Object.prototype.toString.call(value) === '[object RegExp]';
+const isRegExp = (value: unknown): value is RegExp => Object.prototype.toString.call(value) === '[object RegExp]';
 
 /**
  * Search match object
- * @typedef {Object} SearchMatch
- * @property {string} text - Found text
- * @property {number} from - From position
- * @property {number} to - To position
- * @property {string} id - ID of the search match
  */
+export interface SearchMatch {
+  /** Found text */
+  text: string;
+  /** From position */
+  from: number;
+  /** To position */
+  to: number;
+  /** ID of the search match */
+  id: string;
+}
 
 /**
  * Configuration options for Search
- * @typedef {Object} SearchOptions
- * @category Options
  */
+export type SearchOptions = Record<string, never>;
+
+/**
+ * Storage for Search
+ */
+export interface SearchStorage extends Record<string, unknown> {
+  searchResults: SearchMatch[];
+}
 
 /**
  * Options for the search command
- * @typedef {Object} SearchCommandOptions
- * @property {boolean} [highlight=true] - Whether to apply CSS classes for visual highlighting of search matches.
- *   When true, matches are styled with 'ProseMirror-search-match' or 'ProseMirror-active-search-match' classes.
- *   When false, matches are tracked without visual styling, useful for programmatic search without UI changes.
  */
+export interface SearchCommandOptions extends Record<string, unknown> {
+  /**
+   * Whether to apply CSS classes for visual highlighting of search matches.
+   * When true, matches are styled with 'ProseMirror-search-match' or 'ProseMirror-active-search-match' classes.
+   * When false, matches are tracked without visual styling, useful for programmatic search without UI changes.
+   * @default true
+   */
+  highlight?: boolean;
+}
 
 /**
  * @module Search
  * @sidebarTitle Search
  * @snippetPath /snippets/extensions/search.mdx
  */
-export const Search = Extension.create({
-  // @ts-expect-error - Storage type mismatch will be fixed in TS migration
+export const Search = Extension.create<SearchOptions, SearchStorage>({
+  name: 'search',
+
   addStorage() {
     return {
-      /**
-       * @private
-       * @type {SearchMatch[]|null}
-       */
       searchResults: [],
     };
   },
@@ -75,7 +88,7 @@ export const Search = Extension.create({
     return [search(), searchHighlightWithIdPlugin];
   },
 
-  addCommands() {
+  addCommands(): unknown {
     return {
       /**
        * Navigate to the first search match
@@ -87,7 +100,7 @@ export const Search = Extension.create({
       goToFirstMatch:
         () =>
         /** @returns {boolean} */
-        ({ state, editor }) => {
+        ({ state, editor }: { state: EditorState; editor: Editor }) => {
           const highlights = getMatchHighlights(state);
           if (!highlights) return false;
 
@@ -97,15 +110,18 @@ export const Search = Extension.create({
 
           const firstMatch = decorations[0];
           const domPos = editor.view.domAtPos(firstMatch.from);
-          domPos?.node?.scrollIntoView(true);
+          const target = domPos?.node;
+          if (target instanceof Element) {
+            target.scrollIntoView({ block: 'center', inline: 'nearest' });
+          }
           return true;
         },
 
       /**
        * Search for string matches in editor content
        * @category Command
-       * @param {String|RegExp} patternInput - Search string or pattern
-       * @param {SearchCommandOptions} [options={}] - Options to control search behavior
+       * @param patternInput - Search string or pattern
+       * @param options - Options to control search behavior
        * @example
        * // Basic search with highlighting (default)
        * const matches = editor.commands.search('test string')
@@ -118,9 +134,8 @@ export const Search = Extension.create({
        * @note Returns array of SearchMatch objects with positions and IDs
        */
       search:
-        (patternInput, options = {}) =>
-        /** @returns {SearchMatch[]} */
-        ({ state, dispatch }) => {
+        (patternInput: string | RegExp, options: SearchCommandOptions = {}) =>
+        ({ state, dispatch }: { state: EditorState; dispatch?: (tr: Transaction) => void }): SearchMatch[] => {
           // Validate options parameter - must be an object if provided
           if (options != null && (typeof options !== 'object' || Array.isArray(options))) {
             throw new TypeError('Search options must be an object');
@@ -128,21 +143,25 @@ export const Search = Extension.create({
 
           // Extract and validate highlight option with nullish coalescing fallback
           const highlight = typeof options?.highlight === 'boolean' ? options.highlight : true;
-          let pattern;
+          let pattern: string;
           let caseSensitive = false;
           let regexp = false;
           const wholeWord = false;
 
           if (isRegExp(patternInput)) {
-            const regexPattern = /** @type {RegExp} */ (patternInput);
             regexp = true;
-            pattern = regexPattern.source;
-            caseSensitive = !regexPattern.flags.includes('i');
+            pattern = patternInput.source;
+            caseSensitive = !patternInput.flags.includes('i');
           } else if (typeof patternInput === 'string' && /^\/(.+)\/([gimsuy]*)$/.test(patternInput)) {
-            const [, body, flags] = patternInput.match(/^\/(.+)\/([gimsuy]*)$/);
-            regexp = true;
-            pattern = body;
-            caseSensitive = !flags.includes('i');
+            const match = patternInput.match(/^\/(.+)\/([gimsuy]*)$/);
+            if (match) {
+              const [, body, flags] = match;
+              regexp = true;
+              pattern = body;
+              caseSensitive = !flags.includes('i');
+            } else {
+              pattern = String(patternInput);
+            }
           } else {
             pattern = String(patternInput);
           }
@@ -154,14 +173,14 @@ export const Search = Extension.create({
             wholeWord,
           });
           const tr = setSearchState(state.tr, query, null, { highlight });
-          dispatch(tr);
+          dispatch?.(tr);
 
           const newState = state.apply(tr);
 
           const decoSet = getMatchHighlights(newState);
           const matches = decoSet ? decoSet.find() : [];
 
-          const resultMatches = matches.map((d) => ({
+          const resultMatches: SearchMatch[] = matches.map((d) => ({
             from: d.from,
             to: d.to,
             text: newState.doc.textBetween(d.from, d.to),
@@ -176,16 +195,23 @@ export const Search = Extension.create({
       /**
        * Navigate to a specific search match
        * @category Command
-       * @param {SearchMatch} match - Match object to navigate to
+       * @param match - Match object to navigate to
        * @example
        * const searchResults = editor.commands.search('test string')
        * editor.commands.goToSearchResult(searchResults[3])
        * @note Scrolls to match and selects it
        */
       goToSearchResult:
-        (match) =>
-        /** @returns {boolean} */
-        ({ state, dispatch, editor }) => {
+        (match: SearchMatch) =>
+        ({
+          state,
+          dispatch,
+          editor,
+        }: {
+          state: EditorState;
+          dispatch: (tr: Transaction) => void;
+          editor: Editor;
+        }): boolean => {
           const { from, to } = match;
 
           editor.view.focus();
@@ -193,7 +219,7 @@ export const Search = Extension.create({
           dispatch(tr);
 
           const { node } = editor.view.domAtPos(from);
-          if (node?.scrollIntoView) {
+          if (node instanceof Element) {
             node.scrollIntoView({ block: 'center', inline: 'nearest' });
           }
 
diff --git a/packages/super-editor/src/extensions/shape-container/index.js b/packages/super-editor/src/extensions/shape-container/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/shape-container/index.js
rename to packages/super-editor/src/extensions/shape-container/index.ts
diff --git a/packages/super-editor/src/extensions/shape-container/shape-container.js b/packages/super-editor/src/extensions/shape-container/shape-container.ts
similarity index 71%
rename from packages/super-editor/src/extensions/shape-container/shape-container.js
rename to packages/super-editor/src/extensions/shape-container/shape-container.ts
index 52707c861..55d27feec 100644
--- a/packages/super-editor/src/extensions/shape-container/shape-container.js
+++ b/packages/super-editor/src/extensions/shape-container/shape-container.ts
@@ -1,11 +1,13 @@
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
 
 /**
  * Configuration options for ShapeContainer
- * @typedef {Object} ShapeContainerOptions
  * @category Options
- * @property {Object} [htmlAttributes] - HTML attributes for shape container elements
  */
+interface ShapeContainerOptions extends Record<string, unknown> {
+  /** HTML attributes for shape container elements */
+  htmlAttributes: Record<string, string>;
+}
 
 /**
  * Attributes for shape container nodes
@@ -23,7 +25,7 @@ import { Node, Attribute } from '@core/index.js';
  * @sidebarTitle Shape Container
  * @snippetPath /snippets/extensions/shape-container.mdx
  */
-export const ShapeContainer = Node.create({
+export const ShapeContainer = Node.create<ShapeContainerOptions>({
   name: 'shapeContainer',
 
   group: 'block',
@@ -44,7 +46,7 @@ export const ShapeContainer = Node.create({
   addAttributes() {
     return {
       fillcolor: {
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { fillcolor?: string }) => {
           if (!attrs.fillcolor) return {};
           return {
             style: `background-color: ${attrs.fillcolor}`,
@@ -54,13 +56,13 @@ export const ShapeContainer = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: { sdBlockId?: string | null }) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
       style: {
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { style?: string }) => {
           if (!attrs.style) return {};
           return {
             style: attrs.style,
@@ -86,10 +88,12 @@ export const ShapeContainer = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }) {
     return [
       'div',
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-type': this.name }),
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>, {
+        'data-type': this.name,
+      }),
       0,
     ];
   },
diff --git a/packages/super-editor/src/extensions/shape-group/ShapeGroupView.js b/packages/super-editor/src/extensions/shape-group/ShapeGroupView.ts
similarity index 73%
rename from packages/super-editor/src/extensions/shape-group/ShapeGroupView.js
rename to packages/super-editor/src/extensions/shape-group/ShapeGroupView.ts
index c66cda672..7326bf749 100644
--- a/packages/super-editor/src/extensions/shape-group/ShapeGroupView.js
+++ b/packages/super-editor/src/extensions/shape-group/ShapeGroupView.ts
@@ -1,35 +1,78 @@
-// @ts-expect-error - preset-geometry package may not have type definitions
 import { getPresetShapeSvg } from '@superdoc/preset-geometry';
 import { createGradient, createTextElement } from '../shared/svg-utils.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, DecorationSource, EditorView, NodeView } from 'prosemirror-view';
+import type { GradientData, TextContent, TextAlign } from '../shared/svg-utils.js';
+
+type GradientFill = GradientData & { type: 'gradient' };
+type SolidWithAlphaFill = { type: 'solidWithAlpha'; color: string; alpha: number };
+
+interface ShapeAttrs extends Record<string, unknown> {
+  x?: number | null;
+  y?: number | null;
+  width?: number | null;
+  height?: number | null;
+  rotation?: number | null;
+  flipH?: boolean;
+  flipV?: boolean;
+  kind?: string;
+  fillColor?: string | GradientFill | SolidWithAlphaFill | null;
+  strokeColor?: string | null;
+  strokeWidth?: number | null;
+  textContent?: TextContent | null;
+  textAlign?: TextAlign | null;
+  src?: string | null;
+}
 
-export class ShapeGroupView {
-  node;
-
-  view;
-
-  getPos;
-
-  decorations;
-
-  innerDecorations;
-
-  editor;
-
-  extension;
-
-  htmlAttributes;
+interface ShapeGroupNodeAttrs {
+  groupTransform?: { width?: number | null; height?: number | null };
+  shapes?: Array<{ shapeType?: string; attrs?: ShapeAttrs }>;
+  size?: { width?: number | null; height?: number | null };
+}
 
-  root;
+type ShapeGroupEditor = { view: EditorView; storage?: { image?: { media?: Record<string, string> } } };
+
+const isGradientFill = (fill: ShapeAttrs['fillColor']): fill is GradientFill => {
+  return Boolean(fill && typeof fill === 'object' && 'type' in fill && fill.type === 'gradient');
+};
+
+const isSolidAlphaFill = (fill: ShapeAttrs['fillColor']): fill is SolidWithAlphaFill => {
+  return Boolean(fill && typeof fill === 'object' && 'type' in fill && fill.type === 'solidWithAlpha');
+};
+
+export interface ShapeGroupViewProps {
+  node: PmNode;
+  view: EditorView;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
+  editor?: ShapeGroupEditor;
+  extension?: unknown;
+  htmlAttributes?: Record<string, AttributeValue>;
+}
 
-  constructor(props) {
+export class ShapeGroupView implements NodeView {
+  node: PmNode;
+  view: EditorView;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
+  editor: ShapeGroupEditor;
+  extension: unknown;
+  htmlAttributes: Record<string, AttributeValue>;
+  root: HTMLElement | null;
+
+  constructor(props: ShapeGroupViewProps) {
     this.node = props.node;
-    this.view = props.editor.view;
+    this.view = props.editor?.view ?? props.view;
     this.getPos = props.getPos;
     this.decorations = props.decorations;
     this.innerDecorations = props.innerDecorations;
-    this.editor = props.editor;
-    this.extension = props.extension;
-    this.htmlAttributes = props.htmlAttributes;
+    this.editor = props.editor ?? { view: props.view };
+    this.extension = props.extension ?? null;
+    this.htmlAttributes = props.htmlAttributes || {};
+    this.root = null;
 
     this.mount();
   }
@@ -78,15 +121,23 @@ export class ShapeGroupView {
   }
 
   get dom() {
-    return this.root;
+    return this.root as HTMLElement;
   }
 
   get contentDOM() {
     return null;
   }
 
-  createElement() {
-    const attrs = this.node.attrs;
+  createElement(): { element: HTMLElement } {
+    const attrs = this.node.attrs as ShapeGroupNodeAttrs & {
+      marginOffset?: { horizontal?: number; top?: number };
+      originalAttributes?: { relativeHeight?: number };
+      wrap?: {
+        type?: string;
+        attrs?: { distLeft?: number; distRight?: number; distTop?: number; distBottom?: number };
+      };
+      anchorData?: { hRelativeFrom?: string; alignH?: string | null };
+    };
     const { groupTransform, shapes, size, marginOffset, originalAttributes, wrap, anchorData } = attrs;
 
     const container = document.createElement('div');
@@ -94,8 +145,8 @@ export class ShapeGroupView {
     container.setAttribute('data-shape-group', '');
 
     // Use size from attrs if available, otherwise calculate from group transform
-    const width = size?.width || groupTransform?.width || 300;
-    const height = size?.height || groupTransform?.height || 200;
+    const width = Number(size?.width ?? groupTransform?.width ?? 300);
+    const height = Number(size?.height ?? groupTransform?.height ?? 200);
 
     container.style.width = `${width}px`;
     container.style.height = `${height}px`;
@@ -204,24 +255,29 @@ export class ShapeGroupView {
     return { element: container };
   }
 
-  createShapeElement(shape, groupTransform, defs, shapeIndex) {
+  createShapeElement(
+    shape: { attrs?: ShapeAttrs | null; shapeType?: string },
+    _groupTransform: Record<string, unknown> | undefined,
+    defs: SVGDefsElement,
+    shapeIndex: number,
+  ): SVGGElement | null {
     const attrs = shape.attrs;
     if (!attrs) return null;
 
     // Calculate position relative to group
-    const x = attrs.x ?? 0;
-    const y = attrs.y ?? 0;
-    const width = attrs.width ?? 100;
-    const height = attrs.height ?? 100;
+    const x = Number(attrs.x ?? 0);
+    const y = Number(attrs.y ?? 0);
+    const width = Number(attrs.width ?? 100);
+    const height = Number(attrs.height ?? 100);
 
     // Create a group element for the shape
     const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
 
     // Apply transformations
-    const transforms = [];
+    const transforms: string[] = [];
     transforms.push(`translate(${x}, ${y})`);
 
-    if (attrs.rotation !== 0) {
+    if (attrs.rotation && attrs.rotation !== 0) {
       transforms.push(`rotate(${attrs.rotation} ${width / 2} ${height / 2})`);
     }
 
@@ -238,43 +294,40 @@ export class ShapeGroupView {
     }
 
     // Generate the shape based on its kind
-    const shapeKind = attrs.kind || 'rect';
-    // Preserve null (from <a:noFill/>), but provide default for undefined
+    const shapeKind = (attrs.kind as string | undefined) || 'rect';
     const fillColor = attrs.fillColor === null ? null : (attrs.fillColor ?? '#5b9bd5');
-    // Use null-coalescing to preserve null (from <a:noFill/>), but provide default for undefined
     const strokeColor = attrs.strokeColor === null ? null : (attrs.strokeColor ?? '#000000');
     const strokeWidth = attrs.strokeWidth ?? 1;
 
     // Handle gradient fills
-    let fillValue = fillColor;
-    if (fillColor && typeof fillColor === 'object' && fillColor.type === 'gradient') {
+    let fillValue: string = typeof fillColor === 'string' ? fillColor : '#5b9bd5';
+    if (isGradientFill(fillColor)) {
       const gradientId = `gradient-${shapeIndex}-${Date.now()}-${Math.floor(Math.random() * 1e9)}`;
       const gradient = this.createGradient(fillColor, gradientId);
-      defs.appendChild(gradient);
-      fillValue = `url(#${gradientId})`;
+      if (gradient) {
+        defs.appendChild(gradient);
+        fillValue = `url(#${gradientId})`;
+      }
     } else if (fillColor === null) {
-      fillValue = 'none'; // Transparent
-    } else if (typeof fillColor === 'string') {
-      fillValue = fillColor;
+      fillValue = 'none';
+    } else if (isSolidAlphaFill(fillColor) && fillColor.type === 'solidWithAlpha') {
+      fillValue = fillColor.color ?? '#5b9bd5';
     }
 
-    // Special case: handle line shapes directly since getPresetShapeSvg doesn't support them
     if (shapeKind === 'line') {
       const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
       line.setAttribute('x1', '0');
       line.setAttribute('y1', '0');
-      // For horizontal lines (height=0), draw from (0,0) to (width,0)
-      // For vertical lines (width=0), draw from (0,0) to (0,height)
-      // For diagonal lines, draw from (0,0) to (width,height)
       line.setAttribute('x2', width.toString());
       line.setAttribute('y2', height.toString());
       line.setAttribute('stroke', strokeColor === null ? 'none' : strokeColor);
       line.setAttribute('stroke-width', (strokeColor === null ? 0 : strokeWidth).toString());
       g.appendChild(line);
 
-      // Add text content if present
-      if (attrs.textContent && attrs.textContent.parts) {
-        const textGroup = this.createTextElement(attrs.textContent, attrs.textAlign, width, height);
+      const textContent = attrs.textContent;
+      const textParts = textContent?.parts;
+      if (textParts) {
+        const textGroup = this.createTextElement(textContent, attrs.textAlign, width, height);
         if (textGroup) {
           g.appendChild(textGroup);
         }
@@ -293,7 +346,7 @@ export class ShapeGroupView {
         },
         width,
         height,
-      });
+      } as unknown as Parameters<typeof getPresetShapeSvg>[0]);
 
       if (svgContent) {
         // Parse the SVG string and extract the path/shape element
@@ -304,7 +357,7 @@ export class ShapeGroupView {
         if (svgElement) {
           // Copy all child elements from the generated SVG into our group
           Array.from(svgElement.children).forEach((child) => {
-            const clonedChild = child.cloneNode(true);
+            const clonedChild = child.cloneNode(true) as SVGElement;
 
             // For elements with viewBox-based paths (like ellipse, circle, etc.),
             // we need to scale them to match the actual width and height
@@ -340,7 +393,7 @@ export class ShapeGroupView {
               clonedChild.setAttribute('height', height.toString());
             } else if (clonedChild.tagName === 'path' && svgElement.hasAttribute('viewBox')) {
               // For path elements, we need to scale based on viewBox
-              const viewBox = svgElement.getAttribute('viewBox').split(' ').map(Number);
+              const viewBox = (svgElement.getAttribute('viewBox') || '').split(' ').map(Number);
               if (viewBox.length === 4) {
                 const [, , vbWidth, vbHeight] = viewBox;
                 const scaleX = width / vbWidth;
@@ -389,15 +442,23 @@ export class ShapeGroupView {
     return g;
   }
 
-  createTextElement(textContent, textAlign, width, height) {
-    return createTextElement(textContent, textAlign, width, height);
+  createTextElement(
+    textContent: TextContent | null | undefined,
+    textAlign: string | null | undefined,
+    width: number,
+    height: number,
+  ) {
+    if (!textContent) return null;
+    const align: TextAlign = (textAlign || 'left') as TextAlign;
+    return createTextElement(textContent, align, width, height);
   }
 
-  createGradient(gradientData, gradientId) {
+  createGradient(gradientData: GradientData | null | undefined, gradientId: string) {
+    if (!gradientData) return null;
     return createGradient(gradientData, gradientId);
   }
 
-  createImageElement(shape, _groupTransform) {
+  createImageElement(shape: { attrs?: ShapeAttrs | null }, _groupTransform: unknown) {
     const attrs = shape.attrs;
     if (!attrs) return null;
 
@@ -415,7 +476,8 @@ export class ShapeGroupView {
     image.setAttribute('height', height.toString());
 
     // Get image source from editor's media storage or use the path directly
-    const src = this.editor?.storage?.image?.media?.[attrs.src] ?? attrs.src;
+    const srcKey = attrs.src ?? '';
+    const src = this.editor.storage?.image?.media?.[srcKey] ?? attrs.src ?? '';
     image.setAttribute('href', src);
     image.setAttribute('preserveAspectRatio', 'none'); // Stretch to fill
 
@@ -427,7 +489,7 @@ export class ShapeGroupView {
     this.root = element;
   }
 
-  update() {
+  update(): boolean {
     // Recreate the NodeView.
     return false;
   }
diff --git a/packages/super-editor/src/extensions/shape-group/index.js b/packages/super-editor/src/extensions/shape-group/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/shape-group/index.js
rename to packages/super-editor/src/extensions/shape-group/index.ts
diff --git a/packages/super-editor/src/extensions/shape-group/shape-group.js b/packages/super-editor/src/extensions/shape-group/shape-group.js
deleted file mode 100644
index 293883a8f..000000000
--- a/packages/super-editor/src/extensions/shape-group/shape-group.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Node, Attribute } from '@core/index';
-import { ShapeGroupView } from './ShapeGroupView';
-
-export const ShapeGroup = Node.create({
-  name: 'shapeGroup',
-
-  group: 'inline',
-
-  inline: true,
-
-  atom: true,
-
-  addOptions() {
-    return {
-      htmlAttributes: {
-        contenteditable: false,
-      },
-    };
-  },
-
-  addAttributes() {
-    return {
-      groupTransform: {
-        default: {},
-        renderDOM: () => ({}),
-      },
-
-      shapes: {
-        default: [],
-        renderDOM: () => ({}),
-      },
-
-      size: {
-        default: null,
-        renderDOM: (attrs) => {
-          if (!attrs.size) return {};
-          const sizeData = {};
-          if (attrs.size.width) sizeData['data-width'] = attrs.size.width;
-          if (attrs.size.height) sizeData['data-height'] = attrs.size.height;
-          return sizeData;
-        },
-      },
-
-      padding: {
-        default: null,
-        renderDOM: (attrs) => {
-          if (!attrs.padding) return {};
-          const paddingData = {};
-          if (attrs.padding.top != null) paddingData['data-padding-top'] = attrs.padding.top;
-          if (attrs.padding.right != null) paddingData['data-padding-right'] = attrs.padding.right;
-          if (attrs.padding.bottom != null) paddingData['data-padding-bottom'] = attrs.padding.bottom;
-          if (attrs.padding.left != null) paddingData['data-padding-left'] = attrs.padding.left;
-          return paddingData;
-        },
-      },
-
-      marginOffset: {
-        default: null,
-        renderDOM: (attrs) => {
-          if (!attrs.marginOffset) return {};
-          const offsetData = {};
-          if (attrs.marginOffset.horizontal != null) offsetData['data-offset-x'] = attrs.marginOffset.horizontal;
-          if (attrs.marginOffset.top != null) offsetData['data-offset-y'] = attrs.marginOffset.top;
-          return offsetData;
-        },
-      },
-
-      drawingContent: {
-        rendered: false,
-      },
-
-      wrap: {
-        default: { type: 'Inline' },
-        rendered: false,
-      },
-
-      anchorData: {
-        default: null,
-        rendered: false,
-      },
-
-      originalAttributes: {
-        rendered: false,
-      },
-    };
-  },
-
-  parseDOM() {
-    return false;
-  },
-
-  renderDOM({ htmlAttributes }) {
-    return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-shape-group': '' })];
-  },
-
-  addNodeView() {
-    return (props) => {
-      return new ShapeGroupView({ ...props });
-    };
-  },
-});
diff --git a/packages/super-editor/src/extensions/shape-group/shape-group.ts b/packages/super-editor/src/extensions/shape-group/shape-group.ts
new file mode 100644
index 000000000..284f17399
--- /dev/null
+++ b/packages/super-editor/src/extensions/shape-group/shape-group.ts
@@ -0,0 +1,129 @@
+import { Node, Attribute } from '@core/index.js';
+import { ShapeGroupView } from './ShapeGroupView.js';
+import type { ShapeGroupViewProps } from './ShapeGroupView.js';
+import type { AttributeValue, AttributeSpec } from '@core/Attribute.js';
+import type { ParseRule } from 'prosemirror-model';
+
+type ShapeGroupSize = { width?: number | null; height?: number | null } | null;
+type ShapeGroupPadding = {
+  top?: number | null;
+  right?: number | null;
+  bottom?: number | null;
+  left?: number | null;
+} | null;
+type ShapeGroupMarginOffset = { horizontal?: number | null; top?: number | null } | null;
+
+type ShapeGroupAttributes = {
+  groupTransform?: Record<string, unknown>;
+  shapes?: unknown[];
+  size?: ShapeGroupSize;
+  padding?: ShapeGroupPadding;
+  marginOffset?: ShapeGroupMarginOffset;
+  drawingContent?: unknown;
+  wrap?: { type?: string };
+  anchorData?: unknown;
+  originalAttributes?: unknown;
+};
+
+type ShapeGroupOptions = {
+  htmlAttributes: Record<string, AttributeValue>;
+};
+
+export const ShapeGroup = Node.create<ShapeGroupOptions>({
+  name: 'shapeGroup',
+
+  group: 'inline',
+
+  inline: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      htmlAttributes: {
+        contenteditable: false,
+      },
+    };
+  },
+
+  addAttributes(): Record<string, Partial<AttributeSpec>> {
+    return {
+      groupTransform: {
+        default: {},
+        renderDOM: () => ({}),
+      },
+
+      shapes: {
+        default: [],
+        renderDOM: () => ({}),
+      },
+
+      size: {
+        default: null as ShapeGroupSize,
+        renderDOM: (attrs: ShapeGroupAttributes): Record<string, AttributeValue> => {
+          if (!attrs.size) return {};
+          const sizeData: Record<string, AttributeValue> = {};
+          if (attrs.size.width != null) sizeData['data-width'] = attrs.size.width;
+          if (attrs.size.height != null) sizeData['data-height'] = attrs.size.height;
+          return sizeData;
+        },
+      },
+
+      padding: {
+        default: null as ShapeGroupPadding,
+        renderDOM: (attrs: ShapeGroupAttributes): Record<string, AttributeValue> => {
+          if (!attrs.padding) return {};
+          const paddingData: Record<string, AttributeValue> = {};
+          if (attrs.padding.top != null) paddingData['data-padding-top'] = attrs.padding.top;
+          if (attrs.padding.right != null) paddingData['data-padding-right'] = attrs.padding.right;
+          if (attrs.padding.bottom != null) paddingData['data-padding-bottom'] = attrs.padding.bottom;
+          if (attrs.padding.left != null) paddingData['data-padding-left'] = attrs.padding.left;
+          return paddingData;
+        },
+      },
+
+      marginOffset: {
+        default: null as ShapeGroupMarginOffset,
+        renderDOM: (attrs: ShapeGroupAttributes): Record<string, AttributeValue> => {
+          if (!attrs.marginOffset) return {};
+          const offsetData: Record<string, AttributeValue> = {};
+          if (attrs.marginOffset.horizontal != null) offsetData['data-offset-x'] = attrs.marginOffset.horizontal;
+          if (attrs.marginOffset.top != null) offsetData['data-offset-y'] = attrs.marginOffset.top;
+          return offsetData;
+        },
+      },
+
+      drawingContent: {
+        rendered: false,
+      },
+
+      wrap: {
+        default: { type: 'Inline' },
+        rendered: false,
+      },
+
+      anchorData: {
+        default: null,
+        rendered: false,
+      },
+
+      originalAttributes: {
+        rendered: false,
+      },
+    };
+  },
+
+  parseDOM(): ParseRule[] {
+    return [];
+  },
+
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }) {
+    return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-shape-group': '' })];
+  },
+
+  addNodeView() {
+    return (props: ShapeGroupViewProps) => {
+      return new ShapeGroupView({ ...props });
+    };
+  },
+});
diff --git a/packages/super-editor/src/extensions/shape-textbox/index.js b/packages/super-editor/src/extensions/shape-textbox/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/shape-textbox/index.js
rename to packages/super-editor/src/extensions/shape-textbox/index.ts
diff --git a/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js b/packages/super-editor/src/extensions/shape-textbox/shape-textbox.ts
similarity index 66%
rename from packages/super-editor/src/extensions/shape-textbox/shape-textbox.js
rename to packages/super-editor/src/extensions/shape-textbox/shape-textbox.ts
index fae0eed50..c4768d7ad 100644
--- a/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js
+++ b/packages/super-editor/src/extensions/shape-textbox/shape-textbox.ts
@@ -1,11 +1,13 @@
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
 
 /**
  * Configuration options for ShapeTextbox
- * @typedef {Object} ShapeTextboxOptions
  * @category Options
- * @property {Object} [htmlAttributes] - HTML attributes for shape textbox elements
  */
+interface ShapeTextboxOptions extends Record<string, unknown> {
+  /** HTML attributes for shape textbox elements */
+  htmlAttributes: Record<string, string>;
+}
 
 /**
  * Attributes for shape textbox nodes
@@ -20,7 +22,7 @@ import { Node, Attribute } from '@core/index.js';
  * @sidebarTitle Shape Textbox
  * @snippetPath /snippets/extensions/shape-textbox.mdx
  */
-export const ShapeTextbox = Node.create({
+export const ShapeTextbox = Node.create<ShapeTextboxOptions>({
   name: 'shapeTextbox',
 
   group: 'block',
@@ -43,8 +45,8 @@ export const ShapeTextbox = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: { sdBlockId?: string | null }) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
@@ -62,10 +64,12 @@ export const ShapeTextbox = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, unknown> }) {
     return [
       'div',
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-type': this.name }),
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>, {
+        'data-type': this.name,
+      }),
       0,
     ];
   },
diff --git a/packages/super-editor/src/extensions/shared/cascade-toggle.test.js b/packages/super-editor/src/extensions/shared/cascade-toggle.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/shared/cascade-toggle.test.js
rename to packages/super-editor/src/extensions/shared/cascade-toggle.test.ts
diff --git a/packages/super-editor/src/extensions/shared/cascade-toggle.js b/packages/super-editor/src/extensions/shared/cascade-toggle.ts
similarity index 61%
rename from packages/super-editor/src/extensions/shared/cascade-toggle.js
rename to packages/super-editor/src/extensions/shared/cascade-toggle.ts
index 872beb96b..1377c7454 100644
--- a/packages/super-editor/src/extensions/shared/cascade-toggle.js
+++ b/packages/super-editor/src/extensions/shared/cascade-toggle.ts
@@ -1,6 +1,18 @@
+import type { CommandProps } from '@core/types/ChainedCommands.js';
+
 /**
  * Utility helpers for cascade-aware mark toggles.
  */
+interface CascadeToggleOptions {
+  markName: string;
+  setCommand?: string;
+  unsetCommand?: string;
+  toggleCommand?: string;
+  negationAttrs?: Record<string, unknown>;
+  isNegation?: (attrs: Record<string, unknown>) => boolean;
+  extendEmptyMarkRange?: boolean;
+}
+
 export function createCascadeToggleCommands({
   markName,
   setCommand,
@@ -9,7 +21,7 @@ export function createCascadeToggleCommands({
   negationAttrs,
   isNegation,
   extendEmptyMarkRange,
-} = {}) {
+}: CascadeToggleOptions) {
   if (!markName) throw new Error('createCascadeToggleCommands requires a markName');
 
   const capitalized = markName.charAt(0).toUpperCase() + markName.slice(1);
@@ -17,7 +29,11 @@ export function createCascadeToggleCommands({
   const unsetName = unsetCommand ?? `unset${capitalized}`;
   const toggleName = toggleCommand ?? `toggle${capitalized}`;
 
-  const cascadeOptions = {};
+  const cascadeOptions: {
+    negationAttrs?: Record<string, unknown>;
+    isNegation?: (attrs: Record<string, unknown>) => boolean;
+    extendEmptyMarkRange?: boolean;
+  } = {};
   if (negationAttrs) cascadeOptions.negationAttrs = negationAttrs;
   if (typeof isNegation === 'function') cascadeOptions.isNegation = isNegation;
   if (extendEmptyMarkRange !== undefined) cascadeOptions.extendEmptyMarkRange = extendEmptyMarkRange;
@@ -25,17 +41,17 @@ export function createCascadeToggleCommands({
   return {
     [setName]:
       () =>
-      ({ commands }) =>
+      ({ commands }: CommandProps) =>
         commands.setMark(markName),
 
     [unsetName]:
       () =>
-      ({ commands }) =>
+      ({ commands }: CommandProps) =>
         commands.unsetMark(markName),
 
     [toggleName]:
       () =>
-      ({ commands }) =>
+      ({ commands }: CommandProps) =>
         commands.toggleMarkCascade(markName, cascadeOptions),
   };
 }
diff --git a/packages/super-editor/src/extensions/shared/svg-utils.d.ts b/packages/super-editor/src/extensions/shared/svg-utils.d.ts
new file mode 100644
index 000000000..a15e0555a
--- /dev/null
+++ b/packages/super-editor/src/extensions/shared/svg-utils.d.ts
@@ -0,0 +1,10 @@
+export function createGradient(gradientData: unknown, gradientId: string): SVGElement;
+export function createTextElement(
+  textContent: unknown,
+  textAlign: unknown,
+  width: number,
+  height: number,
+): SVGGElement | null;
+export function applyGradientToSVG(svg: SVGElement, gradientData: unknown): void;
+export function applyAlphaToSVG(svg: SVGElement, alphaData: unknown): void;
+export function generateTransforms(attrs: unknown): string[];
diff --git a/packages/super-editor/src/extensions/shared/svg-utils.js b/packages/super-editor/src/extensions/shared/svg-utils.ts
similarity index 53%
rename from packages/super-editor/src/extensions/shared/svg-utils.js
rename to packages/super-editor/src/extensions/shared/svg-utils.ts
index d67e7b44f..093bf4669 100644
--- a/packages/super-editor/src/extensions/shared/svg-utils.js
+++ b/packages/super-editor/src/extensions/shared/svg-utils.ts
@@ -1,33 +1,64 @@
 /**
- * Shared utility functions for SVG shape rendering
- * Used by VectorShapeView and ShapeGroupView
+ * Shared utility functions for SVG shape rendering.
+ * Used by VectorShapeView and ShapeGroupView.
  */
 
-/**
- * Creates an SVG gradient element (linear or radial)
- * @param {Object} gradientData - The gradient configuration
- * @param {string} gradientData.gradientType - 'linear' or 'radial'
- * @param {Array} gradientData.stops - Array of gradient stops
- * @param {number} gradientData.angle - Angle for linear gradients (in degrees)
- * @param {string} gradientId - Unique identifier for the gradient
- * @returns {SVGGradientElement|null} The created gradient element or null
- */
-export function createGradient(gradientData, gradientId) {
+type GradientStop = {
+  position: number;
+  color: string;
+  alpha?: number | null;
+};
+
+export type GradientData = {
+  gradientType: 'linear' | 'radial';
+  stops: GradientStop[];
+  angle: number;
+};
+
+export type AlphaData = {
+  color: string;
+  alpha: number;
+};
+
+type TextFormatting = {
+  bold?: boolean;
+  italic?: boolean;
+  color?: string;
+  fontSize?: number;
+};
+
+type TextPart = {
+  text?: string | null;
+  isLineBreak?: boolean;
+  isEmptyParagraph?: boolean;
+  formatting?: TextFormatting | null;
+};
+
+export type TextContent = {
+  parts: TextPart[];
+};
+
+export type TextAlign = 'left' | 'center' | 'right' | 'r';
+
+type TransformableAttrs = {
+  rotation?: number | null;
+  flipH?: boolean;
+  flipV?: boolean;
+};
+
+export function createGradient(gradientData: GradientData, gradientId: string): SVGGradientElement | null {
   const { gradientType, stops, angle } = gradientData;
 
-  // Ensure we have stops
   if (!stops || stops.length === 0) {
     return null;
   }
 
-  let gradient;
+  let gradient: SVGLinearGradientElement | SVGRadialGradientElement | null = null;
 
   if (gradientType === 'linear') {
     gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
     gradient.setAttribute('id', gradientId);
 
-    // Convert angle to x1, y1, x2, y2 coordinates
-    // OOXML angle is in degrees, 0 = left to right, 90 = bottom to top
     const radians = (angle * Math.PI) / 180;
     const x1 = 50 - 50 * Math.cos(radians);
     const y1 = 50 + 50 * Math.sin(radians);
@@ -46,53 +77,44 @@ export function createGradient(gradientData, gradientId) {
     gradient.setAttribute('r', '50%');
   }
 
-  // Add gradient stops
-  stops.forEach((stop) => {
+  stops.forEach((stop: GradientStop) => {
     const stopElement = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
     stopElement.setAttribute('offset', `${stop.position * 100}%`);
     stopElement.setAttribute('stop-color', stop.color);
     if (stop.alpha != null && stop.alpha < 1) {
       stopElement.setAttribute('stop-opacity', stop.alpha.toString());
     }
-    gradient.appendChild(stopElement);
+    gradient?.appendChild(stopElement);
   });
 
   return gradient;
 }
 
-/**
- * Creates an SVG foreignObject with formatted text content
- * @param {Object} textContent - The text content with parts and formatting
- * @param {string} textAlign - Text alignment ('left', 'center', 'right', 'r')
- * @param {number} width - Width of the text area
- * @param {number} height - Height of the text area
- * @returns {SVGForeignObjectElement} The created foreignObject element
- */
-export function createTextElement(textContent, textAlign, width, height) {
-  // Use foreignObject with HTML for proper text wrapping
+export function createTextElement(
+  textContent: TextContent,
+  textAlign: TextAlign,
+  width: number,
+  height: number,
+): SVGForeignObjectElement {
   const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   foreignObject.setAttribute('x', '0');
   foreignObject.setAttribute('y', '0');
   foreignObject.setAttribute('width', width.toString());
   foreignObject.setAttribute('height', height.toString());
 
-  // Create HTML div for text content
   const div = document.createElement('div');
   div.style.width = '100%';
   div.style.height = '100%';
   div.style.display = 'flex';
   div.style.flexDirection = 'column';
-  div.style.justifyContent = 'center'; // Vertically center the text block
+  div.style.justifyContent = 'center';
   div.style.padding = '10px';
   div.style.boxSizing = 'border-box';
   div.style.wordWrap = 'break-word';
   div.style.overflowWrap = 'break-word';
-  // Set explicit base font-size to prevent CSS inheritance from parent editor
-  // Default to 12px which is a reasonable base; individual spans will override with their own sizes
   div.style.fontSize = '12px';
   div.style.lineHeight = '1.2';
 
-  // Set text alignment (horizontal alignment for each paragraph)
   if (textAlign === 'center') {
     div.style.textAlign = 'center';
   } else if (textAlign === 'right' || textAlign === 'r') {
@@ -101,24 +123,19 @@ export function createTextElement(textContent, textAlign, width, height) {
     div.style.textAlign = 'left';
   }
 
-  // Create paragraphs by splitting on line breaks
   let currentParagraph = document.createElement('div');
 
-  // Add text content with formatting
-  textContent.parts.forEach((part) => {
+  textContent.parts.forEach((part: TextPart) => {
     if (part.isLineBreak) {
-      // Finish current paragraph and start a new one
       div.appendChild(currentParagraph);
       currentParagraph = document.createElement('div');
-      // Empty paragraphs create extra spacing (blank line)
       if (part.isEmptyParagraph) {
         currentParagraph.style.minHeight = '1em';
       }
     } else {
       const span = document.createElement('span');
-      span.textContent = part.text;
+      span.textContent = part.text ?? '';
 
-      // Apply formatting
       if (part.formatting) {
         if (part.formatting.bold) {
           span.style.fontWeight = 'bold';
@@ -138,41 +155,28 @@ export function createTextElement(textContent, textAlign, width, height) {
     }
   });
 
-  // Add the final paragraph
   div.appendChild(currentParagraph);
   foreignObject.appendChild(div);
 
   return foreignObject;
 }
 
-/**
- * Applies a gradient to all filled elements in an SVG
- * @param {SVGElement} svg - The SVG element to apply gradient to
- * @param {Object} gradientData - The gradient configuration
- * @param {string} gradientData.gradientType - 'linear' or 'radial'
- * @param {Array} gradientData.stops - Array of gradient stops
- * @param {number} gradientData.angle - Angle for linear gradients (in degrees)
- */
-export function applyGradientToSVG(svg, gradientData) {
+export function applyGradientToSVG(svg: SVGElement, gradientData: GradientData): void {
   const { gradientType, stops, angle } = gradientData;
   const gradientId = `gradient-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
 
-  // Create defs if it doesn't exist
   let defs = svg.querySelector('defs');
   if (!defs) {
     defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
     svg.insertBefore(defs, svg.firstChild);
   }
 
-  // Create gradient element
-  let gradient;
+  let gradient: SVGLinearGradientElement | SVGRadialGradientElement | null = null;
 
   if (gradientType === 'linear') {
     gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
     gradient.setAttribute('id', gradientId);
 
-    // Convert angle to x1, y1, x2, y2 coordinates
-    // OOXML angle is in degrees, 0 = left to right, 90 = bottom to top
     const radians = (angle * Math.PI) / 180;
     const x1 = 50 - 50 * Math.cos(radians);
     const y1 = 50 + 50 * Math.sin(radians);
@@ -191,62 +195,45 @@ export function applyGradientToSVG(svg, gradientData) {
     gradient.setAttribute('r', '50%');
   }
 
-  // Add gradient stops
-  stops.forEach((stop) => {
+  stops.forEach((stop: GradientStop) => {
     const stopElement = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
     stopElement.setAttribute('offset', `${stop.position * 100}%`);
     stopElement.setAttribute('stop-color', stop.color);
     if (stop.alpha != null && stop.alpha < 1) {
       stopElement.setAttribute('stop-opacity', stop.alpha.toString());
     }
-    gradient.appendChild(stopElement);
+    gradient?.appendChild(stopElement);
   });
 
-  defs.appendChild(gradient);
+  if (gradient) {
+    defs.appendChild(gradient);
+  }
 
-  // Apply gradient to all filled elements
-  const filledElements = svg.querySelectorAll('[fill]:not([fill="none"])');
-  filledElements.forEach((el) => {
-    el.setAttribute('fill', `url(#${gradientId})`);
+  const filledElements = svg.querySelectorAll<SVGElement>('[fill]:not([fill="none"])');
+  filledElements.forEach((element) => {
+    element.setAttribute('fill', `url(#${gradientId})`);
   });
 }
 
-/**
- * Applies alpha transparency to all filled elements in an SVG
- * @param {SVGElement} svg - The SVG element to apply alpha to
- * @param {Object} alphaData - The alpha configuration
- * @param {string} alphaData.color - The fill color
- * @param {number} alphaData.alpha - The alpha value (0-1)
- */
-export function applyAlphaToSVG(svg, alphaData) {
+export function applyAlphaToSVG(svg: SVGElement, alphaData: AlphaData): void {
   const { color, alpha } = alphaData;
-
-  // Apply color with opacity to all filled elements
-  const filledElements = svg.querySelectorAll('[fill]:not([fill="none"])');
-  filledElements.forEach((el) => {
-    el.setAttribute('fill', color);
-    el.setAttribute('fill-opacity', alpha.toString());
+  const filledElements = svg.querySelectorAll<SVGElement>('[fill]:not([fill="none"])');
+  filledElements.forEach((element) => {
+    element.setAttribute('fill', color);
+    element.setAttribute('fill-opacity', alpha.toString());
   });
 }
 
-/**
- * Generates transform string from shape attributes
- * @param {Object} attrs - Shape attributes
- * @param {number} attrs.rotation - Rotation angle in degrees
- * @param {boolean} attrs.flipH - Horizontal flip
- * @param {boolean} attrs.flipV - Vertical flip
- * @returns {string[]} Array of transform strings
- */
-export function generateTransforms(attrs) {
-  const transforms = [];
+export function generateTransforms(attrs: TransformableAttrs): string[] {
+  const transforms: string[] = [];
   if (attrs.rotation != null) {
     transforms.push(`rotate(${attrs.rotation}deg)`);
   }
   if (attrs.flipH) {
-    transforms.push(`scaleX(-1)`);
+    transforms.push('scaleX(-1)');
   }
   if (attrs.flipV) {
-    transforms.push(`scaleY(-1)`);
+    transforms.push('scaleY(-1)');
   }
   return transforms;
 }
diff --git a/packages/super-editor/src/extensions/slash-menu/index.js b/packages/super-editor/src/extensions/slash-menu/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/slash-menu/index.js
rename to packages/super-editor/src/extensions/slash-menu/index.ts
diff --git a/packages/super-editor/src/extensions/slash-menu/slash-menu.test.js b/packages/super-editor/src/extensions/slash-menu/slash-menu.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/slash-menu/slash-menu.test.js
rename to packages/super-editor/src/extensions/slash-menu/slash-menu.test.ts
diff --git a/packages/super-editor/src/extensions/slash-menu/slash-menu.js b/packages/super-editor/src/extensions/slash-menu/slash-menu.ts
similarity index 92%
rename from packages/super-editor/src/extensions/slash-menu/slash-menu.js
rename to packages/super-editor/src/extensions/slash-menu/slash-menu.ts
index b064e5a75..8ddb10a7a 100644
--- a/packages/super-editor/src/extensions/slash-menu/slash-menu.js
+++ b/packages/super-editor/src/extensions/slash-menu/slash-menu.ts
@@ -1,4 +1,4 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { Extension } from '@core/Extension.js';
 import { getSurfaceRelativePoint } from '../../core/helpers/editorSurface.js';
 
@@ -17,7 +17,7 @@ import { getSurfaceRelativePoint } from '../../core/helpers/editorSurface.js';
  * @returns {HTMLElement|null} The containing block ancestor, or null if fixed is relative to viewport
  * @throws {Error} Never throws - errors from getComputedStyle are caught and logged
  */
-export function findContainingBlockAncestor(element) {
+export function findContainingBlockAncestor(element: HTMLElement | null | undefined): HTMLElement | null {
   if (!element) return null;
 
   let current = element.parentElement;
@@ -28,7 +28,8 @@ export function findContainingBlockAncestor(element) {
       // Check for properties that create a containing block for fixed positioning
       const transform = style.transform;
       const filter = style.filter;
-      const backdropFilter = style.backdropFilter || style.webkitBackdropFilter;
+      const backdropFilter =
+        style.backdropFilter || (style as unknown as { webkitBackdropFilter?: string }).webkitBackdropFilter;
       const perspective = style.perspective;
       const willChange = style.willChange;
       const contain = style.contain;
@@ -109,7 +110,15 @@ export function findContainingBlockAncestor(element) {
  * @property {string} [id] - Menu item ID (for 'select' action)
  */
 
-export const SlashMenuPluginKey = new PluginKey('slashMenu');
+interface SlashMenuState {
+  open: boolean;
+  selected: string | null;
+  anchorPos: number | null;
+  menuPosition: { left: string; top: string } | null;
+  disabled: boolean;
+}
+
+export const SlashMenuPluginKey = new PluginKey<SlashMenuState>('slashMenu');
 
 // Menu positioning constants (in pixels)
 const MENU_OFFSET_X = 100; // Horizontal offset for slash menu
@@ -139,13 +148,16 @@ export const SlashMenu = Extension.create({
 
   addPmPlugins() {
     const editor = this.editor;
+    if (!editor) {
+      return [];
+    }
     if (editor.options?.isHeadless) {
       return [];
     }
 
     // Cooldown flag and timeout for slash menu
     let slashCooldown = false;
-    let slashCooldownTimeout = null;
+    let slashCooldownTimeout: ReturnType<typeof setTimeout> | null = null;
 
     /**
      * Check if the context menu is disabled via editor options
@@ -158,7 +170,7 @@ export const SlashMenu = Extension.create({
      * @param {Partial<SlashMenuState>} [value={}] - Partial state to merge with defaults
      * @returns {SlashMenuState} Complete state object with all properties
      */
-    const ensureStateShape = (value = {}) => ({
+    const ensureStateShape = (value: Partial<SlashMenuState> = {}): SlashMenuState => ({
       open: false,
       selected: null,
       anchorPos: null,
@@ -167,7 +179,7 @@ export const SlashMenu = Extension.create({
       ...value,
     });
 
-    const slashMenuPlugin = new Plugin({
+    const slashMenuPlugin = new Plugin<SlashMenuState>({
       key: SlashMenuPluginKey,
 
       state: {
@@ -315,7 +327,7 @@ export const SlashMenu = Extension.create({
         const updatePosition = () => {
           if (isMenuDisabled()) return;
           const state = SlashMenuPluginKey.getState(editorView.state);
-          if (state.open) {
+          if (state?.open) {
             editorView.dispatch(
               editorView.state.tr.setMeta(SlashMenuPluginKey, {
                 type: 'updatePosition',
@@ -354,7 +366,8 @@ export const SlashMenu = Extension.create({
           if (isMenuDisabled()) {
             return false;
           }
-          const pluginState = this.getState(view.state);
+          const pluginState = SlashMenuPluginKey.getState(view.state);
+          if (!pluginState) return false;
 
           // If cooldown is active and slash is pressed, allow default behavior
           if (event.key === '/' && slashCooldown) {
@@ -362,8 +375,9 @@ export const SlashMenu = Extension.create({
           }
 
           if (event.key === '/' && !pluginState.open) {
-            const { $cursor } = view.state.selection;
-            if (!$cursor) return false;
+            const selection = view.state.selection;
+            if (!(selection instanceof TextSelection) || !selection.empty || !selection.$cursor) return false;
+            const { $cursor } = selection;
 
             const isParagraph = $cursor.parent.type.name === 'paragraph';
             if (!isParagraph) return false;
@@ -405,9 +419,7 @@ export const SlashMenu = Extension.create({
 
             // Restore cursor position and focus
             if (anchorPos !== null) {
-              const tr = view.state.tr.setSelection(
-                view.state.selection.constructor.near(view.state.doc.resolve(anchorPos)),
-              );
+              const tr = view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(anchorPos)));
               view.dispatch(tr);
               view.focus();
             }
diff --git a/packages/super-editor/src/extensions/strike/index.js b/packages/super-editor/src/extensions/strike/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/strike/index.js
rename to packages/super-editor/src/extensions/strike/index.ts
diff --git a/packages/super-editor/src/extensions/strike/strike.js b/packages/super-editor/src/extensions/strike/strike.ts
similarity index 64%
rename from packages/super-editor/src/extensions/strike/strike.js
rename to packages/super-editor/src/extensions/strike/strike.ts
index 818490d96..e2c7e3278 100644
--- a/packages/super-editor/src/extensions/strike/strike.js
+++ b/packages/super-editor/src/extensions/strike/strike.ts
@@ -1,13 +1,15 @@
-// @ts-nocheck
-import { Mark, Attribute } from '@core/index.js';
+import { Mark, Attribute, type AttributeValue } from '@core/index.js';
 import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.js';
+import type { DOMOutputSpec, Mark as PmMark } from 'prosemirror-model';
 
 /**
  * Configuration options for Strike
- * @typedef {Object} StrikeOptions
  * @category Options
- * @property {Object} [htmlAttributes={}] - HTML attributes for strikethrough elements
  */
+interface StrikeOptions extends Record<string, unknown> {
+  /** HTML attributes for strikethrough elements */
+  htmlAttributes: Record<string, unknown>;
+}
 
 /**
  * @module Strike
@@ -15,7 +17,7 @@ import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.j
  * @snippetPath /snippets/extensions/strike.mdx
  * @shortcut Mod-Shift-x | toggleStrike | Toggle strikethrough formatting
  */
-export const Strike = Mark.create({
+export const Strike = Mark.create<StrikeOptions>({
   name: 'strike',
 
   addOptions() {
@@ -28,13 +30,16 @@ export const Strike = Mark.create({
     return [
       { tag: 's' },
       { style: 'text-decoration=line-through' },
-      { style: 'text-decoration=auto', clearMark: (m) => m.type.name == 's' },
+      { style: 'text-decoration=auto', clearMark: (m: PmMark) => m.type.name === 's' },
     ];
   },
 
-  renderDOM({ mark, htmlAttributes }) {
-    const merged = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-    const { value } = mark.attrs;
+  renderDOM({ mark, htmlAttributes }: { mark: PmMark; htmlAttributes: Record<string, AttributeValue> }): DOMOutputSpec {
+    const merged = Attribute.mergeAttributes(
+      this.options.htmlAttributes as Record<string, AttributeValue>,
+      htmlAttributes,
+    );
+    const { value } = mark.attrs as { value?: string | boolean | null };
     const { ...rest } = merged || {};
     if (value === '0' || value === false) {
       return ['span', rest, 0];
@@ -83,7 +88,7 @@ export const Strike = Mark.create({
        */
       value: {
         default: null,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { value?: string | boolean | null }) => {
           if (attrs.value == null) return {};
           if (attrs.value === '0' || !attrs.value) {
             return { style: 'text-decoration: none' };
@@ -96,8 +101,8 @@ export const Strike = Mark.create({
 
   addShortcuts() {
     return {
-      'Mod-Shift-x': () => this.editor.commands.toggleStrike(),
-      'Mod-Shift-X': () => this.editor.commands.toggleStrike(),
+      'Mod-Shift-x': () => this.editor?.commands.toggleStrike() ?? false,
+      'Mod-Shift-X': () => this.editor?.commands.toggleStrike() ?? false,
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.js b/packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.ts
similarity index 66%
rename from packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.js
rename to packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.ts
index 57a039192..2922832c0 100644
--- a/packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.js
+++ b/packages/super-editor/src/extensions/structured-content/StructuredContentBlockView.ts
@@ -2,18 +2,21 @@ import { Attribute } from '@core/index';
 import { updateDOMAttributes } from '@core/helpers/updateDOMAttributes';
 import { StructuredContentViewBase } from './StructuredContentViewBase';
 import { structuredContentClass, structuredContentInnerClass } from './structured-content-block';
+import type { StructuredContentViewProps } from './StructuredContentViewBase';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, DecorationSource } from 'prosemirror-view';
 
 export class StructuredContentBlockView extends StructuredContentViewBase {
-  constructor(props) {
+  constructor(props: StructuredContentViewProps) {
     super(props);
   }
 
-  mount() {
+  mount(): void {
     this.buildView();
   }
 
-  get contentDOM() {
-    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
+  get contentDOM(): HTMLElement | null {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`) as HTMLElement | null;
     return contentElement || null;
   }
 
@@ -28,12 +31,12 @@ export class StructuredContentBlockView extends StructuredContentViewBase {
     element.append(contentElement);
 
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(element, { ...domAttrs });
+    updateDOMAttributes(element, { ...domAttrs } as import('prosemirror-model').Attrs);
 
     return { element, contentElement };
   }
 
-  buildView() {
+  buildView(): void {
     const { element } = this.createElement();
     const dragHandle = this.createDragHandle();
     element.prepend(dragHandle);
@@ -41,12 +44,13 @@ export class StructuredContentBlockView extends StructuredContentViewBase {
     this.root = element;
   }
 
-  updateView() {
+  updateView(): void {
+    if (!this.dom) return;
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(this.dom, { ...domAttrs });
+    updateDOMAttributes(this.dom, { ...domAttrs } as import('prosemirror-model').Attrs);
   }
 
-  update(node, decorations, innerDecorations) {
+  update(node: PmNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
     const result = super.update(node, decorations, innerDecorations);
     if (!result) return false;
     this.updateView();
diff --git a/packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.js b/packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.ts
similarity index 67%
rename from packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.js
rename to packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.ts
index 1f647d556..9e344aaa3 100644
--- a/packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.js
+++ b/packages/super-editor/src/extensions/structured-content/StructuredContentInlineView.ts
@@ -1,10 +1,12 @@
 import { Attribute } from '@core/index';
 import { updateDOMAttributes } from '@core/helpers/updateDOMAttributes';
-import { StructuredContentViewBase } from './StructuredContentViewBase';
+import { StructuredContentViewBase, type StructuredContentViewProps } from './StructuredContentViewBase';
 import { structuredContentClass, structuredContentInnerClass } from './structured-content';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, DecorationSource } from 'prosemirror-view';
 
 export class StructuredContentInlineView extends StructuredContentViewBase {
-  constructor(props) {
+  constructor(props: StructuredContentViewProps) {
     super(props);
   }
 
@@ -12,8 +14,8 @@ export class StructuredContentInlineView extends StructuredContentViewBase {
     this.buildView();
   }
 
-  get contentDOM() {
-    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
+  get contentDOM(): HTMLElement | null {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`) as HTMLElement | null;
     return contentElement || null;
   }
 
@@ -28,7 +30,7 @@ export class StructuredContentInlineView extends StructuredContentViewBase {
     element.append(contentElement);
 
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(element, { ...domAttrs });
+    updateDOMAttributes(element, { ...domAttrs } as import('prosemirror-model').Attrs);
 
     return { element, contentElement };
   }
@@ -42,11 +44,12 @@ export class StructuredContentInlineView extends StructuredContentViewBase {
   }
 
   updateView() {
+    if (!this.dom) return;
     const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(this.dom, { ...domAttrs });
+    updateDOMAttributes(this.dom, { ...domAttrs } as import('prosemirror-model').Attrs);
   }
 
-  update(node, decorations, innerDecorations) {
+  update(node: PmNode, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
     const result = super.update(node, decorations, innerDecorations);
     if (!result) return false;
     this.updateView();
diff --git a/packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.js b/packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.ts
similarity index 78%
rename from packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.js
rename to packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.ts
index cd7a0f1b6..d5703c3f0 100644
--- a/packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.js
+++ b/packages/super-editor/src/extensions/structured-content/StructuredContentViewBase.ts
@@ -1,28 +1,42 @@
 import { Attribute } from '@core/index';
 import { NodeSelection } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, DecorationSource, EditorView } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+import type { AttributeValue } from '@core/Attribute.js';
+
+export interface StructuredContentViewProps {
+  node: PmNode;
+  editor: Editor;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
+  extension?: unknown;
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 export class StructuredContentViewBase {
-  node;
+  node: PmNode;
 
-  view;
+  view: EditorView;
 
-  getPos;
+  getPos: () => number | undefined;
 
-  decorations;
+  decorations: readonly Decoration[];
 
-  innerDecorations;
+  innerDecorations: DecorationSource;
 
-  editor;
+  editor: Editor;
 
-  extension;
+  extension: unknown;
 
-  htmlAttributes;
+  htmlAttributes: Record<string, AttributeValue>;
 
-  root;
+  root: HTMLElement | null = null;
 
   isDragging = false;
 
-  constructor(props) {
+  constructor(props: StructuredContentViewProps) {
     this.node = props.node;
     this.view = props.editor.view;
     this.getPos = props.getPos;
@@ -32,22 +46,22 @@ export class StructuredContentViewBase {
     this.extension = props.extension;
     this.htmlAttributes = props.htmlAttributes;
 
-    this.mount(props);
+    this.mount();
   }
 
   mount() {
     return;
   }
 
-  get dom() {
+  get dom(): HTMLElement | null {
     return this.root;
   }
 
-  get contentDOM() {
+  get contentDOM(): HTMLElement | null {
     return null;
   }
 
-  update(node, decorations, innerDecorations) {
+  update(node: PmNode, decorations: readonly Decoration[], innerDecorations: DecorationSource) {
     if (node.type !== this.node.type) {
       return false;
     }
@@ -60,10 +74,11 @@ export class StructuredContentViewBase {
     return true;
   }
 
-  stopEvent(event) {
+  stopEvent(event: Event) {
     if (!this.dom) return false;
 
-    const target = event.target;
+    const target = event.target as HTMLElement | null;
+    if (!target) return false;
     const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
 
     // any event from child nodes should be handled by ProseMirror
@@ -136,12 +151,13 @@ export class StructuredContentViewBase {
     return true;
   }
 
-  ignoreMutation(mutation) {
+  ignoreMutation(mutation: MutationRecord) {
     if (!this.dom || !this.contentDOM) return true;
 
     if (this.node.isLeaf || this.node.isAtom) return true;
 
-    if (mutation.type === 'selection') return false;
+    const mutationType = mutation.type as string;
+    if (mutationType === 'selection') return false;
 
     if (this.contentDOM === mutation.target && mutation.type === 'attributes') return true;
 
@@ -151,11 +167,11 @@ export class StructuredContentViewBase {
   }
 
   destroy() {
-    this.dom.remove();
+    this.dom?.remove();
     this.contentDOM?.remove();
   }
 
-  updateAttributes(attrs) {
+  updateAttributes(attrs: Partial<Record<string, AttributeValue>>) {
     const pos = this.getPos();
 
     if (typeof pos !== 'number') {
@@ -189,9 +205,10 @@ export class StructuredContentViewBase {
     return dragHandle;
   }
 
-  onDragStart(event) {
+  onDragStart(event: DragEvent) {
     const { view } = this.editor;
-    const target = event.target;
+    const target = event.target as HTMLElement | null;
+    if (!target) return;
 
     // get the drag handle element
     // `closest` is not available for text nodes so we may have to use its parent
@@ -212,8 +229,8 @@ export class StructuredContentViewBase {
       const domBox = this.dom.getBoundingClientRect();
       const handleBox = dragHandle.getBoundingClientRect();
 
-      const offsetX = event.offsetX ?? event.nativeEvent?.offsetX;
-      const offsetY = event.offsetY ?? event.nativeEvent?.offsetY;
+      const offsetX = event.offsetX;
+      const offsetY = event.offsetY;
 
       x = handleBox.x - domBox.x + offsetX;
       y = handleBox.y - domBox.y + offsetY;
diff --git a/packages/super-editor/src/extensions/structured-content/document-part-object.js b/packages/super-editor/src/extensions/structured-content/document-part-object.ts
similarity index 51%
rename from packages/super-editor/src/extensions/structured-content/document-part-object.js
rename to packages/super-editor/src/extensions/structured-content/document-part-object.ts
index cf0c50857..c159911fc 100644
--- a/packages/super-editor/src/extensions/structured-content/document-part-object.js
+++ b/packages/super-editor/src/extensions/structured-content/document-part-object.ts
@@ -1,7 +1,19 @@
-// @ts-nocheck
 import { Node, Attribute } from '@core/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 
-export const DocumentPartObject = Node.create({
+interface DocumentPartObjectOptions extends Record<string, unknown> {
+  htmlAttributes: Record<string, AttributeValue>;
+}
+
+interface DocumentPartObjectAttrs {
+  sdBlockId?: string | null;
+  id?: string | null;
+  docPartGallery?: unknown;
+  docPartUnique?: boolean;
+}
+
+export const DocumentPartObject = Node.create<DocumentPartObjectOptions>({
   name: 'documentPartObject',
   group: 'block',
   content: 'block*',
@@ -17,7 +29,7 @@ export const DocumentPartObject = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [
       {
         tag: 'div.sd-document-part-object-block',
@@ -26,7 +38,7 @@ export const DocumentPartObject = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }): DOMOutputSpec {
     return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
   },
 
@@ -35,13 +47,13 @@ export const DocumentPartObject = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: DocumentPartObjectAttrs) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
-      id: {},
-      docPartGallery: {},
+      id: { default: null },
+      docPartGallery: { default: null },
       docPartUnique: {
         default: true,
       },
diff --git a/packages/super-editor/src/extensions/structured-content/document-section.test.js b/packages/super-editor/src/extensions/structured-content/document-section.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/structured-content/document-section.test.js
rename to packages/super-editor/src/extensions/structured-content/document-section.test.ts
diff --git a/packages/super-editor/src/extensions/structured-content/document-section.js b/packages/super-editor/src/extensions/structured-content/document-section.ts
similarity index 78%
rename from packages/super-editor/src/extensions/structured-content/document-section.js
rename to packages/super-editor/src/extensions/structured-content/document-section.ts
index 0e4f18ed2..ffe09628d 100644
--- a/packages/super-editor/src/extensions/structured-content/document-section.js
+++ b/packages/super-editor/src/extensions/structured-content/document-section.ts
@@ -1,12 +1,15 @@
-// @ts-nocheck
-
 import { Node, Attribute } from '@core/index.js';
 import { DocumentSectionView } from './document-section/DocumentSectionView.js';
 import { htmlHandler } from '@core/InputRule.js';
 import { Selection } from 'prosemirror-state';
-import { DOMParser as PMDOMParser } from 'prosemirror-model';
+import { DOMParser as PMDOMParser, type Fragment, type Node as PmNode, type NodeType } from 'prosemirror-model';
 import { findParentNode } from '@helpers/index.js';
 import { SectionHelpers } from './document-section/helpers.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Command } from '@core/types/ChainedCommands.js';
+import type { ProseMirrorJSON } from '@core/types/EditorTypes.js';
+import type { Decoration } from 'prosemirror-view';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 
 /**
  * Document section creation options
@@ -20,6 +23,16 @@ import { SectionHelpers } from './document-section/helpers.js';
  * @property {Object} [json] - ProseMirror JSON (overrides html if both provided)
  */
 
+interface SectionCreate {
+  id?: number;
+  title?: string;
+  description?: string;
+  sectionType?: string;
+  isLocked?: boolean;
+  html?: string;
+  json?: ProseMirrorJSON;
+}
+
 /**
  * Update an existing section
  * @typedef {Object} SectionUpdate
@@ -29,6 +42,13 @@ import { SectionHelpers } from './document-section/helpers.js';
  * @property {Partial<DocumentSectionAttributes>} [attrs] - Update attributes only (preserves content)
  */
 
+interface SectionUpdate {
+  id: number;
+  html?: string;
+  json?: ProseMirrorJSON;
+  attrs?: Record<string, unknown>;
+}
+
 /**
  * Configuration options for DocumentSection
  * @typedef {Object} DocumentSectionOptions
@@ -53,7 +73,9 @@ import { SectionHelpers } from './document-section/helpers.js';
  * @sidebarTitle Document Section
  * @snippetPath /snippets/extensions/document-section.mdx
  */
-export const DocumentSection = Node.create({
+export const DocumentSection = Node.create<{
+  htmlAttributes: Record<string, AttributeValue>;
+}>({
   name: 'documentSection',
   group: 'block',
   content: 'block*',
@@ -69,7 +91,7 @@ export const DocumentSection = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [
       {
         tag: 'div.sd-document-section-block',
@@ -78,8 +100,12 @@ export const DocumentSection = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }): DOMOutputSpec {
+    return [
+      'div',
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 
   addAttributes() {
@@ -88,8 +114,8 @@ export const DocumentSection = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
@@ -101,12 +127,19 @@ export const DocumentSection = Node.create({
   },
 
   addNodeView() {
-    return ({ node, editor, getPos, decorations }) => {
-      return new DocumentSectionView(node, getPos, decorations, editor);
+    return ({
+      node,
+      getPos,
+      decorations,
+    }: {
+      node: PmNode;
+      getPos: () => number | undefined;
+      decorations: Decoration[];
+    }) => {
+      return new DocumentSectionView(node, getPos, decorations, this.editor!);
     };
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -122,33 +155,36 @@ export const DocumentSection = Node.create({
        * })
        */
       createDocumentSection:
-        (options = {}) =>
+        (options: SectionCreate = {}): Command =>
         ({ tr, state, dispatch, editor }) => {
+          const currentEditor = editor ?? this.editor;
+          if (!currentEditor) return false;
+
           const { selection } = state;
           let { from, to } = selection;
 
-          let content = selection.content().content;
+          let content: Fragment = selection.content().content;
           const { html: optionsHTML, json: optionsJSON } = options;
 
           // If HTML is provided, parse it and convert to ProseMirror nodes
           if (optionsHTML) {
-            const html = htmlHandler(optionsHTML, this.editor);
-            const doc = PMDOMParser.fromSchema(this.editor.schema).parse(html);
+            const html = htmlHandler(optionsHTML, currentEditor);
+            const doc = PMDOMParser.fromSchema(currentEditor.schema).parse(html);
             content = doc.content;
           }
 
           // JSON takes priority over HTML
           if (optionsJSON) {
-            content = this.editor.schema.nodeFromJSON(optionsJSON);
+            content = currentEditor.schema.nodeFromJSON(optionsJSON).content;
           }
 
-          if (!content?.content?.length) {
-            content = this.editor.schema.nodeFromJSON({ type: 'paragraph', content: [] });
+          if (!content.childCount) {
+            content = currentEditor.schema.nodeFromJSON({ type: 'paragraph', content: [] }).content;
           }
 
           // We assign IDs as positive integers starting from 0.
           if (!options.id) {
-            const allSections = SectionHelpers.getAllSections(editor);
+            const allSections = SectionHelpers.getAllSections(currentEditor);
             options.id = allSections.length + 1;
           }
 
@@ -156,7 +192,9 @@ export const DocumentSection = Node.create({
             options.title = 'Document section';
           }
 
-          const node = this.type.createAndFill(options, content);
+          const nodeType = this.type;
+          if (!nodeType || typeof nodeType === 'string') return false;
+          const node = (nodeType as NodeType).createAndFill(options, content);
           if (!node) return false;
 
           const isAlreadyInSdtBlock = findParentNode((node) => node.type.name === 'documentSection')(selection);
@@ -239,7 +277,7 @@ export const DocumentSection = Node.create({
        * @note Content stays in document, only section wrapper is removed
        */
       removeSectionAtSelection:
-        () =>
+        (): Command =>
         ({ tr, dispatch }) => {
           const sdtNode = findParentNode((node) => node.type.name === 'documentSection')(tr.selection);
           if (!sdtNode) return false;
@@ -281,9 +319,11 @@ export const DocumentSection = Node.create({
        * editor.commands.removeSectionById(123)
        */
       removeSectionById:
-        (id) =>
+        (id: number): Command =>
         ({ tr, dispatch }) => {
-          const sections = SectionHelpers.getAllSections(this.editor);
+          const currentEditor = this.editor;
+          if (!currentEditor) return false;
+          const sections = SectionHelpers.getAllSections(currentEditor);
           const sectionToRemove = sections.find(({ node }) => node.attrs.id === id);
           if (!sectionToRemove) return false;
 
@@ -310,9 +350,11 @@ export const DocumentSection = Node.create({
        * editor.commands.lockSectionById(123)
        */
       lockSectionById:
-        (id) =>
+        (id: number): Command =>
         ({ tr, dispatch }) => {
-          const sections = SectionHelpers.getAllSections(this.editor);
+          const currentEditor = this.editor;
+          if (!currentEditor) return false;
+          const sections = SectionHelpers.getAllSections(currentEditor);
           const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
           if (!sectionToLock) return false;
 
@@ -340,14 +382,16 @@ export const DocumentSection = Node.create({
        * })
        */
       updateSectionById:
-        ({ id, html, json, attrs }) =>
+        ({ id, html, json, attrs }: SectionUpdate): Command =>
         ({ tr, dispatch, editor }) => {
-          const sections = SectionHelpers.getAllSections(editor || this.editor);
+          const currentEditor = editor || this.editor;
+          if (!currentEditor) return false;
+          const sections = SectionHelpers.getAllSections(currentEditor);
           const sectionToUpdate = sections.find(({ node }) => node.attrs.id === id);
           if (!sectionToUpdate) return false;
 
           const { pos, node } = sectionToUpdate;
-          let newContent = null;
+          let newContent: Fragment | PmNode | null = null;
 
           // If HTML is provided, parse it and convert to ProseMirror nodes
           if (html) {
@@ -377,12 +421,12 @@ export const DocumentSection = Node.create({
 
           return true;
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 
   addHelpers() {
     return {
       ...SectionHelpers,
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 });
diff --git a/packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.js b/packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.ts
similarity index 60%
rename from packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.js
rename to packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.ts
index c7e7ec817..96ed3050d 100644
--- a/packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.js
+++ b/packages/super-editor/src/extensions/structured-content/document-section/DocumentSectionView.ts
@@ -1,8 +1,21 @@
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, EditorView } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+
 /**
  * The node view for the document section node.
  */
 export class DocumentSectionView {
-  constructor(node, getPos, decorations, editor) {
+  node: PmNode;
+  editor: Editor;
+  decorations: readonly Decoration[];
+  view: EditorView;
+  getPos: () => number | undefined;
+  dom!: HTMLElement;
+  contentDOM!: HTMLElement;
+  infoDiv!: HTMLElement;
+
+  constructor(node: PmNode, getPos: () => number | undefined, decorations: readonly Decoration[], editor: Editor) {
     this.node = node;
     this.editor = editor;
     this.decorations = decorations;
@@ -12,16 +25,16 @@ export class DocumentSectionView {
     this.#init();
   }
 
-  #init() {
+  #init(): void {
     const { attrs } = this.node;
     const { id, title, description } = attrs;
 
     // Container for the entire node view
     this.dom = document.createElement('div');
     this.dom.className = 'sd-document-section-block';
-    this.dom.setAttribute('data-id', id);
-    this.dom.setAttribute('data-title', title);
-    this.dom.setAttribute('data-description', description);
+    this.dom.setAttribute('data-id', String(id));
+    this.dom.setAttribute('data-title', String(title));
+    this.dom.setAttribute('data-description', String(description));
     this.dom.setAttribute('aria-label', 'Document section');
 
     this.#addToolTip();
@@ -33,13 +46,13 @@ export class DocumentSectionView {
     this.dom.appendChild(this.contentDOM);
   }
 
-  #addToolTip() {
+  #addToolTip(): void {
     const { title } = this.node.attrs;
     this.infoDiv = document.createElement('div');
     this.infoDiv.className = 'sd-document-section-block-info';
 
     const textSpan = document.createElement('span');
-    textSpan.textContent = title || 'Document section';
+    textSpan.textContent = String(title || 'Document section');
     this.infoDiv.appendChild(textSpan);
 
     this.infoDiv.setAttribute('contenteditable', 'false');
diff --git a/packages/super-editor/src/extensions/structured-content/document-section/helpers.test.js b/packages/super-editor/src/extensions/structured-content/document-section/helpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/structured-content/document-section/helpers.test.js
rename to packages/super-editor/src/extensions/structured-content/document-section/helpers.test.ts
diff --git a/packages/super-editor/src/extensions/structured-content/document-section/helpers.js b/packages/super-editor/src/extensions/structured-content/document-section/helpers.ts
similarity index 73%
rename from packages/super-editor/src/extensions/structured-content/document-section/helpers.js
rename to packages/super-editor/src/extensions/structured-content/document-section/helpers.ts
index 19ae53752..f05121f7b 100644
--- a/packages/super-editor/src/extensions/structured-content/document-section/helpers.js
+++ b/packages/super-editor/src/extensions/structured-content/document-section/helpers.ts
@@ -1,4 +1,11 @@
 import { DOMSerializer } from 'prosemirror-model';
+import type { Editor } from '@core/Editor.js';
+import type { ProseMirrorJSON } from '@core/types/EditorTypes.js';
+import type { EditorOptions } from '@core/types/EditorConfig.js';
+import type { Transaction } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+
+type SectionMatch = { node: PmNode; pos: number };
 
 /**
  * Get all sections in the editor document.
@@ -6,14 +13,14 @@ import { DOMSerializer } from 'prosemirror-model';
  * @param {Editor} editor - The editor instance to search within.
  * @returns {Array} An array of objects containing the node and its position in the document
  */
-export const getAllSections = (editor) => {
+export const getAllSections = (editor?: Editor | null): SectionMatch[] => {
   if (!editor) return [];
   const type = editor.schema.nodes.documentSection;
   if (!type) return [];
 
-  const sections = [];
+  const sections: SectionMatch[] = [];
   const { state } = editor;
-  state.doc.descendants((node, pos) => {
+  state.doc.descendants((node: PmNode, pos: number) => {
     if (node.type.name === type.name) {
       sections.push({ node, pos });
     }
@@ -27,11 +34,15 @@ export const getAllSections = (editor) => {
  * @param {Editor} editor - The editor instance containing the sections.
  * @returns {Array} An array of objects containing section details and their HTML representation.
  */
-export const exportSectionsToHTML = (editor) => {
+export const exportSectionsToHTML = (
+  editor: Editor | null,
+): Array<{ id: number | string | null | undefined; title?: string; description?: string; html: string }> => {
+  if (!editor) return [];
   const sections = getAllSections(editor);
 
-  const processedSections = new Set();
-  const result = [];
+  const processedSections = new Set<number | string | null | undefined>();
+  const result: Array<{ id: number | string | null | undefined; title?: string; description?: string; html: string }> =
+    [];
   sections.forEach(({ node }) => {
     const { attrs } = node;
     const { id, title, description } = attrs;
@@ -55,12 +66,12 @@ export const exportSectionsToHTML = (editor) => {
  * @param {Editor} editor - The editor instance used for serialization.
  * @returns {String} The HTML representation of the node's content.
  */
-export const getHTMLFromNode = (node, editor) => {
+export const getHTMLFromNode = (node: PmNode, editor: Editor): string => {
   const tempDocument = document.implementation.createHTMLDocument();
   const container = tempDocument.createElement('div');
   const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
   container.appendChild(fragment);
-  let html = container.innerHTML;
+  const html = container.innerHTML;
   return html;
 };
 
@@ -70,10 +81,23 @@ export const getHTMLFromNode = (node, editor) => {
  * @param {Editor} editor - The editor instance containing the sections.
  * @returns {Array} An array of objects containing section details and their JSON representation.
  */
-export const exportSectionsToJSON = (editor) => {
+export const exportSectionsToJSON = (
+  editor: Editor | null,
+): Array<{
+  id: number | string | null | undefined;
+  title?: string;
+  description?: string;
+  content: ProseMirrorJSON;
+}> => {
+  if (!editor) return [];
   const sections = getAllSections(editor);
-  const processedSections = new Set();
-  const result = [];
+  const processedSections = new Set<number | string | null | undefined>();
+  const result: Array<{
+    id: number | string | null | undefined;
+    title?: string;
+    description?: string;
+    content: ProseMirrorJSON;
+  }> = [];
   sections.forEach(({ node }) => {
     const { attrs } = node;
     const { id, title, description } = attrs;
@@ -98,14 +122,18 @@ export const exportSectionsToJSON = (editor) => {
  * @param {Editor} editor - The parent editor instance.
  * @returns {Editor|null} The child editor instance for the linked section, or null if the section is not found.
  */
-export const getLinkedSectionEditor = (id, options, editor) => {
+export const getLinkedSectionEditor = (
+  id: string | number,
+  options: Partial<EditorOptions>,
+  editor: Editor,
+): Editor | null => {
   const sections = getAllSections(editor);
   const section = sections.find((s) => s.node.attrs.id === id);
   if (!section) return null;
 
   const child = editor.createChildEditor({
     ...options,
-    onUpdate: ({ editor: childEditor, transaction }) => {
+    onUpdate: ({ editor: childEditor, transaction }: { editor: Editor; transaction: Transaction }) => {
       const isFromtLinkedParent = transaction.getMeta('fromLinkedParent');
       if (isFromtLinkedParent) return; // Prevent feedback loop
 
@@ -138,9 +166,9 @@ export const getLinkedSectionEditor = (id, options, editor) => {
     // Only update if content is actually different
     const sectionContent = sectionNode.node.content;
 
-    const json = {
+    const json: ProseMirrorJSON = {
       type: 'doc',
-      content: sectionContent.content.map((node) => node.toJSON()),
+      content: sectionContent.content.map((node: PmNode) => node.toJSON()),
     };
 
     const childTr = child.state.tr;
diff --git a/packages/super-editor/src/extensions/structured-content/document-section/index.js b/packages/super-editor/src/extensions/structured-content/document-section/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/structured-content/document-section/index.js
rename to packages/super-editor/src/extensions/structured-content/document-section/index.ts
diff --git a/packages/super-editor/src/extensions/structured-content/index.js b/packages/super-editor/src/extensions/structured-content/index.js
deleted file mode 100644
index 07851ef85..000000000
--- a/packages/super-editor/src/extensions/structured-content/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './structured-content.js';
-export * from './structured-content-block.js';
-export * from './structured-content-commands.js';
-export * from './document-section.js';
-export * from './document-part-object.js';
diff --git a/packages/super-editor/src/extensions/structured-content/index.ts b/packages/super-editor/src/extensions/structured-content/index.ts
new file mode 100644
index 000000000..17101e692
--- /dev/null
+++ b/packages/super-editor/src/extensions/structured-content/index.ts
@@ -0,0 +1,5 @@
+export { StructuredContent, structuredContentClass, structuredContentInnerClass } from './structured-content.js';
+export { StructuredContentBlock } from './structured-content-block.js';
+export * from './structured-content-commands.js';
+export { DocumentSection } from './document-section.js';
+export { DocumentPartObject } from './document-part-object.js';
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-block.js b/packages/super-editor/src/extensions/structured-content/structured-content-block.ts
similarity index 73%
rename from packages/super-editor/src/extensions/structured-content/structured-content-block.js
rename to packages/super-editor/src/extensions/structured-content/structured-content-block.ts
index 993dd2f12..9ccfb4b4a 100644
--- a/packages/super-editor/src/extensions/structured-content/structured-content-block.js
+++ b/packages/super-editor/src/extensions/structured-content/structured-content-block.ts
@@ -1,5 +1,8 @@
 import { Node, Attribute } from '@core/index';
 import { StructuredContentBlockView } from './StructuredContentBlockView';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
+import type { StructuredContentViewProps } from './StructuredContentViewBase';
 
 export const structuredContentClass = 'sd-structured-content-block';
 export const structuredContentInnerClass = 'sd-structured-content-block__content';
@@ -26,7 +29,9 @@ export const structuredContentInnerClass = 'sd-structured-content-block__content
  * console.log(attrs.id, attrs.alias)
  */
 
-export const StructuredContentBlock = Node.create({
+export const StructuredContentBlock = Node.create<{
+  htmlAttributes: Record<string, AttributeValue>;
+}>({
   name: 'structuredContentBlock',
 
   group: 'block structuredContent',
@@ -52,8 +57,8 @@ export const StructuredContentBlock = Node.create({
     return {
       id: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.id) return {};
           return { 'data-id': attrs.id };
         },
@@ -61,8 +66,8 @@ export const StructuredContentBlock = Node.create({
 
       tag: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-tag'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-tag'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.tag) return {};
           return { 'data-tag': attrs.tag };
         },
@@ -70,8 +75,8 @@ export const StructuredContentBlock = Node.create({
 
       alias: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-alias'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-alias'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.alias) return {};
           return { 'data-alias': attrs.alias };
         },
@@ -83,11 +88,11 @@ export const StructuredContentBlock = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'div[data-structured-content-block]' }];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }): DOMOutputSpec {
     return [
       'div',
       Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
@@ -98,7 +103,7 @@ export const StructuredContentBlock = Node.create({
   },
 
   addNodeView() {
-    return (props) => {
+    return (props: StructuredContentViewProps) => {
       return new StructuredContentBlockView({ ...props });
     };
   },
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-commands.test.js b/packages/super-editor/src/extensions/structured-content/structured-content-commands.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/structured-content/structured-content-commands.test.js
rename to packages/super-editor/src/extensions/structured-content/structured-content-commands.test.ts
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content-commands.js b/packages/super-editor/src/extensions/structured-content/structured-content-commands.ts
similarity index 78%
rename from packages/super-editor/src/extensions/structured-content/structured-content-commands.js
rename to packages/super-editor/src/extensions/structured-content/structured-content-commands.ts
index a46ebe923..a4bf75cec 100644
--- a/packages/super-editor/src/extensions/structured-content/structured-content-commands.js
+++ b/packages/super-editor/src/extensions/structured-content/structured-content-commands.ts
@@ -7,18 +7,35 @@ import { getStructuredContentTagsById } from './structuredContentHelpers/getStru
 import { getStructuredContentByGroup } from './structuredContentHelpers/getStructuredContentByGroup';
 import { createTagObject } from './structuredContentHelpers/tagUtils';
 import * as structuredContentHelpers from './structuredContentHelpers/index';
+import type { Command } from '@core/types/ChainedCommands.js';
+import type { ProseMirrorJSON } from '@core/types/EditorTypes.js';
+import type { Fragment, Node as PmNode } from 'prosemirror-model';
+import type { StructuredContentMatch } from './structuredContentHelpers/types';
 
 const STRUCTURED_CONTENT_NAMES = ['structuredContent', 'structuredContentBlock'];
 
+type StructuredContentTag = string | Record<string, unknown> | null;
+
+type StructuredContentAttrs = {
+  id?: string;
+  tag?: StructuredContentTag;
+  alias?: string;
+  sdtPr?: unknown;
+  [key: string]: unknown;
+};
+
+type StructuredContentInsertAttrs = StructuredContentAttrs & {
+  /** Group identifier for linking multiple fields (auto-encoded to JSON tag) */
+  group?: string;
+};
+
 /**
  * Find the first text node within a structured content node, even when wrapped.
  * Some plugins wrap text in inline nodes (e.g., run), so we need to search descendants.
- * @param {import('prosemirror-model').Node} node
- * @returns {import('prosemirror-model').Node | null}
  */
-const findFirstTextNode = (node) => {
-  let firstTextNode = null;
-  node.descendants((child) => {
+const findFirstTextNode = (node: PmNode): PmNode | null => {
+  let firstTextNode: PmNode | null = null;
+  node.descendants((child: PmNode) => {
     if (child.isText) {
       firstTextNode = child;
       return false;
@@ -29,29 +46,44 @@ const findFirstTextNode = (node) => {
 };
 
 /**
- * @typedef {Object} StructuredContentInlineInsert
- * @property {string} [text] - Text content to insert
- * @property {Object} [json] - ProseMirror JSON
- * @property {Object} [attrs] - Node attributes
- * @property {string} [attrs.group] - Group identifier for linking multiple fields (auto-encoded to JSON tag)
+ * Options for inserting inline structured content
  */
+interface StructuredContentInlineInsert {
+  /** Text content to insert */
+  text?: string;
+  /** ProseMirror JSON */
+  json?: ProseMirrorJSON;
+  /** Node attributes */
+  attrs?: StructuredContentInsertAttrs;
+}
 
 /**
- * @typedef {Object} StructuredContentBlockInsert
- * @property {string} [html] - HTML content to insert
- * @property {Object} [json] - ProseMirror JSON
- * @property {Object} [attrs] - Node attributes
- * @property {string} [attrs.group] - Group identifier for linking multiple fields (auto-encoded to JSON tag)
+ * Options for inserting block structured content
  */
+interface StructuredContentBlockInsert {
+  /** HTML content to insert */
+  html?: string;
+  /** ProseMirror JSON */
+  json?: ProseMirrorJSON;
+  /** Node attributes */
+  attrs?: StructuredContentInsertAttrs;
+}
 
 /**
- * @typedef {Object} StructuredContentUpdate
- * @property {string} [text] - Replace content with text (only for structured content inline)
- * @property {string} [html] - Replace content with HTML (only for structured content block)
- * @property {Object} [json] - Replace content with ProseMirror JSON (overrides html)
- * @property {Object} [attrs] - Update attributes only (preserves content)
- * @property {boolean} [keepTextNodeStyles] - When true, preserves marks from the first text node (only applies with text option)
+ * Options for updating structured content
  */
+interface StructuredContentUpdate {
+  /** Replace content with text (only for structured content inline) */
+  text?: string;
+  /** Replace content with HTML (only for structured content block) */
+  html?: string;
+  /** Replace content with ProseMirror JSON (overrides html) */
+  json?: ProseMirrorJSON;
+  /** Update attributes only (preserves content) */
+  attrs?: StructuredContentAttrs;
+  /** When true, preserves marks from the first text node (only applies with text option) */
+  keepTextNodeStyles?: boolean;
+}
 
 /**
  * @typedef {Object} StructuredContentTableAppendRowsOptions
@@ -60,6 +92,14 @@ const findFirstTextNode = (node) => {
  * @property {Array<string[]>|Array<string>} rows - Cell values to append
  * @property {boolean} [copyRowStyle=false] - Clone the last row's styling when true
  */
+interface StructuredContentTableAppendRowsOptions {
+  id: string;
+  tableIndex?: number;
+  rows?: Array<string[] | string>;
+  copyRowStyle?: boolean;
+}
+
+type StructuredContentEntry = StructuredContentMatch;
 
 export const StructuredContentCommands = Extension.create({
   name: 'structuredContentCommands',
@@ -92,7 +132,7 @@ export const StructuredContentCommands = Extension.create({
        * });
        */
       insertStructuredContentInline:
-        (options = {}) =>
+        (options: StructuredContentInlineInsert = {}): Command =>
         ({ editor, dispatch, state, tr }) => {
           const { schema } = editor;
           let { from, to } = state.selection;
@@ -100,7 +140,7 @@ export const StructuredContentCommands = Extension.create({
           if (dispatch) {
             const selectionText = state.doc.textBetween(from, to);
 
-            let content = null;
+            let content: PmNode | null = null;
 
             if (selectionText) {
               content = schema.text(selectionText);
@@ -119,23 +159,21 @@ export const StructuredContentCommands = Extension.create({
             }
 
             // Handle group parameter: convert to JSON tag
-            let tag = options.attrs?.tag || 'inline_text_sdt';
+            let tag: StructuredContentTag = options.attrs?.tag || 'inline_text_sdt';
             if (options.attrs?.group) {
               tag = createTagObject({ group: options.attrs.group });
             }
 
-            const attrs = {
+            const attrs: StructuredContentInsertAttrs = {
               id: options.attrs?.id || generateRandomSigned32BitIntStrId(),
               tag,
               alias: options.attrs?.alias || 'Structured content',
               ...options.attrs,
             };
-            // Remove group from attrs to avoid storing it separately
-            delete attrs.group;
+            const { group: _group, ...attrsWithoutGroup } = attrs;
+            const node = schema.nodes.structuredContent.create(attrsWithoutGroup, content, undefined);
 
-            const node = schema.nodes.structuredContent.create(attrs, content, null);
-
-            const parent = findParentNode((node) => node.type.name === 'structuredContent')(state.selection);
+            const parent = findParentNode((node: PmNode) => node.type.name === 'structuredContent')(state.selection);
             if (parent) {
               const insertPos = parent.pos + parent.node.nodeSize;
               from = to = insertPos;
@@ -171,7 +209,7 @@ export const StructuredContentCommands = Extension.create({
        * });
        */
       insertStructuredContentBlock:
-        (options = {}) =>
+        (options: StructuredContentBlockInsert = {}): Command =>
         ({ editor, dispatch, state, tr }) => {
           const { schema } = editor;
           let { from, to } = state.selection;
@@ -179,7 +217,7 @@ export const StructuredContentCommands = Extension.create({
           if (dispatch) {
             const selectionContent = state.selection.content();
 
-            let content = null;
+            let content: Fragment | PmNode | null = null;
 
             if (selectionContent.size) {
               content = selectionContent.content;
@@ -200,21 +238,19 @@ export const StructuredContentCommands = Extension.create({
             }
 
             // Handle group parameter: convert to JSON tag
-            let tag = options.attrs?.tag || 'block_table_sdt';
+            let tag: StructuredContentTag = options.attrs?.tag || 'block_table_sdt';
             if (options.attrs?.group) {
               tag = createTagObject({ group: options.attrs.group });
             }
 
-            const attrs = {
+            const attrs: StructuredContentInsertAttrs = {
               id: options.attrs?.id || generateRandomSigned32BitIntStrId(),
               tag,
               alias: options.attrs?.alias || 'Structured content',
               ...options.attrs,
             };
-            // Remove group from attrs to avoid storing it separately
-            delete attrs.group;
-
-            const node = schema.nodes.structuredContentBlock.create(attrs, content, null);
+            const { group: _group, ...attrsWithoutGroup } = attrs;
+            const node = schema.nodes.structuredContentBlock.create(attrsWithoutGroup, content, undefined);
 
             const parent = findParentNode((node) => node.type.name === 'structuredContentBlock')(state.selection);
             if (parent) {
@@ -245,9 +281,9 @@ export const StructuredContentCommands = Extension.create({
        * });
        */
       updateStructuredContentById:
-        (id, options = {}) =>
+        (id: string, options: StructuredContentUpdate = {}): Command =>
         ({ editor, dispatch, state, tr }) => {
-          const structuredContentTags = getStructuredContentTagsById(id, state);
+          const structuredContentTags: StructuredContentMatch[] = getStructuredContentTagsById(id, state);
 
           if (!structuredContentTags.length) {
             return true;
@@ -261,7 +297,7 @@ export const StructuredContentCommands = Extension.create({
             const posFrom = pos;
             const posTo = pos + node.nodeSize;
 
-            let content = null;
+            let content: Fragment | PmNode | null = null;
 
             if (options.text) {
               // If keepTextNodeStyles is true, use the marks from the first text node
@@ -289,7 +325,11 @@ export const StructuredContentCommands = Extension.create({
 
             try {
               const nodeForValidation = editor.validateJSON(updatedNode.toJSON());
-              nodeForValidation.check();
+              if (Array.isArray(nodeForValidation)) {
+                nodeForValidation.forEach((validatedNode) => validatedNode.check());
+              } else {
+                nodeForValidation.check();
+              }
             } catch (error) {
               console.error('Invalid content.', 'Passed value:', content, 'Error:', error);
               return false;
@@ -310,14 +350,14 @@ export const StructuredContentCommands = Extension.create({
        * editor.commands.deleteStructuredContent(fields);
        */
       deleteStructuredContent:
-        (structuredContentTags) =>
+        (structuredContentTags: StructuredContentEntry[]): Command =>
         ({ dispatch, tr }) => {
           if (!structuredContentTags.length) {
             return true;
           }
 
           if (dispatch) {
-            structuredContentTags.forEach((structuredContent) => {
+            structuredContentTags.forEach((structuredContent: StructuredContentEntry) => {
               const { pos, node } = structuredContent;
               const posFrom = tr.mapping.map(pos);
               const posTo = tr.mapping.map(pos + node.nodeSize);
@@ -340,9 +380,9 @@ export const StructuredContentCommands = Extension.create({
        * editor.commands.deleteStructuredContentById(['123', '456']);
        */
       deleteStructuredContentById:
-        (idOrIds) =>
+        (idOrIds: string | string[]): Command =>
         ({ dispatch, state, tr }) => {
-          const structuredContentTags = getStructuredContentTagsById(idOrIds, state);
+          const structuredContentTags: StructuredContentMatch[] = getStructuredContentTagsById(idOrIds, state);
 
           if (!structuredContentTags.length) {
             return true;
@@ -370,9 +410,9 @@ export const StructuredContentCommands = Extension.create({
        * editor.commands.deleteStructuredContentAtSelection();
        */
       deleteStructuredContentAtSelection:
-        () =>
+        (): Command =>
         ({ dispatch, state, tr }) => {
-          const predicate = (node) => STRUCTURED_CONTENT_NAMES.includes(node.type.name);
+          const predicate = (node: PmNode) => STRUCTURED_CONTENT_NAMES.includes(node.type.name);
           const structuredContent = findParentNode(predicate)(state.selection);
 
           if (!structuredContent) {
@@ -406,9 +446,9 @@ export const StructuredContentCommands = Extension.create({
        * });
        */
       updateStructuredContentByGroup:
-        (group, options = {}) =>
+        (group: string, options: StructuredContentUpdate = {}): Command =>
         ({ editor, dispatch, state, tr }) => {
-          const structuredContentTags = getStructuredContentByGroup(group, state);
+          const structuredContentTags: StructuredContentMatch[] = getStructuredContentByGroup(group, state);
 
           if (!structuredContentTags.length) {
             return true;
@@ -424,7 +464,7 @@ export const StructuredContentCommands = Extension.create({
             for (const structuredContent of structuredContentTags) {
               const { pos, node } = structuredContent;
 
-              let content = null;
+              let content: Fragment | PmNode | null = null;
 
               if (options.text) {
                 // If keepTextNodeStyles is true, use the marks from the first text node
@@ -453,7 +493,11 @@ export const StructuredContentCommands = Extension.create({
               // Validate the node before adding to updates
               try {
                 const nodeForValidation = editor.validateJSON(updatedNode.toJSON());
-                nodeForValidation.check();
+                if (Array.isArray(nodeForValidation)) {
+                  nodeForValidation.forEach((validatedNode) => validatedNode.check());
+                } else {
+                  nodeForValidation.check();
+                }
               } catch (error) {
                 console.error('Invalid content.', 'Passed value:', content, 'Error:', error);
                 return false;
@@ -489,9 +533,9 @@ export const StructuredContentCommands = Extension.create({
        * editor.commands.deleteStructuredContentByGroup(['header', 'footer']);
        */
       deleteStructuredContentByGroup:
-        (groupOrGroups) =>
+        (groupOrGroups: string | string[]): Command =>
         ({ dispatch, state, tr }) => {
-          const structuredContentTags = getStructuredContentByGroup(groupOrGroups, state);
+          const structuredContentTags: StructuredContentMatch[] = getStructuredContentByGroup(groupOrGroups, state);
 
           if (!structuredContentTags.length) {
             return true;
@@ -526,7 +570,7 @@ export const StructuredContentCommands = Extension.create({
        * });
        */
       appendRowsToStructuredContentTable:
-        ({ id, tableIndex = 0, rows = [], copyRowStyle = false }) =>
+        ({ id, tableIndex = 0, rows = [], copyRowStyle = false }: StructuredContentTableAppendRowsOptions): Command =>
         ({ state, commands, dispatch }) => {
           const normalized = normalizeRowsInput(rows);
           if (!normalized.length) return true;
@@ -563,14 +607,14 @@ export const StructuredContentCommands = Extension.create({
  * @param {Array} rowsOrValues - Raw row data
  * @returns {Array<string[]>}
  */
-const normalizeRowsInput = (rowsOrValues) => {
+const normalizeRowsInput = (rowsOrValues: Array<string | string[]> | undefined): string[][] => {
   if (!Array.isArray(rowsOrValues) || !rowsOrValues.length) {
     return [];
   }
 
   if (Array.isArray(rowsOrValues[0])) {
-    return rowsOrValues;
+    return rowsOrValues as string[][];
   }
 
-  return [rowsOrValues];
+  return [rowsOrValues as string[]];
 };
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content.js b/packages/super-editor/src/extensions/structured-content/structured-content.ts
similarity index 74%
rename from packages/super-editor/src/extensions/structured-content/structured-content.js
rename to packages/super-editor/src/extensions/structured-content/structured-content.ts
index 355663a57..93ba64fb0 100644
--- a/packages/super-editor/src/extensions/structured-content/structured-content.js
+++ b/packages/super-editor/src/extensions/structured-content/structured-content.ts
@@ -1,5 +1,8 @@
 import { Node, Attribute } from '@core/index';
 import { StructuredContentInlineView } from './StructuredContentInlineView';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
+import type { StructuredContentViewProps } from './StructuredContentViewBase';
 
 export const structuredContentClass = 'sd-structured-content';
 export const structuredContentInnerClass = 'sd-structured-content__content';
@@ -31,7 +34,9 @@ export const structuredContentInnerClass = 'sd-structured-content__content';
  * @sidebarTitle Structured Content
  * @snippetPath /snippets/extensions/structured-content.mdx
  */
-export const StructuredContent = Node.create({
+export const StructuredContent = Node.create<{
+  htmlAttributes: Record<string, AttributeValue>;
+}>({
   name: 'structuredContent',
 
   group: 'inline structuredContent',
@@ -59,8 +64,8 @@ export const StructuredContent = Node.create({
     return {
       id: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.id) return {};
           return { 'data-id': attrs.id };
         },
@@ -68,8 +73,8 @@ export const StructuredContent = Node.create({
 
       tag: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-tag'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-tag'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.tag) return {};
           return { 'data-tag': attrs.tag };
         },
@@ -77,8 +82,8 @@ export const StructuredContent = Node.create({
 
       alias: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute('data-alias'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-alias'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.alias) return {};
           return { 'data-alias': attrs.alias };
         },
@@ -90,11 +95,11 @@ export const StructuredContent = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'span[data-structured-content]' }];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM({ htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> }): DOMOutputSpec {
     return [
       'span',
       Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
@@ -105,7 +110,7 @@ export const StructuredContent = Node.create({
   },
 
   addNodeView() {
-    return (props) => {
+    return (props: StructuredContentViewProps) => {
       return new StructuredContentInlineView({ ...props });
     };
   },
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.ts
similarity index 74%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.ts
index 904aa0e42..412c985b6 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.ts
@@ -1,4 +1,6 @@
 import { findChildren } from '@core/helpers/findChildren';
+import type { EditorState } from 'prosemirror-state';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Get all block-level structured content tags in the document
@@ -9,7 +11,7 @@ import { findChildren } from '@core/helpers/findChildren';
  * const blocks = editor.helpers.getStructuredContentBlockTags(editor.state)
  * console.log(`Found ${blocks.length} structured content blocks`)
  */
-export function getStructuredContentBlockTags(state) {
+export function getStructuredContentBlockTags(state: EditorState): StructuredContentMatch[] {
   const result = findChildren(state.doc, (node) => node.type.name === 'structuredContentBlock');
   return result;
 }
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.ts
similarity index 84%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.ts
index fc20820c2..0d9e2f104 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentByGroup.ts
@@ -1,5 +1,7 @@
 import { findChildren } from '@core/helpers/findChildren';
 import { getGroup } from './tagUtils';
+import type { EditorState } from 'prosemirror-state';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Get structured content nodes by group identifier.
@@ -15,7 +17,10 @@ import { getGroup } from './tagUtils';
  * // Find fields with multiple groups
  * const fields = editor.helpers.getStructuredContentByGroup(['customer-info', 'terms'], editor.state)
  */
-export function getStructuredContentByGroup(groupOrGroups, state) {
+export function getStructuredContentByGroup(
+  groupOrGroups: string | string[],
+  state: EditorState,
+): StructuredContentMatch[] {
   const searchGroups = Array.isArray(groupOrGroups) ? groupOrGroups : [groupOrGroups];
 
   const result = findChildren(state.doc, (node) => {
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.ts
similarity index 74%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.ts
index 2af02e5f4..5f76afeee 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.ts
@@ -1,4 +1,6 @@
 import { findChildren } from '@core/helpers/findChildren';
+import type { EditorState } from 'prosemirror-state';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Get all inline structured content tags in the document
@@ -9,7 +11,7 @@ import { findChildren } from '@core/helpers/findChildren';
  * const inlines = editor.helpers.getStructuredContentInlineTags(editor.state)
  * console.log(`Found ${inlines.length} inline fields`)
  */
-export function getStructuredContentInlineTags(state) {
+export function getStructuredContentInlineTags(state: EditorState): StructuredContentMatch[] {
   const result = findChildren(state.doc, (node) => node.type.name === 'structuredContent');
   return result;
 }
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.ts
similarity index 71%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.ts
index ef1deed5e..faa608717 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTablesById.ts
@@ -1,4 +1,7 @@
 import { getStructuredContentTagsById } from './getStructuredContentTagsById';
+import type { EditorState } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Find all tables inside a structured content block by ID
@@ -10,7 +13,7 @@ import { getStructuredContentTagsById } from './getStructuredContentTagsById';
  * const tables = editor.helpers.getStructuredContentTablesById('block-123', editor.state)
  * console.log(`Block contains ${tables.length} table(s)`)
  */
-export function getStructuredContentTablesById(id, state) {
+export function getStructuredContentTablesById(id: string, state: EditorState): StructuredContentMatch[] {
   if (!id || !state) return [];
 
   const blocks = getStructuredContentTagsById(id, state).filter(
@@ -21,8 +24,8 @@ export function getStructuredContentTablesById(id, state) {
 
   const { pos: blockPos, node: blockNode } = blocks[0];
 
-  const tablesInBlock = [];
-  blockNode.descendants((child, relPos) => {
+  const tablesInBlock: StructuredContentMatch[] = [];
+  blockNode.descendants((child: PmNode, relPos: number) => {
     if (child.type.name === 'table') {
       const absPos = blockPos + 1 + relPos;
       tablesInBlock.push({ node: child, pos: absPos });
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.ts
similarity index 77%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.ts
index dfd4edf79..8923b8e3d 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.ts
@@ -1,4 +1,6 @@
 import { findChildren } from '@core/helpers/findChildren';
+import type { EditorState } from 'prosemirror-state';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Get all structured content tags (inline and block) in the document
@@ -9,7 +11,7 @@ import { findChildren } from '@core/helpers/findChildren';
  * const allTags = editor.helpers.getStructuredContentTags(editor.state)
  * console.log(`Found ${allTags.length} structured content elements`)
  */
-export function getStructuredContentTags(state) {
+export function getStructuredContentTags(state: EditorState): StructuredContentMatch[] {
   const result = findChildren(state.doc, (node) => {
     return node.type.name === 'structuredContent' || node.type.name === 'structuredContentBlock';
   });
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.ts
similarity index 80%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.ts
index 2d1084c22..dc30ca0e5 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.ts
@@ -1,4 +1,6 @@
 import { findChildren } from '@core/helpers/findChildren';
+import type { EditorState } from 'prosemirror-state';
+import type { StructuredContentMatch } from './types';
 
 /**
  * Get structured content tag(s) by ID
@@ -10,7 +12,7 @@ import { findChildren } from '@core/helpers/findChildren';
  * const field = editor.helpers.getStructuredContentTagsById('field-123', editor.state)
  * if (field.length) console.log('Found field:', field[0].node.attrs)
  */
-export function getStructuredContentTagsById(idOrIds, state) {
+export function getStructuredContentTagsById(idOrIds: string | string[], state: EditorState): StructuredContentMatch[] {
   const result = findChildren(state.doc, (node) => {
     const isStructuredContent = ['structuredContent', 'structuredContentBlock'].includes(node.type.name);
     if (Array.isArray(idOrIds)) {
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.ts
similarity index 92%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.ts
index 99c4dee44..b44f2fa42 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/index.ts
@@ -5,3 +5,4 @@ export * from './getStructuredContentTagsById';
 export * from './getStructuredContentByGroup';
 export * from './getStructuredContentTablesById';
 export * from './tagUtils';
+export * from './types';
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.js b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.ts
similarity index 82%
rename from packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.js
rename to packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.ts
index a2ad0f9cd..b02ba1bc4 100644
--- a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.js
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/tagUtils.ts
@@ -16,7 +16,7 @@
  * createTagObject({ group: 'terms', style: 'header' })
  * // => '{"group":"terms","style":"header"}'
  */
-export function createTagObject(tagData) {
+export function createTagObject(tagData: Record<string, unknown> | null): string | null {
   if (!tagData || typeof tagData !== 'object') {
     return null;
   }
@@ -35,13 +35,13 @@ export function createTagObject(tagData) {
  * parseTagObject('inline_text_sdt')
  * // => null (plain string tag)
  */
-export function parseTagObject(tag) {
+export function parseTagObject(tag: string | null): Record<string, unknown> | null {
   if (typeof tag !== 'string' || !tag.startsWith('{')) {
     return null;
   }
   try {
-    const parsed = JSON.parse(tag);
-    return parsed && typeof parsed === 'object' ? parsed : null;
+    const parsed = JSON.parse(tag) as unknown;
+    return parsed && typeof parsed === 'object' ? (parsed as Record<string, unknown>) : null;
   } catch {
     return null;
   }
@@ -55,7 +55,7 @@ export function parseTagObject(tag) {
  * hasGroup('{"group":"customer-info"}')  // => true
  * hasGroup('inline_text_sdt')            // => false
  */
-export function hasGroup(tag) {
+export function hasGroup(tag: string): boolean {
   const parsed = parseTagObject(tag);
   return parsed !== null && typeof parsed.group === 'string';
 }
@@ -68,7 +68,7 @@ export function hasGroup(tag) {
  * getGroup('{"group":"customer-info"}')  // => 'customer-info'
  * getGroup('inline_text_sdt')            // => null
  */
-export function getGroup(tag) {
+export function getGroup(tag: string): string | null {
   const parsed = parseTagObject(tag);
   return parsed && typeof parsed.group === 'string' ? parsed.group : null;
 }
diff --git a/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/types.ts b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/types.ts
new file mode 100644
index 000000000..e0a2bace0
--- /dev/null
+++ b/packages/super-editor/src/extensions/structured-content/structuredContentHelpers/types.ts
@@ -0,0 +1,9 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+/**
+ * Structured content node with its absolute position in the document.
+ */
+export type StructuredContentMatch = {
+  node: PmNode;
+  pos: number;
+};
diff --git a/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.d.ts b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.d.ts
new file mode 100644
index 000000000..4bf247a27
--- /dev/null
+++ b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.d.ts
@@ -0,0 +1,8 @@
+export function getParagraphContext(
+  paragraphNode: unknown,
+  startPos: number,
+  helpers: unknown,
+  revision: number,
+  compute: () => unknown,
+): unknown;
+export function clearAllParagraphContexts(): void;
diff --git a/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.js b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.ts
similarity index 99%
rename from packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.js
rename to packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.ts
index 4c143a03c..fe7b851f6 100644
--- a/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.js
+++ b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.test.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { describe, it, expect, vi } from 'vitest';
 import { getParagraphContext, clearParagraphContext, clearAllParagraphContexts } from './paragraphContextCache.js';
 
diff --git a/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.js b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.ts
similarity index 60%
rename from packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.js
rename to packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.ts
index 4279a3e92..114ca7cc2 100644
--- a/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.js
+++ b/packages/super-editor/src/extensions/tab/helpers/paragraphContextCache.ts
@@ -13,21 +13,31 @@
 // This dual-key approach (Node reference + revision) ensures we never serve stale cached data
 // while maximizing cache hits for unchanged paragraphs.
 
-let cache = new WeakMap();
+import type { Node as PmNode } from 'prosemirror-model';
+
+type ParagraphContextEntry<T> = { revision: number; context: T };
+
+let cache: WeakMap<PmNode, ParagraphContextEntry<unknown>> = new WeakMap();
 
 /**
  * Get a cached paragraph context or compute and store it.
  * Returns cached context if the paragraph node and revision match, otherwise computes fresh.
  *
- * @param {import('prosemirror-model').Node} paragraph - The paragraph node (immutable)
- * @param {number} startPos - Starting position of the paragraph in the document
- * @param {any} helpers - Editor helpers for context extraction
- * @param {number} revision - Current plugin state revision number (invalidates on doc changes)
- * @param {function(import('prosemirror-model').Node, number, any): any} compute - Function to compute context if cache misses
- * @returns {any} The paragraph context (cached or freshly computed)
+ * @param paragraph - The paragraph node (immutable)
+ * @param startPos - Starting position of the paragraph in the document
+ * @param helpers - Editor helpers for context extraction
+ * @param revision - Current plugin state revision number (invalidates on doc changes)
+ * @param compute - Function to compute context if cache misses
+ * @returns The paragraph context (cached or freshly computed)
  */
-export function getParagraphContext(paragraph, startPos, helpers, revision, compute) {
-  const cached = cache.get(paragraph);
+export function getParagraphContext<T>(
+  paragraph: PmNode,
+  startPos: number,
+  helpers: unknown,
+  revision: number,
+  compute: (paragraph: PmNode, startPos: number, helpers: unknown) => T,
+): T {
+  const cached = cache.get(paragraph) as ParagraphContextEntry<T> | undefined;
   if (cached && cached.revision === revision) {
     return cached.context;
   }
@@ -39,19 +49,17 @@ export function getParagraphContext(paragraph, startPos, helpers, revision, comp
 /**
  * Clears the cached context for a specific paragraph node.
  *
- * @param {import('prosemirror-model').Node} paragraph - The paragraph node to remove from cache
- * @returns {void}
+ * @param paragraph - The paragraph node to remove from cache
  */
-export function clearParagraphContext(paragraph) {
+export function clearParagraphContext(paragraph: PmNode): void {
   cache.delete(paragraph);
 }
 
 /**
  * Clears all cached paragraph contexts by replacing the cache with a fresh WeakMap.
  *
- * @returns {void}
  */
-export function clearAllParagraphContexts() {
+export function clearAllParagraphContexts(): void {
   // WeakMap doesn't support clear(), so replace with a fresh map
   cache = new WeakMap();
 }
diff --git a/packages/super-editor/src/extensions/tab/helpers/tabAdapter.js b/packages/super-editor/src/extensions/tab/helpers/tabAdapter.ts
similarity index 72%
rename from packages/super-editor/src/extensions/tab/helpers/tabAdapter.js
rename to packages/super-editor/src/extensions/tab/helpers/tabAdapter.ts
index 24d5d0625..7a0ca17d8 100644
--- a/packages/super-editor/src/extensions/tab/helpers/tabAdapter.js
+++ b/packages/super-editor/src/extensions/tab/helpers/tabAdapter.ts
@@ -1,4 +1,6 @@
 import { Decoration } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
+import type { Node as PmNode } from 'prosemirror-model';
 import { calculateTabWidth } from '@superdoc/contracts';
 import { twipsToPixels } from '@superdoc/word-layout';
 import {
@@ -12,9 +14,14 @@ import {
   getIndentWidth,
   extractParagraphContext,
 } from './tabDecorations.js';
+import type { ParagraphContext } from './tabDecorations.js';
+import type { Editor } from '@core/Editor.js';
+import type { LayoutRequest, LayoutResult, TabSpan, TextSpan } from '../types.js';
 import { getParagraphContext } from './paragraphContextCache.js';
+import type { TabStop as ContractTabStop } from '@superdoc/contracts';
 
 const leaderStyles = {
+  none: '',
   dot: 'border-bottom: 1px dotted black;',
   heavy: 'border-bottom: 2px solid black;',
   hyphen: 'border-bottom: 1px solid black;',
@@ -22,23 +29,32 @@ const leaderStyles = {
   underscore: 'border-bottom: 1px solid black;',
 };
 
+type Span = TextSpan | TabSpan;
+
 // Create a stable paragraph ID from its start position.
-const paragraphIdFromPos = (startPos) => `para-${startPos}`;
-const tabIdForIndex = (paragraphId, index) => `${paragraphId}-tab-${index}`;
+const paragraphIdFromPos = (startPos: number) => `para-${startPos}`;
+const tabIdForIndex = (paragraphId: string, index: number) => `${paragraphId}-tab-${index}`;
 
 /**
  * Build a layout request for a given paragraph.
  * @param {import('prosemirror-model').Node} doc
  * @param {number} paragraphPos
  * @param {import('prosemirror-view').EditorView} view
- * @param {any} helpers
+ * @param {import('@core/Editor.js').Editor['helpers']} helpers
  * @param {number} revision
  * @param {number} [paragraphWidthOverride]
  * @returns {import('../types.js').LayoutRequest|null}
  */
-export function createLayoutRequest(doc, paragraphPos, view, helpers, revision, paragraphWidthOverride) {
+export function createLayoutRequest(
+  doc: PmNode,
+  paragraphPos: number,
+  view: EditorView,
+  helpers: Editor['helpers'],
+  revision: number,
+  paragraphWidthOverride?: number,
+): LayoutRequest | null {
   const $pos = doc.resolve(paragraphPos);
-  const paragraphCache = new Map();
+  const paragraphCache: Map<number, ParagraphContext> = new Map();
   const paragraphContext = findParagraphContext($pos, paragraphCache, helpers);
   if (!paragraphContext) return null;
 
@@ -47,11 +63,11 @@ export function createLayoutRequest(doc, paragraphPos, view, helpers, revision,
   const paragraphNode = paragraphContext.paragraph;
   const cachedContext = getParagraphContext(paragraphNode, paragraphContext.startPos, helpers, revision, () =>
     extractParagraphContext(paragraphNode, paragraphContext.startPos, helpers, paragraphContext.paragraphDepth),
-  );
-  const effectiveContext = cachedContext || paragraphContext;
+  ) as ParagraphContext | null;
+  const effectiveContext: ParagraphContext = cachedContext ?? paragraphContext;
   const { entries } = flattenParagraph(paragraphNode, paragraphContext.startPos);
 
-  const spans = [];
+  const spans: Span[] = [];
   let tabIndex = 0;
   entries.forEach((entry, idx) => {
     const node = entry.node;
@@ -119,7 +135,11 @@ export function createLayoutRequest(doc, paragraphPos, view, helpers, revision,
  * @param {import('prosemirror-view').EditorView} [view]
  * @returns {import('../types.js').LayoutResult}
  */
-export function calculateTabLayout(request, measurement, view) {
+export function calculateTabLayout(
+  request: LayoutRequest,
+  measurement?: { measureText?: (spanId: string, text: string) => number },
+  view?: EditorView,
+): LayoutResult {
   const {
     spans,
     tabStops,
@@ -132,10 +152,10 @@ export function calculateTabLayout(request, measurement, view) {
     paragraphNode,
   } = request;
 
-  const tabs = {};
+  const tabs: LayoutResult['tabs'] = {};
   let currentX = indentWidth;
 
-  const measureText = (span) => {
+  const measureText = (span: TextSpan) => {
     if (measurement?.measureText) return measurement.measureText(span.spanId, span.text || '');
     if (view && typeof span.from === 'number' && typeof span.to === 'number') {
       return measureRangeWidth(view, span.from, span.to);
@@ -146,8 +166,19 @@ export function calculateTabLayout(request, measurement, view) {
   // Precompute tab heights once
   const tabHeight = paragraphNode ? calcTabHeight(paragraphNode) : undefined;
 
+  // Validate spans array is within bounds
+  if (!Array.isArray(spans) || spans.length === 0) {
+    return {
+      paragraphId,
+      revision,
+      tabs: {},
+    };
+  }
+
   for (let i = 0; i < spans.length; i++) {
     const span = spans[i];
+    if (!span) continue;
+
     if (span.type === 'text') {
       currentX += measureText(span);
     } else if (span.type === 'tab') {
@@ -155,9 +186,10 @@ export function calculateTabLayout(request, measurement, view) {
 
       // Create measureText callback that can measure the following text
       // For center/right/decimal alignment, we need to measure the text width
-      let measureTextCallback;
+      let measureTextCallback: ((text: string) => number) | undefined;
       if (measurement?.measureText) {
-        measureTextCallback = (text) => measurement.measureText(span.spanId, text);
+        const measureFn = measurement.measureText;
+        measureTextCallback = (text) => measureFn(span.spanId, text);
       } else if (view) {
         // Measure using view by finding the range of the following text spans
         const followingRange = getFollowingTextRange(spans, i + 1);
@@ -177,21 +209,56 @@ export function calculateTabLayout(request, measurement, view) {
         }
       }
 
+      // Valid tab stop alignment values for ContractTabStop
+      type ValidTabStopVal = 'start' | 'end' | 'center' | 'decimal' | 'bar' | 'clear';
+      const validAlignments = new Set<ValidTabStopVal>(['start', 'end', 'center', 'decimal', 'bar', 'clear']);
+
+      // Map for tab stop alignment normalization (legacy values to valid values)
+      const tabStopAlignmentMap: Record<string, ValidTabStopVal> = {
+        num: 'decimal',
+        left: 'start',
+        right: 'end',
+      };
+
+      const normalizedTabStops: ContractTabStop[] = tabStops.map((stop) => {
+        // Validate and normalize tab stop value with default fallback
+        const stopVal = typeof stop.val === 'string' ? stop.val : 'start';
+        let mappedVal: ValidTabStopVal;
+
+        if (stopVal in tabStopAlignmentMap) {
+          mappedVal = tabStopAlignmentMap[stopVal];
+        } else if (validAlignments.has(stopVal as ValidTabStopVal)) {
+          mappedVal = stopVal as ValidTabStopVal;
+        } else {
+          mappedVal = 'start'; // Default fallback for unknown values
+        }
+
+        // Validate pos is a valid number, default to 0 if invalid
+        const pos = typeof stop.pos === 'number' && !isNaN(stop.pos) && isFinite(stop.pos) ? stop.pos : 0;
+
+        return {
+          val: mappedVal,
+          pos,
+          leader: stop.leader,
+        };
+      });
+
       const result = calculateTabWidth({
         currentX,
-        tabStops,
+        tabStops: normalizedTabStops,
         paragraphWidth,
         defaultTabDistance,
         defaultLineLength,
         followingText,
-        measureText: measureTextCallback,
+        measureText: measureTextCallback ?? (() => 0),
       });
 
+      const alignment = result.alignment === 'clear' ? 'default' : (result.alignment ?? 'default');
       tabs[span.tabId] = {
         width: result.width,
         height: tabHeight,
         leader: result.leader,
-        alignment: result.alignment,
+        alignment,
         tabStopPosUsed: result.tabStopPosUsed,
       };
       currentX += result.width;
@@ -218,8 +285,8 @@ const MAX_WALK_DEPTH = 50;
  * @param {number} paragraphPos // position before paragraph
  * @returns {Decoration[]}
  */
-export function applyLayoutResult(result, paragraph, paragraphPos) {
-  const decorations = [];
+export function applyLayoutResult(result: LayoutResult, paragraph: PmNode, paragraphPos: number): Decoration[] {
+  const decorations: Decoration[] = [];
 
   let tabIndex = 0;
 
@@ -230,9 +297,9 @@ export function applyLayoutResult(result, paragraph, paragraphPos) {
    * and apply layout-based styling decorations. It handles both flat paragraph structures
    * and nested run structures (OOXML documents).
    *
-   * @param {import('prosemirror-model').Node} node - The current node being processed
-   * @param {number} pos - Position immediately before the current node in the document
-   * @param {number} depth - Current recursion depth (default 0), used to prevent stack overflow
+   * @param node - The current node being processed
+   * @param pos - Position immediately before the current node in the document
+   * @param depth - Current recursion depth (default 0), used to prevent stack overflow
    *
    * @remarks
    * - Guards against excessive recursion (MAX_WALK_DEPTH = 50)
@@ -240,7 +307,7 @@ export function applyLayoutResult(result, paragraph, paragraphPos) {
    * - Skips tabs without layout data in result.tabs
    * - Catches and logs errors during recursion to prevent breaking the entire decoration process
    */
-  const walk = (node, pos, depth = 0) => {
+  const walk = (node: PmNode, pos: number, depth = 0) => {
     // Guard against excessive recursion depth
     if (depth > MAX_WALK_DEPTH) {
       console.error(`applyLayoutResult: Maximum recursion depth (${MAX_WALK_DEPTH}) exceeded`);
@@ -302,15 +369,15 @@ export function applyLayoutResult(result, paragraph, paragraphPos) {
  * Used for center/right/decimal tab alignment calculations, where the width of
  * following text determines the tab's rendered width.
  *
- * @param {Array} spans - Array of span objects (text or tab) from flattenParagraph
- * @param {number} startIndex - Index in spans array to start collecting from (exclusive)
- * @returns {string} Concatenated text from all text spans until next tab or end
+ * @param spans - Array of span objects (text or tab) from flattenParagraph
+ * @param startIndex - Index in spans array to start collecting from (exclusive)
+ * @returns Concatenated text from all text spans until next tab or end
  *
  * @example
  * // For center alignment: "Center\tText Here" → measures "Text Here"
  * collectFollowingText(spans, tabIndex + 1) // Returns "Text Here"
  */
-function collectFollowingText(spans, startIndex) {
+function collectFollowingText(spans: Span[], startIndex: number): string {
   let text = '';
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
@@ -336,9 +403,9 @@ function collectFollowingText(spans, startIndex) {
  * // When called at first tab position:
  * getFollowingTextRange(spans, 1) // Returns { from: 8, to: 19 } for "Suffix Text"
  */
-function getFollowingTextRange(spans, startIndex) {
-  let from = null;
-  let to = null;
+function getFollowingTextRange(spans: Span[], startIndex: number) {
+  let from: number | null = null;
+  let to: number | null = null;
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
     if (span.type === 'tab') break;
diff --git a/packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.js b/packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.ts
similarity index 99%
rename from packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.js
rename to packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.ts
index 44df91819..013158576 100644
--- a/packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.js
+++ b/packages/super-editor/src/extensions/tab/helpers/tabDecorations.test.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 const getResolvedParagraphPropertiesMock = vi.hoisted(() => vi.fn((node) => node.attrs.paragraphProperties || {}));
diff --git a/packages/super-editor/src/extensions/tab/helpers/tabDecorations.js b/packages/super-editor/src/extensions/tab/helpers/tabDecorations.ts
similarity index 68%
rename from packages/super-editor/src/extensions/tab/helpers/tabDecorations.js
rename to packages/super-editor/src/extensions/tab/helpers/tabDecorations.ts
index 270c813d7..6cbf30287 100644
--- a/packages/super-editor/src/extensions/tab/helpers/tabDecorations.js
+++ b/packages/super-editor/src/extensions/tab/helpers/tabDecorations.ts
@@ -1,19 +1,53 @@
 import { Decoration } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
+import type { Node as PmNode, ResolvedPos } from 'prosemirror-model';
 import { twipsToPixels } from '@superdoc/word-layout';
 import { getResolvedParagraphProperties } from '@extensions/paragraph/resolvedPropertiesCache.js';
+import type { TabStopInput, TabStopAlignment, TabLeader } from '../types.js';
+
+interface IndentAttrs {
+  left?: number | string;
+  firstLine?: number | string;
+  hanging?: number | string;
+}
+
+type ParagraphEntry = { node: PmNode; pos: number };
+export interface ParagraphContext {
+  paragraph: PmNode;
+  paragraphDepth: number;
+  startPos: number;
+  indent: Record<string, unknown>;
+  tabStops: TabStopInput[];
+  flattened: ParagraphEntry[];
+  positionMap: Map<number, number>;
+  accumulatedTabWidth: number;
+  indentWidth?: number;
+  tabHeight?: string;
+  paragraphWidth?: number;
+}
+
+type ParagraphCache = Map<number, ParagraphContext>;
+type CoordCache = Map<number, number | null>;
+type DomPosCache = Map<number, { node: Node; offset: number }>;
 
 export const defaultTabDistance = 48;
 export const defaultLineLength = 816;
 
-export const getTabDecorations = (doc, view, helpers, from = 0, to = null) => {
-  const decorations = [];
-  const paragraphCache = new Map();
-  const coordCache = new Map();
-  const domPosCache = new Map();
+export const getTabDecorations = (
+  doc: PmNode,
+  view: EditorView,
+  helpers: unknown,
+  from = 0,
+  to: number | null = null,
+) => {
+  const decorations: Decoration[] = [];
+  const paragraphCache: ParagraphCache = new Map();
+  const coordCache: CoordCache = new Map();
+  const domPosCache: DomPosCache = new Map();
 
   const end = to ?? doc.content.size;
 
-  doc.nodesBetween(from, end, (node, pos) => {
+  doc.nodesBetween(from, end, (node: PmNode, pos: number) => {
     if (node.type.name !== 'tab') return;
 
     const $pos = doc.resolve(pos);
@@ -36,14 +70,14 @@ export const getTabDecorations = (doc, view, helpers, from = 0, to = null) => {
 };
 
 export function calculateTabStyle(
-  nodeSize,
-  view,
-  pos,
-  blockParent,
-  paragraphContext,
-  coordCache = null,
-  domPosCache = null,
-) {
+  nodeSize: number,
+  view: EditorView,
+  pos: number,
+  blockParent: PmNode,
+  paragraphContext: ParagraphContext,
+  coordCache: CoordCache | null = null,
+  domPosCache: DomPosCache | null = null,
+): string | null {
   let extraStyles = '';
   try {
     const { tabStops, flattened, positionMap, startPos } = paragraphContext;
@@ -73,14 +107,15 @@ export function calculateTabStyle(
       const tabStop = tabStops.find((stop) => stop.pos > currentWidth && stop.val !== 'clear');
       if (tabStop) {
         tabWidth = Math.min(tabStop.pos, paragraphContext.paragraphWidth) - currentWidth;
-        let val = tabStop.val;
-        const aliases = { left: 'start', right: 'end' };
-        if (aliases[val]) val = aliases[val];
+        let val: TabStopAlignment = tabStop.val;
+        const aliases: Partial<Record<TabStopAlignment, TabStopAlignment>> = { left: 'start', right: 'end' };
+        const mappedVal = aliases[val];
+        if (mappedVal) val = mappedVal;
 
         if (val === 'center' || val === 'end' || val === 'right') {
           // Use O(1) map lookup instead of O(n) findIndex
           const entryIndex = positionMap.get(pos);
-          if (entryIndex === undefined) return;
+          if (entryIndex === undefined) return null;
 
           const nextTabIndex = findNextTabIndex(flattened, entryIndex + 1);
           const segmentStartPos = pos + nodeSize;
@@ -91,7 +126,7 @@ export function calculateTabStyle(
         } else if (val === 'decimal' || val === 'num') {
           // Use O(1) map lookup instead of O(n) findIndex
           const entryIndex = positionMap.get(pos);
-          if (entryIndex === undefined) return;
+          if (entryIndex === undefined) return null;
 
           const breakChar = tabStop.decimalChar || '.';
           const decimalPos = findDecimalBreakPos(flattened, entryIndex + 1, breakChar);
@@ -108,7 +143,8 @@ export function calculateTabStyle(
         }
 
         if (tabStop.leader) {
-          const leaderStyles = {
+          const leaderStyles: Record<TabLeader, string> = {
+            none: '',
             dot: 'border-bottom: 1px dotted black;',
             heavy: 'border-bottom: 2px solid black;',
             hyphen: 'border-bottom: 1px solid black;',
@@ -126,7 +162,7 @@ export function calculateTabStyle(
     }
 
     // Use cached tabHeight (computed once per paragraph)
-    const tabHeight = paragraphContext.tabHeight;
+    const tabHeight = paragraphContext.tabHeight ?? 'auto';
 
     paragraphContext.accumulatedTabWidth = accumulatedTabWidth + tabWidth;
     return `width: ${tabWidth}px; height: ${tabHeight}; ${extraStyles}`;
@@ -135,7 +171,11 @@ export function calculateTabStyle(
   }
 }
 
-export function findParagraphContext($pos, cache, helpers) {
+export function findParagraphContext(
+  $pos: ResolvedPos,
+  cache: ParagraphCache,
+  helpers: unknown,
+): ParagraphContext | null {
   for (let depth = $pos.depth; depth >= 0; depth--) {
     const node = $pos.node(depth);
     if (node?.type?.name === 'paragraph') {
@@ -144,32 +184,33 @@ export function findParagraphContext($pos, cache, helpers) {
         const paragraphContext = extractParagraphContext(node, startPos, helpers, depth);
         cache.set(startPos, paragraphContext);
       }
-      return cache.get(startPos);
+      return cache.get(startPos) ?? null;
     }
   }
   return null;
 }
 
-export function extractParagraphContext(node, startPos, helpers, depth = 0) {
-  const paragraphProperties = getResolvedParagraphProperties(node);
+export function extractParagraphContext(node: PmNode, startPos: number, helpers: unknown, depth = 0): ParagraphContext {
+  const paragraphProperties = getResolvedParagraphProperties(node) || {};
   // Map OOXML alignment values to internal values (for RTL support)
-  const alignmentAliases = { left: 'start', right: 'end' };
-  let tabStops = [];
+  const alignmentAliases: Partial<Record<TabStopAlignment, TabStopAlignment>> = { left: 'start', right: 'end' };
+  let tabStops: TabStopInput[] = [];
 
-  if (Array.isArray(paragraphProperties.tabStops)) {
-    tabStops = paragraphProperties.tabStops
+  if (Array.isArray((paragraphProperties as Record<string, unknown>).tabStops)) {
+    tabStops = (paragraphProperties as { tabStops: TabStopInput[] }).tabStops
       .map((stop) => {
-        const ref = stop?.tab;
+        const ref = stop.tab;
         if (!ref) return stop || null;
-        const rawType = ref.tabType || 'start';
-        const mappedVal = alignmentAliases[rawType] || rawType;
+        const rawType = (ref.tabType as TabStopAlignment) || 'start';
+        const mappedVal = (alignmentAliases[rawType] || rawType) as TabStopAlignment;
         return {
           val: mappedVal,
           pos: twipsToPixels(Number(ref.pos) || 0),
-          leader: ref.leader,
+          leader: ref.leader as TabLeader | undefined,
+          decimalChar: ref.decimalChar as string | undefined,
         };
       })
-      .filter(Boolean);
+      .filter((stop): stop is TabStopInput => Boolean(stop));
   }
 
   const { entries, positionMap } = flattenParagraph(node, startPos);
@@ -177,7 +218,7 @@ export function extractParagraphContext(node, startPos, helpers, depth = 0) {
     paragraph: node,
     paragraphDepth: depth,
     startPos,
-    indent: paragraphProperties.indent || {},
+    indent: (paragraphProperties as { indent?: Record<string, unknown> }).indent || {},
     tabStops: tabStops,
     flattened: entries,
     positionMap: positionMap, // Store position map for O(1) lookups
@@ -185,16 +226,16 @@ export function extractParagraphContext(node, startPos, helpers, depth = 0) {
   };
 }
 
-export function flattenParagraph(paragraph, paragraphStartPos) {
-  const entries = [];
-  const positionMap = new Map(); // Map from position to index for O(1) lookup
+export function flattenParagraph(paragraph: PmNode, paragraphStartPos: number) {
+  const entries: ParagraphEntry[] = [];
+  const positionMap: Map<number, number> = new Map(); // Map from position to index for O(1) lookup
 
-  const walk = (node, basePos) => {
+  const walk = (node: PmNode | null, basePos: number) => {
     if (!node) return;
     if (node.type?.name === 'run') {
       node.forEach((child, offset) => {
         const childPos = basePos + offset + 1;
-        walk(child, childPos);
+        walk(child as PmNode, childPos);
       });
       return;
     }
@@ -206,13 +247,13 @@ export function flattenParagraph(paragraph, paragraphStartPos) {
 
   paragraph.forEach((child, offset) => {
     const childPos = paragraphStartPos + offset + 1;
-    walk(child, childPos);
+    walk(child as PmNode, childPos);
   });
 
   return { entries, positionMap };
 }
 
-export function findNextTabIndex(flattened, fromIndex) {
+export function findNextTabIndex(flattened: ParagraphEntry[], fromIndex: number) {
   for (let i = fromIndex; i < flattened.length; i++) {
     if (flattened[i]?.node?.type?.name === 'tab') {
       return i;
@@ -221,7 +262,7 @@ export function findNextTabIndex(flattened, fromIndex) {
   return -1;
 }
 
-export function findDecimalBreakPos(flattened, startIndex, breakChar) {
+export function findDecimalBreakPos(flattened: ParagraphEntry[], startIndex: number, breakChar: string | null) {
   if (!breakChar) return null;
   for (let i = startIndex; i < flattened.length; i++) {
     const entry = flattened[i];
@@ -237,7 +278,13 @@ export function findDecimalBreakPos(flattened, startIndex, breakChar) {
   return null;
 }
 
-export function measureRangeWidth(view, from, to, coordCache = null, domPosCache = null) {
+export function measureRangeWidth(
+  view: EditorView,
+  from: number,
+  to: number,
+  coordCache: CoordCache | null = null,
+  domPosCache: DomPosCache | null = null,
+): number {
   if (!Number.isFinite(from) || !Number.isFinite(to) || to <= from) return 0;
   try {
     const range = document.createRange();
@@ -256,7 +303,13 @@ export function measureRangeWidth(view, from, to, coordCache = null, domPosCache
   }
 }
 
-export function getIndentWidth(view, paragraphStartPos, indentAttrs = {}, coordCache = null, domPosCache = null) {
+export function getIndentWidth(
+  view: EditorView,
+  paragraphStartPos: number,
+  indentAttrs: IndentAttrs = {},
+  coordCache: CoordCache | null = null,
+  domPosCache: DomPosCache | null = null,
+): number {
   const marginLeft = getLeftCoord(view, paragraphStartPos, coordCache, domPosCache);
   const lineLeft = getLeftCoord(view, paragraphStartPos + 1, coordCache, domPosCache);
   if (marginLeft != null && lineLeft != null) {
@@ -268,7 +321,7 @@ export function getIndentWidth(view, paragraphStartPos, indentAttrs = {}, coordC
   return calculateIndentFallback(indentAttrs);
 }
 
-export function getBlockNodeWidth(view, blockStartPos) {
+export function getBlockNodeWidth(view: EditorView, blockStartPos: number) {
   const blockDom = view.nodeDOM(blockStartPos - 1);
   // Calculate full width including margins, paddings, borders
   if (blockDom instanceof HTMLElement) {
@@ -286,7 +339,7 @@ export function getBlockNodeWidth(view, blockStartPos) {
   return defaultLineLength;
 }
 
-export function calculateIndentFallback(indentAttrs = {}) {
+export function calculateIndentFallback(indentAttrs: IndentAttrs = {}) {
   if (!indentAttrs) return 0;
 
   const left = twipsToPixels(Number(indentAttrs.left) || 0);
@@ -307,15 +360,20 @@ export function calculateIndentFallback(indentAttrs = {}) {
   return 0;
 }
 
-export function getLeftCoord(view, pos, coordCache = null, domPosCache = null) {
+export function getLeftCoord(
+  view: EditorView,
+  pos: number,
+  coordCache: CoordCache | null = null,
+  domPosCache: DomPosCache | null = null,
+): number | null {
   if (!Number.isFinite(pos)) return null;
 
   // Check cache first
   if (coordCache && coordCache.has(pos)) {
-    return coordCache.get(pos);
+    return coordCache.get(pos) ?? null;
   }
 
-  let result = null;
+  let result: number | null = null;
   try {
     result = view.coordsAtPos(pos).left;
   } catch {
@@ -340,9 +398,13 @@ export function getLeftCoord(view, pos, coordCache = null, domPosCache = null) {
   return result;
 }
 
-export function getCachedDomAtPos(view, pos, domPosCache = null) {
+export function getCachedDomAtPos(
+  view: EditorView,
+  pos: number,
+  domPosCache: DomPosCache | null = null,
+): { node: Node; offset: number } {
   if (domPosCache && domPosCache.has(pos)) {
-    return domPosCache.get(pos);
+    return domPosCache.get(pos)!;
   }
 
   const result = view.domAtPos(pos);
@@ -354,7 +416,7 @@ export function getCachedDomAtPos(view, pos, domPosCache = null) {
   return result;
 }
 
-export function calcTabHeight(blockParent) {
+export function calcTabHeight(blockParent: PmNode) {
   const ptToPxRatio = 1.333;
   const defaultFontSize = 16;
   const defaultLineHeight = 1.1;
diff --git a/packages/super-editor/src/extensions/tab/index.js b/packages/super-editor/src/extensions/tab/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tab/index.js
rename to packages/super-editor/src/extensions/tab/index.ts
diff --git a/packages/super-editor/src/extensions/tab/tab-alignments.test.js b/packages/super-editor/src/extensions/tab/tab-alignments.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tab/tab-alignments.test.js
rename to packages/super-editor/src/extensions/tab/tab-alignments.test.ts
diff --git a/packages/super-editor/src/extensions/tab/tab-headless.test.js b/packages/super-editor/src/extensions/tab/tab-headless.test.ts
similarity index 98%
rename from packages/super-editor/src/extensions/tab/tab-headless.test.js
rename to packages/super-editor/src/extensions/tab/tab-headless.test.ts
index 44a1dc86f..0322b450d 100644
--- a/packages/super-editor/src/extensions/tab/tab-headless.test.js
+++ b/packages/super-editor/src/extensions/tab/tab-headless.test.ts
@@ -122,7 +122,6 @@ describe('Tab extension - headless mode behavior', () => {
 
     uiEditor.destroy();
 
-    // eslint-disable-next-line no-console
     console.log(
       '[Perf][Tab] 100 pages with tabs -> headless:',
       headlessMs.toFixed(2),
diff --git a/packages/super-editor/src/extensions/tab/tab-performance.test.js b/packages/super-editor/src/extensions/tab/tab-performance.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tab/tab-performance.test.js
rename to packages/super-editor/src/extensions/tab/tab-performance.test.ts
diff --git a/packages/super-editor/src/extensions/tab/tab.test.js b/packages/super-editor/src/extensions/tab/tab.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tab/tab.test.js
rename to packages/super-editor/src/extensions/tab/tab.test.ts
diff --git a/packages/super-editor/src/extensions/tab/tab.js b/packages/super-editor/src/extensions/tab/tab.ts
similarity index 68%
rename from packages/super-editor/src/extensions/tab/tab.js
rename to packages/super-editor/src/extensions/tab/tab.ts
index c913e7def..88a601ca3 100644
--- a/packages/super-editor/src/extensions/tab/tab.js
+++ b/packages/super-editor/src/extensions/tab/tab.ts
@@ -1,30 +1,40 @@
 import { Node, Attribute } from '@core/index.js';
+import type { Node as PmNode } from 'prosemirror-model';
 import { Plugin, PluginKey } from 'prosemirror-state';
-import { DecorationSet } from 'prosemirror-view';
-import { isHeadless } from '@/utils/headless-helpers.js';
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { Step } from 'prosemirror-transform';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+import type { EditorView } from 'prosemirror-view';
+import { isHeadless } from '@/utils/headless-helpers';
 import { createLayoutRequest, calculateTabLayout, applyLayoutResult } from './helpers/tabAdapter.js';
+import type { Editor } from '@core/Editor.js';
+import type { AttributeValue, RenderNodeContext } from '@core/index.js';
 import { clearAllParagraphContexts } from './helpers/paragraphContextCache.js';
 
 /**
  * Configuration options for TabNode
- * @typedef {Object} TabNodeOptions
  * @category Options
- * @property {Object} [htmlAttributes] - HTML attributes for tab elements
  */
+export interface TabNodeOptions extends Record<string, unknown> {
+  /** HTML attributes for tab elements */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 /**
  * Attributes for tab nodes
- * @typedef {Object} TabNodeAttributes
  * @category Attributes
- * @property {number} [tabSize] - Width of the tab in pixels
  */
+export interface TabNodeAttributes {
+  /** Width of the tab in pixels */
+  tabSize?: number;
+}
 
 /**
  * @module TabNode
  * @sidebarTitle Tab
  * @snippetPath /snippets/extensions/tab.mdx
  */
-export const TabNode = Node.create({
+export const TabNode = Node.create<TabNodeOptions>({
   name: 'tab',
   group: 'inline',
   inline: true,
@@ -49,14 +59,18 @@ export const TabNode = Node.create({
     return [{ tag: 'span.sd-editor-tab' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: RenderNodeContext) {
+    return [
+      'span',
+      Attribute.mergeAttributes(this.options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 
   addAttributes() {
     return {
       tabSize: {
-        renderDOM: ({ tabSize }) => {
+        renderDOM: ({ tabSize }: { tabSize?: number | null }) => {
           if (!tabSize) return {};
           const style = `width: ${tabSize}px; min-width: ${tabSize}px;`;
           return { style };
@@ -67,7 +81,7 @@ export const TabNode = Node.create({
 
   addPmPlugins() {
     // Skip tab plugin entirely in headless mode
-    if (isHeadless(this.editor)) {
+    if (!this.editor || isHeadless(this.editor)) {
       return [];
     }
 
@@ -83,20 +97,22 @@ export const TabNode = Node.create({
         },
         apply(tr, { decorations, revision }, _oldState, newState) {
           const currentDecorations =
-            decorations && decorations.map ? decorations.map(tr.mapping, tr.doc) : DecorationSet.empty;
+            decorations && (decorations as DecorationSet).map
+              ? (decorations as DecorationSet).map(tr.mapping, tr.doc)
+              : DecorationSet.empty;
 
           // Early return for non-document changes
           if (!tr.docChanged || tr.getMeta('blockNodeInitialUpdate')) {
             return { decorations: currentDecorations, revision };
           }
 
-          const affectedParagraphs = getAffectedParagraphStarts(tr, newState);
+          const affectedParagraphs: Set<number> = getAffectedParagraphStarts(tr, newState);
           if (affectedParagraphs.size === 0) {
             return { decorations: currentDecorations, revision };
           }
 
           let nextDecorations = currentDecorations;
-          affectedParagraphs.forEach((pos) => {
+          affectedParagraphs.forEach((pos: number) => {
             const paragraph = newState.doc.nodeAt(pos);
             if (!paragraph || paragraph.type.name !== 'paragraph') return;
 
@@ -123,7 +139,8 @@ export const TabNode = Node.create({
       },
       props: {
         decorations(state) {
-          return this.getState(state).decorations;
+          const pluginState = this.getState(state);
+          return pluginState?.decorations || DecorationSet.empty;
         },
       },
       view() {
@@ -139,8 +156,13 @@ export const TabNode = Node.create({
   },
 });
 
-function buildInitialDecorations(doc, view, helpers, revision) {
-  const decorations = [];
+function buildInitialDecorations(
+  doc: PmNode,
+  view: EditorView,
+  helpers: Editor['helpers'],
+  revision: number,
+): DecorationSet {
+  const decorations: Decoration[] = [];
   doc.descendants((node, pos) => {
     if (node.type.name !== 'paragraph') return;
     let hasTab = false;
@@ -153,7 +175,7 @@ function buildInitialDecorations(doc, view, helpers, revision) {
     });
     if (!hasTab) return;
 
-    const request = createLayoutRequest(doc, pos + 1, view, helpers, revision);
+    const request = createLayoutRequest(doc, pos + 1, view, helpers, revision, undefined);
     if (!request) return;
     const result = calculateTabLayout(request, undefined, view);
     const paragraphDecorations = applyLayoutResult(result, node, pos);
@@ -162,13 +184,32 @@ function buildInitialDecorations(doc, view, helpers, revision) {
   return DecorationSet.create(doc, decorations);
 }
 
-function buildParagraphDecorations(doc, paragraphContentPos, paragraphNode, view, helpers, revision) {
+function buildParagraphDecorations(
+  doc: PmNode,
+  paragraphContentPos: number,
+  paragraphNode: PmNode,
+  view: EditorView,
+  helpers: Editor['helpers'],
+  revision: number,
+): Decoration[] {
   const request = createLayoutRequest(doc, paragraphContentPos, view, helpers, revision);
   if (!request) return [];
   const result = calculateTabLayout(request, undefined, view);
   return applyLayoutResult(result, paragraphNode, paragraphContentPos - 1);
 }
 
+/**
+ * Type guard to check if a step has positional information
+ */
+function hasPositionalInfo(step: Step): step is Step & { from: number; to: number } {
+  return (
+    'from' in step &&
+    'to' in step &&
+    typeof (step as Step & { from?: unknown }).from === 'number' &&
+    typeof (step as Step & { to?: unknown }).to === 'number'
+  );
+}
+
 /**
  * Identifies paragraphs affected by transaction steps.
  * Recomputes all paragraphs in the affected range, relying on paragraph context caching
@@ -178,17 +219,16 @@ function buildParagraphDecorations(doc, paragraphContentPos, paragraphNode, view
  * @param {import('prosemirror-state').EditorState} newState - The new editor state
  * @returns {Set<number>} Set of paragraph start positions
  */
-function getAffectedParagraphStarts(tr, newState) {
-  const affected = new Set();
+function getAffectedParagraphStarts(tr: Transaction, newState: EditorState): Set<number> {
+  const affected: Set<number> = new Set();
 
   tr.steps.forEach((step, index) => {
-    // Only consider steps that touch the document
-    if (step.from == null && step.to == null) return;
+    // Only consider steps that touch the document with positional information
+    if (!hasPositionalInfo(step)) return;
 
     // Map positions through subsequent step mappings to get final positions
     let fromPos = step.from;
     let toPos = step.to;
-    if (typeof fromPos !== 'number' || typeof toPos !== 'number') return;
 
     for (let i = index; i < tr.steps.length; i++) {
       const stepMap = tr.steps[i].getMap();
diff --git a/packages/super-editor/src/extensions/tab/types.js b/packages/super-editor/src/extensions/tab/types.js
deleted file mode 100644
index d3741ff6e..000000000
--- a/packages/super-editor/src/extensions/tab/types.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// Lightweight type declarations (JSDoc) for tab layout requests/results used by the adapter.
-
-/**
- * @typedef {Object} TabStopInput
- * @property {number} pos - Position in pixels from paragraph start.
- * @property {'start'|'end'|'center'|'decimal'|'bar'|'clear'} val
- * @property {'none'|'dot'|'hyphen'|'underscore'|'heavy'|'middleDot'} [leader]
- * @property {string} [decimalChar]
- */
-
-/**
- * @typedef {Object} LayoutRequest
- * @property {string} paragraphId
- * @property {number} revision
- * @property {number} paragraphWidth
- * @property {number} defaultTabDistance
- * @property {number} defaultLineLength
- * @property {{ left:number, right:number, firstLine:number, hanging:number }} indents
- * @property {TabStopInput[]} tabStops
- * @property {Array<TextSpan|TabSpan>} spans
- * @property {number} [indentWidth]
- * @property {import('prosemirror-model').Node} [paragraphNode]
- */
-
-/**
- * @typedef {Object} TextSpan
- * @property {'text'} type
- * @property {string} spanId
- * @property {string} text
- * @property {Object} style
- * @property {number} from
- * @property {number} to
- */
-
-/**
- * @typedef {Object} TabSpan
- * @property {'tab'} type
- * @property {string} spanId
- * @property {string} tabId
- * @property {number} pos
- * @property {number} nodeSize
- */
-
-/**
- * @typedef {Object} LayoutResult
- * @property {string} paragraphId
- * @property {number} revision
- * @property {Object.<string, TabLayout>} tabs
- */
-
-/**
- * @typedef {Object} TabLayout
- * @property {number} width
- * @property {number} height
- * @property {'start'|'center'|'end'|'decimal'|'bar'|'default'} alignment
- * @property {number|string} tabStopPosUsed
- * @property {'none'|'dot'|'hyphen'|'underscore'|'heavy'|'middleDot'} [leader]
- */
diff --git a/packages/super-editor/src/extensions/tab/types.ts b/packages/super-editor/src/extensions/tab/types.ts
new file mode 100644
index 000000000..ddb85a6bc
--- /dev/null
+++ b/packages/super-editor/src/extensions/tab/types.ts
@@ -0,0 +1,69 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+export type TabStopAlignment = 'start' | 'end' | 'center' | 'decimal' | 'bar' | 'clear' | 'left' | 'right' | 'num';
+export type TabLeader = 'none' | 'dot' | 'hyphen' | 'underscore' | 'heavy' | 'middleDot';
+
+export interface TabStopInput {
+  /** Position in pixels from paragraph start */
+  pos: number;
+  val: TabStopAlignment;
+  leader?: TabLeader;
+  decimalChar?: string;
+  tab?: {
+    tabType?: TabStopAlignment;
+    pos?: number;
+    leader?: TabLeader;
+    decimalChar?: string;
+  };
+}
+
+export interface Indents {
+  left: number;
+  right: number;
+  firstLine: number;
+  hanging: number;
+}
+
+export interface TextSpan {
+  type: 'text';
+  spanId: string;
+  text: string;
+  style: Record<string, unknown>;
+  from: number;
+  to: number;
+}
+
+export interface TabSpan {
+  type: 'tab';
+  spanId: string;
+  tabId: string;
+  pos: number;
+  nodeSize: number;
+}
+
+export interface LayoutRequest {
+  paragraphId: string;
+  revision: number;
+  paragraphWidth: number;
+  defaultTabDistance: number;
+  defaultLineLength: number;
+  indents: Indents;
+  tabStops: TabStopInput[];
+  spans: Array<TextSpan | TabSpan>;
+  indentWidth?: number;
+  paragraphNode?: PmNode;
+}
+
+export interface TabLayout {
+  width: number;
+  height?: number | string;
+  alignment: TabStopAlignment | 'default';
+  tabStopPosUsed: number | string;
+  leader?: TabLeader;
+}
+
+export interface LayoutResult {
+  paragraphId: string;
+  revision: number;
+  tabs: Record<string, TabLayout>;
+}
diff --git a/packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.js b/packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.ts
similarity index 98%
rename from packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.js
rename to packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.ts
index da8b41472..fb663c9b3 100644
--- a/packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.js
+++ b/packages/super-editor/src/extensions/table-cell/helpers/createCellBorders.ts
@@ -1,4 +1,3 @@
-// @ts-check
 /**
  * Cell border configuration
  * @typedef {Object} CellBorder
diff --git a/packages/super-editor/src/extensions/table-cell/index.js b/packages/super-editor/src/extensions/table-cell/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table-cell/index.js
rename to packages/super-editor/src/extensions/table-cell/index.ts
diff --git a/packages/super-editor/src/extensions/table-cell/table-cell.test.js b/packages/super-editor/src/extensions/table-cell/table-cell.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table-cell/table-cell.test.js
rename to packages/super-editor/src/extensions/table-cell/table-cell.test.ts
diff --git a/packages/super-editor/src/extensions/table-cell/table-cell.js b/packages/super-editor/src/extensions/table-cell/table-cell.ts
similarity index 82%
rename from packages/super-editor/src/extensions/table-cell/table-cell.js
rename to packages/super-editor/src/extensions/table-cell/table-cell.ts
index 313e9ef25..65d64764b 100644
--- a/packages/super-editor/src/extensions/table-cell/table-cell.js
+++ b/packages/super-editor/src/extensions/table-cell/table-cell.ts
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * Conditional formatting properties
  * @typedef {Object} CnfStyle
@@ -38,6 +36,8 @@
  */
 
 import { Node, Attribute } from '@core/index.js';
+import type { AttributeValue, RenderNodeContext } from '@core/index.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 import { createCellBorders } from './helpers/createCellBorders.js';
 
 /**
@@ -57,10 +57,15 @@ import { createCellBorders } from './helpers/createCellBorders.js';
 
 /**
  * Configuration options for TableCell
- * @typedef {Object} TableCellOptions
  * @category Options
- * @property {Object} [htmlAttributes={'aria-label': 'Table cell node'}] - HTML attributes for table cells
  */
+interface TableCellOptions extends Record<string, unknown> {
+  /** HTML attributes for table cells */
+  htmlAttributes: Record<string, AttributeValue>;
+}
+
+type CellBackground = { color?: string };
+type CellMargins = Record<'top' | 'right' | 'bottom' | 'left', number>;
 
 /**
  * Attributes for table cell nodes
@@ -82,7 +87,7 @@ import { createCellBorders } from './helpers/createCellBorders.js';
  * @sidebarTitle Table Cell
  * @snippetPath /snippets/extensions/table-cell.mdx
  */
-export const TableCell = Node.create({
+export const TableCell = Node.create<TableCellOptions>({
   name: 'tableCell',
 
   content: 'block+',
@@ -111,24 +116,22 @@ export const TableCell = Node.create({
 
       colwidth: {
         default: [100],
-        parseDOM: (elem) => {
+        parseDOM: (elem: Element) => {
           const colwidth = elem.getAttribute('data-colwidth');
           const value = colwidth ? colwidth.split(',').map((width) => parseInt(width, 10)) : null;
           return value;
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { colwidth?: number[] | null }) => {
           if (!attrs.colwidth) return {};
           return {
-            // @ts-expect-error - colwidth is known to be an array at runtime
             'data-colwidth': attrs.colwidth.join(','),
           };
         },
       },
 
       background: {
-        renderDOM({ background }) {
+        renderDOM({ background }: { background?: CellBackground | null }) {
           if (!background) return {};
-          // @ts-expect-error - background is known to be an object at runtime
           const { color } = background || {};
           const style = `background-color: ${color ? `#${color}` : 'transparent'}`;
           return { style };
@@ -136,7 +139,7 @@ export const TableCell = Node.create({
       },
 
       verticalAlign: {
-        renderDOM({ verticalAlign }) {
+        renderDOM({ verticalAlign }: { verticalAlign?: string | null }) {
           if (!verticalAlign) return {};
           const style = `vertical-align: ${verticalAlign}`;
           return { style };
@@ -144,15 +147,21 @@ export const TableCell = Node.create({
       },
 
       cellMargins: {
-        renderDOM({ cellMargins, borders }) {
+        renderDOM({
+          cellMargins,
+          borders,
+        }: {
+          cellMargins?: Partial<CellMargins> | null;
+          borders?: Record<string, { val?: string; size?: number }> | null;
+        }) {
           if (!cellMargins) return {};
           const sides = ['top', 'right', 'bottom', 'left'];
           const style = sides
             .map((side) => {
-              const margin = cellMargins?.[side] ?? 0;
-              const border = borders?.[side];
+              const margin = cellMargins?.[side as keyof typeof cellMargins] ?? 0;
+              const border = (borders as Record<string, { val?: string; size?: number }> | undefined)?.[side];
               // TODO: this should include table-level borders as well for the first/last cell in the row
-              const borderSize = border && border.val !== 'none' ? Math.ceil(border.size) : 0;
+              const borderSize = border && border.val !== 'none' ? Math.ceil(border.size ?? 0) : 0;
 
               if (margin) return `padding-${side}: ${Math.max(0, margin - borderSize)}px;`;
               return '';
@@ -164,7 +173,7 @@ export const TableCell = Node.create({
 
       borders: {
         default: () => createCellBorders(),
-        renderDOM({ borders }) {
+        renderDOM({ borders }: { borders?: Record<string, { val?: string; size?: number; color?: string }> }) {
           if (!borders) return {};
           const sides = ['top', 'right', 'bottom', 'left'];
           const style = sides
@@ -173,7 +182,7 @@ export const TableCell = Node.create({
               if (border && border.val === 'none') return `border-${side}: ${border.val};`;
               let color = border?.color || 'black';
               if (color === 'auto') color = 'black';
-              if (border) return `border-${side}: ${Math.ceil(border.size)}px solid ${color};`;
+              if (border) return `border-${side}: ${Math.ceil(border.size ?? 0)}px solid ${color};`;
               return '';
             })
             .join(' ');
@@ -193,11 +202,11 @@ export const TableCell = Node.create({
 
       __placeholder: {
         default: null,
-        parseDOM: (element) => {
+        parseDOM: (element: Element) => {
           const value = element.getAttribute('data-placeholder');
           return value || null;
         },
-        renderDOM({ __placeholder }) {
+        renderDOM({ __placeholder }: { __placeholder?: string | null }) {
           if (!__placeholder) return {};
           return {
             'data-placeholder': __placeholder,
@@ -217,11 +226,15 @@ export const TableCell = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'td' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['td', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: RenderNodeContext): DOMOutputSpec {
+    return [
+      'td',
+      Attribute.mergeAttributes(this.options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 });
diff --git a/packages/super-editor/src/extensions/table-header/index.js b/packages/super-editor/src/extensions/table-header/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table-header/index.js
rename to packages/super-editor/src/extensions/table-header/index.ts
diff --git a/packages/super-editor/src/extensions/table-header/table-header.js b/packages/super-editor/src/extensions/table-header/table-header.ts
similarity index 66%
rename from packages/super-editor/src/extensions/table-header/table-header.js
rename to packages/super-editor/src/extensions/table-header/table-header.ts
index d153da894..2f8162eb8 100644
--- a/packages/super-editor/src/extensions/table-header/table-header.js
+++ b/packages/super-editor/src/extensions/table-header/table-header.ts
@@ -1,13 +1,15 @@
-// @ts-nocheck
-
 import { Node, Attribute } from '@core/index.js';
+import type { AttributeValue, RenderNodeContext } from '@core/index.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 
 /**
  * Configuration options for TableHeader
- * @typedef {Object} TableHeaderOptions
  * @category Options
- * @property {Object} [htmlAttributes={'aria-label': 'Table head node'}] - HTML attributes for table headers
  */
+interface TableHeaderOptions extends Record<string, unknown> {
+  /** HTML attributes for table headers */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 /**
  * Attributes for table header nodes
@@ -23,7 +25,7 @@ import { Node, Attribute } from '@core/index.js';
  * @sidebarTitle Table Header
  * @snippetPath /snippets/extensions/table-header.mdx
  */
-export const TableHeader = Node.create({
+export const TableHeader = Node.create<TableHeaderOptions>({
   name: 'tableHeader',
 
   content: 'block+',
@@ -52,15 +54,14 @@ export const TableHeader = Node.create({
 
       colwidth: {
         default: null,
-        parseDOM: (element) => {
+        parseDOM: (element: Element) => {
           const colwidth = element.getAttribute('data-colwidth');
           const value = colwidth ? colwidth.split(',').map((width) => parseInt(width, 10)) : null;
           return value;
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { colwidth?: number[] | null }) => {
           if (!attrs.colwidth) return {};
           return {
-            // @ts-expect-error - colwidth is known to be an array at runtime
             'data-colwidth': attrs.colwidth.join(','),
           };
         },
@@ -68,11 +69,11 @@ export const TableHeader = Node.create({
 
       __placeholder: {
         default: null,
-        parseDOM: (element) => {
+        parseDOM: (element: Element) => {
           const value = element.getAttribute('data-placeholder');
           return value || null;
         },
-        renderDOM({ __placeholder }) {
+        renderDOM({ __placeholder }: { __placeholder?: string | null }) {
           if (!__placeholder) return {};
           return {
             'data-placeholder': __placeholder,
@@ -82,11 +83,15 @@ export const TableHeader = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'th' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['th', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: RenderNodeContext): DOMOutputSpec {
+    return [
+      'th',
+      Attribute.mergeAttributes(this.options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 });
diff --git a/packages/super-editor/src/extensions/table-of-contents/index.js b/packages/super-editor/src/extensions/table-of-contents/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table-of-contents/index.js
rename to packages/super-editor/src/extensions/table-of-contents/index.ts
diff --git a/packages/super-editor/src/extensions/table-of-contents/table-of-contents.js b/packages/super-editor/src/extensions/table-of-contents/table-of-contents.ts
similarity index 53%
rename from packages/super-editor/src/extensions/table-of-contents/table-of-contents.js
rename to packages/super-editor/src/extensions/table-of-contents/table-of-contents.ts
index f9596b9d7..b02e0735b 100644
--- a/packages/super-editor/src/extensions/table-of-contents/table-of-contents.js
+++ b/packages/super-editor/src/extensions/table-of-contents/table-of-contents.ts
@@ -1,6 +1,12 @@
 import { Node, Attribute } from '@core/index.js';
+import type { AttributeValue, RenderNodeContext } from '@core/index.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 
-export const TableOfContents = Node.create({
+interface TableOfContentsOptions extends Record<string, AttributeValue> {
+  htmlAttributes: Record<string, AttributeValue>;
+}
+
+export const TableOfContents = Node.create<TableOfContentsOptions>({
   name: 'tableOfContents',
 
   group: 'block',
@@ -18,7 +24,7 @@ export const TableOfContents = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [
       {
         tag: 'div[data-id="table-of-contents"]',
@@ -26,8 +32,12 @@ export const TableOfContents = Node.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['div', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: RenderNodeContext): DOMOutputSpec {
+    return [
+      'div',
+      Attribute.mergeAttributes(this.options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 
   addAttributes() {
@@ -44,8 +54,8 @@ export const TableOfContents = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: { sdBlockId?: string | null }) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
diff --git a/packages/super-editor/src/extensions/table-row/index.js b/packages/super-editor/src/extensions/table-row/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table-row/index.js
rename to packages/super-editor/src/extensions/table-row/index.ts
diff --git a/packages/super-editor/src/extensions/table-row/table-row.js b/packages/super-editor/src/extensions/table-row/table-row.ts
similarity index 90%
rename from packages/super-editor/src/extensions/table-row/table-row.js
rename to packages/super-editor/src/extensions/table-row/table-row.ts
index 64bf03b0f..5a7a46089 100644
--- a/packages/super-editor/src/extensions/table-row/table-row.js
+++ b/packages/super-editor/src/extensions/table-row/table-row.ts
@@ -1,5 +1,6 @@
-// @ts-nocheck
 import { Node, Attribute } from '@core/index.js';
+import type { AttributeValue, RenderNodeContext } from '@core/index.js';
+import type { DOMOutputSpec, ParseRule } from 'prosemirror-model';
 
 /**
  * @typedef {Object} CnfStyle
@@ -43,10 +44,12 @@ import { Node, Attribute } from '@core/index.js';
 
 /**
  * Configuration options for TableRow
- * @typedef {Object} TableRowOptions
  * @category Options
- * @property {Object} [htmlAttributes={'aria-label': 'Table row node'}] - HTML attributes for table rows
  */
+interface TableRowOptions extends Record<string, unknown> {
+  /** HTML attributes for table rows */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 /**
  * Attributes for table row nodes
@@ -68,7 +71,7 @@ import { Node, Attribute } from '@core/index.js';
  * @sidebarTitle Table Row
  * @snippetPath /snippets/extensions/table-row.mdx
  */
-export const TableRow = Node.create({
+export const TableRow = Node.create<TableRowOptions>({
   name: 'tableRow',
 
   content: '(tableCell | tableHeader)*',
@@ -86,7 +89,7 @@ export const TableRow = Node.create({
   addAttributes() {
     return {
       rowHeight: {
-        renderDOM({ rowHeight }) {
+        renderDOM({ rowHeight }: { rowHeight?: number | null }) {
           if (!rowHeight) return {};
           const style = `height: ${rowHeight}px`;
           return { style };
@@ -95,10 +98,10 @@ export const TableRow = Node.create({
 
       cantSplit: {
         default: false,
-        parseDOM() {
+        parseDOM(): Record<string, never> {
           return {};
         },
-        renderDOM({ cantSplit }) {
+        renderDOM({ cantSplit }: { cantSplit?: boolean }) {
           // Render as a data attribute so it can be inspected in the DOM, but it's optional.
           if (!cantSplit) return {};
           return { 'data-cant-split': 'true' };
@@ -135,11 +138,15 @@ export const TableRow = Node.create({
     };
   },
 
-  parseDOM() {
+  parseDOM(): ParseRule[] {
     return [{ tag: 'tr' }];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['tr', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({ htmlAttributes }: RenderNodeContext): DOMOutputSpec {
+    return [
+      'tr',
+      Attribute.mergeAttributes(this.options?.htmlAttributes ?? {}, htmlAttributes as Record<string, AttributeValue>),
+      0,
+    ];
   },
 });
diff --git a/packages/super-editor/src/extensions/table/TableView.js b/packages/super-editor/src/extensions/table/TableView.ts
similarity index 53%
rename from packages/super-editor/src/extensions/table/TableView.js
rename to packages/super-editor/src/extensions/table/TableView.ts
index 6f94fbd50..42388491d 100644
--- a/packages/super-editor/src/extensions/table/TableView.js
+++ b/packages/super-editor/src/extensions/table/TableView.ts
@@ -1,27 +1,31 @@
 import { twipsToPixels, convertSizeToCSS } from '@core/super-converter/helpers.js';
 import { Attribute } from '@core/Attribute.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { NodeView, ViewMutationRecord } from 'prosemirror-view';
+import type { Editor } from '@core/Editor.js';
+
+type TableNode = PmNode & {
+  attrs: Record<string, unknown>;
+  firstChild: PmNode | null;
+  childCount: number;
+  child(index: number): PmNode;
+};
 
 /**
  * Source example.
  * https://github.com/ProseMirror/prosemirror-tables/blob/master/src/tableview.ts
  */
-export const createTableView = ({ editor }) => {
-  return class TableView {
-    editor;
-
-    node;
-
-    dom;
-
-    table;
-
-    colgroup;
-
-    contentDOM;
-
-    cellMinWidth;
-
-    constructor(node, cellMinWidth) {
+export const createTableView = ({ editor }: { editor: Editor }) => {
+  return class TableView implements NodeView {
+    editor: Editor;
+    node: TableNode;
+    dom: HTMLElement;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    contentDOM: HTMLElement;
+    cellMinWidth: number;
+
+    constructor(node: TableNode, cellMinWidth: number) {
       this.editor = editor;
       this.node = node;
       this.cellMinWidth = cellMinWidth;
@@ -39,7 +43,7 @@ export const createTableView = ({ editor }) => {
       }, 0);
     }
 
-    update(node) {
+    update(node: TableNode, _decorations?: readonly unknown[], _innerDecorations?: unknown) {
       if (node.type !== this.node.type) {
         return false;
       }
@@ -52,55 +56,56 @@ export const createTableView = ({ editor }) => {
       return true;
     }
 
-    ignoreMutation(mutation) {
+    ignoreMutation(mutation: ViewMutationRecord): boolean {
+      if (mutation.type === 'selection') {
+        return false;
+      }
+      const target = mutation.target as Node;
       const tableWrapper = this.dom;
-      if (mutation.target === tableWrapper && mutation.type === 'attributes' && mutation.attributeName === 'style') {
+      if (target === tableWrapper && mutation.type === 'attributes' && mutation.attributeName === 'style') {
         return true;
       }
 
-      return (
-        mutation.type === 'attributes' && (mutation.target === this.table || this.colgroup.contains(mutation.target))
-      );
+      return mutation.type === 'attributes' && (target === this.table || this.colgroup.contains(target));
     }
   };
 };
 
-/**
- * @param {import('./table.js').TableNode} node
- * @param {HTMLTableColElement} colgroup
- * @param {HTMLTableElement} table
- * @param {number} _cellMinWidth - Reserved for future use (cell minimum width)
- */
-export function updateColumns(node, colgroup, table, _cellMinWidth) {
+export function updateColumns(
+  node: TableNode,
+  colgroup: HTMLTableColElement,
+  table: HTMLTableElement,
+  _cellMinWidth: number,
+) {
   const gridColumns =
     Array.isArray(node.attrs?.grid) && node.attrs.grid.length
-      ? node.attrs.grid.map((col) => twipsToPixels(col.col))
+      ? node.attrs.grid.map((col: { col: number }) => twipsToPixels(col.col))
       : null;
   const totalColumns = gridColumns?.length ?? null;
 
-  const resolveColumnWidth = (colIndex, colwidthValue) => {
+  const resolveColumnWidth = (colIndex: number, colwidthValue: unknown) => {
     if (colwidthValue != null) return colwidthValue;
     if (gridColumns && gridColumns[colIndex] != null) return gridColumns[colIndex];
     return null;
   };
 
-  const widths = [];
-  const firstRow = node.firstChild;
+  const widths: Array<number | null> = [];
+  const firstRow = node.firstChild as PmNode | null;
   let colIndex = 0;
 
   if (firstRow !== null) {
     for (let i = 0; i < firstRow.childCount; i++) {
       const child = firstRow.child(i);
-      const { colspan, colwidth } = child.attrs;
+      const { colspan, colwidth } = child.attrs as { colspan: number; colwidth?: number[] };
       for (let span = 0; span < colspan; span += 1, colIndex += 1) {
-        widths.push(resolveColumnWidth(colIndex, colwidth && colwidth[span]));
+        widths.push(resolveColumnWidth(colIndex, colwidth && colwidth[span]) as number | null);
       }
     }
   }
 
   if (totalColumns != null && colIndex < totalColumns) {
     for (let col = colIndex; col < totalColumns; col += 1) {
-      widths.push(resolveColumnWidth(col));
+      widths.push(resolveColumnWidth(col, null) as number | null);
     }
   }
 
@@ -114,93 +119,88 @@ export function updateColumns(node, colgroup, table, _cellMinWidth) {
   });
 
   const tableWidthCSS = convertSizeToCSS(
-    // TODO: why is tableWidth undefined in src/tests/import-export/font-default-styles.test.js?
     node.attrs.tableProperties.tableWidth?.value ?? null,
     node.attrs.tableProperties.tableWidth?.type ?? 'auto',
   );
 
-  // TODO: there's no guarantee that all children of colgroup are <col> elements. (Note type errors below)
-  // Consider the simpler approach of deleting all children and repopulating; if that proves inefficient, then skip/delete any non-HTMLColElement children
-  let colElement = colgroup.firstChild;
+  let colElement = colgroup.firstChild as HTMLTableColElement | null;
   normalizedWidths.forEach((width) => {
     if (!colElement) {
       colElement = document.createElement('col');
       colgroup.appendChild(colElement);
     }
 
-    // TODO: is there a reason to have a cellMinWidth?
-    // colElement.style.minWidth = `${cellMinWidth}px`;
-    colElement.style.width = width !== null && width !== undefined ? `${width}px` : null;
-    colElement = colElement.nextSibling;
+    colElement.style.width = width !== null && width !== undefined ? `${width}px` : '';
+    colElement = colElement.nextSibling as HTMLTableColElement | null;
   });
 
   while (colElement) {
-    const next = colElement.nextSibling;
+    const next = colElement.nextSibling as HTMLTableColElement | null;
     colElement.parentNode?.removeChild(colElement);
     colElement = next;
   }
 
-  // 1. The table is offset to the left by the margin (internal padding) of the first cell
-  // 1b. This seems to be overridden when tableIndent is specified. TODO: identify the exact rules within the spec dictating the interaction between tableIndent and leading margin.
-  // 2. If the table width is relative, it's increased by the left margin of the first cell plus the right margin of the last cell in the first row
   const tableIndent = convertSizeToCSS(
     node.attrs.tableProperties.tableIndent?.value ?? 0,
     node.attrs.tableProperties.tableIndent?.type ?? 'dxa',
   );
-  const firstRowFirstCellPaddingLeftPx = firstRow?.firstChild?.attrs?.cellMargins?.left ?? 0;
-  const firstRowLastCellPaddingRightPx = firstRow?.lastChild?.attrs?.cellMargins?.right ?? 0;
+  const firstRowFirstCellPaddingLeftPx =
+    (firstRow?.firstChild?.attrs as { cellMargins?: { left?: number } } | undefined)?.cellMargins?.left ?? 0;
+  const firstRowLastCellPaddingRightPx =
+    (firstRow?.lastChild?.attrs as { cellMargins?: { right?: number } } | undefined)?.cellMargins?.right ?? 0;
 
   table.style.marginLeft = `${-firstRowFirstCellPaddingLeftPx}px`;
   if (tableIndent !== null) {
     table.style.marginLeft = tableIndent;
   }
 
-  // TODO: why is tableWidth undefined in src/tests/import-export/font-default-styles.test.js?
   if (node.attrs.tableProperties.tableWidth?.type === 'pct') {
     const padding = firstRowFirstCellPaddingLeftPx + firstRowLastCellPaddingRightPx;
     table.style.maxWidth = table.style.width = `calc(${tableWidthCSS} + ${padding}px)`;
   } else {
-    table.style.maxWidth = table.style.width = tableWidthCSS;
+    table.style.maxWidth = table.style.width = tableWidthCSS ?? '';
   }
 }
 
-function updateTable(editor, node, table) {
+function updateTable(editor: Editor, node: TableNode, table: HTMLTableElement) {
   const allExtensionsAttrs = editor.extensionService.attributes;
-  const tableExtensionAttrs = allExtensionsAttrs.filter((e) => e.type === 'table');
+  const tableExtensionAttrs = allExtensionsAttrs.filter((e: { type: string }) => e.type === 'table');
   const htmlAttributes = Attribute.getAttributesToRender(node, tableExtensionAttrs);
   Object.entries(htmlAttributes).forEach(([key, value]) => {
     if (key === 'style') {
-      table.style.cssText = value;
+      table.style.cssText = typeof value === 'string' ? value : '';
     } else {
-      table.setAttribute(key, value);
+      table.setAttribute(key, String(value));
     }
   });
 }
 
-function updateTableWrapper(tableWrapper, table) {
-  let defaultBorderWidth = 1;
-  let borderWidth;
+function updateTableWrapper(tableWrapper: HTMLElement, table: HTMLTableElement | null) {
+  const defaultBorderWidth = 1;
 
   if (!table) {
     return;
   }
 
-  let borderLeftMax = parseFloat(table.style.borderLeftWidth || 0);
-  let borderRightMax = parseFloat(table.style.borderRightWidth) || 0;
+  let borderLeftMax = parseFloat(table.style.borderLeftWidth || '0');
+  let borderRightMax = parseFloat(table.style.borderRightWidth || '0');
 
-  let firstColumnCells = [...table.querySelectorAll(':scope > tbody > tr > td:first-child')];
-  let lastColumnCells = [...table.querySelectorAll(':scope > tbody > tr > td:last-child')];
+  const firstColumnCells = Array.from(
+    table.querySelectorAll<HTMLTableCellElement>(':scope > tbody > tr > td:first-child'),
+  );
+  const lastColumnCells = Array.from(
+    table.querySelectorAll<HTMLTableCellElement>(':scope > tbody > tr > td:last-child'),
+  );
 
-  for (let cell of firstColumnCells) {
-    let borderLeft = parseFloat(cell.style.borderLeftWidth) || 0;
+  for (const cell of firstColumnCells) {
+    const borderLeft = parseFloat(cell.style.borderLeftWidth) || 0;
     borderLeftMax = Math.max(borderLeftMax, borderLeft);
   }
-  for (let cell of lastColumnCells) {
-    let borderRight = parseFloat(cell.style.borderRightWidth) || 0;
+  for (const cell of lastColumnCells) {
+    const borderRight = parseFloat(cell.style.borderRightWidth) || 0;
     borderRightMax = Math.max(borderRightMax, borderRight);
   }
 
-  // for simplicity, we take the maximum value of the borders.
-  borderWidth = Math.ceil(Math.max(borderLeftMax, borderRightMax));
+  const borderWidth = Math.ceil(Math.max(borderLeftMax, borderRightMax));
   tableWrapper.style.setProperty('--table-border-width', `${borderWidth || defaultBorderWidth}px`);
 }
diff --git a/packages/super-editor/src/extensions/table/index.js b/packages/super-editor/src/extensions/table/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table/index.js
rename to packages/super-editor/src/extensions/table/index.ts
diff --git a/packages/super-editor/src/extensions/table/table.test.js b/packages/super-editor/src/extensions/table/table.test.ts
similarity index 97%
rename from packages/super-editor/src/extensions/table/table.test.js
rename to packages/super-editor/src/extensions/table/table.test.ts
index 557f06e74..2a8dc205b 100644
--- a/packages/super-editor/src/extensions/table/table.test.js
+++ b/packages/super-editor/src/extensions/table/table.test.ts
@@ -30,7 +30,7 @@ describe('Table commands', async () => {
   let table;
 
   const setupTestTable = async () => {
-    let { docx, media, mediaFiles, fonts } = await loadTestDataForEditorTests('blank-doc.docx');
+    const { docx, media, mediaFiles, fonts } = await loadTestDataForEditorTests('blank-doc.docx');
     ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));
     ({ schema } = editor);
 
@@ -230,7 +230,7 @@ describe('Table commands', async () => {
 
     describe('table imported from docx', async () => {
       beforeEach(async () => {
-        let { docx, media, mediaFiles, fonts } = await loadTestDataForEditorTests('SD-978-remove-table-borders.docx');
+        const { docx, media, mediaFiles, fonts } = await loadTestDataForEditorTests('SD-978-remove-table-borders.docx');
         ({ editor } = initTestEditor({ content: docx, media, mediaFiles, fonts }));
 
         tablePos = findTablePos(editor.state.doc);
diff --git a/packages/super-editor/src/extensions/table/table.js b/packages/super-editor/src/extensions/table/table.ts
similarity index 81%
rename from packages/super-editor/src/extensions/table/table.js
rename to packages/super-editor/src/extensions/table/table.ts
index a2d4c6674..2df89a59c 100644
--- a/packages/super-editor/src/extensions/table/table.js
+++ b/packages/super-editor/src/extensions/table/table.ts
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * Theme color options
  * @typedef { "dark1" | "light1" | "dark2" | "light2" | "accent1" | "accent2" | "accent3" | "accent4" | "accent5" | "accent6" | "hyperlink" | "followedHyperlink" | "none" | "background1" | "text1" | "background2" | "text2" } ThemeColor
@@ -169,7 +167,7 @@
  * @property {import('prosemirror-model').Node[]} rows - Row nodes to append
  */
 
-import { Node, Attribute } from '@core/index.js';
+import { Node, Attribute, type AttributeValue } from '@core/index.js';
 import { callOrGet } from '@core/utilities/callOrGet.js';
 import { getExtensionConfigField } from '@core/helpers/getExtensionConfigField.js';
 import { /* TableView */ createTableView } from './TableView.js';
@@ -182,6 +180,10 @@ import { createTableBorders } from './tableHelpers/createTableBorders.js';
 import { findParentNode } from '@helpers/findParentNode.js';
 import { TextSelection } from 'prosemirror-state';
 import { isCellSelection } from './tableHelpers/isCellSelection.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Node as PmNode, DOMOutputSpec, NodeType } from 'prosemirror-model';
+import type { CommandProps } from '@core/types/ChainedCommands.js';
+import type { TableRect, TableRole } from 'prosemirror-tables';
 import {
   addColumnBefore as originalAddColumnBefore,
   addColumnAfter as originalAddColumnAfter,
@@ -222,6 +224,30 @@ import {
  * @property {boolean} [withHeaderRow=false] - Create first row as header row
  */
 
+interface AppendRowsWithContentOptions {
+  tablePos?: number;
+  tableNode?: PmNode;
+  valueRows?: string[][];
+  copyRowStyle?: boolean;
+}
+
+interface InsertTableOptions {
+  rows?: number;
+  cols?: number;
+  withHeaderRow?: boolean;
+}
+
+interface SetCellSelectionOptions {
+  anchorCell: number;
+  headCell: number;
+}
+
+interface CurrentCellInfo {
+  rect: TableRect;
+  cell: PmNode;
+  attrs: Record<string, unknown>;
+}
+
 /**
  * Table indentation configuration
  * @typedef {Object} TableIndent
@@ -324,8 +350,8 @@ export const Table = Node.create({
       sdBlockId: {
         default: null,
         keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute('data-sd-block-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: Element) => elem.getAttribute('data-sd-block-id'),
+        renderDOM: (attrs: { sdBlockId?: string | null }) => {
           return attrs.sdBlockId ? { 'data-sd-block-id': attrs.sdBlockId } : {};
         },
       },
@@ -335,9 +361,8 @@ export const Table = Node.create({
        * @param {TableIndent} [tableIndent] - Table indentation configuration
        */
       tableIndent: {
-        renderDOM: ({ tableIndent }) => {
+        renderDOM: ({ tableIndent }: { tableIndent?: { width?: number } | null }) => {
           if (!tableIndent) return {};
-          // @ts-expect-error - tableIndent is known to be an object at runtime
           const { width } = tableIndent;
           let style = '';
           if (width) style += `margin-left: ${width}px`;
@@ -353,11 +378,13 @@ export const Table = Node.create({
        */
       borders: {
         default: {},
-        renderDOM({ borders }) {
+        renderDOM({ borders }: { borders?: Record<string, { size?: number; color?: string | null }> }) {
           if (!borders) return {};
 
-          const style = Object.entries(borders).reduce((acc, [key, { size, color }]) => {
-            return `${acc}border-${key}: ${Math.ceil(size)}px solid ${color || 'black'};`;
+          const style = Object.entries(borders).reduce((acc, [key, borderSpec]) => {
+            const size = borderSpec?.size ?? 0;
+            const color = borderSpec?.color ?? 'black';
+            return `${acc}border-${key}: ${Math.ceil(size)}px solid ${color};`;
           }, '');
 
           return {
@@ -372,7 +399,7 @@ export const Table = Node.create({
        */
       borderCollapse: {
         default: null,
-        renderDOM({ borderCollapse }) {
+        renderDOM({ borderCollapse }: { borderCollapse?: string | null }) {
           return {
             style: `border-collapse: ${borderCollapse || 'collapse'}`,
           };
@@ -385,7 +412,7 @@ export const Table = Node.create({
        */
       justification: {
         default: null,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: { justification?: string | null }) => {
           if (!attrs.justification) return {};
 
           if (attrs.justification === 'center') {
@@ -467,17 +494,25 @@ export const Table = Node.create({
     return [{ tag: 'table' }];
   },
 
-  renderDOM({ node, htmlAttributes }) {
-    const { colgroup, tableWidth, tableMinWidth } = createColGroup(node, this.options.cellMinWidth);
-
-    const attrs = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-      style: tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`,
-    });
+  renderDOM({ node, htmlAttributes }: { node: PmNode; htmlAttributes: Record<string, unknown> }): DOMOutputSpec {
+    const { colgroup, tableWidth, tableMinWidth } = createColGroup(
+      node,
+      this.options.cellMinWidth,
+      undefined,
+      undefined,
+    );
+
+    const attrs = Attribute.mergeAttributes(
+      this.options.htmlAttributes,
+      htmlAttributes as Record<string, AttributeValue>,
+      {
+        style: tableWidth ? `width: ${tableWidth}` : `min-width: ${tableMinWidth}`,
+      },
+    );
 
     return ['table', attrs, colgroup, ['tbody', 0]];
   },
 
-  // @ts-expect-error - Command signatures will be fixed in TS migration
   addCommands() {
     return {
       /**
@@ -488,14 +523,14 @@ export const Table = Node.create({
        * editor.commands.appendRowsWithContent({ tablePos, valueRows: [['A','B'], ['C','D']], copyRowStyle: true })
        */
       appendRowsWithContent:
-        ({ tablePos, tableNode, valueRows = [], copyRowStyle = false }) =>
-        ({ editor, chain }) => {
+        ({ tablePos, tableNode, valueRows = [], copyRowStyle = false }: AppendRowsWithContentOptions) =>
+        ({ editor, chain }: CommandProps): boolean => {
           if ((typeof tablePos !== 'number' && !tableNode) || !Array.isArray(valueRows) || !valueRows.length) {
             return false;
           }
 
           return chain()
-            .command(({ tr, dispatch }) => {
+            .command(({ tr, dispatch }: CommandProps) => {
               const workingTable = resolveTable(tr, tablePos, tableNode);
               if (!workingTable) return false;
 
@@ -515,19 +550,26 @@ export const Table = Node.create({
                 .filter(Boolean);
               if (!newRows.length) return false;
 
-              let resolvedTablePos = tablePos;
+              let resolvedTablePos: number | undefined = tablePos;
               if (typeof resolvedTablePos !== 'number' && workingTable) {
                 // Try to find the position of the table node in the document
                 const tables = editor.getNodesOfType('table');
-                const match = workingTable ? tables.find((t) => t.node.eq(workingTable)) : tables[0];
-                resolvedTablePos = match?.pos ?? null;
+                const match = workingTable
+                  ? tables.find((t: { node: PmNode; pos: number }) => t.node.eq(workingTable))
+                  : tables[0];
+                resolvedTablePos = match?.pos;
               }
               if (typeof resolvedTablePos !== 'number') {
                 return false;
               }
 
               if (dispatch) {
-                insertRowsAtTableEnd({ tr, tablePos, tableNode: workingTable, rows: newRows });
+                insertRowsAtTableEnd({
+                  tr,
+                  tablePos: resolvedTablePos,
+                  tableNode: workingTable,
+                  rows: newRows as PmNode[],
+                });
               }
               return true;
             })
@@ -542,8 +584,8 @@ export const Table = Node.create({
        * editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
        */
       insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
-        ({ tr, dispatch, editor }) => {
+        ({ rows = 3, cols = 3, withHeaderRow = false }: InsertTableOptions = {}) =>
+        ({ tr, dispatch, editor }: CommandProps): boolean => {
           const node = createTable(editor.schema, rows, cols, withHeaderRow);
 
           if (dispatch) {
@@ -568,7 +610,7 @@ export const Table = Node.create({
        */
       deleteTable:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return deleteTable(state, dispatch);
         },
 
@@ -581,30 +623,30 @@ export const Table = Node.create({
        */
       addColumnBefore:
         () =>
-        ({ state, dispatch, chain }) => {
+        ({ state, dispatch, chain }: CommandProps) => {
           if (!originalAddColumnBefore(state)) return false;
 
-          let { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
+          const { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
 
           return chain()
             .command(() => originalAddColumnBefore(state, dispatch))
-            .command(({ tr }) => {
-              let table = tr.doc.nodeAt(rect.tableStart - 1);
+            .command(({ tr }: CommandProps) => {
+              const table = tr.doc.nodeAt(rect.tableStart - 1);
               if (!table) return false;
-              let updatedMap = TableMap.get(table);
-              let newColumnIndex = rect.left;
+              const updatedMap = TableMap.get(table);
+              const newColumnIndex = rect.left;
 
               if (newColumnIndex < 0 || newColumnIndex >= updatedMap.width) {
                 return false;
               }
 
               for (let row = 0; row < updatedMap.height; row++) {
-                let cellIndex = row * updatedMap.width + newColumnIndex;
-                let cellPos = updatedMap.map[cellIndex];
-                let cellAbsolutePos = rect.tableStart + cellPos;
-                let cell = tr.doc.nodeAt(cellAbsolutePos);
+                const cellIndex = row * updatedMap.width + newColumnIndex;
+                const cellPos = updatedMap.map[cellIndex];
+                const cellAbsolutePos = rect.tableStart + cellPos;
+                const cell = tr.doc.nodeAt(cellAbsolutePos);
                 if (cell) {
-                  let attrs = {
+                  const attrs = {
                     ...currentCellAttrs,
                     colspan: cell.attrs.colspan,
                     rowspan: cell.attrs.rowspan,
@@ -629,30 +671,30 @@ export const Table = Node.create({
        */
       addColumnAfter:
         () =>
-        ({ state, dispatch, chain }) => {
+        ({ state, dispatch, chain }: CommandProps) => {
           if (!originalAddColumnAfter(state)) return false;
 
-          let { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
+          const { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
 
           return chain()
             .command(() => originalAddColumnAfter(state, dispatch))
-            .command(({ tr }) => {
-              let table = tr.doc.nodeAt(rect.tableStart - 1);
+            .command(({ tr }: CommandProps) => {
+              const table = tr.doc.nodeAt(rect.tableStart - 1);
               if (!table) return false;
-              let updatedMap = TableMap.get(table);
-              let newColumnIndex = rect.left + 1;
+              const updatedMap = TableMap.get(table);
+              const newColumnIndex = rect.left + 1;
 
               if (newColumnIndex < 0 || newColumnIndex >= updatedMap.width) {
                 return false;
               }
 
               for (let row = 0; row < updatedMap.height; row++) {
-                let cellIndex = row * updatedMap.width + newColumnIndex;
-                let cellPos = updatedMap.map[cellIndex];
-                let cellAbsolutePos = rect.tableStart + cellPos;
-                let cell = tr.doc.nodeAt(cellAbsolutePos);
+                const cellIndex = row * updatedMap.width + newColumnIndex;
+                const cellPos = updatedMap.map[cellIndex];
+                const cellAbsolutePos = rect.tableStart + cellPos;
+                const cell = tr.doc.nodeAt(cellAbsolutePos);
                 if (cell) {
-                  let attrs = {
+                  const attrs = {
                     ...currentCellAttrs,
                     colspan: cell.attrs.colspan,
                     rowspan: cell.attrs.rowspan,
@@ -676,7 +718,7 @@ export const Table = Node.create({
        */
       deleteColumn:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return deleteColumn(state, dispatch);
         },
 
@@ -690,30 +732,30 @@ export const Table = Node.create({
        */
       addRowBefore:
         () =>
-        ({ state, dispatch, chain }) => {
+        ({ state, dispatch, chain }: CommandProps) => {
           if (!originalAddRowBefore(state)) return false;
 
-          let { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
+          const { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
 
           return chain()
             .command(() => originalAddRowBefore(state, dispatch))
-            .command(({ tr }) => {
-              let table = tr.doc.nodeAt(rect.tableStart - 1);
+            .command(({ tr }: CommandProps) => {
+              const table = tr.doc.nodeAt(rect.tableStart - 1);
               if (!table) return false;
-              let updatedMap = TableMap.get(table);
-              let newRowIndex = rect.top;
+              const updatedMap = TableMap.get(table);
+              const newRowIndex = rect.top;
 
               if (newRowIndex < 0 || newRowIndex >= updatedMap.height) {
                 return false;
               }
 
               for (let col = 0; col < updatedMap.width; col++) {
-                let cellIndex = newRowIndex * updatedMap.width + col;
-                let cellPos = updatedMap.map[cellIndex];
-                let cellAbsolutePos = rect.tableStart + cellPos;
-                let cell = tr.doc.nodeAt(cellAbsolutePos);
+                const cellIndex = newRowIndex * updatedMap.width + col;
+                const cellPos = updatedMap.map[cellIndex];
+                const cellAbsolutePos = rect.tableStart + cellPos;
+                const cell = tr.doc.nodeAt(cellAbsolutePos);
                 if (cell) {
-                  let attrs = {
+                  const attrs = {
                     ...currentCellAttrs,
                     colspan: cell.attrs.colspan,
                     rowspan: cell.attrs.rowspan,
@@ -738,28 +780,28 @@ export const Table = Node.create({
        */
       addRowAfter:
         () =>
-        ({ state, dispatch, chain }) => {
+        ({ state, dispatch, chain }: CommandProps) => {
           if (!originalAddRowAfter(state)) return false;
 
-          let { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
+          const { rect, attrs: currentCellAttrs } = getCurrentCellAttrs(state);
 
           return chain()
             .command(() => originalAddRowAfter(state, dispatch))
-            .command(({ tr }) => {
-              let table = tr.doc.nodeAt(rect.tableStart - 1);
+            .command(({ tr }: CommandProps) => {
+              const table = tr.doc.nodeAt(rect.tableStart - 1);
               if (!table) return false;
-              let updatedMap = TableMap.get(table);
-              let newRowIndex = rect.top + 1;
+              const updatedMap = TableMap.get(table);
+              const newRowIndex = rect.top + 1;
 
               if (newRowIndex >= updatedMap.height) return false;
 
               for (let col = 0; col < updatedMap.width; col++) {
-                let cellIndex = newRowIndex * updatedMap.width + col;
-                let cellPos = updatedMap.map[cellIndex];
-                let cellAbsolutePos = rect.tableStart + cellPos;
-                let cell = tr.doc.nodeAt(cellAbsolutePos);
+                const cellIndex = newRowIndex * updatedMap.width + col;
+                const cellPos = updatedMap.map[cellIndex];
+                const cellAbsolutePos = rect.tableStart + cellPos;
+                const cell = tr.doc.nodeAt(cellAbsolutePos);
                 if (cell) {
-                  let attrs = {
+                  const attrs = {
                     ...currentCellAttrs,
                     colspan: cell.attrs.colspan,
                     rowspan: cell.attrs.rowspan,
@@ -783,7 +825,7 @@ export const Table = Node.create({
        */
       deleteRow:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return deleteRow(state, dispatch);
         },
 
@@ -797,7 +839,7 @@ export const Table = Node.create({
        */
       mergeCells:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return originalMergeCells(state, dispatch);
         },
 
@@ -810,7 +852,7 @@ export const Table = Node.create({
        */
       splitCell:
         () =>
-        ({ state, dispatch, commands }) => {
+        ({ state, dispatch, commands }: CommandProps) => {
           if (originalSplitCell(state, dispatch)) {
             return true;
           }
@@ -833,7 +875,7 @@ export const Table = Node.create({
        */
       splitSingleCell:
         () =>
-        ({ state, dispatch, tr }) => {
+        ({ state, dispatch, tr }: CommandProps) => {
           // For reference.
           // https://github.com/ProseMirror/prosemirror-tables/blob/a99f70855f2b3e2433bc77451fedd884305fda5b/src/commands.ts#L497
           const sel = state.selection;
@@ -857,11 +899,11 @@ export const Table = Node.create({
           //
 
           if (dispatch) {
-            let rect = selectedRect(state);
-            let currentRow = rect.top;
-            let currentCol = rect.left;
-            let baseAttrs = { ...cellNode.attrs };
-            let currentColWidth = baseAttrs.colwidth;
+            const rect = selectedRect(state);
+            const currentRow = rect.top;
+            const currentCol = rect.left;
+            const baseAttrs = { ...cellNode.attrs };
+            const currentColWidth = baseAttrs.colwidth;
             let newCellWidth = null;
 
             // Get new width for the current and new cells.
@@ -877,31 +919,34 @@ export const Table = Node.create({
             // Insert new cell after the current one.
             const newCellAttrs = { ...baseAttrs, colwidth: newCellWidth ? [newCellWidth] : null };
             const newCell = getCellType({ node: cellNode, state }).createAndFill(newCellAttrs);
+            if (!newCell) {
+              return false;
+            }
             tr.insert(tr.mapping.map(cellPos + cellNode.nodeSize, 1), newCell);
 
             // Update colspan and colwidth for cells in other rows.
             for (let row = 0; row < rect.map.height; row++) {
               if (row === currentRow) continue;
 
-              let rowCells = new Set();
+              const rowCells = new Set<number>();
               for (let col = 0; col < rect.map.width; col++) {
-                let cellIndex = rect.map.map[row * rect.map.width + col];
+                const cellIndex = rect.map.map[row * rect.map.width + col];
                 if (cellIndex != null) rowCells.add(cellIndex);
               }
 
               [...rowCells].forEach((cellIndex) => {
-                let cellRect = rect.map.findCell(cellIndex);
+                const cellRect = rect.map.findCell(cellIndex);
 
                 // If cell covers the column where we added new cell.
                 if (cellRect.left <= currentCol && cellRect.right > currentCol) {
-                  let cellPos = tr.mapping.map(rect.tableStart + cellIndex, 1);
-                  let cell = tr.doc.nodeAt(cellPos);
+                  const cellPos = tr.mapping.map(rect.tableStart + cellIndex, 1);
+                  const cell = tr.doc.nodeAt(cellPos);
 
                   if (cell) {
-                    let newColspan = (cell.attrs.colspan || 1) + 1;
+                    const newColspan = (cell.attrs.colspan || 1) + 1;
                     let updatedColwidth = cell.attrs.colwidth;
                     if (updatedColwidth && newCellWidth) {
-                      let originalColIndex = currentCol - cellRect.left;
+                      const originalColIndex = currentCol - cellRect.left;
                       updatedColwidth = [
                         ...updatedColwidth.slice(0, originalColIndex),
                         newCellWidth, // current cell width
@@ -909,7 +954,7 @@ export const Table = Node.create({
                         ...updatedColwidth.slice(originalColIndex + 1),
                       ];
                     }
-                    let cellAttrs = { ...cell.attrs, colspan: newColspan, colwidth: updatedColwidth };
+                    const cellAttrs = { ...cell.attrs, colspan: newColspan, colwidth: updatedColwidth };
                     tr.setNodeMarkup(cellPos, null, cellAttrs);
                   }
                 }
@@ -930,7 +975,7 @@ export const Table = Node.create({
        */
       mergeOrSplit:
         () =>
-        ({ state, dispatch, commands }) => {
+        ({ state, dispatch, commands }: CommandProps) => {
           if (originalMergeCells(state, dispatch)) {
             return true;
           }
@@ -947,7 +992,7 @@ export const Table = Node.create({
        */
       toggleHeaderColumn:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return toggleHeader('column')(state, dispatch);
         },
 
@@ -960,7 +1005,7 @@ export const Table = Node.create({
        */
       toggleHeaderRow:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return toggleHeader('row')(state, dispatch);
         },
 
@@ -973,7 +1018,7 @@ export const Table = Node.create({
        */
       toggleHeaderCell:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return toggleHeaderCell(state, dispatch);
         },
 
@@ -988,8 +1033,8 @@ export const Table = Node.create({
        * setCellAttr('verticalAlign', 'middle')
        */
       setCellAttr:
-        (name, value) =>
-        ({ state, dispatch }) => {
+        (name: string, value: unknown) =>
+        ({ state, dispatch }: CommandProps) => {
           return setCellAttr(name, value)(state, dispatch);
         },
 
@@ -1002,7 +1047,7 @@ export const Table = Node.create({
        */
       goToNextCell:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return goToNextCell(1)(state, dispatch);
         },
 
@@ -1015,7 +1060,7 @@ export const Table = Node.create({
        */
       goToPreviousCell:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           return goToNextCell(-1)(state, dispatch);
         },
 
@@ -1029,7 +1074,7 @@ export const Table = Node.create({
        */
       fixTables:
         () =>
-        ({ state, dispatch }) => {
+        ({ state, dispatch }: CommandProps) => {
           if (dispatch) {
             fixTables(state);
           }
@@ -1046,8 +1091,8 @@ export const Table = Node.create({
        * setCellSelection({ anchorCell: 10, headCell: 15 })
        */
       setCellSelection:
-        (pos) =>
-        ({ tr, dispatch }) => {
+        (pos: SetCellSelectionOptions) =>
+        ({ tr, dispatch }: CommandProps): boolean => {
           if (dispatch) {
             tr.setSelection(CellSelection.create(tr.doc, pos.anchorCell, pos.headCell));
           }
@@ -1064,15 +1109,15 @@ export const Table = Node.create({
        * editor.commands.setCellBackground('ff0000')
        */
       setCellBackground:
-        (value) =>
-        ({ editor, commands, dispatch }) => {
+        (value: string) =>
+        ({ editor, commands, dispatch }: CommandProps): boolean => {
           const { selection } = editor.state;
 
           if (!isCellSelection(selection)) {
             return false;
           }
 
-          const color = value?.startsWith('#') ? value.slice(1) : value;
+          const color = typeof value === 'string' && value.startsWith('#') ? value.slice(1) : value;
 
           if (dispatch) {
             return commands.setCellAttr('background', { color });
@@ -1091,7 +1136,7 @@ export const Table = Node.create({
        */
       deleteCellAndTableBorders:
         () =>
-        ({ state, tr }) => {
+        ({ state, tr }: CommandProps) => {
           if (!isInTable(state)) {
             return false;
           }
@@ -1106,7 +1151,7 @@ export const Table = Node.create({
           const to = table.pos + table.node.nodeSize;
 
           // remove from cells
-          state.doc.nodesBetween(from, to, (node, pos) => {
+          state.doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
             if (['tableCell', 'tableHeader'].includes(node.type.name)) {
               tr.setNodeMarkup(pos, undefined, {
                 ...node.attrs,
@@ -1130,30 +1175,40 @@ export const Table = Node.create({
 
           return true;
         },
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 
   addShortcuts() {
+    const editor = this.editor;
+    if (!editor) {
+      return {};
+    }
+
     return {
       Tab: () => {
-        if (this.editor.commands.goToNextCell()) {
+        if (editor.commands.goToNextCell()) {
           return true;
         }
-        if (!this.editor.can().addRowAfter()) {
+        if (!editor.can().addRowAfter()) {
           return false;
         }
-        return this.editor.chain().addRowAfter().goToNextCell().run();
+        return editor.chain().addRowAfter().goToNextCell().run();
       },
-      'Shift-Tab': () => this.editor.commands.goToPreviousCell(),
+      'Shift-Tab': () => editor.commands.goToPreviousCell(),
       Backspace: deleteTableWhenSelected,
       'Mod-Backspace': deleteTableWhenSelected,
       Delete: deleteTableWhenSelected,
       'Mod-Delete': deleteTableWhenSelected,
-    };
+    } as Record<string, (...args: unknown[]) => unknown>;
   },
 
   addPmPlugins() {
-    const resizable = this.options.resizable && this.editor.isEditable;
+    const editor = this.editor;
+    if (!editor) {
+      return [];
+    }
+
+    const resizable = this.options.resizable && editor.isEditable;
 
     return [
       ...(resizable
@@ -1162,29 +1217,29 @@ export const Table = Node.create({
               // Disable PM's visual handles (custom overlay handles resizing)
               // Set to 0 to prevent PM from rendering its own resize handles
               // while keeping transaction helpers and constraint logic
-              // @ts-expect-error - Options types will be fixed in TS migration
               handleWidth: 0,
-              // @ts-expect-error - Options types will be fixed in TS migration
               cellMinWidth: this.options.cellMinWidth,
-              // @ts-expect-error - Options types will be fixed in TS migration
               defaultCellMinWidth: this.options.cellMinWidth,
-              // @ts-expect-error - Options types will be fixed in TS migration
               lastColumnResizable: this.options.lastColumnResizable,
               View: createTableView({
-                editor: this.editor,
+                editor,
               }),
             }),
           ]
         : []),
 
       tableEditing({
-        // @ts-expect-error - Options types will be fixed in TS migration
         allowTableNodeSelection: this.options.allowTableNodeSelection,
       }),
     ];
   },
 
-  extendNodeSchema(extension) {
+  extendNodeSchema(...args: unknown[]) {
+    const [extension] = args as [{ name: string; options: unknown; storage: unknown }?];
+    if (!extension) {
+      return {};
+    }
+
     return {
       tableRole: callOrGet(
         getExtensionConfigField(extension, 'tableRole', {
@@ -1205,9 +1260,11 @@ export const Table = Node.create({
  * @param {Object} params.state - Editor state
  * @returns {Object} Cell node type
  */
-function getCellType({ node, state }) {
-  const nodeTypes = tableNodeTypes(state.schema);
-  return nodeTypes[node.type.spec.tableRole];
+function getCellType({ node, state }: { node: PmNode; state: EditorState }): NodeType {
+  const nodeTypes = tableNodeTypes(state.schema) as Record<TableRole | string, NodeType>;
+  const role = node.type.spec.tableRole as TableRole | undefined;
+
+  return (role && nodeTypes[role]) || node.type;
 }
 
 /**
@@ -1217,10 +1274,10 @@ function getCellType({ node, state }) {
  * @returns {Object} Filtered attributes without colspan, rowspan, colwidth
  * @note Used when creating new cells to preserve styling but not structure
  */
-function copyCellAttrs(node) {
+function copyCellAttrs(node: PmNode): Record<string, unknown> {
   // Exclude colspan, rowspan and colwidth attrs.
   const { colspan: _colspan, rowspan: _rowspan, colwidth: _colwidth, ...attrs } = node.attrs;
-  return attrs;
+  return attrs as Record<string, unknown>;
 }
 
 /**
@@ -1229,11 +1286,16 @@ function copyCellAttrs(node) {
  * @param {Object} state - Editor state
  * @returns {CurrentCellInfo} Current cell information
  */
-function getCurrentCellAttrs(state) {
-  let rect = selectedRect(state);
-  let index = rect.top * rect.map.width + rect.left;
-  let pos = rect.map.map[index];
-  let cell = rect.table.nodeAt(pos);
-  let attrs = copyCellAttrs(cell);
+function getCurrentCellAttrs(state: EditorState): CurrentCellInfo {
+  const rect = selectedRect(state);
+  const index = rect.top * rect.map.width + rect.left;
+  const pos = rect.map.map[index];
+  const cell = rect.table.nodeAt(pos);
+
+  if (!cell) {
+    throw new Error('Failed to resolve current table cell');
+  }
+
+  const attrs = copyCellAttrs(cell);
   return { rect, cell, attrs };
 }
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/appendRows.js b/packages/super-editor/src/extensions/table/tableHelpers/appendRows.ts
similarity index 74%
rename from packages/super-editor/src/extensions/table/tableHelpers/appendRows.js
rename to packages/super-editor/src/extensions/table/tableHelpers/appendRows.ts
index 117746d0e..42f1d787d 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/appendRows.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/appendRows.ts
@@ -1,6 +1,27 @@
-// @ts-check
-import { Fragment } from 'prosemirror-model';
+import { Fragment, type Node as PmNode, type Schema, type NodeType, type Mark } from 'prosemirror-model';
 import { TableMap } from 'prosemirror-tables';
+import type { Transaction } from 'prosemirror-state';
+
+type TableRowNode = PmNode & { attrs: Record<string, unknown>; content: { content: PmNode[] } };
+type TableNode = PmNode & { attrs: Record<string, unknown> };
+type RowTemplateFormatting = {
+  blockType: NodeType;
+  blockAttrs: Record<string, unknown> | null;
+  textMarks: Mark[];
+};
+type BuildRowFromTemplateRowParams = {
+  schema: Schema;
+  tableNode: TableNode;
+  templateRow: TableRowNode;
+  values: unknown[];
+  copyRowStyle?: boolean;
+};
+type InsertRowsAtTableEndParams = {
+  tr: Transaction;
+  tablePos: number;
+  tableNode: TableNode;
+  rows: PmNode[];
+};
 
 /**
  * Row template formatting
@@ -38,7 +59,7 @@ import { TableMap } from 'prosemirror-tables';
  * @param {import('prosemirror-model').Node} [tableNode] - Explicit table node reference
  * @returns {import('prosemirror-model').Node|null} Table node to append rows to, or null if not found
  */
-export function resolveTable(tr, tablePos, tableNode) {
+export function resolveTable(tr: Transaction, tablePos?: number, tableNode?: PmNode | null) {
   if (tableNode && tableNode.type && tableNode.type.name === 'table') {
     return tableNode;
   }
@@ -61,11 +82,11 @@ export function resolveTable(tr, tablePos, tableNode) {
  * @param {import('prosemirror-model').Schema} schema - Editor schema
  * @returns {import('prosemirror-model').Node|null} Template row node or null if none exist
  */
-export function pickTemplateRowForAppend(tableNode, schema) {
+export function pickTemplateRowForAppend(tableNode: TableNode, schema: Schema): TableRowNode | null {
   const RowType = schema.nodes.tableRow;
-  const rows = [];
+  const rows: TableRowNode[] = [];
   tableNode.descendants((child) => {
-    if (child.type === RowType) rows.push(child);
+    if (child.type === RowType) rows.push(child as TableRowNode);
   });
   if (!rows.length) return null;
   for (let i = rows.length - 1; i >= 0; i--) {
@@ -84,11 +105,11 @@ export function pickTemplateRowForAppend(tableNode, schema) {
  * @param {import('prosemirror-model').Schema} schema - Editor schema
  * @returns {RowTemplateFormatting} Formatting info
  */
-export function extractRowTemplateFormatting(cellNode, schema) {
+export function extractRowTemplateFormatting(cellNode: PmNode, schema: Schema): RowTemplateFormatting {
   const ParagraphType = schema.nodes.paragraph;
-  let blockType = ParagraphType;
-  let blockAttrs = null;
-  let textMarks = [];
+  let blockType: NodeType = ParagraphType;
+  let blockAttrs: Record<string, unknown> | null = null;
+  let textMarks: Mark[] = [];
   const blocks = cellNode?.content?.content || [];
   for (const block of blocks) {
     const isParagraphish = block.type === ParagraphType || block.type.name === 'heading';
@@ -96,13 +117,13 @@ export function extractRowTemplateFormatting(cellNode, schema) {
       blockType = block.type || ParagraphType;
       blockAttrs = block.attrs || null;
     }
-    /** @type {import('prosemirror-model').Node | null} */
-    let foundText = null;
+    let foundText: PmNode | null = null;
     block.descendants?.((n) => {
-      if (!foundText && n.isText) foundText = n;
+      if (!foundText && n.isText) foundText = n as PmNode;
     });
     if (foundText) {
-      textMarks = foundText.marks ? Array.from(foundText.marks) : [];
+      const marks = (foundText as PmNode & { marks?: Mark[] }).marks;
+      textMarks = marks ? Array.from(marks) : [];
       break;
     }
   }
@@ -119,7 +140,12 @@ export function extractRowTemplateFormatting(cellNode, schema) {
  * @param {boolean} [copyRowStyle=false] - Whether to copy marks from the template row
  * @returns {import('prosemirror-model').Node} Block node ready to insert into the cell
  */
-export function buildFormattedCellBlock(schema, value, { blockType, blockAttrs, textMarks }, copyRowStyle = false) {
+export function buildFormattedCellBlock(
+  schema: Schema,
+  value: unknown,
+  { blockType, blockAttrs, textMarks }: RowTemplateFormatting,
+  copyRowStyle = false,
+) {
   const text = typeof value === 'string' ? value : value == null ? '' : String(value);
   const marks = copyRowStyle ? textMarks || [] : [];
   const textNode = schema.text(text, marks);
@@ -134,7 +160,13 @@ export function buildFormattedCellBlock(schema, value, { blockType, blockAttrs,
  * @param {BuildRowFromTemplateRowParams} params - Build parameters
  * @returns {import('prosemirror-model').Node|null} Newly created table row node
  */
-export function buildRowFromTemplateRow({ schema, tableNode, templateRow, values, copyRowStyle = false }) {
+export function buildRowFromTemplateRow({
+  schema,
+  tableNode,
+  templateRow,
+  values,
+  copyRowStyle = false,
+}: BuildRowFromTemplateRowParams) {
   const RowType = schema.nodes.tableRow;
   const CellType = schema.nodes.tableCell;
   const HeaderType = schema.nodes.tableHeader;
@@ -142,7 +174,7 @@ export function buildRowFromTemplateRow({ schema, tableNode, templateRow, values
   const totalColumns = map.width;
   const byColumns = Array.isArray(values) && values.length === totalColumns;
 
-  const newCells = [];
+  const newCells: PmNode[] = [];
   let columnCursor = 0;
   templateRow.content.content.forEach((cellNode, cellIndex) => {
     const isHeaderCell = cellNode.type === HeaderType;
@@ -153,10 +185,11 @@ export function buildRowFromTemplateRow({ schema, tableNode, templateRow, values
     let cellValue = '';
     if (byColumns) {
       const span = Math.max(1, attrs.colspan || 1);
-      cellValue = values[columnCursor] ?? '';
+      cellValue = values[columnCursor] == null ? '' : String(values[columnCursor]);
       columnCursor += span;
     } else {
-      cellValue = Array.isArray(values) ? (values[cellIndex] ?? '') : '';
+      const value = Array.isArray(values) ? values[cellIndex] : '';
+      cellValue = value == null ? '' : String(value);
     }
 
     const content = buildFormattedCellBlock(schema, cellValue, formatting, copyRowStyle);
@@ -172,12 +205,11 @@ export function buildRowFromTemplateRow({ schema, tableNode, templateRow, values
  * @private
  * @param {InsertRowsAtTableEndParams} params - Insert parameters
  */
-export function insertRowsAtTableEnd({ tr, tablePos, tableNode, rows }) {
+export function insertRowsAtTableEnd({ tr, tablePos, tableNode, rows }: InsertRowsAtTableEndParams) {
   if (!rows || !rows.length) return;
   const RowTypeName = 'tableRow';
   let lastRowRelPos = 0;
-  /** @type {import('prosemirror-model').Node | null} */
-  let lastRowNode = null;
+  let lastRowNode: PmNode | null = null;
   tableNode.descendants((child, relPos) => {
     if (child.type.name === RowTypeName) {
       lastRowRelPos = relPos;
@@ -185,7 +217,7 @@ export function insertRowsAtTableEnd({ tr, tablePos, tableNode, rows }) {
     }
   });
   if (!lastRowNode) return;
-  const lastRowAbsEnd = tablePos + 1 + lastRowRelPos + lastRowNode.nodeSize;
+  const lastRowAbsEnd = tablePos + 1 + lastRowRelPos + (lastRowNode as PmNode).nodeSize;
   const frag = Fragment.fromArray(rows);
   tr.insert(lastRowAbsEnd, frag);
 }
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/cellAround.js b/packages/super-editor/src/extensions/table/tableHelpers/cellAround.ts
similarity index 72%
rename from packages/super-editor/src/extensions/table/tableHelpers/cellAround.js
rename to packages/super-editor/src/extensions/table/tableHelpers/cellAround.ts
index f2e6ee362..598c20985 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/cellAround.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/cellAround.ts
@@ -1,6 +1,7 @@
-// @ts-check
 // https://github.com/ProseMirror/prosemirror-tables/blob/a99f70855f2b3e2433bc77451fedd884305fda5b/src/util.ts
-export function cellAround($pos) {
+import type { ResolvedPos } from 'prosemirror-model';
+
+export function cellAround($pos: ResolvedPos) {
   for (let d = $pos.depth - 1; d > 0; d--)
     if ($pos.node(d).type.spec.tableRole == 'row') return $pos.node(0).resolve($pos.before(d + 1));
   return null;
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.js b/packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.ts
similarity index 76%
rename from packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.js
rename to packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.ts
index a9df01431..b5098ace3 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/cellWrapping.ts
@@ -1,6 +1,7 @@
-// @ts-check
+import type { ResolvedPos } from 'prosemirror-model';
+
 // https://github.com/ProseMirror/prosemirror-tables/blob/a99f70855f2b3e2433bc77451fedd884305fda5b/src/util.ts
-export function cellWrapping($pos) {
+export function cellWrapping($pos: ResolvedPos) {
   for (let d = $pos.depth; d > 0; d--) {
     // Sometimes the cell can be in the same depth.
     const role = $pos.node(d).type.spec.tableRole;
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createCell.js b/packages/super-editor/src/extensions/table/tableHelpers/createCell.js
deleted file mode 100644
index 81a4dce9c..000000000
--- a/packages/super-editor/src/extensions/table/tableHelpers/createCell.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// @ts-check
-export const createCell = (cellType, cellContent = null) => {
-  if (cellContent) {
-    return cellType.createChecked(null, cellContent);
-  }
-  return cellType.createAndFill();
-};
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createCell.ts b/packages/super-editor/src/extensions/table/tableHelpers/createCell.ts
new file mode 100644
index 000000000..6261a4a66
--- /dev/null
+++ b/packages/super-editor/src/extensions/table/tableHelpers/createCell.ts
@@ -0,0 +1,8 @@
+import type { NodeType, Node as PmNode } from 'prosemirror-model';
+
+export const createCell = (cellType: NodeType, cellContent: PmNode | null = null) => {
+  if (cellContent) {
+    return cellType.createChecked(null, cellContent);
+  }
+  return cellType.createAndFill();
+};
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createColGroup.js b/packages/super-editor/src/extensions/table/tableHelpers/createColGroup.ts
similarity index 89%
rename from packages/super-editor/src/extensions/table/tableHelpers/createColGroup.js
rename to packages/super-editor/src/extensions/table/tableHelpers/createColGroup.ts
index a2b9dade3..afa996878 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/createColGroup.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/createColGroup.ts
@@ -1,11 +1,16 @@
-// @ts-check
 import { getColStyleDeclaration } from './getColStyleDeclaration.js';
 import { twipsToPixels } from '@core/super-converter/helpers.js';
+import type { Node as PmNode } from 'prosemirror-model';
 
 // Treat extremely small column widths as zero so placeholder columns collapse.
 const MIN_MEANINGFUL_WIDTH_PX = 1;
 
-export const createColGroup = (node, cellMinWidth, overrideCol, overrideValue) => {
+export const createColGroup = (
+  node: PmNode,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: number | null,
+) => {
   let totalWidth = 0;
   let fixedWidth = true;
 
@@ -20,7 +25,7 @@ export const createColGroup = (node, cellMinWidth, overrideCol, overrideValue) =
   if (!row) return {};
 
   const totalColumns = gridColumns?.length;
-  const resolveColumnWidth = (colIndex, colwidthValue) => {
+  const resolveColumnWidth = (colIndex: number, colwidthValue: number | null) => {
     if (overrideCol === colIndex) return overrideValue;
     if (colwidthValue != null) return colwidthValue;
     if (gridColumns && gridColumns[colIndex] != null) return gridColumns[colIndex];
@@ -55,7 +60,7 @@ export const createColGroup = (node, cellMinWidth, overrideCol, overrideValue) =
 
   if (totalColumns != null) {
     for (let col = colIndex; col < totalColumns; col++) {
-      const candidateWidth = resolveColumnWidth(col);
+      const candidateWidth = resolveColumnWidth(col, null);
       const numericWidth = Number(candidateWidth);
       let effectiveWidth = Number.isFinite(numericWidth) && numericWidth > 0 ? numericWidth : null;
       if (effectiveWidth != null && effectiveWidth < MIN_MEANINGFUL_WIDTH_PX) {
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createTable.js b/packages/super-editor/src/extensions/table/tableHelpers/createTable.ts
similarity index 87%
rename from packages/super-editor/src/extensions/table/tableHelpers/createTable.js
rename to packages/super-editor/src/extensions/table/tableHelpers/createTable.ts
index 749c9f38f..4da97c108 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/createTable.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/createTable.ts
@@ -1,7 +1,7 @@
-// @ts-check
 import { getNodeType } from '@core/helpers/getNodeType.js';
 import { createCell } from './createCell.js';
 import { createTableBorders } from './createTableBorders.js';
+import type { Schema, Node as PmNode } from 'prosemirror-model';
 
 /**
  * Create a new table with specified dimensions
@@ -18,7 +18,13 @@ import { createTableBorders } from './createTableBorders.js';
  * @example
  * const table = createTable(schema, 2, 4, false, paragraphNode)
  */
-export const createTable = (schema, rowsCount, colsCount, withHeaderRow, cellContent = null) => {
+export const createTable = (
+  schema: Schema,
+  rowsCount: number,
+  colsCount: number,
+  withHeaderRow: boolean,
+  cellContent: PmNode | null = null,
+) => {
   const types = {
     table: getNodeType('table', schema),
     tableRow: getNodeType('tableRow', schema),
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.js b/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.js
deleted file mode 100644
index b2d900556..000000000
--- a/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @ts-check
-
-/**
- * Create table border configuration object
- * @private
- * @category Helper
- * @param {import("../table.js").TableBorderSpec} [borderSpec] - Border options
- * @returns {import("../table.js").TableBorders} Complete borders object for all sides
- * @example
- * // Using default values
- * const borders = createTableBorders()
- *
- * // Using custom values
- * const borders = createTableBorders({ size: 1, color: '#cccccc' })
- * @note Creates uniform borders for all sides including inside borders
- */
-export const createTableBorders = (borderSpec = {}) => {
-  borderSpec = {
-    size: 0.66665,
-    color: '#000000',
-    ...borderSpec,
-  };
-
-  return {
-    top: borderSpec,
-    left: borderSpec,
-    bottom: borderSpec,
-    right: borderSpec,
-    insideH: borderSpec,
-    insideV: borderSpec,
-  };
-};
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.ts b/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.ts
new file mode 100644
index 000000000..89e081786
--- /dev/null
+++ b/packages/super-editor/src/extensions/table/tableHelpers/createTableBorders.ts
@@ -0,0 +1,56 @@
+/**
+ * Table border configuration
+ * @typedef {Object} TableBorder
+ * @property {number} [size=1] - Border width in pixels
+ * @property {string} [color='#000000'] - Border color (hex or CSS color)
+ * @property {string} [style='solid'] - Border style (solid, dashed, dotted)
+ */
+
+/**
+ * Table borders object
+ * @typedef {Object} TableBorders
+ * @property {TableBorder} [top] - Top border configuration
+ * @property {TableBorder} [right] - Right border configuration
+ * @property {TableBorder} [bottom] - Bottom border configuration
+ * @property {TableBorder} [left] - Left border configuration
+ * @property {TableBorder} [insideH] - Inside horizontal borders
+ * @property {TableBorder} [insideV] - Inside vertical borders
+ */
+
+/**
+ * Border creation options
+ * @typedef {Object} BorderOptions
+ * @property {number} [size=0.66665] - Border width in pixels
+ * @property {string} [color='#000000'] - Border color (hex)
+ */
+
+/**
+ * Create table border configuration object
+ * @private
+ * @category Helper
+ * @param {import("../table.js").TableBorderSpec} [borderSpec] - Border options
+ * @returns {import("../table.js").TableBorders} Complete borders object for all sides
+ * @example
+ * // Using default values
+ * const borders = createTableBorders()
+ *
+ * // Using custom values
+ * const borders = createTableBorders({ size: 1, color: '#cccccc' })
+ * @note Creates uniform borders for all sides including inside borders
+ */
+export const createTableBorders = (borderSpec = {}) => {
+  borderSpec = {
+    size: 0.66665,
+    color: '#000000',
+    ...borderSpec,
+  };
+
+  return {
+    top: borderSpec,
+    left: borderSpec,
+    bottom: borderSpec,
+    right: borderSpec,
+    insideH: borderSpec,
+    insideV: borderSpec,
+  };
+};
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.js b/packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.ts
similarity index 67%
rename from packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.js
rename to packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.ts
index 25e027956..a8ad58492 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/deleteTableWhenSelected.ts
@@ -1,18 +1,20 @@
-// @ts-check
 import { findParentNodeClosestToPos } from '@core/helpers/findParentNodeClosestToPos.js';
 import { isCellSelection } from './isCellSelection.js';
+import type { Editor } from '@core/Editor.js';
+import type { Command } from '@core/types/ChainedCommands.js';
+import type { Node as PmNode } from 'prosemirror-model';
 
-export const deleteTableWhenSelected = ({ editor }) => {
+export const deleteTableWhenSelected: Command = ({ editor }: { editor: Editor }) => {
   const { selection } = editor.state;
 
   if (!isCellSelection(selection)) return false;
 
   let cellCount = 0;
-  const table = findParentNodeClosestToPos(selection.ranges[0].$from, (node) => {
+  const table = findParentNodeClosestToPos(selection.ranges[0].$from, (node: PmNode) => {
     return node.type.name === 'table';
   });
 
-  table?.node.descendants((node) => {
+  table?.node.descendants((node: PmNode) => {
     if (node.type.name === 'table') return false;
     if (['tableCell', 'tableHeader'].includes(node.type.name)) {
       cellCount += 1;
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.js b/packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.ts
similarity index 82%
rename from packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.js
rename to packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.ts
index 77704214e..a801ffec5 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/getColStyleDeclaration.ts
@@ -1,5 +1,4 @@
-// @ts-check
-export const getColStyleDeclaration = (minWidth, width) => {
+export const getColStyleDeclaration = (minWidth: number, width: number | null) => {
   if (width != null) {
     const numericWidth = Number(width);
     if (Number.isFinite(numericWidth) && numericWidth >= 0) {
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/index.js b/packages/super-editor/src/extensions/table/tableHelpers/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table/tableHelpers/index.js
rename to packages/super-editor/src/extensions/table/tableHelpers/index.ts
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.js b/packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.ts
similarity index 52%
rename from packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.js
rename to packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.ts
index 9c51d9f08..924c589b8 100644
--- a/packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.js
+++ b/packages/super-editor/src/extensions/table/tableHelpers/isCellSelection.ts
@@ -1,15 +1,16 @@
-// @ts-check
 import { CellSelection } from 'prosemirror-tables';
+import type { Selection as PmSelection } from 'prosemirror-state';
 
 /**
  * Check if selection is a cell selection
  * @private
  * @category Helper
- * @param {*} value - Selection to check
+ * @param {Selection} value - Selection to check
  * @returns {boolean} True if cell selection
  * @example
  * if (isCellSelection(editor.state.selection)) {
  *   // Handle cell selection
  * }
  */
-export const isCellSelection = (value) => value instanceof CellSelection;
+export const isCellSelection = (value: PmSelection | null | undefined): value is CellSelection =>
+  value instanceof CellSelection;
diff --git a/packages/super-editor/src/extensions/table/tableHelpers/tableHelpers.test.js b/packages/super-editor/src/extensions/table/tableHelpers/tableHelpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/table/tableHelpers/tableHelpers.test.js
rename to packages/super-editor/src/extensions/table/tableHelpers/tableHelpers.test.ts
diff --git a/packages/super-editor/src/extensions/tests/cascade-toggle.test.js b/packages/super-editor/src/extensions/tests/cascade-toggle.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tests/cascade-toggle.test.js
rename to packages/super-editor/src/extensions/tests/cascade-toggle.test.ts
diff --git a/packages/super-editor/src/extensions/tests/headless.test.js b/packages/super-editor/src/extensions/tests/headless.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/tests/headless.test.js
rename to packages/super-editor/src/extensions/tests/headless.test.ts
diff --git a/packages/super-editor/src/extensions/text-align/index.js b/packages/super-editor/src/extensions/text-align/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/text-align/index.js
rename to packages/super-editor/src/extensions/text-align/index.ts
diff --git a/packages/super-editor/src/extensions/text-align/text-align.js b/packages/super-editor/src/extensions/text-align/text-align.js
deleted file mode 100644
index 8920f2bd8..000000000
--- a/packages/super-editor/src/extensions/text-align/text-align.js
+++ /dev/null
@@ -1,71 +0,0 @@
-// @ts-nocheck
-import { Extension } from '@core/index.js';
-
-/**
- * Configuration options for TextAlign
- * @typedef {Object} TextAlignOptions
- * @category Options
- * @property {string[]} [alignments=['left', 'center', 'right', 'justify']] - Available alignment options
- * @property {string} [defaultAlignment='left'] - Default text alignment
- */
-
-/**
- * @module TextAlign
- * @sidebarTitle Text Align
- * @snippetPath /snippets/extensions/text-align.mdx
- * @shortcut Mod-Shift-l | setTextAlign('left') | Align text left
- * @shortcut Mod-Shift-e | setTextAlign('center') | Align text center
- * @shortcut Mod-Shift-r | setTextAlign('right') | Align text right
- * @shortcut Mod-Shift-j | setTextAlign('justify') | Justify text
- */
-export const TextAlign = Extension.create({
-  name: 'textAlign',
-
-  addOptions() {
-    return {
-      alignments: ['left', 'center', 'right', 'justify'],
-    };
-  },
-
-  addCommands() {
-    return {
-      /**
-       * Set text alignment
-       * @category Command
-       * @param {string} alignment - Alignment value (left, center, right, justify)
-       * @example
-       * editor.commands.setTextAlign('center')
-       * editor.commands.setTextAlign('justify')
-       */
-      setTextAlign:
-        (alignment) =>
-        ({ commands }) => {
-          const containsAlignment = this.options.alignments.includes(alignment);
-          if (!containsAlignment) return false;
-
-          return commands.updateAttributes('paragraph', { 'paragraphProperties.justification': alignment });
-        },
-
-      /**
-       * Remove text alignment (reset to default)
-       * @category Command
-       * @example
-       * editor.commands.unsetTextAlign()
-       * @note Resets alignment to the default value
-       */
-      unsetTextAlign:
-        () =>
-        ({ commands }) =>
-          commands.resetAttributes('paragraph', 'paragraphProperties.justification'),
-    };
-  },
-
-  addShortcuts() {
-    return {
-      'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),
-      'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),
-      'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),
-      'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),
-    };
-  },
-});
diff --git a/packages/super-editor/src/extensions/text-align/text-align.ts b/packages/super-editor/src/extensions/text-align/text-align.ts
new file mode 100644
index 000000000..7c04f1b3c
--- /dev/null
+++ b/packages/super-editor/src/extensions/text-align/text-align.ts
@@ -0,0 +1,83 @@
+import { Extension } from '@core/index.js';
+import type { Command, CommandProps } from '@core/types/ChainedCommands.js';
+import type { Editor } from '@core/Editor.js';
+
+/**
+ * Configuration options for TextAlign
+ * @category Options
+ */
+export interface TextAlignOptions extends Record<string, unknown> {
+  /**
+   * Available alignment options
+   * @default ['left', 'center', 'right', 'justify']
+   */
+  alignments: string[];
+}
+
+/**
+ * @module TextAlign
+ * @sidebarTitle Text Align
+ * @snippetPath /snippets/extensions/text-align.mdx
+ * @shortcut Mod-Shift-l | setTextAlign('left') | Align text left
+ * @shortcut Mod-Shift-e | setTextAlign('center') | Align text center
+ * @shortcut Mod-Shift-r | setTextAlign('right') | Align text right
+ * @shortcut Mod-Shift-j | setTextAlign('justify') | Justify text
+ */
+export const TextAlign = Extension.create<TextAlignOptions>({
+  name: 'textAlign',
+
+  addOptions() {
+    return {
+      alignments: ['left', 'center', 'right', 'justify'],
+    };
+  },
+
+  addCommands() {
+    return {
+      /**
+       * Set text alignment
+       * @category Command
+       * @param {string} alignment - Alignment value (left, center, right, justify)
+       * @example
+       * editor.commands.setTextAlign('center')
+       * editor.commands.setTextAlign('justify')
+       */
+      setTextAlign:
+        (alignment: string): Command =>
+        ({ commands }: CommandProps) => {
+          const cmds = commands as unknown as {
+            updateAttributes?: (type: string, attrs: Record<string, unknown>) => boolean;
+          };
+          const alignments = (this.options as TextAlignOptions).alignments ?? [];
+          const containsAlignment = Array.isArray(alignments) && alignments.includes(alignment);
+          if (!containsAlignment) return false;
+
+          return Boolean(cmds.updateAttributes?.('paragraph', { 'paragraphProperties.justification': alignment }));
+        },
+
+      /**
+       * Remove text alignment (reset to default)
+       * @category Command
+       * @example
+       * editor.commands.unsetTextAlign()
+       * @note Resets alignment to the default value
+       */
+      unsetTextAlign:
+        (): Command =>
+        ({ commands }: CommandProps) => {
+          const cmds = commands as unknown as { resetAttributes?: (type: string, attr: string) => boolean };
+          return Boolean(cmds.resetAttributes?.('paragraph', 'paragraphProperties.justification'));
+        },
+    };
+  },
+
+  addShortcuts() {
+    const editor = (this as unknown as { editor?: Editor }).editor;
+    return {
+      'Mod-Shift-l': () => editor?.commands?.setTextAlign('left') ?? false,
+      'Mod-Shift-e': () => editor?.commands?.setTextAlign('center') ?? false,
+      'Mod-Shift-r': () => editor?.commands?.setTextAlign('right') ?? false,
+      'Mod-Shift-j': () => editor?.commands?.setTextAlign('justify') ?? false,
+    };
+  },
+});
diff --git a/packages/super-editor/src/extensions/text-style/index.js b/packages/super-editor/src/extensions/text-style/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/text-style/index.js
rename to packages/super-editor/src/extensions/text-style/index.ts
diff --git a/packages/super-editor/src/extensions/text-style/text-style.js b/packages/super-editor/src/extensions/text-style/text-style.ts
similarity index 67%
rename from packages/super-editor/src/extensions/text-style/text-style.js
rename to packages/super-editor/src/extensions/text-style/text-style.ts
index 07df73535..c7c9548b8 100644
--- a/packages/super-editor/src/extensions/text-style/text-style.js
+++ b/packages/super-editor/src/extensions/text-style/text-style.ts
@@ -1,27 +1,24 @@
-// @ts-nocheck
 import { Mark, Attribute } from '@core/index.js';
 import { annotationClass, annotationContentClass } from '../field-annotation/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { MarkType } from 'prosemirror-model';
+import type { Command, CommandProps } from '@core/types/ChainedCommands.js';
 
 /**
  * Configuration options for TextStyle
- * @typedef {Object} TextStyleOptions
  * @category Options
- * @property {Object} [htmlAttributes={}] - Custom HTML attributes to apply to text style spans
- */
-
-/**
- * Attributes for text style marks
- * @typedef {Object} TextStyleAttributes
- * @category Attributes
- * @property {string} [styleId] - Style identifier for referencing predefined styles
  */
+interface TextStyleOptions extends Record<string, unknown> {
+  /** Custom HTML attributes to apply to text style spans */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
 /**
  * @module TextStyle
  * @sidebarTitle Text Style
  * @snippetPath /snippets/extensions/text-style.mdx
  */
-export const TextStyle = Mark.create({
+export const TextStyle = Mark.create<TextStyleOptions>({
   name: 'textStyle',
 
   addOptions() {
@@ -34,7 +31,7 @@ export const TextStyle = Mark.create({
     return [
       {
         tag: 'span',
-        getAttrs: (el) => {
+        getAttrs: (el: HTMLElement) => {
           const hasStyles = el.hasAttribute('style');
           const isAnnotation = el.classList.contains(annotationClass) || el.classList.contains(annotationContentClass);
           if (!hasStyles || isAnnotation) return false;
@@ -42,7 +39,7 @@ export const TextStyle = Mark.create({
         },
       },
       {
-        getAttrs: (node) => {
+        getAttrs: (node: HTMLElement) => {
           const fontFamily = node.style.fontFamily?.replace(/['"]+/g, '');
           const fontSize = node.style.fontSize;
           const textTransform = node.style.textTransform;
@@ -59,8 +56,13 @@ export const TextStyle = Mark.create({
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({
+    htmlAttributes = {} as Record<string, AttributeValue>,
+  }: {
+    htmlAttributes: Record<string, AttributeValue>;
+  }) {
+    const base = (this.options as TextStyleOptions).htmlAttributes as Record<string, AttributeValue>;
+    return ['span', Attribute.mergeAttributes(base, htmlAttributes), 0];
   },
 
   addAttributes() {
@@ -84,12 +86,12 @@ export const TextStyle = Mark.create({
        * @note Automatically checks if any style attributes exist before removal
        */
       removeEmptyTextStyle:
-        () =>
-        ({ state, commands }) => {
-          const attributes = Attribute.getMarkAttributes(state, this.type);
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const attributes = Attribute.getMarkAttributes(state, this.name as string | MarkType);
           const hasStyles = Object.entries(attributes).some(([, value]) => !!value);
           if (hasStyles) return true;
-          return commands.unsetMark(this.name);
+          return Boolean(commands.unsetMark(this.name));
         },
     };
   },
diff --git a/packages/super-editor/src/extensions/text-transform/index.js b/packages/super-editor/src/extensions/text-transform/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/text-transform/index.js
rename to packages/super-editor/src/extensions/text-transform/index.ts
diff --git a/packages/super-editor/src/extensions/text-transform/text-transform.js b/packages/super-editor/src/extensions/text-transform/text-transform.ts
similarity index 50%
rename from packages/super-editor/src/extensions/text-transform/text-transform.js
rename to packages/super-editor/src/extensions/text-transform/text-transform.ts
index 387cdce7c..1aa7f0efc 100644
--- a/packages/super-editor/src/extensions/text-transform/text-transform.js
+++ b/packages/super-editor/src/extensions/text-transform/text-transform.ts
@@ -1,26 +1,35 @@
-// @ts-nocheck
 import { Extension } from '@core/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
 
 /**
  * Configuration options for TextTransform
- * @typedef {Object} TextTransformOptions
  * @category Options
- * @property {string[]} [types=['textStyle']] - Mark types to apply text transform to
  */
+export interface TextTransformOptions extends Record<string, unknown> {
+  /**
+   * Mark types to apply text transform to
+   * @default ['textStyle']
+   */
+  types: string[];
+}
 
 /**
  * Attributes for text transform
- * @typedef {Object} TextTransformAttributes
  * @category Attributes
- * @property {string} [textTransform] - Text transform value (uppercase, lowercase, capitalize, none)
  */
+export interface TextTransformAttributes {
+  /**
+   * Text transform value (uppercase, lowercase, capitalize, none)
+   */
+  textTransform?: string;
+}
 
 /**
  * @module TextTransform
  * @sidebarTitle Text Transform
  * @snippetPath /snippets/extensions/text-transform.mdx
  */
-export const TextTransform = Extension.create({
+export const TextTransform = Extension.create<TextTransformOptions>({
   name: 'textTransform',
 
   addOptions() {
@@ -32,7 +41,7 @@ export const TextTransform = Extension.create({
   addGlobalAttributes() {
     return [
       {
-        types: this.options.types,
+        types: (this.options as TextTransformOptions).types,
         attributes: {
           /**
            * @category Attribute
@@ -40,10 +49,12 @@ export const TextTransform = Extension.create({
            */
           textTransform: {
             default: null,
-            renderDOM: (attrs) => {
-              if (!attrs.textTransform) return {};
+            renderDOM: (attrs: Record<string, AttributeValue> = {}) => {
+              const raw = attrs.textTransform;
+              const value = typeof raw === 'string' ? raw : null;
+              if (!value) return {};
               return {
-                style: `text-transform: ${attrs.textTransform}`,
+                style: `text-transform: ${value}`,
               };
             },
           },
diff --git a/packages/super-editor/src/extensions/text/index.js b/packages/super-editor/src/extensions/text/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/text/index.js
rename to packages/super-editor/src/extensions/text/index.ts
diff --git a/packages/super-editor/src/extensions/text/text.js b/packages/super-editor/src/extensions/text/text.ts
similarity index 75%
rename from packages/super-editor/src/extensions/text/text.js
rename to packages/super-editor/src/extensions/text/text.ts
index 794c5a65f..71a5ae340 100644
--- a/packages/super-editor/src/extensions/text/text.js
+++ b/packages/super-editor/src/extensions/text/text.ts
@@ -2,16 +2,16 @@ import { Node } from '@core/index.js';
 
 /**
  * Configuration options for Text
- * @typedef {Object} TextOptions
  * @category Options
  */
+export type TextOptions = Record<string, never>;
 
 /**
  * @module Text
  * @sidebarTitle Text
  * @snippetPath /snippets/extensions/text.mdx
  */
-export const Text = Node.create({
+export const Text = Node.create<TextOptions>({
   name: 'text',
   group: 'inline',
   inline: true,
diff --git a/packages/super-editor/src/extensions/track-changes/constants.js b/packages/super-editor/src/extensions/track-changes/constants.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/constants.js
rename to packages/super-editor/src/extensions/track-changes/constants.ts
diff --git a/packages/super-editor/src/extensions/track-changes/index.js b/packages/super-editor/src/extensions/track-changes/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/index.js
rename to packages/super-editor/src/extensions/track-changes/index.ts
diff --git a/packages/super-editor/src/extensions/track-changes/permission-helpers.test.js b/packages/super-editor/src/extensions/track-changes/permission-helpers.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/permission-helpers.test.js
rename to packages/super-editor/src/extensions/track-changes/permission-helpers.test.ts
diff --git a/packages/super-editor/src/extensions/track-changes/permission-helpers.js b/packages/super-editor/src/extensions/track-changes/permission-helpers.ts
similarity index 61%
rename from packages/super-editor/src/extensions/track-changes/permission-helpers.js
rename to packages/super-editor/src/extensions/track-changes/permission-helpers.ts
index af1d63f79..175d33aee 100644
--- a/packages/super-editor/src/extensions/track-changes/permission-helpers.js
+++ b/packages/super-editor/src/extensions/track-changes/permission-helpers.ts
@@ -1,4 +1,28 @@
 import { getTrackChanges } from './trackChangesHelpers/getTrackChanges.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark as PmMark } from 'prosemirror-model';
+import type { PermissionParams } from '@core/types/EditorConfig.js';
+import type { Comment } from '@core/types/EditorEvents.js';
+
+type Editor = {
+  options?: {
+    role?: string;
+    isInternal?: boolean;
+    user?: unknown;
+    permissionResolver?: ((params: PermissionParams) => boolean | undefined) | null;
+  };
+} | null;
+
+type RawTrackedChange = { mark: PmMark; from: number; to: number; comment?: unknown };
+type NormalizedChange = {
+  id: string | null;
+  type: string | null;
+  attrs: Record<string, unknown>;
+  from: number;
+  to: number;
+  segments: { from: number; to: number }[];
+  comment?: Comment | null;
+};
 
 const PERMISSION_MAP = {
   accept: {
@@ -9,14 +33,14 @@ const PERMISSION_MAP = {
     own: 'REJECT_OWN',
     other: 'REJECT_OTHER',
   },
-};
+} as const;
 
-const buildKey = (change) => {
-  const id = change.mark?.attrs?.id ?? `${change.from}-${change.to}`;
+const buildKey = (change: RawTrackedChange) => {
+  const id = (change.mark?.attrs as Record<string, unknown> | undefined)?.id ?? `${change.from}-${change.to}`;
   return `${id}:${change.mark?.type?.name ?? 'unknown'}`;
 };
 
-const mergeChange = (bucket, change) => {
+const mergeChange = (bucket: Map<string, NormalizedChange>, change: RawTrackedChange) => {
   const key = buildKey(change);
   const existing = bucket.get(key);
 
@@ -26,12 +50,13 @@ const mergeChange = (bucket, change) => {
     existing.segments.push({ from: change.from, to: change.to });
   } else {
     bucket.set(key, {
-      id: change.mark?.attrs?.id ?? null,
+      id: (change.mark?.attrs as Record<string, unknown> | undefined)?.id?.toString() ?? null,
       type: change.mark?.type?.name ?? null,
-      attrs: { ...(change.mark?.attrs ?? {}) },
+      attrs: { ...(change.mark?.attrs ?? {}) } as Record<string, unknown>,
       from: change.from,
       to: change.to,
       segments: [{ from: change.from, to: change.to }],
+      comment: (change.comment as Comment | null | undefined) ?? null,
     });
   }
 };
@@ -46,13 +71,21 @@ const mergeChange = (bucket, change) => {
  * @param {number} params.to
  * @returns {Array<Object>} Normalised tracked change descriptors
  */
-export const collectTrackedChanges = ({ state, from, to }) => {
+export const collectTrackedChanges = ({
+  state,
+  from,
+  to,
+}: {
+  state: EditorState;
+  from: number;
+  to: number;
+}): NormalizedChange[] => {
   if (!state) return [];
   const collapsed = from === to;
-  const changes = getTrackChanges(state);
+  const changes = getTrackChanges(state) as RawTrackedChange[];
   if (!changes?.length) return [];
 
-  const bucket = new Map();
+  const bucket = new Map<string, NormalizedChange>();
 
   changes.forEach((change) => {
     const overlaps = collapsed ? change.from <= from && change.to >= from : change.from < to && change.to > from;
@@ -64,18 +97,18 @@ export const collectTrackedChanges = ({ state, from, to }) => {
   return Array.from(bucket.values());
 };
 
-const derivePermissionKey = ({ action, isOwn }) => {
+const derivePermissionKey = ({ action, isOwn }: { action: 'accept' | 'reject'; isOwn: boolean }) => {
   const mapping = PERMISSION_MAP[action];
   if (!mapping) return null;
   return isOwn ? mapping.own : mapping.other;
 };
 
-const normalizeEmail = (value) => {
+const normalizeEmail = (value: unknown) => {
   if (typeof value !== 'string') return '';
   return value.trim().toLowerCase();
 };
 
-const resolveChanges = (editor) => {
+const resolveChanges = (editor?: Editor | null) => {
   if (!editor) return { role: 'editor', isInternal: false, currentUser: null, resolver: null };
   const role = editor.options?.role ?? 'editor';
   const isInternal = Boolean(editor.options?.isInternal);
@@ -93,21 +126,29 @@ const resolveChanges = (editor) => {
  * @param {Array<Object>} params.trackedChanges
  * @returns {boolean}
  */
-export const isTrackedChangeActionAllowed = ({ editor, action, trackedChanges }) => {
+export const isTrackedChangeActionAllowed = ({
+  editor,
+  action,
+  trackedChanges,
+}: {
+  editor: Editor | null;
+  action: 'accept' | 'reject';
+  trackedChanges: NormalizedChange[];
+}) => {
   if (!trackedChanges?.length) return true;
   const { role, isInternal, currentUser, resolver } = resolveChanges(editor);
   if (typeof resolver !== 'function') return true;
 
-  const currentEmail = normalizeEmail(currentUser?.email);
+  const currentEmail = normalizeEmail((currentUser as Record<string, unknown> | null)?.email);
 
   return trackedChanges.every((change) => {
-    const authorEmail = normalizeEmail(change.attrs?.authorEmail);
+    const authorEmail = normalizeEmail((change.attrs as Record<string, unknown> | undefined)?.authorEmail);
     const isOwn = !currentEmail || !authorEmail || currentEmail === authorEmail;
     const permission = derivePermissionKey({ action, isOwn });
 
     if (!permission) return true;
 
-    const payload = {
+    const payload: PermissionParams = {
       permission,
       role,
       isInternal,
@@ -136,7 +177,15 @@ export const isTrackedChangeActionAllowed = ({ editor, action, trackedChanges })
  * @param {string|null} params.trackedChangeId
  * @returns {Array<Object>}
  */
-export const collectTrackedChangesForContext = ({ state, pos, trackedChangeId }) => {
+export const collectTrackedChangesForContext = ({
+  state,
+  pos,
+  trackedChangeId,
+}: {
+  state: EditorState;
+  pos: number | null;
+  trackedChangeId: string | null;
+}): NormalizedChange[] => {
   if (pos == null) return [];
   const changes = collectTrackedChanges({ state, from: pos, to: pos });
   if (!trackedChangeId) return changes;
diff --git a/packages/super-editor/src/extensions/track-changes/plugins/index.d.ts b/packages/super-editor/src/extensions/track-changes/plugins/index.d.ts
index 156678d42..b78ebd32f 100644
--- a/packages/super-editor/src/extensions/track-changes/plugins/index.d.ts
+++ b/packages/super-editor/src/extensions/track-changes/plugins/index.d.ts
@@ -1 +1,11 @@
-export const TrackChangesBasePluginKey: any;
+import type { PluginKey } from 'prosemirror-state';
+import type { DecorationSet } from 'prosemirror-view';
+
+export interface TrackChangesPluginState {
+  isTrackChangesActive: boolean;
+  onlyOriginalShown: boolean;
+  onlyModifiedShown: boolean;
+  decorations: DecorationSet;
+}
+
+export const TrackChangesBasePluginKey: PluginKey<TrackChangesPluginState>;
diff --git a/packages/super-editor/src/extensions/track-changes/plugins/index.js b/packages/super-editor/src/extensions/track-changes/plugins/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/plugins/index.js
rename to packages/super-editor/src/extensions/track-changes/plugins/index.ts
diff --git a/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.test.js b/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.test.js
rename to packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.test.ts
diff --git a/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.js b/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.ts
similarity index 85%
rename from packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.js
rename to packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.ts
index 2e286ba34..3406c3fdb 100644
--- a/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.js
+++ b/packages/super-editor/src/extensions/track-changes/plugins/trackChangesBasePlugin.ts
@@ -1,7 +1,17 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, type EditorState } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { ReplaceStep } from 'prosemirror-transform';
 import { TrackInsertMarkName, TrackDeleteMarkName, TrackFormatMarkName } from '../constants.js';
 import { getTrackChanges } from '../trackChangesHelpers/getTrackChanges.js';
+import type { Mark as PmMark } from 'prosemirror-model';
+
+type TrackChange = { mark: PmMark; from: number; to: number };
+type TrackChangesPluginState = {
+  isTrackChangesActive: boolean;
+  onlyOriginalShown: boolean;
+  onlyModifiedShown: boolean;
+  decorations: DecorationSet;
+};
 
 export const TrackChangesBasePluginKey = new PluginKey('TrackChangesBase');
 
@@ -10,7 +20,7 @@ export const TrackChangesBasePlugin = () => {
     key: TrackChangesBasePluginKey,
 
     state: {
-      init(_, state) {
+      init(_, state): TrackChangesPluginState {
         const decorations = getTrackChangesDecorations(state, false, false);
         return {
           isTrackChangesActive: false,
@@ -20,7 +30,7 @@ export const TrackChangesBasePlugin = () => {
         };
       },
 
-      apply(tr, oldState, prevEditorState, newEditorState) {
+      apply(tr, oldState: TrackChangesPluginState, _prevEditorState, newEditorState): TrackChangesPluginState {
         const meta = tr.getMeta(TrackChangesBasePluginKey);
 
         // Handle meta commands that require full recalculation
@@ -62,8 +72,10 @@ export const TrackChangesBasePlugin = () => {
           let mightAffectTrackChanges = false;
 
           tr.steps.forEach((step) => {
-            if (step.slice || step.from !== step.to) {
-              mightAffectTrackChanges = true;
+            if (step instanceof ReplaceStep) {
+              if (step.slice || step.from !== step.to) {
+                mightAffectTrackChanges = true;
+              }
             }
           });
 
@@ -104,13 +116,17 @@ export const TrackChangesBasePlugin = () => {
   });
 };
 
-const getTrackChangesDecorations = (state, onlyOriginalShown, onlyModifiedShown) => {
+const getTrackChangesDecorations = (
+  state: EditorState,
+  onlyOriginalShown: boolean,
+  onlyModifiedShown: boolean,
+): DecorationSet => {
   if (!state.doc || !state.doc.nodeSize || (onlyModifiedShown && onlyOriginalShown)) {
     return DecorationSet.empty;
   }
 
-  const decorations = [];
-  const trackedChanges = getTrackChanges(state);
+  const decorations: Decoration[] = [];
+  const trackedChanges = getTrackChanges(state) as TrackChange[];
 
   if (!trackedChanges.length) {
     return DecorationSet.empty;
diff --git a/packages/super-editor/src/extensions/track-changes/track-changes-extension.test.js b/packages/super-editor/src/extensions/track-changes/track-changes-extension.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/track-changes-extension.test.js
rename to packages/super-editor/src/extensions/track-changes/track-changes-extension.test.ts
diff --git a/packages/super-editor/src/extensions/track-changes/track-changes-toolbar-commands.test.js b/packages/super-editor/src/extensions/track-changes/track-changes-toolbar-commands.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/track-changes-toolbar-commands.test.js
rename to packages/super-editor/src/extensions/track-changes/track-changes-toolbar-commands.test.ts
diff --git a/packages/super-editor/src/extensions/track-changes/track-changes.js b/packages/super-editor/src/extensions/track-changes/track-changes.ts
similarity index 56%
rename from packages/super-editor/src/extensions/track-changes/track-changes.js
rename to packages/super-editor/src/extensions/track-changes/track-changes.ts
index f7c1d04f3..74d853deb 100644
--- a/packages/super-editor/src/extensions/track-changes/track-changes.js
+++ b/packages/super-editor/src/extensions/track-changes/track-changes.ts
@@ -6,6 +6,12 @@ import { TrackChangesBasePlugin, TrackChangesBasePluginKey } from './plugins/ind
 import { getTrackChanges } from './trackChangesHelpers/getTrackChanges.js';
 import { collectTrackedChanges, isTrackedChangeActionAllowed } from './permission-helpers.js';
 import { CommentsPluginKey } from '../comment/comments-plugin.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark as PmMark, Node as PmNode } from 'prosemirror-model';
+import type { Command, CommandProps } from '@core/types/ChainedCommands.js';
+
+type FormatChange = { type: string; attrs: Record<string, unknown> };
+type TrackedChange = { mark: PmMark; from: number; to: number };
 
 export const TrackChanges = Extension.create({
   name: 'trackChanges',
@@ -13,12 +19,12 @@ export const TrackChanges = Extension.create({
   addCommands() {
     return {
       acceptTrackedChangesBetween:
-        (from, to) =>
-        ({ state, dispatch, editor }) => {
+        (from: number, to: number): Command =>
+        ({ state, dispatch, editor }: CommandProps) => {
           const trackedChanges = collectTrackedChanges({ state, from, to });
           if (!isTrackedChangeActionAllowed({ editor, action: 'accept', trackedChanges })) return false;
 
-          let { tr, doc } = state;
+          const { tr, doc } = state;
 
           // if (from === to) {
           //   to += 1;
@@ -29,7 +35,7 @@ export const TrackChanges = Extension.create({
 
           const map = new Mapping();
 
-          doc.nodesBetween(from, to, (node, pos) => {
+          doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
             if (node.marks && node.marks.find((mark) => mark.type.name === TrackDeleteMarkName)) {
               const deletionStep = new ReplaceStep(
                 map.map(Math.max(pos, from)),
@@ -41,37 +47,39 @@ export const TrackChanges = Extension.create({
               map.appendMap(deletionStep.getMap());
             } else if (node.marks && node.marks.find((mark) => mark.type.name === TrackInsertMarkName)) {
               const insertionMark = node.marks.find((mark) => mark.type.name === TrackInsertMarkName);
-
-              tr.step(
-                new RemoveMarkStep(
-                  map.map(Math.max(pos, from)),
-                  map.map(Math.min(pos + node.nodeSize, to)),
-                  insertionMark,
-                ),
-              );
+              if (insertionMark) {
+                tr.step(
+                  new RemoveMarkStep(
+                    map.map(Math.max(pos, from)),
+                    map.map(Math.min(pos + node.nodeSize, to)),
+                    insertionMark,
+                  ),
+                );
+              }
             } else if (node.marks && node.marks.find((mark) => mark.type.name === TrackFormatMarkName)) {
               const formatChangeMark = node.marks.find((mark) => mark.type.name === TrackFormatMarkName);
-
-              tr.step(
-                new RemoveMarkStep(
-                  map.map(Math.max(pos, from)),
-                  map.map(Math.min(pos + node.nodeSize, to)),
-                  formatChangeMark,
-                ),
-              );
+              if (formatChangeMark) {
+                tr.step(
+                  new RemoveMarkStep(
+                    map.map(Math.max(pos, from)),
+                    map.map(Math.min(pos + node.nodeSize, to)),
+                    formatChangeMark,
+                  ),
+                );
+              }
             }
           });
 
           if (tr.steps.length) {
-            dispatch(tr);
+            dispatch?.(tr);
           }
 
           return true;
         },
 
       rejectTrackedChangesBetween:
-        (from, to) =>
-        ({ state, dispatch, editor }) => {
+        (from: number, to: number): Command =>
+        ({ state, dispatch, editor }: CommandProps) => {
           const trackedChanges = collectTrackedChanges({ state, from, to });
           if (!isTrackedChangeActionAllowed({ editor, action: 'reject', trackedChanges })) return false;
 
@@ -82,17 +90,18 @@ export const TrackChanges = Extension.create({
 
           const map = new Mapping();
 
-          doc.nodesBetween(from, to, (node, pos) => {
+          doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
             if (node.marks && node.marks.find((mark) => mark.type.name === TrackDeleteMarkName)) {
               const deletionMark = node.marks.find((mark) => mark.type.name === TrackDeleteMarkName);
-
-              tr.step(
-                new RemoveMarkStep(
-                  map.map(Math.max(pos, from)),
-                  map.map(Math.min(pos + node.nodeSize, to)),
-                  deletionMark,
-                ),
-              );
+              if (deletionMark) {
+                tr.step(
+                  new RemoveMarkStep(
+                    map.map(Math.max(pos, from)),
+                    map.map(Math.min(pos + node.nodeSize, to)),
+                    deletionMark,
+                  ),
+                );
+              }
             } else if (node.marks && node.marks.find((mark) => mark.type.name === TrackInsertMarkName)) {
               const deletionStep = new ReplaceStep(
                 map.map(Math.max(pos, from)),
@@ -105,144 +114,167 @@ export const TrackChanges = Extension.create({
             } else if (node.marks && node.marks.find((mark) => mark.type.name === TrackFormatMarkName)) {
               const formatChangeMark = node.marks.find((mark) => mark.type.name === TrackFormatMarkName);
 
-              formatChangeMark.attrs.before.forEach((oldMark) => {
-                tr.step(
-                  new AddMarkStep(
-                    map.map(Math.max(pos, from)),
-                    map.map(Math.min(pos + node.nodeSize, to)),
-                    state.schema.marks[oldMark.type].create(oldMark.attrs),
-                  ),
-                );
-              });
+              if (formatChangeMark) {
+                const before = (formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).before;
+                const after = (formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).after;
+
+                before.forEach((oldMark) => {
+                  tr.step(
+                    new AddMarkStep(
+                      map.map(Math.max(pos, from)),
+                      map.map(Math.min(pos + node.nodeSize, to)),
+                      state.schema.marks[oldMark.type].create(oldMark.attrs),
+                    ),
+                  );
+                });
+
+                after.forEach((newMark) => {
+                  const markToRemove = node.marks.find((mark) => mark.type.name === newMark.type);
+                  if (!markToRemove) return;
+                  tr.step(
+                    new RemoveMarkStep(
+                      map.map(Math.max(pos, from)),
+                      map.map(Math.min(pos + node.nodeSize, to)),
+                      markToRemove,
+                    ),
+                  );
+                });
 
-              formatChangeMark.attrs.after.forEach((newMark) => {
                 tr.step(
                   new RemoveMarkStep(
                     map.map(Math.max(pos, from)),
                     map.map(Math.min(pos + node.nodeSize, to)),
-                    node.marks.find((mark) => mark.type.name === newMark.type),
+                    formatChangeMark,
                   ),
                 );
-              });
-
-              tr.step(
-                new RemoveMarkStep(
-                  map.map(Math.max(pos, from)),
-                  map.map(Math.min(pos + node.nodeSize, to)),
-                  formatChangeMark,
-                ),
-              );
+              }
             }
           });
 
           if (tr.steps.length) {
-            dispatch(tr);
+            dispatch?.(tr);
           }
 
           return true;
         },
 
       acceptTrackedChange:
-        ({ trackedChange }) =>
-        ({ commands }) => {
+        ({ trackedChange }: { trackedChange: { start: number; end: number } }): Command =>
+        ({ commands }: CommandProps) => {
+          const cmds = commands as unknown as { acceptTrackedChangesBetween?: (from: number, to: number) => boolean };
           const { start: from, end: to } = trackedChange;
-          return commands.acceptTrackedChangesBetween(from, to);
+          return Boolean(cmds.acceptTrackedChangesBetween?.(from, to));
         },
 
       acceptTrackedChangeBySelection:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as { acceptTrackedChangesBetween?: (from: number, to: number) => boolean };
           const { from, to } = state.selection;
-          return commands.acceptTrackedChangesBetween(from, to);
+          return Boolean(cmds.acceptTrackedChangesBetween?.(from, to));
         },
 
       acceptTrackedChangeFromToolbar:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as {
+            acceptTrackedChangeById?: (id: string) => boolean;
+            acceptTrackedChangeBySelection?: () => boolean;
+          };
           const commentsPluginState = CommentsPluginKey.getState(state);
           const activeThreadId = commentsPluginState?.activeThreadId;
 
           if (activeThreadId && commentsPluginState?.trackedChanges?.[activeThreadId]) {
-            return commands.acceptTrackedChangeById(activeThreadId);
+            return Boolean(cmds.acceptTrackedChangeById?.(activeThreadId));
           } else {
-            return commands.acceptTrackedChangeBySelection();
+            return Boolean(cmds.acceptTrackedChangeBySelection?.());
           }
         },
 
       acceptTrackedChangeById:
-        (id) =>
-        ({ state, tr, commands }) => {
+        (id: string): Command =>
+        ({ state, tr, commands }: CommandProps) => {
+          const cmds = commands as unknown as { acceptTrackedChangesBetween?: (from: number, to: number) => boolean };
           const toResolve = getChangesByIdToResolve(state, id) || [];
 
           return toResolve
             .map(({ from, to }) => {
-              let mappedFrom = tr.mapping.map(from);
-              let mappedTo = tr.mapping.map(to);
-              return commands.acceptTrackedChangesBetween(mappedFrom, mappedTo);
+              const mappedFrom = tr.mapping.map(from);
+              const mappedTo = tr.mapping.map(to);
+              return cmds.acceptTrackedChangesBetween?.(mappedFrom, mappedTo);
             })
-            .every((result) => result);
+            .every((result) => Boolean(result));
         },
 
       acceptAllTrackedChanges:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as { acceptTrackedChangesBetween?: (from: number, to: number) => boolean };
           const from = 0,
             to = state.doc.content.size;
-          return commands.acceptTrackedChangesBetween(from, to);
+          return Boolean(cmds.acceptTrackedChangesBetween?.(from, to));
         },
 
       rejectTrackedChangeById:
-        (id) =>
-        ({ state, tr, commands }) => {
+        (id: string): Command =>
+        ({ state, tr, commands }: CommandProps) => {
+          const cmds = commands as unknown as { rejectTrackedChangesBetween?: (from: number, to: number) => boolean };
           const toReject = getChangesByIdToResolve(state, id) || [];
 
           return toReject
             .map(({ from, to }) => {
-              let mappedFrom = tr.mapping.map(from);
-              let mappedTo = tr.mapping.map(to);
-              return commands.rejectTrackedChangesBetween(mappedFrom, mappedTo);
+              const mappedFrom = tr.mapping.map(from);
+              const mappedTo = tr.mapping.map(to);
+              return cmds.rejectTrackedChangesBetween?.(mappedFrom, mappedTo);
             })
-            .every((result) => result);
+            .every((result) => Boolean(result));
         },
 
       rejectTrackedChange:
-        ({ trackedChange }) =>
-        ({ commands }) => {
+        ({ trackedChange }: { trackedChange: { start: number; end: number } }): Command =>
+        ({ commands }: CommandProps) => {
+          const cmds = commands as unknown as { rejectTrackedChangesBetween?: (from: number, to: number) => boolean };
           const { start: from, end: to } = trackedChange;
-          return commands.rejectTrackedChangesBetween(from, to);
+          return Boolean(cmds.rejectTrackedChangesBetween?.(from, to));
         },
 
       rejectTrackedChangeOnSelection:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as { rejectTrackedChangesBetween?: (from: number, to: number) => boolean };
           const { from, to } = state.selection;
-          return commands.rejectTrackedChangesBetween(from, to);
+          return Boolean(cmds.rejectTrackedChangesBetween?.(from, to));
         },
 
       rejectTrackedChangeFromToolbar:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as {
+            rejectTrackedChangeById?: (id: string) => boolean;
+            rejectTrackedChangeOnSelection?: () => boolean;
+          };
           const commentsPluginState = CommentsPluginKey.getState(state);
           const activeThreadId = commentsPluginState?.activeThreadId;
 
           if (activeThreadId && commentsPluginState?.trackedChanges?.[activeThreadId]) {
-            return commands.rejectTrackedChangeById(activeThreadId);
+            return Boolean(cmds.rejectTrackedChangeById?.(activeThreadId));
           } else {
-            return commands.rejectTrackedChangeOnSelection();
+            return Boolean(cmds.rejectTrackedChangeOnSelection?.());
           }
         },
 
       rejectAllTrackedChanges:
-        () =>
-        ({ state, commands }) => {
+        (): Command =>
+        ({ state, commands }: CommandProps) => {
+          const cmds = commands as unknown as { rejectTrackedChangesBetween?: (from: number, to: number) => boolean };
           const from = 0,
             to = state.doc.content.size;
-          return commands.rejectTrackedChangesBetween(from, to);
+          return Boolean(cmds.rejectTrackedChangesBetween?.(from, to));
         },
 
       toggleTrackChanges:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           const trackChangeState = TrackChangesBasePluginKey.getState(state);
           if (trackChangeState === undefined) return false;
           state.tr.setMeta(TrackChangesBasePluginKey, {
@@ -253,8 +285,8 @@ export const TrackChanges = Extension.create({
         },
 
       enableTrackChanges:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           state.tr.setMeta(TrackChangesBasePluginKey, {
             type: 'TRACK_CHANGES_ENABLE',
             value: true,
@@ -263,8 +295,8 @@ export const TrackChanges = Extension.create({
         },
 
       disableTrackChanges:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           state.tr.setMeta(TrackChangesBasePluginKey, {
             type: 'TRACK_CHANGES_ENABLE',
             value: false,
@@ -273,8 +305,8 @@ export const TrackChanges = Extension.create({
         },
 
       toggleTrackChangesShowOriginal:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           const trackChangeState = TrackChangesBasePluginKey.getState(state);
           if (trackChangeState === undefined) return false;
           state.tr.setMeta(TrackChangesBasePluginKey, {
@@ -285,8 +317,8 @@ export const TrackChanges = Extension.create({
         },
 
       enableTrackChangesShowOriginal:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           state.tr.setMeta(TrackChangesBasePluginKey, {
             type: 'SHOW_ONLY_ORIGINAL',
             value: true,
@@ -295,8 +327,8 @@ export const TrackChanges = Extension.create({
         },
 
       disableTrackChangesShowOriginal:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           state.tr.setMeta(TrackChangesBasePluginKey, {
             type: 'SHOW_ONLY_ORIGINAL',
             value: false,
@@ -305,8 +337,8 @@ export const TrackChanges = Extension.create({
         },
 
       toggleTrackChangesShowFinal:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           const trackChangeState = TrackChangesBasePluginKey.getState(state);
           if (trackChangeState === undefined) return false;
           state.tr.setMeta(TrackChangesBasePluginKey, {
@@ -317,8 +349,8 @@ export const TrackChanges = Extension.create({
         },
 
       enableTrackChangesShowFinal:
-        () =>
-        ({ state }) => {
+        (): Command =>
+        ({ state }: CommandProps) => {
           state.tr.setMeta(TrackChangesBasePluginKey, {
             type: 'SHOW_ONLY_MODIFIED',
             value: true,
@@ -343,16 +375,16 @@ export const TrackChanges = Extension.create({
 //   }
 // };
 
-const getChangesByIdToResolve = (state, id) => {
-  const trackedChanges = getTrackChanges(state);
+const getChangesByIdToResolve = (state: EditorState, id: string) => {
+  const trackedChanges = getTrackChanges(state) as TrackedChange[];
   const changeIndex = trackedChanges.findIndex(({ mark }) => mark.attrs.id === id);
   if (changeIndex === -1) return;
 
   const matchingChange = trackedChanges[changeIndex];
   const matchingId = matchingChange.mark.attrs.id;
 
-  const getSegmentSize = ({ from, to }) => to - from;
-  const areDirectlyConnected = (left, right) => {
+  const getSegmentSize = ({ from, to }: { from: number; to: number }) => to - from;
+  const areDirectlyConnected = (left?: TrackedChange, right?: TrackedChange) => {
     if (!left || !right) {
       return false;
     }
@@ -367,20 +399,20 @@ const getChangesByIdToResolve = (state, id) => {
     return !hasContentBetween;
   };
 
-  const isComplementaryPair = (firstType, secondType) =>
+  const isComplementaryPair = (firstType: string, secondType: string) =>
     (firstType === TrackDeleteMarkName && secondType === TrackInsertMarkName) ||
     (firstType === TrackInsertMarkName && secondType === TrackDeleteMarkName);
 
-  const linkedBefore = [];
-  const linkedAfter = [];
+  const linkedBefore: TrackedChange[] = [];
+  const linkedAfter: TrackedChange[] = [];
 
-  const collectDirection = (direction, collection) => {
+  const collectDirection = (direction: -1 | 1, collection: TrackedChange[]) => {
     let currentIndex = changeIndex;
-    let currentChange = matchingChange;
+    let currentChange = matchingChange as TrackedChange;
 
     while (true) {
       const neighborIndex = currentIndex + direction;
-      const neighbor = trackedChanges[neighborIndex];
+      const neighbor = trackedChanges[neighborIndex] as TrackedChange | undefined;
 
       if (!neighbor) {
         break;
diff --git a/packages/super-editor/src/extensions/track-changes/track-delete.js b/packages/super-editor/src/extensions/track-changes/track-delete.ts
similarity index 53%
rename from packages/super-editor/src/extensions/track-changes/track-delete.js
rename to packages/super-editor/src/extensions/track-changes/track-delete.ts
index 765c1e582..756addb02 100644
--- a/packages/super-editor/src/extensions/track-changes/track-delete.js
+++ b/packages/super-editor/src/extensions/track-changes/track-delete.ts
@@ -1,5 +1,7 @@
 import { Mark, Attribute } from '@core/index.js';
 import { TrackDeleteMarkName } from './constants.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Mark as PmMark } from 'prosemirror-model';
 
 const trackDeleteClass = 'track-delete';
 
@@ -22,8 +24,8 @@ export const TrackDelete = Mark.create({
     return {
       id: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.id) return {};
           return {
             'data-id': attrs.id,
@@ -33,8 +35,8 @@ export const TrackDelete = Mark.create({
 
       author: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-author'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-author'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.author) return {};
           return {
             'data-author': attrs.author,
@@ -44,8 +46,8 @@ export const TrackDelete = Mark.create({
 
       authorEmail: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authoremail'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authoremail'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorEmail) return {};
           return {
             'data-authoremail': attrs.authorEmail,
@@ -55,8 +57,8 @@ export const TrackDelete = Mark.create({
 
       authorImage: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authorimage'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authorimage'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorImage) return {};
           return {
             'data-authorimage': attrs.authorImage,
@@ -66,8 +68,8 @@ export const TrackDelete = Mark.create({
 
       date: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-date'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-date'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.date) return {};
           return {
             'data-date': attrs.date,
@@ -86,7 +88,14 @@ export const TrackDelete = Mark.create({
     return false;
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({
+    htmlAttributes = {} as Record<string, AttributeValue>,
+  }: {
+    htmlAttributes: Record<string, AttributeValue>;
+    mark?: PmMark;
+  }) {
+    const base = (this.options as { htmlAttributes?: Record<string, AttributeValue> }).htmlAttributes || {};
+    const merged = Attribute.mergeAttributes(base as Record<string, AttributeValue>, htmlAttributes || {});
+    return ['span', merged, 0];
   },
 });
diff --git a/packages/super-editor/src/extensions/track-changes/track-format.js b/packages/super-editor/src/extensions/track-changes/track-format.ts
similarity index 60%
rename from packages/super-editor/src/extensions/track-changes/track-format.js
rename to packages/super-editor/src/extensions/track-changes/track-format.ts
index 481f52300..efb8a9f9c 100644
--- a/packages/super-editor/src/extensions/track-changes/track-format.js
+++ b/packages/super-editor/src/extensions/track-changes/track-format.ts
@@ -1,6 +1,8 @@
 import { Mark, Attribute } from '@core/index.js';
 import { TrackFormatMarkName } from './constants.js';
 import { parseFormatList } from './trackChangesHelpers/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Mark as PmMark } from 'prosemirror-model';
 
 const trackFormatClass = 'track-format';
 
@@ -23,8 +25,8 @@ export const TrackFormat = Mark.create({
     return {
       id: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.id) return {};
           return {
             'data-id': attrs.id,
@@ -34,8 +36,8 @@ export const TrackFormat = Mark.create({
 
       author: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-author'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-author'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.author) return {};
           return {
             'data-author': attrs.author,
@@ -45,8 +47,8 @@ export const TrackFormat = Mark.create({
 
       authorEmail: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authoremail'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authoremail'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorEmail) return {};
           return {
             'data-authoremail': attrs.authorEmail,
@@ -56,8 +58,8 @@ export const TrackFormat = Mark.create({
 
       authorImage: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authorimage'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authorimage'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorImage) return {};
           return {
             'data-authorimage': attrs.authorImage,
@@ -67,8 +69,8 @@ export const TrackFormat = Mark.create({
 
       date: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-date'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-date'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.date) return {};
           return {
             'data-date': attrs.date,
@@ -82,10 +84,10 @@ export const TrackFormat = Mark.create({
       // }
       before: {
         default: [],
-        parseDOM: (elem) => {
+        parseDOM: (elem: HTMLElement) => {
           return parseFormatList(elem.getAttribute('data-before'));
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.before) return {};
           return {
             'data-before': JSON.stringify(attrs.before),
@@ -99,10 +101,10 @@ export const TrackFormat = Mark.create({
       // }
       after: {
         default: [],
-        parseDOM: (elem) => {
+        parseDOM: (elem: HTMLElement) => {
           return parseFormatList(elem.getAttribute('data-after'));
         },
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.after) return {};
           return {
             'data-after': JSON.stringify(attrs.after),
@@ -121,7 +123,14 @@ export const TrackFormat = Mark.create({
     return false;
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({
+    htmlAttributes = {} as Record<string, AttributeValue>,
+  }: {
+    htmlAttributes: Record<string, AttributeValue>;
+    mark?: PmMark;
+  }) {
+    const base = (this.options as { htmlAttributes?: Record<string, AttributeValue> }).htmlAttributes || {};
+    const merged = Attribute.mergeAttributes(base as Record<string, AttributeValue>, htmlAttributes || {});
+    return ['span', merged, 0];
   },
 });
diff --git a/packages/super-editor/src/extensions/track-changes/track-insert.js b/packages/super-editor/src/extensions/track-changes/track-insert.ts
similarity index 53%
rename from packages/super-editor/src/extensions/track-changes/track-insert.js
rename to packages/super-editor/src/extensions/track-changes/track-insert.ts
index 746ed528b..8ec62cdab 100644
--- a/packages/super-editor/src/extensions/track-changes/track-insert.js
+++ b/packages/super-editor/src/extensions/track-changes/track-insert.ts
@@ -1,5 +1,7 @@
 import { Mark, Attribute } from '@core/index.js';
 import { TrackInsertMarkName } from './constants.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Mark as PmMark } from 'prosemirror-model';
 
 const trackInsertClass = 'track-insert';
 
@@ -22,8 +24,8 @@ export const TrackInsert = Mark.create({
     return {
       id: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-id'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-id'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.id) return {};
           return {
             'data-id': attrs.id,
@@ -33,8 +35,8 @@ export const TrackInsert = Mark.create({
 
       author: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-author'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-author'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.author) return {};
           return {
             'data-author': attrs.author,
@@ -44,8 +46,8 @@ export const TrackInsert = Mark.create({
 
       authorEmail: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authoremail'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authoremail'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorEmail) return {};
           return {
             'data-authoremail': attrs.authorEmail,
@@ -55,8 +57,8 @@ export const TrackInsert = Mark.create({
 
       authorImage: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-authorimage'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-authorimage'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.authorImage) return {};
           return {
             'data-authorimage': attrs.authorImage,
@@ -66,8 +68,8 @@ export const TrackInsert = Mark.create({
 
       date: {
         default: '',
-        parseDOM: (elem) => elem.getAttribute('data-date'),
-        renderDOM: (attrs) => {
+        parseDOM: (elem: HTMLElement) => elem.getAttribute('data-date'),
+        renderDOM: (attrs: Record<string, AttributeValue>) => {
           if (!attrs.date) return {};
           return {
             'data-date': attrs.date,
@@ -86,7 +88,14 @@ export const TrackInsert = Mark.create({
     return false;
   },
 
-  renderDOM({ htmlAttributes }) {
-    return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  renderDOM({
+    htmlAttributes = {} as Record<string, AttributeValue>,
+  }: {
+    htmlAttributes: Record<string, AttributeValue>;
+    mark?: PmMark;
+  }) {
+    const base = (this.options as { htmlAttributes?: Record<string, AttributeValue> }).htmlAttributes || {};
+    const merged = Attribute.mergeAttributes(base as Record<string, AttributeValue>, htmlAttributes || {});
+    return ['span', merged, 0];
   },
 });
diff --git a/packages/super-editor/src/extensions/track-changes/track-mark-rendering.test.js b/packages/super-editor/src/extensions/track-changes/track-mark-rendering.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/track-mark-rendering.test.js
rename to packages/super-editor/src/extensions/track-changes/track-mark-rendering.test.ts
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.ts
similarity index 58%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.ts
index 37e774fed..71ea013a1 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/addMarkStep.ts
@@ -3,6 +3,21 @@ import { v4 as uuidv4 } from 'uuid';
 import { objectIncludes } from '@core/utilities/objectIncludes.js';
 import { TrackChangesBasePluginKey } from '../plugins/trackChangesBasePlugin.js';
 import { CommentsPluginKey } from '../../comment/comments-plugin.js';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { AddMarkStep } from 'prosemirror-transform';
+import type { Mark as PmMark, Node as PmNode } from 'prosemirror-model';
+import type { User } from '@core/types/EditorConfig.js';
+
+type FormatChange = { type: string; attrs: Record<string, unknown> };
+
+type AddMarkStepParams = {
+  state: EditorState;
+  step: AddMarkStep;
+  newTr: Transaction;
+  doc: PmNode;
+  user: User;
+  date: string;
+};
 
 /**
  * Add mark step.
@@ -15,10 +30,10 @@ import { CommentsPluginKey } from '../../comment/comments-plugin.js';
  * @param {object} options.user User object ({ name, email }).
  * @param {string} options.date Date.
  */
-export const addMarkStep = ({ state, step, newTr, doc, user, date }) => {
-  const meta = {};
+export const addMarkStep = ({ state, step, newTr, doc, user, date }: AddMarkStepParams): void => {
+  const meta: { formatMark?: PmMark; step?: AddMarkStep } = {};
 
-  doc.nodesBetween(step.from, step.to, (node, pos) => {
+  doc.nodesBetween(step.from, step.to, (node: PmNode, pos: number) => {
     if (!node.isInline) {
       return;
     }
@@ -30,36 +45,42 @@ export const addMarkStep = ({ state, step, newTr, doc, user, date }) => {
     const existingChangeMark = node.marks.find((mark) =>
       [TrackDeleteMarkName, TrackFormatMarkName].includes(mark.type.name),
     );
-    const wid = existingChangeMark ? existingChangeMark.attrs.id : uuidv4();
+    const wid = existingChangeMark ? (existingChangeMark.attrs as Record<string, unknown>).id : uuidv4();
     newTr.addMark(Math.max(step.from, pos), Math.min(step.to, pos + node.nodeSize), step.mark);
 
-    const allowedMarks = ['bold', 'italic', 'strike', 'underline', 'textStyle'];
+    const allowedMarks: string[] = ['bold', 'italic', 'strike', 'underline', 'textStyle'];
 
     // ![TrackDeleteMarkName].includes(step.mark.type.name)
     if (allowedMarks.includes(step.mark.type.name) && !node.marks.find((mark) => mark.type === step.mark.type)) {
       const formatChangeMark = node.marks.find((mark) => mark.type.name === TrackFormatMarkName);
 
-      let after = [];
-      let before = [];
+      let after: FormatChange[] = [];
+      let before: FormatChange[] = [];
 
       if (formatChangeMark) {
-        let foundBefore = formatChangeMark.attrs.before.find((mark) => {
-          if (mark.type === 'textStyle') {
-            return mark.type === step.mark.type.name && objectIncludes(mark.attrs, step.mark.attrs);
-          }
-          return mark.type === step.mark.type.name;
-        });
+        const foundBefore = (formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).before.find(
+          (mark) => {
+            if (mark.type === 'textStyle') {
+              return mark.type === step.mark.type.name && objectIncludes(mark.attrs, step.mark.attrs);
+            }
+            return mark.type === step.mark.type.name;
+          },
+        );
 
         if (foundBefore) {
-          before = [...formatChangeMark.attrs.before.filter((mark) => mark.type !== step.mark.type.name)];
-          after = [...formatChangeMark.attrs.after];
+          before = [
+            ...(formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).before.filter(
+              (mark) => mark.type !== step.mark.type.name,
+            ),
+          ];
+          after = [...(formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).after];
         } else {
-          before = [...formatChangeMark.attrs.before];
+          before = [...(formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).before];
           after = [
-            ...formatChangeMark.attrs.after,
+            ...(formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] }).after,
             {
               type: step.mark.type.name,
-              attrs: { ...step.mark.attrs },
+              attrs: { ...(step.mark.attrs as Record<string, unknown>) },
             },
           ];
         }
@@ -67,13 +88,13 @@ export const addMarkStep = ({ state, step, newTr, doc, user, date }) => {
         // before = [];
         before = node.marks.map((mark) => ({
           type: mark.type.name,
-          attrs: { ...mark.attrs },
+          attrs: { ...(mark.attrs as Record<string, unknown>) },
         }));
 
         after = [
           {
             type: step.mark.type.name,
-            attrs: { ...step.mark.attrs },
+            attrs: { ...(step.mark.attrs as Record<string, unknown>) },
           },
         ];
       }
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.ts
similarity index 67%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.ts
index 448063ce9..69c0767f8 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/documentHelpers.ts
@@ -1,5 +1,9 @@
+import type { Node as PmNode } from 'prosemirror-model';
+
+type FoundMark = { from: number; to: number; attrs: Record<string, unknown> };
+
 // https://discuss.prosemirror.net/t/expanding-the-selection-to-the-active-mark/
-export const findMarkPosition = (doc, pos, markName) => {
+export const findMarkPosition = (doc: PmNode, pos: number, markName: string): FoundMark | null => {
   const $pos = doc.resolve(pos);
   const parent = $pos.parent;
   const start = parent.childAfter($pos.parentOffset);
@@ -9,6 +13,9 @@ export const findMarkPosition = (doc, pos, markName) => {
   }
 
   const actualMark = start.node.marks.find((mark) => mark.type.name === markName);
+  if (!actualMark) {
+    return null;
+  }
 
   let startIndex = $pos.index();
   let startPos = $pos.start() + start.offset;
@@ -31,11 +38,11 @@ export const findMarkPosition = (doc, pos, markName) => {
   };
 };
 
-export const flatten = (node, descend = true) => {
+export const flatten = (node: PmNode, descend: boolean = true): { node: PmNode; pos: number }[] => {
   if (!node) {
     throw new Error('Invalid "node" parameter');
   }
-  const result = [];
+  const result: { node: PmNode; pos: number }[] = [];
   node.descendants((child, pos) => {
     result.push({ node: child, pos });
     if (!descend) {
@@ -45,7 +52,11 @@ export const flatten = (node, descend = true) => {
   return result;
 };
 
-export const findChildren = (node, predicate, descend) => {
+export const findChildren = (
+  node: PmNode,
+  predicate: (node: PmNode) => boolean,
+  descend?: boolean,
+): { node: PmNode; pos: number }[] => {
   if (!node) {
     throw new Error('Invalid "node" parameter');
   } else if (!predicate) {
@@ -54,6 +65,6 @@ export const findChildren = (node, predicate, descend) => {
   return flatten(node, descend).filter((child) => predicate(child.node));
 };
 
-export const findInlineNodes = (node, descend) => {
+export const findInlineNodes = (node: PmNode, descend?: boolean): { node: PmNode; pos: number }[] => {
   return findChildren(node, (child) => child.isInline, descend);
 };
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.ts
similarity index 68%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.ts
index 11e13274b..1a12f6561 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/findTrackedMarkBetween.ts
@@ -1,3 +1,12 @@
+import type { Transaction } from 'prosemirror-state';
+import type { Mark as PmMark, Node as PmNode } from 'prosemirror-model';
+
+export type TrackedMark = {
+  from: number;
+  to: number;
+  mark: PmMark;
+};
+
 /**
  * Find tracked mark between positions by mark name and attrs.
  */
@@ -8,21 +17,25 @@ export const findTrackedMarkBetween = ({
   markName,
   attrs = {},
   offset = 1, // To get non-inclusive marks.
-}) => {
+}: {
+  tr: Transaction;
+  from: number;
+  to: number;
+  markName: string;
+  attrs?: Record<string, unknown>;
+  offset?: number;
+}): TrackedMark | undefined => {
   const { doc } = tr;
 
   const startPos = Math.max(from - offset, 0); // $from.start()
   const endPos = Math.min(to + offset, doc.content.size); // $from.end()
 
-  let markFound = null;
-
-  const tryMatch = (node, pos) => {
-    if (!node || node?.nodeSize === undefined) {
-      return;
-    }
+  let markFound: TrackedMark | undefined;
 
+  const tryMatch = (node: PmNode, pos: number): false | void => {
     const mark = node.marks?.find(
-      (mark) => mark.type.name === markName && Object.keys(attrs).every((attr) => mark.attrs[attr] === attrs[attr]),
+      (mark: PmMark) =>
+        mark.type.name === markName && Object.keys(attrs).every((attr) => mark.attrs[attr] === attrs[attr]),
     );
 
     if (mark && !markFound) {
@@ -40,7 +53,7 @@ export const findTrackedMarkBetween = ({
     return tryMatch(node, pos);
   });
 
-  const inspectAroundPosition = (pos) => {
+  const inspectAroundPosition = (pos: number) => {
     if (pos < 0 || pos > doc.content.size) {
       return;
     }
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.ts
similarity index 71%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.ts
index aaaf6ea4d..e38e7ad6a 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/getTrackChanges.ts
@@ -1,5 +1,9 @@
 import { TrackInsertMarkName, TrackDeleteMarkName, TrackFormatMarkName } from '../constants.js';
 import { findInlineNodes } from './documentHelpers.js';
+import type { EditorState } from 'prosemirror-state';
+import type { Mark as PmMark } from 'prosemirror-model';
+
+type TrackedChange = { mark: PmMark; from: number; to: number };
 
 /**
  * Get track changes marks.
@@ -7,9 +11,9 @@ import { findInlineNodes } from './documentHelpers.js';
  * @param {string} id
  * @returns {Array} Array with track changes marks.
  */
-export const getTrackChanges = (state, id = null) => {
-  const trackedChanges = [];
-  const allInlineNodes = findInlineNodes(state.doc);
+export const getTrackChanges = (state: EditorState, id: string | null = null): TrackedChange[] => {
+  const trackedChanges: TrackedChange[] = [];
+  const allInlineNodes = findInlineNodes(state.doc, true);
 
   if (!allInlineNodes.length) {
     return trackedChanges;
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/index.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/index.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/index.ts
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.ts
similarity index 70%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.ts
index af7915e9a..6e81340c9 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markDeletion.ts
@@ -1,8 +1,10 @@
 import { Mapping, ReplaceStep } from 'prosemirror-transform';
-import { Slice } from 'prosemirror-model';
+import { Slice, type Mark as PmMark, type Node as PmNode } from 'prosemirror-model';
 import { v4 as uuidv4 } from 'uuid';
 import { TrackDeleteMarkName, TrackInsertMarkName } from '../constants.js';
-import { findTrackedMarkBetween } from './findTrackedMarkBetween.js';
+import { findTrackedMarkBetween, type TrackedMark } from './findTrackedMarkBetween.js';
+import type { Transaction } from 'prosemirror-state';
+import type { User } from '@core/types/EditorConfig.js';
 
 /**
  * Mark deletion.
@@ -14,8 +16,22 @@ import { findTrackedMarkBetween } from './findTrackedMarkBetween.js';
  * @param {string} options.id Optional ID to use (for replace operations where insertion and deletion share the same ID).
  * @returns {Object} Deletion map and deletionMark
  */
-export const markDeletion = ({ tr, from, to, user, date, id: providedId }) => {
-  let trackedMark = findTrackedMarkBetween({
+export const markDeletion = ({
+  tr,
+  from,
+  to,
+  user,
+  date,
+  id: providedId,
+}: {
+  tr: Transaction;
+  from: number;
+  to: number;
+  user: User;
+  date: string;
+  id?: string | null;
+}): { deletionMark: PmMark; deletionMap: Mapping; nodes: PmNode[] } => {
+  const trackedMark: TrackedMark | undefined = findTrackedMarkBetween({
     tr,
     from,
     to,
@@ -28,7 +44,7 @@ export const markDeletion = ({ tr, from, to, user, date, id: providedId }) => {
     // Use the provided ID (for replace operations)
     id = providedId;
   } else if (trackedMark) {
-    id = trackedMark.mark.attrs.id;
+    id = trackedMark.mark.attrs.id as string;
   } else {
     id = uuidv4();
   }
@@ -44,8 +60,8 @@ export const markDeletion = ({ tr, from, to, user, date, id: providedId }) => {
   const deletionMap = new Mapping();
 
   // Add deletion mark to block nodes (figures, text blocks) and find already deleted inline nodes (and leave them alone).
-  let nodes = [];
-  tr.doc.nodesBetween(from, to, (node, pos) => {
+  const nodes: PmNode[] = [];
+  tr.doc.nodesBetween(from, to, (node: PmNode, pos: number) => {
     if (node.type.name.includes('table')) {
       return;
     }
@@ -70,8 +86,8 @@ export const markDeletion = ({ tr, from, to, user, date, id: providedId }) => {
         deletionMark,
       );
     } else if (
-      node.attrs.track &&
-      !node.attrs.track.find((trackAttr) => trackAttr.type === TrackDeleteMarkName) &&
+      Array.isArray(node.attrs.track) &&
+      !node.attrs.track.find((trackAttr: { type?: string }) => trackAttr.type === TrackDeleteMarkName) &&
       !['bulletList', 'orderedList'].includes(node.type.name)
     ) {
       // Skip for now.
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.ts
similarity index 72%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.ts
index 6c7ef377d..c465fdf9f 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markInsertion.ts
@@ -1,6 +1,9 @@
 import { v4 as uuidv4 } from 'uuid';
 import { TrackInsertMarkName, TrackDeleteMarkName } from '../constants.js';
-import { findTrackedMarkBetween } from './findTrackedMarkBetween.js';
+import { findTrackedMarkBetween, type TrackedMark } from './findTrackedMarkBetween.js';
+import type { Transaction } from 'prosemirror-state';
+import type { Mark as PmMark } from 'prosemirror-model';
+import type { User } from '@core/types/EditorConfig.js';
 
 /**
  * Mark insertion.
@@ -11,11 +14,23 @@ import { findTrackedMarkBetween } from './findTrackedMarkBetween.js';
  * @param {string} options.date Date.
  * @returns {Mark} Insertion mark.
  */
-export const markInsertion = ({ tr, from, to, user, date }) => {
+export const markInsertion = ({
+  tr,
+  from,
+  to,
+  user,
+  date,
+}: {
+  tr: Transaction;
+  from: number;
+  to: number;
+  user: User;
+  date: string;
+}): PmMark => {
   tr.removeMark(from, to, tr.doc.type.schema.marks[TrackDeleteMarkName]);
   tr.removeMark(from, to, tr.doc.type.schema.marks[TrackInsertMarkName]);
 
-  let trackedMark = findTrackedMarkBetween({
+  const trackedMark: TrackedMark | undefined = findTrackedMarkBetween({
     tr,
     from,
     to,
@@ -23,12 +38,7 @@ export const markInsertion = ({ tr, from, to, user, date }) => {
     attrs: { authorEmail: user.email },
   });
 
-  let id;
-  if (trackedMark) {
-    id = trackedMark.mark.attrs.id;
-  } else {
-    id = uuidv4();
-  }
+  const id = trackedMark ? (trackedMark.mark.attrs.id as string) : uuidv4();
 
   const insertionMark = tr.doc.type.schema.marks[TrackInsertMarkName].create({
     id,
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markWrapping.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markWrapping.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markWrapping.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/markWrapping.ts
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.js
deleted file mode 100644
index 1a21bf788..000000000
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Parse format list from string.
- * @param {string} str
- * @returns {Object[]} Array ({ type, attrs })
- */
-export const parseFormatList = (str) => {
-  if (!str) return [];
-  let formatList;
-  try {
-    formatList = JSON.parse(str);
-  } catch {
-    return [];
-  }
-  if (!Array.isArray(formatList)) {
-    return [];
-  }
-  return formatList.filter((format) => Object.hasOwn(format, 'type') && Object.hasOwn(format, 'attrs'));
-};
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.ts b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.ts
new file mode 100644
index 000000000..bfc92428f
--- /dev/null
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/parseFormatList.ts
@@ -0,0 +1,28 @@
+type FormatEntry = { type: string; attrs: Record<string, unknown> };
+
+/**
+ * Parse format list from string.
+ * @param {string} str
+ * @returns {Object[]} Array ({ type, attrs })
+ */
+export const parseFormatList = (str: string | null | undefined): FormatEntry[] => {
+  if (!str) return [];
+  let formatList: unknown;
+  try {
+    formatList = JSON.parse(str);
+  } catch {
+    return [];
+  }
+  if (!Array.isArray(formatList)) {
+    return [];
+  }
+  return (formatList as unknown[])
+    .filter(
+      (format): format is FormatEntry =>
+        typeof format === 'object' &&
+        !!format &&
+        Object.prototype.hasOwnProperty.call(format, 'type') &&
+        Object.prototype.hasOwnProperty.call(format, 'attrs'),
+    )
+    .map((format) => format);
+};
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.ts
similarity index 63%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.ts
index c00dd6a99..3b0b505d4 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/removeMarkStep.ts
@@ -2,6 +2,20 @@ import { v4 as uuidv4 } from 'uuid';
 import { TrackDeleteMarkName, TrackFormatMarkName } from '../constants.js';
 import { TrackChangesBasePluginKey } from '../plugins/trackChangesBasePlugin.js';
 import { CommentsPluginKey } from '../../comment/comments-plugin.js';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { RemoveMarkStep } from 'prosemirror-transform';
+import type { Mark as PmMark, Node as PmNode } from 'prosemirror-model';
+import type { User } from '@core/types/EditorConfig.js';
+
+type FormatChange = { type: string; attrs: Record<string, unknown> };
+type RemoveMarkStepParams = {
+  state: EditorState;
+  step: RemoveMarkStep;
+  newTr: Transaction;
+  doc: PmNode;
+  user: User;
+  date: string;
+};
 
 /**
  * Remove mark step.
@@ -12,10 +26,10 @@ import { CommentsPluginKey } from '../../comment/comments-plugin.js';
  * @param {object} options.user User object ({ name, email }).
  * @param {string} options.date Date.
  */
-export const removeMarkStep = ({ state, step, newTr, doc, user, date }) => {
-  const meta = {};
+export const removeMarkStep = ({ state, step, newTr, doc, user, date }: RemoveMarkStepParams): void => {
+  const meta: { formatMark?: PmMark; step?: RemoveMarkStep } = {};
 
-  doc.nodesBetween(step.from, step.to, (node, pos) => {
+  doc.nodesBetween(step.from, step.to, (node: PmNode, pos: number) => {
     if (!node.isInline) {
       return true;
     }
@@ -26,27 +40,28 @@ export const removeMarkStep = ({ state, step, newTr, doc, user, date }) => {
 
     newTr.removeMark(Math.max(step.from, pos), Math.min(step.to, pos + node.nodeSize), step.mark);
 
-    const allowedMarks = ['bold', 'italic', 'strike', 'underline', 'textStyle'];
+    const allowedMarks: string[] = ['bold', 'italic', 'strike', 'underline', 'textStyle'];
 
     if (allowedMarks.includes(step.mark.type.name) && node.marks.find((mark) => mark.type === step.mark.type)) {
       const formatChangeMark = node.marks.find((mark) => mark.type.name === TrackFormatMarkName);
 
-      let after = [];
-      let before = [];
+      let after: FormatChange[] = [];
+      let before: FormatChange[] = [];
 
       if (formatChangeMark) {
-        let foundAfter = formatChangeMark.attrs.after.find((mark) => mark.type === step.mark.type.name);
+        const attrs = formatChangeMark.attrs as { before: FormatChange[]; after: FormatChange[] };
+        const foundAfter = attrs.after.find((mark) => mark.type === step.mark.type.name);
 
         if (foundAfter) {
-          after = [...formatChangeMark.attrs.after.filter((mark) => mark.type !== step.mark.type.name)];
-          before = [...formatChangeMark.attrs.before];
+          after = [...attrs.after.filter((mark) => mark.type !== step.mark.type.name)];
+          before = [...attrs.before];
         } else {
-          after = [...formatChangeMark.attrs.after];
+          after = [...attrs.after];
           before = [
-            ...formatChangeMark.attrs.before,
+            ...attrs.before,
             {
               type: step.mark.type.name,
-              attrs: { ...step.mark.attrs },
+              attrs: { ...(step.mark.attrs as Record<string, unknown>) },
             },
           ];
         }
@@ -55,7 +70,7 @@ export const removeMarkStep = ({ state, step, newTr, doc, user, date }) => {
         before = [
           {
             type: step.mark.type.name,
-            attrs: { ...step.mark.attrs },
+            attrs: { ...(step.mark.attrs as Record<string, unknown>) },
           },
         ];
       }
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceAroundStep.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceAroundStep.ts
similarity index 100%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceAroundStep.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceAroundStep.ts
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.ts
similarity index 70%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.ts
index 13fb56f4c..9084015f6 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/replaceStep.ts
@@ -1,10 +1,32 @@
-import { ReplaceStep } from 'prosemirror-transform';
+import { Mapping, ReplaceStep } from 'prosemirror-transform';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { Mark as PmMark } from 'prosemirror-model';
 import { markInsertion } from './markInsertion.js';
 import { markDeletion } from './markDeletion.js';
 import { findMark } from '@core/helpers/index.js';
 import { TrackDeleteMarkName } from '../constants.js';
 import { TrackChangesBasePluginKey } from '../plugins/index.js';
 import { CommentsPluginKey } from '../../comment/comments-plugin.js';
+import type { User } from '@core/types/EditorConfig.js';
+
+type FoundMark = {
+  from: number;
+  to: number;
+  attrs: Record<string, unknown>;
+  contained?: boolean;
+};
+
+type ReplaceStepParams = {
+  state: EditorState;
+  tr: Transaction;
+  step: ReplaceStep;
+  newTr: Transaction;
+  map: Mapping;
+  user: User;
+  date: string;
+  originalStep: ReplaceStep;
+  originalStepIndex: number;
+};
 
 /**
  * Replace step.
@@ -19,23 +41,37 @@ import { CommentsPluginKey } from '../../comment/comments-plugin.js';
  * @param {import('prosemirror-transform').ReplaceStep} options.originalStep Original step.
  * @param {number} options.originalStepIndex Original step index.
  */
-export const replaceStep = ({ state, tr, step, newTr, map, user, date, originalStep, originalStepIndex }) => {
+export const replaceStep = ({
+  state,
+  tr,
+  step,
+  newTr,
+  map,
+  user,
+  date,
+  originalStep,
+  originalStepIndex,
+}: ReplaceStepParams): void => {
   const deletionMarkSchema = state.schema.marks[TrackDeleteMarkName];
-  const deletionMark = findMark(state, deletionMarkSchema, false);
+  const deletionMarkResult = findMark(state, deletionMarkSchema, false) as FoundMark | FoundMark[] | undefined;
+  const deletionMark = Array.isArray(deletionMarkResult) ? deletionMarkResult[0] : deletionMarkResult;
   const positionTo = deletionMark ? deletionMark.to : step.to;
 
   const newStep = new ReplaceStep(
     positionTo, // We insert all the same steps, but with "from"/"to" both set to "to" in order not to delete content. Mapped as needed.
     positionTo,
     step.slice,
-    step.structure,
+    (step as ReplaceStep & { structure?: boolean }).structure,
   );
 
   // We didn't apply the original step in its original place. We adjust the map accordingly.
-  const invertStep = originalStep.invert(tr.docs[originalStepIndex]).map(map);
-  map.appendMap(invertStep.getMap());
+  const invertStep = originalStep.invert(tr.docs[originalStepIndex]);
+  const mappedInvertStep = invertStep.map(map);
+  if (mappedInvertStep) {
+    map.appendMap(mappedInvertStep.getMap());
+  }
 
-  const meta = {};
+  const meta: { insertedMark?: PmMark; step?: ReplaceStep; deletionNodes?: unknown[]; deletionMark?: unknown } = {};
   if (newStep) {
     const trTemp = state.apply(newTr).tr;
 
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.ts
similarity index 98%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.ts
index b9d2e0cf8..ef383a8af 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackChangesHelpers.test.ts
@@ -221,7 +221,7 @@ describe('trackChangesHelpers', () => {
     const initialState = createState(createDocWithText('abc'));
 
     // insertion
-    let tr = initialState.tr.insertText('Z', 2);
+    const tr = initialState.tr.insertText('Z', 2);
     tr.setMeta('inputType', 'insertText');
     const trackedInsert = trackedTransaction({ tr, state: initialState, user });
     const insertState = initialState.apply(trackedInsert);
@@ -234,7 +234,7 @@ describe('trackChangesHelpers', () => {
 
     // deletion
     const deleteState = createState(createDocWithText('abc'));
-    let deleteTr = deleteState.tr.delete(2, 3);
+    const deleteTr = deleteState.tr.delete(2, 3);
     deleteTr.setMeta('inputType', 'deleteContentBackward');
     const trackedDelete = trackedTransaction({ tr: deleteTr, state: deleteState, user });
     const finalState = deleteState.apply(trackedDelete);
@@ -259,7 +259,7 @@ describe('trackChangesHelpers', () => {
     let state = createState(createDocWithText('initial'));
 
     // Step 1: Make a normal change that SHOULD be in history
-    let tr1 = state.tr.insertText('normal', 9);
+    const tr1 = state.tr.insertText('normal', 9);
     tr1.setMeta('inputType', 'insertText');
     const tracked1 = trackedTransaction({ tr: tr1, state, user });
     state = state.apply(tracked1);
@@ -268,7 +268,7 @@ describe('trackChangesHelpers', () => {
 
     // Step 2: Make a programmatic change that should NOT be in history
     // This simulates the customer use case
-    let tr2 = state.tr.insertText('programmatic', 15);
+    const tr2 = state.tr.insertText('programmatic', 15);
     tr2.setMeta('addToHistory', false);
     tr2.setMeta('inputType', 'programmatic');
 
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.d.ts b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.d.ts
index 07e56a0a2..c073dcaaa 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.d.ts
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.d.ts
@@ -1 +1,10 @@
-export function trackedTransaction(...args: any[]): any;
+import type { Transaction, EditorState } from 'prosemirror-state';
+import type { User } from '@core/types/EditorConfig.js';
+
+export interface TrackedTransactionParams {
+  tr: Transaction;
+  state: EditorState;
+  user: User;
+}
+
+export function trackedTransaction(params: TrackedTransactionParams): Transaction;
diff --git a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.js b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.ts
similarity index 73%
rename from packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.js
rename to packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.ts
index 6ab29f93d..8383c5c96 100644
--- a/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.js
+++ b/packages/super-editor/src/extensions/track-changes/trackChangesHelpers/trackedTransaction.ts
@@ -1,25 +1,41 @@
-import { Mapping, ReplaceStep, AddMarkStep, RemoveMarkStep } from 'prosemirror-transform';
-import { TextSelection } from 'prosemirror-state';
+import { Mapping, ReplaceStep, AddMarkStep, RemoveMarkStep, type Step } from 'prosemirror-transform';
+import { TextSelection, type EditorState, type Transaction } from 'prosemirror-state';
 import { replaceStep } from './replaceStep.js';
 import { addMarkStep } from './addMarkStep.js';
 import { removeMarkStep } from './removeMarkStep.js';
 import { TrackDeleteMarkName } from '../constants.js';
 import { findMark } from '@core/helpers/index.js';
 import { CommentsPluginKey } from '../../comment/comments-plugin.js';
+import type { User } from '@core/types/EditorConfig.js';
+
+type TrackedTransactionParams = {
+  tr: Transaction;
+  state: EditorState;
+  user: User;
+};
+
+type FoundMark = {
+  from: number;
+  to: number;
+  attrs: Record<string, unknown>;
+  contained?: boolean;
+};
 
 /**
  * Tracked transaction to track changes.
  * @param {{ tr: import('prosemirror-state').Transaction; state: import('prosemirror-state').EditorState; user: import('@core/types/EditorConfig.js').User }} params
  * @returns {import('prosemirror-state').Transaction} Modified transaction.
  */
-export const trackedTransaction = ({ tr, state, user }) => {
+export const trackedTransaction = ({ tr, state, user }: TrackedTransactionParams): Transaction => {
   const onlyInputTypeMeta = ['inputType', 'uiEvent', 'paste', 'pointer'];
   const notAllowedMeta = ['historyUndo', 'historyRedo', 'acceptReject'];
   const isProgrammaticInput = tr.getMeta('inputType') === 'programmatic';
+  const metaKeys = Object.keys((tr as unknown as { meta?: Record<string, unknown> }).meta || {});
+  const hasUnexpectedMeta = metaKeys.length > 0 && !metaKeys.every((meta) => onlyInputTypeMeta.includes(meta));
 
   if (
     !tr.steps.length ||
-    (tr.meta && !Object.keys(tr.meta).every((meta) => onlyInputTypeMeta.includes(meta)) && !isProgrammaticInput) ||
+    (hasUnexpectedMeta && !isProgrammaticInput) ||
     notAllowedMeta.includes(tr.getMeta('inputType')) ||
     tr.getMeta(CommentsPluginKey) // Skip if it's a comment transaction.
   ) {
@@ -31,7 +47,7 @@ export const trackedTransaction = ({ tr, state, user }) => {
   const fixedTimeTo10Mins = Math.floor(Date.now() / 600000) * 600000;
   const date = new Date(fixedTimeTo10Mins).toISOString();
 
-  tr.steps.forEach((originalStep, originalStepIndex) => {
+  tr.steps.forEach((originalStep: Step, originalStepIndex: number) => {
     const step = originalStep.map(map);
     const { doc } = newTr;
 
@@ -40,25 +56,23 @@ export const trackedTransaction = ({ tr, state, user }) => {
     }
 
     if (step instanceof ReplaceStep) {
+      const originalReplaceStep = originalStep as ReplaceStep;
       replaceStep({
         state,
         tr,
         step,
         newTr,
         map,
-        doc,
         user,
         date,
-        originalStep,
+        originalStep: originalReplaceStep,
         originalStepIndex,
       });
     } else if (step instanceof AddMarkStep) {
       addMarkStep({
         state,
-        tr,
         step,
         newTr,
-        map,
         doc,
         user,
         date,
@@ -66,10 +80,8 @@ export const trackedTransaction = ({ tr, state, user }) => {
     } else if (step instanceof RemoveMarkStep) {
       removeMarkStep({
         state,
-        tr,
         step,
         newTr,
-        map,
         doc,
         user,
         date,
@@ -93,7 +105,8 @@ export const trackedTransaction = ({ tr, state, user }) => {
 
   if (tr.selectionSet) {
     const deletionMarkSchema = state.schema.marks[TrackDeleteMarkName];
-    const deletionMark = findMark(state, deletionMarkSchema, false);
+    const deletionMarkResult = findMark(state, deletionMarkSchema, false) as FoundMark | FoundMark[] | undefined;
+    const deletionMark = Array.isArray(deletionMarkResult) ? deletionMarkResult[0] : deletionMarkResult;
 
     if (
       tr.selection instanceof TextSelection &&
diff --git a/packages/super-editor/src/extensions/types/extension-command-map.ts b/packages/super-editor/src/extensions/types/extension-command-map.ts
new file mode 100644
index 000000000..3280b39bf
--- /dev/null
+++ b/packages/super-editor/src/extensions/types/extension-command-map.ts
@@ -0,0 +1,20 @@
+import type { FormattingCommandAugmentations } from './formatting-commands.js';
+import type { HistoryLinkTableCommandAugmentations } from './history-link-table-commands.js';
+import type { SpecializedCommandAugmentations } from './specialized-commands.js';
+
+/**
+ * Unified command augmentation for all extensions.
+ * Centralizing module augmentation helps keep `ExtensionCommandMap`
+ * discoverable instead of spreading declarations across multiple files.
+ */
+export type ExtensionCommandAugmentations = FormattingCommandAugmentations &
+  HistoryLinkTableCommandAugmentations &
+  SpecializedCommandAugmentations;
+
+declare module '@core/types/ChainedCommands.js' {
+  interface ExtensionCommandMap extends ExtensionCommandAugmentations {}
+}
+
+declare module '@core/types/ChainedCommands' {
+  interface ExtensionCommandMap extends ExtensionCommandAugmentations {}
+}
diff --git a/packages/super-editor/src/extensions/types/formatting-commands.ts b/packages/super-editor/src/extensions/types/formatting-commands.ts
index 88afea8ec..604ae1fc3 100644
--- a/packages/super-editor/src/extensions/types/formatting-commands.ts
+++ b/packages/super-editor/src/extensions/types/formatting-commands.ts
@@ -44,11 +44,3 @@ export interface FormattingCommandAugmentations {
   setTextAlign: (alignment: string) => boolean;
   unsetTextAlign: () => boolean;
 }
-
-declare module '@core/types/ChainedCommands.js' {
-  interface ExtensionCommandMap extends FormattingCommandAugmentations {}
-}
-
-declare module '@core/types/ChainedCommands' {
-  interface ExtensionCommandMap extends FormattingCommandAugmentations {}
-}
diff --git a/packages/super-editor/src/extensions/types/history-link-table-commands.ts b/packages/super-editor/src/extensions/types/history-link-table-commands.ts
index 6201ccbe4..b77caec58 100644
--- a/packages/super-editor/src/extensions/types/history-link-table-commands.ts
+++ b/packages/super-editor/src/extensions/types/history-link-table-commands.ts
@@ -14,6 +14,7 @@ export interface HistoryLinkTableCommandAugmentations {
     tableNode?: unknown;
     valueRows?: unknown[][];
     copyRowStyle?: boolean;
+    dispatch?: boolean;
   }) => boolean;
   insertTable: (config?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => boolean;
   deleteTable: () => boolean;
@@ -38,11 +39,3 @@ export interface HistoryLinkTableCommandAugmentations {
   setCellBackground: (value: string) => boolean;
   deleteCellAndTableBorders: () => boolean;
 }
-
-declare module '@core/types/ChainedCommands.js' {
-  interface ExtensionCommandMap extends HistoryLinkTableCommandAugmentations {}
-}
-
-declare module '@core/types/ChainedCommands' {
-  interface ExtensionCommandMap extends HistoryLinkTableCommandAugmentations {}
-}
diff --git a/packages/super-editor/src/extensions/types/specialized-commands.ts b/packages/super-editor/src/extensions/types/specialized-commands.ts
index 0ee0e44b3..54f77ba0b 100644
--- a/packages/super-editor/src/extensions/types/specialized-commands.ts
+++ b/packages/super-editor/src/extensions/types/specialized-commands.ts
@@ -86,11 +86,3 @@ export interface SpecializedCommandAugmentations {
   deleteStructuredContentAtSelection: () => boolean;
   appendRowsToStructuredContentTable: (options: StructuredContentTableAppendOptions) => boolean;
 }
-
-declare module '@core/types/ChainedCommands.js' {
-  interface ExtensionCommandMap extends SpecializedCommandAugmentations {}
-}
-
-declare module '@core/types/ChainedCommands' {
-  interface ExtensionCommandMap extends SpecializedCommandAugmentations {}
-}
diff --git a/packages/super-editor/src/extensions/underline/index.js b/packages/super-editor/src/extensions/underline/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/underline/index.js
rename to packages/super-editor/src/extensions/underline/index.ts
diff --git a/packages/super-editor/src/extensions/underline/underline.js b/packages/super-editor/src/extensions/underline/underline.ts
similarity index 63%
rename from packages/super-editor/src/extensions/underline/underline.js
rename to packages/super-editor/src/extensions/underline/underline.ts
index 23651fecc..377811e33 100644
--- a/packages/super-editor/src/extensions/underline/underline.js
+++ b/packages/super-editor/src/extensions/underline/underline.ts
@@ -1,27 +1,18 @@
-// @ts-nocheck
 import { Mark, Attribute } from '@core/index.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec, Mark as PmMark } from 'prosemirror-model';
 import { getUnderlineCssString } from '@extensions/linked-styles/index.js';
 import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.js';
 
-/**
- * Underline style configuration
- * @typedef {Object} UnderlineConfig
- * @property {'single'|'double'|'thick'|'dotted'|'dashed'|'wavy'} value - Style variant
- */
-
 /**
  * Configuration options for Underline
- * @typedef {Object} UnderlineOptions
  * @category Options
- * @property {Object} [htmlAttributes={}] - HTML attributes for underline elements
  */
+interface UnderlineOptions extends Record<string, unknown> {
+  /** HTML attributes for underline elements */
+  htmlAttributes: Record<string, AttributeValue>;
+}
 
-/**
- * Attributes for underline marks
- * @typedef {Object} UnderlineAttributes
- * @category Attributes
- * @property {UnderlineConfig} [underlineType='single'] - Style of underline
- */
 /**
  * @module Underline
  * @sidebarTitle Underline
@@ -29,7 +20,7 @@ import { createCascadeToggleCommands } from '@extensions/shared/cascade-toggle.j
  * @shortcut Mod-u | toggleUnderline | Toggle underline formatting
  * @shortcut Mod-U | toggleUnderline | Toggle underline formatting (uppercase)
  */
-export const Underline = Mark.create({
+export const Underline = Mark.create<UnderlineOptions>({
   name: 'underline',
 
   addOptions() {
@@ -42,15 +33,24 @@ export const Underline = Mark.create({
     return [
       { tag: 'u' },
       { style: 'text-decoration=underline' },
-      { style: 'text-decoration=auto', clearMark: (m) => m.type.name == 'u' },
+      { style: 'text-decoration=auto', clearMark: (m: PmMark) => m.type.name === 'u' },
     ];
   },
 
-  renderDOM({ htmlAttributes }) {
-    const merged = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-    const type = merged?.underlineType;
-    const color = merged?.underlineColor;
-    const css = getUnderlineCssString({ type, color });
+  renderDOM(
+    this: Mark<UnderlineOptions>,
+    { htmlAttributes }: { htmlAttributes: Record<string, AttributeValue> },
+  ): DOMOutputSpec {
+    const merged = Attribute.mergeAttributes(
+      this.options.htmlAttributes as Record<string, AttributeValue>,
+      htmlAttributes,
+    );
+    const type = typeof merged?.underlineType === 'string' ? merged.underlineType : undefined;
+    const color = typeof merged?.underlineColor === 'string' ? merged.underlineColor : null;
+    const css = (getUnderlineCssString as (params: { type?: string; color?: string | null }) => string)({
+      type,
+      color,
+    });
 
     // strip custom attribute and merge computed style
     const { style, ...rest } = merged || {};
@@ -115,9 +115,10 @@ export const Underline = Mark.create({
   },
 
   addShortcuts() {
+    const editor = (this as unknown as { editor?: { commands?: { toggleUnderline: () => boolean } } }).editor;
     return {
-      'Mod-u': () => this.editor.commands.toggleUnderline(),
-      'Mod-U': () => this.editor.commands.toggleUnderline(),
+      'Mod-u': () => editor?.commands?.toggleUnderline() ?? false,
+      'Mod-U': () => editor?.commands?.toggleUnderline() ?? false,
     };
   },
 });
diff --git a/packages/super-editor/src/extensions/vector-shape/VectorShapeView.test.js b/packages/super-editor/src/extensions/vector-shape/VectorShapeView.test.ts
similarity index 100%
rename from packages/super-editor/src/extensions/vector-shape/VectorShapeView.test.js
rename to packages/super-editor/src/extensions/vector-shape/VectorShapeView.test.ts
diff --git a/packages/super-editor/src/extensions/vector-shape/VectorShapeView.js b/packages/super-editor/src/extensions/vector-shape/VectorShapeView.ts
similarity index 73%
rename from packages/super-editor/src/extensions/vector-shape/VectorShapeView.js
rename to packages/super-editor/src/extensions/vector-shape/VectorShapeView.ts
index a7fa21514..88dcb734f 100644
--- a/packages/super-editor/src/extensions/vector-shape/VectorShapeView.js
+++ b/packages/super-editor/src/extensions/vector-shape/VectorShapeView.ts
@@ -1,4 +1,3 @@
-// @ts-expect-error - preset-geometry package may not have type definitions
 import { getPresetShapeSvg } from '@superdoc/preset-geometry';
 import { inchesToPixels } from '@converter/helpers.js';
 import {
@@ -8,42 +7,88 @@ import {
   applyAlphaToSVG,
   generateTransforms,
 } from '../shared/svg-utils.js';
+import type { GradientData, AlphaData, TextContent, TextAlign } from '../shared/svg-utils.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { Decoration, DecorationSource, EditorView, NodeView } from 'prosemirror-view';
+
+type PageMargins = { left?: number };
+type PageStyles = { pageMargins?: PageMargins };
+type VectorShapeEditor = {
+  view: EditorView;
+  converter?: { pageStyles?: PageStyles };
+  options?: { parentEditor?: { converter?: { pageStyles?: PageStyles } } };
+};
+
+type GradientFill = GradientData & { type: 'gradient' };
+type SolidWithAlphaFill = { type: 'solidWithAlpha'; color: string; alpha: number };
+type VectorShapeFill = string | GradientFill | SolidWithAlphaFill | null | undefined;
+
+type WrapData = { type?: string; attrs?: { behindDoc?: boolean } };
+type MarginOffset = { horizontal?: number; top?: number; bottom?: number };
+type AnchorData = { hRelativeFrom?: string; alignH?: string };
+
+type VectorShapeAttributes = {
+  kind: string;
+  width: number;
+  height: number;
+  fillColor?: VectorShapeFill;
+  strokeColor?: string | null;
+  strokeWidth?: number | null;
+  wrap?: WrapData;
+  anchorData?: AnchorData | null;
+  marginOffset?: MarginOffset | null;
+  originalAttributes?: { relativeHeight?: number } | null;
+  textContent?: TextContent | null;
+  textAlign?: TextAlign;
+  [key: string]: unknown;
+};
+
+const isGradientFill = (fill: VectorShapeFill): fill is GradientFill => {
+  return Boolean(fill && typeof fill === 'object' && 'type' in fill && fill.type === 'gradient');
+};
+
+const isSolidAlphaFill = (fill: VectorShapeFill): fill is SolidWithAlphaFill => {
+  return Boolean(fill && typeof fill === 'object' && 'type' in fill && fill.type === 'solidWithAlpha');
+};
 
 /**
  * Scaling factor to convert OOXML relativeHeight values to CSS z-index range.
- * OOXML uses large numbers (e.g., 251659318), so we scale down by dividing by this factor.
- * This ensures proper z-ordering of overlapping elements while staying within reasonable CSS limits.
  */
 const Z_INDEX_SCALE_FACTOR = 1000000;
 
-export class VectorShapeView {
-  node;
-
-  view;
-
-  getPos;
-
-  decorations;
-
-  innerDecorations;
-
-  editor;
-
-  extension;
-
-  htmlAttributes;
-
-  root;
+export interface VectorShapeViewProps {
+  node: PmNode;
+  view: EditorView;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
+  editor?: VectorShapeEditor;
+  extension?: unknown;
+  htmlAttributes?: Record<string, AttributeValue>;
+}
 
-  constructor(props) {
+export class VectorShapeView implements NodeView {
+  node: PmNode;
+  view: EditorView;
+  getPos: () => number | undefined;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
+  editor: VectorShapeEditor;
+  extension: unknown;
+  htmlAttributes: Record<string, AttributeValue>;
+  root: HTMLElement | null;
+
+  constructor(props: VectorShapeViewProps) {
     this.node = props.node;
-    this.view = props.editor.view;
+    this.view = props.editor?.view ?? props.view;
     this.getPos = props.getPos;
     this.decorations = props.decorations;
     this.innerDecorations = props.innerDecorations;
-    this.editor = props.editor;
-    this.extension = props.extension;
-    this.htmlAttributes = props.htmlAttributes;
+    this.editor = props.editor ?? { view: props.view };
+    this.extension = props.extension ?? null;
+    this.htmlAttributes = props.htmlAttributes || {};
+    this.root = null;
 
     this.mount();
   }
@@ -92,15 +137,15 @@ export class VectorShapeView {
   }
 
   get dom() {
-    return this.root;
+    return this.root as HTMLElement;
   }
 
   get contentDOM() {
     return null;
   }
 
-  createElement() {
-    const attrs = this.node.attrs;
+  createElement(): { element: HTMLElement } {
+    const attrs = this.node.attrs as VectorShapeAttributes;
 
     const element = document.createElement('span');
     element.classList.add('sd-vector-shape');
@@ -158,7 +203,7 @@ export class VectorShapeView {
     return { element };
   }
 
-  getPositioningStyle(attrs) {
+  getPositioningStyle(attrs: VectorShapeAttributes): string {
     const { anchorData, marginOffset, wrap, originalAttributes } = attrs;
 
     if (!anchorData && !marginOffset?.horizontal && !marginOffset?.top) {
@@ -278,7 +323,7 @@ export class VectorShapeView {
     return generateTransforms(this.node.attrs);
   }
 
-  createSVGElement(attrs) {
+  createSVGElement(attrs: VectorShapeAttributes) {
     const { kind, fillColor, strokeColor, strokeWidth, width, height } = attrs;
 
     // Create SVG with proper dimensions (no viewBox distortion)
@@ -297,19 +342,17 @@ export class VectorShapeView {
     let fillOpacity = 1;
 
     if (fillColor) {
-      if (typeof fillColor === 'object') {
-        if (fillColor.type === 'gradient') {
-          const gradientId = `gradient-${Math.random().toString(36).slice(2, 11)}-${Date.now()}`;
-          const gradient = this.createGradient(fillColor, gradientId);
-          if (gradient) {
-            defs.appendChild(gradient);
-            fill = `url(#${gradientId})`;
-          }
-        } else if (fillColor.type === 'solidWithAlpha') {
-          fill = fillColor.color;
-          fillOpacity = fillColor.alpha;
+      if (isGradientFill(fillColor)) {
+        const gradientId = `gradient-${Math.random().toString(36).slice(2, 11)}-${Date.now()}`;
+        const gradient = this.createGradient(fillColor, gradientId);
+        if (gradient) {
+          defs.appendChild(gradient);
+          fill = `url(#${gradientId})`;
         }
-      } else {
+      } else if (isSolidAlphaFill(fillColor)) {
+        fill = fillColor.color;
+        fillOpacity = fillColor.alpha;
+      } else if (typeof fillColor === 'string') {
         fill = fillColor;
       }
     }
@@ -397,47 +440,74 @@ export class VectorShapeView {
     return svg;
   }
 
-  createGradient(gradientData, gradientId) {
+  createGradient(gradientData: GradientData | null | undefined, gradientId: string): SVGGradientElement | null {
+    if (!gradientData) return null;
     return createGradient(gradientData, gradientId);
   }
 
-  generateSVG({ kind, fillColor, strokeColor, strokeWidth, width, height }) {
+  generateSVG({
+    kind,
+    fillColor,
+    strokeColor,
+    strokeWidth,
+    width,
+    height,
+  }: {
+    kind: string;
+    fillColor?: VectorShapeFill;
+    strokeColor?: string | null;
+    strokeWidth?: number | null;
+    width: number;
+    height: number;
+  }): string | null {
     try {
-      // For complex fill types (gradients, alpha), use a placeholder or extract the color
-      let fill = fillColor || 'none';
-      if (fillColor && typeof fillColor === 'object') {
-        if (fillColor.type === 'gradient') {
-          fill = '#cccccc'; // Placeholder for gradients
-        } else if (fillColor.type === 'solidWithAlpha') {
-          fill = fillColor.color; // Use the actual color, alpha will be applied separately
-        }
+      let fill = 'none';
+      if (typeof fillColor === 'string') {
+        fill = fillColor;
+      } else if (isSolidAlphaFill(fillColor)) {
+        fill = fillColor.color;
+      } else if (isGradientFill(fillColor)) {
+        fill = '#cccccc';
       }
 
-      return getPresetShapeSvg({
+      const presetOptions = {
         preset: kind,
         styleOverrides: {
           fill,
           stroke: strokeColor || 'none',
-          strokeWidth: strokeWidth || 0,
+          strokeWidth: strokeColor === null ? 0 : strokeWidth || 0,
         },
         width,
         height,
-      });
+      };
+
+      return getPresetShapeSvg(presetOptions as unknown as Parameters<typeof getPresetShapeSvg>[0]);
     } catch {
       return null;
     }
   }
 
-  applyGradientToSVG(svg, gradientData) {
-    applyGradientToSVG(svg, gradientData);
+  applyGradientToSVG(svg: SVGElement, gradientData: GradientData | null | undefined) {
+    if (gradientData) {
+      applyGradientToSVG(svg, gradientData);
+    }
   }
 
-  applyAlphaToSVG(svg, alphaData) {
-    applyAlphaToSVG(svg, alphaData);
+  applyAlphaToSVG(svg: SVGElement, alphaData: AlphaData | null | undefined) {
+    if (alphaData) {
+      applyAlphaToSVG(svg, alphaData);
+    }
   }
 
-  createTextElement(textContent, textAlign, width, height) {
-    return createTextElement(textContent, textAlign, width, height);
+  createTextElement(
+    textContent: TextContent | null | undefined,
+    textAlign: TextAlign | null | undefined,
+    width: number,
+    height: number,
+  ): SVGForeignObjectElement | null {
+    if (!textContent) return null;
+    const align = (textAlign ?? 'left') as TextAlign;
+    return createTextElement(textContent, align, width, height);
   }
 
   buildView() {
@@ -445,7 +515,7 @@ export class VectorShapeView {
     this.root = element;
   }
 
-  update() {
+  update(): boolean {
     // Recreate the NodeView.
     return false;
   }
diff --git a/packages/super-editor/src/extensions/vector-shape/index.js b/packages/super-editor/src/extensions/vector-shape/index.ts
similarity index 100%
rename from packages/super-editor/src/extensions/vector-shape/index.js
rename to packages/super-editor/src/extensions/vector-shape/index.ts
diff --git a/packages/super-editor/src/extensions/vector-shape/vector-shape.js b/packages/super-editor/src/extensions/vector-shape/vector-shape.ts
similarity index 59%
rename from packages/super-editor/src/extensions/vector-shape/vector-shape.js
rename to packages/super-editor/src/extensions/vector-shape/vector-shape.ts
index 4f9f5b3d1..a54b4b98d 100644
--- a/packages/super-editor/src/extensions/vector-shape/vector-shape.js
+++ b/packages/super-editor/src/extensions/vector-shape/vector-shape.ts
@@ -1,7 +1,26 @@
-import { Node, Attribute } from '@core/index';
-import { VectorShapeView } from './VectorShapeView';
-
-export const VectorShape = Node.create({
+import { Node, Attribute } from '@core/index.js';
+import { VectorShapeView, type VectorShapeViewProps } from './VectorShapeView.js';
+import type { AttributeValue } from '@core/Attribute.js';
+import type { DOMOutputSpec } from 'prosemirror-model';
+import type { NodeView } from 'prosemirror-view';
+
+interface VectorShapeOptions extends Record<string, unknown> {
+  htmlAttributes: Record<string, AttributeValue>;
+}
+
+type VectorShapeAttrs = {
+  kind?: string;
+  width?: number | null;
+  height?: number | null;
+  fillColor?: string | null;
+  strokeColor?: string | null;
+  strokeWidth?: number | null;
+  rotation?: number | null;
+  flipH?: boolean | null;
+  flipV?: boolean | null;
+};
+
+export const VectorShape = Node.create<VectorShapeOptions>({
   name: 'vectorShape',
 
   group: 'inline',
@@ -20,7 +39,7 @@ export const VectorShape = Node.create({
     return {
       kind: {
         default: 'rect',
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (!attrs.kind) return {};
           return { 'data-kind': attrs.kind };
         },
@@ -28,7 +47,7 @@ export const VectorShape = Node.create({
 
       width: {
         default: 100,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (attrs.width == null) return {};
           return { 'data-width': attrs.width };
         },
@@ -36,7 +55,7 @@ export const VectorShape = Node.create({
 
       height: {
         default: 100,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (attrs.height == null) return {};
           return { 'data-height': attrs.height };
         },
@@ -44,7 +63,7 @@ export const VectorShape = Node.create({
 
       fillColor: {
         default: '#5b9bd5',
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (!attrs.fillColor) return {};
           return { 'data-fill-color': attrs.fillColor };
         },
@@ -52,7 +71,7 @@ export const VectorShape = Node.create({
 
       strokeColor: {
         default: '#000000',
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (!attrs.strokeColor) return {};
           return { 'data-stroke-color': attrs.strokeColor };
         },
@@ -60,7 +79,7 @@ export const VectorShape = Node.create({
 
       strokeWidth: {
         default: 1,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (attrs.strokeWidth == null) return {};
           return { 'data-stroke-width': attrs.strokeWidth };
         },
@@ -68,7 +87,7 @@ export const VectorShape = Node.create({
 
       rotation: {
         default: 0,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (attrs.rotation == null) return {};
           return { 'data-rotation': attrs.rotation };
         },
@@ -76,7 +95,7 @@ export const VectorShape = Node.create({
 
       flipH: {
         default: false,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (!attrs.flipH) return {};
           return { 'data-flip-h': attrs.flipH };
         },
@@ -84,7 +103,7 @@ export const VectorShape = Node.create({
 
       flipV: {
         default: false,
-        renderDOM: (attrs) => {
+        renderDOM: (attrs: VectorShapeAttrs) => {
           if (!attrs.flipV) return {};
           return { 'data-flip-v': attrs.flipV };
         },
@@ -140,18 +159,23 @@ export const VectorShape = Node.create({
   },
 
   parseDOM() {
-    return false;
+    return [];
   },
 
-  renderDOM({ htmlAttributes }) {
+  renderDOM(this: Node<VectorShapeOptions>, ...args: unknown[]): DOMOutputSpec {
+    const [{ htmlAttributes } = { htmlAttributes: {} as Record<string, AttributeValue> }] = args as [
+      { htmlAttributes?: Record<string, AttributeValue> }?,
+    ];
     return [
       'span',
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { 'data-vector-shape': '' }),
+      Attribute.mergeAttributes(this.options.htmlAttributes as Record<string, AttributeValue>, htmlAttributes || {}, {
+        'data-vector-shape': '',
+      }),
     ];
   },
 
   addNodeView() {
-    return (props) => {
+    return (props: VectorShapeViewProps): NodeView | null => {
       return new VectorShapeView({ ...props });
     };
   },
diff --git a/packages/super-editor/src/index.js b/packages/super-editor/src/index.ts
similarity index 100%
rename from packages/super-editor/src/index.js
rename to packages/super-editor/src/index.ts
diff --git a/packages/super-editor/src/main.js b/packages/super-editor/src/main.ts
similarity index 100%
rename from packages/super-editor/src/main.js
rename to packages/super-editor/src/main.ts
diff --git a/packages/super-editor/src/tests/export/lists/basicOrderedListExport.test.js b/packages/super-editor/src/tests/export/lists/basicOrderedListExport.test.js
index eb3c08fff..46022c6ad 100644
--- a/packages/super-editor/src/tests/export/lists/basicOrderedListExport.test.js
+++ b/packages/super-editor/src/tests/export/lists/basicOrderedListExport.test.js
@@ -168,6 +168,7 @@ describe('[base-custom.docx] Can import and import the custom lists', () => {
       justification: 'left',
       path: [2, 1],
       numberingType: 'decimal',
+      suffix: null,
     });
     const paragraphText = extractParagraphText(item1);
     expect(paragraphText).toBe('2.1');
diff --git a/packages/super-editor/src/tests/export/lists/testComplexListIssues.test.js b/packages/super-editor/src/tests/export/lists/testComplexListIssues.test.js
index 7f1bb8e47..0e25c1d87 100644
--- a/packages/super-editor/src/tests/export/lists/testComplexListIssues.test.js
+++ b/packages/super-editor/src/tests/export/lists/testComplexListIssues.test.js
@@ -27,6 +27,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1],
       numberingType: 'decimal',
+      suffix: null,
     });
     expect(listItem.attrs.paragraphProperties?.numberingProperties).toEqual({
       ilvl: 0,
@@ -41,6 +42,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1, 1],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
 
     const subItem2 = currentState.content[3];
@@ -49,6 +51,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1, 2],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
 
     const subItem3 = currentState.content[5];
@@ -57,6 +60,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1, 3],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
     const subItem4 = currentState.content[7];
     expect(subItem4.attrs.listRendering).toEqual({
@@ -64,6 +68,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1, 4],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
   });
 
@@ -83,7 +88,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [3, 2],
       numberingType: 'lowerLetter',
-      suffix: undefined,
+      suffix: null,
     });
 
     const subItem4 = currentState.content[23];
@@ -93,7 +98,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [3, 3],
       numberingType: 'lowerLetter',
-      suffix: undefined,
+      suffix: null,
     });
   });
 
@@ -106,6 +111,7 @@ describe('[complex-list-def-issue.docx] importing complex list (repeated num id
       justification: 'left',
       path: [4],
       numberingType: 'decimal',
+      suffix: null,
     });
 
     const runNode = listItem.content[0];
@@ -177,6 +183,7 @@ describe('[custom-list-numbering1.docx] importing complex list (repeated num id
       justification: 'left',
       path: [1, 1],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
   });
 });
diff --git a/packages/super-editor/src/tests/import/listImporterBasic.test.js b/packages/super-editor/src/tests/import/listImporterBasic.test.js
index 99df3e736..3650b67c8 100644
--- a/packages/super-editor/src/tests/import/listImporterBasic.test.js
+++ b/packages/super-editor/src/tests/import/listImporterBasic.test.js
@@ -24,6 +24,7 @@ describe('[sublist-issue.docx] Imports sublist with numId issue', () => {
       justification: 'right',
       path: [1],
       numberingType: 'decimal',
+      suffix: null,
     });
   });
 
@@ -38,6 +39,7 @@ describe('[sublist-issue.docx] Imports sublist with numId issue', () => {
       justification: 'right',
       path: [2],
       numberingType: 'decimal',
+      suffix: null,
     });
 
     // Ensure we're importing the empty paragraprh
@@ -57,6 +59,7 @@ describe('[sublist-issue.docx] Imports sublist with numId issue', () => {
       justification: 'left',
       path: [1],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
   });
 });
diff --git a/packages/super-editor/src/tests/import/listImporterCustomLists.test.js b/packages/super-editor/src/tests/import/listImporterCustomLists.test.js
index d445f1bea..019060eb3 100644
--- a/packages/super-editor/src/tests/import/listImporterCustomLists.test.js
+++ b/packages/super-editor/src/tests/import/listImporterCustomLists.test.js
@@ -99,6 +99,7 @@ describe('[broken-complex-list.docx] Tests with repeated list numbering item and
       justification: 'left',
       path: [1],
       numberingType: 'decimal',
+      suffix: null,
     });
     expect(item.attrs.paragraphProperties?.numberingProperties).toEqual({
       ilvl: 0,
@@ -119,6 +120,7 @@ describe('[broken-complex-list.docx] Tests with repeated list numbering item and
       justification: 'left',
       path: [1, 1],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
     expect(item.attrs.paragraphProperties?.numberingProperties).toEqual({
       ilvl: 1,
@@ -189,6 +191,7 @@ describe('[broken-complex-list.docx] Tests with repeated list numbering item and
       justification: 'left',
       path: [1, 3],
       numberingType: 'lowerLetter',
+      suffix: null,
     });
     expect(item.attrs.paragraphProperties?.numberingProperties).toEqual({
       ilvl: 1,
@@ -225,6 +228,7 @@ describe('[broken-list.docx] Test list breaking indentation formatting', () => {
       justification: 'left',
       path: [1],
       numberingType: 'decimal',
+      suffix: null,
     });
     expect(attrs.paragraphProperties?.numberingProperties).toEqual({
       ilvl: 0,
diff --git a/packages/super-editor/src/types/ambient.d.ts b/packages/super-editor/src/types/ambient.d.ts
new file mode 100644
index 000000000..eea483246
--- /dev/null
+++ b/packages/super-editor/src/types/ambient.d.ts
@@ -0,0 +1,227 @@
+// Temporary ambient declarations for modules that need type declarations
+// SVG imports with ?raw suffix
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}
+
+// Generic SVG imports
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+// Vue component declarations for relative imports
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+// Path alias declarations
+declare module '@/utils/headless-helpers.js' {
+  import type { Editor } from '../core/Editor.js';
+  export const isHeadless: (editor: Editor | null | undefined) => boolean;
+  export const shouldSkipNodeView: (editor: Editor | null | undefined) => boolean;
+}
+
+declare module '@/utils/headless-helpers' {
+  import type { Editor } from '../core/Editor.js';
+  export const isHeadless: (editor: Editor | null | undefined) => boolean;
+  export const shouldSkipNodeView: (editor: Editor | null | undefined) => boolean;
+}
+
+declare module '@superdoc/common/icons/*.svg?raw' {
+  const content: string;
+  export default content;
+}
+
+declare module '@superdoc/preset-geometry' {
+  export interface PresetShapePath {
+    d: string;
+    fill: string;
+    stroke: string;
+  }
+
+  export interface PresetShape {
+    preset: string;
+    viewBox: string;
+    paths: PresetShapePath[];
+  }
+
+  export interface StyleOverrides {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+  }
+
+  export interface GetPresetShapeSvgOptions {
+    preset: string;
+    styleOverrides?: () => StyleOverrides;
+  }
+
+  export function createPresetShape(presetName: string): PresetShape;
+  export function getPresetShapeSvg(options: string | GetPresetShapeSvgOptions): string;
+  export function listPresetNames(): string[];
+}
+
+declare module '@superdoc/url-validation' {
+  export type Protocol = 'http' | 'https' | 'mailto' | 'tel' | 'sms' | 'ftp' | 'sftp' | 'irc';
+
+  export type SanitizerConfig = {
+    allowedProtocols?: Protocol[];
+    optionalProtocols?: Protocol[];
+    blockedProtocols?: Protocol[];
+    redirectBlocklist?: string[];
+    maxLength?: number;
+  };
+
+  export type SanitizedLink = {
+    href: string;
+    protocol: string | null;
+    isExternal: boolean;
+  };
+
+  export type EncodedTooltip = {
+    text: string;
+    wasTruncated: boolean;
+  };
+
+  export function sanitizeHref(raw: string | null | undefined, config?: SanitizerConfig): SanitizedLink | null;
+  export function encodeTooltip(raw: string | null | undefined, maxLength?: number): EncodedTooltip | null;
+
+  export const DEFAULT_TOOLTIP_MAX_LENGTH: number;
+
+  export const UrlValidationConstants: {
+    DEFAULT_ALLOWED_PROTOCOLS: string[];
+    OPTIONAL_PROTOCOLS: string[];
+    BLOCKED_PROTOCOLS: string[];
+    DEFAULT_MAX_LENGTH: number;
+  };
+}
+
+declare module './extensions/index.js' {
+  const value: any;
+  export default value;
+  export const getStarterExtensions: any;
+  export const getRichTextExtensions: any;
+}
+
+declare module './core/super-converter/SuperConverter' {
+  export class SuperConverter {
+    [key: string]: any;
+  }
+}
+
+declare module './core/super-converter/zipper.js' {
+  export const createZip: any;
+}
+
+declare module './extensions/image/imageHelpers/processUploadedImage.js' {
+  export const getAllowedImageDimensions: any;
+}
+
+declare module './extensions/field-annotation/fieldAnnotationHelpers/index.js' {
+  export const fieldAnnotationHelpers: any;
+}
+
+declare module './extensions/track-changes/trackChangesHelpers/index.js' {
+  export const trackChangesHelpers: any;
+}
+
+declare module './extensions/track-changes/plugins/index.js' {
+  export const TrackChangesBasePluginKey: any;
+}
+
+declare module './extensions/comment/comments-plugin.js' {
+  export const CommentsPluginKey: any;
+}
+
+declare module '@helpers/annotator.js' {
+  export const AnnotatorHelpers: any;
+}
+
+declare module '@extensions/structured-content/document-section/index.js' {
+  export const SectionHelpers: any;
+}
+
+declare module './core/super-converter/v3/handlers/index.js' {
+  export const registeredHandlers: any;
+}
+
+declare module './components/toolbar/super-toolbar.js' {
+  export const SuperToolbar: any;
+}
+
+declare module '@superdoc/common/components/BasicUpload.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module './components/slash-menu/SlashMenu.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module './components/SuperEditor.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module './components/toolbar/Toolbar.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module './components/SuperInput.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module './components/toolbar/AIWriter.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+// Path aliases for @ imports
+declare module '@/index.js' {
+  export * from '../index.js';
+}
+
+declare module '@/core/PresentationEditor.js' {
+  export * from '../core/PresentationEditor.js';
+}
+
+declare module '@/core/Editor.js' {
+  export * from '../core/Editor.js';
+}
+
+declare module '@/core/helpers/getMarkRange.js' {
+  export * from '../core/helpers/getMarkRange.js';
+}
+
+declare module '@/utils/styleIsolation.js' {
+  export const createElementInContext: any;
+  export const createStyleContext: any;
+}
+
+// External module declarations
+declare module '@superdoc/common/data/blank.docx?url' {
+  const url: string;
+  export default url;
+}
+
+declare module '@superdoc/common/icons/*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '@tiptap/pm/model' {
+  export * from 'prosemirror-model';
+}
diff --git a/packages/super-editor/src/types/docx-helpers.d.ts b/packages/super-editor/src/types/docx-helpers.d.ts
new file mode 100644
index 000000000..9544ae356
--- /dev/null
+++ b/packages/super-editor/src/types/docx-helpers.d.ts
@@ -0,0 +1,3 @@
+declare module '@core/super-converter/docx-helpers/document-rels.js' {
+  export function insertNewRelationship(target: string, type: string, editor: unknown): string | null;
+}
diff --git a/packages/super-editor/src/types/pm-adapter-shim.d.ts b/packages/super-editor/src/types/pm-adapter-shim.d.ts
new file mode 100644
index 000000000..b3c33e93c
--- /dev/null
+++ b/packages/super-editor/src/types/pm-adapter-shim.d.ts
@@ -0,0 +1 @@
+export const toFlowBlocks: any;
diff --git a/packages/super-editor/src/types/superdoc-contracts.d.ts b/packages/super-editor/src/types/superdoc-contracts.d.ts
new file mode 100644
index 000000000..64194e98f
--- /dev/null
+++ b/packages/super-editor/src/types/superdoc-contracts.d.ts
@@ -0,0 +1,17 @@
+export type ColumnLayout = any;
+export type FlowBlock = any;
+export type Layout = any;
+export type Measure = any;
+export type Page = any;
+export type SectionMetadata = any;
+export type Line = any;
+export type TrackedChangesMode = any;
+export type ParaFragment = any;
+export type Fragment = any;
+export type TableFragment = any;
+export type TableBlock = any;
+export type TableMeasure = any;
+export type TabStop = any;
+
+export const extractHeaderFooterSpace: any;
+export const calculateTabWidth: any;
diff --git a/packages/super-editor/src/types/superdoc-layout-bridge.d.ts b/packages/super-editor/src/types/superdoc-layout-bridge.d.ts
new file mode 100644
index 000000000..06aa58877
--- /dev/null
+++ b/packages/super-editor/src/types/superdoc-layout-bridge.d.ts
@@ -0,0 +1,42 @@
+export const incrementalLayout: any;
+export const selectionToRects: any;
+export const clickToPosition: any;
+export const getFragmentAtPosition: any;
+export const computeLinePmRange: any;
+export const measureCharacterX: any;
+export const pmPosToCharOffset: any;
+export const extractIdentifierFromConverter: any;
+export const getHeaderFooterType: any;
+export const getBucketForPageNumber: any;
+export const getBucketRepresentative: any;
+export const buildMultiSectionIdentifier: any;
+export const getHeaderFooterTypeForSection: any;
+export const layoutHeaderFooterWithCache: any;
+export const computeDisplayPageNumber: any;
+export const findWordBoundaries: any;
+export const findParagraphBoundaries: any;
+export const createDragHandler: any;
+export const hitTestTableFragment: any;
+export const isListItem: any;
+export const getWordLayoutConfig: any;
+export const calculateTextStartIndent: any;
+export const extractParagraphIndent: any;
+export const measureCache: any;
+
+export class PageGeometryHelper {
+  constructor(...args: any[]);
+  updateLayout(...args: any[]): void;
+  getPageIndexAtY(...args: any[]): number | null;
+  getNearestPageIndex(...args: any[]): number | null;
+  getPageTop(...args: any[]): number;
+}
+
+export type HeaderFooterBatch = any;
+export type HeaderFooterIdentifier = any;
+export type HeaderFooterLayoutResult = any;
+export type HeaderFooterType = any;
+export type PositionHit = any;
+export type MultiSectionHeaderFooterIdentifier = any;
+export type DropEvent = any;
+export type TableHitResult = any;
+export type PageHit = any;
diff --git a/packages/super-editor/src/types/superdoc-measuring-dom.d.ts b/packages/super-editor/src/types/superdoc-measuring-dom.d.ts
new file mode 100644
index 000000000..9f5d41588
--- /dev/null
+++ b/packages/super-editor/src/types/superdoc-measuring-dom.d.ts
@@ -0,0 +1 @@
+export const measureBlock: any;
diff --git a/packages/super-editor/src/types/superdoc-painter-dom.d.ts b/packages/super-editor/src/types/superdoc-painter-dom.d.ts
new file mode 100644
index 000000000..0c0c2b6d2
--- /dev/null
+++ b/packages/super-editor/src/types/superdoc-painter-dom.d.ts
@@ -0,0 +1,9 @@
+export const createDomPainter: any;
+export const DOM_CLASS_NAMES: any;
+export const generateRulerDefinition: any;
+export const clampHandlePosition: any;
+export const calculateMarginFromHandle: any;
+
+export type LayoutMode = any;
+export type PageDecorationProvider = any;
+export type RulerOptions = any;
diff --git a/packages/super-editor/src/types/superdoc-word-layout.d.ts b/packages/super-editor/src/types/superdoc-word-layout.d.ts
new file mode 100644
index 000000000..b1be1d43d
--- /dev/null
+++ b/packages/super-editor/src/types/superdoc-word-layout.d.ts
@@ -0,0 +1,2 @@
+export const createNumberingManager: any;
+export const twipsToPixels: any;
diff --git a/packages/super-editor/src/types/uuid.d.ts b/packages/super-editor/src/types/uuid.d.ts
new file mode 100644
index 000000000..1fc81715a
--- /dev/null
+++ b/packages/super-editor/src/types/uuid.d.ts
@@ -0,0 +1,3 @@
+declare module 'uuid' {
+  export function v4(): string;
+}
diff --git a/packages/super-editor/src/utils/contextmenu-helpers.js b/packages/super-editor/src/utils/contextmenu-helpers.ts
similarity index 81%
rename from packages/super-editor/src/utils/contextmenu-helpers.js
rename to packages/super-editor/src/utils/contextmenu-helpers.ts
index 0bd8f54b0..3c27e6998 100644
--- a/packages/super-editor/src/utils/contextmenu-helpers.js
+++ b/packages/super-editor/src/utils/contextmenu-helpers.ts
@@ -1,4 +1,4 @@
-const isKeyboardInvocation = (event) => {
+const isKeyboardInvocation = (event: MouseEvent): boolean => {
   return (
     event.type === 'contextmenu' &&
     typeof event.detail === 'number' &&
@@ -9,7 +9,7 @@ const isKeyboardInvocation = (event) => {
   );
 };
 
-const prefersNativeMenu = (event) => {
+const prefersNativeMenu = (event: MouseEvent | null | undefined): boolean => {
   if (!event) return false;
 
   if (event.ctrlKey || event.metaKey) {
@@ -26,7 +26,7 @@ const prefersNativeMenu = (event) => {
  * @param {MouseEvent} event
  * @returns {boolean}
  */
-const shouldAllowNativeContextMenu = (event) => {
+const shouldAllowNativeContextMenu = (event: MouseEvent): boolean => {
   return prefersNativeMenu(event);
 };
 
diff --git a/packages/super-editor/src/utils/headless-helpers.js b/packages/super-editor/src/utils/headless-helpers.ts
similarity index 61%
rename from packages/super-editor/src/utils/headless-helpers.js
rename to packages/super-editor/src/utils/headless-helpers.ts
index 51e99ea1c..ec222bf54 100644
--- a/packages/super-editor/src/utils/headless-helpers.js
+++ b/packages/super-editor/src/utils/headless-helpers.ts
@@ -1,19 +1,21 @@
+import type { Editor } from '../core/Editor.js';
+
 /**
  * Check if editor is in headless mode.
  * This is used to allow for the future movement of the headless mode config,
  * can update once here and fixed in all locations in the applicaiton.
- * @param {import('../core/Editor.js').Editor} editor - The editor instance.
+ * @param {Editor} editor - The editor instance.
  * @returns {boolean} - Whether the editor is in headless mode.
  */
-export const isHeadless = (editor) => {
+export const isHeadless = (editor: Editor | null | undefined): boolean => {
   return editor?.options?.isHeadless ?? false;
 };
 
 /**
  * Determine if the node view should be skipped in headless mode.
- * @param {import('../core/Editor.js').Editor} editor - The editor instance.
+ * @param {Editor} editor - The editor instance.
  * @returns {boolean} - Whether the node view should be skipped.
  */
-export const shouldSkipNodeView = (editor) => {
+export const shouldSkipNodeView = (editor: Editor | null | undefined): boolean => {
   return isHeadless(editor);
 };
diff --git a/packages/super-editor/src/utils/styleIsolation.d.ts b/packages/super-editor/src/utils/styleIsolation.d.ts
deleted file mode 100644
index 7569963c2..000000000
--- a/packages/super-editor/src/utils/styleIsolation.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function applyStyleIsolationClass(...args: any[]): any;
diff --git a/packages/super-editor/src/utils/styleIsolation.js b/packages/super-editor/src/utils/styleIsolation.ts
similarity index 73%
rename from packages/super-editor/src/utils/styleIsolation.js
rename to packages/super-editor/src/utils/styleIsolation.ts
index 7df558b0d..525e74bce 100644
--- a/packages/super-editor/src/utils/styleIsolation.js
+++ b/packages/super-editor/src/utils/styleIsolation.ts
@@ -4,7 +4,7 @@ export const STYLE_ISOLATION_CLASS = 'sd-editor-scoped';
  * Apply the editor style-isolation class to a DOM element.
  * @param {HTMLElement} target
  */
-export const applyStyleIsolationClass = (target) => {
+export const applyStyleIsolationClass = (target: HTMLElement | null | undefined): void => {
   if (!target || !target.classList) return;
   target.classList.add(STYLE_ISOLATION_CLASS);
 };
diff --git a/packages/super-editor/tsconfig.build.json b/packages/super-editor/tsconfig.build.json
index 22e74b65b..eb2676bce 100644
--- a/packages/super-editor/tsconfig.build.json
+++ b/packages/super-editor/tsconfig.build.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "checkJs": false,
     "skipLibCheck": true
-  },
-  "exclude": ["**/*.test.js", "**/*.test.ts", "**/*.spec.js", "**/*.spec.ts"]
+  }
 }
diff --git a/packages/super-editor/tsconfig.extensions.json b/packages/super-editor/tsconfig.extensions.json
new file mode 100644
index 000000000..d21e5f9bf
--- /dev/null
+++ b/packages/super-editor/tsconfig.extensions.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.strict.json",
+  "compilerOptions": {
+    "allowJs": false
+  },
+  "include": ["src/extensions/**/*.ts", "src/extensions/**/*.vue", "src/types/**/*.d.ts"],
+  "exclude": ["src/extensions/**/*.test.ts"]
+}
diff --git a/packages/super-editor/tsconfig.json b/packages/super-editor/tsconfig.json
index 8fd36e69a..fc54e6363 100644
--- a/packages/super-editor/tsconfig.json
+++ b/packages/super-editor/tsconfig.json
@@ -7,6 +7,9 @@
     "emitDeclarationOnly": true,
     "outDir": "dist",
     "baseUrl": ".",
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
     "paths": {
       "@": ["./src/*"],
       "@core/*": ["./src/core/*"],
@@ -18,11 +21,12 @@
       "@converter/*": ["./src/core/super-converter/*"],
       "@tests/*": ["./src/tests/*"],
       "@translator": ["./src/core/super-converter/v3/node-translator/"],
-      "@superdoc/painter-dom": ["../layout-engine/painters/dom/src"],
+      "@superdoc/painter-dom": ["./src/types/superdoc-painter-dom.d.ts"],
       "@superdoc/pm-adapter": ["./src/types/pm-adapter-shim.d.ts"],
-      "@superdoc/layout-bridge": ["../layout-engine/layout-bridge/src"],
-      "@superdoc/contracts": ["../layout-engine/contracts/src"],
-      "@superdoc/geometry-utils": ["../layout-engine/geometry-utils/src"],
+      "@superdoc/layout-bridge": ["./src/types/superdoc-layout-bridge.d.ts"],
+      "@superdoc/contracts": ["./src/types/superdoc-contracts.d.ts"],
+      "@superdoc/measuring-dom": ["./src/types/superdoc-measuring-dom.d.ts"],
+      "@superdoc/word-layout": ["./src/types/superdoc-word-layout.d.ts"],
       "@superdoc/url-validation": ["../../shared/url-validation/index.js"],
       "@superdoc/preset-geometry": ["../preset-geometry/index.js"]
     }
diff --git a/packages/super-editor/tsconfig.migrated.json b/packages/super-editor/tsconfig.migrated.json
index 62da89caf..543c69297 100644
--- a/packages/super-editor/tsconfig.migrated.json
+++ b/packages/super-editor/tsconfig.migrated.json
@@ -27,32 +27,18 @@
       "@converter/*": ["./src/core/super-converter/*"],
       "@tests/*": ["./src/tests/*"],
       "@translator": ["./src/core/super-converter/v3/node-translator/"],
-      "@superdoc/painter-dom": ["../layout-engine/painters/dom/src"],
+      "@superdoc/painter-dom": ["./src/types/superdoc-painter-dom.d.ts"],
       "@superdoc/pm-adapter": ["./src/types/pm-adapter-shim.d.ts"],
-      "@superdoc/layout-bridge": ["../layout-engine/layout-bridge/src"],
-      "@superdoc/contracts": ["../layout-engine/contracts/src"],
+      "@superdoc/layout-bridge": ["./src/types/superdoc-layout-bridge.d.ts"],
+      "@superdoc/contracts": ["./src/types/superdoc-contracts.d.ts"],
+      "@superdoc/measuring-dom": ["./src/types/superdoc-measuring-dom.d.ts"],
+      "@superdoc/word-layout": ["./src/types/superdoc-word-layout.d.ts"],
       "@superdoc/geometry-utils": ["../layout-engine/geometry-utils/src"],
       "@superdoc/url-validation": ["../../shared/url-validation/index.d.ts"],
       "@superdoc/preset-geometry": ["../preset-geometry/index.d.ts"]
     }
   },
-  "include": [
-    "src/types/**/*.d.ts",
-    "src/schema/**/*.d.ts",
-    "src/core/Attribute.ts",
-    "src/core/EventEmitter.ts",
-    "src/core/Extension.ts",
-    "src/core/Mark.ts",
-    "src/core/Node.ts",
-    "src/core/OxmlNode.ts",
-    "src/core/PresentationEditor.ts",
-    "src/core/commands/core-command-map.d.ts",
-    "src/core/helpers/getExtensionConfigField.ts",
-    "src/core/header-footer/HeaderFooterRegistry.ts",
-    "src/core/types/**/*.ts",
-    "src/core/utilities/callOrGet.ts",
-    "src/extensions/types/**/*.ts"
-  ],
+  "include": ["src/types/**/*.d.ts", "src/schema/**/*.d.ts", "src/core/**/*.ts", "src/extensions/types/**/*.ts"],
   "exclude": [
     "node_modules",
     "dist",
@@ -60,8 +46,6 @@
     "**/*.test.ts",
     "**/*.test.js",
     "src/core/super-converter",
-    "src/core/index.ts",
-    "src/core/Editor.ts",
     "src/tests"
   ]
 }
diff --git a/packages/super-editor/tsconfig.strict.json b/packages/super-editor/tsconfig.strict.json
new file mode 100644
index 000000000..5592bb962
--- /dev/null
+++ b/packages/super-editor/tsconfig.strict.json
@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "allowJs": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/__tests__/**/*",
+    "src/core/super-converter/**/*",
+    "src/core/super-validator/**/*"
+  ]
+}
diff --git a/packages/super-editor/tsconfig.test.json b/packages/super-editor/tsconfig.test.json
new file mode 100644
index 000000000..5b267443a
--- /dev/null
+++ b/packages/super-editor/tsconfig.test.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.strict.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "node"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false
+  },
+  "include": ["src/**/*.test.ts", "src/tests/**/*.ts"],
+  "exclude": ["node_modules", "dist", "src/core/super-converter/**/*"]
+}
diff --git a/packages/super-editor/vite.config.js b/packages/super-editor/vite.config.js
index 42f07550e..c2ef877e6 100644
--- a/packages/super-editor/vite.config.js
+++ b/packages/super-editor/vite.config.js
@@ -30,6 +30,7 @@ export default defineConfig(({ mode }) => {
           '**/v3/**/index.js',
           '**/examples/**',
           '**/types.js',
+          '**/main.ts',
           '**/main.js',
           '**/migration_after_0_4_14.js',
         ],
@@ -58,7 +59,7 @@ export default defineConfig(({ mode }) => {
     build: {
       target: 'es2020',
       lib: {
-        entry: "src/index.js",
+        entry: "src/index.ts",
         formats: ['es'],
         name: "super-editor",
         cssFileName: 'style',
@@ -70,7 +71,7 @@ export default defineConfig(({ mode }) => {
           'y-protocols',
         ],
         input: {
-          'super-editor': 'src/index.js',
+          'super-editor': 'src/index.ts',
           'editor': '@core/Editor',
           'converter': '@core/super-converter/SuperConverter',
           'docx-zipper': '@core/DocxZipper',
diff --git a/scripts/validate-command-types.mjs b/scripts/validate-command-types.mjs
index e1c260063..9baad09b5 100644
--- a/scripts/validate-command-types.mjs
+++ b/scripts/validate-command-types.mjs
@@ -9,7 +9,23 @@ const repoRoot = path.resolve(__dirname, '..');
 const commandsDir = path.join(repoRoot, 'packages/super-editor/src/core/commands');
 
 async function loadCoreExports() {
-  const indexPath = path.join(commandsDir, 'index.js');
+  const indexCandidates = ['index.ts', 'index.js'];
+  let indexPath = null;
+  for (const candidate of indexCandidates) {
+    const maybePath = path.join(commandsDir, candidate);
+    try {
+      await readFile(maybePath, 'utf8');
+      indexPath = maybePath;
+      break;
+    } catch {
+      // keep searching
+    }
+  }
+
+  if (!indexPath) {
+    throw new Error(`No command index file found in ${commandsDir}`);
+  }
+
   const content = await readFile(indexPath, 'utf8');
   const matches = [...content.matchAll(/export \* from '\.\/([a-zA-Z0-9_-]+)\.js';/g)];
   return matches.map(([, name]) => name);
@@ -18,15 +34,27 @@ async function loadCoreExports() {
 async function loadMappedCommands() {
   const mapPath = path.join(commandsDir, 'core-command-map.d.ts');
   const content = await readFile(mapPath, 'utf8');
+  const usesDerivedCommandNames = /keyof typeof CoreCommandExports/.test(content);
+
+  if (usesDerivedCommandNames) {
+    return { mode: 'derived' };
+  }
+
   const matches = [...content.matchAll(/\|\s'([a-zA-Z0-9_]+)'/g)];
-  return new Set(matches.map(([, name]) => name));
+  return { mode: 'manual', mapped: new Set(matches.map(([, name]) => name)) };
 }
 
 async function main() {
   try {
     const exportsList = await loadCoreExports();
-    const mapped = await loadMappedCommands();
-    const missing = exportsList.filter((name) => !mapped.has(name));
+    const mappedResult = await loadMappedCommands();
+
+    if (mappedResult.mode === 'derived') {
+      console.log('[validate-command-types] core command map derived from index exports ✔');
+      return;
+    }
+
+    const missing = exportsList.filter((name) => !mappedResult.mapped.has(name));
 
     if (missing.length) {
       console.warn('[validate-command-types] missing type entries:', missing.join(', '));