svedit 0.8.0 → 0.10.0

package/dist/styles/svedit-animations.css

@@ -0,0 +1,8 @@
+@layer svedit-defaults {
+	@keyframes node-caret-blink {
+		0%, 60% { opacity: 1; }
+		68% { opacity: 0; }
+		88% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+}

package/dist/styles/svedit-colors.css

@@ -4,5 +4,6 @@
 		--svedit-editing-stroke: var(--svedit-brand);
 		--svedit-editing-fill: oklch(from var(--svedit-brand) l c h / 0.1);
 		--svedit-canvas-stroke: color-mix(in oklch, currentColor 25%, transparent);
+		--svedit-caret-color: var(--svedit-brand);
 	}
 }

package/dist/types.d.ts

@@ -11,12 +11,17 @@ import type { Component, Snippet } from 'svelte';
 // ===== SELECTION TYPE DEFINITIONS =====
 
 /**
- * A unique node identifier (ideally UUID)
+ * A unique node identifier.
+ *
+ * Node ids must be valid Svedit path string segments: they must start with
+ * a letter or underscore, contain only letters, numbers, underscores, or
+ * dashes, and must not contain `__`.
  */
 export type NodeId = string;
 
 /**
- * Array of IDs, property names (strings), or indexes (integers) that identify a node or property in the document
+ * Array of IDs, property names (strings), or indexes (integers) that identify a node or property in the document.
+ * String segments must follow the same path segment rules as NodeId.
  */
 export type DocumentPath = Array<string | number>;
 
@@ -269,7 +274,8 @@ export type PropertyDefinition =
 export type NodeKind = 'document' | 'block' | 'text' | 'annotation';
 
 /**
- * Schema for text nodes - must have a content property of type annotated_text
+ * Schema for text nodes - must have a content property of type annotated_text.
+ * Use define_document_schema to also check that content is the only annotated_text property.
  */
 export type TextNodeSchema = {
 	kind: 'text';
@@ -278,6 +284,43 @@ export type TextNodeSchema = {
 	} & Record<string, PropertyDefinition>;
 };
 
+export type AnnotatedTextPropertyNames<Properties> = {
+	[PropertyName in keyof Properties]: Properties[PropertyName] extends { type: 'annotated_text' }
+		? PropertyName
+		: never;
+}[keyof Properties];
+
+export type TextNodeSchemaError<Message extends string> = {
+	[SchemaError in `Svedit schema error: ${Message}`]: never;
+};
+
+export type TextNodeMissingContentError = TextNodeSchemaError<
+	'Text node schemas must define a "content" property of type annotated_text.'
+>;
+
+export type TextNodeExtraAnnotatedTextError<ExtraProperty extends string> = TextNodeSchemaError<
+	`Text node schemas must not define annotated_text property "${ExtraProperty}". Use "content" as the only annotated_text property.`
+>;
+
+export type ValidateTextNodeSchema<Schema> = Schema extends {
+	kind: 'text';
+	properties: infer Properties;
+}
+	? string extends keyof Properties
+		? Schema
+		: Properties extends { content: AnnotatedTextProperty }
+			? Exclude<AnnotatedTextPropertyNames<Properties>, 'content'> extends infer ExtraProperties
+				? [ExtraProperties] extends [never]
+					? Schema
+					: TextNodeExtraAnnotatedTextError<Extract<ExtraProperties, string>>
+				: never
+			: TextNodeMissingContentError
+	: Schema;
+
+export type ValidateDocumentSchema<Schema extends Record<string, NodeSchema>> = {
+	[NodeType in keyof Schema]: ValidateTextNodeSchema<Schema[NodeType]>;
+};
+
 /**
  * Schema for non-text nodes
  */

package/dist/utils.d.ts

