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

Nimble Rich Text Editor and Viewer Spec Document #1289

Merged
merged 45 commits into from
Jun 27, 2023
Merged
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
f14ee94
Initial nimble spec of the rich text editor and viewer component
vivinkrishna-ni Jun 8, 2023
8362d19
Corrected the header name of the spec
vivinkrishna-ni Jun 8, 2023
b22cbb7
Change files
vivinkrishna-ni Jun 8, 2023
129dcf1
Updated the supported features in feature section.
vivinkrishna-ni Jun 8, 2023
4e5ff60
Resolved some of the PR comments
vivinkrishna-ni Jun 8, 2023
217e4f1
Removed few methods as it is not required.
vivinkrishna-ni Jun 8, 2023
a95970b
Resolve some of the PR comments
vivinkrishna-ni Jun 8, 2023
a26b2a4
Updated the template for rich text editor
vivinkrishna-ni Jun 8, 2023
d9abc1d
Resolved some of the PR comments and made update to some design changes.
vivinkrishna-ni Jun 9, 2023
acd0f22
Resolving PR comments on updating the doc on implementation and secur…
vivinkrishna-ni Jun 9, 2023
7251bba
Corrected the sentence in non goals section
vivinkrishna-ni Jun 9, 2023
3e03f12
Corrected the sentence in API section.
vivinkrishna-ni Jun 9, 2023
b8ed166
Spell check in the implementation part.
vivinkrishna-ni Jun 9, 2023
a11e16f
Sentence correction in accessability.
vivinkrishna-ni Jun 9, 2023
e9ea50d
Made few changes to doc as suggested
vivinkrishna-ni Jun 9, 2023
3727587
noreply email update
vivinkrishna-ni Jun 11, 2023
2e5c8c5
Resolved some of the PR comments in rich-text-editor and viewer spec
vivinkrishna-ni Jun 12, 2023
afa0744
Corrected minor changes.
vivinkrishna-ni Jun 13, 2023
6eb5829
Updated the title of the viewer
vivinkrishna-ni Jun 13, 2023
c831c23
Updated a point in the API events section
vivinkrishna-ni Jun 13, 2023
056e664
Updated the spec images as per the new mockup screens
vivinkrishna-ni Jun 13, 2023
c2d64ba
Added CSS design for both editor and viewer component
vivinkrishna-ni Jun 13, 2023
429d3b0
Resolved minor corrections in the spec
vivinkrishna-ni Jun 13, 2023
ecb1890
Updated the comments UI mockup link
vivinkrishna-ni Jun 13, 2023
455d8a6
Corrected the risks and challenges points
vivinkrishna-ni Jun 13, 2023
ad6eca5
Updated the template and made few corrections in CSS design
vivinkrishna-ni Jun 14, 2023
35a9b5b
Updated the description in Non-goals section
vivinkrishna-ni Jun 14, 2023
9aee11f
Made few changes to the spec.
vivinkrishna-ni Jun 14, 2023
539b01d
Updated the API section for both the components
vivinkrishna-ni Jun 14, 2023
c7a75d0
Resolved some of the corrections in the spec
vivinkrishna-ni Jun 15, 2023
a09401f
Resolved some of the PR comments
vivinkrishna-ni Jun 15, 2023
1d86bf6
Updated the API to check the isEmpty value
vivinkrishna-ni Jun 15, 2023
f3d834d
Updated the styling part of the component
vivinkrishna-ni Jun 15, 2023
f0049d3
Updated the style information for viewer component.
vivinkrishna-ni Jun 15, 2023
1651461
Updated the package size information to the dependencies
vivinkrishna-ni Jun 16, 2023
2490c80
Updated the spec as per the suggestion.
vivinkrishna-ni Jun 19, 2023
9c89946
Updated the spec
vivinkrishna-ni Jun 19, 2023
1a4191a
Merge branch 'main' into rich-text-editor-viewer-spec
vivinkrishna-ni Jun 19, 2023
6cfd408
Merge branch 'main' into rich-text-editor-viewer-spec
vivinkrishna-ni Jun 21, 2023
92025d3
Updated the sizing changes for editor and viewer component.
vivinkrishna-ni Jun 21, 2023
d75a1a3
Resolved linting errors
vivinkrishna-ni Jun 21, 2023
bff8d5b
Added information on the Angular implementation
vivinkrishna-ni Jun 22, 2023
53841a7
Merge branch 'main' into rich-text-editor-viewer-spec
vivinkrishna-ni Jun 23, 2023
7007a3b
Updated the spec by removing the hyperlink support for the initial re…
vivinkrishna-ni Jun 26, 2023
4a10729
Merge branch 'main' into rich-text-editor-viewer-spec
vivinkrishna-ni Jun 26, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Resolving PR comments on updating the doc on implementation and secur…
…ity section.
vivinkrishna-ni committed Jun 9, 2023

