From fb2a38dfb8ec1d373b31b516d777067b0005489c Mon Sep 17 00:00:00 2001 From: orkun Date: Mon, 9 Sep 2024 14:18:57 +0300 Subject: [PATCH 1/2] VC-3502 Updated render custom content doc with better explanation for vcvhelper --- .../render-custom-content.md | 39 ++++++++++++++----- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/docs/element-component/render-custom-content.md b/docs/element-component/render-custom-content.md index 4d07b39..6f98cb1 100644 --- a/docs/element-component/render-custom-content.md +++ b/docs/element-component/render-custom-content.md @@ -2,20 +2,41 @@ ## Overview -To render a custom content in the editor like the shortcode, a helper element is used with a class of `vcvhelper`. -**Example**: -```javascript -
+To render dynamic content like shortcodes or custom HTML in the editor, the following structure is used in Visual Composer: + +```jsx +
``` +This structure helps manage raw content, such as shortcodes, and ensures it is properly rendered in both the editor and the live view. Let’s break down the key parts: + +### `vcvhelper` Class + +The `vcvhelper` class in Visual Composer is used to mark elements containing dynamic content, like shortcodes or custom HTML, that need to be processed by the editor. It signals that the raw content should be compiled and rendered dynamically in the editor. + +### `data-vcvs-html` + +The `data-vcvs-html` attribute stores raw content, like shortcodes or HTML, to be processed by Visual Composer. The editor compiles this content and renders it dynamically in both the editor and the live view. -This helper element is used to display the original element in the editor while storing the raw content, both shortcode and HTML string in the `data` attribute. The content inside the `data` attribute is then compiled by the editor to display it properly in the View Page. +### `vcvhelper` Ref -This element comes in handy when the content is changed dynamically and the JavaScript is dependant on the markup. The example could be a shortcode or a complex element like the Accordion which utilizes the same JavaScript both in the editor and public view. +The ref attribute is used to attach a [React reference](https://reactjs.org/docs/refs-and-the-dom.html) (`this.vcvhelper`) to the DOM element with `vcvhelper` class. React refs are used to access the DOM element directly and manage dynamic updates to the content. -* `vcvhelper` – a reserved class name in the editor by which it is recognized; -* `ref` – a [React reference](https://reactjs.org/docs/refs-and-the-dom.html) to the DOM element; -* `data-vcvs-html` – an attribute which shortcode or HTML string. +`this.vcvhelper` is a React ref created using React.createRef(). It is assigned to the vcvhelper element, allowing you to programmatically access and manipulate the DOM element. + +```jsx +this.vcvhelper = React.createRef() +``` +By attaching the ref to the vcvhelper element, you can reference the DOM node directly and manage content updates as necessary. + +The `this.vcvhelper.current` property provides direct access to the DOM element that the React ref (`this.vcvhelper`) is pointing to. React refs store the DOM element in the .current property once the component has mounted. + +```jsx +componentDidMount() { + super.updateShortcodeToHtml(this.props.atts.shortcode, this.vcvhelper.current) +} +``` +In this example, `this.vcvhelper.current` references the actual DOM element, and we use it to dynamically update the content by calling the [updateShortcodeToHtml](/element-component/element-component-methods#updateshortcodetohtml) method, which processes the raw shortcode and inserts the compiled HTML into the element. :::caution Note: `vcvhelper` element is used only in the editor. On public view, it will be stripped. From 3c5f2c0d42e0667221c629e582a840778a87a969 Mon Sep 17 00:00:00 2001 From: orkun Date: Mon, 9 Sep 2024 14:58:47 +0300 Subject: [PATCH 2/2] VC-3502 Removed git config --- .github/workflows/documentation.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml index a41b84c..aeeecaf 100644 --- a/.github/workflows/documentation.yml +++ b/.github/workflows/documentation.yml @@ -42,8 +42,6 @@ jobs: GIT_USER: git, CURRENT_BRANCH: main, run: | - git config --global user.email "n.hlopov@gmail.com" - git config --global user.name "nikitahl" if [ -e yarn.lock ]; then yarn install --frozen-lockfile elif [ -e package-lock.json ]; then @@ -51,4 +49,4 @@ jobs: else npm i fi - npm run deploy \ No newline at end of file + npm run deploy