change default extension

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -16,7 +16,7 @@ import {
 import {
   adjustPasteData, getStrFromBol,
 } from '../../services/paste-util/paste-markdown-util';
-import { useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
+import { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
 
 import { Toolbar } from './Toolbar';
 
@@ -64,6 +64,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onChange]);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
+  useDefaultExtensions(codeMirrorEditor);
   useEditorSettings(codeMirrorEditor, editorSettings, onSave);
 
   useEffect(() => {

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -1,24 +1,11 @@
 import { useMemo } from 'react';
 
-import { indentWithTab, defaultKeymap, deleteCharBackward } from '@codemirror/commands';
 import {
-  markdown, markdownLanguage,
-} from '@codemirror/lang-markdown';
-import { syntaxHighlighting, HighlightStyle, defaultHighlightStyle } from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import {
-  EditorState, Prec, type Extension,
+  EditorState,
 } from '@codemirror/state';
-import { keymap, EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
+import { EditorView } from '@codemirror/view';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
-// see: https://github.com/yjs/y-codemirror.next#example
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { yUndoManagerKeymap } from 'y-codemirror.next';
-
-import { emojiAutocompletionSettings } from '../../extensions/emojiAutocompletionSettings';
 
 import { useAppendExtensions, type AppendExtensions } from './utils/append-extensions';
 import { useFocus, type Focus } from './utils/focus';
@@ -32,21 +19,6 @@ import { useReplaceText, type ReplaceText } from './utils/replace-text';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
 
 
-// set new markdownKeymap instead of default one
-// https://github.com/codemirror/lang-markdown/blob/main/src/index.ts#L17
-const markdownKeymap = [
-  { key: 'Backspace', run: deleteCharBackward },
-];
-
-const markdownHighlighting = HighlightStyle.define([
-  { tag: tags.heading1, class: 'cm-header-1 cm-header' },
-  { tag: tags.heading2, class: 'cm-header-2 cm-header' },
-  { tag: tags.heading3, class: 'cm-header-3 cm-header' },
-  { tag: tags.heading4, class: 'cm-header-4 cm-header' },
-  { tag: tags.heading5, class: 'cm-header-5 cm-header' },
-  { tag: tags.heading6, class: 'cm-header-6 cm-header' },
-]);
-
 type UseCodeMirrorEditorUtils = {
   initDoc: InitDoc,
   appendExtensions: AppendExtensions,
@@ -65,28 +37,12 @@ export type UseCodeMirrorEditor = {
 } & UseCodeMirrorEditorUtils;
 
 
-const defaultExtensions: Extension[] = [
-  EditorView.lineWrapping,
-  markdown({ base: markdownLanguage, codeLanguages: languages, addKeymap: false }),
-  keymap.of(markdownKeymap),
-  keymap.of([indentWithTab]),
-  Prec.lowest(keymap.of(defaultKeymap)),
-  syntaxHighlighting(markdownHighlighting),
-  Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
-  emojiAutocompletionSettings,
-  keymap.of(yUndoManagerKeymap),
-];
-
-
 export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor => {
 
   const mergedProps = useMemo(() => {
     return deepmerge(
       props ?? {},
       {
-        extensions: [
-          defaultExtensions,
-        ],
         // Reset settings of react-codemirror.
         // Extensions are defined first will be used if they have the same priority.
         // If extensions conflict, disable them here.

packages/editor/src/stores/index.ts

@@ -2,3 +2,4 @@ export * from './codemirror-editor';
 export * from './use-resolved-theme';
 export * from './use-collaborative-editor-mode';
 export * from './use-editor-settings';
+export * from './use-default-extensions';

packages/editor/src/stores/use-default-extensions.ts

@@ -0,0 +1,52 @@
+import { indentWithTab, defaultKeymap, deleteCharBackward } from '@codemirror/commands';
+import {
+  markdown, markdownLanguage,
+} from '@codemirror/lang-markdown';
+import { syntaxHighlighting, HighlightStyle, defaultHighlightStyle } from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+import {
+  Prec, type Extension,
+} from '@codemirror/state';
+import { keymap, EditorView, KeyBinding } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+// see: https://github.com/yjs/y-codemirror.next#example
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { yUndoManagerKeymap } from 'y-codemirror.next';
+
+import type { UseCodeMirrorEditor } from '../services';
+import { emojiAutocompletionSettings } from '../services/extensions/emojiAutocompletionSettings';
+
+
+// set new markdownKeymap instead of default one
+// https://github.com/codemirror/lang-markdown/blob/main/src/index.ts#L17
+const markdownKeymap: KeyBinding[] = [
+  { key: 'Backspace', run: deleteCharBackward },
+];
+
+const markdownHighlighting = HighlightStyle.define([
+  { tag: tags.heading1, class: 'cm-header-1 cm-header' },
+  { tag: tags.heading2, class: 'cm-header-2 cm-header' },
+  { tag: tags.heading3, class: 'cm-header-3 cm-header' },
+  { tag: tags.heading4, class: 'cm-header-4 cm-header' },
+  { tag: tags.heading5, class: 'cm-header-5 cm-header' },
+  { tag: tags.heading6, class: 'cm-header-6 cm-header' },
+]);
+
+const defaultExtensions: Extension[] = [
+  EditorView.lineWrapping,
+  markdown({ base: markdownLanguage, codeLanguages: languages, addKeymap: false }),
+  keymap.of(markdownKeymap),
+  keymap.of([indentWithTab]),
+  Prec.lowest(keymap.of(defaultKeymap)),
+  keymap.of(yUndoManagerKeymap),
+  syntaxHighlighting(markdownHighlighting),
+  Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
+  emojiAutocompletionSettings,
+];
+
+export const useDefaultExtensions = (
+    codeMirrorEditor?: UseCodeMirrorEditor,
+): void => {
+  codeMirrorEditor?.appendExtensions([defaultExtensions]);
+};