@sveltia/ui 0.72.0 → 0.72.2

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,17 @@
+export function getSliderSteps({ min, max, step, barWidth }: {
+    min: number;
+    max: number;
+    step: number;
+    barWidth: number;
+}): {
+    valueList: number[];
+    positionList: number[];
+};
+export function toLogicalX(physicalX: number, barWidth: number, rtl: boolean): number;
+export function findNearestStepIndex(positionList: number[], logicalX: number): number;
+export function getSliderKeyDirection(key: string, rtl: boolean): 1 | -1 | 0;
+export function wouldCrossThumbs({ valueIndex, targetPosition, sliderPositions }: {
+    valueIndex: number;
+    targetPosition: number;
+    sliderPositions: number[];
+}): boolean;

package/dist/components/slider/slider.js

@@ -0,0 +1,96 @@
+/**
+ * Geometry and keyboard logic behind `<Slider>`, kept apart from the component so the value
+ * calculations can be tested without a rendered track.
+ */
+
+/**
+ * Get the values a thumb can take and where each of them sits along the track.
+ * @param {object} options Options.
+ * @param {number} options.min Minimum value.
+ * @param {number} options.max Maximum value.
+ * @param {number} options.step Distance between two values.
+ * @param {number} options.barWidth Width of the track in pixels.
+ * @returns {{ valueList: number[], positionList: number[] }} Values from `min` to `max` in `step`
+ * increments, and the matching pixel offsets from the logical start of the track.
+ */
+export const getSliderSteps = ({ min, max, step, barWidth }) => {
+  const stepCount = (max - min) / step + 1;
+  const stepWidth = barWidth / (stepCount - 1);
+  const emptyArray = Array.from({ length: stepCount });
+
+  return {
+    valueList: emptyArray.map((_, index) => index * step + min),
+    positionList: emptyArray.map((_, index) => index * stepWidth),
+  };
+};
+
+/**
+ * Convert a physical pointer position into a logical one along the track. The logical position
+ * always runs from the minimum value at `0` to the maximum at `barWidth`, so in a right-to-left
+ * layout, where the minimum sits on the right, the axis is mirrored. The result is clamped to the
+ * track, so a fast drag that overshoots the edge still resolves to the nearest valid position
+ * instead of dropping the update.
+ * @param {number} physicalX Position in pixels from the left edge of the track.
+ * @param {number} barWidth Width of the track in pixels.
+ * @param {boolean} rtl Whether the layout is right-to-left.
+ * @returns {number} Logical position in pixels.
+ */
+export const toLogicalX = (physicalX, barWidth, rtl) =>
+  Math.min(barWidth, Math.max(0, rtl ? barWidth - physicalX : physicalX));
+
+/**
+ * Find the step closest to the given position along the track.
+ * @param {number[]} positionList Pixel offset of each step, in ascending order.
+ * @param {number} logicalX Logical position in pixels.
+ * @returns {number} Index of the nearest step, or `-1` if there are no steps.
+ */
+export const findNearestStepIndex = (positionList, logicalX) => {
+  const fromIndex = positionList.findLastIndex((s) => s <= logicalX);
+  const toIndex = positionList.findIndex((s) => logicalX <= s);
+
+  if (fromIndex === -1) {
+    return toIndex;
+  }
+
+  if (toIndex === -1) {
+    return fromIndex;
+  }
+
+  const fromDiff = Math.abs(positionList[fromIndex] - logicalX);
+  const toDiff = Math.abs(positionList[toIndex] - logicalX);
+
+  return fromDiff < toDiff ? fromIndex : toIndex;
+};
+
+/**
+ * Get the direction an arrow key moves the thumb in. The vertical keys don’t depend on the layout,
+ * while the horizontal ones follow the visual direction of the track, so in a right-to-left layout
+ * `ArrowLeft` increases the value.
+ * @param {string} key The key pressed.
+ * @param {boolean} rtl Whether the layout is right-to-left.
+ * @returns {1 | -1 | 0} `1` to increase, `-1` to decrease, `0` if the key doesn’t move the thumb.
+ */
+export const getSliderKeyDirection = (key, rtl) => {
+  if (key === 'ArrowUp' || key === (rtl ? 'ArrowLeft' : 'ArrowRight')) {
+    return 1;
+  }
+
+  if (key === 'ArrowDown' || key === (rtl ? 'ArrowRight' : 'ArrowLeft')) {
+    return -1;
+  }
+
+  return 0;
+};
+
+/**
+ * Whether moving one thumb of a multi-thumb slider to the given position would make it cross, or
+ * land on, the other thumb.
+ * @param {object} options Options.
+ * @param {number} options.valueIndex Index of the thumb being moved, `0` or `1`.
+ * @param {number} options.targetPosition Position the thumb would move to, in pixels.
+ * @param {number[]} options.sliderPositions Current position of each thumb, in pixels.
+ * @returns {boolean} `true` if the move would cross the other thumb.
+ */
+export const wouldCrossThumbs = ({ valueIndex, targetPosition, sliderPositions }) =>
+  (valueIndex === 0 && sliderPositions[1] <= targetPosition) ||
+  (valueIndex === 1 && sliderPositions[0] >= targetPosition);

