Enterprise Plugins

Detailed React and Web Component examples for advanced workflows

Overview

Enterprise plugins are available at @editora/plugins/enterprise for React and by plugin IDs in Web Components. Full, lite, and enterprise plugin paths are all free and customizable.

React Setup Pattern

import { EditoraEditor } from "@editora/react";
import {
 MentionPlugin,
 TrackChangesPlugin,
 VersionDiffPlugin
} from "@editora/plugins/enterprise";

const plugins = [
 MentionPlugin(),
 TrackChangesPlugin(),
 VersionDiffPlugin()
];

Web Component Setup Pattern

<editora-editor
 id="enterprise-editor"
 plugins="mention trackChanges version-diff"
 toolbar-items="mention | trackChanges versionDiff"
></editora-editor>

<script type="module">
const editor = document.getElementById("enterprise-editor");
await editor.setConfig({
 pluginConfig: {
 mention: { minChars: 1, maxSuggestions: 8 },
 trackChanges: { author: "QA Reviewer" },
 "version-diff": { mode: "word" }
 }
});
</script>

Detailed Plugin Examples

Mention - contextual @mentions with API/local suggestions 
MentionPlugin({
 triggerChars: ["@"],
 minChars: 1,
 maxSuggestions: 8,
 items: [
 { id: "u-1", label: "Ajay Kumar", meta: "Product Owner" },
 { id: "u-2", label: "Nina Chen", meta: "Translator" }
 ]
});
<editora-editor id="mention-demo" plugins="mention"></editora-editor>
<script type="module">
await document.getElementById("mention-demo").setConfig({
 pluginConfig: { mention: { triggerChars: ["@"], minChars: 1, maxSuggestions: 8 } }
});
</script>
Track Changes - reviewer-author diffs and accept/reject workflow 
TrackChangesPlugin({
 author: "Legal Reviewer",
 enabledByDefault: true,
 includeTimestamp: true
});
<editora-editor id="track-demo" plugins="trackChanges"></editora-editor>
<script type="module">
await document.getElementById("track-demo").setConfig({
 pluginConfig: {
 trackChanges: { author: "Legal Reviewer", enabledByDefault: true, includeTimestamp: true }
 }
});
</script>
Version Diff - compare baseline vs current draft 
VersionDiffPlugin({
 mode: "word",
 ignoreWhitespace: true,
 maxTokens: 20000
});
<editora-editor id="diff-demo" plugins="version-diff"></editora-editor>
<script type="module">
await document.getElementById("diff-demo").setConfig({
 pluginConfig: { "version-diff": { mode: "word", ignoreWhitespace: true, maxTokens: 20000 } }
});
</script>
Conditional Content - audience/locale-driven blocks 
ConditionalContentPlugin({
 defaultCondition: "country === 'US'",
 currentAudience: ["enterprise"],
 currentLocale: ["en-US"],
 enableElseByDefault: true
});
<editora-editor id="conditional-demo" plugins="conditional-content"></editora-editor>
<script type="module">
await document.getElementById("conditional-demo").setConfig({
 pluginConfig: {
 "conditional-content": {
 defaultCondition: "country === 'US'",
 currentAudience: ["enterprise"],
 currentLocale: ["en-US"],
 enableElseByDefault: true
 }
 }
});
</script>
Data Binding - runtime token resolution from data sources 
DataBindingPlugin({
 data: {
 customer: { name: "Acme Corp", tier: "Gold" },
 invoice: { total: 12500.55 }
 },
 defaultFormat: "text",
 defaultFallback: "N/A"
});
<editora-editor id="binding-demo" plugins="data-binding"></editora-editor>
<script type="module">
await document.getElementById("binding-demo").setConfig({
 pluginConfig: {
 "data-binding": {
 data: {
 customer: { name: "Acme Corp", tier: "Gold" },
 invoice: { total: 12500.55 }
 },
 defaultFormat: "text",
 defaultFallback: "N/A"
 }
 }
});
</script>
Content Rules - policy linting and editorial quality gates 
ContentRulesPlugin({
 bannedWords: ["obviously", "simply"],
 requiredHeadings: ["Overview", "Risks"],
 maxSentenceWords: 25,
 enableRealtime: true
});
<editora-editor id="rules-demo" plugins="content-rules"></editora-editor>
<script type="module">
await document.getElementById("rules-demo").setConfig({
 pluginConfig: {
 "content-rules": {
 bannedWords: ["obviously", "simply"],
 requiredHeadings: ["Overview", "Risks"],
 maxSentenceWords: 25,
 enableRealtime: true
 }
 }
});
</script>
Citations - legal/academic citation and bibliography support 
CitationsPlugin({
 defaultStyle: "apa",
 enableFootnoteSync: true,
 maxRecentCitations: 15
});
<editora-editor id="citations-demo" plugins="citations"></editora-editor>
<script type="module">
await document.getElementById("citations-demo").setConfig({
 pluginConfig: {
 citations: { defaultStyle: "apa", enableFootnoteSync: true, maxRecentCitations: 15 }
 }
});
</script>
Approval Workflow - draft/review/approved lifecycle 
ApprovalWorkflowPlugin({
 defaultStatus: "draft",
 lockOnApproval: true,
 requireCommentOnApprove: true,
 defaultActor: "Ops Lead"
});
<editora-editor id="approval-demo" plugins="approval-workflow"></editora-editor>
<script type="module">
await document.getElementById("approval-demo").setConfig({
 pluginConfig: {
 "approval-workflow": {
 defaultStatus: "draft",
 lockOnApproval: true,
 requireCommentOnApprove: true,
 defaultActor: "Ops Lead"
 }
 }
});
</script>
PII Redaction - scan and redact sensitive information 
PIIRedactionPlugin({
 enableRealtime: true,
 redactionMode: "mask",
 maskChar: "•",
 maxFindings: 200,
 detectors: { email: true, phone: true, jwt: true, "api-key": true }
});
<editora-editor id="pii-demo" plugins="pii-redaction"></editora-editor>
<script type="module">
await document.getElementById("pii-demo").setConfig({
 pluginConfig: {
 "pii-redaction": {
 enableRealtime: true,
 redactionMode: "mask",
 maskChar: "•",
 maxFindings: 200,
 detectors: { email: true, phone: true, jwt: true, "api-key": true }
 }
 }
});
</script>
Smart Paste - source-aware cleanup for Word/Docs/HTML 
SmartPastePlugin({
 enabled: true,
 defaultProfile: "balanced",
 normalizeWhitespace: false,
 profileOptions: {
 fidelity: { keepStyles: true, preserveTables: true },
 plain: { keepStyles: false, keepClasses: false }
 }
});
<editora-editor id="paste-demo" plugins="smart-paste"></editora-editor>
<script type="module">
await document.getElementById("paste-demo").setConfig({
 pluginConfig: {
 "smart-paste": {
 enabled: true,
 defaultProfile: "balanced",
 normalizeWhitespace: false,
 profileOptions: {
 fidelity: { keepStyles: true, preserveTables: true },
 plain: { keepStyles: false, keepClasses: false }
 }
 }
 }
});
</script>
Blocks Library - reusable content block insertion 
BlocksLibraryPlugin({
 maxResults: 50,
 maxRecentBlocks: 10,
 blocks: [
 { id: "hero", label: "Hero Banner", category: "Marketing", html: "<h2>Launch</h2><p>Campaign copy</p>" },
 { id: "cta", label: "CTA", category: "Marketing", html: "<p><a href='#'>Get started</a></p>" }
 ]
});
<editora-editor id="blocks-demo" plugins="blocks-library"></editora-editor>
<script type="module">
await document.getElementById("blocks-demo").setConfig({
 pluginConfig: {
 "blocks-library": {
 maxResults: 50,
 maxRecentBlocks: 10,
 blocks: [
 { id: "hero", label: "Hero Banner", category: "Marketing", html: "<h2>Launch</h2><p>Campaign copy</p>" }
 ]
 }
 }
});
</script>
Document Schema - enforce document section structure 
DocSchemaPlugin({
 enableRealtime: true,
 defaultSchemaId: "release-notes",
 schemas: [
 {
 id: "release-notes",
 label: "Release Notes",
 strictOrder: true,
 sections: [
 { id: "summary", title: "Summary", minOccurrences: 1, maxOccurrences: 1 },
 { id: "impacts", title: "Customer Impact", minOccurrences: 1, maxOccurrences: 1 }
 ]
 }
 ]
});
<editora-editor id="schema-demo" plugins="doc-schema"></editora-editor>
<script type="module">
await document.getElementById("schema-demo").setConfig({
 pluginConfig: {
 "doc-schema": {
 enableRealtime: true,
 defaultSchemaId: "release-notes",
 schemas: [
 {
 id: "release-notes",
 label: "Release Notes",
 strictOrder: true,
 sections: [
 { id: "summary", title: "Summary", minOccurrences: 1, maxOccurrences: 1 },
 { id: "impacts", title: "Customer Impact", minOccurrences: 1, maxOccurrences: 1 }
 ]
 }
 ]
 }
 }
});
</script>
Translation Workflow - source capture, segment locks, locale QA 
TranslationWorkflowPlugin({
 sourceLocale: "en-US",
 targetLocale: "fr-FR",
 enableRealtime: true,
 segmentSelector: "p, li, td",
 localeRules: [
 { locale: "fr-FR", minLengthRatio: 0.7, maxLengthRatio: 1.5, preserveTokens: true }
 ]
});
<editora-editor id="translation-demo" plugins="translation-workflow"></editora-editor>
<script type="module">
await document.getElementById("translation-demo").setConfig({
 pluginConfig: {
 "translation-workflow": {
 sourceLocale: "en-US",
 targetLocale: "fr-FR",
 enableRealtime: true,
 segmentSelector: "p, li, td",
 localeRules: [
 { locale: "fr-FR", minLengthRatio: 0.7, maxLengthRatio: 1.5, preserveTokens: true }
 ]
 }
 }
});
</script>
Slash Commands - command palette from / trigger 
SlashCommandsPlugin({
 triggerChar: "/",
 minChars: 0,
 includeDefaultItems: true,
 items: [
 { id: "insert-warning", label: "Warning Box", insertHTML: "<blockquote>⚠ Review required</blockquote>" }
 ]
});
<editora-editor id="slash-demo" plugins="slash-commands"></editora-editor>
<script type="module">
await document.getElementById("slash-demo").setConfig({
 pluginConfig: {
 "slash-commands": {
 triggerChar: "/",
 minChars: 0,
 includeDefaultItems: true,
 items: [
 { id: "insert-warning", label: "Warning Box", insertHTML: "<blockquote>⚠ Review required</blockquote>" }
 ]
 }
 }
});
</script>
Spell Check - in-editor spelling diagnostics 
SpellCheckPlugin();
<editora-editor
 id="spell-demo"
 plugins="spellCheck"
 spellcheck='{"enabled":true,"provider":"browser"}'
