RemNote Plugins

https://plugins.remnote.com
Admin
RemNote Plugins enable users to fine-tune RemNote for thinking and learning by providing secure,...
Tokens:75,724
Snippets:829
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://plugins.remnote.com/getting-started/quick_start_guide

Compile and run the template plugin project locally. This command starts the development server.

```bash
npm run dev  

```

--------------------------------

### Install Node.js Dependencies

Source: https://plugins.remnote.com/getting-started/quick_start_guide

Run this command in your plugin's root directory to install necessary packages, including the RemNote plugin SDK.

```bash
npm install  

```

--------------------------------

### Install Node.js Dependencies for Snippet Plugin

Source: https://plugins.remnote.com/custom-css

Run this command in your terminal after cloning the snippet template to install necessary packages, including the RemNote plugin SDK.

```bash
npm install

```

--------------------------------

### trimStart

Source: https://plugins.remnote.com/api/classes/RichTextNamespace

Removes whitespace from the start of the rich text content.

```APIDOC
## trimStart

### Description
Removes whitespace from the start of the rich text content.

### Method
`trimStart(richText: RichTextInterface): Promise<RichTextInterface>`

### Parameters
- **richText** (RichTextInterface) - The rich text object to trim.

### Returns
A promise that resolves to the trimmed rich text object.
```

--------------------------------

### Registering Custom Powerups

Source: https://plugins.remnote.com/advanced/powerups

Example of how to register a new custom powerup with properties.

```APIDOC
## Registering Custom Powerups

Here's an example of how to register a custom powerup:

```javascript
await plugin.app.registerPowerup({
  name: 'Custom Edit Later', // human-readable name
  code: 'customEditLater', // powerup code used to uniquely identify the powerup
  description: 'A Custom Edit Later powerup', // description
  options: {
    properties: [
      {
        // property code used to uniquely identify the powerup property
        code: 'message',
        // human readable property code name
        name: 'Message',
        // (optional: false by default)
        // only allow the property to be modified programatically
        onlyProgrammaticModifying: true,
        // (optional: false by default)
        // hide the property - don't show it in the editor
        hidden: true,
      },
    ],
  },
});
```

Properties allow you to store custom data fields on Rem which are tagged with your custom powerup. In the example above, we added a property called "Message". Later on we will see how to save data and retrieve data from this property.
```

--------------------------------

### Getting Settings

Source: https://plugins.remnote.com/advanced/settings

Retrieve the current value of a registered setting.

```APIDOC
## Getting Settings

### Description
Retrieves the value of a registered setting using its ID.

### Method
`plugin.settings.getSetting(id: string): Promise<any>`

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the setting to retrieve.

### Request Example (Async/Await)
```javascript
const value = await plugin.settings.getSetting('mySettingId');
```

### Request Example (useTracker Hook)
```javascript
const value = useTracker(
  async (reactivePlugin) =>
    await reactivePlugin.settings.getSetting('mySettingId'),
  [],
);
```
```

--------------------------------

### Registering Plugin Contributions

Source: https://plugins.remnote.com/advanced/widgets

Example of initializing a plugin and registering various contributions like powerups, widgets, and sidebar buttons within the `onActivate` lifecycle method.

```typescript
async function onActivate(plugin: ReactRNPlugin) {
  await plugin.app.registerPowerup(...);
  await plugin.app.registerWidget(...);
  await plugin.app.registerSidebarButton(...);
  await plugin.event.addListener(...);
}

```

--------------------------------

### Development Server Command

Source: https://plugins.remnote.com/in-depth-tutorial/step_2

Run this command in your plugin's root directory to start the development server. It will automatically rebuild and refresh your plugin when code changes are detected.

```bash
npm run dev
```

--------------------------------

### Run Development Server

Source: https://plugins.remnote.com/in-depth-tutorial/step_3

Starts the development server for the RemNote plugin using npm. This command is used to automatically refresh the plugin after code changes.

```bash
npm run dev

```

--------------------------------

### Basic useTracker Example

Source: https://plugins.remnote.com/advanced/tracker

Converts a non-reactive `findOne` method to a reactive one. The component re-renders when the specified Rem changes. Ensure you use the `reactivePlugin` argument for reactivity.

```javascript
const remId = '...';  
useTracker(  
  async (reactivePlugin) => await reactivePlugin.rem.findOne(remId), // tracked function to call whenever the Rem changes  
  [remId], // dependencies (like useEffect)  
);
```

--------------------------------

### Create a New Widget Component

Source: https://plugins.remnote.com/getting-started/quick_start_guide

Define a new React component for your widget. This example creates a simple 'MyWidget' component.

```typescript
import { renderWidget } from '@remnote/plugin-sdk';  
  
function MyWidget() {  
  return <div>My Widget</div>;  
}
  
renderWidget(MyWidget);

```

--------------------------------

### Setting Data in Properties

Source: https://plugins.remnote.com/advanced/powerups

Example of how to set a value for a custom powerup property on a Rem.

```APIDOC
### Setting Data in Properties

Here's an example of how to set the "message" property on our Custom Edit Later powerup to "Hello World".

```javascript
const anotherRem = await plugin.rem.createRem();
const editLaterPowerup = await plugin.powerup.getPowerupByCode(
  'customEditLater',
);
await anotherRem.addTag(powerup.id);
await anotherRem.setPowerupProperty(
  'customEditLater', // powerup code
  'message', // property code
  ['Hello World'], // value (RichTextInterface)
);
```

Note that powerup property values are stored as `RichTextInterface` values, rather than as strings or some other data format.
Since users can interact with your custom registered powerups like normal core powerups, they can also add properties manually by adding children to the tagged Rem and using the property Omnibar command.
```

--------------------------------

### Getting Data from Properties

Source: https://plugins.remnote.com/advanced/powerups

Demonstrates how to retrieve the value of a powerup property from a Rem.

```APIDOC
### Getting Data from Properties

To get the value of a property from a Rem tagged with a powerup, call the `.getPowerupProperty()` method:

```javascript
const value = await anotherRem.getPowerupProperty(
  'customEditLater', // powerup code
  'message', // property code
);
```
```

