Feat/split view

CHANGELOG.md

@@ -18,6 +18,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   on. Choosing Split again collapses back to a single pane, as does closing the
   last tab in the secondary pane. The split layout — which files are in which
   pane, the orientation, and each pane's active tab — is restored on reload.
+- **Drag & drop files onto the page.** Dropping a file opens it in a new tab;
+  if a tab already has that file open, it is activated instead of duplicated.
+  Same-file detection uses the file-system handle identity when the browser
+  provides one, falling back to the file name. Multiple files can be dropped at
+  once. In split view, a file opens in the **pane you drop it into**, and if it
+  is already open in the other pane it is **moved across**. You can also **drag
+  a tab from one pane to the other** to move it between views.
+
+- **Plugins system + first two plugins.** A Notepad++-style **Plugins** menu with
+  a **Plugins Manager** modal. Plugins are lazy-loaded — their code and libraries
+  are fetched on demand only when enabled (never bundled into startup), and the
+  enabled set is remembered across reloads.
+  - **MarkdownViewer++** — live, docked Markdown preview (CommonMark + GFM),
+    sanitized, with synced scroll, auto-refresh, **Ctrl+Shift+M** toggle, custom
+    CSS, and HTML export (PDF via the browser Print dialog).
+  - **ComparePlus** — side-by-side file comparison using the split view, with
+    line + inline character diffs (added / removed / changed / moved),
+    **row-by-row alignment** (filler spacers) and synced scrolling between the
+    panes, compare against clipboard or last-saved, find unique lines, diff
+    navigation, and ignore-whitespace/case/empty-line + move-detection options.
+    (Git/SVN diff is not possible in a browser and is omitted.)
 
 ### Fixed
 

docs/plugins/README.md

@@ -0,0 +1,33 @@
+# Plugins
+
+Notepad Web supports optional plugins, mirroring Notepad++'s **Plugins** menu.
+Plugins are **not loaded at startup** — their code and libraries are fetched on
+demand (a separate JS chunk) only when you enable them, so they never slow the
+editor's launch.
+
+## Enabling / disabling a plugin
+
+1. Open **Plugins → Plugins Manager…**.
+2. Each available plugin is listed with a short description and an **Enable** /
+   **Disable** button.
+3. Click **Enable**. The button shows **Loading…** while the plugin's chunk is
+   fetched, then the plugin activates and adds its own submenu under **Plugins**.
+4. Click **Disable** to deactivate it and remove its panels/menus.
+
+Your enabled plugins are remembered across reloads. On the next launch they are
+re-activated in the background *after* the editor is ready, so startup stays fast.
+
+## Available plugins
+
+| Plugin | Purpose | Docs |
+|--------|---------|------|
+| **MarkdownViewer++** | Live Markdown preview panel | [markdown-viewer.md](markdown-viewer.md) |
+| **ComparePlus** | Side-by-side file diff | [compareplus.md](compareplus.md) |
+
+## Notes
+
+- Plugins run in the same sandbox as the app (MV3 CSP: no remote code; everything
+  is bundled locally).
+- A few desktop-only Notepad++ plugin features are not possible in a browser and
+  are marked **not supported** in each plugin's doc (e.g. ComparePlus's Git/SVN
+  diff, which needs version-control access the browser sandbox does not grant).

docs/plugins/compareplus.md

