fix: codemirror can not select all

about drl990114/MarkFlowy#617
drl990114 · Apr 26, 2024 · af7c90b · af7c90b
1 parent 12c7272
commit af7c90b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/src/editor/codemirror/codemirror.ts b/src/editor/codemirror/codemirror.ts
@@ -313,6 +313,11 @@ class MfCodemirrorView {
       const targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize)
       const selection = Selection.near(this.view.state.doc.resolve(targetPos), dir)
 
+      if (dir === 1 && exitCode(this.view.state, this.view.dispatch)) {
+        this.view.focus()
+        return true
+      }
+
       this.view.dispatch(this.view.state.tr.setSelection(selection).scrollIntoView())
       this.view.focus()
       return true

diff --git a/src/editor/extensions/CodeMirror/codemirror-extension.ts b/src/editor/extensions/CodeMirror/codemirror-extension.ts
@@ -59,6 +59,7 @@ export class LineCodeMirrorExtension extends NodeExtension<CodeMirrorExtensionOp
       defining: true,
       ...override,
       code: true,
+      selectable: true,
       attrs: {
         ...extra.defaults(),
         language: { default: '' },

diff --git a/src/editor/extensions/CodeMirror/setup.ts b/src/editor/extensions/CodeMirror/setup.ts
@@ -3,7 +3,6 @@
 import {
   keymap,
   highlightSpecialChars,
-  drawSelection,
   highlightActiveLine,
   dropCursor,
   rectangularSelection,
@@ -111,11 +110,17 @@ export const basicSetup: Extension = (() => [
 /// style](#language.defaultHighlightStyle).
 export const minimalSetup: Extension = (() => [
   dropCursor(),
+
+  lineNumbers(),
   highlightSpecialChars(),
   history(),
-  drawSelection(),
-  rectangularSelection(),
+  indentOnInput(),
   syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  crosshairCursor(),
+  highlightSelectionMatches(),
   keymap.of([
     ...closeBracketsKeymap,
     ...defaultKeymap,

diff --git a/src/editor/extensions/index.ts b/src/editor/extensions/index.ts
@@ -45,6 +45,7 @@ import { IframeExtension } from './Iframe'
 import { SlashMenuExtension } from './SlashMenu'
 import { PlaceholderExtension } from './Placeholder'
 import { ClipboardExtension } from './Clipboard'
+import { minimalSetup } from './CodeMirror/setup'
 
 // import { TableExtension } from './ReactTables';
 
@@ -76,7 +77,9 @@ function extensions({ handleViewImgSrcUrl }: ExtensionsOptions): any[] {
     new LineBlockquoteExtension(),
     new LineHeadingExtension({}),
     new LineListExtension(),
-    new LineCodeMirrorExtension({}),
+    new LineCodeMirrorExtension({
+      extensions: [minimalSetup]
+    }),
     new LineTableExtension({ resizable: false }),
     new LineTableRowExtension(),
     new LineTableCellExtension(),

diff --git a/src/editor/theme/WysiwygThemeWrapper.tsx b/src/editor/theme/WysiwygThemeWrapper.tsx
@@ -586,7 +586,6 @@ export const WysiwygThemeWrapper = styled.div.attrs<WarpperProps>((p) => p)`
 
   & .cm-editor {
     height: auto;
-    padding: 8px 12px;
     overflow: auto;
     font-size: 85%;
     line-height: 1.45;
@@ -733,6 +732,9 @@ export const WysiwygThemeWrapper = styled.div.attrs<WarpperProps>((p) => p)`
     }
     .cm-lineNumbers .cm-gutterElement {
       margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       background-color: ${(props) => props.theme.bgColor};
     }
 

diff --git a/src/playground/content.ts b/src/playground/content.ts
@@ -14,7 +14,10 @@ const defaultContent = [
 
 ![img](https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg)
 
-a
+\`\`\`js
+console.log('Hello MarkFlowy')
+\`\`\`
+
 `.trim(),
 ].join("\n")
 
@@ -54,7 +57,10 @@ const headingContent = `
 `
 
 const htmlContent = `
-[version-badge]: https://img.shields.io/github/v/release/drl990114/MarkFlowy?label=version&style=flat-square
+
+<mark>Mark Tag</mark>.
+
+this is a img inline <img src="https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg" />.
 `
 
 export const contentMap: { [key: string]: string } = {