Skip to content

md代码段预览执行可编辑 - #320

Open
xuqiu wants to merge 2 commits into
antvis:v3from
xuqiu:codeblockEditable
Open

md代码段预览执行可编辑#320
xuqiu wants to merge 2 commits into
antvis:v3from
xuqiu:codeblockEditable

Conversation

@xuqiu

@xuqiu xuqiu commented May 15, 2025

Copy link
Copy Markdown

支持markdown的代码段预览模式下通过参数支持编辑并即时渲染
如:

import { Chart } from '@antv/g2';

const data = [
...

详细参考示例文件 example/docs/manual/codeblock.md

@yvonneyx

Copy link
Copy Markdown
Contributor

代码先整理一下,console 信息用于本地调试,不建议提交


```js
## 原代码块格式 支持编辑
```js | ob {editable:true}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

编辑能力目前还不够成熟,这个 PR 要不优先「编译」相关的代码?编辑的可以先不提

1. 不显示错误信息
2. 执行错误后, 修正代码后, 演示画布消失
const { meta } = node.data;
if (!meta) return;
return meta.match(/\|\s*eb\s*(\|.*)?{*/);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

我看示例还是 | ob 没看到有 | eb 的地方呢?这块逻辑用在哪里了

}) => {
const locale = useLocale();
const exampleTitle = (typeof title === 'object' ? title[locale.id as 'zh' | 'en'] : title) as string;
// const locale = useLocale();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

这里的国际化为什么注释了?

`;
// 追加图表容器
node.innerHTML = container || `<div id=${replaceId} class="playgroundCodeContainer" />`;
node.innerHTML = container || `<div id=${replaceId} class="playgroundCodeContainer" style="max-height:400px"/>`;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

这里 style 的改动会不会影响到示例页的编辑框样式?

// 执行代码
useEffect(() => {
execute(source);
//execute(source);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

这里注释掉的目的是?

return cloned.textContent;
const preElement = cloned.querySelector('pre');
preElement.childNodes.forEach((c) => source += c.textContent + '\n');
return source;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

”去除注释“的逻辑怎么也移除了

console.log(22223)

root.render(<Preview source={source} code={block} {...options} />);
// root.render(<><CodeBlockRunner /><Preview source={source} code={block} {...options} /></>);

Copy link
Copy Markdown
Contributor

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