diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-03 23:20:59 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-14 17:38:28 +0300 |
commit | c07bb5078cbf76f1a05e34b851a33904f7a81266 (patch) | |
tree | a2836743d81a1bc8a3c5ee877260aee4c84f9478 /src | |
parent | f484213806fd1425d1c4de40a638ca76658007b8 (diff) |
🚧 (2184): custom container tiptap extension
create a tiptap extention to create a custom-container element, missing markdown-it-container
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/EditorFactory.js | 2 | ||||
-rw-r--r-- | src/mixins/menubar.js | 10 | ||||
-rw-r--r-- | src/nodes/CustomContainer.js | 80 | ||||
-rw-r--r-- | src/nodes/index.js | 2 |
4 files changed, 94 insertions, 0 deletions
diff --git a/src/EditorFactory.js b/src/EditorFactory.js index 808a679c2..dd81966b7 100644 --- a/src/EditorFactory.js +++ b/src/EditorFactory.js @@ -44,6 +44,7 @@ import { BulletList, TaskList, TaskItem, + CustomContainer, } from './nodes' import { Markdown, Emoji } from './extensions' import { translate as t } from '@nextcloud/l10n' @@ -89,6 +90,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi ListItem, TaskList, TaskItem, + CustomContainer, Underline, Image.configure({ currentDirectory, inline: true }), Emoji.configure({ diff --git a/src/mixins/menubar.js b/src/mixins/menubar.js index c8e2e19c0..4070e599e 100644 --- a/src/mixins/menubar.js +++ b/src/mixins/menubar.js @@ -168,6 +168,16 @@ export default [ }, }, { + label: t('text', 'Custom Container'), + // keyChar: '>', + // keyModifiers: ['ctrl'], + class: 'icon-info', + isActive: 'customContainer', + action: (command) => { + return command.toggleCustomContainer() + }, + }, + { label: t('text', 'Code block'), class: 'icon-code', isActive: 'codeBlock', diff --git a/src/nodes/CustomContainer.js b/src/nodes/CustomContainer.js new file mode 100644 index 000000000..606a6da53 --- /dev/null +++ b/src/nodes/CustomContainer.js @@ -0,0 +1,80 @@ +import { Node, mergeAttributes } from '@tiptap/core' + +export const inputRegex = /^\s*>\s$/ + +export default Node.create({ + + name: 'customContainer', + + content: 'block+', + + group: 'block', + + defining: true, + + addOptions() { + return { + types: ['info', 'warn', 'error', 'success'], + HTMLAttributes: { + class: 'custom-container', + }, + } + }, + + addAttributes() { + return { + type: { + default: 'info', + rendered: false, + parseHTML: element => element.getAttribute('data-type'), + renderHTML: attributes => { + return { + 'data-type': attributes.type, + class: attributes.type, + } + }, + }, + } + }, + + parseHTML() { + return [ + { + tag: 'div', + }, + ] + }, + + renderHTML({ node, HTMLAttributes }) { + const { class: classy } = this.options.HTMLAttributes + + const attributes = { + ...this.options.HTMLAttributes, + class: `${classy} ${classy}-${node.attrs.type}`, + } + + return ['div', mergeAttributes(attributes, HTMLAttributes), 0] + }, + + toMarkdown: (state, node) => { + state.write('::: info' + (node.attrs.params || '') + '\n') + state.text(node.textContent, false) + state.ensureNewLine() + state.write(':::') + state.closeBlock(node) + }, + + addCommands() { + return { + setCustomContainer: attributes => ({ commands }) => { + return commands.wrapIn(this.name, attributes) + }, + toggleCustomContainer: attributes => ({ commands }) => { + return commands.toggleWrap(this.name, attributes) + }, + unsetCustomContainer: () => ({ commands }) => { + return commands.lift(this.name) + }, + } + }, +}) diff --git a/src/nodes/index.js b/src/nodes/index.js index 4340f05c9..65feda421 100644 --- a/src/nodes/index.js +++ b/src/nodes/index.js @@ -27,6 +27,7 @@ import TaskItem from './TaskItem' import TaskList from './TaskList' import TrailingNode from './TrailingNode' import Heading from './Heading' +import CustomContainer from './CustomContainer' export { Image, @@ -36,4 +37,5 @@ export { TaskList, TrailingNode, Heading, + CustomContainer, } |