pasteHandler in editor-settings

packages/editor/src/client/components-internal/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -12,8 +12,7 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import type { EditorSettings, GlobalCodeMirrorEditorKey } from '../../../consts';
 import {
-  useFileDropzone, FileDropzoneOverlay,
-  adjustPasteData, getStrFromBol, useShowTableIcon,
+  useFileDropzone, FileDropzoneOverlay, useShowTableIcon,
 } from '../../services-internal';
 import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 import { useDefaultExtensions } from '../../stores/use-default-extensions';
@@ -70,7 +69,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
   useDefaultExtensions(codeMirrorEditor);
-  useEditorSettings(codeMirrorEditor, editorSettings, onSave);
+  useEditorSettings(codeMirrorEditor, editorSettings, onSave, onUpload);
 
   useShowTableIcon(codeMirrorEditor);
 
@@ -85,46 +84,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
-
-  useEffect(() => {
-    const handlePaste = (event: ClipboardEvent) => {
-      event.preventDefault();
-
-      const editor = codeMirrorEditor?.view;
-
-      if (editor == null) {
-        return;
-      }
-
-      if (event.clipboardData == null) {
-        return;
-      }
-
-      if (event.clipboardData.types.includes('text/plain')) {
-
-        const textData = event.clipboardData.getData('text/plain');
-
-        const strFromBol = getStrFromBol(editor);
-
-        const adjusted = adjustPasteData(strFromBol, textData);
-
-        codeMirrorEditor?.replaceText(adjusted);
-      }
-      else if (onUpload != null && event.clipboardData.types.includes('Files')) {
-        onUpload(Array.from(event.clipboardData.files));
-      }
-
-    };
-
-    const extension = EditorView.domEventHandlers({
-      paste: handlePaste,
-    });
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions(extension);
-    return cleanupFunction;
-
-  }, [codeMirrorEditor, onUpload]);
-
   useEffect(() => {
 
     const handleDrop = (event: DragEvent) => {

packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -7,7 +7,9 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { toast } from 'react-toastify';
 
 import { GlobalCodeMirrorEditorKey } from '../../../consts';
-import type { EditorSettings, EditorTheme, KeyMapMode } from '../../../consts';
+import type {
+  EditorSettings, EditorTheme, KeyMapMode, PasteMode,
+} from '../../../consts';
 import { CodeMirrorEditorMain } from '../../components/CodeMirrorEditorMain';
 import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
@@ -19,6 +21,7 @@ export const Playground = (): JSX.Element => {
   const [markdownToPreview, setMarkdownToPreview] = useState('');
   const [editorTheme, setEditorTheme] = useState<EditorTheme>('defaultlight');
   const [editorKeymap, setEditorKeymap] = useState<KeyMapMode>('default');
+  const [editorPaste, setEditorPaste] = useState<PasteMode>('both');
   const [editorSettings, setEditorSettings] = useState<EditorSettings>();
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -42,8 +45,9 @@ export const Playground = (): JSX.Element => {
       keymapMode: editorKeymap,
       styleActiveLine: true,
       autoFormatMarkdownTable: true,
+      pasteMode: editorPaste,
     });
-  }, [setEditorSettings, editorKeymap, editorTheme]);
+  }, [setEditorSettings, editorKeymap, editorTheme, editorPaste]);
 
   // set handler to save with shortcut key
   const saveHandler = useCallback(() => {
@@ -86,7 +90,7 @@ export const Playground = (): JSX.Element => {
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">
           <Preview markdown={markdownToPreview} />
-          <PlaygroundController setEditorTheme={setEditorTheme} setEditorKeymap={setEditorKeymap} />
+          <PlaygroundController setEditorTheme={setEditorTheme} setEditorKeymap={setEditorKeymap} setEditorPaste={setEditorPaste} />
         </div>
       </div>
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>

packages/editor/src/client/components-internal/playground/PlaygroundController.tsx

@@ -2,10 +2,11 @@ import { useCallback } from 'react';
 
 import { useForm } from 'react-hook-form';
 
-import type { EditorTheme, KeyMapMode } from '../../../consts';
+import type { EditorTheme, KeyMapMode, PasteMode } from '../../../consts';
 import {
   GlobalCodeMirrorEditorKey,
   AllEditorTheme, AllKeyMap,
+  AllPasteMode,
 } from '../../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
@@ -111,16 +112,18 @@ const SetParamRow = (
 type PlaygroundControllerProps = {
   setEditorTheme: (value: EditorTheme) => void
   setEditorKeymap: (value: KeyMapMode) => void
+  setEditorPaste: (value: PasteMode) => void
 };
 
 export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Element => {
-  const { setEditorTheme, setEditorKeymap } = props;
+  const { setEditorTheme, setEditorKeymap, setEditorPaste } = props;
   return (
     <div className="container mt-5">
       <InitEditorValueRow />
       <SetCaretLineRow />
       <SetParamRow update={setEditorTheme} items={AllEditorTheme} />
       <SetParamRow update={setEditorKeymap} items={AllKeyMap} />
+      <SetParamRow update={setEditorPaste} items={AllPasteMode} />
     </div>
   );
 };

packages/editor/src/client/stores/use-editor-settings.ts

@@ -4,12 +4,15 @@ import type { Extension } from '@codemirror/state';
 import { Prec } from '@codemirror/state';
 import {
   keymap, type Command, highlightActiveLine, highlightActiveLineGutter,
+  EditorView,
 } from '@codemirror/view';
 
-import type { EditorSettings, KeyMapMode, EditorTheme } from '../../consts';
+import type {
+  EditorSettings, KeyMapMode, EditorTheme,
+} from '../../consts';
 import type { UseCodeMirrorEditor } from '../services';
 import {
-  getEditorTheme, getKeymap, insertNewlineContinueMarkup, insertNewRowToMarkdownTable, isInTable,
+  getEditorTheme, getKeymap, insertNewlineContinueMarkup, insertNewRowToMarkdownTable, isInTable, getStrFromBol, adjustPasteData,
 } from '../services-internal';
 
 
@@ -17,6 +20,7 @@ export const useEditorSettings = (
     codeMirrorEditor?: UseCodeMirrorEditor,
     editorSetings?: EditorSettings,
     onSave?: () => void,
+    onUpload?: (files: File[]) => void,
 ): void => {
 
   useEffect(() => {
@@ -90,4 +94,44 @@ export const useEditorSettings = (
 
   }, [codeMirrorEditor, keymapExtension]);
 
+  useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      event.preventDefault();
+
+      const editor = codeMirrorEditor?.view;
+
+      if (editor == null) {
+        return;
+      }
+
+      if (event.clipboardData == null) {
+        return;
+      }
+
+      if (editorSetings?.pasteMode !== 'file' && event.clipboardData.types.includes('text/plain')) {
+
+        const textData = event.clipboardData.getData('text/plain');
+
+        const strFromBol = getStrFromBol(editor);
+        const adjusted = adjustPasteData(strFromBol, textData);
+
+        codeMirrorEditor?.replaceText(adjusted);
+      }
+
+      if (editorSetings?.pasteMode !== 'text' && onUpload != null && event.clipboardData.types.includes('Files')) {
+        onUpload(Array.from(event.clipboardData.files));
+      }
+
+    };
+
+    const extension = EditorView.domEventHandlers({
+      paste: handlePaste,
+    });
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(extension);
+    return cleanupFunction;
+
+  }, [codeMirrorEditor, editorSetings?.pasteMode, onUpload]);
+
+
 };