### Basic Markdown Plugin Setup
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Minimal setup for the Markdown plugin requires only the field name.
```typescript
new MarkdownPlugin({
fieldName: 'description'
})
```
--------------------------------
### Markdown to HTML Conversion Example
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Shows an example of markdown input and its corresponding HTML output, illustrating how the plugin renders common markdown elements.
```markdown
# Welcome
This is **bold** and this is *italic*.
- List item 1
- List item 2
[Click here](https://example.com)
```
--------------------------------
### Quick Start Integration
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/index.md
Integrate the MarkdownPlugin into an AdminForth application by adding it to the plugins array of a resource configuration.
```typescript
import MarkdownPlugin from '@adminforth/markdown';
import { AdminForth } from 'adminforth';
const admin = new AdminForth({
resources: [
{
resourceId: 'articles',
label: 'Articles',
columns: [
{ name: 'id', type: 'integer', primaryKey: true },
{ name: 'title', type: 'string' },
{ name: 'content', type: 'text' }
],
plugins: [
new MarkdownPlugin({
fieldName: 'content'
})
]
}
]
});
```
--------------------------------
### Markdown to HTML Conversion Example Output
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
The HTML output generated from the example markdown input.
```html
```
--------------------------------
### Complete Markdown Plugin Configuration
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Example demonstrating all available configuration options for the Markdown plugin, including attachments, toolbar settings, and preview customizations.
```typescript
new MarkdownPlugin({
fieldName: 'article_content',
attachments: {
attachmentResource: 'article_images',
attachmentFieldName: 'file_path',
attachmentRecordIdFieldName: 'article_id',
attachmentResourceIdFieldName: 'article_resource_id',
attachmentTitleFieldName: 'image_title',
attachmentAltFieldName: 'image_alt'
},
topPanelSettings: {
bold: true,
italic: true,
underline: true,
strike: false,
h1: true,
h2: true,
h3: true,
ul: true,
ol: true,
link: true,
codeBlock: true
},
compactShowPreview: true,
maxShowViewContainerHeightPx: 300
})
```
--------------------------------
### Install AdminForth Markdown Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Command to install the latest published version of the AdminForth Markdown plugin from the NPM registry. This command should be run in your project's root directory.
```bash
npm install @adminforth/markdown
```
--------------------------------
### Compact List Preview Setup
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure the Markdown plugin for a compact list preview, setting 'compactShowPreview' to true and defining a maximum height for the view container.
```typescript
new MarkdownPlugin({
fieldName: 'summary',
compactShowPreview: true,
maxShowViewContainerHeightPx: 150
})
```
--------------------------------
### Blog with Image Attachments Setup
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure the Markdown plugin for a blog post scenario, including image attachments with specific field names for storage and metadata.
```typescript
new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'blog_images',
attachmentFieldName: 'image_path',
attachmentRecordIdFieldName: 'blog_id',
attachmentResourceIdFieldName: 'blog_resource_id',
attachmentAltFieldName: 'alt_text',
attachmentTitleFieldName: 'title'
}
})
```
--------------------------------
### Documentation Editor Setup
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure the Markdown plugin for a documentation editor, enabling specific toolbar buttons for formatting and structure.
```typescript
new MarkdownPlugin({
fieldName: 'documentation',
topPanelSettings: {
bold: true,
italic: true,
h1: true,
h2: true,
h3: true,
ul: true,
ol: true,
link: true,
codeBlock: true,
strike: false,
underline: false
}
})
```
--------------------------------
### Markdown Plugin Setup with Upload Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Configure the Markdown plugin to use Upload Plugin for handling file storage and attachment integration. This setup enables image embedding and attachment tracking.
```typescript
{
resourceId: 'blog_images',
plugins: [
new UploadPlugin({
pathColumnName: 'file_path',
storageAdapter: new S3StorageAdapter({
acl: 'public-read'
})
})
]
}
// Then reference this in Markdown plugin's attachments config
```
--------------------------------
### Minimal AdminForth Setup with Markdown Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
This snippet shows the basic configuration for integrating the Markdown plugin into an AdminForth application. It sets up a 'blog_posts' resource with a 'body' field managed by the Markdown plugin.
```typescript
import AdminForth from 'adminforth';
import MarkdownPlugin from '@adminforth/markdown';
const admin = new AdminForth({
resources: [
{
resourceId: 'blog_posts',
label: 'Blog Posts',
columns: [
{ name: 'id', type: 'integer', primaryKey: true },
{ name: 'title', type: 'string' },
{ name: 'body', type: 'text' }
],
plugins: [
new MarkdownPlugin({
fieldName: 'body'
})
]
}
]
});
export default admin;
```
--------------------------------
### Markdown Formatting Examples
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Illustrates common Markdown syntax for text styling, headings, block elements, and links, as applied by the topPanelButtons.vue toolbar.
```markdown
**text**
```
```markdown
*text*
```
```markdown
text
```
```markdown
~~text~~
```
```markdown
# Heading
```
```markdown
## Heading
```
```markdown
### Heading
```
```markdown
* Item
```
```markdown
1. Item
```
```markdown
[text](url)
```
```markdown
``` ```
```
--------------------------------
### Apply Strikethrough Formatting
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Example of using `toggleWrapSmart` to make selected text strikethrough using double tildes.
```typescript
// Make selected text strikethrough
toggleWrapSmart(editor, '~~');
```
--------------------------------
### Apply Bold Formatting
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Example of using `toggleWrapSmart` to make selected text bold using double asterisks.
```typescript
// Make selected text bold
toggleWrapSmart(editor, '**');
```
--------------------------------
### Markdown Plugin with Other Plugins
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Install the Markdown plugin alongside other plugins. Ensure that multiple plugins modifying the same field do not conflict in their `modifyResourceConfig` implementations.
```typescript
plugins: [
new MarkdownPlugin({ fieldName: 'content' }),
new SomeOtherPlugin({ /* ... */ }),
new AnotherPlugin({ /* ... */ })
]
```
--------------------------------
### Customize Toolbar: Minimal Set
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Configure a minimal toolbar by explicitly enabling only the desired buttons and hiding all others. This example shows bold, italic, underline, and link buttons.
```typescript
topPanelSettings: {
bold: true,
italic: true,
underline: true,
link: true,
// Hide all other buttons
strike: false,
h1: false,
h2: false,
h3: false,
ul: false,
ol: false,
codeBlock: false,
}
```
--------------------------------
### Apply Monospace Code Formatting
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Example of using `toggleWrapSmart` to format selected text as monospace code using backticks.
```typescript
// Make selected text monospace code
toggleWrapSmart(editor, '`');
```
--------------------------------
### Apply Underline Formatting
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Example of using `toggleWrapSmart` to make selected text underlined using asymmetric HTML tags.
```typescript
// Make selected text underlined (asymmetric markers)
toggleWrapSmart(editor, '', '');
```
--------------------------------
### Example Attachment Record Structure
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Illustrates the structure of a record created by the Markdown plugin for tracking embedded attachments. Includes required fields like image path and foreign keys, and optional fields for alt text and title.
```typescript
{
id: 1,
image_path: 'uploads/blog_images/photo_1.jpg',
image_url: 'https://cdn.example.com/uploads/blog_images/photo_1.jpg',
blog_post_id: 42,
blog_resource_id: 'blog_posts',
alt_text: 'A blue sunset over mountains',
title: 'Sunset at Peak',
uploaded_at: '2024-01-15T10:30:00Z'
}
```
--------------------------------
### Apply Italic Formatting
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Example of using `toggleWrapSmart` to make selected text italic using single asterisks.
```typescript
// Make selected text italic
toggleWrapSmart(editor, '*');
```
--------------------------------
### Get Plugin Instance Unique Identifier
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Generates a unique string identifier for a MarkdownPlugin instance based on its field name. This is used internally by AdminForth.
```typescript
const plugin = new MarkdownPlugin({ fieldName: 'content' });
const id = plugin.instanceUniqueRepresentation({ fieldName: 'content' });
console.log(id); // Outputs: "content"
```
--------------------------------
### Customize Toolbar: Hide Specific Buttons
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Control the visibility of toolbar buttons by setting their corresponding properties to `false`. This example hides H1, H2, strikethrough, and code block buttons.
```typescript
topPanelSettings: {
h1: false, // Hide H1 button
h2: false, // Hide H2 button
strike: false, // Hide strikethrough button
codeBlock: false, // Hide code block button
// All other buttons use defaults (enabled)
}
```
--------------------------------
### Resolve Component Path within Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Example of how to resolve the path to a custom component (MarkdownRenderer.vue) within the MarkdownPlugin. The componentPath() method is inherited from AdminForthPlugin and resolves paths relative to the plugin's dist directory.
```typescript
// Inside MarkdownPlugin.modifyResourceConfig:
column.components.show = {
file: this.componentPath("MarkdownRenderer.vue"),
// Resolves to: dist/custom/MarkdownRenderer.vue
};
```
--------------------------------
### Initialize MarkdownPlugin Instance
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Instantiates a new MarkdownPlugin with specified options, including field name and display settings.
```typescript
const plugin = new MarkdownPlugin({
fieldName: 'description',
compactShowPreview: true,
maxShowViewContainerHeightPx: 200
});
```
--------------------------------
### Markdown Plugin Configuration: Preview Settings
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure preview settings for the markdown editor. 'compactShowPreview' uses compact spacing, and 'maxShowViewContainerHeightPx' sets the height threshold for showing an expand button.
```typescript
compactShowPreview: true,
maxShowViewContainerHeightPx: 250
```
--------------------------------
### Configure Expandable Long Content Preview
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Sets up an expandable preview for long content, displaying compactly up to a specified height before showing a 'Show more' button.
```typescript
new MarkdownPlugin({
fieldName: 'description',
compactShowPreview: true,
maxShowViewContainerHeightPx: 300
})
```
--------------------------------
### Configure Blog Content Toolbar
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Sets up a full-featured Markdown plugin toolbar for blog content editing, enabling all standard formatting options.
```typescript
new MarkdownPlugin({
fieldName: 'body',
topPanelSettings: {
bold: true,
italic: true,
underline: true,
strike: true,
h1: true,
h2: true,
h3: true,
ul: true,
ol: true,
link: true,
codeBlock: true
}
})
```
--------------------------------
### MarkdownPlugin Constructor
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Initializes a new MarkdownPlugin instance with the provided configuration options. The plugin integrates Markdown editing and rendering capabilities.
```APIDOC
## constructor(options: PluginOptions)
### Description
Initializes a new MarkdownPlugin instance with the provided configuration options.
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters
- **options** (`PluginOptions`) - Required - Plugin configuration object specifying the field name and optional attachment settings.
### Request Example
```typescript
const plugin = new MarkdownPlugin({
fieldName: 'description',
compactShowPreview: true,
maxShowViewContainerHeightPx: 200
});
```
### Response
#### Success Response (200)
None
#### Response Example
None
### Throws
No exceptions are thrown directly by the constructor, but validation errors will occur when `validateConfigAfterDiscover` is called if the configuration is invalid.
```
--------------------------------
### Extract Storage Key from Local Path
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Illustrates storage key extraction from local paths when using the local storage adapter.
```text
/uploaded-static/uploads-xyz/sqlite/photo.jpg
→ Storage key: sqlite/photo.jpg
```
--------------------------------
### Configure Shared Attachments for Blog Posts
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Sets up shared attachments for the 'blog_posts' resource, linking to a 'shared_media' attachment resource.
```typescript
// Blog posts resource
{
resourceId: 'blog_posts',
plugins: [
new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'shared_media',
attachmentFieldName: 'file_path',
attachmentRecordIdFieldName: 'parent_record_id',
attachmentResourceIdFieldName: 'parent_resource_id'
}
})
]
}
```
--------------------------------
### Build Command
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Execute the npm build script to compile TypeScript files and synchronize custom components into the dist directory.
```bash
npm run build
```
--------------------------------
### Initialize MarkdownPlugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/README.md
Instantiate the MarkdownPlugin with essential configuration. The 'fieldName' option is required to specify the Markdown field.
```typescript
import MarkdownPlugin from '@adminforth/markdown';
new MarkdownPlugin({
fieldName: 'content'
})
```
--------------------------------
### Markdown Plugin with Preview Customization
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Configure compact preview behavior and set a maximum height for the preview container. This limits the preview size and adds a 'Show more' button if content exceeds the limit.
```typescript
new MarkdownPlugin({
fieldName: 'content',
compactShowPreview: true,
maxShowViewContainerHeightPx: 250
})
```
--------------------------------
### Configure Detailed Show View Preview
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Disables compact preview mode for standard Markdown prose formatting with no height limit. Content displays fully.
```typescript
new MarkdownPlugin({
fieldName: 'body',
compactShowPreview: false,
maxShowViewContainerHeightPx: undefined
})
```
--------------------------------
### Import MarkdownPlugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/index.md
Import the main MarkdownPlugin class from the package.
```typescript
import MarkdownPlugin from '@adminforth/markdown';
```
--------------------------------
### Extract Storage Key with Query String and Hash
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Demonstrates that query strings and hashes are removed when extracting storage keys from URLs.
```text
https://cdn.example.com/images/photo.jpg?v=1&cache=false#section
→ Storage key: images/photo.jpg (query and hash removed)
```
--------------------------------
### Configure Max Preview Height
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Use `maxShowViewContainerHeightPx` to limit preview height and add a 'Show more' button when content exceeds the limit. This setting only applies when `compactShowPreview` is `true`.
```typescript
new MarkdownPlugin({
fieldName: 'content',
compactShowPreview: true,
maxShowViewContainerHeightPx: 250
})
new MarkdownPlugin({
fieldName: 'description',
compactShowPreview: true,
maxShowViewContainerHeightPx: 150
})
```
--------------------------------
### Configure Compact Preview Behavior
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Set `compactShowPreview` to control spacing in preview. `true` enables compact spacing with smaller headings and reduced line heights, while `false` uses standard Markdown styling.
```typescript
new MarkdownPlugin({
fieldName: 'content',
compactShowPreview: true // Smaller font, tighter spacing
})
new MarkdownPlugin({
fieldName: 'content',
compactShowPreview: false // Normal sizing
})
```
--------------------------------
### Configure Minimal Toolbar for Text Editing
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Sets up a Markdown plugin with a minimal toolbar for basic text emphasis (bold, italic, underline). Use for simple plain text editing.
```typescript
new MarkdownPlugin({
fieldName: 'content',
topPanelSettings: {
bold: true,
italic: true,
underline: true,
strike: false,
h1: false,
h2: false,
h3: false,
ul: false,
ol: false,
link: false,
codeBlock: false
}
})
```
--------------------------------
### Supported Markdown Syntax
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Demonstrates the various markdown syntaxes supported by the plugin, including headings, text formatting, lists, links, images, tables, blockquotes, code blocks, and horizontal rules.
```markdown
# Heading 1
## Heading 2
### Heading 3
**bold** or __bold__
*italic* or _italic_
~~strikethrough~~
`inline code`
underlined
- Bullet list
- Item 2
1. Numbered list
2. Item 2
[Link text](https://example.com)


| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
> Blockquote
```
Code block
```
---
Horizontal rule
```
--------------------------------
### Enable Attachment Tracking with attachmentResource
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Configure the `attachments` object to enable tracking of images and videos. Specify the `attachmentResource` to identify the AdminForth resource for storing attachment metadata.
```typescript
new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'blog_images',
// ... other attachment options
}
})
```
--------------------------------
### Configure Documentation/Code Toolbar
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Configures a Markdown plugin toolbar suitable for technical documentation, including headings, lists, links, and code blocks.
```typescript
new MarkdownPlugin({
fieldName: 'documentation',
topPanelSettings: {
bold: true,
italic: true,
underline: false,
strike: false,
h1: true,
h2: true,
h3: true,
ul: true,
ol: true,
link: true,
codeBlock: true
}
})
```
--------------------------------
### Import Main Plugin Class - CommonJS Style
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Import the MarkdownPlugin using CommonJS-style import syntax. This works due to the 'esnext' module setting in tsconfig.json.
```typescript
// CommonJS-style (works due to esnext module)
import MarkdownPlugin from '@adminforth/markdown';
```
--------------------------------
### Peer Dependencies Configuration
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Specifies that the 'adminforth' package, version 2.50.0 or higher, is a required peer dependency. This ensures compatibility with the AdminForth framework.
```json
{
"adminforth": "^2.50.0"
}
```
--------------------------------
### Extract Storage Key from HTTPS URL
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Demonstrates how the plugin extracts storage keys from HTTPS URLs. Query strings and hashes are automatically stripped.
```text
https://cdn.example.com/uploads/images/photo.jpg
→ Storage key: uploads/images/photo.jpg
```
--------------------------------
### Essential Imports for Markdown Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Import the MarkdownPlugin and its PluginOptions type for setting up the plugin.
```typescript
import MarkdownPlugin from '@adminforth/markdown';
import type { PluginOptions } from '@adminforth/markdown';
```
--------------------------------
### Catching Plugin Initialization Errors
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Catch errors that occur when initializing AdminForth with plugins, such as when a specified field does not exist.
```typescript
try {
const admin = new AdminForth({
resources: [
{
resourceId: 'posts',
columns: [
{ name: 'content', type: 'text' }
],
plugins: [
new MarkdownPlugin({
fieldName: 'body' // Field doesn't exist!
})
]
}
]
});
} catch (error) {
console.error('Plugin initialization failed:', error.message);
// Error: Column body not found in resource posts
}
```
--------------------------------
### Markdown Plugin Configuration: Image Attachments
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure image attachment settings, including the resource storage location, field names for file path, record ID, resource ID, and metadata like title and alt text.
```typescript
attachments: {
attachmentResource: 'images',
attachmentFieldName: 'path',
attachmentRecordIdFieldName: 'post_id',
attachmentResourceIdFieldName: 'resource_id',
attachmentTitleFieldName: 'title',
attachmentAltFieldName: 'alt'
}
```
--------------------------------
### MarkdownPlugin Options Interface
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/README.md
Defines the structure for configuring the MarkdownPlugin. Includes required and optional properties for field name, attachments, toolbar settings, and preview behavior.
```typescript
interface PluginOptions {
fieldName: string; // Required: Markdown field name
attachments?: { /* ... */ }; // Optional: Image tracking
topPanelSettings?: { /* ... */ }; // Optional: Toolbar buttons
compactShowPreview?: boolean; // Optional: Preview styling
maxShowViewContainerHeightPx?: number; // Optional: Preview height limit
}
```
--------------------------------
### Import PluginOptions Type
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/index.md
Import the PluginOptions type definition from the package.
```typescript
import { PluginOptions } from '@adminforth/markdown';
```
--------------------------------
### Markdown Plugin with Attachments
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Enable image tracking by configuring attachment resources and fields. This is useful for managing images within Markdown content.
```typescript
new MarkdownPlugin({
fieldName: 'body',
attachments: {
attachmentResource: 'post_images',
attachmentFieldName: 'image_path',
attachmentRecordIdFieldName: 'post_id',
attachmentResourceIdFieldName: 'post_resource_id',
attachmentTitleFieldName: 'title',
attachmentAltFieldName: 'alt_text'
}
})
```
--------------------------------
### Markdown Plugin Configuration with Attachment Tracking
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Configures the Markdown plugin to enable attachment tracking. Specifies the attachment resource and the corresponding field names for mapping embedded media.
```typescript
const postResource = {
resourceId: 'blog_posts',
label: 'Blog Posts',
columns: [
{ name: 'id', type: 'integer', primaryKey: true },
{ name: 'title', type: 'string' },
{ name: 'body', type: 'text' }
],
plugins: [
new MarkdownPlugin({
fieldName: 'body',
attachments: {
attachmentResource: 'blog_images',
attachmentFieldName: 'image_path',
attachmentRecordIdFieldName: 'blog_post_id',
attachmentResourceIdFieldName: 'blog_resource_id',
attachmentTitleFieldName: 'title',
attachmentAltFieldName: 'alt_text'
}
})
]
};
```
--------------------------------
### NPM Publishing Configuration
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Specifies that the package should be published with public access to the NPM registry. This is a standard configuration for open-source packages.
```json
{
"publishConfig": {
"access": "public"
}
}
```
--------------------------------
### Extract Storage Key from Protocol-Relative URL
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Shows extraction of storage keys from protocol-relative URLs.
```text
//cdn.example.com/uploads/images/photo.jpg
→ Storage key: uploads/images/photo.jpg
```
--------------------------------
### TypeScript Compiler Options
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Configuration for the TypeScript compiler, defining module format, target ECMAScript version, module resolution strategy, strict type checking, and output directory.
```json
{
"compilerOptions": {
"module": "esnext",
"target": "ES2020",
"moduleResolution": "bundler",
"strict": true,
"declaration": true,
"declarationMap": true,
"outDir": "./dist"
}
}
```
--------------------------------
### Attachment Resource Configuration for Markdown Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Defines an attachment resource for storing metadata about images and videos embedded in Markdown content. Requires the Upload Plugin and a public-access storage adapter.
```typescript
const attachmentResource = {
resourceId: 'blog_images',
label: 'Blog Images',
columns: [
{ name: 'id', type: 'integer', primaryKey: true },
{ name: 'image_path', type: 'string' },
{ name: 'image_url', type: 'string', hidden: true },
{ name: 'blog_post_id', type: 'integer' },
{ name: 'blog_resource_id', type: 'string' },
{ name: 'alt_text', type: 'string', nullable: true },
{ name: 'title', type: 'string', nullable: true },
{ name: 'uploaded_at', type: 'datetime', defaultValue: () => new Date() }
],
plugins: [
new UploadPlugin({
pathColumnName: 'image_path',
previewColumnName: 'image_url',
storageAdapter: new S3StorageAdapter({
// Configure S3 with public access
acl: 'public-read'
})
})
]
};
```
--------------------------------
### Modify Resource Configuration for Markdown
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Use this method to configure a resource to use the Markdown plugin, setting up components for editing and displaying Markdown content, and enabling attachment support.
```typescript
const plugin = new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'blog_images',
attachmentFieldName: 'image_path',
attachmentRecordIdFieldName: 'blog_id',
attachmentResourceIdFieldName: 'blog_resource_id'
}
});
await plugin.modifyResourceConfig(adminforth, resourceConfig);
```
--------------------------------
### Enable Heavy Debug Logging
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Enable verbose logging for attachment processing by setting the `HEAVY_DEBUG` environment variable to `1` when running the development server.
```bash
HEAVY_DEBUG=1 npm run dev
```
--------------------------------
### Configure Shared Attachments for Pages
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Configures shared attachments for the 'pages' resource, utilizing the same 'shared_media' attachment resource.
```typescript
// Pages resource — uses same attachment resource
{
resourceId: 'pages',
plugins: [
new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'shared_media',
attachmentFieldName: 'file_path',
attachmentRecordIdFieldName: 'parent_record_id',
attachmentResourceIdFieldName: 'parent_resource_id'
}
})
]
}
```
--------------------------------
### Markdown Plugin Configuration: Toolbar Buttons
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Configure which toolbar buttons are displayed in the editor. Set to 'false' to hide a button, or omit/set to 'undefined' to use the default.
```typescript
topPanelSettings: {
bold: true,
italic: true,
underline: true,
strike: false,
h1: true,
h2: true,
h3: true,
ul: true,
ol: true,
link: true,
codeBlock: true
}
```
--------------------------------
### Import Main Plugin Class - Named Import Style
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Import the MarkdownPlugin using a named import, aliasing the default export. This is less common for the default export.
```typescript
// With named import (not typically used)
import { default as MarkdownPlugin } from '@adminforth/markdown';
```
--------------------------------
### AdminForth Peer Dependency
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
Defines the compatible version range for the AdminForth framework. The plugin requires AdminForth version 2.50.0 or later.
```json
{
"peerDependencies": {
"adminforth": "^2.50.0"
}
}
```
--------------------------------
### Smart Text Wrapping Utility
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
The `toggleWrapSmart` function provides intelligent text wrapping for Markdown formatting. It handles single and multiple selections, toggling markers on/off, and supports undo operations.
```typescript
export function toggleWrapSmart(
ed: monaco.editor.IStandaloneCodeEditor,
left: string,
right: string = left,
): void
```
--------------------------------
### Markdown Plugin Options Interface
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Defines the main configuration for the Markdown plugin. Use this interface to specify the content field name, attachment settings, and toolbar preferences.
```typescript
export interface PluginOptions extends PluginsCommonOptions {
fieldName: string;
attachments?: {
attachmentResource: string;
attachmentFieldName: string;
attachmentRecordIdFieldName: string;
attachmentResourceIdFieldName: string;
attachmentTitleFieldName?: string;
attachmentAltFieldName?: string;
};
topPanelSettings?: {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strike?: boolean;
h1?: boolean;
h2?: boolean;
h3?: boolean;
ul?: boolean;
ol?: boolean;
link?: boolean;
codeBlock?: boolean;
};
compactShowPreview?: boolean;
maxShowViewContainerHeightPx?: number;
}
```
--------------------------------
### validateConfigAfterDiscover
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Validates that the configured field exists in the resource and has a compatible column type. Called automatically during plugin initialization by AdminForth.
```APIDOC
## validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource): void
### Description
Validates that the configured field exists in the resource and has a compatible column type. Called automatically during plugin initialization by AdminForth.
### Method
`validateConfigAfterDiscover`
### Endpoint
N/A (Instance Method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters
- **adminforth** (`IAdminForth`) - Required - The AdminForth instance.
- **resourceConfig** (`AdminForthResource`) - Required - The resource configuration object.
### Request Example
```typescript
// This will throw if 'description' field doesn't exist or has wrong type
plugin.validateConfigAfterDiscover(adminforth, resourceConfig);
```
### Response
#### Success Response (200)
None
#### Response Example
None
### Throws
- `Error` - If the field specified in `options.fieldName` does not exist in the resource columns
- `Error` - If the field type is not one of: `'string'`, `'text'`, or `'richtext'`
```
--------------------------------
### instanceUniqueRepresentation
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Returns a unique identifier string for this plugin instance based on the field name. Used internally by AdminForth to distinguish between multiple plugin instances.
```APIDOC
## instanceUniqueRepresentation(pluginOptions: any): string
### Description
Returns a unique identifier string for this plugin instance based on the field name. Used internally by AdminForth to distinguish between multiple plugin instances.
### Method
`instanceUniqueRepresentation`
### Endpoint
N/A (Instance Method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters
- **pluginOptions** (`any`) - Required - The plugin options object containing at minimum a `fieldName` property.
### Request Example
```typescript
const plugin = new MarkdownPlugin({ fieldName: 'content' });
const id = plugin.instanceUniqueRepresentation({ fieldName: 'content' });
console.log(id); // Outputs: "content"
```
### Response
#### Success Response (200)
- **Return Value** (`string`) - The field name from the plugin options, used as the unique identifier for this plugin instance.
#### Response Example
```json
"content"
```
```
--------------------------------
### Plugin Options Type Definition
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Defines the structure for configuring the Markdown plugin, including required and optional fields for attachments and top panel settings.
```typescript
interface PluginOptions {
fieldName: string; // Required
attachments?: {
attachmentResource: string;
attachmentFieldName: string;
attachmentRecordIdFieldName: string;
attachmentResourceIdFieldName: string;
attachmentTitleFieldName?: string;
attachmentAltFieldName?: string;
};
topPanelSettings?: {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strike?: boolean;
h1?: boolean;
h2?: boolean;
h3?: boolean;
ul?: boolean;
ol?: boolean;
link?: boolean;
codeBlock?: boolean;
};
compactShowPreview?: boolean; // Optional, default: true
maxShowViewContainerHeightPx?: number; // Optional, default: undefined
}
```
--------------------------------
### Button Visibility Control Logic
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Defines the logic for controlling button visibility based on `topPanelSettings` configuration. Buttons are visible by default or if specific settings are undefined or true.
```typescript
isBtnVisible(btnKey: string): boolean
```
--------------------------------
### Normalize Image Titles in Markdown
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Shows how image titles in Markdown are normalized by removing trailing parenthetical and bracket content before storage.
```markdown
")
→ Stored as: "Title"

→ Stored as: "Long Title"
```
--------------------------------
### MarkdownPlugin Class Definition
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Defines the structure and properties of the MarkdownPlugin class, extending AdminForthPlugin.
```typescript
export default class MarkdownPlugin extends AdminForthPlugin {
options: PluginOptions;
resourceConfig!: AdminForthResource;
adminforth!: IAdminForth;
uploadPlugin: AdminForthPlugin;
attachmentResource: AdminForthResource = undefined;
constructor(options: PluginOptions);
instanceUniqueRepresentation(pluginOptions: any): string;
validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource): void;
modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource): Promise;
isUrlFromPlugin(url: string): Promise;
}
```
--------------------------------
### Extract Image Metadata from Markdown
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Parses Markdown image syntax to extract alt text and title. Handles images with and without titles, and empty alt text.
```markdown

