Fix: Update syntax of graphviz-webcomponent.

     Correctly translate graphviz-webcomponent from Client to source code.

Author: bjones1

README.md

@@ -147,9 +147,9 @@ following characters should be escaped: `*`, `_`, `\`, `[`, `]`, `<`.
 The CodeChat Editor contains rudimentary support for diagrams created by
 [Graphviz](https://graphviz.org/). For example,
 
-| Source                                                         | Rendered                                                     |
-| -------------------------------------------------------------- | ------------------------------------------------------------ |
-| `<graphviz-graph graph="digraph { A -> B }"></graphviz-graph>` | <graphviz-graph graph="digraph { A -> B }"></graphviz-graph> |
+| 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

client/package.json5

@@ -62,7 +62,7 @@
         '@codemirror/view': '^6.38.2',
         '@mathjax/mathjax-newcm-font': '4.0.0',
         codemirror: '^6.0.2',
-        'graphviz-webcomponent': '^2.0.0',
+        'graphviz-webcomponent': 'github:bjones1/graphviz-webcomponent#dist',
         mathjax: '4.0.0',
         mermaid: '^11.10.1',
         'npm-check-updates': '^18.0.3',

client/src/third-party/turndown/turndown.browser.es.mjs

@@ -55,7 +55,8 @@ var meaningfulWhenBlankElements = [
 ];
 
 function isMeaningfulWhenBlank (node) {
-  return is(node, meaningfulWhenBlankElements)
+  // Certain standard HTML tags, plus any custom tag, are meaningful when blank.
+  return is(node, meaningfulWhenBlankElements) || node.nodeName.includes('-')
 }
 
 function hasMeaningfulWhenBlank (node) {
@@ -77,7 +78,7 @@ function has (node, tagNames) {
 
 function Node (node, options) {
   node.isBlock = isBlock(node);
-  node.isCode = node.nodeName === 'CODE' || node.nodeName === 'WC-MERMAID' || node.parentNode.isCode;
+  node.isCode = node.nodeName === 'CODE' || node.nodeName === 'WC-MERMAID' || node.nodeName === 'GRAPHVIZ-GRAPH' || node.parentNode.isCode;
   node.isBlank = isBlank(node);
   node.flankingWhitespace = flankingWhitespace(node, options);
   // When true, this node will be rendered as pure Markdown; false indicates it
@@ -132,7 +133,8 @@ function isBlank (node) {
     !isMeaningfulWhenBlank(node) &&
     /^\s*$/i.test(node.textContent) &&
     !hasVoid(node) &&
-    !hasMeaningfulWhenBlank(node)
+    !hasMeaningfulWhenBlank(node) &&
+    (node.childNodes === undefined || node.childNodes.length === 0)
   )
 }
 
@@ -773,7 +775,7 @@ function collapseWhitespace (options) {
   var isBlock = options.isBlock;
   var isVoid = options.isVoid;
   var isPre = options.isPre || function (node) {
-    return node.nodeName === 'PRE' || node.nodeName === 'WC-MERMAID'
+    return node.nodeName === 'PRE' || node.nodeName === 'WC-MERMAID' || node.nodeName === 'GRAPHVIZ-GRAPH'
   };
   var renderAsPure = options.renderAsPure;
 
@@ -1222,7 +1224,7 @@ TurndownService.prototype = {
 
 // These HTML elements are considered block nodes, as opposed to inline nodes. It's based on the Commonmark spec's selection of [HTML blocks](https://spec.commonmark.org/0.31.2/#html-blocks).
 const blockNodeNames = new Set([
-  'PRE', 'SCRIPT', 'STYLE', 'TEXTAREA', 'ADDRESS', 'ARTICLE', 'ASIDE', 'BASE', 'BASEFONT', 'BLOCKQUOTE', 'BODY', 'CAPTION', 'CENTER', 'COL', 'COLGROUP', 'DD', 'DETAILS', 'DIALOG', 'DIR', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM', 'FRAME', 'FRAMESET', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEAD', 'HEADER', 'HR', 'HTML', 'IFRAME', 'LEGEND', 'LI', 'LINK', 'MAIN', 'MENU', 'MENUITEM', 'NAV', 'NOFRAMES', 'OL', 'OPTGROUP', 'OPTION', 'P', 'PARAM', 'SEARCH', 'SECTION', 'SUMMARY', 'TABLE', 'TBODY', 'TD', 'TFOOT', 'TH', 'THEAD', 'TITLE', 'TR', 'TRACK', 'UL', 'WC-MERMAID'
+  'PRE', 'SCRIPT', 'STYLE', 'TEXTAREA', 'ADDRESS', 'ARTICLE', 'ASIDE', 'BASE', 'BASEFONT', 'BLOCKQUOTE', 'BODY', 'CAPTION', 'CENTER', 'COL', 'COLGROUP', 'DD', 'DETAILS', 'DIALOG', 'DIR', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM', 'FRAME', 'FRAMESET', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEAD', 'HEADER', 'HR', 'HTML', 'IFRAME', 'LEGEND', 'LI', 'LINK', 'MAIN', 'MENU', 'MENUITEM', 'NAV', 'NOFRAMES', 'OL', 'OPTGROUP', 'OPTION', 'P', 'PARAM', 'SEARCH', 'SECTION', 'SUMMARY', 'TABLE', 'TBODY', 'TD', 'TFOOT', 'TH', 'THEAD', 'TITLE', 'TR', 'TRACK', 'UL', 'WC-MERMAID', 'GRAPHVIZ-GRAPH'
 ]);
 
 /**