@sveltia/ui 0.77.1 → 0.77.3

package/dist/components/calendar/calendar.d.ts

@@ -14,4 +14,4 @@ export function getFirstDayOfMonth(date: Date): Date;
 export function addMonths(firstDay: Date, delta: number): Date;
 export function getCalendarDays(firstDay: Date): Date[];
 export function toDateString(date: Date): string;
-export function isSameDay(a: Date, b: Date): boolean;
+export function getToday(now?: Date): Date;

package/dist/components/calendar/calendar.js

@@ -38,11 +38,12 @@ export const MONTH_NAMES = Array.from({ length: 12 }, (__, i) =>
 /**
  * Get the first day of the month the given date is in.
  * @param {Date} date Any date within the month.
- * @returns {Date} Local midnight on the first day of the month, using the UTC year and month of
- * the given date, so a date parsed from a `YYYY-MM-DD` string lands in the right month regardless
- * of the time zone.
+ * @returns {Date} UTC midnight on the first day of the month, using the UTC year and month of the
+ * given date, so a date parsed from a `YYYY-MM-DD` string lands in the right month regardless of
+ * the time zone. The whole grid is UTC-based, like the `value`.
  */
-export const getFirstDayOfMonth = (date) => new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
+export const getFirstDayOfMonth = (date) =>
+  new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
 
 /**
  * Get the first day of another month, relative to the given one.
@@ -68,7 +69,7 @@ export const getCalendarDays = (firstDay) => {
   const cursor = new Date(firstDay);
 
   // Start from Sunday
-  cursor.setDate(1 - cursor.getUTCDay());
+  cursor.setUTCDate(1 - cursor.getUTCDay());
 
   return Array.from({ length: DAY_GRID_SIZE }, () => {
     const day = new Date(cursor);
@@ -87,12 +88,10 @@ export const getCalendarDays = (firstDay) => {
 export const toDateString = (date) => date.toJSON().split('T')[0];
 
 /**
- * Whether two dates fall on the same local calendar day.
- * @param {Date} a A date.
- * @param {Date} b Another date.
- * @returns {boolean} Result.
+ * Get today’s local calendar day as a UTC-based date, so it can be compared with the days on the
+ * grid and turned into a `value` with {@link toDateString}.
+ * @param {Date} [now] Current date and time.
+ * @returns {Date} UTC midnight on today’s local date.
  */
-export const isSameDay = (a, b) =>
-  a.getFullYear() === b.getFullYear() &&
-  a.getMonth() === b.getMonth() &&
-  a.getDate() === b.getDate();
+export const getToday = (now = new Date()) =>
+  new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));

package/dist/components/calendar/calendar.svelte

@@ -15,7 +15,7 @@
     formatDate,
     getCalendarDays,
     getFirstDayOfMonth,
-    isSameDay,
+    getToday,
     MONTH_NAMES,
     toDateString,
   } from './calendar.js';
@@ -30,9 +30,11 @@
    */
   let { value = $bindable(undefined) } = $props();
 
-  const now = new Date();
+  /** Today’s local date, UTC-based like the days on the grid. */
+  const today = getToday();
+  const todayString = toDateString(today);
 
-  const date = $derived(value ? new Date(value) : now);
+  const date = $derived(value ? new Date(value) : today);
   /**
    * First day of the month being displayed. Follows the {@link value}, and is reassigned by the
    * month navigation below.
@@ -44,7 +46,9 @@
    * Month and year being displayed, in the current locale. It’s the caption of the day grid as
    * well as the label of the month switcher.
    */
-  const monthLabel = $derived(formatDate(firstDay, { year: 'numeric', month: 'short' }));
+  const monthLabel = $derived(
+    formatDate(firstDay, { year: 'numeric', month: 'short', timeZone: 'UTC' }),
+  );
   const id = $props.id();
   /** @type {HTMLElement | undefined} */
   let grid = $state();
