fix(custom-class): preserve HTML structure in multiline selections (#594) (#595)

kolkov · web-flow · commit e79667050910 · 2026-01-30T05:14:52.000+03:00
- Add 'mode' option to CustomClass: 'inline', 'block', 'auto' (default) - Implement smart block detection using DOM Range API and TreeWalker - Use extractContents + insertNode pattern instead of sel.toString() - Add toggle behavior for block mode (remove class if already present) - Add comprehensive unit tests for createCustomClass (6 new tests) Fixes #594
diff --git a/projects/angular-editor/src/lib/angular-editor.service.spec.ts b/projects/angular-editor/src/lib/angular-editor.service.spec.ts
@@ -2,16 +2,146 @@ import {inject, TestBed} from '@angular/core/testing';
 
 import {AngularEditorService} from './angular-editor.service';
 import {HttpClientModule} from '@angular/common/http';
+import {CustomClass} from './config';
 
 describe('AngularEditorService', () => {
+  let service: AngularEditorService;
+  let testContainer: HTMLDivElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ HttpClientModule ],
       providers: [AngularEditorService]
     });
+    service = TestBed.inject(AngularEditorService);
+
+    // Create a test container for DOM manipulation tests
+    testContainer = document.createElement('div');
+    testContainer.id = 'test-editor';
+    testContainer.contentEditable = 'true';
+    document.body.appendChild(testContainer);
   });
 
-  it('should be created', inject([AngularEditorService], (service: AngularEditorService) => {
-    expect(service).toBeTruthy();
+  afterEach(() => {
+    // Clean up test container
+    if (testContainer && testContainer.parentNode) {
+      testContainer.parentNode.removeChild(testContainer);
+    }
+  });
+
+  it('should be created', inject([AngularEditorService], (svc: AngularEditorService) => {
+    expect(svc).toBeTruthy();
   }));
+
+  describe('createCustomClass', () => {
+    it('should not apply class when no selection', () => {
+      const customClass: CustomClass = { name: 'Test', class: 'test-class' };
+      service.savedSelection = null;
+
+      // Should not throw
+      expect(() => service.createCustomClass(customClass)).not.toThrow();
+    });
+
+    it('should not apply class when customClass is null', () => {
+      const range = document.createRange();
+      service.savedSelection = range;
+
+      expect(() => service.createCustomClass(null as any)).not.toThrow();
+    });
+
+    it('should apply inline class to single text selection', () => {
+      // Setup: single text node
+      testContainer.innerHTML = '<p>Hello World</p>';
+      const textNode = testContainer.querySelector('p')!.firstChild!;
+
+      // Create selection range for "World"
+      const range = document.createRange();
+      range.setStart(textNode, 6);
+      range.setEnd(textNode, 11);
+
+      // Set selection
+      const sel = window.getSelection()!;
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      service.savedSelection = range;
+      service.selectedText = 'World';
+
+      const customClass: CustomClass = { name: 'Test', class: 'highlight', mode: 'inline' };
+      service.createCustomClass(customClass);
+
+      // Verify span was created with class
+      const span = testContainer.querySelector('span.highlight');
+      expect(span).toBeTruthy();
+      expect(span!.textContent).toBe('World');
+    });
+
+    it('should apply block class to multiple paragraphs', () => {
+      // Setup: multiple paragraphs
+      testContainer.innerHTML = '<p>First paragraph</p><p>Second paragraph</p><p>Third paragraph</p>';
+      const paragraphs = testContainer.querySelectorAll('p');
+
+      // Create selection range spanning all paragraphs
+      const range = document.createRange();
+      range.setStart(paragraphs[0].firstChild!, 0);
+      range.setEnd(paragraphs[2].firstChild!, paragraphs[2].textContent!.length);
+
+      // Set selection
+      const sel = window.getSelection()!;
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      service.savedSelection = range;
+      service.selectedText = 'First paragraph\nSecond paragraph\nThird paragraph';
+
+      const customClass: CustomClass = { name: 'Test', class: 'block-highlight', mode: 'block' };
+      service.createCustomClass(customClass);
+
+      // Verify class was applied to paragraphs
+      const highlightedParagraphs = testContainer.querySelectorAll('p.block-highlight');
+      expect(highlightedParagraphs.length).toBeGreaterThan(0);
+    });
+
+    it('should use auto mode by default', () => {
+      testContainer.innerHTML = '<p>Single paragraph</p>';
+      const p = testContainer.querySelector('p')!;
+      const textNode = p.firstChild!;
+
+      const range = document.createRange();
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, textNode.textContent!.length);
+
+      const sel = window.getSelection()!;
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      service.savedSelection = range;
+      service.selectedText = 'Single paragraph';
+
+      // No mode specified - should default to 'auto'
+      const customClass: CustomClass = { name: 'Test', class: 'auto-class' };
+      service.createCustomClass(customClass);
+
+      // For single block, auto mode should use inline wrapping
+      const result = testContainer.querySelector('.auto-class');
+      expect(result).toBeTruthy();
+    });
+
+    it('should toggle class when applied twice in block mode', () => {
+      testContainer.innerHTML = '<p class="toggle-class">Paragraph with class</p>';
+      const p = testContainer.querySelector('p')!;
+      const textNode = p.firstChild!;
+
+      const range = document.createRange();
+      range.selectNodeContents(p);
+
+      service.savedSelection = range;
+
+      const customClass: CustomClass = { name: 'Test', class: 'toggle-class', mode: 'block' };
+      service.createCustomClass(customClass);
+
+      // Class should be removed (toggled off)
+      expect(p.classList.contains('toggle-class')).toBeFalse();
+    });
+  });
 });
