added markup support

web/admin/src/components/product/Add.vue

@@ -70,7 +70,10 @@
           </div>
 
           <hr />
-          <FormTextarea v-model="product.description" id="textarea" name="Description" />
+
+          <span>Description</span>
+          <Editor v-model:model-value="product.description"  />
+
         </dl>
       </div>
 
@@ -94,6 +97,7 @@ import FormInput from "@/components/form/Input.vue";
 import FormButton from "@/components/form/Button.vue";
 import FormSelect from "@/components/form/Select.vue";
 import FormTextarea from "@/components/form/Textarea.vue";
+import Editor from "@/components/Editor.vue"
 import { costStripe } from "@/utils/";
 import { showMessage } from "@/utils/message";
 import { apiPost } from "@/utils/api";

web/admin/src/components/product/Update.vue

@@ -80,7 +80,10 @@
           <FormUpload :productId="`${product.id}`" accept=".jpg,.jpeg,.png" section="image" @added="addProductImage" />
 
           <hr />
-          <FormTextarea v-model="product.description" id="textarea" name="Description" />
+
+          <span>Description</span>
+          <Editor v-model:model-value="product.description"/>
+
         </dl>
       </div>
 
@@ -106,6 +109,7 @@ import { onMounted, computed, ref } from "vue";
 import FormInput from "@/components/form/Input.vue";
 import FormButton from "@/components/form/Button.vue";
 import FormTextarea from "@/components/form/Textarea.vue";
+import Editor from "@/components/Editor.vue"
 import FormUpload from "@/components/form/Upload.vue";
 import { costFormat, costStripe } from "@/utils/";
 import { showMessage } from "@/utils/message";

web/admin/src/components/product/View.vue

@@ -35,7 +35,7 @@
           </div>
         </DetailList>
 
-        <DetailList name="description">{{ product.description }}</DetailList>
+        <DetailList name="description" v-html="product.description"></DetailList>
       </dl>
     </div>
 

web/site/product.html

@@ -10,7 +10,7 @@
         </div>
         <div class="lg:col-span-2">
           <h1 class="text-xl font-bold text-gray-900 sm:text-3xl">{{product.name}}</h1>
-          <p class="mt-4">{{product.description}}</p>
+          <p class="mt-4" v-html="product.description"></p>
             <ul class="mt-4 list-disc pl-4">
               <li v-for="(item, index) in product.attributes">{{item}}</li>
             </ul>