|
1 | | -# ProseMirror Markdown Editor: production packaging for MudBlazor JSInterop |
2 | | - |
3 | | -This prototype is a strong start. For production in a Blazor/MudBlazor app, the safest path is to **ship this as a small JavaScript package** (or static asset bundle) with explicit pinned dependencies, instead of loading many modules directly from CDN import maps. |
4 | | - |
5 | | -## Recommended packaging approach |
6 | | - |
7 | | -1. Create a small frontend package (for example `@your-org/blazer-markdown-editor`). |
8 | | -2. Move editor setup code into a module that exports a tiny API: |
9 | | - - `createEditor(element, options)` |
10 | | - - `setMarkdown(instance, markdown)` |
11 | | - - `getMarkdown(instance)` |
12 | | - - `destroy(instance)` |
13 | | -3. Bundle with `esbuild`, `vite`, or `rollup` into one or two static files. |
14 | | -4. Copy the built artifacts into `wwwroot` and call through JSInterop. |
15 | | -5. Keep ProseMirror package versions pinned and update intentionally. |
16 | | - |
17 | | -## Minimal dependency set used by this prototype |
18 | | - |
19 | | -From current code paths, the direct runtime dependencies are: |
20 | | - |
21 | | -- `prosemirror-model` |
22 | | -- `prosemirror-transform` |
23 | | -- `prosemirror-state` |
24 | | -- `prosemirror-view` |
25 | | -- `prosemirror-keymap` |
26 | | -- `prosemirror-history` |
27 | | -- `prosemirror-commands` |
28 | | -- `prosemirror-schema-list` |
29 | | -- `prosemirror-inputrules` |
30 | | -- `prosemirror-dropcursor` |
31 | | -- `prosemirror-gapcursor` |
32 | | -- `prosemirror-markdown` |
33 | | -- `prosemirror-tables` |
34 | | -- `markdown-it` |
35 | | - |
36 | | -`prosemirror-example-setup` and `prosemirror-menu` are not required. |
37 | | - |
38 | | -## Gaps / holes to evaluate before production |
39 | | - |
40 | | -- **Sanitization / trust boundary** |
41 | | - - If Markdown can come from untrusted users, sanitize rendered HTML on display paths. |
42 | | - - Keep `html: false` for markdown-it when parsing input in the editor. |
43 | | -- **Persistence model** |
44 | | - - Decide if your source of truth is Markdown only, PM JSON only, or dual-format. |
45 | | - - If dual-format, define reconciliation rules and tests. |
46 | | -- **Schema migrations** |
47 | | - - If schema changes later, old stored content may need migration logic. |
48 | | -- **Plugin ordering contracts** |
49 | | - - Current setup depends on plugin order (slash menu priority, keymaps). |
50 | | - - Lock this in tests to prevent regressions. |
51 | | -- **Keyboard behavior consistency** |
52 | | - - Verify Windows/macOS/Linux keybindings in Blazor host pages. |
53 | | -- **Table markdown round-trip** |
54 | | - - Ensure table alignment and edge cases survive parse -> edit -> serialize cycles. |
55 | | -- **Clipboard behavior** |
56 | | - - Paste detection is heuristic; test mixed-content clipboard payloads. |
57 | | -- **Error reporting** |
58 | | - - Add JS-level hooks for errors/events so .NET can log and react. |
59 | | -- **Styling isolation** |
60 | | - - Consider scoping editor styles to avoid collisions with MudBlazor theme styles. |
61 | | - |
62 | | -## Suggested JSInterop contract |
63 | | - |
64 | | -A minimal contract that stays stable: |
65 | | - |
66 | | -- `window.blazerMarkdownEditor.create(element, options)` => returns `editorId` |
67 | | -- `window.blazerMarkdownEditor.setMarkdown(editorId, markdown)` |
68 | | -- `window.blazerMarkdownEditor.getMarkdown(editorId)` => `string` |
69 | | -- `window.blazerMarkdownEditor.onChange(editorId, dotNetRef, methodName)` |
70 | | -- `window.blazerMarkdownEditor.destroy(editorId)` |
71 | | - |
72 | | -This keeps lifecycle ownership clear and avoids leaking ProseMirror internals into C#. |
| 1 | +# Blazer Markdown Editor: JSInterop Packaging |
73 | 2 |
|
74 | | -## Why the prototype import map was adjusted |
| 3 | +This repo is optimized for Blazor/MudBlazor usage by shipping static assets from `wwwroot`. |
75 | 4 |
|
76 | | -For local prototyping, import maps are fine and this prototype keeps explicit pinned CDN imports for compatibility. In production, prefer your own package lock + local bundling over CDN-resolved dependency trees. |
| 5 | +## Packaging model |
77 | 6 |
|
78 | | -## What this repo now ships |
| 7 | +1. Author source in `src/`. |
| 8 | +2. Build distributables with `npm run build`. |
| 9 | +3. Ship only `wwwroot` artifacts in releases: |
| 10 | + - `wwwroot/blazer-markdown-editor.js` |
| 11 | + - `wwwroot/blazer-markdown-editor.min.js` |
| 12 | + - `wwwroot/blazer-markdown-editor.css` |
79 | 13 |
|
80 | | -This repo now includes lockfile + local bundling support: |
81 | | - |
82 | | -- `package.json` + `package-lock.json` for pinned JS dependencies |
83 | | -- `src/blazer-markdown-editor.js` as the package entry |
84 | | -- `scripts/build.mjs` build script |
85 | | -- distributable assets in `wwwroot/` (JS generated by build): |
86 | | - - `wwwroot/blazer-markdown-editor.js` |
87 | | - - `wwwroot/blazer-markdown-editor.css` |
88 | | - |
89 | | -### Build |
| 14 | +## Build |
90 | 15 |
|
91 | 16 | ```bash |
92 | 17 | npm ci |
93 | 18 | npm run build |
94 | 19 | ``` |
95 | 20 |
|
96 | | -### MudBlazor/Blazor usage |
| 21 | +Build output includes license headers automatically. |
| 22 | + |
| 23 | +## Versioning |
97 | 24 |
|
98 | | -Include the generated static assets: |
| 25 | +This project uses calendar versioning: |
| 26 | + |
| 27 | +- Format: `YYYY.MINOR.PATCH` |
| 28 | +- Current: `2026.2.1` |
| 29 | + |
| 30 | +## Blazor / MudBlazor consumption |
| 31 | + |
| 32 | +Include static assets: |
99 | 33 |
|
100 | 34 | ```html |
101 | 35 | <link rel="stylesheet" href="_content/<YourPackageOrProject>/blazer-markdown-editor.css" /> |
102 | 36 | <script src="_content/<YourPackageOrProject>/blazer-markdown-editor.js"></script> |
103 | 37 | ``` |
104 | 38 |
|
105 | | -Then use JSInterop against: |
| 39 | +JSInterop API: |
106 | 40 |
|
107 | 41 | - `window.blazerMarkdownEditor.create(target, { markdown })` |
108 | 42 | - `window.blazerMarkdownEditor.setMarkdown(editorId, markdown)` |
109 | 43 | - `window.blazerMarkdownEditor.getMarkdown(editorId)` |
110 | 44 | - `window.blazerMarkdownEditor.focus(editorId)` |
111 | 45 | - `window.blazerMarkdownEditor.destroy(editorId)` |
112 | 46 |
|
113 | | -If this repo is consumed as a dependency in your MudBlazor solution, point your static-web-assets path to the `wwwroot` output and call `npm ci && npm run build` in your package/CI step. |
| 47 | +## Release process (artifact-only) |
| 48 | + |
| 49 | +Create a GitHub release with only the `wwwroot` files for that version. |
| 50 | + |
| 51 | +Suggested release assets: |
| 52 | + |
| 53 | +- `wwwroot/blazer-markdown-editor.js` |
| 54 | +- `wwwroot/blazer-markdown-editor.min.js` |
| 55 | +- `wwwroot/blazer-markdown-editor.css` |
0 commit comments