From 588f862a83e78193047f5c8690fe909d36051bc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Mon, 9 Sep 2024 09:52:31 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=B9=E4=BA=8E=E9=85=8D=E7=BD=AEconf?= =?UTF-8?q?ig=20=E7=B1=BB=E5=9E=8B=E7=9A=84=E4=BF=AE=E5=A4=8D=20(#890)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 对于配置config 类型的修复 * chore: 将`CherryPreviewerOptions`包含的字段设为可选类型 * chore: 修改类型 * chore: 修改CherryDefaultToolbar类型定义 * chore: remove client's change * chore: 添加`syntax` 类型定义 --- .../CherryMarkdown/cherry.config.ts | 2 +- types/cherry.d.ts | 183 +++++++++++++++--- types/previewer.d.ts | 20 +- 3 files changed, 163 insertions(+), 42 deletions(-) diff --git a/client/src/components/CherryMarkdown/cherry.config.ts b/client/src/components/CherryMarkdown/cherry.config.ts index 256a3d43..98e71163 100644 --- a/client/src/components/CherryMarkdown/cherry.config.ts +++ b/client/src/components/CherryMarkdown/cherry.config.ts @@ -283,4 +283,4 @@ const initCherryMarkdown = () => { }) } -export default initCherryMarkdown; +export default initCherryMarkdown; \ No newline at end of file diff --git a/types/cherry.d.ts b/types/cherry.d.ts index 6f6a4703..a018fd6e 100644 --- a/types/cherry.d.ts +++ b/types/cherry.d.ts @@ -2,9 +2,8 @@ import CodeMirror from 'codemirror'; import SyntaxBase from '../src/core/SyntaxBase'; import { FormulaMenu } from '@/toolbars/BubbleFormula'; - export interface CherryExternalsOptions { - [key: string]: any; + [key: symbol]: any; } type CherryToolbarsCustomType = { @@ -69,7 +68,7 @@ export interface _CherryOptions void; /** 变更语言时触发 */ - afterChangeLocale?: ( locale: string ) => void; + afterChangeLocale?: (locale: string) => void; /** 变更主题时触发 */ - changeMainTheme?: ( theme: string ) => void; + changeMainTheme?: (theme: string) => void; /** 变更代码块主题时触发 */ - changeCodeBlockTheme?: ( theme: string ) => void; + changeCodeBlockTheme?: (theme: string) => void; }; /** 预览区域配置 */ previewer: CherryPreviewerOptions; @@ -196,7 +195,133 @@ export interface CherryEngineOptions { flowSessionContext?: boolean; }; /** 内置语法配置 */ - syntax?: Record | false>; + syntax?: { + // 语法开关 + // 'hookName': false, + // 语法配置 + // 'hookName': { + // + // } + link?: { + /** 生成的标签追加target属性的默认值 空：在标签里不会追加target属性， _blank：在标签里追加target="_blank"属性 */ + target?: '_blank' | '', + /** 生成的标签追加rel属性的默认值 空：在标签里不会追加rel属性， nofollow：在标签里追加rel="nofollow：在"属性*/ + rel?: '_blank' | 'nofollow' | '', + }, + autoLink?: { + /** 生成的标签追加target属性的默认值 空：在标签里不会追加target属性， _blank：在标签里追加target="_blank"属性 */ + target?: '_blank' | '', + /** 生成的标签追加rel属性的默认值 空：在标签里不会追加rel属性， nofollow：在标签里追加rel="nofollow：在"属性*/ + rel?: '_blank' | 'nofollow' | '', + /** 是否开启短链接 默认:true */ + enableShortLink?: boolean, + /** 短链接长度 默认:20 */ + shortLinkLength?: number, + }, + list?: { + listNested?: boolean, // 同级列表类型转换后变为子级 + indentSpace?: number, // 默认2个空格缩进 + }, + table: { + enableChart?: boolean, + selfClosing?: boolean, // 自动闭合，为true时，当输入第一行table内容时，cherry会自动按表格进行解析 + // chartRenderEngine: EChartsTableEngine, + // externals: ['echarts'], + }, + inlineCode?: { + /** + * @deprecated 不再支持theme的配置，统一在`themeSettings.inlineCodeTheme`中配置 + */ + // theme: 'red', + }, + codeBlock?: { + /** + * @deprecated 不再支持theme的配置，统一在`themeSettings.codeBlockTheme`中配置 + */ + // theme: 'dark', // 默认为深色主题 + wrap?: boolean, // 超出长度是否换行，false则显示滚动条 + lineNumber?: boolean, // 默认显示行号 + copyCode?: boolean, // 是否显示“复制”按钮 + editCode?: boolean, // 是否显示“编辑”按钮 + changeLang?: boolean, // 是否显示“切换语言”按钮 + expandCode?: boolean, // 是否展开/收起代码块，当代码块行数大于10行时，会自动收起代码块 + selfClosing?: boolean, // 自动闭合，为true时，当md中有奇数个```时，会自动在md末尾追加一个``` + customRenderer?: { + // 自定义语法渲染器 + }, + mermaid?: { + svg2img?: boolean, // 是否将mermaid生成的画图变成img格式 + }, + /** + * indentedCodeBlock是缩进代码块是否启用的开关 + * + * 在6.X之前的版本中默认不支持该语法。 + * 因为cherry的开发团队认为该语法太丑了（容易误触） + * 开发团队希望用```代码块语法来彻底取代该语法 + * 但在后续的沟通中，开发团队发现在某些场景下该语法有更好的显示效果 + * 因此开发团队在6.X版本中才引入了该语法 + * 已经引用6.x以下版本的业务如果想做到用户无感知升级，可以去掉该语法： + * indentedCodeBlock：false + */ + indentedCodeBlock?: boolean, + }, + emoji?: { + useUnicode?: boolean, // 是否使用unicode进行渲染 + }, + fontEmphasis?: { + /** + * 是否允许首尾空格 + * 首尾、前后的定义： 语法前**语法首+内容+语法尾**语法后 + * 例： + * true: + * __ hello __ ====> hello + * __hello__ ====> hello + * false: + * __ hello __ ====> _ hello _ + * __hello__ ====> hello + */ + allowWhitespace?: boolean, + selfClosing?: boolean, // 自动闭合，为true时，当输入**XXX时，会自动在末尾追加** + }, + strikethrough?: { + /** + * 是否必须有前后空格 + * 首尾、前后的定义： 语法前**语法首+内容+语法尾**语法后 + * 例： + * true: + * hello wor~~l~~d ====> hello wor~~l~~d + * hello wor ~~l~~ d ====> hello wor l d + * false: + * hello wor~~l~~d ====> hello world + * hello wor ~~l~~ d ====> hello wor l d + */ + needWhitespace?: boolean, + }, + mathBlock?: { + engine?: 'katex' | 'MathJax', // katex或MathJax + src?: string, + plugins?: boolean, // 加载插件 + }, + inlineMath?: { + engine?: 'katex' | 'MathJax', // katex或MathJax + src?: string, + }, + toc?: { + /** 默认只渲染一个目录 */ + allowMultiToc?: boolean, + /** 是否显示自增序号 */ + showAutoNumber?: boolean, + }, + header?: { + /** + * 标题的样式： + * - default 默认样式，标题前面有锚点 + * - autonumber 标题前面有自增序号锚点 + * - none 标题没有锚点 + */ + anchorStyle?: 'default' | 'autonumber' | 'none', + }, + }; /** 自定义语法 */ customSyntax?: Record; } @@ -241,42 +366,39 @@ export interface CherryEditorOptions { export type CherryLifecycle = (text: string, html: string) => void; export interface CherryPreviewerOptions { - dom: HTMLDivElement | false; + dom?: HTMLDivElement | false; /** 预览区域的DOM className */ - className: string; - enablePreviewerBubble: boolean; - floatWhenClosePreviewer: boolean; + className?: string; + enablePreviewerBubble?: boolean; + floatWhenClosePreviewer?: boolean; // 配置图片懒加载的逻辑 - lazyLoadImg: { + lazyLoadImg?: { // 加载图片时如果需要展示loaing图，则配置loading图的地址 - loadingImgPath: string; + loadingImgPath?: string; // 同一时间最多有几个图片请求，最大同时加载6张图片 - maxNumPerTime: 1 | 2 | 3 | 4 | 5 | 6, + maxNumPerTime?: 1 | 2 | 3 | 4 | 5 | 6, // 不进行懒加载处理的图片数量，如果为0，即所有图片都进行懒加载处理， 如果设置为-1，则所有图片都不进行懒加载处理 - noLoadImgNum: number, + noLoadImgNum?: number, // 首次自动加载几张图片（不论图片是否滚动到视野内），autoLoadImgNum = -1 表示会自动加载完所有图片 - autoLoadImgNum: -1 | number; + autoLoadImgNum?: -1 | number; // 针对加载失败的图片 或 beforeLoadOneImgCallback 返回false 的图片，最多尝试加载几次，为了防止死循环，最多5次。以图片的src为纬度统计重试次数 - maxTryTimesPerSrc: 0 | 1 | 2 | 3 | 4 | 5, + maxTryTimesPerSrc?: 0 | 1 | 2 | 3 | 4 | 5, // 加载一张图片之前的回调函数，函数return false 会终止加载操作 - beforeLoadOneImgCallback: (img: HTMLImageElement) => void | boolean; + beforeLoadOneImgCallback?: (img: HTMLImageElement) => void | boolean; // 加载一张图片失败之后的回调函数 - failLoadOneImgCallback: (img: HTMLImageElement) => void; + failLoadOneImgCallback?: (img: HTMLImageElement) => void; // 加载一张图片之后的回调函数，如果图片加载失败，则不会回调该函数 - afterLoadOneImgCallback: (img: HTMLImageElement) => void; + afterLoadOneImgCallback?: (img: HTMLImageElement) => void; // 加载完所有图片后调用的回调函数 - afterLoadAllImgCallback: () => void; + afterLoadAllImgCallback?: () => void; }; } export type CherryToolbarSeparator = '|'; -export type CherryCustomToolbar = string; - export type CherryDefaultToolbar = - // | CherryToolbarSeparator | 'audio' - | 'barTable' + | 'bar-table' | 'bold' | 'br' | 'checklist' @@ -300,7 +422,7 @@ export type CherryDefaultToolbar = | 'insert' | 'italic' | 'justify' - | 'lineTable' + | 'line-table' | 'link' | 'list' | 'mobilePreview' @@ -390,13 +512,12 @@ export interface CherryToolbarsOptions | CherryDefaultToolbar]?: (keyof F['CustomMenuType'] | CherryDefaultToolbar)[] })[] + { [K in (keyof Partial) | CherryDefaultToolbar]?: (keyof F['CustomMenuType'] | CherryDefaultToolbar)[] })[] | false; toolbarRight?: - | (CherryCustomToolbar | CherryDefaultBubbleToolbar | CherryDefaultToolbar)[] + | (CherryDefaultBubbleToolbar | CherryDefaultToolbar)[] | false; /** 是否展示悬浮目录 */ toc?: false | { @@ -433,7 +554,7 @@ export interface CherryToolbarsOptions void | boolean; + beforeLoadOneImgCallback?: (img: HTMLImageElement) => void | boolean; // 加载一张图片失败之后的回调函数 - failLoadOneImgCallback: (img: HTMLImageElement) => void; + failLoadOneImgCallback?: (img: HTMLImageElement) => void; // 加载一张图片之后的回调函数，如果图片加载失败，则不会回调该函数 - afterLoadOneImgCallback: (img: HTMLImageElement) => void; + afterLoadOneImgCallback?: (img: HTMLImageElement) => void; // 加载完所有图片后调用的回调函数 - afterLoadAllImgCallback: () => void; + afterLoadAllImgCallback?: () => void; }; }