package/dist/components/slider/slider.svelte

@@ -10,6 +10,13 @@
 <script>
   import { isRTL } from '@sveltia/i18n';
   import { onMount } from 'svelte';
+  import {
+    findNearestStepIndex,
+    getSliderKeyDirection,
+    getSliderSteps,
+    toLogicalX,
+    wouldCrossThumbs,
+  } from './slider.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -85,33 +92,16 @@
    * @param {number} physicalX Physical X position in pixels from the left edge.
    */
   const moveThumb = (physicalX) => {
-    // Convert physical position to logical position (always LTR)
-    // In RTL, left side (physicalX=0) maps to max value (logicalX=barWidth)
-    // In LTR, left side (physicalX=0) maps to min value (logicalX=0)
-    // Clamp to the track bounds so a fast drag that overshoots the edge still resolves to the
-    // nearest valid position instead of dropping the update.
-    const logicalX = Math.min(barWidth, Math.max(0, isRTL() ? barWidth - physicalX : physicalX));
-    const fromIndex = positionList.findLastIndex((s) => s <= logicalX);
-    const toIndex = positionList.findIndex((s) => logicalX <= s);
-    /** @type {number} */
-    let index;
-
-    if (fromIndex === -1) {
-      index = toIndex;
-    } else if (toIndex === -1) {
-      index = fromIndex;
-    } else {
-      const fromDiff = Math.abs(positionList[fromIndex] - logicalX);
-      const toDiff = Math.abs(positionList[toIndex] - logicalX);
-
-      index = fromDiff < toDiff ? fromIndex : toIndex;
-    }
+    const index = findNearestStepIndex(positionList, toLogicalX(physicalX, barWidth, isRTL()));
 
     if (
       sliderPositions[targetValueIndex] === positionList[index] ||
       (multiThumb &&
-        ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
-          (targetValueIndex === 1 && sliderPositions[0] >= positionList[index])))
+        wouldCrossThumbs({
+          valueIndex: targetValueIndex,
+          targetPosition: positionList[index],
+          sliderPositions,
+        }))
     ) {
       return;
     }
@@ -138,35 +128,24 @@
     }
 
     const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
