arcs- / medium-button Goto Github PK

Could you please change the name value in the bower.json file to medium-button? The current name is invalid according to bower (I get a warning everytime I update / install bower components)

bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes

I want to execute somebutton.click() (some button part of the toolbar) on clicking a custom javascript button.
Is there a function to do that already?

Hi, thanks for the great extension! However I'm still experiencing the same issue that was mentioned in #2 about not being able to unformat text unless you select some text next to it.

I am using Chrome Version 56.0.2924.87 on Mac OS X 10.11.6. This also happens in the demo page:

After clicking a button it's not changed as active. Also it's not possible to delete the formatting of the selected text by clicking the button again.

Please change this behavior so the buttons would work as the standard button.

Thanks!

Hi,

You've recently added a dependency to the bower.json for MediumEditor 4.x.x (see here), however, this plugin worked fine for me with MediumEditor 5.x.x. Could this please be added to the dependencies?

Thanks.

editableInput event is not triggered when some medium-button takes effect. this causes inconsistent state.

Trying to apply formatting across paragraphs results in unexpected formatting in the form of extra new lines.
Also, is there a way to get the new buttons behaviours to be more the original medium editor's?
For e.g. Consider the text "Medium Editor" If I apply bold to "Medium " and "Editor" separately, the html should ideally be<b>Medium Editor</b>rather than <b>Medium </b><b>Editor</b>

