fix(string): fix functioncomponent props bug

marsprince · Nov 10, 2020 · e5174d9 · e5174d9
1 parent e031ed0
commit e5174d9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/packages/slate-vue/components/string.tsx b/packages/slate-vue/components/string.tsx
@@ -1,7 +1,13 @@
 // the minimum component, just a span
 import * as tsx from "vue-tsx-support";
 import { Editor, Path, Node } from 'slate'
-import {VueEditor} from '../plugins';
+import {VueEditor} from '../plugins'
+import { TsxComponent } from '../types';
+
+interface ZeroWidthStringProps {
+  length?: number
+  isLineBreak?: boolean
+}
 
 /**
  * Leaf strings with text in them.
@@ -27,8 +33,8 @@ const TextString = tsx.component({
  * Leaf strings without text, render as zero-width strings.
  */
 
-const ZeroWidthString = (props: { length?: number; isLineBreak?: boolean }) => {
-  const { length = 0, isLineBreak = false } = props
+const ZeroWidthString: TsxComponent<ZeroWidthStringProps> = ({ props }) => {
+  const { length = 0, isLineBreak = false } = props as ZeroWidthStringProps
   return (
     <span
       data-slate-zero-width={isLineBreak ? 'n' : 'z'}
@@ -72,7 +78,7 @@ const string = tsx.component({
       !editor.isInline(parent) &&
       Editor.string(editor, parentPath) === ''
     ) {
-      return <ZeroWidthString isLineBreak />
+      return <ZeroWidthString isLineBreak={true} />
     }
 
     // COMPAT: If the text is empty, it's because it's on the edge of an inline

diff --git a/packages/slate-vue/plugins/slate-plugin.ts b/packages/slate-vue/plugins/slate-plugin.ts
@@ -48,6 +48,7 @@ export const elementWatcherPlugin = (vm: any, type: string) => {
     const op: Operation = vm.$editor._operation;
     // some op doesn't change element, so prevent updating
     if(op) {
+      console.log(op);
       if(op.type === 'remove_text' || op.type === 'insert_text' || op.type === 'set_selection') {
         return
       }

diff --git a/packages/slate-vue/types.ts b/packages/slate-vue/types.ts
@@ -1,5 +1,5 @@
 import "vue-tsx-support/enable-check"
-import Vue from 'vue'
+import Vue, {RenderContext} from 'vue'
 declare module 'vue/types/options' {
   interface ComponentOptions<V extends Vue> {
     hooks?: Function,
@@ -27,3 +27,11 @@ export interface RenderLeafProps {
     'data-slate-leaf': true
   }
 }
+
+type Maybe<T> = T | undefined | null
+
+export type TsxComponent<Props> = (
+  args: Partial<RenderContext<Props>> & {
+    [k in keyof Props]: Maybe<Props[k]>
+  }
+) => VueTsxSupport.JSX.Element;