--------------------------------

### Example Plugin Manifest

Source: https://plugins.remnote.com/advanced/manifest

This is a sample JSON object representing a RemNote plugin manifest. It includes essential fields like ID, name, version, and required scopes.

```json
{
  "id": "demo_right_sidebar_plugin",
  "name": "Demo Right Sidebar Plugin",
  "author": "martin",
  "repoUrl": "",
  "enableOnMobile": false,
  "projectUrl": "",
  "supportUrl": "",
  "changelogUrl": "",
  "version": {
    "major": 0,
    "minor": 1,
    "patch": 0
  },
  "description": "Adds a right sidebar for editing Rem.",
  "requestNative": false,
  "requiredScopes": [
    {
      "type": "Plugin",
      "powerupCode": "book",
      "level": "ReadCreateModifyDelete"
    }
  ],
  "manifestVersion": 1
}
```

--------------------------------

### useTracker with Non-Reactive Plugin

Source: https://plugins.remnote.com/advanced/tracker

This example demonstrates a non-reactive `useTracker` call. It will not cause an error but will not refetch data when the Rem changes because the `plugin` variable from `usePlugin` was used instead of `reactivePlugin`.

```javascript
const plugin = usePlugin();  
const remId = '...';  
useTracker(  
  // non-reactive because we didn't use the  
  // reactivePlugin variable.  
  async () => await plugin.rem.findOne(remId),  
  [remId],  
);
```

--------------------------------

### Get Setting Directly

Source: https://plugins.remnote.com/advanced/settings

Retrieve a setting's value directly using the plugin's `getSetting` method.

```typescript
const value = await plugin.settings.getSetting('mySettingId");
```

--------------------------------

### useTracker for Settings Reactivity

Source: https://plugins.remnote.com/advanced/tracker

Tracks a setting value, causing the component to re-render when the setting is updated by the user. This example registers a string setting and then tracks its value.

```javascript
await plugin.settings.registerStringSetting({
  id: 'favoriteFood',
  title: 'Favorite Food?',
  defaultValue: 'Pizza',
});
const food = useTracker(
  async (reactivePlugin) =>
    await reactivePlugin.settings.getSetting('favoriteFood'),
);
```

--------------------------------

### Basic Component Structure for Async Call

Source: https://plugins.remnote.com/advanced/react

A basic React component structure demonstrating where an async operation might be initiated. This example highlights the need for handling async operations within React.

```typescript
export const MyComponent = () => {
  const plugin = usePlugin();
  const richText: RichTextInterface = ...
  // convert to string
  const str = ...
}
```

--------------------------------

### Initialize Plugin with onActivate

Source: https://plugins.remnote.com/in-depth-tutorial/step_1

The onActivate function is called when the plugin is loaded. It receives a ReactRNPlugin instance for interacting with RemNote services. Ensure the function body is empty to start clean.

```typescript
async function onActivate(plugin: ReactRNPlugin) {}

```

--------------------------------

### Registering a Widget in index.tsx

Source: https://plugins.remnote.com/advanced/widgets

Example of registering a custom widget named 'right_sidebar' to appear in the `RightSidebar` location. The first parameter must match the widget's filename.

```typescript
import { WidgetLocation, declareIndexPlugin } from '@remnote/plugin-sdk';

async function onActivate(plugin: ReactRNPlugin) {
  await plugin.app.registerWidget(
    'right_sidebar',
    WidgetLocation.RightSidebar,
    {
      dimensions: { height: 'auto', width: 350 },
      widgetTabIcon: 'https://i.imgur.com/MLaBDJw.png',
    },
  );
}

async function onDeactivate(plugin: ReactRNPlugin) {}

declareIndexPlugin(onActivate, onDeactivate);

```

--------------------------------

### Handling Async Calls with useEffect and useState (Messy)

Source: https://plugins.remnote.com/advanced/react

This example shows a less ideal way to handle async operations in React components using `useEffect` and `useState`. It is generally more verbose than using `useRunAsync`.

```typescript
export const MyComponent = () => {
  const plugin = usePlugin();
  const richText: RichTextInterface = ...
  // not possible - can't await async functions here
  // const str = await plugin.richText.toString(richText)
  // we could use useEffect and useState, but it's pretty messy
  const [str, setStr] = useState();
  useEffect(() => {
    const setStr = async () => {
      setStr(await plugin.richText.toString(richText));
    }
    setStr();
  }, [richText])
}
```

--------------------------------

### Get Tag Properties

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Fetch all properties of a tag by getting its children and filtering for those that are properties using `c.isProperty()`.

```javascript
const tag = ... 
const children = await tag.getChildrenRem();
const properties = await filterAsync(children, c => c.isProperty());
```

--------------------------------

### Initialize Plugin Manifest

Source: https://plugins.remnote.com/getting-started/quick_start_guide

Execute this command to generate the `manifest.json` file by providing project details.

```bash
npx remnote-plugin init  

```

--------------------------------

### Build Plugin with npm

Source: https://plugins.remnote.com/advanced/submitting_plugins

Run this command in your plugin project's root directory to build the plugin. This creates a zip file for uploading.

```bash
npm run build
```

--------------------------------

### Widgets Folder Structure

Source: https://plugins.remnote.com/advanced/project_structure

This folder contains the plugin's widgets, including the main `index.tsx` which registers contributions, and `widget1.tsx` as an example of a React component embeddable within RemNote.

```tree
 ┣ 📂 widgets  
 ┣ ┃ 📜 index.tsx  
 ┃ ┗ 📜 widget1.tsx  

```

--------------------------------

### Initialize Snippet Plugin Metadata

Source: https://plugins.remnote.com/custom-css

Execute this command within your plugin folder to generate the `manifest.json` file by answering prompted questions.

```bash
npx remnote-plugin init

```

--------------------------------

### remsReferencingThis

Source: https://plugins.remnote.com/api/classes/Rem

Gets all Rems that this Rem is referencing.

