Initial commit

Author: cyanzhong

.gitignore

@@ -0,0 +1 @@
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MarkEdit.app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,66 @@
+# MarkEdit-preview
+
+Markdown preview for MarkEdit that leverages [markedit-api](https://github.com/MarkEdit-app/MarkEdit-api).
+
+## Installation
+
+Copy [dist/markedit-preview.js](dist/markedit-preview.js) to `~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/`. Details [here](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#entries).
+
+Use [dist/lite/markedit-preview.js](dist/lite/markedit-preview.js) if you don't need [mermaid](https://mermaid.js.org/), [katex](https://katex.org/) and [highlight.js](https://highlightjs.org/), it's much smaller (3.7 MB vs 160 KB).
+
+> Once installed, restart MarkEdit to apply the changes.
+>
+> This extension automatically checks for updates and notifies you when a new version is available.
+
+## Building
+
+Run `yarn install && yarn build` to build and deploy the script.
+
+To build the lite version, run `yarn build:lite` instead.
+
+## How to Use
+
+Access it from the `Extensions` menu in the menu bar, or use the keyboard shortcut <kbd>Shift–Command–V</kbd>.
+
+<img src="./screenshot.png" width="520" alt="Using MarkEdit-preview">
+
+To display local images, please ensure you're using MarkEdit 1.24.0 or later and follow [the guide](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#grant-folder-access) to grant file access.
+
+## Styling
+
+This extension applies the [github-markdown](https://github.com/sindresorhus/github-markdown-css) styling. You can customize the appearance by following the [customization](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization) guidelines.
+
+The preview pane can be styled using the `markdown-body` CSS class.
+
+## Settings
+
+In [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#advanced-settings), you can define a settings node named `extension.markeditPreview` to configure this extension, default settings are:
+
+```json
+{
+  "extension.markeditPreview": {
+    "autoUpdate": true,
+    "syncScroll": true,
+    "changeMode": {
+      "modes": ["side-by-side", "preview"],
+      "hotKey": {
+        "key": "V",
+        "modifiers": ["Command"]
+      }
+    },
+    "markdownIt": {
+      "preset": "default",
+      "options": {}
+    }
+  }
+}
+```
+
+- `autoUpdate`: Whether to enable automatic update checks.
+- `syncScroll`: Whether to enable scroll synchronization.
+- `changeMode.modes`: Define available preview modes for the "Change Mode" feature.
+- `changeMode.hotKey`: Assign keyboard shortcuts for mode switching. See the specification [here](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#generalmainwindowhotkey).
+- `markdownIt.preset`: Override the default [markdown-it](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) preset.
+- `markdownIt.options`: Customize [markdown-it](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) options.
+
+> Extension settings require MarkEdit 1.24.0 or later.

dist/lite/markedit-preview.js

@@ -0,0 +1,55 @@
+import eslintPluginTs from '@typescript-eslint/eslint-plugin';
+import parserTs from '@typescript-eslint/parser';
+
+export default [
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: parserTs,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        project: './tsconfig.json',
+        tsconfigRootDir: process.cwd(),
+      },
+    },
+    plugins: {
+      '@typescript-eslint': eslintPluginTs,
+    },
+    rules: {
+      // --- Recommended ---
+      ...eslintPluginTs.configs.recommended.rules,
+
+      // --- Safety ---
+      'no-implicit-coercion': 'error',
+      'no-console': 'error',
+      'eqeqeq': ['error', 'always'],
+      'curly': 'error',
+      'no-fallthrough': 'error',
+      'default-case': 'error',
+
+      // --- Style ---
+      'quotes': ['error', 'single', { avoidEscape: true }],
+      'comma-dangle': ['error', 'always-multiline'],
+      'no-trailing-spaces': 'error',
+      'no-multi-spaces': 'error',
+      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
+
+      // --- Clean code ---
+      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+      '@typescript-eslint/prefer-nullish-coalescing': 'error',
+      '@typescript-eslint/prefer-optional-chain': 'error',
+
+      // --- Customization ---
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+
+      // --- Others ---
+      'no-var': 'error',
+      'prefer-const': 'error',
+      'no-shadow': 'error',
+    },
+  },
+];

dist/markedit-preview.js

@@ -0,0 +1,120 @@
+import { EditorView } from '@codemirror/view';
+import { MarkEdit } from 'markedit-api';
+import type { MenuItem } from 'markedit-api';
+
+import {
+  setUp,
+  ViewMode,
+  setViewMode,
+  changeViewMode,
+  restoreViewMode,
+  currentViewMode,
+  renderHtmlPreview,
+  saveCleanHtml,
+  saveStyledHtml,
+  copyHtml,
+  copyRichText,
+  getEditPane,
+  getPreviewPane,
+} from './src/view';
+
+import { startObserving } from './src/scroll';
+import { checkForUpdates } from './src/updater';
+import { keyboardShortcut } from './src/settings';
+import { localized } from './src/strings';
+
+setUp();
+setTimeout(checkForUpdates, 4000);
+
+MarkEdit.addMainMenuItem({
+  title: localized('viewMode'),
+  children: [
+    {
+      title: localized('changeMode'),
+      action: changeViewMode,
+      key: (keyboardShortcut['key'] ?? 'V') as string,
+      modifiers: (keyboardShortcut['modifiers'] ?? ['Command']) as MenuItem['modifiers'],
+    },
+    { separator: true },
+    createModeItem(localized('editMode'), ViewMode.edit),
+    createModeItem(localized('sideBySideMode'), ViewMode.sideBySide),
+    createModeItem(localized('previewMode'), ViewMode.preview),
+    { separator: true },
+    ...createHtmlItems(),
+    { separator: true },
+    { title: `${localized('version')} ${__PKG_VERSION__}` },
+    {
+      title: `${localized('checkReleases')} (GitHub)`,
+      action: () => open('https://github.com/MarkEdit-app/MarkEdit-preview/releases/latest'),
+    },
+  ],
+});
+
+MarkEdit.addExtension(EditorView.updateListener.of(update => {
+  if (!update.docChanged) {
+    return;
+  }
+
+  if (states.renderUpdater !== undefined) {
+    clearTimeout(states.renderUpdater);
+  }
+
+  states.renderUpdater = setTimeout(renderHtmlPreview, 500);
+}));
+
+MarkEdit.onEditorReady(() => {
+  if (states.isInitiating) {
+    states.isInitiating = false;
+    restoreViewMode();
+  }
+
+  renderHtmlPreview();
+  startObserving(getEditPane(), getPreviewPane());
+});
+
+function createModeItem(title: string, mode: ViewMode): MenuItem {
+  return {
+    title,
+    action: () => setViewMode(mode),
+    // state requires MarkEdit 1.24.0+
+    state: () => ({ isSelected: currentViewMode() === mode }),
+  };
+}
+
+function createHtmlItems(): MenuItem[] {
+  const copyItems = [
+    {
+      title: localized('copyHtml'),
+      action: copyHtml,
+    },
+    {
+      title: localized('copyRichText'),
+      action: copyRichText,
+    },
+  ];
+
+  // showSavePanel requires MarkEdit 1.24.0+
+  if (typeof MarkEdit.showSavePanel === 'undefined') {
+    return copyItems;
+  }
+
+  return [
+    {
+      title: localized('saveCleanHtml'),
+      action: saveCleanHtml,
+    },
+    {
+      title: localized('saveStyledHtml'),
+      action: saveStyledHtml,
+    },
+    ...copyItems,
+  ];
+}
+
+const states: {
+  isInitiating: boolean;
+  renderUpdater: ReturnType<typeof setTimeout> | undefined;
+} = {
+  isInitiating: true,
+  renderUpdater: undefined,
+};

eslint.config.mjs

@@ -0,0 +1,43 @@
+{
+  "name": "markedit-preview",
+  "version": "1.0.0",
+  "description": "Markdown preview for MarkEdit.",
+  "scripts": {
+    "lint": "eslint . --config eslint.config.mjs",
+    "build": "yarn lint && vite build",
+    "build:lite": "cross-env LITE_BUILD=true vite build",
+    "reload": "osascript -e 'quit app \"MarkEdit\"' -e 'delay 1' -e 'launch app \"MarkEdit\"'",
+    "uninstall": "rm ~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/$(node -p \"require('./package.json').name\").js"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@lezer/markdown": "^1.0.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-footnote": "^3.0.4",
+    "@types/markdown-it-link-attributes": "^3.0.5",
+    "@types/node": "^22.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.27.0",
+    "markedit-api": "https://github.com/MarkEdit-app/MarkEdit-api#v0.9.0",
+    "markedit-vite": "https://github.com/MarkEdit-app/MarkEdit-vite#v0.1.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-singlefile": "^2.2.0"
+  },
+  "dependencies": {
+    "@vscode/markdown-it-katex": "^1.1.1",
+    "katex": "^0.16.22",
+    "markdown-it": "^14.1.0",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-highlightjs": "^4.2.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "markdown-it-task-lists": "^2.1.1",
+    "mermaid": "^11.6.0",
+    "split-grid": "^1.0.11"
+  }
+}

main.ts

@@ -0,0 +1,30 @@
+const parser = new DOMParser();
+const scheme = 'image-loader';
+
+/**
+ * Replace localhost urls with a url scheme that can be used in the client.
+ *
+ * We don't use a markdown-it rule here because it's hard to handle inline html.
+ */
+export function replaceImageURLs(html: string) {
+  const doc = parser.parseFromString(html, 'text/html');
+  const images = doc.querySelectorAll<HTMLImageElement>('img');
+
+  images.forEach(image => {
+    // Don't use image.src, which includes the host
+    const url = image.getAttribute('src');
+    if (url === null) {
+      return;
+    }
+
+    // Image with a remote url or base64 data
+    if (url.includes('://') || url.startsWith('data:image/')) {
+      return;
+    }
+
+    // Image with a local file path
+    image.src = `${scheme}://${url}`;
+  });
+
+  return doc.body.innerHTML;
+}