Nimble anchor inside "contenteditable" div is clickable #1502
Labels
bug
Something isn't working
Comments
vivinkrishna-ni
added
bug
This was referenced Sep 8, 2023
38 tasks
1 task
m-akinc
added a commit
that referenced
this issue
Dec 11, 2023
## 🤨 Rationale Fixes #1502 ## 👩💻 Implementation By design, the content-editable state is [not inherited](https://wicg.github.io/webcomponents/spec/shadow/#editing) across the shadow boundary, but that is really what we want. To mimic this, I introduced a new wrapper div* around the native anchor element that we can set `contenteditable` on, so that the native anchor behaves as we want. Ideally, we would set it based on the value of `isContentEditable` of the host `nimble-anchor`. However, reacting to changes in the host's `isContentEditable` state is a problem. `isContentEditable` is a read-only property that is implemented by walking the ancestry chain until an elmement with `contenteditable` set is found. There is no practical way to detect changes to this value. We will instead require that clients explicitly set `contenteditable` on the `nimble-anchor` whenever it is inside a content-editable area. We can reflect the value of that attribute to the wrapper div. *Note that the new wrapper div is necessary, because if we instead set `contenteditable` directly on the native anchor, it behaves differently (than when it is contained by a content-editable element): it remains focusable. ## 🧪 Testing Manually tested in Storybook, and wrote new unit tests. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
🐛 Bug Report
When
nimble-anchoris used inside acontenteditablediv, the link is clickable, whereas the default behavior of the native HTML anchor tag is not clickable.Note: Not sure if it is a bug or an expected behavior. Guide us in creating a correct issue for this behavior.
💻 Repro or Code Sample
A simple demo to reproduce: https://typescript-l63dbq.stackblitz.io
🤔 Expected Behavior
The default behavior of a
nimble-anchormight be the same as that of a native HTML anchor inside acontenteditablediv, meaning the link should not be clickable.😯 Current Behavior
nimble-anchoris clickable and focusable insidecontenteditablediv.💁 Possible Solution
🔦 Context
We are planning to render all links inside
nimble-rich-text-editorasnimble-anchoras mentioned in this discussion: #1372 (comment). However, the rich text editor internally uses thecontenteditablediv to add rich text content to the editor. In this context, we should restrict the user from clicking any of the links that are being added to the editor.🌍 Your Environment
The text was updated successfully, but these errors were encountered: