Coder Social home page Coder Social logo

editing's Introduction

Web Editing Working Group

Welcome to the GitHub repository of the Web Editing Working Group (formerly Editing Task Force of the Web Apps Working Group). Its mission is to gather and incubate emerging ideas as they pertain to rich text editor development.

Details can be found in the Web Editing Working Group Charter.

Actively developed ideas/specs

Graduated 1

Backlog 2

Archive 3

Process

Participation

Participation from ALL who are passionate about writing text editors on the web or have a question/suggestion on the topic is welcomed!

There are couple of things you should know before you proceed.

In accordance with W3C contribution requirements, if you intend to create PRs and/or spend a significant amount of time on these discussions, you should join the Working Group and follow our Web Editing WG contribution guidance.

Mailing List

The group continues to use the legacy [email protected] for archived email communications. View the archive

IRC

Server: irc.w3.org

Channel: #editing

Meetings

The Editing Working Group meets remotely at 8:00AM PST / 4:00PM UTC (3:00PM UTC during DST March 13th - November 6th, 2022), on the second Thursday of every month. Meetings will cover issues marked with the "Agenda+" label. If you would like to discuss an existing issue, please tag it with "Agenda+" label so it can show up in the agenda query. If it is a new issue, please create and tag it with "Agenda+" label.

Meeting Invite

Zoom Meeting Joining Instructions

Meeting notes

Meeting notes are currently mailed out to the mailing list.

Previously, meeting notes were archived here:

2022 Meetings
2021 Meetings

Footnote

1 Proposals that resulted in being sent to the appropriate WG as a recommendation to be specced.

2 Proposals that we haven't gotten to discussing yet.

3 Anything that have been discussed but the proposal got rejected for some reason. Or any other doc that is no longer relevant.

editing's People

Contributors

afbarstow avatar alexkeng avatar anaskim avatar avidrissman avatar ayg avatar bocupp-microsoft avatar caub avatar dandclark avatar darobin avatar dontcallmedom avatar dway123 avatar howard-e avatar janiceshiu avatar johanna-hub avatar johanneswilm avatar ms2ger avatar plehegar avatar rakuco avatar rniwa avatar sanketj avatar saschanaz avatar sideshowbarker avatar siusin avatar snianu avatar spocke avatar swickr avatar tabatkins avatar tomayac avatar travisleithead avatar ylafon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

editing's Issues

How does cE=typing support IME text replacement?

IMEs do inline composition and can even replace existing text (using conversion for instance). This means they expect to be able to replace existing content. Since we don't support replace/delete, how does this work?

IMEs also have special styling for compositions. Do we have special considerations there?

how does cE=typing handle autocorrect and spelling suggestions?

Have a look at issue #28 for the start of this discussion. Summary: we thought of limiting AC's effect to individual text nodes, @rniwa strongly opposed.

In my opinion contentEditable=typing should allow editor devs to leverage the UA/OS spellchecker and autocorrect. Also, the end-user's experience using such an editor should be similar to using a native rich text editor (same red squiggles, same OS-native popup balloons etc...)

We may have to spec an Autocorrect Intent that passes enough information for the editor dev to do the replacement operation themselves. The AC Intent would fire when:

  • UA/OS decides to automatically correct text as the user types
  • the user right-clicks on incorrect text and selects a replacement word from the popup menu.

If AC works across partially-styled text (as Safari currently does) then AC has the potential to delete DOM Elements, therefore the default behavior of this intent under cE=typing should be "do nothing".

As an editor dev I suspect I would be able to perform the correction in the DOM if given:

  • the Range representing the original text content that is incorrect (the misspelled word)
  • the unstyled, plain-text proper spelling as a simple character string.

This would be a bit more work for editor devs compared to text-node only AC, but the upsides are:

  • more control for editor dev
  • better UX for users

Thoughts?

Should undo/redo be beforeInput events?

How do we determine when we need a new event? Or is everything just going to use beforeInput? This also applies to custom events if we support them, like 'checkout' event or 'save' event.
-From MS Office Team

What to do with execCommand?

Currently the proposals we have are:

  1. Spec it and have it only work within an editing host (as now).
  2. Spec it and have it work independently of editing hosts.
  3. Spec it, but under a different name, and make it work only within an editing host.
  4. Spec it, but under a different name, and make it work independently of editing hosts.
  5. Spec only those parts that are already inter-operable, remove the rest.
  6. Deprecate it and don't spec it.
  7. Deprecate it and spec it.

Prevent recursive beforeInput calls

Copied from DOML3 Bugzilla https://www.w3.org/Bugs/Public/show_bug.cgi?id=25683

Masayuki Nakano 2014-05-13 12:26:16 UTC
I've commented about "unsafe to dispatch events" case in bug 23913.

Similar issue as bug 23913 exists with focusin, focusout and DOMNodeRemoved since they and beforeinput are defined the timing to be dispatched by D3E.

According to Olli, while content is changing, it's unsafe to dispatch DOM events because rendering engine cannot handle changes at random times. An event listener may change DOM or close windows or whatever.

"unsafe" means that no unexpected DOM tree or layout changes (or other changes, like new page loads etc). In general it means that if scripts would run during that time, it would most probably leads to sec-critical bugs.

So, I'd like to suggest that unloading document, changing DOM tree or changing editor content should be defined as "may be unsafe". If a browser needs to dispatch an event but it's impossible due to unsafe state, D3E should allow browsers to dispatch events immediately after becoming safe. Then, cancelable event may not be able to prevent default action.

