@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-input-controller.js

@@ -0,0 +1,255 @@
+var __decorate = (this && this.__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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * The class used to control the code block modify content action.
+ */
+export class CodeBlockInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertCompositionTextEndFlag = true;
+    /**
+     * Stop the input event bubbles and update the code value.
+     *
+     * @param {InputEvent} e - The input event object.
+     */
+    this.handleInputEvent = (e) => {
+      this.stopEventPropagation(e);
+      this.updateCodeContent();
+    };
+    /**
+     * Prevent paste the file into code block. Prevent to delete the last space.
+     *
+     * @param {InputEvent} e - The input event object.
+     */
+    this.handleBeforeInput = (e) => {
+      e.stopPropagation();
+      const inputType = e.inputType;
+      if (inputType === 'insertFromPaste' &&
+        e.dataTransfer &&
+        e.dataTransfer.files &&
+        e.dataTransfer.files.length) {
+        e.preventDefault();
+        return;
+      }
+      else if (inputType === 'deleteContentBackward') {
+        if (!this.value || !this.value.code || this.value.code === ' ') {
+          e.preventDefault();
+          return;
+        }
+        // In low version firefox, the selected text could not delete when press delete key, so we delete it manually.
+        const range = this.selectionController.getCurrentRange();
+        if (range && !range.collapsed) {
+          const contentStartOffset = this.getContentStartOffset(range);
+          const newValue = this.deleteSelectedText(contentStartOffset, range.toString().length);
+          e.preventDefault();
+          this.valueController.updateValue(newValue, this.value.language);
+          this.selectionController.enqueueSelectionRangeFutureState(contentStartOffset);
+          return;
+        }
+      }
+      this.storeStaticRange(e);
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input starts. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+     *
+     * @param {CompositionEvent} e The composition event instance
+     */
+    this.handleCompositionStart = (e) => {
+      this.insertCompositionTextEndFlag = false;
+      this.stopEventPropagation(e);
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input ends. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+     *
+     * @param {CompositionEvent} e The composition event instance
+     */
+    this.handleCompositionEnd = (e) => {
+      this.insertCompositionTextEndFlag = true;
+      this.stopEventPropagation(e);
+      this.updateCodeContent();
+    };
+  }
+  /**
+   * Stop `beforeinput` and `input` event bubbles to parent element.
+   */
+  registerInputEvent() {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    if (codeContentContainerRef) {
+      codeContentContainerRef.addEventListener('compositionstart', this.handleCompositionStart);
+      codeContentContainerRef.addEventListener('compositionend', this.handleCompositionEnd);
+      codeContentContainerRef.addEventListener('beforeinput', this.handleBeforeInput);
+      codeContentContainerRef.addEventListener('input', this.handleInputEvent);
+    }
+  }
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener() {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    if (codeContentContainerRef) {
+      codeContentContainerRef.removeEventListener('beforeinput', this.handleBeforeInput);
+      codeContentContainerRef.removeEventListener('input', this.handleInputEvent);
+      codeContentContainerRef.removeEventListener('compositionstart', this.handleCompositionStart);
+      codeContentContainerRef.removeEventListener('compositionend', this.handleCompositionEnd);
+    }
+  }
+  /**
+   * Stop the event bubbles.
+   *
+   * @param {Event} e - The event object.
+   */
+  stopEventPropagation(e) {
+    e.stopPropagation();
+  }
+  /**
+   * Delete the selected text manually.
+   *
+   * @param {number} contentStartOffset - The start index.
+   * @param {number} length - The selected text length.
+   * @returns {string} - The content after delete.
+   */
+  deleteSelectedText(contentStartOffset, length) {
+    let oldValue = this.value.code;
+    if (length >= oldValue.length) {
+      oldValue = '';
+    }
+    else {
+      oldValue = oldValue.slice(0, contentStartOffset) + oldValue.slice(contentStartOffset + length);
+    }
+    return oldValue;
+  }
+  /**
+   * Calculate caret position of the code content.
+   *
+   * @param {Range} param - The range instance.
+   * @returns {number} - The caret position.
+   */
+  getContentStartOffset({ startContainer, startOffset }) {
+    const startSpan = startContainer.nodeType === Node.TEXT_NODE
+      ? startContainer.parentElement
+      : startContainer;
+    const currentNodes = this.contentParseController.getCurrentCodeNodes();
+    let index = Number(startSpan.dataset.index);
+    if (startSpan.nodeName === 'CODE') {
+      index = startOffset;
+      startOffset = 0;
+    }
+    let beforeText = '';
+    for (let i = 0; i < index; i++) {
+      beforeText += currentNodes[i].text;
+    }
+    return beforeText.length + startOffset;
+  }
+  /**
+   * Store the static range of the input event if the `insertCompositionTextEndFlag` is true.
+   * The static range will be used to get the correct cursor position. In safari browser the range from the ShadowSelectionPolyfill is incorrect.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  storeStaticRange(e) {
+    const range = this.selectionController.getCurrentRange();
+    if (this.insertCompositionTextEndFlag && range) {
+      const { startContainer, startOffset } = range;
+      const dataLength = this.getInsertDataLength(e);
+      this.selectionController.storeInputStaticRange({
+        startContainer: startContainer,
+        startOffset: Math.max(0, startOffset + dataLength),
+      });
+    }
+  }
+  //TODO: Refactor the update range logic to unified the flow.
+  /**
+   * Calculates the length of the inserted data based on the input event type.
+   *
+   * @param {InputEvent} e - The input event object.
+   * @returns {number} - The length of the inserted data.
+   */
+  getInsertDataLength(e) {
+    const { data, inputType } = e;
+    switch (inputType) {
+      case 'insertText':
+        return data.length; // For insert text, we return the length of the inserted text.
+      case 'insertParagraph':
+      case 'insertLineBreak':
+        return 1; // For paragraph or line break, we consider it as a single character.
+      case 'deleteContentBackward':
+        return -1; // For delete backward, we return -1.
+      default:
+        return 0; // For other input types, we return 0.
+    }
+  }
+  /**
+   * Update the code content after user modify action.
+   */
+  updateCodeContent() {
+    var _a;
+    if (this.insertCompositionTextEndFlag) {
+      this.selectionController.enqueueSelectionRangeFutureState();
+      const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+      // Remove the unnecessary line break tag before get the code content.
+      this.removeUnnecessaryLineBreak(codeContentContainerRef.querySelector('br'));
+      let newContent = codeContentContainerRef.innerText;
+      if (newContent.endsWith('\n\n')) {
+        newContent = newContent.slice(0, newContent.length - '\n'.length) + ' ';
+      }
+      if (this.isInsertSingleLineBreakAtEnd(newContent)) {
+        newContent = newContent + ' ';
+      }
+      if (newContent.endsWith('\n')) {
+        newContent = newContent.slice(0, newContent.length - '\n'.length);
+      }
+      this.valueController.updateValue(newContent, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language);
+    }
+  }
+  /**
+   * If remove all content of span element, browser will create a new <br/> element, we need remove the unnecessary element.
+   * In firefox, the new <br/> element will append in span element when insert line break at end of content, and the current element should not remove.
+   *
+   * @param {Nullable<HTMLElement>} br - The new create line break element.
+   */
+  removeUnnecessaryLineBreak(br) {
+    if (br && br.parentElement && br.parentElement.tagName !== 'SPAN') {
+      br.remove();
+    }
+  }
+  /**
+   * In some low versions of firefox, there are only one line break tag when insert line break at end of content. We need check this and add white space to make the line break work properly.
+   *
+   * @param {string} newValue - The new code content.
+   * @returns {boolean} - Boolean result.
+   */
+  isInsertSingleLineBreakAtEnd(newValue) {
+    if ((!this.value && newValue === ' \n') || (this.value && this.value.code + '\n' === newValue)) {
+      return true;
+    }
+    return false;
+  }
+}
+__decorate([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "contentRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "contentParseController", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "value", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], CodeBlockInputController.prototype, "registerInputEvent", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], CodeBlockInputController.prototype, "unregisterEventListener", null);

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-selection-controller.js

@@ -0,0 +1,266 @@
+var __decorate = (this && this.__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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import ShadowSelectionPolyfill, { ShadowSelection, } from '../../../../polyfill/shadow-selection/shadow-selection-polyfill';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalCodeBlockSelectionChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { SelectionController } from '../../../vega-rich-text-editor/slimmers/controllers/selection-controller';
+import { debounce } from '../../../../utils/timer';
+/**
+ * The class used to control the code block input cursor.
+ */
+export class VegaCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.selectionState = null;
+    this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, VegaCodeBlockSelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      // add await Promise.resolve to put the code behind to a micro task
+      await Promise.resolve();
+      const selection = this.getSelection();
+      const range = this.createNextRange();
+      if (selection && range) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    };
+  }
+  /**
+   * Get current range instance.
+   *
+   * @returns {Nullable<Range>} - The range instance or null.
+   */
+  getCurrentRange() {
+    const selection = this.getSelection();
+    if (selection.rangeCount) {
+      return selection.getRangeAt(0);
+    }
+  }
+  /**
+   * We need to store the selection state if the selection is a ShadowSelection, because the range is out of date in `input` event.
+   *
+   * @param {VegaRangeLike} range - The range like object.
+   */
+  storeInputStaticRange(range) {
+    const selection = this.getSelection();
+    if (selection instanceof ShadowSelection) {
+      this.selectionState = {
+        contentOffset: this.getContentOffsetByRange(range),
+        currentNodeOffset: 0,
+      };
+    }
+  }
+  /**
+   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue.
+   *
+   * @param {Nullable<number>} [offset] - Set the range start offset to current position.
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false.
+   */
+  enqueueSelectionRangeFutureState(offset, immediatelyRun = false) {
+    if (offset || offset === 0) {
+      this.selectionState = {
+        contentOffset: offset,
+        currentNodeOffset: 0,
+      };
+    }
+    else {
+      const selection = this.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        // If the selection is a ShadowSelection, we need to use the selectionState update in method `storeInputStaticRange`.
+        // Otherwise, we can get the content offset from the selection range.
+        if (!(selection instanceof ShadowSelection)) {
+          const range = selection.getRangeAt(0);
+          this.selectionState = {
+            contentOffset: this.getContentOffsetByRange(range),
+            currentNodeOffset: range.startOffset,
+          };
+        }
+      }
+    }
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Component lifecycle
+   */
+  addSelectionChangeEventListener() {
+    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Component lifecycle
+   */
+  removeSelectionChangeEventListener() {
+    document.removeEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Create the code block shadowRoot new range instance from the next selection state.
+   *
+   * @returns {Nullable<Range>} - The new range instance.
+   */
+  createNextRange() {
+    if (this.selectionState) {
+      const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+      const rangeStartNodeSelector = this.getCursorNodeSelectorAndUpdateOffset();
+      let startOffset = this.selectionState.currentNodeOffset;
+      const cursorSpan = codeContentContainerRef.querySelector(rangeStartNodeSelector);
+      if (cursorSpan) {
+        const range = new Range();
+        startOffset = Math.min(cursorSpan.firstChild.textContent.length, startOffset);
+        range.setStart(cursorSpan.firstChild, startOffset);
+        range.setEnd(cursorSpan.firstChild, startOffset);
+        this.selectionState = null;
+        return range;
+      }
+    }
+  }
+  /**
+   * Get the code block selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    return ShadowSelectionPolyfill.getSelection(this.host.shadowRoot);
+  }
+  /**
+   * Get the current input cursor offset of the code content, so we can get the next cursor node according the offset after re-render.
+   *
+   * @example
+   * Code content: const t = new Date();\nconsole.log(t);
+   * Render result: <span>const</span><span> t</span><span> = </span><span>new</span><span> Date();</span><span>\n</span><span>console.</span><span>log</span><span>(t)</span>
+   * Current range: {startContainer: [The last span], startOffset:2}
+   * Offset: 26
+   * @param {VegaRangeLike} range - The current selection range like object.
+   * @returns {number} - The index of the cursor position.
+   */
+  getContentOffsetByRange(range) {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    let { startContainer, startOffset } = range;
+    if (startContainer.nodeName === 'SPAN' && startContainer.childNodes.length > 1) {
+      startContainer = startContainer.childNodes[Math.max(0, startOffset - 1)];
+      startOffset = this.getTextContent(startContainer).length;
+    }
+    const spanNodes = Array.from(codeContentContainerRef.childNodes);
+    let offset = 0;
+    const startSpan = startContainer.nodeName === 'BR' || startContainer.nodeType === Node.TEXT_NODE
+      ? startContainer.parentElement
+      : startContainer;
+    for (let i = 0; i < spanNodes.length; i++) {
+      if (startContainer === codeContentContainerRef) {
+        if (i < startOffset) {
+          offset += this.getTextContent(spanNodes[i]).length;
+        }
+      }
+      else {
+        if (spanNodes[i] === startSpan) {
+          if (startSpan.childNodes.length === 1) {
+            offset += startOffset;
+          }
+          else {
+            for (let j = 0; j < startSpan.childNodes.length; j++) {
+              if (startSpan.childNodes[j] === startContainer) {
+                offset += startOffset;
+                break;
+              }
+              else {
+                offset += this.getTextContent(startSpan.childNodes[j]).length;
+              }
+            }
+          }
+          break;
+        }
+        else {
+          offset += this.getTextContent(spanNodes[i]).length;
+        }
+      }
+    }
+    return offset;
+  }
+  /**
+   * Get the range start container selector after the code content re-render and update the offset of current node.
+   *
+   * @returns {string} - The span which has attribute data-index=[index].
+   */
+  getCursorNodeSelectorAndUpdateOffset() {
+    const codeNodes = this.contentParseController.getCurrentCodeNodes();
+    const { contentOffset } = this.selectionState;
+    let nodeIndex = 0;
+    if (!this.value || !this.value.code || contentOffset >= this.value.code.length) {
+      this.selectionState.currentNodeOffset = codeNodes[codeNodes.length - 1].text.length;
+      nodeIndex = codeNodes.length - 1;
+    }
+    else {
+      let text = '';
+      for (let i = 0; i < codeNodes.length; i++) {
+        text += codeNodes[i].text;
+        if (text.length >= contentOffset) {
+          this.selectionState.currentNodeOffset = Math.max(0, codeNodes[i].text.length - (text.length - contentOffset));
+          nodeIndex = i;
+          break;
+        }
+      }
+    }
+    // The cursor position is incorrect in firefox when cursor node is line break node.
+    if (codeNodes[nodeIndex].text === '\n' && this.selectionState.currentNodeOffset > 0) {
+      nodeIndex++;
+      this.selectionState.currentNodeOffset = 0;
+    }
+    return `span[data-index="${nodeIndex}"]`;
+  }
+  /**
+   * Notify the code content selection change event.
+   */
+  handleSelectionChange() {
+    const selection = this.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCodeBlockSelectionChange), { detail: true });
+    }
+    else {
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCodeBlockSelectionChange), { detail: false });
+    }
+  }
+  /**
+   * Get the node text content, the BR node will return `\n`;
+   *
+   * @param {Node} node - The node instance.
+   * @returns {string} - The node text content.
+   */
+  getTextContent(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+    else if (node.nodeName === 'BR') {
+      return '\n';
+    }
+    else {
+      return node.innerText;
+    }
+  }
+}
+// Must make sure the debounce time will not greater than the RTE selection range debounce time.
+VegaCodeBlockSelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = Math.min(SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, 40);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "contentRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "contentParseController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCodeBlockSelectionController.prototype, "addSelectionChangeEventListener", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCodeBlockSelectionController.prototype, "removeSelectionChangeEventListener", null);

