Milkdown / milkdown

🍼 Plugin driven WYSIWYG markdown editor framework.
https://milkdown.dev
MIT License
8.97k stars 410 forks source link

[Bug] Explicit language list for @milkdown/kit/component/code-block isn't used with Crepe #1547

Open seangwright opened 4 weeks ago

seangwright commented 4 weeks ago

Initial checklist

Affected packages and versions

@milkdown/crepe@7.5.7

Link to runnable example

https://stackblitz.com/edit/github-nfgjxq?file=src%2Fmain.ts

Steps to reproduce

Expected behavior

Only the languages that are specified for the CodeBlockConfig are loaded into the language selector dropdown

Actual behavior

All languages included in import { languages } from '@codemirror/language-data'; are loaded into the dropdown

Runtime

Chrome

OS

Windows, macOS

Build and bundle tools

Vite

seangwright commented 4 weeks ago

I just realized that the customization approach with Crepe is different:

Crepe

const crepe = new Crepe({
    root: editorEl,
    featureConfigs: {
      "code-mirror": {
        languages: myLanguages,
      },
    },
  });

Manual

editor
  .config((ctx) => {
    ctx.update(codeBlockConfig.key, (defaultConfig) => ({
      ...defaultConfig,
      languages: myLanguages,
    }));

It seems when using Crepe I can add new plugins/components with the Manual approach, but I can't customize ones already loaded

const crepe = new Crepe({
  root: editorEl,
  featureConfigs: {
    "code-mirror": {
      languages: myLanguages,
    },
  },
});

crepe.editor
  .config((ctx) => {
    const listener = ctx.get(listenerCtx);

    const updateField = debounce((ctx, markdown, prevMarkdown) => {
      if (markdown !== prevMarkdown) {
        console.log("markdown updated");
        textareaEl.value = c.getMarkdown().trim();
      }
    }, 250);

    listener.markdownUpdated(updateField);
  })
  .use(listener);