```APIDOC
## remsReferencingThis

### Description
Gets all Rems that this Rem is referencing.

### Method
`remsReferencingThis()`

### Returns
`Promise<Rem[]>`
```

--------------------------------

### remsBeingReferenced

Source: https://plugins.remnote.com/api/classes/Rem

Gets all Rems that are referencing this Rem.

```APIDOC
## remsBeingReferenced

### Description
Gets all Rems that are referencing this Rem.

### Method
`remsBeingReferenced()`

### Returns
`Promise<Rem[]>`
```

--------------------------------

### positionAmongstSiblings

Source: https://plugins.remnote.com/api/classes/Rem

Gets the position of the Rem amongst its siblings.

```APIDOC
## positionAmongstSiblings

### Description
Gets the position of the Rem amongst its siblings.

### Method
`positionAmongstSiblings(portalId?)`

### Parameters
#### Path Parameters
- **portalId** (string) - Optional portal ID.

### Returns
`Promise<undefined | number>`
```

--------------------------------

### getFocusedPaneId

Source: https://plugins.remnote.com/api/classes/WindowNamespace

Gets the ID of the currently focused pane.

```APIDOC
## getFocusedPaneId

### Description
Gets the ID of the currently focused pane.

### Method
`Promise<string>`

### Returns
`Promise<string>`
```

--------------------------------

### getNumRemainingCards

Source: https://plugins.remnote.com/api/classes/QueueNamespace

Gets the number of cards remaining in the queue.

```APIDOC
## getNumRemainingCards

### Description
Gets the number of cards remaining in the queue.

### Method
`getNumRemainingCards()`

### Returns
`Promise<undefined | number>` - A promise that resolves with the number of remaining cards or undefined.
```

--------------------------------

### positionAmongstVisibleSiblings

Source: https://plugins.remnote.com/api/classes/Rem

Gets the position of the Rem amongst its visible siblings.

```APIDOC
## positionAmongstVisibleSiblings

### Description
Gets the position of the Rem amongst its visible siblings.

### Method
`positionAmongstVisibleSiblings(portalId?)`

### Parameters
#### Path Parameters
- **portalId** (string) - Optional portal ID.

### Returns
`Promise<undefined | number>`
```

--------------------------------

### getOpenPaneRemId

Source: https://plugins.remnote.com/api/classes/WindowNamespace

Gets the Rem ID associated with a specific pane.

```APIDOC
## getOpenPaneRemId

### Description
Gets the Rem ID associated with a specific pane.

### Method
`Promise<undefined | string>`

### Parameters
#### Path Parameters
- **paneId** (undefined | string) - Required - The ID of the pane.

### Returns
`Promise<undefined | string>`
```

--------------------------------

### Get Property Type

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Retrieves the type of a given property.

```APIDOC
## Get Property Type

### Description
Retrieves the type of a given property. Available types can be found in the `PropertyType` enum.

### Method
`property.getPropertyType()`

### Parameters
- **property** (PropertyRem) - The property Rem whose type is to be retrieved.

### Response
- **type** (PropertyType) - The type of the property.
```

--------------------------------

### Project Root Files

Source: https://plugins.remnote.com/advanced/project_structure

The project root contains essential configuration files for compilation, packaging, and project metadata. These files are typically preconfigured and can often be ignored.

```tree
 ┣ 📜 tsconfig.json  
 ┣ 📜 webpack.config.js  
 ┣ 📜 README.md  
 ┣ 📜 package.json  
 ┣ 📜 package-lock.json  
 ┗ 📜 postcss.config.js  

```

--------------------------------

### Clone Snippet Plugin Template Repository

Source: https://plugins.remnote.com/custom-css

Use this Git command to download the pre-configured snippet template from GitHub to your local machine.

```bash
git clone <link>

```

--------------------------------

### collapseSelection

Source: https://plugins.remnote.com/api/classes/EditorNamespace

Collapses the current selection to either its start or end.

```APIDOC
## collapseSelection

### Description
Collapses the current selection to either its start or end.

### Method
`collapseSelection(to: "end" | "start")`

### Parameters
#### Path Parameters
- **to** (string) - Required - Specifies whether to collapse to 'end' or 'start'.

### Returns
`Promise<void>`
```

--------------------------------

### useRunAsync

Source: https://plugins.remnote.com/api/modules

Hook to safely run an asynchronous function and get its result.

```APIDOC
## useRunAsync

### Description
Safely executes an asynchronous function and returns its result. This hook is useful for managing the lifecycle and potential errors of async operations within React components.

### Type parameters

- `T` - The return type of the asynchronous function.

### Parameters

- `fn` (() => Promise<T>) - The asynchronous function to execute.
- `deps` (any[]) - An array of dependencies, similar to `useEffect`'s dependency array, to control when the function is re-executed.

### Returns

`undefined | T` - The result of the asynchronous function, or `undefined` if it hasn't run yet or is currently running.
```

--------------------------------

### getFocusedEditorText

Source: https://plugins.remnote.com/api/classes/EditorNamespace

Gets the rich text content of the currently focused editor.

```APIDOC
## getFocusedEditorText

### Description
Gets the rich text content of the currently focused editor.

### Method
`getFocusedEditorText()`

### Returns
`Promise<undefined | RichTextInterface>`
```

--------------------------------

### constructor

Source: https://plugins.remnote.com/api/classes/RichTextEditor

Initializes a new instance of the RichTextEditor class. It accepts properties of type RichTextEditorProps.

```APIDOC
## constructor

### Description
Initializes a new instance of the RichTextEditor class.

### Parameters
#### Parameters
- **props** (RichTextEditorProps | Readonly<RichTextEditorProps>) - The properties for the RichTextEditor.

### Inherited from
React.Component<RichTextEditorProps>.constructor
```

```APIDOC
## constructor

### Description
Initializes a new instance of the RichTextEditor class.

### Parameters
#### Parameters
- **props** (RichTextEditorProps) - The properties for the RichTextEditor.
- **context** (any) - The context for the RichTextEditor.

### Inherited from
React.Component<RichTextEditorProps>.constructor
```

