Add edited content rendered on `vue-intlayer`

[aymericzip]

See vue app example in the monorepo: https://github.com/aymericzip/intlayer/tree/main/examples/vite-vue-app

# start app
pnpm run dev
# start editor 
pnpm start:editor

On the react version of the plugin, when the content got updated via the visual editor, it got stored into the EditedContentRenderer

Related code:

• https://github.com/aymericzip/intlayer/blob/main/packages/react-intlayer/src/editor/useEditedContentRenderer.tsx
• https://github.com/aymericzip/intlayer/blob/main/packages/react-intlayer/src/plugins.tsx

/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */
export const intlayerNodePlugins: Plugins = {
  id: 'intlayer-node-plugin',
  canHandle: (node) =>
    typeof node === 'bigint' ||
    typeof node === 'string' ||
    typeof node === 'number',
  transform: (
    _node,
    {
      plugins, // Removed to avoid next error - Functions cannot be passed directly to Client Components
      ...rest
    }
  ) =>
    renderIntlayerNode({
      ...rest,
      value: rest.children,
      children: (
        <ContentSelectorRenderer {...rest} key={rest.children}>
          <EditedContentRenderer {...rest}>
            {rest.children}
          </EditedContentRenderer>
        </ContentSelectorRenderer>
      ),
    }),
};

So when a change is made using the CMS, or the VIsual editor, the user can see the changes directly rendered visually.

---

On vue, the same logic should be applied to replace the base content by the updated content

Related code

• https://github.com/aymericzip/intlayer/blob/main/packages/vue-intlayer/src/editor/useEditedContentRenderer.ts
• https://github.com/aymericzip/intlayer/blob/main/packages/vue-intlayer/src/plugins.ts

/** Translation plugin. Replaces node with a locale string if nodeType = Translation. */
export const intlayerNodePlugins: Plugins = {
  id: 'intlayer-node-plugin',
  canHandle: (node) =>
    typeof node === 'bigint' ||
    typeof node === 'string' ||
    typeof node === 'number',
  transform: (_node, { children, ...rest }) =>
    renderIntlayerNode({
      ...rest,
      value: children,
      children: () =>
        h(
          // EditorSelectorRenderer, // Maximum stack size exceeded
          ContentSelectorWrapper,
          {
            dictionaryKey: rest.dictionaryKey,
            keyPath: rest.keyPath,
          },
          {
            default: () => children,
          }
        ),
    }),
};

---

Expected Behavior:

Vue’s intlayerNodePlugins should mirror the React logic: after a node is edited and saved in the editedContent ref, the rendered node should reflect the update without requiring a full refresh or manual intervention.

---

Suggested Fix:

Ensure vue-intlayer/src/plugins.ts reads from editedContent and replaces the node tree similarly to useEditedContentRenderer.tsx in React. It may require introducing a computed mapping or watcher on editedContent to conditionally render edited nodes in intlayerNodePlugins.