></editora-editor>
A11y Checker - content accessibility checks 
A11yCheckerPlugin();
<editora-editor
 id="a11y-demo"
 plugins="a11yChecker"
 accessibility='{"enableARIA":true,"keyboardNavigation":true,"checker":true}'
></editora-editor>
Comments - inline review comments and discussion threads 
CommentsPlugin();
<editora-editor id="comments-demo" plugins="comments"></editora-editor>
Merge Tag - CRM/transactional personalization tokens 
MergeTagPlugin({
 categories: [
 {
 id: "CUSTOMER",
 name: "Customer",
 tags: [
 { key: "first_name", label: "First Name", value: "{{customer.first_name}}", preview: "Ava" },
 { key: "email", label: "Email", value: "{{customer.email}}", preview: "ava@acme.com" }
 ]
 }
 ],
 defaultCategory: "CUSTOMER",
 tokenTemplate: "{value}"
});
<editora-editor id="mergetag-demo" plugins="mergeTag"></editora-editor>
<script type="module">
await document.getElementById("mergetag-demo").setConfig({
 pluginConfig: {
 mergeTag: {
 categories: [
 {
 id: "CUSTOMER",
 name: "Customer",
 tags: [
 { key: "first_name", label: "First Name", value: "{{customer.first_name}}" }
 ]
 }
 ],
 defaultCategory: "CUSTOMER"
 }
 }
});
</script>
Template - curated starter documents 
import { TemplatePlugin, addCustomTemplate } from "@editora/plugins/enterprise";

addCustomTemplate({
 id: "incident-postmortem",
 name: "Incident Postmortem",
 category: "Operations",
 description: "Root-cause and corrective action structure",
 html: "<h1>Incident Summary</h1><p>Impact...</p>"
});

TemplatePlugin();
<editora-editor id="template-demo" plugins="template"></editora-editor>
<!-- Register templates before editor mount in host app bootstrap code -->
Media Manager - managed uploads and media library 
import { MediaManagerPlugin, setMediaManagerConfig } from "@editora/plugins/enterprise";

setMediaManagerConfig({
 apiUrl: "https://api.acme.com",
 apiEndpoints: {
 upload: "/media/upload",
 library: "/media/library",
 delete: "/media/library"
 },
 maxFileSize: 25 * 1024 * 1024,
 allowedTypes: ["image/jpeg", "image/png", "video/mp4"]
});

MediaManagerPlugin();
<editora-editor id="media-demo" plugins="image"></editora-editor>
<!-- "image" plugin id maps to Media Manager in Web Components -->
Document Manager - export workflows (Word and fallback) 
import { DocumentManagerPlugin, setDocumentManagerConfig } from "@editora/plugins/enterprise";

setDocumentManagerConfig({
 apiUrl: "https://api.acme.com",
 apiEndpoints: { exportWord: "/documents/export-word" },
 useClientSideFallback: true
});

DocumentManagerPlugin();
<editora-editor id="document-demo" plugins="document-manager"></editora-editor>
← Back to Features