Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich text editor & viewer | Support for absolute link #1496

Merged
merged 77 commits into from
Sep 14, 2023

Conversation

vivinkrishna-ni
Copy link
Contributor

@vivinkrishna-ni vivinkrishna-ni commented Sep 7, 2023

Pull Request

🤨 Rationale

  1. Add absolute links in the editor by either pasting or manually entering a URL (HTTP/HTTPS).
  2. The input and output for absolute links in Markdown follow the AutoLink format in the CommonMark flavor i.e. <URL>.
  3. Links in the viewer will render as nimble-anchor. Part of Create a new anchor pattern to share styles across nimble components #1372
  4. Links in the editor will render as <a> as we have few constraints in rendering nimble-anchor in the editor. Render "nimble-anchor" in rich text editor #1516

👩‍💻 Implementation

Rich text editor:

  1. Installed @tiptap/extension-link to enable link in editor.
  2. Configuring the following settings for the link in the editor:
    • Preventing users from opening a link in the editor by disabling the openOnClick
    • Disallowing users from pasting a link to an already selected word by disabling linkOnPaste, especially since hyperlinks are not supported for the initial pass.
    • Add Regex to validate that the entered/parsed URL conforms to the HTTPS/HTTP protocol. URLs not using HTTPS/HTTP will be displayed as plain text.
  3. Adding custom link serializer for autolink in markdown-serializer.ts.
  4. Preventing the application of additional formatting, such as bold or italics, to a link by using excludes: '_'. This is because CommonMark's autolink does not support the simultaneous application of another formatting within the link, making it impossible to render a specific part of the link in autolink markdowns, like <https://**nimble**.ni.dev>.

Rich text viewer (or markdown-parser):

  1. Rendering links as nimble-anchor by updating the schema in markdown-parser.ts.
  2. Validate if the links in the input markdown string are HTTPS/HTTP.
  3. Normalize the link text to render the link as is, instead of updating the link text if it contains any encoded or non-ASCII characters.

🧪 Testing

  1. rich-text-editor.spec.ts:
    1. "Absolute link interactions in the editor" - These tests cover user interactions with the editor like typing or copying and pasting the links. This includes testing the validate in index.ts (only HTTP/HTTPS), assessing links within various nodes, and restricting the application of other marks (bold/italics) to the links within the editor.
    2. "Absolute link markdown tests" - These tests ensure the parsed links are rendered as <a> tags and not as nimble-anchor within the editor. This distinction arises because we have adjusted the schema of the link in the markdown-parser.ts to parse it as a nimble-anchor. It also covers getMarkdown is the same as setMarkdown for links similar to the tests pattern we followed for other marks and nodes.
  2. markdown-parser.spec.ts:
    1. "Absolute link" - These tests cover more in-depth of link formats that could possibly converted into links when parsed from a markdown string. It verifies autolink, validateLink, and normalizeLinkText in tokenizer rules and configurations set in the markdown-parser.ts.
  3. markdown-serializer.spec.ts:
    1. These tests ensure only the text content(not href) in the <a> tag is serialized to autolink markdown string.
    2. It also covers how other marks (bold/italics) are ignored when the link is wrapped within it.

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

vivinkrishna-ni and others added 30 commits August 31, 2023 13:07
…omponent to model scripts

Signed-off-by: Sai krishnan Perumal <[email protected]>
jattasNI pushed a commit that referenced this pull request Sep 12, 2023
# Pull Request

## 🤨 Rationale

<!---
Provide some background and a description of your work.
What problem does this change solve?

Include links to issues, work items, or other discussions.
-->
1. To provide more spacing and facilitate the exploration of various
functionalities of the rich text editor, setting a default height in
storybook docs until enabling the `fit-to-content` attribute.
2. To make the content, such as the links
(#1496 (comment)), visible
if any are added as part of the test, height is added for storybook
tests.

## 👩‍💻 Implementation

<!---
Describe how the change addresses the problem. Consider factors such as
complexity, alternative solutions, performance impact, etc.

Consider listing files with important changes or comment on them
directly in the pull request.
-->
1. Add `height: 160px;` to the rich text editor storybook doc.
2. Add height for the theme matrix test to isolate the Chromatic test
difference from the #1496 PR.

## 🧪 Testing

<!---
Detail the testing done to ensure this submission meets requirements. 

Include automated/manual test additions or modifications, testing done
on a local build, private CI run results, and additional testing not
covered by automatic pull request validation. If any functionality is
not covered by automated testing, provide justification.
-->
Verified manually the differences in the height of the component in
storybook docs and tests.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
@vivinkrishna-ni vivinkrishna-ni merged commit f5dfad6 into main Sep 14, 2023
6 checks passed
@vivinkrishna-ni vivinkrishna-ni deleted the users/vivin/link-support branch September 14, 2023 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants