@heartlandone/vega 2.34.0 → 2.35.0-RTE-preview

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract.js

@@ -0,0 +1,258 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { rgbToHex } from '../../../../../../utils/ui';
+import { RTE_TEXT_COLORS } from '../../../../constants/constant';
+import { ElementToDTOStrategy } from './element-to-dto-strategy.abstract';
+/** Abstract class for block html element to RTE block dto */
+export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
+  /**
+   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
+   *   flat the child nodes.
+   *
+   * Example:
+   *   <li>
+   *     <u><i>text1</i></u>
+   *     <span style='font-weight: bold;'><span>text2</span></span>
+   *     text3
+   *   </li>
+   * will tranform to:
+   *   <li>
+   *     <span>text1</span> // with underline and italic annotations
+   *     <span>text2</span> // with bold annotations
+   *     <span>text3</span> // no annotations
+   *   </li>
+   *
+   * @param {HTMLElement[]} elements - Child elements.
+   * @param {HTMLElement[]} annotations - Parent annotations.
+   * @returns {VegaRTETextNode[]} - Text node DTO.
+   */
+  generateChildNodes(elements, annotations = {}) {
+    const childNodes = [];
+    elements.forEach((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (this.isInvalidTextNode(child))
+          return;
+        childNodes.push({
+          id: generateUUID(),
+          type: 'text',
+          text: child.textContent,
+          annotations: annotations,
+        });
+      }
+      else {
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child))));
+      }
+    });
+    return childNodes;
+  }
+  /**
+   * Generate annotations map for block element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTEBlockAnnotations} - Text block annotations.
+   */
+  generateBlockAnnotations(element) {
+    const annotations = {};
+    const textAlign = this.getTextAlign(element);
+    const indent = this.getIndent(element);
+    if (textAlign)
+      annotations.textAlign = textAlign;
+    if (indent)
+      annotations.indent = indent;
+    return annotations;
+  }
+  /**
+   * Check is a invalid text node.
+   *
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
+   */
+  isInvalidTextNode(element) {
+    if (element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return false;
+  }
+  /**
+   * Generate annotations map for text node element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
+   */
+  generateTextNodeAnnotations(element) {
+    if (this.isCode(element))
+      return { code: true };
+    const annotations = {
+      bold: this.isBold(element),
+      italic: this.isItalic(element),
+      underline: this.isUnderline(element),
+      strikethrough: this.isStrikethrough(element),
+    };
+    const color = this.getColor(element);
+    const link = this.getLink(element);
+    if (color)
+      annotations.textColor = color;
+    if (link)
+      annotations.link = link;
+    return annotations;
+  }
+  /**
+   * Is code element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isCode(element) {
+    return element.classList.contains('v-rte--code') || element.nodeName === 'CODE';
+  }
+  /**
+   * Is bold element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700');
+  }
+  /**
+   * Is italic element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isItalic(element) {
+    return element.nodeName === 'I' || element.style.fontStyle === 'italic' || element.nodeName === 'EM';
+  }
+  /**
+   * Is underline element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.classList.contains('v-rte--underline'));
+  }
+  /**
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.classList.contains('v-rte--strikethrough'));
+  }
+  /**
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
+   */
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      const colorSchema = RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
+  }
+  /**
+   * Get current link of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTELink>} - link.
+   */
+  getLink(element) {
+    if (element.nodeName === 'A') {
+      return {
+        href: element.href,
+        groupKey: generateUUID(),
+      };
+    }
+    return null;
+  }
+  /**
+   * Get text align of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   */
+  getTextAlign(element) {
+    const classList = element.classList;
+    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
+      return 'left';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
+      return 'center';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
+      return 'right';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
+      return 'justify';
+    }
+    const style = element.style;
+    switch (style.textAlign) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'right';
+      case 'justify':
+        return 'justify';
+      case 'left':
+        return 'left';
+      default:
+        return null;
+    }
+  }
+  /**
+   * Get indent of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -0,0 +1,71 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform continue inline block elements to text block DTO */
+export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (element.nodeType === Node.TEXT_NODE ||
+        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
+          !(element.textContent === '' && element.querySelector('IMG')))) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const parent = elementsArray[0].parentElement;
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: nodes,
+      annotations: this.generateBlockAnnotations(parent),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+ContinueInlineToRTETextBlockStrategy.canHandleTags = [
+  'SPAN',
+  'STRONG',
+  'CODE',
+  'I',
+  'EM',
+  'S',
+  'U',
+  'A',
+  'VEGA-RICH-TEXT-LINK-EDITOR',
+];

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy-processor.js

