docs: update demo

cheminfo · Jul 25, 2024 · 2ea52ef · 2ea52ef
1 parent b64aca6
commit 2ea52ef
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/examples/generic_editor/demo.html b/examples/generic_editor/demo.html
@@ -2,12 +2,12 @@
 
 <html lang="en">
   <head>
-    <title>Generic editor - Demo lib CanvasEditor</title>
+    <title>Generic editor - CanvasEditor demo</title>
     <link rel="stylesheet" href="../base.css" />
     <script type="module" src="demo/demo.ts"></script>
   </head>
   <body>
-    <h1>Generic editor - Demo lib CanvasEditor</h1>
+    <h1>Generic editor - CanvasEditor demo</h1>
     <section
       class="grid gap-2"
       style="

diff --git a/examples/web_component/demo.html → examples/generic_editor/web_component.html b/examples/web_component/demo.html → examples/generic_editor/web_component.html
@@ -2,9 +2,13 @@
 
 <html lang="en">
   <head>
-    <title>Generic editor - Demo CanvasEditorElement (WebComponent)</title>
+    <title>Generic editor - &lt;openchemlib-editor> (Web Component) demo</title>
     <link rel="stylesheet" href="../base.css" />
-    <script type="module" src="demo.ts"></script>
+    <script type="module">
+      import OCL from '../../distesm/full.pretty';
+
+      OCL.registerCustomElement();
+    </script>
 
     <style>
       openchemlib-editor:defined {
@@ -13,7 +17,7 @@
     </style>
   </head>
   <body>
-    <h1>Generic editor - Demo CanvasEditorElement (WebComponent)</h1>
+    <h1>Generic editor - &lt;openchemlib-editor> (Web Component) demo</h1>
 
     <p>Empty editor</p>
     <openchemlib-editor></openchemlib-editor>
@@ -34,6 +38,15 @@ <h1>Generic editor - Demo CanvasEditorElement (WebComponent)</h1>
       fragment
     ></openchemlib-editor>
 
+    <p>
+      Molecule readonly
+      <code>ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@</code>
+    </p>
+    <openchemlib-editor
+      readonly
+      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"
+    ></openchemlib-editor>
+
     <p>Reaction <code>gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@</code></p>
     <openchemlib-editor
       idcode="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@"
@@ -51,12 +64,12 @@ <h1>Generic editor - Demo CanvasEditorElement (WebComponent)</h1>
     ></openchemlib-editor>
 
     <p>
-      Molecule readonly
-      <code>ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@</code>
+      Reaction readonly <code>gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@</code>
     </p>
     <openchemlib-editor
+      idcode="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@"
+      mode="reaction"
       readonly
-      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"
     ></openchemlib-editor>
   </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -11,11 +11,11 @@ <h1>OpenChemLib JS examples</h1>
       <h2>Generic editor</h2>
       <ul>
         <li>
-          <a href="generic_editor/demo.html">Demo lib CanvasEditor</a>
+          <a href="generic_editor/demo.html">CanvasEditor demo</a>
         </li>
         <li>
-          <a href="web_component/demo.html"
-            >Demo CanvasEditorElement (WebComponent)</a
+          <a href="generic_editor/web_component.html"
+            >&lt;openchemlib-editor> (Web Component) demo</a
           >
         </li>
       </ul>

diff --git a/examples/web_component/demo.ts b/examples/web_component/demo.ts