@@ -172,7 +176,7 @@
   >
     {#each dayList.slice(0, 7) as { day } (day.getUTCDay())}
       <div role="none" class="weekday">
-        {formatDate(day, { weekday: 'narrow' })}
+        {formatDate(day, { weekday: 'narrow', timeZone: 'UTC' })}
       </div>
     {/each}
     {#each dayList as { day } (toDateString(day))}
@@ -180,7 +184,7 @@
       <div
         role="none"
         class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
-        class:today={isSameDay(day, now)}
+        class:today={dateString === todayString}
       >
         <Button
           role="option"
@@ -208,7 +212,7 @@
     <Spacer flex={true} />
     <Button
       onclick={() => {
-        value = toDateString(now);
+        value = todayString;
       }}
     >
       {_('_sui.calendar.today')}

package/dist/components/checkbox/checkbox.svelte

@@ -109,7 +109,7 @@
       {hidden}
       {disabled}
       {readonly}
-      {required}
+      aria-required={required}
       aria-invalid={invalid}
       aria-checked={checked}
       aria-label={ariaLabel || undefined}

package/dist/components/emoji/emoji-suggestions.svelte

@@ -412,7 +412,7 @@
   margin: 0;
   border-width: var(--sui-listbox-border-width, 1px);
   border-style: var(--sui-listbox-border-style, solid);
-  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-color: var(--sui-listbox-border-color, var(--sui-secondary-border-color));
   border-radius: var(--sui-listbox-border-radius, 4px);
   padding: var(--sui-listbox-padding, 4px);
   width: 280px;

package/dist/components/file/file-picker.svelte

@@ -37,8 +37,11 @@
   {multiple}
   bind:this={filePicker}
   onchange={({ target }) => {
-    const files = [.../** @type {FileList} */ (/** @type {HTMLInputElement} */ (target).files)];
+    const input = /** @type {HTMLInputElement} */ (target);
+    const files = [.../** @type {FileList} */ (input.files)];
 
+    // Clear the selection, so picking the same file again still fires the `change` event
+    input.value = '';
     onSelect?.({ files, file: files[0] });
   }}
   oncancel={(event) => {

package/dist/components/listbox/listbox.svelte

@@ -96,7 +96,7 @@
   margin: var(--sui-focus-ring-width);
   border-width: var(--sui-listbox-border-width, 1px);
   border-style: var(--sui-listbox-border-style, solid);
-  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-color: var(--sui-listbox-border-color, var(--sui-secondary-border-color));
   border-radius: var(--sui-listbox-border-radius, 4px);
   padding: var(--sui-listbox-padding, 4px);
   min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));

package/dist/components/progressbar/progressbar.svelte

@@ -28,6 +28,11 @@
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
+
+  /** Position of `now` within the range, as a percentage, clamped to the range. */
+  const percentage = $derived(
+    max > min ? Math.min(Math.max(((now - min) / (max - min)) * 100, 0), 100) : 0,
+  );
 </script>
 
 <div
@@ -40,7 +45,7 @@
   aria-valuetext={text}
   aria-label={ariaLabel}
 >
-  <div role="none" style:width={`${now}%`}></div>
+  <div role="none" style:width={`${percentage}%`}></div>
 </div>
 
 <style>.progressbar {

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -216,6 +216,13 @@
       onResizeEnd?.();
     }
   };
+
+  $effect(() => () => {
+    // Stop listening if the handle is removed in the middle of a drag
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
+  });
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->

package/dist/components/scroll/infinite-scroll.svelte

@@ -47,10 +47,23 @@
     }
   });
 
+  // Observe the spinner anew once each chunk is rendered: the observer only reports changes, so a
+  // spinner that stays in view because the chunk didn’t fill the viewport would stall the loading.
+  // Observing an element always reports its current state first. Stop observing on unmount too.
   $effect(() => {
+    void loadedItemSize;
+
     if (spinner) {
-      observer.observe(spinner);
+      const target = spinner;
+
+      observer.observe(target);
+
+      return () => {
+        observer.unobserve(target);
+      };
     }
+
+    return undefined;
   });
 </script>
 

package/dist/components/slider/slider.js

