@liferay-editor-custom-fields/framework 7.4.3 → 7.4.6

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

@@ -1,2 +1,3 @@
+export { debounce, getContentImageInput, getFieldByLabel, getPreviewImage, setReactDomInputValue, } from "./util";
 declare const initFramework: () => void;
 export default initFramework;

package/build/static/index.js

@@ -1 +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};
+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,{Cu:()=>r,cp:()=>d,s9:()=>n,qC:()=>l,Un:()=>i,S6:()=>u});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?.editorCustomFieldsInitialized&&(Liferay.editorCustomFieldsInitialized=!0,Liferay.on("allPortletsReady",()=>{e()}),Liferay.on("endNavigate",()=>{e()}))};var c=t.Cu,m=t.cp,b=t.s9,f=t.qC,_=t.Un,p=t.S6;export{c as debounce,m as default,b as getContentImageInput,f as getFieldByLabel,_ as getPreviewImage,p as setReactDomInputValue};

package/package.json

@@ -25,5 +25,5 @@
     "start": "webpack serve",
     "watch": "tsc --watch"
   },
-  "version": "7.4.3"
+  "version": "7.4.6"
 }