CELDEV-1338 - Add router-independent admin frontend islands by fpichler · Pull Request #561 · celements/celements-web

fpichler · 2026-08-06T23:39:24Z

Summary

make PageAttachments router-independent by passing typed spaceName, docName, and locale context into a shared feature component
retain the existing Vue Router SPA through a thin route adapter while reusing the same feature and shared PrimeVue, i18n, VueFinder, logging, confirmation, and component setup
add the guarded <cel-page-attachments> island with explicit attribute/property mapping, safe reconnect and attribute-change handling, DOM event forwarding, and a fresh Pinia per mount
expose the typed attachment-actions slot with document, path, count, and selected attachments so downstream products can add actions without replacing routes or copying the component
replace the legacy inline and editor-tab attachment implementations with the island while preserving server-rendered navigation, established attachment URLs, wrappers, and asynchronous fragment loading
publish intentional runtime, PageAttachments, island, and complete stylesheet entry points without unrestricted src/* imports or a Vue Router requirement in reusable package code
document the accepted feature/island plus thin-SPA architecture and public compatibility contracts in ADR 0001

Stylesheet contract and containment

bundle processed VueFinder CSS together with the scoped Celements/Tailwind styles in @celements/admin-frontend/styles.css, while keeping VueFinder JavaScript external as a peer
scope generic vendor, utility, reset, document, transition, .disabled, and .cropper-viewers selectors to the admin surface or known teleport boundaries
retain only the documented VueFinder, cropper, OverlayScrollbars, Sonner, and Uppy namespace allowlist globally
test the actual package and deployable CSS artifacts for VueFinder coverage, host-page containment, and VueFinder/PrimeVue teleport styling

Forge npm delivery

configure the @celements scope for https://forge.celhosting.ch/api/packages/celements/npm/ using FORGE_TOKEN
add a separate Jenkinsfile.npm package pipeline; the existing Jenkinsfile continues to publish only the Docker image
publish unique x.y.z-snapshot.<BUILD_NUMBER>.<GIT_SHA> versions with the snapshot dist-tag, and require exact admin-frontend-vx.y.z tags for release versions published with latest
refuse mutable x.y.z-SNAPSHOT publication and refuse overwriting a package version already present in Forge
document pinned consumer installation and supported import examples

CI operations must still configure a Jenkins job whose script path is celements-admin-frontend/Jenkinsfile.npm. No npm package is published automatically until that infrastructure step exists.

Validation

npm run build — passed; 3 test files and 16 tests passed
npm run lint — passed
npm run format — passed
npm pack --dry-run --json --cache <writable-temp-cache> — passed; dist/package/styles.css included
clean temporary Vite consumer using the packed tarball — passed with the documented peers and public imports, without source aliases or a sibling checkout
mvn -f celements-webapp/pom.xml -DskipTests compile — BUILD SUCCESS (repository metadata checks emitted local authentication warnings)
git diff --check origin/dev...HEAD — passed

Jira: https://synjira.atlassian.net/browse/CELDEV-1338

msladek · 2026-08-10T00:29:51Z

Jenkinsfile.npm and publish-forge-package.sh contain mostly reusable npm-specific publication workflow logic. Please move this into a focused npmPackagePipeline in the server-tools Jenkins shared library, analogous to dockerImagePipeline, and keep this repository’s pipeline declarative:

@Library('synventis') _ npmPackagePipeline(appDir: 'celements-admin-frontend')

msladek · 2026-08-13T14:58:02Z

-          </div>
-        </div> ## row
-#end ## foreach
+#parse('celTemplates/pageAttachmentsIsland.vm')


Preserve anonymous attachment listing

Replacing the server-rendered template with the Vue island affects normal document views, the attachments page, and the attachment overlay—not only editors. The previous template listed attachments, metadata, history, and download links for all viewers while restricting upload and delete actions to users with edit/admin rights. The island loads this list through PageAttachmentsController, whose prepareRequest() returns 401 when no authenticated user exists before evaluating VIEW rights. Anonymous users therefore lose the attachment listing on public documents despite having VIEW access.

msladek · 2026-08-13T15:09:35Z

+  upload: true,
+  delete: true,


hardcodes upload and delete to true, while pageAttachmentsIsland.vm passes only the document identity and locale. Because the shared island now replaces attachmentsinline.vm on normal document views and overlays, authenticated users with only VIEW permission receive enabled mutation controls. It regresses the previous UI, which exposed mutations only to authorized users. Pass explicit can-upload and can-delete capabilities through Velocity → custom element → component and use them for the VueFinder feature flags.

msladek · 2026-08-13T15:46:12Z

+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);


Please align with the legacy-safe Tailwind setup already established for existing Vue islands:

Suggested change

@import 'tailwindcss/theme.css' layer(theme);

@import 'tailwindcss/utilities.css' layer(utilities);

@import 'tailwindcss/theme.css' layer(theme) prefix(tw);

@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw) important source(none);

@source '..';

@source '../../index.html';

This provides prefixed tw: classes, emits utility declarations with !important, excludes preflight and limits source scanning. Please also remove the ancestor-selector important setting from tailwind.config.js and update all utility references, including @apply and TypeScript class strings, to use the tw: prefix.

msladek · 2026-08-13T15:56:41Z

+#end
+<script type="module" src="$pageAttachmentsModule"></script>
+<span class="cel_lazyloadJS_exec" style="display:none">import('$pageAttachmentsModule')</span>
+<cel-page-attachments


<cel-page-attachments> remains inline by default. The Vue root’s w-full cannot establish that layout through an inline host.

cel-page-attachments { display: block; }

msladek · 2026-08-13T16:11:53Z

This ADR mixes the router-independent feature/island decision with detailed package APIs, CSS selector allowlists and Jenkins/Forge publication policy. That makes the core decision difficult to identify and couples unrelated details that will evolve independently.

Please keep the ADR focused on router-free features, SPA/island adapters, per-mount state isolation, and the light-DOM decision. Move the remaining details to dedicated documentation or omit them when they are already defined by code.

msladek · 2026-08-13T20:33:37Z

+  edit: false,
+  fullscreen: false,
+  language: false,
+  history: false,


The replaced attachmentsinline.vm linked each attachment’s version to the viewattachrev action. The new VueFinder UI sets history: false and exposes no equivalent link. The action itself remains functional, but users can no longer reach attachment revision history from the attachment listing.

msladek · 2026-08-13T20:43:26Z

  "private": false,
  "type": "module",
+  "files": [
+    "dist"


The build produces two different deliverables in the same dist/ tree:

dist/ ├─ assets/ # deployable SPA assets for the Caddy container ├─ .vite/ # deployable manifest ├─ package/ # npm library JavaScript and CSS └─ types/ # npm library declarations

"files": ["dist"] causes npm pack to include all four. Publish only the npm library artifacts:

Suggested change

"dist"

"dist/package",

"dist/types"

msladek · 2026-08-13T20:44:50Z

+  const app = createApp(rootComponent, rootProps);
+  const pinia = createCelementsPinia();
+  app.config.errorHandler = (err, instance, info) => {
+    logger.error(err as string, instance, info);


Suggested change

logger.error(err as string, instance, info);

logger.error(err, instance, info);

avoid as, it is not needed here

msladek · 2026-08-13T21:03:59Z

  }

-  function optimisticallyDeleteTag(tag: Tag): { backupTags: Tag[]; backupMap: Record<string, Tag[]> } {
+  function optimisticallyDeleteTag(tag: Tag): {


Prefer arrow functions over function declarations, per $synventis-vue-style. This affects several places in this PR/repo, please do a cleanup pass.

msladek · 2026-08-13T21:05:37Z

+const instanceId = ref(`page_attachments_${crypto.randomUUID()}`);
+const finderId = computed(() => instanceId.value);


Suggested change

const instanceId = ref(`page_attachments_${crypto.randomUUID()}`);

const finderId = computed(() => instanceId.value);

const finderId = `page_attachments_${crypto.randomUUID()}`;

no need for reactive state

msladek · 2026-08-13T21:11:52Z

@@ -30,19 +58,20 @@
    "findandreplacedomtext": "^0.4.6",
    "lodash": "^4.17.23",
    "luxon": "^3.7.2",
-    "pinia": "^3.0.4",
-    "primevue": "^4.5.4",
    "tailwind-merge": "^3.5.0",
    "tailwindcss-primeui": "^0.6.1",
-    "vue": "^3.5.30",
    "vue-dompurify-html": "^5.3.0",
-    "vue-i18n": "^11.3.0",
    "vue-matomo": "^4.2.0",
-    "vue-router": "^5.0.4",
    "vue3-spinners": "^1.3.3",
-    "vuefinder": "^4.1.1",
    "zod": "^4.3.6"
  },


@primeuix/themes, findandreplacedomtext, lodash, tailwind-merge, vue-dompurify-html, vue-matomo, vue3-spinners, and zod have no source imports.
tailwindcss-primeui is build-only.
Remove the unused entries and move build-only to devDependencies so consumers do not install them.

fpichler added 2 commits August 7, 2026 01:21

CELDEV-1338 - add router-independent admin frontend islands

87d462b

CELDEV-1338 - complete admin frontend package contract

1d244f4

fpichler requested a review from msladek August 7, 2026 02:17

fpichler assigned msladek Aug 7, 2026

fpichler marked this pull request as ready for review August 7, 2026 02:21

msladek reviewed Aug 13, 2026

View reviewed changes

msladek assigned fpichler and unassigned msladek Aug 13, 2026

msladek reviewed Aug 13, 2026

View reviewed changes

Navigation Menu

Uh oh!

CELDEV-1338 - Add router-independent admin frontend islands - #561

CELDEV-1338 - Add router-independent admin frontend islands#561
fpichler wants to merge 2 commits into
devfrom
CELDEV-1338-admin-islands

fpichler commented Aug 6, 2026 •

edited

Loading

Uh oh!

msladek Aug 10, 2026 •

edited

Loading

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026 •

edited

Loading

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026

Uh oh!

msladek Aug 13, 2026 •

edited

Loading

Uh oh!

msladek Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@import 'tailwindcss/theme.css' layer(theme);
		@import 'tailwindcss/utilities.css' layer(utilities);

-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/utilities.css' layer(utilities);
+@import 'tailwindcss/theme.css' layer(theme) prefix(tw);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(tw) important source(none);
+@source '..';
+@source '../../index.html';

	logger.error(err as string, instance, info);
	logger.error(err, instance, info);

		const instanceId = ref(`page_attachments_${crypto.randomUUID()}`);
		const finderId = computed(() => instanceId.value);

	const instanceId = ref(`page_attachments_${crypto.randomUUID()}`);
	const finderId = computed(() => instanceId.value);
	const finderId = `page_attachments_${crypto.randomUUID()}`;

Uh oh!

Conversation

fpichler commented Aug 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Stylesheet contract and containment

Forge npm delivery

Validation

Uh oh!

msladek Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

msladek Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

msladek Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fpichler commented Aug 6, 2026 •

edited

Loading

msladek Aug 10, 2026 •

edited

Loading

msladek Aug 13, 2026 •

edited

Loading

msladek Aug 13, 2026 •

edited

Loading