MD Editor: Finished conversion to Typescript

Author: ssddanbrown

package-lock.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@lezer/generator": "^1.7.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/sortablejs": "^1.15.8",
     "chokidar-cli": "^3.0",
     "esbuild": "^0.25.0",

package.json

@@ -1,19 +1,16 @@
 import {provideKeyBindings} from './shortcuts';
-import {debounce} from '../services/util.ts';
-import {Clipboard} from '../services/clipboard.ts';
+import {debounce} from '../services/util';
+import {Clipboard} from '../services/clipboard';
+import {EditorView, ViewUpdate} from "@codemirror/view";
+import {MarkdownEditor} from "./index.mjs";
 
 /**
  * Initiate the codemirror instance for the markdown editor.
- * @param {MarkdownEditor} editor
- * @returns {Promise<EditorView>}
  */
-export async function init(editor) {
-    const Code = await window.importVersioned('code');
+export async function init(editor: MarkdownEditor): Promise<EditorView> {
+    const Code = await window.importVersioned('code') as (typeof import('../code/index.mjs'));
 
-    /**
-     * @param {ViewUpdate} v
-     */
-    function onViewUpdate(v) {
+    function onViewUpdate(v: ViewUpdate) {
         if (v.docChanged) {
             editor.actions.updateAndRender();
         }
@@ -27,9 +24,13 @@ export async function init(editor) {
 
     const domEventHandlers = {
         // Handle scroll to sync display view
-        scroll: event => syncActive && onScrollDebounced(event),
+        scroll: (event: Event) => syncActive && onScrollDebounced(event),
         // Handle image & content drag n drop
-        drop: event => {
+        drop: (event: DragEvent) => {
+            if (!event.dataTransfer) {
+                return;
+            }
+
             const templateId = event.dataTransfer.getData('bookstack/template');
             if (templateId) {
                 event.preventDefault();
@@ -45,12 +46,16 @@ export async function init(editor) {
             }
         },
         // Handle dragover event to allow as drop-target in chrome
-        dragover: event => {
+        dragover: (event: DragEvent) => {
             event.preventDefault();
         },
         // Handle image paste
-        paste: event => {
-            const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
+        paste: (event: ClipboardEvent) => {
+            if (!event.clipboardData) {
+                return;
+            }
+
+            const clipboard = new Clipboard(event.clipboardData);
 
             // Don't handle the event ourselves if no items exist of contains table-looking data
             if (!clipboard.hasItems() || clipboard.containsTabularData()) {
@@ -71,8 +76,9 @@ export async function init(editor) {
         provideKeyBindings(editor),
     );
 
-    // Add editor view to window for easy access/debugging.
+    // Add editor view to the window for easy access/debugging.
     // Not part of official API/Docs
+    // @ts-ignore
     window.mdEditorView = cm;
 
     return cm;

resources/js/markdown/codemirror.js resources/js/markdown/codemirror.tsresources/js/markdown/codemirror.js renamed to resources/js/markdown/codemirror.ts

@@ -1,56 +1,57 @@
-import {patchDomFromHtmlString} from '../services/vdom.ts';
+import { patchDomFromHtmlString } from '../services/vdom';
+import {MarkdownEditor} from "./index.mjs";
 
 export class Display {
+    protected editor: MarkdownEditor;
+    protected container: HTMLIFrameElement;
+    protected doc: Document | null = null;
+    protected lastDisplayClick: number = 0;
 
-    /**
-     * @param {MarkdownEditor} editor
-     */
-    constructor(editor) {
+    constructor(editor: MarkdownEditor) {
         this.editor = editor;
         this.container = editor.config.displayEl;
 
-        this.doc = null;
-        this.lastDisplayClick = 0;
-
-        if (this.container.contentDocument.readyState === 'complete') {
+        if (this.container.contentDocument?.readyState === 'complete') {
             this.onLoad();
         } else {
             this.container.addEventListener('load', this.onLoad.bind(this));
         }
 
-        this.updateVisibility(editor.settings.get('showPreview'));
-        editor.settings.onChange('showPreview', show => this.updateVisibility(show));
+        this.updateVisibility(Boolean(editor.settings.get('showPreview')));
+        editor.settings.onChange('showPreview', (show) => this.updateVisibility(Boolean(show)));
     }
 
-    updateVisibility(show) {
-        const wrap = this.container.closest('.markdown-editor-wrap');
-        wrap.style.display = show ? null : 'none';
+    protected updateVisibility(show: boolean): void {
+        const wrap = this.container.closest('.markdown-editor-wrap') as HTMLElement;
+        wrap.style.display = show ? '' : 'none';
     }
 
-    onLoad() {
+    protected onLoad(): void {
         this.doc = this.container.contentDocument;
 
+        if (!this.doc) return;
+
         this.loadStylesIntoDisplay();
         this.doc.body.className = 'page-content';
 
         // Prevent markdown display link click redirect
         this.doc.addEventListener('click', this.onDisplayClick.bind(this));
     }
 
-    /**
-     * @param {MouseEvent} event
-     */
-    onDisplayClick(event) {
+    protected onDisplayClick(event: MouseEvent): void {
         const isDblClick = Date.now() - this.lastDisplayClick < 300;
 
-        const link = event.target.closest('a');
+        const link = (event.target as Element).closest('a');
         if (link !== null) {
             event.preventDefault();
-            window.open(link.getAttribute('href'));
+            const href = link.getAttribute('href');
+            if (href) {
+                window.open(href);
+            }
             return;
         }
 
-        const drawing = event.target.closest('[drawio-diagram]');
+        const drawing = (event.target as Element).closest('[drawio-diagram]') as HTMLElement;
         if (drawing !== null && isDblClick) {
             this.editor.actions.editDrawing(drawing);
             return;
@@ -59,10 +60,12 @@ export class Display {
         this.lastDisplayClick = Date.now();
     }
 
-    loadStylesIntoDisplay() {
+    protected loadStylesIntoDisplay(): void {
+        if (!this.doc) return;
+
         this.doc.documentElement.classList.add('markdown-editor-display');
 
-        // Set display to be dark mode if parent is
+        // Set display to be dark mode if the parent is
         if (document.documentElement.classList.contains('dark-mode')) {
             this.doc.documentElement.style.backgroundColor = '#222';
             this.doc.documentElement.classList.add('dark-mode');
@@ -71,39 +74,42 @@ export class Display {
         this.doc.head.innerHTML = '';
         const styles = document.head.querySelectorAll('style,link[rel=stylesheet]');
         for (const style of styles) {
-            const copy = style.cloneNode(true);
+            const copy = style.cloneNode(true) as HTMLElement;
             this.doc.head.appendChild(copy);
         }
     }
 
     /**
      * Patch the display DOM with the given HTML content.
-     * @param {String} html
      */
-    patchWithHtml(html) {
-        const {body} = this.doc;
+    public patchWithHtml(html: string): void {
+        if (!this.doc) return;
+
+        const { body } = this.doc;
 
         if (body.children.length === 0) {
             const wrap = document.createElement('div');
             this.doc.body.append(wrap);
         }
 
-        const target = body.children[0];
+        const target = body.children[0] as HTMLElement;
 
         patchDomFromHtmlString(target, html);
     }
 
     /**
      * Scroll to the given block index within the display content.
      * Will scroll to the end if the index is -1.
-     * @param {Number} index
      */
-    scrollToIndex(index) {
-        const elems = this.doc.body?.children[0]?.children;
-        if (elems && elems.length <= index) return;
+    public scrollToIndex(index: number): void {
+        const elems = this.doc?.body?.children[0]?.children;
+        if (!elems || elems.length <= index) return;
 
         const topElem = (index === -1) ? elems[elems.length - 1] : elems[index];
-        topElem.scrollIntoView({block: 'start', inline: 'nearest', behavior: 'smooth'});
+        (topElem as Element).scrollIntoView({
+            block: 'start',
+            inline: 'nearest',
+            behavior: 'smooth'
+        });
     }
-
-}
+}

resources/js/markdown/display.js resources/js/markdown/display.tsresources/js/markdown/display.js renamed to resources/js/markdown/display.ts

@@ -9,7 +9,7 @@ import {EditorView} from "@codemirror/view";
 export interface MarkdownEditorConfig {
     pageId: string;
     container: Element;
-    displayEl: Element;
+    displayEl: HTMLIFrameElement;
     inputEl: HTMLTextAreaElement;
     drawioUrl: string;
     settingInputs: HTMLInputElement[];
@@ -27,18 +27,13 @@ export interface MarkdownEditor {
 
 /**
  * Initiate a new Markdown editor instance.
- * @param {MarkdownEditorConfig} config
- * @returns {Promise<MarkdownEditor>}
  */
-export async function init(config) {
-    /**
-     * @type {MarkdownEditor}
-     */
+export async function init(config: MarkdownEditorConfig): Promise<MarkdownEditor> {
     const editor: MarkdownEditor = {
         config,
         markdown: new Markdown(),
         settings: new Settings(config.settingInputs),
-    };
+    } as MarkdownEditor;
 
     editor.actions = new Actions(editor);
     editor.display = new Display(editor);

resources/js/markdown/index.mts

@@ -1,27 +1,26 @@
 import MarkdownIt from 'markdown-it';
+// @ts-ignore
 import mdTasksLists from 'markdown-it-task-lists';
 
 export class Markdown {
+    protected renderer: MarkdownIt;
 
     constructor() {
         this.renderer = new MarkdownIt({html: true});
         this.renderer.use(mdTasksLists, {label: true});
     }
 
     /**
-     * Get the front-end render used to convert markdown to HTML.
-     * @returns {MarkdownIt}
+     * Get the front-end render used to convert Markdown to HTML.
      */
-    getRenderer() {
+    getRenderer(): MarkdownIt {
         return this.renderer;
     }
 
     /**
      * Convert the given Markdown to HTML.
-     * @param {String} markdown
-     * @returns {String}
      */
-    render(markdown) {
+    render(markdown: string): string {
         return this.renderer.render(markdown);
     }