Simplify autocompletion info into a single markdown field

assets/js/hooks/cell_editor/live_editor.js

@@ -424,28 +424,17 @@ export default class LiveEditor {
       label: item.label,
       type: item.kind,
       info: (completion) => {
+        if (item.documentation === null) return null;
+
         // The info popup is shown automatically, we delay it a bit
         // to not distract the user too much as they are typing
         return wait(350).then(() => {
           const node = document.createElement("div");
-
-          if (item.detail) {
-            const detail = document.createElement("div");
-            detail.classList.add("cm-completionInfoDetail");
-            detail.innerHTML = highlight(item.detail, this.language);
-            node.appendChild(detail);
-          }
-
-          if (item.documentation) {
-            const docs = document.createElement("div");
-            docs.classList.add("cm-completionInfoDocs");
-            docs.classList.add("cm-markdown");
-            node.appendChild(docs);
-            new Markdown(docs, item.documentation, {
-              defaultCodeLanguage: this.language,
-            });
-          }
-
+          node.classList.add("cm-completionInfoDocs");
+          node.classList.add("cm-markdown");
+          new Markdown(node, item.documentation, {
+            defaultCodeLanguage: this.language,
+          });
           return node;
         });
       },

assets/js/hooks/cell_editor/live_editor/codemirror/theme.js

@@ -239,16 +239,8 @@ function buildEditorTheme(colors, { dark }) {
           marginRight: "4px",
         },
 
-        "& .cm-completionInfoDetail": {
-          padding: "6px",
-        },
-
         "& .cm-completionInfoDocs": {
           padding: "6px",
-
-          "&:not(:first-child)": {
-            borderTop: `1px solid ${colors.separator}`,
-          },
         },
       },
 
@@ -404,8 +396,14 @@ function buildEditorTheme(colors, { dark }) {
           borderRadius: "3px",
         },
 
-        "& pre code": {
-          background: "transparent",
+        "& pre": {
+          marginTop: "0.5rem",
+          marginBottom: "0.5rem",
+
+          "& code": {
+            background: "transparent",
+            whiteSpace: "pre-wrap",
+          },
         },
 
         "& > :first-child": {
@@ -417,7 +415,7 @@ function buildEditorTheme(colors, { dark }) {
         },
       },
     },
-    { dark }
+    { dark },
   );
 }
 
@@ -497,7 +495,7 @@ const editorTheme = buildEditorTheme(
     searchMatchActiveBackground: "#54789e",
     separator: "#464b57",
   },
-  { dark: true }
+  { dark: true },
 );
 
 export const highlightStyle = buildHighlightStyle({
@@ -534,7 +532,7 @@ const lightEditorTheme = buildEditorTheme(
     searchMatchActiveBackground: "#9daeec",
     separator: "#c9c9ca",
   },
-  { dark: false }
+  { dark: false },
 );
 
 export const lightHighlightStyle = buildHighlightStyle({

lib/livebook/intellisense.ex

@@ -135,26 +135,23 @@ defmodule Livebook.Intellisense do
     do: %{
       label: Atom.to_string(name),
       kind: :variable,
-      detail: "variable",
-      documentation: nil,
+      documentation: "(variable)",
       insert_text: Atom.to_string(name)
     }
 
   defp format_completion_item(%{kind: :map_field, name: name}),
     do: %{
       label: Atom.to_string(name),
       kind: :field,
-      detail: "field",
-      documentation: nil,
+      documentation: "(field)",
       insert_text: Atom.to_string(name)
     }
 
   defp format_completion_item(%{kind: :in_map_field, name: name}),
     do: %{
       label: Atom.to_string(name),
       kind: :field,
-      detail: "field",
-      documentation: nil,
+      documentation: "(field)",
       insert_text: "#{name}: "
     }
 
@@ -167,16 +164,16 @@ defmodule Livebook.Intellisense do
        do: %{
          label: Atom.to_string(name),
          kind: :field,
-         detail: "#{inspect(struct)} struct field",
          documentation:
            join_with_divider([
-             code(name),
              """
+             `%#{inspect(struct)}{}` struct field.
+
              **Default**
 
              ```
              #{inspect(default, pretty: true, width: @line_length)}
-             ```
+             ```\
              """
            ]),
          insert_text: "#{name}: "
@@ -204,8 +201,11 @@ defmodule Livebook.Intellisense do
     %{
       label: display_name,
       kind: kind,
-      detail: detail,
-      documentation: format_documentation(documentation, :short),
+      documentation:
+        join_with_newlines([
+          format_documentation(documentation, :short),
+          "(#{detail})"
+        ]),
       insert_text: String.trim_leading(display_name, ":")
     }
   end
@@ -218,17 +218,15 @@ defmodule Livebook.Intellisense do
          type: type,
          display_name: display_name,
          documentation: documentation,
-         signatures: signatures,
-         specs: specs
+         signatures: signatures
        }),
        do: %{
          label: "#{display_name}/#{arity}",
          kind: :function,
-         detail: format_signatures(signatures, module),
          documentation:
            join_with_newlines([
              format_documentation(documentation, :short),
-             format_specs(specs, name, @line_length) |> code()
+             code(format_signatures(signatures, module))
            ]),
          insert_text:
            cond do
@@ -255,7 +253,6 @@ defmodule Livebook.Intellisense do
 
   defp format_completion_item(%{
          kind: :type,
-         module: module,
          name: name,
          arity: arity,
          documentation: documentation,
@@ -264,7 +261,6 @@ defmodule Livebook.Intellisense do
        do: %{
          label: "#{name}/#{arity}",
          kind: :type,
-         detail: format_type_signature(type_spec, module),
          documentation:
            join_with_newlines([
              format_documentation(documentation, :short),
@@ -281,8 +277,11 @@ defmodule Livebook.Intellisense do
        do: %{
          label: Atom.to_string(name),
          kind: :variable,
-         detail: "module attribute",
-         documentation: format_documentation(documentation, :short),
+         documentation:
+           join_with_newlines([
+             format_documentation(documentation, :short),
+             "(module attribute)"
+           ]),
          insert_text: Atom.to_string(name)
        }
 
@@ -296,9 +295,8 @@ defmodule Livebook.Intellisense do
 
     %{
       label: Atom.to_string(name),
-      kind: :bitstring_option,
-      detail: "bitstring option",
-      documentation: nil,
+      kind: :type,
+      documentation: "(bitstring option)",
       insert_text: insert_text
     }
   end
@@ -340,29 +338,25 @@ defmodule Livebook.Intellisense do
       %{
         label: "true",
         kind: :keyword,
-        detail: "boolean",
-        documentation: nil,
+        documentation: "(boolean)",
         insert_text: "true"
       },
       %{
         label: "false",
         kind: :keyword,
-        detail: "boolean",
-        documentation: nil,
+        documentation: "(boolean)",
         insert_text: "false"
       },
       %{
         label: "nil",
         kind: :keyword,
-        detail: "special atom",
-        documentation: nil,
+        documentation: "(special atom)",
         insert_text: "nil"
       },
       %{
         label: "when",
         kind: :keyword,
-        detail: "guard operator",
-        documentation: nil,
+        documentation: "(guard operator)",
         insert_text: "when"
       }
     ]
@@ -388,8 +382,12 @@ defmodule Livebook.Intellisense do
     :bitstring_option
   ]
 
-  defp completion_item_priority(%{kind: :struct, detail: "exception"} = completion_item) do
-    {length(@ordered_kinds), completion_item.label}
+  defp completion_item_priority(%{kind: :struct} = completion_item) do
+    if completion_item.documentation =~ "(exception)" do
+      {length(@ordered_kinds), completion_item.label}
+    else
+      {completion_item_kind_priority(completion_item.kind), completion_item.label}
+    end
   end
 
   defp completion_item_priority(completion_item) do
@@ -438,7 +436,7 @@ defmodule Livebook.Intellisense do
 
       ```
       #{inspect(default, pretty: true, width: @line_length)}
-      ```
+      ```\
       """
     ])
   end

lib/livebook/runtime.ex

@@ -531,7 +531,6 @@ defprotocol Livebook.Runtime do
   @type completion_item :: %{
           label: String.t(),
           kind: completion_item_kind(),
-          detail: String.t() | nil,
           documentation: String.t() | nil,
           insert_text: String.t()
         }