--------------------------------

### Get Properties of a Tag

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Retrieves all properties associated with a given tag.

```APIDOC
## Get Properties of a Tag

### Description
Retrieves all properties associated with a given tag by examining its children and filtering for those that are properties.

### Method
`tag.getChildrenRem()` and filtering

### Parameters
- **tag** (TagRem) - The tag Rem whose properties are to be retrieved.

### Response
- **properties** (Array<PropertyRem>) - An array of Rem objects representing the properties of the tag.
```

--------------------------------

### Public Folder Structure

Source: https://plugins.remnote.com/advanced/project_structure

The `public` folder is for static assets like images. It also contains `manifest.json`, which holds crucial plugin metadata such as ID, version, and author.

```tree
 ┣ 📂 public  
 ┃ ┣ 📜 logo.svg  
 ┃ ┗ 📜 manifest.json  

```

--------------------------------

### substring

Source: https://plugins.remnote.com/api/classes/RichTextNamespace

Extracts a portion of the rich text based on start and end indices.

```APIDOC
## substring

### Description
Extracts a portion of the rich text based on start and end indices.

### Method
`substring(richText: RichTextInterface, start: number, end?: number): Promise<RichTextInterface>`

### Parameters
- **richText** (RichTextInterface) - The rich text object.
- **start** (number) - The starting index of the substring.
- **end** (number, optional) - The ending index of the substring.

### Returns
A promise that resolves to a new rich text object representing the substring.
```

--------------------------------

### getOperatingSystem

Source: https://plugins.remnote.com/api/classes/AppNamespace

Retrieves the current operating system of the application environment.

```APIDOC
## getOperatingSystem

### Description
Retrieves the current operating system.

### Method
`getOperatingSystem()`

### Returns
`Promise<OperatingSystem>`
```

--------------------------------

### PreviewRemCards Constructor

Source: https://plugins.remnote.com/api/classes/PreviewRemCards

Initializes a new instance of the PreviewRemCards component. It can be constructed with props only, or with props and context.

```APIDOC
## Constructor

### new PreviewRemCards(props: PreviewRemCardsProps)

#### Parameters
- **props** (PreviewRemCardsProps) - The properties for the component.

### new PreviewRemCards(props: PreviewRemCardsProps, context: any)

#### Parameters
- **props** (PreviewRemCardsProps) - The properties for the component.
- **context** (any) - The context for the component.
```

--------------------------------

### Create a Table

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Use `plugin.rem.createTable` to create a new table associated with a specific tag.

```javascript
const tableRem = await plugin.rem.createTable(tagId);
```

--------------------------------

### indexOf

Source: https://plugins.remnote.com/api/classes/RichTextNamespace

Finds the index of a character within the rich text, starting from a specified position.

```APIDOC
## indexOf

### Description
Finds the index of a character within the rich text, starting from a specified position.

### Method
`indexOf(richText: RichTextInterface, character: string, startChar?: number): Promise<number>`

### Parameters
* `richText` (RichTextInterface) - The rich text object to search within.
* `character` (string) - The character to find.
* `startChar` (number, optional) - The starting index for the search.

### Returns
`Promise<number>` - A promise that resolves with the index of the character, or -1 if not found.
```

--------------------------------

### Getting Rem Tagged with Your Powerup

Source: https://plugins.remnote.com/advanced/powerups

Retrieves a list of all Rem that are tagged with a specific custom powerup.

```APIDOC
## Getting Rem Tagged with Your Powerup

You can easily get a list of all the Rem tagged with your powerup by using the `.taggedRem()` method on the powerup Rem object.

```javascript
const editLaterPowerup = await plugin.powerup.getPowerupByCode(
  'customEditLater',
);
const editLaters = await editLaterPowerup.taggedRem();
```
```

--------------------------------

### Get and Set Cell Values

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Retrieves or updates the value of a specific cell within a table row and property.

```APIDOC
## Get and Set Cell Values

### Description
Retrieves or updates the value of a specific cell within a table row and property.

### Method
`row.getTagPropertyValue(propertyId)` and `row.setTagPropertyValue(propertyId, value)`

### Parameters
- **row** (RowRem) - The Rem representing the table row.
- **property** (PropertyRem) - The property Rem representing the table column.
- **value** (any) - The new value to set for the cell (for `setTagPropertyValue`).

### Response
- **value** (any) - The current value of the cell (for `getTagPropertyValue`).
```

--------------------------------

### getPlatform

Source: https://plugins.remnote.com/api/classes/AppNamespace

Retrieves the current platform of the application environment.

```APIDOC
## getPlatform

### Description
Retrieves the current platform.

### Method
`getPlatform()`

### Returns
`Promise<Platform>`
```

--------------------------------

### Get Tagged Rems (Table Rows)

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Retrieves all Rems tagged with the specified tag, which represent the rows of a table.

```APIDOC
## Get Tagged Rems (Table Rows)

### Description
Retrieves all Rems tagged with the specified tag, which represent the rows of a table. Note that this returns all Rems tagged with the table tag, not just those currently displayed in the table.

### Method
`tag.taggedRem()`

### Parameters
- **tag** (TagRem) - The tag Rem representing the table.

### Response
- **rows** (Array<Rem>) - An array of Rem objects that are tagged with the table's tag.
```

--------------------------------

### Queue Constructors

Source: https://plugins.remnote.com/api/classes/Queue

Details the constructors available for the Queue class, including parameter types and inheritance.

```APIDOC
## Constructors

### constructor

• **new Queue**(`props`)

#### Parameters

Name| Type  
---|---
`props`| `QueueProps` | `Readonly`<`QueueProps`>

#### Inherited from
React.Component<QueueProps>.constructor

• **new Queue**(`props`, `context`)

#### Parameters

Name| Type  
---|---
`props`| `QueueProps`  
`context`| `any`  

#### Inherited from
React.Component<QueueProps>.constructor
```

--------------------------------

### SimpleCommand Interface

