first commit

media/system/js/editors/editor-api.js

@@ -0,0 +1,175 @@
+import JoomlaEditorDecorator from 'editor-decorator';
+export { default as JoomlaEditorDecorator } from 'editor-decorator';
+
+/**
+ * @copyright  (C) 2023 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+/**
+ * Editor API.
+ */
+const JoomlaEditor = {
+  /**
+   * Internal! The property should not be accessed directly.
+   *
+   * List of registered editors.
+   */
+  instances: {},
+  /**
+   * Internal! The property should not be accessed directly.
+   *
+   * An active editor instance.
+   */
+  active: null,
+  /**
+   * Register editor instance.
+   *
+   * @param {JoomlaEditorDecorator} editor The editor instance.
+   *
+   * @returns {JoomlaEditor}
+   */
+  register(editor) {
+    if (!(editor instanceof JoomlaEditorDecorator)) {
+      throw new Error('Unexpected editor instance');
+    }
+    this.instances[editor.getId()] = editor;
+
+    // For backward compatibility
+    Joomla.editors.instances[editor.getId()] = editor;
+    return this;
+  },
+  /**
+   * Unregister editor instance.
+   *
+   * @param {JoomlaEditorDecorator|string} editor The editor instance or ID.
+   *
+   * @returns {JoomlaEditor}
+   */
+  unregister(editor) {
+    let id;
+    if (editor instanceof JoomlaEditorDecorator) {
+      id = editor.getId();
+    } else if (typeof editor === 'string') {
+      id = editor;
+    } else {
+      throw new Error('Unexpected editor instance or identifier');
+    }
+    if (this.active && this.active === this.instances[id]) {
+      this.active = null;
+    }
+    delete this.instances[id];
+
+    // For backward compatibility
+    delete Joomla.editors.instances[id];
+    return this;
+  },
+  /**
+   * Return editor instance by ID.
+   *
+   * @param {String} id
+   *
+   * @returns {JoomlaEditorDecorator|boolean}
+   */
+  get(id) {
+    return this.instances[id] || false;
+  },
+  /**
+   * Set currently active editor, the editor that in focus.
+   *
+   * @param {JoomlaEditorDecorator|string} editor The editor instance or ID.
+   *
+   * @returns {JoomlaEditor}
+   */
+  setActive(editor) {
+    if (editor instanceof JoomlaEditorDecorator) {
+      this.active = editor;
+    } else if (this.instances[editor]) {
+      this.active = this.instances[editor];
+    } else {
+      throw new Error('The editor instance not found or it is incorrect');
+    }
+    return this;
+  },
+  /**
+   * Return active editor, if there exist eny.
+   *
+   * @returns {JoomlaEditorDecorator}
+   */
+  getActive() {
+    return this.active;
+  }
+};
+
+/**
+ * Editor Buttons API.
+ */
+const JoomlaEditorButton = {
+  /**
+   * Internal! The property should not be accessed directly.
+   *
+   * A collection of button actions.
+   */
+  actions: {},
+  /**
+   * Register new button action, or override existing.
+   *
+   * @param {String} name Action name
+   * @param {Function} handler Callback that will be executed.
+   *
+   * @returns {JoomlaEditorButton}
+   */
+  registerAction(name, handler) {
+    if (!name || !handler) {
+      throw new Error('Missed values for Action registration');
+    }
+    if (!(handler instanceof Function)) {
+      throw new Error(`Unexpected handler for action "${name}", expecting Function`);
+    }
+    this.actions[name] = handler;
+    return this;
+  },
+  /**
+   * Get registered handler by action name.
+   *
+   * @param {String} name Action name
+   *
+   * @returns {Function|false}
+   */
+  getActionHandler(name) {
+    return this.actions[name] || false;
+  },
+  /**
+   * Execute action.
+   *
+   * @param {String} name Action name
+   * @param {Object} options An options object
+   * @param {HTMLElement} button An optional element, that triggers the action
+   *
+   * @returns {*}
+   */
+  runAction(name, options, button) {
+    const handler = this.getActionHandler(name);
+    let editor = JoomlaEditor.getActive();
+    if (!handler) {
+      throw new Error(`Handler for "${name}" action not found`);
+    }
+    // Try to find a legacy editor
+    // @TODO: Remove this section in Joomla 6
+    if (!editor && button) {
+      const parent = button.closest('fieldset, div:not(.editor-xtd-buttons)');
+      const textarea = parent ? parent.querySelector('textarea[id]') : false;
+      editor = textarea && Joomla.editors.instances[textarea.id] ? Joomla.editors.instances[textarea.id] : false;
+      if (editor) {
+        // eslint-disable-next-line no-console
+        console.warn('Legacy editors is deprecated. Set active editor instance with JoomlaEditor.setActive().');
+      }
+    }
+    if (!editor) {
+      throw new Error('An active editor are not available');
+    }
+    return handler(editor, options);
+  }
+};
+
+export { JoomlaEditor, JoomlaEditorButton };

