@widgetic/editor 4.0.11 → 4.1.0

package/dist/components/ic/TextAreaInputController.svelte

@@ -68,6 +68,10 @@
   // Import Shad Editor
   import { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from '@widgetic/design-system/shad-editor';
 
+  // The words of the editor in the language of the page, and the share of them that belongs to the rich text editor below.
+  import { useEditorLanguage } from '../../i18n/language';
+  import type { EditorMessageKey } from '../../i18n/messages';
+
   // Add local ColorPickerInputController import
   import ColorPickerInputController from './ColorPickerInputController.svelte';
 
@@ -94,6 +98,8 @@
   // Use config values with fallbacks
   const textColor = $derived(config.textColor || '#1a1a1a');
 
+  const { t, shadEditor: shadEditorLanguage } = useEditorLanguage();
+
   /**
    * State Variables
    */  
@@ -111,7 +117,7 @@
   // Add type definition for formats
   type FormatType = 'bold' | 'italic' | 'underline' | 'link';
   type ActiveFormats = Record<FormatType, boolean>;
-  type FormatMapping = Record<FormatType, { value: string; icon: any }>;
+  type FormatMapping = Record<FormatType, { value: string; icon: any; messageKey: EditorMessageKey }>;
 
   let activeFormats = $state<ActiveFormats>({
     bold: false,
@@ -121,10 +127,10 @@
   });
 
   const formatMapping: FormatMapping = {
-    bold: { value: 'b', icon: IconBold },
-    italic: { value: 'i', icon: IconItalic },
-    underline: { value: 'u', icon: IconUnderline },
-    link: { value: 'link', icon: IconLink }
+    bold: { value: 'b', icon: IconBold, messageKey: 'editor.textArea.toggleBold' },
+    italic: { value: 'i', icon: IconItalic, messageKey: 'editor.textArea.toggleItalic' },
+    underline: { value: 'u', icon: IconUnderline, messageKey: 'editor.textArea.toggleUnderline' },
+    link: { value: 'link', icon: IconLink, messageKey: 'editor.textArea.toggleLink' }
   };
 
   let currentTextStyle = $state('text'); // Track current text style
@@ -133,17 +139,23 @@
   let currentColor = $derived(textColor);
   let selectedTextRange: { from: number, to: number } | null = $state(null);
 
-  const textOptions = [
-    { value: 'text', label: 'Paragraph', icon: IconPilcrow },
-    { value: 'h1', label: 'H1' },
-    { value: 'h2', label: 'H2' },
-    { value: 'h3', label: 'H3' }
+  // Each option is shown by its message (`messageKey`), in the language of the page.
+  const textOptions: { value: string; messageKey: EditorMessageKey; icon?: any }[] = [
+    { value: 'text', messageKey: 'editor.textArea.paragraph', icon: IconPilcrow },
+    { value: 'h1', messageKey: 'editor.textArea.heading1' },
+    { value: 'h2', messageKey: 'editor.textArea.heading2' },
+    { value: 'h3', messageKey: 'editor.textArea.heading3' }
   ];
 
-  const listOptions = [
-    { value: 'bulletList', label: 'Bullet List', icon: IconList },
-    { value: 'orderedList', label: 'Numbered List', icon: IconListNumbers },
-    { value: 'checkList', label: 'Check List', icon: IconListCheck }
+  /** The message of the style the toolbar button shows: the plain text's when the style is none of the options. */
+  let currentTextStyleMessageKey = $derived<EditorMessageKey>(
+    textOptions.find((option) => option.value === currentTextStyle)?.messageKey ?? 'editor.textArea.text'
+  );
+
+  const listOptions: { value: string; messageKey: EditorMessageKey; icon?: any }[] = [
+    { value: 'bulletList', messageKey: 'editor.textArea.bulletList', icon: IconList },
+    { value: 'orderedList', messageKey: 'editor.textArea.numberedList', icon: IconListNumbers },
+    { value: 'checkList', messageKey: 'editor.textArea.checkList', icon: IconListCheck }
   ];
 
   const content = writable(value);
@@ -395,7 +407,7 @@
           break;
         case 'link':
           if (isAdding) {
-            const href = window.prompt('Enter URL');
+            const href = window.prompt($t('editor.textArea.enterUrl'));
             if (href) {
               chain.setLink({ href }).run();
             }
@@ -1116,17 +1128,17 @@
     <!-- Toolbar at the top -->
     <div 
       bind:this={toolbarRef}
-      class="toolbar-container sticky top-0 left-0 right-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
+      class="toolbar-container sticky top-0 start-0 end-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
       on:mousedown={handleToolbarInteraction}
       on:click={handleToolbarInteraction}
       on:keydown={handleToolbarKeyDown}
       role="toolbar"
-      aria-label="Text formatting toolbar"
+      aria-label={$t('editor.textArea.toolbar')}
       tabindex="-1"
     >
       <div class="toolbar-items-row relative flex items-center h-full w-full">
         <!-- Format cluster centered; close stays on the right -->
-        <div class={`toolbar-items-container absolute inset-y-0 left-0 right-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
+        <div class={`toolbar-items-container absolute inset-y-0 start-0 end-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
           isColorPickerAnimating ? 'translate-y-[-200%]' : 
           showColorPicker ? 'translate-y-[-200%]' : 
           'translate-y-0'
@@ -1164,10 +1176,10 @@
               handleToggleChange(value);
             }}
           >
-            {#each Object.entries(formatMapping) as [format, { value, icon: Icon }] (format)}
+            {#each Object.entries(formatMapping) as [format, { value, icon: Icon, messageKey }] (format)}
               <ToggleGroup.Item 
                 {value}
-                aria-label={`Toggle ${format}`}
+                aria-label={$t(messageKey)}
                 data-state={activeFormats[format as FormatType] ? 'on' : 'off'}
                 class="toolbar-button shrink-0 !h-8 !w-8 !min-w-8 !p-0 {activeFormats[format as FormatType] ? 'bg-muted' : ''}"
               >
@@ -1212,7 +1224,7 @@
                     {#if currentTextStyle === 'text'}
                       <IconPilcrow class="h-3.5 w-3.5 shrink-0" />
                     {:else}
-                      <span class="text-xs">{textOptions.find(opt => opt.value === currentTextStyle)?.label || 'Text'}</span>
+                      <span class="text-xs">{$t(currentTextStyleMessageKey)}</span>
                     {/if}
                     <ChevronDown class="h-3 w-3 shrink-0" />
                   </div>
@@ -1223,7 +1235,7 @@
                 class="w-[200px] p-0"
               >
                 <Command.Root>
-                  <Command.List>
+                  <Command.List aria-label={$t('editor.textArea.textStyles')}>
                     {#each textOptions as option}
                       <Command.Item
                         value={option.value}
@@ -1239,10 +1251,10 @@
                             {#if option.icon}
                               <option.icon class="h-4 w-4" />
                             {/if}
-                            <span>{option.label}</span>
+                            <span>{$t(option.messageKey)}</span>
                           </div>
                         {:else}
-                          <span>{option.label}</span>
+                          <span>{$t(option.messageKey)}</span>
                         {/if}
                         {#if option.value === currentTextStyle}
                           <div class="h-4 w-4">✓</div>
@@ -1296,7 +1308,7 @@
                 class="style-dropdown-container w-[300px] p-0"
               >
                 <Command.Root>
-                  <Command.List>
+                  <Command.List aria-label={$t('editor.textArea.listStyles')}>
                     {#each listOptions as option}
                       <Command.Item
                         value={option.value}
@@ -1311,7 +1323,7 @@
                           {#if option.icon}
                             <option.icon class="h-4 w-4" />
                           {/if}
-                          <span>{option.label}</span>
+                          <span>{$t(option.messageKey)}</span>
                         </div>
                         {#if option.value === currentTextStyle}
                           <div class="h-4 w-4">✓</div>
@@ -1328,7 +1340,7 @@
         {#if onClose && !showColorPicker && !isColorPickerAnimating}
           <Button
             variant="ghost"
-            class="toolbar-close-button ml-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 mr-2 z-10"
+            class="toolbar-close-button ms-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 me-2 z-10"
             onclick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -1402,6 +1414,8 @@
       <ShadEditor
         bind:content={value}
         showToolbar={false}
+        locale={$shadEditorLanguage.locale ?? undefined}
+        messages={$shadEditorLanguage.messages ?? undefined}
         class="shad-editor subtext {editorClass} {showColorPicker || textStyleDropdownOpen ? 'color-picking-active' : ''} {editorHasFocus ? 'editor-focused' : ''} {isSelectionActive ? 'selection-active' : ''}"
         on:mount={handleEditorMount}
         on:update={handleEditorUpdate}
@@ -1446,18 +1460,18 @@
   /* Keep scrollbar styles */
   :global(.ProseMirror::-webkit-scrollbar) {
     width: 6px;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-track) {
     background-color: transparent;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-thumb) {
     background-color: hsl(var(--border)) !important;
     border-radius: 3px;
-    margin-right: 2px;
+    margin-inline-end: 2px;
   }
 
   :global(.ProseMirror::-webkit-scrollbar-thumb:hover) {
@@ -1484,7 +1498,7 @@
   :global(.ProseMirror ul),
   :global(.ProseMirror ol),
   :global(.ProseMirror [data-type="taskList"]) {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
     margin: 0;
     line-height: 1.4;
   }
@@ -1492,21 +1506,21 @@
   :global(.ProseMirror li),
   :global(.ProseMirror [data-type="taskItem"]) {
     position: relative;
-    padding-left: 0.5rem;
+    padding-inline-start: 0.5rem;
     margin: 0;
   }
 
   /* Task list specific styles */
   :global(.ProseMirror [data-type="taskList"]) {
     list-style: none;
-    padding-left: 0rem !important;
+    padding-inline-start: 0rem !important;
   }
 
   :global(.ProseMirror [data-type="taskItem"]) {
     display: flex;
     align-items: flex-start;
-    padding-left: 0 !important;
-    margin-left: 0 !important;
+    padding-inline-start: 0 !important;
+    margin-inline-start: 0 !important;
     gap: 0.5rem;
   }
 
@@ -1799,11 +1813,12 @@
     gap: 8px !important;
     height: 100% !important;
     position: absolute !important;
-    inset: 0 2.5rem 0 0 !important;
+    inset-block: 0 !important;
+    inset-inline: 0 2.5rem !important;
   }
 
   :global(.text-area #text-style-trigger) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   /* Color the brush icon based on selected color */
@@ -1816,12 +1831,12 @@
   }
   /* Button spacing */
   :global(.text-area .color-picker-preview-button) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+    margin-inline-start: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   :global(.text-area .text-formatting-toggle-group) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
     display: flex !important;
     gap: 8px !important;
   }
@@ -1831,7 +1846,7 @@
   }
 
   :global(.text-area .text-formatting-toggle-group button:not(:last-child)) {
-    margin-right: 0 !important;
+    margin-inline-end: 0 !important;
   }
 
   :global(.text-area #text-style-trigger),
@@ -1874,7 +1889,7 @@
 
   :global(.text-area .toolbar-text-style-ct),
   :global(.text-area .toolbar-list-style-ct) {
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
   }
 
   /* Update the color picker button to show selected color */
@@ -1915,8 +1930,8 @@
     width: 44px !important;
     min-width: 44px !important;
     max-width: 44px !important;
-    margin-left: 0 !important;
-    padding-left: 0 !important;
+    margin-inline-start: 0 !important;
+    padding-inline-start: 0 !important;
   }
 
   /* Update color picker container styles */

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -16,12 +16,16 @@
 <script lang="ts">
   import { Portal } from '@widgetic/design-system/components';
   import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
+  import { dirForUserText, useTextDirection } from '@widgetic/design-system/components/textDirection';
   import { onMount, onDestroy } from 'svelte';
   
   import { TextAreaInputController } from './index';
   import { createPreviewHtml } from '../../utils/richTextPreview';
   import { escapeHtml } from '../../utils/htmlSafety';
 
+  // The way the screen is read: the text in the preview is what a person wrote, so on a right to left screen it is read by its own first letter.
+  const textDirection = useTextDirection();
+
   /**
    * Component props
    */
@@ -195,15 +199,16 @@
       role="button"
       tabindex="0"
     >
-      <div class="textarea-ic-preview-copy min-w-0 overflow-hidden pr-10 pt-[13px] pb-4 pl-4">
+      <div class="textarea-ic-preview-copy min-w-0 overflow-hidden pe-10 pt-[13px] pb-4 ps-4">
         <div 
           class="textarea-ic-preview-html break-words text-grey7 text-sm leading-5" 
           class:text-grey3={isShowingPlaceholder}
+          dir={dirForUserText($textDirection)}
         >
           {@html previewText}
         </div>
       </div>
-      <div class="textarea-ic-expand-icon absolute top-[14px] right-[12px]">
+      <div class="textarea-ic-expand-icon absolute top-[14px] end-[12px]">
         <IconArrowsDiagonal 
           class="w-5 h-5 text-grey5 group-hover:text-grey7 transition-colors duration-200" 
         />
@@ -220,7 +225,7 @@
   {#if isShowingTextArea}
   <Portal 
     target={portalTarget}
-    class="text-area-portal absolute top-0 left-0 w-full h-full"
+    class="text-area-portal absolute top-0 start-0 w-full h-full"
   >
     <!-- Blocking overlay -->
     <div 

package/dist/components/ic/TextInputController.svelte

@@ -16,6 +16,8 @@
 <script lang="ts">
   // Import Shadcn UI components from Widgetic design-system package
   import { Input } from '@widgetic/design-system/components';
+  import { useTextDirection } from '@widgetic/design-system/components/textDirection';
+  import { directionOfFieldValue } from '../../utils/fieldDirection';
   import { InputControllerHeader } from './index';
 
   // Component props
@@ -35,6 +37,18 @@
   export let description: TextInputControllerProps['description'] = undefined;
   export let onFocus: TextInputControllerProps['onFocus'] = () => {};
 
+  // The way the screen is read. What a visitor types reads by its own first letter on a right to left screen; an address
+  // (an email, a link) is read left to right on every screen. A left to right screen is written no attribute, as it always was.
+  // (The `type` is the name of the kind of field in the schema, `textInput` for a plain text field: see fieldDirection.ts.)
+  const textDirection = useTextDirection();
+  // What is in the field right now: the value the page gave it, then what is typed (only an empty field has no first letter).
+  let typedText = '';
+  $: typedText = value ?? '';
+  $: hasTypedValue = typedText.length > 0;
+  let valueDirection: 'auto' | 'ltr' | undefined;
+  // (An empty field takes the direction of the screen, so that its hint and its caret start at the start of the line.)
+  $: valueDirection = directionOfFieldValue(type, $textDirection, hasTypedValue);
+
   /**
    * Methods
    */
@@ -56,7 +70,7 @@
       <InputControllerHeader {label} />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div 
         class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
         on:focusin={onFocus}
@@ -66,9 +80,11 @@
           {type}
           {value}
           {placeholder}
+          dir={valueDirection}
           onfocus={onFocus}
           oninput={(e) => {
             const newValue = e.currentTarget.value;
+            typedText = newValue;
             if (validate(newValue)) {
               onChange(newValue);
             }

package/dist/components/ic/TimeInputController.svelte

@@ -240,6 +240,7 @@
         if (dropdownContainer && timeButton) {
           const rect = timeButton.getBoundingClientRect();
           dropdownContainer.style.top = `${rect.bottom + 4}px`;
+          // rtl-ok: the list is as wide as the button it opens from, so the left edge of the button is both of its edges
           dropdownContainer.style.left = `${rect.left}px`;
           isDropdownPositioned = true;
         }
@@ -339,7 +340,7 @@
       <InputControllerHeader {label} {helpText} />
     </div>
     
-    <div class="absolute right-0 h-[48px] flex items-center">
+    <div class="absolute end-0 h-[48px] flex items-center">
       <div class="flex items-center justify-end gap-2">
         <!-- Clock Face -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/components/ic/VectorInputController.svelte

@@ -55,6 +55,11 @@
   import { SearchInput } from '@widgetic/design-system/components';
   import CategoryTabs from './shared/CategoryTabs.svelte';
   import { RecentItemsSection, ItemGrid } from './shared';
+  import { useEditorLanguage } from '../../i18n/language';
+  import { categoryLabel } from '../../i18n/labels';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
   
   // Utils imports
   import { 
@@ -1499,14 +1504,14 @@
 
 <div bind:this={controllerElement} class="flex flex-col gap-2 widgetic-colors">
   <div class="flex items-center w-full relative">
-    <div class="w-[185px] flex-shrink-0 ml-auto">
+    <div class="w-[185px] flex-shrink-0 ms-auto">
       <InputControllerHeader 
         label={label}
         helpText={description}
       />
     </div>
     
-    <div class="absolute right-0">
+    <div class="absolute end-0">
       <div 
         class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
         onfocusin={onFocus}
@@ -1552,7 +1557,7 @@
           }}
         >
           <Popover.Trigger 
-            class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
+            class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent ps-3 pe-[16px] group"
             onclick={handleButtonClick}
             onkeydown={handleKeyDown}
             onmouseenter={() => {
@@ -1577,8 +1582,8 @@
                       <path d="M12 17h.01"></path>
                     </svg>
                   </div>
-                  <span class="truncate text-left capitalize subtext text-grey7">
-                    {value?.name || "Select vector..."}
+                  <span class="truncate text-start capitalize subtext text-grey7">
+                    {value?.name || $t('editor.vector.select')}
                   </span>
                 {:else}
                   <!-- Use a simple img tag with Svelte action for error handling -->
@@ -1588,13 +1593,13 @@
                     class="w-5 h-5 object-contain"
                     use:handleImageError={value.name}
                   />
-                  <span class="truncate text-left capitalize subtext text-grey7">
-                    {value?.name || "Select vector..."}
+                  <span class="truncate text-start capitalize subtext text-grey7">
+                    {value?.name || $t('editor.vector.select')}
                   </span>
                 {/if}
               {:else}
-                <span class="truncate text-left subtext text-grey7">
-                  Select vector...
+                <span class="truncate text-start subtext text-grey7">
+                  {$t('editor.vector.select')}
                 </span>
               {/if}
             </div>
@@ -1605,10 +1610,10 @@
             <div class="flex flex-col h-full vector-popover-content">
               <!-- Title and upload icon -->
               <div class="relative pt-6 pb-[8px] px-4">
-                <div class="h5 text-grey7 widgetic-colors">Vectors</div>
+                <div class="h5 text-grey7 widgetic-colors">{$t('editor.vector.title')}</div>
                 <button 
                   type="button" 
-                  class="absolute right-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
+                  class="absolute end-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
                   onclick={() => {
                     try {
                       openFileBrowser();
@@ -1628,7 +1633,7 @@
               <!-- Search input -->
               <div class="relative px-4">
                 <SearchInput
-                  placeholder="Search vectors..."
+                  placeholder={$t('editor.vector.search')}
                   bind:value={searchTerm}
                   onInput={(e: Event) => {
                     // Use debounced search for better performance
@@ -1707,6 +1712,7 @@
                     categories={filterOptions}
                     activeCategory={currentFilter}
                     onCategorySelect={handleFilterChange}
+                    getCategoryLabel={(category) => categoryLabel(category, $t)}
                     filterVisible={!searchTerm}
                   />
                 </div>
@@ -1724,14 +1730,13 @@
                 }}
                 id={`vector-list-${controllerId}`}
                 role="listbox"
-                aria-label="Vector list"
+                aria-label={$t('editor.vector.list')}
               >
                 <div class="space-y-0">
                   <!-- Recently used section - only show when not searching -->
                   {#if recentVectors.length > 0 && !searchTerm}
                     <RecentItemsSection
                       recentItems={recentVectors}
-                      title="Recently used"
                       onItemSelect={handleVectorSelect}
                       onItemDelete={handleVectorDelete}
                       isItemSelected={isVectorSelected}
@@ -1750,7 +1755,7 @@
                     {#if filteredVectors.length > 0}
                       <div id="vector-header-{controllerId}" class="sticky top-0 -mt-2 bg-white z-10 pt-2 {isScrolled ? 'border-b border-grey2' : 'border-b border-transparent'} transition-border">
                         <h3 class="subtext text-grey7 px-4 pb-2">
-                          {searchTerm ? 'Search results' : 'More'}
+                          {searchTerm ? $t('editor.list.searchResults') : $t('editor.list.more')}
                         </h3>
                       </div>
                     {/if}
@@ -1758,7 +1763,7 @@
                     {#if filteredVectors.length === 0}
                       <div class="empty-state-wrapper">
                         <EmptyState 
-                          message={searchTerm ? 'No vectors found' : 'No vectors available'} 
+                          message={searchTerm ? $t('editor.vector.noneFound') : $t('editor.vector.noneAvailable')} 
                           height="auto"
                         />
                       </div>

package/dist/components/ic/shared/ItemGrid.svelte

@@ -15,6 +15,10 @@
 <script lang="ts">
   import { Check } from '@widgetic/design-system/icons';
   import { escapeHtml } from '../../../utils/htmlSafety';
+  import { useEditorLanguage } from '../../../i18n/language';
+
+  // The words of the editor in the language of the page.
+  const { t } = useEditorLanguage();
   
   export let items: any[] = [];
   export let containerRef: (node: HTMLElement) => void;
@@ -117,7 +121,7 @@
             data-item-type="font"
           >
             <div class="flex items-center flex-1 min-w-0 group">
-              <Check class="mr-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
+              <Check class="me-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
               <div class="flex-1 overflow-hidden">
                 {@html renderContent(item)}
               </div>
@@ -136,7 +140,7 @@
             data-item-type="font"
           >
             <div class="flex items-center flex-1 min-w-0 group">
-              <Check class="mr-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
+              <Check class="me-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
               <div class="flex-1 overflow-hidden">
                 {@html renderContent(item)}
               </div>
@@ -149,7 +153,7 @@
 
   {#if loadingMore}
     <div class="py-4 subtext text-center text-grey5">
-      Loading more items...
+      {$t('editor.list.loadingMore')}
     </div>
   {/if}
 </div>