From 815b1759c795596d30ed74437bd6b8fb1ded2eef Mon Sep 17 00:00:00 2001 From: GreatZP Date: Sun, 3 Sep 2023 14:15:11 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix(pagination):=20=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E9=A1=B5=E7=A0=81=E5=90=8E=E4=B8=8B=E6=8B=89=E4=B8=8D=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E6=94=B6=E8=B5=B7=E7=AD=89=E9=97=AE=E9=A2=98=20(#1718?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pagination/src/components/config-menu.tsx | 2 +- .../pagination/src/components/jump-page.tsx | 11 ++++++++-- .../pagination/src/components/page-nums.tsx | 2 +- .../pagination/src/components/page-size.tsx | 15 ++++++++----- .../devui/pagination/src/pagination-types.ts | 22 +++++-------------- .../devui/pagination/src/pagination.scss | 8 ++++++- .../devui/pagination/src/pagination.tsx | 13 ++++++----- .../docs/components/pagination/index.md | 21 +++++------------- 8 files changed, 44 insertions(+), 50 deletions(-) diff --git a/packages/devui-vue/devui/pagination/src/components/config-menu.tsx b/packages/devui-vue/devui/pagination/src/components/config-menu.tsx index f2ef9bca00..490d2e4964 100644 --- a/packages/devui-vue/devui/pagination/src/components/config-menu.tsx +++ b/packages/devui-vue/devui/pagination/src/components/config-menu.tsx @@ -1,7 +1,7 @@ import { defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'; import { on, off } from '../../../shared/devui-directive/utils'; import clickoutsideDirective from '../../../shared/devui-directive/clickoutside'; -import { useNamespace } from '../../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; export default defineComponent({ directives: { diff --git a/packages/devui-vue/devui/pagination/src/components/jump-page.tsx b/packages/devui-vue/devui/pagination/src/components/jump-page.tsx index 13d9b16932..b33a8dfad5 100644 --- a/packages/devui-vue/devui/pagination/src/components/jump-page.tsx +++ b/packages/devui-vue/devui/pagination/src/components/jump-page.tsx @@ -1,5 +1,5 @@ import { defineComponent, PropType, ref, watch, toRefs, ExtractPropTypes } from 'vue'; -import { useNamespace } from '../../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; const jumpPageProps = { goToText: String, @@ -42,9 +42,16 @@ export default defineComponent({ }; // 跳转指定页码 const jump = (e: KeyboardEvent | 'btn') => { + if (isNaN(curPage)) { + curPage = 1; + } if (curPage > totalPages?.value) { - return; + curPage = totalPages?.value; + } + if (curPage < 1) { + curPage = 1; } + if ((e === 'btn' || e.key === 'Enter') && cursor?.value !== curPage) { emit('changeCursorEmit', curPage); } diff --git a/packages/devui-vue/devui/pagination/src/components/page-nums.tsx b/packages/devui-vue/devui/pagination/src/components/page-nums.tsx index fd71c8ab58..259c6a663a 100644 --- a/packages/devui-vue/devui/pagination/src/components/page-nums.tsx +++ b/packages/devui-vue/devui/pagination/src/components/page-nums.tsx @@ -1,6 +1,6 @@ import { defineComponent, PropType, computed, ExtractPropTypes } from 'vue'; import { handlePages } from '../utils'; -import { useNamespace } from '../../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; import { PreLinkIcon, NextLinkIcon } from '../components/page-link-icons'; const pageNumBtnProps = { diff --git a/packages/devui-vue/devui/pagination/src/components/page-size.tsx b/packages/devui-vue/devui/pagination/src/components/page-size.tsx index 67d28ed41f..09ccf49960 100644 --- a/packages/devui-vue/devui/pagination/src/components/page-size.tsx +++ b/packages/devui-vue/devui/pagination/src/components/page-size.tsx @@ -1,7 +1,7 @@ import { defineComponent, inject, withModifiers, ref } from 'vue'; -import { Icon } from '../../../icon'; +import { Icon } from '@devui/shared/components/icon'; import { Dropdown } from '../../../dropdown'; -import { useNamespace } from '../../../shared/hooks/use-namespace'; +import { useNamespace } from '@devui/shared/utils'; import { paginationInjectionKey, IPagination } from '../pagination-types'; export default defineComponent({ @@ -9,14 +9,14 @@ export default defineComponent({ const ns = useNamespace('pagination'); const paginationContext = inject(paginationInjectionKey) as IPagination; const iconRotate = ref(0); - const { size, currentPageSize, pageSizeOptions, pageSizeChange, t } = paginationContext; + const { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t } = paginationContext; const onDropdownToggle = (e: boolean) => { iconRotate.value = e ? 180 : 0; }; return () => ( <> - + {{ default: () => (
@@ -28,8 +28,11 @@ export default defineComponent({ menu: () => (
    {pageSizeOptions.value.map((item, index) => ( -
  • { + pageSizeChange(item); + }} key={index}> {item}
    • diff --git a/packages/devui-vue/devui/pagination/src/pagination-types.ts b/packages/devui-vue/devui/pagination/src/pagination-types.ts index 34fc63168c..63e0e6ba73 100644 --- a/packages/devui-vue/devui/pagination/src/pagination-types.ts +++ b/packages/devui-vue/devui/pagination/src/pagination-types.ts @@ -1,19 +1,6 @@ import type { PropType, ExtractPropTypes, InjectionKey, Ref, WritableComputedRef } from 'vue'; -type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; - -interface ConnectedPosition { - originX: 'start' | 'center' | 'end'; - originY: 'top' | 'center' | 'bottom'; - - overlayX: 'start' | 'center' | 'end'; - overlayY: 'top' | 'center' | 'bottom'; - - weight?: number; - offsetX?: number; - offsetY?: number; - panelClass?: string | string[]; -} +export type PageSizeDirection = 'bottom' | 'top' | 'left' | 'right'; type Size = 'lg' | '' | 'sm'; @@ -31,8 +18,8 @@ export const paginationProps = { default: () => [5, 10, 20, 50], }, pageSizeDirection: { - type: Array as PropType>, - default: () => ['centerDown', 'centerUp'], + type: Array as PropType>, + default: () => ['bottom', 'top'], }, pageIndex: { type: Number, @@ -121,7 +108,8 @@ export interface IPagination { size: Ref; currentPageSize: WritableComputedRef; pageSizeOptions: Ref; - pageSizeChange: (val: Record) => void; + pageSizeDirection: Ref; + pageSizeChange: (val: number) => void; t: (path: string) => void; } diff --git a/packages/devui-vue/devui/pagination/src/pagination.scss b/packages/devui-vue/devui/pagination/src/pagination.scss index efc9067e8b..aead5d84ef 100644 --- a/packages/devui-vue/devui/pagination/src/pagination.scss +++ b/packages/devui-vue/devui/pagination/src/pagination.scss @@ -41,6 +41,11 @@ &.#{$devui-prefix}-pagination__size--lg { height: 46px; } + + & > .#{$devui-prefix}-icon__container { + display: flex; + align-items: center; + } } .#{$devui-prefix}-pagination__total-size { @@ -384,7 +389,8 @@ text-overflow: ellipsis; white-space: nowrap; cursor: pointer; - transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, + transition: + color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth; &:hover:not(.active) { diff --git a/packages/devui-vue/devui/pagination/src/pagination.tsx b/packages/devui-vue/devui/pagination/src/pagination.tsx index 83cea145a6..3cf03e038d 100644 --- a/packages/devui-vue/devui/pagination/src/pagination.tsx +++ b/packages/devui-vue/devui/pagination/src/pagination.tsx @@ -6,8 +6,8 @@ import ConfigMenu from './components/config-menu'; import JumpPage from './components/jump-page'; import PageNumBtn from './components/page-nums'; import PageSize from './components/page-size'; -import { useNamespace } from '../../shared/hooks/use-namespace'; -import { createI18nTranslate } from '../../locale/create'; +import { useNamespace } from '@devui/shared/utils'; +import { createI18nTranslate } from '@devui/shared/components/locale/create'; import './pagination.scss'; export default defineComponent({ @@ -26,6 +26,7 @@ export default defineComponent({ const { autoHide, pageSizeOptions, + pageSizeDirection, total, canChangePageSize, lite, @@ -82,8 +83,8 @@ export default defineComponent({ }; // 每页条数改变 - const pageSizeChange = (val: Record) => { - currentPageSize.value = val.value as number; + const pageSizeChange = (val: number) => { + currentPageSize.value = val as number; // 页数改变后，如果当前页码超出最大页码时修正 if (props.autoFixPageIndex) { nextTick(() => { @@ -92,7 +93,7 @@ export default defineComponent({ } }); } - emit('pageSizeChange', val.value as number); + emit('pageSizeChange', val); }; // 极简模式下的跳转页码 @@ -100,7 +101,7 @@ export default defineComponent({ changeCursorEmit(page.value); }; - provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeChange, t }); + provide(paginationInjectionKey, { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t }); return () => // autoHide 为 true，并且 pageSizeOptions 最小值大于 total，则不展示分页 diff --git a/packages/devui-vue/docs/components/pagination/index.md b/packages/devui-vue/docs/components/pagination/index.md index ce81880775..ce3a9e9c0e 100644 --- a/packages/devui-vue/docs/components/pagination/index.md +++ b/packages/devui-vue/docs/components/pagination/index.md @@ -243,7 +243,7 @@ export default defineComponent({ @page-index-change="pageIndexChangeWithoutFix" @page-size-change="pageSizeChangeWithoutFix" :page-size-options="pager.pageSizeOptions" - :page-size-direction="['centerUp']" + :page-size-direction="['right']" /> diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md index 9c00a8e3a0..0b1cc34ac7 100644 --- a/packages/devui-vue/docs/components/editor-md/index.md +++ b/packages/devui-vue/docs/components/editor-md/index.md @@ -225,6 +225,13 @@ export default defineComponent({ ::: +### checkbox 渲染 + +:::demo 通过配置md-plugins checkbox插件，进行checkbox渲染于checked变更响应。 + +editor-md/checkbox +::: + ### EditorMd 参数 | 参数名 | 类型 | 默认值 | 说明 | @@ -234,6 +241,7 @@ export default defineComponent({ | base-url | `string` | -- | 设置渲染到 html 时，为相对 url 添加的 baseUrl | | custom-parse | `(html: string) => string` | -- | 自定义对渲染后的 html 处理，需要接收渲染后的 html，返回自定义处理后的 html | | md-rules | `object` | {} | 设置 markdown 对字符串的处理方式， 可参考[markdown-it](https://www.npmjs.com/package/markdown-it?activeTab=readme) | +| md-plugins | [MdPlugin[]](#mdplugin) | -- | 设置 markdown-it 插件 | | mode | `'editonly' \| 'readonly' \| 'normal'` | 'normal' | 只写/只读/双栏显示模式选择，默认 'normal' 双栏模式显示 | | custom-renderer-rules | [ICustomRenderRule[]](#icustomrenderrule) | [] | 自定义 markdown 对节点的渲染方式，每条规则需要指定对应节点 key,并自定义渲染函数 | | custom-xss-rules | [ICustomXssRule[]](#icustomxssrule) | [] | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组 | @@ -249,6 +257,7 @@ export default defineComponent({ | content-change | `Function(content: string)` | 编辑器内容改变事件，返回当前内容 | | | preview-content-change | `Function()` | 预览内容改变时触发 | | | image-upload | `Function({file, callback})` | 打开图片上传开关后，图片上传事件回调，返回文件内容与 callback 函数 | | +| checked-change | `Function(content: string)` | plugins添加checkbox后，预览checkbox checked状态改变回调 | | ### MdRender 参数 @@ -265,6 +274,7 @@ export default defineComponent({ | 事件名 | 回调参数 | 说明 | 跳转 Demo | | :--------------- | :----------------- | :----------------------------------------- | :-------- | | md-render-change | `Function(string)` | 内容改变时触发，返回对应 html 渲染结果字段 | | +| checked-change | `Function(content: string)` | plugins添加checkbox后，预览checkbox checked状态改变回调 | | #### ICustomRenderRule @@ -283,3 +293,12 @@ interface ICustomXssRule { value: string[]; } ``` + +#### MdPlugin + +```ts +export interface MdPlugin { + plugin: any; + opts?: Object; +} +``` diff --git a/packages/devui-vue/docs/vite.config.ts b/packages/devui-vue/docs/vite.config.ts index a9571de51c..b0699d4e2f 100644 --- a/packages/devui-vue/docs/vite.config.ts +++ b/packages/devui-vue/docs/vite.config.ts @@ -9,7 +9,8 @@ export default defineConfig({ alias: [ { find: '@devui/theme', replacement: resolve(__dirname, '../../devui-theme/src') }, { find: '@devui/shared/components', replacement: resolve(__dirname, '../devui') }, - { find: '@devui', replacement: resolve(__dirname, '../devui') } + { find: '@devui', replacement: resolve(__dirname, '../devui') }, + { find: 'vue-devui', replacement: resolve(__dirname, '../devui') }, ], }, plugins: [vueJsx({}), svgLoader(), MdTransformer()], From a1cc3dbcdac6d8566452e93993fe390473f79dfd Mon Sep 17 00:00:00 2001 From: GreatZP Date: Mon, 4 Sep 2023 17:08:01 +0800 Subject: [PATCH 3/6] feat(editor-md): feat hintConfig to config quick hint (#1726) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(editor-md): feat hintConfig to configquick hint * fix: 检视意见修改 --- .../src/composables/use-editor-md.ts | 101 ++++++++++++-- .../devui/editor-md/src/editor-md-types.ts | 7 +- .../devui/editor-md/src/editor-md.tsx | 12 ++ .../flexible-overlay/use-flexible-overlay.ts | 3 + .../docs/components/editor-md/checkbox.vue | 2 +- .../docs/components/editor-md/index.md | 127 ++++++++++++++++++ 6 files changed, 238 insertions(+), 14 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index 4720e995f4..ae121be987 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -5,6 +5,7 @@ import { EditorMdProps, Mode } from '../editor-md-types'; import { DEFAULT_TOOLBARS } from '../toolbar-config'; import { parseHTMLStringToDomList } from '../utils'; import { refreshEditorCursor, _enforceMaxLength } from './helper'; +import { throttle } from 'lodash'; export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { const { @@ -24,17 +25,22 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { const toolbars = reactive(cloneDeep(DEFAULT_TOOLBARS)); const editorRef = ref(); const renderRef = ref(); + const overlayRef = ref(); + const cursorRef = ref(); + const isHintShow = ref(); const previewHtmlList: Ref = ref([]); let editorIns: any; - const hintShow = false; - const isHintLoading = false; let canPreviewScrollView = false; - const hintList: any[] = []; + + /* 快速提示 */ + let hintList: any[] = []; let activeIndex = -1; let cursorHint = ''; let cursorHintEnd = -1; let cursorHintStart = -1; let prefix: any; + let hintShow = false; + let CodeMirror: any; const prefixes = computed(() => { const result: string[] = []; @@ -144,6 +150,53 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { activeIndex = -1; }; + let timer: any; + const attachOverlay = () => { + timer = setTimeout(() => { + cursorRef.value = editorRef.value?.parentNode.querySelector('.CodeMirror-cursor') || undefined; + overlayRef.value.updatePosition(); + isHintShow.value = true; + hintShow = true; + }); + }; + + const hideHint = () => { + clearTimeout(timer); + isHintShow.value = false; + }; + + const showHint = () => { + if (hintShow) { + hideHint(); + } + attachOverlay(); + }; + + const getHintList = () => { + let handler; + if (typeof hintConfig.value[prefix] === 'function') { + handler = hintConfig.value[prefix]; + } else if (hintConfig.value[prefix] && typeof hintConfig.value[prefix].handler === 'function') { + handler = hintConfig.value[prefix].handler; + } + + const callback = (replaceText: string) => { + const cursor = editorIns.getCursor(); + const endCh = cursorHintEnd; + const startCh = cursorHintStart; + if (editorIns.getLine(cursor.line).length === cursor.ch) { + editorIns.replaceRange(replaceText + ' ', { line: cursor.line, ch: startCh }, { line: cursor.line, ch: endCh }); + } else { + editorIns.replaceRange(replaceText, { line: cursor.line, ch: startCh }, { line: cursor.line, ch: endCh }); + editorIns.setCursor(cursor.line, editorIns.getCursor().ch + 1); + } + editorIns.focus(); + hideHint(); + }; + + handler && handler({ prefix, cursorHint, callback }); + }; + const cursorActivityHandler = () => { const cursor = editorIns.getCursor(); let i = prefixes.value.length; @@ -153,18 +206,18 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { if (selection) { return; } - let prefix = ''; + let nowPrefix = ''; let hint = ''; while (i >= 1) { i--; - prefix = prefixes.value[i]; - const startPos = value.lastIndexOf(prefix, cursor.ch); + nowPrefix = prefixes.value[i]; + const startPos = value.lastIndexOf(nowPrefix, cursor.ch); const endPos = value.indexOf(' ', cursor.ch) > -1 ? value.indexOf(' ', cursor.ch) : value.length; hint = value.slice(startPos, cursor.ch); if ( (startPos > 0 && value[startPos - 1] !== ' ') || startPos < 0 || - !hint.includes(prefix) || + !hint.includes(nowPrefix) || hint.endsWith(' ') || isImgRegx.test(hint) ) { @@ -179,10 +232,20 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { break; } } - // todo - // if (cursorHintStart > -1 && hint[0]) { - // currentHintConfig - // } + if (cursorHintStart > -1 && hint[0]) { + const spacePosition = value.lastIndexOf(' ', cursor.ch); + if (spacePosition > cursorHintStart) { + return; + } + /* cursor元素将动态变更，设置settimeout保持其可以获取到值 */ + setTimeout(() => { + showHint(); + getHintList(); + }); + } else { + hintList = []; + hideHint(); + } }; const onChange = debounce( @@ -228,9 +291,20 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { } } - editorIns.setOption('extraKeys', shortKeys); + editorIns.setOption( + 'extraKeys', + Object.assign({ + Esc: () => { + hideHint(); + }, + }), + shortKeys + ); editorIns.on('beforeChange', _enforceMaxLength); + + editorIns.on('cursorActivity', throttle(cursorActivityHandler, ((hintConfig.value && hintConfig.value.throttleTime) as number) || 300)); + editorIns.setSize('auto', '100%'); refreshEditorCursor(); editorIns.setCursor(editorIns.lineCount(), 0); @@ -322,9 +396,12 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { return { editorRef, + overlayRef, + cursorRef, renderRef, toolbars, previewHtmlList, + isHintShow, getEditorIns, onPaste, previewContentChange, diff --git a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts index 6ad5851771..1774cbd148 100644 --- a/packages/devui-vue/devui/editor-md/src/editor-md-types.ts +++ b/packages/devui-vue/devui/editor-md/src/editor-md-types.ts @@ -63,6 +63,10 @@ const commonProps = { }, }; +export interface HintConfigItem { + handler: (objs: { callback: (replaceText: string) => void; cursorHint: string; prefix: string }) => void; +} + export const editorMdProps = { ...commonProps, modelValue: { @@ -115,7 +119,8 @@ export const editorMdProps = { default: 10, }, hintConfig: { - type: Object as PropType>, + type: Object as PropType>, + default: {}, }, customHintReplaceFn: { type: Function as PropType<(prefix: string, row: any) => string>, diff --git a/packages/devui-vue/devui/editor-md/src/editor-md.tsx b/packages/devui-vue/devui/editor-md/src/editor-md.tsx index 0b610f4d1d..68fbdd1470 100644 --- a/packages/devui-vue/devui/editor-md/src/editor-md.tsx +++ b/packages/devui-vue/devui/editor-md/src/editor-md.tsx @@ -7,6 +7,7 @@ import Toolbar from './components/toolbar'; import MdRender from './components/md-render'; import { locale } from './utils'; import './editor-md.scss'; +import { FlexibleOverlay } from '../../overlay'; export default defineComponent({ name: 'DEditorMd', @@ -36,7 +37,10 @@ export default defineComponent({ const { editorRef, + overlayRef, + cursorRef, renderRef, + isHintShow, toolbars, previewHtmlList, onPaste, @@ -76,6 +80,14 @@ export default defineComponent({ + + {ctx.slots?.hintTemplate?.()} + {Boolean(maxlength?.value) && (
    {modelValue.value.length || 0}/{maxlength.value} diff --git a/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts b/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts index 594b7aa7dc..79c8e66d6c 100644 --- a/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts +++ b/packages/devui-vue/devui/overlay/src/flexible-overlay/use-flexible-overlay.ts @@ -57,6 +57,9 @@ export function useOverlay(props: FlexibleOverlayProps, emit: EmitEventFn): UseO ]; props.showArrow && middleware.push(arrow({ element: arrowEl })); props.shiftOffset !== undefined && middleware.push(shift()); + if (!overlayEl) { + return; + } const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, { strategy: 'fixed', middleware, diff --git a/packages/devui-vue/docs/components/editor-md/checkbox.vue b/packages/devui-vue/docs/components/editor-md/checkbox.vue index d918199632..5b92d34be4 100644 --- a/packages/devui-vue/docs/components/editor-md/checkbox.vue +++ b/packages/devui-vue/docs/components/editor-md/checkbox.vue @@ -20,7 +20,7 @@ import { reactive, ref } from 'vue'; // import { checkbox } from 'vue-devui/editor-md'; // demo无法进行import，使用时请放开注释 -const content = ref('- [x] checked \n - [ ] unchecked'); +const content = ref('- [x] checked \n - [ ] unchecked // demo无法进行import，使用时请放开代码中注释'); const mdRules = reactive({ linkify: { fuzzyLink: false, diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md index 0b1cc34ac7..7548f35ee5 100644 --- a/packages/devui-vue/docs/components/editor-md/index.md +++ b/packages/devui-vue/docs/components/editor-md/index.md @@ -232,6 +232,120 @@ export default defineComponent({ editor-md/checkbox ::: +### 配置快速提示 + +:::demo 设置 hintConfig 后，可用于支持@选择用户等场景。 + +```vue + + + + +``` + +::: + ### EditorMd 参数 | 参数名 | 类型 | 默认值 | 说明 | @@ -242,6 +356,7 @@ editor-md/checkbox | custom-parse | `(html: string) => string` | -- | 自定义对渲染后的 html 处理，需要接收渲染后的 html，返回自定义处理后的 html | | md-rules | `object` | {} | 设置 markdown 对字符串的处理方式， 可参考[markdown-it](https://www.npmjs.com/package/markdown-it?activeTab=readme) | | md-plugins | [MdPlugin[]](#mdplugin) | -- | 设置 markdown-it 插件 | +| hintConfig | [MdHintConfig[]](#hintconfig) | -- | 设置 快速提示 配置 | | mode | `'editonly' \| 'readonly' \| 'normal'` | 'normal' | 只写/只读/双栏显示模式选择，默认 'normal' 双栏模式显示 | | custom-renderer-rules | [ICustomRenderRule[]](#icustomrenderrule) | [] | 自定义 markdown 对节点的渲染方式，每条规则需要指定对应节点 key,并自定义渲染函数 | | custom-xss-rules | [ICustomXssRule[]](#icustomxssrule) | [] | 自定义 xss 对某种 tag 的过滤方式，每条规则需要指定 tag, 并给出需要加入白名单的属性数组 | @@ -302,3 +417,15 @@ export interface MdPlugin { opts?: Object; } ``` + +#### HintConfig + +```ts +export interface HintConfigItem { + handler: (obj: { callback: (replaceText: string) => void; cursorHint: string; prefix: string }) => void; +} +export interface HintConfig { + throttleTime: number; // 触发提示事件debounceTime(ms)，默认300 + [key: string]: HintConfigItem; // key为触发提示前缀配置 +} +``` From 234be391a82d321abcab8cff362c7f3815f9bb38 Mon Sep 17 00:00:00 2001 From: GreatZP Date: Mon, 4 Sep 2023 19:59:13 +0800 Subject: [PATCH 4/6] fix(editor-md): tooltip position when fullscreen (#1727) --- .../devui/editor-md/src/components/toolbar-item.tsx | 11 +++++++---- packages/devui-vue/devui/fullscreen/index.ts | 2 +- packages/devui-vue/docs/components/editor-md/index.md | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx b/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx index cf25958604..442608aaa2 100644 --- a/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx +++ b/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx @@ -30,15 +30,18 @@ export default defineComponent({ const editorIns = getEditorIns(); if (config.id === 'fullscreen') { showFullscreen.value = !showFullscreen.value; - } else { - config.handler?.(editorIns, config.params); + if (window) { + const event = new Event('resize'); + window.dispatchEvent(event); + } } + config.handler?.(editorIns, config.params); }; return () => ( <> {config.type === 'button' && ( - + ( - + config.handler?.()} innerHTML={config.icon}> diff --git a/packages/devui-vue/devui/fullscreen/index.ts b/packages/devui-vue/devui/fullscreen/index.ts index 10edf18973..20c7ba38fd 100644 --- a/packages/devui-vue/devui/fullscreen/index.ts +++ b/packages/devui-vue/devui/fullscreen/index.ts @@ -7,7 +7,7 @@ export { Fullscreen }; export default { title: 'Fullscreen 全屏', - category: '基础组件', + category: '通用', install(app: App): void { app.component(Fullscreen.name, Fullscreen); }, diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md index 7548f35ee5..e50d6570a0 100644 --- a/packages/devui-vue/docs/components/editor-md/index.md +++ b/packages/devui-vue/docs/components/editor-md/index.md @@ -242,6 +242,7 @@ editor-md/checkbox v-model="content" :placeholder="'You can enter @ associate member, enter # to associate an order number...'" :hint-config="hintConfig" + fullscreen-z-index="1000" @content-change="valueChange" >