Source: https://plugins.remnote.com/api/interfaces/SimpleCommand

This interface represents a simple command with an action and an ID.

```APIDOC
## Interface: SimpleCommand

### Description
Represents a simple command that can be executed.

### Properties

#### action
- **action** (`CommandFn`) - The function to execute for this command.

#### id
- **id** (`string`) - A unique identifier for this command.
```

--------------------------------

### getLastTimeMovedTo Method

Source: https://plugins.remnote.com/api/classes/Rem

Gets the timestamp of when the current Rem was last moved. This asynchronous method returns a Promise resolving to a number.

```APIDOC
## getLastTimeMovedTo Method

▸ **getLastTimeMovedTo**(): `Promise`<`number`>

### Returns
`Promise`<`number`>
```

--------------------------------

### createPortal

Source: https://plugins.remnote.com/api/classes/RemNamespace

Creates a new Rem that functions as a portal.

```APIDOC
## createPortal

### Description
Creates a new Rem that functions as a portal.

### Method
`Promise<undefined | Rem>`

### Parameters
None
```

--------------------------------

### Get Property Type

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Determine the type of a property using the `property.getPropertyType()` method. Available types are defined in the `PropertyType` enum.

```javascript
const property = ... 
const type = await property.getPropertyType();
```

--------------------------------

### LoadingSpinner Constructors

Source: https://plugins.remnote.com/api/classes/LoadingSpinner

Details the constructors for the LoadingSpinner component, showing the parameters accepted for initialization.

```APIDOC
## Constructors

### constructor

`new LoadingSpinner(props: LoadingSpinnerProps)`

**Parameters:**
* `props` (LoadingSpinnerProps): Properties for the LoadingSpinner.

### constructor

`new LoadingSpinner(props: LoadingSpinnerProps, context: any)`

**Parameters:**
* `props` (LoadingSpinnerProps): Properties for the LoadingSpinner.
* `context` (any): Context for the LoadingSpinner.
```

--------------------------------

### RemViewer Component Usage

Source: https://plugins.remnote.com/advanced/remnote_components

Example of embedding a RemViewer component with a specified width. The width is set to 50% of its parent container.

```html
<div>
  <RemViewer remId='remId' width='50%'>
</div>
```

--------------------------------

### Get Setting with Hook

Source: https://plugins.remnote.com/advanced/settings

Retrieve a setting's value using the `useTracker` hook. Pass the setting ID to the callback function.

```typescript
const value = useTracker(
  async (reactivePlugin) =>
    await reactivePlugin.settings.getSetting('mySettingId'),
  [],
);
```

--------------------------------

### Register SelectedTextDictionary Widget

Source: https://plugins.remnote.com/in-depth-tutorial/step_1

Register a widget in the `onActivate` method. The first parameter is the widget's file name, the second is its render location, and the third is an object for widget options like dimensions and icons.

```typescript
async function onActivate(plugin: ReactRNPlugin) {
  await plugin.app.registerWidget(
    'selected_text_dictionary',
    WidgetLocation.SelectedTextMenu,
    {
      dimensions: {
        height: 'auto',
        width: '100%',
      },
      widgetTabIcon: 'https://cdn-icons-png.flaticon.com/512/2069/2069571.png',
      widgetTabTitle: 'Dictionary',
    },
  );
}
```

--------------------------------

### Get and Set Cell Values

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Access and modify cell values within a table row using `row.getTagPropertyValue()` and `row.setTagPropertyValue()`, referencing the property by its ID.

```javascript
const row = ... 
const property = ... 
const value = await row.getTagPropertyValue(property._id);
await row.setTagPropertyValue(property._id, ["New Value"]);
```

--------------------------------

### Get Table Rows

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Retrieve all Rem tagged with the table's tag using `tag.taggedRem()`. Note that this includes all tagged Rem, not just those within the table.

```javascript
const tag = ... 
const rows = await tag.taggedRem();
```

--------------------------------

### getSetting

Source: https://plugins.remnote.com/api/classes/SettingsNamespace

Retrieves the value of a specific setting by its ID. The type of the setting is determined by the generic type parameter T.

```APIDOC
## getSetting <T>

### Description
Retrieves the value of a specific setting by its ID.

### Method
`getSetting<T>(settingId: string): Promise<T>`

### Parameters
#### Path Parameters
- **settingId** (string) - Required - The unique identifier for the setting.

### Returns
`Promise<T>` - A promise that resolves with the value of the setting.
```

--------------------------------

### Get Powerup Property Data

Source: https://plugins.remnote.com/advanced/powerups

Retrieve the data stored in a specific property of a built-in powerup. Ensure you know the powerup code and the property code.

```typescript
await plugin.powerup.getPowerupProperty(BuiltInPowerupCodes.Link, 'URL');
```

--------------------------------

### getPracticeDirection

Source: https://plugins.remnote.com/api/classes/Rem

Retrieves the current practice direction setting.

```APIDOC
## getPracticeDirection

### Description
Retrieves the current practice direction setting.

### Method
GET

### Endpoint
/rem/practiceDirection

### Returns
#### Success Response (200)
- **direction** (string) - The current practice direction ('both', 'none', 'forward', 'backward').
```

--------------------------------

### PluginSettingBase Interface Properties

Source: https://plugins.remnote.com/api/interfaces/PluginSettingBase

This snippet details the properties available on the PluginSettingBase interface.

```APIDOC
## Interface: PluginSettingBase<T>

### Type parameters

`T` extends `string` | `boolean` | `number`

### Properties

#### defaultValue

- `Optional` **defaultValue**: `T`

#### description

- `Optional` **description**: `string`

#### id

- **id**: `string`

#### title

- **title**: `string`
```

--------------------------------

### render Method

Source: https://plugins.remnote.com/api/classes/Queue

Describes the render method of the Queue class, which is responsible for rendering the component's UI.

```APIDOC
## Methods

### render

▸ **render**(): `Element`

#### Returns
`Element`

#### Overrides
React.Component.render
```

--------------------------------

### waitForInitialSync

Source: https://plugins.remnote.com/api/classes/AppNamespace