@@ -0,0 +1,58 @@
+# ComparePlus
+
+Side-by-side file comparison, ported (browser-feasible subset) from the Notepad++
+[ComparePlus](https://github.com/pnedev/comparePlus) plugin.
+
+## Enable
+
+**Plugins → Plugins Manager… → Enable** next to *ComparePlus*. A **ComparePlus**
+submenu appears under **Plugins**.
+
+## User flows
+
+### Compare two open files
+
+1. Open the two files you want to compare (e.g. drag both onto the window).
+2. Make the newer/edited file the active tab.
+3. **Plugins → ComparePlus → Compare**. The window splits: the previous file on
+   the left, the active file on the right, with differences highlighted:
+   - **green** = line only in the right file (added)
+   - **red** = line only in the left file (removed)
+   - **yellow** = changed line (with the exact changed characters highlighted inline)
+   - **blue** = moved line (when *Detect moved lines* is on)
+4. Jump between differences with **Next / Previous / First / Last Diff**.
+5. **Clear Results** removes the highlighting (the files stay open).
+
+### Compare against the clipboard
+
+**Plugins → ComparePlus → Compare against Clipboard** compares the active file
+against the current clipboard text (opened as a temporary "Clipboard" tab).
+
+### Compare against the last saved version
+
+**Plugins → ComparePlus → Compare against Last Save** compares the active file
+(with your unsaved edits) against its on-disk contents — useful to review what
+you changed since the last save. Requires the file to have been opened from disk.
+
+### Find unique lines
+
+**Plugins → ComparePlus → Find Unique Lines** highlights lines that appear in one
+file but not the other, regardless of position.
+
+## Settings
+
+**Plugins → ComparePlus → Settings…**:
+
+- **Ignore whitespace** — treat lines differing only in spacing as equal.
+- **Ignore letter case**.
+- **Ignore empty lines**.
+- **Detect moved lines** — mark relocated lines (blue) instead of add/remove.
+- **Show inline character differences** — highlight the exact changed characters
+  within changed lines.
+
+## Not supported (vs. the desktop plugin)
+
+- **Diff against Git / SVN** — the browser sandbox has no access to a version
+  control system, so this is disabled.
+- **Compare Selections** — not yet implemented (planned).
+- Only **one comparison at a time** (the desktop plugin allows several pairs).

docs/plugins/markdown-viewer.md

@@ -0,0 +1,49 @@
+# MarkdownViewer++
+
+A live HTML preview of the current document, ported from the Notepad++
+[MarkdownViewer++](https://github.com/nea/MarkdownViewerPlusPlus) plugin.
+
+## Enable
+
+**Plugins → Plugins Manager… → Enable** next to *MarkdownViewer++*. The preview
+panel opens on the right immediately.
+
+## User flows
+
+### Preview a Markdown file
+
+1. Open or create a `.md` file and start typing.
+2. Enable the plugin (above), or if already enabled, press **Ctrl+Shift+M** (or
+   **Plugins → MarkdownViewer++ → Toggle Preview**).
+3. The right-hand **Markdown Preview** panel shows the rendered document and
+   **updates as you type** (debounced). Scrolling the editor scrolls the preview
+   to the matching position.
+
+Rendering is **CommonMark + GitHub-Flavored Markdown**: tables, task lists,
+strikethrough, and autolinks. The HTML is **sanitized** (scripts, inline event
+handlers, and `javascript:` links are stripped), so previewing untrusted
+Markdown is safe. Links open in a new browser tab.
+
+### Style the preview with custom CSS
+
+1. **Plugins → MarkdownViewer++ → Options…**
+2. Enter CSS in the **Custom CSS** box (it targets the preview body). Click
+   **Save** — the preview updates instantly, and your CSS is remembered.
+
+### Export
+
+- **Export to HTML** — **Plugins → MarkdownViewer++ → Export HTML…** downloads a
+  self-contained `.html` file (your custom CSS is inlined).
+- **Export to PDF** — open the preview and use your browser's **Print** dialog
+  (**Ctrl/Cmd+P**) → *Save as PDF*.
+
+## Toggle off
+
+Disable it from the Plugin Manager, or press **Ctrl+Shift+M** to hide the panel.
+
+## Not included (vs. the desktop plugin)
+
+- Per-language **syntax highlighting inside code blocks** (code renders in a
+  monospace block). A bundled highlighter may be added later.
+- A **built-in PDF engine** with page-size/margin options — use the browser's
+  Print-to-PDF instead.

package.json

@@ -58,7 +58,10 @@
     "@codemirror/state": "^6.7.0",
     "@codemirror/view": "^6.43.4",
     "@lezer/highlight": "^1.2.3",
+    "diff": "^9.0.0",
     "dockview-core": "^7.0.2",
+    "dompurify": "^3.4.11",
+    "marked": "^18.0.5",
     "wasmoon": "^1.16.0"
   }
 }