Merge pull request #208 from devforth/replace-richtext-type-to-renderers

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

Author: ivictbor

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/03-Customization/13-standardPagesTuning.md

@@ -534,7 +534,7 @@ export default {
 
 Doing so, will result in UI displaying each item of the array as a separate input corresponding to `isArray.itemType` on create and edit pages.
 
-`itemType` value can be any of `AdminForthDataTypes` except `JSON` and `RICHTEXT`.
+`itemType` value can be any of `AdminForthDataTypes` except `JSON` and `TEXT`.
 
 By default it is forbidden to store duplicate values in an array column. To change that you can add `allowDuplicateItems: true` to `isArray`, like so:
 

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>
@@ -92,7 +89,6 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import sanitizeHtml from 'sanitize-html';
 import { JsonViewer } from "vue3-json-viewer";
 import "vue3-json-viewer/dist/index.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
@@ -111,26 +107,6 @@ const props = defineProps<{
   record: any
 }>();
 
-
-function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
-    ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-    } 
-  });
-}
-
-
 function formatDateTime(date: string) {
   if (!date) return '';
   return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');

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'
+import { protectAgainstXSS } from '@/utils'
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon
+  record: any
+  meta: any
+  resource: AdminForthResourceCommon
+  adminUser: AdminUser
+}>()
+const htmlContent = protectAgainstXSS(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,47 @@
+<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'
+  import { protectAgainstXSS } from '@/utils'
+  
+  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(protectAgainstXSS(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/spa/src/utils.ts

@@ -6,6 +6,7 @@ import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
+import sanitizeHtml  from 'sanitize-html'
 
 const LS_LANG_KEY = `afLanguage`;
 
@@ -190,3 +191,21 @@ export function humanifySize(size) {
   }
   return `${size.toFixed(1)} ${units[i]}`
 }
+
+export function protectAgainstXSS(value: string) {
+  return sanitizeHtml(value, {
+    allowedTags: [
+      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
+      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
+      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
+      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
+      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
+      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
+      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
+    ],
+    allowedAttributes: {
+      'li': [ 'data-list' ],
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
+    } 
+  });
+}

adminforth/types/Common.ts

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