](https://play.google.com/store/apps/details?id=com.foxdebug.acodefree) [
](https://www.f-droid.org/packages/com.foxdebug.acode/)
## • Project Structure
Acode/ | |- src/ - Core code and language files | |- www/ - Public documents, compiled files, and HTML templates | |- utils/ - CLI tools for building, string manipulation, and more## • Multi-language Support Enhance Acode's capabilities by adding new languages easily. Just create a file with the language code (e.g., en-us for English) in [`src/lang/`](https://github.com/Acode-Foundation/Acode/tree/main/src/lang) and include it in [`src/lib/lang.js`](https://github.com/Acode-Foundation/Acode/blob/main/src/lib/lang.js). Manage strings across languages effortlessly using utility commands: ```shell pnpm run lang add pnpm run lang remove pnpm run lang search pnpm run lang update ``` ## • Contributing & Building the Application See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed instructions. ## • Contributors
"; }, ); return result; } function renderTooltipContent( plugin: LSPPlugin, value: string | MarkupContent | MarkedString | MarkedString[], ): string { if (Array.isArray(value)) { return value.map((item) => renderCode(plugin, item)).join("
"); } if ( typeof value === "string" || (typeof value === "object" && value != null && "language" in value) ) { return renderCode(plugin, value); } return plugin.docToHTML(value); } function isPointerOrTouchSelection(update: ViewUpdate): boolean { return ( update.selectionSet && update.transactions.some( (tr) => tr.isUserEvent("pointer") || tr.isUserEvent("select.pointer") || tr.isUserEvent("touch") || tr.isUserEvent("select.touch"), ) ); } function closeHoverIfNeeded(view: EditorView): void { if (hasHoverTooltips(view.state)) { view.dispatch({ effects: closeHoverTooltips }); } } function hoverRequest(plugin: LSPPlugin, pos: number) { const client = plugin.client as typeof plugin.client & LspClientInternals; if (client.hasCapability?.("hoverProvider") === false) { return Promise.resolve(null); } plugin.client.sync(); return plugin.client.request
0:00
-
{hints.map((hint) => (
Language Servers
No language servers for{" "} {currentLanguage || "this file"}
{hasRunning && (
)}
);
$body.appendChild($actions);
for (const server of relevantServers) {
const status = getServerStatus(server.id);
const statusColor = getStatusColor(status);
const logs = getLspLogs(server.id);
const errorCount = logs.filter((l) => l.level === "error").length;
const $item = (
{server.label}
{status}
{errorCount > 0 && (
{errorCount}
)}
{server.label}
{isRunning && (
)}
Capabilities
{capabilities.length > 0
? capabilities.map((cap) => (
{cap}
))
: !hasCapabilities && (
Initializing...
)}
Supported
{server.languages.map((lang) => (
.{lang}
))}
Project
{clientState?.rootUri || "(workspace folders mode)"}
Resources
Memory
—
Uptime
—
PID
—
{
const section = e.currentTarget.closest(".lsp-logs-section");
if (section) {
section.classList.toggle("collapsed");
if (!section.classList.contains("collapsed")) {
const container = section.querySelector(".lsp-logs-container");
if (container) container.scrollTop = container.scrollHeight;
}
}
}}
>
LSP Logs
{logs.length > 0 && (
({logs.length})
)}
{logs.length === 0 ? (
No logs yet
) : (
logs.slice(-50).map((log) => {
const time = log.timestamp.toLocaleTimeString("en-US", {
hour12: false,
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
return (
{time}
{log.message}
);
})
)}
{$input}
;
// Create a palette with input and hints
inputhints($input, generateHints, onSelect);
// Only set the darkened theme when this is not a chained palette
if (!isChained) {
// Removes the darkened color from status bar and navigation bar
restoreTheme(true);
}
// Remove palette when input is blurred
$input.addEventListener("blur", remove);
// Don't wait for input to blur when keyboard hides, remove is
// as soon as keyboard starts to hide
keyboardHandler.on("keyboardHideStart", remove);
// Add to DOM
app.append($palette, $mask);
// If we're in a chained palette, ensure we don't lose focus
if (isChained) {
// Don't let any blur events from previous palette affect this one
setTimeout(() => {
$input.focus();
}, 0);
}
// Focus input to show options
$input.focus();
// Trigger input event to show hints immediately
$input.dispatchEvent(new Event("input"));
// Add to action stack to remove on back button
actionStack.push({
id: "palette",
action: remove,
});
// Store this palette as the active one for chaining
activePalette = { remove };
/**
* On select callback for inputhints
* @param {string} value
*/
function onSelect(value) {
const currentPalette = { remove };
activePalette = currentPalette;
onsSelectCb(value);
if (activePalette === currentPalette) {
remove();
}
}
/**
* Keydown event handler for input
* @param {KeyboardEvent} e
*/
function onkeydown(e) {
if (e.key !== "Escape") return;
remove();
}
/**
* Generates hint for inputhints
* @param {HintCallback} setHints Set hints callback
* @param {HintModification} hintModification Hint modification object
*/
async function generateHints(setHints, hintModification) {
const list = getList(hintModification);
const data = list instanceof Promise ? await list : list;
setHints(data);
}
/**
* Removes the palette
*/
function remove() {
actionStack.remove("palette");
keyboardHandler.off("keyboardHideStart", remove);
$input.removeEventListener("blur", remove);
$palette.remove();
$mask.remove();
// Restore previous palette if chained
if (isChained && previousPalette) {
activePalette = previousPalette;
} else {
activePalette = null;
restoreTheme();
}
if (typeof onremove === "function") {
onremove();
return;
}
// If not chained or last in chain, focus the editor
if (!isChained) {
const { activeFile, editor } = editorManager;
if (activeFile.wasFocused) {
editor.focus();
}
}
remove = () => {
window.log("warn", "Palette already removed.");
};
}
}
================================================
FILE: src/components/palette/style.scss
================================================
#palette {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
height: 40px;
width: 90vw;
max-width: 600px;
z-index: 99;
display: flex;
align-items: center;
background-color: inherit;
box-shadow: 0 0 4px black;
z-index: 999;
&~#hints {
width: 90vw;
box-sizing: border-box;
z-index: 999;
}
&~.mask {
opacity: 0.4;
z-index: 998;
// pointer-events: none;
}
input {
width: 100%;
border: none;
color: var(--primary-text-color);
}
}
================================================
FILE: src/components/quickTools/footer.js
================================================
/**
* @typedef {import('html-tag-js/ref')} Ref
*/
import settings from "lib/settings";
import items, { ref } from "./items";
/**
* Create a row with common buttons
* @param {object} param0 Attributes
* @param {number} [param0.row] Row number
*/
export const Row = ({ row }) => {
const startIndex =
(row - 1) * settings.QUICKTOOLS_GROUP_CAPACITY * settings.QUICKTOOLS_GROUPS;
return (
{(() => {
const sections = [];
for (let i = 0; i < settings.QUICKTOOLS_GROUPS; ++i) {
const section = [];
for (let j = 0; j < settings.QUICKTOOLS_GROUP_CAPACITY; ++j) {
const index =
startIndex + (i * settings.QUICKTOOLS_GROUP_CAPACITY + j);
const itemIndex = settings.value.quicktoolsItems[index]; // saved item index
const item = items[itemIndex]; // item object
section.push(
);
};
/**
* Create a search row with search input and buttons
* @returns {Element}
*/
export const SearchRow1 = ({ inputRef }) => (
{section}
);
}
return sections;
})()}
0
of
0
{$title}
{$subtitle}
{$openTabBtn}
{$closeBtn}
Finding references...
,
);
}
function renderEmpty() {
$content.innerHTML = "";
$content.append(
No references found
,
);
}
function renderReferencesList() {
$refList.innerHTML = "";
const visibleItems = state.flatItems.filter((item) => {
if (item.type === "file-header") return true;
return !state.collapsedFiles.has(item.uri);
});
const fragment = document.createDocumentFragment();
for (const item of visibleItems) {
const $el = createReferenceItem(item, {
collapsedFiles: state.collapsedFiles,
onToggleFile: toggleFile,
onNavigate: (ref) => {
hide();
navigateToReference(ref);
},
});
fragment.appendChild($el);
}
$refList.appendChild(fragment);
$content.innerHTML = "";
$content.appendChild($refList);
}
async function renderReferences() {
$content.innerHTML = "";
$content.append(
Highlighting code...
,
);
const stats = getReferencesStats(state.references);
setSubtitle(stats.text);
state.flatItems = await buildFlatList(state.references, state.symbolName);
renderReferencesList();
}
function show(options = {}) {
if (currentPanel && currentPanel !== panelInstance) {
currentPanel.hide();
}
currentPanel = panelInstance;
state.symbolName = options.symbolName || "";
state.references = [];
state.loading = true;
state.expanded = false;
state.collapsedFiles.clear();
state.flatItems = [];
clearHighlightCache();
setTitle(state.symbolName);
setSubtitle("Searching...");
renderLoading();
document.body.append($mask, $panel);
requestAnimationFrame(() => {
$mask.classList.add("visible");
$panel.classList.add("visible");
$panel.classList.remove("expanded");
});
state.visible = true;
actionStack.push({
id: "references-panel",
action: hide,
});
}
function hide() {
if (!state.visible) return;
state.visible = false;
$mask.classList.remove("visible");
$panel.classList.remove("visible");
actionStack.remove("references-panel");
setTimeout(() => {
$mask.remove();
$panel.remove();
}, 250);
if (currentPanel === panelInstance) {
currentPanel = null;
}
}
function setReferences(references) {
state.loading = false;
state.references = references || [];
if (state.references.length === 0) {
setSubtitle("No references found");
renderEmpty();
} else {
renderReferences();
}
}
function setError(message) {
state.loading = false;
setSubtitle("Error");
$content.innerHTML = "";
$content.append(
{sanitize(message)}
,
);
}
const panelInstance = {
show,
hide,
setReferences,
setError,
get visible() {
return state.visible;
},
};
return panelInstance;
}
let panelSingleton = null;
function getPanel() {
if (!panelSingleton) {
panelSingleton = createReferencesPanel();
}
return panelSingleton;
}
export function showReferencesPanel(options) {
const panel = getPanel();
panel.show(options);
return panel;
}
export function hideReferencesPanel() {
const panel = getPanel();
panel.hide();
}
export { openReferencesTab };
export default {
show: showReferencesPanel,
hide: hideReferencesPanel,
getPanel,
openReferencesTab,
};
================================================
FILE: src/components/referencesPanel/referencesTab.js
================================================
import EditorFile from "lib/editorFile";
import {
buildFlatList,
clearHighlightCache,
createReferenceItem,
getReferencesStats,
navigateToReference,
sanitize,
} from "./utils";
export function createReferencesTab(options = {}) {
const {
symbolName = "",
references = [],
flatItems: prebuiltItems = null,
} = options;
const collapsedFiles = new Set();
let flatItems = prebuiltItems || [];
let isInitialized = false;
const $container = ;
const $listContainer = ;
const $refList = ;
const stats = getReferencesStats(references);
const $header = (
References to
{sanitize(symbolName)}
{stats.text}
Highlighting code...
);
$container.append($header, $listContainer);
function getVisibleItems() {
return flatItems.filter((item) => {
if (item.type === "file-header") return true;
return !collapsedFiles.has(item.uri);
});
}
function toggleFile(uri) {
if (collapsedFiles.has(uri)) {
collapsedFiles.delete(uri);
} else {
collapsedFiles.add(uri);
}
renderList();
}
function renderList() {
$refList.innerHTML = "";
const visibleItems = getVisibleItems();
const fragment = document.createDocumentFragment();
for (const item of visibleItems) {
const $el = createReferenceItem(item, {
collapsedFiles,
onToggleFile: toggleFile,
onNavigate: navigateToReference,
});
fragment.appendChild($el);
}
$refList.appendChild(fragment);
}
async function init() {
if (isInitialized) return;
isInitialized = true;
if (!prebuiltItems || prebuiltItems.length === 0) {
$listContainer.appendChild($loadingState);
flatItems = await buildFlatList(references, symbolName);
$loadingState.remove();
}
renderList();
$listContainer.appendChild($refList);
}
function destroy() {
$refList.innerHTML = "";
}
return {
container: $container,
init,
destroy,
get symbolName() {
return symbolName;
},
get referenceCount() {
return references.length;
},
};
}
export async function openReferencesTab(options = {}) {
const { symbolName = "", references = [] } = options;
const tabName = `Refs: ${symbolName}`;
const existingFile = editorManager.getFile(tabName, "filename");
if (existingFile) {
existingFile.makeActive();
return existingFile;
}
clearHighlightCache();
const flatItems = await buildFlatList(references, symbolName);
const stats = getReferencesStats(references);
const tabView = createReferencesTab({ symbolName, references, flatItems });
const file = new EditorFile(tabName, {
type: "terminal",
content: tabView.container,
tabIcon: "icon linkinsert_link",
render: true,
});
file.setCustomTitle(() => stats.text);
tabView.init();
file.on("close", () => {
tabView.destroy();
});
return file;
}
export default {
createReferencesTab,
openReferencesTab,
};
================================================
FILE: src/components/referencesPanel/styles.scss
================================================
@use "../../styles/mixins.scss";
.references-panel-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
opacity: 0;
transition: opacity 200ms ease-out;
pointer-events: none;
&.visible {
opacity: 1;
pointer-events: auto;
}
}
.references-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
background-color: var(--popup-background-color);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
box-shadow: 0 -4px 20px var(--box-shadow-color);
transform: translateY(100%);
transition: transform 250ms ease-out, max-height 200ms ease-out;
display: flex;
flex-direction: column;
max-height: 60vh;
overflow: hidden;
&.visible {
transform: translateY(0);
}
&.expanded {
max-height: 85vh;
}
.drag-handle {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0 4px 0;
cursor: grab;
flex-shrink: 0;
&::after {
content: "";
width: 36px;
height: 4px;
background-color: var(--border-color);
border-radius: 2px;
}
&:active {
cursor: grabbing;
}
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 12px 16px;
border-bottom: 1px solid var(--border-color);
min-height: 44px;
flex-shrink: 0;
.header-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
.header-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 600;
color: var(--primary-text-color);
.icon {
font-size: 1.1em;
opacity: 0.7;
}
.symbol-name {
font-family: monospace;
background-color: var(--secondary-color);
padding: 2px 8px;
border-radius: 4px;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.header-subtitle {
font-size: 0.85rem;
color: var(--secondary-text-color);
opacity: 0.8;
}
}
.header-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.action-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--secondary-text-color);
border-radius: 50%;
cursor: pointer;
&:active {
background-color: var(--active-icon-color);
}
.icon {
font-size: 1.2em;
}
&.open-tab-btn {
color: var(--active-color);
}
}
}
.panel-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
&::-webkit-scrollbar {
width: var(--scrollbar-width, 4px);
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));
border-radius: calc(var(--scrollbar-width, 4px) / 2);
}
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--secondary-text-color);
gap: 12px;
.loader {
@include mixins.circular-loader(24px);
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--secondary-text-color);
text-align: center;
.icon {
font-size: 2rem;
margin-bottom: 8px;
opacity: 0.5;
}
}
}
.ref-file-header,
.ref-item {
box-sizing: border-box;
display: flex;
align-items: center;
will-change: transform;
}
.ref-file-header {
gap: 8px;
padding: 0 16px;
cursor: pointer;
user-select: none;
background-color: color-mix(in srgb, var(--secondary-color) 50%, var(--primary-color));
&:active {
background-color: var(--active-icon-color);
}
.chevron {
font-size: 1rem;
color: var(--secondary-text-color);
transition: transform 150ms ease;
width: 18px;
text-align: center;
flex-shrink: 0;
}
&.collapsed .chevron {
transform: rotate(-90deg);
}
.file-icon {
font-size: 1rem;
flex-shrink: 0;
}
.file-name {
flex: 1;
font-size: 0.9rem;
font-weight: 500;
color: var(--primary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.ref-count {
font-size: 0.75rem;
color: var(--secondary-text-color);
background-color: var(--popup-background-color);
padding: 2px 8px;
border-radius: 10px;
flex-shrink: 0;
}
}
.ref-item {
gap: 10px;
padding: 0 16px 0 36px;
cursor: pointer;
&:active {
background-color: var(--active-icon-color);
}
.line-number {
font-size: 0.75rem;
color: var(--secondary-text-color);
min-width: 32px;
text-align: right;
font-family: monospace;
flex-shrink: 0;
opacity: 0.7;
}
.ref-preview {
flex: 1;
font-size: 0.85rem;
font-family: monospace;
color: var(--primary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
min-width: 0;
direction: rtl;
text-align: left;
span {
direction: ltr;
unicode-bidi: bidi-override;
}
.symbol-match {
background-color: color-mix(in srgb, var(--active-color) 30%, transparent);
border-radius: 2px;
padding: 0 2px;
}
}
}
.references-tab-container {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--primary-color);
color: var(--primary-text-color);
.references-tab-header {
padding: 16px;
border-bottom: 1px solid var(--border-color);
background-color: var(--secondary-color);
flex-shrink: 0;
.header-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
.icon {
font-size: 1.2em;
opacity: 0.7;
}
.header-title {
font-size: 1rem;
font-weight: 600;
color: var(--primary-text-color);
code {
font-family: monospace;
background-color: var(--popup-background-color);
padding: 2px 8px;
border-radius: 4px;
margin-left: 4px;
}
}
.header-stats {
font-size: 0.85rem;
color: var(--secondary-text-color);
margin-left: auto;
}
}
}
.references-list-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
&::-webkit-scrollbar {
width: var(--scrollbar-width, 4px);
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));
border-radius: calc(var(--scrollbar-width, 4px) / 2);
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--secondary-text-color);
gap: 12px;
.loader {
@include mixins.circular-loader(24px);
}
}
}
}
================================================
FILE: src/components/referencesPanel/utils.js
================================================
import { EditorView } from "@codemirror/view";
import Sidebar from "components/sidebar";
import DOMPurify from "dompurify";
import openFile from "lib/openFile";
import {
clearHighlightCache,
highlightLine,
sanitize,
} from "utils/codeHighlight";
import helpers from "utils/helpers";
export { clearHighlightCache, sanitize };
export function getFilename(uri) {
if (!uri) return "";
try {
const decoded = decodeURIComponent(uri);
const parts = decoded.split("/").filter(Boolean);
return parts.pop() || "";
} catch {
const parts = uri.split("/").filter(Boolean);
return parts.pop() || "";
}
}
export function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
export function groupReferencesByFile(references) {
const grouped = {};
for (const ref of references) {
if (!grouped[ref.uri]) {
grouped[ref.uri] = [];
}
grouped[ref.uri].push(ref);
}
return grouped;
}
export async function buildFlatList(references, symbolName) {
const grouped = groupReferencesByFile(references);
const items = [];
for (const [uri, fileRefs] of Object.entries(grouped)) {
fileRefs.sort((a, b) => a.range.start.line - b.range.start.line);
items.push({
type: "file-header",
uri,
fileName: getFilename(uri),
count: fileRefs.length,
});
for (const ref of fileRefs) {
const highlightedText = await highlightLine(
ref.lineText || "",
uri,
symbolName,
);
items.push({
type: "reference",
uri,
ref,
line: ref.range.start.line + 1,
lineText: ref.lineText || "",
highlightedText,
symbol: symbolName,
});
}
}
return items;
}
export function createReferenceItem(item, options = {}) {
const { collapsedFiles, onToggleFile, onNavigate } = options;
if (item.type === "file-header") {
const isCollapsed = collapsedFiles?.has(item.uri);
const iconClass = helpers.getIconForFile(item.fileName);
const $el = (
onToggleFile?.(item.uri)}
>
{sanitize(item.fileName)}
{item.count}
);
return $el;
}
const $el = (
onNavigate?.(item.ref)}>
{item.line}
);
$el.get(".ref-preview").innerHTML = DOMPurify.sanitize(item.highlightedText);
return $el;
}
export async function navigateToReference(ref) {
Sidebar.hide();
try {
await openFile(ref.uri, { render: true });
const { editor } = editorManager;
if (!editor) return;
const doc = editor.state.doc;
const startLine = doc.line(ref.range.start.line + 1);
const endLine = doc.line(ref.range.end.line + 1);
const from = Math.min(
startLine.from + ref.range.start.character,
startLine.to,
);
const to = Math.min(endLine.from + ref.range.end.character, endLine.to);
editor.dispatch({
selection: { anchor: from, head: to },
effects: EditorView.scrollIntoView(from, { y: "center" }),
});
editor.focus();
} catch (error) {
console.error("Failed to navigate to reference:", error);
}
}
export function getReferencesStats(references) {
const fileCount = new Set(references.map((r) => r.uri)).size;
const refCount = references.length;
return {
fileCount,
refCount,
text: `${refCount} reference${refCount !== 1 ? "s" : ""} in ${fileCount} file${fileCount !== 1 ? "s" : ""}`,
};
}
================================================
FILE: src/components/scrollbar/index.js
================================================
import "./style.scss";
import tag from "html-tag-js";
/**
* @typedef {object} Scrollbar
* @property {function():void} destroy
* @property {function():void} render
* @property {function():void} show
* @property {function():void} hide
* @property {function():void} resize
* @property {function():void} onshow
* @property {function():void} onhide
* @property {function():void} hideImmediately
* @property {number} value
* @property {number} size
* @property {boolean} visible
*/
/**
* Create a scrollbar
* @param {Object} options
* @param {HTMLElement} [options.parent]
* @param {"top"|"left"|"right"|"bottom"} [options.placement = "right"]
* @param {Number} [options.width]
* @param {function():void} [options.onscroll]
* @param {function():void} [options.onscrollend]
* @returns {Scrollbar & HTMLElement}
*/
export default function ScrollBar(options) {
if (!options || !options.parent) {
throw new Error("ScrollBar.js: Parent element required.");
}
const { placement = "right" } = options;
const $cursor = tag("span", {
className: "scroll-cursor",
style: {
top: 0,
left: 0,
},
});
const $thumb = tag("span", {
className: "thumb",
});
const $container = tag("div", {
className: "container",
children: [$cursor, $thumb],
});
const $scrollbar = tag("div", {
className: `scrollbar-container ${placement}`,
child: $container,
});
const config = {
passive: false,
};
const TIMEOUT = 2000;
const isVertical = placement === "right" || placement === "left";
const observer = new MutationObserver(observerCallback);
let scroll = 0;
let touchStartValue = {
x: 0,
y: 0,
};
let scrollbarSize = 20;
let height;
let width;
let rect;
let scrollbarTimeoutHide;
let scrollbarTimeoutRemove;
let onshow;
let onhide;
let touchStarted = false;
if (options.width) scrollbarSize = options.width;
setWidth(scrollbarSize);
$scrollbar.onScroll = options.onscroll;
$scrollbar.onScrollEnd = options.onscrollend;
$thumb.addEventListener("touchstart", touchStart, config);
$thumb.addEventListener("mousedown", touchStart, config);
window.addEventListener("resize", resize);
observer.observe($cursor, {
attributes: true,
});
function observerCallback() {
$thumb.style.top = $cursor.style.top;
$thumb.style.left = $cursor.style.left;
}
function setWidth(width) {
if (isVertical) $scrollbar.style.width = $cursor.style.width = width + "px";
else $scrollbar.style.height = $cursor.style.height = width + "px";
}
/**
*
* @param {TouchEvent|MouseEvent} e
*/
function touchStart(e) {
e.preventDefault();
touchStarted = true;
if (!rect) resize();
const touch = e.type === "touchstart" ? e.touches[0] : e;
touchStartValue.x = touch.clientX;
touchStartValue.y = touch.clientY;
$scrollbar.classList.add("active");
document.addEventListener("touchmove", touchMove, config);
document.addEventListener("mousemove", touchMove, config);
document.addEventListener("touchend", touchEnd, config);
document.addEventListener("mouseup", touchEnd, config);
document.addEventListener("touchcancel", touchEnd, config);
clearTimeout(scrollbarTimeoutHide);
}
/**
*
* @param {TouchEvent | MouseEvent} e
*/
function touchMove(e) {
const touch = e.type === "touchmove" ? e.touches[0] : e;
const touchDiffX = touchStartValue.x - touch.clientX;
const touchDiffY = touchStartValue.y - touch.clientY;
touchStartValue.x = touch.clientX;
touchStartValue.y = touch.clientY;
if (isVertical) {
let top = Number.parseFloat($cursor.style.top) - touchDiffY;
const currentTopValue = Number.parseFloat($cursor.style.top);
if (top < 0) top = 0;
else if (top > height) top = height;
if (currentTopValue !== top) {
$cursor.style.top = top + "px";
scroll = top / height;
if (typeof $scrollbar.onScroll === "function")
$scrollbar.onScroll(scroll);
}
} else {
let left = Number.parseFloat($cursor.style.left) - touchDiffX;
const currentLeftValue = Number.parseFloat($cursor.style.left);
if (left < 0) left = 0;
else if (left > width) left = width;
if (currentLeftValue !== left) {
$cursor.style.left = left + "px";
scroll = left / width;
if (typeof $scrollbar.onScroll === "function")
$scrollbar.onScroll(scroll);
}
}
}
/**
*
* @param {TouchEvent|MouseEvent} e
*/
function touchEnd(e) {
e.preventDefault();
touchStarted = false;
$scrollbar.classList.remove("active");
document.removeEventListener("touchmove", touchMove, config);
document.removeEventListener("mousemove", touchMove, config);
document.removeEventListener("touchend", touchEnd, config);
document.removeEventListener("mouseup", touchEnd, config);
document.removeEventListener("touchcancel", touchEnd, config);
if (typeof $scrollbar.onScrollEnd === "function") $scrollbar.onScrollEnd();
scrollbarTimeoutHide = setTimeout(hide, TIMEOUT);
}
function resize(render = true) {
rect = $scrollbar.getBoundingClientRect();
height = rect.height - 20;
width = rect.width - 20;
if (height < 0) height = 0;
if (width < 0) width = 0;
if (render && height && width) setValue(scroll);
}
function setValue(val) {
if (!height || !width) resize(false);
//Make sure value is between 0 and 1
if (val < 0) val = 0;
else if (val > 1) val = 1;
scroll = val;
if (isVertical) $cursor.style.top = val * height + "px";
else $cursor.style.left = val * width + "px";
}
function destroy() {
window.removeEventListener("resize", resize);
$thumb.removeEventListener("touchstart", touchStart);
observer.disconnect();
if (typeof onhide === "function") onhide();
}
function render() {
show();
clearTimeout(scrollbarTimeoutHide);
scrollbarTimeoutHide = setTimeout(hide, TIMEOUT);
}
function show() {
if ($scrollbar.dataset.hidden === "false") {
return;
}
$scrollbar.dataset.hidden = false;
clearTimeout(scrollbarTimeoutHide);
clearTimeout(scrollbarTimeoutRemove);
$scrollbar.classList.remove("hide");
if (!$scrollbar.isConnected) {
options.parent.append($scrollbar);
if (typeof onshow === "function") onshow();
}
}
function hide() {
if (touchStarted) return;
$scrollbar.dataset.hidden = true;
$scrollbar.classList.add("hide");
scrollbarTimeoutRemove = setTimeout(() => $scrollbar.remove(), 300);
if (typeof onhide === "function") onhide();
}
function hideImmediately() {
$scrollbar.dataset.hidden = true;
$scrollbar.classList.add("hide");
$scrollbar.remove();
if (typeof onhide === "function") onhide();
}
Object.defineProperty($scrollbar, "size", {
get: () => scrollbarSize,
set: setWidth,
});
Object.defineProperty($scrollbar, "resize", {
value: resize,
});
Object.defineProperty($scrollbar, "value", {
get: () => scroll,
set: setValue,
});
Object.defineProperty($scrollbar, "destroy", {
value: destroy,
});
Object.defineProperty($scrollbar, "render", {
value: render,
});
Object.defineProperty($scrollbar, "show", {
value: show,
});
Object.defineProperty($scrollbar, "hide", {
value: hide,
});
Object.defineProperty($scrollbar, "visible", {
get() {
return this.dataset.hidden !== "true";
},
});
Object.defineProperty($scrollbar, "onshow", {
set(fun) {
onshow = fun;
},
get() {
return onshow;
},
});
Object.defineProperty($scrollbar, "onhide", {
set(fun) {
onhide = fun;
},
get() {
return onhide;
},
});
Object.defineProperty($scrollbar, "hideImmediately", {
value: hideImmediately,
});
return $scrollbar;
}
================================================
FILE: src/components/scrollbar/style.scss
================================================
.scrollbar-container {
position: absolute;
background-color: transparent;
padding: 10px;
opacity: 0.5;
z-index: 9999;
animation: scrollbar-show 300ms ease 1;
transition: all 300ms ease;
opacity: 1;
&.hide {
opacity: 0;
}
&.active {
opacity: 1;
.thumb {
box-shadow: 0 0 0 4px rgba($color: #fff, $alpha: 0.2);
}
}
.container {
height: 100%;
width: 100%;
position: relative;
.thumb,
.scroll-cursor {
position: absolute;
display: block;
}
.thumb {
background-color: #39f;
background-color: var(--button-background-color);
border-radius: 4px;
}
}
&.right,
&.left {
height: calc(100% - (50px * 2));
width: 10px;
top: 0;
bottom: 0;
margin: auto;
.thumb,
.cursor {
height: 1px;
width: 100%;
}
.thumb {
height: 50px;
margin-top: -25px;
}
}
&.right {
left: auto;
right: 0;
padding: 10px 17px 10px 10px;
}
&.left {
left: 0;
right: auto;
}
&.top,
&.bottom {
width: calc(100% - (50px * 2));
height: 10px;
left: 0;
right: 0;
margin: auto;
.thumb,
.cursor {
height: 100%;
width: 1px;
}
.thumb {
width: 50px;
margin-left: -25px;
}
}
&.top {
top: 0;
bottom: auto;
}
&.bottom {
bottom: 0;
top: auto;
}
}
================================================
FILE: src/components/searchbar/index.js
================================================
import "./style.scss";
import Ref from "html-tag-js/ref";
import actionStack from "lib/actionStack";
/**
* Create and activate search bar
* @param {HTMLUListElement|HTMLOListElement} $list
* @param {(hide:Function)=>void} setHide
* @param {()=>void} onhideCb callback to be called when search bar is hidden
* @param {(value:string)=>HTMLElement[]} searchFunction
*/
function searchBar($list, setHide, onhideCb, searchFunction) {
let hideOnBlur = true;
let timeout = null;
const $searchInput = Ref();
/**@type {HTMLDivElement} */
const $container = (
{countLabel}
,
];
groupedSections.forEach((section) => {
if (section.type === "ungrouped") {
content.push(...section.items.map(cloneSearchItem));
return;
}
content.push(
{section.label}
{section.items.map(cloneSearchItem)}
{strings.info}
{item.text?.capitalize?.(0) ?? item.text}
{$trailingValueText}
{item.select ? (
) : null}
);
}
function shouldShowTailChevron(item) {
return (
item.chevron ||
(!item.select &&
Boolean(item.prompt || item.file || item.folder || item.link))
);
}
function insertRenderedItem(renderedItems, item, $item) {
if (Number.isInteger(item.index)) {
renderedItems.splice(item.index, 0, { item, $item });
return;
}
renderedItems.push({ item, $item });
}
function buildListContent(renderedItems, options) {
const $content = [];
/** @type {HTMLElement | null} */
let $currentSectionCard = null;
let currentCategory = null;
renderedItems.forEach(({ item, $item }) => {
const category =
item.category?.trim() || (options.groupByDefault ? "__default__" : "");
if (!category) {
currentCategory = null;
$currentSectionCard = null;
$content.push($item);
return;
}
if (currentCategory !== category || !$currentSectionCard) {
currentCategory = category;
const section = createSectionElements(category);
$currentSectionCard = section.$card;
$content.push(section.$section);
}
$currentSectionCard.append($item);
});
return $content.length ? $content : renderedItems.map(({ $item }) => $item);
}
function createSectionElements(category) {
const shouldShowLabel = category !== "__default__";
const $label = shouldShowLabel ? (
{category}
) : null;
const $card = ;
return {
$card,
$section: (
{$title}
{$subtitle}
{$closeBtn}
{$searchInput}
;
$panel.append($dragHandle, $header, $search, $content);
$mask.onclick = hide;
let startY = 0;
let currentY = 0;
let isDragging = false;
$dragHandle.ontouchstart = onDragStart;
$dragHandle.onmousedown = onDragStart;
function onDragStart(e) {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY;
currentY = startY;
$panel.style.transition = "none";
document.addEventListener("touchmove", onDragMove, { passive: false });
document.addEventListener("mousemove", onDragMove);
document.addEventListener("touchend", onDragEnd);
document.addEventListener("mouseup", onDragEnd);
}
function onDragMove(e) {
if (!isDragging) return;
e.preventDefault();
currentY = e.touches ? e.touches[0].clientY : e.clientY;
const deltaY = currentY - startY;
if (deltaY > 0) {
$panel.style.transform = `translateY(${deltaY}px)`;
} else if (!state.expanded) {
const expansion = Math.min(Math.abs(deltaY), 100);
$panel.style.maxHeight = `${60 + (expansion / 100) * 25}vh`;
}
}
function onDragEnd() {
isDragging = false;
document.removeEventListener("touchmove", onDragMove);
document.removeEventListener("mousemove", onDragMove);
document.removeEventListener("touchend", onDragEnd);
document.removeEventListener("mouseup", onDragEnd);
$panel.style.transition = "";
const deltaY = currentY - startY;
if (deltaY > 100) {
hide();
} else if (deltaY < -50 && !state.expanded) {
state.expanded = true;
$panel.classList.add("expanded");
$panel.style.transform = "";
$panel.style.maxHeight = "";
} else {
$panel.style.transform = "";
$panel.style.maxHeight = "";
}
}
function setTitle(text) {
$title.innerHTML = "";
$title.append(
,
{sanitize(text)},
);
}
function setSubtitle(text) {
$subtitle.textContent = text;
}
function onSearchInput(e) {
state.searchQuery = e.target.value.trim();
filterSymbols();
}
function clearSearch() {
$searchInput.value = "";
state.searchQuery = "";
}
function filterSymbols() {
const query = state.searchQuery.toLowerCase();
if (!query) {
state.filteredSymbols = state.flatSymbols;
} else {
state.filteredSymbols = state.flatSymbols.filter((sym) => {
const nameMatch = sym.name.toLowerCase().includes(query);
const kindMatch = sym.kindName.toLowerCase().includes(query);
const detailMatch = sym.detail?.toLowerCase().includes(query);
return nameMatch || kindMatch || detailMatch;
});
}
updateList();
}
function updateList() {
setSubtitle(getSubtitle());
renderSymbolsList();
}
function getSubtitle() {
const total = state.flatSymbols.length;
const filtered = state.filteredSymbols.length;
if (total === 0) return "No symbols";
if (filtered === total) return `${total} symbol${total !== 1 ? "s" : ""}`;
return `${filtered} of ${total} symbols`;
}
function renderLoading() {
$content.innerHTML = "";
$content.append(
Loading symbols...
,
);
}
function renderEmpty() {
const message = state.searchQuery
? "No matching symbols"
: "No symbols found";
$content.innerHTML = "";
$content.append(
{message}
,
);
}
function renderNotSupported() {
$content.innerHTML = "";
$content.append(
Language server does not support document symbols
,
);
}
function highlightMatch(text, query) {
if (!query) return sanitize(text);
const lowerText = text.toLowerCase();
const lowerQuery = query.toLowerCase();
const index = lowerText.indexOf(lowerQuery);
if (index === -1) return sanitize(text);
const before = sanitize(text.slice(0, index));
const match = sanitize(text.slice(index, index + query.length));
const after = sanitize(text.slice(index + query.length));
return `${before}${match}${after}`;
}
function createSymbolItem(symbol) {
const kindName = symbol.kindName || "Unknown";
const kindClass = `kind-${kindName.toLowerCase().replace(/\s+/g, "")}`;
const abbrev = SYMBOL_KIND_ABBREV[symbol.kind] || "?";
const indent = (symbol.depth || 0) * 16;
const startLine = symbol.selectionRange?.startLine ?? 0;
const $item = (
onSymbolClick(symbol)}>
{abbrev}
{symbol.detail && (
{sanitize(symbol.detail)}
)}
:{startLine + 1}
);
$item.get(".symbol-name").innerHTML = highlightMatch(
symbol.name,
state.searchQuery,
);
return $item;
}
function renderSymbolsList() {
$symbolsList.innerHTML = "";
if (state.filteredSymbols.length === 0) {
renderEmpty();
return;
}
$content.innerHTML = "";
const fragment = document.createDocumentFragment();
for (const symbol of state.filteredSymbols) {
fragment.appendChild(createSymbolItem(symbol));
}
$symbolsList.appendChild(fragment);
$content.appendChild($symbolsList);
}
function onSymbolClick(symbol) {
if (!state.editorView) return;
hide();
navigateToSymbol(state.editorView, symbol);
}
async function loadSymbols() {
if (!state.editorView) {
renderNotSupported();
return;
}
renderLoading();
try {
const symbols = await fetchDocumentSymbols(state.editorView);
if (symbols === null) {
state.loading = false;
setSubtitle("Not supported");
renderNotSupported();
return;
}
state.loading = false;
state.symbols = symbols;
state.flatSymbols = flattenSymbolsForDisplay(symbols);
state.filteredSymbols = state.flatSymbols;
if (state.flatSymbols.length === 0) {
setSubtitle("No symbols");
renderEmpty();
} else {
setSubtitle(getSubtitle());
renderSymbolsList();
}
} catch (error) {
console.error("Failed to load symbols:", error);
state.loading = false;
setSubtitle("Error");
$content.innerHTML = "";
$content.append(
{sanitize(error.message || "Failed to load symbols")}
,
);
}
}
function show(options = {}) {
if (currentPanel && currentPanel !== panelInstance) {
currentPanel.hide();
}
currentPanel = panelInstance;
state.editorView = options.view || null;
state.symbols = [];
state.flatSymbols = [];
state.filteredSymbols = [];
state.searchQuery = "";
state.loading = true;
state.expanded = false;
clearSearch();
setTitle("Document Outline");
setSubtitle("Loading...");
renderLoading();
document.body.append($mask, $panel);
requestAnimationFrame(() => {
$mask.classList.add("visible");
$panel.classList.add("visible");
$panel.classList.remove("expanded");
});
state.visible = true;
actionStack.push({
id: "symbols-panel",
action: hide,
});
loadSymbols();
}
function hide() {
if (!state.visible) return;
state.visible = false;
$mask.classList.remove("visible");
$panel.classList.remove("visible");
actionStack.remove("symbols-panel");
setTimeout(() => {
$mask.remove();
$panel.remove();
}, 250);
if (currentPanel === panelInstance) {
currentPanel = null;
}
if (state.editorView) {
state.editorView.focus();
}
}
const panelInstance = {
show,
hide,
get visible() {
return state.visible;
},
};
return panelInstance;
}
let panelSingleton = null;
function getPanel() {
if (!panelSingleton) {
panelSingleton = createSymbolsPanel();
}
return panelSingleton;
}
export function showSymbolsPanel(options) {
const panel = getPanel();
panel.show(options);
return panel;
}
export function hideSymbolsPanel() {
const panel = getPanel();
panel.hide();
}
export async function showDocumentSymbols(view) {
if (!view) {
const em = globalThis.editorManager;
view = em?.editor;
}
if (!view) {
const toast = globalThis.toast;
toast?.("No editor available");
return false;
}
showSymbolsPanel({ view });
return true;
}
export default {
show: showSymbolsPanel,
hide: hideSymbolsPanel,
showDocumentSymbols,
getPanel,
};
================================================
FILE: src/components/symbolsPanel/styles.scss
================================================
@use "../../styles/mixins.scss";
.symbols-panel-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
opacity: 0;
transition: opacity 200ms ease-out;
pointer-events: none;
&.visible {
opacity: 1;
pointer-events: auto;
}
}
.symbols-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
background-color: var(--popup-background-color);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
box-shadow: 0 -4px 20px var(--box-shadow-color);
transform: translateY(100%);
transition: transform 250ms ease-out, max-height 200ms ease-out;
display: flex;
flex-direction: column;
max-height: 60vh;
overflow: hidden;
&.visible {
transform: translateY(0);
}
&.expanded {
max-height: 85vh;
}
.drag-handle {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0 4px 0;
cursor: grab;
flex-shrink: 0;
&::after {
content: "";
width: 36px;
height: 4px;
background-color: var(--border-color);
border-radius: 2px;
}
&:active {
cursor: grabbing;
}
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 12px 16px;
border-bottom: 1px solid var(--border-color);
min-height: 44px;
flex-shrink: 0;
.header-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
.header-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 600;
color: var(--primary-text-color);
.icon {
font-size: 1.1em;
opacity: 0.7;
}
}
.header-subtitle {
font-size: 0.85rem;
color: var(--secondary-text-color);
opacity: 0.8;
}
}
.header-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.action-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--secondary-text-color);
border-radius: 50%;
cursor: pointer;
&:active {
background-color: var(--active-icon-color);
}
.icon {
font-size: 1.2em;
}
}
}
.panel-search {
padding: 8px 16px;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
input {
width: 100%;
background-color: var(--secondary-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.9rem;
color: var(--primary-text-color);
outline: none;
&::placeholder {
color: var(--secondary-text-color);
opacity: 0.7;
}
&:focus {
border-color: var(--active-color);
}
}
}
.panel-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
&::-webkit-scrollbar {
width: var(--scrollbar-width, 4px);
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, rgba(0, 0, 0, 0.333));
border-radius: calc(var(--scrollbar-width, 4px) / 2);
}
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--secondary-text-color);
gap: 12px;
.loader {
@include mixins.circular-loader(24px);
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--secondary-text-color);
text-align: center;
.icon {
font-size: 2rem;
margin-bottom: 8px;
opacity: 0.5;
}
}
}
.symbol-item {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
height: 44px;
cursor: pointer;
user-select: none;
will-change: transform;
&:active {
background-color: var(--active-icon-color);
}
.symbol-indent {
flex-shrink: 0;
}
.symbol-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
flex-shrink: 0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
&.kind-file {
background-color: rgba(158, 158, 158, 0.2);
color: #9e9e9e;
}
&.kind-module {
background-color: rgba(255, 152, 0, 0.2);
color: #ff9800;
}
&.kind-namespace {
background-color: rgba(255, 152, 0, 0.2);
color: #ff9800;
}
&.kind-package {
background-color: rgba(121, 85, 72, 0.2);
color: #795548;
}
&.kind-class {
background-color: rgba(255, 193, 7, 0.2);
color: #ffc107;
}
&.kind-method {
background-color: rgba(156, 39, 176, 0.2);
color: #9c27b0;
}
&.kind-property {
background-color: rgba(0, 150, 136, 0.2);
color: #009688;
}
&.kind-field {
background-color: rgba(0, 150, 136, 0.2);
color: #009688;
}
&.kind-constructor {
background-color: rgba(156, 39, 176, 0.2);
color: #9c27b0;
}
&.kind-enum {
background-color: rgba(255, 152, 0, 0.2);
color: #ff9800;
}
&.kind-interface {
background-color: rgba(0, 188, 212, 0.2);
color: #00bcd4;
}
&.kind-function {
background-color: rgba(103, 58, 183, 0.2);
color: #673ab7;
}
&.kind-variable {
background-color: rgba(33, 150, 243, 0.2);
color: #2196f3;
}
&.kind-constant {
background-color: rgba(33, 150, 243, 0.2);
color: #2196f3;
}
&.kind-string {
background-color: rgba(76, 175, 80, 0.2);
color: #4caf50;
}
&.kind-number {
background-color: rgba(139, 195, 74, 0.2);
color: #8bc34a;
}
&.kind-boolean {
background-color: rgba(33, 150, 243, 0.2);
color: #2196f3;
}
&.kind-array {
background-color: rgba(255, 87, 34, 0.2);
color: #ff5722;
}
&.kind-object {
background-color: rgba(96, 125, 139, 0.2);
color: #607d8b;
}
&.kind-key {
background-color: rgba(233, 30, 99, 0.2);
color: #e91e63;
}
&.kind-null {
background-color: rgba(158, 158, 158, 0.2);
color: #9e9e9e;
}
&.kind-enummember {
background-color: rgba(255, 152, 0, 0.2);
color: #ff9800;
}
&.kind-struct {
background-color: rgba(96, 125, 139, 0.2);
color: #607d8b;
}
&.kind-event {
background-color: rgba(255, 235, 59, 0.2);
color: #fdd835;
}
&.kind-operator {
background-color: rgba(158, 158, 158, 0.2);
color: #9e9e9e;
}
&.kind-typeparameter {
background-color: rgba(0, 188, 212, 0.2);
color: #00bcd4;
}
}
.symbol-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
.symbol-name {
font-size: 0.9rem;
font-weight: 500;
color: var(--primary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.symbol-match {
background-color: color-mix(in srgb, var(--active-color) 30%, transparent);
border-radius: 2px;
padding: 0 2px;
}
}
.symbol-detail {
font-size: 0.75rem;
color: var(--secondary-text-color);
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.symbol-line {
font-size: 0.75rem;
color: var(--secondary-text-color);
font-family: monospace;
flex-shrink: 0;
opacity: 0.7;
}
}
================================================
FILE: src/components/tabView.js
================================================
import Ref from "html-tag-js/ref";
/**
*
* @param {object} param0
* @param {string} param0.id
* @returns
*/
export default function TabView({ id, disableSwipe = false }, children) {
let moveX = 0;
let moveY = 0;
let lastX = 0;
let lastY = 0;
let isScrolling = false;
const el = Ref();
return (
{children}
);
function ontouchstart(e) {
moveX = 0;
moveY = 0;
lastX = e.touches[0].clientX;
lastY = e.touches[0].clientY;
isScrolling = false;
document.addEventListener("touchmove", omtouchmove, { passive: true });
document.addEventListener("touchend", omtouchend);
document.addEventListener("touchcancel", omtouchend);
}
function omtouchmove(e) {
const { clientX, clientY } = e.touches[0];
const deltaX = lastX - clientX;
const deltaY = lastY - clientY;
// Determine if the user is primarily scrolling vertically
if (!isScrolling) {
isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
}
if (!isScrolling) {
moveX += deltaX;
e.preventDefault();
}
lastX = clientX;
lastY = clientY;
}
function omtouchend() {
document.removeEventListener("touchmove", omtouchmove);
document.removeEventListener("touchend", omtouchend);
document.removeEventListener("touchcancel", omtouchend);
// Only change tabs when a significant horizontal swipe is detected and not scrolling vertically
if (!isScrolling && Math.abs(moveX) > 100) {
const tabs = Array.from(el.get(".options").children);
const currentTab = el.get(".options>span.active");
const direction = moveX > 0 ? 1 : -1;
const currentTabIndex = tabs.indexOf(currentTab);
const nextTabIndex =
(currentTabIndex + direction + tabs.length) % tabs.length;
tabs[nextTabIndex].click();
currentTab.classList.remove("active");
tabs[nextTabIndex].classList.add("active");
}
}
function changeTab(e) {
const { target } = e;
if (!target.matches(".options>span")) return;
const currentTab = el.get(".options>span.active");
if (target === currentTab) return;
currentTab.classList.remove("active");
target.classList.add("active");
}
}
================================================
FILE: src/components/terminal/index.js
================================================
/**
* Terminal Components Export
*/
import TerminalComponent from "./terminal";
import { DEFAULT_TERMINAL_SETTINGS } from "./terminalDefaults";
import TerminalManager from "./terminalManager";
import TerminalThemeManager from "./terminalThemeManager";
export {
DEFAULT_TERMINAL_SETTINGS,
TerminalComponent,
TerminalManager,
TerminalThemeManager,
};
export default {
TerminalComponent,
TerminalManager,
TerminalThemeManager,
DEFAULT_TERMINAL_SETTINGS,
};
================================================
FILE: src/components/terminal/ligatures.js
================================================
// pretty basic ligature implementation for webview
export default class LigaturesAddon {
constructor(options = {}) {
// fallback ligatures if a font does not support ligatures natively
this._fallbackLigatures =
options.fallbackLigatures ||
[
"<--",
"<---",
"<<-",
"<-",
"->",
"->>",
"-->",
"--->",
"<==",
"<===",
"<<=",
"<=",
"=>",
"=>>",
"==>",
"===>",
">=",
">>=",
"<->",
"<-->",
"<--->",
"<---->",
"<=>",
"<==>",
"<===>",
"<====>",
"<~~",
"<~",
"~>",
"~~>",
"::",
":::",
"==",
"!=",
"===",
"!==",
":=",
":-",
":+",
"<*",
"<*>",
"*>",
"<|",
"<|>",
"|>",
"+:",
"-:",
"=:",
":>",
"++",
"+++",
" clientX - rect.x
*/
offsetX = clientX - rect.x;
offsetY = clientY - rect.y;
tabLeft = rect.left;
tabWidth = rect.width;
parentLeft = parentRect.left;
parentRight = parentRect.right;
MAX_SCROLL = $parent.scrollWidth - parentRect.width;
MIN_SCROLL = 0;
// setup the cloned tab
$tabClone.classList.add("drag");
$tabClone.style.height = `${rect.height}px`;
$tabClone.style.width = `${rect.width}px`;
$tabClone.style.transform = `translate3d(${rect.x}px, ${rect.y}px, 0)`;
app.append($tabClone);
$tab.click();
document.addEventListener("mousemove", onDrag, opts);
document.addEventListener("touchmove", onDrag, opts);
document.addEventListener("mouseup", releaseDrag, opts);
document.addEventListener("touchend", releaseDrag, opts);
document.addEventListener("touchcancel", releaseDrag, opts);
document.addEventListener("mouseleave", releaseDrag, opts);
prevScrollLeft = $parent.scrollLeft;
$parent.addEventListener("scroll", preventDefaultScroll, opts);
}
/**
* On mouse or touch move
* @param {MouseEvent|TouchEvent} e
* @returns
*/
function onDrag(e) {
if (e instanceof Event) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
const { clientX, clientY } = getClientPos(e);
tabLeft = clientX - offsetX;
tabTop = clientY - offsetY;
$tabClone.style.transform = `translate3d(${tabLeft}px, ${tabTop}px, 0)`;
if ($parent.scrollWidth === $parent.clientWidth) return;
const scroll = getScroll();
// if can scroll and already scrolling return
// or if can't scroll and not scrolling return
if (!!scroll === !!animationFrame) return;
// if can't scroll and scrolling clear interval
if (!scroll && animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
return;
}
scrollContainer();
}
/**
* Cancels the drag
* @param {MouseEvent} e
*/
function releaseDrag(e) {
const { clientX, clientY } = getClientPos(e);
/**@type {HTMLDivElement} target tab */
const $target = document.elementFromPoint(clientX, clientY);
if (
$parent.contains($target) && // target is in parent
$target !== $tab && // target is not the tab
!$tab.contains($target) // target is not a child of tab
) {
// get the target tab, if target is a child it will get the parent
const $targetTab = $target.closest(".tile");
if ($targetTab) {
const rect = $targetTab.getBoundingClientRect();
const midX = rect.left + rect.width / 2;
const pointerX = tabLeft + tabWidth / 2;
if (midX < pointerX) {
// move right
const $nextSibling = $targetTab.nextElementSibling;
if ($nextSibling) {
$parent.insertBefore($tab, $nextSibling);
} else {
$parent.appendChild($tab);
}
} else {
$parent.insertBefore($tab, $targetTab);
}
updateFileList($parent);
}
} else if (
$target.tagName === "INPUT" ||
$target.tagName === "TEXTAREA" ||
$target.isContentEditable ||
$target.closest(".cm-editor")
) {
// If released on an input area or CodeMirror editor
const filePath = editorManager.activeFile.uri;
if (filePath) {
if ($target.closest(".cm-editor")) {
const view = editorManager.editor;
view.dispatch(view.state.replaceSelection(filePath));
} else {
$target.value += filePath;
}
}
}
cancelAnimationFrame(animationFrame);
$tabClone.remove();
$tabClone = null;
document.removeEventListener("mousemove", onDrag, opts);
document.removeEventListener("touchmove", onDrag, opts);
document.removeEventListener("mouseup", releaseDrag, opts);
document.removeEventListener("touchend", releaseDrag, opts);
document.removeEventListener("touchcancel", releaseDrag, opts);
document.removeEventListener("mouseleave", releaseDrag, opts);
$parent.removeEventListener("scroll", preventDefaultScroll);
}
function preventDefaultScroll() {
this.scrollLeft = prevScrollLeft;
}
/**
* Scrolls the container using animation frame
*/
function scrollContainer() {
return animate();
function animate() {
const scroll = getScroll();
if (!scroll) return;
prevScrollLeft = $parent.scrollLeft += scroll;
animationFrame = requestAnimationFrame(animate);
}
}
/**
* Gets the client position from the event
* @param {MouseEvent & TouchEvent} e
* @returns {MouseEvent}
*/
function getClientPos(e) {
const { touches, changedTouches } = e;
let { clientX = 0, clientY = 0 } = e;
if (touches?.length) {
const [touch] = touches;
clientX = touch.clientX;
clientY = touch.clientY;
} else if (changedTouches?.length) {
const [touch] = changedTouches;
clientX = touch.clientX;
clientY = touch.clientY;
}
return { clientX, clientY };
}
/**
* Update the position of the file list
* @param {HTMLElement} $parent
*/
function updateFileList($parent) {
const pinnedCount = editorManager.files.filter((file) => file.pinned).length;
const children = [...$parent.children];
const newFileList = [];
for (let el of children) {
for (let file of editorManager.files) {
if (file.tab === el) {
newFileList.push(file);
break;
}
}
}
editorManager.files = newFileList;
const draggedFile = newFileList.find((file) => file.tab === $tab);
if (draggedFile) {
const draggedIndex = newFileList.indexOf(draggedFile);
let nextPinnedState;
if (!draggedFile.pinned && draggedIndex < pinnedCount) {
nextPinnedState = true;
} else if (draggedFile.pinned && draggedIndex >= pinnedCount) {
nextPinnedState = false;
}
if (nextPinnedState !== undefined) {
draggedFile.setPinnedState(nextPinnedState, { reorder: false });
if (typeof editorManager.normalizePinnedTabOrder === "function") {
editorManager.normalizePinnedTabOrder(editorManager.files);
}
}
}
}
/**
* Checks if the tab is going to scroll and returns the scroll value
*/
function getScroll() {
const tabRight = tabLeft + tabWidth;
const scrollX = $parent.scrollLeft;
/**@type {number} scroll value */
let scroll = 0;
// tab right should be greater than parent right
const rightDiff = tabRight - parentRight;
// tab left should be less than parent left
const leftDiff = parentLeft - tabLeft;
const scrollSpeed = (diff) => {
const ratio = diff / tabWidth;
return ratio * MAX_SCROLL_SPEED;
};
if (leftDiff > 0 && scrollX > MIN_SCROLL) {
scroll = -scrollSpeed(leftDiff);
} else if (rightDiff > 0 && scrollX < MAX_SCROLL) {
scroll = scrollSpeed(rightDiff);
}
return scroll;
}
================================================
FILE: src/handlers/intent.js
================================================
import fsOperation from "fileSystem";
import openFile from "lib/openFile";
import helpers from "utils/helpers";
const handlers = [];
/**
* Queue to store intents that arrive before files are restored
* @type {Array<{url: string, options: object}>}
*/
const pendingIntents = [];
/**
*
* @param {Intent} intent
*/
export default async function HandleIntent(intent = {}) {
const type = intent.action.split(".").slice(-1)[0];
if (["SEND", "VIEW", "EDIT"].includes(type)) {
/**@type {string} */
const url = intent.fileUri || intent.data;
if (!url) return;
if (url.startsWith("acode://")) {
const path = url.replace("acode://", "");
const [module, action, value] = path.split("/");
let defaultPrevented = false;
const event = new IntentEvent(module, action, value);
for (const handler of handlers) {
handler(event);
if (event.defaultPrevented) defaultPrevented = true;
if (event.propagationStopped) break;
}
if (defaultPrevented) return;
if (module === "plugin") {
const { default: Plugin } = await import("pages/plugin");
const installed = await fsOperation(PLUGIN_DIR, value).exists();
Plugin({ id: value, installed, install: action === "install" });
}
return;
}
if (sessionStorage.getItem("isfilesRestored") === "true") {
await openFile(url, {
mode: "single",
render: true,
});
} else {
// Store the intent for later processing when files are restored
pendingIntents.push({
url,
options: {
mode: "single",
render: true,
},
});
}
}
}
HandleIntent.onError = (error) => {
helpers.error(error);
};
export function addIntentHandler(handler) {
handlers.push(handler);
}
export function removeIntentHandler(handler) {
const index = handlers.indexOf(handler);
if (index > -1) handlers.splice(index, 1);
}
/**
* Process all pending intents that were queued before files were restored.
* This function is called after isfilesRestored is set to true in main.js.
* @returns {Promise