@@ -129,6 +129,57 @@ export function join_annotated_text(first_text: AnnotatedText, second_text: Anno
  * snake_to_pascal('list_item') // Returns: 'ListItem'
  */
 export function snake_to_pascal(str: string): string;
+/**
+ * Check whether a string can be used as a Svedit path segment.
+ *
+ * Path string segments include node ids and schema property names. Keeping
+ * them restricted makes serialized paths reversible, valid as HTML ids, and
+ * safe to use as CSS anchor-name suffixes.
+ *
+ * @param {string} segment
+ * @returns {boolean}
+ */
+export function is_path_string_segment_valid(segment: string): boolean;
+/**
+ * Assert that a string can be used as a Svedit path segment.
+ *
+ * @param {string} segment
+ * @param {string} [label]
+ * @returns {void}
+ */
+export function assert_path_string_segment(segment: string, label?: string): void;
+/**
+ * Serialize a document path while preserving whether each segment is a
+ * property/key string or an array index number.
+ *
+ * The result is reversible and safe to use as a data attribute value, HTML id,
+ * or CSS anchor-name suffix.
+ *
+ * @param {Array<string | number>} path
+ * @returns {string}
+ *
+ * @example
+ * serialize_path(['page_1', 'body', 0, 'items']) // Returns: 'page_1__body__0__items'
+ */
+export function serialize_path(path: Array<string | number>): string;
+/**
+ * Deserialize a path string produced by serialize_path.
+ *
+ * @param {string} serialized_path
+ * @returns {Array<string | number>}
+ *
+ * @example
+ * deserialize_path('page_1__body__0__items') // Returns: ['page_1', 'body', 0, 'items']
+ */
+export function deserialize_path(serialized_path: string): Array<string | number>;
+/**
+ * Compare two document paths segment-by-segment, preserving segment types.
+ *
+ * @param {Array<string | number>} a
+ * @param {Array<string | number>} b
+ * @returns {boolean}
+ */
+export function paths_equal(a: Array<string | number>, b: Array<string | number>): boolean;
 export function traverse(node_id: any, schema: any, nodes: any): any[];
 /**
  * Extracts the normalized range from a text or node selection.
@@ -138,6 +189,7 @@ export function traverse(node_id: any, schema: any, nodes: any): any[];
  */
 export function get_selection_range(selection?: Selection): SelectionRange | null;
 export function is_selection_collapsed(selection: any): boolean;
+export const PATH_SEPARATOR: "__";
 import type { AnnotatedText } from './types.d.ts';
 import type { Selection } from './types.d.ts';
 import type { SelectionRange } from './types.d.ts';

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAID;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;mCAhVwE,cAAc;+BAAd,cAAc;oCAAd,cAAc"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAGD;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAMD;;;;;;;;;GASG;AACH,sDAHW,MAAM,GACJ,OAAO,CAQnB;AAED;;;;;;GAMG;AACH,oDAJW,MAAM,UACN,MAAM,GACJ,IAAI,CAQhB;AAED;;;;;;;;;;;;GAYG;AACH,qCANW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,MAAM,CAmBlB;AAED;;;;;;;;GAQG;AACH,kDANW,MAAM,GACJ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAuBlC;AAED;;;;;;GAMG;AACH,+BAJW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,OAAO,CAKnB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;AApKD,6BAA8B,IAAI,CAAC;mCAtRsC,cAAc;+BAAd,cAAc;oCAAd,cAAc"}

package/dist/utils.js

@@ -21,7 +21,7 @@ export function is_mobile_browser() {
 	);
 }
 
-// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️
 /**
  * Detect if the current browser is Chrome on desktop
  * @returns {boolean} true if Chrome desktop browser, false otherwise
@@ -54,8 +54,7 @@ export function get_char_length(str) {
 	return [...SEGMENTER.segment(str)].length;
 }
 
-
-// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️
 /**
  * Get a single character at the specified position (accounting for multi-byte characters)
  *
@@ -278,6 +277,113 @@ export function snake_to_pascal(str) {
 		.join('');
 }
 
+export const PATH_SEPARATOR = '__';
+const PATH_STRING_SEGMENT_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+const PATH_INDEX_SEGMENT_RE = /^(0|[1-9]\d*)$/;
+
+/**
+ * Check whether a string can be used as a Svedit path segment.
+ *
+ * Path string segments include node ids and schema property names. Keeping
+ * them restricted makes serialized paths reversible, valid as HTML ids, and
+ * safe to use as CSS anchor-name suffixes.
+ *
+ * @param {string} segment
+ * @returns {boolean}
+ */
+export function is_path_string_segment_valid(segment) {
+	return (
+		typeof segment === 'string' &&
+		PATH_STRING_SEGMENT_RE.test(segment) &&
+		!segment.includes(PATH_SEPARATOR)
+	);
+}
+
+/**
+ * Assert that a string can be used as a Svedit path segment.
+ *
+ * @param {string} segment
+ * @param {string} [label]
+ * @returns {void}
+ */
+export function assert_path_string_segment(segment, label = 'Path segment') {
+	if (!is_path_string_segment_valid(segment)) {
+		throw new Error(
+			`${label} must start with a letter or underscore and contain only letters, numbers, underscores, or dashes. It must not contain "${PATH_SEPARATOR}".`
+		);
+	}
+}
+
+/**
+ * Serialize a document path while preserving whether each segment is a
+ * property/key string or an array index number.
+ *
+ * The result is reversible and safe to use as a data attribute value, HTML id,
+ * or CSS anchor-name suffix.
+ *
+ * @param {Array<string | number>} path
+ * @returns {string}
+ *
+ * @example
+ * serialize_path(['page_1', 'body', 0, 'items']) // Returns: 'page_1__body__0__items'
+ */
+export function serialize_path(path) {
+	return path
+		.map((segment) => {
+			if (typeof segment === 'number') {
+				if (!Number.isInteger(segment) || segment < 0) {
+					throw new Error(`Path index must be a non-negative integer: ${segment}`);
+				}
+				return String(segment);
+			}
+
+			assert_path_string_segment(segment);
+			return segment;
+		})
+		.join(PATH_SEPARATOR);
+}
+
+/**
+ * Deserialize a path string produced by serialize_path.
+ *
+ * @param {string} serialized_path
+ * @returns {Array<string | number>}
+ *
+ * @example
+ * deserialize_path('page_1__body__0__items') // Returns: ['page_1', 'body', 0, 'items']
+ */
+export function deserialize_path(serialized_path) {
+	if (serialized_path === '') return [];
+
+	return serialized_path.split(PATH_SEPARATOR).map((segment) => {
+		if (segment === '') {
+			throw new Error(`Invalid serialized path: ${serialized_path}`);
+		}
+
+		if (/^\d+$/.test(segment)) {
+			if (!PATH_INDEX_SEGMENT_RE.test(segment)) {
+				throw new Error(`Invalid serialized path index: ${segment}`);
+			}
+			return Number(segment);
+		}
+
+		assert_path_string_segment(segment, 'Serialized path segment');
+		return segment;
+	});
+}
+
+/**
+ * Compare two document paths segment-by-segment, preserving segment types.
+ *
+ * @param {Array<string | number>} a
+ * @param {Array<string | number>} b
+ * @returns {boolean}
+ */
+export function paths_equal(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((segment, index) => segment === b[index]);
+}
+
 export function traverse(node_id, schema, nodes) {
 	const json = [];
 	const visited = {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.8.0",
+	"version": "0.10.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -45,6 +45,7 @@
 		"@sveltejs/kit": "^2.55.0",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"@types/node": "^25.6.0",
 		"@typescript-eslint/eslint-plugin": "^8.57.0",
 		"@typescript-eslint/parser": "^8.57.0",
 		"@vitest/browser": "^4.1.0",
@@ -59,8 +60,8 @@
 		"publint": "^0.3.18",
 		"svelte": "^5.53.12",
 		"svelte-check": "^4.4.5",
-		"vite": "^8.0.0",
 		"typescript": "^5.9.3",
+		"vite": "^8.0.0",
 		"vitest": "^4.1.0",
 		"vitest-browser-svelte": "^2.1.0"
 	}

package/src/lib/AnnotatedTextProperty.svelte

@@ -1,6 +1,13 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length, snake_to_pascal, get_selection_range } from './utils.js';
+	import {
+		char_slice,
+		get_char_length,
+		paths_equal,
+		serialize_path,
+		snake_to_pascal,
+		get_selection_range
+	} from './utils.js';
 
 	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
 
