diff --git a/examples/generic_editor/web_component.html b/examples/generic_editor/web_component.html index cc921374..0c3bc152 100644 --- a/examples/generic_editor/web_component.html +++ b/examples/generic_editor/web_component.html @@ -24,7 +24,7 @@

Generic editor - <openchemlib-editor> (Web Component) demo

Molecule ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@

@@ -34,7 +34,7 @@

Generic editor - <openchemlib-editor> (Web Component) demo

@@ -44,12 +44,12 @@

Generic editor - <openchemlib-editor> (Web Component) demo

Reaction gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@

@@ -58,7 +58,7 @@

Generic editor - <openchemlib-editor> (Web Component) demo

gJX@@eKU@P gGQHDHaImfhB!defH@DAIfUVjj`B

@@ -67,7 +67,7 @@

Generic editor - <openchemlib-editor> (Web Component) demo

Reaction readonly gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@

@@ -79,7 +79,7 @@

Generic editor - <openchemlib-editor> (Web Component) demo

!Bb@Jw@oy??`C~@K\B !Bb@K~_{\BbOvH?_y?##

diff --git a/lib/canvas_editor/init/canvas_editor_element.js b/lib/canvas_editor/init/canvas_editor_element.js index 85f97092..1d1f0794 100644 --- a/lib/canvas_editor/init/canvas_editor_element.js +++ b/lib/canvas_editor/init/canvas_editor_element.js @@ -27,7 +27,7 @@ function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) { set idcode(value) { this.#state.idcode = String(value); - this.setAttribute('idcode', JSON.stringify(this.#state.idcode)); + this.setAttribute('idcode', this.#state.idcode); } get fragment() { @@ -286,10 +286,8 @@ function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) { * Custom element added to page. */ connectedCallback() { - const jsonIdcode = this.getAttribute('idcode'); - this.#state = { - idcode: JSON.parse(jsonIdcode) || '', + idcode: this.getAttribute('idcode') || '', fragment: this.hasAttribute('fragment'), mode: this.getAttribute('mode') || CanvasEditorElement.MODE.MOLECULE, readonly: this.hasAttribute('readonly'), @@ -325,7 +323,7 @@ function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) { const mutatorHandler = (() => { switch (name) { case 'idcode': { - this.#state.idcode = JSON.parse(String(newValue)); + this.#state.idcode = String(newValue); return () => this.#initIdCode(); } case 'fragment': { diff --git a/types.d.ts b/types.d.ts index 8166aa2a..c815e6bb 100644 --- a/types.d.ts +++ b/types.d.ts @@ -3921,17 +3921,13 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor { * ``` * * In HTML - * - * /!\ The `idcode` attribute MUST be encoded with `JSON.stringify`. - * `idcode` can include special characters like `\u007F` which are not valid in `UVString` - * * ```html *

Empty editor

* * *

Molecule ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@

* * *

@@ -3941,13 +3937,13 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor { * *

* * *

Reaction gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@

* * @@ -3956,7 +3952,7 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor { * gJX@@eKU@P gGQHDHaImfhB!defH@DAIfUVjj`B *

* @@ -3967,7 +3963,7 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor { *

* * ``` * @@ -3987,8 +3983,7 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor { */ declare interface CanvasEditorElement extends HTMLElement { /** - * If set from attributes, init from DOM, it MUST be encoded with JSON.stringify. - * @defaultValue '""' + * @defaultValue '' */ idcode: string; /**