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;
/**