fix: find result error

drl990114/MarkFlowy#680

Author: drl990114

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rme",
-  "version": "0.0.61",
+  "version": "0.0.65",
   "type": "module",
   "scripts": {
     "build": "yarn clear && yarn build-esbuild && yarn types",
@@ -177,6 +177,6 @@
     "svgmoji": "^3.2.0",
     "void-elements": "^3.1.0",
     "yjs": "^13.6.14",
-    "zens": "^0.0.25"
+    "zens": "^0.0.26"
   }
 }

src/editor/components/Editor.tsx

@@ -11,16 +11,10 @@ import {
 } from '../..'
 import { useContextMounted } from './useContextMounted'
 import type { Extension, RemirrorEventListenerProps } from 'remirror'
-import 'prosemirror-flat-list/dist/style.css'
 
 export const Editor = memo(
   forwardRef<EditorRef, EditorProps>((props, ref) => {
-    const {
-      initialType = 'wysiwyg',
-      hooks = [],
-      onContextMounted,
-      ...otherProps
-    } = props
+    const { initialType = 'wysiwyg', hooks = [], onContextMounted, ...otherProps } = props
     const [type, setType] = useState<EditorViewType>(initialType)
 
     useImperativeHandle(ref, () => ({
@@ -54,9 +48,24 @@ export type EditorRef = {
   getType: () => EditorViewType
 }
 
+export const defaultStyleToken = {
+  rootFontSize: '15px',
+  rootLineHeight: '1.6'
+}
+
 export interface EditorProps {
   initialType?: EditorViewType
   delegate?: EditorDelegate
+  styleToken?: {
+    /**
+     * @default 15px
+     */
+    rootFontSize?: string
+    /**
+     * @default 1.6
+     */
+    rootLineHeight?: string
+  }
   content: string
   isTesting?: boolean
   editable?: boolean

src/editor/components/SourceEditor/index.tsx

@@ -6,7 +6,7 @@ import type { EditorDelegate } from '../../types'
 import { ProsemirrorDevTools } from '@remirror/dev'
 import { createSourceCodeDelegate } from './delegate'
 import ErrorBoundary from '../ErrorBoundary'
-import type { EditorProps } from '../Editor'
+import { defaultStyleToken, type EditorProps } from '../Editor'
 import type { Extension, RemirrorEventListener } from 'remirror'
 import { SourceCodeThemeWrapper } from '../../theme'
 
@@ -25,8 +25,12 @@ const [SourceEditorProvider, useSourceCodeEditor] = createContextState<Context,
 )
 
 const SourceCodeEditorCore = memo(
-  (props: { markdownToolBar?: React.ReactNode[]; onChange: RemirrorEventListener<Extension> }) => {
-    const { markdownToolBar } = props
+  (props: {
+    styleToken?: EditorProps['styleToken']
+    markdownToolBar?: React.ReactNode[]
+    onChange: RemirrorEventListener<Extension>
+  }) => {
+    const { markdownToolBar, styleToken } = props
     const { content, markText, hooks, isTesting, editable } = useSourceCodeEditor()
 
     let initialCntent
@@ -39,7 +43,7 @@ const SourceCodeEditorCore = memo(
 
     return (
       <ErrorBoundary>
-        <SourceCodeThemeWrapper>
+        <SourceCodeThemeWrapper {...styleToken}>
           <Remirror
             manager={markText.manager}
             initialContent={initialCntent}
@@ -61,7 +65,14 @@ const SourceCodeEditorCore = memo(
  * The editor which is used to create the annotation. Supports formatting.
  */
 const SourceEditor: React.FC<EditorProps> = (props) => {
-  const { content, delegate, isTesting, hooks, markdownToolBar } = props
+  const {
+    content,
+    delegate,
+    isTesting,
+    hooks,
+    markdownToolBar,
+    styleToken = defaultStyleToken,
+  } = props
 
   const editorDelegate = useMemo(() => delegate ?? createSourceCodeDelegate(), [delegate])
 
@@ -84,7 +95,11 @@ const SourceEditor: React.FC<EditorProps> = (props) => {
       markText={editorDelegate}
       hooks={hooks}
     >
-      <SourceCodeEditorCore markdownToolBar={markdownToolBar} onChange={handleChange} />
+      <SourceCodeEditorCore
+        styleToken={styleToken}
+        markdownToolBar={markdownToolBar}
+        onChange={handleChange}
+      />
     </SourceEditorProvider>
   )
 }

src/editor/components/WysiwygEditor/index.tsx

@@ -7,7 +7,7 @@ import TableToolbar from '../../toolbar/TableToolbar'
 import { ProsemirrorDevTools } from '@remirror/dev'
 import ErrorBoundary from '../ErrorBoundary'
 import type { Extension, RemirrorEventListener } from '@remirror/core'
-import type { EditorProps } from '../Editor'
+import { defaultStyleToken, type EditorProps } from '../Editor'
 import { SlashMenu } from '../../toolbar/SlashMenu'
 import type { DocToString, StringToDoc } from '../../types'
 
@@ -17,7 +17,15 @@ export const wysiwygTransformer: {
 } = { stringToDoc: null, docToString: null }
 
 const WysiwygEditor: FC<EditorProps> = (props) => {
-  const { content, hooks, delegate, wysiwygToolBar, isTesting, editable } = props
+  const {
+    content,
+    hooks,
+    delegate,
+    wysiwygToolBar,
+    isTesting,
+    editable = true,
+    styleToken = defaultStyleToken,
+  } = props
 
   const editorDelegate = useMemo(() => delegate ?? createWysiwygDelegate(), [delegate])
 
@@ -47,7 +55,7 @@ const WysiwygEditor: FC<EditorProps> = (props) => {
 
   return (
     <ErrorBoundary>
-      <WysiwygThemeWrapper>
+      <WysiwygThemeWrapper {...styleToken}>
         <Remirror
           manager={editorDelegate.manager}
           initialContent={initialContent}
@@ -66,9 +74,5 @@ const WysiwygEditor: FC<EditorProps> = (props) => {
   )
 }
 
-WysiwygEditor.defaultProps = {
-  editable: true,
-}
-
 export default memo(WysiwygEditor)
 export * from './delegate'