BUG: Headings SelectOption not working properly

[Chrischaaan]

The AngularEditorToolbarComponent has a TAG-DropDown / Property, which is an Array of SelectOption. It has an Item for "Heading 7". H7 isn't existing in HTML. Also the "select" Property has no Entry for H7.

In the TAG-DropDown, there is a selection for "Standard". It's not applied if selected.

Please Remove the SelectOption and apply the "defaultParagraphSeparator" to the Text, if "Standard" is selected.

[joseluisq]

Is there any plan to fix this issue? The headings dropdown needs a clean-up.

[kolkov]

Hello @Chrischaaan and @joseluisq!

Thank you for reporting this. Let me clarify the current state in v3.0.2:

Issues Mentioned

1. ✅ FIXED: Heading 7 removed

The non-existent H7 option has been removed from the headings dropdown in v3.0.2.

Current headings array:

headings: SelectOption[] = [
  { label: 'Heading 1', value: 'h1' },
  { label: 'Heading 2', value: 'h2' },
  { label: 'Heading 3', value: 'h3' },
  { label: 'Heading 4', value: 'h4' },
  { label: 'Heading 5', value: 'h5' },
  { label: 'Heading 6', value: 'h6' },
  { label: 'Paragraph', value: 'p' },
  { label: 'Predefined', value: 'pre' },
  { label: 'Standard', value: 'div' },
  { label: 'default', value: 'default' }
];

2. ⚠️ PARTIAL: "Standard" and "default" behavior

Current implementation:

// angular-editor.service.ts
executeCommand(command: string, value?: string) {
  const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
  if (commands.includes(command)) {
    this.doc.execCommand('formatBlock', false, command);
    return;
  }
  this.doc.execCommand(command, false, value);
}

The Issue:

• 'div' (Standard) and 'default' are not in the commands array
• They fall through to generic execCommand, which doesn't apply formatBlock
• This means selecting "Standard" or "default" has no visible effect

Workaround (Current Version)

Use Paragraph instead of "Standard":

• "Paragraph" (<p>) works correctly
• "Predefined" (<pre>) works correctly
• "Standard" (<div>) - doesn't apply formatting
• "default" - doesn't apply formatting

Recommended Fix (for maintainers)

Option 1: Remove non-working options

headings: SelectOption[] = [
  { label: 'Heading 1', value: 'h1' },
  { label: 'Heading 2', value: 'h2' },
  { label: 'Heading 3', value: 'h3' },
  { label: 'Heading 4', value: 'h4' },
  { label: 'Heading 5', value: 'h5' },
  { label: 'Heading 6', value: 'h6' },
  { label: 'Paragraph', value: 'p' },
  { label: 'Preformatted', value: 'pre' }
  // Remove 'div' and 'default'
];

Option 2: Fix the commands array

const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'div'];

However, formatBlock with 'div' has inconsistent browser support, so Option 1 is cleaner.

Summary

• ✅ H7 removed in v3.0.2
• ⚠️ "Standard" (div) and "default" still present but don't work
• 📝 Workaround: Use "Paragraph" instead
• 🔧 Proper fix: Remove div/default from dropdown (low priority)

This is a minor UI cleanup issue, not a critical bug. The working options (H1-H6, Paragraph, Preformatted) cover all common use cases.

Tracking: I'll add this as a cleanup task for v3.1.0.

Thanks for the detailed report!