tessl/npm-mantine--tiptap

Rich text editor React component library based on Tiptap with extensive formatting controls and Mantine integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Labels and Internationalization

Name: tessl/npm-mantine--tiptap
Author: tessl

Comprehensive labeling system for accessibility and internationalization support with 40+ customizable labels. The system provides complete ARIA label coverage and supports full localization of the editor interface.

Capabilities

DEFAULT_LABELS Constant

Complete set of default English labels for all editor controls and UI elements.

/**
 * Default English labels for all editor controls
 * Provides complete accessibility and internationalization support
 */
const DEFAULT_LABELS: RichTextEditorLabels;

Usage Example:

import { DEFAULT_LABELS } from "@mantine/tiptap";

// Access default labels
console.log(DEFAULT_LABELS.boldControlLabel); // "Bold"
console.log(DEFAULT_LABELS.linkControlLabel); // "Link"

// Use as base for custom labels
const customLabels = {
  ...DEFAULT_LABELS,
  boldControlLabel: "Bold Text (Ctrl+B)",
  italicControlLabel: "Italic Text (Ctrl+I)",
};

RichTextEditorLabels Interface

Complete TypeScript interface defining all available labels for editor controls and UI elements.

interface RichTextEditorLabels {
  /** RichTextEditor.Bold control aria-label */
  boldControlLabel: string;
  /** RichTextEditor.Italic control aria-label */
  italicControlLabel: string;
  /** RichTextEditor.Underline control aria-label */
  underlineControlLabel: string;
  /** RichTextEditor.Strike control aria-label */
  strikeControlLabel: string;
  /** RichTextEditor.ClearFormatting control aria-label */
  clearFormattingControlLabel: string;
  
  /** RichTextEditor.H1 control aria-label */
  h1ControlLabel: string;
  /** RichTextEditor.H2 control aria-label */
  h2ControlLabel: string;
  /** RichTextEditor.H3 control aria-label */
  h3ControlLabel: string;
  /** RichTextEditor.H4 control aria-label */
  h4ControlLabel: string;
  /** RichTextEditor.H5 control aria-label */
  h5ControlLabel: string;
  /** RichTextEditor.H6 control aria-label */
  h6ControlLabel: string;
  
  /** RichTextEditor.BulletList control aria-label */
  bulletListControlLabel: string;
  /** RichTextEditor.OrderedList control aria-label */
  orderedListControlLabel: string;
  /** RichTextEditor.TaskList control aria-label */
  tasksControlLabel: string;
  /** RichTextEditor.TaskListSink control aria-label */
  tasksSinkLabel: string;
  /** RichTextEditor.TaskListLift control aria-label */
  tasksLiftLabel: string;
  
  /** RichTextEditor.Link control aria-label */
  linkControlLabel: string;
  /** RichTextEditor.Unlink control aria-label */
  unlinkControlLabel: string;
  
  /** RichTextEditor.AlignLeft control aria-label */
  alignLeftControlLabel: string;
  /** RichTextEditor.AlignCenter control aria-label */
  alignCenterControlLabel: string;
  /** RichTextEditor.AlignRight control aria-label */
  alignRightControlLabel: string;
  /** RichTextEditor.AlignJustify control aria-label */
  alignJustifyControlLabel: string;
  
  /** RichTextEditor.Code control aria-label */
  codeControlLabel: string;
  /** RichTextEditor.CodeBlock control aria-label */
  codeBlockControlLabel: string;
  /** RichTextEditor.Blockquote control aria-label */
  blockquoteControlLabel: string;
  
  /** RichTextEditor.Superscript control aria-label */
  superscriptControlLabel: string;
  /** RichTextEditor.Subscript control aria-label */
  subscriptControlLabel: string;
  
  /** RichTextEditor.ColorPicker control aria-label */
  colorPickerControlLabel: string;
  /** RichTextEditor.UnsetColor control aria-label */
  unsetColorControlLabel: string;
  /** RichTextEditor.Highlight control aria-label */
  highlightControlLabel: string;
  
  /** RichTextEditor.Hr control aria-label */
  hrControlLabel: string;
  /** RichTextEditor.Undo control aria-label */
  undoControlLabel: string;
  /** RichTextEditor.Redo control aria-label */
  redoControlLabel: string;
  /** RichTextEditor.SourceCode control aria-label */
  sourceCodeControlLabel: string;
  
  /** Function to get RichTextEditor.Color control aria-label based on color */
  colorControlLabel: (color: string) => string;
  /** Function to get aria-label for color palette colors */
  colorPickerColorLabel: (color: string) => string;
  
