getmeuk / contentedit Goto Github PK

Add a flag to ContentEdit that allows the trimming of whitespace from text elements to be disabled, this issue was originally raised and discussed here on CT: GetmeUK/ContentTools#113

Steps to repro:

1. Enter EDIT mode on a page
2. Click to an area to be able to add a table
3. Add the table
4. Single click on the table to select
5. Click the trashcan icon in the toolbox (do this as many times to delete the table as needed)
6. WITHOUT clicking ANYWHER else on the screen (the trash can should have been the last thing you clicked on) if you click the APPLY (save) button, you will enter a mode that is in an error state that you can't get out of unless you refresh the screen.

When using Region.setContent, all current children are detached, after the last child is detached, an empty p is is added to the dom, afterwards the intended content is added, leaving that empty p in front.

This is a bit problematic because I use Region.setContent when restoring auto-saved content. But the next auto-save would then also save that empty p and when restoring the next time, I have two empty p's and so forth. Not to mention that it is confusing to have an empty p at the top of a region.

I tested and it does work on Chromium, but not on Firefox. I'm using Linux (Manjaro).

Hello,

Is it possible that if I add some dynamic HTML like this:

<div class="block">
    <h1 id="headingText">Heading Text</h1>
    <p id="subheadingText">Subheading text</p>
</div>

to the ContentEdit element (like ContentEdit.Text) to prevent removing elements from the DOM when all of the text is removed from them.
Ideally, what I am trying to do is that if you remove the text from h1 tag for example, the caret would stay at the index 0 and if you press the backspace again nothing would happen.

The second question I have is if it is possible to, again, add dynamic HTML to the ContentEdit element and keep the empty tags. For example if I add HTML like this:

<div class="block">
    <h1>Heading text</h1>
    <!-- Gets removed by HTMLString -->
    <div class="emptyBlock"></div>
</div>

Div element with the class of emptyBlock would be removed from the DOM.
I have debugged this little bit and discovered that _Parser.prototype._popTag function of html-string.js removes them, but I am unable to prevent it.
Is there any solution to this?
I know that by adding   to the empty element would prevent it from being removed from the DOM but this doesn't work for me in every case since in some elements I need to add HTML that looks like this:

<svg width="..." height="...">
    <!-- This element again gets removed from the DOM -->
    <path d="..." />
</svg>

Any help would be greatly appreciated.

Hi,

Sorry to bother you with it but I am lost at how I can destroy or disable (maybe even better to disable) a Region.

So to explain I create an editable area like the following.

var region = new ContentEdit.Region( dom_el );

And now I would like to disable the editing on it or destroy the region.

region.destroy(); region.disable();

I hoping to disable the editable area so that it is no longer editable. How would you do this ?
The idea is that I can switch back and forth between editable and non-editable state.

I notice on you ContentTool demo here
http://getcontenttools.com/demo
that you refresh the page when one clicks the red x on the top left.

I have also been here ...
https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/editor.coffee#L284

Just to see how you might have dealt with it in ContentTools. But that doesn't seem to work for me ... nor I can fully understand it to be honest.

Any thoughts on it maybe how I could achieve this? : )

Thank you ! : )

The left key is not working, plus the enter inserts a section before rather than splitting the current.

It looks like my problem is that my [data-editable] is inside a #shadow-root

I the selection being always empty { 0, 0 } ...

I added the Enable_drag_cloning line to my js like this:

editor = ContentTools.EditorApp.get();

editor.init(
	'*[data-editable]', 
	'data-name'
);

ContentEdit.ENABLE_DRAG_CLONING = "True";

The editor starts up and everything is normal, but nothing happens when I try ALT clicking before getting in an editable area or ALT clicking while in an editable area. How is it supposed to work?

Hi!

For now Element inserts itself into the parent element. I think it should be quite opposite - this code should be in the ElementCollection.

First, it will give a better distribution of responsibilities. No longer need to access the private fields of the parent element in Element::mount.

Secondly, it will facilitate extension of ElementCollection. For example, the integration of some carousel library in CE. Most likely it would require a new element - CarouselElement which is a thin wrapper, adapter over the carousel library's api and represents a collection of slides (and therefore inherited from ElementCollection). In particular, the addition of the slide's DOM elements in the document should take place through the library's api and thus be part of CarouselElement. It can be easily implemented through the overloading of attach method on CarouselElement. But with the current realization you still need to redefine Element::mount (and maybe some other elements), so it only creates DOM element and doesn't attaches it to the document if parent is CarouselElement. Naturally this is not the best approach.

Thirdly, it will simplify the implementation of the Fixture. Instead, to check whether the parent is Fixture, you can simply inherit the Fixture from ElementCollection and override the mount.

