feat: added event update for markdown change and disable-autosave (#1364

)

elements/storytelling/src/components/editor.js

@@ -15,6 +15,7 @@ class StoryTellingEditor extends LitElement {
     storyId: { attribute: "story-id", type: String },
     showEditor: { attribute: "show-editor", type: String },
     isNavigation: { attribute: "markdown", type: Boolean },
+    disableAutosave: { attribute: "disable-autosave", type: Boolean },
   };
 
   constructor() {
@@ -52,6 +53,13 @@ class StoryTellingEditor extends LitElement {
      */
     this.showEditor = undefined;
 
+    /**
+     * Disable auto save
+     *
+     * @type {Boolean}
+     */
+    this.disableAutosave = false;
+
     // Bind methods to the instance
     this.disableTextSelection = this.disableTextSelection.bind(this);
     this.enableTextSelection = this.enableTextSelection.bind(this);

elements/storytelling/src/helpers/editor.js

@@ -375,11 +375,17 @@ export function runWhenEditorInitialised(StoryTellingEditor) {
   if (StoryTellingEditor.editor.editor?.editors?.["root.Story"]) {
     const easyMDEInstance =
       StoryTellingEditor.editor.editor.editors["root.Story"].simplemde_instance;
-    generateAutoSave(
-      StoryTellingEditor,
-      StoryTellingEditor.storyId,
-      easyMDEInstance,
-    );
+
+    if (!StoryTellingEditor.disableAutosave) {
+      generateAutoSave(
+        StoryTellingEditor,
+        StoryTellingEditor.storyId,
+        easyMDEInstance,
+      );
+    } else {
+      const saveEle = StoryTellingEditor.querySelector(".editor-saver");
+      saveEle.innerText = "";
+    }
     preventEditorOutsideScroll(StoryTellingEditor);
   } else {
     setTimeout(() => runWhenEditorInitialised(StoryTellingEditor), 100);

elements/storytelling/src/main.js

@@ -41,6 +41,7 @@ export class EOxStoryTelling extends LitElement {
       showNav: { attribute: "show-nav", type: Boolean },
       showEditor: { attribute: "show-editor", type: String },
       noShadow: { attribute: "no-shadow", type: Boolean },
+      disableAutosave: { attribute: "disable-autosave", type: Boolean },
       unstyled: { type: Boolean },
       addCustomSectionIndex: { type: Number, state: true },
       selectedCustomElement: { type: Object, state: true },
@@ -94,6 +95,13 @@ export class EOxStoryTelling extends LitElement {
      */
     this.noShadow = false;
 
+    /**
+     * Disable auto save
+     *
+     * @type {Boolean}
+     */
+    this.disableAutosave = false;
+
     /**
      * Enable or disable editor
      *
@@ -155,6 +163,14 @@ export class EOxStoryTelling extends LitElement {
 
     // Check if 'markdown' property itself has changed and generate sanitized html
     if (changedProperties.has("markdown")) {
+      if (this.markdown) {
+        this.dispatchEvent(
+          new CustomEvent("changed", {
+            detail: this.markdown,
+          }),
+        );
+      }
+
       const unsafeHTML = md.render(this.markdown);
 
       validateMarkdownAttrs(md.attrs.sections, this);
@@ -230,7 +246,9 @@ export class EOxStoryTelling extends LitElement {
       }
     }, 1000);
 
-    initSavedMarkdown(this);
+    if (!this.disableAutosave) {
+      initSavedMarkdown(this);
+    }
     addLightBoxScript(this);
 
     // Check if this.#html is initialized, if not, wait for it
@@ -276,6 +294,7 @@ export class EOxStoryTelling extends LitElement {
               show-editor=${this.showEditor}
               @change=${this.#debounceUpdateMarkdown}
               .markdown=${this.markdown}
+              .disableAutosave=${this.disableAutosave}
             ></eox-storytelling-editor>
           `,
         )}