misc: introduce godo.editable (#89226)

in place of showEdition() and validEdition()

dist/css/godo.css

@@ -231,7 +231,7 @@ div.godo .ProseMirror.godo--editor a {
 .html-edition .godo--editor {
   outline: none;
 }
-.html-edition--show {
+.html-edition.is-editable {
   --background-color: hsla(0, 0%, 100%, 0.5);
   --padding: 1em;
   outline: 1px solid;
@@ -242,10 +242,9 @@ div.godo .ProseMirror.godo--editor a {
   padding: var(--padding);
   padding-top: 0;
 }
-.html-edition--show .godo--editor {
+.html-edition.is-editable .godo--editor {
   padding-top: var(--padding);
 }
-.html-edition--show .godo-blocks-menu {
-  // transform: translateY(-1em);
+.html-edition.is-editable .godo-blocks-menu {
   background-color: transparent;
 }

dist/index.html

@@ -133,6 +133,8 @@
 
 		<h3>DIV</h3>
 
+		<a id="edit-link" href="">edit</a>
+
 		<div class="editableDiv-for-godo" id="div-godo-source">
 			<p>This text is div childs</p>
 
@@ -194,14 +196,6 @@
 		cancelBtn.hidden = true
 		saveBtn.hidden = true
 
-		editor.addEventListener('focusin', () => {
-			if (editor.view.hasFocus) {
-				editor.showEdition()
-				cancelBtn.hidden = false
-				saveBtn.hidden = false
-			}
-		})
-
 		cancelBtn.addEventListener('click', () => {
 			editor.cancelEdition()
 			cancelBtn.hidden = true
@@ -224,14 +218,23 @@
 			})
 
 			if (!request.ok) {
-			  throw new Error(`HTTP error! status: ${request.status}`)
+				throw new Error(`HTTP error! status: ${request.status}`)
 			}
-
-			editor.validEdition()
+			editor.sourceContent = editor.getHTML()
+			editor.editable = false
 			cancelBtn.hidden = true
 			saveBtn.hidden = true
 		})
 
+		const edit_link = document.getElementById('edit-link')
+		edit_link.addEventListener('click', (e) => {
+			editor.editable = true
+			cancelBtn.hidden = false
+			saveBtn.hidden = false
+			editor.view.focus()
+			e.preventDefault()
+		})
+
 	</script>
 
 </body>

src-js/godo.js

@@ -46,10 +46,11 @@ export default class Godo extends window.HTMLElement {
   connectedCallback () {
     const linkedSourceId = this.getAttribute('linked-source')
     this.linkedSource = document.getElementById(linkedSourceId)
+    this.on()
 
     if (this.linkedSource.form) {
-      this.on()
       this.editorWrapper.classList.add('is-form-widget')
+      this.editable = !this.linkedSource.readOnly
     } else {
       this.initHTMLEditor()
     }
@@ -61,7 +62,8 @@ export default class Godo extends window.HTMLElement {
       instantUpdate: this.getAttribute('instant-update') !== null,
       updateEvent: this.getAttribute('update-event'),
       headingLevels: this.getAttribute('heading-levels'),
-      editable: !this.linkedSource.readOnly,
+      editable: false,
+      activePlugins: false,
     }
 
     const componentsDefinitions = [base, fontMarks, link]
@@ -94,7 +96,7 @@ export default class Godo extends window.HTMLElement {
       return {
         schema: this.schema,
         doc: DOMParser.fromSchema(this.schema).parse(this.sourceContent),
-        plugins: this.options.editable ? this.pluginsList : [],
+        plugins: this.activePlugins ? this.pluginsList : [],
       }
     }
 
@@ -128,28 +130,12 @@ export default class Godo extends window.HTMLElement {
   }
 
   initHTMLEditor () {
-    this.on()
-    this.activePlugins = false
     this.linkedSource.hidden = true
     this.editorWrapper.classList.add('html-edition')
 
-    this.showEdition = () => {
-      if (!this.activePlugins) {
-        this.activePlugins = true
-        this.editorWrapper.classList.add('html-edition--show')
-      }
-    }
-
     this.cancelEdition = () => {
       this.resetFromSource()
-      this.activePlugins = false
-      this.editorWrapper.classList.remove('html-edition--show')
-    }
-
-    this.validEdition = () => {
-      this.sourceContent = this.getHTML()
-      this.activePlugins = false
-      this.editorWrapper.classList.remove('html-edition--show')
+      this.editable = false
     }
   }
 
@@ -178,7 +164,7 @@ export default class Godo extends window.HTMLElement {
   }
 
   get activePlugins () {
-    return this._activePlugins
+    return this.options.activePlugins
   }
 
   set activePlugins (bool) {
@@ -187,7 +173,20 @@ export default class Godo extends window.HTMLElement {
     })
     this.view.updateState(newState)
     this.view.updatePluginViews()
-    this._activePlugins = bool
+    this.options.activePlugins = bool
+  }
+
+  get editable () {
+    return this.options.editable
+  }
+
+  set editable (bool) {
+    this.activePlugins = bool
+    this.view.setProps({
+      editable: () => bool,
+    })
+    this.editorWrapper.classList.toggle('is-editable', bool)
+    this.options.editable = bool
   }
 
   resetFromSource () {