Added images

src/components/RenderContentComponent.vue

@@ -1,74 +1,100 @@
 <template>
-    <div>
-      <component :is="dynamicComponent" v-bind="componentProps"></component>
-    </div>
-  </template>
-  
-  <script>
-  import { createApp, h } from 'vue';
-  import WorshipRender from './WorshipRender.vue';
-  
-  export default {
-    name: 'RenderContentComponent',
-    props: {
-      content: {
-        type: String,
-        required: true
-      }
+  <div v-html="parsedContent"></div>
+</template>
+
+<script>
+import { createApp, h, ref, watch } from 'vue';
+import WorshipRender from './WorshipRender.vue';
+import ImageRender from './ImageRender.vue';
+
+export default {
+  name: 'RenderContentComponent',
+  props: {
+    content: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        dynamicComponent: null,
-        componentProps: {}
-      };
-    },
-    watch: {
-      content: {
-        immediate: true,
-        handler(newContent) {
-          this.renderContent(newContent);
-        }
-      }
-    },
-    methods: {
-      renderContent(content) {
-        const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
-        content.replace(worshipsPattern, (match, config) => {
-          const props = this.parseConfig(config);
-          this.dynamicComponent = WorshipRender;
-          this.componentProps = props;
-          return '<div id="worship-render-placeholder"></div>';
-        });
-        this.$nextTick(() => {
-          if (this.dynamicComponent) {
-            const placeholder = document.getElementById('worship-render-placeholder');
-            if (placeholder) {
-              const app = createApp({
-                render() {
-                  return h(this.dynamicComponent, this.componentProps);
-                }
-              });
-              app.mount(placeholder);
-            }
+  },
+  setup(props) {
+    const parsedContent = ref('');
+
+    const renderContent = (content) => {
+      let result = renderWorship(content);
+      result = renderImage(content);
+      return result;
+    };
+
+    const renderWorship = (content) => {
+      const worshipsPattern = /{{ worshipslist:(.*?) }}/g;
+      let result = content;
+      result = result.replace(worshipsPattern, (match, config) => {
+        const props = parseConfig(config);
+        const placeholderId = `worship-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        setTimeout(() => {
+          const placeholder = document.getElementById(placeholderId);
+          if (placeholder) {
+            const app = createApp({
+              render() {
+                return h(WorshipRender, props);
+              },
+            });
+            app.mount(placeholder);
           }
-        });
-      },
-      parseConfig(configString) {
-        const config = {};
-        const configArray = configString.split(',');
-        configArray.forEach(item => {
-          const [key, value] = item.split('=');
-          if (key && value !== undefined) {
-            config[key.trim()] = isNaN(value) ? value.trim() : Number(value);
-          }
-        });
-        return config;
-      }
+        }, 0);
+        return `<div id="${placeholderId}"></div>`;
+      });
+      return result;
     }
+
+    const renderImage = (content) => {
+      const imagePattern = /{{ image:(.*?) }}/g;
+      let result = content;
+      result = result.replace(imagePattern, (match, config) => {
+        const placeholderId = `image-render-placeholder-${Math.random().toString(36).substr(2, 9)}`;
+        setTimeout(() => {
+          const placeholder = document.getElementById(placeholderId);
+          if (placeholder) {
+            const app = createApp({
+              render() {
+                console.log(config);
+                return h(ImageRender, { 'id': config });
+              },
+            });
+            app.mount(placeholder);
+          }
+        }, 0);
+        return `<span id="${placeholderId}"></span>`;
+      });
+      return result;
+    }
+
+  const parseConfig = (configString) => {
+    const config = {};
+    const configArray = configString.split(',');
+    configArray.forEach((item) => {
+      const [key, value] = item.split('=');
+      if (key && value !== undefined) {
+        config[key.trim()] = isNaN(value) ? value.trim() : Number(value);
+      }
+    });
+    return config;
   };
-  </script>
-  
-  <style scoped>
-  /* Add styles if needed */
-  </style>
-  
+
+  watch(
+      () => props.content,
+  (newContent) => {
+    parsedContent.value = renderContent(newContent);
+  },
+  { immediate: true }
+    );
+
+return {
+  parsedContent,
+};
+  },
+};
+</script>
+
+<style scoped>
+/* Add styles if needed */
+</style>