Comment 1 Olli Pettay 2014-05-13 12:32:13 UTC
"unsafeness" is implementation detail, but DOMNodeRemoved has, AFAIK,
caused some pain to all the implementations.

I don't think the spec should have unsafeness defined.
We should perhaps avoid adding new DOMNodeRemoved-type of events, but
implementations should need to deal with the unsafeness of the existing
events.

Comment 2 Anne 2014-05-13 12:51:24 UTC
We should not define mutation events at all I think as we're still planning on killing them.

We should be clearer about how events interact with the event loop.

Comment 3 Olli Pettay 2014-05-13 13:07:37 UTC
(In reply to Anne from comment #2)

We should not define mutation events at all I think as we're still planning
on killing them.
Sure, but there are other tricky (tricky at least in some implementations) events

We should be clearer about how events interact with the event loop.
That doesn't really have much to do with unsafeness stuff.

Comment 4 Travis Leithead [MSFT] 2014-05-23 22:19:43 UTC
Rather than document the concept of unsafe, I like the approach that HTML5 took with focus management, which can be seen here:

http://www.w3.org/html/wg/drafts/html/master/single-page.html#dom-focus

The idea is that each element has a "locked for focus" flag. The flag is checked before focus is switched (this is presumably how focusin and focusout are made safe from the recursion--though HTML5 doesn't mention these events in the focus update steps (http://www.w3.org/html/wg/drafts/html/master/single-page.html#focus-update-steps).

(Filed https://www.w3.org/Bugs/Public/show_bug.cgi?id=25877 on HTML5 to update to include these two.)

So, for beforeinput, we could use the same tactic

  1. If target of the beforeinput event is beforeinput-locked, then abort;
  2. Make the target of beforeinput event "beforeinput-locked";
  3. Dispatch beforeinput;
  4. Clear the "beforeinput-locked" flag on the target;
  5. If beforeinput was canceled, then abort;
  6. Update DOM (with content as described by beforeinput event)

This algorithm basically just eliminates the recursion (rather than allowing the event to be randomly delayed and made non-cancelable as a result).

If we allow execCommand to generate beforeinput, then the following scenario could occur:

  1. User Types "A" into input box "input"
  2. (keydown event dispatched at "input" and is not cancelled)
  3. beforeinput event dispatched at "input"
    3.1. Event handler for beforeinput event invoked
    3.2. Event handler calls execCommand("insertText", .. "B") (on "input")
    3.3. (see below)
    3.4. Event handler cancels the beforeinput event

In conclusion, the "input" has a value of "B".

In step 3.3., the beforeinput event might have been dispatched, but the "beforeinput-locked" flag prevents it from firing. This is actually good because this was a script-initiated insertion (synchronously performed) which the developer would otherwise need to ignore in a recursively-invoked beforeinput event handler anyway. A similar situation would arise if the "input" target's value attribute was modified in the handler (assuming that beforeinput fired for script-initiated changes too--which I don't think we want to enable). I can't think of how to force a copy/paste operation (outside of execCommand) that is synchronous, but if it can be done, this algorithm protects that too.

Also note: the algorithm only locks one element at a time, so it's possible to have "input transfer" scenarios, where your beforeinput handler catches the input in order to redirect it into another input box or contenteditable.

Comment 5 Masayuki Nakano 2014-05-25 03:05:52 UTC
(In reply to Travis Leithead [MSFT] from comment #4)

  1. If target of the beforeinput event is beforeinput-locked, then abort;

If browsers do so, it could break compatibility with some browsers which don't support "beforeinput" since such browsers don't need to check it and may allow text input at that time.

If we allow execCommand to generate beforeinput, then the following scenario
could occur:

  1. User Types "A" into input box "input"
  2. (keydown event dispatched at "input" and is not cancelled)
  3. beforeinput event dispatched at "input"
    3.1. Event handler for beforeinput event invoked
    3.2. Event handler calls execCommand("insertText", .. "B") (on "input")
    3.3. (see below)
    3.4. Event handler cancels the beforeinput event

In conclusion, the "input" has a value of "B".

In step 3.3., the beforeinput event might have been dispatched, but the
"beforeinput-locked" flag prevents it from firing. This is actually good
because this was a script-initiated insertion (synchronously performed)
which the developer would otherwise need to ignore in a recursively-invoked
beforeinput event handler anyway. A similar situation would arise if the
"input" target's value attribute was modified in the handler (assuming that
beforeinput fired for script-initiated changes too--which I don't think we
want to enable). I can't think of how to force a copy/paste operation
(outside of execCommand) that is synchronous, but if it can be done, this
algorithm protects that too.

This sound good.

Also note: the algorithm only locks one element at a time, so it's possible
to have "input transfer" scenarios, where your beforeinput handler catches
the input in order to redirect it into another input box or contenteditable.

Did you mean that "beforeinput-locked" is document or window wide state?

Comment 6 Travis Leithead [MSFT] 2014-05-28 01:04:43 UTC
(In reply to Masayuki Nakano from comment #5)

(In reply to Travis Leithead [MSFT] from comment #4)

  1. If target of the beforeinput event is beforeinput-locked, then abort;

If browsers do so, it could break compatibility with some browsers which
don't support "beforeinput" since such browsers don't need to check it and
may allow text input at that time.

A valid concern; I don't believe anyone implements beforeinput yet, so these behavioral differences may not be a concern. If browsers add it, yes it could change behavior for users, but adds the functionality.

Also note: the algorithm only locks one element at a time, so it's possible
to have "input transfer" scenarios, where your beforeinput handler catches
the input in order to redirect it into another input box or contenteditable.

Did you mean that "beforeinput-locked" is document or window wide state?

I expect the "beforeinput-locked" flag to be per-element.

beforeinput should be fired only when the DOM change is caused by direct input by keypress or composition

Copied from DOML3 Bugzilla https://www.w3.org/Bugs/Public/show_bug.cgi?id=23913

Masayuki Nakano 2013-11-25 10:03:05 UTC
I strongly believe that beforeinput should be fired only when:

  • the DOM change is caused by printable key press event (or Enter key etc.)
  • the DOM change is caused by composition (i.e., IME)

The reason is, if beforeinput is fired at all DOM changes, the implementation becomes very complicated and web apps must not want the events which are caused by value change by their script.

Additionally, if we allow to dispatch beforeinput for all DOM changes, it may cause nested events. E.g., in beforeinput event handler, script changes the editor value again, beforeinput is fired again before finishes the previous beforeinput dispatching. This is dangerous.

Similarly, editor commands shouldn't cause beforeinput event since they can be kicked by execCommand() method.

Comment 1 Ojan Vafai 2013-11-25 23:57:06 UTC
I think you can generalize to firing beforeinput only for user-actions, not script. I can think of other user actions that you'd want beforeinput to fire for than just key input (e.g. cut/paste from a menu).

This is already how the input event works, so having beforeinput match that makes sense.

Comment 2 Masayuki Nakano 2013-11-26 00:13:58 UTC
(In reply to Ojan Vafai from comment #1)

I think you can generalize to firing beforeinput only for user-actions, not
script. I can think of other user actions that you'd want beforeinput to
fire for than just key input (e.g. cut/paste from a menu).

I don't want to fire beforeinput at cut/paste. As I said, it can be performed from JS. Additionally, Gecko cannot distinguish if the editing action is performed from JS or user action. If it should be fired only when user executes it, we need for several years for implementing this feature.

This is already how the input event works, so having beforeinput match that
makes sense.

At least on Gecko, input event is fired when the editor value is changed always.

The important difference between beforeinput and input is, beforeinput is cancellable. I.e., it MUST be fired before modifying editor value. This means that beforeinput may be nested if beforeinput handler causes another beforeinput. (input event isn't cancellable, therefore, browser can wait safe time to dispatch input event.)

Comment 3 Ojan Vafai 2013-11-26 00:19:01 UTC
(In reply to Masayuki Nakano from comment #2)

(In reply to Ojan Vafai from comment #1)

I think you can generalize to firing beforeinput only for user-actions, not
script. I can think of other user actions that you'd want beforeinput to
fire for than just key input (e.g. cut/paste from a menu).

I don't want to fire beforeinput at cut/paste.

Why?

As I said, it can be
performed from JS. Additionally, Gecko cannot distinguish if the editing
action is performed from JS or user action. If it should be fired only when
user executes it, we need for several years for implementing this feature.

That seems like a bug Gecko needs to fix. Doesn't make sense to define the standard around a Gecko bug.

This is already how the input event works, so having beforeinput match that
makes sense.

At least on Gecko, input event is fired when the editor value is changed
always.

In this simple test case, that doesn't seem to be the case:
http://plexode.com/eval3/#s=aekVQXANJVQMbAx1VRllVQlNGQgFKRR5HUFAfHRCWmJqcHz1PHXKeoE1QSEhGU6UQch8DDQNLkZNwD24JCKJQCAoPUE91AR4BYAkKAVytAdkBw8UIs7W3yg9oAQzRCHUdQ7gIHK1era3cxsjiV0JNVkbQAcejdoDLwAA=

The important difference between beforeinput and input is, beforeinput is
cancellable. I.e., it MUST be fired before modifying editor value. This
means that beforeinput may be nested if beforeinput handler causes another
beforeinput. (input event isn't cancellable, therefore, browser can wait
safe time to dispatch input event.)

I don't think it makes sense for beforeinput and input to fire for a different set of actions.

Comment 4 Masayuki Nakano 2013-11-26 00:37:52 UTC
(In reply to Ojan Vafai from comment #3)

(In reply to Masayuki Nakano from comment #2)

(In reply to Ojan Vafai from comment #1)

I think you can generalize to firing beforeinput only for user-actions, not
script. I can think of other user actions that you'd want beforeinput to
fire for than just key input (e.g. cut/paste from a menu).

I don't want to fire beforeinput at cut/paste.

Why?

As I said, it can be
performed from JS. Additionally, Gecko cannot distinguish if the editing
action is performed from JS or user action. If it should be fired only when
user executes it, we need for several years for implementing this feature.

That seems like a bug Gecko needs to fix. Doesn't make sense to define the
standard around a Gecko bug.

I don't think that it's very hard to implement on some browsers, the spec won't available at least for a long time. It doesn't make happy anybody.

This is already how the input event works, so having beforeinput match that
makes sense.

At least on Gecko, input event is fired when the editor value is changed
always.

In this simple test case, that doesn't seem to be the case:
http://plexode.com/eval3/

s=aekVQXANJVQMbAx1VRllVQlNGQgFKRR5HUFAfHRCWmJqcHz1PHXKeoE1QSEhGU6UQch8DDQNLk

ZNwD24JCKJQCAoPUE91AR4BYAkKAVytAdkBw8UIs7W3yg9oAQzRCHUdQ7gIHK1era3cxsjiV0JNVk
bQAcejdoDLwAA=

Does it true for all cases? E.g., execCommand().

The important difference between beforeinput and input is, beforeinput is
cancellable. I.e., it MUST be fired before modifying editor value. This
means that beforeinput may be nested if beforeinput handler causes another
beforeinput. (input event isn't cancellable, therefore, browser can wait
safe time to dispatch input event.)

I don't think it makes sense for beforeinput and input to fire for a
different set of actions.

beforeinput is used for cancelling user input. On the other hand, input is used for taking some reaction for user input. So, beforeinput only fired at caused by cancellable action does makes sense even if there are some cases input event is fired without beforeinput.

Comment 5 Ojan Vafai 2013-11-26 01:30:54 UTC

This is already how the input event works, so having beforeinput match that
makes sense.

At least on Gecko, input event is fired when the editor value is changed
always.

In this simple test case, that doesn't seem to be the case:
http://plexode.com/eval3/

s=aekVQXANJVQMbAx1VRllVQlNGQgFKRR5HUFAfHRCWmJqcHz1PHXKeoE1QSEhGU6UQch8DDQNLk

ZNwD24JCKJQCAoPUE91AR4BYAkKAVytAdkBw8UIs7W3yg9oAQzRCHUdQ7gIHK1era3cxsjiV0JNVk
bQAcejdoDLwAA=

Does it true for all cases? E.g., execCommand().

Ah. You're right that execCommand fires input in WebKit and Gecko. That seems fine to me. execCommand is a weird, crazy API. It's fine for it to behave a bit weird. The most common use of execCommand is to map it to toolbar buttons that the user presses anyways.

The important difference between beforeinput and input is, beforeinput is
cancellable. I.e., it MUST be fired before modifying editor value. This
means that beforeinput may be nested if beforeinput handler causes another
beforeinput. (input event isn't cancellable, therefore, browser can wait
safe time to dispatch input event.)

I don't think it makes sense for beforeinput and input to fire for a
different set of actions.

beforeinput is used for cancelling user input. On the other hand, input is
used for taking some reaction for user input.

I mostly agree with this, except I don't think the only use-case for beforeinput is cancelling user input. Another use case is preparing for user input. For example, an undo manager could save the state before the user input.

So, beforeinput only fired at
caused by cancellable action does makes sense even if there are some cases
input event is fired without beforeinput.

I don't agree with this conclusion. Partially because I think there are other use cases than cancelling the user input and partially because I think it's just confusing to developers.

Comment 6 Masayuki Nakano 2013-11-26 04:54:38 UTC
(In reply to Ojan Vafai from comment #5)

The important difference between beforeinput and input is, beforeinput is
cancellable. I.e., it MUST be fired before modifying editor value. This
means that beforeinput may be nested if beforeinput handler causes another
beforeinput. (input event isn't cancellable, therefore, browser can wait
safe time to dispatch input event.)

I don't think it makes sense for beforeinput and input to fire for a
different set of actions.

beforeinput is used for cancelling user input. On the other hand, input is
used for taking some reaction for user input.

I mostly agree with this, except I don't think the only use-case for
beforeinput is cancelling user input. Another use case is preparing for user
input. For example, an undo manager could save the state before the user
input.

I don't think so. The data attribute is too cheap for creating their own undo manager. Especially, removing selected text or a character before/after the caret.

So, beforeinput only fired at
caused by cancellable action does makes sense even if there are some cases
input event is fired without beforeinput.

I don't agree with this conclusion. Partially because I think there are
other use cases than cancelling the user input and partially because I think
it's just confusing to developers.

Then, how do you solve the security issue which is, beforeinput handler can cause another beforeinput?

Comment 7 Ojan Vafai 2013-11-27 21:33:07 UTC
(In reply to Masayuki Nakano from comment #6)

(In reply to Ojan Vafai from comment #5)

The important difference between beforeinput and input is, beforeinput is
cancellable. I.e., it MUST be fired before modifying editor value. This
means that beforeinput may be nested if beforeinput handler causes another
beforeinput. (input event isn't cancellable, therefore, browser can wait
safe time to dispatch input event.)

I don't think it makes sense for beforeinput and input to fire for a
different set of actions.

beforeinput is used for cancelling user input. On the other hand, input is
used for taking some reaction for user input.

I mostly agree with this, except I don't think the only use-case for
beforeinput is cancelling user input. Another use case is preparing for user
input. For example, an undo manager could save the state before the user
input.

I don't think so. The data attribute is too cheap for creating their own
undo manager. Especially, removing selected text or a character before/after
the caret.

The point is the timing of the event. The event's properties are not used at all. It's a timing that fires before any user-initiated modification and lets you do whatever appropriate action you need to before the DOM is modified.

So, beforeinput only fired at
caused by cancellable action does makes sense even if there are some cases
input event is fired without beforeinput.

I don't agree with this conclusion. Partially because I think there are
other use cases than cancelling the user input and partially because I think
it's just confusing to developers.

Then, how do you solve the security issue which is, beforeinput handler can
cause another beforeinput?

How is it a security issue? How's it different from focus/blur events? You can get into the same sort of infinite loop with focus/blur events.

Comment 8 Masayuki Nakano 2013-11-27 23:50:36 UTC
(In reply to Ojan Vafai from comment #7)

So, beforeinput only fired at
caused by cancellable action does makes sense even if there are some cases
input event is fired without beforeinput.

I don't agree with this conclusion. Partially because I think there are
other use cases than cancelling the user input and partially because I think
it's just confusing to developers.

Then, how do you solve the security issue which is, beforeinput handler can
cause another beforeinput?

How is it a security issue? How's it different from focus/blur events? You
can get into the same sort of infinite loop with focus/blur events.

focus, focusin, focusout and blur are non-cancelable events. Therefore, web browser can delay to dispatch the events until previous event dispatching finishes. Actually, Gecko does this for focus, blur and input.

However, beforeinput is cancelable. Therefore, browser cannot delay to dispatch it.

Comment 9 Ojan Vafai 2013-11-28 00:21:41 UTC

foo
<script> var foo = document.getElementById('foo'); var logger = document.getElementById('logger'); foo.onfocus = function() { logger.innerHTML += 'focus started
'; foo.blur(); logger.innerHTML += 'focus done
'; }; foo.onblur = function() { logger.innerHTML += 'blur started
'; foo.focus(); logger.innerHTML += 'blur done
'; }; foo.focus(); </script>

Gecko prints out:
focus started
blur started
blur done
focus done

It doesn't hang, but the focus/blur events don't seem to be delayed either.

Incidentally, Blink prints out the same thing but 11 times, i.e:
focus started
blur started
focus started
blur started
...
blur done
focus done
blur done
focus done

I don't see why beforeinput can't get the same treatment.

Comment 10 Masayuki Nakano 2013-11-28 02:45:28 UTC
I don't understand the Gecko's behavior perfectly, however, actually, Gecko has a mechanism to wait to dispatch some events until becoming "safe to dispatch". focus/blur events are dispatched via the mechanism:

http://mxr.mozilla.org/mozilla-central/source/dom/base/nsFocusManager.cpp?rev=e864bbc290f5#1874

Comment 11 Masayuki Nakano 2013-11-28 02:47:04 UTC
(In reply to Ojan Vafai from comment #9)

I don't see why beforeinput can't get the same treatment.

Because such behavior may cause stack overflow (SpiderMonkey has a protect system for it, though).

Comment 12 Ojan Vafai 2013-12-02 23:35:28 UTC
How about we change beforeInput and input to not fire for execCommand? They would still fire for user-initiated cut, paste, etc.

Comment 13 Masayuki Nakano 2013-12-10 07:52:29 UTC
(In reply to Ojan Vafai from comment #12)

How about we change beforeInput and input to not fire for execCommand? They
would still fire for user-initiated cut, paste, etc.

I don't think it makes sense to prevent firing input event in such cases because web apps must expect input event is fired for every modifying the content. If not, it's not useful for implementing autocomplete/suggest list.

beforeinput is designed for an alternative event of keypress event. Therefore, it's cancellable and it causes different issues from input event.

Comment 14 Ojan Vafai 2013-12-10 23:32:01 UTC
(In reply to Masayuki Nakano from comment #13)

(In reply to Ojan Vafai from comment #12)

How about we change beforeInput and input to not fire for execCommand? They
would still fire for user-initiated cut, paste, etc.

I don't think it makes sense to prevent firing input event in such cases
because web apps must expect input event is fired for every modifying the
content. If not, it's not useful for implementing autocomplete/suggest list.

The input event already does not fire if you modify the content via DOM APIs (e.g. value or appendChild). The fact that it fires for execCommand seems like an accident of history to me.

Comment 15 Gary Kacmarcik 2014-04-08 01:55:16 UTC
Summary to see if we have a consensus here:

This bug seems to be interpreting 'beforeinput' solely in the context as a replacement for 'keypress', but that was not the intent of 'beforeinput'. It was introduced as a way to trap input changes (from keyboard or other input device) before they were committed to the DOM (i.e., before the 'input' event). It was noticed that 'beforeinput' fired whenever 'keypress' would have fired, so 'keypress' was deemed redundant and removed (in the interest of simplifying the number of events flying around). Hence, 'beforeinput' is the suggested replacement for 'keypress'.

Ojan proposed that we specify 'beforeinput' and 'input' to not fire for execCommand so we can avoid the problems mentioned in this bug.

This seems reasonable to me.

Any further comments/suggestions?

Comment 16 Masayuki Nakano 2014-04-16 01:16:21 UTC
I think that "input" should be fired even when beforeinput is not fired because input event is always fired on current browser and it can be dispatched when it becomes safe.

"beforeinput"'s problem is caused by that it's a cancelable event.

If "beforeinput" should always be fired before "input", I'd like to suggest that "beforeinput" MAY be non-cencelable if it cannot be dispatched before actual DOM change due to unsafe caused by something. This might make web apps implementation simpler.

Please note that when "beforeinput" isn't cancelable due to unsafe, the change is caused by web apps, not normal text input by users (caused by key, IME and paste).

It might be unsafe when editor is changed by execCommand, setting .value, using innerHTML or something to contenteditable editor.

Comment 17 Gary Kacmarcik 2014-04-23 01:11:12 UTC
In 5.2.7.6 "Input Events During Composition", we already have a note:

"Note: Some IMEs update the DOM before the compositionend event is dispatched. In this case, canceling the beforeinput event will have no effect (i.e., the input input will still fire)."

We may want to make it more obvious that 'input' may fire even if 'beforeinput' is cancelled. But we do want browsers to make a best-effort here.

Comment 18 Masayuki Nakano 2014-04-23 02:07:06 UTC
The cause isn't IME, changing the editor contents from web apps...

Comment 19 Travis Leithead [MSFT] 2014-05-23 22:57:50 UTC
So, I've lost track of what we want to do with this bug.

Our spec text, as currently stands, is very light on details. Of beforeinput, relative to the comments in the bug it says:

["Input events are sent as notifications whenever the DOM is being updated"]

A generalization: may not be strictly true if beforeinput/input are not dispatched when the DOM was modified by script.

["The input events defined in this specification MUST occur in a set order relative to one another."]

A generalization: basically true.

["A user agent MUST dispatch this event [beforeinput] when the DOM is about to be updated."]

May need to refine this text to explain the conditions under which is may not be dispatched or may be delayed, depending on what we do with Bug 25683.

["A user agent MUST dispatch this event [input] immediately after the DOM has been updated"]

Again, may need to clarify the conditions based on reality in user agents today.

Finally, as Gary noted above, we have 5.2.7.6, which talks about the order of events in relation to compositionupdate and compositionend.

["Most IMEs do not support canceling updates during a composition session."]

Does the above also mean that beforeinput isn't cancelable? I think it does.

["... In this case, canceling the beforeinput event will have no effect"]

This also seems to indicate that when an IME is in control the user agent may not have an opportunity to cancel the DOM updates, meaning that beforeinput can only be useful as a pre-change notification and not cancelable.

Is it still worth it to ask user agents to dispatch beforeinput in those last two cases (where they can't reasonably stop the IME's input)? If so, then beforeinput seems totally redundant with compositionupdate and compositionend at least in this scenario. I understand wanting to use beforeinput as a general catch all for user-input (including IME) and so perhaps it is OK to redundantly dispatch it, but we'll need to have a short section defining what it means to dispatch a non-cancelable beforeinput event. E.g., the cancelable attribute will be set to false, etc.

Comment 20 Yoshifumi Inoue 2014-06-12 07:30:03 UTC
Do we think suggested word inserting as user input from context menu on misspell word right click?

Should sites be able to control Responsive Input Language?

If Responsive Input adapts to locale, should it be the browser's locale only or should sites be able to change it? Say you're using a German PC with an English site: should you get German or English keyboard->Responsive Input default mappings?
-From MS Office Team

What should be the shape of contentEditable?

Some ideas include contentEditable="minimal", where we would need to be clear about what functionality is provided, and contentEditable={list of capabilities}, where {list of capabilities} might include "cursor", "typing", "newlines", etc.

Support for custom Responsive Input events

In addition to "traditional" events (e.g. moving the caret, changing the selection, moving to the next focusable item), web applications have custom events for which intention events may be applicable.

Example 1: In Twitter, j and k move to the next and previous tweet respectively.

Example 2: A music service web app in which N plays the next song in the playlist and P plays the previous song in the playlist.

In both cases, the intent of the user is to perform a relatively common action. Thus perhaps the set of user intention event types should be expanded to include these sorts of actions. Alternatively, perhaps there should be support for custom intention event types.

execCommand or something new to fire IntentionEvents?

It seems to me that execCommand should invoke any browser behavior (like the legacy 'bold' behavior), but should not fire IntentionEvents. Instead we should come up with a new way to link Actions (like clicking a button) to intentions. This will prevent loops when an Intention Event handler wants to use a browser's built in execCommands (which should not fire further Intention Events).

What caret positions do we need to allow?

It has been requested that also caret movements are moved into intention events and not directly handled by contentEditableTyping. This makes sense.
Instead, I would like to put more emphasis on where the caret can actually go. It is currently quite annoying that there are many places where the caret cannot go or disappears and reappears. Does the following cover every place:

All positions in which the caret can be placed programmatically. The placement is restricted to be in one of these positions:

  1. Before or after any character in any text node.
  2. After any inline element that is not a text node.
  3. Before any inline element that is not a text node and that does not have a `previousSibling`.
  4. Inside any empty inline or block element that is not a stub-element or inside any empty text node.
  5. Before or after a block element that is also a stub element.
  6. In the CE Typing Container
  7. itself, if it is empty.

There are two exceptions to these rules:

  1. Within a table, the caret can only be placed inside `TH` and `TD` elements.
  2. The caret cannot be placed inside, before or after a `comment node` or a node that has it's display-value set to `none`. invisible nodes.

Relationship to IndieUI: Events 1.0

Hi Ben - I just started reading the explainer doc (BTW, it's really nice to have this!), and I was wondering -> what, if any, relationship is there between what the explainer calls "Intention Events" and the IndieUI: Events 1.0 spec. If these concepts are orthogonal, then just close/delete this issue; otherwise, perhaps it would be helpful to include a sentence or two about the relationship.

(FYI, some history here is http://lists.w3.org/Archives/Public/public-webapps/2014AprJun/0806.html).

D3E defines input event should be fired immediately after the DOM as been updated but it shouldn't be so if the editor value is changed by setting value attribute

Copied from DOML3 Bugzilla https://www.w3.org/Bugs/Public/show_bug.cgi?id=26612

Masayuki Nakano 2014-08-20 07:26:16 UTC
Currently, D3E spec defines when input event should be fired as:
"A user agent MUST dispatch this event immediately after the DOM has been updated."
However, at setting value attribute of or <textarea>, input event is not fired on Firefox, Chrome nor IE.
So, D3E needs to update its definition for conforming to implementations.
And I think that beforeinput definition should be changed too.

Comment 1 Masayuki Nakano 2014-08-20 07:35:33 UTC
Created attachment 1502 [details]
testcase
Using innerHTML for contenteditable editor doesn't cause firing input event too.

Comment 2 Olli Pettay 2014-08-20 07:36:22 UTC
Setting .value doesn't change the DOM, it changes the value of
the form control.

Comment 3 Anne 2014-08-20 07:41:56 UTC
But it should not fire synchronously. At best it should fire when mutation observers are dispatched.

Comment 4 Masayuki Nakano 2014-08-20 09:30:29 UTC
I think that input event caused by changes from JS isn't necessary for web apps. Therefore, I think that current implementations do make sense to me. So, I don't think that input event (and beforeinput event) should be fired for the cases in the testcase.

Notification after completion of Responsive Input Event (especially "custom" event types)

In issue 14, I described a couple of scenarios in which the current set of "traditional" intentions might not cover everything we might wish it to. If it is agreed that the intention event types should be expanded to include more and/or custom event types such as those outlined in issue 14, then I think it's worth considering emitting notifications upon completion of those event types to address the following need described in the explainer:

Additionally, Accessibility Tools and other input modalities should be able to list available Intentions and understand what has occurred in order to provide feedback to users.

In the case of "traditional" intentions (caret moved, text changed, selection changed), user agents notify platform Assistive Technologies of the event via that platform's accessibility APIs. In the case of the "non-traditional" events like the next/previous tweet, user agents do similar notifications but the ATs are left trying to "understand what has occurred in order to provide feedback to users." For instance, in ATK/AT-SPI2, the following accessible events are seen when a user presses J to move to the next tweet in a Gecko-based browser:

  1. keyboard event (J pressed)
  2. object:property-change:accessible-name
  3. object:property-change:accessible-name
  4. object:text-changed:delete:system
  5. object:children-changed:add:system
  6. object:text-changed:insert:system
  7. focus:
  8. object:state-changed:focused
  9. keyboard event (J released)

In other words, events which describe what happened within the user agent; not why it happened (namely, the user intended to move to the next tweet and that movement occurred).

Having some sort of afterNextItem event would make things more readily and easily understood by ATs.

intents originating from components resp. scripts

a use case that could be interesting would be that components or scripts can issue intents, thus keeping the actual behavior to fulfill the intent compartmentized to the final application.

E.g.in a map view on a dashboard displaying traffic should zoom and scroll to the location if an accident happens and can optionally notify etc.

How should custom controls declare their Responsive Input mapping?

At the moment the spec has a declareIntention() function, allowing sites to create input type="button" onclick="declareIntention('bold')" so they can create toolbars and such. This has a side effect of allowing Responsive Input to be declared outside of User Actions though, which seems like it breaks the model. Perhaps a better way to would be input type="button" intention="bold". Or we could use the menuitem element.

behavior of text nodes inside cE=typing

I recently filed a bug in the Chromium project:
https://code.google.com/p/chromium/issues/detail?id=436107

The problem I had was that Chrome was removing a text node. This causes problem in my code because I keep references to text nodes. Having a node vanish from the document is frustrating thing to have to deal with when you are writing an editor.

I think cE=typing should specify a few behaviors for text nodes contained within it. The behaviors would be in line with the "no magic" ideas of cE=typing.

Some examples:

  • don't unilaterally remove, modify, join, split text nodes
  • allow empty text nodes

The bug on Chromium is marked as won't fix, and frankly I can't blame them. However, we should collect all the magical behaviors related to text nodes on all UAs that make editing very hard and spec the proper non-magical behavior in cE=typing.

Do we need formatting events?

Should formatting events (user wants this bold, etc.) be something handled by contentEditable=Typing, or could this not just as well be handled by the editor program itself by listening to the relevant key click combinations, etc.? I have commented this out for now to loose some complexity, but it may be a good idea to keep it if there is a good usecase for it.

spell checking should be able to span multiple Typing Nodes

In ContentEditbleTyping Explainer, Section 6.2:

When the user indicates he wants to replace part of the contents of a CE Typing Node by means of a browser-builtin spell cehcker or alike, a beforeInput input with inputType set to replaceText is triggered.

Note that a spellchecker might find a typo in a word that is not fully contained in a single text node. Therefore the event target must not be a text node, but rather a Range. Safari in particular allows spell check to work even when words are partially bold. See #28.

Furthermore it's not clear from the spec whether a default behavior takes place? In any case if the target is a range then there can be no default behavior since it would result in Element changes. So I think the Explainer should clarify that there is no default behavior, it's up to the editor dev to make the change.

execCommand has now been spec'd to trigger a "User Intent" for cut/copy/paste

In our discussions it seems we have arrived at the conclusion that in the context of cE=typing, a user triggers an Intent, which can be captured by developer as an Event. Developer can then use execCommand or something else to perform the intended edit. So the flow, as I understand it is:

User Intent => Event Code => custom DOM code or execCommand

This is supposed to work for all user edits, like "new line", "delete", etc...

I noticed though that the cut copy and paste events, which are the closest things we have to User Intents in UAs are now triggered by execCommand. I think IE has been doing this for a while, but now it's in the spec and implemented in Chrome 43. See http://www.w3.org/TR/2015/WD-clipboard-apis-20150421/#the-copy-action

I made this Fiddle that demonstrates a minimal implementation:
http://jsfiddle.net/teleclimber/y5xqtbL2/

So you can see now the pattern is:

execCommand => Event Code => allow event to continue or preventDefault and do custom work

This is completely backwards from the way we want to do things. This may not be a huge deal, but it would be weird if developers had to use Intents for everything except clipboard ops where they have to use execCommand. It's inconsistent.

PS: With respect to #33 if execCommand are spec'd to do nothing, does that mean they don't fire events either?

Add "intention" integration point to 'beforeinput' event's interface

Copied from DOML3 Bugzilla https://www.w3.org/Bugs/Public/show_bug.cgi?id=27063

Travis Leithead [MSFT] 2014-10-15 18:37:24 UTC
In http://w3c.github.io/editing-explainer/commands-explainer.html,

there is a desire to unify the various editing/input scenarios behind intentions. beforeinput is one on their radar (along with beforeselectionchange (Selection API spec), and clipboard events). IndieUI is also invested here.

The ask is to give beforeinput a 'intention' (DOMString) property. They also want to unify on a way to present the 'data' (currently included in InputEvent as 'data' :-).

In addition, there are various ideas on how to further express this. One approach is to provide a Range (the about-to-be-affected content), and the expected thing that will replace it.

It is unclear whether we would spec this, or they would spec it. If we do it, we should follow the intention explainer.

What intentions do we need?

We currently have

  • insertCharacter
  • overwriteCharacter
  • replaceText
  • insertNewline
  • deleteContent
  • undo
  • redo
  • caretUp
  • caretDown
  • caretRight
  • caretLeft
  • caretStartLine
  • caretEndLine
  • caretStartPreviousWord
  • caretEndNextWord
  • setInsertCaret
  • setOverwriteCaret

cut and paste should be handled through beforecut and beforepaste cut and paste events. Anything else?

BeforeInput or CommandEvent?

Argument For InputEvent: InputEvent already exists and tracks input. BeforeInputEvent has been discussed already.
Argument for CommandEvent: With contenteditable="minimal", nothing is actually going to be inserted, so BeforeInputEvent is not correctly named. BeforeInputEvent fires after other Intention Events like ClipboardEvent, so it will be double-handled. And it's not a clear corollary to the invoke side, which is currently execCommand.

Add a section for "new low-level APIs" to Editing Explainer

We need to start talking about what APIs might be needed, but more importantly we need to make sure that we continue to consider this as part of our Editing strategy. For instance, we may want to make it easier to style HTML in custom ways without creating the entire algorithm in javascript, like splitting bold tags during 'unbold'.

Need to be clear about users having control, then sites, then browser

Accessibility folks in particular want to make sure that a user has the final say on what Actions indicate a given Intention. So while a site should be able to change the default Intention for an Action, a user should be able to overwrite it with their own Intention for a given Action. This may not need to be in the spec, but it should not be blocked.

Should the caret move by default, and should we define this behavior?

Options mentioned so far:

A) Don't move the caret by default and don't define default behavior.

B) Move the caret by default and define the default behavior in a spec.

C) Move the caret by default and define some of the default behavior and leave the rest to be decided by UA/platform (for example: let UA decide on line block direction movement, but define inline movement in spec).

D) Move the caret by default, but do not spec this behavior. Instead, let the UA/platform decide what that behavior will look like.

This is the default inline movement we initially had in the spec before it was removed:

           <h3>Default caret movement pattern</h3>

            <section>
                <h4>Caret movement within <a>CE Typing Node</a></h4>

                <p>Each key press event in the `inline direction` or in the
                direction opposite to the `inline directions` triggers the
                movement of the caret of one position within the current
                <a>CE Typing Node</a>.</p>
            </section>

            <section>
                <h4>Caret movement at the end of a <a>CE Typing
                Node</a></h4>If the caret is at the end of a <a>CE Typing
                Node</a> before the movement takes place, and the requested
                movement would cause it to go beyond the end of the <a>CE
                Typing Node</a>, the caret is moved into the start of the
                next following <a>CE Typing Node</a> that is part of the
                same <a>CE Typing Container</a>. If this movement did not
                cause it to move by at least 1px, the caret is moved one
                additional position.

                <p></p>

                <p>If there is no following <a>CE Typing Node</a> to which
                the caret could be moved, it is not moved.</p>
            </section>

            <section>
                <h4>Caret movement at the start of a <a>CE Typing
                Node</a></h4>If the caret is at the start of a <a>CE Typing
                Node</a> before the movement takes place, and the requested
                movement would cause it to go beyond the start of the <a>CE
                Typing Node</a>, the caret is moved into the start of the
                last preceding <a>CE Typing Node</a> that is part of the
                same <a>CE Typing Container</a>. If this movement did not
                cause it to move by at least 1px, the caret is moved one
                additional position.

                <p>If there is no previous <a>CE Typing Node</a> to which
                the caret could be moved, it is not moved.</p>
            </section>

What to do with IME input when typing over a large selection?

Imagine this:

<div contentEditable="typing">
  <p>This is a test <span>t[ext</span></p>
  <p>This is a <b>secon]d paragraph</b></p>
</div>

The []-symbols mark the start and the end of a selection. With this selection in place, the user now starts creating new input using IME. What do we do?

We specifically tried to avoid for the UA to do paragraph merging or any changes to the DOM-structure. and the IME added characters will only create a beforeInput (intention) event, not an actual insertion by default.

Solutions I can see:

A) If the IME is to overwrite anything beyond the contents of a simple text node, the composition process is not done inline but rather in a little box next to the text.
B) We first emit a beforeInput delete event, then start the composition process.
C) IME handling is moved further to Javascript.

I vote for B.

Consistent Shape for Intention Events

I think a key goal for the User Intentions Explainer should be to provide developers with a consistent way to use all types of Intention Events. What should this be?

Target range in device independent events

@BenjamP mentioned the co-editing scenario in the issue #18, and that makes me wonder maybe we should have a target range in device independent events.

Currently, we translate, say, a keyboard event Ctrl+B to a device independent event Bold, and it executes against the current selection. But if an editor wants to bold anywhere other than the current selection, the options are either to do it by own, or move the selection tentatively and move it back. The latter is likely to results in bad UX, and also could introduce weird bugs.

The proposal is, instead, Ctrl+B is translated to Bold this range with the targetRange set to the selection.

We can't then re-use execCommand or exiting code as is, but I assume we won't, so this change should not add a lot of work. Or is it only for Blink and WebKit?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.