Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@brightspace-ui/htmleditor
Advanced tools
An HTML Editor component used to author rich HTML fragments. It offers three authoring modes for different contexts.
The Full editor surfaces the full range of authoring tools in a traditional WYSIWYG interface.
<script type="module">
import '@brightspace-ui/htmleditor/htmleditor.js';
</script>
<d2l-htmleditor label="Default" html="<p>Hello World!</p>"></d2l-htmleditor>
Property | Type | Description |
---|---|---|
attachments-only | Boolean | Whether or not to restrict file uploads to attachments and prevent saving to course/shared files. |
auto-save | Boolean | Whether or not to prompt the user when navigating away from the page while the editor has unsaved content. |
compact | Boolean | Whether or not to use compact styles when rendering editor contents. |
disabled | Boolean | Whether the content is read-only. |
files | Array | Read-only. An array of FileInfo objects for files added. |
file-upload-for-all-users | Boolean | Whether or not to enable file uploads to course or shared files. |
full-page | Boolean | Whether an HTML document or fragment is being authored. |
full-page-font-color | String, default: #202122 (ferrite) | The body font color. Only applies when full-page is true . |
full-page-font-family | String, default: Browser default | The body font. Only applies when full-page is true . |
full-page-font-size | String, default: Browser default | The body font size. Only applies when full-page is true . |
height | String, default: 355px | Initial height of the editor in px , rem , or % . |
html | String, default: empty string | The HTML being authored. |
initializationComplete | Promise | Read-only. Fulfilled when the editor has been fully initialized; pending otherwise. |
isDirty | Boolean | Whether or not the editor is dirty. If auto-save is enabled, set isDirty to false when triggering workflows where you do not want the autosave prompt. |
label | String | Label for the editor. Required unless labelled-by is specified (see below). |
labelled-by | String | ID of a label to be applied to the editor. This label must not be empty. |
label-hidden | Boolean | Hides the label visually. |
max-height | Number, default: null | Maximum height the HTML editor is allowed to resize to. A null value is equivalent to no limit. |
max-length | Number, default: null | Maximum length (measured by number of characters) of HTML contents, including HTML control characters. Enables validation on this criterion when set. A null value is equivalent to no limit. |
mentions | Boolean | Whether or not to enable @mentions. |
no-border | Boolean | Whether or not to render the border around the editor. |
no-filter | Boolean | Whether or not to disable filtering for the content. |
no-inline-vertical-margins | Boolean | Whether or not to remove vertical margins around editor content in inline/inline-limited mode. |
no-live-validation | Boolean | Whether or not to disable live validation (on editor blur). |
no-spellchecker | Boolean | Whether or not to disable spell checking. |
paste-local-images | Boolean | Whether or not to enable local image pasting and drag-and-drop. See additional documentation. |
required | Boolean | Whether or not the editor is a required field. Enables validation on this criterion when set. |
source-editable | Boolean | Whether or not to enable the source code editor. |
toolbar-horizontal-offset | String, default: 0 | Horizontal offset of the toolbar from the edge of the editor. |
type | String, default: full | Whether to render the editor in full , inline , or inline-limited mode. |
width | String, default: 100% of bounding container | Initial width of the editor. |
word-count-in-footer | Boolean | Whether or not to display the current word/character counts in the editor footer. |
Event | Properties | Description |
---|---|---|
d2l-htmleditor-blur | None | Dispatched when focus is lost from the editor and its toolbar. |
d2l-htmleditor-focus | None | Dispatched when the editor or its toolbar gains focus. |
d2l-htmleditor-image-upload-complete | None | Dispatched when images finish uploading to the editor. If multiple images are being uploaded, the event will only be dispatched once all images are uploaded. |
d2l-htmleditor-image-upload-start | None | Dispatched when images start uploading to the editor. If multiple images are being uploaded, the event will only be dispatched for the first image. |
d2l-htmleditor-update | None | Dispatched as the internal TinyMCE editor is about to lose focus. The HTML editor internally persists its HTML at this time. |
clear()
: Clears editor contents and undo/redo levelsfocus()
: Places focus in the editortoggleInlineEditing(editing)
: Returns a promise. Toggles the inline editor into or out of editing or readonly mode, depending on the specified editing
boolean. Promise resolves on completion. Has no effect on the full editor or in fullscreen mode.Important: user-authored HTML must be trusted or properly sanitized!
HTML fragment:
<script type="module">
import '@brightspace-ui/htmleditor/htmleditor.js';
</script>
<d2l-htmleditor html="<p>Hello World!</p>" label="Editor with HTML"></d2l-htmleditor>
HTML document (including head
& body
):
<script type="module">
import '@brightspace-ui/htmleditor/htmleditor.js';
</script>
<d2l-htmleditor html="<p>Hello World!</p>" label="Full Page Editor with HTML" full-page></d2l-htmleditor>
Used in contexts where reducing visual clutter is important. The Inline editor presents as a standard text field. Focusing on the input field summons a floating toolbar with the most important authoring controls, and a fullscreen button to open the Full editor experience.
<script type="module">
import '@brightspace-ui/htmleditor/htmleditor.js';
</script>
<d2l-htmleditor type="inline" label="Inline" height="150px" width="400px"></d2l-htmleditor>
Reserved for special use-cases where only basic formatting and insertion options are desired.
<script type="module">
import '@brightspace-ui/htmleditor/htmleditor.js';
</script>
<d2l-htmleditor type="inline-limited" label="Inline Limited" height="150px" width="400px"></d2l-htmleditor>
Your application or component will need additional implementation work to support local image pasting. When the paste-local-images
attribute is specified on the editor, copying/pasting or dragging/dropping images into the editor will prompt the editor to push those images to a temporary location on blur and then expose those files via the editor's files
property. It's expected that your application or component will provide its own workflow to save those files somewhere more permanent.
The Brightspace editor has comprehensive screen reader and keyboard navigation support. You can move through toolbar items with the Arrow keys; use Tab and Shift + Tab to quickly switch between the toolbars and content area.
The following can be entered in the text editing area for quick formatting:
Pattern | Formatting |
---|---|
:emoji keyword | Open emoji autocomplete menu |
*text* | Italic text |
**text** | Bold text |
- text | Unordered list |
1. text | Ordered list |
To install from NPM:
npm install @brightspace-ui/htmleditor
After cloning the repo, run npm install
to install dependencies, npm run build
to generate imports required to consume tinyMCE from the CDN.
When a new version of TinyMCE has been published to the CDN, update the version export in tinymce-lib-version.js
, then run npm run build
to re-generate the exports for the new version. This is also done automatically on publish. Do not alter the generated imports yourself.
To start an es-dev-server that hosts the demo page and tests:
npm start
# eslint, stylelint, and langs
npm run lint
# eslint only
npm run lint:eslint
# lint and unit test
npm test
# lint only
npm run lint
# unit tests only
npm run test:headless
# debug or run a subset of local unit tests
# then navigate to `http://localhost:9876/debug.html`
npm run test:headless:watch
This repo uses @brightspace-ui/testing's vdiff command to perform visual regression testing:
# vdiff
npm run test:vdiff
# re-generate goldens
npm run test:vdiff:golden
This repo is configured to use semantic-release
. Commits prefixed with fix:
and feat:
will trigger patch and minor releases when merged to main
.
To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.
FAQs
An HTML editor that integrates with Brightspace
The npm package @brightspace-ui/htmleditor receives a total of 129 weekly downloads. As such, @brightspace-ui/htmleditor popularity was classified as not popular.
We found that @brightspace-ui/htmleditor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.