@liferay-editor-custom-fields/framework 7.4.2 → 7.4.5

package/README.md

@@ -1,28 +1,50 @@
 # Liferay Custom Fields Framework
 
-The engine behind Liferay Custom Fields. You only need this if you are creating a Liferay Editor Custom Fields package. Otherwise you can just install the package.
+The engine behind Liferay Editor Custom Fields.
 
-You can read more about how it works [Creating a Liferay global JS client extension with TypeScript and Webpack](https://xtivia.com/blog/creating-a-liferay-global-js-client-extension-with-typescript-and-webpack).
+## Before You Start
+
+Any client extension using this framework should not run on a production or pre-prod staging environment. It is only intended for the fragment and web content editors. Any JS that will end up on the page should be elsewhere, either in a separate client extension or in the fragment/web content template.
+
+You only need this if you are creating a new Liferay Editor Custom Fields package, otherwise it is provided as a dependency on existing ones.
 
 ## Getting Started
 
- 
+- Install @liferay-editor-custom-fields/framework
+  - Make sure the version matches the minor version of Liferay you are using
+  - For example `yarn add @liferay-editor-custom-fields/framework@~7.4.0` for Liferay 7.4.
+- In the index.ts of your app:
+  - Declare the Liferay global object
+  - Import the default exported function from @liferay-editor-custom-fields/framework. You can call it something short like initFramework();
+- Create a default exported function of your own and call that function
+- Write a Liferay.on event subscriber for each event that your app will be using. See the Events section of this document for a list of events.
 
+```
+declare const Liferay;
 
-## Events and Helpers
+import initFramework from '@liferay-editor-custom-fields/framework';
 
-The framework profides the Liferay events and exposed functions below to use in your implementation.
+const initImageTools: () => void = () => {
+    initFramework();
+    Liferay.on('EditorCustomFields_WebContentFields_OnLoad', ()=>{});
+    Liferay.on('EditorCustomFields_FragmenConfig_OnLoad', ()=>{});
+    Liferay.on('EditorCustomFields_Image_OnChange', ()=>{});
+}
+export default initImageTools;
+```
 
-### Events
+## Events
 
 Use Liferay.on to subscribe to these events:
+
 - `EditorCustomFields_WebContentFields_OnLoad` - Fires when web content field DOM is loaded.
 - `EditorCustomFields_FragmenConfig_OnLoad` - Fires when a new Fragment config is loaded on the right pane of a page editor.
 - `EditorCustomFields_Image_OnChange` - Fires when an lfr-editable image or Web Content image is changed.
 
-### Helper functions
+## Helper functions
+
+The helper functions below are available for import in any file. For example, to use the getFieldByLabel helper you would use `import { getFieldByLabel } from "@liferay-editor-custom-fields/framework";`
 
-The helper functions below are children of Liferay.editorCustomFields
 - `debounce(callback:function, wait:number)` - A simple callback function
 - `getContentImageInput(label:string)` - Gets the metadata input field associated with the web content image.
 - `getFieldByLabel(label:string)` - Uses Xpath to get an input field by its label. Usually used to append a GUI element.
@@ -31,4 +53,4 @@ The helper functions below are children of Liferay.editorCustomFields
 
 ## License
 
-MIT Licensed. Copyright (c) Xtivia 2026.
+MIT Licensed. Copyright (c) Xtivia 2026.

package/build/static/index.d.ts

@@ -0,0 +1,2 @@
+declare const initFramework: () => void;
+export default initFramework;

package/build/static/index.js

@@ -0,0 +1 @@
+var e={d:(t,r)=>{for(var o in r)e.o(r,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:r[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{c:()=>d});const r=(e,t)=>{let r=null;return(...o)=>{window.clearTimeout(r),r=window.setTimeout(()=>{e(...o)},t)}},o=()=>{Liferay.fire("EditorCustomFields_Image_OnChange")},i=()=>{const e=document?.querySelector("#portlet_com_liferay_journal_web_portlet_JournalPortlet, .page-editor__topper.active"),t=e?.querySelector(".page-editor__topper.active img.page-editor__editable, .image-picker-preview>img");return t},n=()=>document.querySelector('input[name^="_com_liferay_journal_web_portlet_JournalPortlet_ddm$$Image"]'),s=e=>{Liferay.editorCustomFields.imageObserver&&Liferay.editorCustomFields.imageObserver.disconnect?.();const t="fragment"===e?i():n();if(e&&t&&!Liferay.editorCustomFields.imageObserver){const e=r(()=>o(),500);Liferay.editorCustomFields.imageObserver=new MutationObserver(e);const i={attributes:!0,childList:!1,subtree:!1};Liferay.editorCustomFields.imageObserver.observe(t,i)}o()},a=()=>{const e=document.querySelector(".page-editor__item-configuration-sidebar");if(e){Liferay.editorCustomFields.fragmentObserver&&Liferay.editorCustomFields.fragmentObserver.disconnect?.();const t=r(()=>{s("fragment"),Liferay.fire("EditorCustomFields_FragmenConfig_OnLoad")},500);Liferay.editorCustomFields.fragmentObserver=new MutationObserver(t);const o={attributes:!1,childList:!0,subtree:!1};Liferay.editorCustomFields.fragmentObserver.observe(e,o)}},l=e=>{const t=document.querySelector("#portlet_com_liferay_journal_web_portlet_JournalPortlet, .page-editor__item-configuration-sidebar"),r=document.evaluate(`//label[text()='${e}']`,t,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;return r?.closest(".form-group, .field-wrapper")?.querySelector("input")||r?.nextElementSibling?.querySelector("input")||r?.nextSibling},u=(e,t)=>{e.focus(),Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0})),document.body.focus(),e.dispatchEvent(new Event("blur",{bubbles:!0}))},d=()=>{const e=()=>{(()=>{const e=document.querySelector("#_com_liferay_journal_web_portlet_JournalPortlet_fieldsContent");if(e){Liferay.editorCustomFields.webContentObserver&&Liferay.editorCustomFields.webContentObserver.disconnect?.();const t=r(()=>{s("content"),Liferay.fire("EditorCustomFields_WebContentFields_OnLoad")},500);Liferay.editorCustomFields.webContentObserver=new MutationObserver(t);const o={attributes:!1,childList:!0,subtree:!0};Liferay.editorCustomFields.webContentObserver.observe(e,o)}})(),setTimeout(a,500)};Liferay&&!Liferay?.editorCustomFields&&(Liferay.editorCustomFields={debounce:r,getFieldByLabel:l,setReactDomInputValue:u,getContentImageInput:n,getPreviewImage:i},Liferay.on("allPortletsReady",()=>{e()}),Liferay.on("endNavigate",()=>{e()}))};var c=t.c;export{c as default};

package/build/static/messagingEvents/fireFragmentConfigOnLoad.d.ts

@@ -0,0 +1 @@
+export declare const fireFragmentConfigOnLoad: () => any;

package/build/static/messagingEvents/fireImageOnChange.d.ts

@@ -0,0 +1 @@
+export declare const fireImageOnChange: () => void;

package/build/static/messagingEvents/fireWebContentFieldsOnLoad.d.ts

@@ -0,0 +1 @@
+export declare const fireWebContentFieldsOnLoad: () => any;

package/{src/observers/index.ts → build/static/observers/index.d.ts}

@@ -1,4 +1,3 @@
 import { observeFragmentConfig } from "./observeFragmentConfig";
 import { observeWebContentFields } from "./observeWebContentFields";
-
-export {observeFragmentConfig, observeWebContentFields};
+export { observeFragmentConfig, observeWebContentFields };

package/build/static/observers/observeFragmentConfig.d.ts

@@ -0,0 +1 @@
+export declare const observeFragmentConfig: () => void;

package/build/static/observers/observePreviewImage.d.ts

@@ -0,0 +1,2 @@
+import { ContentType } from "../types/ContentType.type";
+export declare const observePreviewImage: (contentType: ContentType) => void;

package/build/static/observers/observeWebContentFields.d.ts

@@ -0,0 +1 @@
+export declare const observeWebContentFields: () => void;

package/build/static/types/ContentType.type.d.ts

@@ -0,0 +1 @@
+export type ContentType = 'fragment' | 'content';

package/build/static/util/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (callback: any, wait: any) => (...args: any[]) => void;

package/build/static/util/getContentImageInput.d.ts

@@ -0,0 +1 @@
+export declare const getContentImageInput: () => HTMLInputElement;

package/build/static/util/getFieldByLabel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Uses xpath to get a LR field by label
+ * since there is no attribute that corresponds with field name or key
+ *
+ */
+type GetFieldByLabel = (label: string) => HTMLInputElement;
+export declare const getFieldByLabel: GetFieldByLabel;
+export {};

package/build/static/util/getPreviewImage.d.ts

@@ -0,0 +1 @@
+export declare const getPreviewImage: () => HTMLImageElement;

package/{src/util/index.ts → build/static/util/index.d.ts}

@@ -3,5 +3,4 @@ import { getContentImageInput } from "./getContentImageInput";
 import { getFieldByLabel } from "./getFieldByLabel";
 import { getPreviewImage } from "./getPreviewImage";
 import { setReactDomInputValue } from "./setReactDomInputValue";
-
-export { debounce, getContentImageInput, getFieldByLabel, getPreviewImage, setReactDomInputValue };
+export { debounce, getContentImageInput, getFieldByLabel, getPreviewImage, setReactDomInputValue };

package/build/static/util/setReactDomInputValue.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The fragment editor config inputs use react DOM
+ * So setting input element value doesn't work
+ *
+ * @param {element} inputEl
+ * @param {string} value
+ */
+export declare const setReactDomInputValue: (inputEl: HTMLInputElement, value: string) => void;

package/package.json

@@ -15,12 +15,15 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1"
   },
-  "module": "./src/index.js",
-  "types": "./src/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "module": "./build/static/index.js",
+  "types": "./build/static/index.d.ts",
   "scripts": {
     "build": "webpack",
     "start": "webpack serve",
     "watch": "tsc --watch"
   },
-  "version": "7.4.2"
+  "version": "7.4.5"
 }

package/eslint.config.mjs

@@ -1,11 +0,0 @@
-// @ts-check
-
-import eslint from "@eslint/js";
-import { defineConfig, globalIgnores } from "eslint/config";
-import tseslint from "typescript-eslint";
-
-export default defineConfig(
-  eslint.configs.recommended,
-  tseslint.configs.recommended,
-  [globalIgnores(["**/*.js", "**/*.cjs", "**/*.mjs"])],
-);

package/src/index.ts

@@ -1,34 +0,0 @@
-declare const Liferay;
-
-import { observeFragmentConfig, observeWebContentFields } from "./observers";
-import {
-  debounce,
-  getContentImageInput,
-  getFieldByLabel,
-  getPreviewImage,
-  setReactDomInputValue,
-} from "./util";
-
-const initFramework:()=>void = () => {
-  const startObservers = () => {
-    observeWebContentFields();
-    // Fragment element we are watching is loaded client-side, and AFAIK there is no event fired when client-side is loaded.
-    setTimeout(observeFragmentConfig, 500);
-  };
-  if (Liferay && !Liferay?.editorCustomFields) {
-    Liferay.editorCustomFields = {
-      debounce,
-      getFieldByLabel,
-      setReactDomInputValue,
-      getContentImageInput,
-      getPreviewImage,
-    };
-    Liferay.on("allPortletsReady", () => {
-      startObservers();
-    });
-    Liferay.on("endNavigate", () => {
-      startObservers();
-    });
-  }
-}
-export default initFramework;