Verified

This commit was signed with the committer’s verified signature.
a-kenji kenji
commit acd0f2235aa67998f2c78da7d29a99aaad782d87
Original file line number Diff line number Diff line change
@@ -226,8 +226,7 @@ NA
## Implementation

We have chosen to utilize the [Tiptap](https://tiptap.dev/) rich text editor as the underlying third-party library for developing the
`nimble-rich-text-editor`. This decision was made due to its extensive range of customization options over other third party libraries for
rich text editing and it is the ideal choice for meeting our specific use cases and some are mentioned below:
`nimble-rich-text-editor`. This decision was made due to its extensive range of customization options compared to other third-party libraries for rich text editing, making it the ideal choice for meeting our specific use cases. Some of the mentioned use cases are outlined below:

1. Includes all [basic functionalities](https://tiptap.dev/) like bold, italics, numbered and bulleted lists etc.
2. Includes support to work seamlessly inside the `shadow root`.
@@ -241,10 +240,16 @@ rich text editing and it is the ideal choice for meeting our specific use cases
The `nimble-rich-text-editor` is initialized by creating an instance of the [Editor](https://tiptap.dev/api/editor#introduction) class from
the Tiptap's core library. With that we have access to all the APIs exposed, by utilizing some of their extensions like
[StarterKit](https://tiptap.dev/api/extensions/starter-kit) which is a collection of most popular Tiptap extensions includes bold, italics
and all other basic rich text formatting options. All these formatting options([marks](https://tiptap.dev/api/marks)) can also be accessed individually.
and all other basic rich text formatting options. All these formatting options can also be accessed individually through tiptap's
[marks](https://tiptap.dev/api/marks) and [nodes](https://tiptap.dev/api/nodes).

- The term `Marks` in the tiptap are formatting styles applied to specific portions of text, such as bold, italic, or underlined.
- `Nodes` in the tiptap editor are the building blocks of the document structure, representing different types of content elements like paragraphs,
headings, lists, images, and more.

The rich text content entered in the editor is converted to markdown output using
[prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown) serializer. Here is the reference for basic formatting syntax in markdown:
[prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown) serializer. Here is the reference for the supported formatting schema in the
markdown based on [CommonMark](http://commonmark.org/) format:

- Bold - `**Bold**`
- Italics - `*Italics*`
@@ -325,10 +330,11 @@ strings may be used for tooltips to enable localization, which will be managed t
### Security

- Prose mirror uses markdown-it for converting markdown to HTML and HTML to markdown. We will follow the
[security guidelines of markdown-it](https://github.com/markdown-it/markdown-it/blob/master/docs/security.md#security) to turn off HTML at source as
given in the API docs.
- For additional safety, use [sanitize-html](https://www.npmjs.com/package/sanitize-html) package to whitelist only specific html tags on need basis or
completely disallow any html tags.
[security guidelines of markdown-it](https://github.com/markdown-it/markdown-it/blob/master/docs/security.md#security) to turn
off HTML at source as given in the [API docs](https://markdown-it.github.io/markdown-it/#MarkdownIt.new). Prosemirror-markdown follows the same as shown in this
[specific line of code](https://github.com/ProseMirror/prosemirror-markdown/blob/26e58302399b7d9a9b3bc8fc3bf5807627ca29e5/src/from_markdown.ts#L245).
- For additional safety, using [sanitize-html](https://www.npmjs.com/package/sanitize-html) package to whitelist only specific html
tags on need basis or completely disallow any html tags.
vivinkrishna-ni marked this conversation as resolved.
Show resolved Hide resolved

### Performance

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.