diff --git a/projects/angular-editor/src/lib/angular-editor.service.ts b/projects/angular-editor/src/lib/angular-editor.service.ts
@@ -179,15 +179,212 @@ export class AngularEditorService {
     this.doc.execCommand('defaultParagraphSeparator', false, separator);
   }
 
-  createCustomClass(customClass: CustomClass) {
-    let newTag = this.selectedText;
-    if (customClass) {
-      const tagName = customClass.tag ? customClass.tag : 'span';
-      newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
+  /**
+   * Apply custom class to selection with enterprise-level HTML structure preservation.
+   * Supports three modes:
+   * - 'inline': Wrap selection in a single element (legacy behavior)
+   * - 'block': Apply class to each block element in selection
+   * - 'auto': Smart detection based on selection span (default)
+   *
+   * @param customClass The custom class configuration
+   */
+  createCustomClass(customClass: CustomClass): void {
+    if (!customClass || !this.savedSelection) {
+      return;
+    }
+
+    const mode = customClass.mode || 'auto';
+    const range = this.savedSelection;
+
+    // Restore selection before applying
+    this.restoreSelection();
+
+    if (mode === 'inline') {
+      this.applyClassInline(range, customClass);
+    } else if (mode === 'block') {
+      this.applyClassToBlocks(range, customClass);
+    } else {
+      // Auto mode: detect if selection spans multiple blocks
+      const blocks = this.getBlockElementsInRange(range);
+      if (blocks.length > 1) {
+        this.applyClassToBlocks(range, customClass);
+      } else {
+        this.applyClassInline(range, customClass);
+      }
     }
+  }
+
+  /**
+   * Apply class inline by wrapping selection in a single element.
+   * Uses extractContents + insertNode pattern for safety.
+   */
+  private applyClassInline(range: Range, customClass: CustomClass): void {
+    const tagName = customClass.tag || 'span';
+
+    try {
+      // Create wrapper element
+      const wrapper = this.doc.createElement(tagName);
+      wrapper.className = customClass.class;
+
+      // Extract contents and wrap (safer than surroundContents)
+      const contents = range.extractContents();
+      wrapper.appendChild(contents);
+      range.insertNode(wrapper);
+
+      // Normalize to merge adjacent text nodes
+      if (wrapper.parentNode) {
+        wrapper.parentNode.normalize();
+      }
+
+      // Update selection to the new wrapper
+      range.selectNodeContents(wrapper);
+      const sel = this.doc.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } catch (e) {
+      // Fallback to legacy method if DOM manipulation fails
+      console.warn('applyClassInline failed, using fallback:', e);
+      this.applyClassInlineFallback(customClass);
+    }
+  }
+
+  /**
+   * Fallback method for inline class application (legacy behavior).
+   */
+  private applyClassInlineFallback(customClass: CustomClass): void {
+    const tagName = customClass.tag || 'span';
+    const newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
     this.insertHtml(newTag);
   }
 
+  /**
+   * Apply class to each block element in selection.
+   * Preserves HTML structure by adding class to existing elements.
+   */
+  private applyClassToBlocks(range: Range, customClass: CustomClass): void {
+    const blocks = this.getBlockElementsInRange(range);
+
+    if (blocks.length === 0) {
+      // No blocks found, fall back to inline
+      this.applyClassInline(range, customClass);
+      return;
+    }
+
+    // Apply class to each block element
+    blocks.forEach(block => {
+      // Toggle class: remove if present, add if not
+      if (block.classList.contains(customClass.class)) {
+        block.classList.remove(customClass.class);
+      } else {
+        block.classList.add(customClass.class);
+      }
+    });
+
+    // Trigger change detection by moving cursor
+    const sel = this.doc.getSelection();
+    if (sel && blocks.length > 0) {
+      // Reselect the original range
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
+
+  /**
+   * Get all block-level elements within a range.
+   * Returns elements that are fully or partially selected.
+   */
+  private getBlockElementsInRange(range: Range): HTMLElement[] {
+    const blockTags = [
+      'P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+      'LI', 'BLOCKQUOTE', 'PRE', 'ADDRESS', 'ARTICLE',
+      'ASIDE', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'HEADER',
+      'MAIN', 'NAV', 'SECTION'
+    ];
+    const blocks: HTMLElement[] = [];
+    const seen = new Set<HTMLElement>();
+
+    // Get the common ancestor
+    const container = range.commonAncestorContainer;
+    const root = container.nodeType === Node.ELEMENT_NODE
+      ? container as HTMLElement
+      : container.parentElement;
+
+    if (!root) {
+      return blocks;
+    }
+
+    // If root itself is a block element and fully contains the range
+    if (blockTags.includes(root.tagName) && this.isNodeFullyInRange(root, range)) {
+      return [root];
+    }
+
+    // Find all block elements within the range using TreeWalker
+    const walker = this.doc.createTreeWalker(
+      root,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: (node: Element) => {
+          if (!blockTags.includes(node.tagName)) {
+            return NodeFilter.FILTER_SKIP;
+          }
+          // Check if node intersects with selection
+          if (range.intersectsNode(node)) {
+            return NodeFilter.FILTER_ACCEPT;
+          }
+          return NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+      const element = node as HTMLElement;
+      // Avoid duplicates and nested blocks
+      if (!seen.has(element) && !this.hasAncestorInSet(element, seen)) {
+        seen.add(element);
+        blocks.push(element);
+      }
+    }
+
+    // If no blocks found, check if we're inside a block
+    if (blocks.length === 0) {
+      let parent = root;
+      while (parent && parent !== this.doc.body) {
+        if (blockTags.includes(parent.tagName)) {
+          blocks.push(parent);
+          break;
+        }
+        parent = parent.parentElement;
+      }
+    }
+
+    return blocks;
+  }
+
+  /**
+   * Check if a node is fully contained within a range.
+   */
+  private isNodeFullyInRange(node: Node, range: Range): boolean {
+    const nodeRange = this.doc.createRange();
+    nodeRange.selectNodeContents(node);
+    return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 &&
+           range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0;
+  }
+
+  /**
+   * Check if element has an ancestor in the given set.
+   */
+  private hasAncestorInSet(element: HTMLElement, set: Set<HTMLElement>): boolean {
+    let parent = element.parentElement;
+    while (parent) {
+      if (set.has(parent)) {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+
   insertVideo(videoUrl: string) {
     if (videoUrl.match('www.youtube.com') || videoUrl.match('youtu.be')) {
       this.insertYouTubeVideoTag(videoUrl);
diff --git a/projects/angular-editor/src/lib/config.ts b/projects/angular-editor/src/lib/config.ts
