List Formatting

/**
 * The list formatting feature.
 * It enables formatting of list item markers such as bold, italic, font size, font color, and font family.
 */
class ListFormatting extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListFormatting";
  
  /** @inheritDoc */
  static get requires(): readonly [
    typeof ListItemBoldIntegration,
    typeof ListItemItalicIntegration,
    typeof ListItemFontSizeIntegration,
    typeof ListItemFontColorIntegration,
    typeof ListItemFontFamilyIntegration
  ];
  
  /** @inheritDoc */
  static override get isOfficialPlugin(): true;
}

/**
 * The list item bold integration plugin.
 * It enables bold formatting for list item markers.
 */
class ListItemBoldIntegration extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListItemBoldIntegration";
  
  /** @inheritDoc */
  static get requires(): readonly [typeof ListEditing, typeof Bold];
}

/**
 * The list item italic integration plugin.
 * It enables italic formatting for list item markers.
 */
class ListItemItalicIntegration extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListItemItalicIntegration";
  
  /** @inheritDoc */
  static get requires(): readonly [typeof ListEditing, typeof Italic];
}

/**
 * The list item font size integration plugin.
 * It enables font size formatting for list item markers.
 */
class ListItemFontSizeIntegration extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListItemFontSizeIntegration";
  
  /** @inheritDoc */
  static get requires(): readonly [typeof ListEditing, typeof FontSize];
}

/**
 * The list item font color integration plugin.
 * It enables font color formatting for list item markers.
 */
class ListItemFontColorIntegration extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListItemFontColorIntegration";
  
  /** @inheritDoc */
  static get requires(): readonly [typeof ListEditing, typeof FontColor];
}

/**
 * The list item font family integration plugin.
 * It enables font family formatting for list item markers.
 */
class ListItemFontFamilyIntegration extends Plugin {
  /** @inheritDoc */
  static get pluginName(): "ListItemFontFamilyIntegration";
  
  /** @inheritDoc */
  static get requires(): readonly [typeof ListEditing, typeof FontFamily];
}

interface ListConfig {
  /**
   * Enables list item marker formatting. Current list of integrated formatting plugins includes:
   * - Font family
   * - Font size  
   * - Font color
   * - Bold
   * - Italic
   * 
   * @default true
   */
  enableListItemMarkerFormatting?: boolean;
}

import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { 
  List, 
  ListFormatting 
} from "@ckeditor/ckeditor5-list";
import { 
  Bold, 
  Italic, 
  FontSize, 
  FontColor, 
  FontFamily 
} from "@ckeditor/ckeditor5-basic-styles";

ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [
      List, 
      ListFormatting,
      Bold, 
      Italic, 
      FontSize, 
      FontColor, 
      FontFamily
    ],
    toolbar: [
      'numberedList', 'bulletedList', '|',
      'bold', 'italic', '|',
      'fontSize', 'fontColor', 'fontFamily'
    ],
    list: {
      enableListItemMarkerFormatting: true
    }
  })
  .then(editor => {
    console.log('Editor with list formatting initialized');
  });

import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
import { 
  List,
  ListItemBoldIntegration,
  ListItemItalicIntegration,
  ListItemFontColorIntegration
} from "@ckeditor/ckeditor5-list";
import { Bold, Italic, FontColor } from "@ckeditor/ckeditor5-basic-styles";

// Setup with only specific formatting integrations
ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [
      List,
      Bold,
      Italic, 
      FontColor,
      ListItemBoldIntegration,
      ListItemItalicIntegration,
      ListItemFontColorIntegration
    ],
    toolbar: [
      'numberedList', 'bulletedList', '|',
      'bold', 'italic', 'fontColor'
    ]
  })
  .then(editor => {
    // Only bold, italic, and font color will affect list markers
    console.log('Editor with selective list formatting initialized');
  });

// Apply formatting to list markers programmatically
const boldCommand = editor.commands.get('bold');
const italicCommand = editor.commands.get('italic');
const fontSizeCommand = editor.commands.get('fontSize');
const fontColorCommand = editor.commands.get('fontColor');

// Create a list first
const listCommand = editor.commands.get('numberedList');
listCommand.execute();