media/system/js/editors/editor-api.min.js

@@ -0,0 +1 @@
+import JoomlaEditorDecorator from"editor-decorator";export{default as JoomlaEditorDecorator}from"editor-decorator";const JoomlaEditor={instances:{},active:null,register(t){if(!(t instanceof JoomlaEditorDecorator))throw new Error("Unexpected editor instance");return this.instances[t.getId()]=t,Joomla.editors.instances[t.getId()]=t,this},unregister(t){let e;if(t instanceof JoomlaEditorDecorator)e=t.getId();else{if("string"!=typeof t)throw new Error("Unexpected editor instance or identifier");e=t}return this.active&&this.active===this.instances[e]&&(this.active=null),delete this.instances[e],delete Joomla.editors.instances[e],this},get(t){return this.instances[t]||!1},setActive(t){if(t instanceof JoomlaEditorDecorator)this.active=t;else{if(!this.instances[t])throw new Error("The editor instance not found or it is incorrect");this.active=this.instances[t]}return this},getActive(){return this.active}},JoomlaEditorButton={actions:{},registerAction(t,e){if(!t||!e)throw new Error("Missed values for Action registration");if(!(e instanceof Function))throw new Error(`Unexpected handler for action "${t}", expecting Function`);return this.actions[t]=e,this},getActionHandler(t){return this.actions[t]||!1},runAction(t,e,o){const i=this.getActionHandler(t);let r=JoomlaEditor.getActive();if(!i)throw new Error(`Handler for "${t}" action not found`);if(!r&&o){const t=o.closest("fieldset, div:not(.editor-xtd-buttons)"),e=!!t&&t.querySelector("textarea[id]");r=!(!e||!Joomla.editors.instances[e.id])&&Joomla.editors.instances[e.id],r&&console.warn("Legacy editors is deprecated. Set active editor instance with JoomlaEditor.setActive().")}if(!r)throw new Error("An active editor are not available");return i(r,e)}};export{JoomlaEditor,JoomlaEditorButton};

media/system/js/editors/editor-decorator.js

@@ -0,0 +1,137 @@
+/**
+ * @copyright  (C) 2023 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+/**
+ * A decorator for Editor instance.
+ */
+class JoomlaEditorDecorator {
+  /**
+   * Internal! The property should not be accessed directly.
+   * The editor instance.
+   * @type {Object}
+   */
+  // instance = null;
+
+  /**
+   * Internal! The property should not be accessed directly.
+   * The editor type/name, eg: tinymce, codemirror, none etc.
+   * @type {string}
+   */
+  // type = '';
+
+  /**
+   * Internal! The property should not be accessed directly.
+   * HTML ID of the editor.
+   * @type {string}
+   */
+  // id = '';
+
+  /**
+   * Class constructor.
+   *
+   * @param {Object} instance The editor instance
+   * @param {string} type The editor type/name
+   * @param {string} id The editor ID
+   */
+  constructor(instance, type, id) {
+    if (!instance || !type || !id) {
+      throw new Error('Missed values for class constructor');
+    }
+    this.instance = instance;
+    this.type = type;
+    this.id = id;
+  }
+
+  /**
+   * Returns the editor instance object.
+   *
+   * @returns {Object}
+   */
+  getRawInstance() {
+    return this.instance;
+  }
+
+  /**
+   * Returns the editor type/name.
+   *
+   * @returns {string}
+   */
+  getType() {
+    return this.type;
+  }
+
+  /**
+   * Returns the editor id.
+   *
+   * @returns {string}
+   */
+  getId() {
+    return this.id;
+  }
+
+  /**
+   * Return the complete data from the editor.
+   * Should be implemented by editor provider.
+   *
+   * @returns {string}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getValue() {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * Replace the complete data of the editor
+   * Should be implemented by editor provider.
+   *
+   * @param {string} value Value to set.
+   *
+   * @returns {JoomlaEditorDecorator}
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  setValue(value) {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * Return the selected text from the editor.
+   * Should be implemented by editor provider.
+   *
+   * @returns {string}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getSelection() {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * Replace the selected text. If nothing selected, will insert the data at the cursor.
+   * Should be implemented by editor provider.
+   *
+   * @param {string} value
+   *
+   * @returns {JoomlaEditorDecorator}
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  replaceSelection(value) {
+    throw new Error('Not implemented');
+  }
+
+  /**
+   * Toggles the editor disabled mode. When the editor is active then everything should be usable.
+   * When inactive the editor should be unusable AND disabled for form validation.
+   * Should be implemented by editor provider.
+   *
+   * @param {boolean} enable True to enable, false or undefined to disable.
+   *
+   * @returns {JoomlaEditorDecorator}
+   */
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  disable(enable) {
+    throw new Error('Not implemented');
+  }
+}
+
+export { JoomlaEditorDecorator as default };

