@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.1

package/dist/studio/components/StudioSDKEditor.astro

@@ -1,334 +0,0 @@
----
-import '@grapesjs/studio-sdk/style';
-import { AstroSVG, firstUpperCase } from 'studiocms:wysiwyg/studio/client';
-import { importComponentsKeys } from 'studiocms/lib/renderer/runtime.js';
-import type { PluginPageTypeEditorProps } from 'studiocms/types';
-
-const componentKeys = Object.keys(await importComponentsKeys());
-
-const AstroComponentBlocks = componentKeys.map((key) => ({
-	id: `astro-component-${key}`,
-	label: firstUpperCase(key),
-	category: 'Astro Components',
-	media: AstroSVG,
-	key,
-}));
-
-interface Props extends PluginPageTypeEditorProps {}
----
-<div class="grapes-studio-container">
-  <div class="editor" 
-    data-blocks={JSON.stringify(AstroComponentBlocks || [])}
-    data-compkeys={JSON.stringify(componentKeys || [])}
-    ></div>
-  <textarea id="page-content" name="page-content" style="display: none;">{Astro.props.content}</textarea>
-</div>
-
-<script>
-  import { 
-    licenseKey, youtubeAPIKey, 
-    googleFontsAPIKey, getEditorSettings 
-  } from 'studiocms:wysiwyg/studio/client';
-  import { 
-    tableComponent, fsLightboxComponent, 
-    lightGalleryComponent, swiperComponent, 
-    iconifyComponent, accordionComponent,
-    flexComponent, rteTinyMce,
-    canvasEmptyState, youtubeAssetProvider,
-    googleFontsAssetProvider
-  } from "@grapesjs/studio-sdk-plugins";
-  import { 
-    createStudioEditor, StudioCommands, 
-    type CreateEditorOptions, type WithEditorProps 
-  } from '@grapesjs/studio-sdk';
-
-  const editor = document.querySelector<HTMLDivElement>('.editor') as HTMLDivElement;
-  const pageContent = document.querySelector<HTMLTextAreaElement>('#page-content') as HTMLTextAreaElement;
-
-  const plugins: CreateEditorOptions["plugins"] = [
-    tableComponent.init({
-      block: { category: 'Extra', label: 'My Table' }
-    }),
-    fsLightboxComponent?.init({
-       block: false // Skip default block
-    }),
-    // Add custom blocks for the lightbox
-    (editor: WithEditorProps['editor']) => {
-      editor.Blocks.add('lightbox-image', {
-        label: 'Image',
-        category: 'Lightbox',
-        media: '<svg viewBox="0 0 24 24"><path d="M5,14L8.5,9.5L11,12.5L14.5,8L19,14M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>',
-        content: {
-          type: 'fslightbox',
-          attributes: { href: 'https://placehold.co/300/777/white.png?text=Image+LB+(Open)' },
-          components: `<h2>Image</h2><img src="https://placehold.co/300/777/white.png?text=Image+LB">`
-        }
-      });
-      editor.Blocks.add('lightbox-video', {
-        label: 'Video',
-        category: 'Lightbox',
-        media: '<svg viewBox="0 0 24 24"><path d="M18,14L14,10.8V14H6V6H14V9.2L18,6M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>',
-        content: {
-          type: 'fslightbox',
-          'source-type': 'video',
-          attributes: { href: 'https://videos.pexels.com/video-files/15462514/15462514-uhd_2560_1440_30fps.mp4' },
-          components: `<h2>Video</h2><img src="https://images.pexels.com/videos/15462514/pexels-photo-15462514.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=300">`
-        }
-      });
-      editor.Blocks.add('lightbox-el', {
-        label: 'Element',
-        category: 'Lightbox',
-        media: '<svg viewBox="0 0 24 24"><path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M8,14H6V12H8V14M8,11H6V9H8V11M8,8H6V6H8V8M15,14H10V12H15V14M18,11H10V9H18V11M18,8H10V6H18V8Z" /></svg>',
-        content: () => { // Generate block with dynamic IDs
-          const randomId = Math.random().toString(36).substring(9);
-          const id = `el-id-${randomId}`;
-          return [
-            {
-              type: 'fslightbox',
-              'source-type': 'el',
-              attributes: { href: `#${id}`, 'data-fslightbox': 'custom-elements' },
-              components: `<h2>Custom element #${randomId}</h2>`
-            },
-            `<div style="display: none">
-              <div id="${id}" class="custom-element">Custom content #${randomId}</div>
-            </div>`
-          ];
-        }
-      });
-    },
-    lightGalleryComponent?.init({
-      block: false // Skip default block
-    }),
-    // Add custom gallery blocks
-    (editor: WithEditorProps['editor']) => {
-      editor.Blocks.add('gallery-images', {
-        label: 'Gallery Images',
-        category: 'LightGallery',
-        media: '<svg viewBox="0 0 24 24"><path d="M5,14L8.5,9.5L11,12.5L14.5,8L19,14M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>',
-        content: {
-          type: 'lightGallery',
-          components: [
-            {
-              type: 'lightGallery-item',
-              attributes: { href: 'https://placehold.co/1500/777/white.png?text=Image+1+(Open)' },
-              components: { type: 'image', src: 'https://placehold.co/100/777/white.png?text=Image+1' }
-            },
-            {
-              type: 'lightGallery-item',
-              attributes: { href: 'https://placehold.co/1500/777/white.png?text=Image+2+(Open)' },
-              components: { type: 'image', src: 'https://placehold.co/100/777/white.png?text=Image+2' }
-            }
-          ]
-        }
-      });
-      editor.Blocks.add('gallery-videos', {
-        label: 'Gallery Video',
-        category: 'LightGallery',
-        media: '<svg viewBox="0 0 24 24"><path d="M18,14L14,10.8V14H6V6H14V9.2L18,6M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" /></svg>',
-        content: {
-          type: 'lightGallery',
-          components: [
-            {
-              type: 'lightGallery-item',
-              attributes: { 'data-src': 'https://www.youtube.com/watch?v=EIUJfXk3_3w', 'data-sub-html': 'Video Caption 1' },
-              components: { type: 'image', src: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg', style: { width: '200px' } }
-            },
-            {
-              type: 'lightGallery-item',
-              attributes: { 'data-src': 'https://vimeo.com/112836958', 'data-sub-html': 'Video Caption 2' },
-              components: { type: 'image', src: 'https://i.vimeocdn.com/video/506427660-2e93a42675715090a52de8e6645d592c5f58c1a7e388231d801072c9b2d9843d-d?mw=300', style: { width: '200px' } }
-            }
-          ]
-        }
-      });
-    },
-    swiperComponent?.init({
-      block: false // Skip default block
-    }),
-    // Add custom blocks for the swiper
-    (editor: WithEditorProps['editor']) => {
-      editor.Blocks.add('swiper', {
-        label: 'Swiper Slider',
-        category: 'Swiper example',
-        media: '<svg viewBox="0 0 24 24"><path d="M22 7.6c0-1-.5-1.6-1.3-1.6H3.4C2.5 6 2 6.7 2 7.6v9.8c0 1 .5 1.6 1.3 1.6h17.4c.8 0 1.3-.6 1.3-1.6V7.6zM21 18H3V7h18v11z" fill-rule="nonzero"/><path d="M4 12.5L6 14v-3zM20 12.5L18 14v-3z"/></svg>',
-        content: `<div class="swiper" style="height: 200px">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide"><div>Slide 1</div></div>
-            <div class="swiper-slide"><div>Slide 2</div></div>
-            <div class="swiper-slide"><div>Slide 3</div></div>
-          </div>
-          <div class="swiper-button-next"></div>
-          <div class="swiper-button-prev"></div>
-        </div>`
-      });
-    },
-    iconifyComponent.init({
-      block: { category: 'Extra', label: 'Iconify' }
-    }),
-    accordionComponent.init({
-      block: { category: 'Extra' },
-      blockGroup: { category: 'Extra' },
-    }),
-    flexComponent.init({}),
-    rteTinyMce.init({
-      loadConfig: ({ editor }) => {
-        const { theme } = editor.runCommand(StudioCommands.getStateTheme);
-
-        return {
-          toolbar: "bold italic underline strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify link image | fontfamily fontsize bullist numlist outdent indent table",
-          skin: (theme === 'auto' ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme) === 'dark' ? 'oxide-dark' : 'oxide',
-        }
-      }
-    }),
-    canvasEmptyState?.init({
-      emptyStates: [
-        {
-          isValid: ['wrapper'],
-          render: ({ editor, mount, unmount }) => {
-            const container = document.createElement('div');
-            container.className = 'empty-state-wrapper';
-            container.innerHTML = `
-              <div class="empty-state-wrapper__card">
-                <div class="empty-state-wrapper__content">
-                  <h1>This is the empty state element of the body!</h1>
-                  <p>Drop the column block to see another component with a custom empty state!</p>
-                </div>
-                <button class="empty-state-wrapper__btn">Add Block</button>
-              </div>
-    
-              <style>
-                .empty-state-wrapper {
-                  font-family: system-ui, sans-serif;
-                  background-color: #f5f5f5;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  height: 100dvh;
-                }
-                .empty-state-wrapper__card {
-                  text-align: center;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: center;
-                  justify-content: center;
-                  padding: 24px;
-                  border-radius: 4px;
-                  background-color: white;
-                  color: #333;
-                  gap: 16px;
-                }
-                .empty-state-wrapper__btn {
-                  background-color: #8b5cf6;
-                  padding: 8px 16px;
-                  margin: 0;
-                  color: white;
-                  border: none;
-                  cursor: pointer;
-                  border-radius: 4px;
-                }
-              </style>
-            `;
-    
-            const btn = container.querySelector('button') as HTMLButtonElement;
-            btn.addEventListener('click', () => {
-              editor.runCommand('studio:layoutToggle', {
-                id: 'emptyStateWrapperBlocks',
-                layout: { type: 'panelBlocks' },
-                header: { label: 'Blocks' },
-                placer: { type: 'absolute', position: 'left' }
-              });
-            });
-    
-            // Mount the empty state container
-            mount(container);
-            return () => unmount(container);
-          }
-        },
-        {
-          isValid: ({ component }) => component.is('gridColumn'),
-          render: ({ editor, component, mount }) => {
-            const container = document.createElement('div');
-            container.className = 'empty-state-wrapper';
-            container.innerHTML = `
-              <button class="empty-state-column__btn">Add text to column</button>
-              <style>
-                .empty-state-wrapper {
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                }
-                .empty-state-column__btn {
-                  background-color: #8b5cf6;
-                  padding: 8px 16px;
-                  margin: 0;
-                  color: white;
-                  border: none;
-                  cursor: pointer;
-                  border-radius: 4px;
-                }
-              </style>
-            `;
-            const btn = container.querySelector('button') as HTMLButtonElement;
-            btn.addEventListener('click', () => {
-              const textCmp = component.append('<div>New Text</div>')[0];
-              editor.select(textCmp);
-              textCmp.trigger('active');
-            });
-            mount(container);
-          }
-        }
-      ]
-    }),
-  ];
-
-  if (youtubeAPIKey) {
-    plugins.push(
-      youtubeAssetProvider.init({
-        apiKey: youtubeAPIKey,
-        searchParams: ({ searchValue }) => ({
-          q: searchValue || 'Default search query',
-        })
-      }),
-      (editor: WithEditorProps['editor']) => {
-        editor.onReady(() => {
-          const videoCmp = editor.getWrapper()?.findType('video')[0];
-          editor.select(videoCmp);
-        });
-      },
-    )
-  }
-
-  if (googleFontsAPIKey) {
-    plugins.push(googleFontsAssetProvider.init({
-      apiKey: googleFontsAPIKey,
-    }))
-  }
-
-  createStudioEditor(getEditorSettings(licenseKey, editor, pageContent, plugins));
-</script>
-
-<style>
-  :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-  
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-  
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .grapes-studio-container {
-    display: flex;
-    flex-direction: column;
-    height: 80dvh;
-  }
-  .editor {
-    height: 100%;
-  }
-</style>

package/dist/studio/index.d.ts

@@ -1,38 +0,0 @@
-/**
- * These triple-slash directives defines dependencies to various declaration files that will be
- * loaded when a user imports the StudioCMS plugin in their Astro configuration file. These
- * directives must be first at the top of the file and can only be preceded by this comment.
- */
-/// <reference types="./virtual.d.ts" preserve="true" />
-import { type StudioCMSPlugin } from 'studiocms/plugins';
-import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize';
-/**
- * Represents the configuration options for the StudioCMS WYSIWYG Plugin.
- */
-export type StudioCMSWYSIWYGStudioOptions = {
-    /** The license key required for the GrapesJS StudioSDK. */
-    licenseKey: string;
-    /**
-     * YouTube API Key
-     *
-     * You must provide your own apiKey in the plugin options when using this in your project. Get a YouTube Data API v3 key from the [Google Cloud Console](https://console.cloud.google.com/apis/library/browse?q=youtube).
-     */
-    youtubeAPIKey?: string;
-    /**
-     * Google Data API v3 Key, Get yours at [Google Cloud Console](https://console.cloud.google.com/)
-     */
-    googleFontsAPIKey?: string;
-    /** Options passed to the HTML Transformer during rendering */
-    sanitize?: SanitizeOptions;
-};
-/**
- * Creates a StudioCMS plugin for integrating the GrapesJS StudioSDK WYSIWYG editor into the StudioCMS environment.
- *
- * > **Important:** GrapesJS StudioSDK License is required. If you would like a WYSIWYG Editor that does not require
- * > a license please try the `@studiocms/wysiwyg` default export instead.
- *
- * @returns A `StudioCMSPlugin` object that defines the plugin configuration, including page types,
- *          integration hooks, and other metadata.
- */
-declare function studiocmsWYSIWYGStudio(options: StudioCMSWYSIWYGStudioOptions): StudioCMSPlugin;
-export default studiocmsWYSIWYGStudio;

package/dist/studio/index.js

@@ -1,58 +0,0 @@
-import { addVirtualImports, createResolver } from "astro-integration-kit";
-import { definePlugin } from "studiocms/plugins";
-import { shared } from "./shared.js";
-function studiocmsWYSIWYGStudio(options) {
-  const { resolve } = createResolver(import.meta.url);
-  const packageIdentifier = "@studiocms/wysiwyg/studio";
-  return definePlugin({
-    identifier: packageIdentifier,
-    name: "StudioCMS WYSIWYG (GrapesJS StudioSDK)",
-    studiocmsMinimumVersion: "0.1.0-beta.18",
-    hooks: {
-      "studiocms:astro:config": ({ addIntegrations }) => {
-        addIntegrations({
-          name: packageIdentifier,
-          hooks: {
-            "astro:config:setup": (params) => {
-              addVirtualImports(params, {
-                name: packageIdentifier,
-                imports: {
-                  "studiocms:wysiwyg/studio/client": `
-										export const licenseKey = ${JSON.stringify(options.licenseKey)};
-										export const youtubeAPIKey = ${JSON.stringify(options.youtubeAPIKey)};
-										export const googleFontsAPIKey = ${JSON.stringify(options.googleFontsAPIKey)};
-										export * from '${resolve("./utils.js")}';
-									`
-                }
-              });
-              params.injectRoute({
-                entrypoint: resolve("./routes/partial.astro"),
-                pattern: "/studiocms_api/wysiwyg_editor/studiosdk/partial",
-                prerender: false
-              });
-            },
-            "astro:config:done": () => {
-              shared.sanitize = options.sanitize || {};
-            }
-          }
-        });
-      },
-      "studiocms:config:setup": ({ setRendering }) => {
-        setRendering({
-          pageTypes: [
-            {
-              identifier: "studiocms/wysiwyg/studio",
-              label: "GrapesJS StudioSDK",
-              rendererComponent: resolve("./components/Render.astro"),
-              pageContentComponent: resolve("./components/StudioSDKEditor.astro")
-            }
-          ]
-        });
-      }
-    }
-  });
-}
-var studio_default = studiocmsWYSIWYGStudio;
-export {
-  studio_default as default
-};

package/dist/studio/routes/partial.astro

@@ -1,27 +0,0 @@
----
-export const partial = true;
-import { importComponentsKeys } from 'studiocms/lib/renderer/runtime.js';
-
-// Import components
-const components = await importComponentsKeys();
-
-const data = await Astro.request.json();
-if (!data || typeof data.componentKey !== 'string') {
-	return new Response(JSON.stringify({ error: 'Missing or invalid componentKey' }), {
-		status: 400,
-		headers: { 'Content-Type': 'application/json' },
-	});
-}
-const { componentKey } = data;
-
-const Component = components[componentKey];
-
-// Handle case where component doesn't exist
-if (!Component) {
-	return new Response(JSON.stringify({ error: `Component "${componentKey}" not found` }), {
-		status: 404,
-		headers: { 'Content-Type': 'application/json' },
-	});
-}
----
-<Component />

package/dist/studio/shared.d.ts

@@ -1,17 +0,0 @@
-type Shared = {
-    sanitize: import('ultrahtml/transformers/sanitize').SanitizeOptions;
-};
-declare global {
-    var studiocmsWYSIWYGStudio: Shared;
-}
-/**
- * A shared object used across the WYSIWYG Studio module. This object is either retrieved
- * from the global `studiocmsWYSIWYGStudio` property or initialized as a new object with
- * default properties if it does not already exist.
- *
- * @remarks
- * The `sanitize` property is initialized as an empty object and can be used to store
- * sanitization-related configurations or utilities.
- */
-export declare const shared: Shared;
-export {};

package/dist/studio/shared.js

@@ -1,7 +0,0 @@
-const shared = globalThis.studiocmsWYSIWYGStudio || // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
-(globalThis.studiocmsWYSIWYGStudio = {
-  sanitize: {}
-});
-export {
-  shared
-};

package/dist/studio/utils.d.ts

@@ -1,105 +0,0 @@
-import type { CreateEditorOptions, WithEditorProps } from '@grapesjs/studio-sdk';
-import { firstUpperCase, parse } from '../utils.js';
-export { firstUpperCase, parse };
-export declare const AstroSVG: string;
-export declare const fallbackPages: {
-    pages: {
-        name: string;
-    }[];
-};
-/**
- * A fallback project object used as a default value when a project fails to load.
- *
- * @constant
- * @property {Object} default - The default project structure.
- * @property {Array<Object>} default.pages - An array of page objects for the fallback project.
- * @property {string} default.pages[].component - The HTML content to display as a fallback message.
- */
-export declare const fallbackProject: {
-    default: {
-        pages: {
-            name: string;
-        }[];
-    };
-};
-/**
- * Represents an array of Astro component blocks, where each block contains metadata
- * about a specific component used in the system.
- */
-export type AstroComponentBlocks = {
-    id: string;
-    label: string;
-    category: string;
-    media: string;
-    key: string;
-}[];
-/**
- * Represents an array of editor blocks used in the Astro component editor.
- * Each block contains metadata and a function to generate its content.
- */
-export type AstroComponentEditorBlocks = {
-    id: string;
-    label: string;
-    category: string;
-    media: string;
-    content: () => string;
-}[];
-/**
- * Converts an array of `AstroComponentBlocks` into an array of `AstroComponentEditorBlocks`.
- *
- * Each block in the input array is transformed by extracting its `key` property
- * and using it to generate a `content` function that returns a string representation
- * of an HTML element with the given key as its tag name. The rest of the block's properties
- * are preserved in the output.
- *
- * @param blocks - An array of `AstroComponentBlocks` to be converted.
- * @returns An array of `AstroComponentEditorBlocks` with updated `content` functions.
- */
-export declare function convertComponentBlocks(blocks: AstroComponentBlocks): AstroComponentEditorBlocks;
-/**
- * Generates the HTML content of the first page from the editor's project files.
- *
- * @param editor - The editor instance implementing the `WithEditorProps['editor']` interface.
- * @returns A promise that resolves to a string containing the HTML content of the first page.
- *
- * @remarks
- * - This function uses the `studio:projectFiles` command to retrieve the project files
- *   with inline styles.
- * - It assumes that the first page is identified by the MIME type `text/html`.
- * - The `content` property of the first page is cast to a string and returned as the result.
- *
- * @throws Will throw an error if the `studio:projectFiles` command fails or if no HTML file is found.
- */
-export declare const generateHTML: (editor: WithEditorProps["editor"]) => Promise<string>;
-/**
- * Creates a plugin for the editor to handle custom Astro components.
- *
- * @param componentKeys - An array of strings representing the tag names of the Astro components to be recognized.
- * @returns A function that takes an editor instance and registers a custom component type (`astro-component`) with the editor.
- *
- * The custom component type includes:
- * - A `isComponent` method to determine if an element matches one of the specified `componentKeys`.
- * - A `view` object that defines how the component is rendered in the editor, including:
- *   - A placeholder HTML structure with a styled card layout.
- *   - A loading animation for the placeholder.
- *
- * The placeholder displays the name of the Astro component in a styled card format.
- */
-export declare const getPlugin: (componentKeys: string[]) => (editor: WithEditorProps["editor"]) => void;
-/**
- * Generates the editor settings for the GrapesJS StudioSDK WYSIWYG editor.
- *
- * @param licenseKey - The license key required to initialize the editor.
- * @param root - The root HTML element containing dataset attributes for blocks and component keys.
- * @param pageContent - The HTML element containing the serialized project data as inner text.
- * @returns An object of type `CreateEditorOptions` containing the configuration for the editor.
- *
- * The returned configuration includes:
- * - License key validation.
- * - Plugins setup based on component keys.
- * - Project and block data initialization.
- * - Asset storage configuration.
- * - Custom storage handlers for saving and loading project data.
- * - Autosave settings for periodic saving of changes.
- */
-export declare function getEditorSettings(licenseKey: string, root: HTMLElement, pageContent: HTMLElement, plugins?: CreateEditorOptions['plugins']): CreateEditorOptions;