@@ -3,6 +3,18 @@
  * calculations can be tested without a rendered track.
  */
 
+/**
+ * Count the fraction digits of a number, including one written in exponential notation, such as
+ * `1e-7`.
+ * @param {number} num Number.
+ * @returns {number} Number of fraction digits, `0` for an integer.
+ */
+const countFractionDigits = (num) => {
+  const [mantissa, exponent = '0'] = String(num).split('e');
+
+  return Math.min(Math.max((mantissa.split('.')[1] ?? '').length - Number(exponent), 0), 100);
+};
+
 /**
  * Get the values a thumb can take and where each of them sits along the track.
  * @param {object} options Options.
@@ -14,12 +26,18 @@
  * 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 stepRatio = (max - min) / step;
+  // Tolerate floating point errors, e.g. `0.3 / 0.1` is `2.9999999999999996`, which would otherwise
+  // drop the maximum
+  const stepCount = Math.floor(stepRatio + 1e-9) + 1;
+  const stepWidth = barWidth / stepRatio;
   const emptyArray = Array.from({ length: stepCount });
+  // Round the values to the precision of the minimum and the step, e.g. `3 * 0.1` is
+  // `0.30000000000000004`, which would otherwise never match the `0.3` value
+  const decimals = Math.max(countFractionDigits(min), countFractionDigits(step));
 
   return {
-    valueList: emptyArray.map((_, index) => index * step + min),
+    valueList: emptyArray.map((_, index) => Number((index * step + min).toFixed(decimals))),
     positionList: emptyArray.map((_, index) => index * stepWidth),
   };
 };

package/dist/components/slider/slider.svelte

@@ -313,6 +313,10 @@
     return () => {
       observer.disconnect();
       query.removeEventListener('change', init);
+      // Stop listening if the slider is removed in the middle of a drag
+      document.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
     };
   });
 

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

@@ -22,7 +22,7 @@ export const toCodeBlock = (lang, code) =>
  */
 export const parseCodeBlock = (markdown) => {
   const { lang = 'plain', code = '' } =
-    markdown.match(/^```(?<lang>\w+?)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
+    markdown.match(/^```(?<lang>[^\s`]+)?\n(?:(?<code>.*)\n)?```/s)?.groups ?? {};
 
   return { lang, code };
 };

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

@@ -1,5 +1,6 @@
+export function isSafeLinkURL(url: string): boolean;
 export function getSelectionTypes(): TextEditorSelectionState;
-export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[]): void;
+export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Transformer[], cachedValue?: string): string;
 export function initEditor({ enabledButtons, components, useMarkdownShortcuts, isCodeEditor, defaultLanguage, }: TextEditorConfig): InitEditorResult;
 export function loadCodeHighlighter(lang: string): Promise<void>;
 export function convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<void>;

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

@@ -99,6 +99,40 @@ import { TABLE } from './transformers/table.js';
  * @property {() => void} dispose Remove all registered Lexical listeners.
  */
 