media/system/js/editors/editor-decorator.min.js

@@ -0,0 +1 @@
+class JoomlaEditorDecorator{constructor(e,t,r){if(!e||!t||!r)throw new Error("Missed values for class constructor");this.instance=e,this.type=t,this.id=r}getRawInstance(){return this.instance}getType(){return this.type}getId(){return this.id}getValue(){throw new Error("Not implemented")}setValue(e){throw new Error("Not implemented")}getSelection(){throw new Error("Not implemented")}replaceSelection(e){throw new Error("Not implemented")}disable(e){throw new Error("Not implemented")}}export{JoomlaEditorDecorator as default};

media/system/js/editors/editors.js

@@ -0,0 +1,102 @@
+import { JoomlaEditorDecorator, JoomlaEditorButton } from 'editor-api';
+import JoomlaDialog from 'joomla.dialog';
+
+/**
+ * @copyright  (C) 2023 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+if (!window.Joomla) {
+  throw new Error('JoomlaEditors API require Joomla to be loaded.');
+}
+
+// === The code for keep backward compatibility ===
+// Joomla.editors is deprecated use Joomla.Editor instead.
+// @TODO: Remove this section in Joomla 6.
+
+// Only define editors if not defined
+Joomla.editors = Joomla.editors || {};
+
+// An object to hold each editor instance on page, only define if not defined.
+Joomla.editors.instances = new Proxy({}, {
+  set(target, p, editor) {
+    // eslint-disable-next-line no-use-before-define
+    if (!(editor instanceof JoomlaEditorDecorator)) {
+      // Add missed method in Legacy editor
+      editor.getId = () => p;
+      // eslint-disable-next-line no-console
+      console.warn('Legacy editors is deprecated. Register the editor instance with JoomlaEditor.register().', p, editor);
+    }
+    target[p] = editor;
+    return true;
+  },
+  get(target, p) {
+    // eslint-disable-next-line no-console
+    console.warn('Direct access to Joomla.editors.instances is deprecated. Use JoomlaEditor.getActive() or JoomlaEditor.get(id) to retrieve the editor instance.');
+    return target[p];
+  }
+});
+// === End of code for keep backward compatibility ===
+
+// Register couple default actions for Editor Buttons
+// Insert static content on cursor
+JoomlaEditorButton.registerAction('insert', (editor, options) => {
+  const content = options.content || '';
+  editor.replaceSelection(content);
+});
+// Display modal dialog
+JoomlaEditorButton.registerAction('modal', (editor, options) => {
+  if (options.src && options.src[0] !== '#' && options.src[0] !== '.') {
+    // Replace editor parameter to actual editor ID
+    const url = options.src.indexOf('http') === 0 ? new URL(options.src) : new URL(options.src, window.location.origin);
+    url.searchParams.set('editor', editor.getId());
+    if (url.searchParams.has('e_name')) {
+      url.searchParams.set('e_name', editor.getId());
+    }
+    options.src = url.toString();
+  }
+
+  // Create a dialog popup
+  const dialog = new JoomlaDialog(options);
+
+  // Listener for postMessage
+  const msgListener = event => {
+    // Avoid cross origins
+    if (event.origin !== window.location.origin) return;
+    // Check message type
+    if (event.data.messageType === 'joomla:content-select') {
+      editor.replaceSelection(event.data.html || event.data.text);
+      dialog.close();
+    } else if (event.data.messageType === 'joomla:cancel') {
+      dialog.close();
+    }
+  };
+  // Use a JoomlaExpectingPostMessage flag to be able to distinct legacy methods
+  // @TODO: This should be removed after full transition to postMessage()
+  window.JoomlaExpectingPostMessage = true;
+  window.addEventListener('message', msgListener);
+
+  // Clean up on close
+  dialog.addEventListener('joomla-dialog:close', () => {
+    delete window.JoomlaExpectingPostMessage;
+    window.removeEventListener('message', msgListener);
+    Joomla.Modal.setCurrent(null);
+    dialog.destroy();
+  });
+  Joomla.Modal.setCurrent(dialog);
+  // Show the popup
+  dialog.show();
+});
+
+// Listen to click on Editor button, and run action.
+const btnDelegateSelector = '[data-joomla-editor-button-action]';
+const btnActionDataAttr = 'joomlaEditorButtonAction';
+const btnConfigDataAttr = 'joomlaEditorButtonOptions';
+document.addEventListener('click', event => {
+  const btn = event.target.closest(btnDelegateSelector);
+  if (!btn) return;
+  const action = btn.dataset[btnActionDataAttr];
+  const options = btn.dataset[btnConfigDataAttr] ? JSON.parse(btn.dataset[btnConfigDataAttr]) : {};
+  if (action) {
+    JoomlaEditorButton.runAction(action, options, btn);
+  }
+});

media/system/js/editors/editors.min.js

@@ -0,0 +1 @@
+import{JoomlaEditorDecorator,JoomlaEditorButton}from"editor-api";import JoomlaDialog from"joomla.dialog";if(!window.Joomla)throw new Error("JoomlaEditors API require Joomla to be loaded.");Joomla.editors=Joomla.editors||{},Joomla.editors.instances=new Proxy({},{set:(o,t,e)=>(e instanceof JoomlaEditorDecorator||(e.getId=()=>t,console.warn("Legacy editors is deprecated. Register the editor instance with JoomlaEditor.register().",t,e)),o[t]=e,!0),get:(o,t)=>(console.warn("Direct access to Joomla.editors.instances is deprecated. Use JoomlaEditor.getActive() or JoomlaEditor.get(id) to retrieve the editor instance."),o[t])}),JoomlaEditorButton.registerAction("insert",((o,t)=>{const e=t.content||"";o.replaceSelection(e)})),JoomlaEditorButton.registerAction("modal",((o,t)=>{if(t.src&&"#"!==t.src[0]&&"."!==t.src[0]){const e=0===t.src.indexOf("http")?new URL(t.src):new URL(t.src,window.location.origin);e.searchParams.set("editor",o.getId()),e.searchParams.has("e_name")&&e.searchParams.set("e_name",o.getId()),t.src=e.toString()}const e=new JoomlaDialog(t),a=t=>{t.origin===window.location.origin&&("joomla:content-select"===t.data.messageType?(o.replaceSelection(t.data.html||t.data.text),e.close()):"joomla:cancel"===t.data.messageType&&e.close())};window.JoomlaExpectingPostMessage=!0,window.addEventListener("message",a),e.addEventListener("joomla-dialog:close",(()=>{delete window.JoomlaExpectingPostMessage,window.removeEventListener("message",a),Joomla.Modal.setCurrent(null),e.destroy()})),Joomla.Modal.setCurrent(e),e.show()}));const btnDelegateSelector="[data-joomla-editor-button-action]",btnActionDataAttr="joomlaEditorButtonAction",btnConfigDataAttr="joomlaEditorButtonOptions";document.addEventListener("click",(o=>{const t=o.target.closest(btnDelegateSelector);if(!t)return;const e=t.dataset[btnActionDataAttr],a=t.dataset[btnConfigDataAttr]?JSON.parse(t.dataset[btnConfigDataAttr]):{};e&&JoomlaEditorButton.runAction(e,a,t)}));