@pageboard/html 0.14.27 → 0.14.29

package/elements/embed.js

@@ -4,9 +4,11 @@ exports.embed = {
 	icon: '<i class="external square alternate icon"></i>',
 	properties: {
 		id: {
+			title: 'Link name',
+			description: 'Target for anchors',
 			nullable: true,
 			type: 'string',
-			pattern: /^[a-z0-9-]*$/.source
+			format: 'grant'
 		},
 		linkable: {
 			title: 'Show hash link',
@@ -53,4 +55,3 @@ exports.embed = {
 		'../ui/linkable.css'
 	]
 };
-exports.editor?.scripts.push('../ui/embed-helper.js');

package/elements/heading.js

@@ -32,9 +32,11 @@ exports.heading = {
 			}]
 		},
 		id: {
+			title: 'Link name',
+			description: 'Target for anchors',
 			nullable: true,
 			type: 'string',
-			pattern: /^[a-z0-9-]*$/.source
+			format: 'grant'
 		},
 		linkable: {
 			title: 'Show hash link',
@@ -60,6 +62,7 @@ exports.heading = {
 	</hn>`,
 	parse: function (dom) {
 		return {
+			id: dom.getAttribute('id') || null,
 			level: parseInt(dom.nodeName.substring(1))
 		};
 	},
@@ -71,7 +74,6 @@ exports.heading = {
 		'../ui/heading.js'
 	]
 };
-exports.editor?.scripts.push('../ui/heading-helper.js');
 
 exports.heading_nolink = {
 	...exports.heading,

package/elements/layout.js

@@ -7,7 +7,8 @@ exports.units = {
 				{ const: 'ch' },
 				{ const: 'vw' },
 				{ const: 'rem' },
-				{ const: 'px' }
+				{ const: 'px' },
+				{ const: '%' }
 			],
 			default: 'em',
 			$helper: 'units'
@@ -114,6 +115,15 @@ exports.layout = {
 				title: "Contained"
 			}]
 		},
+		maxWidth: {
+			title: 'Max width',
+			type: 'number',
+			minimum: 0,
+			nullable: true
+		},
+		maxWidthUnits: {
+			$ref: "#/definitions/units/properties/data/properties/inline"
+		},
 		height: {
 			title: 'Height',
 			type: 'number',
@@ -374,6 +384,7 @@ exports.layout = {
 		style-margin-inline="[margins.inline|fail:][margins.inlineUnits]"
 		style-padding-block="[padding.block|fail:][padding.blockUnits]"
 		style-padding-inline="[padding.inline|fail:][padding.inlineUnits]"
+		style-max-width="[maxWidth|fail:][maxWidthUnits]"
 		style-height="[height|fail:][heightUnits]"
 		style-background-color="[background.color]"
 		style-background-size="[background.size]"

package/elements/link.js

@@ -31,13 +31,20 @@ exports.link = {
 				name: 'datalist',
 				url: '/.api/languages'
 			}
-		}
+		},
+		id: {
+			title: 'Link name',
+			description: 'Target for anchors',
+			nullable: true,
+			type: 'string',
+			format: 'grant'
+		},
 	},
 	contents: "text*",
 	inline: true,
 	group: "inline",
 	tag: 'a:not([block-type]),a[block-type="link"]',
-	html: '<a href="[url]" hreflang="[lang]" class="[button|alt:ui button]"></a>',
+	html: '<a href="[url]" hreflang="[lang]" class="[button|alt:ui button]" id="[id]"></a>',
 	stylesheets: [
 		'../ui/components/button.css'
 	]

package/elements/page.js

@@ -6,6 +6,11 @@ exports.page.stylesheets = [
 	'../ui/transition.css'
 ];
 
+exports.page.resources = {
+	reset: '../ui/components/reset.css',
+	site: '../ui/site.css'
+};
+
 exports.page.scripts = [
 	...exports.page.scripts,
 	'../ui/transition.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.27",
+  "version": "0.14.29",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/linkable.css

@@ -1,5 +1,6 @@
 [block-type][id] > a.linkable[aria-hidden="true"] {
 	display: block;
 	position: absolute;
-	left: -2ch;
+	left: -1ch;
+	text-decoration: none;
 }

package/ui/embed-helper.js

@@ -1,11 +0,0 @@
-Page.extend('element-embed', class HTMLElementEmbedHelper {
-	paint(state) {
-		if (!state.scope.$write) return;
-		const { editor } = state.scope;
-		if (!editor) return;
-		const id = editor.slug(this.title).slice(0, 32);
-		if (id != this.id) {
-			editor.blocks.mutate(this, { id });
-		}
-	}
-});

package/ui/heading-helper.js

@@ -1,37 +0,0 @@
-class HTMLElementHeadingHelper extends Page.create(HTMLHeadingElement) {
-	setup(state) {
-		this.willSync = state.debounce(() => this.sync(state.scope), 100);
-		this.observer = new MutationObserver(records => {
-			if (records.some(mut => {
-				return mut.type == "characterData" || mut.type == "childList" && mut.addedNodes.length;
-			})) this.willSync();
-		});
-		this.observer.observe(this, {
-			childList: true,
-			subtree: true,
-			characterData: true
-		});
-	}
-	close() {
-		if (this.observer) this.observer.disconnect();
-	}
-	sync(scope) {
-		const { editor } = scope;
-		if (!editor) return;
-		if (this.firstElementChild?.nodeName != "A") return;
-		const txt = editor.slug(this.textContent);
-		const id = txt.length <= 64 ? txt : null;
-		if (id != this.id) {
-			editor.blocks.mutate(this, { id });
-		}
-	}
-}
-
-
-for (let i = 1; i <= 6; i++) {
-	Page.define(
-		`h${i}-helper`,
-		class extends HTMLElementHeadingHelper { },
-		`h${i}`
-	);
-}