TinyMCE how to detect an image is removed - tinymce

I've been looking into the documentation of TinyMCE 4 docs and I can't figure out how to detect an image in WYSIWIG is removed.
When that occurs I want to remove it's parent, something simillar that is explained here: API 3. I am using version 4 by the way.

I found something that I can work with, I might going to use DOMNodeRemoved event tinymce get image details on deletion

Mutation events like DOMNodeRemoved are deprecated. It is better to use Mutation Observes instead to detect removed nodes.
You may check for removed nodes and additaionally check if an img has been removed.

Related

Fancytree dnd5 triggering multiple loads of lazy nodes on hover

I just updated my application from the old Dnd extension to Dnd5 and I'm now seeing multiple/many server AJAX calls (usually 5 or 6) when I hover over lazy-load nodes while dragging. I have only implemented the dragStart, dragEnter, and dragDrop callbacks, and I only see the dragEnter callback being called once when I hover. Is there some special handling or response required from the lazyLoad callback to prevent this? I should also point out that I also updated to the latest version of Fancytree (2.34.0) so perhaps something else has changed that is causing this? (My tree works fine otherwise.)
Thanks!
Seems you found a bug. This will be fixed in Fancytree 2.34.1

Manage image deletion in a WYSIWYG editor

When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?
In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?
That's a nice question there. And yeah, for sure the server would fill up with unused images in some point. I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha. I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit. For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use.
I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.

GitHub Gist CSS

I've embedded a GitHub Gist in a website for the first time, and am having some issues with how it appears. It seems like something in my Hugo theme's CSS is adding space above line 1 and below line 13.
The problematic display can be seen here.
Anyone have thoughts on how I could remove that space? I've never see a Gist render like this before for, nor can I find any questions on here that get at what I am seeing.
Thanks for your help!
gist-embed adds a class of data to the table container. It is used to customize the look of the embedded gist. Adjust your CSS selectors to fix the problem. I am sure you are inadvertently styling the data class directly, when in actuality you want to style a compound selector article.data.
Revisit your CSS code and adjust your selectors to reflect what you desire.

Was default_marker removed from mapbox-gl.js

I am trying to use the default_marker and/or secondary_marker in mapbox-gl.js however it appears they have been removed from the sprite.json in streets-v9 (probably v8 too). I've found a working example in streets-v7 where they were part of the sprite.json/sprit.png, but they are gone now.
How can I get these back or what is the new replacement? I've gone through the new sprint.png but I don't see anything similar.
Apologies for the change, ongle! We've recently worked to standardize the icons available across all the Mapbox styles which, unfortunately, required some breaking changes.
The closest replacement to default_marker is marker-15. The appearance of this marker will be different per style.
You may also choose to upload your own marker image per this guide.

change custom annotation text without removing them iPhone

I have a query which is almost similar to my previous question but Since I didnt got the answer there Here's the another scenario
I have 2 annotation on the map with label 1 and 2 now I want to replace their values.
Is it possible without removing both the annotation and inserting them again?
Pls go through the project from this link Moving annotations. It changes the coordinates without removing them. I think you can try something similar to that.
But i think its also possible if you
have reference to that annotation.