Disabling Text Copying

[yaju19]

Is there a way to disable text copying for lexical editor at root level?

The following is the code for lexical editor:-

import React from "react";
// lexical
import { $getRoot, EditorState, LexicalEditor, SerializedEditorState } from "lexical";

import { $generateHtmlFromNodes } from "@lexical/html";
import { InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
//toolbar
import HoveringToolbar from "./toolbar/HoveringToolbar";
import Toolbar from "./toolbar/Toolbar";

//custom plugins
import {
  ClickableLinkPlugin,
  CollapsiblePlugin,
  DraggableBlockPlugin,
  EditorResizerPlugin,
  EmbedLinkPlugin,
  EquationsPlugin,
  ImagePlugin,
  ListMaxIndentLevelPlugin,
  ShowInitialDataPlugin,
  TableActionMenuPlugin,
  TableCellResizerPlugin,
} from "./plugins";

// nodes
import Nodes from "./nodes/Nodes";

// theme
import theme from "./theme";

//hooks
import { useElementStateRef } from "./hooks";

//context
import { EditorContext } from "./context";

function onError(error: Error) {
  console.error(error);
}

interface IArgs {
  editorData: SerializedEditorState;
  textContent: string;
  htmlString: string;
}
interface IProps {
  readOnly?: boolean;
  onChange?: (args: IArgs) => void;
  value: SerializedEditorState | string;
  className?: string;
  containerClassName?: string;
  editorType?: "mini";
  children?: React.ReactNode;
}

function Editor(props: IProps) {
  const {
    readOnly,
    onChange: onEditorUpdate,
    value,
    className = "",
    containerClassName = "",
    editorType,
    children,
  } = props;
  const id = (React as any).useId();
  const [editorContainerRef, editorContainerRefHandler] = useElementStateRef<HTMLDivElement>();
  const [mainEditorContainerRef, mainEditorContainerRefHandler] =
    useElementStateRef<HTMLDivElement>();
  const [isFullScreen, setIsFullScreen] = React.useState(false);

  const initialConfig: InitialConfigType = {
    namespace: id,
    theme,
    nodes: Nodes,
    onError,
    editable: !readOnly,
  };

  function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
      // Read the contents of the EditorState here.
      const editorData = editorState.toJSON();
      const root = $getRoot();
      const textContent = root.getTextContent();

      const htmlString = $generateHtmlFromNodes(editor, null);
      if (onEditorUpdate) onEditorUpdate({ editorData, textContent, htmlString });
    });
  }

  const contextValue = React.useMemo(
    () => ({ editorContainerRef, mainEditorContainerRef }),
    [editorContainerRef, mainEditorContainerRef]
  );

  return (
    <main
      className={`tw-bg-white tw-rounded-lg tw-relative tw-flex tw-flex-col ${
        readOnly ? "" : "tw-border tw-border-solid tw-border-gray-300 tw-p-5"
      } ${containerClassName} ${
        isFullScreen ? "!tw-fixed tw-inset-[20px] tw-z-10" : ""
      } tw-transition-all tw-duration-300 tw-inset-0`}
      ref={mainEditorContainerRefHandler}
    >
      <LexicalComposer initialConfig={initialConfig}>
        <EditorContext.Provider value={contextValue}>
          <>{!readOnly && <Toolbar editorType={editorType} />}</>

          <div
            className={`tw-relative tw-flex-1 ${
              readOnly ? "" : isFullScreen ? "tw-h-0" : "tw-max-h-80"
            } tw-overflow-auto ${readOnly ? "" : "tw-border tw-border-solid tw-border-gray-200"}`}
          >
            <RichTextPlugin
              placeholder={(isEditable) =>
                isEditable ? (
                  <div className="tw-select-none tw-pointer-events-none tw-opacity-75 tw-absolute tw-top-4 tw-left-7">
                    Start writing here...
                  </div>
                ) : null
              }
              contentEditable={
                <div
                  className={`tw-relative tw-h-auto tw-min-h-full tw-flex`}
                  ref={editorContainerRefHandler}
                >
                  <ContentEditable
                    className={`tw-outline-none tw-flex-1 ${className} ${
                      readOnly ? `resize-none` : `tw-cursor-text tw-p-4 tw-pl-7`
                    }`}
                  />
                </div>
              }
              ErrorBoundary={LexicalErrorBoundary}
            />

            <ShowInitialDataPlugin data={value} />
            {editorContainerRef && !readOnly && (
              <>
                <DraggableBlockPlugin anchorElem={editorContainerRef} />
                <HoveringToolbar />
                <TableCellResizerPlugin />
                <TableActionMenuPlugin anchorElem={editorContainerRef} />
                <EditorResizerPlugin onChange={setIsFullScreen} />
              </>
            )}

            {children}

            <OnChangePlugin onChange={onChange} />

            <ListPlugin />
            <TabIndentationPlugin />
            <ListMaxIndentLevelPlugin />
            <ImagePlugin />
            <EquationsPlugin />
            <EmbedLinkPlugin />

            <TablePlugin />
            <LinkPlugin />
            <ClickableLinkPlugin />
            <HistoryPlugin />

            <CollapsiblePlugin />
          </div>
        </EditorContext.Provider>
      </LexicalComposer>
    </main>
  );
}

export default Editor;

[MylanChan]

Have you tried onCopy?

onCopy={(event)=>{
	event.preventDefault();
}}