cabloy 5.1.245 → 5.1.247

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/packages-zova/zova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova",
-  "version": "5.1.177",
+  "version": "5.1.178",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "A vue3 framework with ioc",
   "keywords": [
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "zova-core": "^5.1.95",
-    "zova-suite-a-zova": "^5.1.176"
+    "zova-suite-a-zova": "^5.1.177"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",

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-date/src/component/dateRange/controller.tsx

@@ -21,6 +21,7 @@ export class ControllerDateRange extends BeanControllerBase {
     this.modelValue = this.$useModel('modelValue');
     this.cSeparator = this.$style({
       width: '20px',
+      flexShrink: 0,
       display: 'inline-block',
       textAlign: 'center',
     });
@@ -29,9 +30,9 @@ export class ControllerDateRange extends BeanControllerBase {
   protected render() {
     const [dateStartStr, dateEndStr] = this._parseValue(this.modelValue);
     return (
-      <div>
+      <div class="inline-flex min-w-0 max-w-full items-center">
         <input
-          style={{ width: '130px' }}
+          style={{ width: '130px', minWidth: 0 }}
           type="date"
           value={dateStartStr}
           onInput={e => {
@@ -41,7 +42,7 @@ export class ControllerDateRange extends BeanControllerBase {
         />
         <div class={this.cSeparator}>{this.$props.separator}</div>
         <input
-          style={{ width: '130px' }}
+          style={{ width: '130px', minWidth: 0 }}
           type="date"
           value={dateEndStr}
           onInput={e => {

package/zova/src/suite/cabloy-basic/modules/basic-date/src/component/formFieldDateRange/controller.tsx

@@ -30,7 +30,19 @@ export class ControllerFormFieldDateRange extends BeanControllerBase {
   cContainer: string;
 
   protected async __init__() {
-    this.cContainer = this.$style({ width: 'auto' });
+    this.cContainer = this.$style({
+      width: 'auto',
+      maxWidth: '100%',
+      $nest: {
+        '&.input': {
+          height: 'auto',
+          minHeight: 'var(--size)',
+          flexWrap: 'wrap',
+          paddingTop: '0.5rem',
+          paddingBottom: '0.5rem',
+        },
+      },
+    });
   }
 
   protected render() {

package/zova/src/suite/cabloy-basic/modules/basic-details/src/component/blockTable/controller.tsx

@@ -17,7 +17,7 @@ export interface ControllerBlockTableProps extends IResourceBlockOptionsBase {}
 @Controller()
 export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerBase {
   static $propsDefault = {
-    class: 'overflow-x-auto rounded-box border border-base-content/15 bg-base-100',
+    class: 'min-w-0 rounded-box border border-base-content/15 bg-base-100',
   };
 
   static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };

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>,