@lapis-notes/api 0.1.0

package/dist/components/editor/extensions/lint/lapis-lint-tooltip.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { WorkspaceIcon } from "@lapismd/design-core/workspace/icon";
+  import { WorkspaceMenuItems } from "@lapismd/design-core/workspace/menu";
+  import { DropdownMenu } from "bits-ui";
+  import {
+    createLintQuickFixMenu,
+    splitLintTooltipActions,
+    type LintTooltipAction,
+  } from "./lint-tooltip-actions";
+  import "../../editor.css";
+
+  export type { LintTooltipAction };
+
+  type Props = {
+    message: string;
+    ruleId?: string;
+    ruleUrl?: string;
+    sourceLabel?: string;
+    includeCopy?: boolean;
+    actions?: LintTooltipAction[];
+  };
+
+  let {
+    message,
+    ruleId,
+    ruleUrl,
+    sourceLabel,
+    includeCopy = true,
+    actions = [],
+  }: Props = $props();
+
+  const showRuleLink = $derived(ruleId != null && ruleUrl != null);
+  const showAttribution = $derived(sourceLabel != null || ruleId != null);
+  const { viewProblem, quickFixActions } = $derived(
+    splitLintTooltipActions(actions),
+  );
+  const quickFixMenu = $derived(createLintQuickFixMenu(quickFixActions));
+  const showFooter = $derived(
+    Boolean(viewProblem) || quickFixActions.length > 0,
+  );
+
+  function copyMessage(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    void navigator.clipboard?.writeText(message);
+  }
+
+  function containPointerDown(event: PointerEvent | MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function stopRowActivation(event: Event) {
+    event.stopPropagation();
+  }
+</script>
+
+<div
+  data-ui-component="editor"
+  data-ui-part="lint-tooltip"
+  data-testid="lapis-lint-tooltip"
+>
+  <div
+    data-ui-component="editor"
+    data-ui-part="lint-message-band"
+    data-ui-copy={includeCopy ? "" : undefined}
+    data-testid="lapis-lint-message-band"
+  >
+    <div data-ui-component="editor" data-ui-part="lint-message-row">
+      <span
+        data-ui-component="editor"
+        data-ui-part="lint-message-text"
+        data-testid="lapis-lint-message-text">{message}</span
+      >
+      {#if showAttribution}
+        <span
+          data-ui-component="editor"
+          data-ui-part="lint-source"
+          data-testid="lapis-lint-source"
+        >
+          {sourceLabel ??
+            ""}{#if ruleId != null}{#if sourceLabel}({/if}{#if showRuleLink}<a
+                data-ui-component="editor"
+                data-ui-part="lint-rule"
+                data-testid="lapis-lint-rule"
+                href={ruleUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onpointerdown={containPointerDown}
+                onmousedown={containPointerDown}
+                onclick={(event) => event.stopPropagation()}>{ruleId}</a
+              >{:else}<span
+                data-ui-component="editor"
+                data-ui-part="lint-rule-code"
+                data-testid="lapis-lint-rule">{ruleId}</span
+              >{/if}{#if sourceLabel}){/if}{/if}
+        </span>
+      {/if}
+
+      {#if includeCopy}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          data-ui-component="editor"
+          data-ui-part="lint-copy"
+          data-testid="lapis-lint-copy"
+          aria-label="Copy diagnostic message"
+          onpointerdown={containPointerDown}
+          onmousedown={containPointerDown}
+          onclick={copyMessage}
+        >
+          <WorkspaceIcon name="copy" />
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  {#if showFooter}
+    <div
+      data-ui-component="editor"
+      data-ui-part="lint-footer"
+      data-testid="lapis-lint-footer"
+    >
+      {#if quickFixActions.length > 0}
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger
+            class="ui-editor-lint-quick-fix"
+            data-ui-component="editor"
+            data-ui-part="lint-quick-fix"
+            data-testid="lapis-lint-quick-fix"
+            aria-label="Quick Fix"
+            title="Quick Fix"
+            onpointerdown={stopRowActivation}
+            onmousedown={stopRowActivation}
+          >
+            Quick Fix
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              class="ui-workspace-menu__content"
+              data-ui-component="workspace-menu"
+              data-ui-part="content"
+              data-lint-quick-fix-menu=""
+              align="start"
+              side="bottom"
+              sideOffset={4}
+              strategy="fixed"
+              collisionBoundary={[]}
+              onpointerdown={stopRowActivation}
+            >
+              <WorkspaceMenuItems menu={quickFixMenu} />
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+      {/if}
+      {#if viewProblem}
+        <Button
+          type="button"
+          variant="link"
+          size="xs"
+          data-ui-component="editor"
+          data-ui-part="lint-action"
+          data-testid="lapis-lint-action"
+          aria-label={viewProblem.name}
+          onpointerdown={containPointerDown}
+          onmousedown={containPointerDown}
+          onclick={viewProblem.onClick}
+        >
+          {viewProblem.name}
+        </Button>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/editor/extensions/lint/lapis-lint-tooltip.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type LintTooltipAction } from "./lint-tooltip-actions";
+import "../../editor.css";
+type Props = {
+    message: string;
+    ruleId?: string;
+    ruleUrl?: string;
+    sourceLabel?: string;
+    includeCopy?: boolean;
+    actions?: LintTooltipAction[];
+};
+declare const LapisLintTooltip: import("svelte").Component<Props, {
+    LintTooltipAction: typeof LintTooltipAction;
+}, "">;
+type LapisLintTooltip = ReturnType<typeof LapisLintTooltip>;
+export default LapisLintTooltip;

package/dist/components/editor/extensions/lint/lint-tooltip-actions.d.ts

@@ -0,0 +1,11 @@
+import { WorkspaceMenu } from "@lapismd/design-core/workspace/core";
+export declare const VIEW_PROBLEM_ACTION = "View Problem";
+export type LintTooltipAction = {
+    name: string;
+    onClick: (event: MouseEvent) => void;
+};
+export declare function splitLintTooltipActions(actions: readonly LintTooltipAction[]): {
+    viewProblem: LintTooltipAction | undefined;
+    quickFixActions: LintTooltipAction[];
+};
+export declare function createLintQuickFixMenu(actions: readonly LintTooltipAction[]): WorkspaceMenu;

package/dist/components/editor/extensions/lint/lint-tooltip-actions.js

@@ -0,0 +1,21 @@
+import { WorkspaceMenu } from "@lapismd/design-core/workspace/core";
+export const VIEW_PROBLEM_ACTION = "View Problem";
+export function splitLintTooltipActions(actions) {
+    return {
+        viewProblem: actions.find((action) => action.name === VIEW_PROBLEM_ACTION),
+        quickFixActions: actions.filter((action) => action.name !== VIEW_PROBLEM_ACTION),
+    };
+}
+export function createLintQuickFixMenu(actions) {
+    const menu = new WorkspaceMenu();
+    for (const action of actions) {
+        menu.addItem((item) => item
+            .setTitle(action.name)
+            .setIcon("lightbulb")
+            .setSection("fix")
+            .onClick((event) => {
+            action.onClick(event instanceof MouseEvent ? event : new MouseEvent("click"));
+        }));
+    }
+    return menu;
+}

package/dist/components/editor/extensions/lint/mount-lint-tooltip.d.ts

@@ -0,0 +1,16 @@
+import type { Action } from "@codemirror/lint";
+import type { EditorView } from "@codemirror/view";
+import type { LapisLintDiagnosticMeta } from "./lapis-lint-diagnostic-helpers";
+export interface MountLintMessageDomOptions {
+    view?: EditorView;
+    from?: number;
+    to?: number;
+    actions?: Action[];
+    onAction?: () => void;
+}
+/**
+ * Mount the Lapis lint tooltip Svelte component into a container for CodeMirror
+ * `renderMessage`. Unmounts when the tooltip node is removed from the
+ * document.
+ */
+export declare function mountLintMessageDom(message: string, meta?: LapisLintDiagnosticMeta, includeCopy?: boolean, options?: MountLintMessageDomOptions): HTMLElement;

package/dist/components/editor/extensions/lint/mount-lint-tooltip.js

@@ -0,0 +1,60 @@
+import { mount, unmount } from "svelte";
+import LapisLintTooltip from "./lapis-lint-tooltip.svelte";
+function observeUnmountWhenDetached(host, destroy, targetDocument) {
+    if (typeof MutationObserver === "undefined" || !targetDocument.body) {
+        return;
+    }
+    const observer = new MutationObserver(() => {
+        if (host.isConnected) {
+            return;
+        }
+        observer.disconnect();
+        destroy();
+    });
+    observer.observe(targetDocument.body, { childList: true, subtree: true });
+}
+function ruleLabel(meta) {
+    const label = meta.ruleId ?? meta.code;
+    return label == null ? undefined : String(label);
+}
+/**
+ * Mount the Lapis lint tooltip Svelte component into a container for CodeMirror
+ * `renderMessage`. Unmounts when the tooltip node is removed from the
+ * document.
+ */
+export function mountLintMessageDom(message, meta = {}, includeCopy = true, options = {}) {
+    const { view, from, to, actions = [], onAction } = options;
+    const targetDocument = view?.dom?.ownerDocument ?? document;
+    const root = targetDocument.createElement("div");
+    const label = ruleLabel(meta);
+    const href = meta.ruleUrl;
+    const showRule = label != null && href != null;
+    const tooltipActions = actions.length > 0 && view != null && from != null && to != null
+        ? actions.map((action) => ({
+            name: action.name,
+            onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                try {
+                    action.apply(view, from, to);
+                }
+                finally {
+                    onAction?.();
+                }
+            },
+        }))
+        : [];
+    const component = mount(LapisLintTooltip, {
+        target: root,
+        props: {
+            message,
+            ruleId: showRule ? label : undefined,
+            ruleUrl: showRule ? href : undefined,
+            sourceLabel: meta.sourceLabel,
+            includeCopy,
+            actions: tooltipActions,
+        },
+    });
+    observeUnmountWhenDetached(root, () => unmount(component), targetDocument);
+    return root;
+}

package/dist/components/editor/extensions/search/dom.d.ts

@@ -0,0 +1,2 @@
+export declare function createSearchPanelHost(doc: Document): HTMLDivElement;
+export declare function focusSearchPanelInput(container: ParentNode): void;

package/dist/components/editor/extensions/search/dom.js

@@ -0,0 +1,6 @@
+export function createSearchPanelHost(doc) {
+    return doc.createElement("div");
+}
+export function focusSearchPanelInput(container) {
+    container.querySelector("input.search-input")?.focus();
+}

package/dist/components/editor/extensions/search/index.d.ts

@@ -0,0 +1,35 @@
+import { EditorView } from "@codemirror/view";
+import type { Extension, SelectionRange, StateEffect } from "@codemirror/state";
+interface SearchConfig {
+    /**
+     * Whether to position the search panel at the top of the editor (the default
+     * is at the bottom).
+     */
+    top?: boolean;
+    /**
+     * Whether to enable case sensitivity by default when the search panel is
+     * activated (defaults to false).
+     */
+    caseSensitive?: boolean;
+    /** Whether to treat string searches literally by default (defaults to false). */
+    literal?: boolean;
+    /**
+     * Controls whether the default query has by-word matching enabled. Defaults
+     * to false.
+     */
+    wholeWord?: boolean;
+    /**
+     * Used to turn on regular expression search in the default query. Defaults to
+     * false.
+     */
+    regexp?: boolean;
+    /**
+     * By default, matches are scrolled into view using the default behavior of
+     * [`EditorView.scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView).
+     * This option allows you to pass a custom function to produce the scroll
+     * effect.
+     */
+    scrollToMatch?: (range: SelectionRange, view: EditorView) => StateEffect<unknown>;
+}
+export declare function search(config?: Partial<SearchConfig>): Extension;
+export {};

package/dist/components/editor/extensions/search/index.js

@@ -0,0 +1,44 @@
+import { EditorView } from "@codemirror/view";
+import FindReplace from "./search.svelte";
+import { search as editorSearch } from "@codemirror/search";
+import { mount, unmount } from "svelte";
+import { createSearchPanelHost, focusSearchPanelInput } from "./dom";
+class SearchPanel {
+    view;
+    component;
+    dom;
+    constructor(view) {
+        this.view = view;
+        this.dom = createSearchPanelHost(view.dom.ownerDocument);
+        this.component = mount(FindReplace, {
+            target: this.dom,
+            props: { view },
+        });
+    }
+    mount() {
+        focusSearchPanelInput(this.dom);
+    }
+    destroy() {
+        unmount(this.component);
+    }
+    get top() {
+        return true;
+    }
+}
+export function search(config = {}) {
+    const cfg = {
+        top: true,
+        caseSensitive: false,
+        literal: false,
+        wholeWord: false,
+        regexp: false,
+        scrollToMatch: (range) => EditorView.scrollIntoView(range),
+        ...config,
+    };
+    return editorSearch({
+        ...cfg,
+        createPanel: (view) => {
+            return new SearchPanel(view);
+        },
+    });
+}