Fully connect text editor & markdown rendering

- Fix using Heading for home link, that's not recommended for accessibility, the h1 should be the title of the specific page's content
- Add support for manually overriding the aesthetic level & component names that a heading uses
- Make block headers an hgroup
- Search inside hgroups for finding the correct heading level
- Fix Component.replaceElement not moving over text node children
- Clear text editor draft on submit
- Make the page user-scalable because that's an accessibility issue (can apparently prevent zoom on ios with big font size)
- Support new API text body stuff for author descriptions

lang/en-nz.quilt

@@ -1,6 +1,7 @@
-fluff4me/alt: fluff 4 me
 fluff4me/title: fluff4.me / Tell your story!
 
+home/label: home
+
 # component
 popover/button: open {0??details}{ 1??}
 popover: {0??details}

src/model/Session.ts

@@ -1,4 +1,4 @@
-import type { Author, AuthorWithAuthorisations } from "api.fluff4.me"
+import type { AuthorAuthorised, AuthorFull } from "api.fluff4.me"
 import { type Authorisation, type AuthService, type Session } from "api.fluff4.me"
 import EndpointAuthRemove from "endpoint/auth/EndpointAuthRemove"
 import EndpointSessionGet from "endpoint/session/EndpointSessionGet"
@@ -42,7 +42,7 @@ namespace Session {
 		updateState()
 	}
 
-	export function setAuthor (author: Author & Partial<AuthorWithAuthorisations>) {
+	export function setAuthor (author: AuthorFull & Partial<AuthorAuthorised>) {
 		const session = Store.items.session
 		if (!session)
 			return void refresh()
@@ -52,7 +52,7 @@ namespace Session {
 			author: {
 				...author,
 				authorisations: undefined,
-			} as Author,
+			} as AuthorFull,
 			authorisations: author.authorisations ?? session.authorisations,
 		}
 		updateState()
@@ -76,7 +76,7 @@ namespace Session {
 
 		export const state = State<State>("none")
 		export const authorisations = State<Authorisation[]>([])
-		export const author = State<Author | undefined>(undefined, (a, b) => a?.vanity === b?.vanity)
+		export const author = State<AuthorFull | undefined>(undefined, (a, b) => a?.vanity === b?.vanity)
 
 		export function getAll () {
 			return Store.items.session?.authorisations ?? []

src/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"dependencies": {
-		"api.fluff4.me": "^1.0.75",
+		"api.fluff4.me": "^1.0.98",
 		"prosemirror-example-setup": "1.2.3",
 		"prosemirror-markdown": "1.13.1",
 		"prosemirror-state": "1.4.3",

src/ui/Component.ts

@@ -123,6 +123,7 @@ interface BaseComponent<ELEMENT extends HTMLElement = HTMLElement> {
 	removeContents (): void
 
 	receiveAncestorInsertEvents (): this
+	emitInsert (): this
 
 	ariaRole (role?: AriaRole): this
 	ariaLabel: StringApplicator.Optional<this>
@@ -178,7 +179,7 @@ function Component (type: keyof HTMLElementTagNameMap = "span"): Component {
 
 			const oldElement = component.element
 
-			newElement.replaceChildren(...component.element.children)
+			newElement.replaceChildren(...component.element.childNodes)
 			if (component.element.parentNode)
 				component.element.replaceWith(newElement)
 
@@ -343,37 +344,29 @@ function Component (type: keyof HTMLElementTagNameMap = "span"): Component {
 		},
 		appendTo (destination) {
 			Component.element(destination).append(component.element)
-			updateRooted(component)
-			emitInsert(component)
+			component.emitInsert()
 			return component
 		},
 		prependTo (destination) {
 			Component.element(destination).prepend(component.element)
-			updateRooted(component)
-			emitInsert(component)
+			component.emitInsert()
 			return component
 		},
 		append (...contents) {
 			const elements = contents.map(Component.element)
 			component.element.append(...elements)
 
-			for (const element of elements) {
-				const component = (element as Element).component
-				emitInsert(component)
-				updateRooted(component)
-			}
+			for (const element of elements)
+				(element as Element).component?.emitInsert()
 
 			return component
 		},
 		prepend (...contents) {
 			const elements = contents.map(Component.element)
 			component.element.prepend(...elements)
 
-			for (const element of elements) {
-				const component = (element as Element).component
-				emitInsert(component)
-				updateRooted(component)
-			}
+			for (const element of elements)
+				(element as Element).component?.emitInsert()
 
 			return component
 		},
@@ -406,6 +399,11 @@ function Component (type: keyof HTMLElementTagNameMap = "span"): Component {
 			component.element.classList.add(Classes.ReceiveAncestorInsertEvents)
 			return component
 		},
+		emitInsert: () => {
+			updateRooted(component)
+			emitInsert(component)
+			return component
+		},
 
 		ariaRole: (role?: string) => {
 			if (!role)

src/ui/component/Author.ts

@@ -1,10 +1,22 @@
-import type { Author } from "api.fluff4.me"
+import type { AuthorFull } from "api.fluff4.me"
 import Component from "ui/Component"
 import Block from "ui/component/core/Block"
 
-export default Component.Builder((component, author: Author) => {
+export default Component.Builder((component, author: AuthorFull) => {
+	component.style("author")
+
 	const block = component.and(Block)
-	block.title.text.set(author.name)
-	block.description.text.set(`@${author.vanity}`)
+	block.title
+		.style("author-name")
+		.text.set(author.name)
+	block.description
+		.style("author-vanity")
+		.text.set(`@${author.vanity}`)
+
+	Component()
+		.style("author-description")
+		.setMarkdownContent(author.description.body)
+		.appendTo(block)
+
 	return block
 }) 

src/ui/component/Masthead.ts

@@ -1,7 +1,6 @@
 import Session from "model/Session"
 import Component from "ui/Component"
 import Button from "ui/component/core/Button"
-import Heading from "ui/component/core/Heading"
 import Link from "ui/component/core/Link"
 import type Popover from "ui/component/core/Popover"
 import Slot from "ui/component/core/Slot"
@@ -59,14 +58,15 @@ const Masthead = Component.Builder("header", (masthead, view: ViewContainer) =>
 		.style("masthead-home-logo")
 
 	const homeLink = Link("/")
-		.ariaLabel.use("fluff4me/alt")
+		.ariaLabel.use("home/label")
 		.clearPopover()
-		.append(Heading()
+		.append(Component()
 			.and(Button)
-			.style("masthead-home")
+			.style("masthead-home", "heading", "heading-1")
 			.append(flag)
 			.append(Component("img")
 				.style("masthead-home-logo-wordmark")
+				.ariaHidden()
 				.attributes.set("src", `${Env.URL_ORIGIN}image/logo-wordmark.svg`)))
 		.appendTo(left)
 

src/ui/component/core/Block.ts

@@ -20,7 +20,7 @@ const Block = Component.Builder((component): Block => {
 			header: undefined!,
 			description: undefined!,
 		}))
-		.extendJIT("header", block => Component().style("block-header").prependTo(block))
+		.extendJIT("header", block => Component("hgroup").style("block-header").prependTo(block))
 		.extendJIT("title", block => Heading().style("block-title").prependTo(block.header))
 		.extendJIT("description", block => Paragraph().style("block-description").appendTo(block.header))
 })