Move some files to typescript #264
Conversation
| // Before the view is created. | ||
| options.onBeforeCreate && options.onBeforeCreate(editor); | ||
| options.onBeforeCreate && options.onBeforeCreate(this.editor); |
There was a problem hiding this comment.
why is needed this.editor? is this working?
There was a problem hiding this comment.
There are actually two ways to do this because it looks like tiptap both passes the object in and binds the function to it.
So this:
methodName({ editor }) {
doThingWith(editor)
}
Can become:
methodName() {
doThingWith(this.editor)
}
Or this:
methodName(this: { editor }) {
doThingWith(editor)
}
But if you do the second one, it seems like it no longer recognizes the type of the editor argument for some reason.
Given that these functions are being bound to the object within tiptap and their this argument is very well typed, I assume this works. It also matches their documentation. I did some minimal testing to make sure I didn't massively break anything, but I'm sure it needs more attention.
| placeholder: "Write something …", | ||
| showOnlyWhenEditable: true, | ||
| showOnlyCurrent: true, | ||
| addOptions() { |
There was a problem hiding this comment.
Why was this converted into a function?
There was a problem hiding this comment.
It has something to do with the internals of tiptap's type inference. It's how they recommend doing it in the typescript compatibility section of their docs and it was causing an error to leave it as-is
| @@ -128,7 +136,7 @@ export default function MenuBar({ editor, fixed }) { | |||
|
|
|||
| return ( | |||
| <AnchorStyle | |||
| fixed={fixed} | |||
| //fixed={fixed} // This wasn't present in the type for AnchorStyle and didn't appear to be referenced anywhere | |||
There was a problem hiding this comment.
I might be able to add fixed as a prop to AnchorStyle, but I'm still trying to figure out how to work with the types on those styled components
| @@ -171,7 +179,7 @@ export default function MenuBar({ editor, fixed }) { | |||
|
|
|||
| <DanteTooltipLink | |||
| selected={editor.isActive("link")} | |||
| editor={editor} | |||
| //editor={editor} | |||
There was a problem hiding this comment.
Alright. I'll add the editor into the tooltip props instead.
| @@ -34,7 +34,7 @@ export const AnchorStyle = styled.div` | |||
| height: 0; | |||
| width: 0; | |||
| position: absolute; | |||
| left: ${(props) => (props.arrowPosition ? props.arrowPosition : "50%")}; | |||
| left: ${(props) => (props['arrowPosition'] ? props['arrowPosition'] : "50%")}; | |||
There was a problem hiding this comment.
That property wasn't showing up on the props type signature, but the type was indexable by arbitrary strings. I can try typing the styled div with a <{arrowPosition: string}> generic and see if that works. It would certainly be less hacky.
|
I will test this PR over the weekend, thanks |
I tried to make this easier to review than the last PR. I’d change a file and then make as few changes as possible to get it to play nicely with rollup without errors. I think my increased familiarity with the codebase, emotion, and tiptap helped as well. Please let me know if this was an improvement.
If you have concerns about the module declarations to extend the libraries’ interfaces, I’m not sure what alternatives there are, but that does appear to be the prescribed way to add emotion themes and tiptap commands.