medium-editor icon indicating copy to clipboard operation
medium-editor copied to clipboard

Change the default tags for HTML5 support

Open csrnontol opened this issue 7 years ago • 10 comments

I need to use the strikethrough button so I added this feature through the toolbar method. The problem is the selected text is surrounded with strike instead of s or del tag. As you know the strike tag is not supported in HTML5.

How can I change the default tags?

Expected behavior: <s>Text</s> or <del>Text</del>

Actual behavior: <strike>Text</strike> Link

Links: unsoported strike tag, JSFiddle demo

Versions

  • medium-editor: 5.23.3
  • browser: Chrome 63
  • OS: Windows 10

csrnontol avatar Jan 25 '18 17:01 csrnontol

I'm impacted too but I got the luck to manage the issue from server side by forcing the <strike> tag to be used instead of <del> but it's pretty dirty and I don't really like that.

This would not be case for everyone and many ones will be forced to disable this button... At least the tagNames property should be followed to let the user specify what should be used as tag and so make the toggle action working properly. Without this, the text is correctly detected but you can't remove the detected format...

I've tried this on client side but it did not worked:

'strikethrough', // Requires forced 'strike' tag rendering from server side to work
// none of 'tagNames' forms are not working, still not able to 'unstrike' the text
{
	name: 'strikethrough',
	// tagNames: ['del', 'strike'],
	// tagNames: ['strike', 'del']
	tagNames: ['del']
},

So as a dirty workaround I'll keep the forced <strike> rendering from server side...

I also confirm that the <strike> tag is no more supported in HTML5: https://developer.mozilla.org/fr/docs/Web/HTML/Element/strike

Jiab77 avatar May 08 '19 12:05 Jiab77

fixed in the new version https://github.com/yabwe/medium-editor/tree/master/spec

stefanpejcic avatar Jul 23 '19 12:07 stefanpejcic

@stefanpejcic actually I took a look at your commits (https://github.com/yabwe/medium-editor/commit/6522435fd7d06bbc85855d5813c7156d117a999c https://github.com/yabwe/medium-editor/commit/b7b39ab5ce484db6034bf690b6873a03fbf75fe1 https://github.com/yabwe/medium-editor/commit/c5d455db723bd748d0bb7bda6e6db7c830551a3e) and they seemed to only change the tests files (which resulted in tests failing) but didn't modify the behavior.

The CI was failing due to saucelabs errors (probably license expiry or API change): https://travis-ci.org/yabwe/medium-editor/builds/540494800

Now the CI is failing to due to changes you introduced: https://travis-ci.org/yabwe/medium-editor/builds/562556357

paradite avatar Oct 09 '19 08:10 paradite

@stefanpejcic could you please explain me why you've used the <s> tag which as said per the MDN, "is not appropriate when indicating document edits" instead of the <del> tag that we were asking?

See by yourself: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s, it's in the first chapter.

The other issue is that I don't see any body writing a Markdown text and use the <s> tag to indicate deleted text but the semantic <del> tag instead.

Jiab77 avatar Oct 09 '19 10:10 Jiab77

Can you please reopen this, as the commits only change the tests, and not the actual code. The place where the strikethrough tag is inserted is in execActionInternal function and it actually executes a DOM command (this.options.ownerDocument.execCommand(action, false, cmdValueArgument)). So this is using WebApi for wrapping in a <strike> tag, but <strike> has been deprecated. The WebAPI itself should be updated, which is not going to happen soon.

alexghi avatar Nov 27 '19 08:11 alexghi

@Jiab77 I agree with what you're saying.

As the docs says: The HTML <del> element represents a range of text that has been deleted from a document.

I'll create a PR changing the tests and making appropriate changing.

Also, @alexghi I know our community was almost dead, due to Authors being busy and giving access to many people, but anyways, I want you guys to help me get this project up and working again!

sovkay avatar Jun 05 '20 05:06 sovkay

@alexghi I tried, and It seems the only way to resolve this is to add css line-thorough...

As the execCommand [is Obosolete now too] has a command 'strikethrough' which wraps the content in strike tags.

And we can't change that, I guess[Tell me if we can!].

So the solution will be to add if statement which does something to add either del tags or to insert an i tag and put line-through it.

Thoughts?

For people wondering how execCommand works, check this!

sovkay avatar Jun 05 '20 10:06 sovkay

@ksorv I think I've managed the issue on my side so I can probably share the code somewhere?

Jiab77 avatar Jun 07 '20 12:06 Jiab77

@Jiab77 you can share it on here, or anywhere you want, but do remember to share it. I want to clear this one out so we've passing tests.

sovkay avatar Jun 07 '20 13:06 sovkay

@Jiab77 anything?

sovkay avatar Jul 02 '20 15:07 sovkay