package/src/messagingEvents/fireFragmentConfigOnLoad.ts

@@ -1,2 +0,0 @@
-declare const Liferay;
-export const fireFragmentConfigOnLoad = () => Liferay.fire('EditorCustomFields_FragmenConfig_OnLoad');

package/src/messagingEvents/fireImageOnChange.ts

@@ -1,4 +0,0 @@
-declare const Liferay;
-export const fireImageOnChange = () => {
-    Liferay.fire('EditorCustomFields_Image_OnChange');
-};

package/src/messagingEvents/fireWebContentFieldsOnLoad.ts

@@ -1,2 +0,0 @@
-declare const Liferay;
-export const fireWebContentFieldsOnLoad = () => Liferay.fire('EditorCustomFields_WebContentFields_OnLoad');

package/src/observers/observeFragmentConfig.ts

@@ -1,27 +0,0 @@
-declare const Liferay;
-
-import { fireFragmentConfigOnLoad } from "../messagingEvents/fireFragmentConfigOnLoad";
-import { debounce } from "../util";
-
-import { observePreviewImage } from "./observePreviewImage";
-
-export const observeFragmentConfig = () => {
-    const sidePanelQuery = ".page-editor__item-configuration-sidebar";
-    const sidePanelEl: HTMLDivElement = document.querySelector(
-        sidePanelQuery
-    );
-
-    if (sidePanelEl) {
-        if (Liferay.editorCustomFields.fragmentObserver) {
-            Liferay.editorCustomFields.fragmentObserver.disconnect?.();
-        }
-        const debouncedAddButton = debounce(() => {
-            observePreviewImage('fragment');
-            fireFragmentConfigOnLoad();
-        }, 500);
-        Liferay.editorCustomFields.fragmentObserver = new MutationObserver(debouncedAddButton);
-        const observer = Liferay.editorCustomFields.fragmentObserver;
-        const config = { attributes: false, childList: true, subtree: false };
-        observer.observe(sidePanelEl, config);
-    }
-};

