studiocms 0.1.0-beta.24 → 0.1.0-beta.26

package/dist/components/dashboard/content-mgmt/CreatePage.astro

@@ -1,7 +1,11 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import pluginList from 'studiocms:plugins';
-import { Card, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { Card } from 'studiocms:ui/components/card';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { TabItem, Tabs } from 'studiocms:ui/components/tabs';
+import PageTypeHandler from './PageTypeHandler.astro';
 import {
 	categoriesOptions,
 	pageTypeOptions,
@@ -21,19 +25,20 @@ const { lang } = Astro.props;
 const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 ---
 
-<div
-  id="create-page-container"
-  data-content-management-url={Astro.locals.routeMap.mainLinks
-    .contentManagement}
->
-  <form
-    id="page-create-form"
-    action={Astro.locals.routeMap.endpointLinks.content.page}
-  >
+<PageTypeHandler pluginFields={pluginFields}>
+	<div
+		id="create-page-container"
+		data-content-management-url={Astro.locals.StudioCMS.routeMap.mainLinks
+			.contentManagement}
+	>
+		<form
+			id="page-create-form"
+			action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page}
+		>
     <Tabs variant={"starlight"}>
       <TabItem
         label={t("tab-label-basic-info")}
-        icon={"information-circle-20-solid"}
+        icon={"heroicons:information-circle-20-solid"}
         color={"primary"}
       >
         <div class="tab-section">
@@ -152,7 +157,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
       </TabItem>
       <TabItem
         label={t("tab-label-content")}
-        icon={"document-text-20-solid"}
+        icon={"heroicons:document-text-20-solid"}
         color={"success"}
       >
         <div class="tab-section">
@@ -161,9 +166,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
           </div>
         </div>
       </TabItem>
-    </Tabs>
-  </form>
-</div>
+		</Tabs>
+		</form>
+	</div>
+</PageTypeHandler>
 
 <script>
   import {
@@ -205,40 +211,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
   }
 </script>
 
-<script is:inline define:vars={{ pluginPageTypes: pluginFields }}>
-  async function setupPluginFields() {
-    const pageTypeDropdown = document.querySelector("#page-type-dropdown");
-    if (!pageTypeDropdown) return;
-    const pageTypeOptions =
-      pageTypeDropdown.querySelectorAll(".sui-select-option");
 
-    pageTypeOptions.forEach((option) => {
-      option.addEventListener("click", async () => {
-        const selectedValue = option.getAttribute("value");
-
-        const selected = pluginPageTypes.find(
-          (p) => p.identifier === selectedValue,
-        );
-
-        if (!selected) {
-          return;
-        }
-
-        const customPageTypeFields = document.getElementById(
-          "custom-page-type-fields",
-        );
-
-        if (!customPageTypeFields) return;
-        customPageTypeFields.style.display = selected?.fields?.length ? "block" : "none";
-      });
-    });
-  }
-
-  setupPluginFields();
-</script>
 
 <script>
-  import { toast } from "studiocms:ui/components";
+  import { toast } from "studiocms:ui/components/toaster";
   // get the elements
   const createPageForm = document.getElementById(
     "page-create-form",
@@ -352,7 +328,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
   .page-content-editor #page-content {
     height: 100%;
     width: 100%;
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
     border-radius: 4px;
     padding: 1rem;
     font-size: 1rem;

package/dist/components/dashboard/content-mgmt/EditFolder.astro

@@ -1,7 +1,8 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Input, Select } from 'studiocms:ui/components';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
 import { parentFolderOptions } from './shared.js';
 
 const urlParams = Astro.url.searchParams;
@@ -20,9 +21,9 @@ const { lang } = Astro.props;
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 ---
-<div id="edit-folder-container" data-content-management-url={Astro.locals.routeMap.mainLinks.contentManagement}>
+<div id="edit-folder-container" data-content-management-url={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagement}>
 
-    <form id="edit-folder-form" action={Astro.locals.routeMap.endpointLinks.content.folder}>
+    <form id="edit-folder-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.folder}>
 
         <input type="hidden" name="folder-id" value={currentFolder.id} />
     
@@ -64,7 +65,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
     const form = document.getElementById('edit-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('edit-folder-container') as HTMLDivElement;

package/dist/components/dashboard/content-mgmt/EditPage.astro

@@ -5,9 +5,17 @@ import type { SettingsField } from 'studiocms:plugin-helpers';
 import pluginList from 'studiocms:plugins';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import type { SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Button, Card, Center, Icon, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { TabItem, Tabs } from 'studiocms:ui/components/tabs';
 import { editorKeys } from 'virtual:studiocms/components/Editors';
 import { Effect } from 'effect';
+import PageEditorSwapper from './PageEditorSwapper.astro';
+import PageTypeHandler from './PageTypeHandler.astro';
 import PluginFields from './PluginFields.astro';
 import { convertToSafeString, importEditorKeys } from './runtime.js';
 import {
@@ -30,11 +38,17 @@ const { lang, config } = Astro.props as Props;
 
 const enableDiffs = config.data.enableDiffs;
 
-const [[{ data: pageData }, users], editors] = await Promise.all([
+const [[currentPageData, users], editors] = await Promise.all([
 	runSDK(Effect.all([SDKCoreJs.GET.page.byId(editId), SDKCoreJs.GET.users.all()])),
 	importEditorKeys(editorKeys),
 ]);
 
+if (!currentPageData) {
+	return new Response(null, { status: 404, statusText: 'Page Not Found' });
+}
+
+const pageData = currentPageData.data;
+
 function getParentFolderValue(value: string | null): string | undefined {
 	const options = parentFolderOptions;
 	if (value === null) return 'null';
@@ -71,11 +85,13 @@ const pluginFields = pluginList
 
 const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 ---
-<div id="edit-page-container" data-content-management-url={Astro.locals.routeMap.mainLinks.contentManagement}>
-    <form id="edit-page-form" action={Astro.locals.routeMap.endpointLinks.content.page}>
+<PageTypeHandler pluginFields={pluginFields ? [pluginFields] : []}>
+	<PageEditorSwapper editorKeys={editorKeys}>
+		<div id="edit-page-container" data-content-management-url={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagement}>
+			<form id="edit-page-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page}>
 
         <Tabs variant={'starlight'}>
-          <TabItem label={t('tab-label-basic-info')} icon={'information-circle-20-solid'} color={'primary'}>
+          <TabItem label={t('tab-label-basic-info')} icon={'heroicons:information-circle-20-solid'} color={'primary'}>
             <div class="tab-section">
                 <div class="form-row">
                     <Input label={t('input-page-title')} name='page-title' isRequired defaultValue={pageData.title} />
@@ -136,7 +152,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                   </div>
             </div>
           </TabItem>
-          <TabItem label={t('tab-label-content')} icon={'document-text-20-solid'} color={'success'}>
+          <TabItem label={t('tab-label-content')} icon={'heroicons:document-text-20-solid'} color={'success'}>
 
             <input type="hidden" name="page-content-id" value={pageData.defaultContent?.id} />
 
@@ -150,7 +166,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
           {
             enableDiffs && (
-                <TabItem label={t('tab-label-diff')} icon={'archive-box-20-solid'} color={'warning'}>
+                <TabItem label={t('tab-label-diff')} icon={'heroicons:archive-box-20-solid'} color={'warning'}>
                     <div class="tab-section">
                         <div class="edit-card-list">
                     
@@ -165,14 +181,14 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                     
                                 <div class="card-row">
                                     <span class="card-description">{pageData.description}</span>
-                                    <Button size='sm' as='a' href={Astro.locals.routeMap.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
-                                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                                    <Button size='sm' as='a' href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
+                                    <Icon name="heroicons:eye" width={24} height={24} class="card-icon" />
                                     </Button>
                                 </div>
                                 </Card>
                             ))
                             ) : (
-                            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+                            <Card fullWidth style="background-color: var(--background-step-1);">
                                 <Center><t-content-edit-page key="diff-no-history">{t('diff-no-history')}</t-content-edit-page></Center>
                             </Card>
                             )
@@ -186,8 +202,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
         </Tabs>
 
-    </form>
-</div>
+			</form>
+		</div>
+	</PageEditorSwapper>
+</PageTypeHandler>
 
 <script>
     import { 
@@ -223,76 +241,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
     }
 </script>
 
-<script is:inline define:vars={{ editors: editorKeys }}>
-
-  async function setupPluginFields() {
-    const pageTypeDropdown = document.querySelector('#page-type-dropdown');
-    const pageTypeOptions = pageTypeDropdown.querySelectorAll('.sui-select-option');
-
-    pageTypeOptions.forEach((option) => {
-      option.addEventListener('click', async () => {
-        const selectedValue = option.getAttribute('value');
-
-        const matchedPluginFields = pluginFields.find((pluginField) => pluginField.identifier === selectedValue);
-
-        if (!matchedPluginFields) {
-          return;
-        }
-
-        const customPageTypeFields = document.getElementById('custom-page-type-fields');
-
-        if (matchedPluginFields.fields && matchedPluginFields.fields.length > 0) {
-          customPageTypeFields.classList.remove('page-types-hidden');
-          customPageTypeFields.style.display = 'block';
-        }
-
-        if (!matchedPluginFields.fields || matchedPluginFields.fields.length === 0) {
-          customPageTypeFields.classList.add('page-types-hidden');
-          customPageTypeFields.style.display = 'none';
-        }
-      })
-    })
-  }
-
-  // TODO: Make this work to be able to swap in new editors instead... This almost works but does not load scripts once the partial is loaded.
-
-  async function setupPageEditorSwapper() {
-    const currentPageTypeOptions = document.querySelector('#page-type-dropdown').querySelectorAll('.sui-select-option');
-
-    currentPageTypeOptions.forEach((option) => {
-      option.addEventListener('click', async () => {
-
-        const selectedValue = option.getAttribute('value');
-
-        if (selectedValue !== 'studiocms/markdown') {
-          const editorContainer = document.querySelector('.page-content-editor');
-          const editorPlaceholder = document.getElementById('page-content-editor-placeholder');
-
-          if (editors.find((editor) => editor !== selectedValue)) {
-            return;
-          }
-
-          editorContainer.style.display = 'none';
-          editorPlaceholder.style.display = 'block';
-          editorPlaceholder.innerText = 'You have changed your pageType. Please save your changes and refresh the page to see the new editor.';
-        }
-
-        if (selectedValue === 'studiocms/markdown') {
-          const editorContainer = document.querySelector('.page-content-editor');
-          const editorPlaceholder = document.getElementById('page-content-editor-placeholder');
 
-          editorContainer.style.display = 'block';
-          editorPlaceholder.style.display = 'none';
-        }
-      })
-    })
-  }
-
-  setupPluginFields();
-  setupPageEditorSwapper();
-</script>
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
 // get the elements
 const editPageForm = document.getElementById('edit-page-form') as HTMLFormElement;
@@ -383,7 +334,7 @@ editPageForm.addEventListener('submit', async (e) => {
         #page-content {
             height: 100%;
             width: 100%;
-            border: 1px solid hsl(var(--border));
+            border: 1px solid var(--border);
             border-radius: 4px;
             padding: 1rem;
             font-size: 1rem;
@@ -400,7 +351,7 @@ editPageForm.addEventListener('submit', async (e) => {
 .edit-card {
   display: flex;
   flex-direction: column;
-  background-color: hsl(var(--background-step-2));
+  background-color: var(--background-step-2);
   
   & .card-row {
     display: flex;
@@ -413,18 +364,18 @@ editPageForm.addEventListener('submit', async (e) => {
     }
 
     & .card-date {
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
       font-size: .8rem;
     }
 
     & .card-description {
       font-size: 1rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
       line-clamp: 1;
     }
 
     & .card-icon {
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 }

package/dist/components/dashboard/content-mgmt/InnerSidebarElement.astro

@@ -1,7 +1,11 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import type { SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Button, Divider, Dropdown, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Dropdown } from 'studiocms:ui/components/dropdown';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
 import PageList from './PageList.astro';
 
 interface Props {
@@ -17,7 +21,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 
 <div class="inner-sidebar-header">
   <Button variant="solid" color="primary" size='md' id="back-to-outer" class="mobile-btn mid-size-btn">
-    <Icon name="arrow-left" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:arrow-left" width={24} height={24} slot="start-content" />
   </Button>
   <form id="search-form">
     <Input name='search' placeholder={t('input-placeholder-search')} type='search' required />
@@ -27,24 +31,24 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
     options={[
       { 
         label: t('dropdown-create-page'), 
-        icon: 'document', 
-        value: Astro.locals.routeMap.mainLinks.contentManagementCreate 
+        icon: 'heroicons:document', 
+        value: Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementCreate 
       },
       { 
         label: t('dropdown-create-folder'), 
-        icon: 'folder', 
-        value: Astro.locals.routeMap.mainLinks.contentManagementFolderCreate 
+        icon: 'heroicons:folder', 
+        value: Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderCreate 
       },
     ]}
     align={'end'}
     offset={8}
   >
     <Button variant="solid" color="primary" size='md' class="add-button">
-      <Icon name="plus" width={24} height={24} slot="start-content" />
+      <Icon name="heroicons:plus" width={24} height={24} slot="start-content" />
     </Button>
   </Dropdown>
   <Button variant="solid" color="primary" size='md' class="mobile-btn" id="show-page">
-    <Icon name="x-mark" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:x-mark" width={24} height={24} slot="start-content" />
   </Button>
 </div>
 
@@ -61,15 +65,15 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
   class="inner-sidebar-items scrollbar"
   id="inner-sidebar-items-search"
   style="display: none;"
-  data-searchlist={Astro.locals.routeMap.endpointLinks.searchList}
-  data-editpage={Astro.locals.routeMap.mainLinks.contentManagementEdit}
-  data-editfolder={Astro.locals.routeMap.mainLinks.contentManagementFolderEdit}
+  data-searchlist={Astro.locals.StudioCMS.routeMap.endpointLinks.searchList}
+  data-editpage={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementEdit}
+  data-editfolder={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderEdit}
   ></div>
 
 
 <div id="i-dropdown-options"
-  data-createpage={Astro.locals.routeMap.mainLinks.contentManagementCreate}
-  data-createfolder={Astro.locals.routeMap.mainLinks.contentManagementFolderCreate}
+  data-createpage={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementCreate}
+  data-createfolder={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderCreate}
   ></div>
 
   <script>
@@ -133,7 +137,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 </script>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
 
   const createNewDropdown = new DropdownHelper('create-new-dropdown');
 
@@ -177,14 +181,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
   }
 
   const itemTemplate = (item: SearchItem, searchTerm: string) => {
-    const url = item.type === 'folder' 
-      ? `${document.getElementById('inner-sidebar-items-search')?.dataset.editfolder}?folder=${item.id}&search=${searchTerm}`
-      : `${document.getElementById('inner-sidebar-items-search')?.dataset.editpage}/?edit=${item.id}&search=${searchTerm}`;
+    const base = document.getElementById('inner-sidebar-items-search') as HTMLDivElement;
+    const safeSearch = encodeURIComponent(searchTerm);
+    const safeId = encodeURIComponent(item.id);
+    const url = item.type === 'folder'
+      ? `${base?.dataset.editfolder}?folder=${safeId}&search=${safeSearch}`
+      : `${base?.dataset.editpage}/?edit=${safeId}&search=${safeSearch}`;
+    const safeName = DOMPurify.sanitize(item.name, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] });
     return `
-  <div id="search-selector" data-href=${url} class="inner-sidebar-link">
+  <div id="search-selector" data-href="${url}" class="inner-sidebar-link">
     ${ getIcon(item) }
     <span class="sidebar-link-text">
-      ${item.name}
+      ${safeName}
     </span>
   </div>
   `;
@@ -239,9 +247,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 
     console.log(`Search Results (${results.length}) `, results);
 
-    searchItems.innerHTML = results.map(({ item }) => {
-      return itemTemplate(item, searchTerm);
-    }).join('');
+    searchItems.innerHTML = DOMPurify.sanitize(
+      results.map(({ item }) => itemTemplate(item, searchTerm)).join('')
+    );
 
     document.getElementById('inner-sidebar-items')!.style.display = 'none';
     searchItems.style.display = 'block';

package/dist/components/dashboard/content-mgmt/PageEditorSwapper.astro

@@ -0,0 +1,107 @@
+---
+interface Props {
+	editorKeys: string[];
+}
+
+const { editorKeys } = Astro.props;
+---
+
+<page-editor-swapper data-editor-keys={JSON.stringify(editorKeys)}>
+	<slot />
+</page-editor-swapper>
+
+<script>
+	class PageEditorSwapper extends HTMLElement {
+		private editorKeys: string[] = [];
+
+		constructor() {
+			super();
+			this.attachShadow({ mode: "open" });
+			this.loadEditorKeys();
+		}
+
+		connectedCallback() {
+			this.setupEventListeners();
+			this.render();
+		}
+
+		private loadEditorKeys() {
+			const dataEditorKeys = this.getAttribute("data-editor-keys");
+			try {
+				this.editorKeys = JSON.parse(dataEditorKeys || "[]");
+			} catch {
+				this.editorKeys = [];
+			}
+		}
+
+		private render() {
+			if (!this.shadowRoot) return;
+			if (this.shadowRoot.childNodes.length === 0) {
+				const slot = document.createElement("slot");
+				this.shadowRoot.appendChild(slot);
+			}
+		}
+
+		private setupEventListeners() {
+			// Wait for DOM to be ready
+			setTimeout(() => {
+				this.setupPageEditorSwapper();
+			}, 0);
+		}
+
+		private setupPageEditorSwapper() {
+			const pageTypeDropdown = document.querySelector("#page-type-dropdown");
+			if (!pageTypeDropdown) return;
+
+			const pageTypeOptions = pageTypeDropdown.querySelectorAll(".sui-select-option");
+
+			pageTypeOptions.forEach((option) => {
+				option.addEventListener("click", () => {
+					this.handlePageTypeChange(option);
+				});
+			});
+		}
+
+		private handlePageTypeChange(option: Element) {
+			const selectedValue = option.getAttribute("value");
+			if (!selectedValue) return;
+
+			// Check if the selected editor is available
+			const isEditorAvailable = this.editorKeys.includes(selectedValue);
+
+			if (selectedValue !== "studiocms/markdown") {
+				this.handleNonMarkdownEditor(isEditorAvailable);
+			} else {
+				this.handleMarkdownEditor();
+			}
+		}
+
+		private handleNonMarkdownEditor(isEditorAvailable: boolean) {
+			const editorContainer = document.querySelector(".page-content-editor") as HTMLElement;
+			const editorPlaceholder = document.getElementById("page-content-editor-placeholder") as HTMLElement;
+
+			if (!editorContainer || !editorPlaceholder) return;
+
+			if (!isEditorAvailable) {
+				editorContainer.style.display = "none";
+				editorPlaceholder.style.display = "block";
+				editorPlaceholder.innerText =
+					"You have changed your pageType. Please save your changes and refresh the page to see the new editor.";
+			}
+		}
+
+		private handleMarkdownEditor() {
+			const editorContainer = document.querySelector(".page-content-editor") as HTMLElement;
+			const editorPlaceholder = document.getElementById("page-content-editor-placeholder") as HTMLElement;
+
+			if (!editorContainer || !editorPlaceholder) return;
+
+			editorContainer.style.display = "block";
+			editorPlaceholder.style.display = "none";
+		}
+	}
+
+	if (!customElements.get("page-editor-swapper")) {
+		customElements.define("page-editor-swapper", PageEditorSwapper);
+	}
+</script>