toeverything / blocksuite

🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
https://blocksuite.io
Mozilla Public License 2.0
4.09k stars 353 forks source link

Code block highlighting is not as expected #7083

Open Flrande opened 1 month ago

Flrande commented 1 month ago

For the following code, the code block highlighting is not as expected.

const a = html`
  <span class="affine-latex" data-selected=${this.selected}
      ><span class="latex-container"></span
      ><v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
  ></span>
`;
image

The possible reason is that now each delta in the code block is parsed separately. We need to parse them together while maintaining lazy loading for syntax highlighting.

https://github.com/toeverything/blocksuite/blob/55a47205d14ec4fe082ea3a913fe9ae0dff793a4/packages/blocks/src/code-block/affine-code-line.ts#L50-L54

golok727 commented 1 month ago

Hey @Flrande, I believe storing the ruleStack in a state and passing it to the tokenizer could be a viable solution within our current setup. However, it appears that Shiki doesn't currently support that functionality.

PS: Apologies for the premature closure; my phone glitched.