Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move some files to typescript #264

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

ViableSystemModel
Copy link

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.

// Before the view is created.
options.onBeforeCreate && options.onBeforeCreate(editor);
options.onBeforeCreate && options.onBeforeCreate(this.editor);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is needed this.editor? is this working?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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() {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this converted into a function?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, 👌

@@ -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
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets keep this for now

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's keep this from now

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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%")};
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this change needed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Owner

@michelson michelson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just some questions on details

@michelson
Copy link
Owner

I will test this PR over the weekend, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants