Dev

.github/workflows/check.yml

@@ -23,6 +23,10 @@ name: Check
 on:
   pull_request:
 
+env:
+  # Always display a backtrace, to help track down errors.
+  RUST_BACKTRACE: 1
+
 jobs:
   check:
     strategy:

CHANGELOG.md

@@ -22,7 +22,15 @@ Changelog
 [Github master](https://github.com/bjones1/CodeChat_Editor)
 --------------------------------------------------------------------------------
 
-* No changes.
+* Update Graphviz to latest build; make Graphviz output a block element, not an
+  inline element.
+* Allow creating Mermaid and Graphviz diagrams using simpler code block syntax.
+* Support math free of Markdown escaping. This is a backward-incompatible
+  change: you must manually remove Markdown escaping from math written before
+  this release.
+* Fix failures when trying to edit a doc block which contains only diagrams.
+* Fix data corruption bug after sending a re-translation back to the Client.
+* Correct incorrect whitespace removal in Graphviz and Mermaid diagrams.
 
 Version 0.1.43 -- 2025-Dec-05
 --------------------------------------------------------------------------------

README.md

@@ -111,62 +111,92 @@ Mathematics
 --------------------------------------------------------------------------------
 
 The CodeChat Editor uses [MathJax](https://www.mathjax.org/) to support typeset
-mathematics. Place the delimiters `$` or `\\(` and `\\)` immediately before and
-after in-line mathematics; place `$$` or `\\\[` and `\\\]` immediately before
-and after displayed mathematics. For example,
+mathematics. Place the delimiters `$` immediately before and after in-line
+mathematics; place `$$` immediately before and after displayed mathematics. For
+example,
 
-| Source                                        | Rendered                                    |
-| --------------------------------------------- | ------------------------------------------- |
-| `$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$` | $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$ |
-| `\\(a^2\\)`                                   | \\(a^2\\)                                   |
-| `$$a^2$$`                                     | $$a^2$$                                     |
-| `\\\[a^2\\\]`                                 | \\\[a^2\\\]                                 |
+| Source                                     | Rendered                                 |
+| ------------------------------------------ | ---------------------------------------- |
+| `$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$` | $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ |
+| `$$a^2$$`                                  | $$a^2$$                                  |
 
 See [Latex Mathematics](https://en.wikibooks.org/wiki/LaTeX/Mathematics#Symbols)
 for the syntax used to write mathematics expressions.
 
-### Escaping
-
-Markdown recognizes several characters common in mathematical expressions; these
-must be backslash escaped when used in math expressions to avoid problems. The
-following characters should be escaped: `*`, `_`, `\`, `[`, `]`, `<`.
-
-| Wrong source     | Wrong rendered | Correct source     | Correctly Rendered |
-| ---------------- | -------------- | ------------------ | ------------------ |
-| `${a}_1, b_{2}$` | ${a}*1, b*{2}$ | `${a}\_1, b\_{2}$` | ${a}\_1, b\_{2}$   |
-| `$a*1, b*2$`     | $a*1, b*2$     | `$a\*1, b\*2$`     | $a\*1, b\*2$       |
-| `$[a](b)$`       | $[a](b)$       | `$\[a\](b)$`       | $\[a\](b)$         |
-| `$3 <a> b$`      | $3 <a>b$</a>   | `$3 \<a> b$`       | $3 \<a> b$         |
-| `$a \; b$`       | $a \; b$       | `$a \\; b$`        | $a \\; b$          |
-
 Diagrams
 --------------------------------------------------------------------------------
 
 ### Mermaid
 
-The CodeChat Editor contains rudimentary support for diagrams created by
+The CodeChat Editor supports diagrams created by
 [Mermaid](https://mermaid.js.org/). For example,
 
-| Source                                        | Rendered                                    |
-| --------------------------------------------- | ------------------------------------------- |
-| `<wc-mermaid>graph TD; A --> B;</wc-mermaid>` | <wc-mermaid>graph TD; A --> B;</wc-mermaid> |
+<table>
+  <thead>
+    <tr>
+      <th>Source</th>
+      <th>Rendered</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+
+````markdown
+```mermaid
+graph TD; A --> B;
+```
+````
+
+</td><td>
+
+```mermaid
+graph TD; A --> B;
+```
+
+</td>
+    </tr>
+  </tbody>
+</table>
 
-To edit these diagrams, use an
-[HTML entity encoder/decoder](https://mothereff.in/html-entities) and the
-[Mermaid live editor](https://mermaid.live/).
+The [Mermaid live editor](https://mermaid.live/) provide an focused environment for creating Mermaid chart.
 
 ### Graphviz
 
-The CodeChat Editor contains rudimentary support for diagrams created by
+The CodeChat Editor supports diagrams created by
 [Graphviz](https://graphviz.org/). For example,
 
-| Source                                                | Rendered                                            |
-| ----------------------------------------------------- | --------------------------------------------------- |
-| `<graphviz-graph>digraph { A -> B }</graphviz-graph>` | <graphviz-graph>digraph { A -> B }</graphviz-graph> |
 
-To edit these diagrams, use an
-[HTML entity encoder/decoder](https://mothereff.in/html-entities) and a Graphviz
-editor such as [Edotor](https://edotor.net/).
+<table>
+  <thead>
+    <tr>
+      <th>Source</th>
+      <th>Rendered</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+
+````markdown
+```graphviz
+digraph { A -> B }
+```
+````
+
+</td><td>
+
+```graphviz
+digraph { A -> B }
+```
+
+</td>
+    </tr>
+  </tbody>
+</table>
+
+
+Several on-line tools, such as [Edotor](https://edotor.net/), provide a focused editing experience.
 
 ### PlantUML
 

builder/src/main.rs

@@ -326,7 +326,7 @@ fn patch_client_libs() -> io::Result<()> {
     // inside these isn't removed by TinyMCE. However, this was removed in v6.0.
     // Therefore, manually patch TinyMCE instead.
     patch_file(
-        " wc-mermaid",
+        " wc-mermaid graphviz-graph",
         "const whitespaceElementsMap = createLookupTable('whitespace_elements', 'pre script noscript style textarea video audio iframe object code",
         &format!("{CLIENT_PATH}/node_modules/tinymce/tinymce.js"),
     )?;
@@ -351,12 +351,6 @@ fn patch_client_libs() -> io::Result<()> {
         format!("{CLIENT_PATH}/static/mathjax-newcm-font/chtml"),
         None,
     )?;
-    // Copy over the graphviz files needed.
-    quick_copy_dir(
-        format!("{CLIENT_PATH}/node_modules/graphviz-webcomponent/dist/"),
-        format!("{CLIENT_PATH}/static/graphviz-webcomponent"),
-        Some("renderer.min.js*".to_string()),
-    )?;
 
     Ok(())
 }
@@ -555,6 +549,7 @@ fn run_client_build(
         CLIENT_PATH,
         true,
     )?;
+
     // <a id="#pdf.js>The PDF viewer for use with VSCode. Built it separately,
     // since it's loaded apart from the rest of the Client.
     run_script(
@@ -579,6 +574,21 @@ fn run_client_build(
         format!("{CLIENT_PATH}/static/bundled/node_modules/pdfjs-dist/cmaps/"),
         None,
     )?;
+
+    // Build the graphviz rendering engine.
+    run_script(
+        &esbuild,
+        &[
+            "src/third-party/graphviz-webcomponent/renderer.js",
+            "--bundle",
+            "--outdir=./static/bundled",
+            distflag,
+            "--format=esm",
+        ],
+        CLIENT_PATH,
+        true,
+    )?;
+
     // The HashReader isn't bundled; instead, it's used to translate the JSON
     // metafile produced by the main esbuild run to the simpler format used by
     // the CodeChat Editor. TODO: rewrite this in Rust.
@@ -603,6 +613,7 @@ fn run_client_build(
             true,
         )?;
     }
+
     Ok(())
 }
 

client/package.json5

@@ -43,7 +43,7 @@
         url: 'https://github.com/bjones1/CodeChat_editor',
     },
     type: 'module',
-    version: '0.1.43',
+    version: '0.1.44',
     dependencies: {
         '@codemirror/commands': '^6.10.0',
         '@codemirror/lang-cpp': '^6.0.3',
@@ -61,10 +61,10 @@
         '@codemirror/lang-xml': '^6.1.0',
         '@codemirror/lang-yaml': '^6.1.2',
         '@codemirror/state': '^6.5.2',
-        '@codemirror/view': '^6.38.8',
+        '@codemirror/view': '=6.38.8',
+        '@hpcc-js/wasm-graphviz': '^1.16.0',
         '@mathjax/mathjax-newcm-font': '4.0.0',
         codemirror: '^6.0.2',
-        'graphviz-webcomponent': 'github:bjones1/graphviz-webcomponent#dist',
         mathjax: '4.0.0',
         mermaid: '^11.12.2',
         'npm-check-updates': '^19.1.2',
@@ -76,10 +76,10 @@
         '@types/chai': '^5.2.3',
         '@types/js-beautify': '^1.14.3',
         '@types/mocha': '^10.0.10',
-        '@types/node': '^24.10.1',
+        '@types/node': '^24.10.2',
         '@types/toastify-js': '^1.12.4',
-        '@typescript-eslint/eslint-plugin': '^8.48.1',
-        '@typescript-eslint/parser': '^8.48.1',
+        '@typescript-eslint/eslint-plugin': '^8.49.0',
+        '@typescript-eslint/parser': '^8.49.0',
         chai: '^6.2.1',
         esbuild: '^0.27.1',
         eslint: '^9.39.1',