  /** Aria-label for link editor url input */
  linkEditorInputLabel: string;
  /** Placeholder for link editor url input */
  linkEditorInputPlaceholder: string;
  /** Content of external button tooltip when link opens in new tab */
  linkEditorExternalLink: string;
  /** Content of external button tooltip when link opens in same tab */
  linkEditorInternalLink: string;
  /** Save button content in link editor */
  linkEditorSave: string;
  
  /** Cancel button title text in color picker control */
  colorPickerCancel: string;
  /** Clear button title text in color picker control */
  colorPickerClear: string;
  /** Color picker button title text in color picker control */
  colorPickerColorPicker: string;
  /** Palette button title text in color picker control */
  colorPickerPalette: string;
  /** Save button title text in color picker control */
  colorPickerSave: string;
}

Default Label Values

Text Formatting Labels

{
  boldControlLabel: "Bold",
  italicControlLabel: "Italic", 
  underlineControlLabel: "Underline",
  strikeControlLabel: "Strikethrough",
  clearFormattingControlLabel: "Clear formatting",
}

Structure Labels

{
  h1ControlLabel: "Heading 1",
  h2ControlLabel: "Heading 2",
  h3ControlLabel: "Heading 3", 
  h4ControlLabel: "Heading 4",
  h5ControlLabel: "Heading 5",
  h6ControlLabel: "Heading 6",
  
  bulletListControlLabel: "Bullet list",
  orderedListControlLabel: "Ordered list",
  tasksControlLabel: "Task list",
  tasksSinkLabel: "Decrease task level",
  tasksLiftLabel: "Increase task level",
  
  blockquoteControlLabel: "Blockquote",
  
  alignLeftControlLabel: "Align text: left",
  alignCenterControlLabel: "Align text: center", 
  alignRightControlLabel: "Align text: right",
  alignJustifyControlLabel: "Align text: justify",
}

Advanced Control Labels

{
  linkControlLabel: "Link",
  unlinkControlLabel: "Remove link",
  
  codeControlLabel: "Code",
  codeBlockControlLabel: "Code block",
  
  superscriptControlLabel: "Superscript",
  subscriptControlLabel: "Subscript",
  
  colorPickerControlLabel: "Text color",
  unsetColorControlLabel: "Unset color",
  highlightControlLabel: "Highlight text",
  
  hrControlLabel: "Horizontal line",
  undoControlLabel: "Undo",
  redoControlLabel: "Redo",
  sourceCodeControlLabel: "Switch between text/source code",
}

Function-based Labels

{
  colorControlLabel: (color) => `Set text color ${color}`,
  colorPickerColorLabel: (color) => `Set text color ${color}`,
}

UI Element Labels

{
  linkEditorInputLabel: "Enter URL",
  linkEditorInputPlaceholder: "https://example.com/",
  linkEditorExternalLink: "Open link in a new tab",
  linkEditorInternalLink: "Open link in the same tab", 
  linkEditorSave: "Save",
  
  colorPickerCancel: "Cancel",
  colorPickerClear: "Clear color",
  colorPickerColorPicker: "Color picker",
  colorPickerPalette: "Color palette",
  colorPickerSave: "Save",
}

Internationalization Examples

Spanish Labels

import { RichTextEditor, DEFAULT_LABELS } from "@mantine/tiptap";

const spanishLabels = {
  ...DEFAULT_LABELS,
  boldControlLabel: "Negrita",
  italicControlLabel: "Cursiva", 
  underlineControlLabel: "Subrayado",
  strikeControlLabel: "Tachado",
  clearFormattingControlLabel: "Limpiar formato",
  
  h1ControlLabel: "Encabezado 1",
  h2ControlLabel: "Encabezado 2",
  h3ControlLabel: "Encabezado 3",
  
  bulletListControlLabel: "Lista con viñetas",
  orderedListControlLabel: "Lista numerada",
  
  linkControlLabel: "Enlace",
  unlinkControlLabel: "Quitar enlace",
  
  codeControlLabel: "Código",
  codeBlockControlLabel: "Bloque de código",
  
  undoControlLabel: "Deshacer",
  redoControlLabel: "Rehacer",
  
  colorControlLabel: (color) => `Establecer color del texto ${color}`,
};

function SpanishEditor() {
  return (
    <RichTextEditor editor={editor} labels={spanishLabels}>
      {/* editor controls */}
    </RichTextEditor>
  );
}

French Labels

