cabloy 5.1.244 → 5.1.246

package/.cabloy-version

@@ -1 +1 @@
-5.1.244
+5.1.246

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 5.1.246
+
+### Features
+
+- Add `APP_LOCALE_DEFAULT` to configure the default application locale.
+
+### Improvements
+
+- Enhance Markdown source mode.
+- Update dependencies in the pnpm lockfile.
+
+## 5.1.245
+
+### Improvements
+
+- Update the home user account tests.
+
 ## 5.1.244
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cabloy",
-  "version": "5.1.244",
+  "version": "5.1.246",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A Node.js fullstack framework",
   "keywords": [

package/repo-e2e/specs/home-user-account.spec.ts

@@ -492,8 +492,8 @@ test(
       await expect(userMenu).toHaveCount(1);
       await expect(userMenu.locator('summary')).toContainText(profileName);
       await userMenu.locator('summary').click();
-      const links = userMenu.locator('ul > li > a');
-      await expect(links).toHaveText(['Account Settings', 'Logout']);
+      const actions = userMenu.locator('ul > li > a, ul > li > button');
+      await expect(actions).toHaveText(['Account Settings', 'Logout']);
       await userMenu.getByText('Account Settings', { exact: true }).click();
       await expect(page).toHaveURL(accountPath);
       await expect(page.getByRole('heading', { name: 'Account Settings' })).toBeVisible();

package/repo-e2e/specs/markdown.spec.ts

@@ -329,6 +329,22 @@ const product = '${suffix}';
       await expect(editor).toBeVisible();
       const toolbar = adminPage.getByRole('toolbar', { name: 'Markdown toolbar' });
       await expect(toolbar).toBeVisible();
+      const sourceButton = toolbar.getByRole('button', { name: 'Source editing mode' });
+      const sourceInput = adminPage.getByRole('textbox', { name: 'Markdown source' });
+      await expect(sourceButton).toHaveAttribute('type', 'button');
+      await expect(sourceButton).toHaveAttribute('aria-pressed', 'false');
+      await sourceButton.click();
+      await expect(sourceButton).toHaveAttribute('aria-pressed', 'true');
+      await expect(sourceInput).toHaveValue(markdown);
+      await expect(editor).toBeHidden();
+      await expect(toolbar.getByRole('button', { name: 'Bold', exact: true })).toHaveCount(0);
+      await sourceInput.click();
+      await expect(sourceInput).toBeFocused();
+      await sourceButton.click();
+      await expect(editor).toBeVisible();
+      await sourceButton.click();
+      await expect(sourceInput).toHaveValue(markdown);
+      await sourceButton.click();
       const undoButton = toolbar.getByRole('button', { name: 'Undo' });
       await expect(toolbar.getByRole('combobox', { name: 'Code block language' })).toHaveCount(0);
       const codeBlockToolbar = adminPage.getByRole('toolbar', { name: 'Code block language' });
@@ -456,20 +472,40 @@ const product = '${suffix}';
       await expect(tableToolbar).toBeHidden();
       expect(adminPageErrors).toEqual([]);
 
+      await sourceButton.click();
+      expect((await sourceInput.inputValue()).trimEnd()).toBe(
+        markdown.replace('```ts', '```python'),
+      );
+      await expect(tableToolbar).toBeHidden();
+      await expect(codeBlockToolbar).toBeHidden();
+      const sourceMarkdown = `${markdown.replace('```ts', '```python')}\n\n## Source heading\n\nSource **content**`;
+      await sourceInput.fill(sourceMarkdown);
+      await sourceButton.click();
+      await expect(editor.locator('h2')).toHaveText('Source heading');
+      await expect(editor.locator('strong')).toHaveText('content');
+      await sourceButton.click();
+      await expect(sourceInput).toHaveValue(sourceMarkdown);
+      const savedMarkdown = `${sourceMarkdown}\n\n- Saved from source\n`;
+      await sourceInput.fill(savedMarkdown);
+
       const productUpdate = waitForApiResponse(
         adminPage,
         'PATCH',
         `${productActionPath}/${productId}`,
       );
       await adminPage.getByRole('button', { name: 'Submit', exact: true }).click();
-      await productUpdate;
+      const updateResponse = await productUpdate;
+      expect(updateResponse.request().postDataJSON().productContentForm.descriptionMarkdown).toBe(
+        savedMarkdown,
+      );
       const productResponseAfterUpdate = await adminPage.request.get(
         `${productActionPath}/${productId}`,
         { headers },
       );
       expect(productResponseAfterUpdate.ok()).toBeTruthy();
+      // Product content persistence trims boundary whitespace on the server.
       expect((await productResponseAfterUpdate.json()).productContentForm.descriptionMarkdown).toBe(
-        markdown.replace('```ts', '```python'),
+        savedMarkdown.trim(),
       );
       expect(adminPageErrors).toEqual([]);
     } finally {

package/vona/env/.env

@@ -3,6 +3,7 @@
 APP_NAME = cabloy-basic
 APP_TITLE = Cabloy Basic
 APP_VERSION = 5.0.0
+APP_LOCALE_DEFAULT = en-us
 
 # server
 

package/vona/packages-cli/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-cli",
-  "version": "1.1.175",
+  "version": "1.1.176",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona cli",
   "keywords": [

package/vona/packages-cli/cli-set-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-cli-set-api",
-  "version": "1.1.173",
+  "version": "1.1.174",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona cli-set-api",
   "keywords": [

package/vona/packages-vona/vona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona",
-  "version": "5.1.123",
+  "version": "5.1.124",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "Vona is an intuitive, elegant and powerful Node.js framework for rapidly developing enterprise applications of any size",
   "keywords": [

package/vona/packages-vona/vona-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-core",
-  "version": "5.1.53",
+  "version": "5.1.54",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona",
   "keywords": [

package/vona/packages-vona/vona-core/src/types/utils/env.ts

@@ -7,6 +7,7 @@ export interface VonaConfigEnv {
   VONA_TEST_RUN_ID: string | undefined;
   APP_TITLE: string | undefined;
   APP_VERSION: string | undefined;
+  APP_LOCALE_DEFAULT: string | undefined;
   SERVER_KEYS: string | undefined;
   SERVER_GLOBALPREFIX: string | undefined;
   SERVER_PUBLICDIR: string | undefined;

package/vona/packages-vona/vona-mock/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-mock",
-  "version": "6.1.53",
+  "version": "6.1.54",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "vona mock",
   "keywords": [

package/vona/pnpm-lock.yaml

@@ -1990,7 +1990,7 @@ importers:
         specifier: ^5.0.3
         version: link:modules/a-markdown
       vona-module-a-rbac:
-        specifier: ^5.0.18
+        specifier: ^5.0.19
         version: link:modules/a-rbac
       vona-module-a-socket:
         specifier: workspace:^

package/vona/src/backend/config/config/config.ts

@@ -1,4 +1,9 @@
-import type { ILoggerOptionsClientInfo, VonaApplication, VonaConfigOptional } from 'vona';
+import type {
+  ILocaleRecord,
+  ILoggerOptionsClientInfo,
+  VonaApplication,
+  VonaConfigOptional,
+} from 'vona';
 import type { IMailClientRecord, TypeMailTransportService } from 'vona-module-a-mail';
 import type { IDatabaseClientRecord } from 'vona-module-a-orm';
 
@@ -45,7 +50,7 @@ export default async function (app: VonaApplication) {
       'en-us': 'LanguageEnglish',
       'zh-cn': 'LanguageChinese',
     },
-    default: 'en-us',
+    default: (env.APP_LOCALE_DEFAULT || 'en-us') as keyof ILocaleRecord,
   };
 
   // instance

package/vona/src/suite-vendor/a-vona/modules/a-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-module-a-core",
-  "version": "5.1.69",
+  "version": "5.1.70",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "keywords": [

package/vona/src/suite-vendor/a-vona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vona-suite-a-vona",
-  "version": "5.1.114",
+  "version": "5.1.115",
   "gitHead": "a79189b882c17af5911573896a781bbb0046d37d",
   "description": "",
   "author": "",

package/zova/src/front/config/config/config.ts

@@ -81,7 +81,7 @@ export default function (sys: ZovaSys) {
 
   // locale
   config.locale = {
-    default: env.APP_LOCALE_DEFAULT as keyof ILocaleRecord,
+    default: (env.APP_LOCALE_DEFAULT || 'en-us') as keyof ILocaleRecord,
     storeKey: 'locale',
     items: {
       'en-us': 'LanguageEnglish',

package/zova/src/suite/a-home/modules/home-layoutempty/src/component/layoutEmpty/controller.tsx

@@ -1,7 +1,12 @@
-import { BeanControllerBase, Use, usePrepareArg } from 'zova';
+import { BeanControllerBase, ClientOnly, Use, usePrepareArg } from 'zova';
 import { Controller } from 'zova-module-a-bean';
+import { $icon } from 'zova-module-a-icon';
 import { ZRouterViewEmpty } from 'zova-module-a-router';
-import { IServiceSsrLayoutOptions, ServiceSsrLayout } from 'zova-module-home-base';
+import {
+  closeNearestDetails,
+  IServiceSsrLayoutOptions,
+  ServiceSsrLayout,
+} from 'zova-module-home-base';
 
 export interface ControllerLayoutEmptyProps {}
 
@@ -18,7 +23,52 @@ export class ControllerLayoutEmpty extends BeanControllerBase {
     } satisfies IServiceSsrLayoutOptions);
   }
 
+  protected renderLocale() {
+    const currentRoute = this.$currentRoute;
+    const metaLocale = currentRoute?.meta?.locale;
+    const locales = this.app.meta.locale.getItems(currentRoute?.meta?.locales);
+    return (
+      <li>
+        <details>
+          <summary aria-label="Language">{$icon('::language', 24)}</summary>
+          <ClientOnly>
+            <ul class="bg-base-100 rounded-t-none p-2 w-48 right-0">
+              {Object.keys(locales).map(key => {
+                const title = this.$scopeBase.locale[locales[key]]();
+                return (
+                  <li key={key} class={this.app.meta.locale.current === key ? 'disabled' : ''}>
+                    <a
+                      onClick={event => {
+                        if (metaLocale) {
+                          this.app.$gotoPage(currentRoute.matched[0].path, {
+                            params: { ...currentRoute.params, locale: key },
+                            query: currentRoute.query,
+                          });
+                        } else {
+                          this.app.meta.locale.current = key as any;
+                        }
+                        closeNearestDetails(event);
+                      }}
+                    >
+                      {$icon(this.app.meta.locale.current === key ? '::done' : '::none', 24)}
+                      {title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </ClientOnly>
+        </details>
+      </li>
+    );
+  }
+
   protected render() {
-    return <ZRouterViewEmpty></ZRouterViewEmpty>;
+    return (
+      <>
+        <ZRouterViewEmpty></ZRouterViewEmpty>
+        <ul class="menu menu-horizontal fixed top-4 right-4 z-50">{this.renderLocale()}</ul>
+      </>
+    );
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/component/formFieldMarkdown/controller.tsx

@@ -102,6 +102,8 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
   editor?: Editor;
   value = '';
   readonly = false;
+  sourceMode = false;
+  private _sourceModeValue?: string;
   toolbarState: IMarkdownToolbarState = this._emptyToolbarState();
   tableToolbarPosition?: IMarkdownContextualToolbarPosition;
   codeBlockToolbarPosition?: IMarkdownContextualToolbarPosition;
@@ -232,8 +234,48 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
     this._scheduleContextualToolbarPosition();
   }
 
-  private _runCommand(command: (editor: Editor) => boolean) {
+  public toggleSourceMode() {
     if (this.readonly || !this.editor) return;
+    if (this.sourceMode) {
+      this._leaveSourceMode();
+    } else {
+      this._sourceModeValue = this.value;
+      this.sourceMode = true;
+      this.closeTablePicker();
+      this._imageUploadSelection = undefined;
+      this._setTableToolbarPosition();
+      this._setCodeBlockToolbarPosition();
+    }
+  }
+
+  private _leaveSourceMode() {
+    if (this.value !== this._sourceModeValue) this._syncEditorValue(this.value);
+    this.sourceMode = false;
+    this._sourceModeValue = undefined;
+    this._refreshToolbarState();
+  }
+
+  public handleSourceInput(value: string) {
+    if (this.readonly || !this.sourceMode) return;
+    this._setValue?.(value);
+  }
+
+  public handleSourceBlur() {
+    this._handleBlur?.();
+  }
+
+  private _syncEditorValue(value: string) {
+    if (!this.editor) return;
+    this._syncing = true;
+    try {
+      this.editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
+    } finally {
+      this._syncing = false;
+    }
+  }
+
+  private _runCommand(command: (editor: Editor) => boolean) {
+    if (this.readonly || this.sourceMode || !this.editor) return;
     command(this.editor);
   }
 
@@ -242,6 +284,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
     return !!(
       editor &&
       !this.readonly &&
+      !this.sourceMode &&
       editor.isEditable &&
       editor.isActive('table') &&
       (editor.view.hasFocus() || this._tableToolbarFocused)
@@ -276,6 +319,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
     return !!(
       editor &&
       !this.readonly &&
+      !this.sourceMode &&
       editor.isEditable &&
       (editor.isActive('codeBlock') || (this.toolbarState.codeBlock && toolbarInteraction)) &&
       (editor.view.hasFocus() || toolbarInteraction)
@@ -535,7 +579,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
 
   public async editLink() {
     const editor = this.editor;
-    if (this.readonly || !editor) return;
+    if (this.readonly || this.sourceMode || !editor) return;
     const selection = editor.state.selection;
     const linkActive = editor.isActive('link');
     const canEditLink = linkActive
@@ -550,7 +594,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
       text: this.scope.locale.LinkUrl(),
       defaultValue: href,
     });
-    if (this.readonly || this.editor !== editor || result === undefined) return;
+    if (this.readonly || this.sourceMode || this.editor !== editor || result === undefined) return;
 
     const value = result.trim();
     const chain = editor.chain().focus().setTextSelection({
@@ -644,7 +688,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
 
   public beginImageUpload(chooseFiles: () => void) {
     const editor = this.editor;
-    if (this.readonly || !editor || !editor.isEditable) return;
+    if (this.readonly || this.sourceMode || !editor || !editor.isEditable) return;
     this._imageUploadSelection = {
       from: editor.state.selection.from,
       to: editor.state.selection.to,
@@ -654,6 +698,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
   }
 
   public handleImageUploaded(result: IImageUploaderResult) {
+    if (this.sourceMode || !this._imageUploadSelection) return;
     const editor = this.editor;
     const selection = this._imageUploadSelection;
     const src = this._resolveImageUrl(result.url);
@@ -743,7 +788,7 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
           },
         },
         onUpdate: ({ editor }) => {
-          if (!this._syncing) {
+          if (!this._syncing && !this.sourceMode) {
             this._setValue?.(editor.getMarkdown());
           }
         },
@@ -765,16 +810,15 @@ export class ControllerFormFieldMarkdown extends BeanControllerBase {
       this.$watch(
         () => this.value,
         value => {
-          if (!this.editor || this.editor.getMarkdown() === value) return;
-          this._syncing = true;
-          this.editor.commands.setContent(value, { contentType: 'markdown' });
-          this._syncing = false;
+          if (this.sourceMode || !this.editor || this.editor.getMarkdown() === value) return;
+          this._syncEditorValue(value);
         },
       );
       this.$watch(
         () => this.readonly,
         readonly => {
-          this.editor?.setEditable(!readonly);
+          if (readonly && this.sourceMode) this._leaveSourceMode();
+          this.editor?.setEditable(!readonly, false);
           if (readonly) this.closeTablePicker();
           this._refreshToolbarState();
         },

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/component/formFieldMarkdown/render.tsx

@@ -189,123 +189,133 @@ export class RenderFormFieldMarkdown extends BeanRenderBase {
         role="toolbar"
         aria-label={this.scope.locale.MarkdownToolbar()}
       >
-        {this._toolbarButton(':editor:undo', this.scope.locale.Undo(), () => this.undo(), {
-          disabled: !state.canUndo,
-        })}
-        {this._toolbarButton(':editor:redo', this.scope.locale.Redo(), () => this.redo(), {
-          disabled: !state.canRedo,
-        })}
-        <select
-          class="select select-sm select-bordered w-auto min-w-28"
-          aria-label={this.scope.locale.BlockStyle()}
-          value={state.headingLevel ? `heading-${state.headingLevel}` : 'paragraph'}
-          onMousedown={event => {
-            event.stopPropagation();
-          }}
-          onChange={event => {
-            event.stopPropagation();
-            const value = (event.target as HTMLSelectElement).value;
-            if (value === 'paragraph') {
-              this.setParagraph();
-            } else if (value.startsWith('heading-')) {
-              this.setHeading(Number(value.slice('heading-'.length)) as 1 | 2 | 3 | 4 | 5 | 6);
-            }
-          }}
-        >
-          <option value="paragraph">{this.scope.locale.Paragraph()}</option>
-          <option value="heading-1">{this.scope.locale.Heading1()}</option>
-          <option value="heading-2">{this.scope.locale.Heading2()}</option>
-          <option value="heading-3">{this.scope.locale.Heading3()}</option>
-          <option value="heading-4">{this.scope.locale.Heading4()}</option>
-          <option value="heading-5">{this.scope.locale.Heading5()}</option>
-          <option value="heading-6">{this.scope.locale.Heading6()}</option>
-        </select>
-        {this._toolbarButton(
-          ':editor:format-bold',
-          this.scope.locale.Bold(),
-          () => this.toggleBold(),
-          { active: state.bold, disabled: !state.canBold },
-        )}
-        {this._toolbarButton(
-          ':editor:format-italic',
-          this.scope.locale.Italic(),
-          () => this.toggleItalic(),
-          { active: state.italic, disabled: !state.canItalic },
-        )}
-        {this._toolbarButton(
-          ':editor:format-strikethrough',
-          this.scope.locale.Strikethrough(),
-          () => this.toggleStrike(),
-          { active: state.strike, disabled: !state.canStrike },
-        )}
-        {this._toolbarButton(
-          ':editor:code',
-          this.scope.locale.InlineCode(),
-          () => this.toggleCode(),
-          { active: state.code, disabled: !state.canCode },
-        )}
         {this._toolbarButton(
-          ':editor:insert-link-outline',
-          this.scope.locale.Link(),
-          () => {
-            void this.editLink();
-          },
-          { active: state.link, disabled: !state.canLink },
+          ':editor:source-outline',
+          this.scope.locale.SourceMode(),
+          () => this.toggleSourceMode(),
+          { active: this.sourceMode, disabled: !this.editor || imageUploader?.isUploading },
         )}
-        {this._toolbarButton(
-          ':editor:bookmark',
-          this.scope.locale.Highlight(),
-          () => this.toggleHighlight(),
-          { active: state.highlight, disabled: !state.canHighlight },
-        )}
-        {this._toolbarButton(
-          ':editor:format-list-bulleted',
-          this.scope.locale.BulletList(),
-          () => this.toggleBulletList(),
-          { active: state.bulletList, disabled: !state.canBulletList },
-        )}
-        {this._toolbarButton(
-          ':editor:format-list-numbered',
-          this.scope.locale.OrderedList(),
-          () => this.toggleOrderedList(),
-          { active: state.orderedList, disabled: !state.canOrderedList },
-        )}
-        {this._toolbarButton(
-          ':editor:task-alt',
-          this.scope.locale.TaskList(),
-          () => this.toggleTaskList(),
-          { active: state.taskList, disabled: !state.canTaskList },
-        )}
-        {this._toolbarButton(
-          ':editor:format-quote',
-          this.scope.locale.Blockquote(),
-          () => this.toggleBlockquote(),
-          { active: state.blockquote, disabled: !state.canBlockquote },
-        )}
-        {this._toolbarButton(
-          ':editor:code-block',
-          this.scope.locale.CodeBlock(),
-          () => this.toggleCodeBlock(),
-          { active: state.codeBlock, disabled: !state.canCodeBlock },
-        )}
-        {this._toolbarButton(
-          ':editor:horizontal-rule',
-          this.scope.locale.HorizontalRule(),
-          () => this.setHorizontalRule(),
-          { disabled: !state.canHorizontalRule },
+        {!this.sourceMode && (
+          <>
+            {this._toolbarButton(':editor:undo', this.scope.locale.Undo(), () => this.undo(), {
+              disabled: !state.canUndo,
+            })}
+            {this._toolbarButton(':editor:redo', this.scope.locale.Redo(), () => this.redo(), {
+              disabled: !state.canRedo,
+            })}
+            <select
+              class="select select-sm select-bordered w-auto min-w-28"
+              aria-label={this.scope.locale.BlockStyle()}
+              value={state.headingLevel ? `heading-${state.headingLevel}` : 'paragraph'}
+              onMousedown={event => {
+                event.stopPropagation();
+              }}
+              onChange={event => {
+                event.stopPropagation();
+                const value = (event.target as HTMLSelectElement).value;
+                if (value === 'paragraph') {
+                  this.setParagraph();
+                } else if (value.startsWith('heading-')) {
+                  this.setHeading(Number(value.slice('heading-'.length)) as 1 | 2 | 3 | 4 | 5 | 6);
+                }
+              }}
+            >
+              <option value="paragraph">{this.scope.locale.Paragraph()}</option>
+              <option value="heading-1">{this.scope.locale.Heading1()}</option>
+              <option value="heading-2">{this.scope.locale.Heading2()}</option>
+              <option value="heading-3">{this.scope.locale.Heading3()}</option>
+              <option value="heading-4">{this.scope.locale.Heading4()}</option>
+              <option value="heading-5">{this.scope.locale.Heading5()}</option>
+              <option value="heading-6">{this.scope.locale.Heading6()}</option>
+            </select>
+            {this._toolbarButton(
+              ':editor:format-bold',
+              this.scope.locale.Bold(),
+              () => this.toggleBold(),
+              { active: state.bold, disabled: !state.canBold },
+            )}
+            {this._toolbarButton(
+              ':editor:format-italic',
+              this.scope.locale.Italic(),
+              () => this.toggleItalic(),
+              { active: state.italic, disabled: !state.canItalic },
+            )}
+            {this._toolbarButton(
+              ':editor:format-strikethrough',
+              this.scope.locale.Strikethrough(),
+              () => this.toggleStrike(),
+              { active: state.strike, disabled: !state.canStrike },
+            )}
+            {this._toolbarButton(
+              ':editor:code',
+              this.scope.locale.InlineCode(),
+              () => this.toggleCode(),
+              { active: state.code, disabled: !state.canCode },
+            )}
+            {this._toolbarButton(
+              ':editor:insert-link-outline',
+              this.scope.locale.Link(),
+              () => {
+                void this.editLink();
+              },
+              { active: state.link, disabled: !state.canLink },
+            )}
+            {this._toolbarButton(
+              ':editor:bookmark',
+              this.scope.locale.Highlight(),
+              () => this.toggleHighlight(),
+              { active: state.highlight, disabled: !state.canHighlight },
+            )}
+            {this._toolbarButton(
+              ':editor:format-list-bulleted',
+              this.scope.locale.BulletList(),
+              () => this.toggleBulletList(),
+              { active: state.bulletList, disabled: !state.canBulletList },
+            )}
+            {this._toolbarButton(
+              ':editor:format-list-numbered',
+              this.scope.locale.OrderedList(),
+              () => this.toggleOrderedList(),
+              { active: state.orderedList, disabled: !state.canOrderedList },
+            )}
+            {this._toolbarButton(
+              ':editor:task-alt',
+              this.scope.locale.TaskList(),
+              () => this.toggleTaskList(),
+              { active: state.taskList, disabled: !state.canTaskList },
+            )}
+            {this._toolbarButton(
+              ':editor:format-quote',
+              this.scope.locale.Blockquote(),
+              () => this.toggleBlockquote(),
+              { active: state.blockquote, disabled: !state.canBlockquote },
+            )}
+            {this._toolbarButton(
+              ':editor:code-block',
+              this.scope.locale.CodeBlock(),
+              () => this.toggleCodeBlock(),
+              { active: state.codeBlock, disabled: !state.canCodeBlock },
+            )}
+            {this._toolbarButton(
+              ':editor:horizontal-rule',
+              this.scope.locale.HorizontalRule(),
+              () => this.setHorizontalRule(),
+              { disabled: !state.canHorizontalRule },
+            )}
+            {imageUploader &&
+              this._toolbarButton(
+                ':editor:image-outline',
+                this.scope.locale.InsertImage(),
+                () => {
+                  this.beginImageUpload(imageUploader.chooseFiles);
+                },
+                {
+                  disabled: imageUploader.isUploading || imageUploader.policy.pending,
+                },
+              )}
+            {this._renderTablePickerTrigger()}
+          </>
         )}
-        {imageUploader &&
-          this._toolbarButton(
-            ':editor:image-outline',
-            this.scope.locale.InsertImage(),
-            () => {
-              this.beginImageUpload(imageUploader.chooseFiles);
-            },
-            {
-              disabled: imageUploader.isUploading || imageUploader.policy.pending,
-            },
-          )}
-        {this._renderTablePickerTrigger()}
       </div>
     );
   }
@@ -454,7 +464,7 @@ export class RenderFormFieldMarkdown extends BeanRenderBase {
                   !$$formField.field.state.meta.isValid && 'border-error',
                 ]}
                 onClick={() => {
-                  if (!this.readonly) {
+                  if (!this.readonly && !this.sourceMode) {
                     this.editor?.commands.focus();
                   }
                 }}
@@ -476,14 +486,37 @@ export class RenderFormFieldMarkdown extends BeanRenderBase {
                             slotDefault={state => this._renderToolbar(state)}
                           ></ZImageUploader>
                         )}
-                        {!this.readonly && this.editor && this._renderTableToolbar()}
-                        {!this.readonly && this.editor && this._renderCodeBlockToolbar()}
+                        {!this.readonly &&
+                          !this.sourceMode &&
+                          this.editor &&
+                          this._renderTableToolbar()}
+                        {!this.readonly &&
+                          !this.sourceMode &&
+                          this.editor &&
+                          this._renderCodeBlockToolbar()}
                         {this.imageUploadError && (
                           <p class="px-4 pt-3 text-sm text-error" role="alert" aria-live="polite">
                             {this.imageUploadError}
                           </p>
                         )}
-                        <EditorContent editor={this.editor} class={this.cMarkdown} />
+                        <EditorContent
+                          editor={this.editor}
+                          class={this.cMarkdown}
+                          style={{ display: this.sourceMode ? 'none' : undefined }}
+                        />
+                        {this.sourceMode && (
+                          <textarea
+                            class="block min-h-96 w-full resize-y rounded-b-box bg-base-100 p-4 font-mono text-sm text-base-content outline-none"
+                            aria-label={this.scope.locale.MarkdownSource()}
+                            spellcheck={false}
+                            readonly={this.readonly}
+                            value={this.value}
+                            onInput={event => {
+                              this.handleSourceInput((event.target as HTMLTextAreaElement).value);
+                            }}
+                            onBlur={() => this.handleSourceBlur()}
+                          ></textarea>
+                        )}
                       </>
                     ),
                     placeholder: () => <div class="min-h-96 p-4" aria-hidden="true"></div>,

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/config/locale/en-us.ts

@@ -22,6 +22,8 @@ export default {
   Link: 'Link',
   LinkUrl: 'Link URL',
   MarkdownToolbar: 'Markdown toolbar',
+  MarkdownSource: 'Markdown source',
+  SourceMode: 'Source editing mode',
   OrderedList: 'Ordered list',
   Paragraph: 'Paragraph',
   PlainText: 'Plain text',

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/config/locale/zh-cn.ts

@@ -22,6 +22,8 @@ export default {
   Link: '链接',
   LinkUrl: '链接地址',
   MarkdownToolbar: 'Markdown 工具栏',
+  MarkdownSource: 'Markdown 源码',
+  SourceMode: '源码编辑模式',
   OrderedList: '有序列表',
   Paragraph: '段落',
   PlainText: '纯文本',