package/src/observers/observePreviewImage.ts

@@ -1,22 +0,0 @@
-declare const Liferay;
-
-import { fireImageOnChange } from "../messagingEvents/fireImageOnChange";
-import { ContentType } from "../types/ContentType.type";
-import { debounce, getContentImageInput, getPreviewImage } from "../util";
-
-export const observePreviewImage = (contentType: ContentType) => {
-    if(Liferay.editorCustomFields.imageObserver){
-        Liferay.editorCustomFields.imageObserver.disconnect?.();
-    }
-    // For when image changes
-    const elToObserve = contentType === 'fragment' ? getPreviewImage() : getContentImageInput();
-    if (contentType && elToObserve && !Liferay.editorCustomFields.imageObserver) {
-        const debouncedAddContentBlurhash = debounce(() => fireImageOnChange(), 500);
-        Liferay.editorCustomFields.imageObserver = new MutationObserver(debouncedAddContentBlurhash);
-        const observer = Liferay.editorCustomFields.imageObserver
-        const config = { attributes: true, childList: false, subtree: false };
-        observer.observe(elToObserve, config);
-    }
-    // For when image is already present on load
-    fireImageOnChange();
-}

package/src/observers/observeWebContentFields.ts

@@ -1,24 +0,0 @@
-declare const Liferay;
-
-import { fireWebContentFieldsOnLoad } from "../messagingEvents/fireWebContentFieldsOnLoad";
-import { debounce } from "../util";
-import { observePreviewImage } from "./observePreviewImage";
-
-export const observeWebContentFields = () => {
-    const fieldsContainerEl: HTMLDivElement = document.querySelector(
-        "#_com_liferay_journal_web_portlet_JournalPortlet_fieldsContent",
-    );
-    if (fieldsContainerEl) {
-        if (Liferay.editorCustomFields.webContentObserver) {
-            Liferay.editorCustomFields.webContentObserver.disconnect?.();
-        }
-        const debouncedFieldEvent = debounce(() => {
-            observePreviewImage('content');
-            fireWebContentFieldsOnLoad();
-        }, 500);
-        Liferay.editorCustomFields.webContentObserver = new MutationObserver(debouncedFieldEvent);
-        const observer = Liferay.editorCustomFields.webContentObserver
-        const config = { attributes: false, childList: true, subtree: true };
-        observer.observe(fieldsContainerEl, config);
-    }
-};

package/src/types/ContentType.type.ts

@@ -1 +0,0 @@
-export type ContentType = 'fragment' | 'content';

package/src/util/debounce.ts

@@ -1,9 +0,0 @@
-export const debounce = (callback, wait) => {
-    let timeoutId = null;
-    return (...args) => {
-        window.clearTimeout(timeoutId);
-        timeoutId = window.setTimeout(() => {
-            callback(...args);
-        }, wait);
-    };
-};

package/src/util/getContentImageInput.ts

@@ -1,5 +0,0 @@
-export const getContentImageInput = () => {
-    const contentImageInputQuery = 'input[name^="_com_liferay_journal_web_portlet_JournalPortlet_ddm$$Image"]';
-    const contentImageInput: HTMLInputElement = document.querySelector(contentImageInputQuery);
-    return contentImageInput;
-}

package/src/util/getFieldByLabel.ts