@@ -9,10 +16,11 @@
 	/** @type {AnnotatedTextPropertyProps} */
 	let { path, class: css_class, placeholder = '', tag = 'div', style = '', ...rest } = $props();
 
+	let path_str = $derived(serialize_path(path));
+
 	let is_focused = $derived.by(() => {
 		return (
-			svedit.session.selection?.type === 'text' &&
-			path.join('.') === svedit.session.selection?.path.join('.')
+			svedit.session.selection?.type === 'text' && paths_equal(path, svedit.session.selection.path)
 		);
 	});
 
@@ -101,6 +109,7 @@
 
 		return fragments;
 	}
+
 </script>
 
 <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
@@ -111,12 +120,11 @@
 <svelte:element
 	this={tag}
 	data-type="text"
-	data-path={path.join('.')}
-	style="anchor-name: --{path.join('-')};{style}"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style}"
 	class="text svedit-selectable {css_class}"
 	class:empty={is_empty}
 	class:focused={is_focused}
-	class:editable={svedit.editable}
 	{placeholder}
 	{...rest}
 >
@@ -137,11 +145,13 @@
 </svelte:element>
 
 <style>
-	.text {
+	/* Editable text base layout; :where() allows easy override without specificity conflicts. */
+	:where(.text) {
 		white-space: pre-wrap;
 		overflow-wrap: anywhere;
 		box-sizing: content-box;
 	}
+
 	/* We switch from ::before to ::after when the element is focused. So the the caret is always before the placeholder. */
 	[placeholder].empty:not(.focused)::before,
 	[placeholder].empty.focused::after {
@@ -150,13 +160,36 @@
 		color: color-mix(in oklch, currentcolor 50%, transparent);
 	}
 
+	/* A virtual caret: to fix the caret vertical alignment issue in Chrome and Firefox for empty focused contenteditable with placeholders */
+	/* Browser BUG: iOS Safari only considers the caret color set on the top contenteditable element, not on nested elements (e.g. the second selector doesn't work in iOS Safari) */
+	:global(.svedit.editable .svedit-canvas:has([placeholder].empty.focused)),
+	:global(.svedit.editable) [placeholder].empty.focused {
+		caret-color: transparent !important;
+	}
+	:global(.svedit.editable) [placeholder].empty.focused::before {
+		content: "";
+		/* we limit width & height to avoid layout shifts in case the text has a lower natural height */
+		width: 0px;
+		height: 1cap;
+		display: inline-block;
+		/* we use box-shadow to draw the caret shape, matching the native caret */
+		box-shadow:
+			0 -0.4cap 0 0.65px var(--svedit-caret-color, AccentColor),
+			0 0 0 0.65px var(--svedit-caret-color, AccentColor),
+			0 0.4cap 0 0.65px var(--svedit-caret-color, AccentColor);
+		animation: var(
+			--node-caret-animation,
+			node-caret-blink var(--node-caret-blink-duration, 1.1s) ease-in-out infinite
+		);
+	}
+
 	/* Hide flickering: in Chrome, the caret jumps from end of placeholder string to start of text property when we focus */
 	.text:not(.focused) {
 		caret-color: transparent;
 	}
 
 	/* Disable text-transform when editable and focused so users see original text */
-	.text.editable.focused {
+	:global(.svedit.editable) .text.focused {
 		text-transform: none !important;
 	}
 

package/src/lib/Command.svelte.js

@@ -1,4 +1,5 @@
 import { insert_default_node, break_text_node } from './transforms.svelte.js';
+import { can_switch_annotation_type } from './doc_utils.js';
 import { is_selection_collapsed, is_mobile_browser, get_char_length } from './utils.js';
 
 /**
@@ -93,7 +94,11 @@ export class RedoCommand extends Command {
  */
 export class SelectParentCommand extends Command {
 	is_enabled() {
-		return this.context.editable && this.context.session.selection;
+		return (
+			this.context.editable &&
+			this.context.session.selection &&
+			this.context.session.selection.path.length > 3
+		);
 	}
 
 	execute() {
@@ -119,14 +124,24 @@ export class ToggleAnnotationCommand extends Command {
 
 	is_enabled() {
 		const { session, editable } = this.context;
+		const active_annotation = session.active_annotation();
 		const has_annotation = session.active_annotation(this.node_type);
+		const can_switch_annotation =
+			active_annotation &&
+			!has_annotation &&
+			session.available_annotation_types.includes(this.node_type) &&
+			can_switch_annotation_type(
+				session.schema,
+				session.get(active_annotation.node_id),
+				this.node_type
+			);
 		const no_annotation_and_caret_not_collapsed =
-			!session.active_annotation() && !is_selection_collapsed(session.selection);
+			!active_annotation && !is_selection_collapsed(session.selection);
 
 		return (
 			editable &&
 			session.selection?.type === 'text' &&
-			(has_annotation || no_annotation_and_caret_not_collapsed)
+			(has_annotation || can_switch_annotation || no_annotation_and_caret_not_collapsed)
 		);
 	}
 

package/src/lib/CustomProperty.svelte

@@ -1,26 +1,25 @@
 <script>
-	import { getContext } from 'svelte';
+	import { serialize_path } from './utils.js';
 
 	/** @import { CustomPropertyProps } from './types.d.ts'; */
-	const svedit = getContext('svedit');
 
 	/** @type {CustomPropertyProps} */
 	let { path, tag = 'div', class: css_class, children, style, ...rest } = $props();
+	let path_str = $derived(serialize_path(path));
+
 </script>
 
 <svelte:element
 	this={tag}
 	class={css_class}
 	data-type="property"
-	data-path={path.join('.')}
-	style="anchor-name: --{path.join('-')};{style ? ` ${style}` : ''}"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style ? ` ${style}` : ''}"
 	{...rest}
 >
-	{#if svedit.editable}
-		<div class="property-selectable">
-			<div class="svedit-selectable"><br /></div>
-		</div>
-	{/if}
+	<div class="property-selectable">
+		<div class="svedit-selectable"><br /></div>
+	</div>
 
 	{@render children()}
 </svelte:element>
@@ -37,5 +36,17 @@
 		bottom: 0;
 		z-index: 1;
 		outline: none;
+		/* Position the hidden selectable element at the bottom so the
+		   browser's native scroll-to-caret ensures the full property
+		   is visible, not just the top edge. */
+		display: none;
+		align-items: flex-end;
+		justify-content: center;
+	}
+	:global(.svedit.editable) .property-selectable {
+		display: flex;
+	}
+	.svedit-selectable {
+		caret-color: transparent;
 	}
 </style>

package/src/lib/Node.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
+	import { serialize_path } from './utils.js';
 
 	/** @import { NodeProps } from './types.d.ts'; */
 
@@ -9,6 +10,7 @@
 	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $props();
 
 	let node = $derived(svedit.session.get(path));
+	let path_str = $derived(serialize_path(path));
 
 	const node_array_meta = getContext('node_array_meta');
 	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
@@ -17,13 +19,13 @@
 </script>
 
 <svelte:element
-	id={node.id}
 	this={tag}
-	class="{css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	id={node.id}
+	class="node-{node.type} {css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
-	data-path={path.join('.')}
+	data-path={path_str}
 	data-type="node"
-	style="anchor-name: --{path.join('-')};{style}"
+	style="anchor-name: --{path_str};{style}"
 	{...rest}
 >
 	{@render children()}
@@ -35,4 +37,4 @@
 		/* For developers who need to position their node with `position: absolute` or `position: relative`, they need to wrap their node in a div */
 		position: static !important;
 	}
-</style>
+</style>