-    let index = -1;
-    const _isRTL = isRTL();
-    // In RTL, ArrowLeft increases value, ArrowRight decreases value
-    const decreaseKeys = _isRTL ? ['ArrowDown', 'ArrowRight'] : ['ArrowDown', 'ArrowLeft'];
-    const increaseKeys = _isRTL ? ['ArrowUp', 'ArrowLeft'] : ['ArrowUp', 'ArrowRight'];
-
-    if (decreaseKeys.includes(key)) {
-      if (_value > min) {
-        index = valueList.indexOf(_value) - 1;
-      }
+    const direction = getSliderKeyDirection(key, isRTL());
 
-      event.preventDefault();
-      event.stopPropagation();
+    if (!direction) {
+      return;
     }
 
-    if (increaseKeys.includes(key)) {
-      if (_value < max) {
-        index = valueList.indexOf(_value) + 1;
-      }
+    event.preventDefault();
+    event.stopPropagation();
 
-      event.preventDefault();
-      event.stopPropagation();
-    }
+    const index =
+      (direction < 0 && _value > min) || (direction > 0 && _value < max)
+        ? valueList.indexOf(_value) + direction
+        : -1;
 
     if (index > -1) {
       if (
         multiThumb &&
-        ((valueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
-          (valueIndex === 1 && sliderPositions[0] >= positionList[index]))
+        wouldCrossThumbs({ valueIndex, targetPosition: positionList[index], sliderPositions })
       ) {
         return;
       }
@@ -289,19 +268,14 @@
    * Initialize the variables.
    */
   const init = () => {
+    // Only called once mounted, when the track is bound
+    /* v8 ignore next */
     if (!base) {
       return;
     }
 
     barWidth = base.clientWidth;
-
-    const stepCount = (max - min) / step + 1;
-    const stepWidth = barWidth / (stepCount - 1);
-    const emptyArray = Array.from({ length: stepCount });
-
-    valueList = emptyArray.map((_, index) => index * step + min, 10);
-    positionList = emptyArray.map((_, index) => index * stepWidth);
-
+    ({ valueList, positionList } = getSliderSteps({ min, max, step, barWidth }));
     onValueChange();
   };
 
@@ -345,8 +319,8 @@
     <div role="none" class="base-bar"></div>
     <div
       class="slider-bar"
-      style:inset-inline-start="{multiThumb ? sliderPositions[0] : 0}px"
-      style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
+      style:inset-inline-start={`${multiThumb ? sliderPositions[0] : 0}px`}
+      style:width={`${multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px`}
     ></div>
     <div
       role="slider"
@@ -359,7 +333,7 @@
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={multiThumb ? values?.[0] : value}
-      style:inset-inline-start="{sliderPositions[0]}px"
+      style:inset-inline-start={`${sliderPositions[0]}px`}
       onpointerdown={(event) => onPointerDown(event, 0)}
       onkeydown={(event) => onKeyDown(event, 0)}
     ></div>
@@ -375,7 +349,7 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={values?.[1]}
-        style:inset-inline-start="{sliderPositions[1]}px"
+        style:inset-inline-start={`${sliderPositions[1]}px`}
         onpointerdown={(event) => onPointerDown(event, 1)}
         onkeydown={(event) => onKeyDown(event, 1)}
       ></div>

package/dist/components/tabs/tab-box.svelte

@@ -29,7 +29,7 @@
   } = $props();
 </script>
 
-<div {...restProps} role="none" class="sui tab-box {orientation} {className}">
+<div {...restProps} role="none" class={['sui', 'tab-box', orientation, className]}>
   {@render children?.()}
 </div>
 

package/dist/components/tabs/tab-list.d.ts

@@ -0,0 +1,6 @@
+export function getIndicatorStyle({ offsetTop, offsetLeft, offsetWidth, offsetHeight }: {
+    offsetTop: number;
+    offsetLeft: number;
+    offsetWidth: number;
+    offsetHeight: number;
+}): string;

package/dist/components/tabs/tab-list.js

@@ -0,0 +1,19 @@
+/**
+ * Helpers behind `<TabList>`, kept apart from the component so they can be tested on their own.
+ */
+
+/**
+ * Get the inline style placing the selection indicator over the given tab.
+ * @param {{ offsetTop: number, offsetLeft: number, offsetWidth: number, offsetHeight: number }}
+ * tab The selected tab’s offset box, relative to the tab list.
+ * @returns {string} CSS declarations for the indicator.
+ */
+export const getIndicatorStyle = ({ offsetTop, offsetLeft, offsetWidth, offsetHeight }) =>
+  Object.entries({
+    top: offsetTop,
+    left: offsetLeft,
+    width: offsetWidth,
+    height: offsetHeight,
+  })
+    .map(([key, value]) => `${key}: ${value}px`)
+    .join('; ');

package/dist/components/tabs/tab-list.svelte

@@ -7,6 +7,7 @@
 <script>
   import { onMount } from 'svelte';
   import { activateGroup } from '../../services/group.svelte.js';
+  import { getIndicatorStyle } from './tab-list.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -63,20 +64,7 @@
         wrapper?.querySelector('[role="tab"][aria-selected="true"]')
       );
 
-      if (selected) {
-        const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = selected;
-
-        indicatorStyle = Object.entries({
-          top: offsetTop,
-          left: offsetLeft,
-          width: offsetWidth,
-          height: offsetHeight,
-        })
-          .map(([key, value]) => `${key}: ${value}px`)
-          .join('; ');
-      } else {
-        indicatorStyle = undefined;
-      }
+      indicatorStyle = selected ? getIndicatorStyle(selected) : undefined;
     });
   };
 

