Make Custom BBCode Work Like an Existing Tag.

[markmorris]

So i have a custom BB code but when i select the text and then press my custom button it doesnt behave like the rest. Example, when i highlight some text and press bold it will toggle the selected text bold or not. However after adding my custom BB tag it will constantly just spam my tags in the wysiwyg. So how do i get them to behave the same. Here is my code.

    sceditor.formats.bbcode.set('sung', {
        tags: {
            sung: null
        },
        allowsEmpty: false,
        isSelfClosing: false,
        format: '[sung]{0}[/sung]',
        html: '<sung>{0}</sung>',
        quoteType: sceditor.BBCodeParser.QuoteType.auto
    });

    sceditor.command.set('sung', {
        exec: function() {
            var editor = this;
            editor.wysiwygEditorInsertHtml('<spoken>', '</spoken>')
        },
        txtExec: ['[sung]', '[/sung]'],
        tooltip: 'Inserts a Sung Role'
    });

[brunoais]

To prevent the tags from being repeatedly spammed, you need to add logic to test if the tag is already there.
See if this example from the source code helps enough: https://github.com/samclarke/SCEditor/blob/master/src/lib/defaultCommands.js#L373

[markmorris]

@brunoais I understand that but surly as the logic is already there you can just run a function? i literally need the same logic as a bold tag but cant find that anywhere, the only thing i can find is

	bold: {
		exec: 'bold',
		tooltip: 'Bold',
		shortcut: 'Ctrl+B'
	},

Surly theres a better way to get the same logic then to have to write it all over again?

Also

txtExec: ['[sung]', '[/sung]'],

works fine.

[brunoais]

The bold button is executed by the browser itself, not SCE.
See here for the explanation on the API the browser offers: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

[live627]

However after adding my custom BB tag it will constantly just spam my tags in the wysiwyg

I assume you want to toggle the tag on and off. Unfortunately, this requires some extra code.

function unwrap(wrapper) {
	var docFrag = document.createDocumentFragment();
	while (wrapper.firstChild) {
		var child = wrapper.removeChild(wrapper.firstChild);
		docFrag.appendChild(child);
	}

	wrapper.parentNode.replaceChild(docFrag, wrapper);
}
sceditor.formats.bbcode.set('sung', {
	tags: {
		sung: null
	},
	allowsEmpty: false,
	isSelfClosing: false,
	format: '[sung]{0}[/sung]',
	html: '<sung>{0}</sung>',
	quoteType: sceditor.BBCodeParser.QuoteType.auto
});

sceditor.command.set('sung', {
	state: function (parent) {
		return sceditor.dom.closest(parent, 'sung') ? 1 : 0;
	},
	exec: function() {
		var
			editor = this,
			parent = editor.getRangeHelper().parentNode(),
			el = sceditor.dom.closest(parent, 'sung');
		if (el)
			unwrap(el);
		else
			editor.wysiwygEditorInsertHtml('<sung>', '</sung>')
	},
	txtExec: ['[sung]', '[/sung]'],
	tooltip: 'Inserts a Sung Role'
});

Bare minimum testing. I just made sure the tag toggles around a word and that the button activates. It may or may not work to your satisfaction.