claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
112 lines (111 loc) • 3.66 kB
JavaScript
import { Mark, mergeAttributes } from '@tiptap/core';
export const BlockLink = Mark.create({
name: 'blockLink',
addOptions() {
return {
openOnClick: true,
linkOnPaste: true,
autolink: true,
HTMLAttributes: {
class: 'block-link',
},
};
},
addAttributes() {
return {
blockId: {
default: null,
parseHTML: (element) => element.getAttribute('data-block-id'),
renderHTML: (attributes) => {
if (!attributes.blockId) {
return {};
}
return {
'data-block-id': attributes.blockId,
};
},
},
linkText: {
default: null,
parseHTML: (element) => element.getAttribute('data-link-text'),
renderHTML: (attributes) => {
if (!attributes.linkText) {
return {};
}
return {
'data-link-text': attributes.linkText,
};
},
},
href: {
default: null,
parseHTML: (element) => element.getAttribute('href'),
renderHTML: (attributes) => {
if (!attributes.href && attributes.blockId) {
return {
href: `#block-${attributes.blockId}`,
};
}
return attributes.href ? { href: attributes.href } : {};
},
},
};
},
parseHTML() {
return [
{
tag: 'a[data-block-id]',
getAttrs: (element) => {
const blockId = element.getAttribute('data-block-id');
return blockId ? { blockId } : false;
},
},
{
tag: 'span.block-link[data-block-id]',
getAttrs: (element) => {
const blockId = element.getAttribute('data-block-id');
return blockId ? { blockId } : false;
},
},
];
},
renderHTML({ HTMLAttributes }) {
return [
'a',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
class: 'block-link',
role: 'link',
'aria-label': `Link to block ${HTMLAttributes['data-block-id']}`,
}),
0,
];
},
addCommands() {
return {
setBlockLink: (attributes) => ({ commands }) => {
return commands.setMark(this.name, attributes);
},
toggleBlockLink: (attributes) => ({ commands }) => {
return commands.toggleMark(this.name, attributes);
},
unsetBlockLink: () => ({ commands }) => {
return commands.unsetMark(this.name);
},
};
},
addKeyboardShortcuts() {
return {
'Mod-k': () => {
// This would open a block selector dialog
// For now, we'll just toggle with a placeholder
return this.editor.commands.toggleBlockLink({ blockId: 'placeholder' });
},
};
},
addProseMirrorPlugins() {
return [
// Add click handler for block links
// This would integrate with the block navigation system
];
},
});