// Then apply formatting (will affect the list markers)
boldCommand.execute();
italicCommand.execute();
fontSizeCommand.execute({ value: '18px' });
fontColorCommand.execute({ value: '#ff0000' });

// Monitor formatting commands for list marker updates
const formattingCommands = ['bold', 'italic', 'fontSize', 'fontColor', 'fontFamily'];

formattingCommands.forEach(commandName => {
  const command = editor.commands.get(commandName);
  
  command.on('change:value', () => {
    console.log(`${commandName} value changed:`, command.value);
    
    // Check if we're in a list
    const listCommand = editor.commands.get('numberedList') || editor.commands.get('bulletedList');
    if (listCommand && listCommand.value) {
      console.log('List marker formatting updated');
    }
  });
});

// Update UI based on current formatting in lists
function updateFormattingUI() {
  const selection = editor.model.document.selection;
  const listCommand = editor.commands.get('numberedList') || editor.commands.get('bulletedList');
  
  if (listCommand && listCommand.value) {
    // We're in a list, show formatting affects markers
    document.querySelector('#formatting-info').textContent = 
      'Formatting will affect list markers';
    
    // Update formatting button states
    const boldCommand = editor.commands.get('bold');
    const italicCommand = editor.commands.get('italic');
    
    document.querySelector('#bold-btn').classList.toggle('active', boldCommand.value);
    document.querySelector('#italic-btn').classList.toggle('active', italicCommand.value);
  } else {
    document.querySelector('#formatting-info').textContent = 
      'Formatting will affect text content';
  }
}

editor.model.document.selection.on('change', updateFormattingUI);

import { Plugin } from 'ckeditor5/src/core';
import { ListEditing } from '@ckeditor/ckeditor5-list';

class ListItemUnderlineIntegration extends Plugin {
  static get pluginName() {
    return 'ListItemUnderlineIntegration';
  }
  
  static get requires() {
    return [ListEditing, 'Underline']; // Assuming Underline plugin exists
  }
  
  init() {
    const editor = this.editor;
    const listEditing = editor.plugins.get(ListEditing);
    
    // Register marker formatting for underline
    listEditing.registerDowncastStrategy({
      scope: 'listItem',
      attributeName: 'underline',
      
      // Define how underline should be applied to list markers
      strategy: (modelElement, conversionApi) => {
        const { writer, mapper } = conversionApi;
        const viewElement = mapper.toViewElement(modelElement);
        
        if (viewElement && modelElement.hasAttribute('underline')) {
          writer.setStyle('text-decoration', 'underline', viewElement);
        }
      }
    });
  }
}

// Usage
ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [
      List,
      Underline,
      ListItemUnderlineIntegration
    ],
    toolbar: ['numberedList', 'bulletedList', 'underline']
  });

// Disable list item marker formatting entirely
ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [List, Bold, Italic, FontSize],
    toolbar: ['numberedList', 'bulletedList', 'bold', 'italic', 'fontSize'],
    list: {
      enableListItemMarkerFormatting: false
    }
  })
  .then(editor => {
    // Formatting will only affect text content, not list markers
    console.log('List formatting disabled');
  });

// Custom configuration with specific formatting options
ClassicEditor
  .create(document.querySelector('#editor'), {
    plugins: [
      List, 
      ListFormatting,
      Bold, 
      Italic, 
      FontSize, 
      FontColor, 
      FontFamily
    ],
    list: {
      enableListItemMarkerFormatting: true
    },
    fontSize: {
      options: [9, 11, 13, 'default', 17, 19, 21]
    },
    fontColor: {
      colors: [
        { color: '#000000', label: 'Black' },
        { color: '#FF0000', label: 'Red' },
        { color: '#00FF00', label: 'Green' },
        { color: '#0000FF', label: 'Blue' }
      ]
    },
    fontFamily: {
      options: [
        'default',
        'Arial, Helvetica, sans-serif',
        'Georgia, serif',
        'Impact, Charcoal, sans-serif',
        'Tahoma, Geneva, sans-serif'
      ]
    }
  })
  .then(editor => {
    console.log('Advanced list formatting configured');
  });