@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/image-node.test.js

@@ -20,6 +20,18 @@ describe('image node', () => {
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { size: 'md' } }, imageBlock) instanceof RTEImageNode).toBe(true);
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { alt: 'test' } }, imageBlock) instanceof RTEImageNode).toBe(true);
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { size: 'lg', alt: 'test' } }, imageBlock) instanceof RTEImageNode).toBe(true);
+    expect(RTEImageNode.from({
+      id: '2',
+      type: 'image',
+      url: 'mock-url',
+      annotations: {
+        size: 'lg',
+        alt: 'test',
+        customAttribute: { id: 'test' },
+        customClass: ['custom-class'],
+        customStyle: { padding: '20px' },
+      },
+    }, imageBlock) instanceof RTEImageNode).toBe(true);
   });
   it('toJSON method should work as expect', () => {
     const imageBlock = new RTEImageBlock('block-1');

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/text-node.test.js

@@ -16,6 +16,9 @@ import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { DeleteNodeAnnotationAction } from '../../../dto/actions/delete-node-annotation-action';
+import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
+import { StrikethroughAnnotationAction } from '../../../dto/actions/strikethrough-annotation-action';
+import { ItalicAnnotationAction } from '../../../dto/actions/italic-annotation-action';
 describe('text node', () => {
   it('new RTETextNode should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
@@ -91,9 +94,8 @@ describe('text node', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD).toJSON()).toEqual({
       bold: true,
-      type: 'BOLD',
     });
   });
   it('apply method should work as expect', () => {
@@ -376,9 +378,8 @@ describe('text node', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD).toJSON()).toEqual({
       bold: true,
-      type: 'BOLD',
     });
     textNode.deleteAnnotationByType(NodeAnnotationTypeEnum.BOLD);
     expect(textNode.annotationMap.has(NodeAnnotationTypeEnum.BOLD)).toEqual(false);
@@ -408,4 +409,40 @@ describe('text node', () => {
     expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
     expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
   });
+  it('should get the normal annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    textNode.apply(new ItalicAnnotationAction(true));
+    expect(textNode.getStyles({ standalone: true })).toEqual({ fontStyle: 'italic', fontWeight: '700' });
+  });
+  // TODO: we will create a pr to fix it.
+  it.skip('should get the merged annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new UnderlineAnnotationAction(true));
+    textNode.apply(new StrikethroughAnnotationAction(true));
+    expect(textNode.getStyles({ standalone: true })).toEqual({
+      textDecoration: 'underline line-through',
+    });
+  });
+  it('should get the complex annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = RTETextNode.from({
+      id: '1',
+      type: 'text',
+      text: `This is a text.`,
+      annotations: {
+        bold: null,
+        italic: false,
+        underline: true,
+        strikethrough: null,
+        textColor: 'green',
+      },
+    }, textBlock);
+    expect(textNode.getStyles({ standalone: true })).toEqual({
+      color: '#01801F',
+      textDecoration: 'underline',
+    });
+  });
 });

package/dist/collection/components/vega-rich-text-editor/test/element-to-dto-strategy/jira-code-to-rte-code-block-strategy.test.js

