@dotcms/uve 0.0.1-beta.9 → 1.0.0

package/index.esm.js

@@ -1,83 +1,3 @@
-import { UVE_MODE } from './types.esm.js';
-import { __UVE_EVENT_ERROR_FALLBACK__, __UVE_EVENTS__ } from './internal.esm.js';
-
-/**
- * Gets the current state of the Universal Visual Editor (UVE).
- *
- * This function checks if the code is running inside the DotCMS Universal Visual Editor
- * and returns information about its current state, including the editor mode.
- *
- * @export
- * @return {UVEState | undefined} Returns the UVE state object if running inside the editor,
- * undefined otherwise.
- *
- * The state includes:
- * - mode: The current editor mode (preview, edit, live)
- * - languageId: The language ID of the current page setted on the UVE
- * - persona: The persona of the current page setted on the UVE
- * - variantName: The name of the current variant
- * - experimentId: The ID of the current experiment
- * - publishDate: The publish date of the current page setted on the UVE
- *
- * @note The absence of any of these properties means that the value is the default one.
- *
- * @example
- * ```ts
- * const editorState = getUVEState();
- * if (editorState?.mode === 'edit') {
- *   // Enable editing features
- * }
- * ```
- */
-function getUVEState() {
-  if (typeof window === 'undefined' || window.parent === window || !window.location) {
-    return;
-  }
-  const url = new URL(window.location.href);
-  const possibleModes = Object.values(UVE_MODE);
-  let mode = url.searchParams.get('mode') ?? UVE_MODE.EDIT;
-  const languageId = url.searchParams.get('language_id');
-  const persona = url.searchParams.get('personaId');
-  const variantName = url.searchParams.get('variantName');
-  const experimentId = url.searchParams.get('experimentId');
-  const publishDate = url.searchParams.get('publishDate');
-  if (!possibleModes.includes(mode)) {
-    mode = UVE_MODE.EDIT;
-  }
-  return {
-    mode,
-    languageId,
-    persona,
-    variantName,
-    experimentId,
-    publishDate
-  };
-}
-/**
- * Creates a subscription to a UVE event.
- *
- * @param {string} event - The event to subscribe to.
- * @param {UVECallback} callback - The callback to call when the event is triggered.
- * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
- *
- * @example
- * ```ts
- * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
- *   console.log(payload);
- * });
- * ```
- */
-function createUVESubscription(event, callback) {
-  if (!getUVEState()) {
-    console.warn('UVE Subscription: Not running inside UVE');
-    return __UVE_EVENT_ERROR_FALLBACK__(event);
-  }
-  const eventCallback = __UVE_EVENTS__[event];
-  if (!eventCallback) {
-    console.error(`UVE Subscription: Event ${event} not found`);
-    return __UVE_EVENT_ERROR_FALLBACK__(event);
-  }
-  return eventCallback(callback);
-}
-
-export { createUVESubscription, getUVEState };
+export { c as createUVESubscription, e as editContentlet, a as enableBlockEditorInline, g as getUVEState, i as initInlineEditing, b as initUVE, r as reorderMenu, s as sendMessageToUVE, u as updateNavigation } from './public.esm.js';
+import '@dotcms/types';
+import '@dotcms/types/internal';

package/internal.cjs.js

@@ -1,76 +1,103 @@
 'use strict';
 
+var _public = require('./public.cjs.js');
+require('@dotcms/types');
+require('@dotcms/types/internal');
+
 /**
- * Actions received from the dotcms editor
+ * TinyMCE default config across all versions
  *
- * @export
- * @enum {number}
+ * @internal
  */
-exports.__DOTCMS_UVE_EVENT__ = void 0;
-(function (__DOTCMS_UVE_EVENT__) {
-  /**
-   * Request to page to reload
-   */
-  __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
-  /**
-   * Request the bounds for the elements
-   */
-  __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
-  /**
-   * Received pong from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
-  /**
-   * Received scroll event trigger from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
-  /**
-   * Set the page data
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
-  /**
-   * Copy contentlet inline editing success
-   */
-  __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
-})(exports.__DOTCMS_UVE_EVENT__ || (exports.__DOTCMS_UVE_EVENT__ = {}));
-
-// TODO: WE NEED TO LOOK FOR ALL THE NOTIFY_CLIENT EVENTS AND ADD THEM TO THE UVE_EVENTS CONSTANT WHEN WE MIGRATE THE EDITOR TO THE NEW UVE LIBRARY
+const __DEFAULT_TINYMCE_CONFIG__ = {
+  menubar: false,
+  inline: true,
+  valid_styles: {
+    '*': 'font-size,font-family,color,text-decoration,text-align'
+  },
+  powerpaste_word_import: 'clean',
+  powerpaste_html_import: 'clean',
+  suffix: '.min' // Suffix to use when loading resources
+};
 /**
- * Events that can be subscribed to in the UVE
+ * TinyMCE config to use per mode
  *
  * @internal
- * @type {Record<string, UVEEvent>}
  */
