Markdown
The Markdown plugin enables Markdown support in AdminForth, allowing users to create and edit fields using Markdown syntax and save rich content in Markdown syntax.
Also, it allows previewing of Markdown fields in the show page.
Installation
To install the plugin:
npm install @adminforth/markdown --save
Usage
Instantiate the plugin in your apartments resource file for 'description' field.
./resources/apartments.ts
import MarkdownPlugin from '@adminforth/markdown';
// ... existing resource configuration ...
plugins: [
new MarkdownPlugin({fieldName: "description"}),
]
Please note that plugin can only work on TEXT and STRING fields
Here is how it looks in the create view:
Here is how it looks in show view:
Imges in Markdown
First, you need to create resource for images:
schema.prisma
model description_image {
id String @id
created_at DateTime
resource_id String
record_id String
image_path String
}
npm run makemigration -- --name add_description_image
npm i @adminforth/upload --save
npm i @adminforth/storage-adapter-local --save
./resources/description_images.ts
import AdminForthStorageAdapterLocalFilesystem from "@adminforth/storage-adapter-local";
import { AdminForthResourceInput } from "adminforth";
import UploadPlugin from "@adminforth/upload";
import { v1 as uuid } from "uuid";
export default {
dataSource: "maindb",
table: "description_image",
resourceId: "description_images",
label: "Description images",
columns: [
{
name: "id",
primaryKey: true,
required: false,
fillOnCreate: ({ initialRecord }: any) => uuid(),
showIn: {
create: false,
},
},
{
name: "created_at",
required: false,
fillOnCreate: ({ initialRecord }: any) => new Date().toISOString(),
showIn: {
create: false,
},
},
{ name: "resource_id", required: false },
{ name: "record_id", required: false },
{ name: "image_path", required: false },
],
plugins: [
new UploadPlugin({
pathColumnName: "image_path",
// rich editor plugin supports only 'public-read' ACL images for SEO purposes (instead of presigned URLs which change every time)
storageAdapter: new AdminForthStorageAdapterLocalFilesystem({
fileSystemFolder: "./db/uploads/description_images", // folder where files will be stored on disk
adminServeBaseUrl: "static/source", // the adapter not only stores files, but also serves them for HTTP requests
mode: "public", // public if all files should be accessible from the web, private only if could be accesed by temporary presigned links
signingSecret: process.env.ADMINFORTH_SECRET, // secret used to generate presigned URLs
}),
allowedFileExtensions: [
"jpg",
"jpeg",
"png",
"gif",
"webm",
"exe",
"webp",
],
maxFileSize: 1024 * 1024 * 20, // 5MB
filePath: ({ originalFilename, originalExtension, contentType }) =>
`description_images/${new Date().getFullYear()}/${uuid()}/${originalFilename}.${originalExtension}`,
preview: {
// Used to display preview (if it is image) in list and show views instead of just path
// previewUrl: ({s3Path}) => `https://tmpbucket-adminforth.s3.eu-central-1.amazonaws.com/${s3Path}`,
// show image preview instead of path in list view
// showInList: false,
},
}),
],
} as AdminForthResourceInput;
Next, add new resource to index.ts
:
./index.ts
import descriptionImage from './resources/description_images.js';
...
resources: [
usersResource,
apartments,
descriptionImage
],
Next, add attachments to Markdown plugin:
./resources/apartments.ts
import MarkdownPlugin from '@adminforth/markdown';
// ... existing resource configuration ...
plugins: [
new MarkdownPlugin({
fieldName: "description",
attachments: {
attachmentResource: "description_images",
attachmentFieldName: "image_path",
attachmentRecordIdFieldName: "record_id",
attachmentResourceIdFieldName: "resource_id",
},
}),
]