nocode-js · b4rtaz · Sep 15, 2024 · Sep 15, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.2
+
+This version reverts the changes introduced in version 0.24.1. To modify the DOM attachment check, you should now pass the `documentBody` property in the configuration, which should reference the document's body element.
+
 # 0.24.1
 
 This version allows to disable the DOM attachment check.

diff --git a/README.md b/README.md
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 18",
 		"@angular/core": "12 - 18",
-		"sequential-workflow-designer": "^0.24.1"
+		"sequential-workflow-designer": "^0.24.2"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.24.1",
-		"sequential-workflow-designer-angular": "^0.24.1",
+		"sequential-workflow-designer": "^0.24.2",
+		"sequential-workflow-designer-angular": "^0.24.2",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.1.tgz#09b6b943057a338ca31393fef41f4fba684938b0"
-  integrity sha512-B72m3jCcl/ZTHjXPuF/BAP37dgfvw91JzD0LeKZUDcEsvDOfH1lVCjvZD1JWlplQhLsYHTZohmg698lgRjdY9A==
+sequential-workflow-designer-angular@^0.24.2:
+  version "0.24.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.2.tgz#def1c1ed8bf58942653be1dd4a5e8d5eb8e77cb5"
+  integrity sha512-o3oi6ogatAm53Drn44IoupcQHxgi2e3/8tf22J2AyOrFrIvzGbxVyZMKF2t99zYBDjmJkQ7p2jp58kwk0e363Q==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.1.tgz#d5e60c518589a655fda308068e3bae47341f958b"
-  integrity sha512-BNeIN0RWwObaSnlAGm2IpqPb/NpvtLyy2Ft2arRuQ2PO8a4RkU6Wu0G7mx1i6NLNoN2xJOf+4PsTDFeOk/k2ww==
+sequential-workflow-designer@^0.24.2:
+  version "0.24.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.2.tgz#628b3d1e317c0a40b9b4c7c3b1b2703e17b3b741"
+  integrity sha512-dfnf23keTXvXlAq0XBNbOi2pyrJXKB4j41IPIV0UpFEbKZ54QkxPq4UYubA/TWGjSgIOG+jnrZuNrEzs61UVRw==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.24.1",
-		"sequential-workflow-designer-react": "^0.24.1"
+		"sequential-workflow-designer": "^0.24.2",
+		"sequential-workflow-designer-react": "^0.24.2"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.24.1",
-		"sequential-workflow-designer-svelte": "^0.24.1"
+		"sequential-workflow-designer": "^0.24.2",
+		"sequential-workflow-designer-svelte": "^0.24.2"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/behaviors/drag-step-behavior-view.ts b/designer/src/behaviors/drag-step-behavior-view.ts
@@ -9,16 +9,17 @@ export class DragStepView {
 		const layer = Dom.element('div', {
 			class: `sqd-drag sqd-theme-${theme}`
 		});
-		document.body.appendChild(layer);
+		componentContext.documentBody.appendChild(layer);
 
 		const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
 
-		return new DragStepView(component, layer);
+		return new DragStepView(component, layer, componentContext.documentBody);
 	}
 
 	private constructor(
 		public readonly component: DraggedComponent,
-		private readonly layer: HTMLElement
+		private readonly layer: HTMLElement,
+		private readonly documentBody: Node
 	) {}
 
 	public setPosition(position: Vector) {
@@ -28,6 +29,6 @@ export class DragStepView {
 
 	public remove() {
 		this.component.destroy();
-		document.body.removeChild(this.layer);
+		this.documentBody.removeChild(this.layer);
 	}
 }
diff --git a/designer/src/component-context.ts b/designer/src/component-context.ts
@@ -17,7 +17,8 @@ export class ComponentContext {
 		preferenceStorage: PreferenceStorage,
 		placeholderController: PlaceholderController,
 		i18n: I18n,
-		services: Services
+		services: Services,
+		documentBody: Node
 	): ComponentContext {
 		const validator = new DefinitionValidator(configuration.validator, state);
 		const iconProvider = new IconProvider(configuration.steps);
@@ -30,7 +31,8 @@ export class ComponentContext {
 			definitionWalker,
 			services,
 			preferenceStorage,
-			i18n
+			i18n,
+			documentBody
 		);
 	}
 
@@ -42,6 +44,7 @@ export class ComponentContext {
 		public readonly definitionWalker: DefinitionWalker,
 		public readonly services: Services,
 		public readonly preferenceStorage: PreferenceStorage,
-		public readonly i18n: I18n
+		public readonly i18n: I18n,
+		public readonly documentBody: Node
 	) {}
 }