+/**
+ * Maximum number of entries in the undo stack.
+ */
+const HISTORY_MAX_DEPTH = 200;
+/**
+ * URL schemes allowed in a link, the same as the ones Lexical renders as is.
+ */
+const SAFE_LINK_URL_SCHEMES = ['http', 'https', 'mailto', 'sms', 'tel'];
+
+/**
+ * Whether the given URL is safe to be used as a link, meaning it’s either relative or uses one of
+ * the {@link SAFE_LINK_URL_SCHEMES}. This keeps a URL like `javascript:alert(1)` out of the
+ * Markdown, where the site that renders it may not sanitize it.
+ * @param {string} url URL.
+ * @returns {boolean} Result.
+ */
+export const isSafeLinkURL = (url) => {
+  // Browsers ignore control characters and spaces around a URL as well as tabs and newlines within
+  // it, e.g. `java\tscript:`, so strip them all before looking for the scheme
+  // eslint-disable-next-line no-control-regex
+  const normalizedURL = url.replace(/[\u0000-\u0020]/g, '');
+
+  // Markdown decodes character references and backslash escapes in a link destination, so a scheme
+  // can be hidden with them, e.g. `javascript:`, `javascript:` or `javascript\:`. Reject
+  // any of them before the path, query or fragment.
+  if (/^[^/?#]*[&\\]/.test(normalizedURL)) {
+    return false;
+  }
+
+  const scheme = /^([a-z][a-z\d+.-]*):/i.exec(normalizedURL)?.[1];
+
+  return !scheme || SAFE_LINK_URL_SCHEMES.includes(scheme.toLowerCase());
+};
+
 /**
  * Get the current selection’s block node key as well as block and inline level types.
  * @internal
@@ -126,7 +160,9 @@ export const getSelectionTypes = () => {
 
     if (isLinkNode(parent)) {
       inlineTypes.push('link');
-      parent = getNearestNodeOfType(parent, ElementNode);
+      // `getNearestNodeOfType()` would return the link itself, so start from its parent to find the
+      // block the link is in
+      parent = parent.getParent();
     }
 
     if (isListItemNode(parent)) {
@@ -178,31 +214,40 @@ export const getSelectionTypes = () => {
  * @internal
  * @param {LexicalEditor} editor Editor instance.
  * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
+ * @param {string} [cachedValue] Markdown value from a previous call, to be reused instead of
+ * converting the whole document again when only the selection has changed.
+ * @returns {string} Markdown value.
  */
-export const onEditorUpdate = (editor, enabledTransformers) => {
+export const onEditorUpdate = (editor, enabledTransformers, cachedValue) => {
   const transformers = enabledTransformers.filter(
     (/** @type {any} */ { tag }) => !DISABLED_MARKDOWN_TAGS.includes(tag),
   );
 
+  const value =
+    cachedValue ??
+    trimBlankBlockquoteLines(
+      convertToMarkdownString(transformers)
+        // Remove unnecessary backslash for underscore and backslash characters
+        // @see https://github.com/sveltia/sveltia-cms/issues/430
+        // @see https://github.com/sveltia/sveltia-cms/issues/512
+        .replace(/\\([_\\])/g, '$1')
+        // Replace encoded spaces with regular spaces. The HTML entity can appear with a
+        // combination of bold and italic text
+        // @see https://github.com/sveltia/sveltia-cms/issues/511
+        // @see https://github.com/sveltia/sveltia-cms/issues/534
+        .replace(/ /g, ' '),
+    );
+
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
-        value: trimBlankBlockquoteLines(
-          convertToMarkdownString(transformers)
-            // Remove unnecessary backslash for underscore and backslash characters
-            // @see https://github.com/sveltia/sveltia-cms/issues/430
-            // @see https://github.com/sveltia/sveltia-cms/issues/512
-            .replace(/\\([_\\])/g, '$1')
-            // Replace encoded spaces with regular spaces. The HTML entity can appear with a
-            // combination of bold and italic text
-            // @see https://github.com/sveltia/sveltia-cms/issues/511
-            // @see https://github.com/sveltia/sveltia-cms/issues/534
-            .replace(/ /g, ' '),
-        ),
+        value,
         selection: getSelectionTypes(),
       },
     }),
   );
