Customize styles on shared link page


(Tobias Davis) #1


As a user of Inkdrop, I would like to be able to have shared notes use custom styles, and remove Inkdrop branding.

I would be willing to pay a higher amount for this functionality.


As part of my business workflow, I write documents and send those to clients. For example, I write project bids and proposals.

My current workflow is to write in markdown, then export the HTML, then copy the contents to a rich document editor, apply style changes, then save as a PDF.

With this new feature, I could customize the style of the shared note page to use my business brand styles, so that I would simply share a link to the clients. This would save me a lot of work.


From a user perspective, I would not be willing to pay more money for only customized styles (like font colors, sizes, etc.) but I would be willing to pay more to be able to remove Inkdrop branding (icon and menu elements).

(Takuya Matsuyama) #2

Hi Tobias,

Thank you for the suggestion.
Yeah that would be nice to have and I understand your workflow, but it’s not currently planned to be supported as note sharing feature is just a supplemental feature.
BTW, I am considering to improve the export feature so that you can use it for building websites using frameworks like Gatsby, which allows you to fully customize styles and pages.

(Tobias Davis) #3

That makes sense, sure.

Another option I am considering iss writing a plugin that would override the “Share Note” functionality, and push the note up to my own servers. Any tips or pointers would be helpful!

Thanks for your time!

(Takuya Matsuyama) #4

Thank you for your understanding!

You can add a button on the editor header bar. Check out the docs:

And you can also get currently editing note data from editingNote flux state:

Hope that helps!

(Tobias Davis) #5

That’s very helpful, thank you!

(Tobias Davis) #6

I’ve about got the plugin working, but I’m not sure how to introspect the Inkdrop React components, specifically the MessageDialog component.

In the share modal dialog there are action buttons (ok/cancel) but when I make a modal (following that example) it only shows “ok”.

The example here is absolutely brilliant, thank you for it:

I found the documentation here but it doesn’t list the available components, or how to use them.

Any specific advice or general tips for figuring out how to use React components would be very appreciated.

(Takuya Matsuyama) #7

Yeah, the app React components are not documented yet.
MessageDialog accepts following props:

type Props = {|
  title: string | (() => React.Node),
  message: string,
  buttons: MessageDialogButton[],
  autofocus: boolean,
  className?: string,
  onDismiss?: (dialog: MessageDialog, buttonIndex: number) => any,
  onHidden?: (dialog: MessageDialog, buttonIndex: number) => any,
  children: React.Node

type MessageDialogButton = {
  label: string,
  primary?: boolean,
  destructive?: boolean

In the share dialog, it renders the dialog like this:

    { label: 'Cancel', cancel: true },
    { label: 'Share', primary: true }
    Are you sure you want to share this note on the web? A public link
    will be created.

So you should be able to use it in the same way :slight_smile:

(Tobias Davis) #8

That’s great information, thank you so much!