@@ -0,0 +1,70 @@
+import { ElementToDTOStrategyOutput } from './element-to-dto-strategy.abstract';
+import { ContinueInlineToRTETextBlockStrategy } from './continue-inline-to-rte-text-block-strategy';
+import { UlToRTEListBlockStrategy } from './ul-to-rte-list-block-strategy';
+import { LiToRTEListItemBlockStrategy } from './li-to-rte-list-item-block-strategy';
+import { InlineBlockToRTETextBlockStrategy } from './inline-block-to-rte-text-block-strategy';
+import { ImgToRTEImageBlockStrategy } from './img-to-rte-image-block-strategy';
+import { VegaImageToRTEImageBlockStrategy } from './vega-image-to-rte-image-block-strategy';
+import { OlToRTEListBlockStrategy } from './ol-to-rte-list-block-strategy';
+import { SpanImageToRTEImageBlockStrategy } from './span-img-to-rte-image-block-strategy';
+/** Element to DTO processor */
+export class ElementToDtoStrategyProcessor {
+  constructor() {
+    this.elementStrategies = [
+      new UlToRTEListBlockStrategy(),
+      new OlToRTEListBlockStrategy(),
+      new LiToRTEListItemBlockStrategy(),
+      new InlineBlockToRTETextBlockStrategy(),
+      new ImgToRTEImageBlockStrategy(),
+      new VegaImageToRTEImageBlockStrategy(),
+      new SpanImageToRTEImageBlockStrategy(),
+      new ContinueInlineToRTETextBlockStrategy(),
+    ];
+  }
+  /**
+   * Transform process.
+   *
+   * @param {HTMLElement[]} elements - Current elements.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements) {
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i]))
+        continue;
+      let canHandledCount = 0;
+      for (const strategy of this.elementStrategies) {
+        canHandledCount = strategy.canHandle(elements, i);
+        if (canHandledCount > 0) {
+          const handledElements = elements.slice(i, i + canHandledCount);
+          const output = new ElementToDTOStrategyOutput(strategy, handledElements);
+          if (canHandledCount === 1 && strategy.shouldProceedToElementChildren()) {
+            output.setChildrenOutput(this.process(Array.from(handledElements[0].childNodes)));
+          }
+          outputs.push(output);
+          i += canHandledCount - 1;
+          break;
+        }
+      }
+      if (canHandledCount === 0 && i < elements.length) {
+        const elementChildren = Array.from(elements[i].childNodes);
+        const childrenOutputs = this.process(Array.from(elementChildren));
+        if (childrenOutputs.length > 0) {
+          outputs.push(...childrenOutputs);
+        }
+      }
+    }
+    return outputs;
+  }
+  /**
+   * Checks if the given element is valid to parse.
+   *
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
+   */
+  isInvalidElement(element) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract.js

@@ -0,0 +1,37 @@
+/**
+ * Abstract class to define strategies for processing HTML elements
+ */
+export class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+export class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
+  }
+  /**
+   * Set children output.
+   *
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
+   */
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
+  }
+  /**
+   * Transform current output and children output to DTO
+   *
+   * @returns {RTEContentBlock} - DTO.
+   */
+  toDto() {
+    const currentBlock = this.currentStrategy.handle(this.currentElements);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto())
+        .filter(Boolean));
+    }
+    return currentBlock;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/img-to-rte-image-block-strategy.js

@@ -0,0 +1,55 @@
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+/** Transform img element to image block DTO */
+export class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-block-to-rte-text-block-strategy.js

@@ -0,0 +1,85 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform inline block element to text block DTO */
+export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: this.getElementType(elementsArray[0]),
+      nodes: nodes,
+      annotations: Object.assign(Object.assign({}, this.generateBlockAnnotations(elementsArray[0])), { textStyle: this.getElementType(elementsArray[0]) }),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Get node type of element.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {string} - node type.
+   */
+  getElementType(element) {
+    var _a;
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
+      case '36px':
+        return 'title';
+      case '28px':
+        return 'subtitle';
+      case '22px':
+        return 'heading-1';
+      case '20px':
+        return 'heading-2';
+      case '18px':
+        return 'heading-3';
+      default:
+        break;
+    }
+    switch (element.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      default:
+        return '';
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/li-to-rte-list-item-block-strategy.js

@@ -0,0 +1,49 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform li element to list item block DTO */
+export class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName))),
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list blocks to current list item block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ol-to-rte-list-block-strategy.js

@@ -0,0 +1,50 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEListBlock } from '../../../../dto/blocks/list-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform ol element to list block DTO */
+export class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  }
+  /**
+   * Parse to a number list block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}