A library to add Medium-like share menu to selected text and quotes
Quotable allows you to easily add a contextual popup to your web page for sharing selected text and quotes on Twitter (and soon, other networks).
yarn add quotable-toolbar
Assuming an html page with a structure similar to this;
You can activate Quotable like this;
Quotable has two separate features you can activate, 1) add sharing links to blockquotes and 2) add a sharing link popup on text selection.
Quotable will search for every blockquote in the container you select, and append a sharing link. If the blockquote contains paragraphs, the sharing link will be appended to each paragraph. Quotable also wraps the text content of the paragraph or blockquote with a span, used to highlight the text when the sharing link is hovered. You can also selectively add the sharing link to blockquotes by setting
isActive.blockquotes: false and passing an array to
include of selectors for elements you want to add sharing link to. Alternatively, you can selectively deactivate the sharing link when
isActive.blockquotes: true by passing an array to
exclude of selectors for the elements you don't want to add a sharing link to.
Quotable adds a popup for every text selection within the container you select. You can disable this with
url option determines which url will be shared, when the user clicks a sharing link. You can use
window.location.href, but if that's not necessarily the canonical url you want people to share, you should set this manually with that value.
Right now, Quotable has support for a link to share content on Twitter. You can configure Twitter sharing options with the