🚚 (#2184): rename feature to callouts

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

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>`
 				))