Merge branch 'develop-minor' into v5/develop

# Conflicts:
#	panel/src/components/Forms/Input/TagsInput.vue
#	panel/src/components/Forms/Previews/LinkFieldPreview.vue
#	src/Panel/File.php
#	src/Panel/Page.php
#	src/Panel/User.php

config/areas/site/requests.php

@@ -62,5 +62,17 @@
 
 			return $pages;
 		}
+	],
+	'tree.parents' => [
+		'pattern' => 'site/tree/parents',
+		'action'  => function () {
+			$kirby   = App::instance();
+			$request = $kirby->request();
+			$page    = $kirby->page($request->get('page'));
+
+			return $page->parents()->flip()->values(
+				fn ($parent) => $parent->uuid()?->toString() ?? $parent->id()
+			);
+		}
 	]
 ];

panel/lab/components/browsers/files/index.vue

@@ -1,17 +1,22 @@
 <template>
 	<k-lab-examples>
-		<k-lab-example label="file browser">
-			<k-headline>Browse …</k-headline>
+		<k-lab-example label="File browser">
 			<k-file-browser :selected="selected?.value" @select="selected = $event" />
 		</k-lab-example>
-		<k-lab-example label="pagination">
-			<k-headline>Browse …</k-headline>
+		<k-lab-example label="Pagination">
 			<k-file-browser
 				:limit="1"
 				:selected="selected?.value"
 				@select="selected = $event"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Page pre-opened">
+			<k-file-browser
+				:selected="selected?.value"
+				opened="sections/files"
+				@select="selected = $event"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 

panel/lab/components/fieldpreviews/link/index.vue

@@ -55,5 +55,15 @@
 				<!-- @code-end -->
 			</k-lab-table-cell>
 		</k-lab-example>
+
+		<k-lab-example label="URL with overflow">
+			<k-lab-table-cell>
+				<!-- @code -->
+				<k-link-field-preview
+					value="https://getkirby.com/this-is-a-super-long-link-lahsdjkahskdjahskjdhaksjdhkajshdkashdjashdkahjsdkjahsdkjashdkjahskdjhaksjhdkashjdkahjsdajshkdhjahjkd"
+				/>
+				<!-- @code-end -->
+			</k-lab-table-cell>
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/lab/components/trees/index.vue

@@ -1,17 +1,23 @@
 <template>
 	<k-lab-examples>
-		<k-lab-example label="page tree">
+		<k-lab-example label="Page tree">
 			<k-page-tree :current="selected?.value" @select="selected = $event" />
 		</k-lab-example>
+		<k-lab-example label="Pre-load current">
+			<k-page-tree
+				current="sections/pages/test-page-b"
+				@select="selected = $event"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 
 <script>
 export default {
 	data() {
 		return {
-			selected: null,
+			selected: null
 		};
-	},
+	}
 };
 </script>

panel/src/components/Forms/Blocks/Types/Text.vue

@@ -101,4 +101,8 @@ export default {
 	)[data-placeholder][data-empty="true"]:before {
 	padding: var(--spacing-3) var(--spacing-6);
 }
+
+.k-block-type-text-input.k-textarea-input .k-textarea-input-native {
+	padding: var(--input-padding-multiline);
+}
 </style>

panel/src/components/Forms/Field/LinkField.vue

@@ -79,6 +79,7 @@
 				class="k-link-input-body"
 			>
 				<k-file-browser
+					:opened="$panel.view.props.model.uuid ?? $panel.view.props.model.id"
 					:selected="$helper.link.getFileUUID(value)"
 					@select="selectModel($event)"
 				/>

panel/src/components/Forms/Input/TagsInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="k-tags-input">
+	<div :data-can-add="canAdd" class="k-tags-input">
 		<k-input-validator
 			v-bind="{ min, max, required }"
 			:value="JSON.stringify(value)"