Waits until the initial synchronization process is complete.

```APIDOC
## waitForInitialSync

### Description
Waits for the initial sync to complete.

### Method
`waitForInitialSync()`

### Returns
`Promise<void>`
```

--------------------------------

### Get Built-in Powerup by Code

Source: https://plugins.remnote.com/advanced/powerups

Retrieve a RemNote built-in powerup object using its predefined code. This is useful for interacting with core functionalities like the Link powerup.

```typescript
await plugin.powerup.getPowerupByCode(BuiltInPowerupCodes.Link);
```

--------------------------------

### Create a Simple React Widget

Source: https://plugins.remnote.com/in-depth-tutorial/step_1

Defines a basic React component for a RemNote widget that displays 'Hello World!'. This component will be rendered by the plugin system.

```typescript
import { renderWidget } from '@remnote/plugin-sdk';

function SelectedTextDictionary() {
  return <div>Hello World!</div>;
}

renderWidget(SelectedTextDictionary);

```

--------------------------------

### Register String Setting

Source: https://plugins.remnote.com/advanced/settings

Register a basic string setting. Use `multiline: true` for multiline text input.

```typescript
async function onActivate(plugin: ReactRNPlugin) {
  await plugin.settings.registerStringSetting({
    id: "name",
    title: "What is your name?",
    defaultValue: "Bob",
  });
}
```

```typescript
async function onActivate(plugin: ReactRNPlugin) {
  await plugin.settings.registerStringSetting({
    id: "name",
    title: "What is your name?",
    defaultValue: "Bob",
    multiline: true,
  });
}
```

--------------------------------

### Create PreviewDefinitions UI Component

Source: https://plugins.remnote.com/in-depth-tutorial/step_4

This component displays word definitions, phonetics, and provides a save action. It uses Tailwind CSS for styling and assumes the presence of WordData and GroupedDefinition models.

```typescript
import React from 'react';
import { WordData, GroupedDefinition } from '../models';

function capitalize(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

const groupBy = <T, K extends keyof any>(list: T[], getKey: (item: T) => K) =>
  list.reduce((previous, currentItem) => {
    const group = getKey(currentItem);
    if (!previous[group]) previous[group] = [];
    previous[group].push(currentItem);
    return previous;
  }, {} as Record<K, T[]>);

interface WordPreviewProps {
  wordData: WordData;
  onSelectDefinition: (d: GroupedDefinition) => void;
}

export const PreviewDefinitions: React.FC<WordPreviewProps> = (props) => {
  const { word, phonetics, meanings } = props.wordData;
  const phonetic = phonetics[0];
  const audio = phonetic?.audio;
  const groupedMeanings = groupBy(meanings, (x) => x.partOfSpeech);
  return (
    <div>
      <div className="flex flex-row items-center mb-4">
        <div className="mr-3 text-lg font-semibold">{capitalize(word)}</div>
        {audio && (
          <div
            className="w-4 h-4 cursor-pointer"
            onClick={() => new Audio(audio).play()}
          >
            🔊
          </div>
        )}
      </div>
      {Object.entries(groupedMeanings)
        .map(([partOfSpeech, meanings]) => (
          <div className="mb-4">
            <div className="flex flex-row items-center mb-3">
              <div className="text-base font-medium mr-3">{partOfSpeech}</div>
              <div
                className="w-4 h-4 cursor-pointer"
                onClick={() =>
                  props.onSelectDefinition({
                    word,
                    phonetic,
                    meanings,
                    partOfSpeech,
                  })
                }
              >
                💾
              </div>
            </div>
            {meanings.map((meaning) =>
              meaning.definitions.map((def, idx) => (
                <div className="mb-2">
                  <span className="text-gray-400 ml-3">{idx + 1}</span>{' '}
                  <span className="font-medium">
                    {def.definition.replace(/\.$/, '')}
                  </span>
                  {def.example ? <span className="italic">: {def.example}</span> : ''}
                </div>
              )),
            )}
          </div>
        ))
        .flat()}
    </div>
  );
};

```

--------------------------------

### Enable Forward Flashcard Practice

Source: https://plugins.remnote.com/advanced/rem_api

Control study direction by enabling forward practice for flashcards using `setEnableForwardPractice()`.

```javascript
const plugin = usePlugin();
const remId = '...';
const rem = useRunAsync(async () => await plugin.rem.findOne(remId), [remId]);
rem.setEnableForwardPractice(true);
```

--------------------------------

### Get Rem Tagged with a Custom Powerup

Source: https://plugins.remnote.com/advanced/powerups

Retrieve a list of all Rem that are tagged with a specific custom powerup. This is done by calling the `.taggedRem()` method on the powerup's Rem object.

```typescript
const editLaterPowerup = await plugin.powerup.getPowerupByCode(
  'customEditLater',
);
const editLaters = await editLaterPowerup.taggedRem();
```

--------------------------------

### getAll

Source: https://plugins.remnote.com/api/classes/CardNamespace

Retrieves all available cards.

```APIDOC
## getAll

### Description
Retrieves all available cards.

### Method
getAll

### Returns
`Promise<Card[]>` - A promise that resolves to an array of all Card objects.
```

--------------------------------

### registerCommand

Source: https://plugins.remnote.com/api/classes/AppNamespace

Registers a new command that can be executed within the application.

```APIDOC
## registerCommand

### Description
Registers a new command.

### Method
`registerCommand(command: Command)`

### Parameters
#### Path Parameters
- **command** (Command) - Description

### Returns
`Promise<void>`
```

--------------------------------

### registerPowerup

Source: https://plugins.remnote.com/api/classes/AppNamespace

Registers a new power-up with specified properties and options.