→ alt: "alt text", title: null

→ alt: "alt text", title: "Image Title"

→ alt: "", title: null
→ Tracked as video attachment
```
--------------------------------
### Markdown Plugin Configuration: Field Name
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/quick-reference.md
Specify the 'fieldName' option, which must correspond to a column of type 'string', 'text', or 'richtext' in your data model.
```typescript
fieldName: 'content'
```
--------------------------------
### Markdown Plugin with Toolbar Customization
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Customize the Markdown editor's toolbar by hiding or showing specific formatting buttons. Use `true` to show and `false` to hide buttons.
```typescript
new MarkdownPlugin({
fieldName: 'content',
topPanelSettings: {
h1: false, // Hide H1 button
h2: false, // Hide H2 button
codeBlock: false, // Hide code block button
strike: true, // Explicitly show strikethrough
// Other buttons use defaults
}
})
```
--------------------------------
### Schema for Shared Media Attachment Resource
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/integration-patterns.md
Defines the schema for the 'shared_media' attachment resource, including fields for file path and parent resource identification.
```typescript
// Attachment resource schema
{
resourceId: 'shared_media',
columns: [
{ name: 'id', type: 'integer', primaryKey: true },
{ name: 'file_path', type: 'string' },
{ name: 'parent_record_id', type: 'integer' },
{ name: 'parent_resource_id', type: 'string' }, // 'blog_posts' or 'pages'
]
}
```
--------------------------------
### Validate MarkdownPlugin Configuration
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Validates the MarkdownPlugin's configuration against the AdminForth resource, ensuring the specified field exists and has a compatible type.
```typescript
// This will throw if 'description' field doesn't exist or has wrong type
plugin.validateConfigAfterDiscover(adminforth, resourceConfig);
```
--------------------------------
### Check if URL Belongs to Upload Plugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Verify if a given URL is served by the plugin's configured upload storage. This is useful for internal tracking of attachments.
```typescript
const isInternal = await plugin.isUrlFromPlugin('/uploaded-images/photo.jpg');
console.log(isInternal); // true or false based on upload plugin
```
--------------------------------
### Configure Attachment Title Field
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Optionally specify the column for storing image titles extracted from Markdown syntax. This is useful for tracking titles used in ``.
```typescript
attachments: {
attachmentTitleFieldName: 'image_title',
// ...
}
```
```typescript
{
name: 'image_title',
type: 'string',
// Stores extracted titles from Markdown
}
```
--------------------------------
### Configure Attachment Alt Text Field
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Optionally specify the column for storing image alt text extracted from Markdown syntax. This is useful for accessibility and SEO.
```typescript
attachments: {
attachmentAltFieldName: 'image_alt',
// ...
}
```
```typescript
{
name: 'image_alt',
type: 'string',
}
```
--------------------------------
### MarkdownPlugin Class
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/index.md
The default export is the MarkdownPlugin class, which extends AdminForthPlugin. It is used to integrate Markdown editing capabilities into AdminForth applications.
```APIDOC
## MarkdownPlugin Class
### Description
The `MarkdownPlugin` class is the main export of the `@adminforth/markdown` package. It extends the base `AdminForthPlugin` class and provides Markdown editing capabilities for AdminForth applications.
### Usage
```typescript
import MarkdownPlugin from '@adminforth/markdown';
// Instantiate the plugin with options
const markdownPlugin = new MarkdownPlugin({ fieldName: 'content' });
```
### Constructor
`new MarkdownPlugin(options: PluginOptions)`
#### Parameters
- **options** (`PluginOptions`) - Required - Configuration options for the Markdown plugin.
- **fieldName** (`string`) - Required - The name of the field in the resource that will be treated as Markdown content.
```
--------------------------------
### Default Export Class Definition
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/module-structure.md
The package's default export is the MarkdownPlugin class, which extends AdminForthPlugin. This class contains the core implementation of the markdown functionality.
```typescript
export default class MarkdownPlugin extends AdminForthPlugin {
// ... implementation
}
```
--------------------------------
### Configure Attachment Field Name
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
When using attachments, set `attachmentFieldName` to the column in the attachment resource that stores the file path or storage key. This column requires the Upload Plugin and public storage configuration.
```typescript
attachments: {
attachmentResource: 'blog_images',
attachmentFieldName: 'file_path', // <-- Points to the file storage column
// ...
}
```
--------------------------------
### MarkdownRenderer.vue Props
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Defines the props accepted by the MarkdownRenderer.vue component, including column definition, record data, and metadata for preview settings.
```typescript
defineProps<{
column: any;
record: any;
meta: {
pluginInstanceId: string;
compactShowPreview?: boolean;
maxShowViewContainerHeightPx?: number;
}
}>()
```
--------------------------------
### MarkdownEditor.vue Props
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Defines the props accepted by the MarkdownEditor.vue component, including column definition, record data, and component metadata.
```typescript
defineProps<{
column: any,
record: any,
meta: any,
}>()
```
--------------------------------
### topPanelButtons.vue Props
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/components-and-utilities.md
Defines the props for the topPanelButtons.vue component, which include the Monaco Editor instance and metadata for toolbar configuration.
```typescript
defineProps<{
editor: monaco.editor.IStandaloneCodeEditor | null;
meta: any;
}>()
```
--------------------------------
### modifyResourceConfig
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Modifies the resource configuration to register custom Vue components for editing and rendering the Markdown field. It sets up renderers, configures attachment linking, registers lifecycle hooks, and validates attachment configuration.
```APIDOC
## `modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource): Promise`
### Description
Modifies the resource configuration to register custom Vue components for editing and rendering the Markdown field. This method sets up component renderers, configures attachment resource linking, registers hooks for create/edit/delete lifecycle events, and validates attachment resource configuration.
### Parameters
#### Path Parameters
- None
#### Query Parameters
- None
#### Request Body
- None
### Method
- Not applicable (this is a method call, not an HTTP endpoint)
### Endpoint
- Not applicable
### Parameters
#### Parameters
- **adminforth** (`IAdminForth`) - Required - The AdminForth instance used to access resource and plugin data
- **resourceConfig** (`AdminForthResource`) - Required - The resource configuration to be modified
### Request Example
```typescript
const plugin = new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResource: 'blog_images',
attachmentFieldName: 'image_path',
attachmentRecordIdFieldName: 'blog_id',
attachmentResourceIdFieldName: 'blog_resource_id'
}
});
await plugin.modifyResourceConfig(adminforth, resourceConfig);
```
### Response
#### Success Response (void)
- Completes when configuration modification is finished.
#### Response Example
- None (returns Promise)
### Throws
- `Error` — If `options.attachments.attachmentResource` does not exist in the AdminForth config
- `Error` — If the attachment field specified in `options.attachments.attachmentFieldName` does not exist
- `Error` — If attachment title or alt fields are specified but don't exist
- `Error` — If the Upload Plugin is not installed on the attachment field
- `Error` — If the storage adapter is not configured for public access
```
--------------------------------
### isUrlFromPlugin
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/api-reference-markdown-plugin.md
Checks whether a URL belongs to the configured upload plugin's storage. This is used internally to identify which attachments should be tracked in the database.
```APIDOC
## `isUrlFromPlugin(url: string): Promise`
### Description
Checks whether a URL belongs to the configured upload plugin's storage. This method is used internally to identify which attachments should be tracked in the database.
### Parameters
#### Path Parameters
- None
#### Query Parameters
- None
#### Request Body
- None
### Method
- Not applicable (this is a method call, not an HTTP endpoint)
### Endpoint
- Not applicable
### Parameters
#### Parameters
- **url** (`string`) - Required - The URL to check (supports absolute URLs, protocol-relative URLs, and local paths)
### Request Example
```typescript
const isInternal = await plugin.isUrlFromPlugin('/uploaded-images/photo.jpg');
console.log(isInternal); // true or false based on upload plugin
```
### Response
#### Success Response (boolean)
- Resolves to `true` if the URL belongs to the upload plugin, `false` otherwise.
#### Response Example
- `true` or `false`
### Details
- Returns `false` if no upload plugin is configured
- Calls `uploadPlugin.isInternalUrl()` if available
- Logs errors and returns `false` on failures
- Is called internally by image attachment metadata extraction
```
--------------------------------
### Configure Attachment Record ID Field Name
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Specify `attachmentRecordIdFieldName` to link attachment records to their parent Markdown content record. This is crucial for managing attachments across multiple records in the parent resource.
```typescript
attachments: {
attachmentRecordIdFieldName: 'blog_post_id', // Stores the ID from the blog_posts table
// ...
}
```
--------------------------------
### Internal MarkdownImageRef Type Definition
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Internal type used by the Monaco Editor for image preview rendering. It specifies the line number and source of an image reference.
```typescript
type MarkdownImageRef = {
lineNumber: number;
src: string;
};
```
--------------------------------
### Configure Attachment Resource ID Field
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/configuration.md
Specify the column storing the attachment resource ID when attachments are shared across multiple parent resources. This is required if the 'attachments' object is provided.
```typescript
new MarkdownPlugin({
fieldName: 'content',
attachments: {
attachmentResourceIdFieldName: 'parent_resource_id', // Stores 'blog_posts' or 'pages'
attachmentRecordIdFieldName: 'parent_record_id', // Stores the specific post/page ID
// ...
}
})
```
--------------------------------
### Internal AttachmentMeta Type Definition
Source: https://github.com/devforth/adminforth-markdown/blob/main/_autodocs/types.md
Internal type used for processing image metadata extracted from Markdown. It tracks the storage key, alt text, and title of attachments.
```typescript
type AttachmentMeta = {
key: string;
alt: string | null;
title: string | null
};
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.