fix(editor): handle parenthesized ordered list markers (#15362)

app/javascript/dashboard/components-next/preview-picker/CaretAnchoredPicker.vue

@@ -29,6 +29,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['select', 'close', 'removeTrigger']);
@@ -184,6 +188,7 @@ watch(items, () => {
       :items="items"
       :search-placeholder="searchPlaceholder"
       :empty-label="emptyLabel"
+      :is-loading="isLoading"
       :preview-layout="previewLayout"
       data-popover-content
       class="fixed z-[9999]"

app/javascript/dashboard/components-next/preview-picker/PreviewPicker.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, nextTick, onMounted, useId, useTemplateRef } from 'vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   items: {
@@ -15,6 +16,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
   previewLayout: {
     type: String,
     default: 'side',
@@ -158,9 +163,10 @@ defineExpose({ scrollSelectedIntoView });
         <div
           v-if="!items.length"
           role="status"
-          class="px-2 py-1.5 text-sm text-n-slate-11"
+          class="flex items-center px-2 py-1.5 text-sm text-n-slate-11"
         >
-          {{ emptyLabel }}
+          <Spinner v-if="isLoading" :size="16" />
+          <template v-else>{{ emptyLabel }}</template>
         </div>
       </div>
     </div>

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -99,7 +99,7 @@ const items = computed(() =>
 
 const onSelect = item => emit('replace', item.content);
 
-const { run: runFetch } = useAbortableRequest();
+const { run: runFetch, isPending: isFetching } = useAbortableRequest();
 
 const fetchCannedResponses = () => {
   runFetch(signal =>
@@ -110,12 +110,14 @@ const fetchCannedResponses = () => {
   );
 };
 
-const { start: scheduleFetch } = useTimeoutFn(
+const { start: scheduleFetch, isPending: isDebouncing } = useTimeoutFn(
   fetchCannedResponses,
   SEARCH_DEBOUNCE,
   { immediate: false }
 );
 
+const isLoading = computed(() => isFetching.value || isDebouncing.value);
+
 watch(searchTerm, scheduleFetch);
 
 onMounted(fetchCannedResponses);
@@ -127,6 +129,7 @@ onMounted(fetchCannedResponses);
     :caret-position="caretPosition"
     :items="items"
     :search-placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+    :is-loading="isLoading"
     :empty-label="
       searchTerm
         ? t('COMBOBOX.EMPTY_SEARCH_RESULTS', { searchTerm })
@@ -139,7 +142,7 @@ onMounted(fetchCannedResponses);
     <template #preview="{ item }">
       <div
         v-dompurify-html="formatMessage(item?.resolved || '')"
-        class="px-4 py-3 text-sm break-words prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        class="px-4 py-3 prose prose-bubble !max-w-none prose-a:text-n-brand"
       />
     </template>
   </CaretAnchoredPicker>

app/javascript/dashboard/constants/editor.js

@@ -237,7 +237,7 @@ export const MARKDOWN_PATTERNS = [
   },
   {
     type: 'orderedList', // PM: ordered_list, eg: 1. item
-    patterns: [{ pattern: /^[\t ]*\d+\.\s+/gm, replacement: '' }],
+    patterns: [{ pattern: /^[\t ]*\d+[.)]\s+/gm, replacement: '' }],
   },
   {
     type: 'heading', // PM: heading, eg: ## Heading

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -1104,6 +1104,9 @@ describe('stripUnsupportedFormatting', () => {
       expect(
         stripUnsupportedFormatting('1. first\n2. second', emptySchema)
       ).toBe('first\nsecond');
+      expect(
+        stripUnsupportedFormatting('1) first\n2) second', emptySchema)
+      ).toBe('first\nsecond');
     });
 
     it('strips code block markers', () => {