@elementor/editor-canvas 4.0.0 → 4.0.1

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
+import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropValue, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
 import * as _elementor_utils from '@elementor/utils';
@@ -204,6 +205,8 @@ type ReplacementSettings = {
     id: string;
     element: HTMLElement;
     refreshView: () => void;
+    reactRoot: Root;
+    reactContainer: HTMLElement;
 };
 
 type CreateTemplatedElementTypeOptions = {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/editor-elements';
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
+import { Root } from 'react-dom/client';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropValue, PropType, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
 import * as _elementor_utils from '@elementor/utils';
@@ -204,6 +205,8 @@ type ReplacementSettings = {
     id: string;
     element: HTMLElement;
     refreshView: () => void;
+    reactRoot: Root;
+    reactContainer: HTMLElement;
 };
 
 type CreateTemplatedElementTypeOptions = {

package/dist/index.js

@@ -944,22 +944,30 @@ function useStyleItems() {
   const [styleItems, setStyleItems] = (0, import_react10.useState)({});
   const styleItemsCacheRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const providerAndSubscribers = (0, import_react10.useMemo)(() => {
-    return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
-      const providerKey = provider.getKey();
+    const createEmptyCache = () => {
+      return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
+    };
+    const getCache = (provider) => {
+      const providerKey = safeGetKey(provider);
+      if (!providerKey) {
+        return createEmptyCache();
+      }
       if (!styleItemsCacheRef.current.has(providerKey)) {
-        styleItemsCacheRef.current.set(providerKey, { orderedIds: [], itemsById: /* @__PURE__ */ new Map() });
+        styleItemsCacheRef.current.set(providerKey, createEmptyCache());
       }
-      const cache = styleItemsCacheRef.current.get(providerKey);
-      return {
+      return styleItemsCacheRef.current.get(providerKey);
+    };
+    return import_editor_styles_repository2.stylesRepository.getProviders().map(
+      (provider) => ({
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems,
-          cache
+          getCache: () => getCache(provider)
         })
-      };
-    });
+      })
+    );
   }, [renderStyles]);
   (0, import_react10.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
@@ -999,15 +1007,23 @@ function stateSorter({ state: stateA }, { state: stateB }) {
 function createBreakpointSorter(breakpointsOrder) {
   return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
 }
-function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cache }) {
+function safeGetKey(provider) {
+  try {
+    return provider.getKey();
+  } catch {
+    return null;
+  }
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getCache }) {
   return abortPreviousRuns(
     (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const cache = getCache();
       const hasDiffInfo = current !== void 0 && previous !== void 0;
       const hasCache = cache.orderedIds.length > 0;
       if (hasDiffInfo && hasCache) {
-        return updateItems(previous, current, signal);
+        return updateItems(cache, previous, current, signal);
       }
-      return createItems(signal);
+      return createItems(cache, signal);
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -1015,7 +1031,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
       }));
     }).execute()
   );