package/dist/components/text-editor/code-editor.d.ts

@@ -0,0 +1,5 @@
+export function toCodeBlock(lang: string, code: string): string;
+export function parseCodeBlock(markdown: string): {
+    lang: string;
+    code: string;
+};

package/dist/components/text-editor/code-editor.js

@@ -0,0 +1,28 @@
+/**
+ * Conversion between the code and language a `<CodeEditor>` exposes and the Markdown fenced code
+ * block the underlying editor works with.
+ */
+
+const BACKTICKS = '```';
+
+/**
+ * Wrap code in a Markdown fenced code block.
+ * @param {string} lang Language identifier, placed after the opening fence.
+ * @param {string} code Code. If empty, the block has no content line at all.
+ * @returns {string} Fenced code block.
+ */
+export const toCodeBlock = (lang, code) =>
+  code ? `${BACKTICKS}${lang}\n${code}\n${BACKTICKS}` : `${BACKTICKS}${lang}\n${BACKTICKS}`;
+
+/**
+ * Take a Markdown fenced code block apart.
+ * @param {string} markdown Fenced code block, as produced by {@link toCodeBlock}.
+ * @returns {{ lang: string, code: string }} Language identifier, `plain` if the fence has none,
+ * and the code, empty if the block has no content or `markdown` is not a code block at all.
+ */
+export const parseCodeBlock = (markdown) => {
+  const { lang = 'plain', code = '' } =
+    markdown.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
+
+  return { lang, code };
+};

package/dist/components/text-editor/code-editor.svelte

@@ -7,6 +7,7 @@
   import { setContext, untrack } from 'svelte';
   import Alert from '../alert/alert.svelte';
   import Toast from '../toast/toast.svelte';
+  import { parseCodeBlock, toCodeBlock } from './code-editor.js';
   import LexicalRoot from './lexical-root.svelte';
   import { createEditorStore } from './store.svelte.js';
   import CodeEditorToolbar from './toolbar/code-editor-toolbar.svelte';
