feat: add code mirror no result state (#1422)

Milkdown · Jul 14, 2024 · aaa844b · aaa844b
1 parent 4b74d7e
commit aaa844b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/packages/components/src/code-block/view/component.ts b/packages/components/src/code-block/view/component.ts
@@ -107,6 +107,9 @@ export const codeComponent: Component<CodeComponentProps> = ({
         || languageInfo.alias.some(alias => alias.toLowerCase().includes(filter.toLowerCase()))) && languageInfo !== selected
     })
 
+    if (filtered.length === 0)
+      return []
+
     if (!selected)
       return filtered
 
@@ -147,6 +150,24 @@ export const codeComponent: Component<CodeComponentProps> = ({
     }
   }
 
+  const renderedLanguageList = useMemo(() => {
+    if (!languages?.length)
+      return html`<li class="language-list-item no-result">no result</li>`
+
+    return languages.map(languageInfo =>
+      html`<li
+        role="listitem"
+        tabindex="0"
+        class="language-list-item"
+        aria-selected=${languageInfo.name.toLowerCase() === language?.toLowerCase()}
+        data-language=${languageInfo.name}
+        onclick=${() => setLanguage?.(languageInfo.name)}
+      >
+        ${config?.renderLanguage?.(languageInfo.name, languageInfo.name.toLowerCase() === language?.toLowerCase())}
+      </li>`,
+    )
+  }, [languages])
+
   return html`<host class=${clsx(selected && 'selected')}>
     <div class="tools">
       <button
@@ -178,19 +199,7 @@ export const codeComponent: Component<CodeComponentProps> = ({
             </div>
           </div>
           <ul class="language-list" role="listbox" onkeydown=${onListKeydown}>
-            ${languages.map(languageInfo =>
-              html`
-                <li
-                  role="listitem"
-                  tabindex="0"
-                  class="language-list-item"
-                  aria-selected=${languageInfo.name.toLowerCase() === language?.toLowerCase()}
-                  data-language=${languageInfo.name}
-                  onclick=${() => setLanguage?.(languageInfo.name)}
-                >
-                  ${config?.renderLanguage?.(languageInfo.name, languageInfo.name.toLowerCase() === language?.toLowerCase())}
-                </li>`,
-            )}
+            ${renderedLanguageList}
           </ul>
         </div>
       </div>

diff --git a/packages/crepe/src/theme/common/code-mirror.css b/packages/crepe/src/theme/common/code-mirror.css
@@ -69,7 +69,7 @@
       .expand-icon svg {
         width: 14px;
         height: 14px;
-        fill: var(--crepe-color-outline);
+        color: var(--crepe-color-outline);
       }
 
       &[data-expanded="true"] .expand-icon {
@@ -127,6 +127,14 @@
         width: 24px;
         height: 24px;
       }
+
+      &.no-result {
+        cursor: default;
+        opacity: 0.6;
+        &:hover {
+          background: transparent;
+        }
+      }
     }
 
     .search-box {
@@ -138,6 +146,9 @@
       outline: 1px solid var(--crepe-color-primary);
       gap: 8px;
       padding: 6px 10px;
+      &:has(input:focus) {
+        outline: 2px solid var(--crepe-color-primary);
+      }
 
       .search-input {
         width: 100%;
@@ -156,6 +167,7 @@
           width: 20px;
           height: 20px;
           color: var(--crepe-color-primary);
+          fill: var(--crepe-color-primary);
         }
         &:hover {
           background: var(--crepe-color-hover);