@@ -1,25 +0,0 @@
-  /**
-   * Uses xpath to get a LR field by label
-   * since there is no attribute that corresponds with field name or key
-   *
-   */
-  type GetFieldByLabel = (label:string) => HTMLInputElement;
-  export const getFieldByLabel:GetFieldByLabel = (label) => {
-    const parentEl = document.querySelector(
-      "#portlet_com_liferay_journal_web_portlet_JournalPortlet, .page-editor__item-configuration-sidebar",
-    );
-    const match = document.evaluate(
-      `//label[text()='${label}']`,
-      parentEl,
-      null,
-      XPathResult.FIRST_ORDERED_NODE_TYPE,
-      null,
-    ).singleNodeValue as HTMLElement;
-
-    const inputEl =
-      match?.closest(".form-group, .field-wrapper")?.querySelector("input") ||
-      match?.nextElementSibling?.querySelector("input") ||
-      match?.nextSibling;
-
-    return inputEl as HTMLInputElement;
-  };

package/src/util/getPreviewImage.ts

@@ -1,10 +0,0 @@
-export const getPreviewImage = () => {
-    const parentEl:HTMLDivElement = document?.querySelector(
-        "#portlet_com_liferay_journal_web_portlet_JournalPortlet, .page-editor__topper.active",
-    );
-    const previewImage:HTMLImageElement = parentEl?.querySelector(
-        ".page-editor__topper.active img.page-editor__editable, .image-picker-preview>img",
-    ) as HTMLImageElement;
-    
-    return previewImage;
-}

package/src/util/setReactDomInputValue.ts

@@ -1,22 +0,0 @@
-/**
- * The fragment editor config inputs use react DOM
- * So setting input element value doesn't work
- *
- * @param {element} inputEl
- * @param {string} value
- */
-export const setReactDomInputValue = (inputEl:HTMLInputElement, value:string) => {
-  inputEl.focus();
-  const nativeValueSetter = Object.getOwnPropertyDescriptor(
-    window.HTMLInputElement.prototype,
-    "value",
-  ).set;
-  nativeValueSetter.call(inputEl, value);
-
-  inputEl.dispatchEvent(new Event("input", { bubbles: true }));
-  inputEl.dispatchEvent(new Event("change", { bubbles: true }));
-
-  document.body.focus();
-
-  inputEl.dispatchEvent(new Event("blur", { bubbles: true }));
-};

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"declaration": true,
-		"esModuleInterop": true,
-		"lib": [
-			"DOM",
-			"ES2020"
-		],
-		"module": "ES2020",
-		"moduleResolution": "node",
-		"outDir": "./build/static",
-		"resolveJsonModule": true,
-		"sourceMap": false,
-		"target": "ES2020",
-		"types": [
-		]
-	},
-	"include": [
-		"./src/**/*"
-	]
-}

package/webpack.config.js

@@ -1,62 +0,0 @@
-/**
- * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
- * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- */
-
-const path = require("path");
-const webpack = require("webpack");
-const ESLintPlugin = require("eslint-webpack-plugin");
-
-const DEVELOPMENT = process.env.NODE_ENV === "development";
-const WEBPACK_SERVE = !!process.env.WEBPACK_SERVE;
-
-module.exports = {
-  devServer: {
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-    port: 3000,
-  },
-  devtool: DEVELOPMENT ? "source-map" : false,
-  entry: {
-    index: "./src/index.ts",
-  },
-  experiments: {
-    outputModule: true,
-  },
-  mode: DEVELOPMENT ? "development" : "production",
-  module: {
-    rules: [
-      {
-        test: /\.ts$/i,
-        use: ["ts-loader"],
-      },
-    ],
-  },
-  optimization: {
-    minimize: !DEVELOPMENT,
-  },
-  output: {
-    clean: true,
-    environment: {
-      dynamicImport: true,
-    },
-    filename: WEBPACK_SERVE ? "[name].js" : "[name].js",
-    library: {
-      type: "module",
-    },
-    path: path.resolve("build", "static"),
-  },
-  plugins: [
-    new ESLintPlugin({
-      files: "src/**/*.ts",
-      overrideConfigFile: `eslint.config.mjs`,
-    }),
-    new webpack.optimize.LimitChunkCountPlugin({
-      maxChunks: 1,
-    }),
-  ],
-  resolve: {
-    extensions: [".js", ".ts"],
-  },
-};