@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -0,0 +1,69 @@
+import { JiraCodeToRTECodeBlockStrategy } from './jira-code-to-rte-code-block-strategy';
+/** Transform vega-code-block element to code block DTO */
+export class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @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 === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code 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;
+  }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
+}

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

@@ -1,9 +1,9 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTEImageBlock } from '../../../../dto/blocks/image-block';
-import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
 import { isNonNullable } from '../../../../../../types/type-guard';
+import { ElementToRTEImageBlockStrategyAbstract } from './element-to-rte-image-block-strategy.abstract';
 /** Transform vega-rich-text-image-editor element to image block DTO */
-export class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+export class VegaImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
   /**
    * Can be handle.
    *
@@ -32,13 +32,10 @@ export class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbs
             id: generateUUID(),
             type: 'image',
             url: image.src,
-            annotations: {
-              size: element.size || 'md',
-              alt: element.alt,
-            },
+            annotations: Object.assign({ size: this.getImageSize(element), alt: element.alt }, this.generateCommonAnnotations(element)),
           },
         ],
-        annotations: this.generateBlockAnnotations(element),
+        annotations: this.generateBlockAnnotations(element.parentElement),
       });
     }
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-line-break-handler.js

@@ -13,11 +13,13 @@ export class InsertLineBreakHandler extends BaseHandler {
     if (this.isRootContainer(range.startContainer)) {
       this.breakNewBlock();
     }
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paragraph-handler.js

@@ -9,11 +9,13 @@ export class InsertParagraphHandler extends BaseHandler {
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -3,15 +3,11 @@ import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nod
 import { InsertBlocksAfterAction } from '../../../../dto/actions/insert-blocks-after-block';
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
 import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
-import { ElementToDtoStrategyProcessor } from '../element-to-dto-strategy/element-to-dto-strategy-processor';
+import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
 /**
  * Handle user paste
  */
 export class InsertPasteHandler extends BaseHandler {
-  constructor() {
-    super(...arguments);
-    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
-  }
   /**
    * Update the state value when user paste html elements.
    *
@@ -63,8 +59,10 @@ export class InsertPasteHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange();
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
-    this.switchCaretPositionToNextElement(currentBlock);
+    if (currentBlock) {
+      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(currentBlock);
+    }
   }
   /**
    * Format and parse elements from user paste.
@@ -73,11 +71,14 @@ export class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    const pastedHTML = event.dataTransfer.getData('text/html');
+    let pastedHTML = event.dataTransfer.getData('text/html');
+    if (!pastedHTML) {
+      const pastedText = event.dataTransfer.getData('text/plain');
+      pastedHTML = this.parsePlainText(pastedText);
+    }
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor
-      .process(Array.from(tempContainer.childNodes))
+    return ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -92,4 +93,18 @@ export class InsertPasteHandler extends BaseHandler {
       this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
     }
   }
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  parsePlainText(content) {
+    const lines = content.split('\n');
+    return lines
+      .map((line) => {
+      return `<span>${line}</span>`;
+    })
+      .join('<span>\n</span>');
+  }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/internal-code-block-selection-controller.js

@@ -0,0 +1,64 @@
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+/**
+ * The rich text internal code block selection controller.
+ */
+export class InternalCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.focusNodeOffset = 0;
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      await this.focusTheCodeBlock(this.shouldFocusNode);
+    };
+  }
+  /**
+   * Update the internal code block selection.
+   *
+   * @param {RTECodeBlockNode} startNode - The internal code block node DTO.
+   * @param {number} startOffset - The content offset.
+   * @param {boolean} immediatelyRun - Whether to invoke the method immediately.
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun) {
+    this.shouldFocusNode = startNode;
+    this.focusNodeOffset = startOffset;
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Check the code block is actually selected or not. Because the Code block is a shadow dom, so can't detect the content selected state.
+   * We add two placeholder spans at the begin and end position, we could check the placeholder spans selected state to make sure the code block is selected or not.
+   *
+   *
+   * @example
+   * <div>
+   * <span></span>
+   * <vega-code-block></vega-code-block>
+   * <span><span>
+   * </div>
+   * @param {RTECodeBlock} codeBlock - The code block DTO.
+   * @param {Range} range - The range instance.
+   * @returns {boolean} - The boolean result.
+   */
+  isCodeBlockSelected(codeBlock, range) {
+    const codeBlockNode = codeBlock.nodes[0];
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock.isSelected() ||
+      (entityDom &&
+        range.intersectsNode(entityDom.nextSibling) &&
+        range.intersectsNode(entityDom.previousSibling)));
+  }
+  /**
+   * Focus the code block component.
+   *
+   * @param {RTECodeBlockNode} node - The code block node DTO.
+   */
+  async focusTheCodeBlock(node) {
+    await Promise.resolve();
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(node);
+    if (entityDom) {
+      void entityDom.doFocus();
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -4,15 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { debounce } from '../../../../utils/timer';
 import { RTENode } from '../../dto/nodes/node.abstract';
 import { SelectionChangeAction } from '../../dto/actions/selection-change-action';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
 import { InternalAnnotationTypeEnum } from '../../dto/annotations/annotation.abstract';
 import ShadowSelectionPolyfill from '../../../../polyfill/shadow-selection/shadow-selection-polyfill';
-import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
-import { LogUtility } from '../../../../utils/log';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
@@ -21,25 +19,22 @@ import { RTETextNode } from '../../dto/nodes/text-node';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { RTERange } from '../../dto/range';
 import { RTESelectionState } from '../../dto/selection-state';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
  * The text selection controller
  */
-export class SelectionController extends VegaSlimmer {
+export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   constructor() {
-    super(...arguments);
+    super(1);
     this.currentRange = new RTERange();
-    this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
     this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
     this.pendingRestoreSelectionNodes = [];
     /**
-     * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
-     *
-     * Example:
-     * Before insert text start offset is 0, the new start offset should update to 1
-     * Before delete text start offset is 1, the new start offset should update to 0
-     *
+     * The method invoke after the component re-render.
      */
-    this.createUpdateSelectionRangeTask = async () => {
+    this.doTask = async () => {
       // add await Promise.resolve to put the code behind to a micro task
       await Promise.resolve();
       const range = this.currentRange.toNativeRange();
@@ -73,14 +68,6 @@ export class SelectionController extends VegaSlimmer {
     this.prepareRestoreSelectionState();
     this.restoreSelection();
   }
-  /**
-   * Update the caret position after the component re-render
-   */
-  async updateCaretPosition() {
-    if (this.updateCaretPositionTaskQueue.queue.length) {
-      await this.updateCaretPositionTaskQueue.runTask();
-    }
-  }
   /**
    * Get the current RTE selection range
    *
@@ -123,20 +110,20 @@ export class SelectionController extends VegaSlimmer {
    * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
    */
   enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
-    endNode = endNode || startNode;
-    endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
-    this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset });
-    void this.updateCaretPositionTaskQueue.enqueue({
-      /** Add task to the queue and run it until component did render */
-      run: async () => {
-        try {
-          await this.createUpdateSelectionRangeTask();
-        }
-        catch (e) {
-          LogUtility.error('Set range error.', e);
-        }
-      },
-    }, immediatelyRun);
+    if (startNode instanceof RTECodeBlockNode) {
+      this.internalCodeBlockSelectionController.enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun);
+    }
+    else {
+      endNode = endNode || startNode;
+      endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
+      this.currentRange = this.currentRange.updateRTERange({
+        startNode,
+        endNode,
+        startOffset,
+        endOffset,
+      });
+      super.enqueueTheTaskIntoQueue(immediatelyRun);
+    }
   }
   /**
    * Set selection with a new range
@@ -151,6 +138,15 @@ export class SelectionController extends VegaSlimmer {
       this.saveSelection();
     }
   }
+  /**
+   * Get the rich text content selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
+  }
   /**
    * Save the current selection range detail
    */
@@ -159,7 +155,7 @@ export class SelectionController extends VegaSlimmer {
     // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
     if (selection &&
       selection.rangeCount > 0 &&
-      this.updateCaretPositionTaskQueue.queue.length === 0 &&
+      this.autoRunTaskQueue.queue.length === 0 &&
       !this.insertCompositionTextController.isComposing()) {
       const range = selection.getRangeAt(0);
       const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
@@ -181,20 +177,11 @@ export class SelectionController extends VegaSlimmer {
       this.selectionState = null;
     }
   }
-  /**
-   * Get the rich text content selected range
-   *
-   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
-   */
-  getSelection() {
-    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
-    return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
-  }
   /**
    * Get selected rich text
    */
   handleSelectionChange() {
-    if (this.disabled)
+    if (this.disabled || this.sourceView)
       return;
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
@@ -226,6 +213,12 @@ export class SelectionController extends VegaSlimmer {
           ? node.querySelector('img')
           : node;
         const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof RTECodeBlock) {
+          if (this.internalCodeBlockSelectionController.isCodeBlockSelected(nodeEntity, range)) {
+            selectedNodes.push(nodeEntity.nodes[0]);
+          }
+          return;
+        }
         if (nodeEntity instanceof RTENode) {
           selectedNodes.push(nodeEntity);
           return;
@@ -245,10 +238,13 @@ export class SelectionController extends VegaSlimmer {
     this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
   }
   /**
-   * Clear the selection map
+   * Clear the selection map.
+   * The code node don't need clear here, because the code node will manager the selection state itself. `code-node-renderer.tsx#handleSelectionChange`
    */
   clearSelectionMap() {
-    this.getSelectedNodes().forEach((node) => {
+    this.getSelectedNodes()
+      .filter((node) => node.type !== 'CODE_BLOCK_NODE')
+      .forEach((node) => {
       node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
     });
     this.selectionMap = new Map();
@@ -266,7 +262,12 @@ export class SelectionController extends VegaSlimmer {
    */
   registerSelectionRangeChangeObserver() {
     this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.pendingRestoreSelectionNodes.push(payload.node);
+      if (!payload.updateDirectly) {
+        this.pendingRestoreSelectionNodes.push(payload.node);
+      }
+      else {
+        this.enqueueSelectionRangeFutureState(payload.node, payload.offset);
+      }
     });
     ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
@@ -280,7 +281,9 @@ export class SelectionController extends VegaSlimmer {
         ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
         : startNode;
       const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
-      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+      const nodesInCurrentRange = startContainer &&
+        stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+        endContainer &&
         stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
       if (nodesInCurrentRange) {
         this.currentRange = this.currentRange.updateRTERange({
@@ -320,6 +323,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "sourceView", void 0);
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);
@@ -329,6 +335,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "historyController", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "internalCodeBlockSelectionController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);
@@ -341,6 +350,3 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], SelectionController.prototype, "watchValueUpdate", null);
-__decorate([
-  MapToComponentMethod('componentDidUpdate')
-], SelectionController.prototype, "updateCaretPosition", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -12,6 +12,7 @@ import { DeleteContentHandler } from './helper/input-event-handler/delete-conten
 import { VegaRTEContent } from '../../dto/content-state';
 import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
 import { generateUUID } from '../../../../utils/misc';
+import { RTECodeBlock } from '../../dto/blocks/code-block';
 /** Used to monitoring the user input actions by event listener */
 export class UserInputController extends VegaSlimmer {
   constructor() {
@@ -31,7 +32,8 @@ export class UserInputController extends VegaSlimmer {
       e.preventDefault();
       this.initValueIfEmpty();
       // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
-      if (inputType === 'insertCompositionText') {
+      // If the focus node is a non-editable element, we do not process the input event.
+      if (inputType === 'insertCompositionText' || this.isFocusNodeNonEditable()) {
         return;
       }
       this.insertCompositionTextController.removeObserver();
@@ -59,7 +61,7 @@ export class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        this.notifyComponentFlushValue();
+        void this.valueController.flushChanges(this.value);
       }
     };
   }
@@ -94,12 +96,6 @@ export class UserInputController extends VegaSlimmer {
     }
     return this.editableElementRef;
   }
-  /**
-   * Notifies a change manager with the host and value details and logs the current value.
-   */
-  notifyComponentFlushValue() {
-    void this.valueController.flushChanges(this.value);
-  }
   /**
    * Prevents the default behavior of a drag event.
    *
@@ -120,6 +116,23 @@ export class UserInputController extends VegaSlimmer {
       void this.valueController.flushChanges(VegaRTEContent.fromJSON(defaultParagraph));
     }
   }
+  /**
+   * The code block placeholder element is non-editable, so we need to check if the focus node is a code block placeholder element.
+   *
+   * @returns {boolean} - Returns true if the focus node is a code block placeholder element, otherwise false.
+   */
+  isFocusNodeNonEditable() {
+    const { startContainer, endContainer } = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startContainer && startContainer === endContainer && selectedNodes.length === 0) {
+      const focusElement = startContainer.nodeType === Node.ELEMENT_NODE
+        ? startContainer
+        : startContainer.parentElement;
+      return (focusElement &&
+        focusElement.classList.contains(RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/toolbar-renderer.js

@@ -39,6 +39,10 @@ export class ToolbarRenderer extends VegaSlimmer {
           return this.bulletsNumbersToolbarButtonSlimmer;
         case 'horizontalAlignment':
           return this.horizontalAlignmentToolbarButtonSlimmer;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
+        case 'sourceEdit':
+          return this.sourceEditToolbarButtonSlimmer;
       }
     };
   }
@@ -95,3 +99,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bold-toolbar-button-slimmer.js

@@ -4,14 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import bold from '../../../assets/bold';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
+import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+export class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'bold',
@@ -39,7 +40,8 @@ export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
 import { h } from '@stencil/core';
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { VegaInternalIconManager } from '../../../../../../helpers/icon/internal-icon-manager';
@@ -13,7 +12,9 @@ import ListOL from '../../../../assets/list-ol';
 import { BulletsToolbarButtonSlimmer } from './bullets-toolbar-button-slimmer';
 import { NumbersToolbarButtonSlimmer } from './numbers-toolbar-button-slimmer';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
-export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
+import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -47,7 +48,8 @@ export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-toolbar-button-slimmer.js

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
-import { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
 import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { TransformListAction } from '../../../../dto/actions/transform-list-action';
 import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
-export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
+import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+export class BulletsToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -34,7 +35,8 @@ export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&