paulovmr/file1.js

## file1.js
const editor = DmnEditor.open({
  container: document.getElementById("dmn-editor-container"),
  initialContent: Promise.resolve(""),
  readOnly: false,
  origin: "",
  resources: new Map([
    [
      "MyIncludedModel.dmn",
      {
        contentType: "text",
        content: Promise.resolve("")
      }
    ]
  ])
});

## file10.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #dmn-editor-container {
        height: calc(100vh - 50px);
      }

      .toolbar {
        height: 30px;
      }

      .hidden {
        display: none;
      }
    </style>

    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://kiegroup.github.io/kogito-online/standalone/dmn/index.js"></script>
  </head>

  <body>
    <div class="toolbar">
      <span id="unsavedChanges" class="hidden">File contains unsaved changes.</span>
      <button id="undo">Undo</button>
      <button id="redo">Redo</button>
      <button id="download">Download</button>
      <button id="downloadSvg">Download SVG</button>
    </div>
    <div id="dmn-editor-container" />

    <script>
      const editor = DmnEditor.open({
        container: document.getElementById("dmn-editor-container"),
        initialContent: Promise.resolve(""),
        readOnly: false
      });

      document.getElementById("undo").addEventListener("click", () => {
        editor.undo();
      });

      document.getElementById("redo").addEventListener("click", () => {
        editor.redo();
      });

      document.getElementById("download").addEventListener("click", () => {
        editor.getContent().then(content => {
          const elem = window.document.createElement("a");
          elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
          elem.download = "model.dmn";
          document.body.appendChild(elem);
          elem.click();
          document.body.removeChild(elem);
          editor.markAsSaved();
        });
      });

      document.getElementById("downloadSvg").addEventListener("click", () => {
        editor.getPreview().then(svgContent => {
          const elem = window.document.createElement("a");
          elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);
          elem.download = "model.svg";
          document.body.appendChild(elem);
          elem.click();
          document.body.removeChild(elem);
        });
      });

      editor.subscribeToContentChanges(isDirty => {
        if (isDirty) {
          document.getElementById("unsavedChanges").classList.remove("hidden");
        } else {
          document.getElementById("unsavedChanges").classList.add("hidden");
        }
      });
    </script>
  </body>
</html>

## file2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://kiegroup.github.io/kogito-online/standalone/dmn/index.js"></script>
  </head>
  <body>
    <div class="toolbar"></div>
    <div id="dmn-editor-container"></div>
    <script><!-- Editor usage will go here. --></script>
  </body>
</html>

## file3.html
<div class="toolbar">
  <span id="unsavedChanges" class="hidden">File contains unsaved changes.</span>
  <button id="undo">Undo</button>
  <button id="redo">Redo</button>
  <button id="download">Download</button>
  <button id="downloadSvg">Download SVG</button>
</div>

## file4.js
const editor = DmnEditor.open({
  container: document.getElementById("dmn-editor-container"),
  initialContent: Promise.resolve(""),
  readOnly: false
});

## file5.js
document.getElementById("undo").addEventListener("click", () => {
  editor.undo();
});

document.getElementById("redo").addEventListener("click", () => {
  editor.redo();
});

## file6.js
document.getElementById("download").addEventListener("click", () => {
  editor.getContent().then(content => {
    const elem = window.document.createElement("a");
    elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
    elem.download = "model.dmn";
    document.body.appendChild(elem);
    elem.click();
    document.body.removeChild(elem);
    editor.markAsSaved();
  });
});

## file7.js
document.getElementById("downloadSvg").addEventListener("click", () => {
  editor.getPreview().then(svgContent => {
    const elem = window.document.createElement("a");
    elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);
    elem.download = "model.svg";
    document.body.appendChild(elem);
    elem.click();
    document.body.removeChild(elem);
  });
});

## file8.js
editor.subscribeToContentChanges(isDirty => {
  if (isDirty) {
    document.getElementById("unsavedChanges").classList.remove("hidden");
  } else {
    document.getElementById("unsavedChanges").classList.add("hidden");
  }
});

## file9.html
<style>
  #dmn-editor-container {
    height: calc(100vh - 50px);
  }

  .toolbar {
    height: 30px;
  }

  .hidden {
    display: none;
  }
</style>
	const editor = DmnEditor.open({
	container: document.getElementById("dmn-editor-container"),
	initialContent: Promise.resolve(""),
	readOnly: false,
	origin: "",
	resources: new Map([
	[
	"MyIncludedModel.dmn",
	{
	contentType: "text",
	content: Promise.resolve("")
	}
	]
	])
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	#dmn-editor-container {
	height: calc(100vh - 50px);
	}

	.toolbar {
	height: 30px;
	}

	.hidden {
	display: none;
	}
	</style>

	<title></title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="https://kiegroup.github.io/kogito-online/standalone/dmn/index.js"></script>
	</head>

	<body>
	<div class="toolbar">
	<span id="unsavedChanges" class="hidden">File contains unsaved changes.</span>
	<button id="undo">Undo</button>
	<button id="redo">Redo</button>
	<button id="download">Download</button>
	<button id="downloadSvg">Download SVG</button>
	</div>
	<div id="dmn-editor-container" />

	<script>
	const editor = DmnEditor.open({
	container: document.getElementById("dmn-editor-container"),
	initialContent: Promise.resolve(""),
	readOnly: false
	});

	document.getElementById("undo").addEventListener("click", () => {
	editor.undo();
	});

	document.getElementById("redo").addEventListener("click", () => {
	editor.redo();
	});

	document.getElementById("download").addEventListener("click", () => {
	editor.getContent().then(content => {
	const elem = window.document.createElement("a");
	elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
	elem.download = "model.dmn";
	document.body.appendChild(elem);
	elem.click();
	document.body.removeChild(elem);
	editor.markAsSaved();
	});
	});

	document.getElementById("downloadSvg").addEventListener("click", () => {
	editor.getPreview().then(svgContent => {
	const elem = window.document.createElement("a");
	elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent);
	elem.download = "model.svg";
	document.body.appendChild(elem);
	elem.click();
	document.body.removeChild(elem);
	});
	});

	editor.subscribeToContentChanges(isDirty => {
	if (isDirty) {
	document.getElementById("unsavedChanges").classList.remove("hidden");
	} else {
	document.getElementById("unsavedChanges").classList.add("hidden");
	}
	});
	</script>
	</body>
	</html>