diff --git a/designer/src/core/is-element-attached.spec.ts b/designer/src/core/is-element-attached.spec.ts
@@ -1,19 +1,21 @@
 import { isElementAttached } from './is-element-attached';
 
 describe('isElementAttached', () => {
+	const documentBody = document.body;
+
 	it('returns true if attached', () => {
 		const element = document.createElement('h2');
 
 		document.body.appendChild(element);
 
-		expect(isElementAttached(element)).toBe(true);
+		expect(isElementAttached(element, documentBody)).toBe(true);
 
 		document.body.removeChild(element);
 	});
 
 	it('returns false if not attached', () => {
 		const element = document.createElement('h2');
 
-		expect(isElementAttached(element)).toBe(false);
+		expect(isElementAttached(element, documentBody)).toBe(false);
 	});
 });
diff --git a/designer/src/core/is-element-attached.ts b/designer/src/core/is-element-attached.ts
@@ -1,3 +1,3 @@
-export function isElementAttached(element: HTMLElement): boolean {
-	return !(document.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
+export function isElementAttached(element: HTMLElement, documentBody: Node): boolean {
+	return !(documentBody.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_DISCONNECTED);
 }
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -89,9 +89,9 @@ export interface DesignerConfiguration<TDefinition extends Definition = Definiti
 	i18n?: I18n;
 
 	/**
-	 * @description By default, the designer checks if the placeholder is attached to the DOM. This flag may disable this check.
+	 * @description The body of the document. By default, the designer will use the `document.body`.
 	 */
-	disableDomAttachmentCheck?: boolean;
+	documentBody?: Node;
 }
 
 export type UidGenerator = () => string;

diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts
@@ -19,7 +19,8 @@ export class DesignerContext {
 		parent: HTMLElement,
 		startDefinition: Definition,
 		configuration: DesignerConfiguration,
-		services: Services
+		services: Services,
+		documentBody: Node
 	): DesignerContext {
 		const definition = ObjectCloner.deepClone(startDefinition);
 
@@ -54,7 +55,8 @@ export class DesignerContext {
 			preferenceStorage,
 			placeholderController,
 			i18n,
-			services
+			services,
+			documentBody
 		);
 
 		return new DesignerContext(

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -36,12 +36,13 @@ export class Designer<TDefinition extends Definition = Definition> {
 		const config = configuration as DesignerConfiguration;
 		validateConfiguration(config);
 
-		if (!config.disableDomAttachmentCheck && !isElementAttached(placeholder)) {
+		const documentBody = configuration.documentBody ?? document.body;
+		if (!isElementAttached(placeholder, documentBody)) {
 			throw new Error('Placeholder is not attached to the DOM');
 		}
 
 		const services = ServicesResolver.resolve(configuration.extensions, config);
-		const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
+		const designerContext = DesignerContext.create(placeholder, startDefinition, config, services, documentBody);
 		const designerApi = DesignerApi.create(designerContext);
 
 		const view = DesignerView.create(placeholder, designerContext, designerApi);

diff --git a/designer/src/test-tools/stubs.ts b/designer/src/test-tools/stubs.ts
@@ -48,7 +48,8 @@ export function createDesignerContextStub(): DesignerContext {
 	const parent = document.createElement('div');
 	const configuration = createDesignerConfigurationStub();
 	const services = ServicesResolver.resolve([], configuration);
-	return DesignerContext.create(parent, createDefinitionStub(), createDesignerConfigurationStub(), services);
+	const documentBody = document.body;
+	return DesignerContext.create(parent, createDefinitionStub(), createDesignerConfigurationStub(), services, documentBody);
 }
 
 export function createComponentContextStub(): ComponentContext {

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/[email protected].1';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/[email protected].2';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);

diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.24.1"
+		"sequential-workflow-designer": "^0.24.2"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.24.1",
+		"sequential-workflow-designer": "^0.24.2",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",

diff --git a/svelte/package.json b/svelte/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.24.1",
+	"version": "0.24.2",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.24.1"
+		"sequential-workflow-designer": "^0.24.2"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.24.1",
+		"sequential-workflow-designer": "^0.24.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",