@@ -0,0 +1,32 @@
+import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { JiraCodeToRTECodeBlockStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/jira-code-to-rte-code-block-strategy';
+describe('CodeToRteCodeBlockStrategy', () => {
+  const strategy = new JiraCodeToRTECodeBlockStrategy();
+  it('should return result correct when call method canHandle', () => {
+    const codeElement = document.createElement('code');
+    const preElement = document.createElement('pre');
+    expect(strategy.canHandle([codeElement], 0)).toBeFalsy();
+    expect(strategy.canHandle([preElement], 0)).toBeFalsy();
+    codeElement.setAttribute('data-language', 'js');
+    preElement.setAttribute('data-language', 'js');
+    expect(strategy.canHandle([codeElement], 0)).toBeTruthy();
+    expect(strategy.canHandle([preElement], 0)).toBeTruthy();
+  });
+  it('should return result correct when call method shouldProceedToElementChildren', () => {
+    expect(strategy.shouldProceedToElementChildren()).toBeFalsy();
+  });
+  it('should return result correct when call method handle', () => {
+    expect(strategy.handle([])).toBeUndefined();
+    const codeElement = document.createElement('code');
+    codeElement.setAttribute('data-language', 'js');
+    codeElement.textContent = 'console.log("Hello, World!");';
+    const result = strategy.handle([codeElement]);
+    expect(result instanceof RTECodeBlock).toBeTruthy();
+    expect(result.toJSON()).toEqual({
+      id: expect.any(String),
+      type: 'code-block',
+      language: 'js',
+      content: 'console.log("Hello, World!");',
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/element-to-dto-strategy/vega-code-block-to-rte-code-block-strategy.test.js

@@ -0,0 +1,61 @@
+import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { VegaCodeBlockToRTECodeBlockStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/vega-code-block-to-rte-code-block-strategy';
+describe('CodeToRteCodeBlockStrategy', () => {
+  const strategy = new VegaCodeBlockToRTECodeBlockStrategy();
+  it('should return result correct when call method canHandle', () => {
+    const pre = document.createElement('pre');
+    const codeElement = document.createElement('vega-code-block');
+    expect(strategy.canHandle([codeElement], 0)).toBeTruthy();
+    expect(strategy.canHandle([pre], 0)).toBeFalsy();
+    pre.classList.add('code-block-container');
+    pre.appendChild(codeElement);
+    expect(strategy.canHandle([pre], 0)).toBeTruthy();
+    // Test with code element inside vega-code-block
+    codeElement.appendChild(document.createElement('vega-code-block'));
+    expect(strategy.canHandle([codeElement], 0)).toBeFalsy();
+    pre.appendChild(codeElement);
+    expect(strategy.canHandle([pre], 0)).toBeFalsy();
+  });
+  it('should return result correct when call method handle', () => {
+    const pre = document.createElement('pre');
+    const codeElement = document.createElement('vega-code-block');
+    const code = document.createElement('code');
+    code.setAttribute('data-language', 'js');
+    code.textContent = 'console.log("Hello, World!");';
+    codeElement.appendChild(code);
+    let result = strategy.handle([codeElement]);
+    expect(strategy.handle([codeElement]) instanceof RTECodeBlock).toBeTruthy();
+    expect(result.toJSON()).toEqual({
+      id: expect.any(String),
+      type: 'code-block',
+      language: 'js',
+      content: 'console.log("Hello, World!");',
+    });
+    pre.classList.add('code-block-container');
+    pre.appendChild(codeElement);
+    result = strategy.handle([pre]);
+    expect(strategy.handle([pre]) instanceof RTECodeBlock).toBeTruthy();
+    expect(result.toJSON()).toEqual({
+      id: expect.any(String),
+      type: 'code-block',
+      language: 'js',
+      content: 'console.log("Hello, World!");',
+    });
+  });
+  it('should return result correct when call method shouldProceedToElementChildren', () => {
+    expect(strategy.shouldProceedToElementChildren()).toBeFalsy();
+  });
+  it('should get code content properly when the vega-code-block is empty', () => {
+    const codeElement = document.createElement('vega-code-block');
+    codeElement.setAttribute('data-language', 'js');
+    codeElement.setAttribute('data-content', 'console.log("Hello, World!");');
+    const result = strategy.handle([codeElement]);
+    expect(strategy.handle([codeElement]) instanceof RTECodeBlock).toBeTruthy();
+    expect(result.toJSON()).toEqual({
+      id: expect.any(String),
+      type: 'code-block',
+      language: 'js',
+      content: 'console.log("Hello, World!");',
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -267,5 +267,12 @@
 }
 
 .vega-hidden {
+  display: none !important;
+}
+
+.source-view-container {
+  margin-top: 12px;
+}
+.source-view-container vega-code-block::part(editor-toolbar) {
   display: none;
 }

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -44,6 +44,9 @@ import { DeleteSelectedNodesController } from './slimmers/controllers/delete-sel
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 import { HistoryController } from './slimmers/controllers/history-controller';
+import { CodeBlockToolbarButtonSlimmer } from './slimmers/renderers/tools/code-block-toolbar-button-slimmer';
+import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
+import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 /**
  * @vegaVersion 2.34.0
  */
@@ -86,6 +89,8 @@ export class VegaRichTextEditor {
     this.lessIndentToolbarButtonSlimmer = new LessIndentToolbarButtonSlimmer();
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
+    this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -97,9 +102,11 @@ export class VegaRichTextEditor {
     this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
+    this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -467,7 +474,8 @@ export class VegaRichTextEditor {
   static get states() { return {
     "richTextContentEditable": {},
     "selectionMap": {},
-    "isInDarkMode": {}
+    "isInDarkMode": {},
+    "sourceView": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -661,6 +669,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -694,3 +708,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "historyController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "internalCodeBlockSelectionController", void 0);

package/dist/collection/helpers/code-format/code-formatter.js

@@ -0,0 +1,108 @@
+/**
+ * Class to format HTML code with proper indentation and style cleanup.
+ */
+class CodeFormatter {
+  constructor() {
+    /**
+     * Formats a given HTML source string by applying indentation and cleaning up styles.
+     *
+     * @param {string} source - The HTML source string to format.
+     * @param {CodeFormatOptions} options - Formatting options.
+     * @returns {string} The formatted HTML string.
+     */
+    this.format = (source, options = {}) => {
+      const { tabWidth = 4, useTabs = true } = options;
+      const indentUnit = useTabs ? '\t' : ' ';
+      const INDENT = indentUnit.repeat(tabWidth);
+      const tagRegex = /(<\/?[^>]+>)/g;
+      // Split source into tokens using tag boundaries while filtering out empty strings
+      const tokens = source.split(tagRegex).filter((t) => t.trim().length > 0);
+      let indentLevel = 0;
+      let output = '';
+      for (let i = 0; i < tokens.length; i++) {
+        let token = tokens[i];
+        // Decrease indentation for closing tags
+        if (token.startsWith('</')) {
+          indentLevel = Math.max(0, indentLevel - 1);
+        }
+        const indent = INDENT.repeat(indentLevel);
+        if (token.startsWith('<')) {
+          // Clean and normalize inline style attributes
+          token = token.replace(/style\s*=\s*"([^"]*)"/g, (_, styleContent) => {
+            return `style="${this.formatStyle(styleContent)}"`;
+          });
+          const tagName = CodeFormatter.getTagName(token);
+          const isInline = CodeFormatter.INLINE_TAGS.has(tagName);
+          // Inline tag grouping: e.g., <strong>Text</strong> stays on one line
+          if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags
+            let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
+            i += 2;
+            // Keep merging consecutive inline tag pairs
+            while (i + 2 < tokens.length &&
+              tokens[i + 1].startsWith('<') &&
+              CodeFormatter.INLINE_TAGS.has(CodeFormatter.getTagName(tokens[i + 1])) &&
+              tokens[i + 3] === `</${CodeFormatter.getTagName(tokens[i + 1])}>`) {
+              inlineGroup += `${tokens[i + 1]}${tokens[i + 2]}${tokens[i + 3]}`;
+              i += 3;
+            }
+            output += `${indent}${inlineGroup}\n`;
+          }
+          else {
+            output += `${indent}${token}\n`;
+            // Increase indentation for non-void opening tags
+            if (!token.startsWith('</') &&
+              !token.endsWith('/>') &&
+              !/^<br|^<img|^<meta|^<input|^<hr/i.test(token)) {
+              indentLevel++;
+            }
+          }
+        }
+        else {
+          // Add plain text content with current indentation
+          const text = token;
+          if (text.length > 0) {
+            output += `${INDENT.repeat(indentLevel)}${text}\n`;
+          }
+        }
+      }
+      return output.trim();
+    };
+  }
+  /**
+   * Extracts the tag name from an HTML tag string.
+   *
+   * @param {string} tag - A raw HTML tag string
+   * @returns {string} The lowercase tag name, or an empty string if no match is found.
+   */
+  static getTagName(tag) {
+    var _a;
+    const match = tag.match(/^<\/?([a-z0-9]+)/i);
+    return (_a = match === null || match === void 0 ? void 0 : match[1].toLowerCase()) !== null && _a !== void 0 ? _a : '';
+  }
+  /**
+   * Formats a CSS style string by trimming white space and ensuring consistent semicolon spacing.
+   *
+   * @param {string} style - The CSS style string to format.
+   * @returns {string} The formatted style string.
+   */
+  formatStyle(style) {
+    return style
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .join('; ');
+  }
+}
+CodeFormatter.INLINE_TAGS = new Set([
+  'span',
+  'strong',
+  'em',
+  'a',
+  'b',
+  'i',
+  'u',
+  'small',
+  'abbr',
+]);
+export default new CodeFormatter();