package/dist/collection/components/vega-code-block/slimmers/controllers/vega-code-block-value-controller.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * The component value controller.
+ */
+export class VegaCodeBlockValueController extends VegaSlimmer {
+  /**
+   * Update the component value if code content or code language update.
+   *
+   * @param {string} code - The new code content.
+   * @param {string} language - The new code language.
+   */
+  updateValue(code, language) {
+    if (!this.value || this.value.code !== code || this.value.language !== language) {
+      this.value = {
+        language: language,
+        code,
+      };
+      this.changeEventEmitter.emit(this.value);
+    }
+  }
+  /**
+   * Set a default value if the value is not defined.
+   */
+  initialValue() {
+    if (!this.value) {
+      this.value = { code: '', language: 'plainText' };
+    }
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCodeBlockValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaCodeBlockValueController.prototype, "initialValue", null);

package/dist/collection/components/vega-code-block/slimmers/renderers/vega-code-block-content-renderer.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__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);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Fragment, h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * The code block content renderer class.
+ */
+export class VegaCodeBlockContentRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The code input area focus.
+     */
+    this.handleFocus = () => {
+      if (!this.readOnly && !this.disabled) {
+        this.host.classList.add('focus');
+      }
+    };
+    /**
+     * The code input area blur.
+     */
+    this.handleBlur = () => {
+      this.host.classList.remove('focus');
+    };
+  }
+  /**
+   * Get the editable root element.
+   *
+   * @returns {HTMLElement} - The root element.
+   */
+  getCodeContentContainerRef() {
+    return this.codeContentContainerRef;
+  }
+  /**
+   * Add focus and blur event listener.
+   */
+  registerEventListener() {
+    if (this.codeContentContainerRef) {
+      this.codeContentContainerRef.addEventListener('focusin', this.handleFocus);
+      this.codeContentContainerRef.addEventListener('focusout', this.handleBlur);
+    }
+  }
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener() {
+    if (this.codeContentContainerRef) {
+      this.codeContentContainerRef.removeEventListener('focusin', this.handleFocus);
+      this.codeContentContainerRef.removeEventListener('focusout', this.handleBlur);
+    }
+  }
+  /**
+   * Render the code content.
+   *
+   * @returns {HTMLElement} - The code element.
+   */
+  render() {
+    var _a;
+    const codeNodes = this.contentParseController.parseCode();
+    const language = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.language) || '';
+    return (h(Fragment, null,
+      h("style", null, this.getLineNumberStyleVariable(codeNodes)),
+      h("code", { role: "textbox", tabIndex: 0, spellcheck: false, ref: (node) => (this.codeContentContainerRef = node), contenteditable: this.readOnly || this.disabled ? false : true, "data-language": language, innerHTML: codeNodes
+          .map((codeNode) => this.renderCodeNode(codeNode))
+          .join('') })));
+  }
+  /**
+   * Render the code node the html element.
+   *
+   * @param {CodeNodeType} codeNode - The code node object.
+   * @returns {string} - The html element.
+   */
+  renderCodeNode(codeNode) {
+    const { key, className, mark, text } = codeNode;
+    return `<span key='${key}' class='${className}' data-mark='${mark}' data-index='${key}'>${text || ' '}</span>`;
+  }
+  /**
+   * Dynamic calculate line number element width and update the margin and padding variable.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code node array.
+   * @returns {string} - The style content.
+   */
+  getLineNumberStyleVariable(codeNodes) {
+    const lineCountArray = codeNodes.filter((item) => {
+      return item.text === '\n';
+    });
+    const singleTextLength = 10;
+    const gap = 16;
+    const space = (lineCountArray.length + 1).toString().length * singleTextLength;
+    return `code{--v-code-line-number-width:${space}px;--v-code-line-number-ml:-${space + gap}px;--v-code-block-pl:${space + gap}px}`;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "readOnly", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "contentParseController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCodeBlockContentRenderer.prototype, "registerEventListener", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCodeBlockContentRenderer.prototype, "unregisterEventListener", null);