-const __UVE_EVENTS__ = {
-  changes: callback => {
-    const messageCallback = event => {
-      if (event.data.name === exports.__DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
-        callback(event.data.payload);
-      }
-    };
-    window.addEventListener('message', messageCallback);
-    return {
-      unsubscribe: () => {
-        window.removeEventListener('message', messageCallback);
-      },
-      event: 'changes'
-    };
+const __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = {
+  full: {
+    plugins: 'link lists autolink charmap',
+    toolbar: ['styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'],
+    style_formats: [{
+      title: 'Paragraph',
+      format: 'p'
+    }, {
+      title: 'Header 1',
+      format: 'h1'
+    }, {
+      title: 'Header 2',
+      format: 'h2'
+    }, {
+      title: 'Header 3',
+      format: 'h3'
+    }, {
+      title: 'Header 4',
+      format: 'h4'
+    }, {
+      title: 'Header 5',
+      format: 'h5'
+    }, {
+      title: 'Header 6',
+      format: 'h6'
+    }, {
+      title: 'Pre',
+      format: 'pre'
+    }, {
+      title: 'Code',
+      format: 'code'
+    }]
+  },
+  plain: {
+    plugins: '',
+    toolbar: ''
+  },
+  minimal: {
+    plugins: 'link autolink',
+    toolbar: 'bold italic underline | link',
+    valid_elements: 'strong,em,span[style],a[href]'
   }
 };
 /**
- * Default UVE event
+ * TinyMCE path
  *
- * @param {string} event - The event to subscribe to.
  * @internal
  */
-const __UVE_EVENT_ERROR_FALLBACK__ = event => {
-  return {
-    unsubscribe: () => {
-      /* do nothing */
-    },
-    event
-  };
-};
+const __TINYMCE_PATH_ON_DOTCMS__ = '/ext/tinymcev7/tinymce.min.js';
 
-exports.__UVE_EVENTS__ = __UVE_EVENTS__;
-exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;
+exports.CUSTOM_NO_COMPONENT = _public.CUSTOM_NO_COMPONENT;
+exports.DEVELOPMENT_MODE = _public.DEVELOPMENT_MODE;
+exports.EMPTY_CONTAINER_STYLE_ANGULAR = _public.EMPTY_CONTAINER_STYLE_ANGULAR;
+exports.EMPTY_CONTAINER_STYLE_REACT = _public.EMPTY_CONTAINER_STYLE_REACT;
+exports.END_CLASS = _public.END_CLASS;
+exports.PRODUCTION_MODE = _public.PRODUCTION_MODE;
+exports.START_CLASS = _public.START_CLASS;
+exports.__UVE_EVENTS__ = _public.__UVE_EVENTS__;
+exports.__UVE_EVENT_ERROR_FALLBACK__ = _public.__UVE_EVENT_ERROR_FALLBACK__;
+exports.combineClasses = _public.combineClasses;
+exports.computeScrollIsInBottom = _public.computeScrollIsInBottom;
+exports.findDotCMSElement = _public.findDotCMSElement;
+exports.findDotCMSVTLData = _public.findDotCMSVTLData;
+exports.getClosestDotCMSContainerData = _public.getClosestDotCMSContainerData;
+exports.getColumnPositionClasses = _public.getColumnPositionClasses;
+exports.getContainersData = _public.getContainersData;
+exports.getContentletsInContainer = _public.getContentletsInContainer;
+exports.getDotCMSContainerData = _public.getDotCMSContainerData;
+exports.getDotCMSContentletsBound = _public.getDotCMSContentletsBound;
+exports.getDotCMSPageBounds = _public.getDotCMSPageBounds;
+exports.getDotContainerAttributes = _public.getDotContainerAttributes;
+exports.getDotContentletAttributes = _public.getDotContentletAttributes;
+exports.isValidBlocks = _public.isValidBlocks;
+exports.setBounds = _public.setBounds;
+exports.__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__;
+exports.__DEFAULT_TINYMCE_CONFIG__ = __DEFAULT_TINYMCE_CONFIG__;
+exports.__TINYMCE_PATH_ON_DOTCMS__ = __TINYMCE_PATH_ON_DOTCMS__;

package/internal.esm.js

@@ -1,73 +1,75 @@
+export { C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, h as EMPTY_CONTAINER_STYLE_ANGULAR, f as EMPTY_CONTAINER_STYLE_REACT, E as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, _ as __UVE_EVENTS__, d as __UVE_EVENT_ERROR_FALLBACK__, q as combineClasses, p as computeScrollIsInBottom, n as findDotCMSElement, o as findDotCMSVTLData, m as getClosestDotCMSContainerData, t as getColumnPositionClasses, w as getContainersData, x as getContentletsInContainer, l as getDotCMSContainerData, k as getDotCMSContentletsBound, j as getDotCMSPageBounds, y as getDotContainerAttributes, v as getDotContentletAttributes, A as isValidBlocks, z as setBounds } from './public.esm.js';
+import '@dotcms/types';
+import '@dotcms/types/internal';
+
 /**
- * Actions received from the dotcms editor
+ * TinyMCE default config across all versions
  *
- * @export
- * @enum {number}
+ * @internal
  */
-var __DOTCMS_UVE_EVENT__;
-(function (__DOTCMS_UVE_EVENT__) {
-  /**
-   * Request to page to reload
-   */
-  __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
-  /**
-   * Request the bounds for the elements
-   */
-  __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
-  /**
-   * Received pong from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
-  /**
-   * Received scroll event trigger from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
-  /**
-   * Set the page data
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
-  /**
-   * Copy contentlet inline editing success
-   */
-  __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
-})(__DOTCMS_UVE_EVENT__ || (__DOTCMS_UVE_EVENT__ = {}));
-
-// TODO: WE NEED TO LOOK FOR ALL THE NOTIFY_CLIENT EVENTS AND ADD THEM TO THE UVE_EVENTS CONSTANT WHEN WE MIGRATE THE EDITOR TO THE NEW UVE LIBRARY
+const __DEFAULT_TINYMCE_CONFIG__ = {
+  menubar: false,
+  inline: true,
+  valid_styles: {
+    '*': 'font-size,font-family,color,text-decoration,text-align'
+  },
+  powerpaste_word_import: 'clean',
+  powerpaste_html_import: 'clean',
+  suffix: '.min' // Suffix to use when loading resources
+};
 /**
- * Events that can be subscribed to in the UVE
+ * TinyMCE config to use per mode
  *
  * @internal
- * @type {Record<string, UVEEvent>}
  */
-const __UVE_EVENTS__ = {
-  changes: callback => {
-    const messageCallback = event => {
-      if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
-        callback(event.data.payload);
-      }
-    };
-    window.addEventListener('message', messageCallback);
-    return {
-      unsubscribe: () => {
-        window.removeEventListener('message', messageCallback);
-      },
-      event: 'changes'
-    };
+const __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = {
+  full: {
+    plugins: 'link lists autolink charmap',
+    toolbar: ['styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'],
+    style_formats: [{
+      title: 'Paragraph',
+      format: 'p'
+    }, {
+      title: 'Header 1',
+      format: 'h1'
+    }, {
+      title: 'Header 2',
+      format: 'h2'
+    }, {
+      title: 'Header 3',
+      format: 'h3'
+    }, {
+      title: 'Header 4',
+      format: 'h4'
+    }, {
+      title: 'Header 5',
+      format: 'h5'
+    }, {
+      title: 'Header 6',
+      format: 'h6'
+    }, {
+      title: 'Pre',
+      format: 'pre'
+    }, {
+      title: 'Code',
+      format: 'code'
+    }]
+  },
+  plain: {
+    plugins: '',
+    toolbar: ''
+  },
+  minimal: {
+    plugins: 'link autolink',
+    toolbar: 'bold italic underline | link',
+    valid_elements: 'strong,em,span[style],a[href]'
   }
 };
 /**
- * Default UVE event
+ * TinyMCE path
  *
- * @param {string} event - The event to subscribe to.
  * @internal
  */
-const __UVE_EVENT_ERROR_FALLBACK__ = event => {
-  return {
-    unsubscribe: () => {
-      /* do nothing */
-    },
-    event
-  };
-};
+const __TINYMCE_PATH_ON_DOTCMS__ = '/ext/tinymcev7/tinymce.min.js';
 
-export { __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__ };
+export { __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __DEFAULT_TINYMCE_CONFIG__, __TINYMCE_PATH_ON_DOTCMS__ };

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@dotcms/uve",
-  "version": "0.0.1-beta.9",
+  "version": "1.0.0",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dotCMS/core.git#main"
   },
+  "devDependencies": {
+    "@dotcms/types": "latest"
+  },
   "keywords": [
     "dotCMS",
     "CMS",
@@ -21,12 +24,6 @@
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     },
-    "./types": {
-      "module": "./types.esm.js",
-      "types": "./types.esm.d.ts",
-      "import": "./types.cjs.mjs",
-      "default": "./types.cjs.js"
-    },
     "./internal": {
       "module": "./internal.esm.js",
       "types": "./internal.esm.d.ts",
@@ -39,9 +36,6 @@
       ".": [
         "./src/index.d.ts"
       ],
-      "types": [
-        "./src/types.d.ts"
-      ],
       "internal": [
         "./src/internal.d.ts"
       ]