The same applies to unmount.

I do not know how many changes and backward incompatibilities it can cause. At least, in CT mount should not be called on the focused element itself, but on its container.

What do you think about it?

Hi,

Is there a way to stop an empty element being removed? An example would be Bootstrap icons
<span class="glyphicon glyphicon-download-alt"></span>
The above would be removed. This is of course the desired behaviour most of the time : ) But not in this case.

Btw you have done an great job ... I am so happy I found it : )

Mobile devices can't normal in operation, the tool bar to cover the content area lead to problems such as inconvenient, hope to be able to attach importance to the use of mobile devices.thank you

Hello! i want to know like we are changing the content of a

tag, can we edit the properties of a button same way ? Lets say i want to change the background color of a button. and when i select the button i can change the properties thorough dialog box ?

Hi,

I am not sure if it's a bug or not but I have to call region.commit() after each new region.

var region = new ContentEdit.Region( item );
// the following line is needed otherwise region.lastModified() will not be null
region.commit(); 
console.log(region.lastModified());

Geza

Hello,

When using multiple regions, and one region contains a single empty paragraph, clicking in another region remove the paragraph (because empty content), but then we can't click again to edit the region.

You should not remove an element if its region has only one child, maybe like this in text.coffee :

if @content.isWhitespace() and @can('remove')
    # Detatch element from parent if empty
    if @parent() and @parent().children.length > 1
        @parent().detach(this)

Chrome Version 54.0.2840.98 (64-bit)
OS X 10.11.3

To reproduce open the index.html in repo. (sandbox)
https://github.com/GetmeUK/ContentEdit/blob/master/sandbox/index.html

Hold the ctrl key down while you click on the static element "I am a static item". "Choose inspect element" (You can also choose "copy" ). The element will start dragging. The same on Safari but not on Firefox.

There's a bug in the @fromDOMElement function of the Image class:

Relevant part:

if attributes['width'] is undefined
    if attributes['height'] is undefined
        attributes['width'] = domElement.naturalWidth
    else
        attributes['width'] = domElement.clientWidth
if attributes['height'] is undefined
    if attributes['width'] is undefined # <-- attributes['width'] will never be undefined as being set in the block above
        attributes['height'] = domElement.naturalHeight
    else
        attributes['height'] = domElement.clientHeight

As example, if width and height of the img are not given, then the attributes are set to the following values:

attributes['width'] = domElement.naturalWidth
attributes['height'] = domElement.clientHeight

In cases when the image is not displayed in its natural size during parsing, the result is a deformed image.

Any plans to add font formatting (family, color)? Or how does one go about doing this?

Hi again :)

When removing the text from a fixture and then saving, I get this error:

Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.
at _EditorApp.save (content-tools.js:8632)
at _EditorApp.stop (content-tools.js:8682)
at IgnitionUI. (content-tools.js:8309)
at IgnitionUI.ContentTools.ComponentUI.ComponentUI.dispatchEvent (content-tools.js:5768)
at IgnitionUI.ContentTools.IgnitionUI.IgnitionUI.confirm (content-tools.js:6024)
at HTMLDivElement. (content-tools.js:6092)

You can test with the sandbox (eg. try deleting the text from the h1 tag and then saving).

Say you have a Text whose DOM element currently contains the text A. Now you enter a B, but not by pressing the B key, but via the numpad: Alt+066. (This input mode could be Windows-specific.) You'll see the text AB in the browser, as you'd expect. When you leave that input, it will revert back to A (i.e. the B gets deleted again, which is an error).

My working theory is that this is because the Text._keyUp event for the last key (6 or Alt) happens before the browser adds the input character in the DOM. Text._keyUp then triggers Text._syncContent which reads A from the DOM node. The B character isn't there yet, so _syncContent misses it and only sees the characters A. When blurring the input node, it'll revert back to the last cached content A.

Hello, I'm currently implementing your awesome tool in my CMS, but I encountered a weird bug when simply applying a bold or italic on text.

See it by yourself on the demo :

1. Start a new paragraph
2. Write "aaaaa bbbbb"
3. Select "bbbbb"
4. Set it bold or italic
5. Bug happen

Another way to see it :

1. Start a new paragraph
2. Write "aaaaa bbbbb"
3. Set bold to "aaaaa"
4. Set italic to "bbbbb"
5. Select all text
6. Set it bold
7. Bug happen again

In both cases, selection seems to change before applying.

Hey there, thanks for the great library!

Nice to see that it's on npm now. It would be also great to add possibilty to require it while making bundle with browserify or another CommonJS bundler (by exporting ContentEdit not only to the global scope but with module.exports too).