@uniformdev/canvas-vue 20.15.0 → 20.16.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { PropType, Component, Ref, ComputedRef, VNode, Slot } from 'vue';
-import { ComponentInstance, ComponentParameter, RootComponentInstance, UpdateCompositionMessage } from '@uniformdev/canvas';
+import { ComponentInstance, ComponentParameter, RootComponentInstance, UpdateCompositionMessage, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer, getParameterAttributes } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 
@@ -1038,6 +1038,39 @@ declare function renderComponent({ component, resolveRenderer, indexInSlot, slot
     emptyPlaceholder?: Slot;
 }): Component<any>;
 
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When set to true, the hook will return the global contextual state no matter where its used.
+     * When set to false, it will return only the state relevant to the current component (determined using `useUniformCurrentComponent`).
+     * @default false
+     **/
+    global?: boolean;
+};
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview").
+     */
+    isContextualEditing: Ref<boolean> | undefined;
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree.
+     */
+    selectedComponentReference: Ref<UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference']>;
+    /**
+     * Returns the current preview mode in Canvas editor ("editor" or "preview").
+     * Returns `undefined` when the app is not rendered inside Canvas editor.
+     * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode
+     */
+    previewMode: Ref<UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined>;
+};
+/**
+ * Returns the state of contextual editing, when the app is open inside Canvas Editor.
+ * This hook can be used to improve the editing experience of your team.
+ * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion.
+ */
+declare const useUniformContextualEditingState: ({ global: isGlobal, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
+
 declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
 /**
@@ -1048,4 +1081,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, renderComponent, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, convertComponentToProps, globalCompositionEnhancerInjectionKey, renderComponent, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { PropType, Component, Ref, ComputedRef, VNode, Slot } from 'vue';
-import { ComponentInstance, ComponentParameter, RootComponentInstance, UpdateCompositionMessage } from '@uniformdev/canvas';
+import { ComponentInstance, ComponentParameter, RootComponentInstance, UpdateCompositionMessage, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer, getParameterAttributes } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 
@@ -1038,6 +1038,39 @@ declare function renderComponent({ component, resolveRenderer, indexInSlot, slot
     emptyPlaceholder?: Slot;
 }): Component<any>;
 
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When set to true, the hook will return the global contextual state no matter where its used.
+     * When set to false, it will return only the state relevant to the current component (determined using `useUniformCurrentComponent`).
+     * @default false
+     **/
+    global?: boolean;
+};
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview").
+     */
+    isContextualEditing: Ref<boolean> | undefined;
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree.
+     */
+    selectedComponentReference: Ref<UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference']>;
+    /**
+     * Returns the current preview mode in Canvas editor ("editor" or "preview").
+     * Returns `undefined` when the app is not rendered inside Canvas editor.
+     * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode
+     */
+    previewMode: Ref<UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined>;
+};
+/**
+ * Returns the state of contextual editing, when the app is open inside Canvas Editor.
+ * This hook can be used to improve the editing experience of your team.
+ * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion.
+ */
+declare const useUniformContextualEditingState: ({ global: isGlobal, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
+
 declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
 /**
@@ -1048,4 +1081,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, renderComponent, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, convertComponentToProps, globalCompositionEnhancerInjectionKey, renderComponent, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -171,7 +171,8 @@ import {
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isAllowedReferrer,
-  isUpdateCompositionInternalMessage
+  isUpdateCompositionInternalMessage,
+  version
 } from "@uniformdev/canvas";
 import { computed as computed2, onMounted, ref, watch } from "vue";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -244,7 +245,8 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "Vue",
       // Make sure to also update the value in canvas-react
-      version: 2
+      version: 2,
+      canvasPackageVersion: version
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -972,6 +974,68 @@ var UniformText = defineComponent9({
   }
 });
 
+// src/composables/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { computed as computed7, ref as ref3, watch as watch2 } from "vue";
+var useUniformContextualEditingState = ({
+  global: isGlobal = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const selectedComponentReference = ref3();
+  const previewMode = ref3(
+    isContextualEditing ? "editor" : void 0
+  );
+  const channel = computed7(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  watch2(
+    [() => isGlobal, () => componentData == null ? void 0 : componentData._id, channel],
+    (_newValue, _oldValue, onCleanup) => {
+      var _a, _b;
+      if (!channel.value) {
+        return;
+      }
+      if (typeof window !== "undefined") {
+        previewMode.value = (_b = (_a = window.__UNIFORM_CONTEXTUAL_EDITING__) == null ? void 0 : _a.state) == null ? void 0 : _b.previewMode;
+      }
+      const unsubscribe = channel.value.on("update-contextual-editing-state-internal", async (message) => {
+        var _a2;
+        if (!isUpdateContextualEditingStateInternalMessage(message)) {
+          return;
+        }
+        previewMode.value = message.state.previewMode;
+        if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a2 = message.state.selectedComponentReference) == null ? void 0 : _a2.parentId)) {
+          selectedComponentReference.value = void 0;
+          return;
+        }
+        selectedComponentReference.value = message.state.selectedComponentReference;
+      });
+      onCleanup(() => {
+        unsubscribe();
+      });
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    isContextualEditing,
+    selectedComponentReference,
+    previewMode
+  };
+};
+
 // src/helpers/getParameterAttributes.ts
 import { getParameterAttributes } from "@uniformdev/canvas";
 export {
@@ -1000,6 +1064,7 @@ export {
   globalCompositionEnhancerInjectionKey,
   renderComponent,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 };

package/dist/index.js

@@ -41,10 +41,11 @@ __export(src_exports, {
   UniformText: () => UniformText,
   convertComponentToProps: () => convertComponentToProps,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
-  getParameterAttributes: () => import_canvas9.getParameterAttributes,
+  getParameterAttributes: () => import_canvas10.getParameterAttributes,
   globalCompositionEnhancerInjectionKey: () => globalCompositionEnhancerInjectionKey,
   renderComponent: () => renderComponent,
   useUniformContextualEditing: () => useUniformContextualEditing,
+  useUniformContextualEditingState: () => useUniformContextualEditingState,
   useUniformCurrentComponent: () => useUniformCurrentComponent,
   useUniformCurrentComposition: () => useUniformCurrentComposition
 });
@@ -279,7 +280,8 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "Vue",
       // Make sure to also update the value in canvas-react
-      version: 2
+      version: 2,
+      canvasPackageVersion: import_canvas3.version
     };
     const script = document.createElement("script");
     script.id = import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -966,7 +968,7 @@ var UniformText = (0, import_vue24.defineComponent)({
       return (0, import_vue24.h)(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
-          ...(0, import_canvas9.getParameterAttributes)({
+          ...(0, import_canvas10.getParameterAttributes)({
             component: componentData,
             id: props.parameterId,
             isMultiline: props.isMultiline
@@ -984,8 +986,67 @@ var UniformText = (0, import_vue24.defineComponent)({
   }
 });
 
-// src/helpers/getParameterAttributes.ts
+// src/composables/useUniformContextualEditingState.ts
 var import_canvas9 = require("@uniformdev/canvas");
+var import_vue25 = require("vue");
+var useUniformContextualEditingState = ({
+  global: isGlobal = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const selectedComponentReference = (0, import_vue25.ref)();
+  const previewMode = (0, import_vue25.ref)(
+    isContextualEditing ? "editor" : void 0
+  );
+  const channel = (0, import_vue25.computed)(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = (0, import_canvas9.createCanvasChannel)({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  (0, import_vue25.watch)(
+    [() => isGlobal, () => componentData == null ? void 0 : componentData._id, channel],
+    (_newValue, _oldValue, onCleanup) => {
+      var _a, _b;
+      if (!channel.value) {
+        return;
+      }
+      if (typeof window !== "undefined") {
+        previewMode.value = (_b = (_a = window.__UNIFORM_CONTEXTUAL_EDITING__) == null ? void 0 : _a.state) == null ? void 0 : _b.previewMode;
+      }
+      const unsubscribe = channel.value.on("update-contextual-editing-state-internal", async (message) => {
+        var _a2;
+        if (!(0, import_canvas9.isUpdateContextualEditingStateInternalMessage)(message)) {
+          return;
+        }
+        previewMode.value = message.state.previewMode;
+        if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a2 = message.state.selectedComponentReference) == null ? void 0 : _a2.parentId)) {
+          selectedComponentReference.value = void 0;
+          return;
+        }
+        selectedComponentReference.value = message.state.selectedComponentReference;
+      });
+      onCleanup(() => {
+        unsubscribe();
+      });
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    isContextualEditing,
+    selectedComponentReference,
+    previewMode
+  };
+};
+
+// src/helpers/getParameterAttributes.ts
+var import_canvas10 = require("@uniformdev/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,
@@ -1013,6 +1074,7 @@ var import_canvas9 = require("@uniformdev/canvas");
   globalCompositionEnhancerInjectionKey,
   renderComponent,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 });

package/dist/index.mjs

@@ -171,7 +171,8 @@ import {
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isAllowedReferrer,
-  isUpdateCompositionInternalMessage
+  isUpdateCompositionInternalMessage,
+  version
 } from "@uniformdev/canvas";
 import { computed as computed2, onMounted, ref, watch } from "vue";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -244,7 +245,8 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "Vue",
       // Make sure to also update the value in canvas-react
-      version: 2
+      version: 2,
+      canvasPackageVersion: version
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -972,6 +974,68 @@ var UniformText = defineComponent9({
   }
 });
 
+// src/composables/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { computed as computed7, ref as ref3, watch as watch2 } from "vue";
+var useUniformContextualEditingState = ({
+  global: isGlobal = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const selectedComponentReference = ref3();
+  const previewMode = ref3(
+    isContextualEditing ? "editor" : void 0
+  );
+  const channel = computed7(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  watch2(
+    [() => isGlobal, () => componentData == null ? void 0 : componentData._id, channel],
+    (_newValue, _oldValue, onCleanup) => {
+      var _a, _b;
+      if (!channel.value) {
+        return;
+      }
+      if (typeof window !== "undefined") {
+        previewMode.value = (_b = (_a = window.__UNIFORM_CONTEXTUAL_EDITING__) == null ? void 0 : _a.state) == null ? void 0 : _b.previewMode;
+      }
+      const unsubscribe = channel.value.on("update-contextual-editing-state-internal", async (message) => {
+        var _a2;
+        if (!isUpdateContextualEditingStateInternalMessage(message)) {
+          return;
+        }
+        previewMode.value = message.state.previewMode;
+        if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a2 = message.state.selectedComponentReference) == null ? void 0 : _a2.parentId)) {
+          selectedComponentReference.value = void 0;
+          return;
+        }
+        selectedComponentReference.value = message.state.selectedComponentReference;
+      });
+      onCleanup(() => {
+        unsubscribe();
+      });
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    isContextualEditing,
+    selectedComponentReference,
+    previewMode
+  };
+};
+
 // src/helpers/getParameterAttributes.ts
 import { getParameterAttributes } from "@uniformdev/canvas";
 export {
@@ -1000,6 +1064,7 @@ export {
   globalCompositionEnhancerInjectionKey,
   renderComponent,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "20.15.0",
+  "version": "20.16.0",
   "description": "Vue SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -30,9 +30,9 @@
     "document:prebuild": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "20.15.0",
-    "@uniformdev/context-vue": "20.15.0",
-    "@uniformdev/richtext": "20.15.0"
+    "@uniformdev/canvas": "20.16.0",
+    "@uniformdev/context-vue": "20.16.0",
+    "@uniformdev/richtext": "20.16.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0"
@@ -48,7 +48,7 @@
     "@vue/server-test-utils": "1.3.0",
     "@vue/test-utils": "2.4.6",
     "@vue/vue3-jest": "^29.2.6",
-    "vue": "3.5.12",
+    "vue": "3.5.13",
     "vue-server-renderer": "2.7.16",
     "vue-template-compiler": "2.7.16"
   },
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab199fc3b7b250609eba1b4e0b223613e59c973b"
+  "gitHead": "47fa333abf187cd58ab9edb6b5fe970bbc24b4f7"
 }