Skip to content

Conversation

@ourcx
Copy link
Contributor

@ourcx ourcx commented Jan 22, 2026

#1549
主要是在未修改之前,输入```会自动闭合成代码块,然后就是 mermaid 格式下是先生成了代码块

  1. 第一个问题
    我先造 Suggester 文件下增加了,处理在输入回车时候的操作,如果是```跟任意字符串加空格就能自动闭合,如果不是就不做任何操作。这边这里注意了输入的```的数量和重复生成的问题。。。。更多的重复我没有好的想法解决
//处理 ``` 关键字的回车键特殊逻辑
if (origin === '+input' && changeValue === '' ) {
      const cursor = codemirror.getCursor();
      const lineContent = codemirror.getLine(cursor.line - 1); // 上一行内容
      const nextLineContent = codemirror.getLine(cursor.line + 1); // 当前行(也就是按回车后新行的内容)

      // Logger.debug('[CodeBlock]', '[onCodeMirrorChange]', 'lineContent', lineContent)
      // Logger.debug('[CodeBlock]', '[onCodeMirrorChange]', 'nextLineContent', nextLineContent)
      // 这样可以避免在已展开的代码块内部重复触发
      //如果相隔超过一行就不要管了,继续重新生成
      const backtickMatch = lineContent.match(/^[\s]*(```+)/);
      if (/^[\s]*```[^\s]/.test(lineContent) && !/^[\s]*```\s*$/.test(nextLineContent)) {
        const language = lineContent.replace(/^[\s]*```\s*/, '');
        const backticks = backtickMatch[1]; // 获取实际输入的 ``` 数量,如 ``` 或 ````

        const codeBlock = `\`\`\`${language}\n\n${backticks}`;
        codemirror.replaceRange(codeBlock, { line: cursor.line - 1, ch: 0 }, { line: cursor.line, ch: 0 });

        // 将光标移动到代码块内部
        codemirror.setCursor(cursor.line, language.length + 4);

        this.stopRelate();
        return;
      }
    }

并且联想窗存在的时候按回车也能生效,这个要注意一下

  1. 第二个问题
    关于 mermaid 的渲染,主要改了codeBlock 这个文件
 if (lang === 'mermaid' && /^```mermaid(?:\n*```|\n*)$/.test(props.match)) {
      // 不显示代码块
      const placeholder = `<div class="mermaid-loading">Mermaid 图表渲染中...</div>`;
      engine.render($codeSrc, props.sign, this.$engine, {
        mermaidConfig: this.mermaid,
        updateCache: (cacheCode) => {
          this.$codeCache(props.sign, addContainer(cacheCode));
          this.pushCache(addContainer(cacheCode), props.sign, props.lines);
        },
        fallback: () => {
          const $code = this.$codeReplace($codeSrc, lang, props.sign, props.lines);
          return $code;
        },
      });
      return addContainer(placeholder);
    }

保证了在 mermaid 模式下,只要里面没有/n 之外的东西就是使用一个占位语句,如果有东西就看里面输入的是什么,是合适的语法就渲染图表,不是的话还是代码块。只是保证了一开始不会出现代码块

if (this.customHighlighter) {
      // 平台自定义代码块样式
      cacheCode = this.customHighlighter(cacheCode, lang);
    } else {
      // 默认使用 prism 渲染代码块
      if (!lang) {
        lang = 'javascript';
      } else if (!Prism.languages[lang]) {
        // 对于 Prism 不支持的语言,保留原始语言标识符,但不进行语法高亮
        lang = oldLang; // 使用原始语言标识符
        cacheCode = escapeHTMLSpecialChar($code); // 不进行语法高亮,只进行 HTML 转义
      } else {
        cacheCode = Prism.highlight(cacheCode, Prism.languages[lang], lang);
        cacheCode = this.renderLineNumber(cacheCode);
      }
    }

然后就是这里,关于使用的语言,如果你回车的语言不被 Prism 支持,那就不怎么管了。。。只要保证存在的语言合理显示

然后可能会有一些 bug。。。希望大佬帮我看看

@changeset-bot
Copy link

changeset-bot bot commented Jan 22, 2026

⚠️ No Changeset found

Latest commit: 4d6eb6b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@tencent-adm
Copy link
Member

tencent-adm commented Jan 22, 2026

CLA assistant check
All committers have signed the CLA.

@ourcx ourcx changed the title feat: feat: 优化代码块自动闭合的时机 Jan 22, 2026
@ourcx ourcx marked this pull request as draft January 22, 2026 08:26
Copy link
Collaborator

@sunsonliu sunsonliu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感谢贡献哈,有一些小问题麻烦确认下哈

// 【关键修改】在流式渲染模式下,不显示代码块,而是显示占位符
if ($engine.$cherry.options.engine.global.flowSessionContext) {
return `<div data-sign="${sign}" data-type="codeBlock" class="mermaid-loading">
<div class="mermaid-placeholder">Mermaid 图表渲染中...</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

流式输出mermaid图

不建议这样实现哈,目前对mermaid图形已经支持流式动态绘制了,#1549 提出的优化目标是解决在流式绘制mermaid图形的时候,会先渲染成代码块,再渲染成mermaid图(如下图),可以在这里体验
image

},
});
return addContainer(placeholder);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同样的,这段逻辑可以考虑去掉哈,可以在$dealUnclosingCode 函数里实现

});
}

$dealUnclosingCode(str) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建议保留这段逻辑哈,我们的目标不是输出占位,而是在确定是代码块的时候输出代码块,在确定是mermaid图的时候输出mermaid图,在不确定的时候什么都不输出

} else {
cacheCode = Prism.highlight(cacheCode, Prism.languages[lang], lang);
cacheCode = this.renderLineNumber(cacheCode);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

即便是prism不支持的语言,我们也需要进行高亮展示(如下图),所以建议回退成之前的逻辑哈,之前的逻辑是符合预期的
image

class="${needUnExpand ? 'cherry-code-unExpand' : 'cherry-code-expand'}"
>
${this.customWrapperRender(oldLang, cacheCode, codeHtml)}
`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不太建议通过工具批量修lint,这样会导致真正 commit 信息被覆盖(如下图)
image

// Logger.debug('[CodeBlock]', '[onCodeMirrorChange]', 'lineContent', lineContent)
// Logger.debug('[CodeBlock]', '[onCodeMirrorChange]', 'nextLineContent', nextLineContent)
// 这样可以避免在已展开的代码块内部重复触发
//如果相隔超过一行就不要管了,继续重新生成
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

额,可能更鲁棒的做法是判断代码块的闭合情况。。如果存在未闭合的代码块,则只需要联想出 ``` 就可以了。如果不存在未闭合的代码块,就可以联想出语言选择了

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的好的,谢谢大佬指导,我这两天研究一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants