### 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

Welcome

This is bold and this is italic.

Click here

``` -------------------------------- ### 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) ![Alt text](image.jpg) ![Alt text](image.jpg "Image title") | 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 ![alt](image.jpg "Title (meta)") → Stored as: "Title" ![alt](image.jpg "Long Title [class:dark]") → 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 text](image.jpg) → alt: "alt text", title: null ![alt text](image.jpg "Image Title") → alt: "alt text", title: "Image Title" ![](image.jpg) → 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 `![alt](url "title")`. ```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.