```APIDOC
## registerPowerup

### Description
Registers a new power-up.

### Method
`registerPowerup(args: { code: string; description: string; name: string; options: { slots: { code: string; name: string; onlyProgrammaticModifying?: boolean | undefined; hidden?: boolean | undefined; enumValues?: Record<string, string> | undefined; defaultEnumValue?: string | undefined; propertyType?: PropertyType | undefined; propertyLocation?: PropertyLocation | undefined; selectSourceType?: SelectSourceType | undefined; }[] } | { properties: { code: string; name: string; onlyProgrammaticModifying?: boolean | undefined; hidden?: boolean | undefined; enumValues?: Record<string, string> | undefined; defaultEnumValue?: string | undefined; propertyType?: PropertyType | undefined; propertyLocation?: PropertyLocation | undefined; selectSourceType?: SelectSourceType | undefined; } } })`

### Parameters
#### Path Parameters
- **args** (Object) - Description
  - **args.code** (string) - Description
  - **args.description** (string) - Description
  - **args.name** (string) - Description
  - **args.options** (Object) - Description

### Returns
`Promise<void>`
```

--------------------------------

### RemRichTextEditor Component Usage

Source: https://plugins.remnote.com/advanced/remnote_components

Example of embedding a RemRichTextEditor component with a maximum width and fixed height. The maximum width is set to 70% of its parent, and the height is fixed at 200 pixels.

```html
<div>
  <RemRichTextEditor maxWidth='70%' height={200}>
</div>
```

--------------------------------

### usePlugin

Source: https://plugins.remnote.com/api/modules

Hook to access the main RNPlugin instance.

```APIDOC
## usePlugin

### Description
Provides access to the main `RNPlugin` instance, which is the entry point for interacting with the RemNote plugin API.

### Returns

`RNPlugin` - The RNPlugin instance.
```

--------------------------------

### Create manifest.json for CSS Snippet

Source: https://plugins.remnote.com/custom-css

This JSON file defines the metadata for your CSS snippet plugin. Replace placeholder values like 'YOUR_SNIPPET_ID' with your specific information.

```json
{
  "manifestVersion": 1,
  "id": "YOUR_SNIPPET_ID",
  "name": "YOUR_SNIPPET_NAME",
  "author": "YOUR_NAME",
  "repoUrl": "",
  "version": {
    "major": 0,
    "minor": 0,
    "patch": 1
  },
  "theme": [],
  "enableOnMobile": false,
  "description": "YOUR_SNIPPET_DESCRIPTION",
  "requestNative": false,
  "requiredScopes": [
    {
      "type": "All",
      "level": "Read"
    }
  ]
}

```

--------------------------------

### Subscribe to Plugin Events with useAPIEventListener

Source: https://plugins.remnote.com/advanced/react

Simplify event subscription in React components using `useAPIEventListener`. This hook eliminates the need for manual `useEffect` setup and cleanup of event listeners.

```typescript
useAPIEventListener(AppEvents.GlobalRemChanged, undefined, async (data) => {
  if (data.remId) {
    const rem = await plugin.rem.findOne(data.remId);
    setRemWordsMap(Re.set(rem.id, allRemText(rem)));
  }
});
```

--------------------------------

### Get Custom Powerup Property Value

Source: https://plugins.remnote.com/advanced/powerups

Retrieve the value of a specific property from a Rem tagged with a custom powerup. Use the powerup code and property code to identify the desired data.

```typescript
const value = await anotherRem.getPowerupProperty(
  'customEditLater',
  'message',
);
```

--------------------------------

### openFloatingWidget

Source: https://plugins.remnote.com/api/classes/WindowNamespace

Opens a new floating widget.

```APIDOC
## openFloatingWidget

### Description
Opens a new floating widget.

### Method
`Promise<string>`

### Parameters
#### Path Parameters
- **fileName** (string) - Required - The name of the file to open as a widget.
- **position** (Object) - Required - The desired position of the widget.
  - **bottom** (number) - Optional
  - **left** (number) - Optional
  - **right** (number) - Optional
  - **top** (number) - Optional
- **classContainer** (string) - Optional - A CSS class to apply to the widget container.
- **closeWhenClickOutside** (boolean) - Optional - Whether to close the widget when clicking outside of it.

### Returns
`Promise<string>` - The ID of the newly opened floating widget.
```

--------------------------------

### Widget Options Configuration

Source: https://plugins.remnote.com/in-depth-tutorial/step_1

Configure widget options, including dimensions and tab icons. The `dimensions` object can specify `height` and `width`. `widgetTabIcon` provides a URL for the icon displayed in tabs.

```typescript
{
  dimensions: {
    height: 'auto',   // expands your widget's size to contain its content.  
    width: 350        // fixed width of 350px  
  },
  widgetTabIcon: 'https://cdn-icons-png.flaticon.com/512/2069/2069571.png',
}
```

--------------------------------

### Display Selected Text with useTracker

Source: https://plugins.remnote.com/in-depth-tutorial/step_2

Use `useTracker` to get the currently selected text and automatically re-render the component when the selection changes. This hook subscribes to selection events, ensuring the UI is always up-to-date.

```typescript
import {
  usePlugin,
  renderWidget,
  useTracker,
  SelectionType,
} from '@remnote/plugin-sdk';

function SelectedTextDictionary() {
  const plugin = usePlugin();

  const selText = useTracker(async (reactivePlugin) => {
    const sel = await reactivePlugin.editor.getSelection();
    if (sel?.type == SelectionType.Text) {
      return await plugin.richText.toString(sel.richText);
    } else {
      return '';
    }
  });

  return <div>{selText}</div>;
}

renderWidget(SelectedTextDictionary);
```

--------------------------------

### Source Folder Structure

Source: https://plugins.remnote.com/advanced/project_structure

The `src` folder houses all plugin source code, including components and stylesheets. The `widgets` subdirectory contains embeddable components.

```tree
 ┣ 📂 src  
 ┃ ┣ 📂 widgets  
 ┃ ┣ ┃ 📜 index.tsx  
 ┃ ┃ ┗ 📜 widget1.tsx  
 ┃ ┗ 📜 App.css  

```

--------------------------------

### registerWidget

Source: https://plugins.remnote.com/api/classes/AppNamespace

Registers a new widget at a specified location with given options.

