Merge pull request #23 from gaelj/initial-development

🐛 Fix build, clean node_modules directory on clean

CodeMirror6/CodeMirror6.csproj

@@ -31,12 +31,22 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" Condition="'$(TargetFramework)'=='net8.0'" />
   </ItemGroup>
 
-   <Target Name="NpmInit" BeforeTargets="BeforeBuild;BeforeRebuild;Rollup">
-    <Exec Command="cd NodeLib &amp;&amp; npm install" />
+  <Target Name="RemoveNodeModulesTarget">
+    <RemoveDir Directories="./NodeLib/node_modules" />
   </Target>
 
-   <Target Name="Rollup" BeforeTargets="BeforeBuild;BeforeRebuild">
-    <Exec Command="cd NodeLib &amp;&amp; npx rollup --config" />
+  <Target Name="NpmInstallTarget" DependsOnTargets="RemoveNodeModulesTarget">
+    <Exec WorkingDirectory="NodeLib" Command="npm install" />
+  </Target>
+
+  <Target Name="RollupBuildTarget" DependsOnTargets="NpmInstallTarget">
+    <Exec WorkingDirectory="NodeLib" Command="npx rollup --config" />
+  </Target>
+
+  <Target Name="BeforeClean" BeforeTargets="Clean" DependsOnTargets="RemoveNodeModulesTarget">
+  </Target>
+
+  <Target Name="BeforeBuild" BeforeTargets="Build" DependsOnTargets="NpmInstallTarget;RollupBuildTarget">
   </Target>
 
 </Project>

CodeMirror6/NodeLib/package.json

@@ -11,6 +11,7 @@
   "author": "Gaël James",
   "license": "MIT",
   "dependencies": {
+    "codemirror": "^6.0.1",
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-css": "^6.2.1",
@@ -35,7 +36,6 @@
     "@uiw/codemirror-theme-tokyo-night": "^4.21.21",
     "@uiw/codemirror-theme-tokyo-night-storm": "^4.21.21",
     "@uiw/codemirror-theme-vscode": "^4.21.21",
-    "codemirror": "^6.0.1",
     "thememirror": "^2.0.1"
   },
   "devDependencies": {

README.md

@@ -2,63 +2,81 @@
 
 ![codemirror.svg](codemirror.svg)
 
-A CodeMirror 6 component for Blazor in .Net 7 and .Net 8.
+[CodeMirror 6](https://codemirror.net/) is a wonderful code editor for the browser.
 
-## Features
+This project wraps it in a Blazor .Net 7 / .Net 8 component, along with many popular use-cases detailed in the official documentation and the user forum, add-ons and themes.
 
-- 2-way-binding of the document contents
-- setting tab size & indentation unit
-- setting a placeholder text
-- applying preset [themes](https://github.com/vadimdemedes/thememirror)
-- setting ReadOnly and Editable attributes
-- applying syntax highlighting and auto-completion for 13 different languages
-- apply Markdown syntax
-- report Markdown syntax at selection(s)
-- manual resizing of the editor
-- image preview
-- linting
+It can be used as a feature-complete Markdown editor.
 
-### Markdown language
+## Features
 
-- Resized header text proportional to header #
-- keybindings to set text in **bold** (`Ctrl-B`) or *italic* (`Ctrl-I`)
+### For all languages
+
+- [x] 2-way-binding of the document contents
+- [x] setting tab size & indentation unit
+- [x] setting a placeholder text
+- [x] applying preset [themes](https://github.com/vadimdemedes/thememirror)
+- [x] setting ReadOnly and Editable attributes
+- [x] applying syntax highlighting and auto-completion for 13 different languages
+- [x] manual resizing of the editor (similar to html `textarea`)
+- [x] image preview
+- [x] custom linting
+- [ ] insert text at cursor / at position
+- [ ] allow undo / redo toolbar buttons
+- [ ] support soft line wrapping
+- [ ] better highlight markdown inline code and code blocks
+- [ ] configure which plugins are active at startup
+- [ ] Add C# language
+- [ ] Add a diff viewer
+- [ ] Implement cursor tooltips
+- [ ] Implement Copilot/AI style suggestions
+- [ ] allow setting the [Starting selection](https://codemirror.net/docs/ref/#state.EditorStateConfig.selection)
+
+### For Markdown language
+
+- [x] apply Markdown syntax
+- [x] report Markdown syntax at selection(s)
+- [x] Resized header text proportional to header #
+- [x] keybindings to set text in **bold** (`Ctrl-B`) or *italic* (`Ctrl-I`)
+- [ ] customize markdown header sizes
+- [ ] support toolbar toggling of checklist items even if checked
+- [ ] support emoji
+- [ ] Implement @user mentions with dropdown list
+- [ ] Apply Markdown style to whole words
+- [ ] Toggling-off a Markdown style should always select the whole styled text block
+- [ ] Add mermaid language highlighting
+- [ ] Implement kroki / mermaid preview
 
 ## Installation
 
-Fork / clone the repository and reference it in your `csproj` file:
+Currently there is no Nuget package available, but it is planned.
+
+Clone the repository and reference it in the `csproj` file of your own project:
 
 `<ProjectReference Include="..\CodeMirror6\CodeMirror6.csproj" />`
 
-In addition to the dotnet 7 or 8 SDK & runtime, you must install [node.js](https://nodejs.org/) and `npx` (`npm install npx`).
+In addition to the dotnet 7 or 8 SDK & runtime, [node.js](https://nodejs.org/) and `npx` (`npm install npx`) are needed.
 
 ## Usage
 
 See `Examples.Common/Example.razor`
 
-Resources are loaded automatically (nothing to add in `_Host.cshtml` / `index.html`).
+JS / CSS resources are loaded automatically (nothing to add in `_Host.cshtml` / `index.html`).
 
 Just add `@using CodeMirror6` in `_Imports.razor` or in your razor page / component and use `<CodeMirror6Wrapper />` as in the examples.
 
-If you have "strange errors" when building, try deleting the `node_modules` directory and rebuild.
+If you have npm / rollup errors when building (for example after pulling recent changes), `dotnet clean` will delete the `node_modules` directory. Then run `dotnet build` again.
 
 ## Modification
 
-The javascript-side initialization is in `CodeMirror6/NodeLib/src/index.ts`
-
-Interop from .Net to JS is in `CodeMirror6/CodeMirrorJsInterop.cs`
-
-Interop from JS to .Net is in `CodeMirror6/DotNetHelper.cs`
-
-The blazor component is in `CodeMirror6Wrapper.razor`
-
-The example component is in `Examples.Common/Example.razor`
+- The javascript-side initialization is in `CodeMirror6/NodeLib/src/index.ts`
+- Interop from .Net to JS is in `CodeMirror6/CodeMirrorJsInterop.cs`
+- Interop from JS to .Net is in `CodeMirror6/DotNetHelper.cs`
+- The blazor component is in `CodeMirror6Wrapper.razor`
+- The example component is in `Examples.Common/Example.razor`
 
 > The Node project is automatically built with the .Net project
 
-## Task list
-
-- [ ] [Starting selection](https://codemirror.net/docs/ref/#state.EditorStateConfig.selection)
-
 ## Screenshots
 
 ![image](https://github.com/gaelj/BlazorCodeMirror6/assets/8884632/141f6b9e-82c4-433a-94d9-a02aba6ac336)