Customize styles on shared link page

plugin-idea

(Tobias Davis) #1

Summary

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.

Example

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.

Other

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: https://github.com/inkdropapp/layout-example-plugin/blob/master/lib/layout-example-message-dialog.js

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:

<MessageDialog
  ref={dialogRef}
  title={renderTitle}
  buttons={[
    { label: 'Cancel', cancel: true },
    { label: 'Share', primary: true }
  ]}
  onDismiss={handleDismiss}
>
  <p>
    Are you sure you want to share this note on the web? A public link
    will be created.
  </p>
</MessageDialog>

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!