-  async function updateItems(previous, current, signal) {
+  async function updateItems(cache, previous, current, signal) {
     const changedIds = getChangedStyleIds(previous, current);
     cache.orderedIds = provider.actions.all().map((style) => style.id).reverse();
     if (changedIds.length > 0) {
@@ -1030,7 +1046,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     }
     return getOrderedItems(cache);
   }
-  async function createItems(signal) {
+  async function createItems(cache, signal) {
     const allStyles = provider.actions.all();
     const styles = [...allStyles].reverse().map((style) => {
       return {
@@ -1425,14 +1441,74 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/video-src-transformer.ts
+// src/transformers/shared/svg-src-transformer.ts
+var import_dompurify = __toESM(require("dompurify"));
 var import_wp_media2 = require("@elementor/wp-media");
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = import_dompurify.default.sanitize(svgText, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  });
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(sanitized, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  svgElement.setAttribute("fill", "currentColor");
+  const existingStyle = svgElement.getAttribute("style") ?? "";
+  const trimmed = existingStyle.trim();
+  const merged = trimmed ? `${trimmed.replace(/;$/, "")}; ${SVG_INLINE_STYLES}` : SVG_INLINE_STYLES;
+  svgElement.setAttribute("style", merged);
+  return svgElement.outerHTML;
+}
+async function fetchSvgContent(url, signal) {
+  try {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const contentType = response.headers.get("content-type") ?? "";
+    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
+    if (!isSvg) {
+      return null;
+    }
+    return await response.text();
+  } catch {
+    return null;
+  }
+}
+function resolveSvgSrcId(id) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
+    url = attachment?.url ?? null;
+  }
+  const resolvedUrl = typeof url === "string" ? url : null;
+  if (!resolvedUrl) {
+    return { html: null, url: null };
+  }
+  const svgText = await fetchSvgContent(resolvedUrl, signal);
+  const html = svgText ? processSvgContent(svgText) : null;
+  return { html, url: resolvedUrl };
+});
+
+// src/transformers/shared/video-src-transformer.ts
+var import_wp_media3 = require("@elementor/wp-media");
 var videoSrcTransformer = createTransformer(async (value) => {
   const { id, url } = value;
   if (!id) {
     return { id: null, url };
   }
-  const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
+  const attachment = await (0, import_wp_media3.getMediaAttachment)({ id });
   return {
     id,
     url: attachment?.url ?? url
@@ -1441,7 +1517,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -2321,9 +2397,11 @@ function createNestedTemplatedElementView({
   });
 }
 
+// src/legacy/replacements/manager.ts
+var import_client = require("react-dom/client");
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React6 = __toESM(require("react"));
-var import_client = require("react-dom/client");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
@@ -2342,6 +2420,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2349,6 +2429,8 @@ var ReplacementBase = class {
     this.type = settings.type;
     this.id = settings.id;
     this.refreshView = settings.refreshView;
+    this.reactRoot = settings.reactRoot;
+    this.reactContainer = settings.reactContainer;
   }
   static getTypes() {
     return null;
@@ -2399,7 +2481,8 @@ var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-button": "text",
   "e-form-label": "text",
   "e-heading": "title",
-  "e-paragraph": "paragraph"
+  "e-paragraph": "paragraph",
+  "e-form-submit-button": "text"
 };
 var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
@@ -2417,6 +2500,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2426,7 +2514,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = (0, import_react11.useCallback)(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2493,46 +2584,59 @@ var horizontalShifterMiddleware = {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
 var CanvasInlineEditor = ({
   elementClasses,
   initialValue,
   expectedTag,
   rootElement,
+  contentElement,
   id,
   setValue,
-  ...props
+  requestDestroy
 }) => {
+  const [active, setActive] = (0, import_react12.useState)(true);
   const [editor, setEditor] = (0, import_react12.useState)(null);
-  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  const onBlur = () => {
-    removeToolbarAnchor(rootElement.ownerDocument, id);
-    props.onBlur();
-  };
-  useOnClickOutsideIframe(onBlur);
-  return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			`), /* @__PURE__ */ React5.createElement(
+  const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  (0, import_react12.useEffect)(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = (0, import_react12.useCallback)(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  (0, import_react12.useEffect)(() => {
+    const ownerDocument = contentElement.ownerDocument;
+    const handleClickAway = (event) => {
+      if (contentElement.contains(event.target)) {
+        return;
+      }
+      dismiss();
+    };
+    ownerDocument.addEventListener("mousedown", handleClickAway);
+    return () => ownerDocument.removeEventListener("mousedown", handleClickAway);
+  }, [contentElement, dismiss]);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     import_editor_controls2.InlineEditor,
     {
       onEditorCreate: setEditor,
+      mountElement: contentElement,
       editorProps: {
         attributes: {
-          style: "outline: none;overflow-wrap: normal;height:100%"
+          style: "outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;"
         }
       },
       elementClasses,
       value: initialValue,
       setValue,
-      onBlur,
+      onBlur: dismiss,
       autofocus: true,
-      expectedTag,
       onSelectionEnd
     }
   ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
@@ -2561,7 +2665,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })));
+  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Box,
+    {
+      ref: refs.setFloating,
+      role: "presentation",
+      style: {
+        ...floatingStyles,
+        pointerEvents: "none"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+  ));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
@@ -2595,8 +2710,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
 var InlineEditingReplacement = class extends ReplacementBase {
-  inlineEditorRoot = null;
   handlerAttached = false;
+  editing = false;
   getReplacementKey() {
     return "inline-editing";
   }
@@ -2604,7 +2719,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
   }
   isEditingModeActive() {
-    return !!this.inlineEditorRoot;
+    return this.editing;
   }
   shouldRenderReplacement() {
     return this.isInlineEditingEligible() && (0, import_editor_v1_adapters11.getCurrentEditMode)() === "edit";
@@ -2647,8 +2762,8 @@ var InlineEditingReplacement = class extends ReplacementBase {
   resetInlineEditorRoot() {
     this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
-    this.inlineEditorRoot?.unmount?.();
-    this.inlineEditorRoot = null;
+    this.reactRoot.render(null);
+    this.editing = false;
   }
   unmountInlineEditor() {
     this.resetInlineEditorRoot();
@@ -2759,12 +2874,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const contentElement = this.element.children?.[0];
+    if (!contentElement) {
+      return;
+    }
+    const elementClasses = contentElement.classList.toString();
     const propValue = this.getExtractedContentValue();
     const expectedTag = this.getExpectedTag();
-    this.element.innerHTML = "";
-    this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2772,9 +2891,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
           initialValue: propValue,
           expectedTag,
           rootElement: this.element,
+          contentElement,
           id: this.id,
           setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this)
+          requestDestroy: this.unmountInlineEditor.bind(this)
         }
       )
     );
@@ -2803,16 +2923,24 @@ var createViewWithReplacements = (options) => {
   return class extends TemplatedView {
     #replacement = null;
     #config;
+    #reactContainer;
+    #reactRoot;
     constructor(...args) {
       super(...args);
       const settings = this.model.get("settings");
+      this.#reactContainer = this.el.ownerDocument.createElement("div");
+      this.#reactContainer.style.display = "none";
+      this.el.ownerDocument.body.appendChild(this.#reactContainer);
+      this.#reactRoot = (0, import_client.createRoot)(this.#reactContainer);
       this.#config = {
         getSetting: settings.get.bind(settings),
         setSetting: settings.set.bind(settings),
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.refreshView.bind(this)
+        refreshView: this.refreshView.bind(this),
+        reactRoot: this.#reactRoot,
+        reactContainer: this.#reactContainer
       };
     }
     refreshView() {
@@ -2833,6 +2961,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");