@vscode/markdown-editor 0.0.2-13 → 0.0.2-130

package/src/contrib/find/find.css

@@ -0,0 +1,347 @@
+.md-editor {
+	--md-find-widget-background: light-dark(#f3f3f3, #252526);
+	--md-find-widget-foreground: light-dark(#616161, #cccccc);
+	--md-find-widget-border: light-dark(#c8c8c8, #454545);
+	--md-find-widget-shadow: rgba(0, 0, 0, 0.24);
+	--md-find-input-background: light-dark(#ffffff, #313131);
+	--md-find-input-foreground: light-dark(#3b3b3b, #cccccc);
+	--md-find-placeholder-foreground: light-dark(#767676, #a6a6a6);
+	--md-find-input-caret: currentColor;
+	--md-find-input-border: light-dark(#cecece, #3c3c3c);
+	--md-find-count-foreground: light-dark(#616161, #cccccc);
+	--md-find-focus-border: light-dark(#0090f1, #007fd4);
+	--md-find-button-hover-background: light-dark(rgba(184, 184, 184, 0.31), rgba(90, 93, 94, 0.5));
+	--md-find-option-background: light-dark(rgba(0, 144, 241, 0.2), rgba(0, 127, 212, 0.4));
+	--md-find-option-border: light-dark(#007acc, #1c9cf0);
+	--md-find-option-foreground: light-dark(#000000, #ffffff);
+	--md-find-disabled-foreground: light-dark(#9d9d9d, rgba(204, 204, 204, 0.5));
+	--md-find-error-border: light-dark(#be1100, #be1100);
+	--md-find-error-foreground: light-dark(#a1260d, #f48771);
+	--md-find-editor-background: light-dark(#ffffff, #1e1e1e);
+	--md-find-match-background: rgba(234, 92, 0, 0.33);
+	--md-find-match-fill: color-mix(
+		in srgb,
+		var(--md-find-editor-background) 85%,
+		var(--md-find-match-background)
+	);
+	--md-find-match-border: color-mix(
+		in srgb,
+		var(--md-find-widget-foreground) 55%,
+		#ea5c00
+	);
+	--md-find-current-background: light-dark(#a8ac94, #515c6a);
+	--md-find-current-fill: color-mix(
+		in srgb,
+		var(--md-find-editor-background) 90%,
+		var(--md-find-current-background)
+	);
+	--md-find-current-border: color-mix(
+		in srgb,
+		var(--md-find-widget-foreground) 55%,
+		var(--md-find-current-background)
+	);
+}
+
+::highlight(md-editor-find-match) {
+	background-color: var(--md-find-match-fill);
+}
+
+::highlight(md-editor-find-current) {
+	background-color: var(--md-find-current-fill);
+}
+
+.md-find-highlight-layer {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.md-find-match-rect,
+.md-find-current-rect {
+	position: absolute;
+	border-radius: 2px;
+}
+
+.md-find-match-rect {
+	background: transparent;
+	outline: 1px solid var(--md-find-match-border);
+	outline-offset: -1px;
+}
+
+.md-find-current-rect {
+	background: transparent;
+	outline: 2px solid var(--md-find-current-border);
+	outline-offset: -1px;
+}
+
+.md-find-zero-width-rect.md-find-match-rect {
+	background: var(--md-find-match-fill);
+}
+
+.md-find-zero-width-rect.md-find-current-rect {
+	background: var(--md-find-current-fill);
+}
+
+.md-find-widget-host {
+	position: sticky;
+	top: 0;
+	z-index: 30;
+	display: flex;
+	height: 0;
+	justify-content: flex-end;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.md-find-widget-host[hidden] {
+	display: none;
+}
+
+.md-editor.md-find-visible .md-find-widget-host {
+	height: auto;
+}
+
+.md-find-widget {
+	display: flex;
+	box-sizing: border-box;
+	width: min(420px, calc(100% - 8px));
+	margin: 4px 4px 0 0;
+	padding: 3px 4px;
+	align-self: flex-start;
+	flex: none;
+	flex-direction: column;
+	gap: 0;
+	color: var(--md-find-widget-foreground);
+	background: var(--md-find-widget-background);
+	border: 1px solid var(--md-find-widget-border);
+	border-radius: var(--vscode-cornerRadius-large, 8px);
+	box-shadow: 0 2px 8px var(--md-find-widget-shadow);
+	font: 13px/1.4 var(--vscode-font-family, system-ui, sans-serif);
+	pointer-events: auto;
+}
+
+.md-find-row {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: 2px;
+}
+
+.md-find-input-shell {
+	display: flex;
+	box-sizing: border-box;
+	height: 26px;
+	min-width: 0;
+	flex: 1 1 auto;
+	align-items: center;
+	color: var(--md-find-input-foreground);
+	background: var(--md-find-input-background);
+	border: 1px solid var(--md-find-input-border);
+	border-radius: var(--vscode-cornerRadius-small, 2px);
+}
+
+.md-find-input-shell:focus-within {
+	border-color: var(--md-find-focus-border);
+	outline: 1px solid var(--md-find-focus-border);
+	outline-offset: -1px;
+}
+
+.md-find-input-shell.md-find-input-invalid {
+	border-color: var(--md-find-error-border);
+	outline-color: var(--md-find-error-border);
+}
+
+.md-find-input {
+	box-sizing: border-box;
+	width: 100%;
+	min-width: 48px;
+	height: 24px;
+	min-height: 24px;
+	max-height: 80px;
+	margin: 0;
+	padding: 2px 4px;
+	flex: 1 1 auto;
+	resize: none;
+	overflow: auto;
+	color: inherit;
+	caret-color: var(--md-find-input-caret);
+	background: transparent;
+	border: 0;
+	border-radius: inherit;
+	outline: 0;
+	font: inherit;
+	line-height: 20px;
+}
+
+.md-find-input:focus {
+	outline: 0;
+}
+
+.md-find-input::placeholder {
+	color: var(--md-find-placeholder-foreground);
+	opacity: 1;
+}
+
+.md-find-input[aria-invalid='true'] {
+	outline: 0;
+}
+
+.md-find-options {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+	gap: 0;
+	padding-right: 1px;
+}
+
+.md-find-button {
+	display: inline-flex;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	align-items: center;
+	justify-content: center;
+	color: inherit;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--vscode-cornerRadius-small, 5px);
+	font: inherit;
+	flex: 0 0 24px;
+	cursor: pointer;
+}
+
+.md-find-button:hover:not(:disabled) {
+	background: var(--md-find-button-hover-background);
+}
+
+.md-find-button:focus-visible {
+	border-color: var(--md-find-focus-border);
+	outline: none;
+}
+
+.md-find-button:disabled {
+	color: var(--md-find-disabled-foreground);
+	cursor: default;
+}
+
+.md-find-option {
+	width: 24px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: -0.04em;
+}
+
+.md-find-option-whole-word {
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 2px;
+}
+
+.md-find-option-active {
+	color: var(--md-find-option-foreground);
+	background: var(--md-find-option-background);
+	border-color: var(--md-find-option-border);
+}
+
+.md-find-option-active:hover:not(:disabled) {
+	background: var(--md-find-option-background);
+}
+
+.md-find-count {
+	min-width: 54px;
+	padding-inline: 2px;
+	color: var(--md-find-count-foreground, inherit);
+	font-variant-numeric: tabular-nums;
+	line-height: 22px;
+	text-align: center;
+	white-space: nowrap;
+}
+
+.md-find-error {
+	padding: 2px 6px 3px;
+	color: var(--md-find-error-foreground);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+
+.md-find-no-results .md-find-count {
+	color: var(--md-find-error-foreground);
+}
+
+.md-editor.md-find-widget-focused .md-cursor {
+	visibility: hidden;
+	animation: none;
+}
+
+.md-find-has-current-match .md-selection-path {
+	fill: transparent;
+}
+
+.md-editor.md-find-visible .md-readonly-toggle-host {
+	visibility: hidden;
+	pointer-events: none;
+}
+
+.md-find-compact .md-find-widget {
+	width: calc(100% - 4px);
+	margin-right: 2px;
+}
+
+.md-find-compact .md-find-row {
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+.md-find-compact .md-find-input {
+	width: 100%;
+	min-width: 0;
+	flex: 1 1 100%;
+}
+
+.md-find-compact .md-find-count {
+	min-width: 40px;
+	margin-right: auto;
+	padding-inline: 0;
+}
+
+.md-find-compact .md-find-options {
+	display: none;
+}
+
+.md-find-compact .md-find-input-shell {
+	flex: 1 1 100%;
+}
+
+@media (forced-colors: active) {
+	::highlight(md-editor-find-match),
+	::highlight(md-editor-find-current) {
+		background-color: transparent;
+	}
+
+	.md-find-match-rect {
+		forced-color-adjust: none;
+		background: transparent;
+		outline: 1px solid Highlight;
+	}
+
+	.md-find-current-rect {
+		forced-color-adjust: none;
+		background: transparent;
+		opacity: 1;
+		outline: 2px solid Highlight;
+	}
+
+	.md-find-widget,
+	.md-find-input,
+	.md-find-button {
+		border-color: ButtonText;
+	}
+
+	.md-find-option-active {
+		color: HighlightText;
+		background: Highlight;
+	}
+}

package/src/contrib/rename/rename.css

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ * Visual design adapted from VS Code src/vs/editor/contrib/rename/browser/renameWidget.css.
+ */
+
+.md-rename-widget {
+	box-sizing: border-box;
+	width: 280px;
+	max-width: 100%;
+	max-height: 100%;
+	overflow: auto;
+	padding: 4px 4px 0;
+	border: 1px solid var(--vscode-widget-border, transparent);
+	border-radius: 4px;
+	box-shadow: var(--vscode-shadow-lg, 0 2px 8px var(--vscode-widget-shadow, #0003));
+	color: var(--vscode-editorWidget-foreground, #333);
+	background: var(--vscode-editorWidget-background, #f3f3f3);
+	font-family: var(--vscode-font-family, sans-serif);
+	font-size: var(--vscode-font-size, 13px);
+}
+
+.md-rename-widget[hidden] {
+	display: none;
+}
+
+.md-rename-widget.md-rename-overlay {
+	position: absolute;
+	z-index: 100;
+}
+
+.md-rename-widget .md-rename-input-shell {
+	display: flex;
+	padding: 3px;
+	border: 1px solid var(--vscode-input-border, transparent);
+	border-radius: 4px;
+	background: var(--vscode-input-background, #fff);
+}
+
+.md-rename-widget .md-rename-input-shell:focus-within {
+	border-color: var(--vscode-focusBorder, #007acc);
+}
+
+.md-rename-widget .md-rename-input {
+	box-sizing: border-box;
+	width: 100%;
+	min-width: 0;
+	padding: 0;
+	border: 0;
+	outline: none;
+	color: var(--vscode-input-foreground, #333);
+	caret-color: var(--vscode-editorCursor-foreground, currentColor);
+	background: transparent;
+	font-family: var(--vscode-editor-font-family, monospace);
+	font-size: var(--vscode-editor-font-size, 14px);
+	line-height: 20px;
+}
+
+.md-rename-widget .md-rename-message {
+	padding: 3px 0;
+	font-size: 11px;
+	line-height: 16px;
+	overflow-wrap: anywhere;
+}
+
+.md-rename-widget.md-rename-invalid .md-rename-input-shell {
+	border-color: var(--vscode-inputValidation-errorBorder, #be1100);
+}
+
+.md-rename-widget.md-rename-invalid .md-rename-message {
+	color: var(--vscode-inputValidation-errorForeground, var(--vscode-errorForeground, #be1100));
+	background: var(--vscode-inputValidation-errorBackground, transparent);
+}

package/src/contrib/suggest/suggest.css

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE in the repository root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Adapted from VS Code's src/vs/editor/contrib/suggest/browser/media/suggest.css. */
+@import '@vscode/codicons/dist/codicon.css';
+
+.md-suggest-widget {
+	box-sizing: border-box;
+	width: 432px;
+	padding-bottom: 2px;
+	max-width: 100%;
+	overflow: hidden;
+	border: 1px solid var(--vscode-editorSuggestWidget-border, var(--vscode-editorWidget-border, #454545));
+	border-radius: var(--vscode-cornerRadius-large, 4px);
+	background: var(--vscode-editorSuggestWidget-background, var(--vscode-editorWidget-background, #252526));
+	color: var(--vscode-editorSuggestWidget-foreground, var(--vscode-editor-foreground, #cccccc));
+	box-shadow: 0 2px 8px var(--vscode-widget-shadow, #00000036);
+	font-family: var(--vscode-editor-font-family, monospace);
+	font-size: var(--vscode-editor-font-size, 14px);
+	line-height: var(--md-suggest-line-height, 19px);
+}
+
+.md-suggest-widget[hidden],
+.md-suggest-widget [hidden] {
+	display: none;
+}
+
+.md-suggest-widget .md-suggest-list {
+	position: relative;
+	max-height: min(calc(var(--md-suggest-line-height, 19px) * 12), var(--md-suggest-max-height, 100vh));
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	scrollbar-width: thin;
+	scrollbar-color: var(--vscode-scrollbarSlider-background, #79797966) transparent;
+	user-select: none;
+}
+
+.md-suggest-widget .md-suggest-row {
+	box-sizing: border-box;
+	display: flex;
+	height: var(--md-suggest-line-height, 19px);
+	align-items: center;
+	padding: 0 10px 0 2px;
+	white-space: pre;
+	cursor: pointer;
+}
+
+.md-suggest-widget .md-suggest-row[aria-selected="true"] {
+	background: var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-list-activeSelectionBackground, #04395e));
+	color: var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-list-activeSelectionForeground, #ffffff));
+	outline: 1px solid var(--vscode-editorSuggestWidget-focusOutline, var(--vscode-contrastActiveBorder, transparent));
+	outline-offset: -1px;
+}
+
+.md-suggest-widget .md-suggest-label,
+.md-suggest-widget .md-suggest-detail,
+.md-suggest-widget .md-suggest-icon {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.md-suggest-widget .md-suggest-label {
+	flex: 0 1 auto;
+}
+
+.md-suggest-widget .md-suggest-detail {
+	display: none;
+	flex: 0 1 auto;
+	margin-left: auto;
+	padding-left: 1.1em;
+	font-size: 85%;
+}
+
+.md-suggest-widget .md-suggest-row[aria-selected="true"] .md-suggest-detail {
+	display: inline;
+}
+
+.md-suggest-widget .md-suggest-icon {
+	flex: 0 0 16px;
+	width: 16px;
+	margin-right: 4px;
+	font-size: 16px;
+}
+
+.md-suggest-widget .md-suggest-row[aria-selected="true"] .md-suggest-icon {
+	color: var(--vscode-editorSuggestWidget-selectedIconForeground, inherit);
+}
+
+.md-suggest-widget .md-suggest-match {
+	font-weight: bold;
+	color: var(--vscode-editorSuggestWidget-highlightForeground, inherit);
+}
+
+.md-suggest-widget .md-suggest-row[aria-selected="true"] .md-suggest-match {
+	color: var(--vscode-editorSuggestWidget-focusHighlightForeground, inherit);
+}
+
+.md-suggest-widget .md-suggest-message {
+	padding: 4px 10px 4px 22px;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.md-suggest-widget[data-state="error"] .md-suggest-message {
+	color: var(--vscode-errorForeground, #f48771);
+}