@globalpayments/vega 2.49.1 → 2.51.0

package/dist/esm/vega-rich-text-content.entry.js

@@ -1,31 +1,32 @@
-import { h, H as Host, r as registerInstance, g as getElement } from './index-187f71d1.js';
+import { h, H as Host, r as registerInstance, g as getElement } from './index-d0a47531.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { s as sanitizeVegaComponent } from './component-cae24190.js';
-import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-2ada8e22.js';
-import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1aa938ab.js';
-import { s as stateEntityRenderingRegistry, B as BlockAnnotation, N as NodeAnnotation, h as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, I as InternalAnnotationTypeEnum, L as LinkAnnotationAction, R as RTETextBlock, i as ImageAnnotation, a as RTEImageBlock, c as RTEListBlock, V as VegaRTEContent } from './content-state-dbc9f635.js';
+import { s as sanitizeVegaComponent } from './component-7d906393.js';
+import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-ea798fc8.js';
+import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1497f70e.js';
+import { w as stateEntityRenderingRegistry, x as BlockAnnotation, y as NodeAnnotation, N as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, z as InternalAnnotationTypeEnum, L as LinkAnnotationAction, d as RTETextBlock, C as ImageAnnotation, M as ModifyContentAction, f as ModifyContentActionType, U as UpdateCodeBlockAction, D as SelectionChangeAction, u as RTECodeBlock } from './code-block-ef2f04ca.js';
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-715dccf9.js';
-import { f as VegaChange } from './dom-node-subject-factory-f77cf9cc.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-be7a6ce3.js';
-import { f as findParent } from './ui-ed1283bb.js';
-import { a as waitForComponentDidRender } from './index-4aa167d6.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-c345ca2e.js';
+import { f as VegaChange, k as VegaRemove } from './dom-node-subject-factory-6374611f.js';
+import { R as RTEImageBlock, b as RTEListBlock, V as VegaRTEContent } from './content-state-69d29a07.js';
+import { o as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-178b2743.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-93eeb87d.js';
+import { f as findParent } from './ui-7d177fb0.js';
+import { a as waitForComponentDidRender } from './index-f5d2fe61.js';
 import './static-subject-title-ca83d6b6.js';
 import './change-manager-6a7eb88c.js';
 import './observer-3959f9dd.js';
 import './_commonjsHelpers-9943807e.js';
 import './internal-icon-manager-58cf8aa6.js';
 import './icon-manager-638dd4d4.js';
-import './vega-internal-event-id-85ad403f.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './dynamic-slimmer-90b8af32.js';
-import './wait-for-vega-handler-b18eb955.js';
+import './wait-for-vega-handler-e0a928cd.js';
 
 class RTEBlockRenderer {
   registerRef(ref, block) {
@@ -318,6 +319,161 @@ class RTEListBlockRenderer extends RTEBlockRenderer {
 }
 const RTEListBlockRenderer$1 = new RTEListBlockRenderer();
 
+/**
+ * Switch out from the code block and insert new paragraph after code block.
+ *
+ * @example codeBlock.apply(new SwitchOutFromCodeBlockAction(content, language))
+ */
+class SwitchOutFromCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}
+
+/**
+ * Remove the code block from the state.
+ *
+ * @example codeBlock.parentBlock.apply(new RemoveCodeBlockAction())
+ */
+class RemoveCodeBlockAction extends ModifyContentAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.DELETE_CODE_BLOCK;
+  }
+}
+
+class RTECodeBlockNodeRenderer extends RTENodeRenderer {
+  render(node, renderContext) {
+    const { text: code, language } = node;
+    return (h("vega-code-block", { key: node.id, value: { code, language }, readOnly: !renderContext.editable, "data-content": code, "data-language": language, ref: (ref) => {
+        this.registerRef(ref, node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => this.handleCodeContentChange(input.detail, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaRemove, (input) => this.handleCodeBlockRemove(input, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockSelectionChange, (input) => this.handleSelectionChange(input.detail, node));
+      } }));
+  }
+  /**
+   * Sync the code block DTO language and content when the component change event emit.
+   *
+   * @param {VegaCodeBlockValue} codeBlockValue - The code block value.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeContentChange(codeBlockValue, node) {
+    const { code, language } = codeBlockValue;
+    if (this.shouldSwitchOutOfCodeBlock(node.text, code)) {
+      const switchAction = new SwitchOutFromCodeBlockAction(code, language);
+      node.parentBlock.apply(switchAction);
+    }
+    else {
+      node.apply(new UpdateCodeBlockAction(code, language));
+    }
+  }
+  /**
+   * Remove the code block from RTE value when the component remove event emit.
+   *
+   * @param {ChangeManagerEventLike<unknown>} input - The internal event payload object.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeBlockRemove(input, node) {
+    input.preventDefault();
+    node.parentBlock.apply(new RemoveCodeBlockAction());
+  }
+  /**
+   * The cursor should jump out of code block if enter three line breaks at the end.
+   *
+   * @param {string} oldCode - The old code content.
+   * @param {string} newCode - The new code content.
+   * @returns {boolean} - Boolean value.
+   */
+  shouldSwitchOutOfCodeBlock(oldCode, newCode) {
+    const newCodes = newCode.split('\n');
+    if (newCode.length > oldCode.length &&
+      newCodes.length > 4 &&
+      newCodes.slice(newCodes.length - 4).join('') === ``) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Apply the selection action to code node or remove from the annotation map.
+   *
+   * @param {boolean} isSelected - The code block is focus or not.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleSelectionChange(isSelected, node) {
+    if (isSelected) {
+      node.apply(new SelectionChangeAction(null));
+    }
+    else {
+      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    }
+  }
+}
+const RTECodeBlockNodeRenderer$1 = new RTECodeBlockNodeRenderer();
+
+/**
+ * The code block renderer.
+ */
+class RTECodeBlockRenderer extends RTEBlockRenderer {
+  /**
+   * Check the input block type.
+   *
+   * @param {RTEBlock} block - The input block.
+   * @returns {boolean} - Return true if the input block is a code block.
+   */
+  canHandle(block) {
+    return block instanceof RTECodeBlock;
+  }
+  /**
+   * Render the code block.
+   *
+   * @param {RTECodeBlock} block - The code block.
+   * @param {RTERenderContext} renderContext - The render context.
+   * @returns {HTMLElement} - The code block container element and code node elements.
+   */
+  render(block, renderContext) {
+    const { id, nodes } = block;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    h("pre", { key: id, class: "code-block-container", ref: (node) => this.registerRef(node, block), onKeyDown: this.preventParentDoFocus, onClick: this.preventParentDoFocus, "data-language": nodes[0].language },
+      this.renderPlaceholderElement('TOP'),
+      RTECodeBlockNodeRenderer$1.render(nodes[0], renderContext),
+      this.renderPlaceholderElement('BOTTOM')));
+  }
+  /**
+   * The current element used to define the upper and lower bounds of a code block and to ensure that they are reflected in the range object when the code block is selected.
+   *
+   * @param {'TOP' | 'BOTTOM'} position - The element position.
+   * @returns {HTMLElement} - The empty span element.
+   */
+  renderPlaceholderElement(position) {
+    const marginTop = position === 'BOTTOM' ? '-1px' : '0px';
+    const marginBottom = position === 'BOTTOM' ? '0px' : '-1px';
+    return (h("span", { class: RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME, style: {
+        display: 'block',
+        height: '1px',
+        overflow: 'hidden',
+        zIndex: '1',
+        marginTop,
+        marginBottom,
+      } }, ZERO_WIDTH_SPACE));
+  }
+  /**
+   * Prevent the click event bubble, avoid the rich text content trigger focus event.
+   *
+   * @param {MouseEvent} e - The event object.
+   */
+  preventParentDoFocus(e) {
+    e.stopPropagation();
+  }
+}
+const RTECodeBlockRenderer$1 = new RTECodeBlockRenderer();
+
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -328,6 +484,7 @@ class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
     this.blockRenderers = [
+      RTECodeBlockRenderer$1,
       RTETextBlockRenderer$1,
       RTEImageBlockRenderer$1,
       RTEListBlockRenderer$1,
@@ -442,7 +599,7 @@ __decorate$1([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentStateController.prototype, "contentEditable", void 0);
 
-const vegaRichTextContentCss = ":host{display:flex;flex-direction:column;width:100%}:host .rich-text-content{position:relative;height:100%;outline:2px solid transparent;outline-offset:2px;font-family:\"Inter\", sans-serif;font-weight:500;color:var(--v-rich-text-editor-black, #111128);overflow-wrap:break-word;white-space:pre-wrap}:host .rich-text-content.showPlaceholder::before{position:absolute;content:attr(data-placeholder);font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-content h1,:host .rich-text-content h2,:host .rich-text-content h3,:host .rich-text-content h4,:host .rich-text-content h5,:host .rich-text-content h6,:host .rich-text-content p{margin:0}:host .rich-text-content a.v-rte--link{color:rgba(var(--v-text-link, 19, 98, 226, 1));outline:none}:host .rich-text-content a.v-rte--link:visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host .rich-text-content a.v-rte--link:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .rich-text-content a.v-rte--link:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .rich-text-content a.v-rte--link:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .rich-text-content .v-rte--underline{text-decoration:underline}:host .rich-text-content .v-rte--strikethrough{text-decoration:line-through}:host .rich-text-content .v-rte--underline.v-rte--strikethrough{text-decoration:underline line-through}:host .rich-text-content .v-rte--horizontal-alignment-right{text-align:right}:host .rich-text-content .v-rte--horizontal-alignment-left{text-align:left}:host .rich-text-content .v-rte--horizontal-alignment-center{text-align:center}:host .rich-text-content .v-rte--horizontal-alignment-justify{text-align:justify}:host .rich-text-content .v-rte--code{font-family:\"Roboto Mono\";white-space:pre-wrap}:host .rich-text-content img{vertical-align:bottom;cursor:pointer}:host .rich-text-content ul{padding-left:8px;margin-left:16px}:host .rich-text-content ol{padding-left:8px;list-style-position:inside}:host .rich-text-content .link-editor-wrapper{position:relative;outline:2px solid transparent;outline-offset:2px}:host .rich-text-content .link-editor-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}";
+const vegaRichTextContentCss = ":host{display:flex;flex-direction:column;width:100%}:host .rich-text-content{position:relative;height:100%;outline:2px solid transparent;outline-offset:2px;font-family:\"Inter\", sans-serif;font-weight:500;color:var(--v-rich-text-editor-black, #111128);overflow-wrap:break-word;white-space:pre-wrap}:host .rich-text-content.showPlaceholder::before{position:absolute;content:attr(data-placeholder);font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-content h1,:host .rich-text-content h2,:host .rich-text-content h3,:host .rich-text-content h4,:host .rich-text-content h5,:host .rich-text-content h6,:host .rich-text-content p{margin:0}:host .rich-text-content a.v-rte--link{color:rgba(var(--v-text-link, 19, 98, 226, 1));outline:none}:host .rich-text-content a.v-rte--link:visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host .rich-text-content a.v-rte--link:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .rich-text-content a.v-rte--link:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .rich-text-content a.v-rte--link:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .rich-text-content .v-rte--underline{text-decoration:underline}:host .rich-text-content .v-rte--strikethrough{text-decoration:line-through}:host .rich-text-content .v-rte--underline.v-rte--strikethrough{text-decoration:underline line-through}:host .rich-text-content .v-rte--horizontal-alignment-right{text-align:right}:host .rich-text-content .v-rte--horizontal-alignment-left{text-align:left}:host .rich-text-content .v-rte--horizontal-alignment-center{text-align:center}:host .rich-text-content .v-rte--horizontal-alignment-justify{text-align:justify}:host .rich-text-content .v-rte--code{font-family:\"Roboto Mono\";white-space:pre-wrap}:host .rich-text-content img{vertical-align:bottom;cursor:pointer}:host .rich-text-content ul{padding-left:8px;margin-left:16px}:host .rich-text-content ol{padding-left:8px;list-style-position:inside}:host .rich-text-content .link-editor-wrapper{position:relative;outline:2px solid transparent;outline-offset:2px}:host .rich-text-content .link-editor-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}:host .rich-text-content .code-block-container{margin-top:22px;margin-bottom:22px}:host .rich-text-content vega-code-block.focus{outline:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;