From d486cdcfa8ba79161bbcabd32bc3de22ca42db32 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:39:34 +0200
Subject: [PATCH] fix: chromium derived do not support custom element extending
 builtin element

---
 examples/web_component/demo.html              | 16 +++----
 .../init/canvas_editor_element.js             |  2 +-
 lib/canvas_editor/init/index.js               |  4 +-
 types.d.ts                                    | 43 +++++++++++++++++++
 4 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/examples/web_component/demo.html b/examples/web_component/demo.html
index e74af70b..bf0de701 100644
--- a/examples/web_component/demo.html
+++ b/examples/web_component/demo.html
@@ -13,13 +13,13 @@ <h1>Generic editor - Demo CanvasEditorElement (WebComponent)</h1>
       <p>Empty editor</p>
     </openchemlib-editor>
 
-    <!--    <openchemlib-editor-->
-    <!--      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"-->
-    <!--      readonly-->
-    <!--    >-->
-    <!--      <p>-->
-    <!--        Readonly editor with idcode ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@-->
-    <!--      </p>-->
-    <!--    </openchemlib-editor>-->
+    <openchemlib-editor
+      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"
+      readonly
+    >
+      <p>
+        Readonly editor with idcode ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@
+      </p>
+    </openchemlib-editor>
   </body>
 </html>
diff --git a/lib/canvas_editor/init/canvas_editor_element.js b/lib/canvas_editor/init/canvas_editor_element.js
index 27c0f5fc..e6facb64 100644
--- a/lib/canvas_editor/init/canvas_editor_element.js
+++ b/lib/canvas_editor/init/canvas_editor_element.js
@@ -20,7 +20,7 @@ function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) {
    * <openchemlib-editor></openchemlib-editor>
    * ```
    */
-  class CanvasEditorElement extends HTMLDivElement {
+  class CanvasEditorElement extends HTMLElement {
     /** @type {{MOLECULE: 'molecule', REACTION: 'reaction'}} */
     static MODE = Object.freeze(
       Object.create({
diff --git a/lib/canvas_editor/init/index.js b/lib/canvas_editor/init/index.js
index 4bfe5527..ad9fa944 100644
--- a/lib/canvas_editor/init/index.js
+++ b/lib/canvas_editor/init/index.js
@@ -31,9 +31,7 @@ function init(OCL) {
     const constructor = customElements.get('openchemlib-editor');
     if (constructor) return constructor;
 
-    customElements.define('openchemlib-editor', CanvasEditorElement, {
-      extends: 'div',
-    });
+    customElements.define('openchemlib-editor', CanvasEditorElement);
 
     const css = new CSSStyleSheet();
     css.replaceSync(`
diff --git a/types.d.ts b/types.d.ts
index 9cd86a91..63ba54b6 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -3803,8 +3803,51 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor {
 }
 
 /**
+ * a Webcomponent to wrap CanvasEditor
+ *
  * The class CanvasEditorElement is not exposed in OCL scope.
  * You can obtain it from `registerCustomElement`
+ *
+ * Usage:
+ *
+ * ```js
+ * import {registerCustomElement} from 'openchemlib/minimal';
+ *
+ * // register CanvasEditorElement with `openchemlib-editor` tag name
+ * const CanvasEditorElement = registerCustomElement();
+ *
+ * // CanvasEditorElementConstructor.MODE return enums of possible modes
+ *
+ * ```
+ *
+ * @example
+ *
+ * ```html
+ * Molecule
+ * <openchemlib-editor idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"></openchemlib-editor>
+ *
+ * Molecule Fragment
+ * <openchemlib-editor
+ *  idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUhCyqHiCHy@leBhMEh]B\sa^kp"
+ *  fragment
+ * ></openchemlib-editor>
+ *
+ * Reaction
+ * <openchemlib-editor
+ *  idcode="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@"
+ *  mode="reaction"
+ * ></openchemlib-editor>
+ *
+ * Reaction Fragment
+ * <openchemlib-editor
+ *  idcode="gJX@@eKU@P gGQHDHaImfhB!defH@DAIfUVjj`B"
+ *  mode="reaction"
+ *  fragment
+ * ></openchemlib-editor>
+ *
+ * Molecule readonly
+ * <openchemlib-editor readonly idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"></openchemlib-editor>
+ * ```
  */
 declare interface CanvasEditorElement extends HTMLElement {
   /**