+
+  return value;
 };
 
 /**
@@ -267,7 +312,17 @@ export const initEditor = ({
 
   addUnregister(registerRichText(editor));
   addUnregister(registerDragonSupport(editor));
-  addUnregister(registerHistory(editor, createEmptyHistoryState(), 1000));
+  // Cap the undo stack, as each entry holds a snapshot of the whole document
+  addUnregister(
+    registerHistory(
+      editor,
+      createEmptyHistoryState(),
+      1000,
+      undefined,
+      undefined,
+      HISTORY_MAX_DEPTH,
+    ),
+  );
 
   if (useMarkdownShortcuts) {
     addUnregister(registerMarkdownShortcuts(editor, enabledTransformers));
@@ -291,6 +346,11 @@ export const initEditor = ({
       editor.registerCommand(
         TOGGLE_LINK_COMMAND,
         (payload) => {
+          // Ignore an unsafe URL rather than linking to it
+          if (typeof payload === 'string' && !isSafeLinkURL(payload)) {
+            return true;
+          }
+
           toggleLink(typeof payload === 'string' ? payload : null);
 
           return true;
@@ -316,7 +376,8 @@ export const initEditor = ({
 
           const clipboardText = event.clipboardData.getData('text').trim();
 
-          if (!isURL(clipboardText)) {
+          // Paste an unsafe URL as plain text rather than as a link
+          if (!isURL(clipboardText) || !isSafeLinkURL(clipboardText)) {
             return false;
           }
 
@@ -380,15 +441,41 @@ export const initEditor = ({
     );
   }
 
+  /** Incremented on every update, so only the latest one in a burst triggers the Update event. */
+  let updateCount = 0;
+  /** Whether the content has changed since the Update event was last triggered. */
+  let contentChanged = true;
+  /** @type {string | undefined} */
+  let lastValue = undefined;
+  let disposed = false;
+
+  addUnregister(() => {
+    disposed = true;
+  });
+
   addUnregister(
-    editor.registerUpdateListener(() => {
+    editor.registerUpdateListener(({ dirtyElements, dirtyLeaves } = /** @type {any} */ ({})) => {
+      // An update that only moves the selection leaves no dirty nodes. Remember whether any update
+      // in the burst changed the content, so the document is only converted again when needed.
+      // This includes the updates made while composing, which are otherwise skipped.
+      contentChanged ||= !dirtyElements || dirtyElements.size > 0 || dirtyLeaves.size > 0;
+
       if (editor?.isComposing()) {
         return;
       }
 
+      updateCount += 1;
+
+      const currentCount = updateCount;
+
       (async () => {
         await sleep(100);
 
+        // Skip if a newer update has been made in the meantime, or the editor has been disposed
+        if (currentCount !== updateCount || disposed) {
+          return;
+        }
+
         editor.update(() => {
           // Prevent CodeNode from being removed
           /* v8 ignore next */
@@ -409,7 +496,12 @@ export const initEditor = ({
             }
           }
 
-          onEditorUpdate(editor, enabledTransformers);
+          lastValue = onEditorUpdate(
+            editor,
+            enabledTransformers,
+            contentChanged ? undefined : lastValue,
+          );
+          contentChanged = false;
         });
       })();
     }),

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

@@ -1,4 +1,5 @@
 <script>
+  import { $getRoot as getRoot } from 'lexical';
   import { getContext, onMount } from 'svelte';
   import { initEditor } from './core.js';
 
@@ -10,6 +11,8 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {'ltr' | 'rtl' | 'auto'} [dir] Direction of the text. With `auto` or no value, each
+   * paragraph takes the direction of its own text.
    * @property {boolean} [hidden] Whether to hide the widget.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
@@ -28,6 +31,7 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    dir = undefined,
     hidden = false,
     disabled = false,
     readonly = false,
@@ -53,6 +57,26 @@
     editorStore.editor?.setEditable(editable);
   });
 
+  $effect(() => {
+    // Lexical owns the root element’s `dir` attribute, so set the direction on the root node, which
+    // the paragraphs then follow. Without one, each paragraph gets `dir="auto"`
+    const { editor } = editorStore;
+    const direction = dir === 'ltr' || dir === 'rtl' ? dir : null;
+
+    // Check first, as even an update that changes nothing makes the editor convert its content
+    if (!editor || editor.getEditorState().read(() => getRoot().getDirection()) === direction) {
+      return;
+    }
+
+    editor.update(
+      () => {
+        getRoot().setDirection(direction);
+      },
+      // Keep the change out of the undo history
+      { tag: 'history-merge' },
+    );
+  });
+
   /**
    * Update {@link value} and other state variables whenever the editor content is updated.
    * @param {Event} event `Update` custom event.
@@ -78,11 +102,12 @@
   };
 
   /**
-   * Listen to `click` events on the editor. Ignore a click on a link.
+   * Listen to `click` events on the editor. Ignore a click on a link, including one on the text
+   * within it, which Lexical renders as a child element of the `<a>`.
    * @param {MouseEvent} event `click` event.
    */
   const onClick = (event) => {
-    if (/** @type {HTMLElement} */ (event.target)?.matches('a')) {
+    if (/** @type {HTMLElement} */ (event.target)?.closest('a')) {
       event.preventDefault();
     }
   };

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

@@ -8,6 +8,11 @@ declare const LexicalRoot: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */
@@ -42,6 +47,11 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * Direction of the text. With `auto` or no value, each
+     * paragraph takes the direction of its own text.
+     */
+    dir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Whether to hide the widget.
      */

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

@@ -6,10 +6,12 @@
  */
 export const splitMultilineFormatting = (value) =>
   value
-    .replace(/(\s+)_([^_\n]+?)\n([^_\n]+?)_(\s+)/gm, '$1_$2_\n_$3_$4')
-    .replace(/(\s+)\*\*([^*\n]+?)\n([^*\n]+?)\*\*(\s+)/gm, '$1**$2**\n**$3**$4')
-    .replace(/(\s+)~~([^~\n]+?)\n([^~\n]+?)~~(\s+)/gm, '$1~~$2~~\n~~$3~~$4')
-    .replace(/(\s+)`([^`\n]+?)\n([^`\n]+?)`(\s+)/gm, '$1`$2`\n`$3`$4');
+    // The surrounding whitespace is checked with lookarounds rather than matched with `\s+`, which
+    // would take quadratic time on a long run of whitespace not followed by a formatting marker
+    .replace(/(?<=\s)_([^_\n]+?)\n([^_\n]+?)_(?=\s)/g, '_$1_\n_$2_')
+    .replace(/(?<=\s)\*\*([^*\n]+?)\n([^*\n]+?)\*\*(?=\s)/g, '**$1**\n**$2**')
+    .replace(/(?<=\s)~~([^~\n]+?)\n([^~\n]+?)~~(?=\s)/g, '~~$1~~\n~~$2~~')
+    .replace(/(?<=\s)`([^`\n]+?)\n([^`\n]+?)`(?=\s)/g, '`$1`\n`$2`');
 
 /**
  * Apply a function to each line of a Markdown string, leaving the lines inside fenced code blocks
@@ -19,22 +21,39 @@ export const splitMultilineFormatting = (value) =>
  * @returns {string} Processed Markdown string.
  */
 const mapLinesOutsideCodeBlocks = (value, callback) => {
-  let inCodeBlock = false;
+  /**
+   * Opening fence of the code block being processed, like ```` ``` ````, or an empty string when
+   * outside a code block.
+   */
+  let openingFence = '';
 
   return value
     .split('\n')
     .map((line) => {
       // Like Lexical's `CODE_START_REGEX`, allow an indented fence
-      if (/^[ \t]*(`{3,}|~{3,})/.test(line)) {
-        inCodeBlock = !inCodeBlock;
-        return line;
+      const fence = line.match(/^[ \t]*(`{3,}|~{3,})/)?.[1];
+
+      if (!openingFence) {
+        if (fence) {
+          openingFence = fence;
+          return line;
+        }
+
+        return callback(line);
       }
 
-      if (inCodeBlock) {
-        return line;
+      // Like Lexical's `CODE_END_REGEX`, a code block is only closed by a bare fence of the same
+      // character that is at least as long as the opening one, so a shorter fence within the block,
+      // like ```` ``` ```` within ```` ```` ````, is part of the code
+      if (
+        fence?.[0] === openingFence[0] &&
+        fence.length >= openingFence.length &&
+        !line.trim().slice(fence.length)
+      ) {
+        openingFence = '';
       }
 
-      return callback(line);
+      return line;
     })
     .join('\n');
 };

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.77.1";
+export const UI_VERSION: "0.77.3";

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.77.1';
+export const UI_VERSION = '0.77.3';