[FIX] Heading: restrict applyHeadingStyle

Author: Goaman

packages/plugin-heading/src/Heading.ts

@@ -8,13 +8,16 @@ import { Parser } from '../../plugin-parser/src/Parser';
 import { Keymap } from '../../plugin-keymap/src/Keymap';
 import { CheckingContext } from '../../core/src/ContextManager';
 import { InsertParagraphBreakParams } from '../../core/src/Core';
-import { ContainerNode } from '../../core/src/VNodes/ContainerNode';
 import { Layout } from '../../plugin-layout/src/Layout';
 import { ActionableNode } from '../../plugin-layout/src/ActionableNode';
 import { Attributes } from '../../plugin-xml/src/Attributes';
 import { ComponentDefinition } from '../../plugin-layout/src/LayoutEngine';
 import { RuleProperty } from '../../core/src/Mode';
 import { isInTextualContext } from '../../utils/src/utils';
+import { ParagraphNode } from '../../plugin-paragraph/src/ParagraphNode';
+import { Paragraph } from '../../plugin-paragraph/src/Paragraph';
+import { Pre } from '../../plugin-pre/src/Pre';
+import { PreNode } from '../../plugin-pre/src/PreNode';
 
 export interface HeadingParams extends CommandParams {
     level: number;
@@ -47,6 +50,7 @@ function headingButton(level: number): ComponentDefinition {
 }
 
 export class Heading<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T> {
+    static dependencies = [Paragraph, Pre];
     commands = {
         applyHeadingStyle: {
             handler: this.applyHeadingStyle,
@@ -131,7 +135,12 @@ export class Heading<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin
      * @param params
      */
     applyHeadingStyle(params: HeadingParams): void {
-        for (const node of params.context.range.targetedNodes(ContainerNode)) {
+        for (const node of params.context.range.targetedNodes(
+            node =>
+                node instanceof HeadingNode ||
+                node instanceof ParagraphNode ||
+                node instanceof PreNode,
+        )) {
             const heading = this._createHeadingContainer(params.level);
             heading.modifiers = node.modifiers.clone();
             node.replaceWith(heading);
@@ -147,7 +156,7 @@ export class Heading<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin
         const range = params.context.range;
         const heading = range.targetedNodes(HeadingNode)[0];
         const duplicate = heading.splitAt(range.start);
-        const newContainer = new this.editor.configuration.defaults.Container();
+        const newContainer = new ParagraphNode();
         duplicate.replaceWith(newContainer);
     }
 
@@ -162,7 +171,7 @@ export class Heading<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin
      */
     _createHeadingContainer(level: number): VNode {
         if (level === 0) {
-            return new this.editor.configuration.defaults.Container();
+            return new ParagraphNode();
         } else {
             return new HeadingNode({ level: level });
         }

packages/plugin-heading/test/Heading.test.ts

@@ -52,6 +52,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<p>[ab</p><h2>]cd</h2>',
                 });
             });
+            it('should not turn a div into a heading 0', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(0),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 1', () => {
             it('should turn a paragraph into a heading 1', async () => {
@@ -82,6 +89,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h1>[ab</h1><h2>]cd</h2>',
                 });
             });
+            it('should not turn a div into a heading 1', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(1),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 2', () => {
             it('should turn a heading 1 into a heading 2', async () => {
@@ -112,6 +126,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h2>[ab</h2><h1>]cd</h1>',
                 });
             });
+            it('should not turn a div into a heading 2', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(2),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 3', () => {
             it('should turn a heading 1 into a heading 3', async () => {
@@ -142,6 +163,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h3>[ab</h3><h1>]cd</h1>',
                 });
             });
+            it('should not turn a div into a heading 3', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(3),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 4', () => {
             it('should turn a heading 1 into a heading 4', async () => {
@@ -172,6 +200,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h4>[ab</h4><h1>]cd</h1>',
                 });
             });
+            it('should not turn a div into a heading 4', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(4),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 5', () => {
             it('should turn a heading 1 into a heading 5', async () => {
@@ -202,6 +237,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h5>[ab</h5><h1>]cd</h1>',
                 });
             });
+            it('should not turn a div into a heading 5', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(5),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
         describe('level 6', () => {
             it('should turn a heading 1 into a heading 6', async () => {
@@ -232,6 +274,13 @@ describePlugin(Heading, testEditor => {
                     contentAfter: '<h6>[ab</h6><h1>]cd</h1>',
                 });
             });
+            it('should not turn a div into a heading 6', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>[ab]</div>',
+                    stepFunction: applyHeadingStyle(6),
+                    contentAfter: '<div>[ab]</div>',
+                });
+            });
         });
     });
     describe('insertParagraphBreak', () => {