Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@remirror/core
Advanced tools
Provides the core abstractions for managing your remirror editor functionality
This packages provides the core building blocks for the remirror editing experience. It provides the api for extensions and TypeScript types used throughout the other packages.
It should rarely be used independently.
Note that this package itself is framework agnostic and while remirror today is targeted at react users it's possible to widen the scope to angular
, vue
and other popular framework libraries.
yarn add @remirror/core prosemirror-view
Extensions are the building blocks of the editing experience in remirror. They provide behaviour, plugins, marks, and nodes as well as configuration at instantiation for any extension.
Extension can be Extension
, MarkExtension
or NodeExtension
.
Extension
Pure extensions only concern themselves with the behaviour of the editor. For example the extension called History
is a plain extension and it tracks all the actions and provides undo and redo commands to your configured editor.MarkExtension
These are used to add extra styling or other information to inline content. Marks are used for adding links to content, bold stying, italic and other changes which affect the content in a standard way.NodeExtension
These add make nodes available to the content of the editor. Examples include @remirror/extension-emoji
and @remirror/extension-mention
To create an extension extend from the class provided from the core library. The following example is taken from the Strikethrough extension in the @remirror/core-extensions
library.
import {
MarkExtension,
MarkExtensionSpec,
markInputRule,
markPasteRule,
ExtensionManagerMarkTypeParams,
toggleMark,
} from '@remirror/core';
export class StrikeExtension extends MarkExtension {
get name() {
return 'strike' as const;
}
// This is the prosemirror related schema information
get schema(): MarkExtensionSpec {
return {
parseDOM: [
{
tag: 's',
},
{
tag: 'del',
},
{
tag: 'strike',
},
{
style: 'text-decoration',
getAttrs: value => (value === 'line-through' ? {} : false),
},
],
toDOM: () => ['s', 0],
};
}
// Defines keymaps for this extension
public keys({ type }: ExtensionManagerMarkTypeParams) {
return {
'Mod-d': toggleMark(type),
};
}
// Defines commands that can be used to build menu UI's
public commands({ type }: CommandMarkTypeParams) {
return () => toggleMark(type);
}
// Input rules happen as code is being typed
public inputRules({ type }: ExtensionManagerMarkTypeParams) {
return [markInputRule({ regexp: /~([^~]+)~$/, type })];
}
// Paste rules are activated when code is pasted into the editor
public pasteRules({ type }: ExtensionManagerMarkTypeParams) {
return [markPasteRule({ regexp: /~([^~]+)~/g, type })];
}
}
The extension manager is used to manage the extensions passed into the editor. It automatically creates the nodes and marks which are used for generating a schema.
import { ExtensionManager, DocExtension, TextExtension } from '@remirror/core';
import { BoldExtension, ItalicExtension, ParagraphExtension } from '@remirror/core-extensions';
const manager = ExtensionManager.create([
{ extension: new DocExtension(), priority: 2 },
{ extension: new TextExtension(), priority: 2 },
{ extension: new ParagraphExtension(), priority: 2 },
{ extension: new BoldExtension(), priority: 2 },
{ extension: new ItalicExtension(), priority: 2 },
]);
log(manager.nodes); // { doc: { ... }, paragraph: { ... }, text: { ... } }
log(extension.marks); // { bold: { ... }, italic: { ... } }
// Can also create a schema for you
manager.createSchema(); // Returns a schema composed of nodes and marks in the extensions provided
FAQs
Where your quest to create a world class editing experience begins.
The npm package @remirror/core receives a total of 30,659 weekly downloads. As such, @remirror/core popularity was classified as popular.
We found that @remirror/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.