@studiocms/wysiwyg

v0.3.0 GitHub npm Registro de cambios
Introducción

¡Este complemento agrega un editor WYSIWYG a tu proyecto StudioCMS con facilidad!
Instalación

Instala el paquete usando el siguiente comando:
- npm
- pnpm
- yarn
Ventana de terminal
npm run studiocms add @studiocms/wysiwyg
Ventana de terminal
pnpm run studiocms add @studiocms/wysiwyg
Ventana de terminal
yarn run studiocms add @studiocms/wysiwyg
La configuración de StudioCMS debería incluir @studiocms/wysiwyg:
import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function wysiwyg(opts?: WYSIWYGSchemaOptions): StudioCMSPluginDef
Creates and configures the StudioCMS WYSIWYG Editor plugin.
This plugin integrates a WYSIWYG editor into the StudioCMS environment,
registering custom routes, rendering components, and handling configuration hooks.
@param ― options - Optional configuration for the WYSIWYG schema, including sanitization options.
@returns ― A configured StudioCMS plugin instance for the WYSIWYG editor.
@example 
import wysiwyg from '@studiocms/wysiwyg';

plugins: [
  wysiwyg({
    sanitize: {}
  })
]
wysiwyg from '@studiocms/wysiwyg';

 export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig({
   
plugins?: {
    readonly identifier: string;
    readonly name: string;
    readonly studiocmsMinimumVersion?: string | undefined | undefined;
    readonly requires?: readonly string[] | undefined;
    readonly hooks: {
        "studiocms:astro-config"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => void) | undefined;
        "studiocms:auth"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => void) | undefined;
        "studiocms:dashboard"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setDashboard: (args: {
                translations: {
                    [x: string]: {
                        [x: string]: {
                            [x: string]: string;
                        };
                    };
                };
                dashboardGridItems?: readonly {
                    readonly name: string;
                    readonly span: 1 | 2 | 3;
                    readonly variant: "default" | "filled";
                    readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                    readonly header?: {
                        readonly title: string;
                        readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" | "heroicons:arrow-left" | "heroicons:arrow-left-16-solid" | "heroicons:arrow-left-20-solid" | "heroicons:arrow-left-circle" | "heroicons:arrow-left-circle-16-solid" | "heroicons:arrow-left-circle-20-solid" | "heroicons:arrow-left-circle-solid" | "heroicons:arrow-left-end-on-rectangle" | "heroicons:arrow-left-end-on-rectangle-16-solid" | "heroicons:arrow-left-end-on-rectangle-20-solid" | "heroicons:arrow-left-end-on-rectangle-solid" | "heroicons:arrow-left-on-rectangle" | "heroicons:arrow-left-on-rectangle-20-solid" | "heroicons:arrow-left-on-rectangle-solid" ...
plugins: [
     
function wysiwyg(opts?: WYSIWYGSchemaOptions): StudioCMSPluginDef
Creates and configures the StudioCMS WYSIWYG Editor plugin.
This plugin integrates a WYSIWYG editor into the StudioCMS environment,
registering custom routes, rendering components, and handling configuration hooks.
@param ― options - Optional configuration for the WYSIWYG schema, including sanitization options.
@returns ― A configured StudioCMS plugin instance for the WYSIWYG editor.
@example 
import wysiwyg from '@studiocms/wysiwyg';

plugins: [
  wysiwyg({
    sanitize: {}
  })
]
wysiwyg(),
   ],
 });