diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-08 23:32:33 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-14 17:38:28 +0300 |
commit | 5241810f9f9ecb67b5080314b98c77c98af52d66 (patch) | |
tree | 45431d79c5befb9f70cfe333ca5769051d0a5ba2 | |
parent | 2f2e894efd7e6c5bc0d22c826ab673938946ff37 (diff) |
🚚 (#2184): rename feature to callouts
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
-rw-r--r-- | css/prosemirror.scss | 32 | ||||
-rw-r--r-- | src/EditorFactory.js | 4 | ||||
-rw-r--r-- | src/markdownit/containers.js | 4 | ||||
-rw-r--r-- | src/mixins/menubar.js | 18 | ||||
-rw-r--r-- | src/nodes/CalloutsContainer.js (renamed from src/nodes/CustomContainer.js) | 20 | ||||
-rw-r--r-- | src/nodes/index.js | 4 | ||||
-rw-r--r-- | src/tests/markdownit.spec.js | 4 |
7 files changed, 43 insertions, 43 deletions
diff --git a/css/prosemirror.scss b/css/prosemirror.scss index a56ef2d91..4de8e00a2 100644 --- a/css/prosemirror.scss +++ b/css/prosemirror.scss @@ -191,9 +191,9 @@ div.ProseMirror { } // Custom Containers Block - .custom-container { - background-color: var(--custom-container-background, var(--color-background-hover)); - border-left-color: var(--custom-container-border, var(--color-primary-element)); + .callout-container { + background-color: var(--callout-container-background, var(--color-background-hover)); + border-left-color: var(--callout-container-border, var(--color-primary-element)); padding: 1em; padding-left: 2em; border-left-width: 0.3em; @@ -208,7 +208,7 @@ div.ProseMirror { // Block icon &::before { content: ''; - background-image: var(--custom-container-icon, var(--icon-info-000)); + background-image: var(--callout-container-icon, var(--icon-info-000)); background-size: contain; position: absolute; top: calc(50% - 8px); @@ -228,30 +228,30 @@ div.ProseMirror { // Info (default) variables &, &-info { - // --custom-container-background: var(--color-primary-light); - --custom-container-border: var(--color-primary-element); - --custom-container-icon: var(--icon-info-000); + // --callout-container-background: var(--color-primary-light); + --callout-container-border: var(--color-primary-element); + --callout-container-icon: var(--icon-info-000); } // Warn variables &-warn { - // --custom-container-background: var(--color-warning-hover); - --custom-container-border: var(--color-warning); - --custom-container-icon: var(--icon-text-warn-000); + // --callout-container-background: var(--color-warning-hover); + --callout-container-border: var(--color-warning); + --callout-container-icon: var(--icon-text-warn-000); } // Warn error &-error { - // --custom-container-background: var(--color-error-hover); - --custom-container-border: var(--color-error); - --custom-container-icon: var(--icon-error-000); + // --callout-container-background: var(--color-error-hover); + --callout-container-border: var(--color-error); + --callout-container-icon: var(--icon-error-000); } // Success variables &-success { - // --custom-container-background: var(--color-success-hover); - --custom-container-border: var(--color-success); - --custom-container-icon: var(--icon-text-success-000); + // --callout-container-background: var(--color-success-hover); + --callout-container-border: var(--color-success); + --callout-container-icon: var(--icon-text-success-000); } } diff --git a/src/EditorFactory.js b/src/EditorFactory.js index dd81966b7..9dbdc8f69 100644 --- a/src/EditorFactory.js +++ b/src/EditorFactory.js @@ -44,7 +44,7 @@ import { BulletList, TaskList, TaskItem, - CustomContainer, + CalloutContainer, } from './nodes' import { Markdown, Emoji } from './extensions' import { translate as t } from '@nextcloud/l10n' @@ -90,7 +90,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi ListItem, TaskList, TaskItem, - CustomContainer, + CalloutContainer, Underline, Image.configure({ currentDirectory, inline: true }), Emoji.configure({ diff --git a/src/markdownit/containers.js b/src/markdownit/containers.js index 9cdc3dc7e..0e64f62c4 100644 --- a/src/markdownit/containers.js +++ b/src/markdownit/containers.js @@ -29,8 +29,8 @@ const buildRender = type => (tokens, idx, options, env, slf) => { // add attributes to the opening tag if (tag.nesting === 1) { - tag.attrSet('data-container', type) - tag.attrJoin('class', `custom-container custom-container-${type}`) + tag.attrSet('data-callout', type) + tag.attrJoin('class', `callout-container callout-container-${type}`) } return slf.renderToken(tokens, idx, options, env, slf) diff --git a/src/mixins/menubar.js b/src/mixins/menubar.js index c23c9c0c8..e4697b1ba 100644 --- a/src/mixins/menubar.js +++ b/src/mixins/menubar.js @@ -168,39 +168,39 @@ export default [ }, }, { - label: t('text', 'Custom Container'), + label: t('text', 'Callouts'), visible: false, children: [ { label: t('text', 'Info'), class: 'icon-info', - isActive: ['customContainer', { type: 'info' }], + isActive: ['calloutContainer', { type: 'info' }], action: (command) => { - return command.toggleCustomContainer({ type: 'info' }) + return command.toggleCalloutCustomContainer({ type: 'info' }) }, }, { label: t('text', 'Success'), class: 'icon-success', - isActive: ['customContainer', { type: 'success' }], + isActive: ['calloutContainer', { type: 'success' }], action: (command) => { - return command.toggleCustomContainer({ type: 'success' }) + return command.toggleCalloutCustomContainer({ type: 'success' }) }, }, { label: t('text', 'Warning'), class: 'icon-warn', - isActive: ['customContainer', { type: 'warn' }], + isActive: ['calloutContainer', { type: 'warn' }], action: (command) => { - return command.toggleCustomContainer({ type: 'warn' }) + return command.toggleCalloutCustomContainer({ type: 'warn' }) }, }, { label: t('text', 'Error'), class: 'icon-error', - isActive: ['customContainer', { type: 'error' }], + isActive: ['calloutContainer', { type: 'error' }], action: (command) => { - return command.toggleCustomContainer({ type: 'error' }) + return command.toggleCalloutCustomContainer({ type: 'error' }) }, }, ], diff --git a/src/nodes/CustomContainer.js b/src/nodes/CalloutsContainer.js index 0e12833fa..47374b7f9 100644 --- a/src/nodes/CustomContainer.js +++ b/src/nodes/CalloutsContainer.js @@ -25,7 +25,7 @@ import { typesAvailable } from '../markdownit/containers' export default Node.create({ - name: 'customContainer', + name: 'calloutContainer', content: 'paragraph+', @@ -37,7 +37,7 @@ export default Node.create({ return { types: typesAvailable, HTMLAttributes: { - class: 'custom-container', + class: 'callout-container', }, } }, @@ -47,11 +47,11 @@ export default Node.create({ type: { default: 'info', rendered: false, - parseHTML: element => element.getAttribute('data-container'), + parseHTML: element => element.getAttribute('data-callout'), renderHTML: attributes => { return { - 'data-container': attributes.type, - class: attributes.type, + 'data-callout': attributes.type, + class: `callout-container-${attributes.type}`, } }, }, @@ -87,21 +87,21 @@ export default Node.create({ addCommands() { return { - setCustomContainer: attributes => ({ commands }) => { + setCalloutCustomContainer: attributes => ({ commands }) => { return commands.wrapIn(this.name, attributes) }, - toggleCustomContainer: attributes => ({ commands, state }) => { + toggleCalloutCustomContainer: attributes => ({ commands, state }) => { if (!isNodeActive(state, this.name)) { - return commands.setCustomContainer(attributes) + return commands.setCalloutCustomContainer(attributes) } if (!isNodeActive(state, this.name, attributes)) { return commands.updateAttributes(this.name, attributes) } - return commands.unsetCustomContainer() + return commands.unsetCalloutCustomContainer() }, - unsetCustomContainer: () => ({ commands }) => { + unsetCalloutCustomContainer: () => ({ commands }) => { return commands.lift(this.name) }, } diff --git a/src/nodes/index.js b/src/nodes/index.js index 65feda421..89ad98c26 100644 --- a/src/nodes/index.js +++ b/src/nodes/index.js @@ -27,7 +27,7 @@ import TaskItem from './TaskItem' import TaskList from './TaskList' import TrailingNode from './TrailingNode' import Heading from './Heading' -import CustomContainer from './CustomContainer' +import CalloutContainer from './CalloutsContainer' export { Image, @@ -37,5 +37,5 @@ export { TaskList, TrailingNode, Heading, - CustomContainer, + CalloutContainer, } diff --git a/src/tests/markdownit.spec.js b/src/tests/markdownit.spec.js index c44713659..3b0938b0b 100644 --- a/src/tests/markdownit.spec.js +++ b/src/tests/markdownit.spec.js @@ -27,12 +27,12 @@ describe('markdownit', () => { `)) }) - describe('custom containers', () => { + describe('callout containers', () => { typesAvailable.forEach((type) => { it(`render ${type}`, () => { const rendered = markdownit.render(`::: ${type}\nHey there!\n:::`) expect(stripIndent(rendered)).toBe(stripIndent( - `<div data-container="${type}" class="custom-container custom-container-${type}"> + `<div data-callout="${type}" class="callout-container callout-container-${type}"> <p>Hey there!</p> </div>` )) |