const frenchLabels = {
  ...DEFAULT_LABELS,
  boldControlLabel: "Gras",
  italicControlLabel: "Italique",
  underlineControlLabel: "Souligné", 
  strikeControlLabel: "Barré",
  clearFormattingControlLabel: "Effacer la mise en forme",
  
  h1ControlLabel: "Titre 1",
  h2ControlLabel: "Titre 2", 
  h3ControlLabel: "Titre 3",
  
  bulletListControlLabel: "Liste à puces",
  orderedListControlLabel: "Liste numérotée",
  
  linkControlLabel: "Lien",
  unlinkControlLabel: "Supprimer le lien",
  
  alignLeftControlLabel: "Aligner à gauche",
  alignCenterControlLabel: "Centrer",
  alignRightControlLabel: "Aligner à droite",
  alignJustifyControlLabel: "Justifier",
  
  undoControlLabel: "Annuler",
  redoControlLabel: "Rétablir",
  
  linkEditorInputLabel: "Saisir l'URL", 
  linkEditorInputPlaceholder: "https://exemple.com/",
  linkEditorSave: "Sauvegarder",
};

Custom Labels with Keyboard Shortcuts

const labelswithShortcuts = {
  ...DEFAULT_LABELS,
  boldControlLabel: "Bold (Ctrl+B)",
  italicControlLabel: "Italic (Ctrl+I)",
  underlineControlLabel: "Underline (Ctrl+U)",
  
  h1ControlLabel: "Heading 1 (Ctrl+Alt+1)",
  h2ControlLabel: "Heading 2 (Ctrl+Alt+2)",
  h3ControlLabel: "Heading 3 (Ctrl+Alt+3)",
  
  linkControlLabel: "Add Link (Ctrl+K)",
  codeControlLabel: "Inline Code (Ctrl+E)",
  
  undoControlLabel: "Undo (Ctrl+Z)",
  redoControlLabel: "Redo (Ctrl+Y)",
};

Implementation Patterns

Dynamic Label Loading

import { useState, useEffect } from "react";

function LocalizedEditor({ locale }: { locale: string }) {
  const [labels, setLabels] = useState(DEFAULT_LABELS);
  
  useEffect(() => {
    async function loadLabels() {
      try {
        const localeLabels = await import(`./labels/${locale}.js`);
        setLabels({ ...DEFAULT_LABELS, ...localeLabels.default });
      } catch {
        // Fallback to default labels
        setLabels(DEFAULT_LABELS);
      }
    }
    
    loadLabels();
  }, [locale]);
  
  return (
    <RichTextEditor editor={editor} labels={labels}>
      {/* editor controls */}
    </RichTextEditor>
  );
}

Context-based Localization

import { createContext, useContext } from "react";

const LocaleContext = createContext<string>('en');

function useLocalizedLabels() {
  const locale = useContext(LocaleContext);
  
  const labelMap = {
    en: DEFAULT_LABELS,
    es: spanishLabels,
    fr: frenchLabels,
  };
  
  return labelMap[locale] || DEFAULT_LABELS;
}

function LocalizedEditor() {
  const labels = useLocalizedLabels();
  
  return (
    <RichTextEditor editor={editor} labels={labels}>
      {/* editor controls */}
    </RichTextEditor>
  );
}

Partial Label Override

// Only override specific labels, keep defaults for others
const partialLabels = {
  boldControlLabel: "Make Bold",
  italicControlLabel: "Make Italic",
  // Other labels use DEFAULT_LABELS values
};

<RichTextEditor editor={editor} labels={partialLabels}>
  {/* Controls will use custom labels where provided, defaults elsewhere */}
</RichTextEditor>

Accessibility Benefits

Screen Reader Support

Labels provide comprehensive screen reader support:

Control Identification: Each control has descriptive ARIA labels
State Announcement: Active states are communicated via accessibility attributes
Keyboard Navigation: Proper labeling supports keyboard-only users
Context Information: Labels provide context about control functionality

Compliance

The labeling system supports:

WCAG 2.1 AA Compliance: Proper labeling for accessibility standards
Section 508: Government accessibility requirements
ARIA Best Practices: Following established ARIA labeling patterns
Internationalization: Support for right-to-left languages and localization

TypeScript Integration

Type Safety

import type { RichTextEditorLabels } from "@mantine/tiptap";

// Type-safe label objects
const typedLabels: Partial<RichTextEditorLabels> = {
  boldControlLabel: "Bold", // ✓ Valid
  invalidLabel: "Invalid", // ✗ TypeScript error
};

// Function labels are type-checked
const colorLabels: RichTextEditorLabels['colorControlLabel'] = 
  (color: string) => `Apply ${color} color`;

Label Validation

function validateLabels(labels: Partial<RichTextEditorLabels>): boolean {
  // Ensure function labels are properly typed
  if (labels.colorControlLabel && typeof labels.colorControlLabel !== 'function') {
    return false;
  }
  
  // Ensure string labels are strings
  const stringLabels = ['boldControlLabel', 'italicControlLabel'] as const;
  for (const label of stringLabels) {
    if (labels[label] && typeof labels[label] !== 'string') {
      return false;
    }
  }
  
  return true;
}