diff --git a/elements/storytelling/src/components/editor.js b/elements/storytelling/src/components/editor.js index 0dff06d3c..0d6ca67f2 100644 --- a/elements/storytelling/src/components/editor.js +++ b/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); diff --git a/elements/storytelling/src/helpers/editor.js b/elements/storytelling/src/helpers/editor.js index 301835fd6..89ec79b84 100644 --- a/elements/storytelling/src/helpers/editor.js +++ b/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); diff --git a/elements/storytelling/src/main.js b/elements/storytelling/src/main.js index cd18b501f..40b9ad419 100644 --- a/elements/storytelling/src/main.js +++ b/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} > `, )} diff --git a/package-lock.json b/package-lock.json index ebe2acfb7..1ee13d80b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,7 @@ }, "elements/chart": { "name": "@eox/chart", - "version": "0.2.0", + "version": "0.3.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "deepmerge-ts": "^7.1.3", @@ -62,7 +62,7 @@ }, "elements/drawtools": { "name": "@eox/drawtools", - "version": "0.11.1", + "version": "0.12.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "lit": "^3.2.0", @@ -78,7 +78,7 @@ }, "elements/geosearch": { "name": "@eox/geosearch", - "version": "0.4.0", + "version": "0.5.0", "license": "MIT", "dependencies": { "@eox/elements-utils": "^0.0.1", @@ -96,7 +96,7 @@ }, "elements/itemfilter": { "name": "@eox/itemfilter", - "version": "1.4.1", + "version": "1.5.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "@floating-ui/dom": "^1.6.8", @@ -124,7 +124,7 @@ }, "elements/jsonform": { "name": "@eox/jsonform", - "version": "0.9.1", + "version": "0.10.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "@json-editor/json-editor": "^2.11.0", @@ -143,7 +143,7 @@ }, "elements/layercontrol": { "name": "@eox/layercontrol", - "version": "0.23.0", + "version": "0.24.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "color-legend-element": "^1.3.0", @@ -222,14 +222,14 @@ }, "elements/layout": { "name": "@eox/layout", - "version": "0.2.0", + "version": "0.3.0", "devDependencies": { "vite": "^5.0.2" } }, "elements/map": { "name": "@eox/map", - "version": "1.16.2", + "version": "1.17.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "flatgeobuf": "^3.35.0", @@ -249,7 +249,7 @@ }, "elements/stacinfo": { "name": "@eox/stacinfo", - "version": "0.5.0", + "version": "0.6.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "@radiantearth/stac-fields": "^1.3.2", @@ -265,7 +265,7 @@ }, "elements/storytelling": { "name": "@eox/storytelling", - "version": "1.2.0", + "version": "1.3.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "@sindresorhus/slugify": "^2.2.1", @@ -290,7 +290,7 @@ }, "elements/timecontrol": { "name": "@eox/timecontrol", - "version": "0.9.0", + "version": "0.10.0", "dependencies": { "@eox/elements-utils": "^0.0.1", "dayjs": "^1.11.9",