Emmet Plugin is Not Working

Gowtham2003 commented 1 year ago

i tried to use new emmet plugin for codemirror v6 but it's not working, any way to fix this ?

import CodeMirror from "@uiw/react-codemirror";
import { html } from "@codemirror/lang-html";
import { keymap } from "@codemirror/view";
import { expandAbbreviation } from "@emmetio/codemirror6-plugin";
const htmlcode = `<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>My page</h1>
    <p>A page about me.</p>
  </body>
</html>
`;

export default function App() {
  return (
    <CodeMirror
      value={htmlcode}
      height="200px"
      extensions={[
        html(),
        keymap.of([
          {
            key: "Tab",
            run: expandAbbreviation,
          },
        ]),
      ]}
    />
  );
}

jaywcjlove commented 1 year ago

@Gowtham2003 https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-473-ifhl51?fontsize=14&hidenavigation=1&theme=dark

I suspect it is a problem of keyboard shortcut conflict.

import CodeMirror from "@uiw/react-codemirror";
import { html } from "@codemirror/lang-html";
import { keymap } from "@codemirror/view";
import { expandAbbreviation } from "@emmetio/codemirror6-plugin";

const htmlcode = `<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>My page</h1>
    <p>A page about me.</p>
  </body>
</html>
`;

export default function App() {
  return (
    <CodeMirror
      value={htmlcode}
      extensions={[
        html(),
        keymap.of([
          {
            key: "Cmd-e",
            run: expandAbbreviation
          }
        ])
      ]}
    />
  );
}

linsolas commented 1 year ago

Hello,

I encountered the same behavior on my side. It seems that when CodeMirror defines a shortcut, it prevents to be correctly overriden.

<CodeMirror> enables some shortcuts by default, in that case the Tab being used to indent the code.

If I set indentWithTab={false} on the <CodeMirror> component, then the Tab works with Emmet. Of course, I lose the indentation feature, so I've found a way to have both:

  import { indentMore, indentLess } from '@codemirror/commands';

  const handleTab = (view: EditorView): boolean => {
    // Start with Emmet
    const expanded = expandAbbreviation(view);
    if (!expanded) {
      // Otherwise, let the indentation do the job.
      return indentMore(view);
    }
    return true;
  };
  // Or a more concise way to write handleTab:
  // const handleTab = (view: EditorView): boolean =>  expandAbbreviation(view) || indentMore(view);

  const extensions = [
    keymap.of([
      { key: 'Tab', run: handleTab },
      { key: 'Shift-Tab', run: indentLess }, // Do not forget to also handle Shift-Tab!
    ]),
  ];

  return (
    <CodeMirror
        extensions={extensions}
        indentWithTab={false}
      />
  );

uiwjs / react-codemirror

Emmet Plugin is Not Working #473