BREAKING CHANGE: replace 'RICHTEXT' with 'TEXT' in data types and update related components

Author: NoOne7135

adminforth/commands/utils.js

@@ -13,7 +13,6 @@ export const mapToTypeScriptType = (adminType) => {
   switch (adminType) {
     case "string":
     case "text":
-    case "richtext":
     case "datetime":
     case "date":
     case "time":

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -515,7 +515,10 @@ export default {
     {
       name: 'content',
       showIn: { list: false },
-      type: AdminForthDataTypes.RICHTEXT,
+      type: AdminForthDataTypes.TEXT,
+      components: {
+        show: "@/renderers/RichText.vue",
+      }
     },
     {
       name: 'createdAt',

adminforth/documentation/docs/tutorial/05-Plugins/04-RichEditor.md

@@ -30,7 +30,11 @@ Now instantiate the plugin and add it to the configuration:
     {
       name: 'description',
 //diff-add
-      type: AdminForthDataTypes.RICHTEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views
+      type: AdminForthDataTypes.TEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views
+      components: {
+        show: "@/renderers/RichText.vue",
+        list: "@/renderers/RichText.vue",
+      },
       ...
     }
     ...
@@ -65,12 +69,20 @@ If you need multiple fields in one resource which happens rarely, just add multi
     ...
     {
       name: 'short_description',
-      type: AdminForthDataTypes.RICHTEXT,
+      type: AdminForthDataTypes.TEXT,
+      components: {
+        list: "@/renderers/RichText.vue",
+        show: "@/renderers/RichText.vue",
+      }
       ...
     },
     {
       name: 'full_description',
-      type: AdminForthDataTypes.RICHTEXT,
+      type: AdminForthDataTypes.TEXT,
+      components: {
+        list: "@/renderers/RichText.vue",
+        show: "@/renderers/RichText.vue",
+      }
       ...
     }
     ...

adminforth/modules/configValidator.ts

@@ -548,9 +548,6 @@ export default class ConfigValidator implements IConfigValidator {
             if (col.isArray.itemType === AdminForthDataTypes.JSON) {
               errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be JSON`);
             }
-            if (col.isArray.itemType === AdminForthDataTypes.RICHTEXT) {
-              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be RICHTEXT`);
-            }
           }
         }
 
@@ -569,7 +566,7 @@ export default class ConfigValidator implements IConfigValidator {
           }
 
           // if suggestOnCreate is string, column should be one of the types with text inputs
-          if (typeof inCol.suggestOnCreate === 'string' && ![AdminForthDataTypes.STRING, AdminForthDataTypes.DATE, AdminForthDataTypes.DATETIME, AdminForthDataTypes.TIME, AdminForthDataTypes.TEXT, AdminForthDataTypes.RICHTEXT, undefined].includes(inCol.type)) {
+          if (typeof inCol.suggestOnCreate === 'string' && ![AdminForthDataTypes.STRING, AdminForthDataTypes.DATE, AdminForthDataTypes.DATETIME, AdminForthDataTypes.TIME, AdminForthDataTypes.TEXT, undefined].includes(inCol.type)) {
             errors.push(`Resource "${res.resourceId}" column "${col.name}" suggestOnCreate value does not match type of a column`);
           }
 

adminforth/spa/src/components/ValueRenderer.vue

@@ -69,9 +69,6 @@
     <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
       {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
     </span>
-    <span v-else-if="column.type === 'richtext'">
-      <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
-    </span>
     <span v-else-if="column.type === 'decimal'">
       {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
     </span>

adminforth/spa/src/renderers/RichText.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="rich-text" v-html="htmlContent"></div>
+  </template>
+  
+  <script setup lang="ts">
+  import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
+  
+  const props = defineProps<{
+    column: AdminForthResourceColumnCommon
+    record: any
+    meta: any
+    resource: AdminForthResourceCommon
+    adminUser: AdminUser
+  }>()
+  
+  const htmlContent = props.record[props.column.name] || ''
+  </script>
+  
+  <style scoped>
+  .rich-text {
+    /* You can add default styles here if needed */
+    word-break: break-word;
+  }
+  </style>
+  

adminforth/spa/src/renderers/ZeroStylesRichText.vue

@@ -0,0 +1,45 @@
+<template>
+    <iframe ref="iframeRef" class="zero-styles-iframe" />
+  </template>
+  
+  <script setup lang="ts">
+  import { onMounted, ref, watch } from 'vue'
+  import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
+  
+  const props = defineProps<{
+    column: AdminForthResourceColumnCommon
+    record: any
+    meta: any
+    resource: AdminForthResourceCommon
+    adminUser: AdminUser
+  }>()
+  
+  const iframeRef = ref<HTMLIFrameElement | null>(null)
+  
+  const renderHtml = () => {
+    const iframe = iframeRef.value
+    if (!iframe) return
+  
+    const doc = iframe.contentDocument || iframe.contentWindow?.document
+    if (!doc) return
+  
+    iframe.style.border = "none"
+    iframe.style.width = "100%"
+    iframe.style.height = "400px"
+  
+    doc.open()
+    doc.write(props.record[props.column.name] || '')
+    doc.close()
+  }
+  
+  onMounted(renderHtml)
+  watch(() => props.record[props.column.name], renderHtml)
+  </script>
+  
+  <style scoped>
+  .zero-styles-iframe {
+    width: 100%;
+    border: none;
+  }
+  </style>
+  

adminforth/types/Common.ts

@@ -14,7 +14,6 @@ export enum AdminForthDataTypes {
   TIME = 'time',
   TEXT = 'text',
   JSON = 'json',
-  RICHTEXT = 'richtext',
 }
 
 export enum AdminForthFilterOperators {

dev-demo/resources/apartment_buyers.ts

@@ -101,8 +101,11 @@ export default {
     {
       name: 'info',
       sortable: false,
-      type: AdminForthDataTypes.RICHTEXT,
+      type: AdminForthDataTypes.TEXT,
       showIn: { list: false },
+      components: {
+        show: "@/renderers/RichText.vue",
+      },
     },
     {
       name: 'contact_info',

dev-demo/resources/apartments.ts

@@ -264,8 +264,12 @@ export default {
     {
       name: "description",
       sortable: false,
-      type: AdminForthDataTypes.RICHTEXT,
+      type: AdminForthDataTypes.TEXT,
       showIn: {filter: true, show: true, edit: true, create: true},
+      components: {
+        list: "@/renderers/RichText.vue",
+        show: "@/renderers/ZeroStylesRichText.vue",
+      }
     },
     {
       name: "listed",