when I repeatedly click my button I first get the actual htmlParentNode but on second and subsequent click I get a div that is the htmlParentNode's parent:

	extensions: {
		'save': new MediumButton({
			label: 'save',
			action: function (html, mark, htmlParentNode) {
				var c_id = jQuery(htmlParentNode).closest('div.editable').attr('id');
				var contents = htmlParentNode.innerHTML; // innerText
				
				alert(c_id + '\n'+ contents);
				return html
			}
		}), 

am i doing something wrong or is this a bug?
could it be as the parent is now of the menu button and not the editor div? ie this:
var sel = window.getSelection(); var parent = sel.anchorNode.parentElement;

I'm actually trying to get the id of the div that the editor instance is attached to as I have a page with many editors/ divs of editable class - is there an easy way to do that? (my goal is ajax with many editable divs).

thanks

----- edit - i'm pretty sure the parent of parent is being returned. here's a kludgy workaround

`		extensions: {
			'save': new MediumButton({
				label: 'save',
				action: function (html, mark, htmlParentNode) {
					var maybe = jQuery(htmlParentNode).find('div.editable'); //.length !== 0)
					if (maybe.length !== 0){
						htmlParentNode = maybe;
					}
					var c_id = jQuery(htmlParentNode).attr('id');
					var contents = htmlParentNode.innerHTML; // innerText
					
					alert(c_id + '\n'+ html);
					return html
				}
			}),`

Hi !
Thanks for creating this nice MediumEditor extension.

I need to get the parent node of the selected text once the button is clicked.
Is there a way to easily get that ? Or maybe by implementing :

var editor = new MediumEditor('.editor', {
    buttons: ['pop'],
    extensions: {

      'pop': new MediumButton({
        label:'POP', 
        action: function(html, mark, htmlParentNode){
          console.log(htmlParentNode);
          return html; 
        }
      })

    }
});

?
Have a nice day

Hi,
started out with medium-editor, needed a create a button that sets a custom style (tag and class).
Found this medium-editor extension, which worked but it wasn't able to unformat a portion of a previously selected text.

Started to look at the code and begin by doing a complete rewrite of the module (adding code seperation, removing global variables), but after spending an hour or two went to explore the medium-editor documentation on extensions and realised this package is not needed anymore.

The same can be achieved by the code below, but with a additional dependency, but adding feature to format/unformat a portion of the initial selection. Such as removing heading style for some of the words.

// add "rangy" dependency, makes working with selections trivial
// Ref: https://github.com/timdown/rangy
import rangy from 'rangy/lib/rangy-core';
import 'rangy/lib/rangy-classapplier';

// won't initiate if already initiated
rangy.init();

/**
 * Basic custom button that highlights text
 * Based on: https://github.com/yabwe/medium-editor/blob/5.15.1/src/js/extensions/WALKTHROUGH-BUTTON.md
 */
const HighlighterButton = MediumEditor.extensions.button.extend({
  tagNames: ['mark'],
  contentDefault: '<b>H</b>',
  aria: 'Highlight',
  // Note: reference the Button interface for more options depending on needs
  // Ref: https://github.com/yabwe/medium-editor/tree/5.15.1/src/js/extensions#button

  init: function () {
    // call parent class, similar as in ES6 classes super() call
    MediumEditor.extensions.button.prototype.init.call(this);

    // rangy takes cares of all of the magic
    // TODO: should create an class applier for each element tag?
    this.classApplier = rangy.createClassApplier('custom-header', {
      elementTagName: this.tagNames[0],
      normalize: true
    });
  },

  handleClick: function (event) {
    this.classApplier.toggleSelection();
  }
});

HighlighterButton is used the same this module:

const el = document.getElementById('text-editor');
const config = {
  toolbar: {
    buttons: [
      'highlight'
    ]
  },
  extensions: {
    imageDragging: {},
    'highlight': new HighlighterButton()
  }
};

const editor = new MediumEditor(el, config);

I think it's an good idea to wrap this code in a function, similar as this module, so that no need to initiate and add rangy manually.

I'm using Medium button, but it is not always working for my textarea. The only way that I can consistently get a new button to update the content is if I apply one of the standard Medium Editor buttons to the content after it. I think it might have something to do with this yabwe/medium-editor#942, but I'm not sure.

Is this still active, can anyone help me with this?

Zip file from this link not have src directory inside the zip. it only has README.md and LICENSE files

I've upgraded to medium-editor 5.x now, and this extension no longer works. Do you have plans to update it to work with the 5.x API?

I copy your example in http://stillhart.biz/project/MediumButton/

but it dose not work in my code .

I am enclosing the selected part in a span element. I want to provide a unique id for each such selection so as to use them in my code later.
I tried this.

var selectionid = 0;
...
    start:'<span class="selected" id='+selectionid+'style="background-color: #FFFF00">',
    end:'</span>',

Any ideas?

I can't understand something :(...
How to make button to insert fro example some div with class but want this div to be outside of the pragraph.
For example:
I have this text:

    <p>Lorem ipsum. Lorem Ipsum. Lorem Ipsum.</p>

Want to make this markup:

    <p>Lorem ipsum.</p>
    <div class="someclass">Lorem Ipsum.</div>
    <p>Lorem Ipsum.</p>

Not:

    <p>Lorem ipsum.
    <div class="someclass">Lorem Ipsum.</div>
    Lorem Ipsum.</p>

Hello! I am instantiating the plug in in my ember app, on the afterRender hook like so:

let elements = document.querySelector('.comment-content-content'); 
    		    	
var editor = new MediumEditor(elements, {
        disableEditing: true,
    	  toolbar: {
    	    buttons: ['createCommentSection']
    	  },
    	extensions: {
          'createCommentSection': new MediumButton({
    			label: 'Do post request with the selected text',
    		    action: function (html, mark, parent) {    				                    _this.send('createCommentSection', html, mark, parent) ;
    				         return html ;
    		   }
    		})
    	}
    })

In the createCommentSection action am doing something like this:

let highlightedText = text ;
let oldContent = this.get('comment.content') ;
let newContent = oldContent.replace(highlightedText, `<span style="background-color: #ffff94">${highlightedText}</span>`) ;

as well as making a post request with the content.
My issue is, that sometimes (unfortunately I can't define when. Because in the same exact circumstances it behaves differently), I get this error:

Any ideas why ?

P.S.: I am trying to use it on top of froala-editor which I use for displaying comments. That's why I want a custom function for highlighting since I need to also update the content of the editor.

Very nice tool! Thank you!

There are a couple of minor issues that I have seen. First, the use-indicator seems to always be on for custom buttons. Second, clicking the button a second time to unformat the text does not work, unless you select all of the formatted text, and some unformatted text next to it, and then click the button.

My buttons look like this:

'red':  new MediumButton({label:'<span style="color:red">R</span>', start:'<span style="color:red">', end:'</span>'}),
'yellow-highlight':  new MediumButton({label:'<span style="background-color:yellow">Y</span>', start:'<span style="background-color:yellow">', end:'</span>'}),

Any ideas?

I've been adding module.exports = MediumButton for easier compatibility with browserify. It would have been better to automatically have the package in npm.