A collection of Tiptap extensions that enable bidirectional sync with Jira. It works by introducing a series of Nodes and Marks unique to the Atlassian Document Format (ADF) that can be used to render Jira content in a TipTap document.
You'll also need the following extensions from Tiptap to use this package:
pnpm add tiptap-extension-jiraimport { Jira } from 'tiptap-extension-jira';
const editor = new Editor({
extensions: [...Object.values(Jira)],
});You can modify any of the extensions, for example:
import { Jira } from 'tiptap-extension-jira';
const { Mention, ...rest } = Jira;
const mention = Jira.Mention.configure({
suggestion: createMentionSuggestions([
'Hayden',
'Gavin',
'Anna',
]),
});
const editor = new Editor({
extensions: [mention, ...Object.values(rest)],
});I also recommend adding the following Tailwind CSS to your project:
/* Panel */
div[data-panel-type] {
@apply p-4 bg-muted rounded-md my-4;
}
div[data-panel-type] > *:last-child {
@apply mb-0;
}
div[data-panel-type="info"] {
@apply bg-sky-50 text-sky-800;
}
div[data-panel-type="note"] {
@apply bg-indigo-50 text-indigo-800;
}
div[data-panel-type="success"] {
@apply bg-emerald-50 text-emerald-800;
}
div[data-panel-type="warning"] {
@apply bg-amber-50 text-amber-800;
}
div[data-panel-type="error"] {
@apply bg-rose-50 text-rose-800;
}If you are running this in a headless environment, you can use the Server extension instead:
import { Jira } from 'tiptap-extension-jira/server';
const editor = new Editor({
extensions: [...Object.values(Jira)],
});
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}