Merge branch 'develop' into i18next-integration-draft

zyf722 · Jan 20, 2025 · 8ae91a0 · 8ae91a0
2 parents dfb67e7 + 7a3814f
commit 8ae91a0
Show file tree

Hide file tree

Showing 56 changed files with 1,280 additions and 1,040 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,7 +23,8 @@
     "Formatter",
     "Build",
     "services",
-    "CommandMenu"
+    "CommandMenu",
+    "Accessibility"
   ],
   "html.customData": ["./.vscode/html.html-data.json"]
 }
diff --git a/docs/src/components/TemplateList.tsx b/docs/src/components/TemplateList.tsx
@@ -17,6 +17,9 @@ const templates = [
   { name: 'lit', title: 'Lit Starter', thumbnail: 'lit.svg' },
   { name: 'stencil', title: 'Stencil Starter', thumbnail: 'stencil.png' },
   { name: 'mdx', title: 'MDX Starter', thumbnail: 'mdx.svg' },
+  { name: 'tailwindcss', title: 'Tailwind CSS Starter', thumbnail: 'tailwindcss.svg' },
+  { name: 'shadcn-ui', title: 'shadcn/ui Starter', thumbnail: 'shadcn-ui.svg' },
+  { name: 'bootstrap', title: 'Bootstrap Starter', thumbnail: 'bootstrap.svg' },
   { name: 'astro', title: 'Astro Starter', thumbnail: 'astro.svg' },
   { name: 'riot', title: 'Riot.js Starter', thumbnail: 'riot.svg' },
   { name: 'malina', title: 'Malina.js Starter', thumbnail: 'malina.svg' },
@@ -25,8 +28,6 @@ const templates = [
   { name: 'knockout', title: 'Knockout Starter', thumbnail: 'knockout.svg' },
   { name: 'jest', title: 'Jest Starter', thumbnail: 'jest.svg' },
   { name: 'jest-react', title: 'Jest/React Starter', thumbnail: 'jest.svg' },
-  { name: 'bootstrap', title: 'Bootstrap Starter', thumbnail: 'bootstrap.svg' },
-  { name: 'tailwindcss', title: 'Tailwind CSS Starter', thumbnail: 'tailwindcss.svg' },
   { name: 'coffeescript', title: 'CoffeeScript Starter', thumbnail: 'coffeescript.svg' },
   { name: 'livescript', title: 'LiveScript Starter', thumbnail: 'livescript.svg' },
   { name: 'civet', title: 'Civet Starter', thumbnail: 'civet.png' },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,32 +71,32 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "6.3.0",
-    "@codemirror/commands": "6.1.1",
-    "@codemirror/lang-cpp": "6.0.1",
-    "@codemirror/lang-css": "6.0.0",
-    "@codemirror/lang-html": "6.1.2",
-    "@codemirror/lang-javascript": "6.1.0",
-    "@codemirror/lang-json": "6.0.0",
-    "@codemirror/lang-markdown": "6.0.1",
-    "@codemirror/lang-php": "6.0.0",
-    "@codemirror/lang-python": "6.0.2",
-    "@codemirror/lang-sass": "6.0.1",
-    "@codemirror/lang-sql": "6.3.0",
-    "@codemirror/lang-vue": "0.1.0",
-    "@codemirror/lang-wast": "6.0.0",
-    "@codemirror/language": "6.2.1",
-    "@codemirror/legacy-modes": "6.1.0",
-    "@codemirror/lint": "6.0.0",
-    "@codemirror/search": "6.2.1",
-    "@codemirror/state": "6.1.2",
-    "@codemirror/theme-one-dark": "6.1.0",
-    "@codemirror/view": "6.3.0",
-    "@emmetio/codemirror6-plugin": "0.2.0",
-    "@lezer/common": "1.0.1",
-    "@lezer/highlight": "1.1.1",
-    "@lezer/javascript": "1.3.2",
-    "@lezer/lr": "1.3.1",
+    "@codemirror/autocomplete": "6.18.4",
+    "@codemirror/commands": "6.8.0",
+    "@codemirror/lang-cpp": "6.0.2",
+    "@codemirror/lang-css": "6.3.1",
+    "@codemirror/lang-html": "6.4.9",
+    "@codemirror/lang-javascript": "6.2.2",
+    "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-markdown": "6.3.2",
+    "@codemirror/lang-php": "6.0.1",
+    "@codemirror/lang-python": "6.1.6",
+    "@codemirror/lang-sass": "6.0.2",
+    "@codemirror/lang-sql": "6.8.0",
+    "@codemirror/lang-vue": "0.1.3",
+    "@codemirror/lang-wast": "6.0.2",
+    "@codemirror/language": "6.10.8",
+    "@codemirror/legacy-modes": "6.4.2",
+    "@codemirror/lint": "6.8.4",
+    "@codemirror/search": "6.5.8",
+    "@codemirror/state": "6.5.1",
+    "@codemirror/theme-one-dark": "6.1.2",
+    "@codemirror/view": "6.36.2",
+    "@emmetio/codemirror6-plugin": "0.4.0",
+    "@lezer/common": "1.2.3",
+    "@lezer/highlight": "1.2.1",
+    "@lezer/javascript": "1.4.21",
+    "@lezer/lr": "1.4.2",
     "@replit/codemirror-css-color-picker": "6.0.0",
     "@replit/codemirror-emacs": "6.0.0",
     "@replit/codemirror-indentation-markers": "6.1.0",

diff --git a/src/livecodes/UI/assets.ts b/src/livecodes/UI/assets.ts
@@ -1,9 +1,6 @@
 /* eslint-disable import/no-internal-modules */
 import type { DeployResult } from '../deploy';
-import type { createEventsManager } from '../events';
-import type { createModal } from '../modal';
-import type { Asset, FileType, Screen, User } from '../models';
-import type { createNotifications } from '../notifications';
+import type { Asset, EventsManager, FileType, Modal, Notifications, Screen, User } from '../models';
 import type { GitHubFile } from '../services/github';
 import { generateId, type Storage } from '../storage';
 import { addAssetScreen, assetsScreen } from '../html';
@@ -103,7 +100,7 @@ const createLinkContent = (item: Asset, baseUrl: string) => {
 const createAssetItem = (
   item: Asset,
   list: HTMLElement,
-  notifications: ReturnType<typeof createNotifications>,
+  notifications: Notifications,
   baseUrl: string,
 ) => {
   const li = document.createElement('li');
@@ -124,7 +121,7 @@ const createAssetItem = (
   const actions = document.createElement('div');
   actions.classList.add('actions');
   li.appendChild(actions);
-  const deleteButton = document.createElement('div');
+  const deleteButton = document.createElement('button');
   deleteButton.innerHTML = deleteIcon;
   deleteButton.classList.add('action-button', 'delete-button');
   deleteButton.title = window.deps.translateString('assets.action.delete', 'Delete');
@@ -136,7 +133,7 @@ const createAssetItem = (
 const organizeAssets = async (
   getAssets: () => Promise<Asset[]>,
   showAssets: (assets: Asset[]) => Promise<void>,
-  eventsManager: ReturnType<typeof createEventsManager>,
+  eventsManager: EventsManager,
 ) => {
   let sortBy: 'date' | 'filename' = 'date';
   let sortByDirection: 'asc' | 'desc' = 'desc';
@@ -338,10 +335,10 @@ export const createAssetsList = async ({
   baseUrl,
 }: {
   assetsStorage: Storage<Asset>;
-  eventsManager: ReturnType<typeof createEventsManager>;
+  eventsManager: EventsManager;
   showScreen: (screen: Screen['screen']) => void;
-  notifications: ReturnType<typeof createNotifications>;
-  modal: ReturnType<typeof createModal>;
+  notifications: Notifications;
+  modal: Modal;
   baseUrl: string;
 }) => {
   const div = document.createElement('div');
@@ -455,9 +452,9 @@ export const createAddAssetContainer = ({
   activeTab,
 }: {
   assetsStorage: Storage<Asset>;
-  eventsManager: ReturnType<typeof createEventsManager>;
+  eventsManager: EventsManager;
   showScreen: (screen: Screen['screen'], activeTab?: number) => Promise<void>;
-  notifications: ReturnType<typeof createNotifications>;
+  notifications: Notifications;
   deployAsset: (user: User, file: GitHubFile) => Promise<DeployResult | null>;
   getUser: (fn?: () => void) => Promise<User | void>;
   baseUrl: string;
@@ -470,17 +467,21 @@ export const createAddAssetContainer = ({
 
   const tabs = addAssetContainer.querySelectorAll<HTMLElement>('#add-asset-tabs li');
   const activateTab = (tab: HTMLElement) => {
+    const link = tab.querySelector('a');
+    if (!link) return;
     tabs.forEach((t) => t.classList.remove('active'));
     tab.classList.add('active');
 
     document.querySelectorAll('#add-asset-screens > div').forEach((screen) => {
       screen.classList.remove('active');
     });
-    const target = addAssetContainer.querySelector('#' + tab.dataset.target);
+    const target = addAssetContainer.querySelector('#' + link.dataset.target);
     target?.classList.add('active');
     target?.querySelector('input')?.focus();
   };
   tabs.forEach((tab) => {
+    const link = tab.querySelector('a');
+    if (!link) return;
     eventsManager.addEventListener(tab, 'click', () => activateTab(tab));
   });
   setTimeout(() => {

diff --git a/src/livecodes/UI/backup.ts b/src/livecodes/UI/backup.ts
@@ -1,7 +1,5 @@
 /* eslint-disable import/no-internal-modules */
-import type { createModal } from '../modal';
-import type { createNotifications } from '../notifications';
-import type { createEventsManager } from '../events';
+import type { EventsManager, Modal, Notifications } from '../models';
 import type { Stores } from '../storage';
 import { backupScreen } from '../html';
 import { base64ToUint8Array, downloadFile, getDate, loadScript } from '../utils/utils';
@@ -15,21 +13,23 @@ import {
   getImportFileInputLabel,
 } from './selectors';
 
-const createBackupContainer = (eventsManager: ReturnType<typeof createEventsManager>) => {
+const createBackupContainer = (eventsManager: EventsManager) => {
   const div = document.createElement('div');
   div.innerHTML = backupScreen;
   const backupContainer = div.firstChild as HTMLElement;
 
   const tabs = backupContainer.querySelectorAll<HTMLElement>('#backup-tabs li');
   tabs.forEach((tab) => {
-    eventsManager.addEventListener(tab, 'click', () => {
+    const link = tab.querySelector('a');
+    if (!link) return;
+    eventsManager.addEventListener(link, 'click', () => {
       tabs.forEach((t) => t.classList.remove('active'));
       tab.classList.add('active');
 
       document.querySelectorAll('#backup-screens > div').forEach((screen) => {
         screen.classList.remove('active');
       });
-      const target = backupContainer.querySelector('#' + tab.dataset.target);
+      const target = backupContainer.querySelector('#' + link.dataset.target);
       target?.classList.add('active');
       target?.querySelector('input')?.focus();
     });
@@ -84,9 +84,9 @@ export const createBackupUI = ({
   deps,
 }: {
   baseUrl: string;
-  modal: ReturnType<typeof createModal>;
-  notifications: ReturnType<typeof createNotifications>;
-  eventsManager: ReturnType<typeof createEventsManager>;
+  modal: Modal;
+  notifications: Notifications;
+  eventsManager: EventsManager;
   stores: Stores;
   deps: {
     loadUserConfig: () => void;

diff --git a/src/livecodes/UI/broadcast.ts b/src/livecodes/UI/broadcast.ts
@@ -1,8 +1,5 @@
 /* eslint-disable import/no-internal-modules */
-import type { createEventsManager } from '../events';
-import type { createModal } from '../modal';
-import type { createNotifications } from '../notifications';
-import type { AppData } from '../models';
+import type { AppData, EventsManager, Modal, Notifications } from '../models';
 import { broadcastScreen } from '../html';
 import { broadcastService } from '../services/broadcast';
 import {
@@ -38,9 +35,9 @@ export const createBroadcastUI = async ({
   eventsManager,
   deps,
 }: {
-  modal: ReturnType<typeof createModal>;
-  notifications: ReturnType<typeof createNotifications>;
-  eventsManager: ReturnType<typeof createEventsManager>;
+  modal: Modal;
+  notifications: Notifications;
+  eventsManager: EventsManager;
   deps: {
     getBroadcastData: () => BroadcastData | null;
     setBroadcastData: (broadcastData: BroadcastData) => void;

diff --git a/src/livecodes/UI/code-to-image.ts b/src/livecodes/UI/code-to-image.ts
@@ -1,14 +1,14 @@
 /* eslint-disable import/no-internal-modules */
-import type { createEventsManager } from '../events';
-import type { createModal } from '../modal';
-import type { createNotifications } from '../notifications';
 import type {
   CodeEditor,
   CodejarTheme,
   Config,
   EditorId,
   EditorOptions,
+  EventsManager,
   FormatFn,
+  Modal,
+  Notifications,
 } from '../models';
 import { codeToImageScreen } from '../html';
 import { fonts } from '../editor/fonts';
@@ -70,9 +70,9 @@ export const createCodeToImageUI = async ({
   currentUrl: string;
   fileName: string;
   editorId: EditorId;
-  modal: ReturnType<typeof createModal>;
-  notifications: ReturnType<typeof createNotifications>;
-  eventsManager: ReturnType<typeof createEventsManager>;
+  modal: Modal;
+  notifications: Notifications;
+  eventsManager: EventsManager;
   deps: {
     createEditor: (options: PreviewEditorOptions) => Promise<CodeEditor>;
     getFormatFn: () => Promise<FormatFn>;

diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
@@ -280,6 +280,7 @@ export const getCommandMenuActions = ({
         'jest-react',
         'bootstrap',
         'tailwindcss',
+        'shadcn-ui',
         'd3',
         'phaser',
         'coffeescript',
@@ -1171,9 +1172,24 @@ export const getCommandMenuActions = ({
     },
     ...getKeyboardShortcutList(actions),
     {
-      id: 'Close Modal',
-      title: window.deps.translateString('commandMenu.closeModal', 'Close Modal'),
-      content: getContent('Close Modal'),
+      id: 'Toggle Tab Focus Mode',
+      title: window.deps.translateString(
+        'commandMenu.focus.toggleTabFocusMode',
+        'Toggle Tab Focus Mode',
+      ),
+      content: getContent('Toggle Tab Focus Mode'),
+      hotkey: 'ctrl+m',
+      mdIcon: 'cancel',
+      handler: () => {
+        window.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'M', code: 'KeyM', ctrlKey: true }),
+        );
+      },
+    },
+    {
+      id: 'Close Modal/Menu',
+      title: window.deps.translateString('commandMenu.closeModalMenu', 'Close Modal/Menu'),
+      content: getContent('Close Modal/Menu'),
       hotkey: 'esc',
       mdIcon: 'cancel',
       handler: () => {

diff --git a/...ecodes/languages/create-language-menus.ts → src/livecodes/UI/create-language-menus.ts b/...ecodes/languages/create-language-menus.ts → src/livecodes/UI/create-language-menus.ts
@@ -1,16 +1,25 @@
-import type { createEventsManager } from '../events';
-import type { EditorId, Config, Language, Processor, LanguageSpecs, Template } from '../models';
-import { languages } from './languages';
-import { processors } from './processors';
-import { languageIsEnabled, processorIsEnabled } from './utils';
+/* eslint-disable import/no-internal-modules */
+import type {
+  EditorId,
+  Config,
+  Language,
+  Processor,
+  LanguageSpecs,
+  Template,
+  EventsManager,
+} from '../models';
+import { languages } from '../languages/languages';
+import { processors } from '../languages/processors';
+import { languageIsEnabled, processorIsEnabled } from '../languages/utils';
 
 export const createLanguageMenus = (
   config: Config,
   baseUrl: string,
-  eventsManager: ReturnType<typeof createEventsManager>,
+  eventsManager: EventsManager,
   showLanguageInfo: (languageInfo: HTMLElement) => void,
   loadStarterTemplate: (templateName: Template['name']) => void,
   importCode: (options: { url: string }) => Promise<boolean>,
+  registerMenuButton: (menu: HTMLElement, button: HTMLElement) => void,
 ) => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const rootList = document.createElement('ul');
@@ -19,17 +28,16 @@ export const createLanguageMenus = (
   let editorsNumber = editorIds.length;
 
   editorIds.forEach((editorId) => {
-    const editorSelector = document.createElement('li');
+    const editorSelector = document.createElement('a');
+    editorSelector.href = '#';
     editorSelector.id = editorId + '-selector';
     editorSelector.classList.add('editor-title', 'noselect');
     editorSelector.dataset.editor = editorId;
-    editorSelector.tabIndex = 1;
     editorSelector.innerHTML = `
       <span></span>
       <a
         href="javascript:void(0)"
         onclick="event.stopPropagation();"
-        tabIndex="1"
         class="language-menu-button"
         title="${window.deps.translateString('core.changeLanguage.hint', 'Change Language')}"
       >
@@ -41,6 +49,7 @@ export const createLanguageMenus = (
     const menuScroller = document.createElement('div');
     menuScroller.classList.add('menu-scroller');
     menuScroller.classList.add('menu-scroller-' + editorId);
+    registerMenuButton(menuScroller, editorSelector.querySelector('.language-menu-button')!);
     editorSelector.appendChild(menuScroller);
 
     const languageMenu = document.createElement('ul');
@@ -159,14 +168,16 @@ export const createProcessorItem = (processor: { name: string; title: string })
   const processorItem = document.createElement('li');
   processorItem.classList.add('language-item', 'processor-item');
   processorItem.innerHTML = `
-        <label class="switch">
-          <span>${processor.title}</span>
-          <div>
-            <input id="${processor.name}" type="checkbox" data-processor="${processor.name}" />
-            <span class="slider round"></span>
-          </div>
-        </label>
-        `;
+  <a href="#">
+    <label class="switch">
+      <span>${processor.title}</span>
+      <div>
+        <input id="${processor.name}" type="checkbox" data-processor="${processor.name}" tabindex="-1" />
+        <span class="slider round"></span>
+      </div>
+    </label>
+  </a>
+  `;
   return processorItem;
 };