studiocms 0.1.0-beta.7 → 0.1.0-beta.8

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

@@ -0,0 +1,388 @@
+---
+import '../../../../styles/dashboard-tiny-mde.css';
+import { FormattedDate } from 'studiocms:components';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import type { SettingsField } from 'studiocms:plugin-helpers';
+import pluginList from 'studiocms:plugins';
+import studioCMS_SDK from 'studiocms:sdk';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Button, Card, Center, Icon, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { editorKeys } from 'virtual:studiocms/components/Editors';
+import PluginFields from './PluginFields.astro';
+import { convertToSafeString, importEditorKeys } from './runtime.js';
+import {
+	categoriesOptions,
+	pageTypeOptions,
+	parentFolderOptions,
+	tagsOptions,
+	trueFalse,
+} from './shared.js';
+
+const urlParams = Astro.url.searchParams;
+const editId = urlParams.get('edit') || '';
+
+const { data: pageData } = await studioCMS_SDK_Cache.GET.page.byId(editId);
+
+function getParentFolderValue(value: string | null): string | undefined {
+	const options = parentFolderOptions;
+	if (value === null) return 'null';
+	return options.find((option: { value: FormDataEntryValue }) => option.value === value)?.value;
+}
+
+const {
+	data: { enableDiffs },
+} = await studioCMS_SDK_Cache.GET.siteConfig();
+
+const diffs = await studioCMS_SDK.diffTracking.get.byPageId.latest(pageData.id, 10);
+
+const users = await studioCMS_SDK.GET.database.users();
+
+const user = (id: string) => users.find((u) => u.id === id)?.name;
+
+const editors = await importEditorKeys(editorKeys);
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+let editor: any = editors[convertToSafeString(pageData.package)];
+
+const CurrentEditorComponent = editor;
+
+const pluginFields = pluginList
+	.flatMap(({ pageTypes }) => {
+		const pageTypeOutput: {
+			identifier: string;
+			fields?: SettingsField[];
+		}[] = [];
+
+		if (!pageTypes) {
+			return pageTypeOutput;
+		}
+
+		for (const pageType of pageTypes) {
+			pageTypeOutput.push(pageType);
+		}
+
+		return pageTypeOutput;
+	})
+	.find((pageType) => pageType.identifier === pageData.package);
+---
+<div id="edit-page-container">
+    <form id="edit-page-form" action={StudioCMSRoutes.endpointLinks.content.page}>
+
+        <Tabs variant={'starlight'}>
+          <TabItem label='Basic Information' icon={'information-circle-20-solid'} color={'primary'}>
+            <div class="tab-section">
+                <div class="form-row">
+                    <Input label='Page Title' name='page-title' isRequired defaultValue={pageData.title} />
+                    <Input label='Slug' name='page-slug' disabled isRequired defaultValue={pageData.slug} />
+        
+                    <input type="hidden" name="page-slug" value={pageData.slug} />
+                    <input type="hidden" name="page-id" value={pageData.id} />
+                </div>
+        
+                <div class="form-row">
+                    <Input label='Description' name='page-description' isRequired defaultValue={pageData.description}/>
+                    <Input label='OpenGraph/Hero Image' name='page-hero-image' placeholder='https://...' defaultValue={pageData.heroImage} />
+                </div>
+        
+                <div class="form-row">
+                    <Select 
+                        label="Page type" 
+                        name="page-type" 
+                        isRequired 
+                        fullWidth 
+                        defaultValue={pageData.package}
+                        options={pageTypeOptions} 
+                        />
+                    <Select 
+                        label="Show in Navigation" 
+                        name="show-in-nav" 
+                        isRequired 
+                        defaultValue={`${pageData.showOnNav}`}
+                        fullWidth 
+                        options={trueFalse} 
+                        />
+                </div>
+        
+                <div class="form-row">
+                    <Select label="Parent Folder" name="parent-folder" fullWidth options={parentFolderOptions} defaultValue={getParentFolderValue(pageData.parentFolder)} />
+                    <Select label="Draft" name="draft" fullWidth options={trueFalse} defaultValue={`${pageData.draft ?? false}`} disabled={pageData.slug === 'index'} />
+                </div>
+        
+                <div class="form-row">
+                    <Select label="Categories" name="categories" placeholder="Work in Progress" fullWidth options={categoriesOptions} disabled />
+                    <Select label="Tags" name="tags" placeholder="Work in Progress" fullWidth options={tagsOptions} disabled />
+                </div>
+        
+                <div class="form-row">
+                    <Select label="Show Author" name="show-author" defaultValue={`${pageData.showAuthor}`} fullWidth options={trueFalse} />
+                    <Select label="Show Contributors" name="show-contributors" defaultValue={`${pageData.showContributors}`} fullWidth options={trueFalse} />
+                </div>
+
+                  <div id="custom-page-type-fields" class:list={[pluginFields?.fields ? '' : 'page-types-hidden']}>
+                    <Card fullWidth>
+                      <div slot="header">
+                        <span>Plugin Page Type Fields</span>
+                      </div>
+                      {pluginFields?.fields && (<PluginFields fields={pluginFields.fields} /> )}
+                      <div>You have changed your pageType. Please save your changes and refresh the page to see the new fields.</div>
+                    </Card>
+                  </div>
+            </div>
+          </TabItem>
+          <TabItem label='Page Content' icon={'document-text-20-solid'} color={'success'}>
+
+            <input type="hidden" name="page-content-id" value={pageData.defaultContent?.id} />
+
+            <div class="tab-section">
+                <div class="page-content-editor">
+                    <CurrentEditorComponent content={pageData.defaultContent?.content} />
+                    <div id="page-content-editor-placeholder" style="display: none;"></div>
+                </div>
+            </div>
+          </TabItem>
+
+          {
+            enableDiffs && (
+                <TabItem label='Edit History' icon={'archive-box-20-solid'} color={'warning'}>
+                    <div class="tab-section">
+                        <div class="edit-card-list">
+                    
+                        {
+                            diffs.length > 0 ? (
+                            diffs.map((diff) => (
+                                <Card fullWidth class={'edit-card'}>
+                                <div class="card-row">
+                                    <span class="card-title">{pageData.title}</span>
+                                    <span class="card-date">Edited: <FormattedDate date={diff.timestamp!} /> by {user(diff.userId)}</span>
+                                </div>
+                    
+                                <div class="card-row">
+                                    <span class="card-description">{pageData.description}</span>
+                                    <Button size='sm' as='a' href={StudioCMSRoutes.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
+                                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                                    </Button>
+                                </div>
+                                </Card>
+                            ))
+                            ) : (
+                            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+                                <Center>No history found.</Center>
+                            </Card>
+                            )
+                        }
+                    
+                        </div>
+                    </div>
+                </TabItem>
+            )
+          }
+
+        </Tabs>
+
+    </form>
+</div>
+
+<script is:inline define:vars={{ editors: editorKeys }}>
+
+// 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 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 pluginFields = pluginFields.find((pluginField) => pluginField.identifier === selectedValue);
+
+        if (!pluginFields) {
+          return;
+        }
+
+        const customPageTypeFields = document.getElementById('custom-page-type-fields');
+
+        if (pluginFields.fields > 0) {
+          customPageTypeFields.classList.remove('page-types-hidden');
+          customPageTypeFields.style.display = 'block';
+        }
+
+        if (pluginFields.fields === 0) {
+          customPageTypeFields.classList.add('page-types-hidden');
+          customPageTypeFields.style.display = 'none';
+        }
+      })
+    })
+  }
+
+
+  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";
+
+// get the elements
+const editPageForm = document.getElementById('edit-page-form') as HTMLFormElement;
+
+editPageForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(editPageForm);
+
+    const response = await fetch(editPageForm.action, {
+        method: 'PATCH',
+        body: formData,
+    });
+
+    const res = await response.json();
+
+    if (response.status !== 200) {
+        toast({
+            title: 'Error',
+            description: res.error,
+            type: 'danger'
+        })
+        return;
+    }
+
+    if (response.status === 200) {
+        toast({
+            title: 'Success',
+            description: res.message,
+            type: 'success'
+        })
+        return;
+    }
+});
+
+</script>
+
+
+<style>
+    .page-types-hidden {
+      display: none;
+    }
+
+    #edit-page-container {
+        height: 100%;
+        width: 100%;
+        min-width: 100%;
+    }
+
+    #edit-page-form {
+        display: flex;
+        flex-direction: column;
+        gap: .75rem;
+        padding-top: .5rem;
+    }
+
+    .tab-section {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .form-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: .75rem;
+    }
+
+    @media screen and (max-width: 768px) {
+        .form-row {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .page-content-editor {
+        height: 250px;
+        margin-bottom: 2rem;
+
+        .editor-container {
+            height: 100%;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        #page-content {
+            height: 100%;
+            width: 100%;
+            border: 1px solid hsl(var(--border));
+            border-radius: 4px;
+            padding: 1rem;
+            font-size: 1rem;
+            overflow-y: auto;
+        }
+    }
+
+.edit-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.edit-card {
+  display: flex;
+  flex-direction: column;
+  background-color: hsl(var(--background-step-2));
+  
+  & .card-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & .card-title {
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+
+    & .card-date {
+      color: hsl(var(--text-muted));
+      font-size: .8rem;
+    }
+
+    & .card-description {
+      font-size: 1rem;
+      color: hsl(var(--text-muted));
+      line-clamp: 1;
+    }
+
+    & .card-icon {
+      color: hsl(var(--text-muted));
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,230 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Divider, Dropdown, Icon, Input } from 'studiocms:ui/components';
+import PageList from './PageList.astro';
+
+interface Props {
+	isNewFolder?: boolean;
+	isNewPage?: boolean;
+}
+
+const { isNewFolder, isNewPage } = Astro.props;
+---
+
+<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" />
+  </Button>
+  <form id="search-form">
+    <Input name='search' placeholder='Search...' type='search' required />
+  </form>
+  <Dropdown
+    transition:persist
+    transition:persist-props
+    id='create-new-dropdown'
+    options={[
+      { 
+        label: 'Create Page', 
+        icon: 'document', 
+        value: StudioCMSRoutes.mainLinks.contentManagementCreate 
+      },
+      { 
+        label: 'Create Folder', 
+        icon: 'folder', 
+        value: StudioCMSRoutes.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" />
+    </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" />
+  </Button>
+</div>
+
+<Divider background={'background-step-2'}><span id="sidebar-divider-title">Items</span></Divider>
+
+<div 
+  class="inner-sidebar-items scrollbar" 
+  id="inner-sidebar-items" 
+  >
+  <PageList {isNewFolder} {isNewPage} />
+</div>
+
+<div
+  class="inner-sidebar-items scrollbar"
+  id="inner-sidebar-items-search"
+  style="display: none;"
+  data-searchlist={StudioCMSRoutes.endpointLinks.searchList}
+  data-editpage={StudioCMSRoutes.mainLinks.contentManagementEdit}
+  data-editfolder={StudioCMSRoutes.mainLinks.contentManagementFolderEdit}
+  ></div>
+
+<script>
+  import { DropdownHelper } from 'studiocms:ui/components';
+
+  const createNewDropdown = new DropdownHelper('create-new-dropdown');
+
+createNewDropdown.registerClickCallback((value) => {
+  window.location.assign(value);
+});
+</script>
+
+<script>
+  import DOMPurify from 'dompurify';
+  import Fuse from 'fuse.js';
+    
+  type SearchItem = {
+    id: string;
+    name: string;
+    slug?: string;
+    type: 'folder' | 'page';
+    isDraft?: boolean;
+  };
+
+  type SearchList = SearchItem[];
+
+  function getIcon(item: SearchItem) {
+    if (item.type === 'folder') {
+      // heroicons:folder
+      return `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" /> </svg> `;
+    }
+
+    if (item.slug === 'index') {
+      // heroicons:home-modern
+      return `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819" /> </svg> `;
+    }
+
+    if (item.isDraft) {
+      // heroicons:pencil-square
+      return `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /> </svg> `;
+    }
+
+    // heroicons:document-text
+    return `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /> </svg>`;
+  }
+
+  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}`;
+    return `
+  <div id="search-selector" data-href=${url} class="inner-sidebar-link">
+    ${ getIcon(item) }
+    <span class="sidebar-link-text">
+      ${item.name}
+    </span>
+  </div>
+  `;
+  };
+
+  async function getSearchList(searchItems: HTMLDivElement) {
+
+    console.log(`Fetching search list from ${searchItems.dataset.searchlist}`);
+
+    const response = await fetch(searchItems.dataset.searchlist as string);
+
+    if (!response.ok) {
+      console.error('Failed to fetch search list');
+      return [];
+    }
+
+    const data: SearchList = await response.json();
+
+    return data;
+  }
+
+  function clearSearchParams(dividerTitle: HTMLSpanElement, innerSidebarItemsSearch: HTMLDivElement) {
+    const url = new URL(window.location.href);
+    url.searchParams.delete('search');
+    window.history.pushState({}, '', url);
+    innerSidebarItemsSearch.innerHTML = '';
+    document.getElementById('inner-sidebar-items')!.style.display = 'block';
+    innerSidebarItemsSearch.style.display = 'none';
+    dividerTitle.innerText = 'Items';
+  }
+
+  async function runSearch(form: HTMLFormElement, divider: HTMLSpanElement, searchItems: HTMLDivElement) {
+    const formData = new FormData(form);
+
+    const searchTerm = DOMPurify.sanitize(formData.get('search')?.toString() || '');
+
+    if (!searchTerm || searchTerm.length === 0) return;
+
+    const url = new URL(window.location.href);
+    url.searchParams.set('search', searchTerm);
+    window.history.pushState({}, '', url);
+
+    const searchList = await getSearchList(searchItems);
+
+    const fuse = new Fuse(searchList, {
+      keys: ['name', 'slug'],
+      isCaseSensitive: false,
+      threshold: 0.5,
+    });
+
+    const results = fuse.search(searchTerm);
+
+    console.log(`Search Results (${results.length}) `, results);
+
+    searchItems.innerHTML = results.map(({ item }) => {
+      return itemTemplate(item, searchTerm);
+    }).join('');
+
+    document.getElementById('inner-sidebar-items')!.style.display = 'none';
+    searchItems.style.display = 'block';
+    divider.innerText = `Search Results (${results.length})`;
+
+  const searchResultSelectors = document.querySelectorAll('#search-selector') as NodeListOf<HTMLDivElement>;
+
+    for (const selector of searchResultSelectors) {
+      selector.addEventListener('click', (e) => {
+        const url = selector.dataset.href;
+        window.location.assign(url!);
+      });
+    }
+  }
+
+  // Main Functions
+
+  // Event Listeners
+  async function searchSetup() {
+  const form = document.getElementById('search-form') as HTMLFormElement;
+  const searchInput = form.querySelector('input[name=search]') as HTMLInputElement;
+
+  const innerSidebarItemsSearch = document.getElementById('inner-sidebar-items-search') as HTMLDivElement;
+  const dividerTitle = document.getElementById('sidebar-divider-title') as HTMLSpanElement;
+
+    const url = new URL(window.location.href);
+    const searchTerm = url.searchParams.get('search');
+    if (searchTerm) {
+      const input = searchInput;
+      input.value = searchTerm;
+      await runSearch(form, dividerTitle, innerSidebarItemsSearch);
+    }
+
+    // if the user submits the form, run the search
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      await runSearch(form, dividerTitle, innerSidebarItemsSearch);
+    });
+
+    // if the user stops typing for 500ms, run the search
+    let timeout: NodeJS.Timeout;
+    form.addEventListener('input', () => {
+      if (searchInput.value.length === 0) clearSearchParams(dividerTitle, innerSidebarItemsSearch);
+
+      clearTimeout(timeout);
+      timeout = setTimeout(async () => await runSearch(form, dividerTitle, innerSidebarItemsSearch), 500);
+    });
+
+    // if the user clears the search, clear the query params
+    searchInput.addEventListener('search', () => clearSearchParams(dividerTitle, innerSidebarItemsSearch));
+  }
+
+  searchSetup();
+</script>