How To Disable Copy Paste in Editor?

[SakshamSahgal]

It seems that there is no way to disable copy paste in the editor : Link

[jaywcjlove]

@SakshamSahgal I don't understand what you mean, I don't know if the following method can solve your problem.

https://uiwjs.github.io/react-codemirror/#/extensions/events

[SakshamSahgal]

@jaywcjlove I apologize if my initial inquiry wasn't clear. It seems there's no built-in option in @uiw/react-codemirror to disable copy-paste while allowing typing. Maybe adding a parameter to define this behavior could be beneficial.

[jaywcjlove]

The 'events' extension can achieve this, I think that's enough."

[sailxjx]

The 'events' extension can achieve this, I think that's enough."

The events extension is useless for this, although the paste event can be obtained, it cannot prevent the modification of the dom content.

There is a solution when using raw codemirror, I found this in the forum:

editor.on(“beforeChange”, function(_, change) {
if (change.origin == “paste”) change.cancel()
})

But I can't add any events to the react-codemirror's editor instance, the on function is not existing at all.

[jaywcjlove]

@sailxjx

You can try using the @uiw/codemirror-extensions-events extension.

[sailxjx]

@sailxjx

You can try using the @uiw/codemirror-extensions-events extension.

Boss, I tried it before saying it doesn't work 🧎, although this plugin can capture the paste event, it cannot prevent pasting content into the text box.

[sailxjx]

@sailxjx

You can try using the @uiw/codemirror-extensions-events extension.

If possible, could you give me an example code?

[jaywcjlove]

@sailxjx

import CodeMirror from '@uiw/react-codemirror';
import { langs } from '@uiw/codemirror-extensions-langs';
import * as events from '@uiw/codemirror-extensions-events';
import { Fragment } from 'react';

/**
 * https://github.com/uiwjs/react-codemirror/issues/650
 */
export function Component() {
  const extension = events.content({
    paste: (event) => {
      event.preventDefault();
    },
  });
  return (
    <Fragment>
      <CodeMirror
        value={`console.log('hello')`}
        theme="none"
        height="400px !important"
        width="100%"
        style={{ margin: '0 0 23px 0', flex: 1 }}
        extensions={[langs.markdown(), extension]}
      />
    </Fragment>
  );
}

[sailxjx]

@sailxjx

import CodeMirror from '@uiw/react-codemirror';
import { langs } from '@uiw/codemirror-extensions-langs';
import * as events from '@uiw/codemirror-extensions-events';
import { Fragment } from 'react';

/**
 * https://github.com/uiwjs/react-codemirror/issues/650
 */
export function Component() {
  const extension = events.content({
    paste: (event) => {
      event.preventDefault();
    },
  });
  return (
    <Fragment>
      <CodeMirror
        value={`console.log('hello')`}
        theme="none"
        height="400px !important"
        width="100%"
        style={{ margin: '0 0 23px 0', flex: 1 }}
        extensions={[langs.markdown(), extension]}
      />
    </Fragment>
  );
}

Don't work, even failed to capture the event, my codemirror version is 4.22.0

Screen.Recording.2024-08-21.at.19.47.24.mov

The code:

const extension = events.content({
      paste: (event) => {
        event.preventDefault();
      },
    });
    return (
      <div className={clsx(className, styles.editorContainer)}>
        <CodeMirror
          height={`${size.height}px`}
          width={`${size.width}px`}
          value={editorContent}
          placeholder={`# ${t('Enter the code here and click the Run button to execute.')}`}
          extensions={[langs.markdown(), extension]}
          // extensions={[...(codeMirrorExts[codeType] || []), events.content({
          //   paste: (event) => {
          //     console.log('paste', event);
          //     event.preventDefault();
          //   },
          // })]}
          onChange={onChange}
        // theme={editorThemeConfig}
        />

[jaywcjlove]

@sailxjx My test example can disable pasting. https://uiwjs.github.io/react-codemirror/#/examples/650