@@ -53,7 +54,6 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  const backticks = '```';
   const editorStore = createEditorStore();
 
   editorStore.config = {
@@ -66,6 +66,8 @@
   setContext('editorStore', editorStore);
 
   $effect(() => {
+    // The root initializes the editor before these effects first run, and stays initialized
+    /* v8 ignore next */
     if (!editorStore.initialized) {
       return;
     }
@@ -74,15 +76,13 @@
     void lang;
 
     untrack(() => {
-      const newValue = code
-        ? `${backticks}${lang}\n${code}\n${backticks}`
-        : `${backticks}${lang}\n${backticks}`;
-
-      editorStore.inputValue = newValue;
+      editorStore.inputValue = toCodeBlock(lang, code);
     });
   });
 
   $effect(() => {
+    // The root initializes the editor before these effects first run, and stays initialized
+    /* v8 ignore next */
     if (!editorStore.initialized) {
       return;
     }
@@ -90,8 +90,7 @@
     void editorStore.inputValue;
 
     untrack(() => {
-      const { lang: _lang = 'plain', code: _code = '' } =
-        editorStore.inputValue.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
+      const { lang: _lang, code: _code } = parseCodeBlock(editorStore.inputValue);
 
       if (lang !== _lang) {
         lang = _lang;

package/dist/components/text-editor/emoji-autocomplete.svelte

@@ -84,6 +84,8 @@
   const getAnchorRect = ({ query }) => {
     const domSelection = window.getSelection();
 
+    // A shortcode has just been detected at the caret, so there is a selection
+    /* v8 ignore next */
     if (!domSelection?.rangeCount) {
       return undefined;
     }
@@ -115,7 +117,9 @@
     editor?.update(() => {
       const node = getNodeByKey(nodeKey);
 
-      // Make sure the shortcode is still where it was when the suggestions appeared
+      // Make sure the shortcode is still where it was when the suggestions appeared. The list is
+      // closed as soon as the shortcode changes, so this only guards against a race.
+      /* v8 ignore next */
       if (!isTextNode(node) || node.getTextContent().slice(start, offset) !== `:${query}`) {
         return;
       }
@@ -136,6 +140,8 @@
   const registerCommands = () => {
     const { editor } = editorStore;
 
+    // Only called from the effect below, once the editor is there
+    /* v8 ignore next */
     if (!editor) {
       return [];
     }
@@ -196,6 +202,8 @@
   };
 
   $effect(() => {
+    // The root initializes the editor, and the list is bound, before this first runs
+    /* v8 ignore next */
     if (!editorStore.editor || !list) {
       return undefined;
     }

package/dist/components/text-editor/lexical-root.svelte

@@ -107,6 +107,8 @@
   });
 
   $effect(() => {
+    // Both are in place by the time the effect first runs; see `onMount()` above
+    /* v8 ignore else */
     if (editorStore.editor && lexicalRoot) {
       editorStore.editor.setRootElement(lexicalRoot);
       editorStore.initialized = true;
@@ -126,7 +128,7 @@
   aria-invalid={invalid}
   class="lexical-root"
   class:code={editorStore.config.isCodeEditor}
-  id="{editorStore.editorId}-lexical-root"
+  id={`${editorStore.editorId}-lexical-root`}
   contenteditable={editable}
   {hidden}
 ></div>

package/dist/components/text-editor/shiki/facade.js

@@ -6,7 +6,7 @@
  * imported at module scope, so a page that never shows a code block never pays for it. Second,
  * grammar and theme metadata comes from `generated.js` rather than `shiki/langs` and
  * `shiki/themes`, whose lazy `import()` thunks would drag the whole grammar set into a bundle.
- * @see https://github.com/facebook/lexical/tree/v0.49.0/packages/lexical-code-shiki
+ * @see https://github.com/facebook/lexical/tree/v0.50.0/packages/lexical-code-shiki
  * @see https://github.com/sveltia/sveltia-cms/issues/587
  */
 

package/dist/components/text-editor/shiki/highlighter.js

@@ -4,7 +4,7 @@
  * Adapted from Lexical’s `CodeHighlighterShiki.ts` (MIT licensed). The transform logic is copied
  * as-is; only the highlighting back end differs, because upstream imports its Shiki facade directly
  * and offers no way to substitute one that loads grammars on demand.
- * @see https://github.com/facebook/lexical/blob/v0.49.0/packages/lexical-code-shiki/src/CodeHighlighterShiki.ts
+ * @see https://github.com/facebook/lexical/blob/v0.50.0/packages/lexical-code-shiki/src/CodeHighlighterShiki.ts
  * @see https://github.com/sveltia/sveltia-cms/issues/587
  *
  * The extension APIs (`CodeShikiExtension`, `CodeHighlighterShikiExtension`) are intentionally left
@@ -189,6 +189,8 @@ const getDiffRange = (prevNodes, nextNodes) => {
 const updateAndRetainSelection = (nodeKey, updateFn) => {
   const node = getNodeByKey(nodeKey);
 
+  // Unreachable in practice, since Lexical only runs transforms on attached nodes
+  /* v8 ignore next */
   if (!isCodeNode(node) || !node.isAttached()) {
     return;
   }
@@ -204,6 +206,18 @@ const updateAndRetainSelection = (nodeKey, updateFn) => {
   }
 
   const { anchor } = selection;
+  // The selection is restored by walking this code node’s children, so it can only be retained when
+  // it actually points inside this code node. When the selection lives elsewhere there is nothing
+  // to retain, and restoring would drag the caret into the code block instead of leaving it where
+  // the user put it.
+  const anchorNode = anchor.getNode();
+
+  if (anchorNode !== node && !node.isParentOf(anchorNode)) {
+    updateFn();
+
+    return;
+  }
+
   const anchorOffset = anchor.offset;
 
   const isNewLineAnchor =
@@ -214,8 +228,6 @@ const updateAndRetainSelection = (nodeKey, updateFn) => {
   // Calculate the previous text offset: all text nodes prior to the anchor, plus the anchor’s own
   // text offset
   if (!isNewLineAnchor) {
-    const anchorNode = anchor.getNode();
-
     textOffset =
       anchorOffset +
       anchorNode
@@ -236,24 +248,37 @@ const updateAndRetainSelection = (nodeKey, updateFn) => {
   }
 
   // If it was a non-element anchor, walk through the child nodes looking for the position of the
-  // original text offset
-  node.getChildren().some((node_) => {
-    const isText = isTextNode(node_);
+  // original text offset. A line break node consumes one unit of the offset but cannot host a text
+  // point, so when the offset lands on one, use an element point on the code node instead of
+  // letting the offset go negative and selecting the next text node at an out-of-range position.
+  // A code node holds nothing but text, tab and line break nodes, so there is no third case.
+  const children = node.getChildren();
 
-    if (isText || isLineBreakNode(node_)) {
-      const textContentSize = node_.getTextContentSize();
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
 
-      if (isText && textContentSize >= textOffset) {
-        node_.select(textOffset, textOffset);
+    if (isTextNode(child)) {
+      const textContentSize = child.getTextContentSize();
 
-        return true;
+      if (textContentSize >= textOffset) {
+        child.select(textOffset, textOffset);
+
+        return;
       }
 
       textOffset -= textContentSize;
+    } else /* v8 ignore else */ if (isLineBreakNode(child)) {
+      if (textOffset === 0) {
+        node.select(index, index);
+
+        return;
+      }
+
+      textOffset -= 1;
     }
+  }
 
-    return false;
-  });
+  node.select(children.length, children.length);
 };
 
 /**
@@ -366,6 +391,8 @@ const codeNodeTransform = (editor, tokenizer, transformState, node) => {
   updateAndRetainSelection(nodeKey, () => {
     const currentNode = getNodeByKey(nodeKey);
 
+    // Unreachable in practice, since the update runs synchronously on a node just checked above
+    /* v8 ignore next */
     if (!isCodeNode(currentNode) || !currentNode.isAttached()) {
       return false;
     }
@@ -426,8 +453,6 @@ export const registerCodeHighlighting = (editor, tokenizer = shikiTokenizer) =>
   const registrations = [];
 
   // Only register the mutation listener if not in headless mode
-  /* v8 ignore next 18 */
-  // @ts-ignore Internal field
   if (editor._headless !== true) {
     registrations.push(
       editor.registerMutationListener(

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.72.0";
+export const UI_VERSION: "0.72.2";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.72.0';
+export const UI_VERSION = '0.72.2';

package/dist/components/text-editor/store.svelte.js

@@ -42,6 +42,20 @@ export const createEditorStore = () => {
   /** @type {boolean} */
   let showConverterError = $state(false);
 
+  /**
+   * Flag a conversion error, which takes the editor out of the rich text mode, and shows the error
+   * to the user.
+   * @param {boolean} newValue Whether there is an error.
+   */
+  const setConverterError = (newValue) => {
+    hasConverterError = newValue;
+
+    if (newValue) {
+      useRichText = false;
+      showConverterError = true;
+    }
+  };
+
   /**
    * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
    * restore the original value when there is an error while conversion.
@@ -59,7 +73,8 @@ export const createEditorStore = () => {
       // @see https://github.com/facebook/lexical/issues/2308
       await convertMarkdownToLexical(editor, inputValue || '', enabledTransformers);
     } catch (ex) {
-      hasConverterError = true;
+      // Go through the setter, so the editor actually falls back to the plain text mode
+      setConverterError(true);
       inputValue = originalValue;
       // eslint-disable-next-line no-console
       console.error(ex);
@@ -123,12 +138,7 @@ export const createEditorStore = () => {
       return hasConverterError;
     },
     set hasConverterError(newValue) {
-      hasConverterError = newValue;
-
-      if (hasConverterError) {
-        useRichText = false;
-        showConverterError = true;
-      }
+      setConverterError(newValue);
     },
     get showConverterError() {
       return showConverterError;