```APIDOC
## registerWidget

### Description
Registers a new widget.

### Method
`registerWidget(fileName: string, location: WidgetLocation, options: WidgetOptions)`

### Parameters
#### Path Parameters
- **fileName** (string) - Description
- **location** (WidgetLocation) - Description
- **options** (WidgetOptions) - Description

### Returns
`Promise<void>`
```

--------------------------------

### track Function for Widgets

Source: https://plugins.remnote.com/advanced/tracker

The `track` function is used in non-React contexts (like widgets) to create reactive computations. It returns a function to stop the computation. This example logs the focused Rem and stops tracking after 10 seconds.

```typescript
async function onActivate(plugin: ReactRNPlugin) {  
  // Changing the focused Rem by clicking around in a document will log the current focused Rem.  
  const stop = plugin.track((reactivePlugin) => {  
    const rem = await reactivePlugin.focus.getFocusedRem();  
    console.log('Focused rem changed!', rem);
  });  
  
  // The computation is stopped after 10 seconds  
  // The function will not be re-run again when the focused Rem changes.  
  setTimeout(() => {  
    console.log('Stopping reactive computation!');  
    stop();  
  }, 1000 * 10);  
}
```

--------------------------------

### Register powerup with property options

Source: https://plugins.remnote.com/CHANGELOG

Register a powerup with property options for integration with tables. Define slots with their code, name, type, and location. Requires `plugin.app.registerPowerup`, `PropertyType`, and `PropertyLocation`.

```typescript
await plugin.app.registerPowerup(
  'Incremental',
  powerupCode,
  'Incremental Everything Powerup',
  {
    slots: [
      {
        code: prioritySlotCode,
        name: 'Priority',
        propertyType: PropertyType.NUMBER,
        propertyLocation: PropertyLocation.RIGHT,
      },
      {
        code: nextRepDateSlotCode,
        name: 'Next Rep Date',
        propertyType: PropertyType.DATE,
        propertyLocation: PropertyLocation.RIGHT,
      },
    ],
  },
);
```

--------------------------------

### Project Structure Summary

Source: https://plugins.remnote.com/in-depth-tutorial/setup

Overview of the essential files and directories in a RemNote plugin project. The `public` folder contains metadata like `manifest.json`, while `src` holds the plugin's source code.

```tree
 📦 <your repo name>    - The root of the project  
 ┣ 📂 public            - Store static asset files like images here  
 ┃ ┗ 📜 manifest.json   - Contains plugin metadata, like the plugin id and author name  
 ┣ 📂 src               - Your source code  
 ┃ ┣ 📂 widgets         - Your widgets  
 ┃ ┣ ┃ 📜 index.tsx     - Entrypoint for the plugin  
 ┃ ┃ ┗ 📜 widget1.tsx   - Embeddable widget file which loads a React component  


```

--------------------------------

### RichText Constructor

Source: https://plugins.remnote.com/api/classes/RichText

The RichText class can be instantiated with different sets of props and context.

```APIDOC
## constructor

### new RichText(props)

#### Parameters

Name| Type  
---|---
`props`| `RichTextProps` | `Readonly`<`RichTextProps`>

#### Inherited from

React.Component<RichTextProps>.constructor

### new RichText(props, context)

#### Parameters

Name| Type  
---|---
`props`| `RichTextProps`  
`context`| `any`  

#### Inherited from

React.Component<RichTextProps>.constructor
```

--------------------------------

### Tagging Rem with Powerups

Source: https://plugins.remnote.com/advanced/powerups

Demonstrates how to apply a registered powerup to a Rem.

```APIDOC
## Tagging Rem with Powerups

When you register a powerup, this will create a powerup Rem with the name you specified in the user's knowledgebase. You can apply a powerup to another Rem by tagging that Rem with the powerup Rem:

```javascript
const anotherRem = await plugin.rem.createRem();
// pass the powerup code we used to register the powerup
const editLaterPowerup = await plugin.powerup.getPowerupByCode(
  'customEditLater',
);
await anotherRem.addTag(editLaterPowerup._id);
```

This is essentially the same as typing "##" followed by the name of a powerup and pressing enter in RemNote.
Of course, you aren't limited to using your custom powerup inside plugins, users will also be able to use exactly the same workflows as with core powerups.
```

--------------------------------

### Create Table

Source: https://plugins.remnote.com/advanced/interacting_with_tables

Creates a new table associated with a given tag ID.

```APIDOC
## Create Table

### Description
Creates a new table associated with a given tag ID.

### Method
`plugin.rem.createTable(tagId)`

### Parameters
- **tagId** (string) - The ID of the tag to associate with the table.

### Response
- **tableRem** (Rem) - The newly created table Rem.
```

--------------------------------

### Plugin Widget Directory Structure

Source: https://plugins.remnote.com/advanced/widgets

Illustrates the typical directory structure for widgets within a RemNote plugin project.

```tree
┣ 📂 src  
┃ ┣ 📂 widgets  
┃ ┣ ┃ 📜 index.tsx  
┃ ┃ ┗ 📜 widget1.tsx  

```

--------------------------------

### RemViewer Constructor

Source: https://plugins.remnote.com/api/classes/RemViewer

Initializes a new instance of RemViewer. It can be constructed with props only, or with props and context.

```APIDOC
## constructor

### new RemViewer(props: RemViewerProps)

#### Parameters
- `props` (RemViewerProps): Properties for the RemViewer component.

### new RemViewer(props: RemViewerProps, context: any)

#### Parameters
- `props` (RemViewerProps): Properties for the RemViewer component.
- `context` (any): Context for the RemViewer component.

#### Inherited from
React.Component<RemViewerProps>.constructor
```

--------------------------------

### Enable Backward Flashcard Practice

Source: https://plugins.remnote.com/advanced/rem_api

Control study direction by enabling backward practice for flashcards using `setEnableBackwardPractice()`.

```javascript
const plugin = usePlugin();
const remId = '...';
const rem = useRunAsync(async () => await plugin.rem.findOne(remId), [remId]);
rem.setEnableBackwardPractice(true);
```
Tokens:
Raw