cabloy 5.1.141 → 5.1.142

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

@@ -1,10 +1,445 @@
+import type { IIconRecord } from 'zova-module-a-icon';
+import type { IImageUploaderRenderState } from 'zova-module-basic-image';
+
 import { EditorContent } from '@tiptap/vue-3';
 import { BeanRenderBase, ClientOnly } from 'zova';
 import { Render } from 'zova-module-a-bean';
 import { ZFormField } from 'zova-module-a-form';
+import { ZIcon } from 'zova-module-a-icon';
+import { ZImageUploader } from 'zova-module-basic-image';
+
+import { codeBlockLanguages, getCodeBlockLanguage } from '../../lib/codeBlockLanguages.js';
 
 @Render()
 export class RenderFormFieldMarkdown extends BeanRenderBase {
+  private _toolbarButton(
+    name: keyof IIconRecord,
+    label: string,
+    action: () => void,
+    options: { active?: boolean; disabled?: boolean } = {},
+  ) {
+    return (
+      <button
+        type="button"
+        class={['btn btn-ghost btn-sm btn-square', options.active && 'btn-active text-primary']}
+        aria-label={label}
+        title={label}
+        aria-pressed={options.active}
+        disabled={options.disabled}
+        onMousedown={event => {
+          event.preventDefault();
+        }}
+        onClick={event => {
+          event.stopPropagation();
+          action();
+        }}
+      >
+        <ZIcon name={name} width={18} height={18}></ZIcon>
+      </button>
+    );
+  }
+
+  private _renderTablePicker() {
+    if (!this.tablePickerOpen) return null;
+    const { rows, cols } = this.tablePickerPreview;
+    const maxSize = this.tablePickerMaxSize;
+    return (
+      <div
+        id="markdown-table-size-picker"
+        ref={ref => {
+          if (this.ctx.disposed) return;
+          this.setTablePickerRoot?.(ref as HTMLDivElement | null);
+        }}
+        class="absolute right-0 top-full z-20 mt-1 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg"
+        role="dialog"
+        aria-label={this.scope.locale.TableSizePicker()}
+      >
+        <div
+          class="mb-2 text-center text-sm text-base-content/70"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {this.scope.locale.TableSizeStatus()}: {rows} × {cols}
+        </div>
+        <div
+          role="grid"
+          aria-label={this.scope.locale.TableSizePicker()}
+          aria-rowcount={maxSize}
+          aria-colcount={maxSize}
+          class="grid gap-1"
+          style={{ gridTemplateColumns: `repeat(${maxSize}, minmax(1.25rem, 1fr))` }}
+        >
+          {Array.from({ length: maxSize }, (_, rowIndex) =>
+            Array.from({ length: maxSize }, (_, colIndex) => {
+              const row = rowIndex + 1;
+              const col = colIndex + 1;
+              const selected = row <= rows && col <= cols;
+              const active =
+                row === this.tablePickerActive.rows && col === this.tablePickerActive.cols;
+              const label = `${row} × ${col} ${this.scope.locale.TableSizeCell()}`;
+              return (
+                <button
+                  key={`${row}-${col}`}
+                  type="button"
+                  role="gridcell"
+                  data-table-picker-cell={`${row}-${col}`}
+                  aria-label={label}
+                  aria-rowindex={row}
+                  aria-colindex={col}
+                  aria-selected={selected}
+                  tabindex={active ? 0 : -1}
+                  class={[
+                    'h-5 w-5 rounded-sm border border-base-300 p-0 transition-colors',
+                    selected && 'border-primary bg-primary',
+                    !selected && 'bg-base-200 hover:border-primary hover:bg-primary/30',
+                    active && 'outline outline-2 outline-primary outline-offset-1',
+                  ]}
+                  onMousedown={event => {
+                    event.preventDefault();
+                  }}
+                  onPointerenter={() => {
+                    this.setTablePickerPreview(row, col);
+                  }}
+                  onFocus={() => {
+                    this.setTablePickerPreview(row, col);
+                  }}
+                  onClick={event => {
+                    event.stopPropagation();
+                    this.selectTablePickerSize(row, col);
+                  }}
+                ></button>
+              );
+            }),
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  private _renderTablePickerTrigger() {
+    return (
+      <div class="relative">
+        <button
+          type="button"
+          aria-label={this.scope.locale.InsertTable()}
+          title={this.scope.locale.InsertTable()}
+          aria-haspopup="grid"
+          aria-expanded={this.tablePickerOpen}
+          aria-controls="markdown-table-size-picker"
+          disabled={!this.toolbarState.canTable}
+          class="btn btn-ghost btn-sm btn-square"
+          onMousedown={event => {
+            event.preventDefault();
+          }}
+          onClick={event => {
+            event.stopPropagation();
+            this.toggleTablePicker();
+          }}
+          ref={ref => {
+            if (this.ctx.disposed) return;
+            this.setTablePickerTrigger?.(ref as HTMLButtonElement | null);
+          }}
+        >
+          <ZIcon name=":editor:grid-on" width={18} height={18}></ZIcon>
+        </button>
+        {this._renderTablePicker()}
+      </div>
+    );
+  }
+
+  private _renderCodeBlockLanguageSelect() {
+    const state = this.toolbarState;
+    return (
+      <select
+        class="select select-sm select-bordered w-auto min-w-28"
+        aria-label={this.scope.locale.CodeBlockLanguage()}
+        value={getCodeBlockLanguage(state.codeBlockLanguage) ?? ''}
+        onMousedown={event => {
+          event.stopPropagation();
+          this.setCodeBlockToolbarInteracting(true);
+        }}
+        onClick={event => {
+          event.stopPropagation();
+          this.setCodeBlockToolbarInteracting(true);
+        }}
+        onFocus={() => {
+          this.setCodeBlockToolbarInteracting(true);
+        }}
+        onChange={event => {
+          event.stopPropagation();
+          const value = (event.target as HTMLSelectElement).value;
+          this.setCodeBlockLanguage(value || undefined);
+        }}
+      >
+        <option value="">{this.scope.locale.PlainText()}</option>
+        {codeBlockLanguages.map(language => (
+          <option key={language} value={language}>
+            {this.scope.locale[language]()}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  private _renderToolbar(imageUploader?: IImageUploaderRenderState) {
+    const state = this.toolbarState;
+    return (
+      <div
+        class="flex flex-wrap items-center gap-1 border-b border-base-300 p-2"
+        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 },
+        )}
+        {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()}
+      </div>
+    );
+  }
+
+  private _renderCodeBlockToolbar() {
+    const position = this.codeBlockToolbarPosition;
+    return (
+      <div
+        class="pointer-events-none absolute inset-0 z-10"
+        ref={ref => {
+          if (this.ctx.disposed) return;
+          this.setCodeBlockToolbarHost?.(ref as HTMLDivElement | null);
+        }}
+      >
+        {position && (
+          <div
+            class="pointer-events-auto absolute flex items-center rounded-box border border-base-300 bg-base-100 p-1 shadow"
+            onPointerenter={() => {
+              this.setCodeBlockToolbarHovered(true);
+            }}
+            onPointerleave={() => {
+              this.setCodeBlockToolbarHovered(false);
+            }}
+            style={{
+              left: `${position.left}px`,
+              top: `${position.top}px`,
+              transform: 'translate(-50%, -100%)',
+            }}
+            role="toolbar"
+            aria-label={this.scope.locale.CodeBlockLanguage()}
+            onFocus={() => {
+              this.setCodeBlockToolbarFocused(true);
+            }}
+            onBlur={event => {
+              const nextTarget = event.relatedTarget;
+              const currentTarget = event.currentTarget as HTMLElement;
+              if (!(nextTarget instanceof Node) || !currentTarget.contains(nextTarget)) {
+                this.setCodeBlockToolbarFocused(false);
+              }
+            }}
+          >
+            {this._renderCodeBlockLanguageSelect()}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  private _renderTableToolbar() {
+    const position = this.tableToolbarPosition;
+    const state = this.toolbarState;
+    return (
+      <div
+        class="pointer-events-none absolute inset-0 z-10"
+        ref={ref => {
+          if (this.ctx.disposed) return;
+          this.setTableToolbarHost?.(ref as HTMLDivElement | null);
+        }}
+      >
+        {position && (
+          <div
+            class="pointer-events-auto absolute flex flex-wrap items-center gap-1 rounded-box border border-base-300 bg-base-100 p-1 shadow"
+            style={{
+              left: `${position.left}px`,
+              top: `${position.top}px`,
+              transform: 'translate(-50%, -100%)',
+            }}
+            role="toolbar"
+            aria-label={this.scope.locale.TableToolbar()}
+            onFocus={() => {
+              this.setTableToolbarFocused(true);
+            }}
+            onBlur={event => {
+              const nextTarget = event.relatedTarget;
+              const currentTarget = event.currentTarget as HTMLElement;
+              if (!(nextTarget instanceof Node) || !currentTarget.contains(nextTarget)) {
+                this.setTableToolbarFocused(false);
+              }
+            }}
+          >
+            {this._toolbarButton(
+              ':editor:add-box',
+              this.scope.locale.AddRowBefore(),
+              () => this.addTableRowBefore(),
+              { disabled: !state.canAddTableRowBefore },
+            )}
+            {this._toolbarButton(
+              ':editor:add-box-outline',
+              this.scope.locale.AddRowAfter(),
+              () => this.addTableRowAfter(),
+              { disabled: !state.canAddTableRowAfter },
+            )}
+            {this._toolbarButton(
+              ':editor:horizontal-rule',
+              this.scope.locale.DeleteRow(),
+              () => this.deleteTableRow(),
+              {
+                disabled: !state.canDeleteTableRow,
+              },
+            )}
+            {this._toolbarButton(
+              ':editor:add-box',
+              this.scope.locale.AddColumnBefore(),
+              () => this.addTableColumnBefore(),
+              { disabled: !state.canAddTableColumnBefore },
+            )}
+            {this._toolbarButton(
+              ':editor:add-box-outline',
+              this.scope.locale.AddColumnAfter(),
+              () => this.addTableColumnAfter(),
+              { disabled: !state.canAddTableColumnAfter },
+            )}
+            {this._toolbarButton(
+              '::delete',
+              this.scope.locale.DeleteColumn(),
+              () => this.deleteTableColumn(),
+              {
+                disabled: !state.canDeleteTableColumn,
+              },
+            )}
+            {this._toolbarButton(
+              '::delete-forever',
+              this.scope.locale.DeleteTable(),
+              () => this.deleteTable(),
+              {
+                disabled: !state.canDeleteTable,
+              },
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   public render() {
     return (
       <ZFormField
@@ -15,7 +450,7 @@ export class RenderFormFieldMarkdown extends BeanRenderBase {
             <div class={props.class}>
               <div
                 class={[
-                  'rounded-box border border-base-300 bg-base-100',
+                  'relative rounded-box border border-base-300 bg-base-100',
                   !$$formField.field.state.meta.isValid && 'border-error',
                 ]}
                 onClick={() => {
@@ -26,7 +461,31 @@ export class RenderFormFieldMarkdown extends BeanRenderBase {
               >
                 <ClientOnly
                   v-slots={{
-                    default: () => <EditorContent editor={this.editor} class={this.cMarkdown} />,
+                    default: () => (
+                      <>
+                        {!this.readonly && (
+                          <ZImageUploader
+                            imageScene={this.imageScene}
+                            multiple={false}
+                            onUploaded={result => {
+                              this.handleImageUploaded(result);
+                            }}
+                            onError={error => {
+                              this.handleImageUploadError(error);
+                            }}
+                            slotDefault={state => this._renderToolbar(state)}
+                          ></ZImageUploader>
+                        )}
+                        {!this.readonly && this.editor && this._renderTableToolbar()}
+                        {!this.readonly && 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} />
+                      </>
+                    ),
                     placeholder: () => <div class="min-h-96 p-4" aria-hidden="true"></div>,
                   }}
                 ></ClientOnly>

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

@@ -0,0 +1,59 @@
+export default {
+  BlockStyle: 'Block style',
+  Blockquote: 'Blockquote',
+  Bold: 'Bold',
+  BulletList: 'Bullet list',
+  CodeBlock: 'Code block',
+  CodeBlockLanguage: 'Code block language',
+  Heading1: 'Heading 1',
+  Heading2: 'Heading 2',
+  Heading3: 'Heading 3',
+  Heading4: 'Heading 4',
+  Heading5: 'Heading 5',
+  Heading6: 'Heading 6',
+  Highlight: 'Highlight',
+  HorizontalRule: 'Horizontal rule',
+  InlineCode: 'Inline code',
+  ImageUploadFailed: 'Image upload failed',
+  ImageUploadInvalidUrl: 'The uploaded image does not have a usable URL',
+  InsertImage: 'Upload image',
+  InsertTable: 'Insert table',
+  Italic: 'Italic',
+  Link: 'Link',
+  LinkUrl: 'Link URL',
+  MarkdownToolbar: 'Markdown toolbar',
+  OrderedList: 'Ordered list',
+  Paragraph: 'Paragraph',
+  PlainText: 'Plain text',
+  bash: 'Bash',
+  css: 'CSS',
+  cpp: 'C++',
+  csharp: 'C#',
+  go: 'Go',
+  html: 'HTML',
+  java: 'Java',
+  javascript: 'JavaScript',
+  json: 'JSON',
+  markdown: 'Markdown',
+  php: 'PHP',
+  python: 'Python',
+  rust: 'Rust',
+  shell: 'Shell',
+  sql: 'SQL',
+  typescript: 'TypeScript',
+  Redo: 'Redo',
+  Strikethrough: 'Strikethrough',
+  TaskList: 'Task list',
+  TableToolbar: 'Table toolbar',
+  TableSizePicker: 'Table size',
+  TableSizeStatus: 'Selected table size',
+  TableSizeCell: 'table',
+  AddRowBefore: 'Add row before',
+  AddRowAfter: 'Add row after',
+  DeleteRow: 'Delete row',
+  AddColumnBefore: 'Add column before',
+  AddColumnAfter: 'Add column after',
+  DeleteColumn: 'Delete column',
+  DeleteTable: 'Delete table',
+  Undo: 'Undo',
+};

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

@@ -0,0 +1,59 @@
+export default {
+  BlockStyle: '段落样式',
+  Blockquote: '引用',
+  Bold: '加粗',
+  BulletList: '无序列表',
+  CodeBlock: '代码块',
+  CodeBlockLanguage: '代码块语言',
+  Heading1: '一级标题',
+  Heading2: '二级标题',
+  Heading3: '三级标题',
+  Heading4: '四级标题',
+  Heading5: '五级标题',
+  Heading6: '六级标题',
+  Highlight: '高亮',
+  HorizontalRule: '分隔线',
+  InlineCode: '行内代码',
+  ImageUploadFailed: '图片上传失败',
+  ImageUploadInvalidUrl: '上传的图片没有可用的地址',
+  InsertImage: '上传图片',
+  InsertTable: '插入表格',
+  Italic: '斜体',
+  Link: '链接',
+  LinkUrl: '链接地址',
+  MarkdownToolbar: 'Markdown 工具栏',
+  OrderedList: '有序列表',
+  Paragraph: '段落',
+  PlainText: '纯文本',
+  bash: 'Bash',
+  css: 'CSS',
+  cpp: 'C++',
+  csharp: 'C#',
+  go: 'Go',
+  html: 'HTML',
+  java: 'Java',
+  javascript: 'JavaScript',
+  json: 'JSON',
+  markdown: 'Markdown',
+  php: 'PHP',
+  python: 'Python',
+  rust: 'Rust',
+  shell: 'Shell',
+  sql: 'SQL',
+  typescript: 'TypeScript',
+  Redo: '重做',
+  Strikethrough: '删除线',
+  TaskList: '任务列表',
+  TableToolbar: '表格工具栏',
+  TableSizePicker: '表格大小',
+  TableSizeStatus: '当前表格大小',
+  TableSizeCell: '表格',
+  AddRowBefore: '在上方插入行',
+  AddRowAfter: '在下方插入行',
+  DeleteRow: '删除行',
+  AddColumnBefore: '在左侧插入列',
+  AddColumnAfter: '在右侧插入列',
+  DeleteColumn: '删除列',
+  DeleteTable: '删除表格',
+  Undo: '撤销',
+};

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/index.ts

@@ -1 +1,2 @@
+export * from './.metadata/locales.js';
 export * from './.metadata/index.js';

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/lib/codeBlockLanguages.ts

@@ -0,0 +1,42 @@
+export const codeBlockLanguages = [
+  'bash',
+  'css',
+  'cpp',
+  'csharp',
+  'go',
+  'html',
+  'java',
+  'javascript',
+  'json',
+  'markdown',
+  'php',
+  'python',
+  'rust',
+  'shell',
+  'sql',
+  'typescript',
+] as const;
+
+export type CodeBlockLanguage = (typeof codeBlockLanguages)[number];
+
+const codeBlockLanguageAliases: Record<string, CodeBlockLanguage> = {
+  js: 'javascript',
+  sh: 'shell',
+  ts: 'typescript',
+};
+
+export function getCodeBlockLanguage(
+  language: string | null | undefined,
+): CodeBlockLanguage | undefined {
+  if (!language) return undefined;
+  if ((codeBlockLanguages as readonly string[]).includes(language)) {
+    return language as CodeBlockLanguage;
+  }
+  return codeBlockLanguageAliases[language];
+}
+
+export function isCodeBlockLanguage(
+  language: string | null | undefined,
+): language is CodeBlockLanguage {
+  return !!getCodeBlockLanguage(language);
+}

package/zova/src/suite/cabloy-basic/modules/basic-markdown/src/lib/richTextContentStyle.ts

@@ -95,9 +95,29 @@ export function richTextContentStyle(): NestedCSSProperties {
       '& pre code': {
         background: 'transparent',
         borderRadius: 0,
+        display: 'block',
         fontSize: '0.875rem',
         padding: 0,
       },
+      '& pre code .hljs-comment, & pre code .hljs-quote': {
+        color: 'color-mix(in srgb, var(--color-base-content) 55%, transparent)',
+        fontStyle: 'italic',
+      },
+      '& pre code .hljs-keyword, & pre code .hljs-selector-tag, & pre code .hljs-type': {
+        color: 'var(--color-secondary)',
+      },
+      '& pre code .hljs-string, & pre code .hljs-attr, & pre code .hljs-template-variable': {
+        color: 'var(--color-success)',
+      },
+      '& pre code .hljs-number, & pre code .hljs-literal, & pre code .hljs-built_in': {
+        color: 'var(--color-info)',
+      },
+      '& pre code .hljs-title, & pre code .hljs-function, & pre code .hljs-variable': {
+        color: 'var(--color-primary)',
+      },
+      '& pre code .hljs-meta, & pre code .hljs-symbol, & pre code .hljs-params': {
+        color: 'var(--color-warning)',
+      },
       '& mark': {
         background: 'color-mix(in srgb, var(--color-primary) 30%, transparent)',
         borderRadius: '0.125rem',