@@ -82,6 +82,9 @@ export default {
 		};
 	},
 	computed: {
+		canAdd() {
+			return !this.max || this.value.length < this.max;
+		},
 		creatableOptions() {
 			// tags should be unique, so when creating,
 			// only show options that are not already selected
@@ -162,7 +165,9 @@ export default {
 			this.$refs.replace.open();
 		},
 		focus() {
-			this.$refs.create.open();
+			if (this.canAdd) {
+				this.$refs.create.open();
+			}
 		},
 		isAllowed(tag) {
 			if (typeof tag !== "object" || tag.value.trim().length === 0) {
@@ -230,6 +235,8 @@ export default {
 <style>
 .k-tags-input {
 	padding: var(--tags-gap);
+}
+.k-tags-input[data-can-add="true"] {
 	cursor: pointer;
 }
 

panel/src/components/Forms/Previews/LinkFieldPreview.vue

@@ -1,5 +1,12 @@
 <template>
-	<div :class="['k-link-field-preview', $attrs.class]" :style="$attrs.style">
+	<div
+		:class="{
+			'k-link-field-preview': true,
+			'k-url-field-preview': isLink,
+			[$attrs.class]: true
+		}"
+		:style="$attrs.style"
+	>
 		<template v-if="currentType === 'page' || currentType === 'file'">
 			<template v-if="model">
 				<k-tag
@@ -16,7 +23,9 @@
 		</template>
 		<template v-else-if="isLink">
 			<p class="k-text">
-				<a :href="value" target="_blank">{{ detected.link }}</a>
+				<a :href="value" target="_blank">
+					<span>{{ detected.link }}</span>
+				</a>
 			</p>
 		</template>
 		<template v-else>

panel/src/components/Navigation/FileBrowser.vue

@@ -3,7 +3,7 @@
 		<div class="k-file-browser-layout">
 			<aside ref="tree" class="k-file-browser-tree">
 				<k-page-tree
-					:current="page?.value"
+					:current="page?.value ?? opened"
 					@select="selectPage"
 					@toggleBranch="togglePage"
 				/>
@@ -44,6 +44,12 @@ export default {
 			default: 50,
 			type: Number
 		},
+		/**
+		 * A page uuid/id which should be preselected
+		 */
+		opened: {
+			type: String
+		},
 		selected: {
 			type: String
 		}
@@ -54,7 +60,7 @@ export default {
 			files: [],
 			page: null,
 			pagination: null,
-			view: "tree"
+			view: this.opened ? "files" : "tree"
 		};
 	},
 	methods: {

panel/src/components/Navigation/PageTree.vue

@@ -10,15 +10,15 @@ export default {
 	extends: Tree,
 	inheritAttrs: false,
 	props: {
-		root: {
-			default: true,
-			type: Boolean
-		},
 		current: {
 			type: String
 		},
 		move: {
 			type: String
+		},
+		root: {
+			default: true,
+			type: Boolean
 		}
 	},
 	data() {
@@ -36,9 +36,22 @@ export default {
 
 			// if root is disabled, show the first level of children
 			this.state = this.root ? items : items[0].children;
+
+			// open current recursively, but only trigger from top-level PageTree
+			if (this.current) {
+				this.preselect(this.current);
+			}
 		}
 	},
 	methods: {
+		findItem(id) {
+			return this.state.find((item) => this.isItem(item, id));
+		},
+		isItem(item, target) {
+			return (
+				item.value === target || item.uuid === target || item.id === target
+			);
+		},
 		async load(path) {
 			return await this.$panel.get("site/tree", {
 				query: {
@@ -61,6 +74,34 @@ export default {
 
 			this.$set(item, "open", true);
 			this.$set(item, "loading", false);
+		},
+		async preselect(page) {
+			// get array of parent uuids/ids
+			const parents = await this.$panel.get("site/tree/parents", {
+				query: {
+					page
+				}
+			});
+
+			// if root is included, add the site as top-level parent
+			if (this.root) {
+				parents.unshift("site://");
+			}
+
+			let tree = this;
+
+			// go through all parents, try to find the matching item,
+			// open it and pass forward the pointer to that tree component
+			for (let index = 0; index < parents.length; index++) {
+				const value = parents[index];
+				const item = tree.findItem(value);
+				await this.open(item);
+				tree = tree.$refs[value][0];
+			}
+
+			// find current page in deepest tree and trigger select listeners
+			const item = tree.findItem(page);
+			this.$emit("select", item);
 		}
 	}
 };

panel/src/components/Navigation/Tree.vue

@@ -4,10 +4,10 @@
 		:style="{ '--tree-level': level, ...$attrs.style }"
 	>
 		<li
-			v-for="(item, index) in state"
-			:key="index"
+			v-for="item in state"
+			:key="item.value"
 			:aria-expanded="item.open"
-			:aria-current="item.value === current"
+			:aria-current="isItem(item, current)"
 		>
 			<p
 				class="k-tree-branch"
@@ -35,6 +35,7 @@
 			<template v-if="item.hasChildren && item.open">
 				<component
 					:is="$options.name"
+					:ref="item.value"
 					v-bind="$props"
 					:items="item.children"
 					:level="level + 1"
@@ -90,6 +91,9 @@ export default {
 			this.$set(item, "open", false);
 			this.$emit("close", item);
 		},
+		isItem(item, target) {
+			return item.value === target;
+		},
 		open(item) {
 			this.$set(item, "open", true);
 			this.$emit("open", item);

src/Cms/App.php

@@ -804,7 +804,7 @@ public function io(mixed $input): Response
 		if ($input instanceof Page) {
 			try {
 				$html = $input->render();
-			} catch (ErrorPageException $e) {
+			} catch (ErrorPageException|NotFoundException $e) {
 				return $this->io($e);
 			}
 

src/Panel/File.php

@@ -415,6 +415,7 @@ public function props(): array
 				'template'   => $file->template(),
 				'type'       => $file->type(),
 				'url'        => $file->url(),
+				'uuid'       => $file->uuid()?->toString(),
 			],
 			'preview' => [
 				'focusable' => $this->isFocusable(),

src/Panel/Page.php

@@ -358,6 +358,7 @@ public function props(): array
 				'previewUrl' => $page->previewUrl(),
 				'status'     => $page->status(),
 				'title'      => $page->title()->toString(),
+				'uuid'       => $page->uuid()?->toString(),
 			],
 			'status' => function () use ($page) {
 				if ($status = $page->status()) {

src/Panel/Site.php

@@ -86,6 +86,7 @@ public function props(): array
 				'link'       => $this->url(true),
 				'previewUrl' => $this->model->previewUrl(),
 				'title'      => $this->model->title()->toString(),
+				'uuid'       => $this->model->uuid()?->toString(),
 			]
 		];
 	}

src/Panel/User.php

@@ -253,6 +253,7 @@ public function props(): array
 				'name'     => $user->name()->toString(),
 				'role'     => $user->role()->title(),
 				'username' => $user->username(),
+				'uuid'     => $user->uuid()?->toString()
 			]
 		];
 	}