Skip to content

Commit cc0e361

Browse files
NoOne7135NoOne7135
committed
BREAKING CHANGE: replace 'RICHTEXT' with 'TEXT' in data types and update related components
1 parent d6f5292 commit cc0e361

File tree

10 files changed

+99
-15
lines changed

10 files changed

+99
-15
lines changed

‎adminforth/commands/utils.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export const mapToTypeScriptType = (adminType) => {
1313
switch (adminType) {
1414
case "string":
1515
case "text":
16-
case "richtext":
1716
case "datetime":
1817
case "date":
1918
case "time":

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,7 +515,10 @@ export default {
515515
{
516516
name: 'content',
517517
showIn: { list: false },
518-
type: AdminForthDataTypes.RICHTEXT,
518+
type: AdminForthDataTypes.TEXT,
519+
components: {
520+
show: "@/renderers/RichText.vue",
521+
}
519522
},
520523
{
521524
name: 'createdAt',

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@ Now instantiate the plugin and add it to the configuration:
3030
{
3131
name: 'description',
3232
//diff-add
33-
type: AdminForthDataTypes.RICHTEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views
33+
type: AdminForthDataTypes.TEXT, // like plain AdminForthDataTypes.TEXT but renders HTML in show/list views
34+
components: {
35+
show: "@/renderers/RichText.vue",
36+
list: "@/renderers/RichText.vue",
37+
},
3438
...
3539
}
3640
...
@@ -65,12 +69,20 @@ If you need multiple fields in one resource which happens rarely, just add multi
6569
...
6670
{
6771
name: 'short_description',
68-
type: AdminForthDataTypes.RICHTEXT,
72+
type: AdminForthDataTypes.TEXT,
73+
components: {
74+
list: "@/renderers/RichText.vue",
75+
show: "@/renderers/RichText.vue",
76+
}
6977
...
7078
},
7179
{
7280
name: 'full_description',
73-
type: AdminForthDataTypes.RICHTEXT,
81+
type: AdminForthDataTypes.TEXT,
82+
components: {
83+
list: "@/renderers/RichText.vue",
84+
show: "@/renderers/RichText.vue",
85+
}
7486
...
7587
}
7688
...

‎adminforth/modules/configValidator.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -548,9 +548,6 @@ export default class ConfigValidator implements IConfigValidator {
548548
if (col.isArray.itemType === AdminForthDataTypes.JSON) {
549549
errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be JSON`);
550550
}
551-
if (col.isArray.itemType === AdminForthDataTypes.RICHTEXT) {
552-
errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be RICHTEXT`);
553-
}
554551
}
555552
}
556553

@@ -569,7 +566,7 @@ export default class ConfigValidator implements IConfigValidator {
569566
}
570567

571568
// if suggestOnCreate is string, column should be one of the types with text inputs
572-
if (typeof inCol.suggestOnCreate === 'string' && ![AdminForthDataTypes.STRING, AdminForthDataTypes.DATE, AdminForthDataTypes.DATETIME, AdminForthDataTypes.TIME, AdminForthDataTypes.TEXT, AdminForthDataTypes.RICHTEXT, undefined].includes(inCol.type)) {
569+
if (typeof inCol.suggestOnCreate === 'string' && ![AdminForthDataTypes.STRING, AdminForthDataTypes.DATE, AdminForthDataTypes.DATETIME, AdminForthDataTypes.TIME, AdminForthDataTypes.TEXT, undefined].includes(inCol.type)) {
573570
errors.push(`Resource "${res.resourceId}" column "${col.name}" suggestOnCreate value does not match type of a column`);
574571
}
575572

‎adminforth/spa/src/components/ValueRenderer.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,6 @@
6969
<span v-else-if="column.type === 'time'" class="whitespace-nowrap">
7070
{{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
7171
</span>
72-
<span v-else-if="column.type === 'richtext'">
73-
<div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
74-
</span>
7572
<span v-else-if="column.type === 'decimal'">
7673
{{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
7774
</span>

‎adminforth/spa/src/renderers/RichText.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="rich-text" v-html="htmlContent"></div>
3+
</template>
4+
5+
<script setup lang="ts">
6+
import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
7+
8+
const props = defineProps<{
9+
column: AdminForthResourceColumnCommon
10+
record: any
11+
meta: any
12+
resource: AdminForthResourceCommon
13+
adminUser: AdminUser
14+
}>()
15+
16+
const htmlContent = props.record[props.column.name] || ''
17+
</script>
18+
19+
<style scoped>
20+
.rich-text {
21+
/* You can add default styles here if needed */
22+
word-break: break-word;
23+
}
24+
</style>
25+

‎adminforth/spa/src/renderers/ZeroStylesRichText.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<iframe ref="iframeRef" class="zero-styles-iframe" />
3+
</template>
4+
5+
<script setup lang="ts">
6+
import { onMounted, ref, watch } from 'vue'
7+
import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
8+
9+
const props = defineProps<{
10+
column: AdminForthResourceColumnCommon
11+
record: any
12+
meta: any
13+
resource: AdminForthResourceCommon
14+
adminUser: AdminUser
15+
}>()
16+
17+
const iframeRef = ref<HTMLIFrameElement | null>(null)
18+
19+
const renderHtml = () => {
20+
const iframe = iframeRef.value
21+
if (!iframe) return
22+
23+
const doc = iframe.contentDocument || iframe.contentWindow?.document
24+
if (!doc) return
25+
26+
iframe.style.border = "none"
27+
iframe.style.width = "100%"
28+
iframe.style.height = "400px"
29+
30+
doc.open()
31+
doc.write(props.record[props.column.name] || '')
32+
doc.close()
33+
}
34+
35+
onMounted(renderHtml)
36+
watch(() => props.record[props.column.name], renderHtml)
37+
</script>
38+
39+
<style scoped>
40+
.zero-styles-iframe {
41+
width: 100%;
42+
border: none;
43+
}
44+
</style>
45+

‎adminforth/types/Common.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export enum AdminForthDataTypes {
1414
TIME = 'time',
1515
TEXT = 'text',
1616
JSON = 'json',
17-
RICHTEXT = 'richtext',
1817
}
1918

2019
export enum AdminForthFilterOperators {

‎dev-demo/resources/apartment_buyers.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,11 @@ export default {
101101
{
102102
name: 'info',
103103
sortable: false,
104-
type: AdminForthDataTypes.RICHTEXT,
104+
type: AdminForthDataTypes.TEXT,
105105
showIn: { list: false },
106+
components: {
107+
show: "@/renderers/RichText.vue",
108+
},
106109
},
107110
{
108111
name: 'contact_info',

‎dev-demo/resources/apartments.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,12 @@ export default {
264264
{
265265
name: "description",
266266
sortable: false,
267-
type: AdminForthDataTypes.RICHTEXT,
267+
type: AdminForthDataTypes.TEXT,
268268
showIn: {filter: true, show: true, edit: true, create: true},
269+
components: {
270+
list: "@/renderers/RichText.vue",
271+
show: "@/renderers/ZeroStylesRichText.vue",
272+
}
269273
},
270274
{
271275
name: "listed",

0 commit comments

Comments
 (0)